@mcpc-tech/unplugin-dev-inspector-mcp 0.0.17 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +24 -10
  2. package/client/dist/inspector.iife.js +320 -320
  3. package/dist/index.cjs +154 -69
  4. package/dist/index.d.cts +7 -6
  5. package/dist/index.d.ts +7 -6
  6. package/dist/index.js +152 -69
  7. package/package.json +2 -1
package/dist/index.cjs CHANGED
@@ -1,10 +1,87 @@
1
1
  const require_chunk = require('./chunk.cjs');
2
2
  const require_config_updater = require('./config-updater.cjs');
3
3
  const require_vue_transform = require('./vue-transform.cjs');
4
+ let node_path = require("node:path");
5
+ node_path = require_chunk.__toESM(node_path);
4
6
  let __modelcontextprotocol_sdk_client_index_js = require("@modelcontextprotocol/sdk/client/index.js");
5
7
  let __modelcontextprotocol_sdk_client_sse_js = require("@modelcontextprotocol/sdk/client/sse.js");
6
8
  let unplugin = require("unplugin");
9
+ let magic_string = require("magic-string");
10
+ magic_string = require_chunk.__toESM(magic_string);
11
+ let svelte_compiler = require("svelte/compiler");
7
12
 
13
+ //#region src/compiler/svelte-transform.ts
14
+ function normalizePath(id) {
15
+ return id.split(node_path.default.sep).join("/");
16
+ }
17
+ const DATA_SOURCE_ATTR = "data-source";
18
+ /**
19
+ * Transform Svelte code to inject data-source attributes for dev inspection.
20
+ *
21
+ * Handles:
22
+ * - Regular elements: <div>, <button>
23
+ * - Components: <Counter>, <MyComponent>
24
+ * - Svelte special elements: <svelte:window>, <svelte:head>, etc.
25
+ *
26
+ * Skips:
27
+ * - Fragments and elements that cannot have attributes
28
+ * - Elements that already have data-source
29
+ * - Parse errors (returns null gracefully)
30
+ */
31
+ function compileSvelte({ code, id }) {
32
+ if (!code.includes("<")) return null;
33
+ let ast;
34
+ try {
35
+ ast = (0, svelte_compiler.parse)(code, {
36
+ filename: id,
37
+ modern: true
38
+ });
39
+ } catch {
40
+ return null;
41
+ }
42
+ const relativePath = normalizePath(node_path.default.relative(process.cwd(), id));
43
+ const s = new magic_string.default(code);
44
+ let hasModifications = false;
45
+ function traverse(node) {
46
+ if ("nodes" in node && Array.isArray(node.nodes)) {
47
+ for (const childNode of node.nodes) traverse(childNode);
48
+ return;
49
+ }
50
+ if ("type" in node && node.type !== "Fragment" && isElementLike(node)) {
51
+ const element = node;
52
+ if (!element.start || !element.end) return;
53
+ if (!element.attributes?.some((attr) => attr.type === "Attribute" && attr.name === DATA_SOURCE_ATTR)) {
54
+ const lines = code.substring(0, element.start).split("\n");
55
+ const sourceValue = `${relativePath}:${lines.length}:${lines[lines.length - 1].length + 1}`;
56
+ const tagMatch = code.substring(element.start).match(/^<([^\s/>]+)/);
57
+ if (tagMatch) {
58
+ const insertPos = element.start + tagMatch[0].length;
59
+ s.appendLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
60
+ hasModifications = true;
61
+ }
62
+ }
63
+ }
64
+ if ("fragment" in node && node.fragment) traverse(node.fragment);
65
+ if ("consequent" in node && node.consequent) traverse(node.consequent);
66
+ if ("alternate" in node && node.alternate) traverse(node.alternate);
67
+ if ("body" in node && node.body) traverse(node.body);
68
+ if ("pending" in node && node.pending) traverse(node.pending);
69
+ if ("then" in node && node.then) traverse(node.then);
70
+ if ("catch" in node && node.catch) traverse(node.catch);
71
+ if ("fallback" in node && node.fallback) traverse(node.fallback);
72
+ }
73
+ function isElementLike(node) {
74
+ 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";
75
+ }
76
+ traverse(ast.fragment);
77
+ if (!hasModifications) return null;
78
+ return {
79
+ code: s.toString(),
80
+ map: s.generateMap({ hires: true })
81
+ };
82
+ }
83
+
84
+ //#endregion
8
85
  //#region src/utils/browser-launcher.ts
