refactor the exports generation so it's the same as for manager

2025-04-04 14:21:15 +08:00 · 2022-11-22 10:12:29 +01:00 · 2022-11-22 10:12:29 +01:00 · a181638b2d
commit a181638b2d
parent 3dff5ea0fe
36 changed files with 226 additions and 551 deletions
--- a/code/lib/builder-manager/templates/template.ejs
+++ b/code/lib/builder-manager/templates/template.ejs
@ -8,7 +8,7 @@
    <link rel="shortcut icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

-    <link href="./sb-preview/index.mjs" rel="preload" as="script">
+    <link href="./sb-preview/runtime.mjs" rel="preload" as="script">

    <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>

--- a/code/lib/builder-vite/input/iframe.html
+++ b/code/lib/builder-vite/input/iframe.html
@ -28,7 +28,7 @@
    <script type="module">
      /* eslint-disable import/no-absolute-path, import/extensions, import/no-unresolved */
      
-      import '/sb-preview/index.mjs';
+      import '/sb-preview/runtime.mjs';
      import '/virtual:/@storybook/builder-vite/vite-app.js';
    </script>
  </body>
--- a/code/lib/builder-vite/src/optimizeDeps.ts
+++ b/code/lib/builder-vite/src/optimizeDeps.ts
@ -2,7 +2,7 @@ import * as path from 'path';
 import { normalizePath, resolveConfig } from 'vite';
 import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
 import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
-import { definitions } from '@storybook/preview/definitions';
+import { definitions } from '@storybook/preview/globals';
 import { listStories } from './list-stories';

 import type { ExtendedOptions } from './types';
--- a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts
+++ b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts
@ -101,8 +101,8 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
      if (source === virtualAddonSetupFile) {
        return virtualAddonSetupFile;
      }
-      if (source === '/sb-preview/index.mjs') {
-        return '/sb-preview/index.mjs';
+      if (source === '/sb-preview/runtime.mjs') {
+        return '/sb-preview/runtime.mjs';
      }

      return undefined;
@ -132,7 +132,7 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
      }

      // This is handled by the express router, not vite
-      if (id === '/sb-preview/index.mjs') {
+      if (id === '/sb-preview/runtime.mjs') {
        return '';
      }

--- a/code/lib/builder-webpack5/templates/preview.ejs
+++ b/code/lib/builder-webpack5/templates/preview.ejs
@ -38,7 +38,7 @@
    </script>
    <% } %>
    <script type="module">
