storybook-react-rsbuild 0.0.1-beta.0 → 0.0.1

package/dist/index.d.ts

@@ -1,2 +1,5 @@
-// dev-mode
-export * from '../src/index';
+export { F as FrameworkOptions, S as StorybookConfig } from './index-8cba017d.js';
+import 'storybook-builder-rsbuild';
+import 'file-system-cache';
+import 'http';
+import '@storybook/react-docgen-typescript-plugin';

package/dist/loaders/react-docgen-loader.d.ts

@@ -0,0 +1,10 @@
+import * as react_docgen from 'react-docgen';
+import * as TsconfigPaths from 'tsconfig-paths';
+import { LoaderContext } from 'webpack';
+
+declare function reactDocgenLoader(this: LoaderContext<{
+    debug: boolean;
+}>, source: string): Promise<void>;
+declare function getReactDocgenImporter(matchingPath: TsconfigPaths.MatchPath | undefined): react_docgen.Importer;
+
+export { reactDocgenLoader as default, getReactDocgenImporter };

package/dist/loaders/react-docgen-loader.js

@@ -0,0 +1,217 @@
+"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/react-docgen-loader.ts
+var react_docgen_loader_exports = {};
+__export(react_docgen_loader_exports, {
+  default: () => reactDocgenLoader,
+  getReactDocgenImporter: () => getReactDocgenImporter
+});
+module.exports = __toCommonJS(react_docgen_loader_exports);
+var import_react_docgen = require("react-docgen");
+var TsconfigPaths = __toESM(require("tsconfig-paths"));
+var import_find_up = __toESM(require("find-up"));
+var import_magic_string = __toESM(require("magic-string"));
+var import_node_logger = require("@storybook/node-logger");
+
+// src/loaders/docgen-resolver.ts
+var import_path = require("path");
+var import_resolve = __toESM(require("resolve"));
+var ReactDocgenResolveError = class extends Error {
+  constructor(filename) {
+    super(`'${filename}' was ignored by react-docgen.`);
+    // the magic string that react-docgen uses to check if a module is ignored
+    this.code = "MODULE_NOT_FOUND";
+  }
+};
+var RESOLVE_EXTENSIONS = [
+  ".js",
+  ".cts",
+  // These were originally not in the code, I added them
+  ".mts",
+  // These were originally not in the code, I added them
+  ".ctsx",
+  // These were originally not in the code, I added them
+  ".mtsx",
+  // These were originally not in the code, I added them
+  ".ts",
+  ".tsx",
+  ".mjs",
+  ".cjs",
+  ".mts",
+  ".cts",
+  ".jsx"
+];
+function defaultLookupModule(filename, basedir) {
+  const resolveOptions = {
+    basedir,
+    extensions: RESOLVE_EXTENSIONS,
+    // we do not need to check core modules as we cannot import them anyway
+    includeCoreModules: false
+  };
+  try {
+    return import_resolve.default.sync(filename, resolveOptions);
+  } catch (error) {
+    const ext = (0, import_path.extname)(filename);
+    let newFilename;
+    switch (ext) {
+      case ".js":
+      case ".mjs":
+      case ".cjs":
+        newFilename = `${filename.slice(0, -2)}ts`;
+        break;
+      case ".jsx":
+        newFilename = `${filename.slice(0, -3)}tsx`;
+        break;
+      default:
+        throw error;
+    }
+    return import_resolve.default.sync(newFilename, {
+      ...resolveOptions,
+      // we already know that there is an extension at this point, so no need to check other extensions
+      extensions: []
+    });
+  }
+}
+
+// src/loaders/react-docgen-loader.ts
+var { getNameOrValue, isReactForwardRefCall } = import_react_docgen.utils;
+var actualNameHandler = function actualNameHandler2(documentation, componentDefinition) {
+  if ((componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) && componentDefinition.has("id")) {
+    documentation.set(
+      "actualName",
+      getNameOrValue(componentDefinition.get("id"))
+    );
+  } else if (componentDefinition.isArrowFunctionExpression() || componentDefinition.isFunctionExpression() || isReactForwardRefCall(componentDefinition)) {
+    let currentPath = componentDefinition;
+    while (currentPath.parentPath) {
+      if (currentPath.parentPath.isVariableDeclarator()) {
+        documentation.set(
+          "actualName",
+          getNameOrValue(currentPath.parentPath.get("id"))
+        );
+        return;
+      }
+      if (currentPath.parentPath.isAssignmentExpression()) {
+        const leftPath = currentPath.parentPath.get("left");
+        if (leftPath.isIdentifier() || leftPath.isLiteral()) {
+          documentation.set("actualName", getNameOrValue(leftPath));
+          return;
+        }
+      }
+      currentPath = currentPath.parentPath;
+    }
+    documentation.set("actualName", "");
+  }
+};
+var defaultHandlers = Object.values(import_react_docgen.builtinHandlers).map((handler) => handler);
+var defaultResolver = new import_react_docgen.builtinResolvers.FindExportedDefinitionsResolver();
+var handlers = [...defaultHandlers, actualNameHandler];
+var tsconfigPathsInitialized = false;
+var matchPath;
+async function reactDocgenLoader(source) {
+  const callback = this.async();
+  const options = this.getOptions() || {};
+  const { debug = false } = options;
+  if (!tsconfigPathsInitialized) {
+    const tsconfigPath = await (0, import_find_up.default)("tsconfig.json", { cwd: process.cwd() });
+    const tsconfig = TsconfigPaths.loadConfig(tsconfigPath);
+    if (tsconfig.resultType === "success") {
+      import_node_logger.logger.info("Using tsconfig paths for react-docgen");
+      matchPath = TsconfigPaths.createMatchPath(
+        tsconfig.absoluteBaseUrl,
+        tsconfig.paths,
+        ["browser", "module", "main"]
+      );
+    }
+    tsconfigPathsInitialized = true;
+  }
+  try {
+    const docgenResults = (0, import_react_docgen.parse)(source, {
+      filename: this.resourcePath,
+      resolver: defaultResolver,
+      handlers,
+      importer: getReactDocgenImporter(matchPath),
+      babelOptions: {
+        babelrc: false,
+        configFile: false
+      }
+    });
+    const magicString = new import_magic_string.default(source);
+    docgenResults.forEach((info) => {
+      const { actualName, ...docgenInfo } = info;
+      if (actualName) {
+        const docNode = JSON.stringify(docgenInfo);
+        magicString.append(`;${actualName}.__docgenInfo=${docNode}`);
+      }
+    });
+    const map = magicString.generateMap({
+      includeContent: true,
+      source: this.resourcePath
+    });
+    callback(null, magicString.toString(), map);
+  } catch (error) {
+    if (error.code === import_react_docgen.ERROR_CODES.MISSING_DEFINITION) {
+      callback(null, source);
+    } else {
+      if (!debug) {
+        import_node_logger.logger.warn(
+          `Failed to parse ${this.resourcePath} with react-docgen. Rerun Storybook with --loglevel=debug to get more info.`
+        );
+      } else {
+        import_node_logger.logger.warn(
+          `Failed to parse ${this.resourcePath} with react-docgen. Please use the below error message and the content of the file which causes the error to report the issue to the maintainers of react-docgen. https://github.com/reactjs/react-docgen`
+        );
+        import_node_logger.logger.error(error);
+      }
+      callback(null, source);
+    }
+  }
+}
+function getReactDocgenImporter(matchingPath) {
+  return (0, import_react_docgen.makeFsImporter)((filename, basedir) => {
+    const mappedFilenameByPaths = (() => {
+      if (matchingPath) {
+        const match = matchingPath(filename);
+        return match || filename;
+      } else {
+        return filename;
+      }
+    })();
+    const result = defaultLookupModule(mappedFilenameByPaths, basedir);
+    if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
+      return result;
+    }
+    throw new ReactDocgenResolveError(filename);
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getReactDocgenImporter
+});

