From 82e9184fe535a12e251a3ed7181ff638271737dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BD=98=E9=9D=99=E6=80=A1?= <1003346758@qq.com> Date: Tue, 12 Nov 2024 02:07:01 +0800 Subject: [PATCH] fix(auto-import-plugin): support functional components --- .../demos/pc/webdoc/import-components.md | 52 +++++++++++- .../example/auto-imports.d.ts | 12 +++ .../unplugin-tiny-vue/example/components.d.ts | 15 ++++ .../unplugin-tiny-vue/example/package.json | 9 +- .../unplugin-tiny-vue/example/src/App.vue | 84 +++++++++++++++---- .../unplugin-tiny-vue/example/vite.config.js | 15 +++- internals/unplugin-tiny-vue/src/index.ts | 34 ++++++-- 7 files changed, 191 insertions(+), 30 deletions(-) create mode 100644 internals/unplugin-tiny-vue/example/auto-imports.d.ts create mode 100644 internals/unplugin-tiny-vue/example/components.d.ts diff --git a/examples/sites/demos/pc/webdoc/import-components.md b/examples/sites/demos/pc/webdoc/import-components.md index 4d99d2ce86..a66d223c89 100644 --- a/examples/sites/demos/pc/webdoc/import-components.md +++ b/examples/sites/demos/pc/webdoc/import-components.md @@ -55,7 +55,7 @@ import { TinyVueResolver } from '@opentiny/unplugin-tiny-vue' export default { plugins: [ Components({ - resolvers: [TinyVueResolver] + resolvers: [TinyVueResolver()] }) ] } @@ -73,7 +73,55 @@ module.exports = defineConfig({ configureWebpack: { plugins: [ Components({ - resolvers: [TinyVueResolver] + resolvers: [TinyVueResolver()] + }) + ] + } +}) +``` + +#### 关于函数式组件 + +TinyModal,TinyNotify,TinyLoading 可使用函数形式调用,在使用时,需使用 `unplugin-auto-import` 实现自动导入。 + +Vite + +```js +// vite.config.js +import Components from 'unplugin-vue-components/vite' +import AutoImport from 'unplugin-auto-import/vite' +import { TinyVueResolver } from '@opentiny/unplugin-tiny-vue' + +module.exports = defineConfig({ + configureWebpack: { + plugins: [ + Components({ + resolvers: [TinyVueResolver()] + }), + AutoImport({ + resolvers: [TinyVueResolver({ autoImport: true })] + }) + ] + } +}) +``` + +Webpack + +```js +// webpack.config.js +const Components = require('unplugin-vue-components/webpack').default +const AutoImport = require('unplugin-auto-import/webpack').default +const TinyVueResolver = require('@opentiny/unplugin-tiny-vue').TinyVueResolver + +module.exports = defineConfig({ + configureWebpack: { + plugins: [ + Components({ + resolvers: [TinyVueResolver()] + }), + AutoImport({ + resolvers: [TinyVueResolver({ autoImport: true })] }) ] } diff --git a/internals/unplugin-tiny-vue/example/auto-imports.d.ts b/internals/unplugin-tiny-vue/example/auto-imports.d.ts new file mode 100644 index 0000000000..73d664f70d --- /dev/null +++ b/internals/unplugin-tiny-vue/example/auto-imports.d.ts @@ -0,0 +1,12 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// noinspection JSUnusedGlobalSymbols +// Generated by unplugin-auto-import +// biome-ignore lint: disable +export {} +declare global { + const TinyLoading: (typeof import('@opentiny/vue'))['TinyLoading'] + const TinyModal: (typeof import('@opentiny/vue'))['TinyModal'] + const TinyNotify: (typeof import('@opentiny/vue'))['TinyNotify'] +} diff --git a/internals/unplugin-tiny-vue/example/components.d.ts b/internals/unplugin-tiny-vue/example/components.d.ts new file mode 100644 index 0000000000..30b4eeb6cd --- /dev/null +++ b/internals/unplugin-tiny-vue/example/components.d.ts @@ -0,0 +1,15 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +declare module 'vue' { + export interface GlobalComponents { + RouterLink: (typeof import('vue-router'))['RouterLink'] + RouterView: (typeof import('vue-router'))['RouterView'] + TinyButton: (typeof import('@opentiny/vue'))['Button'] + TinyModal: (typeof import('@opentiny/vue'))['Modal'] + } +} diff --git a/internals/unplugin-tiny-vue/example/package.json b/internals/unplugin-tiny-vue/example/package.json index aec2fa8516..f296e120a1 100644 --- a/internals/unplugin-tiny-vue/example/package.json +++ b/internals/unplugin-tiny-vue/example/package.json @@ -1,23 +1,22 @@ { "name": "my-vue-app", + "version": "0.0.0", "description": "", "author": "", - "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { - "@opentiny/vue": "~3.12.1", - "@opentiny/vue-alert": "~3.13.0", - "@opentiny/vue-button-group": "~3.13.0", + "@opentiny/vue": "~3.18.0", "@opentiny/vue-icon": "^3.12.0", "vue": "^3.3.9" }, "devDependencies": { "@vitejs/plugin-vue": "^4.1.0", - "vite": "link:../node_modules/vite", + "unplugin-auto-import": "^0.18.3", + "vite": "^4.3.8", "vite-plugin-inspect": "^0.8.3" } } diff --git a/internals/unplugin-tiny-vue/example/src/App.vue b/internals/unplugin-tiny-vue/example/src/App.vue index 35941f9e83..28aeb4d5e9 100644 --- a/internals/unplugin-tiny-vue/example/src/App.vue +++ b/internals/unplugin-tiny-vue/example/src/App.vue @@ -1,22 +1,76 @@ - diff --git a/internals/unplugin-tiny-vue/example/vite.config.js b/internals/unplugin-tiny-vue/example/vite.config.js index 115c877802..90988ab553 100644 --- a/internals/unplugin-tiny-vue/example/vite.config.js +++ b/internals/unplugin-tiny-vue/example/vite.config.js @@ -1,11 +1,22 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Inspect from 'vite-plugin-inspect' -import autoImportPlugin from '../dist/index.js' +import Components from 'unplugin-vue-components/vite' +import AutoImport from 'unplugin-auto-import/vite' +import { TinyVueResolver } from '../dist/index.js' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [vue(), Inspect(), autoImportPlugin()], + plugins: [ + vue(), + Inspect(), + Components({ + resolvers: [TinyVueResolver()] + }), + AutoImport({ + resolvers: [TinyVueResolver({ autoImport: true })] + }) + ], define: { 'process.env': { ...process.env, TINY_MODE: 'pc' } }, diff --git a/internals/unplugin-tiny-vue/src/index.ts b/internals/unplugin-tiny-vue/src/index.ts index e7a4a6244b..81dce231b1 100644 --- a/internals/unplugin-tiny-vue/src/index.ts +++ b/internals/unplugin-tiny-vue/src/index.ts @@ -4,6 +4,15 @@ import AutoRollup from 'unplugin-vue-components/rollup' import AutoEsbuild from 'unplugin-vue-components/esbuild' import AutoRspack from 'unplugin-vue-components/rspack' +export interface TinyVueResolverOption { + /** + * compatible with unplugin-auto-import + * + * @default false + */ + autoImport?: boolean +} + const supportMap = { 'vite': AutoVite, 'webpack': AutoWebpack, @@ -12,11 +21,24 @@ const supportMap = { 'rspack': AutoRspack } -export const TinyVueResolver = (componentName) => { - if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) { - return { - name: componentName.slice(4), - from: '@opentiny/vue' +const TinyVueFunc = ['TinyModal', 'TinyNotify', 'TinyLoading'] + +export const TinyVueResolver = (option: TinyVueResolverOption = {}) => { + return (componentName: string) => { + const { autoImport = false } = option + + if (autoImport && TinyVueFunc.includes(componentName)) { + return { + name: componentName, + from: '@opentiny/vue' + } + } + + if (componentName.startsWith('Tiny') && !componentName.startsWith('TinyIcon')) { + return { + name: componentName.slice(4), + from: '@opentiny/vue' + } } } } @@ -32,6 +54,6 @@ export default (name) => { const autoPlugin = supportMap[name].default || supportMap[name] return autoPlugin({ - resolvers: [TinyVueResolver] + resolvers: [TinyVueResolver()] }) }