Skip to content

Commit 6cf9e12

Browse files
committed
feat(plugin): auto import plugin
feat(plugin): auto import plugin
1 parent f08fb98 commit 6cf9e12

File tree

10 files changed

+237
-0
lines changed

10 files changed

+237
-0
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
example/

internals/unplugin-tiny-vue/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
## Usage
15+
16+
vite
17+
18+
```js
19+
// vite.config.js
20+
21+
import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
22+
23+
export default {
24+
plugins: [autoImportPlugin()]
25+
}
26+
```
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: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "unplugin-tiny-vue",
3+
"version": "1.0.0",
4+
"description": "A vite auto import plugin for TinyVue",
5+
"main": "dist/index.cjs",
6+
"module": "dist/index.js",
7+
"typings": "dist/index.d.ts",
8+
"exports": {
9+
".": {
10+
"require": "./dist/index.cjs",
11+
"import": "./dist/index.js",
12+
"types": "./dist/index.d.ts"
13+
}
14+
},
15+
"scripts": {
16+
"dev": "pnpm run build --watch --ignore-watch example",
17+
"build": "rimraf dist && tsup src/index.ts --dts --format cjs,esm",
18+
"prepublishOnly": "pnpm build"
19+
},
20+
"type": "module",
21+
"types": "dist/index.d.ts",
22+
"author": "Tiny Vue Team",
23+
"repository": {
24+
"type": "git",
25+
"url": "[email protected]:opentiny/tiny-vue.git"
26+
},
27+
"keywords": [
28+
"vite-plugin",
29+
"TinyVue",
30+
"vite",
31+
"auto-import"
32+
],
33+
"license": "MIT",
34+
"peerDependencies": {
35+
"vite": ">=4"
36+
},
37+
"dependencies": {
38+
"magic-string": "^0.27.0"
39+
},
40+
"devDependencies": {
41+
"rimraf": "^5.0.5",
42+
"tsup": "7.2.0",
43+
"typescript": "^5.0.0",
44+
"vite": "^4.3.8"
45+
}
46+
}
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)