From 8de33e4506a5b04f5f5941dc9ee5a7621348cd60 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 11 Jun 2021 19:15:53 +0800
Subject: [PATCH] fix: work with vite-plugin-icons

---
 examples/vue3/components.d.ts |  9 +++++++++
 examples/vue3/package.json    |  2 ++
 examples/vue3/src/App.vue     |  9 +++++++++
 examples/vue3/tsconfig.json   |  3 +++
 examples/vue3/vite.config.ts  |  5 +++++
 pnpm-lock.yaml                | 30 ++++++++++++++++++++++++++++++
 src/context.ts                |  2 +-
 src/declaration.ts            |  9 +++++++++
 src/transforms/vue2.ts        | 10 +++++-----
 src/transforms/vue3.ts        |  2 +-
 10 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 examples/vue3/tsconfig.json

diff --git a/examples/vue3/components.d.ts b/examples/vue3/components.d.ts
index e5992f78..699a619b 100644
--- a/examples/vue3/components.d.ts
+++ b/examples/vue3/components.d.ts
@@ -15,6 +15,15 @@ declare module 'vue' {
     Avatar: typeof import('./src/components/global/avatar.vue')['default']
     UiButton: typeof import('./src/components/ui/button.vue')['default']
     UiNestedCheckbox: typeof import('./src/components/ui/nested/checkbox.vue')['default']
+    MyCustom: typeof import('./src/CustomResolved.vue')['default']
+    VanRate: typeof import('vant/es')['Rate']
+    VanRadio: typeof import('vant/es')['Radio']
+    VanRadioGroup: typeof import('vant/es')['RadioGroup']
+    IFaSolidDiceFive: typeof import('virtual:vite-icons/fa-solid/dice-five')['default']
+    IHeroiconsOutlineMenuAlt2: typeof import('virtual:vite-icons/heroicons-outline/menu-alt2')['default']
+    IRiApps2Line: typeof import('virtual:vite-icons/ri/apps2-line')['default']
+    'IMdi:diceD12': typeof import('virtual:vite-icons/mdi/dice-d12')['default']
+    IMdiLightAlarm: typeof import('virtual:vite-icons/mdi-light/alarm')['default']
   }
 }
 
diff --git a/examples/vue3/package.json b/examples/vue3/package.json
index 6c27c0bd..10454a2b 100644
--- a/examples/vue3/package.json
+++ b/examples/vue3/package.json
@@ -11,12 +11,14 @@
     "vue": "^3.0.11"
   },
   "devDependencies": {
+    "@iconify/json": "^1.1.355",
     "@vitejs/plugin-vue": "^1.2.1",
     "@vue/compiler-sfc": "^3.0.11",
     "cross-env": "^7.0.3",
     "typescript": "^4.2.4",
     "vite": "^2.1.5",
     "vite-plugin-components": "workspace:*",
+    "vite-plugin-icons": "^0.6.2",
     "vite-plugin-md": "^0.6.3",
     "vite-plugin-vue-svg": "^0.1.0"
   }
diff --git a/examples/vue3/src/App.vue b/examples/vue3/src/App.vue
index 42408844..3e9acda6 100644
--- a/examples/vue3/src/App.vue
+++ b/examples/vue3/src/App.vue
@@ -67,6 +67,15 @@ const radio = ref('1')
     </van-radio-group>
     <br>
   </div>
+
+  <div class="block">
+    <h1>Icons (5)</h1>
+    <i-fa-solid-dice-five />
+    <i-heroicons-outline-menu-alt-2 />
+    <i-ri-apps-2-line />
+    <i-mdi:dice-d12 />
+    <i-mdi-light-alarm />
+  </div>
 </template>
 
 <style scoped>
