@presto1314w/vite-devtools-browser 0.2.2 → 0.3.0

package/dist/browser-vite.js

@@ -0,0 +1,181 @@
+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 readRuntimeSnapshot(page) {
+    return page.evaluate(() => {
+        const findViteClient = () => {
+            const scripts = Array.from(document.querySelectorAll("script[src]"));
+            return scripts.some((script) => script.getAttribute("src")?.includes("/@vite/client"));
+        };
+        const wsStateName = (wsState) => {
+            if (wsState == null)
+                return "unknown";
+            if (wsState === 0)
+                return "connecting";
+            if (wsState === 1)
+                return "open";
+            if (wsState === 2)
+                return "closing";
+            if (wsState === 3)
+                return "closed";
+            return "unknown";
+        };
+        const hot = window.__vite_hot;
+        const ws = hot?.ws || hot?.socket;
+        return {
+            url: location.href,
+            hasViteClient: findViteClient(),
+            wsState: wsStateName(ws?.readyState),
+            hasErrorOverlay: Boolean(document.querySelector("vite-error-overlay")),
+            timestamp: Date.now(),
+        };
+    });
+}
+export async function collectModuleRows(page) {
+    return page.evaluate(() => {
+        const isLikelyModuleUrl = (url) => {
+            if (!url)
+                return false;
+            if (url.includes("/@vite/"))
+                return true;
+            if (url.includes("/@id/"))
+                return true;
+            if (url.includes("/src/"))
+                return true;
+            if (url.includes("/node_modules/"))
+                return true;
+            return /\.(mjs|cjs|js|jsx|ts|tsx|vue|css)(\?|$)/.test(url);
+        };
+        const scripts = Array.from(document.querySelectorAll("script[src]")).map((node) => node.src);
+        const resources = performance
+            .getEntriesByType("resource")
+            .map((entry) => {
+            const item = entry;
+            return {
+                url: item.name,
+                initiator: item.initiatorType || "unknown",
+                durationMs: Number(item.duration.toFixed(1)),
+            };
+        })
+            .filter((entry) => isLikelyModuleUrl(entry.url));
+        const all = [
+            ...scripts
+                .filter((url) => isLikelyModuleUrl(url))
+                .map((url) => ({ url, initiator: "script-tag", durationMs: 0 })),
+            ...resources,
+        ];
+        const seen = new Set();
+        const unique = [];
+        for (const row of all) {
+            if (seen.has(row.url))
+                continue;
+            seen.add(row.url);
+            unique.push(row);
+        }
+        return unique;
+    });
+}
+export async function readOverlayError(page) {
+    return page.evaluate(() => {
+        const overlay = document.querySelector("vite-error-overlay");
+        if (!overlay || !overlay.shadowRoot)
+            return null;
+        const message = overlay.shadowRoot.querySelector(".message")?.textContent?.trim();
+        const stack = overlay.shadowRoot.querySelector(".stack")?.textContent?.trim();
+        return { message, stack };
+    });
+}

package/dist/browser.d.ts

@@ -1,25 +1,9 @@
-import { type BrowserContext, type Page } from "playwright";
+import type { Page } from "playwright";
+import { type HmrEvent } from "./browser-session.js";
 import { resolveViaSourceMap } from "./sourcemap.js";
 import { EventQueue } from "./event-queue.js";
-type HmrEventType = "connecting" | "connected" | "update" | "full-reload" | "error" | "log";
-export type HmrEvent = {
-    timestamp: number;
-    type: HmrEventType;
-    message: string;
-    path?: string;
-};
-export type RuntimeSnapshot = {
-    url: string;
-    hasViteClient: boolean;
-    wsState: string;
-    hasErrorOverlay: boolean;
-    timestamp: number;
-};
-export type ModuleRow = {
-    url: string;
-    initiator: string;
-    durationMs: number;
-};
+export { contextUsable, isClosedTargetError, type HmrEvent } from "./browser-session.js";
+export { formatHmrTrace, formatModuleGraphSnapshot, formatModuleGraphTrace, formatRuntimeStatus, normalizeLimit, type ModuleRow, type RuntimeSnapshot, } from "./browser-vite.js";
 export type ModuleGraphMode = "snapshot" | "trace" | "clear";
 export declare function setEventQueue(queue: EventQueue): void;
 export declare function getEventQueue(): EventQueue | null;
@@ -34,15 +18,8 @@ export declare function cookies(cookies: {
     value: string;
 }[], domain: string): Promise<number>;
 export declare function close(): Promise<void>;
-export declare function contextUsable(current: Pick<BrowserContext, "pages"> | null): current is Pick<BrowserContext, "pages">;
-export declare function isClosedTargetError(error: unknown): boolean;
 export declare function recordConsoleMessage(logs: string[], events: HmrEvent[], type: string, message: string, maxLogs?: number, maxEvents?: number): void;
 export declare function parseViteLog(message: string): HmrEvent;
-export declare function normalizeLimit(limit: number, fallback: number, max: number): number;
-export declare function formatRuntimeStatus(runtime: RuntimeSnapshot, currentFramework: string, events: HmrEvent[]): string;
-export declare function formatHmrTrace(mode: "summary" | "trace", events: HmrEvent[], limit: number): string;
-export declare function formatModuleGraphSnapshot(rows: ModuleRow[], filter?: string, limit?: number): string;
-export declare function formatModuleGraphTrace(currentUrls: string[], previousUrls: Set<string> | null, filter?: string, limit?: number): string;
 export declare function goto(url: string): Promise<string>;
 export declare function back(): Promise<void>;
 export declare function reload(): Promise<string>;
@@ -63,4 +40,3 @@ export declare function screenshot(): Promise<string>;
 export declare function evaluate(script: string): Promise<string>;
 export declare function network(idx?: number): Promise<string>;
 export declare function mapStackTrace(stack: string, origin: string, inlineSource?: boolean, resolver?: typeof resolveViaSourceMap): Promise<string>;
-export {};