Addon-docs: Resolve mdx-react-shim & @storybook/global correctly

.gitignore

@@ -50,3 +50,5 @@ code/playwright-results/
 code/playwright-report/
 code/playwright/.cache/
 code/bench-results/
+
+/packs

code/addons/docs/src/preset.ts

@@ -1,4 +1,5 @@
 import fs from 'fs-extra';
+import { dirname, join } from 'path';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { dedent } from 'ts-dedent';
@@ -50,7 +51,10 @@ async function webpack(
     skipCsf: true,
     ...mdxPluginOptions,
     mdxCompileOptions: {
-      providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+      providerImportSource: join(
+        dirname(require.resolve('@storybook/addon-docs/package.json')),
+        '/dist/shims/mdx-react-shim'
+      ),
       ...mdxPluginOptions.mdxCompileOptions,
       remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
         mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []

code/addons/essentials/src/docs/preset.ts

@@ -1,8 +1,13 @@
-/* eslint-disable import/export */
+import { dirname, join } from 'path';
+
+// eslint-disable-next-line import/export
 export * from '@storybook/addon-docs/dist/preset';
 
 export const mdxLoaderOptions = async (config: any) => {
   // eslint-disable-next-line no-param-reassign
-  config.mdxCompileOptions.providerImportSource = '@storybook/addon-essentials/docs/mdx-react-shim';
+  config.mdxCompileOptions.providerImportSource = join(
+    dirname(require.resolve('@storybook/addon-docs/package.json')),
+    '/dist/shims/mdx-react-shim'
+  );
   return config;
 };

code/builders/builder-vite/src/plugins/mdx-plugin.ts

@@ -3,6 +3,7 @@ import type { Plugin } from 'vite';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { createFilter } from 'vite';
+import { dirname, join } from 'path';
 
 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
 
@@ -33,7 +34,10 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
       const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
-          providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+          providerImportSource: join(
+            dirname(require.resolve('@storybook/addon-docs/package.json')),
+            '/dist/shims/mdx-react-shim'
+          ),
           ...mdxPluginOptions?.mdxCompileOptions,
           remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
             mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []

code/lib/preview/src/globals/runtime.ts

@@ -4,6 +4,7 @@ import * as CHANNELS from '@storybook/channels';
 import * as CLIENT_LOGGER from '@storybook/client-logger';
 import * as CORE_EVENTS from '@storybook/core-events';
 import * as PREVIEW_API from '@storybook/preview-api';
+import * as GLOBAL from '@storybook/global';
 
 // DEPRECATED, remove in 8.0
 import * as ADDONS from '@storybook/preview-api/dist/addons';
@@ -22,6 +23,7 @@ export const values: Required<Record<keyof typeof globals, any>> = {
   '@storybook/client-logger': CLIENT_LOGGER,
   '@storybook/core-events': CORE_EVENTS,
   '@storybook/preview-api': PREVIEW_API,
+  '@storybook/global': GLOBAL,
 
   // DEPRECATED, remove in 8.0
   '@storybook/addons': ADDONS,

code/lib/preview/src/globals/types.ts

@@ -1,6 +1,7 @@
 // Here we map the name of a module to their NAME in the global scope.
 export const globals = {
   '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__',
+  '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__',
   '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0
   '@storybook/channel-websocket': '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__', // @deprecated: remove in 8.0
   '@storybook/channels': '__STORYBOOK_MODULE_CHANNELS__',

scripts/run-registry.ts

@@ -7,6 +7,8 @@ import program from 'commander';
 import { runServer, parseConfigFile } from 'verdaccio';
 import pLimit from 'p-limit';
 import type { Server } from 'http';
+import { mkdir } from 'fs/promises';
+import { PACKS_DIRECTORY } from './utils/constants';
 // @ts-expect-error (Converted from ts-ignore)
 import { maxConcurrentTasks } from './utils/concurrency';
 import { listOfPackages } from './utils/list-packages';
@@ -53,12 +55,27 @@ const currentVersion = async () => {
   return version;
 };
 
-const publish = (packages: { name: string; location: string }[], url: string) => {
+const publish = async (packages: { name: string; location: string }[], url: string) => {
   logger.log(`Publishing packages with a concurrency of ${maxConcurrentTasks}`);
 
   const limit = pLimit(maxConcurrentTasks);
   let i = 0;
 
+  /**
+   * We need to "pack" our packages before publishing to npm because our package.json files contain yarn specific version "ranges".
+   * such as "workspace:*"
+   *
+   * We can't publish to npm if the package.json contains these ranges. So with `yarn pack` we create a tarball that we can publish.
+   *
+   * However this bug exists in NPM: https://github.com/npm/cli/issues/4533!
+   * Which causes the NPM CLI to disregard the tarball CLI argument and instead re-create a tarball.
+   * But NPM doesn't replace the yarn version ranges.
+   *
+   * So we create the tarball ourselves and move it to another location on the FS.
+   * Then we change-directory to that directory and publish the tarball from there.
+   */
+  await mkdir(PACKS_DIRECTORY, { recursive: true }).catch(() => {});
+
   return Promise.all(
     packages.map(({ name, location }) =>
       limit(
@@ -70,7 +87,9 @@ const publish = (packages: { name: string; location: string }[], url: string) =>
                 '.'
               )})`
             );
-            const command = `cd ${location} && yarn pack && npm publish ./package.tgz --registry ${url} --force --access restricted --ignore-scripts && rm ./package.tgz`;
+
+            const tarballFilename = `${name.replace('@', '').replace('/', '-')}.tgz`;
+            const command = `cd ${location} && yarn pack --out=${PACKS_DIRECTORY}/${tarballFilename} && cd ${PACKS_DIRECTORY} && npm publish ./${tarballFilename} --registry ${url} --force --access restricted --ignore-scripts`;
             exec(command, (e) => {
               if (e) {
                 rej(e);

scripts/utils/constants.ts

@@ -3,7 +3,9 @@ import { join } from 'path';
 export const AFTER_DIR_NAME = 'after-storybook';
 export const BEFORE_DIR_NAME = 'before-storybook';
 
+export const ROOT_DIRECTORY = join(__dirname, '..', '..');
 export const CODE_DIRECTORY = join(__dirname, '..', '..', 'code');
+export const PACKS_DIRECTORY = join(__dirname, '..', '..', 'packs');
 export const REPROS_DIRECTORY = join(__dirname, '..', '..', 'repros');
 export const SANDBOX_DIRECTORY = join(__dirname, '..', '..', 'sandbox');
 export const JUNIT_DIRECTORY = join(__dirname, '..', '..', 'test-results');