@mcpc-tech/unplugin-dev-inspector-mcp 0.0.10 → 0.0.13

package/dist/loader.cjs

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+const require_chunk = require('./chunk.cjs');
+const require_vue_transform = require('./vue-transform.cjs');
+
+//#region src/loader.ts
+function devInspectorLoader(source) {
+	if (!((this.getOptions() || {}).enabled ?? process.env.NODE_ENV !== "production")) return source;
+	const resourcePath = this.resourcePath;
+	if (resourcePath.match(/\.(jsx|tsx)$/)) try {
+		const result = require_vue_transform.transformJSX({
+			code: source,
+			id: resourcePath
+		});
+		if (result) {
+			if (result.map && this.sourceMap) {
+				this.callback(null, result.code, result.map);
+				return "";
+			}
+			return result.code;
+		}
+	} catch (error) {
+		console.error(`[dev-inspector-loader] Failed to transform ${resourcePath}:`, error);
+	}
+	if (resourcePath.match(/\.vue$/)) try {
+		const result = require_vue_transform.compileVue({
+			code: source,
+			id: resourcePath
+		});
+		if (result) {
+			if (result.map && this.sourceMap) {
+				this.callback(null, result.code, result.map);
+				return "";
+			}
+			return result.code;
+		}
+	} catch (error) {
+		console.error(`[dev-inspector-loader] Failed to transform ${resourcePath}:`, error);
+	}
+	return source;
+}
+const raw = false;
+
+//#endregion
+exports.default = devInspectorLoader;
+exports.raw = raw;

package/dist/loader.d.cts

@@ -0,0 +1,15 @@
+import { LoaderContext } from "webpack";
+
+//#region src/loader.d.ts
+
+interface DevInspectorLoaderOptions {
+  /**
+   * Enable/disable the loader
+   * @default true in development, false in production
+   */
+  enabled?: boolean;
+}
+declare function devInspectorLoader(this: LoaderContext<DevInspectorLoaderOptions>, source: string): string;
+declare const raw = false;
+//#endregion
+export { DevInspectorLoaderOptions, devInspectorLoader as default, raw };

package/dist/loader.d.ts

@@ -0,0 +1,15 @@
+import { LoaderContext } from "webpack";
+
+//#region src/loader.d.ts
+
+interface DevInspectorLoaderOptions {
+  /**
+   * Enable/disable the loader
+   * @default true in development, false in production
+   */
+  enabled?: boolean;
+}
+declare function devInspectorLoader(this: LoaderContext<DevInspectorLoaderOptions>, source: string): string;
+declare const raw = false;
+//#endregion
+export { DevInspectorLoaderOptions, devInspectorLoader as default, raw };

package/dist/loader.js

@@ -0,0 +1,42 @@
+import { n as transformJSX, t as compileVue } from "./vue-transform.js";
+
+//#region src/loader.ts
+function devInspectorLoader(source) {
+	if (!((this.getOptions() || {}).enabled ?? process.env.NODE_ENV !== "production")) return source;
+	const resourcePath = this.resourcePath;
+	if (resourcePath.match(/\.(jsx|tsx)$/)) try {
+		const result = transformJSX({
+			code: source,
+			id: resourcePath
+		});
+		if (result) {
+			if (result.map && this.sourceMap) {
+				this.callback(null, result.code, result.map);
+				return "";
+			}
+			return result.code;
+		}
+	} catch (error) {
+		console.error(`[dev-inspector-loader] Failed to transform ${resourcePath}:`, error);
+	}
+	if (resourcePath.match(/\.vue$/)) try {
+		const result = compileVue({
+			code: source,
+			id: resourcePath
+		});
+		if (result) {
+			if (result.map && this.sourceMap) {
+				this.callback(null, result.code, result.map);
+				return "";
+			}
+			return result.code;
+		}
+	} catch (error) {
+		console.error(`[dev-inspector-loader] Failed to transform ${resourcePath}:`, error);
+	}
+	return source;
+}
+const raw = false;
+
+//#endregion
+export { devInspectorLoader as default, raw };

