@xiaou66/vite-plugin-vue-mcp-next 0.0.3 → 0.0.6

package/dist/index.js

@@ -16,11 +16,13 @@ var DEFAULT_MASK_HEADERS = [
 
 // src/constants.ts
 var DEFAULT_MCP_PATH = "/__mcp";
+var DEFAULT_SCREENSHOT_MAX_BYTES = 5 * 1024 * 1024;
 var MCP_TOOL_NAMES = {
   listPages: "list_pages",
   getPageState: "get_page_state",
   getDomTree: "get_dom_tree",
   queryDom: "query_dom",
+  takeScreenshot: "take_screenshot",
   getConsoleLogs: "get_console_logs",
   clearConsoleLogs: "clear_console_logs",
   evaluateScript: "evaluate_script",
@@ -37,6 +39,8 @@ var MCP_TOOL_NAMES = {
 };
 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 DEFAULT_MCP_CLIENT_SERVER_NAME = "vue-mcp-next";
 var DEFAULT_OPTIONS = {
   mcpPath: DEFAULT_MCP_PATH,
@@ -76,6 +80,14 @@ var DEFAULT_OPTIONS = {
   },
   console: {
     maxRecords: DEFAULT_CONSOLE_MAX_RECORDS
+  },
+  screenshot: {
+    prefer: "auto",
+    maxBytes: DEFAULT_SCREENSHOT_MAX_BYTES,
+    snapdom: {
+      options: {},
+      plugins: []
+    }
   }
 };
 function mergeMcpClientOptions(cursorConfig, mcpClients) {
@@ -126,6 +138,21 @@ function mergeOptions(options = {}) {
     console: {
       ...DEFAULT_OPTIONS.console,
       ...options.console
+    },
+    screenshot: {
+      ...DEFAULT_OPTIONS.screenshot,
+      ...options.screenshot,
+      snapdom: {
+        ...DEFAULT_OPTIONS.screenshot.snapdom,
+        ...options.screenshot?.snapdom,
+        options: {
+          ...DEFAULT_OPTIONS.screenshot.snapdom.options,
+          ...options.screenshot?.snapdom?.options
+        },
+        plugins: options.screenshot?.snapdom?.plugins ?? [
+          ...DEFAULT_OPTIONS.screenshot.snapdom.plugins
+        ]
+      }
     }
   };
 }
@@ -680,9 +707,225 @@ function getPathname(url) {
   }
 }
 
+// src/mcp/tools/screenshot.ts
+import { z as z5 } from "zod";
+
+// src/cdp/cdpScreenshot.ts
+async function cdpCaptureScreenshot(options) {
+  if (options.target === "element") {
+    return captureElementScreenshot(options);
+  }
+  if (options.target === "fullPage") {
+    return captureFullPageScreenshot(options);
+  }
+  return captureViewportScreenshot(options);
+}
+async function captureViewportScreenshot(options) {
+  const metrics = await options.client.Page.getLayoutMetrics();
+  const width = Math.ceil(metrics.cssLayoutViewport.clientWidth);
+  const height = Math.ceil(metrics.cssLayoutViewport.clientHeight);
+  const result = await options.client.Page.captureScreenshot(
+    omitUndefined({
+      format: options.format,
+      quality: createQuality(options),
+      captureBeyondViewport: false
+    })
+  );
+  return { data: result.data, width, height };
+}
+async function captureFullPageScreenshot(options) {
+  const metrics = await options.client.Page.getLayoutMetrics();
+  const width = Math.ceil(metrics.cssContentSize.width);
+  const height = Math.ceil(metrics.cssContentSize.height);
+  const result = await options.client.Page.captureScreenshot(
+    omitUndefined({
+      format: options.format,
+      quality: createQuality(options),
+      captureBeyondViewport: true,
+      clip: { x: 0, y: 0, width, height, scale: 1 }
+    })
+  );
+  return { data: result.data, width, height };
+}
+async function captureElementScreenshot(options) {
+  if (!options.selector) {
+    throw new Error("selector is required when target is element");
+  }
+  const rect = await getElementRect(options.client, options.selector);
+  const result = await options.client.Page.captureScreenshot(
+    omitUndefined({
+      format: options.format,
+      quality: createQuality(options),
+      captureBeyondViewport: true,
+      clip: {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        scale: 1
+      }
+    })
+  );
+  return { data: result.data, width: rect.width, height: rect.height };
+}
+async function getElementRect(client, selector) {
+  const result = await client.Runtime.evaluate({
+    expression: createElementRectExpression(selector),
+    awaitPromise: true,
+    returnByValue: true
+  });
+  if (result.exceptionDetails) {
+    throw new Error(result.exceptionDetails.text || "element query failed");
+  }
+  const value = result.result.value;
+  if (!isElementRect(value)) {
+    throw new Error(`element not found: ${selector}`);
+  }
+  return value;
+}
+function createElementRectExpression(selector) {
+  return `(() => {
+  const el = document.querySelector(${JSON.stringify(selector)});
+  if (!el) return null;
+  const rect = el.getBoundingClientRect();
+  return {
+    x: rect.x + window.scrollX,
+    y: rect.y + window.scrollY,
+    width: rect.width,
+    height: rect.height
+  };
+})()`;
+}
+function createQuality(options) {
+  return options.format === "png" ? void 0 : options.quality;
+}
+function omitUndefined(value) {
+  return Object.fromEntries(
+    Object.entries(value).filter(([, item]) => item !== void 0)
+  );
+}
+function isElementRect(value) {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const rect = 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/screenshot.ts
+var DEFAULT_SCREENSHOT_TARGET = "viewport";
+var DEFAULT_SCREENSHOT_FORMAT = "png";
+var screenshotInputSchema = {
+  pageId: z5.string().optional(),
+  target: z5.enum(["viewport", "fullPage", "element"]).optional(),
+  selector: z5.string().optional(),
+  format: z5.enum(["png", "jpeg", "webp"]).optional(),
+  prefer: z5.enum(["auto", "cdp", "runtime"]).optional(),
+  quality: z5.number().optional(),
+  scale: z5.number().optional(),
+  snapdom: z5.record(z5.string(), z5.unknown()).optional()
+};
+function registerScreenshotTools(server, ctx) {
+  server.registerTool(
+    MCP_TOOL_NAMES.takeScreenshot,
+    {
+      description: "Take a page screenshot using CDP or snapdom fallback.",
+      inputSchema: screenshotInputSchema
+    },
+    async (input) => handleTakeScreenshot(ctx, input)
+  );
+}
+async function handleTakeScreenshot(ctx, input) {
+  const target = input.target ?? DEFAULT_SCREENSHOT_TARGET;
+  const format = input.format ?? DEFAULT_SCREENSHOT_FORMAT;
+  const prefer = input.prefer ?? ctx.options.screenshot.prefer;
+  if (target === "element" && !input.selector) {
+    return createToolError("selector is required when target is element");
+  }
+  if (prefer !== "runtime") {
+    const cdp = await connectCdpForPage(ctx, input.pageId);
+    if (cdp) {
+      try {
+        const screenshot = await cdpCaptureScreenshot({
+          client: cdp.client,
+          target,
+          selector: input.selector,
+          format,
+          quality: input.quality
+        });
+        return createScreenshotResponse(ctx, {
+          source: "cdp",
+          target,
+          format,
+          data: screenshot.data,
+          width: screenshot.width,
+          height: screenshot.height,
+          mimeType: createMimeType(format),
+          byteLength: getBase64ByteLength(screenshot.data)
+        });
+      } finally {
+        await closeCdpClient(cdp.client);
+      }
+    }
+    if (prefer === "cdp") {
+      return createToolError("CDP screenshot is unavailable");
+    }
+  }
+  return createRuntimeScreenshot(ctx, input, { target, format });
+}
+async function createRuntimeScreenshot(ctx, input, normalized) {
+  const result = await requestRuntimeData(ctx, (event) => {
+    void ctx.rpcServer?.takeScreenshot({
+      event,
+      target: normalized.target,
+      selector: input.selector,
+      format: normalized.format,
+      quality: input.quality,
+      scale: input.scale,
+      snapdom: {
+        ...ctx.options.screenshot.snapdom,
+        options: {
+          ...ctx.options.screenshot.snapdom.options,
+          ...input.snapdom
+        }
+      }
+    });
+  });
+  if (isScreenshotTooLarge(ctx, result)) {
+    return createToolError(
+      `screenshot is too large: ${String(result.byteLength)} bytes`
+    );
+  }
+  if (!isPlainRecord(result)) {
+    return createToolError("runtime screenshot returned an invalid response");
+  }
+  return createToolResponse(result);
+}
+function createScreenshotResponse(ctx, result) {
+  if (result.byteLength > ctx.options.screenshot.maxBytes) {
+    return createToolError(
+      `screenshot is too large: ${String(result.byteLength)} bytes`
+    );
+  }
+  return createToolResponse(result);
+}
+function isScreenshotTooLarge(ctx, result) {
+  return isPlainRecord(result) && "byteLength" in result && typeof result.byteLength === "number" && result.byteLength > ctx.options.screenshot.maxBytes;
+}
+function isPlainRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function createMimeType(format) {
+  return `image/${format}`;
+}
+function getBase64ByteLength(data) {
+  const padding = data.endsWith("==") ? 2 : data.endsWith("=") ? 1 : 0;
+  return Math.ceil(data.length * 3 / 4) - padding;
+}
+
 // src/mcp/tools/vue.ts
 import { nanoid as nanoid2 } from "nanoid";
-import { z as z5 } from "zod";
+import { z as z6 } from "zod";
 function registerVueTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getComponentTree,
@@ -695,7 +938,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getComponentState,
     {
       description: "Get Vue component state.",
-      inputSchema: { componentName: z5.string() }
+      inputSchema: { componentName: z6.string() }
     },
     async ({ componentName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getInspectorState({ event, componentName });
@@ -706,10 +949,10 @@ function registerVueTools(server, ctx) {
     {
       description: "Edit Vue component state.",
       inputSchema: {
-        componentName: z5.string(),
-        path: z5.array(z5.string()),
-        value: z5.string(),
-        valueType: z5.enum(["string", "number", "boolean", "object", "array"])
+        componentName: z6.string(),
+        path: z6.array(z6.string()),
+        value: z6.string(),
+        valueType: z6.enum(["string", "number", "boolean", "object", "array"])
       }
     },
     ({ componentName, path: path5, value, valueType }) => {
@@ -729,7 +972,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.highlightComponent,
     {
       description: "Highlight a Vue component.",
-      inputSchema: { componentName: z5.string() }
+      inputSchema: { componentName: z6.string() }
     },
     ({ componentName }) => {
       if (!ctx.rpcServer) {
@@ -757,7 +1000,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getPiniaState,
     {
       description: "Get Pinia store state.",
-      inputSchema: { storeName: z5.string() }
+      inputSchema: { storeName: z6.string() }
     },
     async ({ storeName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getPiniaState({ event, storeName });
@@ -800,6 +1043,7 @@ function createMcpServer(ctx, vite) {
   });
   registerPageTools(server, ctx, vite);
   registerDomTools(server, ctx);
+  registerScreenshotTools(server, ctx);
   registerConsoleTools(server, ctx);
   registerEvaluateTools(server, ctx);
   registerNetworkTools(server, ctx);
@@ -882,6 +1126,10 @@ function createServerVueRuntimeRpc(ctx) {
     onEvaluateScriptUpdated: (event, data) => {
       void ctx.hooks.callHook(event, data);
     },
+    takeScreenshot: () => void 0,
+    onScreenshotTaken: (event, data) => {
+      void ctx.hooks.callHook(event, data);
+    },
     getInspectorTree: () => void 0,
     onInspectorTreeUpdated: (event, data) => {
       void ctx.hooks.callHook(event, data);
@@ -1173,13 +1421,19 @@ function createRuntimeInjectionController(options, getConfig) {
       if (importee === VIRTUAL_RUNTIME_ID) {
         return RESOLVED_VIRTUAL_RUNTIME_ID;
       }
+      if (importee === VIRTUAL_SCREENSHOT_CONFIG_ID) {
+        return RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID;
+      }
       return void 0;
     },
     load(id) {
-      if (id !== RESOLVED_VIRTUAL_RUNTIME_ID) {
-        return void 0;
+      if (id === RESOLVED_VIRTUAL_RUNTIME_ID) {
+        return createRuntimeModule();
+      }
+      if (id === RESOLVED_VIRTUAL_SCREENSHOT_CONFIG_ID) {
+        return createScreenshotConfigModule(options);
       }
-      return "import { startRuntimeClient } from '@xiaou66/vite-plugin-vue-mcp-next/runtime/client';\nvoid startRuntimeClient();";
+      return void 0;
     },
     transformIndexHtml(html) {
       if (options.appendTo) {
@@ -1214,6 +1468,40 @@ ${code}`;
     }
   };
 }
+function createRuntimeModule() {
+  return [
+    "import { setScreenshotModuleRegistry, startRuntimeClient } from '@xiaou66/vite-plugin-vue-mcp-next/runtime/client';",
+    `import { screenshotModuleRegistry } from '${VIRTUAL_SCREENSHOT_CONFIG_ID}';`,
+    "setScreenshotModuleRegistry(screenshotModuleRegistry);",
+    "void startRuntimeClient();"
+  ].join("\n");
+}
+function createScreenshotConfigModule(options) {
+  const paths = collectScreenshotImportPaths(options);
+  const imports = paths.map((item, index) => `import * as m${String(index)} from ${JSON.stringify(item)};`).join("\n");
+  const entries = paths.map((item, index) => `${JSON.stringify(item)}: m${String(index)}`).join(",\n  ");
+  return `${imports}
+export const screenshotModuleRegistry = {
+  ${entries}
+};
+`;
+}
+function collectScreenshotImportPaths(options) {
+  const paths = /* @__PURE__ */ new Set();
+  for (const plugin of options.screenshot.snapdom.plugins) {
+    paths.add(getPluginPath(plugin));
+  }
+  if (options.screenshot.snapdom.filter) {
+    paths.add(options.screenshot.snapdom.filter);
+  }
+  if (options.screenshot.snapdom.fallbackURL) {
+    paths.add(options.screenshot.snapdom.fallbackURL);
+  }
+  return [...paths];
+}
+function getPluginPath(plugin) {
+  return typeof plugin === "string" ? plugin : plugin.path;
+}
 
 // src/plugin/mcpClientConfig/index.ts
 import path4 from "path";
@@ -1299,11 +1587,11 @@ import path3 from "path";
 async function updateJsonMcpClientConfig(options) {
   try {
     const config = await readJsonConfig(options.configPath);
-    if (!isPlainRecord(config)) {
+    if (!isPlainRecord2(config)) {
       warnConfigFailure(options, "config root must be a JSON object");
       return;
     }
-    const mcpServers = isPlainRecord(config.mcpServers) ? config.mcpServers : {};
+    const mcpServers = isPlainRecord2(config.mcpServers) ? config.mcpServers : {};
     if (Object.hasOwn(mcpServers, options.serverName)) {
       return;
     }
@@ -1336,7 +1624,7 @@ async function readOptionalTextFile2(filePath) {
     throw error;
   }
 }
-function isPlainRecord(value) {
+function isPlainRecord2(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
 function warnConfigFailure(options, reason) {