@modern-js/storybook-builder 0.0.0-next-20230913035856

package/dist/types/docgen/loader.d.ts

@@ -0,0 +1,2 @@
+declare function docLoader(this: any, source: string, map: string, data: any): Promise<void>;
+export default docLoader;

package/dist/types/docgen/process.d.ts

@@ -0,0 +1,10 @@
+declare const _default: ({
+  source,
+  map,
+  filename
+}: {
+  source: string;
+  map: string;
+  filename: string;
+}) => string[] | null;
+export default _default;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { start, build, bail, getConfig } from './build';
+export * from './types';
+export declare const corePresets: string[];

package/dist/types/plugin-storybook.d.ts

@@ -0,0 +1,6 @@
+import { BuilderPlugin } from '@modern-js/builder-shared';
+import type { Options } from '@storybook/types';
+import type { BuilderPluginAPI as WebpackAPI } from '@modern-js/builder-webpack-provider';
+import type { BuilderPluginAPI as RspackAPI } from '@modern-js/builder-rspack-provider';
+export declare function finalize(): Promise<void>;
+export declare const pluginStorybook: (cwd: string, options: Options) => BuilderPlugin<WebpackAPI | RspackAPI>;

package/dist/types/preset.d.ts

@@ -0,0 +1,6 @@
+import type { Options } from '@storybook/types';
+import { BuilderConfig } from './types';
+export declare const previewMainTemplate: () => string;
+export declare const entries: (_: unknown, options: Options) => Promise<string[]>;
+export declare const modern: (builderConfig: BuilderConfig, options: Options) => BuilderConfig;
+export { decorators } from './addons/preset/preview';

package/dist/types/types.d.ts

@@ -0,0 +1,15 @@
+import type { BuilderConfig as WebpackBuilderConfig } from '@modern-js/builder-webpack-provider';
+import type { BuilderConfig as RspackBuilderConfig } from '@modern-js/builder-rspack-provider';
+import { BuilderPlugin } from '@modern-js/builder-shared';
+export type BundlerType = 'webpack' | 'rspack';
+export type { WebpackBuilderConfig, RspackBuilderConfig };
+export type AllBuilderConfig = WebpackBuilderConfig | RspackBuilderConfig;
+export type FrameworkOptions = {
+  bundler?: BundlerType;
+  builderConfig?: AllBuilderConfig;
+  configPath?: string;
+};
+export type BuilderConfig = AllBuilderConfig & {
+  builderPlugins?: BuilderPlugin[];
+};
+export { defineConfig } from '@modern-js/builder/cli';

package/dist/types/utils.d.ts

@@ -0,0 +1,12 @@
+import { AllBuilderConfig } from './types';
+export declare const VIRTUAL_MODULE_BASE = ".MODERN_STORYBOOK";
+export declare const STORIES_FILENAME = "storybook-stories.js";
+export declare const STORYBOOK_CONFIG_ENTRY = "storybook-config-entry.js";
+export declare const requireResolve: (importer: string, path: string) => void;
+export declare function getProvider(bundler: 'webpack' | 'rspack', builderConfig: AllBuilderConfig): Promise<import("@modern-js/builder-webpack-provider").BuilderWebpackProvider | import("@modern-js/builder-rspack-provider").BuilderRspackProvider | undefined>;
+export declare function virtualModule(tempDir: string, cwd: string, virtualModuleMap: Record<string, string>): Promise<[Record<string, string>, (p: string, content: string) => void]>;
+export declare function toImportFn(cwd: string, stories: string[]): Promise<string>;
+export declare function getAbsolutePath<I extends string>(input: I): I;
+export declare function maybeGetAbsolutePath<I extends string>(input: I): I | false;
+export declare function runWithErrorMsg<T>(op: () => Promise<T>, msg: string): Promise<T | undefined>;
+export declare function isDev(): boolean;

package/index.js

@@ -0,0 +1,24 @@
+/**
+ * storybook uses import() to load this package.
+ * and directly use the result.start, however
+ * our exports are transpiled to something like
+ *
+ * ```
+ * Object.defineProperty(exports, 'start', {
+ *   get() { return ... }
+ * })
+ * ```
+ *
+ * we need to annotate the export, so it can be linked during compile time
+ */
+module.exports = require('./dist/cjs');
+
+// eslint-disable-next-line no-constant-condition
+if (false) {
+  exports.start = null;
+  exports.build = null;
+  exports.bail = null;
+  exports.getConfig = null;
+  exports.corePresets = null;
+  exports.defineConfig = null;
+}

package/modern.config.js

