@presto1314w/vite-devtools-browser 0.1.3 → 0.2.0

package/dist/daemon.d.ts

@@ -1 +1,58 @@
-export {};
+import type { Socket } from "node:net";
+import * as browser from "./browser.js";
+export type BrowserApi = typeof browser;
+export type Cmd = {
+    action: string;
+    url?: string;
+    id?: string;
+    script?: string;
+    idx?: number;
+    mode?: "summary" | "trace" | "clear" | "snapshot";
+    limit?: number;
+    windowMs?: number;
+    filter?: string;
+    mapped?: boolean;
+    inlineSource?: boolean;
+    cookies?: {
+        name: string;
+        value: string;
+    }[];
+    domain?: string;
+    store?: string;
+};
+export declare function cleanError(err: unknown): string;
+export declare function createRunner(api?: BrowserApi): (cmd: Cmd) => Promise<{
+    ok: boolean;
+    data?: undefined;
+    error?: undefined;
+} | {
+    ok: boolean;
+    data: number;
+    error?: undefined;
+} | {
+    ok: boolean;
+    data: string;
+    error?: undefined;
+} | {
+    ok: boolean;
+    error: string;
+    data?: undefined;
+}>;
+export declare function dispatchLine(line: string, socket: Pick<Socket, "write">, run?: (cmd: Cmd) => Promise<{
+    ok: boolean;
+    data?: undefined;
+    error?: undefined;
+} | {
+    ok: boolean;
+    data: number;
+    error?: undefined;
+} | {
+    ok: boolean;
+    data: string;
+    error?: undefined;
+} | {
+    ok: boolean;
+    error: string;
+    data?: undefined;
+}>, onClose?: () => void): Promise<void>;
+export declare function startDaemon(): void;

package/dist/daemon.js

@@ -1,144 +1,196 @@
 import { createServer } from "node:net";
 import { mkdirSync, writeFileSync, rmSync } from "node:fs";
+import { fileURLToPath } from "node:url";
 import * as browser from "./browser.js";
