storybook-builder-rsbuild 0.0.1-beta.0

package/dist/index.mjs

@@ -0,0 +1,554 @@
+import { __commonJS, __toESM, __require } from './chunk-TTFRSOOU.mjs';
+import * as rsbuildReal from '@rsbuild/core';
+import { loadConfig, mergeRsbuildConfig } from '@rsbuild/core';
+import path, { join, resolve, parse, dirname } from 'path';
+import express from 'express';
+import fs2 from 'fs-extra';
+import { WebpackInvocationError, NoStatsForViteDevError } from '@storybook/core-events/server-errors';
+import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
+import { globalsNameReferenceMap } from '@storybook/preview/globals';
+import { normalizeStories, loadPreviewOrConfigFile, handlebars, readTemplate, getBuilderOptions, stringifyProcessEnvs, isPreservingSymlinks } from '@storybook/core-common';
+import { dedent } from 'ts-dedent';
+import fs from 'fs';
+import { webpackIncludeRegexp } from '@storybook/core-webpack';
+import { webpack } from '@storybook/addon-docs/dist/preset';
+
+// ../../node_modules/.pnpm/pretty-hrtime@1.0.3/node_modules/pretty-hrtime/index.js
+var require_pretty_hrtime = __commonJS({
+  "../../node_modules/.pnpm/pretty-hrtime@1.0.3/node_modules/pretty-hrtime/index.js"(exports, module) {
+    var minimalDesc = ["h", "min", "s", "ms", "\u03BCs", "ns"];
+    var verboseDesc = ["hour", "minute", "second", "millisecond", "microsecond", "nanosecond"];
+    var convert = [60 * 60, 60, 1, 1e6, 1e3, 1];
+    module.exports = function(source, opts) {
+      var verbose, precise, i, spot, sourceAtStep, valAtStep, decimals, strAtStep, results, totalSeconds;
+      verbose = false;
+      precise = false;
+      if (opts) {
+        verbose = opts.verbose || false;
+        precise = opts.precise || false;
+      }
+      if (!Array.isArray(source) || source.length !== 2) {
+        return "";
+      }
+      if (typeof source[0] !== "number" || typeof source[1] !== "number") {
+        return "";
+      }
+      if (source[1] < 0) {
+        totalSeconds = source[0] + source[1] / 1e9;
+        source[0] = parseInt(totalSeconds);
+        source[1] = parseFloat((totalSeconds % 1).toPrecision(9)) * 1e9;
+      }
+      results = "";
+      for (i = 0; i < 6; i++) {
+        spot = i < 3 ? 0 : 1;
+        sourceAtStep = source[spot];
+        if (i !== 3 && i !== 0) {
+          sourceAtStep = sourceAtStep % convert[i - 1];
+        }
+        if (i === 2) {
+          sourceAtStep += source[1] / 1e9;
+        }
+        valAtStep = sourceAtStep / convert[i];
+        if (valAtStep >= 1) {
+          if (verbose) {
+            valAtStep = Math.floor(valAtStep);
+          }
+          if (!precise) {
+            decimals = valAtStep >= 10 ? 0 : 2;
+            strAtStep = valAtStep.toFixed(decimals);
+          } else {
+            strAtStep = valAtStep.toString();
+          }
+          if (strAtStep.indexOf(".") > -1 && strAtStep[strAtStep.length - 1] === "0") {
+            strAtStep = strAtStep.replace(/\.?0+$/, "");
+          }
+          if (results) {
+            results += " ";
+          }
+          results += strAtStep;
+          if (verbose) {
+            results += " " + verboseDesc[i];
+            if (strAtStep !== "1") {
+              results += "s";
+            }
+          } else {
+            results += " " + minimalDesc[i];
+          }
+          if (!verbose) {
+            break;
+          }
+        }
+      }
+      return results;
+    };
+  }
+});
+
+// ../../node_modules/.pnpm/slash@5.1.0/node_modules/slash/index.js
+function slash(path2) {
+  const isExtendedLengthPath = path2.startsWith("\\\\?\\");
+  if (isExtendedLengthPath) {
+    return path2;
+  }
+  return path2.replace(/\\/g, "/");
+}
+var getVirtualModules = async (options) => {
+  const virtualModules = {};
+  const cwd = process.cwd();
+  const workingDir = options.cache?.basePath || process.cwd();
+  const isProd = options.configType === "PRODUCTION";
+  const nonNormalizedStories = await options.presets.apply("stories", []);
+  const entries = [];
+  const stories = normalizeStories(nonNormalizedStories, {
+    configDir: options.configDir,
+    workingDir
+  });
+  const realPathRelativeToCwd = path.relative(workingDir, cwd);
+  const previewAnnotations = [
+    ...(await options.presets.apply(
+      "previewAnnotations",
+      [],
+      options
+    )).map((entry) => {
+      if (typeof entry === "object") {
+        return entry.absolute;
+      }
+      return slash(entry);
+    }),
+    loadPreviewOrConfigFile(options)
+  ].filter(Boolean);
+  const storiesFilename = "storybook-stories.js";
+  const storiesPath = resolve(join(workingDir, storiesFilename));
+  const needPipelinedImport = !isProd;
+  virtualModules[storiesPath] = toImportFn(stories, realPathRelativeToCwd, {
+    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
+  ).replace(/\\/g, "\\\\");
+  entries.push(configEntryPath);
+  Object.entries(virtualModules).forEach(([key, value]) => {
+    fs.writeFileSync(key, value);
+  });
+  return {
+    virtualModules,
+    entries
+  };
+};
+function toImportFnPart(specifier) {
+  const { directory, importPathMatcher } = specifier;
+  return dedent`
+      async (path) => {
+        if (!${importPathMatcher}.exec(path)) {
+          return;
+        }
+
+        const pathRemainder = path.substring(${directory.length + 1});
+        return import(
+          /* webpackChunkName: "[request]" */
+          /* webpackInclude: ${webpackIncludeRegexp(specifier)} */
+          '${directory}/' + pathRemainder
+        );
+      }
+
+  `;
+}
+function toImportFn(stories, relativeOffset, { needPipelinedImport } = {}) {
+  let pipelinedImport = `const pipeline = (x) => x();`;
+  if (needPipelinedImport) {
+    pipelinedImport = `
+      const importPipeline = ${importPipeline};
+      const pipeline = importPipeline();
+    `;
+  }
+  return dedent`
+    ${pipelinedImport}
+
+    const importers = [
+      ${stories.map(toImportFnPart).join(",\n")}
+    ];
+
+    export async function importFn(path) {
+      const offset = '${relativeOffset}';
+
+      for (let i = 0; i < importers.length; i++) {
+        const pathWithOffset = buildPath(offset, path)
+
+        const moduleExports = await pipeline(() => importers[i](pathWithOffset));
+        if (moduleExports) {
+          return moduleExports;
+        }
+      }
+    }
+
+    function buildPath(offset, path) {
+      if(path.startsWith('./')) {
+        return offset + '/' + path.substring(2);
+      } else {
+        return offset + '/' + path;
+      }
+    }
+  `;
+}
+function importPipeline() {
+  let importGate = Promise.resolve();
+  return async (importFn) => {
+    await importGate;
+    const moduleExportsPromise = importFn();
+    importGate = importGate.then(async () => {
+      await moduleExportsPromise;
+    });
+    return moduleExportsPromise;
+  };
+}
+var getAbsolutePath = (input) => dirname(__require.resolve(join(input, "package.json")));
+var maybeGetAbsolutePath = (input) => {
+  try {
+    return getAbsolutePath(input);
+  } catch (e) {
+    return false;
+  }
+};
+var managerAPIPath = maybeGetAbsolutePath(`@storybook/manager-api`);
+var componentsPath = maybeGetAbsolutePath(`@storybook/components`);
+var globalPath = maybeGetAbsolutePath(`@storybook/global`);
+var routerPath = maybeGetAbsolutePath(`@storybook/router`);
+var themingPath = maybeGetAbsolutePath(`@storybook/theming`);
+var storybookPaths = {
+  ...managerAPIPath ? {
+    [`@storybook/manager-api`]: managerAPIPath
+  } : {},
+  ...componentsPath ? { [`@storybook/components`]: componentsPath } : {},
+  ...globalPath ? { [`@storybook/global`]: globalPath } : {},
+  ...routerPath ? { [`@storybook/router`]: routerPath } : {},
+  ...themingPath ? { [`@storybook/theming`]: themingPath } : {}
+};
+var iframe_rsbuild_config_default = async (options) => {
+  const appliedDocsWebpack = await webpack({}, options);
+  const {
+    outputDir = join(".", "public"),
+    quiet,
+    packageJson,
+    configType,
+    presets,
+    previewUrl,
+    // typescriptOptions,
+    features
+  } = options;
+  const isProd = configType === "PRODUCTION";
+  const workingDir = process.cwd();
+  const [
+    coreOptions,
+    frameworkOptions,
+    envs,
+    logLevel,
+    headHtmlSnippet,
+    bodyHtmlSnippet,
+    template,
+    docsOptions,
+    entries,
+    nonNormalizedStories,
+    // modulesCount = 1000,
+    build2,
+    tagsOptions
+  ] = await Promise.all([
+    presets.apply("core"),
+    presets.apply("frameworkOptions"),
+    presets.apply("env"),
+    presets.apply("logLevel", void 0),
+    presets.apply("previewHead"),
+    presets.apply("previewBody"),
+    presets.apply("previewMainTemplate"),
+    presets.apply("docs"),
+    presets.apply("entries", []),
+    presets.apply("stories", []),
+    options.cache?.get("modulesCount").catch(() => {
+    }),
+    options.presets.apply("build"),
+    presets.apply("tags", {})
+  ]);
+  const { rsbuildConfigPath } = await getBuilderOptions(options);
+  const stories = normalizeStories(nonNormalizedStories, {
+    configDir: options.configDir,
+    workingDir
+  });
+  if (!template) {
+    throw new Error(dedent`
+      Storybook's Webpack5 builder requires a template to be specified.
+      Somehow you've ended up with a falsy value for the template option.
+
+      Please file an issue at https://github.com/storybookjs/storybook with a reproduction.
+    `);
+  }
+  const externals = globalsNameReferenceMap;
+  if (build2?.test?.disableBlocks) {
+    externals["@storybook/blocks"] = "__STORYBOOK_BLOCKS_EMPTY_MODULE__";
+  }
+  const { virtualModules: _virtualModules, entries: dynamicEntries } = await getVirtualModules(options);
+  if (!options.cache) {
+    throw new Error("Cache is required");
+  }
+  const { content } = await loadConfig({
+    cwd: workingDir,
+    path: rsbuildConfigPath
+  });
+  const resourceFilename = isProd ? "static/media/[name].[contenthash:8][ext]" : "static/media/[path][name][ext]";
+  const merged = mergeRsbuildConfig(content, {
+    output: {
+      cleanDistPath: false,
+      dataUriLimit: {
+        media: 1e4
+      },
+      sourceMap: {
+        js: options.build?.test?.disableSourcemaps ? false : "cheap-module-source-map",
+        css: options.build?.test?.disableSourcemaps ? false : true
+      },
+      distPath: {
+        root: resolve(process.cwd(), outputDir)
+      },
+      filename: {
+        js: isProd ? "[name].[contenthash:8].iframe.bundle.js" : "[name].iframe.bundle.js",
+        image: resourceFilename,
+        font: resourceFilename,
+        media: resourceFilename
+      },
+      assetPrefix: "/",
+      externals
+    },
+    dev: {
+      assetPrefix: "",
+      progressBar: !quiet
+    },
+    source: {
+      alias: {
+        ...storybookPaths
+      },
+      entry: {
+        // to avoid `It's not allowed to load an initial chunk on demand. The chunk name "main" is already used by an entrypoint` of
+        main: [...entries ?? [], ...dynamicEntries]
+      },
+      define: {
+        ...stringifyProcessEnvs(envs),
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
+      }
+    },
+    performance: {
+      chunkSplit: {
+        strategy: "custom",
+        splitChunks: {
+          chunks: "all"
+        }
+      }
+    },
+    tools: {
+      rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
+        addRules({
+          test: /\.stories\.([tj])sx?$|(stories|story)\.mdx$/,
+          exclude: /node_modules/,
+          enforce: "post",
+          use: [
+            {
+              loader: __require.resolve(
+                "storybook-builder-rsbuild/loaders/export-order-loader"
+              )
+            }
+          ]
+        });
+        config.resolve ??= {};
+        config.resolve.symlinks = !isPreservingSymlinks();
+        config.watchOptions = {
+          ignored: /node_modules/
+        };
+        config.output = config.output || {};
+        config.output.publicPath = "";
+        config.ignoreWarnings = [
+          ...config.ignoreWarnings || [],
+          /export '\S+' was not found in 'global'/,
+          /export '\S+' was not found in '@storybook\/global'/
+        ];
+        config.resolve ??= {};
+        config.resolve.fallback ??= {
+          stream: false,
+          path: __require.resolve("path-browserify"),
+          assert: __require.resolve("browser-assert"),
+          util: __require.resolve("util"),
+          url: __require.resolve("url"),
+          fs: false,
+          constants: __require.resolve("constants-browserify")
+        };
+        config.optimization ??= {};
+        config.optimization.runtimeChunk = true;
+        config.optimization.usedExports = options.build?.test?.disableTreeShaking ? false : isProd;
+        config.optimization.moduleIds = "named";
+        appendPlugins(
+          [
+            new rspack.ProvidePlugin({
+              process: __require.resolve("process/browser.js")
+            }),
+            new CaseSensitivePathsPlugin()
+          ].filter(Boolean)
+        );
+        return mergeConfig(config, appliedDocsWebpack);
+      },
+      htmlPlugin: {
+        filename: `iframe.html`,
+        // FIXME: `none` isn't a known option
+        chunksSortMode: "none",
+        alwaysWriteToDisk: true,
+        inject: false,
+        template,
+        templateParameters: {
+          version: packageJson.version,
+          globals: {
+            CONFIG_TYPE: configType,
+            LOGLEVEL: logLevel,
+            FRAMEWORK_OPTIONS: frameworkOptions,
+            CHANNEL_OPTIONS: coreOptions.channelOptions,
+            FEATURES: features,
+            PREVIEW_URL: previewUrl,
+            STORIES: stories.map((specifier) => ({
+              ...specifier,
+              importPathMatcher: specifier.importPathMatcher.source
+            })),
+            DOCS_OPTIONS: docsOptions,
+            TAGS_OPTIONS: tagsOptions,
+            ...build2?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}
+          },
+          headHtmlSnippet,
+          bodyHtmlSnippet
+        },
+        minify: {
+          collapseWhitespace: true,
+          removeComments: true,
+          removeRedundantAttributes: true,
+          removeScriptTypeAttributes: false,
+          removeStyleLinkTypeAttributes: true,
+          useShortDoctype: true
+        }
+      }
+    }
+  });
+  return merged;
+};
+
+// src/index.ts
+var import_pretty_hrtime = __toESM(require_pretty_hrtime());
+var printDuration = (startTime) => (0, import_pretty_hrtime.default)(process.hrtime(startTime)).replace(" ms", " milliseconds").replace(" s", " seconds").replace(" m", " minutes");
+var getAbsolutePath2 = (input) => dirname(__require.resolve(join(input, "package.json")));
+var executor = {
+  get: async (options) => {
+    const rsbuildInstance = await options.presets.apply("rsbuildInstance") || rsbuildReal;
+    return rsbuildInstance;
+  }
+};
+var rsbuild = async (_, options) => {
+  const defaultConfig = await iframe_rsbuild_config_default(options);
+  const { presets } = options;
+  const finalDefaultConfig = await presets.apply(
+    "rsbuildFinal",
+    defaultConfig,
+    options
+  );
+  return finalDefaultConfig;
+};
+var getConfig = async (options) => {
+  const { presets } = options;
+  const typescriptOptions = await presets.apply("typescript", {}, options);
+  const frameworkOptions = await presets.apply("frameworkOptions");
+  return rsbuild({}, {
+    ...options,
+    typescriptOptions,
+    frameworkOptions
+  });
+};
+var server;
+async function bail() {
+  return server?.close();
+}
+var start = async ({
+  startTime,
+  options,
+  router,
+  server: storybookServer,
+  channel
+}) => {
+  const { createRsbuild } = await executor.get(options);
+  const config = await getConfig(options);
+  const rsbuildBuild = await createRsbuild({
+    cwd: process.cwd(),
+    rsbuildConfig: {
+      ...config,
+      server: {
+        ...config.server,
+        port: options.port,
+        host: "localhost",
+        htmlFallback: false,
+        strictPort: true,
+        printUrls: false
+      },
+      dev: {
+        client: {}
+      }
+    }
+  });
+  const rsbuildServer = await rsbuildBuild.createDevServer();
+  server = rsbuildServer;
+  if (!rsbuildBuild) {
+    throw new WebpackInvocationError({
+      // eslint-disable-next-line local-rules/no-uncategorized-errors
+      error: new Error(`Missing Rsbuild build instance at runtime!`)
+    });
+  }
+  const previewResolvedDir = getAbsolutePath2("@storybook/preview");
+  const previewDirOrigin = join(previewResolvedDir, "dist");
+  router.use(
+    `/sb-preview`,
+    express.static(previewDirOrigin, { immutable: true, maxAge: "5m" })
+  );
+  router.use(rsbuildServer.middlewares);
+  storybookServer.on("upgrade", rsbuildServer.onHTTPUpgrade);
+  return {
+    bail,
+    stats: {
+      toJson: () => {
+        throw new NoStatsForViteDevError();
+      }
+    },
+    totalTime: process.hrtime(startTime)
+  };
+};
+var build = async ({ options }) => {
+  const { createRsbuild } = await executor.get(options);
+  const config = await getConfig(options);
+  const rsbuildBuild = await createRsbuild({
+    cwd: process.cwd(),
+    rsbuildConfig: config
+  });
+  const previewResolvedDir = getAbsolutePath2("@storybook/preview");
+  const previewDirOrigin = join(previewResolvedDir, "dist");
+  const previewDirTarget = join(options.outputDir || "", `sb-preview`);
+  const previewFiles = fs2.copy(previewDirOrigin, previewDirTarget, {
+    filter: (src) => {
+      const { ext } = parse(src);
+      if (ext) {
+        return ext === ".js";
+      }
+      return true;
+    }
+  });
+  await Promise.all([rsbuildBuild.build(), previewFiles]);
+};
+var corePresets = [join(__dirname, "./preview-preset.js")];
+var previewMainTemplate = () => __require.resolve("storybook-builder-rsbuild/templates/preview.ejs");
+
+export { bail, build, corePresets, executor, getConfig, getVirtualModules, importPipeline, previewMainTemplate, printDuration, rsbuild, start, toImportFn, toImportFnPart };

