Skip to content

Commit

Permalink
feat: 加上unplugin-vue-components自动引入支持
Browse files Browse the repository at this point in the history
  • Loading branch information
HOMEDO\zhangjiayun committed Aug 11, 2022
1 parent ed57d51 commit 1fabf99
Show file tree
Hide file tree
Showing 10 changed files with 160 additions and 64 deletions.
43 changes: 36 additions & 7 deletions README-zh-cn.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@ vite 自动生成 引入文件插件

## 快速开始
1. 安装
- vite2:
`npm i vite-plugin-autogeneration-import-file@">=1.0.0 < 2.0.0" -D`

- vite3:
`npm i vite-plugin-autogeneration-import-file@">=2.0.0 < 3.0.0" -D`


`npm i vite-plugin-autogeneration-import-file -D`
2. vite.config.js中使用


- package.json type module
```
//vite.config.js
import {default as autogenerationImportFile,getName} from 'vite-plugin-autogeneration-import-file';
import { defineConfig } from 'vite'
export default defineConfig({
Expand Down Expand Up @@ -41,6 +39,37 @@ export default defineConfig({
])]
});
```
- package.json type commonjs

```
//vite.config.js
import autoImport from 'vite-plugin-autogeneration-import-file';
import { defineConfig } from 'vite'
export default defineConfig({
root:'./index.html',
plugins: [autoImport.default([
{
pattern:['**/*.{ts,js}','*.{ts,js}'],
dir:'test/store/modules',
toFile:'test/store/module.ts',
name:(name)=>{
name = autoImport.getName(name);
return name[0].toUpperCase()+name.slice(1)+'Store';
}
},
{
pattern:['**/{Index.vue,index.ts,index.js}','*.{vue,ts,js}'],
dir:'test/components',
toFile:'test/types/components.d.ts',
template:'//import code\ndeclare module "@vue/runtime-core" {\n interface GlobalComponents {\n //key code\n }\n}\nexport {};',
codeTemplates:[
{key:'//import code\n',template:'import {{name}} from "{{path}}"\n'},
{key:' //key code\n',template:' {{name}}:typeof {{name}}\n'},
]
}
])]
});
```

