fix: reuse vite watcher, close #84

Author: antfu

package.json

@@ -31,7 +31,6 @@
     "vite": "^2.0.0"
   },
   "dependencies": {
-    "chokidar": "^3.5.2",
     "debug": "^4.3.2",
     "fast-glob": "^3.2.6",
     "magic-string": "^0.25.7",

pnpm-lock.yaml

@@ -1,10 +1,9 @@
 import { relative } from 'path'
 import Debug from 'debug'
-import chokidar from 'chokidar'
 import { ResolvedConfig, UpdatePayload, ViteDevServer } from 'vite'
-import { throttle } from '@antfu/utils'
+import { throttle, toArray, slash } from '@antfu/utils'
 import { Options, ComponentInfo, ResolvedOptions } from './types'
-import { pascalCase, toArray, getNameFromFilePath, resolveAlias, resolveOptions, matchGlobs, slash } from './utils'
+import { pascalCase, getNameFromFilePath, resolveAlias, resolveOptions, matchGlobs } from './utils'
 import { searchComponents } from './fs/glob'
 import { generateDeclaration } from './declaration'
 
@@ -29,25 +28,6 @@ export class Context {
     public readonly viteConfig: ResolvedConfig,
   ) {
     this.options = resolveOptions(options, viteConfig)
-    const { globs, dirs } = this.options
-
-    if (viteConfig.command === 'serve') {
-      // TODO: use vite's watcher instead
-      chokidar.watch(dirs, { ignoreInitial: true, cwd: this.root })
-        .on('unlink', (path) => {
-          if (matchGlobs(path, globs)) {
-            this.removeComponents(path)
-            this.onUpdate(path)
-          }
-        })
-        .on('add', (path) => {
-          if (matchGlobs(path, globs)) {
-            this.addComponents(path)
-            this.onUpdate(path)
-          }
-        })
-    }
-
     this.generateDeclaration = throttle(500, false, this.generateDeclaration.bind(this))
   }
 
@@ -57,6 +37,24 @@ export class Context {
 
   setServer(server: ViteDevServer) {
     this._server = server
+
+    const { globs, dirs } = this.options
+
+    server.watcher.add(dirs)
+    server.watcher
+      .on('unlink', (path) => {
+        if (!matchGlobs(path, globs))
+          return
+        this.removeComponents(path)
+        this.onUpdate(path)
+      })
+    server.watcher
+      .on('add', (path) => {
+        if (!matchGlobs(path, globs))
+          return
+        this.addComponents(path)
+        this.onUpdate(path)
+      })
   }
 
   /**

src/context.ts

@@ -1,8 +1,7 @@
 import { resolve, dirname, relative } from 'path'
 import { promises as fs, existsSync } from 'fs'
-import { notNullish } from '@antfu/utils'
+import { notNullish, slash } from '@antfu/utils'
 import { Context } from './context'
-import { slash } from './utils'
 
 export function parseDeclaration(code: string): Record<string, string> {
   return Object.fromEntries(Array.from(code.matchAll(/\s+['"]?(.+?)['"]?:\s(.+?)\n/g)).map(i => [i[1], i[2]]))

src/declaration.ts

@@ -12,6 +12,15 @@ function VitePluginComponents(options: Options = {}): Plugin {
   return {
     name: 'vite-plugin-components',
     enforce: 'post',
+    config() {
+      return {
+        server: {
+          watch: {
+            disableGlobbing: false,
+          },
+        },
+      }
+    },
     configResolved(config) {
       if (config.plugins.find(i => i.name === 'vite-plugin-vue2'))
         options.transformer = options.transformer || 'vue2'

src/index.ts

@@ -120,7 +120,6 @@ const matchComponents: IMatcher[] = [
     pattern: /^Tab/,
     styleDir: 'tabs',
   },
-  
   {
     pattern: /^Mentions/,
     styleDir: 'mentions',

src/resolvers/antdv.ts

@@ -7,8 +7,6 @@ import { LibraryResolver } from './helpers/libraryResolver'
 import { defaultOptions } from './constants'
 import { Context } from './context'
 
-export { slash, toArray }
-
 export interface ResolveComponent {
   filename: string
   namespace?: string
@@ -104,7 +102,7 @@ export function resolveOptions(options: Options, viteConfig: ResolvedConfig): Re
   resolved.dirs = toArray(resolved.dirs)
   resolved.resolvedDirs = resolved.dirs.map(i => slash(resolve(viteConfig.root, i)))
 
-  resolved.globs = resolved.dirs.map(i =>
+  resolved.globs = resolved.resolvedDirs.map(i =>
     resolved.deep
       ? slash(join(i, `**/*.${extsGlob}`))
       : slash(join(i, `*.${extsGlob}`)),