@presto1314w/vite-devtools-browser 0.1.0

package/dist/daemon.js

@@ -0,0 +1,132 @@
+import { createServer } from "node:net";
+import { mkdirSync, writeFileSync, rmSync } from "node:fs";
+import * as browser from "./browser.js";
+import { socketDir, socketPath, pidFile } from "./paths.js";
+mkdirSync(socketDir, { recursive: true, mode: 0o700 });
+rmSync(socketPath, { force: true });
+rmSync(pidFile, { force: true });
+writeFileSync(pidFile, String(process.pid));
+const server = createServer((socket) => {
+    let buffer = "";
+    socket.on("data", (chunk) => {
+        buffer += chunk;
+        let newline;
+        while ((newline = buffer.indexOf("\n")) >= 0) {
+            const line = buffer.slice(0, newline);
+            buffer = buffer.slice(newline + 1);
+            if (line)
+                dispatch(line, socket);
+        }
+    });
+    socket.on("error", () => { });
+});
+server.listen(socketPath);
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);
+process.on("exit", cleanup);
+async function dispatch(line, socket) {
+    const cmd = JSON.parse(line);
+    const result = await run(cmd).catch((err) => ({ ok: false, error: cleanError(err) }));
+    socket.write(JSON.stringify({ id: cmd.id, ...result }) + "\n");
+    if (cmd.action === "close")
+        setImmediate(shutdown);
+}
+function cleanError(err) {
+    const msg = err.message;
+    const m = msg.match(/^page\.\w+: (?:Error: )?(.+?)(?:\n|$)/);
+    return m ? m[1] : msg;
+}
+async function run(cmd) {
+    // Browser control
+    if (cmd.action === "open") {
+        await browser.open(cmd.url);
+        return { ok: true };
+    }
+    if (cmd.action === "cookies") {
+        const data = await browser.cookies(cmd.cookies, cmd.domain);
+        return { ok: true, data };
+    }
+    if (cmd.action === "close") {
+        await browser.close();
+        return { ok: true };
+    }
+    if (cmd.action === "goto") {
+        const data = await browser.goto(cmd.url);
+        return { ok: true, data };
+    }
+    if (cmd.action === "back") {
+        await browser.back();
+        return { ok: true };
+    }
+    if (cmd.action === "reload") {
+        const data = await browser.reload();
+        return { ok: true, data };
+    }
+    // Framework detection
+    if (cmd.action === "detect") {
+        const data = await browser.detectFramework();
+        return { ok: true, data };
+    }
+    // Vue commands
+    if (cmd.action === "vue-tree") {
+        const data = await browser.vueTree(cmd.id);
+        return { ok: true, data };
+    }
+    if (cmd.action === "vue-pinia") {
+        const data = await browser.vuePinia(cmd.store);
+        return { ok: true, data };
+    }
+    if (cmd.action === "vue-router") {
+        const data = await browser.vueRouter();
+        return { ok: true, data };
+    }
+    // React commands
+    if (cmd.action === "react-tree") {
+        const data = await browser.reactTree(cmd.id);
+        return { ok: true, data };
+    }
+    // Svelte commands
+    if (cmd.action === "svelte-tree") {
+        const data = await browser.svelteTree(cmd.id);
+        return { ok: true, data };
+    }
+    // Vite commands
+    if (cmd.action === "vite-restart") {
+        const data = await browser.viteRestart();
+        return { ok: true, data };
+    }
+    if (cmd.action === "vite-hmr") {
+        const data = await browser.viteHMR();
+        return { ok: true, data };
+    }
+    if (cmd.action === "errors") {
+        const data = await browser.errors();
+        return { ok: true, data };
+    }
+    if (cmd.action === "logs") {
+        const data = await browser.logs();
+        return { ok: true, data };
+    }
+    // Utilities
+    if (cmd.action === "screenshot") {
+        const data = await browser.screenshot();
+        return { ok: true, data };
+    }
+    if (cmd.action === "eval") {
+        const data = await browser.evaluate(cmd.script);
+        return { ok: true, data };
+    }
+    if (cmd.action === "network") {
+        const data = await browser.network(cmd.idx);
+        return { ok: true, data };
+    }
+    return { ok: false, error: `unknown action: ${cmd.action}` };
+}
+function shutdown() {
+    cleanup();
+    process.exit(0);
+}
+function cleanup() {
+    rmSync(socketPath, { force: true });
+    rmSync(pidFile, { force: true });
+}