package/dist/loaders/export-order-loader.d.ts

@@ -0,0 +1,2 @@
+// dev-mode
+export * from '../../src/loaders/export-order-loader';

package/dist/loaders/export-order-loader.js

@@ -0,0 +1,72 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/loaders/export-order-loader.ts
+var export_order_loader_exports = {};
+__export(export_order_loader_exports, {
+  default: () => loader
+});
+module.exports = __toCommonJS(export_order_loader_exports);
+var import_node_assert = __toESM(require("assert"));
+var import_cjs_module_lexer = require("cjs-module-lexer");
+var import_es_module_lexer = require("es-module-lexer");
+var import_magic_string = __toESM(require("magic-string"));
+async function loader(source, map, meta) {
+  const callback = this.async();
+  try {
+    const magicString = new import_magic_string.default(source);
+    try {
+      const parseResult = await (0, import_es_module_lexer.parse)(source);
+      const namedExportsOrder = (parseResult[1] || []).map((e) => source.substring(e.s, e.e)).filter((e) => e !== "default");
+      (0, import_node_assert.default)(
+        namedExportsOrder.length > 0,
+        "No named exports found. Very likely that this is not a ES module."
+      );
+      magicString.append(
+        `;export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
+      );
+    } catch {
+      await (0, import_cjs_module_lexer.init)();
+      const namedExportsOrder = ((0, import_cjs_module_lexer.parse)(source).exports || []).filter(
+        (e) => e !== "default" && e !== "__esModule"
+      );
+      (0, import_node_assert.default)(
+        namedExportsOrder.length > 0,
+        "No named exports found. Very likely that this is not a CJS module."
+      );
+      magicString.append(
+        `;module.exports.__namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
+      );
+    }
+    const generatedMap = magicString.generateMap({ hires: true });
+    return callback(null, magicString.toString(), generatedMap, meta);
+  } catch (err) {
+    return callback(null, source, map, meta);
+  }
+}

