feat: support directives (#179)

Author: sxzz

README.md

@@ -7,6 +7,7 @@ On-demand components auto importing for Vue.
 ###### Features
 
 - 💚 Supports both Vue 2 and Vue 3 out-of-the-box.
+- ✨ Supports both components and directives.
 - ⚡️ Supports Vite, Webpack, Vue CLI, Rollup and more, powered by <a href="https://github.com/unjs/unplugin">unplugin</a>.
 - 🏝 Tree-shakable, only registers the components you use.
 - 🪐 Folder names as namespaces.
@@ -284,6 +285,11 @@ Components({
   // works when `directoryAsNamespace: true`
   globalNamespaces: [],
 
+  // auto import for directives
+  // default: `true` for Vue 3, `false` for Vue 2
+  // Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
+  directives: true,
+
   // filters for transforming targets
   include: [/\.vue$/, /\.vue\?vue/],
   exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],

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,20 +49,19 @@
   "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",
-    "example:build": "npm -C examples/vue3 run build",
-    "example:dev": "npm -C examples/vue3 run dev",
+    "build": "tsup src/*.ts && esno scripts/postbuild.ts",
+    "dev": "tsup src/*.ts --watch src",
+    "example:build": "npm -C examples/vite-vue3 run build",
+    "example:dev": "npm -C examples/vite-vue3 run dev",
     "prepublishOnly": "npm run build",
     "release": "npx bumpp --commit --tag --push",
     "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

@@ -4,7 +4,7 @@ import { isPackageExists } from 'local-pkg'
 import { ResolvedOptions, Options } from '../types'
 import { LibraryResolver } from './helpers/libraryResolver'
 
-export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'transformer' | 'globs'> = {
+export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'transformer' | 'globs' |'directives'> = {
   dirs: 'src/components',
   extensions: 'vue',
   deep: true,
@@ -58,6 +58,9 @@ export function resolveOptions(options: Options, root: string): ResolvedOptions
     )
   resolved.root = root
   resolved.transformer = options.transformer || getVueVersion() || 'vue3'
+  resolved.directives = (typeof options.directives === 'boolean')
+    ? options.directives
+    : getVueVersion() === 'vue3'
 
   return resolved
 }

src/core/options.ts

@@ -0,0 +1,38 @@
+import Debug from 'debug'
+import MagicString from 'magic-string'
+import { TransformResult } from 'unplugin'
+import { SupportedTransformer } from '..'
+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:transformer')
+
+export interface ResolveResult {
+  rawName: string
+  replace: (resolved: string) => void
+}
+
+export default (ctx: Context, transformer: SupportedTransformer): Transformer => {
+  return async(code, id, path) => {
+    ctx.searchGlob()
+
+    const sfcPath = ctx.normalizePath(path)
+    debug(sfcPath)
+
+    const s = new MagicString(code)
+
+    await transformComponent(code, transformer, s, ctx, sfcPath)
+    if (ctx.options.directives)
+      await transformDirectives(code, transformer, s, ctx, sfcPath)
+
+    s.prepend(DISABLE_COMMENT)
+
+    const result: TransformResult = { code: s.toString() }
+    if (ctx.sourcemap)
+      result.map = s.generateMap({ source: id, includeContent: true })
+    return result
+  }
+}