forked from opentiny/tiny-vue
feat(plugin): auto import plugin (#1397)
feat(plugin): auto import plugin
This commit is contained in:
parent
8900246bea
commit
2a3defe9d0
|
@ -0,0 +1 @@
|
||||||
|
example/
|
|
@ -0,0 +1,26 @@
|
||||||
|
# unplugin-tiny-vue
|
||||||
|
|
||||||
|
A auto import plugin. Same function as [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components).
|
||||||
|
No import and component registration required.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm i @opentiny/unplugin-tiny-vue -D
|
||||||
|
|
||||||
|
yarn i @opentiny/unplugin-tiny-vue -D
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
vite
|
||||||
|
|
||||||
|
```js
|
||||||
|
// vite.config.js
|
||||||
|
|
||||||
|
import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
plugins: [autoImportPlugin()]
|
||||||
|
}
|
||||||
|
```
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Auto Import</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "my-vue-app",
|
||||||
|
"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-icon": "^3.12.0",
|
||||||
|
"vue": "^3.3.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^4.1.0",
|
||||||
|
"vite": "link:../node_modules/vite",
|
||||||
|
"vite-plugin-inspect": "^0.8.3"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
|
||||||
|
<span>当前选中值:{{ checkedVal }}</span>
|
||||||
|
<tiny-alert description="type 为默认值 success"></tiny-alert>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checkedVal: 'Button1',
|
||||||
|
groupData: [
|
||||||
|
{ text: 'Button1', value: 'Button1' },
|
||||||
|
{ text: 'Button2', value: 'Button2' },
|
||||||
|
{ text: 'Button3', value: 'Button3' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -0,0 +1,4 @@
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import Inspect from 'vite-plugin-inspect'
|
||||||
|
import autoImportPlugin from '../dist/index.js'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue(), Inspect(), autoImportPlugin()],
|
||||||
|
define: {
|
||||||
|
'process.env': { ...process.env, TINY_MODE: 'pc' }
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.jsx', '.vue', '.ts']
|
||||||
|
}
|
||||||
|
})
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "@opentiny/unplugin-tiny-vue",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A vite auto import plugin for TinyVue",
|
||||||
|
"main": "dist/index.cjs",
|
||||||
|
"module": "dist/index.js",
|
||||||
|
"typings": "dist/index.d.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"require": "./dist/index.cjs",
|
||||||
|
"import": "./dist/index.js",
|
||||||
|
"types": "./dist/index.d.ts"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "pnpm run build --watch --ignore-watch example",
|
||||||
|
"build": "rimraf dist && tsup src/index.ts --dts --format cjs,esm",
|
||||||
|
"prepublishOnly": "pnpm build"
|
||||||
|
},
|
||||||
|
"type": "module",
|
||||||
|
"types": "dist/index.d.ts",
|
||||||
|
"author": "Tiny Vue Team",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git@github.com:opentiny/tiny-vue.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"vite-plugin",
|
||||||
|
"TinyVue",
|
||||||
|
"vite",
|
||||||
|
"auto-import"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"vite": ">=4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"magic-string": "^0.27.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"rimraf": "^5.0.5",
|
||||||
|
"tsup": "7.2.0",
|
||||||
|
"typescript": "^5.0.0",
|
||||||
|
"vite": "^4.3.8"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,62 @@
|
||||||
|
import MagicString from 'magic-string'
|
||||||
|
import type { Plugin } from 'vite'
|
||||||
|
|
||||||
|
function pascalCase(str: string) {
|
||||||
|
const camelCaseStr = str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
|
||||||
|
return camelCaseStr.charAt(0).toUpperCase() + camelCaseStr.slice(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const resolveVue = (code: string, s: MagicString) => {
|
||||||
|
const results: any = []
|
||||||
|
|
||||||
|
for (const match of code.matchAll(/_resolveComponent[0-9]*\("(.+?)"\)/g)) {
|
||||||
|
const matchedName = match[1]
|
||||||
|
if (match.index != null && matchedName && !matchedName.startsWith('_')) {
|
||||||
|
const start = match.index
|
||||||
|
const end = start + match[0].length
|
||||||
|
results.push({
|
||||||
|
rawName: matchedName,
|
||||||
|
replace: (resolved: string) => s.overwrite(start, end, resolved)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
|
const findComponent = (rawName: string, name: string, s: MagicString) => {
|
||||||
|
if (!name.match(/^Tiny[a-zA-Z]/)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
s.prepend(`import ${name} from '@opentiny/vue-${rawName.slice(5)}';\n`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const transformCode = (code) => {
|
||||||
|
const s = new MagicString(code)
|
||||||
|
const results = resolveVue(code, s)
|
||||||
|
|
||||||
|
for (const { rawName, replace } of results) {
|
||||||
|
const name = pascalCase(rawName)
|
||||||
|
findComponent(rawName, name, s)
|
||||||
|
replace(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = s.toString()
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function vitePluginAutoImport(): Plugin {
|
||||||
|
return {
|
||||||
|
name: '@opentiny/auto-import',
|
||||||
|
|
||||||
|
transform(code, id) {
|
||||||
|
// 不处理node_modules内的依赖
|
||||||
|
if (/\.(?:vue)$/.test(id) && !/(node_modules)/.test(id)) {
|
||||||
|
return {
|
||||||
|
code: transformCode(code),
|
||||||
|
map: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "ESNext",
|
||||||
|
"target": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"strict": true,
|
||||||
|
"declaration": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"outDir": "dist",
|
||||||
|
"lib": [
|
||||||
|
"ESNext"
|
||||||
|
],
|
||||||
|
"sourceMap": false,
|
||||||
|
"noEmitOnError": true,
|
||||||
|
"noImplicitAny": false
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/*",
|
||||||
|
"*.d.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"dist",
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
Loading…
Reference in New Issue