@presto1314w/vite-devtools-browser 0.1.3 → 0.2.0

package/dist/browser.js

@@ -17,16 +17,107 @@ let context = null;
 let page = null;
 let framework = "unknown";
 let extensionModeDisabled = false;
+let eventQueue = null;
 const consoleLogs = [];
 const MAX_LOGS = 200;
 const MAX_HMR_EVENTS = 500;
 let lastReactSnapshot = [];
 const hmrEvents = [];
 let lastModuleGraphUrls = null;
+export function setEventQueue(queue) {
+    eventQueue = queue;
+}
+export function getEventQueue() {
+    return eventQueue;
+}
+export function getCurrentPage() {
+    if (!contextUsable(context))
+        return null;
+    if (!page || page.isClosed())
+        return null;
+    return page;
+}
+/**
+ * Inject browser-side event collector into the page
+ */
+async function injectEventCollector(currentPage) {
+    await currentPage.evaluate(() => {
+        if (window.__vb_events)
+            return; // already injected
+        window.__vb_events = [];
+        window.__vb_push = (event) => {
+            const q = window.__vb_events;
+            q.push(event);
+            if (q.length > 1000)
+                q.shift();
+        };
+        // Subscribe to Vite HMR WebSocket
+        function attachViteListener() {
+            const hot = window.__vite_hot;
+            if (hot?.ws) {
+                hot.ws.addEventListener('message', (e) => {
+                    try {
+                        const data = JSON.parse(e.data);
+                        window.__vb_push({
+                            timestamp: Date.now(),
+                            type: data.type === 'error' ? 'hmr-error' : 'hmr-update',
+                            payload: data
+                        });
+                    }
+                    catch { }
+                });
+                return true;
+            }
+            return false;
+        }
+        // Retry if __vite_hot not ready yet
+        if (!attachViteListener()) {
+            let attempts = 0;
+            const timer = setInterval(() => {
+                attempts++;
+                if (attachViteListener() || attempts >= 50) {
+                    clearInterval(timer);
+                }
+            }, 100);
+        }
+        // Hook window.onerror for runtime errors
+        const origOnError = window.onerror;
+        window.onerror = (msg, src, line, col, err) => {
+            window.__vb_push({
+                timestamp: Date.now(),
+                type: 'error',
+                payload: { message: String(msg), source: src, line, col, stack: err?.stack }
+            });
+            return origOnError ? origOnError(msg, src, line, col, err) : false;
+        };
+        // Hook unhandledrejection
+        window.addEventListener('unhandledrejection', (e) => {
+            window.__vb_push({
+                timestamp: Date.now(),
+                type: 'error',
+                payload: { message: e.reason?.message, stack: e.reason?.stack }
+            });
+        });
+    });
+}
+/**
+ * Flush browser events into daemon event queue
+ */
+export async function flushBrowserEvents(currentPage, queue) {
+    const raw = await currentPage.evaluate(() => {
+        const events = window.__vb_events ?? [];
+        window.__vb_events = []; // clear after flush
+        return events;
+    });
+    for (const e of raw) {
+        queue.push(e);
+    }
+}
 export async function open(url) {
     const currentPage = await ensurePage();
     if (url) {
         await currentPage.goto(url, { waitUntil: "domcontentloaded" });
+        await injectEventCollector(currentPage);
         await detectFramework();
     }
 }
@@ -71,7 +162,7 @@ async function ensurePage() {
     }
     return page;
 }
