@mcpc-tech/unplugin-dev-inspector-mcp 0.1.8 → 0.1.9

package/README.md

@@ -150,19 +150,17 @@ If you prefer to configure it manually:
 
 If your project doesn't use HTML files (e.g., miniapp platforms that only bundle JS):
 
+```typescript
+// vite.config.ts
 ```typescript
 // vite.config.ts
 DevInspector.vite({
   enabled: true,
-  autoInject: false  // Disable HTML injection
+  autoInject: false,  // Disable HTML injection
+  entry: 'src/main.ts' // Inject inspector into entry file
 })
 ```
 
-```typescript
-// main.ts or app entry point
-import 'virtual:dev-inspector-mcp';  // ← Add this import
-```
-
 ##### 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:
@@ -270,15 +268,6 @@ export default function RootLayout({ children }) {
 
 ### React Router v7+
 
-Since React Router handles HTML generation via its own SSR/SPA mechanism, it bypasses the standard Vite HTML transformation hooks. You need to manually import the virtual module in your entry file.
-
-```typescript
-// app/root.tsx or app/entry.client.tsx
-import 'virtual:dev-inspector-mcp';
-```
-
-And ensure your `vite.config.ts` has the plugin:
-
 ```typescript
 // vite.config.ts
 import { reactRouter } from "@react-router/dev/vite";
@@ -286,7 +275,10 @@ import DevInspector from '@mcpc-tech/unplugin-dev-inspector-mcp';
 
 export default defineConfig({
   plugins: [
-    DevInspector.vite({ enabled: true }),
+    DevInspector.vite({
+      enabled: true,
+      entry: "app/root.tsx" // Inject inspector into root layout
+    }),
     reactRouter(),
   ],
 });

package/dist/index.cjs

@@ -6,6 +6,8 @@ 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 path = require("path");
+path = require_chunk.__toESM(path);
 let _babel_parser = require("@babel/parser");
 let magic_string = require("magic-string");
 magic_string = require_chunk.__toESM(magic_string);
@@ -144,9 +146,21 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 		let resolvedPort = options.port || 5173;
 		const transformImpl = transformFactory(options);
 		const chromeDisabled = require_config_updater.isChromeDisabled(options.disableChrome);