@@ -0,0 +1,5 @@
+const { nodeBuildConfig } = require('@scripts/build');
+
+module.exports = {
+  buildConfig: nodeBuildConfig,
+};

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@modern-js/storybook-builder",
+  "version": "0.0.0-next-20230913035856",
+  "description": "modern.js support for storybook",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/modern.js",
+    "directory": "packages/storybook/builder"
+  },
+  "jsnext:source": "./src/index.ts",
+  "main": "./index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "jsnext:source": "./src/index.ts",
+      "types": "./dist/types/index.d.ts",
+      "default": "./index.js"
+    },
+    "./preset": "./dist/esm/preset.js",
+    "./types": {
+      "jsnext:source": "./src/types.ts",
+      "types": "./dist/types/types.d.ts",
+      "default": "./dist/cjs/types.js"
+    },
+    "./templates/preview.ejs": "./templates/preview.ejs",
+    "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@rspack/dev-client": "0.3.2",
+    "@storybook/components": "^7.4.0",
+    "@storybook/core-common": "^7.4.0",
+    "@storybook/csf-plugin": "^7.4.0",
+    "@storybook/global": "^5.0.0",
+    "@storybook/mdx1-csf": "^1.0.0",
+    "@storybook/mdx2-csf": "^1.1.0",
+    "@storybook/preview": "^7.4.0",
+    "@storybook/preview-api": "^7.4.0",
+    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
+    "@storybook/router": "^7.4.0",
+    "@storybook/theming": "^7.4.0",
+    "@swc/helpers": "0.5.1",
+    "ast-types": "^0.14.2",
+    "minimatch": "^9.0.3",
+    "react-docgen": "6.0.0-alpha.3",
+    "remark-external-links": "^9.0.1",
+    "remark-slug": "^7.0.1",
+    "serve-static": "^1.14.1",
+    "tinypool": "^0.8.0",
+    "webpack-hot-middleware": "^2.25.4",
+    "@modern-js/builder": "0.0.0-next-20230913035856",
+    "@modern-js/utils": "0.0.0-next-20230913035856",
+    "@modern-js/builder-shared": "0.0.0-next-20230913035856",
+    "@modern-js/core": "0.0.0-next-20230913035856",
+    "@modern-js/runtime": "0.0.0-next-20230913035856"
+  },
+  "devDependencies": {
+    "@storybook/types": "^7.4.0",
+    "@types/babel__core": "^7.20.1",
+    "@types/serve-static": "^1.13.10",
+    "@types/webpack-hot-middleware": "^2.25.6",
+    "typescript": "^5.2.2",
+    "@modern-js/builder-rspack-provider": "0.0.0-next-20230913035856",
+    "@modern-js/builder-webpack-provider": "0.0.0-next-20230913035856",
+    "@modern-js/core": "0.0.0-next-20230913035856",
+    "@scripts/build": "0.0.0-next-20230913035856"
+  },
+  "peerDependencies": {
+    "@modern-js/builder-rspack-provider": "0.0.0-next-20230913035856",
+    "@modern-js/builder-webpack-provider": "0.0.0-next-20230913035856"
+  },
+  "peerDependenciesMeta": {
+    "@modern-js/builder-rspack-provider": {
+      "optional": true
+    },
+    "@modern-js/builder-webpack-provider": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "modern-lib build",
+    "dev": "modern-lib build --watch",
+    "test": "vitest run"
+  }
+}

package/src/addons/components/modern.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { createApp } from '@modern-js/runtime';
+import type { Plugin, RouterConfig } from '@modern-js/runtime';
+import router from '@modern-js/runtime/router';
+import state from '@modern-js/runtime/model';
+import type { IConfig } from '../type';
+
+export const WrapProviders = (storyFn: any, config: IConfig) => {
+  const App = createApp({
+    plugins: resolvePlugins(config.modernConfigRuntime),
+  })(storyFn);
+
+  return <App />;
+};
+
+const allowedRuntimeAPI = {
+  router: 'router',
+  state: 'state',
+};
+const allowedRuntimeAPIValues = Object.values(allowedRuntimeAPI);
+
+export const resolvePlugins = (runtime: IConfig['modernConfigRuntime']) => {
+  const plugins: Plugin[] = [];
+
+  if (!runtime) {
+    return plugins;
+  }
+
+  Object.keys(runtime).forEach(api => {
+    if (allowedRuntimeAPIValues.includes(api)) {
+      if (api === allowedRuntimeAPI.state) {
+        if (typeof runtime.state === 'boolean') {
+          if (runtime.state) {
+            plugins.push(state({}));
+          }
+        } else if (typeof runtime.state === 'object') {
+          plugins.push(state(runtime.state));
+        }
+      } else if (api === allowedRuntimeAPI.router) {
+        // TODO: React Router v6 is not supported yet
+        plugins.push(
+          router({
+            ...{ serverBase: ['/'] },
+            ...(runtime.router as RouterConfig),
+          }),
+        );
+      }
+    }
+  });
+
+  return plugins;
+};