-function contextUsable(current) {
+export function contextUsable(current) {
     if (!current)
         return false;
     try {
@@ -82,7 +173,7 @@ function contextUsable(current) {
         return false;
     }
 }
-function isClosedTargetError(error) {
+export function isClosedTargetError(error) {
     if (!(error instanceof Error))
         return false;
     return /Target page, context or browser has been closed/i.test(error.message);
@@ -115,20 +206,22 @@ async function launch() {
 }
 function attachListeners(currentPage) {
     currentPage.on("console", (msg) => {
-        const text = `[${msg.type()}] ${msg.text()}`;
-        consoleLogs.push(text);
-        if (consoleLogs.length > MAX_LOGS)
-            consoleLogs.shift();
-        const viteMessage = msg.text();
-        if (!viteMessage.includes("[vite]"))
-            return;
-        const event = parseViteLog(viteMessage);
-        hmrEvents.push(event);
-        if (hmrEvents.length > MAX_HMR_EVENTS)
-            hmrEvents.shift();
+        recordConsoleMessage(consoleLogs, hmrEvents, msg.type(), msg.text());
     });
 }
-function parseViteLog(message) {
+export function recordConsoleMessage(logs, events, type, message, maxLogs = MAX_LOGS, maxEvents = MAX_HMR_EVENTS) {
+    const text = `[${type}] ${message}`;
+    logs.push(text);
+    if (logs.length > maxLogs)
+        logs.shift();
+    if (!message.includes("[vite]"))
+        return;
+    const event = parseViteLog(message);
+    events.push(event);
+    if (events.length > maxEvents)
+        events.shift();
+}
+export function parseViteLog(message) {
     const lower = message.toLowerCase();
     const event = {
         timestamp: Date.now(),
@@ -154,9 +247,107 @@ function parseViteLog(message) {
         event.path = hotUpdateMatch[1].trim();
     return event;
 }
+export function normalizeLimit(limit, fallback, max) {
+    if (!Number.isFinite(limit) || limit <= 0)
+        return fallback;
+    return Math.min(limit, max);
+}
+export function formatRuntimeStatus(runtime, currentFramework, events) {
+    const output = [];
+    output.push("# Vite Runtime");
+    output.push(`URL: ${runtime.url}`);
+    output.push(`Framework: ${currentFramework}`);
+    output.push(`Vite Client: ${runtime.hasViteClient ? "loaded" : "not detected"}`);
+    output.push(`HMR Socket: ${runtime.wsState}`);
+    output.push(`Error Overlay: ${runtime.hasErrorOverlay ? "present" : "none"}`);
+    output.push(`Tracked HMR Events: ${events.length}`);
+    const last = events[events.length - 1];
+    if (last) {
+        output.push(`Last HMR Event: ${new Date(last.timestamp).toLocaleTimeString()} [${last.type}] ${last.message}`);
+    }
+    return output.join("\n");
+}
+export function formatHmrTrace(mode, events, limit) {
+    if (events.length === 0)
+        return "No HMR updates";
+    const safeLimit = normalizeLimit(limit, 20, 200);
+    const recent = events.slice(-safeLimit);
+    if (mode === "summary") {
+        const counts = recent.reduce((acc, event) => {
+            acc[event.type] = (acc[event.type] ?? 0) + 1;
+            return acc;
+        }, {});
+        const lines = ["# HMR Summary"];
+        lines.push(`Events considered: ${recent.length}`);
+        lines.push(`Counts: ${Object.entries(counts)
+            .map(([k, v]) => `${k}=${v}`)
+            .join(", ")}`);
+        const last = recent[recent.length - 1];
+        lines.push(`Last: ${new Date(last.timestamp).toLocaleTimeString()} [${last.type}] ${last.path ?? last.message}`);
+        lines.push("\nUse `vite-browser vite hmr trace --limit <n>` for timeline details.");
+        return lines.join("\n");
+    }
+    return [
+        "# HMR Trace",
+        ...recent.map((event) => {
+            const detail = event.path ? `${event.path}` : event.message;
+            return `[${new Date(event.timestamp).toLocaleTimeString()}] ${event.type} ${detail}`;
+        }),
+    ].join("\n");
+}
+export function formatModuleGraphSnapshot(rows, filter, limit = 200) {
+    const normalizedFilter = filter?.trim().toLowerCase();
+    const safeLimit = normalizeLimit(limit, 200, 500);
+    const filtered = rows.filter((row) => normalizedFilter ? row.url.toLowerCase().includes(normalizedFilter) : true);
+    const limited = filtered.slice(0, safeLimit);
+    if (limited.length === 0)
+        return "No module resources found";
+    const lines = [];
+    lines.push("# Vite Module Graph (loaded resources)");
+    lines.push(`Total: ${filtered.length}${filtered.length > limited.length ? ` (showing ${limited.length})` : ""}`);
+    lines.push("# idx initiator ms url");
+    lines.push("");
+    limited.forEach((row, idx) => {
+        lines.push(`${idx} ${row.initiator} ${row.durationMs}ms ${row.url}`);
+    });
+    return lines.join("\n");
+}
+export function formatModuleGraphTrace(currentUrls, previousUrls, filter, limit = 200) {
+    if (!previousUrls) {
+        return "No module-graph baseline. Captured current snapshot; run `vite module-graph trace` again.";
+    }
+    const currentSet = new Set(currentUrls);
+    const added = currentUrls.filter((url) => !previousUrls.has(url));
+    const removed = [...previousUrls].filter((url) => !currentSet.has(url));
+    const normalizedFilter = filter?.trim().toLowerCase();
+    const safeLimit = normalizeLimit(limit, 200, 500);
+    const addedFiltered = normalizedFilter
+        ? added.filter((url) => url.toLowerCase().includes(normalizedFilter))
+        : added;
+    const removedFiltered = normalizedFilter
+        ? removed.filter((url) => url.toLowerCase().includes(normalizedFilter))
+        : removed;
+    const lines = [];
+    lines.push("# Vite Module Graph Trace");
+    lines.push(`Added: ${addedFiltered.length}, Removed: ${removedFiltered.length}`);
+    lines.push("");
+    lines.push("## Added");
+    if (addedFiltered.length === 0)
+        lines.push("(none)");
+    else
+        addedFiltered.slice(0, safeLimit).forEach((url) => lines.push(`+ ${url}`));
+    lines.push("");
+    lines.push("## Removed");
+    if (removedFiltered.length === 0)
+        lines.push("(none)");
+    else
+        removedFiltered.slice(0, safeLimit).forEach((url) => lines.push(`- ${url}`));
+    return lines.join("\n");
+}
 export async function goto(url) {
     const currentPage = await ensurePage();
     await currentPage.goto(url, { waitUntil: "domcontentloaded" });
+    await injectEventCollector(currentPage);
     await detectFramework();
     return currentPage.url();
 }
@@ -295,19 +486,7 @@ export async function viteRuntimeStatus() {
             timestamp: Date.now(),
         };
     });
-    const output = [];
-    output.push("# Vite Runtime");
-    output.push(`URL: ${runtime.url}`);
-    output.push(`Framework: ${framework}`);
-    output.push(`Vite Client: ${runtime.hasViteClient ? "loaded" : "not detected"}`);
-    output.push(`HMR Socket: ${runtime.wsState}`);
-    output.push(`Error Overlay: ${runtime.hasErrorOverlay ? "present" : "none"}`);
-    output.push(`Tracked HMR Events: ${hmrEvents.length}`);
-    const last = hmrEvents[hmrEvents.length - 1];
-    if (last) {
-        output.push(`Last HMR Event: ${new Date(last.timestamp).toLocaleTimeString()} [${last.type}] ${last.message}`);
-    }
-    return output.join("\n");
+    return formatRuntimeStatus(runtime, framework, hmrEvents);
 }
 export async function viteHMRTrace(mode, limit = 20) {
     if (!page)
@@ -331,30 +510,7 @@ export async function viteHMRTrace(mode, limit = 20) {
     }
     if (hmrEvents.length === 0)
         return "No HMR updates";
-    const safeLimit = Number.isFinite(limit) && limit > 0 ? Math.min(limit, 200) : 20;
-    const recent = hmrEvents.slice(-safeLimit);
-    if (mode === "summary") {
-        const counts = recent.reduce((acc, event) => {
-            acc[event.type] = (acc[event.type] ?? 0) + 1;
-            return acc;
-        }, {});
-        const lines = ["# HMR Summary"];
-        lines.push(`Events considered: ${recent.length}`);
-        lines.push(`Counts: ${Object.entries(counts)
-            .map(([k, v]) => `${k}=${v}`)
-            .join(", ")}`);
-        const last = recent[recent.length - 1];
-        lines.push(`Last: ${new Date(last.timestamp).toLocaleTimeString()} [${last.type}] ${last.path ?? last.message}`);
-        lines.push("\nUse `vite-browser vite hmr trace --limit <n>` for timeline details.");
-        return lines.join("\n");
-    }
-    return [
-        "# HMR Trace",
-        ...recent.map((event) => {
-            const detail = event.path ? `${event.path}` : event.message;
-            return `[${new Date(event.timestamp).toLocaleTimeString()}] ${event.type} ${detail}`;
-        }),
-    ].join("\n");
+    return formatHmrTrace(mode, hmrEvents, limit);
 }
 export async function viteModuleGraph(filter, limit = 200, mode = "snapshot") {
     if (!page)
@@ -366,52 +522,11 @@ export async function viteModuleGraph(filter, limit = 200, mode = "snapshot") {
     const moduleRows = await collectModuleRows(page);
     const currentUrls = moduleRows.map((row) => row.url);
     const previousUrls = lastModuleGraphUrls ? new Set(lastModuleGraphUrls) : null;
-    const currentSet = new Set(currentUrls);
     lastModuleGraphUrls = [...currentUrls];
-    const normalizedFilter = filter?.trim().toLowerCase();
-    const safeLimit = Number.isFinite(limit) && limit > 0 ? Math.min(limit, 500) : 200;
     if (mode === "trace") {
-        if (!previousUrls) {
-            return "No module-graph baseline. Captured current snapshot; run `vite module-graph trace` again.";
-        }
-        const added = currentUrls.filter((url) => !previousUrls.has(url));
-        const removed = [...previousUrls].filter((url) => !currentSet.has(url));
-        const addedFiltered = normalizedFilter
-            ? added.filter((url) => url.toLowerCase().includes(normalizedFilter))
-            : added;
-        const removedFiltered = normalizedFilter
-            ? removed.filter((url) => url.toLowerCase().includes(normalizedFilter))
-            : removed;
-        const lines = [];
-        lines.push("# Vite Module Graph Trace");
-        lines.push(`Added: ${addedFiltered.length}, Removed: ${removedFiltered.length}`);
-        lines.push("");
-        lines.push("## Added");
-        if (addedFiltered.length === 0)
-            lines.push("(none)");
-        else
-            addedFiltered.slice(0, safeLimit).forEach((url) => lines.push(`+ ${url}`));
-        lines.push("");
-        lines.push("## Removed");
-        if (removedFiltered.length === 0)
-            lines.push("(none)");
-        else
-            removedFiltered.slice(0, safeLimit).forEach((url) => lines.push(`- ${url}`));
-        return lines.join("\n");
+        return formatModuleGraphTrace(currentUrls, previousUrls, filter, limit);
     }
-    const filtered = moduleRows.filter((row) => normalizedFilter ? row.url.toLowerCase().includes(normalizedFilter) : true);
-    const limited = filtered.slice(0, safeLimit);
-    if (limited.length === 0)
-        return "No module resources found";
-    const lines = [];
-    lines.push("# Vite Module Graph (loaded resources)");
-    lines.push(`Total: ${filtered.length}${filtered.length > limited.length ? ` (showing ${limited.length})` : ""}`);
-    lines.push("# idx initiator ms url");
-    lines.push("");
-    limited.forEach((row, idx) => {
-        lines.push(`${idx} ${row.initiator} ${row.durationMs}ms ${row.url}`);
-    });
-    return lines.join("\n");
+    return formatModuleGraphSnapshot(moduleRows, filter, limit);
 }
 async function collectModuleRows(page) {
     return page.evaluate(() => {
@@ -500,7 +615,7 @@ export async function network(idx) {
         return networkLog.format();
     return networkLog.detail(idx);
 }
-async function mapStackTrace(stack, origin, inlineSource = false) {
+export async function mapStackTrace(stack, origin, inlineSource = false, resolver = resolveViaSourceMap) {
     const locationRegex = /(https?:\/\/[^\s)]+):(\d+):(\d+)/g;
     const matches = Array.from(stack.matchAll(locationRegex));
     if (matches.length === 0)
@@ -512,7 +627,7 @@ async function mapStackTrace(stack, origin, inlineSource = false) {
         const column = Number.parseInt(match[3], 10);
         if (!Number.isFinite(line) || !Number.isFinite(column))
             continue;
-        const mapped = await resolveViaSourceMap(origin, fileUrl, line, column, inlineSource);
+        const mapped = await resolver(origin, fileUrl, line, column, inlineSource);
         if (!mapped)
             continue;
         mappedLines.push(`- ${fileUrl}:${line}:${column} -> ${mapped.file}:${mapped.line}:${mapped.column}`);

package/dist/cli.d.ts

@@ -1,2 +1,14 @@
 #!/usr/bin/env node
-export {};
+import { send, type Response } from "./client.js";
+export type CliIo = {
+    send: typeof send;
+    readFile: (path: string, encoding: BufferEncoding) => string;
+    stdout: (text: string) => void;
+    stderr: (text: string) => void;
+    exit: (code: number) => never;
+};
+export declare function normalizeUrl(value: string): string;
+export declare function parseNumberFlag(args: string[], name: string, fallback: number): number;
+export declare function runCli(argv: string[], io: CliIo): Promise<void>;
+export declare function exit(io: Pick<CliIo, "stdout" | "stderr" | "exit">, res: Response, msg: string): never;
+export declare function printUsage(): string;