feat: support library auto importing, close #14

Author: antfu

example/package.json

@@ -7,7 +7,8 @@
     "build": "cross-env DEBUG=vite-plugin-components:* vite build"
   },
   "dependencies": {
-    "vue": "^3.0.3"
+    "vue": "^3.0.3",
+    "vant": "^3.0.1"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.0.3",

example/src/App.vue

@@ -29,6 +29,28 @@
     <h1>Custom Resolvers (1)</h1>
     <MyCustom />
   </div>
+
+  <div class="block">
+    <h1>UI Library (2)</h1>
+    <van-rate
+      v-model="rate"
+      color="#ffd21e"
+      void-icon="star"
+      void-color="#eee"
+    />
+    <br>
+    <br>
+    <van-radio-group v-model="radio">
+      <van-radio name="1">
+        Radio 1
+      </van-radio>
+      <br>
+      <van-radio name="2">
+        Radio 2
+      </van-radio>
+    </van-radio-group>
+    <br>
+  </div>
 </template>
 
 <script setup lang='ts'>
@@ -41,6 +63,9 @@ const tree = ref({
     { label: 'First Level', children: [{ label: 'Second Level' }] },
   ],
 })
+
+const rate = ref(2.5)
+const radio = ref('1')
 </script>
 
 <style scoped>

example/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from '/src/App.vue'
 import './index.css'
+import 'vant/lib/index.css'
 
 createApp(App).mount('#app')

example/vite.config.ts

@@ -19,10 +19,17 @@ const config: UserConfig = {
       directoryAsNamespace: true,
       globalNamespaces: ['global'],
       customLoaderMatcher: ({ path }) => path.endsWith('.md'),
-      customComponentResolvers: (name) => {
-        if (name === 'MyCustom')
-          return '/src/CustomResolved.vue'
-      },
+      customComponentResolvers: [
+        (name) => {
+          if (name === 'MyCustom')
+            return '/src/CustomResolved.vue'
+        },
+        // auto import from ui library Vant
+        (name: string) => {
+          if (name.startsWith('Van'))
+            return { importName: name.slice(3), path: 'vant' }
+        },
+      ],
     }),
   ],
 }

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { relative } from 'path'
 import Debug from 'debug'