9
86
  /**
10
87
  * Launch browser via Chrome DevTools MCP
@@ -43,7 +120,6 @@ async function launchBrowserWithDevTools(options) {
43
120
  //#region src/core.ts
44
121
  const unplugin$1 = (0, unplugin.createUnplugin)((options = {}) => {
45
122
  const enabled = options.enabled ?? process.env.NODE_ENV !== "production";
46
- const enableMcp = options.enableMcp ?? true;
47
123
  const virtualModuleName = options.virtualModuleName ?? "virtual:dev-inspector-mcp";
48
124
  const webpackModuleName = virtualModuleName.replace("virtual:", "");
49
125
  let resolvedHost = options.host || "localhost";
@@ -67,7 +143,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
67
143
  window.__DEV_INSPECTOR_CONFIG__ = {
68
144
  host: '${resolvedHost}',
69
145
  port: '${resolvedPort}',
70
- base: '/'
146
+ base: '/',
147
+ showInspectorBar: ${options.showInspectorBar ?? true}
71
148
  };
72
149
 
73
150
  // Dynamically load inspector script
@@ -103,6 +180,15 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
103
180
  console.error(`[dev-inspector] Failed to transform ${id}:`, error);
104
181
  return null;
105
182
  }
183
+ if (id.match(/\.svelte$/)) try {
184
+ return await compileSvelte({
185
+ code,
186
+ id
187
+ });
188
+ } catch (error) {
189
+ console.error(`[dev-inspector] Failed to transform ${id}:`, error);
190
+ return null;
191
+ }
106
192
  return null;
107
193
  },
108
194
  vite: {
@@ -122,6 +208,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
122
208
  const host = options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost");
123
209
  const port = options.port ?? server?.config.server.port ?? 5173;
124
210
  const base = server?.config.base ?? "/";
211
+ const showInspectorBar = options.showInspectorBar ?? true;
125
212
  const displayHost = host === "0.0.0.0" ? "localhost" : host;
126
213
  return html.replace("</body>", `<dev-inspector-mcp></dev-inspector-mcp><script>
127
214
  (function() {
@@ -131,7 +218,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
131
218
  window.__DEV_INSPECTOR_CONFIG__ = {
132
219
  host: '${displayHost}',
133
220
  port: '${port}',
134
- base: '${base}'
221
+ base: '${base}',
222
+ showInspectorBar: ${showInspectorBar}
135
223
  };
136
224
  var script = document.createElement('script');
137
225
  var config = window.__DEV_INSPECTOR_CONFIG__;
@@ -148,45 +236,44 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
148
236
  }
149
237
  },
150
238
  async configureServer(server) {
151
- if (enableMcp) {
152
- const viteHost = server.config.server.host;
153
- const serverContext = {
154
- host: options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost"),
155
- port: options.port ?? server.config.server.port ?? 5173
156
- };
157
- const displayHost = serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host;
158
- const baseUrl = `http://${displayHost}:${serverContext.port}/__mcp__/sse`;
159
- console.log(`[dev-inspector] 📡 MCP: ${baseUrl}\n`);
160
- await require_config_updater.setupMcpMiddleware(server.middlewares, serverContext);
161
- require_config_updater.setupAcpMiddleware(server.middlewares, serverContext, {
162
- acpMode: options.acpMode,
163
- acpModel: options.acpModel,
164
- acpDelay: options.acpDelay
165
- });
166
- const root = server.config.root;
167
- await require_config_updater.updateMcpConfigs(root, baseUrl, {
168
- updateConfig: options.updateConfig,
169
- updateConfigServerName: options.updateConfigServerName,
170
- updateConfigAdditionalServers: options.updateConfigAdditionalServers,
171
- customEditors: options.customEditors
172
- });
173
- if (options.autoOpenBrowser ?? true) {
174
- const targetUrl = options.browserUrl ?? `http://${displayHost}:${serverContext.port}`;
175
- setTimeout(async () => {
176
- if (await launchBrowserWithDevTools({
177
- url: targetUrl,
178
- serverContext
179
- })) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
180
- else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
181
- }, 1e3);
182
- } else {
183
- console.log(`[dev-inspector] ⚠️ autoOpenBrowser: false - Console/Network context unavailable`);
184
- console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
185
- }
239
+ const viteHost = server.config.server.host;
240
+ const serverContext = {
241
+ host: options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost"),
242
+ port: options.port ?? server.config.server.port ?? 5173
243
+ };
244
+ const displayHost = serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host;
245
+ const baseUrl = `http://${displayHost}:${serverContext.port}/__mcp__/sse`;
246
+ console.log(`[dev-inspector] 📡 MCP: ${baseUrl}\n`);
247
+ await require_config_updater.setupMcpMiddleware(server.middlewares, serverContext);
248
+ require_config_updater.setupAcpMiddleware(server.middlewares, serverContext, {
249
+ acpMode: options.acpMode,
250
+ acpModel: options.acpModel,
251
+ acpDelay: options.acpDelay
252
+ });
253
+ const root = server.config.root;
254
+ await require_config_updater.updateMcpConfigs(root, baseUrl, {
255
+ updateConfig: options.updateConfig,
256
+ updateConfigServerName: options.updateConfigServerName,
257
+ updateConfigAdditionalServers: options.updateConfigAdditionalServers,
258
+ customEditors: options.customEditors
259
+ });
260
+ if (options.autoOpenBrowser ?? false) {
261
+ const targetUrl = options.browserUrl ?? `http://${displayHost}:${serverContext.port}`;
262
+ setTimeout(async () => {
263
+ if (await launchBrowserWithDevTools({
264
+ url: targetUrl,
265
+ serverContext
266
+ })) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
267
+ else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
268
+ }, 1e3);
269
+ } else {
270
+ console.log(`[dev-inspector] ⚠️ autoOpenBrowser: false - Console/Network context unavailable`);
271
+ console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt or "chrome_devtools" tool to open browser manually.\n`);
186
272
  }
187
273
  require_config_updater.setupInspectorMiddleware(server.middlewares, {
188
274
  agents: options.agents,
189
- defaultAgent: options.defaultAgent
275
+ defaultAgent: options.defaultAgent,
276
+ showInspectorBar: options.showInspectorBar
190
277
  });
191
278
  },
192
279
  handleHotUpdate() {}
@@ -213,36 +300,34 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
213
300
  host,
214
301
  port
215
302
  };
216
- if (enableMcp) {
217
- const displayHost = host === "0.0.0.0" ? "localhost" : host;
218
- const baseUrl = `http://${displayHost}:${port}/__mcp__/sse`;
219
- console.log(`[dev-inspector] 📡 MCP (Standalone): ${baseUrl}\n`);
220
- require_config_updater.setupMcpMiddleware(server, serverContext);
221
- require_config_updater.setupAcpMiddleware(server, serverContext, {
222
- acpMode: options.acpMode,
223
- acpModel: options.acpModel,
224
- acpDelay: options.acpDelay
225
- });
226
- const root = compiler.context;
227
- await require_config_updater.updateMcpConfigs(root, baseUrl, {
228
- updateConfig: options.updateConfig,
229
- updateConfigServerName: options.updateConfigServerName,
230
- updateConfigAdditionalServers: options.updateConfigAdditionalServers,
231
- customEditors: options.customEditors
232
- });
233
- if (options.autoOpenBrowser ?? true) {
234
- const targetUrl = options.browserUrl ?? `http://${displayHost}:${port}`;
235
- setTimeout(async () => {
236
- if (await launchBrowserWithDevTools({
237
- url: targetUrl,
238
- serverContext
239
- })) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
240
- else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
241
- }, 1e3);
242
- } else {
243
- console.log(`[dev-inspector] ⚠️ autoOpenBrowser: false - Console/Network context unavailable`);
244
- console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
245
- }
303
+ const displayHost = host === "0.0.0.0" ? "localhost" : host;
304
+ const baseUrl = `http://${displayHost}:${port}/__mcp__/sse`;
305
+ console.log(`[dev-inspector] 📡 MCP (Standalone): ${baseUrl}\n`);
306
+ require_config_updater.setupMcpMiddleware(server, serverContext);
307
+ require_config_updater.setupAcpMiddleware(server, serverContext, {
308
+ acpMode: options.acpMode,
309
+ acpModel: options.acpModel,
310
+ acpDelay: options.acpDelay
311
+ });
312
+ const root = compiler.context;
313
+ await require_config_updater.updateMcpConfigs(root, baseUrl, {
314
+ updateConfig: options.updateConfig,
315
+ updateConfigServerName: options.updateConfigServerName,
316
+ updateConfigAdditionalServers: options.updateConfigAdditionalServers,
317
+ customEditors: options.customEditors
318
+ });
319
+ if (options.autoOpenBrowser ?? false) {
320
+ const targetUrl = options.browserUrl ?? `http://${displayHost}:${port}`;
321
+ setTimeout(async () => {
322
+ if (await launchBrowserWithDevTools({
323
+ url: targetUrl,
324
+ serverContext
325
+ })) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
326
+ else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
327
+ }, 1e3);
328
+ } else {
329
+ console.log(`[dev-inspector] ⚠️ autoOpenBrowser: false - Console/Network context unavailable`);
330
+ console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
246
331
  }
247
332
  require_config_updater.setupInspectorMiddleware(server, {
248
333
  agents: options.agents,
package/dist/index.d.cts CHANGED
@@ -74,11 +74,6 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
74
74
  * @default true (automatically disabled in production)
75
75
  */
