storybook-builder-rsbuild 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as rsbuildReal from '@rsbuild/core';
 import { RsbuildConfig } from '@rsbuild/core';
-import { TypescriptOptions as TypescriptOptions$1, Builder, Options, BuilderResult as BuilderResult$1, NormalizedStoriesSpecifier } from 'storybook/internal/types';
+import { TypescriptOptions as TypescriptOptions$1, Builder, Options, StorybookConfigRaw, BuilderResult as BuilderResult$1, NormalizedStoriesSpecifier } from 'storybook/internal/types';
 import { PluginTypeCheckerOptions } from '@rsbuild/plugin-type-check';
 
 type RsbuildStats = {
@@ -19,6 +19,7 @@ type RsbuildBuilder = Builder<RsbuildConfig, RsbuildStats>;
 type RsbuildFinal = (config: RsbuildConfig, options: Options) => RsbuildConfig | Promise<RsbuildConfig>;
 type StorybookConfigRsbuild = {
     rsbuildFinal?: RsbuildFinal;
+    webpackAddons?: StorybookConfigRaw['addons'];
 };
 type BuilderOptions = {
     /**
@@ -42,10 +43,6 @@ interface BuilderResult extends BuilderResult$1 {
     stats?: Stats;
 }
 
-type RsbuildBuilderOptions = Options & {
-    typescriptOptions: TypescriptOptions;
-};
-
 declare const getVirtualModules: (options: Options) => Promise<{
     virtualModules: Record<string, string>;
     entries: string[];
@@ -66,7 +63,6 @@ type BuilderStartOptions = Parameters<RsbuildBuilder['start']>['0'];
 declare const executor: {
     get: (options: Options) => Promise<typeof rsbuildReal>;
 };
-declare const rsbuild: (_: unknown, options: RsbuildBuilderOptions) => Promise<rsbuildReal.RsbuildConfig>;
 declare const getConfig: RsbuildBuilder['getConfig'];
 declare function bail(): Promise<void>;
 declare const start: RsbuildBuilder['start'];
@@ -74,4 +70,4 @@ declare const build: ({ options }: BuilderStartOptions) => Promise<Stats>;
 declare const corePresets: string[];
 declare const previewMainTemplate: () => string;
 
-export { BuilderOptions, BuilderResult, RsbuildBuilder, RsbuildFinal, Stats, StorybookConfigRsbuild, TypescriptOptions, bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, rsbuild, start, toImportFn, toImportFnPart };
+export { BuilderOptions, BuilderResult, RsbuildBuilder, RsbuildFinal, Stats, StorybookConfigRsbuild, TypescriptOptions, bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, start, toImportFn, toImportFnPart };

package/dist/index.js

@@ -114,7 +114,6 @@ __export(src_exports, {
   importPipeline: () => importPipeline,
   previewMainTemplate: () => previewMainTemplate,
   printDuration: () => printDuration,
-  rsbuild: () => rsbuild,
   start: () => start,
   toImportFn: () => toImportFn,
   toImportFnPart: () => toImportFnPart
@@ -123,11 +122,11 @@ module.exports = __toCommonJS(src_exports);
 var import_node_net = require("net");
 var import_node_path5 = require("path");
 var rsbuildReal = __toESM(require("@rsbuild/core"));
-var import_core2 = require("@rsbuild/core");
-var import_express = __toESM(require("express"));
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_pretty_hrtime = __toESM(require_pretty_hrtime());
+var import_sirv = __toESM(require("sirv"));
 var import_core_path = require("storybook/core-path");
+var import_common3 = require("storybook/internal/common");
 var import_server_errors = require("storybook/internal/server-errors");
 
 // src/preview/iframe-rsbuild.config.ts
@@ -162,7 +161,15 @@ var import_ts_dedent = require("ts-dedent");
 var getVirtualModules = async (options) => {
   const virtualModules = {};
   const cwd = process.cwd();
-  const workingDir = options.cache?.basePath || process.cwd();
+  const workingDir = options.cache ? import_node_path.default.resolve(
+    process.cwd(),
+    // TODO: This is a hard code cache dir, as Rspack doesn't support virtual modules now.
+    // Remove this when Rspack supports virtual modules.
+    "./node_modules/.cache/storybook/storybook-rsbuild-builder"
+  ) : process.cwd();
+  if (!import_node_fs.default.existsSync(workingDir)) {
+    import_node_fs.default.mkdirSync(workingDir, { recursive: true });
+  }
   const isProd = options.configType === "PRODUCTION";
   const nonNormalizedStories = await options.presets.apply("stories", []);
   const entries = [];
@@ -192,15 +199,14 @@ var getVirtualModules = async (options) => {
     needPipelinedImport
   });
   const configEntryPath = (0, import_node_path2.resolve)((0, import_node_path2.join)(workingDir, "storybook-config-entry.js"));
-  virtualModules[configEntryPath] = (0, import_common.handlebars)(
-    await (0, import_common.readTemplate)(
-      require.resolve("storybook-builder-rsbuild/templates/virtualModuleModernEntry.js.handlebars")
-    ),
-    {
-      storiesFilename,
-      previewAnnotations
-    }
-    // We need to double escape `\` for webpack. We may have some in windows paths
+  virtualModules[configEntryPath] = (await (0, import_common.readTemplate)(
+    require.resolve("storybook-builder-rsbuild/templates/virtualModuleModernEntry.js")
+  )).replaceAll(`'{{storiesFilename}}'`, `'./${storiesFilename}'`).replaceAll(
+    `'{{previewAnnotations}}'`,
+    previewAnnotations.filter(Boolean).map((entry) => `'${entry}'`).join(",")
+  ).replaceAll(
+    `'{{previewAnnotations_requires}}'`,
+    previewAnnotations.filter(Boolean).map((entry) => `require('${entry}')`).join(",")
   ).replace(/\\/g, "\\\\");
   entries.push(configEntryPath);
   for (const [key, value] of Object.entries(virtualModules)) {
@@ -301,7 +307,7 @@ var storybookPaths = {
   ...routerPath ? { "@storybook/router": routerPath } : {},
   ...themingPath ? { "@storybook/theming": themingPath } : {}
 };
-var iframe_rsbuild_config_default = async (options) => {
+var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
   const { rsbuildConfigPath, addonDocs } = await (0, import_common2.getBuilderOptions)(options);
   const appliedDocsWebpack = await (0, import_preset.webpack)({}, { ...options, ...addonDocs });
   const {
@@ -327,7 +333,7 @@ var iframe_rsbuild_config_default = async (options) => {
     docsOptions,
     entries,
     nonNormalizedStories,
-    // modulesCount = 1000,
+    _modulesCount,
     build2,
     tagsOptions
   ] = await Promise.all([
@@ -341,8 +347,7 @@ var iframe_rsbuild_config_default = async (options) => {
     presets.apply("docs"),
     presets.apply("entries", []),
     presets.apply("stories", []),
-    options.cache?.get("modulesCount").catch(() => {
-    }),
+    options.cache?.get("modulesCount", 1e3),
     options.presets.apply("build"),
     presets.apply("tags", {})
   ]);
@@ -411,7 +416,7 @@ var iframe_rsbuild_config_default = async (options) => {
   contentFromConfig.source ??= {};
   contentFromConfig.source.entry = {};
   const resourceFilename = isProd ? "static/media/[name].[contenthash:8][ext]" : "static/media/[path][name][ext]";
-  const merged = (0, import_core.mergeRsbuildConfig)(contentFromConfig, {
+  const rsbuildConfig = (0, import_core.mergeRsbuildConfig)(contentFromConfig, {
     output: {
       cleanDistPath: false,
       assetPrefix: "/",
@@ -539,7 +544,7 @@ var iframe_rsbuild_config_default = async (options) => {
           ...config.experiments,
           ...lazyCompilationConfig
         };
-        return mergeConfig(config, appliedDocsWebpack);
+        return mergeConfig(config, extraWebpackConfig, appliedDocsWebpack);
       },
       htmlPlugin: {
         filename: "iframe.html",
@@ -571,7 +576,7 @@ var iframe_rsbuild_config_default = async (options) => {
       }
     }
   });
-  return merged;
+  return rsbuildConfig;
 };
 
 // src/react-shims.ts
@@ -619,11 +624,43 @@ var executor = {
     return rsbuildInstance;
   }
 };
+var isObject = (val) => val != null && typeof val === "object" && Array.isArray(val) === false;
+function nonNullables(value) {
+  return value !== void 0;
+}
 var rsbuild = async (_, options) => {
   const { presets } = options;
-  let defaultConfig = await iframe_rsbuild_config_default(options);
+  const webpackAddons = await presets.apply("webpackAddons");
+  const resolvedWebpackAddons = (webpackAddons ?? []).map((preset) => {
+    const options2 = isObject(preset) ? preset.options || void 0 : void 0;
+    const name = isObject(preset) ? preset.name : preset;
+    return (0, import_common3.resolveAddonName)(options2.configDir, name, options2);
+  }).filter(nonNullables);
+  const { apply } = await (0, import_common3.getPresets)(resolvedWebpackAddons, options);
+  const webpackAddonsConfig = await apply(
+    "webpackFinal",
+    // TODO: using empty webpack config as base for now. It's better to using the composed rspack
+    // config in `iframe-rsbuild.config.ts` as base config. But when `tools.rspack` is an async function,
+    // the following `tools.rspack` raise an ` Promises are not supported` error.
+    {
+      output: {},
+      module: {},
+      plugins: [],
+      resolve: {},
+      devServer: {},
+      optimization: {},
+      performance: {},
+      externals: {},
+      experiments: {},
+      node: {},
+      stats: {},
+      entry: {}
+    },
+    options
+  );
+  let defaultConfig = await iframe_rsbuild_config_default(options, webpackAddonsConfig);
   const shimsConfig = await applyReactShims(defaultConfig, options);
-  defaultConfig = (0, import_core2.mergeRsbuildConfig)(
+  defaultConfig = rsbuildReal.mergeRsbuildConfig(
     defaultConfig,
     shimsConfig
   );
@@ -632,7 +669,7 @@ var rsbuild = async (_, options) => {
     defaultConfig,
     options
   );
-  return (0, import_core2.mergeRsbuildConfig)(finalDefaultConfig);
+  return finalDefaultConfig;
 };
 var getConfig = async (options) => {
   const { presets } = options;
@@ -693,7 +730,7 @@ var start = async ({
   const previewDirOrigin = previewResolvedDir;
   router.use(
     "/sb-preview",
-    import_express.default.static(previewDirOrigin, { immutable: true, maxAge: "5m" })
+    (0, import_sirv.default)(previewDirOrigin, { maxAge: 3e5, dev: true, immutable: true })
   );
   router.use(rsbuildServer.middlewares);
   rsbuildServer.connectWebSocket({ server: storybookServer });
@@ -759,7 +796,6 @@ function getRandomPort(host) {
   importPipeline,
   previewMainTemplate,
   printDuration,
-  rsbuild,
   start,
   toImportFn,
   toImportFnPart

package/dist/index.mjs

@@ -2,16 +2,16 @@ import { __commonJS, __toESM, __require } from './chunk-TTFRSOOU.mjs';
 import { createServer } from 'net';
 import path, { join, resolve, parse, dirname, isAbsolute } from 'path';
 import * as rsbuildReal from '@rsbuild/core';
-import { mergeRsbuildConfig, loadConfig } from '@rsbuild/core';
-import express from 'express';
+import { loadConfig, mergeRsbuildConfig } from '@rsbuild/core';
 import fs2 from 'fs-extra';
+import sirv from 'sirv';
 import { corePath } from 'storybook/core-path';
+import { normalizeStories, loadPreviewOrConfigFile, getBuilderOptions, readTemplate, resolveAddonName, getPresets, stringifyProcessEnvs, isPreservingSymlinks } from 'storybook/internal/common';
 import { WebpackInvocationError } from 'storybook/internal/server-errors';
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
 import { webpack } from '@storybook/addon-docs/dist/preset';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import { pluginHtmlMinifierTerser } from 'rsbuild-plugin-html-minifier-terser';
-import { normalizeStories, loadPreviewOrConfigFile, getBuilderOptions, handlebars, readTemplate, stringifyProcessEnvs, isPreservingSymlinks } from 'storybook/internal/common';
 import { globalsNameReferenceMap } from 'storybook/internal/preview/globals';
 import { dedent } from 'ts-dedent';
 import fs from 'fs';
@@ -103,7 +103,15 @@ function slash(path2) {
 var getVirtualModules = async (options) => {
   const virtualModules = {};
   const cwd = process.cwd();
-  const workingDir = options.cache?.basePath || process.cwd();
+  const workingDir = options.cache ? path.resolve(
+    process.cwd(),
+    // TODO: This is a hard code cache dir, as Rspack doesn't support virtual modules now.
+    // Remove this when Rspack supports virtual modules.
+    "./node_modules/.cache/storybook/storybook-rsbuild-builder"
+  ) : process.cwd();
+  if (!fs.existsSync(workingDir)) {
+    fs.mkdirSync(workingDir, { recursive: true });
+  }
   const isProd = options.configType === "PRODUCTION";
   const nonNormalizedStories = await options.presets.apply("stories", []);
   const entries = [];
@@ -133,17 +141,16 @@ var getVirtualModules = async (options) => {
     needPipelinedImport
   });
   const configEntryPath = resolve(join(workingDir, "storybook-config-entry.js"));
-  virtualModules[configEntryPath] = handlebars(
-    await readTemplate(
-      __require.resolve(
-        "storybook-builder-rsbuild/templates/virtualModuleModernEntry.js.handlebars"
-      )
-    ),
-    {
-      storiesFilename,
-      previewAnnotations
-    }
-    // We need to double escape `\` for webpack. We may have some in windows paths
+  virtualModules[configEntryPath] = (await readTemplate(
+    __require.resolve(
+      "storybook-builder-rsbuild/templates/virtualModuleModernEntry.js"
+    )
+  )).replaceAll(`'{{storiesFilename}}'`, `'./${storiesFilename}'`).replaceAll(
+    `'{{previewAnnotations}}'`,
+    previewAnnotations.filter(Boolean).map((entry) => `'${entry}'`).join(",")
+  ).replaceAll(
+    `'{{previewAnnotations_requires}}'`,
+    previewAnnotations.filter(Boolean).map((entry) => `require('${entry}')`).join(",")
   ).replace(/\\/g, "\\\\");
   entries.push(configEntryPath);
   for (const [key, value] of Object.entries(virtualModules)) {
@@ -244,7 +251,7 @@ var storybookPaths = {
   ...routerPath ? { "@storybook/router": routerPath } : {},
   ...themingPath ? { "@storybook/theming": themingPath } : {}
 };
-var iframe_rsbuild_config_default = async (options) => {
+var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
   const { rsbuildConfigPath, addonDocs } = await getBuilderOptions(options);
   const appliedDocsWebpack = await webpack({}, { ...options, ...addonDocs });
   const {
@@ -270,7 +277,7 @@ var iframe_rsbuild_config_default = async (options) => {
     docsOptions,
     entries,
     nonNormalizedStories,
-    // modulesCount = 1000,
+    _modulesCount,
     build2,
     tagsOptions
   ] = await Promise.all([
@@ -284,8 +291,7 @@ var iframe_rsbuild_config_default = async (options) => {
     presets.apply("docs"),
     presets.apply("entries", []),
     presets.apply("stories", []),
-    options.cache?.get("modulesCount").catch(() => {
-    }),
+    options.cache?.get("modulesCount", 1e3),
     options.presets.apply("build"),
     presets.apply("tags", {})
   ]);
@@ -354,7 +360,7 @@ var iframe_rsbuild_config_default = async (options) => {
   contentFromConfig.source ??= {};
   contentFromConfig.source.entry = {};
   const resourceFilename = isProd ? "static/media/[name].[contenthash:8][ext]" : "static/media/[path][name][ext]";
-  const merged = mergeRsbuildConfig(contentFromConfig, {
+  const rsbuildConfig = mergeRsbuildConfig(contentFromConfig, {
     output: {
       cleanDistPath: false,
       assetPrefix: "/",
@@ -484,7 +490,7 @@ var iframe_rsbuild_config_default = async (options) => {
           ...config.experiments,
           ...lazyCompilationConfig
         };
-        return mergeConfig(config, appliedDocsWebpack);
+        return mergeConfig(config, extraWebpackConfig, appliedDocsWebpack);
       },
       htmlPlugin: {
         filename: "iframe.html",
@@ -516,7 +522,7 @@ var iframe_rsbuild_config_default = async (options) => {
       }
     }
   });
-  return merged;
+  return rsbuildConfig;
 };
 var getIsReactVersion18or19 = async (options) => {
   const { legacyRootApi } = await options.presets.apply(
@@ -560,11 +566,43 @@ var executor = {
     return rsbuildInstance;
   }
 };
+var isObject = (val) => val != null && typeof val === "object" && Array.isArray(val) === false;
+function nonNullables(value) {
+  return value !== void 0;
+}
 var rsbuild = async (_, options) => {
   const { presets } = options;
-  let defaultConfig = await iframe_rsbuild_config_default(options);
+  const webpackAddons = await presets.apply("webpackAddons");
+  const resolvedWebpackAddons = (webpackAddons ?? []).map((preset) => {
+    const options2 = isObject(preset) ? preset.options || void 0 : void 0;
+    const name = isObject(preset) ? preset.name : preset;
+    return resolveAddonName(options2.configDir, name, options2);
+  }).filter(nonNullables);
+  const { apply } = await getPresets(resolvedWebpackAddons, options);
+  const webpackAddonsConfig = await apply(
+    "webpackFinal",
+    // TODO: using empty webpack config as base for now. It's better to using the composed rspack
+    // config in `iframe-rsbuild.config.ts` as base config. But when `tools.rspack` is an async function,
+    // the following `tools.rspack` raise an ` Promises are not supported` error.
+    {
+      output: {},
+      module: {},
+      plugins: [],
+      resolve: {},
+      devServer: {},
+      optimization: {},
+      performance: {},
+      externals: {},
+      experiments: {},
+      node: {},
+      stats: {},
+      entry: {}
+    },
+    options
+  );
+  let defaultConfig = await iframe_rsbuild_config_default(options, webpackAddonsConfig);
   const shimsConfig = await applyReactShims(defaultConfig, options);
-  defaultConfig = mergeRsbuildConfig(
+  defaultConfig = rsbuildReal.mergeRsbuildConfig(
     defaultConfig,
     shimsConfig
   );
@@ -573,7 +611,7 @@ var rsbuild = async (_, options) => {
     defaultConfig,
     options
   );
-  return mergeRsbuildConfig(finalDefaultConfig);
+  return finalDefaultConfig;
 };
 var getConfig = async (options) => {
   const { presets } = options;
@@ -634,7 +672,7 @@ var start = async ({
   const previewDirOrigin = previewResolvedDir;
   router.use(
     "/sb-preview",
-    express.static(previewDirOrigin, { immutable: true, maxAge: "5m" })
+    sirv(previewDirOrigin, { maxAge: 3e5, dev: true, immutable: true })
   );
   router.use(rsbuildServer.middlewares);
   rsbuildServer.connectWebSocket({ server: storybookServer });
@@ -690,4 +728,4 @@ function getRandomPort(host) {
   });
 }
 
-export { bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, rsbuild, start, toImportFn, toImportFnPart };
+export { bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, start, toImportFn, toImportFnPart };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-builder-rsbuild",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Rsbuild builder for Storybook",
   "keywords": [
     "storybook",
@@ -38,7 +38,7 @@
       "node": "./dist/loaders/export-order-loader.js",
       "require": "./dist/loaders/export-order-loader.js"
     },
-    "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
+    "./templates/virtualModuleModernEntry.js": "./templates/virtualModuleModernEntry.js",
     "./templates/preview.ejs": "./templates/preview.ejs",
     "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js",
     "./templates/virtualModuleStory.template.js": "./templates/virtualModuleStory.template.js",
@@ -61,33 +61,29 @@
     "@storybook/core-webpack": "^8.2.1",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "cjs-module-lexer": "^1.2.3",
+    "cjs-module-lexer": "^1.4.1",
     "constants-browserify": "^1.0.0",
-    "css-loader": "^6.11.0",
     "es-module-lexer": "^1.5.4",
-    "express": "^4.19.2",
     "fs-extra": "^11.2.0",
-    "magic-string": "^0.30.11",
+    "magic-string": "^0.30.12",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "rsbuild-plugin-html-minifier-terser": "^1.1.1",
-    "style-loader": "^3.3.4",
+    "sirv": "^2.0.4",
     "ts-dedent": "^2.2.0",
     "url": "^0.11.4",
     "util": "^0.12.5",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@rsbuild/core": "1.0.1",
-    "@types/express": "^4.17.21",
+    "@rsbuild/core": "1.0.17",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^18.0.0",
     "@types/pretty-hrtime": "^1.0.3",
-    "add": "^2.0.6",
     "pretty-hrtime": "^1.0.3",
     "slash": "^5.1.0",
-    "storybook": "8.3.0-beta.3",
-    "typescript": "^5.3.2"
+    "storybook": "8.4.0-alpha.7",
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
     "@rsbuild/core": "^1.0.1",

package/templates/virtualModuleModernEntry.js

@@ -0,0 +1,38 @@
+import { createBrowserChannel } from 'storybook/internal/channels'
+import {
+  PreviewWeb,
+  addons,
+  composeConfigs,
+} from 'storybook/internal/preview-api'
+
+import { global } from '@storybook/global'
+
+import { importFn } from '{{storiesFilename}}'
+
+const getProjectAnnotations = () =>
+  composeConfigs(['{{previewAnnotations_requires}}'])
+
+const channel = createBrowserChannel({ page: 'preview' })
+addons.setChannel(channel)
+
+if (global.CONFIG_TYPE === 'DEVELOPMENT') {
+  window.__STORYBOOK_SERVER_CHANNEL__ = channel
+}
+
+const preview = new PreviewWeb(importFn, getProjectAnnotations)
+
+window.__STORYBOOK_PREVIEW__ = preview
+window.__STORYBOOK_STORY_STORE__ = preview.storyStore
+window.__STORYBOOK_ADDONS_CHANNEL__ = channel
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept('{{storiesFilename}}', () => {
+    // importFn has changed so we need to patch the new one in
+    preview.onStoriesChanged({ importFn })
+  })
+
+  import.meta.webpackHot.accept(['{{previewAnnotations}}'], () => {
+    // getProjectAnnotations has changed so we need to patch the new one in
+    preview.onGetProjectAnnotationsChanged({ getProjectAnnotations })
+  })
+}

package/templates/virtualModuleModernEntry.js.handlebars

@@ -1,34 +0,0 @@
-import { global } from '@storybook/global';
-
-import { ClientApi, PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-api';
-import { createBrowserChannel } from 'storybook/internal/channels';
-
-import { importFn } from './{{storiesFilename}}';
-
-const getProjectAnnotations = () =>
-  composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]);
-
-const channel = createBrowserChannel({ page: 'preview' });
-addons.setChannel(channel);
-
-if (global.CONFIG_TYPE === 'DEVELOPMENT'){
-  window.__STORYBOOK_SERVER_CHANNEL__ = channel;
-}
-
-const preview = new PreviewWeb(importFn, getProjectAnnotations);
-
-window.__STORYBOOK_PREVIEW__ = preview;
-window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-
-if (import.meta.webpackHot) {
-  import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
-    // importFn has changed so we need to patch the new one in
-    preview.onStoriesChanged({ importFn });
-  });
-
-  import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => {
-    // getProjectAnnotations has changed so we need to patch the new one in
-    preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
-  });
-}