+import { correlateErrorWithHMR, formatErrorCorrelationReport } from "./correlate.js";
+import { diagnoseHMR, formatDiagnosisReport } from "./diagnose.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) {
+import { EventQueue } from "./event-queue.js";
+import * as networkLog from "./network.js";
+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 hmrMode = cmd.mode === "trace" || cmd.mode === "clear" ? cmd.mode : "summary";
-        const data = await browser.viteHMRTrace(hmrMode, cmd.limit ?? 20);
-        return { ok: true, data };
-    }
-    if (cmd.action === "vite-runtime") {
-        const data = await browser.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 browser.viteModuleGraph(cmd.filter, cmd.limit ?? 200, graphMode);
-        return { ok: true, data };
-    }
-    if (cmd.action === "errors") {
-        const data = await browser.errors(Boolean(cmd.mapped), Boolean(cmd.inlineSource));
-        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) {
+        // Flush browser events to daemon queue before processing command
+        const queue = api.getEventQueue();
+        if (queue) {
+            try {
+                const currentPage = api.getCurrentPage();
+                if (currentPage) {
+                    await api.flushBrowserEvents(currentPage, queue);
+                }
+            }
+            catch {
+                // Ignore flush errors (page might not be open yet)
+            }
+        }
+        // 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 === "correlate-errors") {
+            const errorText = String(await api.errors(Boolean(cmd.mapped), Boolean(cmd.inlineSource)));
+            const events = queue ? queue.window(cmd.windowMs ?? 5000) : [];
+            const data = formatErrorCorrelationReport(errorText, errorText === "no errors" ? null : correlateErrorWithHMR(errorText, events, cmd.windowMs ?? 5000));
+            return { ok: true, data };
+        }
+        if (cmd.action === "diagnose-hmr") {
+            const errorText = String(await api.errors(Boolean(cmd.mapped), Boolean(cmd.inlineSource)));
+            const runtimeText = String(await api.viteRuntimeStatus());
+            const hmrTraceText = String(await api.viteHMRTrace("trace", cmd.limit ?? 50));
+            const events = queue ? queue.window(cmd.windowMs ?? 5000) : [];
+            const correlation = errorText === "no errors" ? null : correlateErrorWithHMR(errorText, events, cmd.windowMs ?? 5000);
+            const data = formatDiagnosisReport(diagnoseHMR({ errorText, runtimeText, hmrTraceText, correlation }));
+            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() {
+    // Initialize event queue
+    const eventQueue = new EventQueue(1000);
+    browser.setEventQueue(eventQueue);
+    networkLog.setEventQueue(eventQueue);
+    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.
@@ -146,3 +198,6 @@ function removeSocketFile() {
         return;
     rmSync(socketPath, { force: true });
 }
+if (process.argv[1] && fileURLToPath(import.meta.url) === process.argv[1]) {
+    startDaemon();
+}

package/dist/diagnose.d.ts

@@ -0,0 +1,19 @@
+import type { ErrorCorrelation } from "./correlate.js";
+export type DiagnosisStatus = "pass" | "warn" | "fail";
+export type DiagnosisConfidence = "high" | "medium" | "low";
+export type DiagnosisResult = {
+    code: "circular-dependency" | "missing-module" | "hmr-websocket-closed" | "repeated-full-reload";
+    status: DiagnosisStatus;
+    confidence: DiagnosisConfidence;
+    summary: string;
+    detail: string;
+    suggestion: string;
+};
+export type DiagnoseInput = {
+    errorText: string;
+    runtimeText: string;
+    hmrTraceText: string;
+    correlation: ErrorCorrelation | null;
+};
+export declare function diagnoseHMR(input: DiagnoseInput): DiagnosisResult[];
+export declare function formatDiagnosisReport(results: DiagnosisResult[]): string;

package/dist/diagnose.js

@@ -0,0 +1,88 @@
+export function diagnoseHMR(input) {
+    const results = [
+        detectCircularDependency(input),
+        detectMissingModule(input),
+        detectClosedWebsocket(input),
+        detectRepeatedFullReload(input),
+    ].filter((result) => result !== null);
+    if (results.length > 0)
+        return results;
+    return [
+        {
+            code: "hmr-websocket-closed",
+            status: "pass",
+            confidence: "low",
+            summary: "No obvious HMR failure pattern detected",
+            detail: "Runtime, current error text, and HMR trace did not match any built-in failure rules.",
+            suggestion: "If symptoms persist, inspect `vite hmr trace`, `network`, and `correlate errors` output together.",
+        },
+    ];
+}
+export function formatDiagnosisReport(results) {
+    const lines = ["# HMR Diagnosis", ""];
+    for (const result of results) {
+        lines.push(`## ${result.code}`, `Status: ${result.status}`, `Confidence: ${result.confidence}`, result.summary, result.detail, `Suggestion: ${result.suggestion}`, "");
+    }
+    return lines.join("\n").trimEnd();
+}
+function detectCircularDependency(input) {
+    const text = `${input.errorText}\n${input.hmrTraceText}`;
+    if (!/circular (dependency|import)|import cycle/i.test(text))
+        return null;
+    const moduleText = input.correlation?.matchingModules.length
+        ? `Likely modules: ${input.correlation.matchingModules.join(", ")}.`
+        : "The error text points to a circular import/dependency chain.";
+    return {
+        code: "circular-dependency",
+        status: "fail",
+        confidence: input.correlation?.matchingModules.length ? "high" : "medium",
+        summary: "HMR is likely breaking because of a circular dependency.",
+        detail: `${moduleText} Circular imports often prevent safe hot replacement and force stale state or reload loops.`,
+        suggestion: "Break the import cycle by extracting shared code into a leaf module or switching one edge to a lazy import.",
+    };
+}
+function detectMissingModule(input) {
+    const text = input.errorText;
+    if (!/failed to resolve import|cannot find module|could not resolve|does the file exist/i.test(text)) {
+        return null;
+    }
+    return {
+        code: "missing-module",
+        status: "fail",
+        confidence: "high",
+        summary: "A module import failed to resolve during HMR.",
+        detail: input.correlation?.matchingModules.length
+            ? `The current error overlaps with recent updates to ${input.correlation.matchingModules.join(", ")}.`
+            : "The current error text matches a missing or unresolved import pattern.",
+        suggestion: "Verify the import path, file extension, alias configuration, and whether the module exists on disk.",
+    };
+}
+function detectClosedWebsocket(input) {
+    const runtimeClosed = /HMR Socket:\s*(closed|closing|unknown)/i.test(input.runtimeText);
+    const traceClosed = /disconnected|failed to connect|connection lost|ws closed/i.test(input.hmrTraceText);
+    if (!runtimeClosed && !traceClosed)
+        return null;
+    return {
+        code: "hmr-websocket-closed",
+        status: "fail",
+        confidence: runtimeClosed && traceClosed ? "high" : "medium",
+        summary: "The HMR websocket is not healthy.",
+        detail: runtimeClosed
+            ? "Runtime status reports the HMR socket as closed, closing, or unknown."
+            : "HMR trace contains disconnect or websocket failure messages.",
+        suggestion: "Check the dev server is running, the page is connected to the correct origin, and no proxy/firewall is blocking the websocket.",
+    };
+}
+function detectRepeatedFullReload(input) {
+    const matches = input.hmrTraceText.match(/full-reload|page reload/gi) ?? [];
+    if (matches.length < 2)
+        return null;
+    return {
+        code: "repeated-full-reload",
+        status: "warn",
+        confidence: matches.length >= 3 ? "high" : "medium",
+        summary: "Vite is repeatedly falling back to full page reloads.",
+        detail: `Observed ${matches.length} full-reload events in the recent HMR trace.`,
+        suggestion: "Check whether the changed module is outside HMR boundaries, introduces side effects, or triggers a circular dependency.",
+    };
+}

package/dist/event-queue.d.ts

@@ -0,0 +1,22 @@
+export type VBEventType = 'hmr-update' | 'hmr-error' | 'module-change' | 'network' | 'error' | 'render';
+export interface VBEvent {
+    timestamp: number;
+    type: VBEventType;
+    payload: unknown;
+}
+export declare class EventQueue {
+    private events;
+    private readonly maxSize;
+    constructor(maxSize?: number);
+    push(event: VBEvent): void;
+    /**
+     * Return all events within the last `ms` milliseconds before `before`
+     */
+    window(ms: number, before?: number): VBEvent[];
+    /**
+     * Return all events of a given type
+     */
+    ofType(type: VBEventType): VBEvent[];
+    all(): VBEvent[];
+    clear(): void;
+}

package/dist/event-queue.js

@@ -0,0 +1,32 @@
+export class EventQueue {
+    events = [];
+    maxSize;
+    constructor(maxSize = 1000) {
+        this.maxSize = maxSize;
+    }
+    push(event) {
+        this.events.push(event);
+        if (this.events.length > this.maxSize) {
+            this.events.shift();
+        }
+    }
+    /**
+     * Return all events within the last `ms` milliseconds before `before`
+     */
+    window(ms, before = Date.now()) {
+        const start = before - ms;
+        return this.events.filter((e) => e.timestamp >= start && e.timestamp <= before);
+    }
+    /**
+     * Return all events of a given type
+     */
+    ofType(type) {
+        return this.events.filter((e) => e.type === type);
+    }
+    all() {
+        return [...this.events];
+    }
+    clear() {
+        this.events = [];
+    }
+}

package/dist/network.d.ts

@@ -1,4 +1,6 @@
 import type { Page } from "playwright";
+import type { EventQueue } from "./event-queue.js";
+export declare function setEventQueue(queue: EventQueue): void;
 export declare function attach(page: Page): void;
 export declare function clear(): void;
 export declare function detail(idx: number): Promise<string>;

package/dist/network.js

@@ -4,6 +4,10 @@ import { join } from "node:path";
 const BODY_INLINE_LIMIT = 4000;
 let entries = [];
 let startTime = new Map();
+let eventQueue = null;
+export function setEventQueue(queue) {
+    eventQueue = queue;
+}
 export function attach(page) {
     page.on("request", (req) => {
         if (req.resourceType() === "document" && req.frame() === page.mainFrame()) {
@@ -16,7 +20,21 @@ export function attach(page) {
         const t0 = startTime.get(req);
         if (t0 == null)
             return;
-        entries.push({ req, res, ms: Date.now() - t0 });
+        const ms = Date.now() - t0;
+        entries.push({ req, res, ms });
+        // Push to event queue if available
+        if (eventQueue) {
+            eventQueue.push({
+                timestamp: Date.now(),
+                type: 'network',
+                payload: {
+                    url: req.url(),
+                    method: req.method(),
+                    status: res.status(),
+                    ms
+                }
+            });
+        }
     });
     page.on("requestfailed", (req) => {
         if (!startTime.has(req))

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;