76
76
  enabled?: boolean;
77
- /**
78
- * Enable MCP server for AI integration
79
- * @default true
80
- */
81
- enableMcp?: boolean;
82
77
  /**
83
78
  * Custom host for MCP server URL
84
79
  * Useful when behind a proxy or in Docker containers
@@ -121,7 +116,7 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
121
116
  /**
122
117
  * Automatically open browser with Chrome DevTools when dev server starts
123
118
  * Uses Chrome DevTools Protocol for full debugging capabilities (console, network, etc.)
124
- * @default true when enableMcp is true
119
+ * @default false
125
120
  */
126
121
  autoOpenBrowser?: boolean;
127
122
  /**
@@ -130,6 +125,12 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
130
125
  * @example "http://localhost:5173/dashboard"
131
126
  */
132
127
  browserUrl?: string;
128
+ /**
129
+ * Whether to show the inspector bar UI
130
+ * Set to false if you only want to use the editor integration
131
+ * @default true
132
+ */
133
+ showInspectorBar?: boolean;
133
134
  }
134
135
  declare const unplugin: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
135
136
  //#endregion
package/dist/index.d.ts CHANGED
@@ -74,11 +74,6 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
74
74
  * @default true (automatically disabled in production)
75
75
  */
76
76
  enabled?: boolean;
