From 04ea9e388503ba1200d115bc4cb589452ed954fe Mon Sep 17 00:00:00 2001
From: ruan-cat <1219043956@qq.com>
Date: Tue, 22 Oct 2024 15:52:25 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix(vite-plugin-autogeneration-i?=
 =?UTF-8?q?mport-file,vite-plugin-autogeneration-import-file-test-app-1):?=
 =?UTF-8?q?=20=E5=AE=8C=E6=88=90bug=E4=BF=AE=E5=A4=8D=EF=BC=8C=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E4=BA=86=E7=BB=84=E4=BB=B6=E7=9A=84=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/src/App.vue                           |  10 +-
 .../app/src/myComponents/test.vue             |   4 +-
 .../app/src/myComponents/test/dir/index.vue   |   4 +-
 .../app/template/components.template.d.ts     |  37 +++++
 .../app/vite.config.ts                        |  92 +++++++-----
 .../core/src/index.ts                         | 134 ++++++++++++------
 6 files changed, 196 insertions(+), 85 deletions(-)
 create mode 100644 vite-plugin-autogeneration-import-file/app/template/components.template.d.ts

diff --git a/vite-plugin-autogeneration-import-file/app/src/App.vue b/vite-plugin-autogeneration-import-file/app/src/App.vue
index f1f3b4b..1112da2 100644
--- a/vite-plugin-autogeneration-import-file/app/src/App.vue
+++ b/vite-plugin-autogeneration-import-file/app/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import test from "./resovleComponents/resolve.vue";
+import TestResolve from "./resovleComponents/resolve.vue";
 </script>
 
 <template>
@@ -14,9 +14,11 @@ import test from "./resovleComponents/resolve.vue";
 			<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
 		</a>
 	</div>
-	<HelloWorld msg="Vite + Vue" />
-	<test></test>
-	<test-dir></test-dir>
+
+	<!-- 已经被注册成功 -->
+	<TestResolve></TestResolve>
+	<ComponentHelloWorld msg="看看自定义的 ComponentHelloWorld 显示？"></ComponentHelloWorld>
+	<MyComponentTestDir></MyComponentTestDir>
 </template>
 
 <style scoped>
diff --git a/vite-plugin-autogeneration-import-file/app/src/myComponents/test.vue b/vite-plugin-autogeneration-import-file/app/src/myComponents/test.vue
index e598902..3694ddc 100644
--- a/vite-plugin-autogeneration-import-file/app/src/myComponents/test.vue
+++ b/vite-plugin-autogeneration-import-file/app/src/myComponents/test.vue
@@ -1 +1,3 @@
-<template>test</template>
+<template>
+	<h3 style="background-color: aquamarine">test</h3>
+</template>
diff --git a/vite-plugin-autogeneration-import-file/app/src/myComponents/test/dir/index.vue b/vite-plugin-autogeneration-import-file/app/src/myComponents/test/dir/index.vue
index db83f3d..13dfeaf 100644
--- a/vite-plugin-autogeneration-import-file/app/src/myComponents/test/dir/index.vue
+++ b/vite-plugin-autogeneration-import-file/app/src/myComponents/test/dir/index.vue
@@ -1 +1,3 @@
-<template>test dir</template>
+<template>
+	<h2>test-dir</h2>
+</template>
diff --git a/vite-plugin-autogeneration-import-file/app/template/components.template.d.ts b/vite-plugin-autogeneration-import-file/app/template/components.template.d.ts
new file mode 100644
index 0000000..eebf296
--- /dev/null
+++ b/vite-plugin-autogeneration-import-file/app/template/components.template.d.ts
@@ -0,0 +1,37 @@
+/* eslint-disable */
+// @ts-nocheck
+
+/**
+ * 这是特定模板
+ *
+ * 让 vite-plugin-autogeneration-import-file 生成 GlobalComponents。
+ *
+ * 但是有特别的文件命名规则
+ *
+ * @author f1-阮喵喵
+ */
+
+// TODO: 尝试使用新的方式实现组件类型生成
+/* prettier-ignore */
+declare module "vue" {
+	export interface GlobalComponents {
+		//code
+	}
+}
+
+// 有疑惑 疑似无效
+// import '@vue/runtime-core'
+// export {};
+// declare module "@vue/runtime-core" {
+// 	export interface GlobalComponents {
+// 		//notuse-now-code-notuse-now
+// 	}
+// }
+
+/* prettier-ignore */
+declare global {
+	//typeCode
+}
+
+/* prettier-ignore */
+export {};
diff --git a/vite-plugin-autogeneration-import-file/app/vite.config.ts b/vite-plugin-autogeneration-import-file/app/vite.config.ts
index aef14e0..6f6b8f0 100644
--- a/vite-plugin-autogeneration-import-file/app/vite.config.ts
+++ b/vite-plugin-autogeneration-import-file/app/vite.config.ts
@@ -2,6 +2,7 @@ import { dirname, resolve } from "node:path";
 import { fileURLToPath, URL } from "node:url";
 import * as fs from "node:fs";
 