package/dist/loaders/export-order-loader.mjs

@@ -0,0 +1,41 @@
+import '../chunk-TTFRSOOU.mjs';
+import assert from 'assert';
+import { init, parse as parse$1 } from 'cjs-module-lexer';
+import { parse } from 'es-module-lexer';
+import MagicString from 'magic-string';
+
+async function loader(source, map, meta) {
+  const callback = this.async();
+  try {
+    const magicString = new MagicString(source);
+    try {
+      const parseResult = await parse(source);
+      const namedExportsOrder = (parseResult[1] || []).map((e) => source.substring(e.s, e.e)).filter((e) => e !== "default");
+      assert(
+        namedExportsOrder.length > 0,
+        "No named exports found. Very likely that this is not a ES module."
+      );
+      magicString.append(
+        `;export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
+      );
+    } catch {
+      await init();
+      const namedExportsOrder = (parse$1(source).exports || []).filter(
+        (e) => e !== "default" && e !== "__esModule"
+      );
+      assert(
+        namedExportsOrder.length > 0,
+        "No named exports found. Very likely that this is not a CJS module."
+      );
+      magicString.append(
+        `;module.exports.__namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
+      );
+    }
+    const generatedMap = magicString.generateMap({ hires: true });
+    return callback(null, magicString.toString(), generatedMap, meta);
+  } catch (err) {
+    return callback(null, source, map, meta);
+  }
+}
+
+export { loader as default };

package/dist/presets/custom-rsbuild-preset.d.ts

@@ -0,0 +1,2 @@
+// dev-mode
+export * from '../../src/presets/custom-rsbuild-preset';