Skip to content

Commit 006f645

Browse files
committed
feat(plugin): auto import plugin
feat(plugin): auto import plugin
1 parent eec945e commit 006f645

File tree

10 files changed

+209
-0
lines changed

10 files changed

+209
-0
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
example/
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# unplugin-tiny-vue
2+
3+
A auto import plugin. Same function as [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components).
4+
No import and component registration required.
5+
6+
## Installation
7+
8+
```bash
9+
npm i @opentiny/unplugin-tiny-vue -D
10+
11+
yarn i @opentiny/unplugin-tiny-vue -D
12+
```
13+
14+
vite
15+
16+
```js
17+
// vite.config.js
18+
19+
import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
20+
21+
export default {
22+
plugins: [autoImportPlugin()]
23+
}
24+
```
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Auto Import</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.js"></script>
11+
</body>
12+
</html>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "my-vue-app",
3+
"description": "",
4+
"author": "",
5+
"version": "0.0.0",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@opentiny/vue": "~3.12.1",
13+
"@opentiny/vue-alert": "~3.13.0",
14+
"@opentiny/vue-button-group": "~3.13.0",
15+
"@opentiny/vue-icon": "^3.12.0",
16+
"vue": "^3.3.9"
17+
},
18+
"devDependencies": {
19+
"@vitejs/plugin-vue": "^4.1.0",
20+
"vite": "link:../node_modules/vite",
21+
"vite-plugin-inspect": "^0.8.3"
22+
}
23+
}
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
4+
<span>当前选中值:{{ checkedVal }}</span>
5+
<tiny-alert description="type 为默认值 success"></tiny-alert>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
data() {
12+
return {
13+
checkedVal: 'Button1',
14+
groupData: [
15+
{ text: 'Button1', value: 'Button1' },
16+
{ text: 'Button2', value: 'Button2' },
17+
{ text: 'Button3', value: 'Button3' }
18+
]
19+
}
20+
}
21+
}
22+
</script>
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
import Inspect from 'vite-plugin-inspect'
4+
import autoImportPlugin from '../dist/index.js'
5+
6+
// https://vitejs.dev/config/
7+
export default defineConfig({
8+
plugins: [vue(), Inspect(), autoImportPlugin()],
9+
define: {
10+
'process.env': { ...process.env, TINY_MODE: 'pc' }
11+
},
12+
resolve: {
13+
extensions: ['.js', '.jsx', '.vue', '.ts']
14+
}
15+
})
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "unplugin-tiny-vue",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "pnpm run build --watch --ignore-watch examples",
8+
"build": "rimraf dist && tsup src/index.ts --dts --format cjs,esm"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"magic-string": "^0.27.0",
15+
"rimraf": "^5.0.5",
16+
"tsup": "7.2.0",
17+
"typescript": "^5.0.0",
18+
"vite": "^4.3.8"
19+
}
20+
}
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import MagicString from 'magic-string'
2+
import type { Plugin } from 'vite'
3+
4+
function pascalCase(str: string) {
5+
const camelCaseStr = str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
6+
return camelCaseStr.charAt(0).toUpperCase() + camelCaseStr.slice(1)
7+
}
8+
9+
const resolveVue = (code: string, s: MagicString) => {
10+
const results: any = []
11+
12+
for (const match of code.matchAll(/_resolveComponent[0-9]*\("(.+?)"\)/g)) {
13+
const matchedName = match[1]
14+
if (match.index != null && matchedName && !matchedName.startsWith('_')) {
15+
const start = match.index
16+
const end = start + match[0].length
17+
results.push({
18+
rawName: matchedName,
19+
replace: (resolved: string) => s.overwrite(start, end, resolved)
20+
})
21+
}
22+
}
23+
24+
return results
25+
}
26+
27+
const findComponent = (rawName: string, name: string, s: MagicString) => {
28+
if (!name.match(/^Tiny[a-zA-Z]/)) {
29+
return
30+
}
31+
s.prepend(`import ${name} from '@opentiny/vue-${rawName.slice(5)}';\n`)
32+
}
33+
34+
const transformCode = (code) => {
35+
const s = new MagicString(code)
36+
const results = resolveVue(code, s)
37+
38+
for (const { rawName, replace } of results) {
39+
const name = pascalCase(rawName)
40+
findComponent(rawName, name, s)
41+
replace(name)
42+
}
43+
44+
const result = s.toString()
45+
return result
46+
}
47+
48+
export default function vitePluginAutoImport(): Plugin {
49+
return {
50+
name: '@opentiny/auto-import',
51+
52+
transform(code, id) {
53+
// 不处理node_modules内的依赖
54+
if (/\.(?:vue)$/.test(id) && !/(node_modules)/.test(id)) {
55+
return {
56+
code: transformCode(code),
57+
map: null
58+
}
59+
}
60+
}
61+
}
62+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"compilerOptions": {
3+
"module": "ESNext",
4+
"target": "esnext",
5+
"moduleResolution": "node",
6+
"strict": true,
7+
"declaration": true,
8+
"noUnusedLocals": true,
9+
"esModuleInterop": true,
10+
"outDir": "dist",
11+
"lib": [
12+
"ESNext"
13+
],
14+
"sourceMap": false,
15+
"noEmitOnError": true,
16+
"noImplicitAny": false
17+
},
18+
"include": [
19+
"src/*",
20+
"*.d.ts"
21+
],
22+
"exclude": [
23+
"dist",
24+
"node_modules"
25+
]
26+
}

0 commit comments

Comments
 (0)