@xiaou66/vite-plugin-vue-mcp-next 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -54,8 +54,10 @@ var DEFAULT_MASK_HEADERS = [
 // src/constants.ts
 var DEFAULT_MCP_PATH = "/__mcp";
 var DEFAULT_SCREENSHOT_MAX_BYTES = 5 * 1024 * 1024;
+var DEFAULT_SCREENSHOT_SAVE_DIR = ".vite-mcp/screenshot";
 var MCP_TOOL_NAMES = {
   listPages: "list_pages",
+  reloadPage: "reload_page",
   getPageState: "get_page_state",
   getDomTree: "get_dom_tree",
   queryDom: "query_dom",
@@ -78,7 +80,10 @@ var VIRTUAL_RUNTIME_ID = "virtual:vite-plugin-vue-mcp-next/runtime";
 var RESOLVED_VIRTUAL_RUNTIME_ID = `\0${VIRTUAL_RUNTIME_ID}`;
 var VIRTUAL_SCREENSHOT_CONFIG_ID = "virtual:vite-plugin-vue-mcp-next/screenshot-config";
 var RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID = `\0${VIRTUAL_SCREENSHOT_CONFIG_ID}`;
+var VIRTUAL_SNAPDOM_LOADER_ID = "virtual:vite-plugin-vue-mcp-next/snapdom-loader";
+var RESOLVED_VIRTUAL_SNAPDOM_LOADER_ID = `\0${VIRTUAL_SNAPDOM_LOADER_ID}`;
 var DEFAULT_MCP_CLIENT_SERVER_NAME = "vue-mcp-next";
+var RUNTIME_PAGE_RECONNECTED_EVENT = "vite-plugin-vue-mcp-next:page-reconnected";
 var DEFAULT_OPTIONS = {
   mcpPath: DEFAULT_MCP_PATH,
   host: "localhost",
@@ -119,6 +124,8 @@ var DEFAULT_OPTIONS = {
     maxRecords: DEFAULT_CONSOLE_MAX_RECORDS
   },
   screenshot: {
+    type: "path",
+    saveDir: DEFAULT_SCREENSHOT_SAVE_DIR,
     prefer: "auto",
     maxBytes: DEFAULT_SCREENSHOT_MAX_BYTES,
     snapdom: {
@@ -648,6 +655,9 @@ function registerNetworkTools(server, ctx) {
   );
 }
 
+// src/mcp/tools/pages.ts
+var import_zod5 = require("zod");
+
 // src/plugin/entryDiscovery.ts
 var import_node_fs = __toESM(require("fs"), 1);
 var import_node_path = __toESM(require("path"), 1);
@@ -699,6 +709,118 @@ function registerPageTools(server, ctx, vite) {
       });
     }
   );
+  server.registerTool(
+    MCP_TOOL_NAMES.reloadPage,
+    {
+      description: "Reload the selected page. CDP uses ignoreCache; Runtime Hook falls back to normal reload.",
+      inputSchema: {
+        pageId: import_zod5.z.string().optional(),
+        ignoreCache: import_zod5.z.boolean().optional()
+      }
+    },
+    async (input) => {
+      if (hasCdpConfig(ctx)) {
+        return reloadPageWithCdp(ctx, input.pageId, input.ignoreCache ?? true);
+      }
+      const target = resolveRuntimeReloadTarget(ctx, input.pageId);
+      if (!target.ok) {
+        return createToolError(target.error);
+      }
+      const reconnect = waitForRuntimePageReconnect(ctx);
+      ctx.pages.disconnect(target.page.pageId);
+      const result = await requestRuntimeData(ctx, (event) => {
+        void ctx.rpcServer?.reloadPage({ event });
+      });
+      if (!isRecord(result) || result.ok === false) {
+        reconnect.cancel();
+        return createToolResponse(
+          isRecord(result) ? result : { ok: false, error: "Invalid runtime reload response" }
+        );
+      }
+      const page = await reconnect.promise;
+      return createToolResponse(
+        page ? { ...result, reconnected: true, pageId: page.pageId, page } : {
+          ...result,
+          reconnected: false,
+          error: "runtime page reconnect timed out"
+        }
+      );
+    }
+  );
+}
+function hasCdpConfig(ctx) {
+  return Boolean(ctx.options.cdp.browserUrl || ctx.options.cdp.wsEndpoint);
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function resolveRuntimeReloadTarget(ctx, pageId) {
+  try {
+    const page = resolvePageTarget(ctx, pageId);
+    if (page.source !== "runtime") {
+      return {
+        ok: false,
+        error: "Runtime reload requires a runtime page target"
+      };
+    }
+    return { ok: true, page };
+  } catch (error) {
+    return {
+      ok: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+function waitForRuntimePageReconnect(ctx) {
+  let timeout;
+  let cleanup;
+  const promise = new Promise((resolve) => {
+    timeout = setTimeout(() => {
+      cleanup?.();
+      resolve(null);
+    }, 5e3);
+    cleanup = ctx.hooks.hookOnce(RUNTIME_PAGE_RECONNECTED_EVENT, (payload) => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      resolve(isPageTarget(payload) ? payload : null);
+    });
+  });
+  return {
+    promise,
+    cancel() {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      cleanup?.();
+    }
+  };
+}
+function isPageTarget(value) {
+  if (!isRecord(value)) {
+    return false;
+  }
+  return typeof value.pageId === "string" && (value.source === "runtime" || value.source === "cdp") && typeof value.url === "string" && typeof value.pathname === "string" && typeof value.connected === "boolean";
+}
+async function reloadPageWithCdp(ctx, pageId, ignoreCache) {
+  const cdp = await connectCdpForPage(ctx, pageId);
+  if (!cdp) {
+    return createToolError("CDP target is unavailable for page reload");
+  }
+  try {
+    await cdp.client.Page.enable();
+    const loaded = cdp.client.Page.loadEventFired();
+    await cdp.client.Page.reload({ ignoreCache });
+    await loaded;
+    return createToolResponse({
+      ok: true,
+      source: "cdp",
+      ignoreCache,
+      pageId
+    });
+  } finally {
+    await closeCdpClient(cdp.client);
+  }
 }
 async function listCdpPageTargets(ctx) {
   if (ctx.options.cdp.wsEndpoint) {
@@ -745,7 +867,7 @@ function getPathname(url) {
 }
 
 // src/mcp/tools/screenshot.ts
-var import_zod5 = require("zod");
+var import_zod6 = require("zod");
 
 // src/cdp/cdpScreenshot.ts
 async function cdpCaptureScreenshot(options) {
@@ -849,18 +971,70 @@ function isElementRect(value) {
   return typeof rect.x === "number" && typeof rect.y === "number" && typeof rect.width === "number" && rect.width > 0 && typeof rect.height === "number" && rect.height > 0;
 }
 
+// src/mcp/tools/screenshotOutput.ts
+var import_node_crypto = require("crypto");
+var import_promises = require("fs/promises");
+var import_node_path2 = __toESM(require("path"), 1);
+async function createScreenshotOutput(ctx, payload) {
+  if (ctx.options.screenshot.type === "base64") {
+    return payload;
+  }
+  const saveDir = resolveScreenshotSaveDir(ctx);
+  await (0, import_promises.mkdir)(saveDir, { recursive: true });
+  const filePath = import_node_path2.default.join(saveDir, createScreenshotFileName(payload));
+  await (0, import_promises.writeFile)(filePath, Buffer.from(payload.data, "base64"));
+  return {
+    source: payload.source,
+    target: payload.target,
+    format: payload.format,
+    width: payload.width,
+    height: payload.height,
+    mimeType: payload.mimeType,
+    byteLength: payload.byteLength,
+    limitations: payload.limitations,
+    path: filePath,
+    relativePath: createProjectRelativePath(ctx, filePath)
+  };
+}
+function resolveScreenshotSaveDir(ctx) {
+  const saveDir = ctx.options.screenshot.saveDir.trim();
+  if (!saveDir) {
+    throw new Error("screenshot.saveDir must be a non-empty string");
+  }
+  const root = ctx.server?.config.root;
+  if (!root) {
+    throw new Error("Vite server root is required for screenshot path output");
+  }
+  if (import_node_path2.default.isAbsolute(saveDir)) {
+    return saveDir;
+  }
+  return import_node_path2.default.resolve(root, saveDir);
+}
+function createScreenshotFileName(payload) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+  const suffix = (0, import_node_crypto.randomUUID)().slice(0, 8);
+  return `${timestamp}-${payload.source}-${payload.target}-${suffix}.${payload.format}`;
+}
+function createProjectRelativePath(ctx, filePath) {
+  const root = ctx.server?.config.root;
+  if (!root) {
+    throw new Error("Vite server root is required for screenshot path output");
+  }
+  return import_node_path2.default.relative(root, filePath).split(import_node_path2.default.sep).join("/");
+}
+
 // src/mcp/tools/screenshot.ts
 var DEFAULT_SCREENSHOT_TARGET = "viewport";
 var DEFAULT_SCREENSHOT_FORMAT = "png";
 var screenshotInputSchema = {
-  pageId: import_zod5.z.string().optional(),
-  target: import_zod5.z.enum(["viewport", "fullPage", "element"]).optional(),
-  selector: import_zod5.z.string().optional(),
-  format: import_zod5.z.enum(["png", "jpeg", "webp"]).optional(),
-  prefer: import_zod5.z.enum(["auto", "cdp", "runtime"]).optional(),
-  quality: import_zod5.z.number().optional(),
-  scale: import_zod5.z.number().optional(),
-  snapdom: import_zod5.z.record(import_zod5.z.string(), import_zod5.z.unknown()).optional()
+  pageId: import_zod6.z.string().optional(),
+  target: import_zod6.z.enum(["viewport", "fullPage", "element"]).optional(),
+  selector: import_zod6.z.string().optional(),
+  format: import_zod6.z.enum(["png", "jpeg", "webp"]).optional(),
+  prefer: import_zod6.z.enum(["auto", "cdp", "runtime"]).optional(),
+  quality: import_zod6.z.number().optional(),
+  scale: import_zod6.z.number().optional(),
+  snapdom: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.unknown()).optional()
 };
 function registerScreenshotTools(server, ctx) {
   server.registerTool(
@@ -890,7 +1064,7 @@ async function handleTakeScreenshot(ctx, input) {
           format,
           quality: input.quality
         });
-        return createScreenshotResponse(ctx, {
+        return await createScreenshotResponse(ctx, {
           source: "cdp",
           target,
           format,
@@ -936,15 +1110,30 @@ async function createRuntimeScreenshot(ctx, input, normalized) {
   if (!isPlainRecord(result)) {
     return createToolError("runtime screenshot returned an invalid response");
   }
-  return createToolResponse(result);
+  if (result.ok === false) {
+    return createToolResponse(result);
+  }
+  if (!isScreenshotImagePayload(result)) {
+    return createToolError("runtime screenshot returned an invalid response");
+  }
+  return createScreenshotResponse(ctx, {
+    ...result,
+    target: normalized.target,
+    format: normalized.format
+  });
 }
-function createScreenshotResponse(ctx, result) {
+async function createScreenshotResponse(ctx, result) {
   if (result.byteLength > ctx.options.screenshot.maxBytes) {
     return createToolError(
       `screenshot is too large: ${String(result.byteLength)} bytes`
     );
   }
-  return createToolResponse(result);
+  try {
+    return createToolResponse(await createScreenshotOutput(ctx, result));
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return createToolError(`failed to create screenshot output: ${message}`);
+  }
 }
 function isScreenshotTooLarge(ctx, result) {
   return isPlainRecord(result) && "byteLength" in result && typeof result.byteLength === "number" && result.byteLength > ctx.options.screenshot.maxBytes;
@@ -959,10 +1148,13 @@ function getBase64ByteLength(data) {
   const padding = data.endsWith("==") ? 2 : data.endsWith("=") ? 1 : 0;
   return Math.ceil(data.length * 3 / 4) - padding;
 }
+function isScreenshotImagePayload(result) {
+  return (result.source === "cdp" || result.source === "snapdom") && typeof result.data === "string" && typeof result.width === "number" && typeof result.height === "number" && typeof result.mimeType === "string" && typeof result.byteLength === "number";
+}
 
 // src/mcp/tools/vue.ts
 var import_nanoid2 = require("nanoid");
-var import_zod6 = require("zod");
+var import_zod7 = require("zod");
 function registerVueTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getComponentTree,
@@ -975,7 +1167,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getComponentState,
     {
       description: "Get Vue component state.",
-      inputSchema: { componentName: import_zod6.z.string() }
+      inputSchema: { componentName: import_zod7.z.string() }
     },
     async ({ componentName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getInspectorState({ event, componentName });
@@ -986,19 +1178,19 @@ function registerVueTools(server, ctx) {
     {
       description: "Edit Vue component state.",
       inputSchema: {
-        componentName: import_zod6.z.string(),
-        path: import_zod6.z.array(import_zod6.z.string()),
-        value: import_zod6.z.string(),
-        valueType: import_zod6.z.enum(["string", "number", "boolean", "object", "array"])
+        componentName: import_zod7.z.string(),
+        path: import_zod7.z.array(import_zod7.z.string()),
+        value: import_zod7.z.string(),
+        valueType: import_zod7.z.enum(["string", "number", "boolean", "object", "array"])
       }
     },
-    ({ componentName, path: path5, value, valueType }) => {
+    ({ componentName, path: path6, value, valueType }) => {
       if (!ctx.rpcServer) {
         return vueBridgeUnavailable();
       }
       void ctx.rpcServer.editComponentState({
         componentName,
-        path: path5,
+        path: path6,
         value,
         valueType
       });
@@ -1009,7 +1201,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.highlightComponent,
     {
       description: "Highlight a Vue component.",
-      inputSchema: { componentName: import_zod6.z.string() }
+      inputSchema: { componentName: import_zod7.z.string() }
     },
     ({ componentName }) => {
       if (!ctx.rpcServer) {
@@ -1037,7 +1229,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getPiniaState,
     {
       description: "Get Pinia store state.",
-      inputSchema: { storeName: import_zod6.z.string() }
+      inputSchema: { storeName: import_zod7.z.string() }
     },
     async ({ storeName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getPiniaState({ event, storeName });
@@ -1159,6 +1351,10 @@ function createServerVueRuntimeRpc(ctx) {
     onDomQueryUpdated: (event, data) => {
       void ctx.hooks.callHook(event, data);
     },
+    reloadPage: () => void 0,
+    onPageReloaded: (event, data) => {
+      void ctx.hooks.callHook(event, data);
+    },
     evaluateScript: () => void 0,
     onEvaluateScriptUpdated: (event, data) => {
       void ctx.hooks.callHook(event, data);
@@ -1452,6 +1648,8 @@ async function startCdpObservers(ctx, target, client) {
 }
 
 // src/plugin/injectRuntime.ts
+var import_node_module = require("module");
+var import_node_path3 = require("path");
 function createRuntimeInjectionController(options, getConfig) {
   return {
     resolveId(importee) {
@@ -1461,15 +1659,21 @@ function createRuntimeInjectionController(options, getConfig) {
       if (importee === VIRTUAL_SCREENSHOT_CONFIG_ID) {
         return RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID;
       }
+      if (importee === VIRTUAL_SNAPDOM_LOADER_ID) {
+        return RESOLVED_VIRTUAL_SNAPDOM_LOADER_ID;
+      }
       return void 0;
     },
     load(id) {
       if (id === RESOLVED_VIRTUAL_RUNTIME_ID) {
-        return "import { startRuntimeClient } from '@xiaou66/vite-plugin-vue-mcp-next/runtime/client';\nvoid startRuntimeClient();";
+        return createRuntimeModule();
       }
       if (id === RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID) {
         return createScreenshotConfigModule(options);
       }
+      if (id === RESOLVED_VIRTUAL_SNAPDOM_LOADER_ID) {
+        return createSnapdomLoaderModule(getConfig()?.root);
+      }
       return void 0;
     },
     transformIndexHtml(html) {
@@ -1505,6 +1709,41 @@ ${code}`;
     }
   };
 }
+function createRuntimeModule() {
+  return [
+    "import { setScreenshotModuleRegistry, setSnapdomLoader, startRuntimeClient } from '@xiaou66/vite-plugin-vue-mcp-next/runtime/client';",
+    `import { screenshotModuleRegistry } from '${VIRTUAL_SCREENSHOT_CONFIG_ID}';`,
+    `import { loadSnapdom } from '${VIRTUAL_SNAPDOM_LOADER_ID}';`,
+    "setScreenshotModuleRegistry(screenshotModuleRegistry);",
+    "setSnapdomLoader(loadSnapdom);",
+    "void startRuntimeClient();"
+  ].join("\n");
+}
+function createSnapdomLoaderModule(root) {
+  if (!canResolveSnapdomFromProject(root)) {
+    return [
+      "export const loadSnapdom = () =>",
+      `  Promise.reject(new Error(${JSON.stringify(createMissingSnapdomMessage())}));`
+    ].join("\n");
+  }
+  return [
+    "import { snapdom } from '@zumer/snapdom';",
+    "export const loadSnapdom = () => Promise.resolve({ snapdom });"
+  ].join("\n");
+}
+function canResolveSnapdomFromProject(root) {
+  try {
+    (0, import_node_module.createRequire)((0, import_node_path3.join)(root ?? process.cwd(), "package.json")).resolve(
+      "@zumer/snapdom"
+    );
+    return true;
+  } catch {
+    return false;
+  }
+}
+function createMissingSnapdomMessage() {
+  return "\u7F3A\u5C11\u53EF\u9009\u4F9D\u8D56 @zumer/snapdom\u3002DOM \u622A\u56FE\u964D\u7EA7\u9700\u8981\u8BE5\u4F9D\u8D56\uFF0C\u8BF7\u6267\u884C\uFF1Apnpm add -D @zumer/snapdom";
+}
 function createScreenshotConfigModule(options) {
   const paths = collectScreenshotImportPaths(options);
   const imports = paths.map((item, index) => `import * as m${String(index)} from ${JSON.stringify(item)};`).join("\n");
@@ -1533,17 +1772,17 @@ function getPluginPath(plugin) {
 }
 
 // src/plugin/mcpClientConfig/index.ts
-var import_node_path4 = __toESM(require("path"), 1);
+var import_node_path6 = __toESM(require("path"), 1);
 
 // src/plugin/mcpClientConfig/codexConfig.ts
-var import_promises = __toESM(require("fs/promises"), 1);
-var import_node_path2 = __toESM(require("path"), 1);
+var import_promises2 = __toESM(require("fs/promises"), 1);
+var import_node_path4 = __toESM(require("path"), 1);
 async function updateCodexMcpClientConfig(options) {
   try {
     const current = await readOptionalTextFile(options.configPath);
     const next = replaceOrAppendOwnedBlock(current, options);
-    await import_promises.default.mkdir(import_node_path2.default.dirname(options.configPath), { recursive: true });
-    await import_promises.default.writeFile(options.configPath, next);
+    await import_promises2.default.mkdir(import_node_path4.default.dirname(options.configPath), { recursive: true });
+    await import_promises2.default.writeFile(options.configPath, next);
   } catch (error) {
     console.warn(
       `[vite-plugin-vue-mcp-next] Failed to update Codex MCP config at ${options.configPath}: ${formatError(error)}`
@@ -1585,7 +1824,7 @@ function quoteTomlString(value) {
 }
 async function readOptionalTextFile(filePath) {
   try {
-    return await import_promises.default.readFile(filePath, "utf-8");
+    return await import_promises2.default.readFile(filePath, "utf-8");
   } catch (error) {
     if (isNodeError(error) && error.code === "ENOENT") {
       return "";
@@ -1611,8 +1850,8 @@ function isNodeError(error) {
 }
 
 // src/plugin/mcpClientConfig/jsonConfig.ts
-var import_promises2 = __toESM(require("fs/promises"), 1);
-var import_node_path3 = __toESM(require("path"), 1);
+var import_promises3 = __toESM(require("fs/promises"), 1);
+var import_node_path5 = __toESM(require("path"), 1);
 async function updateJsonMcpClientConfig(options) {
   try {
     const config = await readJsonConfig(options.configPath);
@@ -1626,8 +1865,8 @@ async function updateJsonMcpClientConfig(options) {
     }
     mcpServers[options.serverName] = { type: "sse", url: options.mcpUrl };
     config.mcpServers = mcpServers;
-    await import_promises2.default.mkdir(import_node_path3.default.dirname(options.configPath), { recursive: true });
-    await import_promises2.default.writeFile(
+    await import_promises3.default.mkdir(import_node_path5.default.dirname(options.configPath), { recursive: true });
+    await import_promises3.default.writeFile(
       options.configPath,
       `${JSON.stringify(config, null, 2)}
 `
@@ -1645,7 +1884,7 @@ async function readJsonConfig(configPath) {
 }
 async function readOptionalTextFile2(filePath) {
   try {
-    return await import_promises2.default.readFile(filePath, "utf-8");
+    return await import_promises3.default.readFile(filePath, "utf-8");
   } catch (error) {
     if (isNodeError2(error) && error.code === "ENOENT") {
       return "{}";
@@ -1676,7 +1915,7 @@ async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options)
     jobs.push(
       updateJsonMcpClientConfig({
         clientName: "Cursor",
-        configPath: import_node_path4.default.join(root, ".cursor", "mcp.json"),
+        configPath: import_node_path6.default.join(root, ".cursor", "mcp.json"),
         mcpUrl: sseUrl,
         serverName
       })
@@ -1685,7 +1924,7 @@ async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options)
   if (options.codex) {
     jobs.push(
       updateCodexMcpClientConfig({
-        configPath: import_node_path4.default.join(root, ".codex", "config.toml"),
+        configPath: import_node_path6.default.join(root, ".codex", "config.toml"),
         mcpUrl: streamableHttpUrl,
         serverName
       })
@@ -1695,7 +1934,7 @@ async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options)
     jobs.push(
       updateJsonMcpClientConfig({
         clientName: "Claude Code",
-        configPath: import_node_path4.default.join(root, ".mcp.json"),
+        configPath: import_node_path6.default.join(root, ".mcp.json"),
         mcpUrl: sseUrl,
         serverName
       })
@@ -1705,7 +1944,7 @@ async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options)
     jobs.push(
       updateJsonMcpClientConfig({
         clientName: "Trae",
-        configPath: import_node_path4.default.join(root, ".trae", "mcp.json"),
+        configPath: import_node_path6.default.join(root, ".trae", "mcp.json"),
         mcpUrl: sseUrl,
         serverName
       })
@@ -1752,6 +1991,7 @@ function vueMcpNext(userOptions = {}) {
         (payload) => {
           if (isRuntimePageTarget(payload)) {
             ctx.pages.upsert(payload);
+            void ctx.hooks.callHook(RUNTIME_PAGE_RECONNECTED_EVENT, payload);
             void cdpLifecycle.connectPage(payload);
           }
         }