From 92de065b666dbf57e0324d6ddb9b383cce1c1163 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Thu, 14 Nov 2024 06:10:05 +0100
Subject: [PATCH] feat(vue): add auto-import directives (#534)

---
 README.md                                 |  4 ++
 package.json                              |  2 +-
 playground/HelloWorld.vue                 |  2 +-
 playground/directives/custom-directive.ts | 20 ++++++++++
 playground/vite.config.ts                 |  6 +++
 pnpm-lock.yaml                            | 47 +++++++++++++++--------
 src/core/ctx.ts                           | 25 ++++++------
 src/core/resolvers.ts                     |  1 +
 src/types.ts                              | 14 ++++++-
 test/__snapshots__/dts.test.ts.snap       |  2 +-
 10 files changed, 93 insertions(+), 30 deletions(-)
 create mode 100644 playground/directives/custom-directive.ts

diff --git a/README.md b/README.md
index 85e1de52..33c5c53e 100644
--- a/README.md
+++ b/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: [
diff --git a/package.json b/package.json
index 851cc7a1..341c56ea 100644
--- a/package.json
+++ b/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": {
diff --git a/playground/HelloWorld.vue b/playground/HelloWorld.vue
index 92762e0c..749a9cb6 100644
--- a/playground/HelloWorld.vue
+++ b/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>
diff --git a/playground/directives/custom-directive.ts b/playground/directives/custom-directive.ts
new file mode 100644
index 00000000..50b816e2
--- /dev/null
+++ b/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,
+}
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 342993fb..4c6c3c65 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -15,8 +15,14 @@ export default defineConfig({
       ],
       dirs: [
         './composables/**',
+        './directives/**',
       ],
       vueTemplate: true,
+      vueDirectives: {
+        isDirective(normalizeImportFrom, _importEntry) {
+          return normalizeImportFrom.includes('/directives/')
+        },
+      },
     }),
   ],
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 61cdb959..7ed6b48a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ importers:
         specifier: ^9.0.5
         version: 9.0.5
       unimport:
-        specifier: ^3.12.0
-        version: 3.12.0(rollup@4.21.3)(webpack-sources@3.2.3)
+        specifier: ^3.13.1
+        version: 3.13.1(rollup@4.21.3)(webpack-sources@3.2.3)
       unplugin:
         specifier: ^1.14.1
         version: 1.14.1(webpack-sources@3.2.3)
