@presto1314w/vite-devtools-browser 0.1.2 → 0.1.4

package/dist/daemon.js

@@ -1,134 +1,160 @@
 import { createServer } from "node:net";
 import { mkdirSync, writeFileSync, rmSync } from "node:fs";
+import { fileURLToPath } from "node:url";
 import * as browser from "./browser.js";
 import { socketDir, socketPath, pidFile } from "./paths.js";
-mkdirSync(socketDir, { recursive: true, mode: 0o700 });
-removeSocketFile();
-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) {
+export function cleanError(err) {
+    if (!(err instanceof Error))
+        return String(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 };
+export function createRunner(api = browser) {
+    return async function run(cmd) {
+        // Browser control
+        if (cmd.action === "open") {
+            await api.open(cmd.url);
+            return { ok: true };
+        }
+        if (cmd.action === "cookies") {
+            const data = await api.cookies(cmd.cookies, cmd.domain);
+            return { ok: true, data };
+        }
+        if (cmd.action === "close") {
+            await api.close();
+            return { ok: true };
+        }
+        if (cmd.action === "goto") {
+            const data = await api.goto(cmd.url);
+            return { ok: true, data };
+        }
+        if (cmd.action === "back") {
+            await api.back();
+            return { ok: true };
+        }
+        if (cmd.action === "reload") {
+            const data = await api.reload();
+            return { ok: true, data };
+        }
+        // Framework detection
+        if (cmd.action === "detect") {
+            const data = await api.detectFramework();
+            return { ok: true, data };
+        }
+        // Vue commands
+        if (cmd.action === "vue-tree") {
+            const data = await api.vueTree(cmd.id);
+            return { ok: true, data };
+        }
+        if (cmd.action === "vue-pinia") {
+            const data = await api.vuePinia(cmd.store);
+            return { ok: true, data };
+        }
+        if (cmd.action === "vue-router") {
+            const data = await api.vueRouter();
+            return { ok: true, data };
+        }
+        // React commands
+        if (cmd.action === "react-tree") {
+            const data = await api.reactTree(cmd.id);
+            return { ok: true, data };
+        }
+        // Svelte commands
+        if (cmd.action === "svelte-tree") {
+            const data = await api.svelteTree(cmd.id);
+            return { ok: true, data };
+        }
+        // Vite commands
+        if (cmd.action === "vite-restart") {
+            const data = await api.viteRestart();
+            return { ok: true, data };
+        }
+        if (cmd.action === "vite-hmr") {
+            const hmrMode = cmd.mode === "trace" || cmd.mode === "clear" ? cmd.mode : "summary";
+            const data = await api.viteHMRTrace(hmrMode, cmd.limit ?? 20);
+            return { ok: true, data };
+        }
+        if (cmd.action === "vite-runtime") {
+            const data = await api.viteRuntimeStatus();
+            return { ok: true, data };
+        }
+        if (cmd.action === "vite-module-graph") {
+            const graphMode = cmd.mode === "trace" || cmd.mode === "clear" ? cmd.mode : "snapshot";
+            const data = await api.viteModuleGraph(cmd.filter, cmd.limit ?? 200, graphMode);
+            return { ok: true, data };
+        }
+        if (cmd.action === "errors") {
+            const data = await api.errors(Boolean(cmd.mapped), Boolean(cmd.inlineSource));
+            return { ok: true, data };
+        }
+        if (cmd.action === "logs") {
+            const data = await api.logs();
+            return { ok: true, data };
+        }
+        // Utilities
+        if (cmd.action === "screenshot") {
+            const data = await api.screenshot();
+            return { ok: true, data };
+        }
+        if (cmd.action === "eval") {
+            const data = await api.evaluate(cmd.script);
+            return { ok: true, data };
+        }
+        if (cmd.action === "network") {
+            const data = await api.network(cmd.idx);
+            return { ok: true, data };
+        }
+        return { ok: false, error: `unknown action: ${cmd.action}` };
+    };
+}
+export async function dispatchLine(line, socket, run = createRunner(), onClose) {
+    let cmd;
+    try {
+        cmd = JSON.parse(line);
     }
-    if (cmd.action === "network") {
-        const data = await browser.network(cmd.idx);
-        return { ok: true, data };
+    catch {
+        socket.write(JSON.stringify({ ok: false, error: "invalid command payload" }) + "\n");
+        return;
     }
-    return { ok: false, error: `unknown action: ${cmd.action}` };
-}
-function shutdown() {
-    cleanup();
-    process.exit(0);
+    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(() => onClose?.());
 }
-function cleanup() {
+export function startDaemon() {
+    const run = createRunner();
+    mkdirSync(socketDir, { recursive: true, mode: 0o700 });
     removeSocketFile();
     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) {
+                    void dispatchLine(line, socket, run, shutdown);
+                }
+            }
+        });
+        socket.on("error", () => { });
+    });
+    server.listen(socketPath);
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+    process.on("exit", cleanup);
+    function shutdown() {
+        cleanup();
+        process.exit(0);
+    }
+    function cleanup() {
+        removeSocketFile();
+        rmSync(pidFile, { force: true });
+    }
 }
 function removeSocketFile() {
     // Windows named pipes are not filesystem entries, so unlinking them fails with EPERM.
@@ -136,3 +162,6 @@ function removeSocketFile() {
         return;
     rmSync(socketPath, { force: true });
 }
+if (process.argv[1] && fileURLToPath(import.meta.url) === process.argv[1]) {
+    startDaemon();
+}

package/dist/react/devtools.d.ts

@@ -14,3 +14,16 @@ 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;
+export declare function typeName(type: number): string;
+export declare function decodeOperations(ops: number[]): ReactNode[];
+export declare function skipOperation(op: number, ops: number[], i: number): number;
+export declare function rectCount(n: number): number;
+export declare function suspenseSkip(ops: number[], i: number): number;
+export declare function previewValue(v: unknown): string;
+export declare function formatHookLine(h: {
+    id: number | null;
+    name: string;
+    value: unknown;
+    subHooks?: unknown[];
+}): string;
+export declare function formatInspectionResult(name: string, id: number, value: any): ReactInspection;

package/dist/react/devtools.js

@@ -37,7 +37,7 @@ export function path(nodes, id) {
     }
     return names.reverse().join(" > ");
 }
