feat: support unplugin-auto-import plugin (#12679)

youzan · Mar 17, 2024 · 66d8a18 · 66d8a18
1 parent 942b190
commit 66d8a18
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 71 deletions.
diff --git a/packages/vant-auto-import-resolver/README.md b/packages/vant-auto-import-resolver/README.md
@@ -14,16 +14,16 @@ English | [简体中文](./README.zh-CN.md)
 
 ```shell
 # via npm
-npm i @vant/auto-import-resolver unplugin-vue-components -D
+npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
 
 # via yarn
-yarn add @vant/auto-import-resolver unplugin-vue-components -D
+yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
 
 # via pnpm
-pnpm add @vant/auto-import-resolver unplugin-vue-components -D
+pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
 
 # via Bun
-bun add @vant/auto-import-resolver unplugin-vue-components -D
+bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
 ```
 
 ## Usage
@@ -32,11 +32,15 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D
 
 ```ts
 // vite.config.ts
+import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 export default defineConfig({
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),
@@ -48,11 +52,15 @@ export default defineConfig({
 
 ```ts
 // rollup.config.js
+import AutoImport from 'unplugin-auto-import/rollup';
 import Components from 'unplugin-vue-components/rollup';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 export default {
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),
@@ -64,11 +72,15 @@ export default {
 
 ```ts
 // webpack.config.js
+import AutoImport from 'unplugin-auto-import/webpack';
 import Components from 'unplugin-vue-components/webpack';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 module.exports = {
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),
@@ -80,11 +92,15 @@ module.exports = {
 
 ```ts
 // rspack.config.js
+import AutoImport from 'unplugin-auto-import/rspack';
 import Components from 'unplugin-vue-components/rspack';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 module.exports = {
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),
@@ -96,12 +112,16 @@ module.exports = {
 
 ```ts
 // vue.config.js
+import AutoImport from 'unplugin-auto-import/webpack';
 import Components from 'unplugin-vue-components/webpack';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 module.exports = {
   configureWebpack: {
     plugins: [
+      AutoImport({
+        resolvers: [VantResolver()],
+      }),
       Components({
         resolvers: [VantResolver()],
       }),
@@ -115,11 +135,15 @@ module.exports = {
 ```ts
 // esbuild.config.js
 import { build } from 'esbuild';
+import AutoImport from 'unplugin-auto-import/esbuild';
 import Components from 'unplugin-vue-components/esbuild';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 build({
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),

diff --git a/packages/vant-auto-import-resolver/README.zh-CN.md b/packages/vant-auto-import-resolver/README.zh-CN.md
@@ -14,16 +14,16 @@
 
 ```shell
 # via npm
-npm i @vant/auto-import-resolver unplugin-vue-components -D
+npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
 
 # via yarn
-yarn add @vant/auto-import-resolver unplugin-vue-components -D
+yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
 
 # via pnpm
-pnpm add @vant/auto-import-resolver unplugin-vue-components -D
+pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
 
 # via Bun
-bun add @vant/auto-import-resolver unplugin-vue-components -D
+bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
 ```
 
 ## 使用
@@ -32,11 +32,15 @@ bun add @vant/auto-import-resolver unplugin-vue-components -D
 
 ```ts
 // vite.config.ts
+import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 export default defineConfig({
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),
@@ -48,11 +52,15 @@ export default defineConfig({
 
 ```ts
 // rollup.config.js
+import AutoImport from 'unplugin-auto-import/rollup';
 import Components from 'unplugin-vue-components/rollup';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 export default {
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),
@@ -64,11 +72,15 @@ export default {
 
 ```ts
 // webpack.config.js
+import AutoImport from 'unplugin-auto-import/webpack';
 import Components from 'unplugin-vue-components/webpack';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 module.exports = {
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),
@@ -80,11 +92,15 @@ module.exports = {
 
 ```ts
 // rspack.config.js
+import AutoImport from 'unplugin-auto-import/rspack';
 import Components from 'unplugin-vue-components/rspack';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 module.exports = {
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),
@@ -96,12 +112,16 @@ module.exports = {
 
 ```ts
 // vue.config.js
+import AutoImport from 'unplugin-auto-import/webpack';
 import Components from 'unplugin-vue-components/webpack';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 module.exports = {
   configureWebpack: {
     plugins: [
+      AutoImport({
+        resolvers: [VantResolver()],
+      }),
       Components({
         resolvers: [VantResolver()],
       }),
@@ -115,11 +135,15 @@ module.exports = {
 ```ts
 // esbuild.config.js
 import { build } from 'esbuild';
+import AutoImport from 'unplugin-auto-import/esbuild';
 import Components from 'unplugin-vue-components/esbuild';
 import { VantResolver } from '@vant/auto-import-resolver';
 
 build({
   plugins: [
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
     Components({
       resolvers: [VantResolver()],
     }),

diff --git a/packages/vant-auto-import-resolver/src/index.ts b/packages/vant-auto-import-resolver/src/index.ts
@@ -56,8 +56,48 @@ function getSideEffects(dirName: string, options: VantResolverOptions) {
   return `vant/${moduleType}/${dirName}/style/index`;
 }
 
+function getAPIMap() {
+  const apiMap = new Map<string, string>();
+
+  const api = {
+    dialog: [
+      'showDialog',
+      'closeDialog',
+      'showConfirmDialog',
+      'setDialogDefaultOptions',
+      'resetDialogDefaultOptions',
+    ],
+    imagePreview: ['showImagePreview'],
+    notify: [
+      'showNotify',
+      'closeNotify',
+      'setNotifyDefaultOptions',
+      'resetNotifyDefaultOptions',
+    ],
+    toast: [
+      'showToast',
+      'closeToast',
+      'showFailToast',
+      'showLoadingToast',
+      'showSuccessToast',
+      'allowMultipleToast',
+      'setToastDefaultOptions',
+      'resetToastDefaultOptions',
+    ],
+  };
+
+  Object.entries(api).forEach(([importName, apiList]) => {
+    apiList.forEach((api) => {
+      apiMap.set(api, importName);
+    });
+  });
+
+  return apiMap;
+}
+
 export function VantResolver(options: VantResolverOptions = {}) {
   const moduleType = getModuleType(options);
+  const apiMap = getAPIMap();
 
   return {
     type: 'component' as const,
@@ -71,6 +111,16 @@ export function VantResolver(options: VantResolverOptions = {}) {
           sideEffects: getSideEffects(kebabCase(partialName), options),
         };
       }
+
+      // import API
+      if (apiMap.has(name)) {
+        const partialName = apiMap.get(name)!;
+        return {
+          name,
+          from: `vant/${moduleType}`,
+          sideEffects: getSideEffects(kebabCase(partialName), options),
+        };
+      }
     },
   };
 }