@@ -1030,7 +1030,7 @@ packages:
     resolution: {integrity: sha512-cX1tyD+aIbhzKrCKe/9M5s2jZhldWGOR+cy7cIVpxG9RkoaN4XU+gG3dy6oEKtBFXjDx06GtP0OGO7jgbqa2DA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^9.10.0
+      eslint: '>=9'
 
   '@eslint/object-schema@2.1.4':
     resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
@@ -1256,6 +1256,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/pluginutils@5.1.2':
+    resolution: {integrity: sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.21.3':
     resolution: {integrity: sha512-MmKSfaB9GX+zXl6E8z4koOr/xU63AMVleLEa64v7R0QF/ZloMs5vcD1sHgM64GXXS1csaJutG+ddtzcueI/BLg==}
     cpu: [arm]
@@ -1364,7 +1373,7 @@ packages:
     resolution: {integrity: sha512-Ufvk7hP+bf+pD35R/QfunF793XlSRIC7USr3/EdgduK9j13i2JjmsM0LUz3/foS+jDYp2fzyWZA9N44CPur0Ow==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^9.10.0
+      eslint: '>=8.40.0'
 
   '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
     resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
@@ -1539,7 +1548,7 @@ packages:
     resolution: {integrity: sha512-gF77eNv0Xz2UJg/NbpWJ0kqAm35UMsvZf1GHj8D9MRFTj/V3tAciIWXfmPLsAAF/vUlpWPvUDyH1jjsr0cMVWw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^9.10.0
+      eslint: ^8.57.0 || ^9.0.0
       typescript: '*'
     peerDependenciesMeta:
       typescript:
@@ -1575,7 +1584,7 @@ packages:
     resolution: {integrity: sha512-6yyGYVL0e+VzGYp60wvkBHiqDWOpT63pdMV2CVG4LVDd5uR6q1qQN/7LafBZtAtNIn/mqXjsSeS5ggv/P0iECw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^9.10.0
+      eslint: ^8.57.0 || ^9.0.0
 
   '@typescript-eslint/visitor-keys@8.5.0':
     resolution: {integrity: sha512-yTPqMnbAZJNy2Xq2XU8AdtOW9tJIr+UQb64aXB9f3B1498Zx9JorVgFJcZpEc9UBuCCrdzKID2RGAMkYcDtZOw==}
@@ -1606,8 +1615,8 @@ packages:
     resolution: {integrity: sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^5.4.3
-      vue: ^3.5.3
+      vite: ^5.0.0
+      vue: ^3.2.25
 
   '@vitest/eslint-plugin@1.1.0':
     resolution: {integrity: sha512-Ur80Y27Wbw8gFHJ3cv6vypcjXmrx6QHfw+q435h6Q2L+tf+h4Xf5pJTCL4YU/Jps9EVeggQxS85OcUZU7sdXRw==}
@@ -2360,7 +2369,7 @@ packages:
   eslint-plugin-antfu@2.6.0:
     resolution: {integrity: sha512-4dz0VgWGpZ6jUSEUPSI6OGFqBc+P8c7zFFXht5t+YwzIvBsruqVX7Hjl3I8KNNEyJmA4fL3+GIc+EWU1woTp1A==}
     peerDependencies:
-      eslint: ^9.10.0
+      eslint: '*'
 
   eslint-plugin-command@0.2.4:
     resolution: {integrity: sha512-IbZnQY21pOanbcCh/bAWWl+1BynV2HuDE75URMmk/28Tdn+PM7CoKeibXtPGrL7KQdIEHMgUEnRwwI8qmggVMA==}
@@ -4316,8 +4325,8 @@ packages:
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
-  unimport@3.12.0:
-    resolution: {integrity: sha512-5y8dSvNvyevsnw4TBQkIQR1Rjdbb+XjVSwQwxltpnVZrStBvvPkMPcZrh1kg5kY77kpx6+D4Ztd3W6FOBH/y2Q==}
+  unimport@3.13.1:
+    resolution: {integrity: sha512-nNrVzcs93yrZQOW77qnyOVHtb68LegvhYFwxFMfuuWScmwQmyVCG/NBuN8tYsaGzgQUVYv34E/af+Cc9u4og4A==}
 
   unist-util-find-after@5.0.0:
     resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
@@ -5550,7 +5559,7 @@ snapshots:
       semver: 7.6.3
       ufo: 1.5.4
       unctx: 2.3.1(webpack-sources@3.2.3)
-      unimport: 3.12.0(rollup@4.21.3)(webpack-sources@3.2.3)
+      unimport: 3.13.1(rollup@4.21.3)(webpack-sources@3.2.3)
       untyped: 1.4.2
     transitivePeerDependencies:
       - magicast
@@ -5570,7 +5579,7 @@ snapshots:
       std-env: 3.7.0
       ufo: 1.5.4
       uncrypto: 0.1.3
-      unimport: 3.12.0(rollup@4.21.3)(webpack-sources@3.2.3)
+      unimport: 3.13.1(rollup@4.21.3)(webpack-sources@3.2.3)
       untyped: 1.4.2
     transitivePeerDependencies:
       - rollup
@@ -5601,6 +5610,14 @@ snapshots:
     optionalDependencies:
       rollup: 4.21.3
 
+  '@rollup/pluginutils@5.1.2(rollup@4.21.3)':
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.21.3
+
   '@rollup/rollup-android-arm-eabi@4.21.3':
     optional: true
 
@@ -9240,9 +9257,9 @@ snapshots:
       trough: 2.1.0
       vfile: 6.0.3
 
-  unimport@3.12.0(rollup@4.21.3)(webpack-sources@3.2.3):
+  unimport@3.13.1(rollup@4.21.3)(webpack-sources@3.2.3):
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.21.3)
+      '@rollup/pluginutils': 5.1.2(rollup@4.21.3)
       acorn: 8.12.1
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
diff --git a/src/core/ctx.ts b/src/core/ctx.ts
index 6a64ce9c..81ff810d 100644
--- a/src/core/ctx.ts
+++ b/src/core/ctx.ts
@@ -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,12 +62,13 @@ 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
@@ -76,9 +76,12 @@ export function createContext(options: Options = {}, root = process.cwd()) {
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 ${dts}`.trim()}\n`
+          },
         },
-      },
-    ],
+      ],
+      vueDirectives,
+      vueTemplate,
+    },
   })
 
   const importsPromise = flattenImports(options.imports)
diff --git a/src/core/resolvers.ts b/src/core/resolvers.ts
index 92f1222d..b54543cb 100644
--- a/src/core/resolvers.ts
+++ b/src/core/resolvers.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
diff --git a/src/types.ts b/src/types.ts
index 9858683f..42c029bc 100644
--- a/src/types.ts
+++ b/src/types.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
    *
diff --git a/test/__snapshots__/dts.test.ts.snap b/test/__snapshots__/dts.test.ts.snap
index ae3ee93e..380a7961 100644
--- a/test/__snapshots__/dts.test.ts.snap
+++ b/test/__snapshots__/dts.test.ts.snap
@@ -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')
 }
 "