## 插件配置说明(dirOptions)
```
Expand Down
43 changes: 34 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
# vite-plugin-autogeneration-import-file
Vite automatically generates import file plug-ins.

Support vite2 and vite^3.0.0-beta.
Support vite2 and vite3.

## 中文文档: [README-zh-cn.md](./README-zh-cn.md).

## Fast Start
1. Install
- vite2:
`npm i vite-plugin-autogeneration-import-file@">=1.0.0 < 2.0.0" -D`

- vite3:
`npm i vite-plugin-autogeneration-import-file@">=2.0.0 < 3.0.0" -D`

`npm i vite-plugin-autogeneration-import-file -D`
2. Example
- package.json type module
```
//vite.config.js
import {default as autogenerationImportFile,getName} from 'vite-plugin-autogeneration-import-file';
Expand Down Expand Up @@ -44,7 +39,37 @@ export default defineConfig({
])]
});
```

- package.json type commonjs

```
//vite.config.js
import autoImport from 'vite-plugin-autogeneration-import-file';
import { defineConfig } from 'vite'
export default defineConfig({
root:'./index.html',
plugins: [autoImport.default([
{
pattern:['**/*.{ts,js}','*.{ts,js}'],
dir:'test/store/modules',
toFile:'test/store/module.ts',
name:(name)=>{
name = autoImport.getName(name);
return name[0].toUpperCase()+name.slice(1)+'Store';
}
},
{
pattern:['**/{Index.vue,index.ts,index.js}','*.{vue,ts,js}'],
dir:'test/components',
toFile:'test/types/components.d.ts',
template:'//import code\ndeclare module "@vue/runtime-core" {\n interface GlobalComponents {\n //key code\n }\n}\nexport {};',
codeTemplates:[
{key:'//import code\n',template:'import {{name}} from "{{path}}"\n'},
{key:' //key code\n',template:' {{name}}:typeof {{name}}\n'},
]
}
])]
});
```
## Configuration Description(dirOptions)
```
interface codeTemplate { //Code Templates
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"dist"
],
"scripts": {
"test": "npm run build && vite --config ./test/vite.config.js",
"test": "npm run build && cd ./test && npm run dev",
"clean": "rimraf dist",
"build": "npm run clean && microbundle -f esm,cjs",
"release": "release-it",
Expand Down Expand Up @@ -47,6 +47,6 @@
"micromatch": "^4.0.5"
},
"peerDependencies": {
"vite": "^3.0.0-beta"
"vite": ">2.0.2"
}
}
98 changes: 63 additions & 35 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,19 @@ import * as fs from 'fs';
import * as path from "path";
import { normalizePath } from 'vite';
let isServer = false;
let loadFiles: string[] = [];
let tmpRemoves: string[] = [];
let loadFiles: {fileName:string,name:string,dir:string}[][] = [];
let tmpRemovePaths: string[] = [];
const toFileContents: Map<string, string> = new Map();
//path转驼峰变量名并剔除最后的index/Index
export const getName = function (fileName: string, nameTemplate = '{{name}}'): string {
export const getName = function (fileName: string, nameTemplate:string | ((name: string) => string) = '{{name}}'): string {
if (typeof nameTemplate == 'function') {
return nameTemplate(fileName);
}
const index = fileName.lastIndexOf('.');
if (index > 0) {
fileName = fileName.slice(0, index);
}
let fileNameArr = nameTemplate.replace(/\{\{name\}}/g, fileName.replace(/\\/g, '/')).replace(/\//g, '_').split('_');
let fileNameArr = nameTemplate.replace(/\{\{name\}}/g, fileName.replace(/\\/g, '/')).replace(/[\/-]/g, '_').split('_');
if (fileNameArr[fileNameArr.length - 1] == 'index' || fileNameArr[fileNameArr.length - 1] == 'Index') {
fileNameArr.pop();
}
Expand Down Expand Up @@ -46,7 +49,7 @@ const getFileImportPath = function (dir: string, fileName: string): string {
if (fileName.endsWith('.ts')) {
fileName = fileName.slice(0, -3);
}
return normalizePath(fileName);
return fileName;
}

//获取导入文件代码
Expand All @@ -60,13 +63,7 @@ const getCode = function (dir: string,
if (!relativePath.startsWith('../')) {
relativePath = './' + relativePath;
}
if (typeof name == 'function') {
fileName = name(getName(fileName));

} else {
fileName = getName(fileName, name);
}

fileName = getName(fileName, name);
let codeTemplate: codeTemplate[] = JSON.parse(JSON.stringify(codeTemplates));
if (!codeTemplate.length) {
codeTemplate.push({
Expand All @@ -80,7 +77,9 @@ const getCode = function (dir: string,
return codeTemplate;
}

const loadPath = async function (dir: string,
const loadPath = async function (
optionIndex:number,
dir: string,
toFile: string,
pattern: fg.Pattern | fg.Pattern[],
options: fg.Options,
Expand All @@ -89,13 +88,11 @@ const loadPath = async function (dir: string,
codeTemplates: codeTemplate[] = []) {
const entries = await fg(pattern, Object.assign({ cwd: dir, dot: true }, options));
let str = template ? template : '//当前文件由vite-plugin-autogeneration-import-file自动生成\n//code';
entries.forEach((fileName: string) => {
entries.forEach((fileName) => {
getCode(dir, fileName, toFile, name, codeTemplates).forEach((item) => {
str = str.replace(item.key, item.value + item.key);
});
if (isServer) {
loadFiles.push(fileName);
}
loadFiles[optionIndex].push({fileName,name:getName(fileName,name),dir});
});
str && fs.writeFileSync(toFile, str);
console.log(`mk ${toFile} success\n`)
Expand All @@ -110,11 +107,34 @@ export function readFileSync(...args: Parameters<typeof fs.readFileSync>): Retur
}
}

export function resolvers(options={include:[0]}){
return [
{
type: 'component',
resolve: async (componentName: string) => {
for(const index of options.include)
{
let componentInfo = loadFiles[index].find(({name})=>name == componentName);
if(componentInfo){
return path.resolve(componentInfo.dir, componentInfo.fileName)
}
}
},
},
// {
// type: 'directive',
// resolve: async (name: string) => {
// return resolveDirective(name, await resolveOptions())
// },
// },
]
}

export default function loadPathsPlugin(dirOptions: dirOptions) {
return {
name: 'load-path-ts',
configureServer() {//服务器启动时被调用
dirOptions.forEach(item => {
dirOptions.forEach((item,index) => {
isServer = true;
fs.watch(item.dir, { recursive: true },
function (eventType: fs.WatchEventType, fileName: string) {
Expand All @@ -130,56 +150,64 @@ export default function loadPathsPlugin(dirOptions: dirOptions) {
if (micromatch.isMatch(fileName, item.pattern)) {
changeFiles = [fileName];
}
} else if (tmpRemoves.length && fs.existsSync(path.resolve(filePath, tmpRemoves[0]))) {
} else if (tmpRemovePaths.length && fs.existsSync(path.resolve(filePath, tmpRemovePaths[0]))) {
//如果是重命名文件夹
changeFiles = tmpRemoves;
changeFiles = tmpRemovePaths;
prefix = fileName + '/';
}
changeFiles.forEach(fileName => {
const code = getCode(item.dir, prefix + fileName, item.toFile, item.name, item.codeTemplates);
code.forEach((codeItem) => {
str = str.replace(codeItem.key, codeItem.value + codeItem.key);
});
loadFiles.push(prefix + fileName);
loadFiles[index].push({fileName:prefix + fileName,name:getName(prefix + fileName,item.name),dir:item.dir});
})
if (changeFiles.length) {
toFileContents.set(item.toFile, str);
fs.writeFileSync(item.toFile, str);
console.log(item.toFile + ' add code');
}
tmpRemoves = [];
tmpRemovePaths = [];
} else {//不存在文件
let changeFiles = loadFiles.filter(name => name.startsWith(fileName + '/') || name == fileName);
changeFiles.forEach(fileName => {
const code = getCode(item.dir, fileName, item.toFile, item.name, item.codeTemplates);
code.forEach((codeItem) => {
str = str.replace(codeItem.value, '');
});
loadFiles.slice(loadFiles.indexOf(fileName), 1);
});
let changeFiles:string[] = []
loadFiles[index].slice(0).forEach((val,k)=>{
if(val.fileName.startsWith(fileName + '/') || val.fileName == fileName){
const code = getCode(item.dir, val.fileName, item.toFile, item.name, item.codeTemplates);
code.forEach((codeItem) => {
str = str.replace(codeItem.value, '');
});
loadFiles[index].slice(k, 1);
changeFiles.push(val.fileName)
}
})
if (changeFiles.length) {
toFileContents.set(item.toFile, str);
fs.writeFileSync(item.toFile, str);
if (changeFiles[0] !== fileName) {
tmpRemoves = changeFiles.map(name => name.slice(fileName.length + 1));
if (changeFiles[0] !== fileName) {//代表是文件夹改变
tmpRemovePaths = changeFiles.map(name => name.slice(fileName.length + 1));
} else {
tmpRemoves = [];
tmpRemovePaths = [];
}
console.log(item.toFile + ' remove code');
}
}
}
console.log('loadFiles',loadFiles)
});
})
},
async buildStart() {
let proArr: Promise<unknown>[] = [];
dirOptions.forEach(item => {
proArr.push(loadPath(item.dir, item.toFile, item.pattern, item.options || {}, item.name, item.template, item.codeTemplates));
dirOptions.forEach((item,index) => {
loadFiles[index] = [];
proArr.push(loadPath(index,item.dir, item.toFile, item.pattern, item.options || {}, item.name, item.template, item.codeTemplates));
})
await Promise.allSettled(proArr);
console.log('loadFiles',JSON.stringify(loadFiles))
if (isServer) {
console.log(11111);
dirOptions.forEach(item => {
toFileContents.set(item.toFile, readFileSync(item.toFile, 'utf8') as string);
fs.watch(item.toFile, {}, function (eventType: fs.WatchEventType, fileName: string) {
const content = toFileContents.get(item.toFile);
if (content !== undefined && content !== readFileSync(item.toFile, 'utf8')) {
Expand Down
File renamed without changes.
16 changes: 16 additions & 0 deletions test/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev":"vite",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vite": "^3.0.5",
"vite-plugin-autogeneration-import-file": "file:.."
}
}
1 change: 0 additions & 1 deletion test/store/module.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
//当前文件由vite-plugin-autogeneration-import-file自动生成
export { default as InfoStore } from "./modules/info"
//code
1 change: 0 additions & 1 deletion test/store/modules/info.ts

This file was deleted.

4 changes: 2 additions & 2 deletions test/types/components.d.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import a from "../components/a.vue"
import b from "../components/b.vue"
import adavs from "../components/adavs/Index.vue"
import cdd from "../components/cdd/Index.vue"
//import code
declare module "@vue/runtime-core" {
interface GlobalComponents {
a:typeof a
b:typeof b
adavs:typeof adavs
cdd:typeof cdd
//key code
}
}
Expand Down

0 comments on commit 1fabf99

Please sign in to comment.