@presto1314w/vite-devtools-browser 0.1.3 → 0.2.0

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

@@ -1,8 +1,14 @@
+import { SourceMapConsumer } from "source-map-js";
 type MappedLocation = {
     file: string;
     line: number;
     column: number;
     snippet?: string;
 };
-export declare function resolveViaSourceMap(origin: string, fileUrl: string, line: number, column: number, includeSnippet?: boolean): Promise<MappedLocation | null>;
+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 {};

package/dist/sourcemap.js

@@ -1,7 +1,7 @@
 import { SourceMapConsumer } from "source-map-js";
 const consumers = new Map();
-export async function resolveViaSourceMap(origin, fileUrl, line, column, includeSnippet = false) {
-    const consumer = await loadConsumer(origin, fileUrl);
+export async function resolveViaSourceMap(origin, fileUrl, line, column, includeSnippet = false, fetchImpl = fetch) {
+    const consumer = await loadConsumer(origin, fileUrl, fetchImpl);
     if (!consumer)
         return null;
     const position = consumer.originalPositionFor({
@@ -20,7 +20,10 @@ export async function resolveViaSourceMap(origin, fileUrl, line, column, include
     }
     return mapped;
 }
-async function loadConsumer(origin, fileUrl) {
+export function clearSourceMapCache() {
+    consumers.clear();
+}
+async function loadConsumer(origin, fileUrl, fetchImpl) {
     const candidates = buildMapCandidates(origin, fileUrl);
     for (const url of candidates) {
         if (consumers.has(url)) {
@@ -29,7 +32,7 @@ async function loadConsumer(origin, fileUrl) {
                 return cached;
             continue;
         }
-        const response = await fetch(url, { signal: AbortSignal.timeout(5000) }).catch(() => null);
+        const response = await fetchImpl(url, { signal: AbortSignal.timeout(5000) }).catch(() => null);
         if (!response?.ok) {
             consumers.set(url, null);
             continue;
@@ -45,21 +48,21 @@ async function loadConsumer(origin, fileUrl) {
     }
     return null;
 }
-function buildMapCandidates(origin, fileUrl) {
+export function buildMapCandidates(origin, fileUrl) {
     const url = new URL(fileUrl, origin);
     const basePath = `${url.pathname}.map`;
     const withSearch = url.search ? `${basePath}${url.search}` : basePath;
     // Try preserving query first (Vite often keeps cache-busting query params).
     return [`${origin}${withSearch}`, `${origin}${basePath}`];
 }
-function cleanSource(source) {
+export function cleanSource(source) {
     const decoded = decodeURIComponent(source.replace(/^file:\/\//, ""));
     const nodeModulesIndex = decoded.lastIndexOf("/node_modules/");
     if (nodeModulesIndex >= 0)
         return decoded.slice(nodeModulesIndex + 1);
     return decoded;
 }
-function snippetFor(consumer, source, line) {
+export function snippetFor(consumer, source, line) {
     const content = consumer.sourceContentFor(source, true);
     if (!content)
         return undefined;

package/dist/svelte/devtools.d.ts

@@ -1,3 +1,12 @@
 import type { Page } from "playwright";
+export type SvelteNode = {
+    id: number;
+    parent: number;
+    name: string;
+    props?: unknown;
+    file?: string;
+};
+export declare function formatComponentTree(nodes: SvelteNode[]): string;
+export declare function formatComponentDetails(nodes: SvelteNode[], id: string): string;
 export declare function getComponentTree(page: Page): Promise<string>;
 export declare function getComponentDetails(page: Page, id: string): Promise<string>;