@xiaou66/vite-plugin-vue-mcp-next 0.0.1

package/dist/runtime/client.js

@@ -0,0 +1,672 @@
+// src/runtime/client.ts
+import { createHotContext } from "vite-hot-client";
+
+// src/runtime/consoleHook.ts
+import { nanoid } from "nanoid";
+
+// src/shared/serialization.ts
+function safeStringify(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  const seen = /* @__PURE__ */ new WeakSet();
+  const serialized = JSON.stringify(
+    value,
+    (_key, current) => {
+      if (typeof current !== "object" || current === null) {
+        return current;
+      }
+      if (seen.has(current)) {
+        return "[Circular]";
+      }
+      seen.add(current);
+      return current;
+    }
+  );
+  return serialized;
+}
+
+// src/runtime/consoleHook.ts
+function installConsoleHook(options) {
+  const originalConsole = {
+    log: console.log,
+    info: console.info,
+    warn: console.warn,
+    error: console.error,
+    debug: console.debug
+  };
+  const emit = (level, args) => {
+    options.send({
+      id: nanoid(),
+      pageId: options.pageId,
+      source: "hook",
+      level,
+      message: args.map((arg) => safeStringify(arg)).join(" "),
+      args,
+      timestamp: Date.now()
+    });
+  };
+  ["log", "info", "warn", "error", "debug"].forEach((level) => {
+    console[level] = (...args) => {
+      emit(level, args);
+      originalConsole[level](...args);
+    };
+  });
+  const onError = (event) => {
+    options.send({
+      id: nanoid(),
+      pageId: options.pageId,
+      source: "hook",
+      level: "error",
+      message: event.message,
+      stack: event.error instanceof Error ? event.error.stack : void 0,
+      timestamp: Date.now()
+    });
+  };
+  window.addEventListener("error", onError);
+  return () => {
+    Object.assign(console, originalConsole);
+    window.removeEventListener("error", onError);
+  };
+}
+
+// src/runtime/networkHook.ts
+import { nanoid as nanoid2 } from "nanoid";
+
+// src/shared/sanitize.ts
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) {
+    return { text, truncated: false, originalLength: text.length };
+  }
+  return {
+    text: text.slice(0, maxLength),
+    truncated: true,
+    originalLength: text.length
+  };
+}
+function maskHeaders(headers = {}, maskNames = []) {
+  const normalizedMaskNames = new Set(
+    maskNames.map((name) => name.toLowerCase())
+  );
+  return Object.fromEntries(
+    Object.entries(headers).map(([name, value]) => [
+      name,
+      normalizedMaskNames.has(name.toLowerCase()) ? "[masked]" : value
+    ])
+  );
+}
+
+// src/shared/url.ts
+function parseRequestQuery(url) {
+  const parsed = new URL(url, "http://vite-plugin-vue-mcp-next.local");
+  const queryEntries = /* @__PURE__ */ new Map();
+  for (const [key, value] of parsed.searchParams.entries()) {
+    const existing = queryEntries.get(key);
+    if (existing === void 0) {
+      queryEntries.set(key, value);
+      continue;
+    }
+    if (Array.isArray(existing)) {
+      existing.push(value);
+      continue;
+    }
+    queryEntries.set(key, [existing, value]);
+  }
+  return Object.fromEntries(queryEntries);
+}
+function safeUrlPathname(url) {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url.split("?")[0] || "/";
+  }
+}
+
+// src/runtime/networkHook.ts
+function createHookNetworkRecord(input) {
+  return {
+    id: nanoid2(),
+    pageId: input.pageId,
+    source: "hook",
+    url: input.url,
+    method: input.method,
+    requestHeaders: maskHeaders(input.requestHeaders, input.maskHeaders),
+    requestQuery: parseRequestQuery(input.url),
+    requestBody: input.requestBody,
+    startedAt: input.startedAt
+  };
+}
+function installNetworkHook(options) {
+  const originalFetch = window.fetch.bind(window);
+  const XMLHttpRequestCtor = window.XMLHttpRequest;
+  const originalOpen = XMLHttpRequestCtor?.prototype.open;
+  const originalSend = XMLHttpRequestCtor?.prototype.send;
+  window.fetch = createFetchHook(originalFetch, options);
+  if (XMLHttpRequestCtor && originalOpen && originalSend) {
+    installXhrHook(XMLHttpRequestCtor, originalOpen, originalSend, options);
+  }
+  return () => {
+    window.fetch = originalFetch;
+    if (XMLHttpRequestCtor && originalOpen && originalSend) {
+      XMLHttpRequestCtor.prototype.open = originalOpen;
+      XMLHttpRequestCtor.prototype.send = originalSend;
+    }
+  };
+}
+function createFetchHook(originalFetch, options) {
+  return async (input, init) => {
+    const startedAt = Date.now();
+    const record = createHookNetworkRecord({
+      pageId: options.pageId,
+      url: getFetchUrl(input),
+      method: getFetchMethod(input, init),
+      requestHeaders: headersToRecord(
+        init?.headers ?? (input instanceof Request ? input.headers : void 0)
+      ),
+      requestBody: init?.body,
+      maskHeaders: options.maskHeaders,
+      startedAt
+    });
+    try {
+      const response = await originalFetch(input, init);
+      const endedAt = Date.now();
+      options.send({
+        ...record,
+        status: response.status,
+        responseHeaders: headersToRecord(response.headers),
+        responseBody: await readResponseBody(response, options.maxBodySize),
+        endedAt,
+        durationMs: endedAt - startedAt
+      });
+      return response;
+    } catch (error) {
+      const endedAt = Date.now();
+      options.send({
+        ...record,
+        error: error instanceof Error ? error.message : String(error),
+        endedAt,
+        durationMs: endedAt - startedAt
+      });
+      throw error;
+    }
+  };
+}
+function installXhrHook(XMLHttpRequestCtor, originalOpen, originalSend, options) {
+  const states = /* @__PURE__ */ new WeakMap();
+  XMLHttpRequestCtor.prototype.open = function open(method, url, async, username, password) {
+    const args = [method, url, async, username, password].filter(
+      (item) => item !== void 0
+    );
+    states.set(this, { method, url: String(url), startedAt: 0 });
+    Reflect.apply(originalOpen, this, args);
+  };
+  XMLHttpRequestCtor.prototype.send = function send(...args) {
+    const [body] = args;
+    const state = states.get(this);
+    if (state) {
+      state.startedAt = Date.now();
+      state.body = body;
+      const record = createHookNetworkRecord({
+        pageId: options.pageId,
+        url: state.url,
+        method: state.method,
+        requestBody: body,
+        maskHeaders: options.maskHeaders,
+        startedAt: state.startedAt
+      });
+      this.addEventListener("loadend", () => {
+        const endedAt = Date.now();
+        options.send({
+          ...record,
+          status: this.status,
+          responseHeaders: parseRawHeaders(this.getAllResponseHeaders()),
+          responseBody: truncateText(
+            safeReadXhrResponseText(this),
+            options.maxBodySize
+          ).text,
+          endedAt,
+          durationMs: endedAt - state.startedAt
+        });
+      });
+    }
+    Reflect.apply(originalSend, this, args);
+  };
+}
+function getFetchUrl(input) {
+  if (input instanceof Request) {
+    return input.url;
+  }
+  return String(input);
+}
+function getFetchMethod(input, init) {
+  if (init?.method) {
+    return init.method.toUpperCase();
+  }
+  if (input instanceof Request) {
+    return input.method.toUpperCase();
+  }
+  return "GET";
+}
+function headersToRecord(headers) {
+  if (!headers) {
+    return {};
+  }
+  return Object.fromEntries(new Headers(headers).entries());
+}
+async function readResponseBody(response, maxBodySize) {
+  try {
+    return truncateText(await response.clone().text(), maxBodySize).text;
+  } catch {
+    return void 0;
+  }
+}
+function parseRawHeaders(rawHeaders) {
+  return Object.fromEntries(
+    rawHeaders.trim().split(/\r?\n/).filter(Boolean).map((line) => {
+      const index = line.indexOf(":");
+      return [
+        line.slice(0, index).trim().toLowerCase(),
+        line.slice(index + 1).trim()
+      ];
+    })
+  );
+}
+function safeReadXhrResponseText(xhr) {
+  try {
+    return xhr.responseText;
+  } catch {
+    return "";
+  }
+}
+
+// src/runtime/pageIdentity.ts
+import { nanoid as nanoid3 } from "nanoid";
+function createRuntimePageId() {
+  return `runtime-${nanoid3()}`;
+}
+function getRuntimePageIdentity(input) {
+  return {
+    pageId: createRuntimePageId(),
+    source: "runtime",
+    url: input.href,
+    pathname: safeUrlPathname(input.href),
+    title: input.title,
+    connected: true,
+    readyState: input.readyState,
+    viewport: {
+      width: input.innerWidth,
+      height: input.innerHeight
+    }
+  };
+}
+
+// src/runtime/vueBridge.ts
+import {
+  devtools,
+  devtoolsRouterInfo,
+  devtoolsState,
+  getInspector,
+  stringify,
+  toggleHighPerfMode
+} from "@vue/devtools-kit";
+import { createRPCClient } from "vite-dev-rpc";
+
+// src/runtime/domSnapshot.ts
+function createDomSnapshot(root, options) {
+  let count = 0;
+  function visit(node, depth) {
+    if (count >= options.maxNodes || depth > options.maxDepth) {
+      return null;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      return createTextSnapshot(node, options, () => {
+        count += 1;
+      });
+    }
+    if (!(node instanceof Element)) {
+      return null;
+    }
+    const tag = node.tagName.toLowerCase();
+    if (["script", "style", "noscript"].includes(tag)) {
+      return null;
+    }
+    count += 1;
+    return createElementSnapshot(node, tag, (child) => visit(child, depth + 1));
+  }
+  return visit(root, 0) ?? { tag: root.tagName.toLowerCase() };
+}
+function queryDomElements(selector, limit) {
+  return Array.from(document.querySelectorAll(selector)).slice(0, limit).map((element) => ({
+    tag: element.tagName.toLowerCase(),
+    text: element.textContent.trim(),
+    attrs: collectAttrs(element),
+    rect: serializeRect(element.getBoundingClientRect())
+  }));
+}
+function createTextSnapshot(node, options, markVisited) {
+  const text = node.textContent?.trim();
+  if (!text) {
+    return null;
+  }
+  markVisited();
+  return { tag: "#text", text: truncateText(text, options.maxTextLength).text };
+}
+function createElementSnapshot(node, tag, visitChild) {
+  const attrs = collectAttrs(node);
+  const children = Array.from(node.childNodes).map((child) => visitChild(child)).filter((child) => Boolean(child));
+  return {
+    tag,
+    ...Object.keys(attrs).length ? { attrs } : {},
+    ...children.length ? { children } : {}
+  };
+}
+function collectAttrs(element) {
+  const attrs = {};
+  for (const attr of Array.from(element.attributes)) {
+    attrs[attr.name] = attr.value;
+  }
+  if (element instanceof HTMLInputElement && element.type === "password") {
+    attrs.value = "[masked]";
+  }
+  return attrs;
+}
+function serializeRect(rect) {
+  return {
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left
+  };
+}
+
+// src/runtime/evaluateExpression.ts
+async function evaluateExpression(request) {
+  const value = runExpression(request.expression);
+  const result = request.awaitPromise === false ? value : await Promise.resolve(value);
+  return Promise.race([
+    Promise.resolve(result),
+    createTimeout(request.timeoutMs)
+  ]);
+}
+function runExpression(expression) {
+  return new Function(`return (${expression})`)();
+}
+function createTimeout(timeoutMs) {
+  return new Promise((_, reject) => {
+    window.setTimeout(() => {
+      reject(
+        new Error(`evaluate_script timed out after ${String(timeoutMs)}ms`)
+      );
+    }, timeoutMs);
+  });
+}
+
+// src/runtime/devtoolsBridge.ts
+function createRuntimeDevtoolsRpc(getRpc) {
+  return {
+    getDomTree(options) {
+      getRpc().onDomTreeUpdated(
+        options.event,
+        createDomSnapshot(document.documentElement, {
+          maxDepth: options.maxDepth,
+          maxNodes: options.maxNodes,
+          maxTextLength: options.maxTextLength
+        })
+      );
+    },
+    onDomTreeUpdated: () => void 0,
+    queryDom(options) {
+      getRpc().onDomQueryUpdated(
+        options.event,
+        queryDomElements(options.selector, options.limit)
+      );
+    },
+    onDomQueryUpdated: () => void 0,
+    async evaluateScript(options) {
+      try {
+        getRpc().onEvaluateScriptUpdated(options.event, {
+          ok: true,
+          value: await evaluateExpression(options)
+        });
+      } catch (error) {
+        getRpc().onEvaluateScriptUpdated(options.event, {
+          ok: false,
+          error: error instanceof Error ? error.message : String(error)
+        });
+      }
+    },
+    onEvaluateScriptUpdated: () => void 0
+  };
+}
+
+// src/runtime/vueBridge.ts
+var PINIA_INSPECTOR_ID = "pinia";
+var COMPONENTS_INSPECTOR_ID = "components";
+var COMPONENT_HIGHLIGHT_DURATION = 5e3;
+var highlightComponentTimeout;
+function installVueBridge(hot) {
+  devtools.init();
+  const rpcRef = {};
+  const rpc = createRPCClient(
+    "vite-plugin-vue-mcp-next",
+    hot,
+    createClientVueRuntimeRpc(() => {
+      if (!rpcRef.current) {
+        throw new Error("Vue runtime RPC is not initialized");
+      }
+      return rpcRef.current;
+    }),
+    { timeout: -1 }
+  );
+  rpcRef.current = rpc;
+}
+function createClientVueRuntimeRpc(getRpc) {
+  return {
+    ...createRuntimeDevtoolsRpc(getRpc),
+    async getInspectorTree(query) {
+      const inspectorTree = await devtools.api.getInspectorTree({
+        inspectorId: COMPONENTS_INSPECTOR_ID,
+        filter: query.componentName ?? ""
+      });
+      getRpc().onInspectorTreeUpdated(query.event, inspectorTree[0]);
+    },
+    onInspectorTreeUpdated: () => void 0,
+    async getInspectorState(query) {
+      const targetNode = await findComponentNode(query.componentName);
+      if (!targetNode) {
+        getRpc().onInspectorStateUpdated(
+          query.event,
+          createMissingComponentError(query.componentName)
+        );
+        return;
+      }
+      const inspectorState = await devtools.api.getInspectorState({
+        inspectorId: COMPONENTS_INSPECTOR_ID,
+        nodeId: targetNode.id
+      });
+      getRpc().onInspectorStateUpdated(query.event, stringify(inspectorState));
+    },
+    onInspectorStateUpdated: () => void 0,
+    async editComponentState(query) {
+      const targetNode = await findComponentNode(query.componentName);
+      if (!targetNode) {
+        return;
+      }
+      devtools.ctx.api.editInspectorState({
+        app: null,
+        inspectorId: COMPONENTS_INSPECTOR_ID,
+        nodeId: targetNode.id,
+        path: query.path,
+        state: {
+          remove: false,
+          value: parseStateValue(query.value, query.valueType)
+        },
+        type: query.valueType,
+        set: setStateValue
+      });
+    },
+    async highlightComponent(query) {
+      const targetNode = await findComponentNode(query.componentName);
+      if (!targetNode) {
+        return;
+      }
+      if (highlightComponentTimeout) {
+        clearTimeout(highlightComponentTimeout);
+      }
+      callVueDevtoolsHook("componentHighlight", { uid: targetNode.id });
+      highlightComponentTimeout = setTimeout(() => {
+        callVueDevtoolsHook("componentUnhighlight");
+      }, COMPONENT_HIGHLIGHT_DURATION);
+    },
+    getRouterInfo(query) {
+      getRpc().onRouterInfoUpdated(
+        query.event,
+        JSON.stringify(devtoolsRouterInfo, null, 2)
+      );
+    },
+    onRouterInfoUpdated: () => void 0,
+    async getPiniaTree(query) {
+      const inspectorTree = await withPiniaHighPerfDisabled(
+        () => devtools.api.getInspectorTree({
+          inspectorId: PINIA_INSPECTOR_ID,
+          filter: ""
+        })
+      );
+      getRpc().onPiniaTreeUpdated(query.event, inspectorTree);
+    },
+    onPiniaTreeUpdated: () => void 0,
+    async getPiniaState(query) {
+      const result = await withPiniaHighPerfDisabled(async () => {
+        const payload = {
+          inspectorId: PINIA_INSPECTOR_ID,
+          nodeId: query.storeName
+        };
+        const inspector = getInspector(payload.inspectorId);
+        if (inspector) {
+          inspector.selectedNodeId = payload.nodeId;
+        }
+        return devtools.ctx.api.getInspectorState(payload);
+      });
+      getRpc().onPiniaInfoUpdated(query.event, stringify(result));
+    },
+    onPiniaInfoUpdated: () => void 0
+  };
+}
+function setStateValue(object, path, value) {
+  if (!object || typeof object !== "object" || !path) {
+    return;
+  }
+  const keys = Array.isArray(path) ? path : [path];
+  const lastKey = keys.at(-1);
+  if (!lastKey) {
+    return;
+  }
+  ;
+  object[lastKey] = value;
+}
+function parseStateValue(value, valueType) {
+  if (valueType === "number") {
+    return Number(value);
+  }
+  if (valueType === "boolean") {
+    return value === "true";
+  }
+  if (valueType === "object" || valueType === "array") {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return value;
+    }
+  }
+  return value;
+}
+function callVueDevtoolsHook(name, payload) {
+  const hooks = devtools.ctx.hooks;
+  hooks.callHook(name, payload);
+}
+async function findComponentNode(componentName) {
+  const inspectorTree = await devtools.api.getInspectorTree({
+    inspectorId: COMPONENTS_INSPECTOR_ID,
+    filter: ""
+  });
+  const nodes = flattenTree(inspectorTree[0]);
+  return nodes.find((node) => node.name === componentName);
+}
+function flattenTree(root) {
+  const result = [];
+  const traverse = (node) => {
+    if (!isInspectorNode(node)) {
+      return;
+    }
+    result.push(node);
+    node.children?.forEach((child) => {
+      traverse(child);
+    });
+  };
+  traverse(root);
+  return result;
+}
+function isInspectorNode(node) {
+  return Boolean(
+    node && typeof node === "object" && typeof node.id === "string"
+  );
+}
+async function withPiniaHighPerfDisabled(callback) {
+  const highPerfModeEnabled = devtoolsState.highPerfModeEnabled;
+  if (highPerfModeEnabled) {
+    toggleHighPerfMode(false);
+  }
+  try {
+    return await callback();
+  } finally {
+    if (highPerfModeEnabled) {
+      toggleHighPerfMode(true);
+    }
+  }
+}
+function createMissingComponentError(componentName) {
+  return {
+    ok: false,
+    error: `component not found: ${componentName}`
+  };
+}
+
+// src/runtime/client.ts
+async function startRuntimeClient() {
+  const hot = await createHotContext("vite-plugin-vue-mcp-next", "/");
+  if (!hot) {
+    return;
+  }
+  installVueBridge(hot);
+  const identity = getRuntimePageIdentity({
+    href: window.location.href,
+    title: document.title,
+    innerWidth: window.innerWidth,
+    innerHeight: window.innerHeight,
+    readyState: document.readyState
+  });
+  hot.send("vite-plugin-vue-mcp-next:page-connected", identity);
+  installConsoleHook({
+    pageId: identity.pageId,
+    send(record) {
+      hot.send("vite-plugin-vue-mcp-next:console-record", record);
+    }
+  });
+  installNetworkHook({
+    pageId: identity.pageId,
+    maxBodySize: 1e5,
+    maskHeaders: ["authorization", "cookie", "set-cookie"],
+    send(record) {
+      hot.send("vite-plugin-vue-mcp-next:network-record", record);
+    }
+  });
+}
+export {
+  evaluateExpression,
+  startRuntimeClient
+};
+//# sourceMappingURL=client.js.map