feat: support fork-ts-checker-webpack-plugin

fi3ework · fi3ework · commit 332bef7a93f8 · 2024-05-24T12:34:05.000+08:00
diff --git a/README.md b/README.md
@@ -117,7 +117,7 @@ The function should return the updated Rsbuild configuration.
 
 ## Troubleshooting
 
-### Error caused by bundling unwanted modules
+### Error caused by bundling unexpected files
 
 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`.
 
@@ -157,8 +157,8 @@ export default {
 
 ### Features
 
-- [ ] Support TS type check (fork-ts-checker-webpack-plugin)
-- [ ] Support more frameworks
+- [x] Support TS type check (fork-ts-checker-webpack-plugin)
+- [ ] Support more frameworks (Preact / Svelte / vanilla html / Lit)
 
 ### Rspack support
 
diff --git a/packages/builder-rsbuild/package.json b/packages/builder-rsbuild/package.json
@@ -78,6 +78,7 @@
     "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",
diff --git a/packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts b/packages/builder-rsbuild/src/preview/iframe-rsbuild.config.ts
@@ -1,4 +1,4 @@
-import { extname, dirname, join, resolve } from 'path'
+import { dirname, join, resolve } from 'path'
 // @ts-expect-error (I removed this on purpose, because it's incorrect)
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'
 import type { Options } from '@storybook/types'
@@ -15,6 +15,7 @@ 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'
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any
@@ -56,7 +57,7 @@ export default async (options: Options): Promise<RsbuildConfig> => {
     configType,
     presets,
     previewUrl,
-    // typescriptOptions,
+    typescriptOptions,
     features,
   } = options
 
@@ -100,12 +101,12 @@ export default async (options: Options): Promise<RsbuildConfig> => {
   })
 
   // TODO: not inclined to support fork-ts-checker-webpack-plugin
-  // const builderOptions = await getBuilderOptions<BuilderOptions>(options)
-  // const shouldCheckTs =
-  //   typescriptOptions.check && !typescriptOptions.skipCompiler
-  // const tsCheckOptions = typescriptOptions.checkOptions || {}
+  const shouldCheckTs =
+    typescriptOptions.check && !typescriptOptions.skipCompiler
+  const tsCheckOptions = typescriptOptions.checkOptions || {}
 
   // TODO: Rspack doesn't support persistent cache yet
+  // const builderOptions = await getBuilderOptions<BuilderOptions>(options)
   // const cacheConfig = builderOptions.fsCache
   //   ? { cache: { type: 'filesystem' as const } }
   //   : {}
@@ -257,6 +258,9 @@ export default async (options: Options): Promise<RsbuildConfig> => {
               process: require.resolve('process/browser.js'),
             }),
             new CaseSensitivePathsPlugin(),
+            shouldCheckTs
+              ? new ForkTsCheckerWebpackPlugin(tsCheckOptions)
+              : null,
           ].filter(Boolean),
         )
 
diff --git a/packages/builder-rsbuild/src/types.ts b/packages/builder-rsbuild/src/types.ts
@@ -1,11 +1,26 @@
 import type { RsbuildConfig } from '@rsbuild/core'
-import type { Builder, Options } from '@storybook/types'
+import type {
+  Builder,
+  Options,
+  TypescriptOptions as TypeScriptOptionsBase,
+} from '@storybook/types'
+import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 
 // Storybook's Stats are optional Webpack related property
 type RsbuildStats = {
   toJson: () => any
 }
 
+/**
+ * Options for TypeScript usage within Storybook.
+ */
+export interface TypescriptOptions extends TypeScriptOptionsBase {
+  /**
+   * Configures `fork-ts-checker-webpack-plugin`
+   */
+  checkOptions?: ConstructorParameters<typeof ForkTsCheckerWebpackPlugin>[0]
+}
+
 export type RsbuildBuilder = Builder<RsbuildConfig, RsbuildStats>
 
 export type RsbuildFinal = (
diff --git a/packages/react-rsbuild/src/types.ts b/packages/react-rsbuild/src/types.ts
@@ -1,8 +1,12 @@
 import type {
   StorybookConfigRsbuild,
   BuilderOptions,
+  TypescriptOptions as TypescriptOptionsBuilder,
 } from 'storybook-builder-rsbuild'
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'
+import type {
+  StorybookConfig as StorybookConfigBase,
+  TypescriptOptions as TypescriptOptionsBase,
+} from '@storybook/types'
 import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin'
 
 type FrameworkName = 'storybook-react-rsbuild'
@@ -21,6 +25,22 @@ export type FrameworkOptions = {
   legacyRootApi?: boolean
 }
 
+type TypescriptOptionsReact = {
+  /**
+   * Sets the type of Docgen when working with React and TypeScript
+   *
+   * @default `'react-docgen'`
+   */
+  reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false
+  /**
+   * Configures `react-docgen-typescript-plugin`
+   *
+   * @default
+   * @see https://github.com/storybookjs/storybook/blob/next/code/builders/builder-webpack5/src/config/defaults.js#L4-L6
+   */
+  reactDocgenTypescriptOptions: ReactDocgenTypescriptOptions
+}
+
 type StorybookConfigFramework = {
   framework:
     | FrameworkName
@@ -36,22 +56,9 @@ type StorybookConfigFramework = {
           options: BuilderOptions
         }
   }
-}
-
-type TypescriptOptions = StorybookConfigBase['typescript'] & {
-  /**
-   * Sets the type of Docgen when working with React and TypeScript
-   *
-   * @default `'react-docgen'`
-   */
-  reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false
-  /**
-   * Configures `react-docgen-typescript-plugin`
-   *
-   * @default
-   * @see https://github.com/storybookjs/storybook/blob/next/code/builders/builder-webpack5/src/config/defaults.js#L4-L6
-   */
-  reactDocgenTypescriptOptions: ReactDocgenTypescriptOptions
+  typescript?: Partial<
+    TypescriptOptionsBase & TypescriptOptionsBuilder & TypescriptOptionsReact
+  >
 }
 
 /**
@@ -62,6 +69,4 @@ export type StorybookConfig = Omit<
   keyof StorybookConfigRsbuild | keyof StorybookConfigFramework
 > &
   StorybookConfigRsbuild &
-  StorybookConfigFramework & {
-    typescript?: Partial<TypescriptOptions>
-  }
+  StorybookConfigFramework
diff --git a/packages/vue3-rsbuild/src/types.ts b/packages/vue3-rsbuild/src/types.ts
@@ -1,6 +1,10 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'
+import type {
+  StorybookConfig as StorybookConfigBase,
+  TypescriptOptions as TypescriptOptionsBaseAndVue,
+} from '@storybook/types'
 import type {
   StorybookConfigRsbuild,
+  TypescriptOptions as TypescriptOptionsBuilder,
   BuilderOptions,
 } from 'storybook-builder-rsbuild'
 
@@ -26,7 +30,7 @@ type StorybookConfigFramework = {
           options: BuilderOptions
         }
   }
-  typescript?: StorybookConfigBase['typescript']
+  typescript?: Partial<TypescriptOptionsBaseAndVue & TypescriptOptionsBuilder>
 }
 
 /**
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sandboxes/react-rsbuild/.storybook/main.ts b/sandboxes/react-rsbuild/.storybook/main.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,10 @@`
`1`		`-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'`
	`1`	`+import type {`
	`2`	`+ StorybookConfig as StorybookConfigBase,`
	`3`	`+ TypescriptOptions as TypescriptOptionsBaseAndVue,`
	`4`	`+} from '@storybook/types'`
`2`	`5`	`import type {`
`3`	`6`	`StorybookConfigRsbuild,`
	`7`	`+ TypescriptOptions as TypescriptOptionsBuilder,`
`4`	`8`	`BuilderOptions,`
`5`	`9`	`} from 'storybook-builder-rsbuild'`
`6`	`10`
`@@ -26,7 +30,7 @@ type StorybookConfigFramework = {`
`26`	`30`	`options: BuilderOptions`
`27`	`31`	`}`
`28`	`32`	`}`
`29`		`- typescript?: StorybookConfigBase['typescript']`
	`33`	`+ typescript?: Partial<TypescriptOptionsBaseAndVue & TypescriptOptionsBuilder>`
`30`	`34`	`}`
`31`	`35`
`32`	`36`	`/**`