feat: custom resolvers (unplugin#23)

Co-authored-by: Anthony Fu <[email protected]>

.eslintrc

@@ -4,5 +4,7 @@
   },
   "extends": ["@antfu"],
   "plugins": ["jest"],
-  "rules": {}
+  "rules": {
+    "react/jsx-no-undef": "off"
+  }
 }

examples/vite-react/package.json

@@ -11,11 +11,14 @@
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
+    "@iconify/json": "^1.1.396",
+    "@svgr/core": "^5.5.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "typescript": "^4.4.2",
     "unplugin-auto-import": "workspace:*",
+    "unplugin-icons": "^0.7.5",
     "vite": "^2.5.1"
   }
 }

examples/vite-react/src/App.tsx

@@ -6,6 +6,7 @@ function App() {
 
   return (
     <div className="App">
+      <IconLogosReact style={{ fontSize: '3em' }}/>
       <header className="App-header">
         <p>
           <button type="button" onClick={() => setCount(count => count + 1)}>

examples/vite-react/tsconfig.json

@@ -13,7 +13,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "types": [
+      "unplugin-icons/types/react"
+    ]
   },
   "include": ["./src"]
 }

examples/vite-react/vite.config.ts

@@ -1,14 +1,25 @@
 import { defineConfig } from 'vite'
-import reactRefresh from '@vitejs/plugin-react-refresh'
+import React from '@vitejs/plugin-react-refresh'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 import AutoImport from '../../src/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    reactRefresh(),
+    React(),
+    Icons({
+      compiler: 'jsx',
+      jsx: 'react',
+    }),
     AutoImport({
       imports: 'react',
       dts: './src/auto-imports.d.ts',
+      resolvers: [
+        IconsResolver({
+          componentPrefix: 'Icon',
+        }),
+      ],
     }),
   ],
 })

src/core/dts.ts

@@ -1,8 +1,10 @@
 import { ImportsFlatMap } from '../types'
 
-export function generateDeclration(imports: ImportsFlatMap) {
-  const body = Object
-    .entries(imports)
+export function generateDeclration(imports: ImportsFlatMap, resolvedImports: ImportsFlatMap = {}) {
+  const body = [
+    ...Object.entries(imports),
+    ...Object.entries(resolvedImports),
+  ]
     .map(([name, info]) => `  const ${name}: typeof import('${info.module}')['${info.from || name}']`)
     .join('\n')
   return `// Generated by 'unplugin-auto-import'\ndeclare global {\n${body}\n}\nexport {}\n`

src/core/options.ts

@@ -11,14 +11,16 @@ export function resolveOptions(options: Options = {}): ResolvedOptions {
   const { dts = hasPkg('typescript') } = options
   const resolved: ResolvedOptions = {
     sourceMap: false,
+    resolvedImports: {},
+    presetOverriding: false,
     ...options,
     dts: dts === false
       ? false
       : dts === true
         ? resolve('auto-imports.d.ts')
         : resolve(dts),
     imports,
-    matchRE: new RegExp(`\\b(${Object.keys(imports).join('|')})\\b`, 'g'),
+    resolvers: toArray(options.resolvers),
     idFilter: createFilter(
       options.include || [/\.[jt]sx?$/, /\.vue\??/, /\.svelte$/],
       options.exclude || [/node_modules/, /\.git/],