package/dist/network.d.ts

@@ -0,0 +1,5 @@
+import type { Page } from "playwright";
+export declare function attach(page: Page): void;
+export declare function clear(): void;
+export declare function detail(idx: number): Promise<string>;
+export declare function format(): string;

package/dist/network.js

@@ -0,0 +1,97 @@
+import { writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+const BODY_INLINE_LIMIT = 4000;
+let entries = [];
+let startTime = new Map();
+export function attach(page) {
+    page.on("request", (req) => {
+        if (req.resourceType() === "document" && req.frame() === page.mainFrame()) {
+            clear();
+        }
+        startTime.set(req, Date.now());
+    });
+    page.on("response", (res) => {
+        const req = res.request();
+        const t0 = startTime.get(req);
+        if (t0 == null)
+            return;
+        entries.push({ req, res, ms: Date.now() - t0 });
+    });
+    page.on("requestfailed", (req) => {
+        if (!startTime.has(req))
+            return;
+        entries.push({ req, res: null, ms: null });
+    });
+}
+export function clear() {
+    entries = [];
+    startTime = new Map();
+}
+export async function detail(idx) {
+    const e = entries[idx];
+    if (!e)
+        throw new Error(`no request at index ${idx}`);
+    const { req, res, ms } = e;
+    const lines = [
+        `${req.method()} ${req.url()}`,
+        `type: ${req.resourceType()}${ms != null ? `  ${ms}ms` : ""}`,
+        "",
+        "request headers:",
+        ...indent(await req.allHeaders()),
+    ];
+    const postData = req.postData();
+    if (postData) {
+        lines.push("", "request body:", truncate(postData, 2000));
+    }
+    if (!res) {
+        lines.push("", `FAILED: ${req.failure()?.errorText ?? "unknown"}`);
+        return lines.join("\n");
+    }
+    lines.push("", `response: ${res.status()} ${res.statusText()}`, "response headers:", ...indent(await res.allHeaders()));
+    const body = await res.text().catch((err) => `(body unavailable: ${err.message})`);
+    lines.push("", "response body:", spillIfLong(body, idx, res));
+    return lines.join("\n");
+}
+function indent(headers) {
+    return Object.entries(headers).map(([k, v]) => `  ${k}: ${v}`);
+}
+function truncate(s, max) {
+    return s.length > max ? s.slice(0, max) + `\n... (${s.length - max} more bytes)` : s;
+}
+function spillIfLong(body, idx, res) {
+    if (body.length <= BODY_INLINE_LIMIT)
+        return body;
+    const ext = extFor(res.headers()["content-type"]);
+    const path = join(tmpdir(), `vite-browser-${process.pid}-${idx}${ext}`);
+    writeFileSync(path, body);
+    return `(${body.length} bytes written to ${path})`;
+}
+function extFor(contentType) {
+    if (!contentType)
+        return ".txt";
+    if (contentType.includes("json"))
+        return ".json";
+    if (contentType.includes("html"))
+        return ".html";
+    if (contentType.includes("javascript"))
+        return ".js";
+    return ".txt";
+}
+export function format() {
+    if (entries.length === 0)
+        return "(no requests)";
+    const lines = [
+        "# Network requests since last navigation",
+        "# Columns: idx status method type ms url",
+        "# Use `network <idx>` for headers and body.",
+        "",
+    ];
+    entries.forEach((e, i) => {
+        const { req, res, ms } = e;
+        const status = res?.status() ?? "FAIL";
+        const time = ms != null ? `${ms}ms` : "-";
+        lines.push(`${i} ${status} ${req.method()} ${req.resourceType()} ${time} ${req.url()}`);
+    });
+    return lines.join("\n");
+}

package/dist/paths.d.ts

@@ -0,0 +1,3 @@
+export declare const socketDir: string;
+export declare const socketPath: string;
+export declare const pidFile: string;

package/dist/paths.js

@@ -0,0 +1,9 @@
+import { homedir } from "node:os";
+import { join } from "node:path";
+const isWindows = process.platform === "win32";
+const session = process.env.VITE_BROWSER_SESSION || "default";
+export const socketDir = join(homedir(), ".vite-browser");
+export const socketPath = isWindows
+    ? `\\\\.\\pipe\\vite-browser-${session}`
+    : join(socketDir, `${session}.sock`);
+export const pidFile = join(socketDir, `${session}.pid`);

package/dist/react/devtools.d.ts

@@ -0,0 +1,16 @@
+import type { Page } from "playwright";
+export type ReactNode = {
+    id: number;
+    type: number;
+    name: string | null;
+    key: string | null;
+    parent: number;
+};
+export type ReactInspection = {
+    text: string;
+    source: [file: string, line: number, column: number] | null;
+};
+export declare function snapshot(page: Page): Promise<ReactNode[]>;
+export declare function inspect(page: Page, id: number): Promise<ReactInspection>;
+export declare function format(nodes: ReactNode[]): string;
+export declare function path(nodes: ReactNode[], id: number): string;

package/dist/react/devtools.js

@@ -0,0 +1,218 @@
+export async function snapshot(page) {
+    return page.evaluate(inPageSnapshot);
+}
+export async function inspect(page, id) {
+    return page.evaluate(inPageInspect, id);
+}
+export function format(nodes) {
+    const children = new Map();
+    for (const n of nodes) {
+        const list = children.get(n.parent) ?? [];
+        list.push(n);
+        children.set(n.parent, list);
+    }
+    const lines = [
+        "# React component tree",
+        "# Columns: depth id parent name [key=...]",
+        "# Use `react tree <id>` for props/hooks/state.",
+        "",
+    ];
+    for (const root of children.get(0) ?? [])
+        walk(root, 0);
+    return lines.join("\n");
+    function walk(node, depth) {
+        const name = node.name ?? typeName(node.type);
+        const key = node.key ? ` key=${JSON.stringify(node.key)}` : "";
+        const parent = node.parent || "-";
+        lines.push(`${depth} ${node.id} ${parent} ${name}${key}`);
+        for (const c of children.get(node.id) ?? [])
+            walk(c, depth + 1);
+    }
+}
+export function path(nodes, id) {
+    const byId = new Map(nodes.map((n) => [n.id, n]));
+    const names = [];
+    for (let n = byId.get(id); n; n = byId.get(n.parent)) {
+        names.push(n.name ?? typeName(n.type));
+    }
+    return names.reverse().join(" > ");
+}
+function typeName(type) {
+    const names = {
+        11: "Root",
+        12: "Suspense",
+        13: "SuspenseList",
+    };
+    return names[type] ?? `(${type})`;
+}
+async function inPageSnapshot() {
+    const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (!hook)
+        throw new Error("React DevTools hook not installed");
+    const ri = hook.rendererInterfaces?.get?.(1);
+    if (!ri)
+        throw new Error("no React renderer attached");
+    const batches = await collect(ri);
+    return batches.flatMap(decode);
+    function collect(ri) {
+        return new Promise((resolve) => {
+            const out = [];
+            const listener = (e) => {
+                const payload = e.data?.payload;
+                if (e.data?.source === "react-devtools-bridge" && payload?.event === "operations") {
+                    out.push(payload.payload);
+                }
+            };
+            window.addEventListener("message", listener);
+            ri.flushInitialOperations();
+            setTimeout(() => {
+                window.removeEventListener("message", listener);
+                resolve(out);
+            }, 80);
+        });
+    }
+    function decode(ops) {
+        let i = 2;
+        const strings = [null];
+        const tableEnd = ++i + ops[i - 1];
+        while (i < tableEnd) {
+            const len = ops[i++];
+            strings.push(String.fromCodePoint(...ops.slice(i, i + len)));
+            i += len;
+        }
+        const nodes = [];
+        while (i < ops.length) {
+            const op = ops[i];
+            if (op === 1) {
+                const id = ops[i + 1];
+                const type = ops[i + 2];
+                i += 3;
+                if (type === 11) {
+                    nodes.push({ id, type, name: null, key: null, parent: 0 });
+                    i += 4;
+                }
+                else {
+                    nodes.push({
+                        id,
+                        type,
+                        name: strings[ops[i + 2]] ?? null,
+                        key: strings[ops[i + 3]] ?? null,
+                        parent: ops[i],
+                    });
+                    i += 5;
+                }
+            }
+            else {
+                i += skip(op, ops, i);
+            }
+        }
+        return nodes;
+    }
+    function skip(op, ops, i) {
+        if (op === 2)
+            return 2 + ops[i + 1];
+        if (op === 3)
+            return 3 + ops[i + 2];
+        if (op === 4)
+            return 3;
+        if (op === 5)
+            return 4;
+        if (op === 6)
+            return 1;
+        if (op === 7)
+            return 3;
+        if (op === 8)
+            return 6 + rects(ops[i + 5]);
+        if (op === 9)
+            return 2 + ops[i + 1];
+        if (op === 10)
+            return 3 + ops[i + 2];
+        if (op === 11)
+            return 3 + rects(ops[i + 2]);
+        if (op === 12)
+            return suspenders(ops, i);
+        if (op === 13)
+            return 2;
+        return 1;
+    }
+    function rects(n) {
+        return n === -1 ? 0 : n * 4;
+    }
+    function suspenders(ops, i) {
+        let j = i + 2;
+        for (let c = 0; c < ops[i + 1]; c++)
+            j += 5 + ops[j + 4];
+        return j - i;
+    }
+}
+function inPageInspect(id) {
+    const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    const ri = hook?.rendererInterfaces?.get?.(1);
+    if (!ri)
+        throw new Error("no React renderer attached");
+    if (!ri.hasElementWithId(id))
+        throw new Error(`element ${id} not found (page reloaded?)`);
+    const result = ri.inspectElement(1, id, null, true);
+    if (result?.type !== "full-data")
+        throw new Error(`inspect failed: ${result?.type}`);
+    const value = result.value;
+    const name = ri.getDisplayNameForElementID(id);
+    const lines = [`${name} #${id}`];
+    if (value.key != null)
+        lines.push(`key: ${JSON.stringify(value.key)}`);
+    section("props", value.props);
+    section("hooks", value.hooks);
+    section("state", value.state);
+    section("context", value.context);
+    if (value.owners?.length) {
+        const chain = value.owners.map((o) => o.displayName).join(" > ");
+        lines.push(`rendered by: ${chain}`);
+    }
+    const source = Array.isArray(value.source)
+        ? [value.source[1], value.source[2], value.source[3]]
+        : null;
+    return { text: lines.join("\n"), source };
+    function section(label, payload) {
+        const data = payload?.data ?? payload;
+        if (data == null)
+            return;
+        if (Array.isArray(data)) {
+            if (data.length === 0)
+                return;
+            lines.push(`${label}:`);
+            for (const item of data)
+                lines.push(`  ${hookLine(item)}`);
+            return;
+        }
+        if (typeof data === "object") {
+            const entries = Object.entries(data);
+            if (entries.length === 0)
+                return;
+            lines.push(`${label}:`);
+            for (const [k, v] of entries)
+                lines.push(`  ${k}: ${preview(v)}`);
+        }
+    }
+    function hookLine(h) {
+        const idx = h.id != null ? `[${h.id}] ` : "";
+        const sub = h.subHooks?.length ? ` (${h.subHooks.length} sub)` : "";
+        return `${idx}${h.name}: ${preview(h.value)}${sub}`;
+    }
+    function preview(v) {
+        if (v == null)
+            return String(v);
+        if (typeof v !== "object")
+            return JSON.stringify(v);
+        const d = v;
+        if (d.type === "undefined")
+            return "undefined";
+        if (d.preview_long)
+            return d.preview_long;
+        if (d.preview_short)
+            return d.preview_short;
+        if (Array.isArray(v))
+            return `[${v.map(preview).join(", ")}]`;
+        const entries = Object.entries(v).map(([k, val]) => `${k}: ${preview(val)}`);
+        return `{${entries.join(", ")}}`;
+    }
+}

package/dist/svelte/devtools.d.ts

@@ -0,0 +1,3 @@
+import type { Page } from "playwright";
+export declare function getComponentTree(page: Page): Promise<string>;
+export declare function getComponentDetails(page: Page, id: string): Promise<string>;

package/dist/svelte/devtools.js

@@ -0,0 +1,177 @@
+export async function getComponentTree(page) {
+    return page.evaluate(() => {
+        const output = [
+            "# Svelte component tree",
+            "# Use `svelte tree <id>` to inspect component details.",
+            "",
+        ];
+        const nodes = collectSvelteNodes();
+        if (nodes.length === 0) {
+            output.push("Svelte app detected, but no DevTools component graph is available.");
+            output.push("Tip: install/enable Svelte DevTools, then run `svelte tree` again.");
+            return output.join("\n");
+        }
+        const children = new Map();
+        for (const n of nodes) {
+            const list = children.get(n.parent) ?? [];
+            list.push(n);
+            children.set(n.parent, list);
+        }
+        for (const root of children.get(0) ?? [])
+            walk(root, 0);
+        return output.join("\n");
+        function walk(node, depth) {
+            const indent = "  ".repeat(depth);
+            output.push(`${indent}[${node.id}] ${node.name}`);
+            for (const c of children.get(node.id) ?? [])
+                walk(c, depth + 1);
+        }
+        function collectSvelteNodes() {
+            const out = [];
+            const seen = new WeakSet();
+            let seq = 1;
+            const globalCandidates = [
+                window.__SVELTE_DEVTOOLS_GLOBAL_HOOK__,
+                window.__SVELTE_DEVTOOLS__,
+                window.__svelte,
+            ].filter(Boolean);
+            for (const candidate of globalCandidates) {
+                visit(candidate, 0, 0);
+            }
+            return out;
+            function visit(value, parent, depth) {
+                if (!value || typeof value !== "object")
+                    return;
+                if (seen.has(value))
+                    return;
+                if (depth > 6)
+                    return;
+                seen.add(value);
+                const maybeComponent = !!value.$$ ||
+                    typeof value.$set === "function" ||
+                    typeof value.$destroy === "function" ||
+                    value.type === "component";
+                let currentParent = parent;
+                if (maybeComponent) {
+                    const id = Number.isFinite(Number(value.id)) ? Number(value.id) : seq++;
+                    const name = value.name ||
+                        value.$$?.component?.name ||
+                        value.constructor?.name ||
+                        value.$$?.tag ||
+                        "AnonymousSvelteComponent";
+                    const props = value.$capture_state?.() ?? value.props ?? value.$$?.props;
+                    out.push({ id, parent, name: String(name), props });
+                    currentParent = id;
+                }
+                const children = [
+                    value.children,
+                    value.$$?.children,
+                    value.$$.fragment?.children,
+                    value.components,
+                    value.apps,
+                    value.instances,
+                    value.roots,
+                ].filter(Boolean);
+                for (const child of children) {
+                    if (Array.isArray(child)) {
+                        for (const c of child)
+                            visit(c, currentParent, depth + 1);
+                    }
+                    else if (typeof child === "object") {
+                        for (const c of Object.values(child))
+                            visit(c, currentParent, depth + 1);
+                    }
+                }
+            }
+        }
+    });
+}
+export async function getComponentDetails(page, id) {
+    return page.evaluate((targetId) => {
+        const nodes = collectSvelteNodes();
+        const match = nodes.find((n) => String(n.id) === targetId);
+        if (!match) {
+            return `Component ${targetId} not found. Run \'svelte tree\' to get fresh IDs.`;
+        }
+        const output = [`# Svelte component`, `# ID: ${match.id}`, `# Name: ${match.name}`, ""];
+        if (match.props && typeof match.props === "object") {
+            output.push("## Props/State");
+            for (const [k, v] of Object.entries(match.props)) {
+                output.push(`  ${k}: ${safe(v)}`);
+            }
+            output.push("");
+        }
+        if (match.file) {
+            output.push("## Source");
+            output.push(`  ${match.file}`);
+        }
+        return output.join("\n");
+        function safe(v) {
+            try {
+                return JSON.stringify(v);
+            }
+            catch {
+                return String(v);
+            }
+        }
+        function collectSvelteNodes() {
+            const out = [];
+            const seen = new WeakSet();
+            let seq = 1;
+            const globalCandidates = [
+                window.__SVELTE_DEVTOOLS_GLOBAL_HOOK__,
+                window.__SVELTE_DEVTOOLS__,
+                window.__svelte,
+            ].filter(Boolean);
+            for (const candidate of globalCandidates) {
+                visit(candidate, 0, 0);
+            }
+            return out;
+            function visit(value, parent, depth) {
+                if (!value || typeof value !== "object")
+                    return;
+                if (seen.has(value))
+                    return;
+                if (depth > 6)
+                    return;
+                seen.add(value);
+                const maybeComponent = !!value.$$ ||
+                    typeof value.$set === "function" ||
+                    typeof value.$destroy === "function" ||
+                    value.type === "component";
+                let currentParent = parent;
+                if (maybeComponent) {
+                    const id = Number.isFinite(Number(value.id)) ? Number(value.id) : seq++;
+                    const name = value.name ||
+                        value.$$?.component?.name ||
+                        value.constructor?.name ||
+                        value.$$?.tag ||
+                        "AnonymousSvelteComponent";
+                    const props = value.$capture_state?.() ?? value.props ?? value.$$?.props;
+                    const file = value.$$?.component?.__file || value.file;
+                    out.push({ id, parent, name: String(name), props, file });
+                    currentParent = id;
+                }
+                const children = [
+                    value.children,
+                    value.$$?.children,
+                    value.$$.fragment?.children,
+                    value.components,
+                    value.apps,
+                    value.instances,
+                    value.roots,
+                ].filter(Boolean);
+                for (const child of children) {
+                    if (Array.isArray(child)) {
+                        for (const c of child)
+                            visit(c, currentParent, depth + 1);
+                    }
+                    else if (typeof child === "object") {
+                        for (const c of Object.values(child))
+                            visit(c, currentParent, depth + 1);
+                    }
+                }
+            }
+        }
+    }, id);
+}

package/dist/vue/devtools.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Vue DevTools integration
+ *
+ * Uses @vue/devtools-kit to access Vue component tree and state
+ */
+import type { Page } from "playwright";
+export interface VueComponent {
+    id: string;
+    name: string;
+    type: string;
+    file?: string;
+    line?: number;
+}
+/**
+ * Get Vue component tree from the page
+ */
+export declare function getComponentTree(page: Page): Promise<string>;
+/**
+ * Get component details by ID
+ */
+export declare function getComponentDetails(page: Page, id: string): Promise<string>;
+/**
+ * Get Pinia stores
+ */
+export declare function getPiniaStores(page: Page, storeName?: string): Promise<string>;
+/**
+ * Get Vue Router information
+ */
+export declare function getRouterInfo(page: Page): Promise<string>;