package/src/addons/constants.ts

@@ -0,0 +1 @@
+export const ADDON_ID = 'storybook/modern-runtime';

package/src/addons/index.ts

@@ -0,0 +1,8 @@
+declare const module: any;
+
+if (module?.hot?.decline) {
+  module.hot.decline();
+}
+
+// make it work with --isolatedModules
+export default {};

package/src/addons/preset/preview.ts

@@ -0,0 +1,3 @@
+import { withPluginRuntime } from '../withPluginRuntime';
+
+export const decorators = [withPluginRuntime];

package/src/addons/type.ts

@@ -0,0 +1,4 @@
+export interface IConfig {
+  modernConfigRuntime: any;
+  modernConfigDesignToken: any;
+}

package/src/addons/withPluginRuntime.ts

@@ -0,0 +1,18 @@
+import { useParameter } from '@storybook/preview-api';
+import { DecoratorFunction } from '@storybook/types';
+import { WrapProviders } from './components/modern';
+import type { IConfig } from './type';
+
+export const withPluginRuntime: DecoratorFunction = storyFn => {
+  const modernConfigRuntime = useParameter<IConfig['modernConfigRuntime']>(
+    'modernConfigRuntime',
+  );
+  const modernConfigDesignToken = useParameter<
+    IConfig['modernConfigDesignToken']
+  >('modernConfigDesignToken');
+
+  return WrapProviders(storyFn, {
+    modernConfigRuntime: modernConfigRuntime || {},
+    modernConfigDesignToken,
+  });
+};

package/src/build.ts

@@ -0,0 +1,119 @@
+import { dirname, join, parse } from 'path';
+import webpackDevMiddleware from '@modern-js/utils/webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import serveStatic from 'serve-static';
+import type { Builder as RawStorybookBuilder, Stats } from '@storybook/types';
+import { fs } from '@modern-js/utils';
+import type { FrameworkOptions } from './types';
+import { getCompiler } from './core';
+import { finalize } from './plugin-storybook';
+
+export type StorybookBuilder = RawStorybookBuilder<FrameworkOptions, Stats>;
+
+export const getConfig: StorybookBuilder['getConfig'] = async options => {
+  const { presets } = options;
+
+  const frameworkOptions: {
+    name: string;
+    options: FrameworkOptions;
+  } = await presets.apply('frameworkOptions');
+
+  return frameworkOptions?.options || {};
+};
+
+// export `build` is used by storybook core
+export const build: StorybookBuilder['build'] = async ({ options }) => {
+  const config = await getConfig(options);
+
+  const compiler = await getCompiler(process.cwd(), config, options);
+
+  const previewResolvedDir = dirname(
+    require.resolve('@storybook/preview/package.json'),
+  );
+  const previewDirOrigin = join(previewResolvedDir, 'dist');
+  const previewDirTarget = join(options.outputDir || '', `sb-preview`);
+
+  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+    filter: src => {
+      const { ext } = parse(src);
+      if (ext) {
+        return ext === '.js';
+      }
+      return true;
+    },
+  });
+
+  const compilation: Promise<Stats> = new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(stats as Stats);
+      }
+    });
+  });
+
+  const [stats] = await Promise.all([compilation, previewFiles]);
+
+  return stats;
+};
+
+// export `start` is used by storybook core
+export const start: StorybookBuilder['start'] = async ({
+  options,
+  router,
+  startTime,
+}) => {
+  const previewResolvedDir = dirname(
+    require.resolve('@storybook/preview/package.json'),
+  );
+  const previewDirOrigin = join(previewResolvedDir, 'dist');
+
+  router.use(
+    `/sb-preview`,
+    serveStatic(previewDirOrigin, { immutable: true, maxAge: '5m' }),
+  );
+
+  const config = await getConfig(options);
+
+  const compiler = await getCompiler(process.cwd(), config, options);
+
+  const middleware = webpackDevMiddleware(compiler, {
+    writeToDisk:
+      // @ts-expect-error
+      config.builderConfig?.tools?.devServer?.devMiddleware?.writeToDisk ||
+      true,
+
+    // builder can log errors, so not using dev-middleware logs
+    stats: false,
+  });
+
+  router.use(middleware);
+  router.use(webpackHotMiddleware(compiler, { log: false }));
+
+  const stats: Stats = await new Promise(resolve => {
+    middleware.waitUntilValid(stats => {
+      resolve(stats as Stats);
+    });
+  });
+
+  if (!stats) {
+    throw new Error('build failed');
+  }
+
+  const statsJson = stats.toJson();
+
+  if (statsJson.errors.length > 1) {
+    throw stats;
+  }
+
+  return {
+    bail,
+    stats,
+    totalTime: process.hrtime(startTime),
+  };
+};
+
+export const bail = async () => {
+  await finalize();
+};