+import { upperFirst } from "lodash-es";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import Components from "unplugin-vue-components/vite";
@@ -16,6 +17,42 @@ function pathResolve(dir: string) {
 	return resPath;
 }
 
+const autoImportTemplatePath = <const>"./template/components.template.d.ts";
+
+/** 文件生成模板 */
+function createAutoImportTemplate() {
+	return fs.readFileSync(pathResolve(autoImportTemplatePath), "utf-8");
+}
+
+const autoImportTemplate = createAutoImportTemplate();
+
+type DirOptions = Parameters<typeof autoImport>["0"];
+type DirOption = DirOptions[number];
+type _DirOptionName = DirOption["name"];
+
+type _DirOptionNameNotString = Exclude<_DirOptionName, string>;
+type DirOptionName = NonNullable<_DirOptionNameNotString>;
+
+/**
+ * 创建名称生成函数
+ * @description
+ * 用于诸如特定的名称前缀 便于实现模块注册
+ */
+function createDirOptionNameFunction(prefix: string = "") {
+	/**
+	 * 组件名命名规则支持字符串模板和函数
+	 * @description
+	 * 设置首字母为大写
+	 */
+	const dirOptionName: DirOptionName = function name(fileName) {
+		const resFileName = getName(fileName);
+		const resFileNameWithPrefix = <const>`${upperFirst(prefix)}${upperFirst(resFileName)}`;
+		return resFileNameWithPrefix;
+	};
+
+	return dirOptionName;
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
 	server: {
@@ -32,28 +69,23 @@ export default defineConfig({
 				pattern: ["**/{index.vue,index.ts,index.js}", "*.{vue,ts,js}"],
 				dir: pathResolve("./src/components"),
 				toFile: pathResolve("./types/generate-types-components.d.ts"),
-				template: `
-import '@vue/runtime-core'
-export {}
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    //import code
-  }
-}`,
-				name: "_{{name}}",
-				codeTemplates: [{ key: "//import code", template: '{{name}}: typeof import("{{path}}")["default"]\n    ' }],
+				template: autoImportTemplate,
+				// name: "_{{name}}",
+				name: createDirOptionNameFunction("Component"),
+				// codeTemplates: [{ key: "//code", template: 'Component{{name}}: typeof import("{{path}}")["default"]\n    ' }],
+				codeTemplates: [{ key: "//code", template: '{{name}}: typeof import("{{path}}")["default"]\n    ' }],
 			},
 
 			// module
 			{
 				pattern: ["**/*.{ts,js}", "*.{ts,js}"],
-				// dir: pathResolve("./src/store/modules"),
 				dir: pathResolve("./src/store"),
 				toFile: pathResolve("./types/generate-types-store-modules.d.ts"),
-				name: (name) => {
-					name = getName(name);
-					return name[0].toUpperCase() + name.slice(1) + "Store";
-				},
+				name: createDirOptionNameFunction(),
+				// name: (name) => {
+				// 	name = getName(name);
+				// 	return name[0].toUpperCase() + name.slice(1) + "Store";
+				// },
 			},
 
 			// myComponents
@@ -61,16 +93,11 @@ declare module '@vue/runtime-core' {
 				pattern: ["**/{index.vue,index.ts,index.js}", "*.{vue,ts,js}"],
 				dir: pathResolve("./src/myComponents"),
 				toFile: pathResolve("./types/generate-types-myComponents.d.ts"),
-				template: `
-import '@vue/runtime-core'
-export {}
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    //import code
-  }
-}`,
-				name: "_{{name}}",
-				codeTemplates: [{ key: "//import code", template: '{{name}}: typeof import("{{path}}")["default"]\n    ' }],
+				template: autoImportTemplate,
+				// name: "_{{name}}",
+				name: createDirOptionNameFunction("MyComponent"),
+				// codeTemplates: [{ key: "//code", template: 'MyComponent{{name}}: typeof import("{{path}}")["default"]\n    ' }],
+				codeTemplates: [{ key: "//code", template: '{{name}}: typeof import("{{path}}")["default"]\n    ' }],
 			},
 
 			// myDirective
@@ -78,16 +105,11 @@ declare module '@vue/runtime-core' {
 				pattern: ["**/{index.vue,index.ts,index.js}", "*.{vue,ts,js}"],
 				dir: pathResolve("./src/myDirective"),
 				toFile: pathResolve("./types/generate-types-myDirective.d.ts"),
-				template: `
-import '@vue/runtime-core'
-export {}
-declare module '@vue/runtime-core' {
-  export interface ComponentCustomProperties {
-    //import code
-  }
-}`,
-				name: "V_{{name}}",
-				codeTemplates: [{ key: "//import code", template: '{{name}}: typeof import("{{path}}")["default"]\n    ' }],
+				template: autoImportTemplate,
+				// name: "V_{{name}}",
+				name: createDirOptionNameFunction("MyDirective"),
+				// codeTemplates: [{ key: "//code", template: 'MyDirective{{name}}: typeof import("{{path}}")["default"]\n    ' }],
+				codeTemplates: [{ key: "//code", template: '{{name}}: typeof import("{{path}}")["default"]\n    ' }],
 			},
 		]),
 
diff --git a/vite-plugin-autogeneration-import-file/core/src/index.ts b/vite-plugin-autogeneration-import-file/core/src/index.ts
index efb171a..c3ad466 100644
--- a/vite-plugin-autogeneration-import-file/core/src/index.ts
+++ b/vite-plugin-autogeneration-import-file/core/src/index.ts
@@ -9,18 +9,40 @@ interface codeTemplate {
 	template: string; //模板 codeTemplate.template里的{{name}}会被替换为name
 	value?: string; //根据模板自动生成，不可传入
 }
-type dirOptions = {
-	dir: string; //遍历路径
-	toFile: string; //写入目标文件地址
-	pattern: fg.Pattern | fg.Pattern[]; //匹配规则 参考 fast-glob
-	options?: fg.Options; //fast-glob 匹配参数
-	name?: string | ((fileName: string) => string); //名称 当为字符串时里面的{{name}}会被替换为格式化后的驼峰名称,
-	nameFunction?: (name: string) => string; //自定义名称函数
-	codeTemplates?: codeTemplate[]; //代码模板
-	template?: string; //文件模板 会递归循环codeTemplates把template里的codeTemplate.key替换为对应的codeTemplate.value
-}[];
 
-//path转驼峰变量名并剔除最后的index/Index
+type DirOption = {
+	/** 遍历路径 */
+	dir: string;
+
+	/** 写入目标文件地址 */
+	toFile: string;
+
+	/** 匹配规则 参考 fast-glob */
+	pattern: fg.Pattern | fg.Pattern[];
+
+	/** fast-glob 匹配参数 */
+	options?: fg.Options;
+
+	/** 名称 当为字符串时里面的{{name}}会被替换为格式化后的驼峰名称, */
+	name?: string | ((fileName: string) => string);
+
+	/** 自定义名称函数 */
+	nameFunction?: (name: string) => string;
+
+	/** 代码模板 */
+	codeTemplates?: codeTemplate[];
+
+	/**
+	 * 文件模板
+	 * @description
+	 * 会递归循环codeTemplates把template里的codeTemplate.key替换为对应的codeTemplate.value
+	 */
+	template?: string;
+};
+
+type DirOptions = DirOption[];
+
+/** path转驼峰变量名并剔除最后的index/Index */
 export const getName = function (
 	fileName: string,
 	nameTemplate: string | ((name: string) => string) = "{{name}}",
@@ -45,7 +67,7 @@ export const getName = function (
 	return fileNameArr.join("");
 };
 
-//获取导入文件绝对地址
+/** 获取导入文件绝对地址 */
 export const getFileImportPath = function (dir: string, fileName: string): string {
 	fileName = path.resolve(dir, fileName);
 	if (fileName.endsWith(".ts")) {
@@ -54,7 +76,7 @@ export const getFileImportPath = function (dir: string, fileName: string): strin
 	return fileName;
 };
 
-//获取导入文件代码
+/** 获取导入文件代码 */
 export const getCode = function (
 	dir: string,
 	fileName: string,
@@ -113,32 +135,39 @@ export const createPlugin = () => {
 			getCode(dir, fileName, toFile, name, codeTemplates).forEach((item) => {
 				str = str.replace(item.key, item.value + item.key);
 			});
+
 			loadFiles[optionIndex].push({
 				fileName,
 				name: getName(fileName, name),
 				dir,
 			});
 		});
+
+		console.log(" 完成 loadFiles 准备 \n ", loadFiles);
+
 		str && fs.writeFileSync(toFile, str);
 		console.log(`mk ${toFile} success\n`);
 	};
 
-	//可由unplugin-vue-components使用
+	// 可由unplugin-vue-components使用
 	function resolver(componentInclude: number[], directiveInclude: number[] = []): any[] {
 		let result = [];
 		if (componentInclude.length) {
 			result.push({
 				type: "component",
 				resolve: async (componentName: string) => {
+					// console.log(" 看看外面已经被扫描到的组件名称有哪些？ ", componentName);
 					for (const index of componentInclude) {
 						let componentInfo = loadFiles[index].find(({ name }) => name == componentName);
 						if (componentInfo) {
+							// console.log(" 那些文件被注册了？ \n ", componentName, componentInfo);
 							return normalizePath(path.resolve(componentInfo.dir, componentInfo.fileName));
 						}
 					}
 				},
 			});
 		}
+
 		if (directiveInclude.length) {
 			result.push({
 				type: "directive",
@@ -154,28 +183,30 @@ export const createPlugin = () => {
 				},
 			});
 		}
+
 		return result;
 	}
 
-	function loadPathsPlugin(dirOptions: dirOptions) {
+	function loadPathsPlugin(dirOptions: DirOptions) {
 		return {
 			name: "load-path-ts",
+
 			configureServer() {
 				//服务器启动时被调用
-				dirOptions.forEach((item, index) => {
+				dirOptions.forEach((dirOption, index) => {
 					isServer = true;
-					fs.watch(item.dir, { recursive: true }, function (eventType: fs.WatchEventType, fileName: string) {
+					fs.watch(dirOption.dir, { recursive: true }, function (eventType: fs.WatchEventType, fileName: string) {
 						fileName = normalizePath(fileName);
 						if (eventType === "rename") {
-							let str = <string>readFileSync(item.toFile, "utf8") || "";
-							let filePath = path.resolve(item.dir, fileName);
+							let str = <string>readFileSync(dirOption.toFile, "utf8") || "";
+							let filePath = path.resolve(dirOption.dir, fileName);
 							if (fs.existsSync(filePath)) {
 								//存在
 								let stat = fs.lstatSync(filePath);
 								let changeFiles: string[] = [];
 								let prefix = "";
 								if (stat.isFile()) {
-									if (micromatch.isMatch(fileName, item.pattern)) {
+									if (micromatch.isMatch(fileName, dirOption.pattern)) {
 										changeFiles = [fileName];
 									}
 								} else if (tmpRemovePaths.length && fs.existsSync(path.resolve(filePath, tmpRemovePaths[0]))) {
@@ -184,20 +215,26 @@ export const createPlugin = () => {
 									prefix = fileName + "/";
 								}
 								changeFiles.forEach((fileName) => {
-									const code = getCode(item.dir, prefix + fileName, item.toFile, item.name, item.codeTemplates);
+									const code = getCode(
+										dirOption.dir,
+										prefix + fileName,
+										dirOption.toFile,
+										dirOption.name,
+										dirOption.codeTemplates,
+									);
 									code.forEach((codeItem) => {
 										str = str.replace(codeItem.key, codeItem.value + codeItem.key);
 									});
 									loadFiles[index].push({
 										fileName: prefix + fileName,
-										name: getName(prefix + fileName, item.name),
-										dir: item.dir,
+										name: getName(prefix + fileName, dirOption.name),
+										dir: dirOption.dir,
 									});
 								});
 								if (changeFiles.length) {
-									toFileContents.set(item.toFile, str);
-									fs.writeFileSync(item.toFile, str);
-									console.log(item.toFile + " add code");
+									toFileContents.set(dirOption.toFile, str);
+									fs.writeFileSync(dirOption.toFile, str);
+									console.log(dirOption.toFile + " add code");
 								}
 								tmpRemovePaths = [];
 							} else {
@@ -206,7 +243,13 @@ export const createPlugin = () => {
 								let delNumber = 0;
 								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);
+										const code = getCode(
+											dirOption.dir,
+											val.fileName,
+											dirOption.toFile,
+											dirOption.name,
+											dirOption.codeTemplates,
+										);
 										code.forEach((codeItem) => {
 											str = str.replace(codeItem.value, "");
 										});
@@ -216,46 +259,48 @@ export const createPlugin = () => {
 									}
 								});
 								if (changeFiles.length) {
-									toFileContents.set(item.toFile, str);
-									fs.writeFileSync(item.toFile, str);
+									toFileContents.set(dirOption.toFile, str);
+									fs.writeFileSync(dirOption.toFile, str);
 									if (changeFiles[0] !== fileName) {
 										//代表是文件夹改变
 										tmpRemovePaths = changeFiles.map((name) => name.slice(fileName.length + 1));
 									} else {
 										tmpRemovePaths = [];
 									}
-									console.log(item.toFile + " remove code");
+									console.log(dirOption.toFile + " remove code");
 								}
 							}
 						}
 					});
 				});
 			},
+
 			async buildStart() {
 				let proArr: Promise<unknown>[] = [];
-				dirOptions.forEach((item, index) => {
+				dirOptions.forEach((dirOption, index) => {
 					loadFiles[index] = [];
 					proArr.push(
 						loadPath(
 							index,
-							item.dir,
-							item.toFile,
-							item.pattern,
-							item.options || {},
-							item.name,
-							item.template,
-							item.codeTemplates,
+							dirOption.dir,
+							dirOption.toFile,
+							dirOption.pattern,
+							dirOption.options || {},
+							dirOption.name,
+							dirOption.template,
+							dirOption.codeTemplates,
 						),
 					);
 				});
+
 				await Promise.allSettled(proArr);
 				if (isServer) {
-					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")) {
-								fs.writeFileSync(item.toFile, content);
+					dirOptions.forEach((dirOption) => {
+						toFileContents.set(dirOption.toFile, readFileSync(dirOption.toFile, "utf8") as string);
+						fs.watch(dirOption.toFile, {}, function (eventType: fs.WatchEventType, fileName: string) {
+							const content = toFileContents.get(dirOption.toFile);
+							if (content !== undefined && content !== readFileSync(dirOption.toFile, "utf8")) {
+								fs.writeFileSync(dirOption.toFile, content);
 							}
 						});
 					});
@@ -263,5 +308,6 @@ export const createPlugin = () => {
 			},
 		};
 	}
+
 	return { autoImport: loadPathsPlugin, resolver };
 };