forked from opentiny/tiny-vue
feat(plugin): auto import plugin (#1397)
feat(plugin): auto import plugin
This commit is contained in:
xiaoy
GitHub
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