-      import './sb-preview/index.mjs';
+      import './sb-preview/runtime.mjs';

      <% htmlWebpackPlugin.files.js.forEach(file => { %>
      import './<%= file %>';
--- a/code/lib/preview/package.json
+++ b/code/lib/preview/package.json
@ -22,69 +22,14 @@
  "sideEffects": false,
  "exports": {
    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/runtime.mjs",
+      "require": "./dist/runtime.js",
+      "types": "./dist/runtime.d.ts"
    },
-    "./dist/addons": {
-      "import": "./dist/addons.mjs",
-      "require": "./dist/addons.js",
-      "types": "./dist/addons.d.ts"
-    },
-    "./dist/client-api": {
-      "import": "./dist/client-api.mjs",
-      "require": "./dist/client-api.js",
-      "types": "./dist/client-api.d.ts"
-    },
-    "./dist/core-client": {
-      "import": "./dist/core-client.mjs",
-      "require": "./dist/core-client.js",
-      "types": "./dist/core-client.d.ts"
-    },
-    "./dist/global/addons": {
-      "import": "./dist/global/addons.mjs",
-      "require": "./dist/global/addons.js",
-      "types": "./dist/global/addons.d.ts"
-    },
-    "./dist/global/blocks": {
-      "import": "./dist/global/blocks.mjs",
-      "require": "./dist/global/blocks.js",
-      "types": "./dist/global/blocks.d.ts"
-    },
-    "./dist/global/client-api": {
-      "import": "./dist/global/client-api.mjs",
-      "require": "./dist/global/client-api.js",
-      "types": "./dist/global/client-api.d.ts"
-    },
-    "./dist/global/core-client": {
-      "import": "./dist/global/core-client.mjs",
-      "require": "./dist/global/core-client.js",
-      "types": "./dist/global/core-client.d.ts"
-    },
-    "./dist/global/preview-web": {
-      "import": "./dist/global/preview-web.mjs",
-      "require": "./dist/global/preview-web.js",
-      "types": "./dist/global/preview-web.d.ts"
-    },
-    "./dist/global/store": {
-      "import": "./dist/global/store.mjs",
-      "require": "./dist/global/store.js",
-      "types": "./dist/global/store.d.ts"
-    },
-    "./dist/preview-web": {
-      "import": "./dist/preview-web.mjs",
-      "require": "./dist/preview-web.js",
-      "types": "./dist/preview-web.d.ts"
-    },
-    "./dist/store": {
-      "import": "./dist/store.mjs",
-      "require": "./dist/store.js",
-      "types": "./dist/store.d.ts"
-    },
-    "./definitions": {
-      "import": "./dist/definitions.mjs",
-      "require": "./dist/definitions.js",
-      "types": "./dist/definitions.d.ts"
+    "./globals": {
+      "import": "./dist/globals.mjs",
+      "require": "./dist/globals.js",
+      "types": "./dist/globals.d.ts"
    },
    "./package.json": "./package.json"
  },
@ -94,10 +39,10 @@
  "typesVersions": {
    "*": {
      "*": [
-        "dist/index.d.ts"
+        "dist/runtime.d.ts"
      ],
-      "definitions": [
-        "dist/definitions.d.ts"
+      "globals": [
+        "dist/globals.d.ts"
      ]
    }
  },
@ -152,20 +97,8 @@
  "bundler": {
    "pre": "./scripts/generate-exports-file.ts",
    "entries": [
-      "./src/index.ts",
-      "./src/definitions.ts"
-    ],
-    "untypedEntries": [
-      "./src/global/addons.ts",
-      "./src/global/channel-postmessage.ts",
-      "./src/global/channel-websocket.ts",
-      "./src/global/channels.ts",
-      "./src/global/client-api.ts",
-      "./src/global/client-logger.ts",
-      "./src/global/core-client.ts",
-      "./src/global/core-events.ts",
-      "./src/global/preview-web.ts",
-      "./src/global/store.ts"
+      "./src/runtime.ts",
+      "./src/globals.ts"
    ]
  },
  "gitHead": "d2494e3f51ce0f55bcb1ef693a6477c669fbe666"
--- a/code/lib/preview/scripts/generate-exports-file.ts
+++ b/code/lib/preview/scripts/generate-exports-file.ts
@ -1,54 +1,34 @@
-/* eslint-disable no-console */
+/* eslint-disable import/no-extraneous-dependencies, no-console */
 import fs from 'fs-extra';
-import promiseFs from 'fs/promises';
 import path from 'path';
 import shelljs from 'shelljs';
-
-// populate global scope
-import '../src/index';
-
-const outFile = path.join(__dirname, '..', 'src', 'generated', 'exports.ts');
-const globalsFolder = path.join(__dirname, '..', 'src', 'global');
+import { dedent } from 'ts-dedent';

 const removeDefault = (input: string) => input !== 'default';
-const fileToPackage = (filename) => `@storybook/${filename.replace(/.ts$/, '')}`;

-/**
- * Iterate over the files in /src/global, and save off the names of their exports into a `exports.ts` file.
- */
+const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts');
+
 const run = async () => {
-  console.log('Generating exports.ts...');
+  const { values } = await import('../src/globals/runtime');
+  const data = Object.entries(values).reduce<Record<string, string[]>>((acc, [key, value]) => {
+    acc[key] = Object.keys(value).filter(removeDefault);
+    return acc;
+  }, {});

-  const exports = {};
-  const globalFiles = (await promiseFs.readdir(globalsFolder, { withFileTypes: true }))
-    .filter((item) => !item.isDirectory())
-    .map((item) => item.name);
-  const globalPackageNames = globalFiles.map(fileToPackage);
-
-  await Promise.all(
-    globalFiles.map(async (name) => {
-      const filename = path.join(globalsFolder, name);
-      return import(filename).then((mod) => {
-        exports[fileToPackage(name)] = Object.keys(mod).filter(removeDefault);
-      });
-    })
-  );
-
-  await fs.ensureFile(outFile);
+  console.log('Generating...');
+  await fs.ensureFile(location);
  await fs.writeFile(
-    outFile,
-    `
-// this file is generated by generate-exports-file.ts
-// this is done to prevent runtime dependencies from making it's way into the build/start script of the manager
-// the preview builder needs to know which dependencies are 'globalized' in the ui
+    location,
+    dedent`
+      // this file is generated by generate-exports-file.ts
+      // this is done to prevent runtime dependencies from making it's way into the build/start script of the manager
+      // the manager builder needs to know which dependencies are 'globalized' in the ui

-export type GlobalPackages = ${globalPackageNames.map((name) => JSON.stringify(name)).join(' | ')}
-
-export default ${JSON.stringify(exports, null, 2)} as const;`
+      export default ${JSON.stringify(data, null, 2)} as const;`
  );

  console.log('Linting...');
-  shelljs.exec(`yarn lint:js:cmd --fix ${outFile}`, {
+  shelljs.exec(`yarn lint:js:cmd --fix ${location}`, {
    cwd: path.join(__dirname, '..', '..', '..'),
  });
  console.log('Done!');
--- a/code/lib/preview/src/global/addons.ts
+++ b/code/lib/preview/src/global/addons.ts
@ -1,46 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../addons';
-
-const {
-  addons,
-  AddonStore,
-  applyHooks,
-  HooksContext,
-  isSupportedType,
-  makeDecorator,
-  mockChannel,
-  types,
-  useArgs,
-  useCallback,
-  useChannel,
-  useEffect,
-  useGlobals,
-  useMemo,
-  useParameter,
-  useReducer,
-  useRef,
-  useState,
-  useStoryContext,
-} = (globalThis as any).__STORYBOOK_MODULE_ADDONS__ as typeof MODULE;
-
-export {
-  addons,
-  AddonStore,
-  applyHooks,
-  HooksContext,
-  isSupportedType,
-  makeDecorator,
-  mockChannel,
-  types,
-  useArgs,
-  useCallback,
-  useChannel,
-  useEffect,
-  useGlobals,
-  useMemo,
-  useParameter,
-  useReducer,
-  useRef,
-  useState,
-  useStoryContext,
-};
--- a/code/lib/preview/src/global/channel-postmessage.ts
+++ b/code/lib/preview/src/global/channel-postmessage.ts
@ -1,7 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../channel-postmessage';
-
-const { KEY, PostmsgTransport, createChannel } = (globalThis as any)
-  .__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__ as typeof MODULE;
-
-export { KEY, PostmsgTransport, createChannel };
--- a/code/lib/preview/src/global/channel-websocket.ts
+++ b/code/lib/preview/src/global/channel-websocket.ts
@ -1,7 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../channel-websocket';
-
-const { WebsocketTransport, createChannel } = (globalThis as any)
-  .__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__ as typeof MODULE;
-
-export { WebsocketTransport, createChannel };
--- a/code/lib/preview/src/global/channels.ts
+++ b/code/lib/preview/src/global/channels.ts
@ -1,6 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../channels';
-
-const { Channel } = (globalThis as any).__STORYBOOK_MODULE_CHANNELS__ as typeof MODULE;
-
-export { Channel };
--- a/code/lib/preview/src/global/client-api.ts
+++ b/code/lib/preview/src/global/client-api.ts
@ -1,32 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../client-api';
-
-const {
-  addArgs,
-  addArgsEnhancer,
-  addArgTypes,
-  addArgTypesEnhancer,
-  addDecorator,
-  addLoader,
-  addParameters,
-  addStepRunner,
-  ClientApi,
-  getQueryParam,
-  getQueryParams,
-  setGlobalRender,
-} = (globalThis as any).__STORYBOOK_MODULE_CLIENT_API__ as typeof MODULE;
-
-export {
-  addArgs,
-  addArgsEnhancer,
-  addArgTypes,
-  addArgTypesEnhancer,
-  addDecorator,
-  addLoader,
-  addParameters,
-  addStepRunner,
-  ClientApi,
-  getQueryParam,
-  getQueryParams,
-  setGlobalRender,
-};
--- a/code/lib/preview/src/global/client-logger.ts
+++ b/code/lib/preview/src/global/client-logger.ts
@ -1,7 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../client-logger';
-
-const { deprecate, logger, once, pretty } = (globalThis as any)
-  .__STORYBOOK_MODULE_CLIENT_LOGGER__ as typeof MODULE;
-
-export { deprecate, logger, once, pretty };
--- a/code/lib/preview/src/global/core-client.ts
+++ b/code/lib/preview/src/global/core-client.ts
@ -1,7 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../core-client';
-
-const { ClientApi, StoryStore, start } = (globalThis as any)
-  .__STORYBOOK_MODULE_CORE_CLIENT__ as typeof MODULE;
-
-export { ClientApi, StoryStore, start };
--- a/code/lib/preview/src/global/core-events.ts
+++ b/code/lib/preview/src/global/core-events.ts
@ -1,86 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../core-events';
-
-const {
-  CHANNEL_CREATED,
-  CONFIG_ERROR,
-  CURRENT_STORY_WAS_SET,
-  DOCS_RENDERED,
-  FORCE_RE_RENDER,
-  FORCE_REMOUNT,
-  GLOBALS_UPDATED,
-  IGNORED_EXCEPTION,
-  NAVIGATE_URL,
-  PLAY_FUNCTION_THREW_EXCEPTION,
-  PRELOAD_ENTRIES,
-  PREVIEW_KEYDOWN,
-  REGISTER_SUBSCRIPTION,
-  RESET_STORY_ARGS,
-  SELECT_STORY,
-  SET_CONFIG,
-  SET_CURRENT_STORY,
-  SET_GLOBALS,
-  SET_INDEX,
-  SET_STORIES,
-  SHARED_STATE_CHANGED,
-  SHARED_STATE_SET,
-  STORIES_COLLAPSE_ALL,
-  STORIES_EXPAND_ALL,
-  STORY_ARGS_UPDATED,
-  STORY_CHANGED,
-  STORY_ERRORED,
-  STORY_INDEX_INVALIDATED,
-  STORY_MISSING,
-  STORY_PREPARED,
-  STORY_RENDER_PHASE_CHANGED,
-  STORY_RENDERED,
-  STORY_SPECIFIED,
-  STORY_THREW_EXCEPTION,
-  STORY_UNCHANGED,
-  UPDATE_GLOBALS,
-  UPDATE_QUERY_PARAMS,
-  UPDATE_STORY_ARGS,
-} = (globalThis as any).__STORYBOOK_MODULE_ADDONS__ as typeof MODULE;
-
-export default (globalThis as any).__STORYBOOK_MODULE_CORE_EVENTS__.default;
-
-export {
-  CHANNEL_CREATED,
-  CONFIG_ERROR,
-  CURRENT_STORY_WAS_SET,
-  DOCS_RENDERED,
-  FORCE_RE_RENDER,
-  FORCE_REMOUNT,
-  GLOBALS_UPDATED,
-  IGNORED_EXCEPTION,
-  NAVIGATE_URL,
-  PLAY_FUNCTION_THREW_EXCEPTION,
-  PRELOAD_ENTRIES,
-  PREVIEW_KEYDOWN,
-  REGISTER_SUBSCRIPTION,
-  RESET_STORY_ARGS,
-  SELECT_STORY,
-  SET_CONFIG,
-  SET_CURRENT_STORY,
-  SET_GLOBALS,
-  SET_INDEX,
-  SET_STORIES,
-  SHARED_STATE_CHANGED,
-  SHARED_STATE_SET,
-  STORIES_COLLAPSE_ALL,
-  STORIES_EXPAND_ALL,
-  STORY_ARGS_UPDATED,
-  STORY_CHANGED,
-  STORY_ERRORED,
-  STORY_INDEX_INVALIDATED,
-  STORY_MISSING,
-  STORY_PREPARED,
-  STORY_RENDER_PHASE_CHANGED,
-  STORY_RENDERED,
-  STORY_SPECIFIED,
-  STORY_THREW_EXCEPTION,
-  STORY_UNCHANGED,
-  UPDATE_GLOBALS,
-  UPDATE_QUERY_PARAMS,
-  UPDATE_STORY_ARGS,
-};
--- a/code/lib/preview/src/global/preview-web.ts
+++ b/code/lib/preview/src/global/preview-web.ts
@ -1,20 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../preview-web';
-
-const {
-  DocsContext,
-  Preview,
-  PreviewWeb,
-  composeConfigs,
-  simulateDOMContentLoaded,
-  simulatePageLoad,
-} = (globalThis as any).__STORYBOOK_MODULE_PREVIEW_WEB__ as typeof MODULE;
-
-export {
-  DocsContext,
-  Preview,
-  PreviewWeb,
-  composeConfigs,
-  simulateDOMContentLoaded,
-  simulatePageLoad,
-};
--- a/code/lib/preview/src/global/store.ts
+++ b/code/lib/preview/src/global/store.ts
@ -1,84 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import type * as MODULE from '../store';
-
-const {
-  DEEPLY_EQUAL,
-  NO_TARGET_NAME,
-  StoryStore,
-  combineArgs,
-  combineParameters,
-  composeConfigs,
-  composeStepRunners,
-  composeStories,
-  composeStory,
-  decorateStory,
-  deepDiff,
-  defaultDecorateStory,
-  filterArgTypes,
-  getArrayField,
-  getField,
-  getObjectField,
-  getSingletonField,
-  getValuesFromArgTypes,
-  groupArgsByTarget,
-  inferControls,
-  mapArgsToTypes,
-  noTargetArgs,
-  normalizeComponentAnnotations,
-  normalizeInputType,
-  normalizeInputTypes,
-  normalizeProjectAnnotations,
-  normalizeStory,
-  prepareStory,
-  processCSFFile,
-  sanitizeStoryContextUpdate,
-  setProjectAnnotations,
-  sortStoriesV6,
-  sortStoriesV7,
-  useAddonState,
-  useSharedState,
-  userOrAutoTitle,
-  userOrAutoTitleFromSpecifier,
-  validateOptions,
-} = (globalThis as any).__STORYBOOK_MODULE_STORE__ as typeof MODULE;
-
-export {
-  DEEPLY_EQUAL,
-  NO_TARGET_NAME,
-  StoryStore,
-  combineArgs,
-  combineParameters,
-  composeConfigs,
-  composeStepRunners,
-  composeStories,
-  composeStory,
-  decorateStory,
-  deepDiff,
-  defaultDecorateStory,
-  filterArgTypes,
-  getArrayField,
-  getField,
-  getObjectField,
-  getSingletonField,
-  getValuesFromArgTypes,
-  groupArgsByTarget,
-  inferControls,
-  mapArgsToTypes,
-  noTargetArgs,
-  normalizeComponentAnnotations,
-  normalizeInputType,
-  normalizeInputTypes,
-  normalizeProjectAnnotations,
-  normalizeStory,
-  prepareStory,
-  processCSFFile,
-  sanitizeStoryContextUpdate,
-  setProjectAnnotations,
-  sortStoriesV6,
-  sortStoriesV7,
-  useAddonState,
-  useSharedState,
-  userOrAutoTitle,
-  userOrAutoTitleFromSpecifier,
-  validateOptions,
-};
--- a/code/lib/preview/src/globalVars.ts
+++ b/code/lib/preview/src/globalVars.ts
@ -1,14 +0,0 @@
-import type { GlobalPackages } from './generated/exports';
-
-export const globalVars: Record<GlobalPackages, string> = {
-  '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__',
-  '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__',
-  '@storybook/channel-websocket': '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__',
-  '@storybook/channels': '__STORYBOOK_MODULE_CHANNELS__',
-  '@storybook/client-api': '__STORYBOOK_MODULE_CLIENT_API__',
-  '@storybook/client-logger': '__STORYBOOK_MODULE_CLIENT_LOGGER__',
-  '@storybook/core-client': '__STORYBOOK_MODULE_CORE_CLIENT__',
-  '@storybook/core-events': '__STORYBOOK_MODULE_CORE_EVENTS__',
-  '@storybook/preview-web': '__STORYBOOK_MODULE_PREVIEW_WEB__',
-  '@storybook/store': '__STORYBOOK_MODULE_STORE__',
-};
--- a/code/lib/preview/src/globals.ts
+++ b/code/lib/preview/src/globals.ts
@ -0,0 +1 @@
+export * from './globals/definitions';
--- a/code/lib/preview/src/globals/definitions.ts
+++ b/code/lib/preview/src/globals/definitions.ts
@ -1,8 +1,7 @@
 import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals';
-import Exports from './generated/exports';
-import { globalVars } from './globalVars';
-
-type Definition = Record<keyof typeof Exports, Required<ModuleInfo>>;
+import Exports from './exports';
+import { Keys } from './types';
+import type { Definitions } from './types';

 /*
 * We create a map of a module's name to a ModuleInfo.
@ -14,27 +13,23 @@ type Definition = Record<keyof typeof Exports, Required<ModuleInfo>>;
 * But we also want to ensure we don't miss any exports, or globals.
 *
 * So in order to add additional modules to be swapped for globals, you need to add them to:
- * - a new file in `/global`
- * - `globalVars.ts`.
+ * - `Keys` in `types.ts`
+ * - `values` in `runtime.ts`.
 *
 * If you forget to do either, TypeScript will complain.
 *
- * This `definitions.ts` file is consumed by the `builder-vite` and `builder-webpack5` packages,
+ * This `definitions.ts` file is consumed by the `builder-manager` package,
+ * The `runtime.ts` file is used inside the manager's browser code runtime.
 */

-const createModuleInfo = (m: keyof typeof Exports): Required<ModuleInfo> => ({
+const createModuleInfo = (m: keyof typeof Keys): Required<ModuleInfo> => ({
  type: 'esm',
-  varName: globalVars[m],
+  varName: Keys[m],
  namedExports: Exports[m],
  defaultExport: true,
 });

-function assertKey(key: string): asserts key is keyof typeof Exports {
-  if (!Object.keys(Exports).includes(key)) throw new Error(`Key "${key}" not found in exports.ts`);
-}
-
-export const definitions = Object.keys(Exports).reduce<Definition>((acc, key: string) => {
-  assertKey(key);
-  acc[key] = createModuleInfo(key);
+export const definitions = Object.keys(Keys).reduce<Definitions>((acc, key) => {
+  acc[key as keyof typeof Keys] = createModuleInfo(key as keyof typeof Keys);
  return acc;
-}, {} as Definition);
+}, {} as Definitions);
--- a/code/lib/preview/src/generated/exports.ts
+++ b/code/lib/preview/src/generated/exports.ts
@ -1,25 +1,13 @@
 // this file is generated by generate-exports-file.ts
 // this is done to prevent runtime dependencies from making it's way into the build/start script of the manager
-// the preview builder needs to know which dependencies are 'globalized' in the ui
-
-export type GlobalPackages =
-  | '@storybook/addons'
-  | '@storybook/channel-postmessage'
-  | '@storybook/channel-websocket'
-  | '@storybook/channels'
-  | '@storybook/client-api'
-  | '@storybook/client-logger'
-  | '@storybook/core-client'
-  | '@storybook/core-events'
-  | '@storybook/preview-web'
-  | '@storybook/store';
+// the manager builder needs to know which dependencies are 'globalized' in the ui

 export default {
  '@storybook/addons': [
-    'addons',
    'AddonStore',
-    'applyHooks',
    'HooksContext',
+    'addons',
+    'applyHooks',
    'isSupportedType',
    'makeDecorator',
    'mockChannel',
@ -40,73 +28,23 @@ export default {
  '@storybook/channel-websocket': ['WebsocketTransport', 'createChannel'],
  '@storybook/channels': ['Channel'],
  '@storybook/client-api': [
-    'addArgs',
-    'addArgsEnhancer',
+    'ClientApi',
    'addArgTypes',
    'addArgTypesEnhancer',
+    'addArgs',
+    'addArgsEnhancer',
    'addDecorator',
    'addLoader',
    'addParameters',
    'addStepRunner',
-    'ClientApi',
    'getQueryParam',
    'getQueryParams',
    'setGlobalRender',
-  ],
-  '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'],
-  '@storybook/core-client': ['ClientApi', 'StoryStore', 'start'],
-  '@storybook/core-events': [
-    'CHANNEL_CREATED',
-    'CONFIG_ERROR',
-    'CURRENT_STORY_WAS_SET',
-    'DOCS_RENDERED',
-    'FORCE_RE_RENDER',
-    'FORCE_REMOUNT',
-    'GLOBALS_UPDATED',
-    'IGNORED_EXCEPTION',
-    'NAVIGATE_URL',
-    'PLAY_FUNCTION_THREW_EXCEPTION',
-    'PRELOAD_ENTRIES',
-    'PREVIEW_KEYDOWN',
-    'REGISTER_SUBSCRIPTION',
-    'RESET_STORY_ARGS',
-    'SELECT_STORY',
-    'SET_CONFIG',
-    'SET_CURRENT_STORY',
-    'SET_GLOBALS',
-    'SET_INDEX',
-    'SET_STORIES',
-    'SHARED_STATE_CHANGED',
-    'SHARED_STATE_SET',
-    'STORIES_COLLAPSE_ALL',
-    'STORIES_EXPAND_ALL',
-    'STORY_ARGS_UPDATED',
-    'STORY_CHANGED',
-    'STORY_ERRORED',
-    'STORY_INDEX_INVALIDATED',
-    'STORY_MISSING',
-    'STORY_PREPARED',
-    'STORY_RENDER_PHASE_CHANGED',
-    'STORY_RENDERED',
-    'STORY_SPECIFIED',
-    'STORY_THREW_EXCEPTION',
-    'STORY_UNCHANGED',
-    'UPDATE_GLOBALS',
-    'UPDATE_QUERY_PARAMS',
-    'UPDATE_STORY_ARGS',
-  ],
-  '@storybook/preview-web': [
-    'DocsContext',
-    'Preview',
-    'PreviewWeb',
-    'composeConfigs',
-    'simulateDOMContentLoaded',
-    'simulatePageLoad',
-  ],
-  '@storybook/store': [
    'DEEPLY_EQUAL',
+    'HooksContext',
    'NO_TARGET_NAME',
    'StoryStore',
+    'applyHooks',
    'combineArgs',
    'combineParameters',
    'composeConfigs',
@ -138,7 +76,122 @@ export default {
    'sortStoriesV6',
    'sortStoriesV7',
    'useAddonState',
+    'useArgs',
+    'useCallback',
+    'useChannel',
+    'useEffect',
+    'useGlobals',
+    'useMemo',
+    'useParameter',
+    'useReducer',
+    'useRef',
    'useSharedState',
+    'useState',
+    'useStoryContext',
+    'userOrAutoTitle',
+    'userOrAutoTitleFromSpecifier',
+    'validateOptions',
+  ],
+  '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'],
+  '@storybook/core-client': ['ClientApi', 'StoryStore', 'start'],
+  '@storybook/core-events': [
+    'CHANNEL_CREATED',
+    'CONFIG_ERROR',
+    'CURRENT_STORY_WAS_SET',
+    'DOCS_RENDERED',
+    'FORCE_REMOUNT',
+    'FORCE_RE_RENDER',
+    'GLOBALS_UPDATED',
+    'IGNORED_EXCEPTION',
+    'NAVIGATE_URL',
+    'PLAY_FUNCTION_THREW_EXCEPTION',
+    'PRELOAD_ENTRIES',
+    'PREVIEW_KEYDOWN',
+    'REGISTER_SUBSCRIPTION',
+    'RESET_STORY_ARGS',
+    'SELECT_STORY',
+    'SET_CONFIG',
+    'SET_CURRENT_STORY',
+    'SET_GLOBALS',
+    'SET_INDEX',
+    'SET_STORIES',
+    'SHARED_STATE_CHANGED',
+    'SHARED_STATE_SET',
+    'STORIES_COLLAPSE_ALL',
+    'STORIES_EXPAND_ALL',
+    'STORY_ARGS_UPDATED',
+    'STORY_CHANGED',
+    'STORY_ERRORED',
+    'STORY_INDEX_INVALIDATED',
+    'STORY_MISSING',
+    'STORY_PREPARED',
+    'STORY_RENDERED',
+    'STORY_RENDER_PHASE_CHANGED',
+    'STORY_SPECIFIED',
+    'STORY_THREW_EXCEPTION',
+    'STORY_UNCHANGED',
+    'UPDATE_GLOBALS',
+    'UPDATE_QUERY_PARAMS',
+    'UPDATE_STORY_ARGS',
+  ],
+  '@storybook/preview-web': [
+    'DocsContext',
+    'Preview',
+    'PreviewWeb',
+    'PreviewWithSelection',
+    'composeConfigs',
+    'simulateDOMContentLoaded',
+    'simulatePageLoad',
+  ],
+  '@storybook/store': [
+    'DEEPLY_EQUAL',
+    'HooksContext',
+    'NO_TARGET_NAME',
+    'StoryStore',
+    'applyHooks',
+    'combineArgs',
+    'combineParameters',
+    'composeConfigs',
+    'composeStepRunners',
+    'composeStories',
+    'composeStory',
+    'decorateStory',
+    'deepDiff',
+    'defaultDecorateStory',
+    'filterArgTypes',
+    'getArrayField',
+    'getField',
+    'getObjectField',
+    'getSingletonField',
+    'getValuesFromArgTypes',
+    'groupArgsByTarget',
+    'inferControls',
+    'mapArgsToTypes',
+    'noTargetArgs',
+    'normalizeComponentAnnotations',
+    'normalizeInputType',
+    'normalizeInputTypes',
+    'normalizeProjectAnnotations',
+    'normalizeStory',
+    'prepareStory',
+    'processCSFFile',
+    'sanitizeStoryContextUpdate',
+    'setProjectAnnotations',
+    'sortStoriesV6',
+    'sortStoriesV7',
+    'useAddonState',
+    'useArgs',
+    'useCallback',
+    'useChannel',
+    'useEffect',
+    'useGlobals',
+    'useMemo',
+    'useParameter',
+    'useReducer',
+    'useRef',
+    'useSharedState',
+    'useState',
+    'useStoryContext',
    'userOrAutoTitle',
    'userOrAutoTitleFromSpecifier',
    'validateOptions',
--- a/code/lib/preview/src/globals/runtime.ts
+++ b/code/lib/preview/src/globals/runtime.ts
@ -0,0 +1,26 @@
+import * as ADDONS from '../modules/addons';
+import * as CHANNEL_POSTMESSAGE from '../modules/channel-postmessage';
+import * as CHANNEL_WEBSOCKET from '../modules/channel-websocket';
+import * as CHANNELS from '../modules/channels';
+import * as CLIENT_API from '../modules/client-api';
+import * as CLIENT_LOGGER from '../modules/client-logger';
+import * as CORE_CLIENT from '../modules/core-client';
+import * as CORE_EVENTS from '../modules/core-events';
+import * as PREVIEW_WEB from '../modules/preview-web';
+import * as STORE from '../modules/store';
+
+import type { Keys } from './types';
+
+// Here we map the name of a module to their VALUE in the global scope.
+export const values: Required<Record<keyof typeof Keys, any>> = {
+  '@storybook/addons': ADDONS,
+  '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE,
+  '@storybook/channel-websocket': CHANNEL_WEBSOCKET,
+  '@storybook/channels': CHANNELS,
+  '@storybook/client-api': CLIENT_API,
+  '@storybook/client-logger': CLIENT_LOGGER,
+  '@storybook/core-client': CORE_CLIENT,
+  '@storybook/core-events': CORE_EVENTS,
+  '@storybook/preview-web': PREVIEW_WEB,
+  '@storybook/store': STORE,
+};
--- a/code/lib/preview/src/globals/types.ts
+++ b/code/lib/preview/src/globals/types.ts
@ -0,0 +1,17 @@
+import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals';
+
+// Here we map the name of a module to their NAME in the global scope.
+export enum Keys {
+  '@storybook/addons' = '__STORYBOOK_MODULE_ADDONS__',
+  '@storybook/channel-postmessage' = '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__',
+  '@storybook/channel-websocket' = '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__',
+  '@storybook/channels' = '__STORYBOOK_MODULE_CHANNELS__',
+  '@storybook/client-api' = '__STORYBOOK_MODULE_CLIENT_API__',
+  '@storybook/client-logger' = '__STORYBOOK_MODULE_CLIENT_LOGGER__',
+  '@storybook/core-client' = '__STORYBOOK_MODULE_CORE_CLIENT__',
+  '@storybook/core-events' = '__STORYBOOK_MODULE_CORE_EVENTS__',
+  '@storybook/preview-web' = '__STORYBOOK_MODULE_PREVIEW_WEB__',
+  '@storybook/store' = '__STORYBOOK_MODULE_STORE__',
+}
+
+export type Definitions = Required<Record<keyof typeof Keys, Required<ModuleInfo>>>;
--- a/code/lib/preview/src/index.ts
+++ b/code/lib/preview/src/index.ts
@ -1,23 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-
-import * as ADDONS from './addons';
-import * as CHANNEL_POSTMESSAGE from './channel-postmessage';
-import * as CHANNEL_WEBSOCKET from './channel-websocket';
-import * as CHANNELS from './channels';
-import * as CLIENT_API from './client-api';
-import * as CLIENT_LOGGER from './client-logger';
-import * as CORE_CLIENT from './core-client';
-import * as CORE_EVENTS from './core-events';
-import * as PREVIEW_WEB from './preview-web';
-import * as STORE from './store';
-
-(globalThis as any).__STORYBOOK_MODULE_ADDONS__ = ADDONS;
-(globalThis as any).__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__ = CHANNEL_POSTMESSAGE;
-(globalThis as any).__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__ = CHANNEL_WEBSOCKET;
-(globalThis as any).__STORYBOOK_MODULE_CHANNELS__ = CHANNELS;
-(globalThis as any).__STORYBOOK_MODULE_CLIENT_API__ = CLIENT_API;
-(globalThis as any).__STORYBOOK_MODULE_CLIENT_LOGGER__ = CLIENT_LOGGER;
-(globalThis as any).__STORYBOOK_MODULE_CORE_CLIENT__ = CORE_CLIENT;
-(globalThis as any).__STORYBOOK_MODULE_CORE_EVENTS__ = CORE_EVENTS;
-(globalThis as any).__STORYBOOK_MODULE_PREVIEW_WEB__ = PREVIEW_WEB;
-(globalThis as any).__STORYBOOK_MODULE_STORE__ = STORE;
--- a/code/lib/preview/src/modules/addons.ts
+++ b/code/lib/preview/src/modules/addons.ts
--- a/code/lib/preview/src/modules/channel-postmessage.ts
+++ b/code/lib/preview/src/modules/channel-postmessage.ts
--- a/code/lib/preview/src/modules/channel-websocket.ts
+++ b/code/lib/preview/src/modules/channel-websocket.ts
--- a/code/lib/preview/src/modules/channels.ts
+++ b/code/lib/preview/src/modules/channels.ts
--- a/code/lib/preview/src/modules/client-api.ts
+++ b/code/lib/preview/src/modules/client-api.ts
--- a/code/lib/preview/src/modules/client-logger.ts
+++ b/code/lib/preview/src/modules/client-logger.ts
--- a/code/lib/preview/src/modules/core-client.ts
+++ b/code/lib/preview/src/modules/core-client.ts
--- a/code/lib/preview/src/modules/core-events.ts
+++ b/code/lib/preview/src/modules/core-events.ts
--- a/code/lib/preview/src/modules/preview-web.ts
+++ b/code/lib/preview/src/modules/preview-web.ts
--- a/code/lib/preview/src/modules/store.ts
+++ b/code/lib/preview/src/modules/store.ts
--- a/code/lib/preview/src/runtime.ts
+++ b/code/lib/preview/src/runtime.ts
@ -0,0 +1,9 @@
+import { values } from './globals/runtime';
+import { Keys } from './globals/types';
+
+const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;
+
+// Apply all the globals
+getKeys(Keys).forEach((key) => {
+  (globalThis as any)[Keys[key]] = values[key];
+});
--- a/scripts/tasks/compile.ts
+++ b/scripts/tasks/compile.ts
@ -19,7 +19,7 @@ export const compile: Task = {
      // To check if the code has been compiled as we need, we check the compiled output of
      // `@storybook/store`. To check if it has been built for publishing (i.e. `--no-link`),
      // we check if it built types or references source files directly.
-      const contents = await readFile(resolve(codeDir, './lib/preview/dist/index.d.ts'), 'utf8');
+      const contents = await readFile(resolve(codeDir, './lib/preview/dist/runtime.d.ts'), 'utf8');
      const isLinkedContents = contents.indexOf(linkedContents) !== -1;
      if (link) return isLinkedContents;
      return !isLinkedContents;