feat: support directives

close #155

Author: sxzz

package.json

@@ -4,13 +4,17 @@
   "description": "Components auto importing for Vue",
   "homepage": "https://github.com/antfu/unplugin-vue-components",
   "bugs": "https://github.com/antfu/unplugin-vue-components/issues",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/antfu/unplugin-vue-components"
   },
   "funding": "https://github.com/sponsors/antfu",
-  "license": "MIT",
   "author": "antfu <[email protected]>",
+  "files": [
+    "dist",
+    "*.d.ts"
+  ],
   "exports": {
     ".": {
       "require": "./dist/index.js",
@@ -45,10 +49,6 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "index.d.ts",
-  "files": [
-    "dist",
-    "*.d.ts"
-  ],
   "scripts": {
     "build": "rimraf dist && tsup src/*.ts --format cjs,esm --dts --splitting && esno scripts/postbuild.ts",
     "dev": "tsup src/*.ts --format cjs,esm --watch src",
@@ -59,6 +59,9 @@
     "test": "jest",
     "test:update": "jest --u"
   },
+  "peerDependencies": {
+    "vue": "2 || 3"
+  },
   "dependencies": {
     "@antfu/utils": "^0.3.0",
     "@rollup/pluginutils": "^4.1.1",
@@ -73,6 +76,9 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
+    "@babel/parser": "^7.15.8",
+    "@babel/traverse": "^7.15.4",
+    "@babel/types": "^7.15.6",
     "@types/debug": "^4.1.7",
     "@types/jest": "^27.0.2",
     "@types/minimatch": "^3.0.5",
@@ -90,9 +96,6 @@
     "typescript": "^4.4.3",
     "vite": "^2.5.10"
   },
-  "peerDependencies": {
-    "vue": "2 || 3"
-  },
   "engines": {
     "node": ">=14"
   }

pnpm-lock.yaml

@@ -8,8 +8,7 @@ import { pascalCase, getNameFromFilePath, resolveAlias, matchGlobs, parseId } fr
 import { resolveOptions } from './options'
 import { searchComponents } from './fs/glob'
 import { generateDeclaration } from './declaration'
-import { Vue2Transformer } from './transforms/vue2'
-import { Vue3Transformer } from './transforms/vue3'
+import transformer from './transformer'
 
 const debug = {
   components: Debug('unplugin-vue-components:context:components'),
@@ -51,9 +50,7 @@ export class Context {
 
   setTransformer(name: Options['transformer']) {
     debug.env('transformer', name)
-    this.transformer = name === 'vue2'
-      ? Vue2Transformer(this)
-      : Vue3Transformer(this)
+    this.transformer = transformer(this, name || 'vue3')
   }
 
   transform(code: string, id: string) {
@@ -181,15 +178,15 @@ export class Context {
       })
   }
 
-  async findComponent(name: string, excludePaths: string[] = [], rawName?: string): Promise<ComponentInfo | undefined> {
+  async findComponent(name: string, type: 'component' | 'directive', excludePaths: string[] = []): Promise<ComponentInfo | undefined> {
     // resolve from fs
     let 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.options.resolvers) {
-      const result = await resolver(name)
+      const result = await resolver(name, type)
       if (result) {
         if (typeof result === 'string') {
           info = {

src/core/context.ts

@@ -0,0 +1,43 @@
+import Debug from 'debug'
+import MagicString from 'magic-string'
+import { TransformResult } from 'unplugin'
+import { CallExpression } from '@babel/types'
+import { parse } from '@babel/parser'
+import traverse from '@babel/traverse'
+import type { Transformer } from '../types'
+import { DISABLE_COMMENT } from './constants'
+import { Context } from './context'
+import transformComponent from './transforms/component'
+import transformDirectives from './transforms/directive'
+
+const debug = Debug('unplugin-vue-components:transform:vue2')
+
+export default (ctx: Context, version: 'vue2'|'vue3'): Transformer => {
+  return async(code, id, path) => {
+    ctx.searchGlob()
+
+    const sfcPath = ctx.normalizePath(path)
+    debug(sfcPath)
+
+    const s = new MagicString(code)
+    const ast = parse(code, {
+      sourceType: 'module',
+    })
+    const nodes: CallExpression[] = []
+    traverse(ast, {
+      CallExpression(path) {
+        nodes.push(path.node)
+      },
+    })
+
+    await transformComponent(nodes, version, s, ctx, sfcPath)
+    await transformDirectives(nodes, version, s, ctx, sfcPath, ast)
+
+    s.prepend(DISABLE_COMMENT)
+
+    const result: TransformResult = { code: s.toString() }
+    if (ctx.sourcemap)
+      result.map = s.generateMap({ source: id, includeContent: true })
+    return result
+  }
+}

src/core/transformer.ts

@@ -0,0 +1,36 @@
+import Debug from 'debug'
+import type { CallExpression } from '@babel/types'
+import type MagicString from 'magic-string'
+import { pascalCase, stringifyComponentImport } from '../utils'
+import type { Context } from '../context'
+
+const debug = Debug('unplugin-vue-components:transform:component')
+
+export default async(nodes: CallExpression[], version: 'vue2' | 'vue3', s: MagicString, ctx: Context, sfcPath: string) => {
+  let no = 0
+
+  for (const node of nodes) {
+    const { callee, arguments: args } = node
+    if (callee.type !== 'Identifier' || callee.name !== (version === 'vue2' ? '_c' : '_resolveComponent') || args[0].type !== 'StringLiteral')
+      continue
+    const componentName = args[0].value
+    if (!componentName || componentName.startsWith('_'))
+      continue
+
+    debug(`| ${componentName}`)
+    const name = pascalCase(componentName)
+    ctx.updateUsageMap(sfcPath, [name])
+
+    const component = await ctx.findComponent(name, 'component', [sfcPath])
+    if (component) {
+      const var_name = `__unplugin_components_${no}`
+      s.prepend(`${stringifyComponentImport({ ...component, name: var_name }, ctx)};\n`)
+      no += 1
+
+      const replacedNode = version === 'vue2' ? args[0] : node
+      s.overwrite(replacedNode.start!, replacedNode.end!, var_name)
+    }
+  }
+
+  debug(`^ (${no})`)
+}