package/dist/standalone-server.cjs

@@ -1,104 +1,4 @@
 const require_chunk = require('./chunk.cjs');
-let node_http = require("node:http");
-node_http = require_chunk.__toESM(node_http);
+const require_cli = require('./cli.cjs');
 
-//#region src/utils/standalone-server.ts
-var StandaloneServer = class {
-	server;
-	middlewares = [];
-	port = 0;
-	host = "localhost";
-	stack = [];
-	constructor() {
-		this.server = node_http.default.createServer(async (req, res) => {
-			let index = 0;
-			const next = async () => {
-				if (index >= this.middlewares.length) {
-					if (!res.writableEnded) {
-						res.statusCode = 404;
-						res.end("Not Found");
-					}
-					return;
-				}
-				const layer = this.middlewares[index++];
-				if ((req.url || "/").startsWith(layer.route)) try {
-					const originalUrl = req.url;
-					if (layer.route !== "/" && req.url) {}
-					await layer.handle(req, res, next);
-					if (layer.route !== "/") req.url = originalUrl;
-				} catch (error) {
-					console.error("Middleware error:", error);
-					if (!res.writableEnded) {
-						res.statusCode = 500;
-						res.end("Internal Server Error");
-					}
-				}
-				else next();
-			};
-			await next();
-		});
-	}
-	use(routeOrHandle, handle) {
-		let route = "/";
-		let handler;
-		if (typeof routeOrHandle === "string") {
-			route = routeOrHandle;
-			if (!handle) throw new Error("Handler is required when route is provided");
-			handler = handle;
-		} else handler = routeOrHandle;
-		this.middlewares.push({
-			route,
-			handle: handler
-		});
-		return this;
-	}
-	listen(...args) {
-		return this.server.listen(...args);
-	}
-	async start(options = {}) {
-		const startPort = options.port || 8888;
-		this.host = options.host || "localhost";
-		for (let port = startPort; port < startPort + 100; port++) try {
-			await new Promise((resolve, reject) => {
-				this.server.listen(port, this.host, () => {
-					this.port = port;
-					resolve();
-				});
-				this.server.on("error", (err) => {
-					if (err.code === "EADDRINUSE") {
-						this.server.close();
-						reject(err);
-					} else reject(err);
-				});
-			});
-			return {
-				host: this.host,
-				port: this.port
-			};
-		} catch (error) {
-			if (error.code !== "EADDRINUSE") throw error;
-		}
-		throw new Error(`Could not find a free port starting from ${startPort}`);
-	}
-	close() {
-		this.server.close();
-	}
-};
-let globalServer = null;
-async function startStandaloneServer(options = {}) {
-	if (globalServer) return {
-		server: globalServer,
-		host: globalServer.host,
-		port: globalServer.port
-	};
-	globalServer = new StandaloneServer();
-	const { host, port } = await globalServer.start(options);
-	return {
-		server: globalServer,
-		host,
-		port
-	};
-}
-
-//#endregion
-exports.startStandaloneServer = startStandaloneServer;
+exports.startStandaloneServer = require_cli.startStandaloneServer;

package/dist/standalone-server.js

@@ -1,102 +1,3 @@
-import http from "node:http";
+import { n as startStandaloneServer, t as StandaloneServer } from "./cli.js";
 
