feat(vue): add auto-import directives (#534)

Author: userquin

README.md

@@ -299,6 +299,10 @@ AutoImport({
   // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
   vueTemplate: false,
 
+  // Auto import directives inside Vue template
+  // see https://github.com/unjs/unimport/pull/374
+  vueDirectives: undefined,
+
   // Custom resolvers, compatible with `unplugin-vue-components`
   // see https://github.com/antfu/unplugin-auto-import/pull/23/
   resolvers: [

package.json

@@ -169,7 +169,7 @@
     "local-pkg": "^0.5.0",
     "magic-string": "^0.30.11",
     "minimatch": "^9.0.5",
-    "unimport": "^3.12.0",
+    "unimport": "^3.13.1",
     "unplugin": "^1.14.1"
   },
   "devDependencies": {

playground/HelloWorld.vue

@@ -23,6 +23,6 @@ watch(count, value => emit('update', value))
       Inc
     </button>
     <div>{{ doubled / 2 }} x 2 = {{ doubled }}</div>
-    <button @click="dec()" v-html="decText" />
+    <button v-custom-directive @click="dec()" v-html="decText" />
   </div>
 </template>

playground/directives/custom-directive.ts

@@ -0,0 +1,20 @@
+function mounted(el: HTMLElement, binding: DirectiveBinding) {
+  // eslint-disable-next-line no-console
+  console.log('mounted', el, binding)
+}
+
+function unmounted(el: HTMLElement, binding: DirectiveBinding) {
+  // eslint-disable-next-line no-console
+  console.log('unmounted', el, binding)
+}
+
+function updated(el: HTMLElement, binding: DirectiveBinding) {
+  // eslint-disable-next-line no-console
+  console.log('updated', el, binding)
+}
+
+export const CustomDirective = {
+  mounted,
+  unmounted,
+  updated,
+}

playground/vite.config.ts

@@ -15,8 +15,14 @@ export default defineConfig({
       ],
       dirs: [
         './composables/**',
+        './directives/**',
       ],
       vueTemplate: true,
+      vueDirectives: {
+        isDirective(normalizeImportFrom, _importEntry) {
+          return normalizeImportFrom.includes('/directives/')
+        },
+      },
     }),
   ],
 })

pnpm-lock.yaml

@@ -7,11 +7,8 @@ import { slash, throttle, toArray } from '@antfu/utils'
 import { createFilter } from '@rollup/pluginutils'
 import fg from 'fast-glob'
 import { isPackageExists } from 'local-pkg'
-
 import MagicString from 'magic-string'
 import { createUnimport, resolvePreset, scanExports } from 'unimport'
-// @ts-expect-error types
-import { vueTemplateAddon } from 'unimport/addons'
 import { presets } from '../presets'
 import { generateBiomeLintConfigs } from './biomelintrc'
 import { generateESLintConfigs } from './eslintrc'
@@ -39,6 +36,8 @@ export function createContext(options: Options = {}, root = process.cwd()) {
 
   const {
     dts: preferDTS = isPackageExists('typescript'),
+    vueDirectives,
+    vueTemplate,
   } = options
 
   const dirs = options.dirs?.concat(options.dirs.map(dir => join(dir, '*.{tsx,jsx,ts,js,mjs,cjs,mts,cts}')))
@@ -63,22 +62,26 @@ export function createContext(options: Options = {}, root = process.cwd()) {
     presets: options.packagePresets?.map(p => typeof p === 'string' ? { package: p } : p) ?? [],
     injectAtEnd,
     parser: options.parser,
-    addons: [
-      ...(options.vueTemplate ? [vueTemplateAddon()] : []),
-      resolversAddon(resolvers),
-      {
-        declaration(dts) {
-          return `${`
+    addons: {
+      addons: [
+        resolversAddon(resolvers),
+        {
+          name: 'unplugin-auto-import:dts',
+          declaration(dts) {
+            return `${`
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 ${dts}`.trim()}\n`
+          },
         },
-      },
-    ],
+      ],
+      vueDirectives,
+      vueTemplate,
+    },
   })
 
   const importsPromise = flattenImports(options.imports)

src/core/ctx.ts

@@ -42,6 +42,7 @@ export async function firstMatchedResolver(resolvers: Resolver[], fullname: stri
 
 export function resolversAddon(resolvers: Resolver[]): Addon {
   return {
+    name: 'unplugin-auto-import:resolvers',
     async matchImports(names, matched) {
       if (!resolvers.length)
         return

src/core/resolvers.ts

@@ -1,6 +1,6 @@
 import type { Arrayable, Awaitable } from '@antfu/utils'
 import type { FilterPattern } from '@rollup/pluginutils'
-import type { Import, InlinePreset, PackagePreset, UnimportOptions } from 'unimport'
+import type { AddonVueDirectivesOptions, Import, InlinePreset, PackagePreset, UnimportOptions } from 'unimport'
 import { PresetName } from './presets'
 
 export interface ImportLegacy {
@@ -156,6 +156,18 @@ export interface Options {
    */
   vueTemplate?: boolean
 
+  /**
+   * Enable auto import directives for Vue's SFC.
+   *
+   * Library authors should include `meta.vueDirective: true` in the import metadata.
+   *
+   * When using a local directives folder, provide the `isDirective`
+   * callback to check if the import is a Vue directive.
+   *
+   * @see https://github.com/unjs/unimport?tab=readme-ov-file#vue-directives-auto-import-and-typescript-declaration-generation
+   */
+  vueDirectives?: true | AddonVueDirectivesOptions
+
   /**
    * Set default export alias by file name
    *

src/types.ts

@@ -150,7 +150,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue-demi'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue-demi'
   import('vue-demi')
 }
 "