feat: reuse @rsbuild/plugin-type-check to type check

.github/workflows/ci.yaml

@@ -41,7 +41,9 @@ jobs:
           cache: 'pnpm'
 
       - name: Install Dependencies
-        run: pnpm install
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm check
 
       - name: Build Test
         run: |

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -25,6 +25,7 @@
     "prettier": "^3.2.5",
     "simple-git-hooks": "^2.11.1",
     "sort-package-json": "^2.10.0",
+    "typescript": "^5.3.2",
     "vitest": "^1.6.0"
   },
   "packageManager": "[email protected]"

packages/builder-rsbuild/package.json

@@ -60,6 +60,7 @@
     "prep": "node --loader ../../scripts/node_modules/esbuild-register/loader.js -r ../../scripts/node_modules/esbuild-register/register.js ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@rsbuild/plugin-type-check": "0.6.15",
     "@storybook/addon-docs": "^8.0.10",
     "@storybook/channels": "^8.0.10",
     "@storybook/client-logger": "^8.0.10",
@@ -78,7 +79,6 @@
     "css-loader": "^6.7.1",
     "es-module-lexer": "^1.5.0",
     "express": "^4.17.3",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "fs-extra": "^11.1.0",
     "magic-string": "^0.30.5",
     "path-browserify": "^1.0.1",

packages/builder-rsbuild/src/index.ts

@@ -9,7 +9,9 @@ import {
   WebpackInvocationError,
 } from '@storybook/core-events/server-errors'
 import type { RsbuildBuilder } from './types'
-import rsbuildConfig from './preview/iframe-rsbuild.config'
+import rsbuildConfig, {
+  type RsbuildBuilderOptions,
+} from './preview/iframe-rsbuild.config'
 
 import prettyTime from 'pretty-hrtime'
 
@@ -39,9 +41,8 @@ export const executor = {
   },
 }
 
-export const rsbuild = async (_: unknown, options: Options) => {
+export const rsbuild = async (_: unknown, options: RsbuildBuilderOptions) => {
   const defaultConfig = await rsbuildConfig(options)
-
   const { presets } = options
   const finalDefaultConfig = await presets.apply(
     'rsbuildFinal',

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

@@ -15,7 +15,8 @@ import { getVirtualModules } from './virtual-module-mapping'
 import { loadConfig, mergeRsbuildConfig } from '@rsbuild/core'
 import type { RsbuildConfig } from '@rsbuild/core'
 import { webpack as docsWebpack } from '@storybook/addon-docs/dist/preset'
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
+import { pluginTypeCheck } from '@rsbuild/plugin-type-check'
+import type { TypescriptOptions } from '../types'
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any
@@ -48,7 +49,13 @@ const storybookPaths: Record<string, string> = {
   ...(themingPath ? { [`@storybook/theming`]: themingPath } : {}),
 }
 
-export default async (options: Options): Promise<RsbuildConfig> => {
+export type RsbuildBuilderOptions = Options & {
+  typescriptOptions: TypescriptOptions
+}
+
+export default async (
+  options: RsbuildBuilderOptions,
+): Promise<RsbuildConfig> => {
   const appliedDocsWebpack = await docsWebpack({}, options)
   const {
     outputDir = join('.', 'public'),
@@ -201,6 +208,9 @@ export default async (options: Options): Promise<RsbuildConfig> => {
         },
       },
     },
+    plugins: [shouldCheckTs ? pluginTypeCheck(tsCheckOptions) : null].filter(
+      Boolean,
+    ),
     tools: {
       rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
         // TODO: Rspack doesn't support `unknownContextCritical` yet
@@ -258,9 +268,6 @@ export default async (options: Options): Promise<RsbuildConfig> => {
               process: require.resolve('process/browser.js'),
             }),
             new CaseSensitivePathsPlugin(),
-            shouldCheckTs
-              ? new ForkTsCheckerWebpackPlugin(tsCheckOptions)
-              : null,
           ].filter(Boolean),
         )
 

packages/builder-rsbuild/src/types.ts

@@ -4,7 +4,7 @@ import type {
   Options,
   TypescriptOptions as TypeScriptOptionsBase,
 } from '@storybook/types'
-import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
+import type { PluginTypeCheckerOptions } from '@rsbuild/plugin-type-check'
 
 // Storybook's Stats are optional Webpack related property
 type RsbuildStats = {
@@ -16,9 +16,9 @@ type RsbuildStats = {
  */
 export interface TypescriptOptions extends TypeScriptOptionsBase {
   /**
-   * Configures `fork-ts-checker-webpack-plugin`
+   * Configures `@rsbuild/plugin-type-check`, using `fork-ts-checker-webpack-plugin` under the hood.
    */
-  checkOptions?: ConstructorParameters<typeof ForkTsCheckerWebpackPlugin>[0]
+  checkOptions?: PluginTypeCheckerOptions
 }
 
 export type RsbuildBuilder = Builder<RsbuildConfig, RsbuildStats>

packages/react-rsbuild/package.json

@@ -68,6 +68,7 @@
   },
   "devDependencies": {
     "@storybook/types": "^8.0.10",
+    "@types/resolve": "^1.20.6",
     "add": "^2.0.6",
     "typescript": "^5.3.2"
   },

packages/react-rsbuild/src/loaders/react-docgen-loader.ts

@@ -9,7 +9,7 @@ import {
 import * as TsconfigPaths from 'tsconfig-paths'
 import findUp from 'find-up'
 import MagicString from 'magic-string'
-// @ts-expect-error
+// @ts-expect-error can not reexport `LoaderContext` from @rsbuild/core
 import type { LoaderContext } from 'webpack'
 import type {
   Handler,

sandboxes/react-rsbuild/package.json

@@ -30,6 +30,6 @@
     "@types/react-dom": "^18",
     "storybook": "8.1.1",
     "storybook-react-rsbuild": "workspace:*",
-    "typescript": "^4.8"
+    "typescript": "^5.3.2"
   }
 }