@mcpc-tech/unplugin-dev-inspector-mcp 0.0.18 → 0.0.20

package/dist/index.cjs

@@ -1,10 +1,87 @@
 const require_chunk = require('./chunk.cjs');
 const require_config_updater = require('./config-updater.cjs');
 const require_vue_transform = require('./vue-transform.cjs');
+let node_path = require("node:path");
+node_path = require_chunk.__toESM(node_path);
 let __modelcontextprotocol_sdk_client_index_js = require("@modelcontextprotocol/sdk/client/index.js");
 let __modelcontextprotocol_sdk_client_sse_js = require("@modelcontextprotocol/sdk/client/sse.js");
+let magic_string = require("magic-string");
+magic_string = require_chunk.__toESM(magic_string);
 let unplugin = require("unplugin");
+let svelte_compiler = require("svelte/compiler");
 
+//#region src/compiler/svelte-transform.ts
+function normalizePath(id) {
+	return id.split(node_path.default.sep).join("/");
+}
+const DATA_SOURCE_ATTR = "data-source";
+/**
+* Transform Svelte code to inject data-source attributes for dev inspection.
+* 
+* Handles:
+* - Regular elements: <div>, <button>
+* - Components: <Counter>, <MyComponent>
+* - Svelte special elements: <svelte:window>, <svelte:head>, etc.
+* 
+* Skips:
+* - Fragments and elements that cannot have attributes
+* - Elements that already have data-source
+* - Parse errors (returns null gracefully)
+*/
+function compileSvelte({ code, id }) {
+	if (!code.includes("<")) return null;
+	let ast;
+	try {
+		ast = (0, svelte_compiler.parse)(code, {
+			filename: id,
+			modern: true
+		});
+	} catch {
+		return null;
+	}
+	const relativePath = normalizePath(node_path.default.relative(process.cwd(), id));
+	const s = new magic_string.default(code);
+	let hasModifications = false;
+	function traverse(node) {
+		if ("nodes" in node && Array.isArray(node.nodes)) {
+			for (const childNode of node.nodes) traverse(childNode);
+			return;
+		}
+		if ("type" in node && node.type !== "Fragment" && isElementLike(node)) {
+			const element = node;
+			if (!element.start || !element.end) return;
+			if (!element.attributes?.some((attr) => attr.type === "Attribute" && attr.name === DATA_SOURCE_ATTR)) {
+				const lines = code.substring(0, element.start).split("\n");
+				const sourceValue = `${relativePath}:${lines.length}:${lines[lines.length - 1].length + 1}`;
+				const tagMatch = code.substring(element.start).match(/^<([^\s/>]+)/);
+				if (tagMatch) {
+					const insertPos = element.start + tagMatch[0].length;
+					s.appendLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
+					hasModifications = true;
+				}
+			}
+		}
+		if ("fragment" in node && node.fragment) traverse(node.fragment);
+		if ("consequent" in node && node.consequent) traverse(node.consequent);
+		if ("alternate" in node && node.alternate) traverse(node.alternate);
+		if ("body" in node && node.body) traverse(node.body);
+		if ("pending" in node && node.pending) traverse(node.pending);
+		if ("then" in node && node.then) traverse(node.then);
+		if ("catch" in node && node.catch) traverse(node.catch);
+		if ("fallback" in node && node.fallback) traverse(node.fallback);
+	}
+	function isElementLike(node) {
+		return node.type === "RegularElement" || node.type === "Component" || node.type === "SlotElement" || node.type === "TitleElement" || node.type === "SvelteBody" || node.type === "SvelteComponent" || node.type === "SvelteDocument" || node.type === "SvelteElement" || node.type === "SvelteHead" || node.type === "SvelteSelf" || node.type === "SvelteWindow" || node.type === "SvelteBoundary";
+	}
+	traverse(ast.fragment);
+	if (!hasModifications) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({ hires: true })
+	};
+}
+
+//#endregion
 //#region src/utils/browser-launcher.ts
 /**
 * Launch browser via Chrome DevTools MCP
@@ -103,6 +180,15 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 				console.error(`[dev-inspector] Failed to transform ${id}:`, error);
 				return null;
 			}
+			if (id.match(/\.svelte$/)) try {
+				return await compileSvelte({
+					code,
+					id
+				});
+			} catch (error) {
+				console.error(`[dev-inspector] Failed to transform ${id}:`, error);
+				return null;
+			}
 			return null;
 		},
 		vite: {
@@ -182,7 +268,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 					}, 1e3);
 				} else {
 					console.log(`[dev-inspector] ⚠️  autoOpenBrowser: false - Console/Network context unavailable`);
-					console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
+					console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt or "chrome_devtools" tool to open browser manually.\n`);
 				}
 				require_config_updater.setupInspectorMiddleware(server.middlewares, {
 					agents: options.agents,

package/dist/index.js

@@ -1,9 +1,84 @@
 import { i as setupMcpMiddleware, n as setupAcpMiddleware, r as setupInspectorMiddleware, t as updateMcpConfigs } from "./config-updater.js";
 import { n as transformJSX, t as compileVue } from "./vue-transform.js";
+import path from "node:path";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import MagicString from "magic-string";
 import { createUnplugin } from "unplugin";
+import { parse } from "svelte/compiler";
 
+//#region src/compiler/svelte-transform.ts
+function normalizePath(id) {
+	return id.split(path.sep).join("/");
+}
+const DATA_SOURCE_ATTR = "data-source";
+/**
+* Transform Svelte code to inject data-source attributes for dev inspection.
+* 
+* Handles:
+* - Regular elements: <div>, <button>
+* - Components: <Counter>, <MyComponent>
+* - Svelte special elements: <svelte:window>, <svelte:head>, etc.
+* 
+* Skips:
+* - Fragments and elements that cannot have attributes
+* - Elements that already have data-source
+* - Parse errors (returns null gracefully)
+*/
+function compileSvelte({ code, id }) {
+	if (!code.includes("<")) return null;
+	let ast;
+	try {
+		ast = parse(code, {
+			filename: id,
+			modern: true
+		});
+	} catch {
+		return null;
+	}
+	const relativePath = normalizePath(path.relative(process.cwd(), id));
+	const s = new MagicString(code);
+	let hasModifications = false;
+	function traverse(node) {
+		if ("nodes" in node && Array.isArray(node.nodes)) {
+			for (const childNode of node.nodes) traverse(childNode);
+			return;
+		}
+		if ("type" in node && node.type !== "Fragment" && isElementLike(node)) {
+			const element = node;
+			if (!element.start || !element.end) return;
+			if (!element.attributes?.some((attr) => attr.type === "Attribute" && attr.name === DATA_SOURCE_ATTR)) {
+				const lines = code.substring(0, element.start).split("\n");
+				const sourceValue = `${relativePath}:${lines.length}:${lines[lines.length - 1].length + 1}`;
+				const tagMatch = code.substring(element.start).match(/^<([^\s/>]+)/);
+				if (tagMatch) {
+					const insertPos = element.start + tagMatch[0].length;
+					s.appendLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
+					hasModifications = true;
+				}
+			}
+		}
+		if ("fragment" in node && node.fragment) traverse(node.fragment);
+		if ("consequent" in node && node.consequent) traverse(node.consequent);
+		if ("alternate" in node && node.alternate) traverse(node.alternate);
+		if ("body" in node && node.body) traverse(node.body);
+		if ("pending" in node && node.pending) traverse(node.pending);
+		if ("then" in node && node.then) traverse(node.then);
+		if ("catch" in node && node.catch) traverse(node.catch);
+		if ("fallback" in node && node.fallback) traverse(node.fallback);
+	}
+	function isElementLike(node) {
+		return node.type === "RegularElement" || node.type === "Component" || node.type === "SlotElement" || node.type === "TitleElement" || node.type === "SvelteBody" || node.type === "SvelteComponent" || node.type === "SvelteDocument" || node.type === "SvelteElement" || node.type === "SvelteHead" || node.type === "SvelteSelf" || node.type === "SvelteWindow" || node.type === "SvelteBoundary";
+	}
+	traverse(ast.fragment);
+	if (!hasModifications) return null;
+	return {
+		code: s.toString(),
+		map: s.generateMap({ hires: true })
+	};
+}
+
+//#endregion
 //#region src/utils/browser-launcher.ts
 /**
 * Launch browser via Chrome DevTools MCP
@@ -102,6 +177,15 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 				console.error(`[dev-inspector] Failed to transform ${id}:`, error);
 				return null;
 			}
+			if (id.match(/\.svelte$/)) try {
+				return await compileSvelte({
+					code,
+					id
+				});
+			} catch (error) {
+				console.error(`[dev-inspector] Failed to transform ${id}:`, error);
+				return null;
+			}
 			return null;
 		},
 		vite: {
@@ -181,7 +265,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 					}, 1e3);
 				} else {
 					console.log(`[dev-inspector] ⚠️  autoOpenBrowser: false - Console/Network context unavailable`);
-					console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
+					console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt or "chrome_devtools" tool to open browser manually.\n`);
 				}
 				setupInspectorMiddleware(server.middlewares, {
 					agents: options.agents,

package/dist/vue-transform.cjs

@@ -2,9 +2,9 @@ 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 __babel_parser = require("@babel/parser");
 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

package/dist/vue-transform.js

@@ -1,7 +1,7 @@
 import { createRequire } from "node:module";
 import path from "node:path";
-import MagicString from "magic-string";
 import { parse } from "@babel/parser";
+import MagicString from "magic-string";
 import { parse as parse$1 } from "@vue/compiler-sfc";
 
 //#region src/compiler/jsx-transform.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",
@@ -28,7 +28,8 @@
     "unplugin"
   ],
   "bin": {
-    "dev-inspector-server": "./dist/cli.js"
+    "dev-inspector-server": "./dist/cli.js",
+    "dev-inspector": "./dist/cli.js"
   },
   "files": [
     "dist",
@@ -155,6 +156,7 @@
     "shiki": "^3.15.0",
     "sonner": "^2.0.7",
     "streamdown": "^1.5.1",
+    "svelte": "^5.0.0",
     "tailwind-merge": "^3.3.1",
     "tokenlens": "^1.3.1",
     "unplugin": "^2.3.10",