@rsbuild/plugin-type-check 1.0.1-rc.4 → 1.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+Copyright (c) 2024 Rspack Contrib
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,19 +1,240 @@
-<p align="center">
-  <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
+# @rsbuild/plugin-type-check
+
+An Rsbuild plugin to run TypeScript type checker in a separate process.
+
+<p>
+  <a href="https://npmjs.com/package/@rsbuild/plugin-type-check">
+   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-type-check?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
+  <a href="https://npmcharts.com/compare/@rsbuild/plugin-type-check?minimal=true"><img src="https://img.shields.io/npm/dm/@rsbuild/plugin-type-check.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
 </p>
 
-# Rsbuild
+## Introduction
+
+This plugin internally integrates with [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin).
+
+The type checking logic of `fork-ts-checker-webpack-plugin` is similar to the native `tsc` command of TypeScript. It automatically reads the configuration options from `tsconfig.json` and can also be modified via the configuration options provided by the Type Check plugin.
+
+The behavior of the plugin differs in the development and production builds:
+
+- In development mode, type errors do not block the build process. They are only logged in the terminal.
+- In production mode, type errors cause the build to fail in order to ensure the stability of the production code.
+
+## Usage
+
+Install:
+
+```bash
+npm add @rsbuild/plugin-type-check -D
+```
+
+Add plugin to your `rsbuild.config.ts`:
+
+```ts
+// rsbuild.config.ts
+import { pluginTypeCheck } from "@rsbuild/plugin-type-check";
+
+export default {
+  plugins: [pluginTypeCheck()],
+};
+```
+
+### Configuring tsconfig.json
+
+The Type Check plugin by default performs checks based on the `tsconfig.json` file in the root directory of the current project. Below is an example of a `tsconfig.json` file, which you can also adjust according to the needs of your project.
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"]
+}
+```
+
+Please note that the fields in `tsconfig.json` will not affect the compilation behavior and output of Rsbuild, but will only affect the results of type checking.
+
+## Options
+
+### enable
+
+Whether to enable TypeScript type checking.
+
+- **Type:** `boolean`
+- **Default:** `true`
+- **Example:**
+
+Disable TypeScript type checking:
+
+```js
+pluginTypeCheck({
+  enable: false,
+});
+```
+
+Enable type checking only in production mode:
+
+```js
+pluginTypeCheck({
+  enable: process.env.NODE_ENV === "production",
+});
+```
+
+Enable type checking only in development mode (it is not recommended to disable type checking in production mode, as it may reduce the stability of the production code):
+
+```js
+pluginTypeCheck({
+  enable: process.env.NODE_ENV === "development",
+});
+```
+
+### forkTsCheckerOptions
+
+To modify the options of `fork-ts-checker-webpack-plugin`, please refer to [fork-ts-checker-webpack-plugin - README](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#readme) to learn about available options.
+
+- **Type:** `Object | Function`
+- **Default:**
+
+```ts
+const defaultOptions = {
+  typescript: {
+    // set 'readonly' to avoid emitting tsbuildinfo,
+    // as the generated tsbuildinfo will break fork-ts-checker
+    mode: "readonly",
+    // enable build when using project reference
+    build: useReference,
+    // avoid OOM issue
+    memoryLimit: 8192,
+    // use tsconfig of user project
+    configFile: tsconfigPath,
+    // use typescript of user project
+    typescriptPath: require.resolve("typescript"),
+  },
+  issue: {
+    // ignore types errors from node_modules
+    exclude: [({ file = "" }) => /[\\/]node_modules[\\/]/.test(file)],
+  },
+  logger: {
+    log() {
+      // do nothing
+      // we only want to display error messages
+    },
+    error(message: string) {
+      console.error(message.replace(/ERROR/g, "Type Error"));
+    },
+  },
+};
+```
+
+#### Object Type
+
+When the value of `forkTsCheckerOptions` is an object, it will be deeply merged with the default configuration.
+
+```ts
+pluginTypeCheck({
+  forkTsCheckerOptions: {
+    issue: {
+      exclude: [({ file = "" }) => /[\\/]some-folder[\\/]/.test(file)],
+    },
+  },
+});
+```
+
+#### Function Type
+
+When the value of `forkTsCheckerOptions` is a function, the default configuration will be passed as the first argument. You can directly modify the configuration object or return an object as the final configuration.
+
+```ts
+pluginTypeCheck({
+  forkTsCheckerOptions(options) {
+    options.async = false;
+    return options;
+  },
+});
+```
+
+#### exclude Example
+
+The `exclude` option can filter based on the `code`, `message`, or `file` from TS errors.
+
+For example, the type mismatch error can be excluded using `code: 'TS2345'`:
+
+```ts
+pluginTypeCheck({
+  forkTsCheckerOptions: {
+    issue: {
+      // Ignore "Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)"
+      exclude: [{ code: "TS2345" }],
+    },
+  },
+});
+```
+
+Or exclude files under `/some-folder/` using `file`:
+
+```ts
+pluginTypeCheck({
+  forkTsCheckerOptions: {
+    issue: {
+      exclude: [({ file = "" }) => /[\\/]some-folder[\\/]/.test(file)],
+    },
+  },
+});
+```
+
+## Notes
+
+- If you have enabled `ts-loader` in your project and manually configured `compileOnly: false`, please disable the Type Check plugin to avoid duplicate type checking.
+- Some errors will be displayed as warnings in IDEs such as VS Code, but they will still be displayed as errors in the `fork-ts-checker-webpack-plugin` check. For details, please refer to: [Why are some errors reported as warnings?](https://code.visualstudio.com/docs/typescript/typescript-compiling#_why-are-some-errors-reported-as-warnings).
+
+## Performance Optimization
+
+Type checking has a significant performance overhead. You can refer to the [Performance Guide](https://github.com/microsoft/TypeScript/wiki/Performance) in the official TypeScript documentation for performance optimization.
+
+For example, properly configuring the `include` and `exclude` scopes in `tsconfig.json` can significantly reduce unnecessary type checking and improve TypeScript performance:
+
+```json title="tsconfig.json"
+{
+  "include": ["src"],
+  "exclude": ["**/node_modules", "**/.*/"]
+}
+```
+
+## Vue Components
+
+`fork-ts-checker-webpack-plugin` does not support checking TypeScript code in `.vue` components. You can check for type issues in `.vue` files in the following ways:
+
+1. Install the [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) package, which provides the ability to check types in `.vue` files.
 
-The Rspack-based build tool. It's fast, out-of-the-box and extensible.
+<PackageManagerTabs command="add vue-tsc -D" />
 
-## Documentation
+2. Add the `vue-tsc --noEmit` command to the `build` script in package.json:
 
-https://rsbuild.dev/
+```diff title="package.json"
+{
+  "scripts": {
+-   "build": "rsbuild build"
++   "build": "vue-tsc --noEmit && rsbuild build"
+  }
+}
+```
 
-## Contributing
+3. Since the production build uses `vue-tsc` for type checking, you can disable the Type Check plugin in production mode to avoid redundant checks.
 
-Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
+```js
+pluginTypeCheck({
+  enable: process.env.NODE_ENV === "development",
+});
+```
 
 ## License
 
-Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).
+[MIT](./LICENSE).

package/dist/index.cjs

@@ -34,10 +34,20 @@ __export(src_exports, {
   pluginTypeCheck: () => pluginTypeCheck
 });
 module.exports = __toCommonJS(src_exports);
-var import_node_fs = __toESM(require("fs"));
+
+// node_modules/.pnpm/tsup@8.2.4_postcss@8.4.38_typescript@5.5.4/node_modules/tsup/assets/cjs_shims.js
+var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
+var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
+
+// src/index.ts
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_module = require("module");
 var import_core = require("@rsbuild/core");
-var import_deepmerge = __toESM(require("deepmerge"));
+var import_deepmerge = __toESM(require("deepmerge"), 1);
+var import_fork_ts_checker_webpack_plugin = __toESM(require("fork-ts-checker-webpack-plugin"), 1);
+var import_json5 = __toESM(require("json5"), 1);
 var import_reduce_configs = require("reduce-configs");
+var require2 = (0, import_node_module.createRequire)(importMetaUrl);
 var PLUGIN_TYPE_CHECK_NAME = "rsbuild:type-check";
 var pluginTypeCheck = (options = {}) => {
   return {
@@ -58,7 +68,7 @@ var pluginTypeCheck = (options = {}) => {
           checkedTsconfig.set(tsconfigPath, environment.name);
           let typescriptPath;
           try {
-            typescriptPath = require.resolve("typescript", {
+            typescriptPath = require2.resolve("typescript", {
               paths: [api.context.rootPath]
             });
           } catch (err) {
@@ -67,9 +77,7 @@ var pluginTypeCheck = (options = {}) => {
             );
             return;
           }
-          const { default: ForkTsCheckerWebpackPlugin } = await import("fork-ts-checker-webpack-plugin");
-          const { default: json5 } = await import("json5");
-          const { references } = json5.parse(
+          const { references } = import_json5.default.parse(
             import_node_fs.default.readFileSync(tsconfigPath, "utf-8")
           );
           const useReference = Array.isArray(references) && references.length > 0;
@@ -107,7 +115,7 @@ var pluginTypeCheck = (options = {}) => {
           if (isProd) {
             import_core.logger.info("Type checker is enabled. It may take some time.");
           }
-          chain.plugin(CHAIN_ID.PLUGIN.TS_CHECKER).use(ForkTsCheckerWebpackPlugin, [typeCheckerOptions]);
+          chain.plugin(CHAIN_ID.PLUGIN.TS_CHECKER).use(import_fork_ts_checker_webpack_plugin.default, [typeCheckerOptions]);
         }
       );
     }

package/dist/index.d.cts

@@ -0,0 +1,21 @@
+import { RsbuildPlugin } from '@rsbuild/core';
+import ForkTSCheckerPlugin from 'fork-ts-checker-webpack-plugin';
+import { ConfigChain } from 'reduce-configs';
+
+type ForkTsCheckerOptions = NonNullable<ConstructorParameters<typeof ForkTSCheckerPlugin>[0]>;
+type PluginTypeCheckerOptions = {
+    /**
+     * Whether to enable TypeScript type checking.
+     * @default true
+     */
+    enable?: boolean;
+    /**
+     * To modify the options of `fork-ts-checker-webpack-plugin`.
+     * @see https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#readme
+     */
+    forkTsCheckerOptions?: ConfigChain<ForkTsCheckerOptions>;
+};
+declare const PLUGIN_TYPE_CHECK_NAME = "rsbuild:type-check";
+declare const pluginTypeCheck: (options?: PluginTypeCheckerOptions) => RsbuildPlugin;
+
+export { PLUGIN_TYPE_CHECK_NAME, type PluginTypeCheckerOptions, pluginTypeCheck };

package/{dist-types → dist}/index.d.ts

@@ -1,8 +1,9 @@
-import { type RsbuildPlugin } from '@rsbuild/core';
-import type ForkTSCheckerPlugin from 'fork-ts-checker-webpack-plugin';
-import { type ConfigChain } from 'reduce-configs';
+import { RsbuildPlugin } from '@rsbuild/core';
+import ForkTSCheckerPlugin from 'fork-ts-checker-webpack-plugin';
+import { ConfigChain } from 'reduce-configs';
+
 type ForkTsCheckerOptions = NonNullable<ConstructorParameters<typeof ForkTSCheckerPlugin>[0]>;
-export type PluginTypeCheckerOptions = {
+type PluginTypeCheckerOptions = {
     /**
      * Whether to enable TypeScript type checking.
      * @default true
@@ -14,6 +15,7 @@ export type PluginTypeCheckerOptions = {
      */
     forkTsCheckerOptions?: ConfigChain<ForkTsCheckerOptions>;
 };
-export declare const PLUGIN_TYPE_CHECK_NAME = "rsbuild:type-check";
-export declare const pluginTypeCheck: (options?: PluginTypeCheckerOptions) => RsbuildPlugin;
-export {};
+declare const PLUGIN_TYPE_CHECK_NAME = "rsbuild:type-check";
+declare const pluginTypeCheck: (options?: PluginTypeCheckerOptions) => RsbuildPlugin;
+
+export { PLUGIN_TYPE_CHECK_NAME, type PluginTypeCheckerOptions, pluginTypeCheck };

package/dist/index.js

@@ -1,23 +1,12 @@
-import { createRequire } from 'module';
-var require = createRequire(import.meta['url']);
-
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.58.3_typescript@5.5.2/node_modules/@modern-js/module-tools/shims/esm.js
-import path from "path";
-import { fileURLToPath } from "url";
-
 // src/index.ts
-import fs from "fs";
+import fs from "node:fs";
+import { createRequire } from "node:module";
 import { logger } from "@rsbuild/core";
 import deepmerge from "deepmerge";
+import ForkTSCheckerPlugin from "fork-ts-checker-webpack-plugin";
+import json5 from "json5";
 import { reduceConfigs } from "reduce-configs";
+var require2 = createRequire(import.meta.url);
 var PLUGIN_TYPE_CHECK_NAME = "rsbuild:type-check";
 var pluginTypeCheck = (options = {}) => {
   return {
@@ -38,7 +27,7 @@ var pluginTypeCheck = (options = {}) => {
           checkedTsconfig.set(tsconfigPath, environment.name);
           let typescriptPath;
           try {
-            typescriptPath = __require.resolve("typescript", {
+            typescriptPath = require2.resolve("typescript", {
               paths: [api.context.rootPath]
             });
           } catch (err) {
@@ -47,8 +36,6 @@ var pluginTypeCheck = (options = {}) => {
             );
             return;
           }
-          const { default: ForkTsCheckerWebpackPlugin } = await import("fork-ts-checker-webpack-plugin");
-          const { default: json5 } = await import("json5");
           const { references } = json5.parse(
             fs.readFileSync(tsconfigPath, "utf-8")
           );
@@ -87,7 +74,7 @@ var pluginTypeCheck = (options = {}) => {
           if (isProd) {
             logger.info("Type checker is enabled. It may take some time.");
           }
-          chain.plugin(CHAIN_ID.PLUGIN.TS_CHECKER).use(ForkTsCheckerWebpackPlugin, [typeCheckerOptions]);
+          chain.plugin(CHAIN_ID.PLUGIN.TS_CHECKER).use(ForkTSCheckerPlugin, [typeCheckerOptions]);
         }
       );
     }

package/package.json

@@ -1,28 +1,30 @@
 {
   "name": "@rsbuild/plugin-type-check",
-  "version": "1.0.1-rc.4",
-  "description": "TS checker plugin of Rsbuild",
-  "homepage": "https://rsbuild.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/web-infra-dev/rsbuild",
-    "directory": "packages/plugin-type-check"
-  },
+  "version": "1.0.1",
+  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-type-check",
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist-types/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.cjs",
-  "types": "./dist-types/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "dist-types"
+    "dist"
   ],
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "biome check --write --no-errors-on-unmatched"
+    ]
+  },
   "dependencies": {
     "deepmerge": "^4.3.1",
     "fork-ts-checker-webpack-plugin": "9.0.2",
@@ -31,20 +33,35 @@
     "webpack": "^5.94.0"
   },
   "devDependencies": {
-    "typescript": "^5.5.2",
-    "@rsbuild/core": "1.0.1-rc.4",
-    "@scripts/test-helper": "1.0.1-rc.4"
+    "@biomejs/biome": "^1.8.3",
+    "@playwright/test": "^1.46.1",
+    "@rsbuild/core": "^1.0.1-rc.5",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.16.2",
+    "fs-extra": "^11.2.0",
+    "nano-staged": "^0.8.0",
+    "playwright": "^1.46.1",
+    "simple-git-hooks": "^2.11.1",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^1.0.1-rc.4"
+    "@rsbuild/core": "1.x || ^1.0.1-beta.0"
+  },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public",
-    "provenance": true,
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "modern build",
-    "dev": "modern build --watch"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "biome check .",
+    "lint:write": "biome check . --write",
+    "test": "playwright test"
   }
 }

package/dist-types/package.json

@@ -1 +0,0 @@
-{"//":"This file is for making TypeScript work with moduleResolution node16+.","version":"1.0.0"}