package/dist/loaders/react-docgen-loader.mjs

@@ -0,0 +1,179 @@
+import { builtinHandlers, builtinResolvers, parse, ERROR_CODES, makeFsImporter, utils } from 'react-docgen';
+import * as TsconfigPaths from 'tsconfig-paths';
+import findUp from 'find-up';
+import MagicString from 'magic-string';
+import { logger } from '@storybook/node-logger';
+import { extname } from 'path';
+import resolve from 'resolve';
+
+// src/loaders/react-docgen-loader.ts
+var ReactDocgenResolveError = class extends Error {
+  constructor(filename) {
+    super(`'${filename}' was ignored by react-docgen.`);
+    // the magic string that react-docgen uses to check if a module is ignored
+    this.code = "MODULE_NOT_FOUND";
+  }
+};
+var RESOLVE_EXTENSIONS = [
+  ".js",
+  ".cts",
+  // These were originally not in the code, I added them
+  ".mts",
+  // These were originally not in the code, I added them
+  ".ctsx",
+  // These were originally not in the code, I added them
+  ".mtsx",
+  // These were originally not in the code, I added them
+  ".ts",
+  ".tsx",
+  ".mjs",
+  ".cjs",
+  ".mts",
+  ".cts",
+  ".jsx"
+];
+function defaultLookupModule(filename, basedir) {
+  const resolveOptions = {
+    basedir,
+    extensions: RESOLVE_EXTENSIONS,
+    // we do not need to check core modules as we cannot import them anyway
+    includeCoreModules: false
+  };
+  try {
+    return resolve.sync(filename, resolveOptions);
+  } catch (error) {
+    const ext = extname(filename);
+    let newFilename;
+    switch (ext) {
+      case ".js":
+      case ".mjs":
+      case ".cjs":
+        newFilename = `${filename.slice(0, -2)}ts`;
+        break;
+      case ".jsx":
+        newFilename = `${filename.slice(0, -3)}tsx`;
+        break;
+      default:
+        throw error;
+    }
+    return resolve.sync(newFilename, {
+      ...resolveOptions,
+      // we already know that there is an extension at this point, so no need to check other extensions
+      extensions: []
+    });
+  }
+}
+
+// src/loaders/react-docgen-loader.ts
+var { getNameOrValue, isReactForwardRefCall } = utils;
+var actualNameHandler = function actualNameHandler2(documentation, componentDefinition) {
+  if ((componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) && componentDefinition.has("id")) {
+    documentation.set(
+      "actualName",
+      getNameOrValue(componentDefinition.get("id"))
+    );
+  } else if (componentDefinition.isArrowFunctionExpression() || componentDefinition.isFunctionExpression() || isReactForwardRefCall(componentDefinition)) {
+    let currentPath = componentDefinition;
+    while (currentPath.parentPath) {
+      if (currentPath.parentPath.isVariableDeclarator()) {
+        documentation.set(
+          "actualName",
+          getNameOrValue(currentPath.parentPath.get("id"))
+        );
+        return;
+      }
+      if (currentPath.parentPath.isAssignmentExpression()) {
+        const leftPath = currentPath.parentPath.get("left");
+        if (leftPath.isIdentifier() || leftPath.isLiteral()) {
+          documentation.set("actualName", getNameOrValue(leftPath));
+          return;
+        }
+      }
+      currentPath = currentPath.parentPath;
+    }
+    documentation.set("actualName", "");
+  }
+};
+var defaultHandlers = Object.values(builtinHandlers).map((handler) => handler);
+var defaultResolver = new builtinResolvers.FindExportedDefinitionsResolver();
+var handlers = [...defaultHandlers, actualNameHandler];
+var tsconfigPathsInitialized = false;
+var matchPath;
+async function reactDocgenLoader(source) {
+  const callback = this.async();
+  const options = this.getOptions() || {};
+  const { debug = false } = options;
+  if (!tsconfigPathsInitialized) {
+    const tsconfigPath = await findUp("tsconfig.json", { cwd: process.cwd() });
+    const tsconfig = TsconfigPaths.loadConfig(tsconfigPath);
+    if (tsconfig.resultType === "success") {
+      logger.info("Using tsconfig paths for react-docgen");
+      matchPath = TsconfigPaths.createMatchPath(
+        tsconfig.absoluteBaseUrl,
+        tsconfig.paths,
+        ["browser", "module", "main"]
+      );
+    }
+    tsconfigPathsInitialized = true;
+  }
+  try {
+    const docgenResults = parse(source, {
+      filename: this.resourcePath,
+      resolver: defaultResolver,
+      handlers,
+      importer: getReactDocgenImporter(matchPath),
+      babelOptions: {
+        babelrc: false,
+        configFile: false
+      }
+    });
+    const magicString = new MagicString(source);
+    docgenResults.forEach((info) => {
+      const { actualName, ...docgenInfo } = info;
+      if (actualName) {
+        const docNode = JSON.stringify(docgenInfo);
+        magicString.append(`;${actualName}.__docgenInfo=${docNode}`);
+      }
+    });
+    const map = magicString.generateMap({
+      includeContent: true,
+      source: this.resourcePath
+    });
+    callback(null, magicString.toString(), map);
+  } catch (error) {
+    if (error.code === ERROR_CODES.MISSING_DEFINITION) {
+      callback(null, source);
+    } else {
+      if (!debug) {
+        logger.warn(
+          `Failed to parse ${this.resourcePath} with react-docgen. Rerun Storybook with --loglevel=debug to get more info.`
+        );
+      } else {
+        logger.warn(
+          `Failed to parse ${this.resourcePath} with react-docgen. Please use the below error message and the content of the file which causes the error to report the issue to the maintainers of react-docgen. https://github.com/reactjs/react-docgen`
+        );
+        logger.error(error);
+      }
+      callback(null, source);
+    }
+  }
+}
+function getReactDocgenImporter(matchingPath) {
+  return makeFsImporter((filename, basedir) => {
+    const mappedFilenameByPaths = (() => {
+      if (matchingPath) {
+        const match = matchingPath(filename);
+        return match || filename;
+      } else {
+        return filename;
+      }
+    })();
+    const result = defaultLookupModule(mappedFilenameByPaths, basedir);
+    if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
+      return result;
+    }
+    throw new ReactDocgenResolveError(filename);
+  });
+}
+
+export { reactDocgenLoader as default, getReactDocgenImporter };