77
- /**
78
- * Enable MCP server for AI integration
79
- * @default true
80
- */
81
- enableMcp?: boolean;
82
77
  /**
83
78
  * Custom host for MCP server URL
84
79
  * Useful when behind a proxy or in Docker containers
@@ -121,7 +116,7 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
121
116
  /**
122
117
  * Automatically open browser with Chrome DevTools when dev server starts
123
118
  * Uses Chrome DevTools Protocol for full debugging capabilities (console, network, etc.)
124
- * @default true when enableMcp is true
119
+ * @default false
125
120
  */
126
121
  autoOpenBrowser?: boolean;
127
122
  /**
@@ -130,6 +125,12 @@ interface DevInspectorOptions extends McpConfigOptions, AcpOptions {
130
125
  * @example "http://localhost:5173/dashboard"
131
126
  */
132
127
  browserUrl?: string;
128
+ /**
129
+ * Whether to show the inspector bar UI
130
+ * Set to false if you only want to use the editor integration
131
+ * @default true
132
+ */
133
+ showInspectorBar?: boolean;
133
134
  }
134
135
  declare const unplugin: unplugin0.UnpluginInstance<DevInspectorOptions | undefined, boolean>;
135
136
  //#endregion
package/dist/index.js CHANGED
@@ -1,9 +1,84 @@
1
1
  import { i as setupMcpMiddleware, n as setupAcpMiddleware, r as setupInspectorMiddleware, t as updateMcpConfigs } from "./config-updater.js";
2
2
  import { n as transformJSX, t as compileVue } from "./vue-transform.js";
3
+ import path from "node:path";
3
4
  import { Client } from "@modelcontextprotocol/sdk/client/index.js";
4
5
  import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
5
6
  import { createUnplugin } from "unplugin";
7
+ import MagicString from "magic-string";
8
+ import { parse } from "svelte/compiler";
6
9
 
