feat: support unplugin-auto-import plugin

[DragonnZhang]

By adding showXXXX processing logic to resolve, now VantResolver supports unplugin-auto-import. That is:

// Vite.config.ts
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [VantResolver()]
    }),
  ]
})

So that:

// App.vue
<script setup lang="ts">
function clickHandler() {
  showNotify('It works')
}
</script>

<template>
  <VanButton type="success" @click="clickHandler">button</VanButton>
</template>

can work because unplugin-auto-import will introduce function and style automatically.

[DragonnZhang]

目前的 resolver 支持 unplugin-vue-components 来自动注册并导入组件，但是并不支持自动导入 api（如showToast、showDialog），通过在 resolve 中添加相关逻辑可以使得 resolver 支持 unplugin-auto-import，从而可以自动导入相关 api

[wChenonly]

我觉得可以在补充下使用文档

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.76%. Comparing base (942b190) to head (c5a8db4).

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12679      +/-   ##
==========================================
- Coverage   89.78%   89.76%   -0.02%     
==========================================
  Files         257      257              
  Lines        6832     6832              
  Branches     1659     1659              
==========================================
- Hits         6134     6133       -1     
  Misses        374      374              
- Partials      324      325       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[DragonnZhang]

我觉得可以在补充下使用文档

补充了 resolver 的文档以及快速上手的对应内容

[chenjiahan]

这个判断比较松散，会不会导致所有以 show 开头的 method 都被插件处理（可能会误伤）

[DragonnZhang]

您好，您说的这个问题我之前也考虑过，我认为出现误伤的概率极小。
您说的误伤的情况可以分为两种：

1. 用户忘了导入某个 show 开头的函数，导致 unplugin-auto-import 插件处理了该函数。这种情况实际上是用户的疏忽，由于对于 API 的导入语句不会正常运行，因此用户能够发现自己的问题，从而修正错误。
2. 用户使用的另外一个库也通过插件 按需导入 API，且 API 也以 show 开头，导致撞车。这种可能性实际上并不大（会实现按需导入功能的库一般是组件库，这些库的 API 一般以大写字母开头，如 ElMessage，以 show 开头的可能性不大），相比于这种低概率的风险，给用户带来的便利是更值得争取的。

当然，也可以处理的更加细致，即只处理库中出现的 Toast，Dialog，Notify 和 ImagePreview 四个组件。

[DragonnZhang]

刚发现大佬你也是北航软院的，也在美团工作过，真巧

[wChenonly]

您好，您说的这个问题我之前也考虑过，我认为出现误伤的概率极小。 您说的误伤的情况可以分为两种：

1. 用户忘了导入某个 show 开头的函数，导致 unplugin-auto-import 插件处理了该函数。这种情况实际上是用户的疏忽，由于对于 API 的导入语句不会正常运行，因此用户能够发现自己的问题，从而修正错误。
2. 用户使用的另外一个库也通过插件 按需导入 API，且 API 也以 show 开头，导致撞车。这种可能性实际上并不大（会实现按需导入功能的库一般是组件库，这些库的 API 一般以大写字母开头，如 ElMessage，以 show 开头的可能性不大），相比于这种低概率的风险，给用户带来的便利是更值得争取的。

当然，也可以处理的更加细致，即只处理库中出现的 Toast，Dialog，Notify 和 ImagePreview 四个组件。

• 对于用户，如果显式 import 引入了的话，插件是不会工作的
• 如果非显式引入，则会报错，但是是很明显能看出来错误的原因
  

但是为了防止这种错误，我们可以加一层判断 name.startsWith("show") && ['showNotify','showToast'].includes(name)

对用户来说，是真的很方便，之前也有很多 issue 提 api 类型的问题

[chenjiahan]

@DragonnZhang 哈哈，缘分 😄

@wChenonly 嗯嗯，同意加一层判断，精确匹配 Vant 中的几个 showXX 和 closeDialog 等方法

