feat: add storybook-framework

packages/builder/builder-rspack-provider/src/index.ts

@@ -15,4 +15,6 @@ export type {
 
   // Rspack
   Rspack,
+  Compiler as RspackCompiler,
+  MultiCompiler as RspackMultiCompiler,
 } from './types';

packages/builder/builder-webpack-provider/src/types/thirdParty/index.ts

@@ -1,6 +1,10 @@
 import type WebpackChain from '@modern-js/utils/webpack-chain';
 import type webpack from 'webpack';
-import type { Configuration as WebpackConfig } from 'webpack';
+import type {
+  Configuration as WebpackConfig,
+  Compiler as WebpackCompiler,
+  Compiler as WebpackMultiCompiler,
+} from 'webpack';
 import type CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import type { Options as RawTSLoaderOptions } from 'ts-loader';
 
@@ -19,7 +23,13 @@ export type { BabelConfigUtils } from '@modern-js/babel-preset-app';
 
 export type TSLoaderOptions = Partial<RawTSLoaderOptions>;
 
-export type { webpack, WebpackChain, WebpackConfig };
+export type {
+  webpack,
+  WebpackChain,
+  WebpackConfig,
+  WebpackCompiler,
+  WebpackMultiCompiler,
+};
 
 export type {
   CSSExtractOptions,

packages/cli/core/src/createCli.ts

@@ -193,5 +193,6 @@ export const createCli = () => {
     test,
     runCommand,
     getPrevInitOptions: () => initOptions,
+    getRunner: () => hooksRunner,
   };
 };

packages/cli/core/src/index.ts

@@ -1,8 +1,11 @@
 import { createCli } from './createCli';
 
 export * from './types';
+export * from './config';
+export * from './loadEnv';
+export * from './loadPlugins';
 export * from '@modern-js/plugin';
-export { mergeConfig, initAppDir } from './utils';
+export { mergeConfig, initAppDir, checkIsDuplicationPlugin } from './utils';
 export { manager, createPlugin, registerHook } from './manager';
 export {
   AppContext,

packages/solutions/app-tools/src/builder/builder-webpack/index.ts

@@ -23,6 +23,5 @@ export async function createWebpackBuilderForModern(
   }
 
   builder.addPlugins([builderPluginAdapterModern(options)]);
-
   return builder;
 }

packages/storybook/builder/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['@modern-js'],
+  ignorePatterns: ['compiled/', 'fixtures/**', 'tests/**', 'vitest.config.ts'],
+  parserOptions: {
+    project: require.resolve('./tsconfig.json'),
+  },
+};

packages/storybook/builder/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@modern-js/storybook-builder",
+  "version": "2.31.2",
+  "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": "./dist/index.js",
+  "types": "./src/index.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run"
+  },
+  "exports": {
+    ".": {
+      "jsnext:source": "./src/index.ts",
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "default": "./dist/preset.js",
+      "jsnext:source": "./src/preset.ts",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@modern-js/builder": "workspace:*",
+    "@modern-js/builder-rspack-provider": "workspace:*",
+    "@modern-js/builder-shared": "workspace:*",
+    "@modern-js/builder-webpack-provider": "workspace:*",
+    "@modern-js/core": "workspace:*",
+    "@modern-js/utils": "workspace:*",
+    "@types/webpack-hot-middleware": "^2.25.6",
+    "glob-promise": "^6.0.3",
+    "@storybook/core-common": "7.3.2",
+    "webpack-dev-middleware": "6.0.1",
+    "webpack-hot-middleware": "^2.25.4"
+  },
+  "devDependencies": {
+    "@storybook/types": "^7.3.2"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true,
+    "types": "./dist/index.d.ts"
+  }
+}

packages/storybook/builder/src/build.ts

@@ -0,0 +1,110 @@
+import { dirname, join, parse } from 'path';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+
+import type { Builder as RawStorybookBuilder, Stats } from '@storybook/types';
+import { fs } from '@modern-js/utils';
+import { createCompiler } from './provider';
+import type { BuilderOptions } from './types';
+
+export type StorybookBuilder = RawStorybookBuilder<BuilderOptions, Stats>;
+
+export const getConfig: StorybookBuilder['getConfig'] = async options => {
+  const { presets } = options;
+
+  const frameworkOptions = await presets.apply('frameworkOptions');
+
+  return presets.apply(
+    'modern',
+    {},
+    {
+      ...options,
+      frameworkOptions,
+    },
+  ) as any;
+};
+
+// export `build` is used by storybook core
+export const build: StorybookBuilder['build'] = async ({ options }) => {
+  const config = await getConfig(options);
+
+  const compiler = await createCompiler(
+    config.bundler || 'webpack',
+    config.builderConfig,
+  );
+
+  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 { bundler, builderConfig } = await getConfig(options);
+
+  const compiler = await createCompiler(bundler || 'webpack', builderConfig);
+
+  const middleware = webpackDevMiddleware(compiler, {
+    writeToDisk:
+      // @ts-expect-error
+      builderConfig.tools?.devServer?.devMiddleware?.writeToDisk || true,
+  });
+  router.use(middleware);
+  router.use(webpackHotMiddleware(compiler, { log: false }));
+
+  const stats: Stats = await new Promise(resolve => {
+    // @ts-expect-error
+    middleware.waitUntilValid(resolve);
+  });
+
+  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 () => {
+  // TODO
+  console.log('todo');
+};