feat: built-in resolvers for UI libraries

Author: antfu

examples/vue3/vite.config.ts

@@ -1,7 +1,7 @@
 import path from 'path'
 import { UserConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
-import ViteComponents from 'vite-plugin-components'
+import ViteComponents, { VantResolver } from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
 // @ts-expect-error
 import SVG from 'vite-plugin-vue-svg'
@@ -27,11 +27,7 @@ const config: UserConfig = {
           if (name === 'MyCustom')
             return '/src/CustomResolved.vue'
         },
-        // auto import from ui library Vant
-        (name: string) => {
-          if (name.startsWith('Van'))
-            return { importName: name.slice(3), path: 'vant' }
-        },
+        VantResolver(),
       ],
     }),
   ],

src/index.ts

@@ -38,5 +38,6 @@ function VitePluginComponents(options: Options = {}): Plugin {
 
 export * from './helpers/libraryResolver'
 export * from './types'
+export * from './resolvers'
 export { camelCase, pascalCase, kebabCase } from './utils'
 export default VitePluginComponents

src/resolvers/antdv.ts

@@ -0,0 +1,14 @@
+import { ComponentResolver } from '../types'
+
+/**
+ * Resolver for Ant Design Vue
+ *
+ * See https://github.com/antfu/vite-plugin-components/issues/26#issuecomment-789767941 for more details
+ *
+ * @author @yangss3
+ * @link https://antdv.com/
+ */
+export const AntDesignVueResolver = (): ComponentResolver => (name: string) => {
+  if (name.match(/^A[A-Z]/))
+    return { importName: name.slice(1), path: 'ant-design-vue/es' }
+}

src/resolvers/element-plus.ts

@@ -0,0 +1,29 @@
+import { ComponentResolver } from '../types'
+
+export interface ElementPlusResolverOptions {
+  /**
+   * import style along with components
+   *
+   * @default true
+   */
+  importStyle?: boolean
+}
+
+/**
+ * Resolver for Element Plus
+ *
+ * See https://github.com/antfu/vite-plugin-components/pull/28 for more details
+ *
+ * @author @develar
+ * @link https://element-plus.org/#/en-US
+ */
+export const ElementPlusResolver = (options: ElementPlusResolverOptions = {}): ComponentResolver => (name: string) => {
+  const { importStyle = true } = options
+  if (name.startsWith('El')) {
+    const partialName = name[2].toLowerCase() + name.substring(3).replace(/[A-Z]/g, l => `-${l.toLowerCase()}`)
+    return {
+      path: `element-plus/es/el-${partialName}`,
+      sideEffects: importStyle ? `element-plus/packages/theme-chalk/src/${partialName}.scss` : undefined,
+    }
+  }
+}

src/resolvers/index.ts

@@ -0,0 +1,3 @@
+export * from './antdv'
+export * from './element-plus'
+export * from './vant'

src/resolvers/vant.ts

@@ -0,0 +1,11 @@
+import { ComponentResolver } from '../types'
+
+/**
+ * Resolver for Vant
+ *
+ * @link https://github.com/youzan/vant
+ */
+export const VantResolver = (): ComponentResolver => (name: string) => {
+  if (name.startsWith('Van'))
+    return { importName: name.slice(3), path: 'vant' }
+}