storybook-builder-rsbuild 0.1.1 → 0.1.2

package/dist/index.js

@@ -122,10 +122,9 @@ 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");
@@ -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)) {
@@ -327,7 +333,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
     docsOptions,
     entries,
     nonNormalizedStories,
-    // modulesCount = 1000,
+    _modulesCount,
     build2,
     tagsOptions
   ] = await Promise.all([
@@ -341,8 +347,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
     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", {})
   ]);
@@ -655,7 +660,7 @@ var rsbuild = async (_, 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
   );
@@ -725,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 });

package/dist/index.mjs

@@ -2,11 +2,11 @@ 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, handlebars, readTemplate, resolveAddonName, getPresets, stringifyProcessEnvs, isPreservingSymlinks } from 'storybook/internal/common';
+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';
@@ -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)) {
@@ -270,7 +277,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
     docsOptions,
     entries,
     nonNormalizedStories,
-    // modulesCount = 1000,
+    _modulesCount,
     build2,
     tagsOptions
   ] = await Promise.all([
@@ -284,8 +291,7 @@ var iframe_rsbuild_config_default = async (options, extraWebpackConfig) => {
     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", {})
   ]);
@@ -596,7 +602,7 @@ var rsbuild = async (_, options) => {
   );
   let defaultConfig = await iframe_rsbuild_config_default(options, webpackAddonsConfig);
   const shimsConfig = await applyReactShims(defaultConfig, options);
-  defaultConfig = mergeRsbuildConfig(
+  defaultConfig = rsbuildReal.mergeRsbuildConfig(
     defaultConfig,
     shimsConfig
   );
@@ -666,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 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-builder-rsbuild",
-  "version": "0.1.1",
+  "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",
@@ -64,27 +64,26 @@
     "cjs-module-lexer": "^1.4.1",
     "constants-browserify": "^1.0.0",
     "es-module-lexer": "^1.5.4",
-    "express": "^4.21.0",
     "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",
+    "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.8",
-    "@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",
     "pretty-hrtime": "^1.0.3",
     "slash": "^5.1.0",
-    "storybook": "8.4.0-alpha.0",
-    "typescript": "^5.6.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 });
-  });
-}