@mcpc-tech/unplugin-dev-inspector-mcp 0.0.39 → 0.0.40

package/README.md

@@ -150,7 +150,23 @@ DevInspector.vite({
 import 'virtual:dev-inspector-mcp';  // ← Add this import
 ```
 
-**✅ Zero Production Impact:** This import is automatically removed in production builds via tree-shaking. The entire dev-inspector code is wrapped in `if (import.meta.env.DEV)` guards, which bundlers statically replace with `false` during production builds.
+##### TypeScript Types (Required for `virtual:dev-inspector-mcp`)
+
+If you use TypeScript and import `virtual:dev-inspector-mcp`, make sure your TS config includes the plugin client types:
+
+```jsonc
+// tsconfig.json / tsconfig.app.json
+{
+  "compilerOptions": {
+    "types": [
+      "vite/client",
+      "@mcpc-tech/unplugin-dev-inspector-mcp/client"
+    ]
+  }
+}
+```
+
+**✅ Zero Production Impact:** In production builds, `virtual:dev-inspector-mcp` becomes a no-op module. The inspector runtime is guarded by `if (import.meta.env.DEV)`, which bundlers statically replace with `false` during production builds.
 
 ##### Custom Virtual Module Name
 

package/dist/config-updater.cjs

@@ -86926,14 +86926,20 @@ var ConnectionManager = class {
 //#endregion
 //#region src/utils/cors.ts
 /**
-* Set CORS headers and handle preflight requests
-* Returns true if request was handled (preflight), false otherwise
+* Set CORS headers and handle preflight requests.
+*
+* Uses the browser's requested headers (Access-Control-Request-Headers) when present
+* to avoid mismatches that can break CORS preflight (e.g. 'user-agent').
+*
+* Returns true if request was handled (preflight), false otherwise.
 */
-function handleCors(res, method) {
+function handleCors(req, res) {
 	res.setHeader("Access-Control-Allow-Origin", "*");
 	res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
-	res.setHeader("Access-Control-Allow-Headers", "Content-Type, mcp-session-id, mcp-protocol-version");
-	if (method === "OPTIONS") {
+	const requested = req.headers["access-control-request-headers"];
+	const requestedValue = Array.isArray(requested) ? requested.join(", ") : requested;
+	res.setHeader("Access-Control-Allow-Headers", requestedValue ?? "Content-Type, mcp-session-id, mcp-protocol-version");
+	if (req.method === "OPTIONS") {
 		res.statusCode = 204;
 		res.end();
 		return true;
@@ -86959,7 +86965,7 @@ async function setupMcpMiddleware(middlewares, serverContext) {
 	middlewares.use(async (req, res, next$1) => {
 		const url$1 = req.url || "";
 		if (url$1.startsWith("/__mcp__")) {
-			if (handleCors(res, req.method)) return;
+			if (handleCors(req, res)) return;
 		}
 		if (url$1.startsWith("/__mcp__") && !url$1.startsWith("/__mcp__/sse") && !url$1.startsWith("/__mcp__/messages")) {
 			if (req.method === "POST") await handleStreamableHttpPost(req, res, serverContext, connectionManager);
@@ -87196,7 +87202,7 @@ function setupInspectorMiddleware(middlewares, config) {
 	let filesChecked = false;
 	middlewares.use((req, res, next$1) => {
 		if (req.url?.startsWith("/__inspector__")) {
-			if (handleCors(res, req.method)) return;
+			if (handleCors(req, res)) return;
 		}
 		if (!filesChecked) {
 			cachedScript = getInspectorScript();
@@ -88464,7 +88470,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 	* Returns: { sessionId }
 	*/
 	middlewares.use("/api/acp/init-session", async (req, res) => {
-		if (handleCors(res, req.method)) return;
+		if (handleCors(req, res)) return;
 		if (req.method !== "POST") {
 			res.statusCode = 405;
 			res.end("Method Not Allowed");
@@ -88591,7 +88597,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 	* Body: { sessionId }
 	*/
 	middlewares.use("/api/acp/cleanup-session", async (req, res) => {
-		if (handleCors(res, req.method)) return;
+		if (handleCors(req, res)) return;
 		if (req.method !== "POST") {
 			res.statusCode = 405;
 			res.end("Method Not Allowed");
@@ -88634,7 +88640,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 	* Body: { messages, agent, envVars, sessionId? }
 	*/
 	middlewares.use("/api/acp/chat", async (req, res) => {
-		if (handleCors(res, req.method)) return;
+		if (handleCors(req, res)) return;
 		if (req.method !== "POST") {
 			res.statusCode = 405;
 			res.end("Method Not Allowed");

package/dist/config-updater.js

@@ -86961,14 +86961,20 @@ var ConnectionManager = class {
 //#endregion
 //#region src/utils/cors.ts
 /**
-* Set CORS headers and handle preflight requests
-* Returns true if request was handled (preflight), false otherwise
+* Set CORS headers and handle preflight requests.
+*
+* Uses the browser's requested headers (Access-Control-Request-Headers) when present
+* to avoid mismatches that can break CORS preflight (e.g. 'user-agent').
+*
+* Returns true if request was handled (preflight), false otherwise.
 */
-function handleCors(res, method) {
+function handleCors(req, res) {
 	res.setHeader("Access-Control-Allow-Origin", "*");
 	res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
-	res.setHeader("Access-Control-Allow-Headers", "Content-Type, mcp-session-id, mcp-protocol-version");
-	if (method === "OPTIONS") {
+	const requested = req.headers["access-control-request-headers"];
+	const requestedValue = Array.isArray(requested) ? requested.join(", ") : requested;
+	res.setHeader("Access-Control-Allow-Headers", requestedValue ?? "Content-Type, mcp-session-id, mcp-protocol-version");
+	if (req.method === "OPTIONS") {
 		res.statusCode = 204;
 		res.end();
 		return true;
@@ -86994,7 +87000,7 @@ async function setupMcpMiddleware(middlewares, serverContext) {
 	middlewares.use(async (req, res, next$1) => {
 		const url = req.url || "";
 		if (url.startsWith("/__mcp__")) {
-			if (handleCors(res, req.method)) return;
+			if (handleCors(req, res)) return;
 		}
 		if (url.startsWith("/__mcp__") && !url.startsWith("/__mcp__/sse") && !url.startsWith("/__mcp__/messages")) {
 			if (req.method === "POST") await handleStreamableHttpPost(req, res, serverContext, connectionManager);
@@ -87231,7 +87237,7 @@ function setupInspectorMiddleware(middlewares, config) {
 	let filesChecked = false;
 	middlewares.use((req, res, next$1) => {
 		if (req.url?.startsWith("/__inspector__")) {
-			if (handleCors(res, req.method)) return;
+			if (handleCors(req, res)) return;
 		}
 		if (!filesChecked) {
 			cachedScript = getInspectorScript();
@@ -88499,7 +88505,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 	* Returns: { sessionId }
 	*/
 	middlewares.use("/api/acp/init-session", async (req, res) => {
-		if (handleCors(res, req.method)) return;
+		if (handleCors(req, res)) return;
 		if (req.method !== "POST") {
 			res.statusCode = 405;
 			res.end("Method Not Allowed");
@@ -88626,7 +88632,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 	* Body: { sessionId }
 	*/
 	middlewares.use("/api/acp/cleanup-session", async (req, res) => {
-		if (handleCors(res, req.method)) return;
+		if (handleCors(req, res)) return;
 		if (req.method !== "POST") {
 			res.statusCode = 405;
 			res.end("Method Not Allowed");
@@ -88669,7 +88675,7 @@ function setupAcpMiddleware(middlewares, serverContext, acpOptions) {
 	* Body: { messages, agent, envVars, sessionId? }
 	*/
 	middlewares.use("/api/acp/chat", async (req, res) => {
-		if (handleCors(res, req.method)) return;
+		if (handleCors(req, res)) return;
 		if (req.method !== "POST") {
 			res.statusCode = 405;
 			res.end("Method Not Allowed");

package/dist/index.cjs

@@ -59,9 +59,23 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 		const enabled = options.enabled ?? process.env.NODE_ENV !== "production";
 		const virtualModuleName = options.virtualModuleName ?? "virtual:dev-inspector-mcp";
 		const webpackModuleName = virtualModuleName.replace("virtual:", "");
+		let viteCommand;
 		let resolvedHost = options.host || "localhost";
 		let resolvedPort = options.port || 5173;
-		if (!enabled) return { name };
+		const transformImpl = transformFactory(options);
+		const transform = (code, id) => {
+			if (!enabled) return null;
+			if (viteCommand && viteCommand !== "serve") return null;
+			return transformImpl(code, id);
+		};
+		const createNoopVirtualModule = () => {
+			return `
+// Production build - no-op
+export function registerInspectorTool(_tool) {
+  // No-op in production
+}
+`;
+		};
 		return {
 			name,
 			enforce: "pre",
@@ -69,7 +83,9 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 				if (id === virtualModuleName || id === webpackModuleName) return "\0" + virtualModuleName;
 			},
 			load(id) {
-				if (id === "\0" + virtualModuleName) return `
+				if (id === "\0" + virtualModuleName) {
+					if (!enabled || viteCommand === "build") return createNoopVirtualModule();
+					return `
 // Development-only code - removed in production builds
 
 // Global tools registry
@@ -83,9 +99,13 @@ if (typeof window !== 'undefined') {
 
 /**
  * Register a custom tool for the inspector
+ * Only registers in development mode
  */
 export function registerInspectorTool(tool) {
+  // Skip in production (when bundler replaces import.meta.env.DEV with false)
+  if (!import.meta.env.DEV) return;
   if (typeof window === 'undefined') return;
+  
   window.__INSPECTOR_TOOLS__ = window.__INSPECTOR_TOOLS__ || [];
   window.__INSPECTOR_TOOLS__.push(tool);
 }
@@ -122,10 +142,14 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
   }
 }
 `;
+				}
 			},
-			transform: transformFactory(options),
+			transform,
 			vite: {
-				apply: "serve",
+				apply(_config, env) {
+					viteCommand = env.command;
+					return true;
+				},
 				configResolved(config) {
 					const viteHost = config.server.host;
 					resolvedHost = options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost");
@@ -135,6 +159,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 				transformIndexHtml: {
 					order: "pre",
 					handler(html, ctx) {
+						if (!enabled) return html;
+						if (viteCommand !== "serve") return html;
 						if (!(options.autoInject ?? true)) return html;
 						const server = ctx.server;
 						const viteHost = server?.config.server.host;
@@ -169,6 +195,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 					}
 				},
 				async configureServer(server) {
+					if (!enabled) return;
 					const viteHost = server.config.server.host;
 					const serverContext = {
 						host: options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost"),
@@ -279,7 +306,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 				});
 			},
 			rollup: {},
-			esbuild: { setup(build) {} }
+			esbuild: { setup(_build) {} }
 		};
 	});
 };