-function typeName(type) {
+export function typeName(type) {
     const names = {
         11: "Root",
         12: "Suspense",
@@ -45,118 +45,102 @@ function typeName(type) {
     };
     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);
-        });
+export function decodeOperations(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;
     }
-    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;
-                }
+    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 {
-                i += skip(op, ops, i);
+                nodes.push({
+                    id,
+                    type,
+                    name: strings[ops[i + 2]] ?? null,
+                    key: strings[ops[i + 3]] ?? null,
+                    parent: ops[i],
+                });
+                i += 5;
             }
         }
-        return nodes;
+        else {
+            i += skipOperation(op, ops, i);
+        }
     }
-    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 nodes;
+}
+export function skipOperation(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;
-    }
-    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;
-    }
+    if (op === 7)
+        return 3;
+    if (op === 8)
+        return 6 + rectCount(ops[i + 5]);
+    if (op === 9)
+        return 2 + ops[i + 1];
+    if (op === 10)
+        return 3 + ops[i + 2];
+    if (op === 11)
+        return 3 + rectCount(ops[i + 2]);
+    if (op === 12)
+        return suspenseSkip(ops, i);
+    if (op === 13)
+        return 2;
+    return 1;
 }
-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);
+export function rectCount(n) {
+    return n === -1 ? 0 : n * 4;
+}
+export function suspenseSkip(ops, i) {
+    let j = i + 2;
+    for (let c = 0; c < ops[i + 1]; c++)
+        j += 5 + ops[j + 4];
+    return j - i;
+}
+export function previewValue(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(previewValue).join(", ")}]`;
+    const entries = Object.entries(v).map(([k, val]) => `${k}: ${previewValue(val)}`);
+    return `{${entries.join(", ")}}`;
+}
+export function formatHookLine(h) {
+    const idx = h.id != null ? `[${h.id}] ` : "";
+    const sub = h.subHooks?.length ? ` (${h.subHooks.length} sub)` : "";
+    return `${idx}${h.name}: ${previewValue(h.value)}${sub}`;
+}
+export function formatInspectionResult(name, id, value) {
     const lines = [`${name} #${id}`];
     if (value.key != null)
         lines.push(`key: ${JSON.stringify(value.key)}`);
@@ -181,7 +165,7 @@ function inPageInspect(id) {
                 return;
             lines.push(`${label}:`);
             for (const item of data)
-                lines.push(`  ${hookLine(item)}`);
+                lines.push(`  ${formatHookLine(item)}`);
             return;
         }
         if (typeof data === "object") {
@@ -190,29 +174,47 @@ function inPageInspect(id) {
                 return;
             lines.push(`${label}:`);
             for (const [k, v] of entries)
-                lines.push(`  ${k}: ${preview(v)}`);
+                lines.push(`  ${k}: ${previewValue(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(", ")}}`;
+}
+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(decodeOperations);
+    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 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 name = ri.getDisplayNameForElementID(id);
+    return formatInspectionResult(name, id, result.value);
+}

package/dist/sourcemap.d.ts

@@ -0,0 +1,14 @@
+import { SourceMapConsumer } from "source-map-js";
+type MappedLocation = {
+    file: string;
+    line: number;
+    column: number;
+    snippet?: string;
+};
+type FetchImpl = typeof fetch;
+export declare function resolveViaSourceMap(origin: string, fileUrl: string, line: number, column: number, includeSnippet?: boolean, fetchImpl?: FetchImpl): Promise<MappedLocation | null>;
+export declare function clearSourceMapCache(): void;
+export declare function buildMapCandidates(origin: string, fileUrl: string): string[];
+export declare function cleanSource(source: string): string;
+export declare function snippetFor(consumer: SourceMapConsumer, source: string, line: number): string | undefined;
+export {};