Merge pull request #19718 from storybookjs/norbert/sb-798-figure-out-…

…plan-for-package-structure-rework prebundle the preview
storybookjs · Nov 22, 2022 · d491ad3 · d491ad3
2 parents ddca95b + 6d692e5
commit d491ad3
Show file tree

Hide file tree

Showing 96 changed files with 1,403 additions and 937 deletions.
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -89,7 +89,7 @@
   "devDependencies": {
     "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "0.0.14-next.0",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "formik": "^2.2.9",
     "typescript": "^4.9.3"
   },

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -47,7 +47,7 @@
     "@storybook/node-logger": "7.0.0-alpha.52",
     "@storybook/store": "7.0.0-alpha.52",
     "@storybook/types": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",

diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/html": "7.0.0-alpha.52",
     "@storybook/preset-html-webpack": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
@@ -65,7 +65,7 @@
     "@storybook/node-logger": "7.0.0-alpha.52",
     "@storybook/preset-react-webpack": "7.0.0-alpha.52",
     "@storybook/react": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^9.0.1",
     "image-size": "^1.0.0",

diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preact": "7.0.0-alpha.52",
     "@storybook/preset-preact-webpack": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
@@ -67,7 +67,7 @@
     "vite": "^3.1.3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },

diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/builder-webpack5": "7.0.0-alpha.52",
     "@storybook/preset-react-webpack": "7.0.0-alpha.52",
     "@storybook/react": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0"
+    "@types/node": "^16.0.0"
   },
   "devDependencies": {
     "jest-specific-snapshot": "^6.0.0",

diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preset-server-webpack": "7.0.0-alpha.52",
     "@storybook/server": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
@@ -67,7 +67,7 @@
     "vite": "^3.1.3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },

diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preset-vue-webpack": "7.0.0-alpha.52",
     "@storybook/vue": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
@@ -65,7 +65,7 @@
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },

diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preset-vue3-webpack": "7.0.0-alpha.52",
     "@storybook/vue3": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
@@ -64,7 +64,7 @@
     "vite": "3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.0"
   },

diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
@@ -57,7 +57,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preset-web-components-webpack": "7.0.0-alpha.52",
     "@storybook/web-components": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },

diff --git a/code/lib/api/package.json b/code/lib/api/package.json
@@ -24,11 +24,6 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./shortcut": {
-      "require": "./dist/shortcut.js",
-      "import": "./dist/shortcut.mjs",
-      "types": "./dist/shortcut.d.ts"
-    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -79,8 +74,7 @@
   },
   "bundler": {
     "entries": [
-      "./src/index.tsx",
-      "./src/shortcut.ts"
+      "./src/index.tsx"
     ]
   },
   "gitHead": "d2494e3f51ce0f55bcb1ef693a6477c669fbe666"

diff --git a/code/lib/api/shortcut.d.ts b/code/lib/api/shortcut.d.ts
diff --git a/code/lib/api/shortcut.js b/code/lib/api/shortcut.js
diff --git a/code/lib/api/src/index.tsx b/code/lib/api/src/index.tsx
@@ -64,6 +64,7 @@ import * as url from './modules/url';
 import * as version from './modules/versions';
 // eslint-disable-next-line import/no-cycle
 import * as globals from './modules/globals';
+import { eventToShortcut, shortcutMatchesShortcut, shortcutToHumanString } from './lib/shortcut';
 
 const { ActiveTabs } = layout;
 
@@ -480,3 +481,5 @@ export function useArgTypes(): API_ArgTypes {
   const current = useCurrentStory();
   return (current?.type === 'story' && current.argTypes) || {};
 }
+
+export { eventToShortcut, shortcutToHumanString, shortcutMatchesShortcut };
diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts
@@ -125,8 +125,8 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   const coreDirOrigin = join(dirname(require.resolve('@storybook/manager/package.json')), 'dist');
 
-  router.use(`/sb-addons`, express.static(addonsDir));
-  router.use(`/sb-manager`, express.static(coreDirOrigin));
+  router.use(`/sb-addons`, express.static(addonsDir, { immutable: true, maxAge: '5m' }));
+  router.use(`/sb-manager`, express.static(coreDirOrigin, { immutable: true, maxAge: '5m' }));
 
   const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir, compilation?.outputFiles);
 

