feat: supports imports option for auto-import (#12861)

Co-authored-by: 赵江江 <zhaojiangjiang@kingyee.com.cn>

packages/vant-auto-import-resolver/README.md

@@ -34,11 +34,12 @@ bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import
 // vite.config.ts
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 export default defineConfig({
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -54,11 +55,12 @@ export default defineConfig({
 // rollup.config.js
 import AutoImport from 'unplugin-auto-import/rollup';
 import Components from 'unplugin-vue-components/rollup';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 export default {
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -74,11 +76,12 @@ export default {
 // webpack.config.js
 import AutoImport from 'unplugin-auto-import/webpack';
 import Components from 'unplugin-vue-components/webpack';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 module.exports = {
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -94,11 +97,12 @@ module.exports = {
 // rspack.config.js
 import AutoImport from 'unplugin-auto-import/rspack';
 import Components from 'unplugin-vue-components/rspack';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 module.exports = {
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -114,12 +118,13 @@ module.exports = {
 // vue.config.js
 import AutoImport from 'unplugin-auto-import/webpack';
 import Components from 'unplugin-vue-components/webpack';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 module.exports = {
   configureWebpack: {
     plugins: [
       AutoImport({
+        imports: [VantImports()],
         resolvers: [VantResolver()],
       }),
       Components({
@@ -137,11 +142,12 @@ module.exports = {
 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';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 build({
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({

packages/vant-auto-import-resolver/README.zh-CN.md

@@ -34,11 +34,12 @@ bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import
 // vite.config.ts
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 export default defineConfig({
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -54,11 +55,12 @@ export default defineConfig({
 // rollup.config.js
 import AutoImport from 'unplugin-auto-import/rollup';
 import Components from 'unplugin-vue-components/rollup';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 export default {
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -74,11 +76,12 @@ export default {
 // webpack.config.js
 import AutoImport from 'unplugin-auto-import/webpack';
 import Components from 'unplugin-vue-components/webpack';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 module.exports = {
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -94,11 +97,12 @@ module.exports = {
 // rspack.config.js
 import AutoImport from 'unplugin-auto-import/rspack';
 import Components from 'unplugin-vue-components/rspack';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 module.exports = {
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -114,12 +118,13 @@ module.exports = {
 // vue.config.js
 import AutoImport from 'unplugin-auto-import/webpack';
 import Components from 'unplugin-vue-components/webpack';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 module.exports = {
   configureWebpack: {
     plugins: [
       AutoImport({
+        imports: [VantImports()],
         resolvers: [VantResolver()],
       }),
       Components({
@@ -137,11 +142,12 @@ module.exports = {
 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';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 build({
   plugins: [
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({

packages/vant-auto-import-resolver/src/index.ts

@@ -23,6 +23,8 @@ export interface VantResolverOptions {
   ssr?: boolean;
 }
 
+export type VantImportsOptions = Pick<VantResolverOptions, 'module' | 'ssr'>;
+
 /**
  * Button->button; ButtonGroup->button-group
  */
@@ -124,3 +126,11 @@ export function VantResolver(options: VantResolverOptions = {}) {
     },
   };
 }
+
+export function VantImports(options: VantImportsOptions = {}) {
+  const moduleType = getModuleType(options);
+
+  return {
+    [`vant/${moduleType}`]: getAPIMap().keys(),
+  };
+}

packages/vant/docs/markdown/quickstart.en-US.md

@@ -152,7 +152,7 @@ import { defineConfig } from '@rsbuild/core';
 import { pluginVue } from '@rsbuild/plugin-vue';
 import AutoImport from 'unplugin-auto-import/rspack';
 import Components from 'unplugin-vue-components/rspack';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 export default defineConfig({
   plugins: [pluginVue()],
@@ -160,6 +160,7 @@ export default defineConfig({
     rspack: {
       plugins: [
         AutoImport({
+          imports: [VantImports()],
           resolvers: [VantResolver()],
         }),
         Components({
@@ -177,12 +178,13 @@ For Vite based project，configure the plugin in the `vite.config.js` file:
 import vue from '@vitejs/plugin-vue';
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 export default {
   plugins: [
     vue(),
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -195,7 +197,7 @@ export default {
 For vue-cli based project，configure the plugin in the `vue.config.js` file:
 
 ```js
-const { VantResolver } = require('@vant/auto-import-resolver');
+const { VantResolver, VantImports } = require('@vant/auto-import-resolver');
 const AutoImport = require('unplugin-auto-import/webpack');
 const Components = require('unplugin-vue-components/webpack');
 
@@ -203,10 +205,13 @@ module.exports = {
   configureWebpack: {
     plugins: [
       // When the version of unplugin-vue-components is less than 0.26.0:
-      AutoImport({ resolvers: [VantResolver()] }),
+      AutoImport({ imports: [VantImports()], resolvers: [VantResolver()] }),
       Components({ resolvers: [VantResolver()] }),
       // when the unplugin-vue-components version is greater than or equal to 0.26.0:
-      AutoImport.default({ resolvers: [VantResolver()] }),
+      AutoImport.default({
+        imports: [VantImports()],
+        resolvers: [VantResolver()],
+      }),
       Components.default({ resolvers: [VantResolver()] }),
     ],
   },
@@ -216,17 +221,20 @@ module.exports = {
 For webpack based project，configure the plugin in the `webpack.config.js` file:
 
 ```js
-const { VantResolver } = require('@vant/auto-import-resolver');
+const { VantResolver, VantImports } = require('@vant/auto-import-resolver');
 const AutoImport = require('unplugin-auto-import/webpack');
 const Components = require('unplugin-vue-components/webpack');
 
 module.exports = {
   plugins: [
     // When the version of unplugin-vue-components is less than 0.26.0:
-    AutoImport({ resolvers: [VantResolver()] }),
+    AutoImport({ imports: [VantImports()], resolvers: [VantResolver()] }),
     Components({ resolvers: [VantResolver()] }),
     // when the unplugin-vue-components version is greater than or equal to 0.26.0:
-    AutoImport.default({ resolvers: [VantResolver()] }),
+    AutoImport.default({
+      imports: [VantImports()],
+      resolvers: [VantResolver()],
+    }),
     Components.default({ resolvers: [VantResolver()] }),
   ],
 };
@@ -246,7 +254,7 @@ Then you can using components from Vant in the template, the `unplugin-vue-compo
 
 ```html
 <script>
-showToast('No need to import showToast')
+  showToast('No need to import showToast');
 </script>
 ```
 

packages/vant/docs/markdown/quickstart.zh-CN.md

@@ -174,7 +174,7 @@ import { defineConfig } from '@rsbuild/core';
 import { pluginVue } from '@rsbuild/plugin-vue';
 import AutoImport from 'unplugin-auto-import/rspack';
 import Components from 'unplugin-vue-components/rspack';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 export default defineConfig({
   plugins: [pluginVue()],
@@ -182,6 +182,7 @@ export default defineConfig({
     rspack: {
       plugins: [
         AutoImport({
+          imports: [VantImports()],
           resolvers: [VantResolver()],
         }),
         Components({
@@ -199,12 +200,13 @@ export default defineConfig({
 import vue from '@vitejs/plugin-vue';
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
-import { VantResolver } from '@vant/auto-import-resolver';
+import { VantResolver, VantImports } from '@vant/auto-import-resolver';
 
 export default {
   plugins: [
     vue(),
     AutoImport({
+      imports: [VantImports()],
       resolvers: [VantResolver()],
     }),
     Components({
@@ -217,7 +219,7 @@ export default {
 如果是基于 vue-cli 的项目，在 `vue.config.js` 文件中配置插件：
 
 ```js
-const { VantResolver } = require('@vant/auto-import-resolver');
+const { VantResolver, VantImports } = require('@vant/auto-import-resolver');
 const AutoImport = require('unplugin-auto-import/webpack');
 const Components = require('unplugin-vue-components/webpack');
 
@@ -225,10 +227,13 @@ module.exports = {
   configureWebpack: {
     plugins: [
       // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法
-      AutoImport({ resolvers: [VantResolver()] }),
+      AutoImport({ imports: [VantImports()], resolvers: [VantResolver()] }),
       Components({ resolvers: [VantResolver()] }),
       //当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法
-      AutoImport.default({ resolvers: [VantResolver()] }),
+      AutoImport.default({
+        imports: [VantImports()],
+        resolvers: [VantResolver()],
+      }),
       Components.default({ resolvers: [VantResolver()] }),
     ],
   },
@@ -238,17 +243,20 @@ module.exports = {
 如果是基于 webpack 的项目，在 `webpack.config.js` 文件中配置插件：
 
 ```js
-const { VantResolver } = require('@vant/auto-import-resolver');
+const { VantResolver, VantImports } = require('@vant/auto-import-resolver');
 const AutoImport = require('unplugin-auto-import/webpack');
 const Components = require('unplugin-vue-components/webpack');
 
 module.exports = {
   plugins: [
     // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法
-    AutoImport({ resolvers: [VantResolver()] }),
+    AutoImport({ imports: [VantImports()], resolvers: [VantResolver()] }),
     Components({ resolvers: [VantResolver()] }),
     //当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法
-    AutoImport.default({ resolvers: [VantResolver()] }),
+    AutoImport.default({
+      imports: [VantImports()],
+      resolvers: [VantResolver()],
+    }),
     Components.default({ resolvers: [VantResolver()] }),
   ],
 };
@@ -268,7 +276,7 @@ module.exports = {
 
 ```html
 <script>
-showToast('No need to import showToast')
+  showToast('No need to import showToast');
 </script>
 ```