feat: generate declaration hmr support (#61)

Co-authored-by: Anthony Fu <[email protected]>

Author: hannoeru

src/context.ts

@@ -5,6 +5,7 @@ import { ResolvedConfig, UpdatePayload, ViteDevServer } from 'vite'
 import { Options, ComponentInfo, ResolvedOptions } from './types'
 import { pascalCase, toArray, getNameFromFilePath, resolveAlias, resolveOptions, matchGlobs, slash } from './utils'
 import { searchComponents } from './fs/glob'
+import { generateDeclaration } from './declaration'
 
 const debug = {
   components: Debug('vite-plugin-components:context:components'),
@@ -117,6 +118,9 @@ export class Context {
 
     if (payload.updates.length)
       this._server.ws.send(payload)
+
+    if (this.options.globalComponentsDeclaration)
+      generateDeclaration(this, this.options.root, this.options.globalComponentsDeclaration)
   }
 
   private updateComponentNameMap() {
@@ -127,6 +131,7 @@ export class Context {
       .forEach((path) => {
         const name = pascalCase(getNameFromFilePath(path, this.options))
         if (this._componentNameMap[name]) {
+          // eslint-disable-next-line no-console
           console.warn(`[vite-plugin-components] component "${name}"(${path}) has naming conflicts with other components, ignored.`)
           return
         }

src/declaration.ts

@@ -1,5 +1,5 @@
 import { resolve, dirname, relative } from 'path'
-import fs from 'fs/promises'
+import { promises as fs } from 'fs'
 import { Context } from './context'
 import { slash } from './utils'
 

src/index.ts

@@ -1,12 +1,9 @@
-import { resolve } from 'path'
-import fs from 'fs/promises'
 import type { Plugin } from 'vite'
 import { Options, Transformer } from './types'
 import { Context } from './context'
 import { parseId } from './utils'
 import { Vue3Transformer } from './transforms/vue3'
 import { Vue2Transformer } from './transforms/vue2'
-import { generateDeclaration } from './declaration'
 
 function VitePluginComponents(options: Options = {}): Plugin {
   let ctx: Context
@@ -26,8 +23,7 @@ function VitePluginComponents(options: Options = {}): Plugin {
 
       if (options.globalComponentsDeclaration) {
         ctx.searchGlob()
-        const path = resolve(config.root, typeof options.globalComponentsDeclaration === 'string' ? options.globalComponentsDeclaration : 'components.d.ts')
-        generateDeclaration(ctx, config.root, path)
+        ctx.generateDeclaration()
       }
     },
     configureServer(server) {

src/types.ts

@@ -112,6 +112,8 @@ Required<Options>,
   dirs: string[]
   resolvedDirs: string[]
   globs: string[]
+  globalComponentsDeclaration: string | false
+  root: string
 }
 
 export type ComponentsImportMap = Record<string, string[] | undefined>

src/utils.ts

@@ -120,6 +120,16 @@ export function resolveOptions(options: Options, viteConfig: ResolvedConfig): Re
   if (!resolved.extensions.length)
     throw new Error('[vite-plugin-components] extensions are required to search for components')
 
+  resolved.globalComponentsDeclaration = !options.globalComponentsDeclaration
+    ? false
+    : resolve(
+      viteConfig.root,
+      typeof options.globalComponentsDeclaration === 'string'
+        ? options.globalComponentsDeclaration
+        : 'components.d.ts',
+    )
+  resolved.root = viteConfig.root
+
   return resolved
 }