feat: chore and initialize

.changeset/config.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": false,
+  "commit": false,
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "fixed": [
+    [
+      "storybook-builder-rsbuild",
+      "storybook-react-rsbuild",
+      "storybook-vue3-rsbuild"
+    ]
+  ],
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true,
+    "updateInternalDependents": "always"
+  },
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.gitignore

@@ -128,3 +128,7 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# storybook-rsbuild
+dist/
+storybook-static/

.npmrc

@@ -0,0 +1 @@
+hoist-pattern[]=@mdx-js/loader

.nvmrc

@@ -0,0 +1 @@
+18.19.1

.prettierignore

@@ -0,0 +1,2 @@
+
+*.handlebars

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

CONTRIBUTING

@@ -0,0 +1,14 @@
+# Preparation
+
+```bash
+corepack enable # if it's not enabled
+pnpm i
+```
+
+## Development
+
+```bash
+pnpm dev # will watch and rebuild all packages in ./packages
+```
+
+Then development with the packages in `./sandboxes`.

README.md

@@ -0,0 +1,165 @@
+# Storybook × Rsbuild
+
+The repository contains the Storybook Rsbuild builder and framework integrations for UI frameworks.
+
+| package                                                 | description                                          |
+| ------------------------------------------------------- | ---------------------------------------------------- |
+| [storybook-builder-rsbuild](./packages/builder-rsbuild) | Rsbuild powered builder for Storybook                |
+| [storybook-react-rsbuild](./packages/react-rsbuild)     | React integration for Storybook with Rsbuild builder |
+| [storybook-vue3-rsbuild](./packages/vue3-rsbuild)       | Vue3 integration for Storybook with Rsbuild builder  |
+
+## Usage
+
+> [!NOTE]  
+> Requirements: `@rsbuild/core >= 0.6.15`.
+
+In Storybook v8, you don't need to manually install storybook-builder-rsbuild, it has been depended by the framework, such as `storybook-react-rsbuild` and `storybook-vue3-rsbuild`.
+
+### Use with React
+
+1. Install React framework integration
+   ```bash
+   pnpm i storybook-react-rsbuild -D
+   ```
+2. Change `.storybook/main.js`
+
+   ```js
+   import { StorybookConfig } from 'storybook-react-rsbuild'
+
+   const config: StorybookConfig = {
+     framework: 'storybook-react-rsbuild',
+     rsbuildFinal: (config) => {
+       // Customize the final webpack config here
+       return config;
+     },
+   };
+
+   export default config;
+   ```
+
+You're all set now. You could also checkout the example in [sandboxes/react-rsbuild](./sandboxes/react-rsbuild).
+
+### Use with Vue3
+
+1. Install Vue3 framework integration
+   ```bash
+   pnpm i storybook-vue3-rsbuild -D
+   ```
+2. Change `.storybook/main.js`
+
+   ```js
+   import { StorybookConfig } from 'storybook-vue3-rsbuild'
+
+   const config: StorybookConfig = {
+     framework: 'storybook-vue3-rsbuild',
+     rsbuildFinal: (config) => {
+       // Customize the final webpack config here
+       return config;
+     },
+   };
+
+   export default config;
+   ```
+
+You're all set now. You could also checkout the example in [sandboxes/vue3-rsbuild](./sandboxes/vue3-rsbuild).
+
+### Customize the Rsbuild config
+
+The builder _will_ read your `rsbuild.config.js` file, though it may change some of the options in order to work correctly.
+It looks for the Rsbuild config in the CWD. If your config is located elsewhere, specify the path using the `rsbuildConfigPath` builder option:
+
+```javascript
+// .storybook/main.mjs
+
+const config = {
+  framework: {
+    name: 'storybook-react-rsbuild',
+    options: {
+      builder: {
+        rsbuildConfigPath: '.storybook/customRsbuildConfig.js',
+      },
+    },
+  },
+}
+
+export default config
+```
+
+You can also override the merged Rsbuild config:
+
+```javascript
+// use `mergeRsbuildConfig` to recursively merge Rsbuild options
+import { mergeRsbuildConfig } from '@rsbuild/core'
+
+const config = {
+  async rsbuildFinal(config, { configType }) {
+    // Be sure to return the customized config
+    return mergeRsbuildConfig(config, {
+      // Customize the Rsbuild config for Storybook
+      source: {
+        alias: { foo: 'bar' },
+      },
+    })
+  },
+}
+
+export default config
+```
+
+The `rsbuildFinal` function will give you `config` which is the combination of your project's Rsbuild config and the builder's own Rsbuild config.
+You can tweak this as you want, for example to set up aliases, add new plugins etc.
+
+The `configType` variable will be either `"DEVELOPMENT"` or `"PRODUCTION"`.
+
+The function should return the updated Rsbuild configuration.
+
+## Troubleshooting
+
+### Error caused by bundling unwanted modules
+
+Because Rspack temporarily does not support the `webpackInclude` magic comment, non-story files may be bundled, which could lead to build failures. These files can be ignored using `rspack.IgnorePlugin`.
+
+```js
+import { mergeRsbuildConfig } from '@rsbuild/core'
+
+module.exports = {
+  framework: 'storybook-react-rsbuild',
+  async rsbuildFinal(config) {
+    return mergeRsbuildConfig(config, {
+      tools: {
+        rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
+          appendPlugins([
+            new rspack.IgnorePlugin({
+              checkResource: (resource, context) => {
+                const absPathHasExt = extname(resource)
+                if (absPathHasExt === '.md') {
+                  return true
+                }
+
+                return false
+              },
+            }),
+          ])
+        },
+      },
+    })
+  },
+}
+```
+
+## Rspack support tasks
+
+- [ ] Support persistent cache
+- [ ] Support lazy compilation
+- [ ] Support virtual modules
+- [ ] Support `module.unknownContextCritical`
+- [ ] Support `webpackInclude` magic comment
+- [ ] Support `compilation.dependencyTemplates.set` for react-docgen-typescript
+
+## Credits
+
+Some codes are copied or modified from [storybookjs/storybook](https://github.com/storybookjs/storybook).
+
+## License
+
+[MIT](./LICENSE)

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "storybook-rsbuild-monorepo",
+  "private": true,
+  "version": "0.0.0",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "prepare": "pnpm run build && simple-git-hooks",
+    "build": "pnpm --parallel --filter \"./packages/**\" run prep --optimized",
+    "dev": "pnpm --parallel --filter \"./packages/**\" run prep --watch",
+    "check": "pnpm --parallel --filter \"./packages/**\" run check",
+    "test:sandboxes-build": "pnpm --parallel --filter \"./sandboxes/**\" run build:storybook"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "nano-staged": {
+    "*.{md,mdx,json,css,less,scss}": "prettier --write",
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "prettier --write"
+    ]
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "nano-staged": "^0.8.0",
+    "simple-git-hooks": "^2.11.1",
+    "prettier": "^3.2.5",
+    "vitest": "^1.6.0"
+  }
+}