package/src/core.ts

@@ -0,0 +1,51 @@
+import { createBuilder, mergeBuilderConfig } from '@modern-js/builder';
+import { loadConfig } from '@modern-js/core';
+import type { Options } from '@storybook/types';
+import type { Compiler } from '@modern-js/utils/webpack-dev-middleware';
+import type { BuilderConfig, FrameworkOptions } from './types';
+import { getProvider, runWithErrorMsg } from './utils';
+import { pluginStorybook } from './plugin-storybook';
+
+export async function getCompiler(
+  cwd: string,
+  frameworkConfig: FrameworkOptions,
+  options: Options,
+): Promise<Compiler> {
+  const bundler = frameworkConfig.bundler || 'webpack';
+
+  const { presets } = options;
+  const entries = await presets.apply<string[]>('entries', []);
+
+  const res = await runWithErrorMsg(
+    () => loadConfig(cwd, frameworkConfig.configPath || 'modern.config.ts'),
+    'Failed to load config',
+  );
+  const loadedConfig = (res ? res.config : {}) as BuilderConfig;
+
+  const otherBuilderConfig =
+    (await presets.apply<BuilderConfig | void>('modern', loadedConfig)) || {};
+
+  const builderConfig = mergeBuilderConfig(otherBuilderConfig, loadedConfig);
+
+  const provider = await getProvider(bundler, builderConfig);
+
+  if (!provider) {
+    throw new Error(`@modern-js/builder-${bundler}-provider not found `);
+  }
+
+  const builder = await createBuilder(provider, {
+    cwd,
+    target: 'web',
+    framework: 'modern.js storybook',
+    entry: {
+      main: entries,
+    },
+  });
+
+  builder.addPlugins([
+    pluginStorybook(cwd, options),
+    ...(loadedConfig.builderPlugins || []),
+  ]);
+
+  return builder.createCompiler() as Promise<Compiler>;
+}

package/src/docgen/actualNameHandler.ts

@@ -0,0 +1,57 @@
+/**
+ * This is heavily based on the react-docgen `displayNameHandler`
+ * (https://github.com/reactjs/react-docgen/blob/26c90c0dd105bf83499a83826f2a6ff7a724620d/src/handlers/displayNameHandler.ts)
+ * but instead defines an `actualName` property on the generated docs that is taken first from the component's actual name.
+ * This addresses an issue where the name that the generated docs are stored under is incorrectly named with the `displayName`
+ * and not the component's actual name.
+ *
+ * This is inspired by `actualNameHandler` from https://github.com/storybookjs/babel-plugin-react-docgen, but is modified
+ * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.
+ */
+
+import { namedTypes as t } from 'ast-types';
+import type { NodePath } from 'ast-types/lib/node-path';
+import { getNameOrValue, isReactForwardRefCall } from 'react-docgen/dist/utils';
+import type { Importer } from 'react-docgen/dist/parse';
+import type Documentation from 'react-docgen/dist/Documentation';
+
+export default function actualNameHandler(
+  documentation: Documentation,
+  path: NodePath,
+  importer: Importer,
+): void {
+  if (
+    t.ClassDeclaration.check(path.node) ||
+    t.FunctionDeclaration.check(path.node)
+  ) {
+    documentation.set('actualName', getNameOrValue(path.get('id')));
+  } else if (
+    t.ArrowFunctionExpression.check(path.node) ||
+    t.FunctionExpression.check(path.node) ||
+    isReactForwardRefCall(path, importer)
+  ) {
+    let currentPath = path;
+    while (currentPath.parent) {
+      if (t.VariableDeclarator.check(currentPath.parent.node)) {
+        documentation.set(
+          'actualName',
+          getNameOrValue(currentPath.parent.get('id')),
+        );
+        return;
+      }
+      if (t.AssignmentExpression.check(currentPath.parent.node)) {
+        const leftPath = currentPath.parent.get('left');
+        if (
+          t.Identifier.check(leftPath.node) ||
+          t.Literal.check(leftPath.node)
+        ) {
+          documentation.set('actualName', getNameOrValue(leftPath));
+          return;
+        }
+      }
+      currentPath = currentPath.parent;
+    }
+    // Could not find an actual name
+    documentation.set('actualName', '');
+  }
+}