[DragonnZhang]

@DragonnZhang 哈哈，缘分 😄

@wChenonly 嗯嗯，同意加一层判断，精确匹配 Vant 中的几个 showXX 和 closeDialog 等方法

新的 commit 精确匹配了 vant 中的方法

[chenjiahan]

棒 👍 已发布 @vant/auto-import-resolver v1.1.0

[zhaojjiang]

@DragonnZhang Hi，可否针对 unplugin-auto-import 的 imports 做一个体验上的优化

当前现象描述：项目初始的 auto-imports.d.ts 中没有 showToast 之类的 API 定义。此时直接键入 showToast 出现的代码提示是带有 import 语句的，如果想要使用 unplugin-auto-import 的效果，需要手动移除 import。这时在 auto-imports.d.ts 中生成对应的类型定义后，showToast 函数可以直接使用（不带 import 语句）。

期望现象描述：unplugin-auto-import 中 imports 配置的值如 vue、vue-router 或自定义值是可以直接生成到 auto-imports.d.ts 中的。所以希望在 @vant/auto-import-resolver 中增加导出一个函数以获取可以在 imports 中使用的配置值。

这样在方便使用的同时，也能在项目初始将 auto-imports.d.ts 的内容基本固定，减少后续使用 API 增减导致的文件变化。

[DragonnZhang]

@DragonnZhang Hi，可否针对 unplugin-auto-import 的 imports 做一个体验上的优化

当前现象描述：项目初始的 auto-imports.d.ts 中没有 showToast 之类的 API 定义。此时直接键入 showToast 出现的代码提示是带有 import 语句的，如果想要使用 unplugin-auto-import 的效果，需要手动移除 import。这时在 auto-imports.d.ts 中生成对应的类型定义后，showToast 函数可以直接使用（不带 import 语句）。

期望现象描述：unplugin-auto-import 中 imports 配置的值如 vue、vue-router 或自定义值是可以直接生成到 auto-imports.d.ts 中的。所以希望在 @vant/auto-import-resolver 中增加导出一个函数以获取可以在 imports 中使用的配置值。

这样在方便使用的同时，也能在项目初始将 auto-imports.d.ts 的内容基本固定，减少后续使用 API 增减导致的文件变化。

感谢您的建议！如果我没理解错的话，您希望增加一个函数，能够返回 vant 的所有 api，从而可以在 imports 中全局导入这些 api，就像这个样子：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// 新增 VantImports
import { VantResolver, VantImports } from './src/test-resolver/vantResolver'

export default defineConfig({
plugins: [
  AutoImport({
    resolvers: [VantResolver()],
    imports: [
      'vue',
      'vue-router',
      // VantImports 返回一个数组，包含所有的 vant api，即 ['showDialog', 'closeDialog', ..., 'resetToastDefaultOptions']
      { 'vant/es': VantImports() }
    ]
  }),
  vue()
]
})

或许您可以提个 issue，让 vant 官方评审一下这个需求，因为我不是官方人员，不确定这个地方是否要做这样的优化。
如果您需要 vant 所有的 api 列表，可以参考这里：

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

Lines 62 to 87 in 8cb3fe5

	const api = {
	dialog: [
	'showDialog',
	'closeDialog',
	'showConfirmDialog',
	'setDialogDefaultOptions',
	'resetDialogDefaultOptions',
	],
	imagePreview: ['showImagePreview'],
	notify: [
	'showNotify',
	'closeNotify',
	'setNotifyDefaultOptions',
	'resetNotifyDefaultOptions',
	],
	toast: [
	'showToast',
	'closeToast',
	'showFailToast',
	'showLoadingToast',
	'showSuccessToast',
	'allowMultipleToast',
	'setToastDefaultOptions',
	'resetToastDefaultOptions',
	],
	};

[zhaojjiang]

@DragonnZhang 感谢您提供的代码示例，我会尝试提交一个 issue 或 pr