@pubinfo/vite 2.0.12 → 2.0.13

package/dist/index.d.ts

@@ -1,9 +1,31 @@
 import { UserConfig, UserConfigFnObject } from "rolldown-vite";
+import * as vite_plugin_vue_devtools0 from "vite-plugin-vue-devtools";
+import { VitePluginVueDevToolsOptions } from "vite-plugin-vue-devtools";
 import * as _pubinfo_unplugin_openapi0 from "@pubinfo/unplugin-openapi";
 import { Options } from "@pubinfo/unplugin-openapi";
 export * from "rolldown-vite";
 export * from "vite-plugin-fake-server/client";
 
+//#region src/plugins/built-in/chrome-devtools.d.ts
+/**
+ * Chrome DevTools 插件配置选项
+ */
+interface ChromeDevtoolsOptions {
+  /** 是否启用插件 */
+  enabled?: boolean;
+  /** 自定义端口，如果不指定则自动分配 */
+  port?: number;
+  /** 是否自动注入调试脚本到页面 */
+  autoInject?: boolean;
+  /** DevTools 面板访问路径 */
+  panelPath?: string;
+}
+/**
+ * 创建 Chrome DevTools 插件
+ * @param options 插件配置选项
+ * @returns Vite 插件
+ */
+//#endregion
 //#region src/plugins/built-in/inject-auto.d.ts
 interface InjectAutoOptions {
   id: string;
@@ -54,6 +76,12 @@ interface PubinfoConfig {
   openapi?: Options;
   /** `resolver` */
   resolver?: ResolverPluginOptions;
+  /** devtools */
+  devtools?: Omit<VitePluginVueDevToolsOptions, 'enabled'> & {
+    enabled?: boolean;
+  };
+  /** chrome devtools */
+  chromeDevtools?: ChromeDevtoolsOptions;
   /** `commitlint` */
   commitlint?: boolean | CommitlintOptions;
 }
@@ -72,6 +100,10 @@ declare function definePubinfoConfig(config: PubinfoConfig): {
   vite: UserConfigFnObject;
   openapi?: _pubinfo_unplugin_openapi0.Options;
   resolver?: ResolverPluginOptions;
+  devtools?: Omit<vite_plugin_vue_devtools0.VitePluginVueDevToolsOptions, "enabled"> & {
+    enabled?: boolean;
+  };
+  chromeDevtools?: ChromeDevtoolsOptions;
   commitlint?: boolean | CommitlintOptions;
 };
 /**
@@ -82,7 +114,11 @@ declare function defineModuleConfig(config: ModuleConfig): {
   moduleId: InjectAutoOptions["id"];
   openapi?: _pubinfo_unplugin_openapi0.Options;
   resolver?: ResolverPluginOptions;
+  devtools?: Omit<vite_plugin_vue_devtools0.VitePluginVueDevToolsOptions, "enabled"> & {
+    enabled?: boolean;
+  };
+  chromeDevtools?: ChromeDevtoolsOptions;
   commitlint?: boolean | CommitlintOptions;
 };
 //#endregion
-export { CommitlintOptions, ModuleConfig, PubinfoConfig, ResolverPluginOptions, defineModuleConfig, definePubinfoConfig };
+export { ChromeDevtoolsOptions, CommitlintOptions, ModuleConfig, PubinfoConfig, ResolverPluginOptions, defineModuleConfig, definePubinfoConfig };

package/dist/index.js

@@ -73,6 +73,209 @@ function getServerProxy(env, isProxy) {
 	return serverProxy;
 }
 
+//#endregion
+//#region src/plugins/built-in/chrome-devtools.ts
+/**
+* Chii 服务管理器
+*/
+var ChiiServiceManager = class {
+	port;
+	isStarted = false;
+	/**
+	* 启动 Chii 服务
+	* @param customPort 自定义端口
+	* @param vitePort Vite 开发服务器端口
+	* @param viteHost Vite 开发服务器主机
+	* @param panelPath DevTools 面板路径
+	* @returns 服务端口号
+	*/
+	async start(customPort, vitePort, viteHost, panelPath) {
+		if (this.isStarted && this.port) return this.port;
+		try {
+			const { start } = await this.importChii();
+			const port = customPort || this.generatePort(vitePort);
+			start({ port });
+			this.port = port;
+			this.isStarted = true;
+			return port;
+		} catch (error) {
+			console.warn("[pubinfo][chrome-devtools] 启动 Chii 失败:", error);
+			return;
+		}
+	}
+	/**
+	* 获取服务端口
+	*/
+	getPort() {
+		return this.port;
+	}
+	/**
+	* 检查服务是否已启动
+	*/
+	isServiceStarted() {
+		return this.isStarted && !!this.port;
+	}
+	/**
+	* 生成可用端口
+	* @param vitePort Vite 端口
+	* @returns 生成的端口号
+	*/
+	generatePort(vitePort) {
+		if (vitePort) return vitePort + 1e3;
+		return 9229 + Math.floor(Math.random() * 100);
+	}
+	/**
+	* 输出启动信息
+	* @param host 主机地址
+	* @param vitePort Vite 端口
+	* @param panelPath 面板路径
+	*/
+	logStartupInfo(host, vitePort, panelPath) {
+		if (!this.port) return;
+		const panelUrl = `${`http://${host}:${vitePort}`}${panelPath}`;
+		const colorUrl = (url) => chalk.cyan(url.replace(/:(\d+)\//, (_, port) => `:${chalk.bold(port)}/`));
+		console.log(`  ${chalk.green("➜")}  ${chalk.bold("Chrome DevTools")}: ${chalk.green(`Open ${colorUrl(panelUrl)} as a separate window`)}`);
+	}
+	/**
+	* 动态导入 chii
+	*/
+	async importChii() {
+		return await import(
+			/* @vite-ignore */
+			"chii"
+);
+	}
+};
+/**
+* DevTools 面板处理器
+*/
+var DevToolsPanelHandler = class {
+	panelPath;
+	serviceManager;
+	constructor(panelPath, serviceManager) {
+		this.panelPath = panelPath;
+		this.serviceManager = serviceManager;
+	}
+	/**
+	* 创建面板访问中间件
+	*/
+	createMiddleware(server) {
+		server.middlewares.use(async (req, res, next) => {
+			if (!this.isTargetPath(req.url)) return next();
+			const port = this.serviceManager.getPort();
+			if (!port) {
+				this.sendErrorResponse(res, "DevTools 后端服务未启动");
+				return;
+			}
+			try {
+				const devtoolsUrl = await this.getDevToolsUrl(port);
+				this.sendRedirectResponse(res, devtoolsUrl);
+			} catch (error) {
+				console.warn("[pubinfo][chrome-devtools] 获取 DevTools URL 失败:", error);
+				this.sendRedirectResponse(res, `http://127.0.0.1:${port}/`);
+			}
+		});
+	}
+	/**
+	* 检查是否为目标路径
+	*/
+	isTargetPath(url) {
+		if (!url) return false;
+		return url === this.panelPath || url === `${this.panelPath}/`;
+	}
+	/**
+	* 获取 DevTools URL
+	*/
+	async getDevToolsUrl(port) {
+		const firstTarget = (await (await fetch(`http://127.0.0.1:${port}/targets`)).json())?.targets?.[0];
+		if (firstTarget) {
+			const wsId = Math.random().toString(36).slice(2, 10);
+			return `http://127.0.0.1:${port}/front_end/chii_app.html?ws=${encodeURIComponent(`127.0.0.1:${port}/client/${wsId}?target=${firstTarget.id}`)}&rtc=false`;
+		}
+		return `http://127.0.0.1:${port}/`;
+	}
+	/**
+	* 发送错误响应
+	*/
+	sendErrorResponse(res, message) {
+		res.statusCode = 503;
+		res.end(message);
+	}
+	/**
+	* 发送重定向响应
+	*/
+	sendRedirectResponse(res, location) {
+		res.statusCode = 302;
+		res.setHeader("Location", location);
+		res.end();
+	}
+};
+/**
+* HTML 注入器
+*/
+var HtmlInjector = class {
+	serviceManager;
+	constructor(serviceManager) {
+		this.serviceManager = serviceManager;
+	}
+	/**
+	* 注入调试脚本到 HTML
+	*/
+	injectScript(html) {
+		const port = this.serviceManager.getPort();
+		if (!port) return html;
+		const injectedMarker = `//__chrome_devtools_target_${port}`;
+		if (html.includes(injectedMarker)) return html;
+		const scriptTag = this.createScriptTag(port, injectedMarker);
+		return this.insertScriptTag(html, scriptTag);
+	}
+	/**
+	* 创建脚本标签
+	*/
+	createScriptTag(port, marker) {
+		return `<script>${marker}<\/script>\n<script src="http://127.0.0.1:${port}/target.js" data-pubinfo-devtools="chrome"><\/script>`;
+	}
+	/**
+	* 插入脚本标签到 HTML
+	*/
+	insertScriptTag(html, scriptTag) {
+		if (/<head[\s\S]*?>/i.test(html)) return html.replace(/<head([\s\S]*?)>/i, (match) => `${match}\n${scriptTag}`);
+		return html.replace(/<body(.*?)>/i, (match) => `${match}\n${scriptTag}`);
+	}
+};
+/**
+* 创建 Chrome DevTools 插件
+* @param options 插件配置选项
+* @returns Vite 插件
+*/
+function createChromeDevtools(options = {}) {
+	const { enabled = true, port, autoInject = true, panelPath = "/__chrome_devtools" } = options;
+	if (!enabled) return null;
+	const serviceManager = new ChiiServiceManager();
+	const panelHandler = new DevToolsPanelHandler(panelPath, serviceManager);
+	const htmlInjector = new HtmlInjector(serviceManager);
+	return {
+		name: "pubinfo:chrome-devtools",
+		apply: "serve",
+		enforce: "post",
+		async configureServer(server) {
+			const vitePort = server.config.server.port || 5173;
+			const viteHost = typeof server.config.server.host === "string" ? server.config.server.host : "localhost";
+			await serviceManager.start(port, vitePort, viteHost, panelPath);
+			panelHandler.createMiddleware(server);
+			const _printUrls = server.printUrls;
+			server.printUrls = () => {
+				_printUrls();
+				serviceManager.logStartupInfo(viteHost, vitePort, panelPath);
+			};
+		},
+		transformIndexHtml(html) {
+			if (!autoInject) return html;
+			return htmlInjector.injectScript(html);
+		}
+	};
+}
+
 //#endregion
 //#region src/plugins/built-in/info.ts
 var Ctx$1 = class {
@@ -483,9 +686,8 @@ function createInjectCSS() {
 
 //#endregion
 //#region src/plugins/intergrations/inspector.ts
-function createInspector(env) {
-	const { VITE_APP_INSPECTOR } = env;
-	if (VITE_APP_INSPECTOR && VITE_APP_INSPECTOR === "true") return VueDevTools();
+function createInspector(devtoolsConfig) {
+	if (devtoolsConfig?.enabled) return VueDevTools({ ...devtoolsConfig });
 	else return null;
 }
 
@@ -536,7 +738,8 @@ function createVitePlugins(viteEnv, isBuild = false, config, type) {
 		createUnocss(),
 		createIcons(),
 		createMock(viteEnv, isBuild),
-		createInspector(viteEnv),
+		createInspector(config.devtools),
+		createChromeDevtools(config.chromeDevtools),
 		createOpenAPI(config.openapi),
 		createLibResolver(config.resolver),
 		createAppInfo(),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/vite",
   "type": "module",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -28,6 +28,7 @@
     "abort-controller": "^3.0.0",
     "boxen": "^8.0.1",
     "chalk": "^5.4.1",
+    "chii": "^1.15.5",
     "consola": "^3.4.2",
     "dayjs": "^1.11.13",
     "fast-glob": "^3.3.3",