feat: support read configs

fi3ework · Jun 8, 2021 · 8bdf6e6 · 8bdf6e6
1 parent 34f68b2
commit 8bdf6e6
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 114 deletions.
diff --git a/README.md b/README.md
@@ -5,19 +5,17 @@ A Vite plugin that runs TypeScript / Vue / ... checker in worker thread.
 ## Features
 
 - 📦 Out of the box
-- 💚 Support Vue2/3 based on [vue-tsc](https://github.com/johnsoncodehk/vue-tsc) and [VLS](https://github.com/vuejs/vetur/blob/master/server/README.md)
+- 🌗 Support React & Vue2/3
 - ⛔️ Vite HMR overlay
 - 🛠 Support serve & build mode
 
 <p align="center">
   <img alt="screenshot" src="https://user-images.githubusercontent.com/12322740/113175704-48cf1e80-927e-11eb-9bb5-43ab1b218cb2.png">
 </p>
 
-## Usage
+## Install
 
-### Install
-
-#### Install plugin
+### Install plugin
 
 ```bash
 npm i vite-plugin-checker -D
@@ -32,25 +30,25 @@ Add `vite-plugin-checker` to plugin filed of Vite config file.
 import Checker from 'vite-plugin-checker'
 
 export default {
-  plugins: [Checker()],
-  // or with advanced options `plugins: [Checker({ ...options })]`
-  // see options for detail
+  plugins: [Checker(typescript: true)]
 }
 ```
 
-#### React
+## Getting Started
+
+### React
 
 1. Make sure [typescript](https://www.npmjs.com/package/typescript) is installed as a peer dependency.
-2. Set `checker` to `"tsc"`.
+
+2. Modify config file
 
 ```js
-{
-  checker: 'tsc'
-  // ...
+export default {
+  plugins: [Checker({ typescript: true })],
 }
 ```
 
-#### Vue (Vetur)
+### Vue (Vetur/VLS)
 
 1. Install [VLS](https://www.npmjs.com/package/vls) checker preset.
 
@@ -67,79 +65,87 @@ import VlsChecker from 'vite-plugin-checker-preset-vls'
 module.exports = {
   plugins: [
     Checker({
-      checker: VlsChecker(/** VLS options */),
+      vls: VlsChecker(/** VLS options */),
     }),
   ],
 }
 ```
 
-#### Vue (Volar)
+### Vue (Volar/vue-tsc)
 
-> Only support checking in **build mode** as `vue-tsc` doesn't support watch mode for now.
+> Only support checking in **build mode** since `vue-tsc` doesn't support watch mode for now.
 
-1. Make sure [vue-tsc](https://www.npmjs.com/package/vue-tsc) is installed as a peer dependency, and set `checker` to `"vue-tsc"`.
+1. Make sure [vue-tsc](https://www.npmjs.com/package/vue-tsc) is installed as a peer dependency.
 
 2. The type check is powered by `vue-tsc` so it supports Vue2 according to the [documentation](https://github.com/johnsoncodehk/volar#using), you need to install `@vue/runtime-dom` by yourself.
 
 ```js
-{
-  checker: 'vue-tsc'
-  // ...
+export default {
+  plugins: [Checker({ vueTsc: true })],
 }
 ```
 
-## Advanced options interface
+## Advanced config
+
+### overlay
 
 ```ts
-export interface PluginOptions {
-  /**
-   * Use `"tsc"` or `"vue-tsc"` or an custom checker
-   * @defaultValue `"tcs"`
-   */
-  checker: 'tsc' | 'vue-tsc' | Checker
-  /**
-   * Enable checking in build mode
-   * @defaultValue `true`
-   */
-  enableBuild: boolean
-  /**
-   * Show overlay when has TypeScript error
-   * @defaultValue
-   * Same as [Vite config](https://vitejs.dev/config/#root)
-   */
-  overlay: boolean
-  /**
-   * Root path to find tsconfig file
-   * @defaultValue
-   * Same as [Vite config](https://vitejs.dev/config/#root)
-   */
-  root: string
-  /**
-   * Relative tsconfig path to {@link (PluginOptions:interface).root}
-   * @defaultValue `"tsconfig.json"`
-   */
-  tsconfigPath: string
-}
+/**
+ * Show overlay when has TypeScript error
+ * @defaultValue
+ * Same as [Vite config](https://vitejs.dev/config/#root)
+ */
+overlay: boolean
+```
+
+### enableBuild
+
+```ts
+/**
+ * Enable checking in build mode
+ * @defaultValue `true`
+ */
+enableBuild: boolean
 ```
 
+---
+
+For fields below:
+
+- Set to `true` to use checker with all default values
+- Leave the field blank or set to `false` to disable the checker
+- Enable with an object config (all object keys are optional)
+
+### typescript
+
+| field        | Type     | Default value                                         | Description                      |
+| :----------- | -------- | ----------------------------------------------------- | -------------------------------- |
+| root         | `string` | [Vite config](https://vitejs.dev/config/#root) `root` | Root path to find tsconfig file  |
+| tsconfigPath | `string` | `"tsconfig.json"`                                     | Relative tsconfig path to `root` |
+
+### vls
+
+| field | Type     | Default value                                         | Description              |
+| :---- | -------- | ----------------------------------------------------- | ------------------------ |
+| root  | `string` | [Vite config](https://vitejs.dev/config/#root) `root` | Root dir for checker run |
+
+### vueTsc
+
+| field | Type     | Default value                                         | Description              |
+| :---- | -------- | ----------------------------------------------------- | ------------------------ |
+| root  | `string` | [Vite config](https://vitejs.dev/config/#root) `root` | Root dir for checker run |
+
 ## Examples
 
 Run projects in [`examples/*`](./examples) to try it out.
 
 ```bash
 pnpm i
 cd ./examples/<ONE_EXAMPLE>
-npm run dev
+npm run dev   # for development
+npm run build # for build
 ```
 
-### Roadmap
-
-- [x] Support [VLS](https://www.npmjs.com/package/vls)
-- [ ] Development mode runs in separated process (or worker thread?)
-- [ ] Add unit & e2e test
-- [ ] Support project reference
-- [ ] Wait for vue-tsc to support watch mode
-
 ## License
 
 MIT
diff --git a/examples/react-ts/vite.config.ts b/examples/react-ts/vite.config.ts
@@ -4,5 +4,10 @@ import Checker from 'vite-plugin-checker'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [reactRefresh(), Checker()],
+  plugins: [
+    reactRefresh(),
+    Checker({
+      typescript: true,
+    }),
+  ],
 })
diff --git a/examples/vue2-vls/vite.config.ts b/examples/vue2-vls/vite.config.ts
@@ -18,7 +18,7 @@ const config = defineConfig({
   plugins: [
     createVuePlugin({}),
     ViteComponents({ transformer: 'vue2' }),
-    Checker({ tsc: true, vls: VlsChecker({ volar: true }) }),
+    Checker({ tsc: true, vls: VlsChecker({}) }),
   ],
   server: {
     port: 8080,

diff --git a/presets/vls/src/main.ts b/presets/vls/src/main.ts
@@ -5,7 +5,7 @@ import {
   createScript,
   lspDiagnosticToViteError,
   uriToAbsPath,
-  ServeAndBuild,
+  ServeAndBuildConfig,
 } from 'vite-plugin-checker'
 import { isMainThread, parentPort } from 'worker_threads'
 
@@ -52,24 +52,32 @@ export const createDiagnostic: CreateDiagnostic = (userOptions = {}) => {
 
 const vlsCheckerFactory: ServeCheckerFactory = () => {
   return {
-    createDiagnostic: createDiagnostic,
+    createDiagnostic,
   }
 }
 
 export const buildBin: BuildCheckBin = ['vite-plugin-checker-preset-vls', ['diagnostics']]
 
-const { mainScript, workerScript } = createScript({
+const { mainScript, workerScript } = createScript<VlsConfig>({
   absFilename: __filename,
   buildBin,
   checkerFactory: vlsCheckerFactory,
 })!
 
 if (isMainThread) {
   const { createServeAndBuild } = mainScript()
-  module.exports.VlsChecker = module.exports.createServeAndBuild = createServeAndBuild
+  module.exports.VlsChecker = createServeAndBuild
+  module.exports.createServeAndBuild = createServeAndBuild
 } else {
   workerScript()
 }
 
-declare const VlsChecker: (options?: { volar?: boolean }) => ServeAndBuild
+type VlsConfig = Partial<{
+  /** root path of cwd */
+  root: string
+}>
+
+declare const VlsChecker: (options?: VlsConfig) => ServeAndBuildConfig
+
 export { VlsChecker }
+export type { VlsConfig }
diff --git a/src/main.ts b/src/main.ts
@@ -2,21 +2,21 @@ import { spawn } from 'child_process'
 import npmRunPath from 'npm-run-path'
 import { ConfigEnv, Plugin } from 'vite'
 
-import { ServeAndBuild, OverlayErrorAction, PluginOptions } from './types'
+import { ServeAndBuildConfig, OverlayErrorAction, PluginOptions } from './types'
 
 export * from './types'
 export * from './codeFrame'
 export * from './utils'
 export * from './worker'
 
-function createServeAndBuild(userOptions: Partial<PluginOptions>): ServeAndBuild[] {
-  const checkers: ServeAndBuild[] = []
-  const { tsc, vueTsc, vls } = userOptions
+function createServeAndBuild(userOptions: Partial<PluginOptions>): ServeAndBuildConfig[] {
+  const checkers: ServeAndBuildConfig[] = []
+  const { typescript, vueTsc, vls } = userOptions
 
-  if (tsc) {
+  if (typescript) {
     // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const { createServeAndBuild, buildBin } = require('./presets/tsc')
-    checkers.push(createServeAndBuild(userOptions.tsc))
+    const { createServeAndBuild } = require('./presets/tsc')
+    checkers.push(createServeAndBuild(userOptions.typescript))
   }
 
   if (vueTsc) {

diff --git a/src/presets/tsc.ts b/src/presets/tsc.ts
@@ -3,6 +3,7 @@ import ts from 'typescript'
 import { ErrorPayload } from 'vite'
 import { isMainThread, parentPort } from 'worker_threads'
 
+import { TscConfig } from '../types'
 import { ensureCall, formatHost, tsDiagnosticToViteError } from '../utils'
 import { createScript } from '../worker'
 
@@ -107,9 +108,10 @@ const checkerFactory: ServeCheckerFactory = () => {
     createDiagnostic,
   }
 }
+
 export const buildBin: BuildCheckBin = ['tsc', ['--noEmit']]
 
-const { mainScript, workerScript } = createScript({
+const { mainScript, workerScript } = createScript<TscConfig>({
   absFilename: __filename,
   buildBin,
   checkerFactory,

diff --git a/src/presets/vue-tsc.ts b/src/presets/vue-tsc.ts
@@ -1,7 +1,8 @@
 import { isMainThread } from 'worker_threads'
+
 import { createScript } from '../worker'
 
-import type { ServeCheckerFactory, CreateDiagnostic, BuildCheckBin } from '../types'
+import type { VueTscConfig, ServeCheckerFactory, CreateDiagnostic, BuildCheckBin } from '../types'
 import type { UserConfig, ViteDevServer } from 'vite'
 
 // TODO: watch mode is not supported for now
@@ -33,7 +34,7 @@ export const checkerFactory: ServeCheckerFactory = () => {
   }
 }
 
-const { mainScript, workerScript } = createScript({
+const { mainScript, workerScript } = createScript<VueTscConfig>({
   absFilename: __filename,
   buildBin,
   checkerFactory,