-//#region src/utils/standalone-server.ts
-var StandaloneServer = class {
-	server;
-	middlewares = [];
-	port = 0;
-	host = "localhost";
-	stack = [];
-	constructor() {
-		this.server = http.createServer(async (req, res) => {
-			let index = 0;
-			const next = async () => {
-				if (index >= this.middlewares.length) {
-					if (!res.writableEnded) {
-						res.statusCode = 404;
-						res.end("Not Found");
-					}
-					return;
-				}
-				const layer = this.middlewares[index++];
-				if ((req.url || "/").startsWith(layer.route)) try {
-					const originalUrl = req.url;
-					if (layer.route !== "/" && req.url) {}
-					await layer.handle(req, res, next);
-					if (layer.route !== "/") req.url = originalUrl;
-				} catch (error) {
-					console.error("Middleware error:", error);
-					if (!res.writableEnded) {
-						res.statusCode = 500;
-						res.end("Internal Server Error");
-					}
-				}
-				else next();
-			};
-			await next();
-		});
-	}
-	use(routeOrHandle, handle) {
-		let route = "/";
-		let handler;
-		if (typeof routeOrHandle === "string") {
-			route = routeOrHandle;
-			if (!handle) throw new Error("Handler is required when route is provided");
-			handler = handle;
-		} else handler = routeOrHandle;
-		this.middlewares.push({
-			route,
-			handle: handler
-		});
-		return this;
-	}
-	listen(...args) {
-		return this.server.listen(...args);
-	}
-	async start(options = {}) {
-		const startPort = options.port || 8888;
-		this.host = options.host || "localhost";
-		for (let port = startPort; port < startPort + 100; port++) try {
-			await new Promise((resolve, reject) => {
-				this.server.listen(port, this.host, () => {
-					this.port = port;
-					resolve();
-				});
-				this.server.on("error", (err) => {
-					if (err.code === "EADDRINUSE") {
-						this.server.close();
-						reject(err);
-					} else reject(err);
-				});
-			});
-			return {
-				host: this.host,
-				port: this.port
-			};
-		} catch (error) {
-			if (error.code !== "EADDRINUSE") throw error;
-		}
-		throw new Error(`Could not find a free port starting from ${startPort}`);
-	}
-	close() {
-		this.server.close();
-	}
-};
-let globalServer = null;
-async function startStandaloneServer(options = {}) {
-	if (globalServer) return {
-		server: globalServer,
-		host: globalServer.host,
-		port: globalServer.port
-	};
-	globalServer = new StandaloneServer();
-	const { host, port } = await globalServer.start(options);
-	return {
-		server: globalServer,
-		host,
-		port
-	};
-}
-
-//#endregion
 export { startStandaloneServer };

package/dist/vue-transform.cjs

