fix: work with vite-plugin-icons

Author: antfu

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']
   }
 }
 

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"
   }

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>

examples/vue3/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig"
+}

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',
+        }),
       ],
     }),
   ],

pnpm-lock.yaml

@@ -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)))

src/context.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,16 +10,24 @@ 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}']`
       else
         entry += '[\'default\']'
       return entry
     })
+    .filter(notNullish)
 
   if (!lines.length)
     return

src/declaration.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))

src/transforms/vue2.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))