package/dist/preset.d.ts

@@ -1,2 +1,10 @@
-// dev-mode
-export * from '../src/preset';
+import { S as StorybookConfig, P as PresetProperty } from './index-8cba017d.js';
+import 'storybook-builder-rsbuild';
+import 'file-system-cache';
+import 'http';
+import '@storybook/react-docgen-typescript-plugin';
+
+declare const rsbuildFinal: StorybookConfig['rsbuildFinal'];
+declare const core: PresetProperty<'core'>;
+
+export { core, rsbuildFinal };

package/dist/preset.js

@@ -56,7 +56,7 @@ var rsbuildFinalDocs = async (config, options) => {
                 enforce: "pre",
                 loader: requirer(
                   require.resolve,
-                  "@storybook/preset-react-webpack/dist/loaders/react-docgen-loader"
+                  "storybook-react-rsbuild/loaders/react-docgen-loader"
                 ),
                 options: {
                   debug

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-react-rsbuild",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.1",
   "description": "Storybook for React and Rsbuild: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -21,6 +21,10 @@
       "types": "./dist/react-docs.d.ts",
       "require": "./dist/react-docs.js"
     },
+    "./loaders/react-docgen-loader": {
+      "types": "./dist/loaders/react-docgen-loader.d.ts",
+      "require": "./dist/loaders/react-docgen-loader.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -34,16 +38,22 @@
     "!src/**/*"
   ],
   "dependencies": {
+    "@rsbuild/core": "0.6.15",
     "@storybook/docs-tools": "8.0.10",
-    "@storybook/react-docgen-typescript-plugin": "1.0.1",
+    "@storybook/node-logger": "8.0.10",
     "@storybook/react": "8.0.10",
-    "@rsbuild/core": "0.6.15",
+    "@storybook/react-docgen-typescript-plugin": "1.0.1",
     "@types/node": "^18.0.0",
-    "storybook-builder-rsbuild": "0.0.1-beta.0"
+    "find-up": "^5.0.0",
+    "magic-string": "^0.30.10",
+    "react-docgen": "^7.0.3",
+    "resolve": "^1.22.8",
+    "tsconfig-paths": "^4.2.0",
+    "storybook-builder-rsbuild": "0.0.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "typescript": ">= 4.2.x"
   },
   "peerDependenciesMeta": {
@@ -60,13 +70,15 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/loaders/react-docgen-loader.ts"
     ],
     "platform": "node"
   },
   "devDependencies": {
     "@storybook/types": "8.0.10",
-    "add": "^2.0.6"
+    "add": "^2.0.6",
+    "typescript": "^5.3.2"
   },
   "scripts": {
     "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts",

package/dist/chunk-77YOQVQO.mjs

@@ -1,17 +0,0 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// src/requirer.ts
-function requirer(resolver, path) {
-  return resolver(path);
-}
-
-export {
-  __require,
-  requirer
-};

package/dist/chunk-TNRF4JXJ.mjs

@@ -1,80 +0,0 @@
-import {
-  __require,
-  requirer
-} from "./chunk-77YOQVQO.mjs";
-
-// src/react-docs.ts
-import { hasDocsOrControls } from "@storybook/docs-tools";
-import { mergeRsbuildConfig } from "@rsbuild/core";
-var rsbuildFinal = async (config, options) => {
-  if (!hasDocsOrControls(options))
-    return config;
-  const typescriptOptions = await options.presets.apply("typescript", {});
-  const debug = options.loglevel === "debug";
-  const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions || {};
-  if (typeof reactDocgen !== "string") {
-    return config;
-  }
-  if (reactDocgen !== "react-docgen-typescript") {
-    return mergeRsbuildConfig(config, {
-      tools: {
-        rspack: {
-          module: {
-            rules: [
-              {
-                test: /\.(cjs|mjs|tsx?|jsx?)$/,
-                enforce: "pre",
-                loader: requirer(
-                  __require.resolve,
-                  "@storybook/preset-react-webpack/dist/loaders/react-docgen-loader"
-                ),
-                options: {
-                  debug
-                },
-                exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/
-              }
-            ]
-          }
-        }
-      }
-    });
-  }
-  const { ReactDocgenTypeScriptPlugin } = await import("@storybook/react-docgen-typescript-plugin");
-  throw new Error(
-    "Rspack didn't support the hooks `react-docgen-typescript`' required"
-  );
-  return mergeRsbuildConfig(config, {
-    tools: {
-      rspack: {
-        module: {
-          rules: [
-            {
-              test: /\.(cjs|mjs|jsx?)$/,
-              enforce: "pre",
-              loader: requirer(
-                __require.resolve,
-                "@storybook/preset-react-webpack/dist/loaders/react-docgen-loader"
-              ),
-              options: {
-                debug
-              },
-              exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/
-            }
-          ]
-        },
-        plugins: [
-          ...config.plugins || [],
-          new ReactDocgenTypeScriptPlugin({
-            ...reactDocgenTypescriptOptions,
-            // We *need* this set so that RDT returns default values in the same format as react-docgen
-            savePropValueAsString: true
-          })
-        ]
-      }
-    }
-  });
-};
-
-export {
-  rsbuildFinal
-};

package/dist/preset.mjs

@@ -1,25 +0,0 @@
-import {
-  rsbuildFinal
-} from "./chunk-TNRF4JXJ.mjs";
-import {
-  __require
-} from "./chunk-77YOQVQO.mjs";
-
-// src/preset.ts
-import { dirname, join } from "path";
-var getAbsolutePath = (input) => dirname(__require.resolve(join(input, "package.json")));
-var core = async (config, options) => {
-  const framework = await options.presets.apply("framework");
-  return {
-    ...config,
-    builder: {
-      name: getAbsolutePath("@storybook/builder-rsbuild"),
-      options: typeof framework === "string" ? {} : framework.options.builder || {}
-    },
-    renderer: getAbsolutePath("@storybook/react")
-  };
-};
-export {
-  core,
-  rsbuildFinal
-};