diff --git a/code/lib/builder-manager/src/utils/template.ts b/code/lib/builder-manager/src/utils/template.ts
@@ -57,7 +57,7 @@ export const renderHTML = async (
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
   docsOptions: Promise<DocsOptions>,
-  { versionCheck, releaseNotesData, docsMode, previewUrl, serverChannelUrl }: Options
+  { versionCheck, releaseNotesData, previewUrl, serverChannelUrl, configType }: Options
 ) => {
   const customHeadRef = await customHead;
   const titleRef = await title;
@@ -71,6 +71,7 @@ export const renderHTML = async (
       REFS: JSON.stringify(await refs, null, 2),
       LOGLEVEL: JSON.stringify(await logLevel, null, 2),
       DOCS_OPTIONS: JSON.stringify(await docsOptions, null, 2),
+      CONFIG_TYPE: JSON.stringify(await configType, null, 2),
       // These two need to be double stringified because the UI expects a string
       VERSIONCHECK: JSON.stringify(JSON.stringify(versionCheck), null, 2),
       RELEASE_NOTES_DATA: JSON.stringify(JSON.stringify(releaseNotesData), null, 2),

diff --git a/code/lib/builder-manager/templates/template.ejs b/code/lib/builder-manager/templates/template.ejs
@@ -8,6 +8,8 @@
     <link rel="shortcut icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link href="./sb-preview/runtime.mjs" rel="preload" as="script">
+
     <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>
 
     <style>
@@ -33,10 +35,12 @@
     </script>
     <% } %>
 
-    <script src="./sb-manager/runtime.mjs" type="module"></script>
+    <script type="module">
+      import './sb-manager/runtime.mjs';
 
-    <% files.js.forEach(file => { %>
-    <script src="<%= file %>" type="module"></script>
-    <% }); %>
+      <% files.js.forEach(file => { %>
+      import './<%= file %>';
+      <% }); %>
+    </script>    
   </body>
 </html>
diff --git a/code/lib/builder-vite/input/iframe.html b/code/lib/builder-vite/input/iframe.html
@@ -14,17 +14,22 @@
       window.STORIES = '[STORIES HERE]';
       window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
       window.SERVER_CHANNEL_URL = '[SERVER_CHANNEL_URL HERE]';
-
+      
       // We do this so that "module && module.hot" etc. in Storybook source code
       // doesn't fail (it will simply be disabled)
       window.module = undefined;
-    </script>
+      </script>
     <!-- [HEAD HTML SNIPPET HERE] -->
   </head>
   <body>
     <!-- [BODY HTML SNIPPET HERE] -->
     <div id="storybook-root"></div>
     <div id="storybook-docs"></div>
-    <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
+    <script type="module">
+      /* eslint-disable import/no-absolute-path, import/extensions, import/no-unresolved */
+
+      import '/sb-preview/runtime.mjs';
+      import '/virtual:/@storybook/builder-vite/vite-app.js';
+    </script>
   </body>
 </html>
diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json
@@ -41,18 +41,22 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5",
     "@storybook/client-api": "7.0.0-alpha.52",
     "@storybook/client-logger": "7.0.0-alpha.52",
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/mdx2-csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.52",
+    "@storybook/preview": "7.0.0-alpha.52",
     "@storybook/preview-web": "7.0.0-alpha.52",
     "@storybook/source-loader": "7.0.0-alpha.52",
     "@storybook/types": "7.0.0-alpha.52",
     "@vitejs/plugin-react": "^2.0.0",
     "browser-assert": "^1.2.1",
     "es-module-lexer": "^0.9.3",
+    "express": "^4.17.1",
+    "fs-extra": "^9.0.1",
     "glob": "^7.2.0",
     "glob-promise": "^4.2.0",
     "magic-string": "^0.26.1",
@@ -61,7 +65,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },

diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts
@@ -1,9 +1,11 @@
 // noinspection JSUnusedGlobalSymbols
 
-import * as fs from 'fs';
+import * as fs from 'fs-extra';
 import type { Builder, StorybookConfig as StorybookBaseConfig, Options } from '@storybook/types';
-import type { RequestHandler, Request, Response } from 'express';
+import type { RequestHandler } from 'express';
 import type { InlineConfig, UserConfig, ViteDevServer } from 'vite';
+import express from 'express';
+import { dirname, join, parse } from 'path';
 import { transformIframeHtml } from './transform-iframe-html';
 import { createViteServer } from './vite-server';
 import { build as viteBuild } from './build';
@@ -44,7 +46,7 @@ function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): Requ
       return;
     }
 
-    const indexHtml = fs.readFileSync(
+    const indexHtml = await fs.readFile(
       require.resolve('@storybook/builder-vite/input/iframe.html'),
       'utf-8'
     );
@@ -75,12 +77,10 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as ExtendedOptions, devServer);
 
-  // Just mock this endpoint (which is really Webpack-specific) so we don't get spammed with 404 in browser devtools
-  // TODO: we should either show some sort of progress from Vite, or just try to disable the whole Loader in the Manager UI.
-  router.get('/progress', (req: Request, res: Response) => {
-    res.header('Cache-Control', 'no-cache');
-    res.header('Content-Type', 'text/event-stream');
-  });
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewDirOrigin = join(previewResolvedDir, 'dist');
+
+  router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
 
   router.use(iframeMiddleware(options as ExtendedOptions, server));
   router.use(server.middlewares);
@@ -93,5 +93,23 @@ export const start: ViteBuilder['start'] = async ({
 };
 
 export const build: ViteBuilder['build'] = async ({ options }) => {
-  return viteBuild(options as ExtendedOptions);
+  const viteCompilation = viteBuild(options as ExtendedOptions);
+
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewDirOrigin = join(previewResolvedDir, 'dist');
+  const previewDirTarget = join(options.outputDir || '', `sb-preview`);
+
+  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+    filter: (src) => {
+      const { ext } = parse(src);
+      if (ext) {
+        return ext === '.mjs';
+      }
+      return true;
+    },
+  });
+
+  const [out] = await Promise.all([viteCompilation, previewFiles]);
+
+  return out;
 };
diff --git a/code/lib/builder-vite/src/optimizeDeps.ts b/code/lib/builder-vite/src/optimizeDeps.ts
@@ -1,6 +1,8 @@
 import * as path from 'path';
 import { normalizePath, resolveConfig } from 'vite';
-import type { InlineConfig as ViteInlineConfig } from 'vite';
+import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
+import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
+import { definitions } from '@storybook/preview/globals';
 import { listStories } from './list-stories';
 
 import type { ExtendedOptions } from './types';
@@ -113,11 +115,16 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Extende
   const resolve = resolvedConfig.createResolver({ asSrc: false });
   const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));
 
-  return {
+  const optimizeDeps: UserConfig['optimizeDeps'] = {
     // We don't need to resolve the glob since vite supports globs for entries.
     entries: stories,
     // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
     // if we served it directly to the browser.
     include,
+    esbuildOptions: {
+      plugins: [globalExternals(definitions)],
+    },
   };
+
+  return optimizeDeps;
 }