diff --git a/examples/vue3/tsconfig.json b/examples/vue3/tsconfig.json
new file mode 100644
index 00000000..41716a7d
--- /dev/null
+++ b/examples/vue3/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig"
+}
diff --git a/examples/vue3/vite.config.ts b/examples/vue3/vite.config.ts
index a30316c5..38fa6208 100644
--- a/examples/vue3/vite.config.ts
+++ b/examples/vue3/vite.config.ts
@@ -3,6 +3,7 @@ import { UserConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import ViteComponents, { VantResolver } from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
+import Icons, { ViteIconsResolver } from 'vite-plugin-icons'
 // @ts-expect-error
 import SVG from 'vite-plugin-vue-svg'
 
@@ -18,6 +19,7 @@ const config: UserConfig = {
     }),
     Markdown(),
     SVG(),
+    Icons(),
     ViteComponents({
       extensions: ['vue', 'md', 'svg'],
       directoryAsNamespace: true,
@@ -31,6 +33,9 @@ const config: UserConfig = {
             return '/src/CustomResolved.vue'
         },
         VantResolver(),
+        ViteIconsResolver({
+          componentPrefix: 'i',
+        }),
       ],
     }),
   ],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c0f4086..9e253707 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,7 @@ importers:
 
   examples/vue3:
     specifiers:
+      '@iconify/json': ^1.1.355
       '@vitejs/plugin-vue': ^1.2.1
       '@vue/compiler-sfc': ^3.0.11
       cross-env: ^7.0.3
@@ -100,6 +101,7 @@ importers:
       vant: ^3.0.13
       vite: ^2.1.5
       vite-plugin-components: workspace:*
+      vite-plugin-icons: ^0.6.2
       vite-plugin-md: ^0.6.3
       vite-plugin-vue-svg: ^0.1.0
       vue: ^3.0.11
@@ -107,12 +109,14 @@ importers:
       vant: 3.0.13_vue@3.0.11
       vue: 3.0.11
     devDependencies:
+      '@iconify/json': 1.1.355
       '@vitejs/plugin-vue': 1.2.1_@vue+compiler-sfc@3.0.11
       '@vue/compiler-sfc': 3.0.11_vue@3.0.11
       cross-env: 7.0.3
       typescript: 4.2.4
       vite: 2.1.5
       vite-plugin-components: link:../..
+      vite-plugin-icons: 0.6.2_8351cb9a4fc684fb77afd4bb9852d8af
       vite-plugin-md: 0.6.3_vite@2.1.5
       vite-plugin-vue-svg: 0.1.0_1380d5729f15daf8821c9a25b36e8589
 
@@ -633,6 +637,14 @@ packages:
       - supports-color
     dev: true
 
+  /@iconify/json-tools/1.0.10:
+    resolution: {integrity: sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg==}
+    dev: true
+
+  /@iconify/json/1.1.355:
+    resolution: {integrity: sha512-xHhdtI/YH8fFF/IG6YYs28Hi1SRr4ZzqRoi09wds7iX4cBvdP6RqnUxaxgiksSFSEAqF+8sZrhLDo3hkAT5v2w==}
+    dev: true
+
   /@istanbuljs/load-nyc-config/1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -7142,6 +7154,24 @@ packages:
     resolution: {integrity: sha512-vQBcvntBlnAPonAkGNM8iJ9NxE3PucA+V2W95xiN75YJKxirLJvOws2kEyOEO45T4N+YTbQOCR2m77Y05pfVhQ==}
     dev: false
 
+  /vite-plugin-icons/0.6.2_8351cb9a4fc684fb77afd4bb9852d8af:
+    resolution: {integrity: sha512-FBaU06VtdXUWVwyxPhyjEfvWDWZh81V1a4KU3jb3gr5ocxN/piefcunrHfqUWvphwF51mi2gWpX9VoIOSj6gIw==}
+    peerDependencies:
+      '@iconify/json': '*'
+      '@vue/compiler-sfc': ^3.0.2
+      vue-template-compiler: ^2.6.12
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+    dependencies:
+      '@iconify/json': 1.1.355
+      '@iconify/json-tools': 1.0.10
+      '@vue/compiler-sfc': 3.0.11_vue@3.0.11
+      vue-template-es2015-compiler: 1.9.1
+    dev: true
+
   /vite-plugin-md/0.6.3_vite@2.1.5:
     resolution: {integrity: sha512-z0cayEJwJP2aRAx+kWzs05VruGt6ylyIZDOXJLApPu4b7m9/bouqbIljAi1RdBuSYhPT881xLcEZJGlBJhOOvg==}
     peerDependencies:
diff --git a/src/context.ts b/src/context.ts
index d37ea449..af64a674 100644
--- a/src/context.ts
+++ b/src/context.ts
@@ -152,7 +152,7 @@ export class Context {
       })
   }
 
-  findComponent(name: string, excludePaths: string[] = []): ComponentInfo | undefined {
+  findComponent(name: string, excludePaths: string[] = [], rawName?: string): ComponentInfo | undefined {
     // resolve from fs
     let info = this._componentNameMap[name]
     if (info && !excludePaths.includes(info.path) && !excludePaths.includes(info.path.slice(1)))
diff --git a/src/declaration.ts b/src/declaration.ts
index 03c595f1..df15e005 100644
--- a/src/declaration.ts
+++ b/src/declaration.ts
@@ -1,5 +1,6 @@
 import { resolve, dirname, relative } from 'path'
 import { promises as fs } from 'fs'
+import { notNullish } from '@antfu/utils'
 import { Context } from './context'
 import { slash } from './utils'
 
@@ -9,9 +10,16 @@ export async function generateDeclaration(ctx: Context, root: string, filepath:
     ...ctx.componentCustomMap,
   })
     .map(({ path, name, importName }) => {
+      if (!name)
+        return undefined
+
       const related = slash(path).startsWith('/')
         ? `./${relative(dirname(filepath), resolve(root, path.slice(1)))}`
         : path
+
+      if (!/^\w+$/.test(name))
+        name = `'${name}'`
+
       let entry = `${name}: typeof import('${slash(related)}')`
       if (importName)
         entry += `['${importName}']`
@@ -19,6 +27,7 @@ export async function generateDeclaration(ctx: Context, root: string, filepath:
         entry += '[\'default\']'
       return entry
     })
+    .filter(notNullish)
 
   if (!lines.length)
     return
diff --git a/src/transforms/vue2.ts b/src/transforms/vue2.ts
index 2d2fb23b..c1a2b726 100644
--- a/src/transforms/vue2.ts
+++ b/src/transforms/vue2.ts
@@ -24,15 +24,15 @@ export function Vue2Transformer(ctx: Context): Transformer {
     const s = new MagicString(code)
 
     for (const match of code.matchAll(/_c\(['"](.+?)["']([,)])/g)) {
-      const [full, matchStr, append] = match
+      const [full, matchedName, append] = match
 
-      if (match.index != null && matchStr && !matchStr.startsWith('_')) {
+      if (match.index != null && matchedName && !matchedName.startsWith('_')) {
         const start = match.index
         const end = start + full.length
-        debug(`| ${matchStr}`)
-        const name = pascalCase(matchStr)
+        debug(`| ${matchedName}`)
+        const name = pascalCase(matchedName)
         componentPaths.push(name)
-        const component = ctx.findComponent(name, [sfcPath])
+        const component = ctx.findComponent(name, [sfcPath], matchedName)
         if (component) {
           const var_name = `__vite_components_${no}`
           head.push(stringifyComponentImport({ ...component, name: var_name }, ctx))
diff --git a/src/transforms/vue3.ts b/src/transforms/vue3.ts
index fa276283..23a7ef8e 100644
--- a/src/transforms/vue3.ts
+++ b/src/transforms/vue3.ts
@@ -31,7 +31,7 @@ export function Vue3Transformer(ctx: Context): Transformer {
         debug(`| ${matchedName}`)
         const name = pascalCase(matchedName)
         componentPaths.push(name)
-        const component = ctx.findComponent(name, [sfcPath])
+        const component = ctx.findComponent(name, [sfcPath], matchedName)
         if (component) {
           const var_name = `__vite_components_${no}`
           head.push(stringifyComponentImport({ ...component, name: var_name }, ctx))