10
+ //#region src/compiler/svelte-transform.ts
11
+ function normalizePath(id) {
12
+ return id.split(path.sep).join("/");
13
+ }
14
+ const DATA_SOURCE_ATTR = "data-source";
15
+ /**
16
+ * Transform Svelte code to inject data-source attributes for dev inspection.
17
+ *
18
+ * Handles:
19
+ * - Regular elements: <div>, <button>
20
+ * - Components: <Counter>, <MyComponent>
21
+ * - Svelte special elements: <svelte:window>, <svelte:head>, etc.
22
+ *
23
+ * Skips:
24
+ * - Fragments and elements that cannot have attributes
25
+ * - Elements that already have data-source
26
+ * - Parse errors (returns null gracefully)
27
+ */
28
+ function compileSvelte({ code, id }) {
29
+ if (!code.includes("<")) return null;
30
+ let ast;
31
+ try {
32
+ ast = parse(code, {
33
+ filename: id,
34
+ modern: true
35
+ });
36
+ } catch {
37
+ return null;
38
+ }
39
+ const relativePath = normalizePath(path.relative(process.cwd(), id));
40
+ const s = new MagicString(code);
41
+ let hasModifications = false;
42
+ function traverse(node) {
43
+ if ("nodes" in node && Array.isArray(node.nodes)) {
44
+ for (const childNode of node.nodes) traverse(childNode);
45
+ return;
46
+ }
47
+ if ("type" in node && node.type !== "Fragment" && isElementLike(node)) {
48
+ const element = node;
49
+ if (!element.start || !element.end) return;
50
+ if (!element.attributes?.some((attr) => attr.type === "Attribute" && attr.name === DATA_SOURCE_ATTR)) {
51
+ const lines = code.substring(0, element.start).split("\n");
52
+ const sourceValue = `${relativePath}:${lines.length}:${lines[lines.length - 1].length + 1}`;
53
+ const tagMatch = code.substring(element.start).match(/^<([^\s/>]+)/);
54
+ if (tagMatch) {
55
+ const insertPos = element.start + tagMatch[0].length;
56
+ s.appendLeft(insertPos, ` ${DATA_SOURCE_ATTR}="${sourceValue}"`);
57
+ hasModifications = true;
58
+ }
59
+ }
60
+ }
61
+ if ("fragment" in node && node.fragment) traverse(node.fragment);
62
+ if ("consequent" in node && node.consequent) traverse(node.consequent);
63
+ if ("alternate" in node && node.alternate) traverse(node.alternate);
64
+ if ("body" in node && node.body) traverse(node.body);
65
+ if ("pending" in node && node.pending) traverse(node.pending);
66
+ if ("then" in node && node.then) traverse(node.then);
67
+ if ("catch" in node && node.catch) traverse(node.catch);
68
+ if ("fallback" in node && node.fallback) traverse(node.fallback);
69
+ }
70
+ function isElementLike(node) {
71
+ 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";
72
+ }
73
+ traverse(ast.fragment);
74
+ if (!hasModifications) return null;
75
+ return {
76
+ code: s.toString(),
77
+ map: s.generateMap({ hires: true })
78
+ };
79
+ }
80
+
81
+ //#endregion
7
82
  //#region src/utils/browser-launcher.ts