-import { ComponentsInfo, ComponentsImportMap, Options, ComponentResolver } from './types'
-import { normalize, toArray, getNameFromFilePath, resolveAlias } from './utils'
+import { ComponentInfo, ComponentsImportMap, ResolvedOptions } from './types'
+import { pascalCase, toArray, getNameFromFilePath, resolveAlias, kebabCase } from './utils'
 import { searchComponents } from './fs/glob'
 
 const debug = {
@@ -12,17 +12,15 @@ export class Context {
   readonly globs: string[]
 
   private _componentPaths = new Set<string>()
-  private _componentNameMap: Record<string, ComponentsInfo> = {}
+  private _componentNameMap: Record<string, ComponentInfo> = {}
   private _imports: ComponentsImportMap = {}
   private _importsResolveTasks: Record<string, [(null | Promise<string[]>), (null | ((result: string[]) => void))]> = {}
-  private _resolvers: ComponentResolver[]
 
   constructor(
-    public readonly options: Options,
+    public readonly options: ResolvedOptions,
   ) {
-    const { extensions, dirs, deep, customComponentResolvers } = options
+    const { extensions, dirs, deep } = options
     const exts = toArray(extensions)
-    this._resolvers = toArray(customComponentResolvers)
 
     if (!exts.length)
       throw new Error('[vite-plugin-components] extensions are required to search for components')
@@ -76,7 +74,7 @@ export class Context {
     Array
       .from(this._componentPaths)
       .forEach((path) => {
-        const name = normalize(getNameFromFilePath(path, this.options))
+        const name = pascalCase(getNameFromFilePath(path, this.options))
         if (this._componentNameMap[name]) {
           console.warn(`[vite-plugin-components] component "${name}"(${path}) has naming conflicts with other components, ignored.`)
           return
@@ -85,17 +83,27 @@ export class Context {
       })
   }
 
-  findComponent(name: string, excludePaths: string[] = []) {
+  findComponent(name: string, excludePaths: string[] = []): ComponentInfo | undefined {
     // resolve from fs
     const info = this._componentNameMap[name]
     if (info && !excludePaths.includes(info.path) && !excludePaths.includes(info.path.slice(1)))
       return info
 
     // custom resolvers
-    for (const resolver of this._resolvers) {
-      const path = resolver(name)
-      if (path)
-        return { name, path }
+    for (const resolver of this.options.customComponentResolvers) {
+      const result = resolver(name)
+      if (result) {
+        if (typeof result === 'string') {
+          return { name, path: result }
+        }
+        else {
+          return {
+            name,
+            path: result.path,
+            importName: result.importName,
+          }
+        }
+      }
     }
 
     return undefined
@@ -104,7 +112,7 @@ export class Context {
   findComponents(names: string[], excludePaths: string[] = []) {
     return names
       .map(name => this.findComponent(name, excludePaths))
-      .filter(Boolean) as ComponentsInfo[]
+      .filter(Boolean) as ComponentInfo[]
   }
 
   normalizePath(path: string) {
@@ -122,7 +130,7 @@ export class Context {
   }
 
   setImports(key: string, names: string[]) {
-    const casedNames = names.map(name => normalize(name))
+    const casedNames = names.map(name => pascalCase(name))
     this._imports[key] = casedNames
     if (this._importsResolveTasks[key])
       this._importsResolveTasks[key][1]?.(casedNames)

src/context.ts

@@ -1,8 +1,9 @@
 import Debug from 'debug'
 import { Context } from '../context'
 import { RESOLVER_EXT } from '../constants'
+import { stringifyComponentImport } from '../utils'
 
-const debug = Debug('vite-plugin-components:resolver')
+const debug = Debug('vite-plugin-components:importer')
 
 function timeoutError(reqPath: string, timeout = 10000) {
   return new Promise<any>((resolve, reject) => {
@@ -33,7 +34,7 @@ export async function generateResolver(ctx: Context, reqPath: string) {
   debug('using', names, 'imported', components.map(i => i.name))
 
   return `
-    ${components.map(({ name, path }) => `import ${name} from "${path}"`).join('\n')}
+    ${components.map(stringifyComponentImport).join('\n')}
 
     export default (components) => { 
       return Object.assign({}, { ${components.map(i => i.name).join(', ')} }, components) 

src/generator/resolver.ts src/generator/importer.tssrc/generator/resolver.ts renamed to src/generator/importer.ts

@@ -0,0 +1,59 @@
+import fs from 'fs'
+import { dirname, join } from 'path'
+import Debug from 'debug'
+import { ComponentResolver, UILibraryOptions } from '../types'
+import { camelCase, kebabCase } from '../utils'
+
+const debug = Debug('vite-plugin-components:helper:library')
+
+export function tryLoadVeturTags(name: string): string[] | undefined {
+  try {
+    const pkgPath = require.resolve(`${name}/package.json`)
+    if (!pkgPath)
+      return
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+    const tagsPath = pkg?.vetur?.tags
+    if (!tagsPath)
+      return
+
+    const tags = JSON.parse(fs.readFileSync(join(dirname(pkgPath), tagsPath), 'utf-8'))
+    return Object.keys(tags).map(i => camelCase(i))
+  }
+  catch (e) {
+    console.error(e)
+  }
+}
+
+export function LibraryResolver(options: UILibraryOptions): ComponentResolver {
+  const {
+    name: libraryName,
+    entries = tryLoadVeturTags(options.name),
+    prefix = '',
+  } = options
+
+  if (!entries) {
+    console.warn(`[vite-plugin-components] Failed to load Vetur tags from library "${libraryName}"`)
+    return () => {}
+  }
+
+  debug(entries)
+
+  const prefixKebab = kebabCase(prefix)
+  const kebabEntries = entries.map(name => ({ name, kebab: kebabCase(name) }))
+
+  return (name) => {
+    const kebab = kebabCase(name)
+    let componentName = kebab
+
+    if (prefixKebab) {
+      if (!kebab.startsWith(`${prefixKebab}-`))
+        return
+      componentName = kebab.slice(prefixKebab.length + 1)
+    }
+
+    for (const entry of kebabEntries) {
+      if (entry.kebab === componentName)
+        return { path: libraryName, importName: entry.name }
+    }
+  }
+}

src/helpers/libraryResolver.ts

@@ -7,8 +7,9 @@ import { VueTemplateTransformer } from './transforms/vueTemplate'
 import { Context } from './context'
 import { VueScriptSetupTransformer } from './transforms/vueScriptSetup'
 import { CustomComponentTransformer } from './transforms/customComponent'
+import { resolveOptions } from './utils'
 
-const defaultOptions: Options = {
+const defaultOptions: Required<Options> = {
   dirs: 'src/components',
   extensions: 'vue',
   deep: true,
@@ -19,13 +20,14 @@ const defaultOptions: Options = {
   alias: {},
   root: process.cwd(),
 
+  libraries: [],
+
   customLoaderMatcher: () => false,
   customComponentResolvers: [],
 }
 
-function VitePluginComponents(options: Partial<Options> = {}): Plugin {
-  const resolvedOptions: Options = Object.assign({}, defaultOptions, options)
-  const ctx: Context = new Context(resolvedOptions)
+function VitePluginComponents(options: Options = {}): Plugin {
+  const ctx: Context = new Context(resolveOptions(options, defaultOptions))
 
   return {
     configureServer: createServerPlugin(ctx),
@@ -43,5 +45,7 @@ function VitePluginComponents(options: Partial<Options> = {}): Plugin {
   }
 }
 
-export type { Options }
+export * from './helpers/libraryResolver'
+export * from './types'
+export { camelCase, pascalCase, kebabCase } from './utils'
 export default VitePluginComponents

src/index.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from 'rollup'
-import { isResolverPath, generateResolver } from '../generator/resolver'
+import { isResolverPath, generateResolver } from '../generator/importer'
 import { Context } from '../context'
 
 export function createRollupPlugin(ctx: Context): Plugin {