feat: generate declarations for resolvers

Author: antfu

examples/naive-ui/components.d.ts

@@ -3,7 +3,10 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    
+    NInput: typeof import('naive-ui')['NInput']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
   }
 }
 

examples/naive-ui/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}

package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.6.6",
-    "@antfu/utils": "^0.2.0",
+    "@antfu/utils": "^0.2.1",
     "@types/debug": "^4.1.5",
     "@types/jest": "^26.0.23",
     "@types/minimatch": "^3.0.4",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { relative } from 'path'
 import Debug from 'debug'
 import chokidar from 'chokidar'
 import { ResolvedConfig, UpdatePayload, ViteDevServer } from 'vite'
+import { throttle } from '@antfu/utils'
 import { Options, ComponentInfo, ResolvedOptions } from './types'
 import { pascalCase, toArray, getNameFromFilePath, resolveAlias, resolveOptions, matchGlobs, slash } from './utils'
 import { searchComponents } from './fs/glob'
@@ -11,6 +12,7 @@ const debug = {
   components: Debug('vite-plugin-components:context:components'),
   search: Debug('vite-plugin-components:context:search'),
   hmr: Debug('vite-plugin-components:context:hmr'),
+  decleration: Debug('vite-plugin-components:decleration'),
 }
 
 export class Context {
@@ -19,6 +21,7 @@ export class Context {
   private _componentPaths = new Set<string>()
   private _componentNameMap: Record<string, ComponentInfo> = {}
   private _componentUsageMap: Record<string, Set<string>> = {}
+  private _componentCustomMap: Record<string, ComponentInfo> = {}
   private _server: ViteDevServer | undefined
 
   constructor(
@@ -44,6 +47,8 @@ export class Context {
           }
         })
     }
+
+    this.generateDeclaration = throttle(500, false, this.generateDeclaration.bind(this))
   }
 
   get root() {
@@ -80,6 +85,11 @@ export class Context {
     return false
   }
 
+  addCustomComponents(info: ComponentInfo) {
+    if (info.name)
+      this._componentCustomMap[info.name] = info
+  }
+
   removeComponents(paths: string | string[]) {
     debug.components('remove', paths)
 
@@ -144,7 +154,7 @@ export class Context {
 
   findComponent(name: string, excludePaths: string[] = []): ComponentInfo | undefined {
     // resolve from fs
-    const info = this._componentNameMap[name]
+    let info = this._componentNameMap[name]
     if (info && !excludePaths.includes(info.path) && !excludePaths.includes(info.path.slice(1)))
       return info
 
@@ -153,16 +163,20 @@ export class Context {
       const result = resolver(name)
       if (result) {
         if (typeof result === 'string') {
-          return {
+          info = {
             name,
             path: result,
           }
+          this.addCustomComponents(info)
+          return info
         }
         else {
-          return {
+          info = {
             name,
             ...result,
           }
+          this.addCustomComponents(info)
+          return info
         }
       }
     }
@@ -207,11 +221,18 @@ export class Context {
   }
 
   generateDeclaration() {
-    if (this.options.globalComponentsDeclaration)
-      generateDeclaration(this, this.options.root, this.options.globalComponentsDeclaration)
+    if (!this.options.globalComponentsDeclaration)
+      return
+
+    debug.decleration('generating')
+    generateDeclaration(this, this.options.root, this.options.globalComponentsDeclaration)
   }
 
   get componentNameMap() {
     return this._componentNameMap
   }
+
+  get componentCustomMap() {
+    return this._componentCustomMap
+  }
 }

src/context.ts

@@ -4,7 +4,10 @@ import { Context } from './context'
 import { slash } from './utils'
 
 export async function generateDeclaration(ctx: Context, root: string, filepath: string) {
-  const lines = Object.values(ctx.componentNameMap)
+  const lines = Object.values({
+    ...ctx.componentNameMap,
+    ...ctx.componentCustomMap,
+  })
     .map(({ path, name, importName }) => {
       const related = slash(path).startsWith('/')
         ? `./${relative(dirname(filepath), resolve(root, path.slice(1)))}`
@@ -17,6 +20,9 @@ export async function generateDeclaration(ctx: Context, root: string, filepath:
       return entry
     })
 
+  if (!lines.length)
+    return
+
   const code = `// generated by vite-plugin-components
 // read more https://github.com/vuejs/vue-next/pull/3399
 

src/declaration.ts

@@ -29,9 +29,11 @@ function VitePluginComponents(options: Options = {}): Plugin {
     configureServer(server) {
       ctx.setServer(server)
     },
-    transform(code, id) {
+    async transform(code, id) {
       const { path, query } = parseId(id)
-      return transformer(code, id, path, query)
+      const result = await transformer(code, id, path, query)
+      ctx.generateDeclaration()
+      return result
     },
   }
 }

src/index.ts

@@ -1,20 +1,19 @@
 import { join, parse, resolve } from 'path'
 import minimatch from 'minimatch'
 import { ResolvedConfig } from 'vite'
+import { slash, toArray } from '@antfu/utils'
 import { ComponentInfo, ResolvedOptions, Options, ImportInfo } from './types'
 import { LibraryResolver } from './helpers/libraryResolver'
 import { defaultOptions } from './constants'
 import { Context } from './context'
 
+export { slash, toArray }
+
 export interface ResolveComponent {
   filename: string
   namespace?: string
 }
 
-export function slash(str: string) {
-  return str.replace(/\\/g, '/')
-}
-
 export function pascalCase(str: string) {
   return capitalize(camelCase(str))
 }
@@ -32,12 +31,6 @@ export function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-export function toArray<T>(arr: T | T[]): T[] {
-  if (Array.isArray(arr))
-    return arr
-  return [arr]
-}
-
 export function parseId(id: string) {
   const index = id.indexOf('?')
   if (index < 0) {