packages/builder-rsbuild/README.md

@@ -0,0 +1,3 @@
+# storybook-builder-rsbuild
+
+Check out [https://github.com/rspack-contrib/storybook-rsbuild] for documentation.

packages/builder-rsbuild/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "storybook-builder-rsbuild",
+  "version": "0.0.1",
+  "description": "Rsbuild builder for Storybook",
+  "keywords": [
+    "storybook",
+    "rsbuild",
+    "rspack"
+  ],
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./presets/custom-rsbuild-preset": {
+      "types": "./dist/presets/custom-rsbuild-preset.d.ts",
+      "node": "./dist/presets/custom-rsbuild-preset.js",
+      "require": "./dist/presets/custom-rsbuild-preset.js"
+    },
+    "./preview-preset": {
+      "types": "./dist/preview-preset.d.ts",
+      "node": "./dist/preview-preset.js",
+      "require": "./dist/preview-preset.js"
+    },
+    "./loaders/export-order-loader": {
+      "types": "./dist/loaders/export-order-loader.d.ts",
+      "node": "./dist/loaders/export-order-loader.js",
+      "require": "./dist/loaders/export-order-loader.js"
+    },
+    "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
+    "./templates/preview.ejs": "./templates/preview.ejs",
+    "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js",
+    "./templates/virtualModuleStory.template.js": "./templates/virtualModuleStory.template.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "templates/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "check": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/check.ts",
+    "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/addon-docs": "8.0.10",
+    "@storybook/channels": "8.0.10",
+    "@storybook/client-logger": "8.0.10",
+    "@storybook/core-common": "8.0.10",
+    "@storybook/core-events": "8.0.10",
+    "@storybook/core-webpack": "8.0.10",
+    "@storybook/node-logger": "8.0.10",
+    "@storybook/preview": "8.0.10",
+    "@storybook/preview-api": "8.0.10",
+    "@storybook/react-dom-shim": "8.0.10",
+    "@storybook/types": "^8.0.10",
+    "browser-assert": "^1.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "cjs-module-lexer": "^1.2.3",
+    "constants-browserify": "^1.0.0",
+    "css-loader": "^6.7.1",
+    "es-module-lexer": "^1.5.0",
+    "express": "^4.17.3",
+    "fs-extra": "^11.1.0",
+    "magic-string": "^0.30.5",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "style-loader": "^3.3.1",
+    "ts-dedent": "^2.2.0",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
+    "util-deprecate": "^1.0.2"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "0.6.15",
+    "@types/node": "^18.0.0",
+    "@types/express": "^4.17.21",
+    "@types/fs-extra": "^11.0.4",
+    "@types/pretty-hrtime": "^1.0.0",
+    "pretty-hrtime": "^1.0.3",
+    "add": "^2.0.6",
+    "slash": "^5.0.0",
+    "typescript": "^5.3.2"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": ">= 0.6.15"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preview-preset.ts",
+      "./src/loaders/export-order-loader.ts"
+    ],
+    "platform": "node"
+  }
+}