@presto1314w/vite-devtools-browser 0.1.2 → 0.1.4

package/dist/sourcemap.js

@@ -0,0 +1,74 @@
+import { SourceMapConsumer } from "source-map-js";
+const consumers = new Map();
+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({
+        line,
+        column: Math.max(0, column - 1),
+    });
+    if (!position.source || position.line == null || position.column == null)
+        return null;
+    const mapped = {
+        file: cleanSource(position.source),
+        line: position.line,
+        column: position.column + 1,
+    };
+    if (includeSnippet) {
+        mapped.snippet = snippetFor(consumer, position.source, position.line);
+    }
+    return mapped;
+}
+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)) {
+            const cached = consumers.get(url);
+            if (cached)
+                return cached;
+            continue;
+        }
+        const response = await fetchImpl(url, { signal: AbortSignal.timeout(5000) }).catch(() => null);
+        if (!response?.ok) {
+            consumers.set(url, null);
+            continue;
+        }
+        const map = await response.json().catch(() => null);
+        if (!map) {
+            consumers.set(url, null);
+            continue;
+        }
+        const consumer = new SourceMapConsumer(map);
+        consumers.set(url, consumer);
+        return consumer;
+    }
+    return null;
+}
+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}`];
+}
+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;
+}
+export function snippetFor(consumer, source, line) {
+    const content = consumer.sourceContentFor(source, true);
+    if (!content)
+        return undefined;
+    const lines = content.split(/\r?\n/);
+    const sourceLine = lines[line - 1];
+    if (!sourceLine)
+        return undefined;
+    return `${line} | ${sourceLine.trim()}`;
+}

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>;

package/dist/svelte/devtools.js

@@ -1,177 +1,120 @@
-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);
+export function formatComponentTree(nodes) {
+    const output = [
+        "# Svelte component tree",
+        "# Use `svelte tree <id>` to inspect component details.",
+        "",
+    ];
+    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");
-        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);
-                    }
-                }
-            }
-        }
-    });
+    }
+    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);
+    }
 }
-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.`;
+export function formatComponentDetails(nodes, id) {
+    const match = nodes.find((n) => String(n.id) === id);
+    if (!match)
+        return `Component ${id} 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)}`);
         }
-        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("");
+        output.push("");
+    }
+    if (match.file) {
+        output.push("## Source");
+        output.push(`  ${match.file}`);
+    }
+    return output.join("\n");
+    function safe(v) {
+        try {
+            return JSON.stringify(v);
         }
-        if (match.file) {
-            output.push("## Source");
-            output.push(`  ${match.file}`);
+        catch {
+            return String(v);
         }
-        return output.join("\n");
-        function safe(v) {
-            try {
-                return JSON.stringify(v);
-            }
-            catch {
-                return String(v);
-            }
+    }
+}
+export async function getComponentTree(page) {
+    const nodes = await page.evaluate(collectSvelteNodes);
+    return formatComponentTree(nodes);
+}
+export async function getComponentDetails(page, id) {
+    const nodes = await page.evaluate(collectSvelteNodes);
+    return formatComponentDetails(nodes, id);
+}
+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;
         }
-        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);
+        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);
             }
-            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);
-                    }
-                }
+            else if (typeof child === "object") {
+                for (const c of Object.values(child))
+                    visit(c, currentParent, depth + 1);
             }
         }
-    }, id);
+    }
 }

package/dist/vue/devtools.d.ts

@@ -11,6 +11,10 @@ export interface VueComponent {
     file?: string;
     line?: number;
 }
+export declare function formatComponentTree(apps: any[]): string;
+export declare function formatComponentDetails(targetInstance: any, componentId: string): string;
+export declare function formatPiniaStores(pinia: any, storeName?: string, piniaFromWindow?: boolean): string;
+export declare function formatRouterInfo(actualRouter: any): string;
 /**
  * Get Vue component tree from the page
  */