Merge pull request #30567 from storybookjs/valentin/fix-runtime-iframe-error-on-first-load

Builder-Vite: Fix runtime and iframe 404 on first load

Author: valentinpalkovic

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -4,7 +4,7 @@ import type { Options, PreviewAnnotation } from 'storybook/internal/types';
 import { dedent } from 'ts-dedent';
 
 import { processPreviewAnnotation } from './utils/process-preview-annotation';
-import { SB_VIRTUAL_FILES, getResolvedVirtualModuleId } from './virtual-file-names';
+import { SB_VIRTUAL_FILES } from './virtual-file-names';
 
 export async function generateModernIframeScriptCode(options: Options, projectRoot: string) {
   const { presets, configDir } = options;

code/builders/builder-vite/src/index.ts

@@ -7,7 +7,6 @@ import type { Middleware, Options } from 'storybook/internal/types';
 import type { ViteDevServer } from 'vite';
 
 import { build as viteBuild } from './build';
-import { transformIframeHtml } from './transform-iframe-html';
 import type { ViteBuilder } from './types';
 import { createViteServer } from './vite-server';
 
@@ -16,22 +15,8 @@ export { hasVitePlugins } from './utils/has-vite-plugins';
 
 export * from './types';
 
-function iframeMiddleware(options: Options, server: ViteDevServer): Middleware {
-  return async (req, res, next) => {
-    if (!req.url || !req.url.match(/^\/iframe\.html($|\?)/)) {
-      next();
-      return;
-    }
-    // the base isn't used for anything, but it's required by the URL constructor
-    const url = new URL(req.url, 'http://localhost:6006');
-
-    // We need to handle `html-proxy` params for style tag HMR https://github.com/storybookjs/builder-vite/issues/266#issuecomment-1055677865
-    // e.g. /iframe.html?html-proxy&index=0.css
-    if (url.searchParams.has('html-proxy')) {
-      next();
-      return;
-    }
-
+function iframeHandler(options: Options, server: ViteDevServer): Middleware {
+  return async (req, res) => {
     const indexHtml = await readFile(require.resolve('@storybook/builder-vite/input/iframe.html'), {
       encoding: 'utf8',
     });
@@ -57,7 +42,7 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as Options, devServer);
 
-  router.use(iframeMiddleware(options as Options, server));
+  router.get('/iframe.html', iframeHandler(options as Options, server));
   router.use(server.middlewares);
 
   return {

code/builders/builder-vite/src/optimizeDeps.ts

@@ -27,6 +27,7 @@ const INCLUDE_CANDIDATES = [
   '@storybook/addon-essentials/outline/preview',
   '@storybook/addon-essentials/viewport/preview',
   '@storybook/addon-highlight/preview',
+  '@storybook/addon-interactions/preview',
   '@storybook/addon-links/preview',
   '@storybook/addon-measure/preview',
   '@storybook/addon-outline/preview',
@@ -132,6 +133,7 @@ const INCLUDE_CANDIDATES = [
   'react-textarea-autosize',
   'react',
   'react/jsx-runtime',
+  'react/jsx-dev-runtime',
   'refractor/core',
   'refractor/lang/bash.js',
   'refractor/lang/css.js',
@@ -150,6 +152,7 @@ const INCLUDE_CANDIDATES = [
   'slash',
   'store2',
   'storybook/internal/preview/runtime',
+  'storybook/internal/csf',
   'synchronous-promise',
   'telejson',
   'ts-dedent',

code/core/assets/server/template.ejs

@@ -83,9 +83,5 @@
       
       import './sb-manager/runtime.js';
     </script>
-
-    <% if (!ignorePreview) { %>
-    <link href="./sb-preview/runtime.js" rel="prefetch" as="script" />
-    <% } %>
   </body>
-</html>
+</html>

code/core/src/core-server/dev-server.ts

@@ -78,13 +78,14 @@ export async function storybookDevServer(options: Options) {
     channel: serverChannel,
   });
 
-  let previewStarted: Promise<any> = Promise.resolve();
+  let previewResult: Awaited<ReturnType<(typeof previewBuilder)['start']>> =
+    await Promise.resolve();
 
   if (!options.ignorePreview) {
     if (!options.quiet) {
       logger.info('=> Starting preview..');
     }
-    previewStarted = previewBuilder
+    previewResult = await previewBuilder
       .start({
         startTime: process.hrtime(),
         options,
@@ -108,14 +109,6 @@ export async function storybookDevServer(options: Options) {
       });
   }
 
-  // this is a preview route, the builder has to be started before we can serve it
-  // this handler keeps request to that route pending until the builder is ready to serve it, preventing a 404
-  app.use('/iframe.html', (req, res, next) => {
-    // We need to catch here or node will treat any errors thrown by `previewStarted` as
-    // unhandled and exit (even though they are very much handled below)
-    previewStarted.catch(() => {}).then(() => next());
-  });
-
   const listening = new Promise<void>((resolve, reject) => {
     server.once('error', reject);
     app.listen({ port, host }, resolve);
@@ -132,8 +125,6 @@ export async function storybookDevServer(options: Options) {
     throw indexError;
   }
 
-  const previewResult = await previewStarted;
-
   // Now the preview has successfully started, we can count this as a 'dev' event.
   doTelemetry(app, core, initializedStoryIndexGenerator, options);