8
83
  /**
9
84
  * Launch browser via Chrome DevTools MCP
@@ -42,7 +117,6 @@ async function launchBrowserWithDevTools(options) {
42
117
  //#region src/core.ts
43
118
  const unplugin = createUnplugin((options = {}) => {
44
119
  const enabled = options.enabled ?? process.env.NODE_ENV !== "production";
45
- const enableMcp = options.enableMcp ?? true;
46
120
  const virtualModuleName = options.virtualModuleName ?? "virtual:dev-inspector-mcp";
47
121
  const webpackModuleName = virtualModuleName.replace("virtual:", "");
48
122
  let resolvedHost = options.host || "localhost";
@@ -66,7 +140,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
66
140
  window.__DEV_INSPECTOR_CONFIG__ = {
67
141
  host: '${resolvedHost}',
68
142
  port: '${resolvedPort}',
69
- base: '/'
143
+ base: '/',
144
+ showInspectorBar: ${options.showInspectorBar ?? true}
70
145
  };
71
146
 
72
147
  // Dynamically load inspector script
@@ -102,6 +177,15 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
102
177
  console.error(`[dev-inspector] Failed to transform ${id}:`, error);
103
178
  return null;
104
179
  }
180
+ if (id.match(/\.svelte$/)) try {
181
+ return await compileSvelte({
182
+ code,
183
+ id
184
+ });
185
+ } catch (error) {
186
+ console.error(`[dev-inspector] Failed to transform ${id}:`, error);
187
+ return null;
188
+ }
105
189
  return null;
106
190
  },
107
191
  vite: {
@@ -121,6 +205,7 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
121
205
  const host = options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost");
122
206
  const port = options.port ?? server?.config.server.port ?? 5173;
123
207
  const base = server?.config.base ?? "/";
208
+ const showInspectorBar = options.showInspectorBar ?? true;
124
209
  const displayHost = host === "0.0.0.0" ? "localhost" : host;
125
210
  return html.replace("</body>", `<dev-inspector-mcp></dev-inspector-mcp><script>
126
211
  (function() {
@@ -130,7 +215,8 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
130
215
  window.__DEV_INSPECTOR_CONFIG__ = {
131
216
  host: '${displayHost}',
132
217
  port: '${port}',
133
- base: '${base}'
218
+ base: '${base}',
219
+ showInspectorBar: ${showInspectorBar}
134
220
  };
135
221
  var script = document.createElement('script');
136
222
  var config = window.__DEV_INSPECTOR_CONFIG__;
@@ -147,45 +233,44 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
147
233
  }
148
234
  },
149
235
  async configureServer(server) {
150
- if (enableMcp) {
151
- const viteHost = server.config.server.host;
152
- const serverContext = {
153
- host: options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost"),
154
- port: options.port ?? server.config.server.port ?? 5173
155
- };
156
- const displayHost = serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host;
157
- const baseUrl = `http://${displayHost}:${serverContext.port}/__mcp__/sse`;
158
- console.log(`[dev-inspector] 📡 MCP: ${baseUrl}\n`);
159
- await setupMcpMiddleware(server.middlewares, serverContext);
160
- setupAcpMiddleware(server.middlewares, serverContext, {
161
- acpMode: options.acpMode,
162
- acpModel: options.acpModel,
163
- acpDelay: options.acpDelay
164
- });
165
- const root = server.config.root;
166
- await updateMcpConfigs(root, baseUrl, {
167
- updateConfig: options.updateConfig,
168
- updateConfigServerName: options.updateConfigServerName,
169
- updateConfigAdditionalServers: options.updateConfigAdditionalServers,
170
- customEditors: options.customEditors
171
- });
172
- if (options.autoOpenBrowser ?? true) {
173
- const targetUrl = options.browserUrl ?? `http://${displayHost}:${serverContext.port}`;
174
- setTimeout(async () => {
175
- if (await launchBrowserWithDevTools({
176
- url: targetUrl,
177
- serverContext
178
- })) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
179
- else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
180
- }, 1e3);
181
- } else {
182
- console.log(`[dev-inspector] ⚠️ autoOpenBrowser: false - Console/Network context unavailable`);
183
- console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
184
- }
236
+ const viteHost = server.config.server.host;
237
+ const serverContext = {
238
+ host: options.host ?? (typeof viteHost === "string" ? viteHost : viteHost === true ? "0.0.0.0" : "localhost"),
239
+ port: options.port ?? server.config.server.port ?? 5173
240
+ };
241
+ const displayHost = serverContext.host === "0.0.0.0" ? "localhost" : serverContext.host;
242
+ const baseUrl = `http://${displayHost}:${serverContext.port}/__mcp__/sse`;
243
+ console.log(`[dev-inspector] 📡 MCP: ${baseUrl}\n`);
244
+ await setupMcpMiddleware(server.middlewares, serverContext);
245
+ setupAcpMiddleware(server.middlewares, serverContext, {
246
+ acpMode: options.acpMode,
247
+ acpModel: options.acpModel,
248
+ acpDelay: options.acpDelay
249
+ });
250
+ const root = server.config.root;
251
+ await updateMcpConfigs(root, baseUrl, {
252
+ updateConfig: options.updateConfig,
253
+ updateConfigServerName: options.updateConfigServerName,
254
+ updateConfigAdditionalServers: options.updateConfigAdditionalServers,
255
+ customEditors: options.customEditors
256
+ });
257
+ if (options.autoOpenBrowser ?? false) {
258
+ const targetUrl = options.browserUrl ?? `http://${displayHost}:${serverContext.port}`;
259
+ setTimeout(async () => {
260
+ if (await launchBrowserWithDevTools({
261
+ url: targetUrl,
262
+ serverContext
263
+ })) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
264
+ else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
265
+ }, 1e3);
266
+ } else {
267
+ console.log(`[dev-inspector] ⚠️ autoOpenBrowser: false - Console/Network context unavailable`);
268
+ console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt or "chrome_devtools" tool to open browser manually.\n`);
185
269
  }
186
270
  setupInspectorMiddleware(server.middlewares, {
187
271
  agents: options.agents,
188
- defaultAgent: options.defaultAgent
272
+ defaultAgent: options.defaultAgent,
273
+ showInspectorBar: options.showInspectorBar
189
274
  });
190
275
  },
191
276
  handleHotUpdate() {}
@@ -212,36 +297,34 @@ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
212
297
  host,
213
298
  port
214
299
  };
215
- if (enableMcp) {
216
- const displayHost = host === "0.0.0.0" ? "localhost" : host;
217
- const baseUrl = `http://${displayHost}:${port}/__mcp__/sse`;
218
- console.log(`[dev-inspector] 📡 MCP (Standalone): ${baseUrl}\n`);
219
- setupMcpMiddleware(server, serverContext);
220
- setupAcpMiddleware(server, serverContext, {
221
- acpMode: options.acpMode,
222
- acpModel: options.acpModel,
223
- acpDelay: options.acpDelay
224
- });
225
- const root = compiler.context;
226
- await updateMcpConfigs(root, baseUrl, {
227
- updateConfig: options.updateConfig,
228
- updateConfigServerName: options.updateConfigServerName,
229
- updateConfigAdditionalServers: options.updateConfigAdditionalServers,
230
- customEditors: options.customEditors
231
- });
232
- if (options.autoOpenBrowser ?? true) {
233
- const targetUrl = options.browserUrl ?? `http://${displayHost}:${port}`;
234
- setTimeout(async () => {
235
- if (await launchBrowserWithDevTools({
236
- url: targetUrl,
237
- serverContext
238
- })) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
239
- else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
240
- }, 1e3);
241
- } else {
242
- console.log(`[dev-inspector] ⚠️ autoOpenBrowser: false - Console/Network context unavailable`);
243
- console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
244
- }
300
+ const displayHost = host === "0.0.0.0" ? "localhost" : host;
301
+ const baseUrl = `http://${displayHost}:${port}/__mcp__/sse`;
302
+ console.log(`[dev-inspector] 📡 MCP (Standalone): ${baseUrl}\n`);
303
+ setupMcpMiddleware(server, serverContext);
304
+ setupAcpMiddleware(server, serverContext, {
305
+ acpMode: options.acpMode,
306
+ acpModel: options.acpModel,
307
+ acpDelay: options.acpDelay
308
+ });
309
+ const root = compiler.context;
310
+ await updateMcpConfigs(root, baseUrl, {
311
+ updateConfig: options.updateConfig,
312
+ updateConfigServerName: options.updateConfigServerName,
313
+ updateConfigAdditionalServers: options.updateConfigAdditionalServers,
314
+ customEditors: options.customEditors
315
+ });
316
+ if (options.autoOpenBrowser ?? false) {
317
+ const targetUrl = options.browserUrl ?? `http://${displayHost}:${port}`;
318
+ setTimeout(async () => {
319
+ if (await launchBrowserWithDevTools({
320
+ url: targetUrl,
321
+ serverContext
322
+ })) console.log(`[dev-inspector] 🌐 Browser opened: ${targetUrl}`);
323
+ else console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to open browser manually.\n`);
324
+ }, 1e3);
325
+ } else {
326
+ console.log(`[dev-inspector] ⚠️ autoOpenBrowser: false - Console/Network context unavailable`);
327
+ console.log(`[dev-inspector] 💡 Use "launch_chrome_devtools" prompt to enable.\n`);
245
328
  }
246
329
  setupInspectorMiddleware(server, {
247
330
  agents: options.agents,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcpc-tech/unplugin-dev-inspector-mcp",
3
- "version": "0.0.17",
3
+ "version": "0.0.19",
4
4
  "description": "Universal dev inspector plugin for React/Vue - inspect component sources and API calls in any bundler",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -155,6 +155,7 @@
155
155
  "shiki": "^3.15.0",
156
156
  "sonner": "^2.0.7",
157
157
  "streamdown": "^1.5.1",
158
+ "svelte": "^5.0.0",
158
159
  "tailwind-merge": "^3.3.1",
159
160
  "tokenlens": "^1.3.1",
160
161
  "unplugin": "^2.3.10",