feat(unplugin-tiny-vue): add TinyVueResolver (#1585)

examples/sites/demos/pc/webdoc/import-components.md

@@ -22,7 +22,7 @@ Vite
 import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
 
 export default {
-  plugins: [autoImportPlugin()]
+  plugins: [autoImportPlugin('vite')]
 }
 ```
 
@@ -33,13 +33,53 @@ Webpack
 
 const autoImportPlugin = require('@opentiny/unplugin-tiny-vue')
 
-module.exports = {
-  plugins: [autoImportPlugin()]
-}
+module.exports = defineConfig({
+  configureWebpack: {
+    plugins: [autoImportPlugin('webpack')]
+  }
+})
 ```
 
 这样你就能直接在项目中使用 TinyVue 的组件，这些组件都是自动按需导入的，无需手动导入，且不用担心项目体积变得太大。
 
+你也可以只使用 TinyVueResolver，这样就可以和其他组件库一起使用。
+
+Vite
+
+```ts
+// vite.config.ts
+
+import Components from 'unplugin-vue-components/vite'
+import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
+
+export default {
+  plugins: [
+    Components({
+      resolvers: [TinyVueResolver]
+    })
+  ]
+}
+```
+
+Webpack
+
+```js
+// webpack.config.js
+
+const Components = require('unplugin-vue-components/webpack').default
+const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver
+
+module.exports = defineConfig({
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [TinyVueResolver]
+      })
+    ]
+  }
+})
+```
+
 想了解更多自动按需导入的信息，请参考：[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)。
 
 ### 多组件引入

internals/unplugin-tiny-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/unplugin-tiny-vue",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A vite auto import plugin for TinyVue",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

internals/unplugin-tiny-vue/src/index.ts

@@ -12,22 +12,26 @@ const supportMap = {
   'rspack': AutoRspack
 }
 
+export const TinyVueResolver = (componentName) => {
+  if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) {
+    return {
+      name: componentName.slice(4),
+      from: '@opentiny/vue'
+    }
+  }
+}
+
 /** TinyVue 自动导入组件的插件，支持Vite,Webpack,Rollup 等常见的构建工具。
  * 目前不支持Tiny Icon的自动导入
  * @example
  * import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
  * plugins: [autoImportPlugin('vite')]
  */
-export default (name) =>
-  supportMap[name]({
-    resolvers: [
-      (componentName) => {
-        if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) {
-          return {
-            name: componentName.slice(4),
-            from: '@opentiny/vue'
-          }
-        }
-      }
-    ]
+export default (name) => {
+  // 兼容webpack/vite的差异
+  const autoPlugin = supportMap[name].default || supportMap[name]
+
+  return autoPlugin({
+    resolvers: [TinyVueResolver]
   })
+}