@@ -0,0 +1,140 @@
+const require_chunk = require('./chunk.cjs');
+let node_module = require("node:module");
+let node_path = require("node:path");
+node_path = require_chunk.__toESM(node_path);
+let magic_string = require("magic-string");
+magic_string = require_chunk.__toESM(magic_string);
+let __babel_parser = require("@babel/parser");
+let __vue_compiler_sfc = require("@vue/compiler-sfc");
+
+//#region src/compiler/jsx-transform.ts
+const traverse = (0, node_module.createRequire)(require("url").pathToFileURL(__filename).href)("@babel/traverse").default;
+function normalizePath$1(id) {
+	return id.split(node_path.default.sep).join("/");
+}
+const DATA_SOURCE_ATTR$1 = "data-source";
+/**
+* Check if JSX element name is a Fragment (React.Fragment, Fragment, or <>)
+*/
+function isFragment(name) {
+	if (name.type === "JSXIdentifier") return name.name === "Fragment";
+	if (name.type === "JSXMemberExpression") {
+		const object = name.object;
+		const property = name.property;
+		return object.type === "JSXIdentifier" && object.name === "React" && property.type === "JSXIdentifier" && property.name === "Fragment";
+	}
+	return false;
+}
+/**
+* Transform JSX/TSX code to inject data-source attributes for dev inspection.
+* 
+* Handles:
+* - Regular components: <Div>, <Button>
+* - Member expressions: <Foo.Bar>, <Layout.Content>
+* - Generic components: <Table<T>>, <Select<Option>>
+* - Namespaced: <svg:rect>
+* 
+* Skips:
+* - Fragments: <>, <Fragment>, <React.Fragment>
+* - Elements that already have data-source
+* - Parse errors (returns null gracefully)
+*/
+function transformJSX({ code, id }) {
+	if (!code.includes("<")) return null;
+	let ast;
+	try {
+		ast = (0, __babel_parser.parse)(code, {
+			sourceType: "module",
+			plugins: [
+				"jsx",
+				"typescript",
+				"decorators-legacy",
+				"classProperties",
+				"importMeta"
+			],
+			errorRecovery: true
+		});
+	} catch {
+		return null;
+	}
+	const relativePath = normalizePath$1(node_path.default.relative(process.cwd(), id));
+	const s = new magic_string.default(code);
+	let hasModifications = false;
+	try {
+		traverse(ast, { JSXOpeningElement(path$2) {
+			try {
+				const node = path$2.node;
+				if (!node.name || isFragment(node.name)) return;
+				if (!node.loc?.start || !node.name.end) return;
+				if (node.attributes?.some((attr$1) => attr$1.type === "JSXAttribute" && attr$1.name?.type === "JSXIdentifier" && attr$1.name.name === DATA_SOURCE_ATTR$1)) return;
+				const { line, column } = node.loc.start;
+				const sourceValue = `${relativePath}:${line}:${column}`;
+				let insertPos;
+				if (node.typeParameters?.end) insertPos = node.typeParameters.end;
+				else if (node.name.end) insertPos = node.name.end;
+				else return;
+				if (insertPos < 0 || insertPos > code.length) return;
+				const attr = ` ${DATA_SOURCE_ATTR$1}="${sourceValue}"`;
+				s.appendLeft(insertPos, attr);
+				hasModifications = true;
+			} catch {}
+		} });
+	} catch {
+		return null;
+	}
+	if (!hasModifications) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({ hires: true })
+	};
+}
+
+//#endregion
+//#region src/compiler/vue-transform.ts
+function normalizePath(id) {
+	return id.split(node_path.default.sep).join("/");
+}
+const DATA_SOURCE_ATTR = "data-source";
+function compileVue({ code, id }) {
+	const relativePath = normalizePath(node_path.default.relative(process.cwd(), id));
+	const { descriptor } = (0, __vue_compiler_sfc.parse)(code, {
+		filename: id,
+		sourceMap: true
+	});
+	if (!descriptor.template || !descriptor.template.ast) return null;
+	const s = new magic_string.default(code);
+	let hasModifications = false;
+	function traverse$1(node) {
+		if (node.type === 1) {
+			if (!node.props.some((prop) => prop.type === 6 && prop.name === DATA_SOURCE_ATTR)) {
+				const { line, column } = node.loc.start;
+				const sourceValue = `${relativePath}:${line}:${column}`;
+				const tagName = node.tag;
+				const insertPos = node.loc.start.offset + 1 + tagName.length;
+				s.prependLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
+				hasModifications = true;
+			}
+		}
+		if (node.children) node.children.forEach(traverse$1);
+	}
+	traverse$1(descriptor.template.ast);
+	if (!hasModifications) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({ hires: true })
+	};
+}
+
+//#endregion
+Object.defineProperty(exports, 'compileVue', {
+  enumerable: true,
+  get: function () {
+    return compileVue;
+  }
+});
+Object.defineProperty(exports, 'transformJSX', {
+  enumerable: true,
+  get: function () {
+    return transformJSX;
+  }
+});

package/dist/vue-transform.js