package/src/docgen/index.ts

@@ -0,0 +1,100 @@
+import type { Options } from '@storybook/types';
+import { CHAIN_ID, logger } from '@modern-js/utils';
+import { RspackConfig } from '@modern-js/builder-rspack-provider';
+import { WebpackChain } from '@modern-js/builder-webpack-provider';
+
+export type DocgenOptions = {
+  reactDocgen?: 'react-docgen' | 'react-docgen-typescript' | false;
+  reactDocgenTypescriptOptions?: any;
+};
+
+export async function applyDocgenWebpack(
+  chain: WebpackChain,
+  options: Options,
+) {
+  const typescriptOptions: DocgenOptions = await options.presets.apply(
+    'typescript',
+    {},
+  );
+
+  const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions || {};
+
+  if (typeof reactDocgen !== 'string') {
+    return;
+  }
+
+  if (reactDocgen === 'react-docgen-typescript') {
+    const { ReactDocgenTypeScriptPlugin } = await import(
+      '@storybook/react-docgen-typescript-plugin'
+    );
+    chain.plugin('Storybook-docgen').use(ReactDocgenTypeScriptPlugin, [
+      {
+        ...reactDocgenTypescriptOptions,
+        savePropValueAsString: true,
+      },
+    ]);
+  } else if (reactDocgen === 'react-docgen') {
+    // use babel react-docgen, its faster
+    const loader = require.resolve('./loader');
+    const resolveOptions = chain.toConfig().resolve;
+
+    chain.module
+      .rule(CHAIN_ID.RULE.JS)
+      .use(CHAIN_ID.USE.REACT_DOCGEN)
+      .loader(loader)
+      .options({
+        resolveOptions,
+      })
+      .after(CHAIN_ID.USE.BABEL)
+      .after(CHAIN_ID.USE.ESBUILD)
+      .after(CHAIN_ID.USE.SWC)
+      .end();
+
+    const tsRuls = chain.module.rule(CHAIN_ID.RULE.TS);
+    if (tsRuls.uses.values().length !== 0) {
+      tsRuls
+        .use(CHAIN_ID.USE.REACT_DOCGEN)
+        .loader(loader)
+        .options({
+          resolveOptions,
+        })
+        .after(CHAIN_ID.USE.TS)
+        .after(CHAIN_ID.USE.ESBUILD)
+        .after(CHAIN_ID.USE.SWC)
+        .end();
+    }
+  }
+}
+
+export async function applyDocgenRspack(
+  config: RspackConfig,
+  options: Options,
+) {
+  const typescriptOptions: { reactDocgen?: 'react-docgen' } =
+    await options.presets.apply('typescript', {});
+
+  const { reactDocgen } = typescriptOptions || {};
+
+  if (reactDocgen !== 'react-docgen') {
+    if (reactDocgen !== false && reactDocgen !== undefined) {
+      logger.warn(
+        `Rspack currently only support 'typescript.reactDocgen: react-docgen' for auto docs generation, but you specified ${reactDocgen}`,
+      );
+    }
+    return;
+  }
+
+  // For rspack, just add a new rule
+  config.module ??= {};
+  config.module.rules ??= [];
+  config.module.rules.push({
+    test: /\.(tsx?|jsx?)$/,
+    exclude: /node_modules/,
+    use: {
+      loader: require.resolve('./loader'),
+      options: {
+        resolveOptions: config.resolve,
+      },
+    },
+  });
+}

package/src/docgen/loader.ts

@@ -0,0 +1,34 @@
+// @ts-expect-error
+import type { Tinypool } from 'tinypool';
+
+let tinyPoolPromise: Promise<Tinypool> | null = null;
+
+async function docLoader(this: any, source: string, map: string, data: any) {
+  const callback = this.async();
+
+  if (!tinyPoolPromise) {
+    tinyPoolPromise = import('tinypool').then(({ Tinypool }) => {
+      return new Tinypool({
+        filename: require.resolve('./process'),
+      });
+    });
+  }
+
+  const tinyPool = await tinyPoolPromise;
+
+  const result: [string, string] | null = await tinyPool.run({
+    source,
+    map,
+    filename: this.resourcePath,
+    data,
+  });
+
+  if (result) {
+    const [docgen, outputMap] = result;
+    callback(null, `${source}\n${docgen}`, outputMap, data);
+  } else {
+    callback(null, source, map, data);
+  }
+}
+
+export default docLoader;