+		const entryOption = process.env.DEV_INSPECTOR_ENTRY || options.entry;
+		const resolvedEntry = entryOption ? path.default.resolve(process.cwd(), entryOption) : null;
 		const transform = (code, id) => {
 			if (!enabled) return null;
 			if (viteCommand && viteCommand !== "serve") return null;
+			if (resolvedEntry && id === resolvedEntry) {
+				const injection = `import '${virtualModuleName}';\n`;
+				const result = transformImpl(code, id);
+				if (typeof result === "string") return injection + result;
+				else if (result && typeof result === "object" && "code" in result) return {
+					...result,
+					code: injection + result.code
+				};
+				else return injection + code;
+			}
 			return transformImpl(code, id);
 		};
 		const createNoopVirtualModule = () => {
@@ -169,7 +183,11 @@ export function registerInspectorTool(_tool) {
 					const host = resolvedHost;
 					const port = resolvedPort;
 					const showInspectorBar = options.showInspectorBar ?? true;
-					const publicBaseUrl = options.publicBaseUrl || process.env.DEV_INSPECTOR_PUBLIC_BASE_URL;
+					const publicBaseUrl = require_config_updater.getPublicBaseUrl({
+						publicBaseUrl: options.publicBaseUrl,
+						host,
+						port
+					});
 					const injectedBaseUrl = publicBaseUrl ? require_config_updater.stripTrailingSlash(publicBaseUrl) : void 0;
 					return `
 // Development-only code - removed in production builds
@@ -254,7 +272,11 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						const port = options.port ?? server?.config.server.port ?? 5173;
 						const base = server?.config.base ?? "/";
 						const showInspectorBar = options.showInspectorBar ?? true;
-						const publicBaseUrl = options.publicBaseUrl || process.env.DEV_INSPECTOR_PUBLIC_BASE_URL;
+						const publicBaseUrl = require_config_updater.getPublicBaseUrl({
+							publicBaseUrl: options.publicBaseUrl,
+							host,
+							port
+						});
 						const displayHost = host === "0.0.0.0" ? "localhost" : host;
 						return html.replace("</body>", `<dev-inspector-mcp></dev-inspector-mcp><script>
 (function() {
@@ -488,9 +510,9 @@ function transformJSX({ code, id }) {
 	const s = new magic_string.default(code);
 	let hasModifications = false;
 	try {
-		traverse(ast, { JSXOpeningElement(path$4) {
+		traverse(ast, { JSXOpeningElement(path$6) {
 			try {
-				const node = path$4.node;
+				const node = path$6.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$2)) return;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as unplugin1 from "unplugin";
+import * as unplugin0 from "unplugin";
 
 //#region src/utils/config-updater.d.ts
 type EditorId = "cursor" | "vscode" | "windsurf" | "claude-code" | "antigravity";
@@ -174,19 +174,32 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    * @example "http://localhost:5173/dashboard"
    */
   browserUrl?: string;
+  /**
+   * Whether to show the inspector bar UI
+   * Set to false if you only want to use the editor integration
+   * @default true
+   */
   /**
    * Whether to show the inspector bar UI
    * Set to false if you only want to use the editor integration
    * @default true
    */
   showInspectorBar?: boolean;
+  /**
+   * Entry file to safely inject the inspector import.
+   * Useful when `autoInject: false` or when using a framework where HTML injection is insufficient.
+   * Can also be set via `DEV_INSPECTOR_ENTRY` environment variable.
+   *
+   * @example "src/main.tsx"
+   */
+  entry?: string;
 }
 //#endregion
 //#region src/core.d.ts
-declare const unplugin: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const unplugin: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 //#endregion
 //#region src/core-external.d.ts
-declare const unpluginExternal: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const unpluginExternal: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 //#endregion
 //#region src/turbopack.d.ts
 interface TurbopackDevInspectorOptions extends DevInspectorOptions {
@@ -211,7 +224,7 @@ interface TurbopackDevInspectorOptions extends DevInspectorOptions {
 declare function turbopackDevInspector(options?: TurbopackDevInspectorOptions): any;
 //#endregion
 //#region src/index.d.ts
-declare const external: unplugin1.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
+declare const external: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
 declare module "virtual:dev-inspector-mcp" {}
 //#endregion
 export { type CustomEditorConfig, type DevInspectorOptions, type EditorId, type McpConfigOptions, type TurbopackDevInspectorOptions, unplugin as default, unplugin, external, turbopackDevInspector, unpluginExternal };

package/dist/index.d.ts

@@ -174,12 +174,25 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
    * @example "http://localhost:5173/dashboard"
    */
   browserUrl?: string;
+  /**
+   * Whether to show the inspector bar UI
+   * Set to false if you only want to use the editor integration
+   * @default true
+   */
   /**
    * Whether to show the inspector bar UI
    * Set to false if you only want to use the editor integration
    * @default true
    */
   showInspectorBar?: boolean;
+  /**
+   * Entry file to safely inject the inspector import.
+   * Useful when `autoInject: false` or when using a framework where HTML injection is insufficient.
+   * Can also be set via `DEV_INSPECTOR_ENTRY` environment variable.
+   *
+   * @example "src/main.tsx"
+   */
+  entry?: string;
 }
 //#endregion
 //#region src/core.d.ts

package/dist/index.js

@@ -3,6 +3,7 @@ import { createRequire } from "node:module";
 import path from "node:path";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import path$1 from "path";
 import { parse } from "@babel/parser";
 import MagicString from "magic-string";
 import { createUnplugin } from "unplugin";
@@ -140,9 +141,21 @@ const createDevInspectorPlugin = (name, transformFactory) => {
 		let resolvedPort = options.port || 5173;
 		const transformImpl = transformFactory(options);
 		const chromeDisabled = isChromeDisabled(options.disableChrome);
+		const entryOption = process.env.DEV_INSPECTOR_ENTRY || options.entry;
+		const resolvedEntry = entryOption ? path$1.resolve(process.cwd(), entryOption) : null;
 		const transform = (code, id) => {
 			if (!enabled) return null;
 			if (viteCommand && viteCommand !== "serve") return null;
+			if (resolvedEntry && id === resolvedEntry) {
+				const injection = `import '${virtualModuleName}';\n`;
+				const result = transformImpl(code, id);
+				if (typeof result === "string") return injection + result;
+				else if (result && typeof result === "object" && "code" in result) return {
+					...result,
+					code: injection + result.code
+				};
+				else return injection + code;
+			}
 			return transformImpl(code, id);
 		};
 		const createNoopVirtualModule = () => {
@@ -165,7 +178,11 @@ export function registerInspectorTool(_tool) {
 					const host = resolvedHost;
 					const port = resolvedPort;
 					const showInspectorBar = options.showInspectorBar ?? true;
-					const publicBaseUrl = options.publicBaseUrl || process.env.DEV_INSPECTOR_PUBLIC_BASE_URL;
+					const publicBaseUrl = getPublicBaseUrl({
+						publicBaseUrl: options.publicBaseUrl,
+						host,
+						port
+					});
 					const injectedBaseUrl = publicBaseUrl ? stripTrailingSlash(publicBaseUrl) : void 0;
 					return `
 // Development-only code - removed in production builds
@@ -250,7 +267,11 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
 						const port = options.port ?? server?.config.server.port ?? 5173;
 						const base = server?.config.base ?? "/";
 						const showInspectorBar = options.showInspectorBar ?? true;
-						const publicBaseUrl = options.publicBaseUrl || process.env.DEV_INSPECTOR_PUBLIC_BASE_URL;
+						const publicBaseUrl = getPublicBaseUrl({
+							publicBaseUrl: options.publicBaseUrl,
+							host,
+							port
+						});
 						const displayHost = host === "0.0.0.0" ? "localhost" : host;
 						return html.replace("</body>", `<dev-inspector-mcp></dev-inspector-mcp><script>
 (function() {
@@ -484,9 +505,9 @@ function transformJSX({ code, id }) {
 	const s = new MagicString(code);
 	let hasModifications = false;
 	try {
-		traverse(ast, { JSXOpeningElement(path$1) {
+		traverse(ast, { JSXOpeningElement(path$2) {
 			try {
-				const node = path$1.node;
+				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$2)) return;

package/package.json

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