@@ -0,0 +1,126 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+import MagicString from "magic-string";
+import { parse } from "@babel/parser";
+import { parse as parse$1 } from "@vue/compiler-sfc";
+
+//#region src/compiler/jsx-transform.ts
+const traverse = createRequire(import.meta.url)("@babel/traverse").default;
+function normalizePath$1(id) {
+	return id.split(path.sep).join("/");
+}
+const DATA_SOURCE_ATTR$1 = "data-source";
+/**
+* Check if JSX element name is a Fragment (React.Fragment, Fragment, or <>)
+*/
+function isFragment(name) {
+	if (name.type === "JSXIdentifier") return name.name === "Fragment";
+	if (name.type === "JSXMemberExpression") {
+		const object = name.object;
+		const property = name.property;
+		return object.type === "JSXIdentifier" && object.name === "React" && property.type === "JSXIdentifier" && property.name === "Fragment";
+	}
+	return false;
+}
+/**
+* Transform JSX/TSX code to inject data-source attributes for dev inspection.
+* 
+* Handles:
+* - Regular components: <Div>, <Button>
+* - Member expressions: <Foo.Bar>, <Layout.Content>
+* - Generic components: <Table<T>>, <Select<Option>>
+* - Namespaced: <svg:rect>
+* 
+* Skips:
+* - Fragments: <>, <Fragment>, <React.Fragment>
+* - Elements that already have data-source
+* - Parse errors (returns null gracefully)
+*/
+function transformJSX({ code, id }) {
+	if (!code.includes("<")) return null;
+	let ast;
+	try {
+		ast = parse(code, {
+			sourceType: "module",
+			plugins: [
+				"jsx",
+				"typescript",
+				"decorators-legacy",
+				"classProperties",
+				"importMeta"
+			],
+			errorRecovery: true
+		});
+	} catch {
+		return null;
+	}
+	const relativePath = normalizePath$1(path.relative(process.cwd(), id));
+	const s = new MagicString(code);
+	let hasModifications = false;
+	try {
+		traverse(ast, { JSXOpeningElement(path$1) {
+			try {
+				const node = path$1.node;
+				if (!node.name || isFragment(node.name)) return;
+				if (!node.loc?.start || !node.name.end) return;
+				if (node.attributes?.some((attr$1) => attr$1.type === "JSXAttribute" && attr$1.name?.type === "JSXIdentifier" && attr$1.name.name === DATA_SOURCE_ATTR$1)) return;
+				const { line, column } = node.loc.start;
+				const sourceValue = `${relativePath}:${line}:${column}`;
+				let insertPos;
+				if (node.typeParameters?.end) insertPos = node.typeParameters.end;
+				else if (node.name.end) insertPos = node.name.end;
+				else return;
+				if (insertPos < 0 || insertPos > code.length) return;
+				const attr = ` ${DATA_SOURCE_ATTR$1}="${sourceValue}"`;
+				s.appendLeft(insertPos, attr);
+				hasModifications = true;
+			} catch {}
+		} });
+	} catch {
+		return null;
+	}
+	if (!hasModifications) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({ hires: true })
+	};
+}
+
+//#endregion
+//#region src/compiler/vue-transform.ts
+function normalizePath(id) {
+	return id.split(path.sep).join("/");
+}
+const DATA_SOURCE_ATTR = "data-source";
+function compileVue({ code, id }) {
+	const relativePath = normalizePath(path.relative(process.cwd(), id));
+	const { descriptor } = parse$1(code, {
+		filename: id,
+		sourceMap: true
+	});
+	if (!descriptor.template || !descriptor.template.ast) return null;
+	const s = new MagicString(code);
+	let hasModifications = false;
+	function traverse$1(node) {
+		if (node.type === 1) {
+			if (!node.props.some((prop) => prop.type === 6 && prop.name === DATA_SOURCE_ATTR)) {
+				const { line, column } = node.loc.start;
+				const sourceValue = `${relativePath}:${line}:${column}`;
+				const tagName = node.tag;
+				const insertPos = node.loc.start.offset + 1 + tagName.length;
+				s.prependLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
+				hasModifications = true;
+			}
+		}
+		if (node.children) node.children.forEach(traverse$1);
+	}
+	traverse$1(descriptor.template.ast);
+	if (!hasModifications) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({ hires: true })
+	};
+}
+
+//#endregion
+export { transformJSX as n, compileVue as t };

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",
+  "bin": {
+    "dev-inspector-server": "./dist/cli.js"
+  },
   "files": [
     "dist",
     "client/dist",
@@ -36,6 +39,16 @@
     "./client": {
       "types": "./client.d.ts"
     },
+    "./loader": {
+      "import": {
+        "types": "./dist/loader.d.ts",
+        "default": "./dist/loader.js"
+      },
+      "require": {
+        "types": "./dist/loader.d.cts",
+        "default": "./dist/loader.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -98,6 +111,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
     "@vue/compiler-sfc": "^3.5.24",
     "@xyflow/react": "^12.9.3",
     "ai": "^5.0.95",