wip

modernweb-dev · Jan 28, 2025 · b80acff · b80acff
1 parent fea524b
commit b80acff
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 61 deletions.
diff --git a/packages/storybook-builder/src/generate-iframe-html.ts b/packages/storybook-builder/src/generate-iframe-html.ts
@@ -1,5 +1,5 @@
 import { normalizeStories } from '@storybook/core-common';
-import type { CoreConfig, Options } from '@storybook/types';
+import type { DocsOptions, Options, TagsOptions } from '@storybook/types';
 import { readFile } from 'fs-extra';
 import { virtualAppFilename } from './virtual-file-names.js';
 
@@ -10,35 +10,44 @@ export async function generateIframeHtml(options: Options): Promise<string> {
     require.resolve('../static/iframe-template.html'),
     'utf-8',
   );
-  const { configType, features, presets, serverChannelUrl } = options;
+  const { configType, features, presets } = options;
+  const build = await presets.apply('build');
   const frameworkOptions = await presets.apply<Record<string, any> | null>('frameworkOptions');
   const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
   const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
   const logLevel = await presets.apply('logLevel', undefined);
-  // const docsOptions = await presets.apply<DocsOptions>('docs');
-  const coreOptions = await presets.apply<CoreConfig>('core');
+  const docsOptions = await presets.apply<DocsOptions>('docs');
+  const tagsOptions = await presets.apply<TagsOptions>('tags');
+  const coreOptions = await presets.apply('core');
   const stories = normalizeStories(await options.presets.apply('stories', [], options), {
     configDir: options.configDir,
     workingDir: process.cwd(),
   }).map(specifier => ({
     ...specifier,
     importPathMatcher: specifier.importPathMatcher.source,
   }));
-  return (
-    iframeHtmlTemplate
-      .replace('[CONFIG_TYPE HERE]', configType || '')
-      .replace('[LOGLEVEL HERE]', logLevel || '')
-      .replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
-      .replace(
-        `'[CHANNEL_OPTIONS HERE]'`,
-        JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {}),
-      )
-      .replace(`'[FEATURES HERE]'`, JSON.stringify(features || {}))
-      .replace(`'[STORIES HERE]'`, JSON.stringify(stories || {}))
-      // .replace(`'[DOCS_OPTIONS HERE]'`, JSON.stringify(docsOptions || {}))
-      .replace(`'[SERVER_CHANNEL_URL HERE]'`, JSON.stringify(serverChannelUrl))
-      .replace('<!-- [HEAD HTML SNIPPET HERE] -->', headHtmlSnippet || '')
-      .replace('<!-- [BODY HTML SNIPPET HERE] -->', bodyHtmlSnippet || '')
-      .replace(`[APP MODULE SRC HERE]`, virtualAppFilename)
-  );
+  const otherGlobals = {
+    ...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
+  };
+  return iframeHtmlTemplate
+    .replace('[CONFIG_TYPE HERE]', configType || '')
+    .replace('[LOGLEVEL HERE]', logLevel || '')
+    .replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
+    .replace(
+      `('OTHER_GLOBLALS HERE');`,
+      Object.entries(otherGlobals)
+        .map(([k, v]) => `window["${k}"] = ${JSON.stringify(v)};`)
+        .join(''),
+    )
+    .replace(
+      `'[CHANNEL_OPTIONS HERE]'`,
+      JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {}),
+    )
+    .replace(`'[FEATURES HERE]'`, JSON.stringify(features || {}))
+    .replace(`'[STORIES HERE]'`, JSON.stringify(stories || {}))
+    .replace(`'[DOCS_OPTIONS HERE]'`, JSON.stringify(docsOptions || {}))
+    .replace(`'[TAGS_OPTIONS HERE]'`, JSON.stringify(tagsOptions || {}))
+    .replace('<!-- [HEAD HTML SNIPPET HERE] -->', headHtmlSnippet || '')
+    .replace('<!-- [BODY HTML SNIPPET HERE] -->', bodyHtmlSnippet || '')
+    .replace(`[APP MODULE SRC HERE]`, virtualAppFilename);
 }
diff --git a/packages/storybook-builder/src/generate-setup-addons-script.ts b/packages/storybook-builder/src/generate-setup-addons-script.ts
@@ -2,19 +2,15 @@
 
 export async function generateSetupAddonsScript() {
   return `
-import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
-import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-import { addons } from '@storybook/preview-api';
+import { createBrowserChannel } from 'storybook/internal/channels';
+import { addons } from 'storybook/internal/preview-api';
 
-const channel = createPostMessageChannel({ page: 'preview' });
+const channel = createBrowserChannel({ page: 'preview' });
 addons.setChannel(channel);
 window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
 
-const { SERVER_CHANNEL_URL } = globalThis;
-if (SERVER_CHANNEL_URL) {
-  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });
-  addons.setServerChannel(serverChannel);
-  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
+if (window.CONFIG_TYPE === 'DEVELOPMENT'){
+  window.__STORYBOOK_SERVER_CHANNEL__ = channel;
 }
   `.trim();
 }
diff --git a/packages/storybook-builder/static/iframe-template.html b/packages/storybook-builder/static/iframe-template.html
@@ -1,39 +1,44 @@
 <!DOCTYPE html>
+<!--suppress HtmlUnknownTarget -->
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Storybook</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-italic.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-bold.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-bold-italic.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
 
     <script>
       window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';
@@ -42,8 +47,10 @@
       window.CHANNEL_OPTIONS = '[CHANNEL_OPTIONS HERE]';
       window.FEATURES = '[FEATURES HERE]';
       window.STORIES = '[STORIES HERE]';
-      // window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
-      window.SERVER_CHANNEL_URL = '[SERVER_CHANNEL_URL HERE]';
+      window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
+      window.TAGS_OPTIONS = '[TAGS_OPTIONS HERE]';
+
+      ('OTHER_GLOBLALS HERE');
 
       // TODO: check if it's relevant for us
       // We do this so that "module && module.hot" etc. in Storybook source code