package/dist/index.js

@@ -55,9 +55,23 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 		const enabled = options.enabled ?? process.env.NODE_ENV !== "production";
 		const virtualModuleName = options.virtualModuleName ?? "virtual:dev-inspector-mcp";
 		const webpackModuleName = virtualModuleName.replace("virtual:", "");
+		let viteCommand;
 		let resolvedHost = options.host || "localhost";
 		let resolvedPort = options.port || 5173;
-		if (!enabled) return { name };
+		const transformImpl = transformFactory(options);
+		const transform = (code, id) => {
+			if (!enabled) return null;
+			if (viteCommand && viteCommand !== "serve") return null;
+			return transformImpl(code, id);
+		};
+		const createNoopVirtualModule = () => {
+			return `
+// Production build - no-op
+export function registerInspectorTool(_tool) {
+  // No-op in production
+}
+`;
+		};
 		return {
 			name,
 			enforce: "pre",
@@ -65,7 +79,9 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 				if (id === virtualModuleName || id === webpackModuleName) return "\0" + virtualModuleName;
 			},
 			load(id) {
-				if (id === "\0" + virtualModuleName) return `
+				if (id === "\0" + virtualModuleName) {
+					if (!enabled || viteCommand === "build") return createNoopVirtualModule();
+					return `
 // Development-only code - removed in production builds
 
 // Global tools registry
@@ -79,9 +95,13 @@ if (typeof window !== 'undefined') {
 
 /**
  * Register a custom tool for the inspector
+ * Only registers in development mode
  */
 export function registerInspectorTool(tool) {
+  // Skip in production (when bundler replaces import.meta.env.DEV with false)
+  if (!import.meta.env.DEV) return;
   if (typeof window === 'undefined') return;
+  
   window.__INSPECTOR_TOOLS__ = window.__INSPECTOR_TOOLS__ || [];
   window.__INSPECTOR_TOOLS__.push(tool);
 }
@@ -118,10 +138,14 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
   }
 }
 `;
+				}
 			},
-			transform: transformFactory(options),
+			transform,
 			vite: {
-				apply: "serve",
+				apply(_config, env) {
+					viteCommand = env.command;
+					return true;
+				},
 				configResolved(config) {
 					const viteHost = config.server.host;
 					resolvedHost = options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost");
@@ -131,6 +155,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 				transformIndexHtml: {
 					order: "pre",
 					handler(html, ctx) {
+						if (!enabled) return html;
+						if (viteCommand !== "serve") return html;
 						if (!(options.autoInject ?? true)) return html;
 						const server = ctx.server;
 						const viteHost = server?.config.server.host;
@@ -165,6 +191,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 					}
 				},
 				async configureServer(server) {
+					if (!enabled) return;
 					const viteHost = server.config.server.host;
 					const serverContext = {
 						host: options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost"),
@@ -275,7 +302,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 				});
 			},
 			rollup: {},
-			esbuild: { setup(build) {} }
+			esbuild: { setup(_build) {} }
 		};
 	});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
   "type": "module",
   "license": "MIT",