fix: remove @storybook/addon-docs from builder dependency

w

Author: fi3ework

package.json

@@ -31,6 +31,7 @@
     "cross-env": "^10.1.0",
     "jiti": "^2.6.1",
     "nano-staged": "^0.8.0",
+    "path-serializer": "^0.5.1",
     "simple-git-hooks": "^2.13.1",
     "sort-package-json": "^2.15.1",
     "ts-dedent": "^2.2.0",

packages/builder-rsbuild/package.json

@@ -60,7 +60,6 @@
   },
   "dependencies": {
     "@rsbuild/plugin-type-check": "^1.2.4",
-    "@storybook/addon-docs": "^9.1.15 || ^10.0.0",
     "@storybook/core-webpack": "^9.1.15 || ^10.0.0",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",

packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts

@@ -2,8 +2,6 @@ import { dirname, join, resolve } from 'node:path'
 import { loadConfig, mergeRsbuildConfig, rspack } from '@rsbuild/core'
 import type { RsbuildConfig, Rspack } from '@rsbuild/core'
 import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
-// @ts-expect-error forced resolve from `dist/index.d.ts` by typesVersions.
-import { webpack as docsWebpack } from '@storybook/addon-docs/preset'
 // @ts-expect-error (I removed this on purpose, because it's incorrect)
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'
 import { pluginHtmlMinifierTerser } from 'rsbuild-plugin-html-minifier-terser'
@@ -60,7 +58,15 @@ export default async (
 ): Promise<RsbuildConfig> => {
   const { rsbuildConfigPath, addonDocs } =
     await getBuilderOptions<BuilderOptions>(options)
-  const appliedDocsWebpack = await docsWebpack({}, { ...options, ...addonDocs })
+  const webpackConfigFromPresets =
+    await options.presets.apply<Rspack.Configuration>('webpack', {}, options)
+
+  if (addonDocs) {
+    console.warn(
+      '`addonDocs` option is deprecated and will be removed in future versions. Please use `@storybook/addon-docs` option instead.',
+    )
+  }
+
   const {
     outputDir = join('.', 'public'),
     quiet,
@@ -360,11 +366,11 @@ export default async (
           ...lazyCompilationConfig,
         }
 
-        // TODO: manually call and apply `webpack` from @storybook/addon-docs
-        // as it's a built-in logic for Storybook's official webpack and Vite builder.
-        // we should remove this once we merge this into Storybook's repository
-        // by defining builder plugin in @storybook/addon-docs/preset's source code
-        return mergeConfig(config, extraWebpackConfig || {}, appliedDocsWebpack)
+        return mergeConfig(
+          config,
+          extraWebpackConfig || {},
+          webpackConfigFromPresets,
+        )
       },
       htmlPlugin: {
         filename: 'iframe.html',

packages/builder-rsbuild/vitest.config.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 /* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { vitestCommonConfig } from '../../vitest.workspace'
@@ -6,6 +7,7 @@ export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
     test: {
+      setupFiles: [resolve(__dirname, '../../vitest-setup.ts')],
       environment: 'node',
     },
   }),

packages/framework-react/vitest.config.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 /* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { vitestCommonConfig } from '../../vitest.workspace'
@@ -6,6 +7,7 @@ export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
     test: {
+      setupFiles: [resolve(__dirname, '../../vitest-setup.ts')],
       environment: 'node',
     },
   }),

packages/framework-vue3/vitest.config.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 /* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { vitestCommonConfig } from '../../vitest.workspace'
@@ -6,6 +7,7 @@ export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
     test: {
+      setupFiles: [resolve(__dirname, '../../vitest-setup.ts')],
       environment: 'node',
     },
   }),

packages/framework-web-components/vitest.config.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 /* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { vitestCommonConfig } from '../../vitest.workspace'
@@ -6,6 +7,7 @@ export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
     test: {
+      setupFiles: [resolve(__dirname, '../../vitest-setup.ts')],
       environment: 'node',
     },
   }),

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import { dirname, join } from 'node:path'
+import remarkGfm from 'remark-gfm'
 import type { StorybookConfig } from 'storybook-react-rsbuild'
 
 /**
@@ -13,7 +14,16 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-onboarding',
-    '@storybook/addon-docs',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
     '@chromatic-com/storybook',
   ],
   framework: {

sandboxes/react-16/.storybook/main.ts

@@ -25,6 +25,7 @@
     "@storybook/react": "9.1.10",
     "@types/react": "^16.14.67",
     "@types/react-dom": "^16.9.25",
+    "remark-gfm": "^4.0.1",
     "storybook": "9.1.10",
     "storybook-react-rsbuild": "workspace:*",
     "typescript": "^5.9.3"