@presto1314w/vite-devtools-browser 0.3.3 → 0.3.6

package/dist/react/profiler.js

@@ -0,0 +1,195 @@
+/**
+ * React commit tracking groundwork.
+ *
+ * This module records real commit metadata that can be observed from the
+ * React DevTools hook without pretending to expose a full Profiler surface.
+ */
+export async function installRenderTracking(page) {
+    await page.evaluate(inPageInstallRenderTracking);
+}
+export async function getRecentRenders(page, limit = 50) {
+    return page.evaluate(inPageGetRecentRenders, limit);
+}
+export async function getRenderTriggers(page, limit = 50) {
+    return page.evaluate(inPageGetRenderTriggers, limit);
+}
+export async function clearRenderHistory(page) {
+    await page.evaluate(inPageClearRenderHistory);
+}
+export function formatDuration(duration) {
+    return duration == null ? "n/a" : `${duration.toFixed(2)}ms`;
+}
+export function formatRenderInfo(renders) {
+    if (renders.length === 0)
+        return "No renders recorded";
+    const lines = ["# React Commits\n"];
+    for (const render of renders) {
+        const phase = render.phase === "mount" ? "MOUNT" : render.phase === "update" ? "UPDATE" : "NESTED";
+        const duration = formatDuration(render.actualDuration);
+        const slow = render.actualDuration != null && render.actualDuration > 16 ? " ⚠️ SLOW" : "";
+        lines.push(`[${phase}] ${render.rootName} (${duration})${slow}`);
+        lines.push(`  Fibers: ${render.fiberCount}`);
+        if (render.baseDuration != null) {
+            lines.push(`  Base duration: ${render.baseDuration.toFixed(2)}ms`);
+        }
+        if (render.interactions.length > 0) {
+            const interactions = render.interactions.map((i) => i.name).join(", ");
+            lines.push(`  Interactions: ${interactions}`);
+        }
+    }
+    return lines.join("\n");
+}
+export function formatRenderTriggers(triggers) {
+    if (triggers.length === 0)
+        return "No render triggers recorded";
+    const lines = ["# Render Triggers\n"];
+    for (const trigger of triggers) {
+        const reason = trigger.reason.toUpperCase();
+        const details = trigger.details ? ` - ${trigger.details}` : "";
+        lines.push(`[${reason}] ${trigger.rootName}${details}`);
+    }
+    return lines.join("\n");
+}
+export function analyzeSlowRenders(renders) {
+    const slowRenders = renders.filter((r) => r.actualDuration != null && r.actualDuration > 16);
+    if (slowRenders.length === 0) {
+        return "No slow renders detected with measurable duration (> 16ms)";
+    }
+    const lines = [
+        "# Slow Renders Analysis\n",
+        `Found ${slowRenders.length} slow render(s) (> 16ms)\n`,
+    ];
+    const byRoot = new Map();
+    for (const render of slowRenders) {
+        const list = byRoot.get(render.rootName) || [];
+        list.push(render);
+        byRoot.set(render.rootName, list);
+    }
+    const sorted = Array.from(byRoot.entries()).sort(([, a], [, b]) => {
+        const totalA = a.reduce((sum, r) => sum + (r.actualDuration ?? 0), 0);
+        const totalB = b.reduce((sum, r) => sum + (r.actualDuration ?? 0), 0);
+        return totalB - totalA;
+    });
+    for (const [name, commits] of sorted) {
+        const durations = commits.map((r) => r.actualDuration ?? 0);
+        const total = durations.reduce((sum, value) => sum + value, 0);
+        const count = commits.length;
+        const avg = total / count;
+        const max = Math.max(...durations);
+        lines.push(`${name}:`);
+        lines.push(`  Count: ${count}`);
+        lines.push(`  Total: ${total.toFixed(2)}ms`);
+        lines.push(`  Average: ${avg.toFixed(2)}ms`);
+        lines.push(`  Max: ${max.toFixed(2)}ms`);
+        lines.push("");
+    }
+    return lines.join("\n");
+}
+function inPageInstallRenderTracking() {
+    const win = window;
+    win.__REACT_RENDER_HISTORY__ = win.__REACT_RENDER_HISTORY__ || [];
+    win.__REACT_RENDER_TRIGGERS__ = win.__REACT_RENDER_TRIGGERS__ || [];
+    const hook = win.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (!hook) {
+        console.warn("React DevTools hook not found, render tracking limited");
+        return;
+    }
+    if (win.__REACT_RENDER_TRACKING_INSTALLED__)
+        return;
+    win.__REACT_RENDER_TRACKING_INSTALLED__ = true;
+    const originalOnCommitFiberRoot = hook.onCommitFiberRoot;
+    hook.onCommitFiberRoot = function (rendererId, root, priorityLevel) {
+        try {
+            const renderInfo = toRenderInfo(rendererId, root);
+            win.__REACT_RENDER_HISTORY__.push(renderInfo);
+            if (win.__REACT_RENDER_HISTORY__.length > 100) {
+                win.__REACT_RENDER_HISTORY__.shift();
+            }
+        }
+        catch {
+            // Ignore tracking errors to avoid breaking the inspected app.
+        }
+        if (originalOnCommitFiberRoot) {
+            return originalOnCommitFiberRoot.call(this, rendererId, root, priorityLevel);
+        }
+    };
+}
+function inPageGetRecentRenders(limit) {
+    const win = window;
+    const history = win.__REACT_RENDER_HISTORY__ || [];
+    return history.slice(-limit);
+}
+function inPageGetRenderTriggers(limit) {
+    const win = window;
+    const triggers = win.__REACT_RENDER_TRIGGERS__ || [];
+    return triggers.slice(-limit);
+}
+function inPageClearRenderHistory() {
+    const win = window;
+    win.__REACT_RENDER_HISTORY__ = [];
+    win.__REACT_RENDER_TRIGGERS__ = [];
+}
+function toRenderInfo(rendererId, root) {
+    const current = root?.current ?? null;
+    const rootChild = current?.child ?? null;
+    return {
+        rendererId,
+        rootName: getFiberName(rootChild || current),
+        phase: inferPhase(current),
+        actualDuration: numberOrNull(current?.actualDuration),
+        baseDuration: numberOrNull(current?.treeBaseDuration ?? current?.baseDuration),
+        startTime: numberOrNull(current?.actualStartTime),
+        commitTime: Date.now(),
+        fiberCount: countFibers(current),
+        interactions: normalizeInteractions(root?.memoizedInteractions),
+    };
+}
+function inferPhase(current) {
+    if (!current?.alternate)
+        return "mount";
+    return current.flags && (current.flags & 1024) !== 0 ? "nested-update" : "update";
+}
+function getFiberName(fiber) {
+    if (!fiber)
+        return "Root";
+    if (typeof fiber.type === "string")
+        return fiber.type;
+    if (fiber.type?.displayName)
+        return fiber.type.displayName;
+    if (fiber.type?.name)
+        return fiber.type.name;
+    if (fiber.elementType?.displayName)
+        return fiber.elementType.displayName;
+    if (fiber.elementType?.name)
+        return fiber.elementType.name;
+    return "Anonymous";
+}
+function countFibers(fiber) {
+    let count = 0;
+    const stack = fiber ? [fiber] : [];
+    while (stack.length > 0) {
+        const current = stack.pop();
+        if (!current)
+            continue;
+        count++;
+        if (current.sibling)
+            stack.push(current.sibling);
+        if (current.child)
+            stack.push(current.child);
+    }
+    return count;
+}
+function numberOrNull(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function normalizeInteractions(interactions) {
+    if (!(interactions instanceof Set))
+        return [];
+    return Array.from(interactions)
+        .map((interaction) => ({
+        id: typeof interaction?.id === "number" ? interaction.id : 0,
+        name: typeof interaction?.name === "string" ? interaction.name : "interaction",
+        timestamp: typeof interaction?.timestamp === "number" ? interaction.timestamp : 0,
+    }))
+        .filter((interaction) => interaction.name.length > 0);
+}

package/dist/react/zustand.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Zustand state management integration
+ *
+ * Detects Zustand stores and provides state inspection capabilities.
+ */
+import type { Page } from "playwright";
+export interface ZustandStore {
+    name: string;
+    state: Record<string, unknown>;
+    actions: string[];
+}
+/**
+ * Detect if Zustand is present in the page
+ */
+export declare function detectZustand(page: Page): Promise<boolean>;
+/**
+ * List all Zustand stores
+ */
+export declare function listStores(page: Page): Promise<string[]>;
+/**
+ * Inspect a specific Zustand store
+ */
+export declare function inspectStore(page: Page, storeName: string): Promise<ZustandStore | null>;
+/**
+ * Format Zustand store list for CLI output
+ */
+export declare function formatStoreList(stores: string[]): string;
+/**
+ * Format Zustand store inspection for CLI output
+ */
+export declare function formatStoreInspection(store: ZustandStore): string;

package/dist/react/zustand.js

@@ -0,0 +1,113 @@
+/**
+ * Zustand state management integration
+ *
+ * Detects Zustand stores and provides state inspection capabilities.
+ */
+/**
+ * Detect if Zustand is present in the page
+ */
+export async function detectZustand(page) {
+    return page.evaluate(() => {
+        // Check for Zustand stores in window
+        const win = window;
+        return !!(win.__ZUSTAND_STORES__ || win.zustandStores);
+    });
+}
+/**
+ * List all Zustand stores
+ */
+export async function listStores(page) {
+    return page.evaluate(inPageListStores);
+}
+/**
+ * Inspect a specific Zustand store
+ */
+export async function inspectStore(page, storeName) {
+    return page.evaluate(inPageInspectStore, storeName);
+}
+/**
+ * Format Zustand store list for CLI output
+ */
+export function formatStoreList(stores) {
+    if (stores.length === 0)
+        return "No Zustand stores found";
+    const lines = ["# Zustand Stores\n"];
+    stores.forEach((name) => lines.push(`- ${name}`));
+    lines.push("\nUse 'vite-browser react store inspect <name>' to view store details");
+    return lines.join("\n");
+}
+/**
+ * Format Zustand store inspection for CLI output
+ */
+export function formatStoreInspection(store) {
+    const lines = [`# Zustand Store: ${store.name}\n`];
+    // State section
+    if (Object.keys(store.state).length > 0) {
+        lines.push("## State");
+        for (const [key, value] of Object.entries(store.state)) {
+            if (typeof value === "function")
+                continue;
+            lines.push(`  ${key}: ${safeJson(value)}`);
+        }
+        lines.push("");
+    }
+    // Actions section
+    if (store.actions.length > 0) {
+        lines.push("## Actions");
+        for (const action of store.actions) {
+            lines.push(`  ${action}()`);
+        }
+        lines.push("");
+    }
+    return lines.join("\n");
+}
+function safeJson(value) {
+    try {
+        const seen = new WeakSet();
+        return JSON.stringify(value, (_, v) => {
+            if (v && typeof v === "object") {
+                if (seen.has(v))
+                    return "[Circular]";
+                seen.add(v);
+            }
+            return v;
+        });
+    }
+    catch {
+        return String(value);
+    }
+}
+// In-page functions
+function inPageListStores() {
+    const win = window;
+    const stores = win.__ZUSTAND_STORES__ || win.zustandStores || {};
+    return Object.keys(stores);
+}
+function inPageInspectStore(storeName) {
+    const win = window;
+    const stores = win.__ZUSTAND_STORES__ || win.zustandStores || {};
+    const store = stores[storeName];
+    if (!store)
+        return null;
+    // Get current state
+    const state = store.getState?.() || store.getInitialState?.() || {};
+    // Extract actions (functions in the state)
+    const actions = [];
+    for (const [key, value] of Object.entries(state)) {
+        if (typeof value === "function") {
+            actions.push(key);
+        }
+    }
+    // Filter out functions from state display
+    const stateWithoutFunctions = {};
+    for (const [key, value] of Object.entries(state)) {
+        if (typeof value !== "function") {
+            stateWithoutFunctions[key] = value;
+        }
+    }
+    return {
+        name: storeName,
+        state: stateWithoutFunctions,
+        actions,
+    };
+}

package/dist/vue/devtools.d.ts

@@ -11,7 +11,7 @@ export interface VueComponent {
     file?: string;
     line?: number;
 }
-export declare function formatComponentTree(apps: any[]): string;
+export declare function formatComponentTree(apps: any[], maxDepth?: number): 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;

package/dist/vue/devtools.js

@@ -3,7 +3,7 @@
  *
  * Uses @vue/devtools-kit to access Vue component tree and state
  */
-export function formatComponentTree(apps) {
+export function formatComponentTree(apps, maxDepth = 50) {
     if (apps.length === 0)
         return "No Vue apps found";
     const output = [];
@@ -23,11 +23,17 @@ export function formatComponentTree(apps) {
                 return;
             if (seen.has(instance))
                 return;
+            if (depth > maxDepth) {
+                output.push(`${"  ".repeat(depth)}[max depth reached]`);
+                return;
+            }
             seen.add(instance);
             const indent = "  ".repeat(depth);
             const name = instance.type?.name || instance.type?.__name || "Anonymous";
             const uid = instance.uid ?? "?";
-            output.push(`${indent}[${uid}] ${name}`);
+            const file = instance.type?.__file;
+            const fileSuffix = file ? ` [${file}]` : "";
+            output.push(`${indent}[${uid}] ${name}${fileSuffix}`);
             const subTree = instance.subTree;
             if (subTree?.component)
                 visit(subTree.component, depth + 1);
@@ -169,6 +175,7 @@ export function formatPiniaStores(pinia, storeName, piniaFromWindow = true) {
         getterNames.push(...Array.from(rawGetters).map(String));
     else if (rawGetters && typeof rawGetters === "object")
         getterNames.push(...Object.keys(rawGetters));
+    const getterSet = new Set(getterNames);
     if (getterNames.length > 0) {
         output.push("## Getters");
         for (const key of getterNames) {
@@ -181,6 +188,24 @@ export function formatPiniaStores(pinia, storeName, piniaFromWindow = true) {
         }
         output.push("");
     }
+    // List actions (own functions on the store, excluding $ prefixed internals)
+    const actionNames = [];
+    if (store && typeof store === "object") {
+        for (const key of Object.keys(store)) {
+            if (key.startsWith("$") || key.startsWith("_"))
+                continue;
+            if (typeof store[key] === "function" && !getterSet.has(key)) {
+                actionNames.push(key);
+            }
+        }
+    }
+    if (actionNames.length > 0) {
+        output.push("## Actions");
+        for (const key of actionNames) {
+            output.push(`  ${key}()`);
+        }
+        output.push("");
+    }
     return output.join("\n");
 }
 export function formatRouterInfo(actualRouter) {
@@ -199,6 +224,16 @@ export function formatRouterInfo(actualRouter) {
         if (currentRoute.query && Object.keys(currentRoute.query).length > 0) {
             output.push(`  Query: ${JSON.stringify(currentRoute.query)}`);
         }
+        if (currentRoute.hash) {
+            output.push(`  Hash: ${currentRoute.hash}`);
+        }
+        if (currentRoute.meta && Object.keys(currentRoute.meta).length > 0) {
+            output.push(`  Meta: ${JSON.stringify(currentRoute.meta)}`);
+        }
+        const matched = currentRoute.matched;
+        if (Array.isArray(matched) && matched.length > 1) {
+            output.push(`  Matched: ${matched.map((r) => r.path || r.name).join(" > ")}`);
+        }
         output.push("");
     }
     const routes = actualRouter.getRoutes?.() || actualRouter.options?.routes || [];
@@ -206,7 +241,10 @@ export function formatRouterInfo(actualRouter) {
         output.push("## All Routes");
         routes.forEach((route) => {
             const routeName = route.name ? ` (${route.name})` : "";
-            output.push(`  ${route.path}${routeName}`);
+            const meta = route.meta && Object.keys(route.meta).length > 0
+                ? ` meta=${JSON.stringify(route.meta)}`
+                : "";
+            output.push(`  ${route.path}${routeName}${meta}`);
         });
     }
     return output.join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@presto1314w/vite-devtools-browser",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "description": "Runtime diagnostics CLI for Vite apps with event-stream correlation, HMR diagnosis, framework inspection, and mapped errors",
   "license": "MIT",
   "keywords": [
@@ -35,6 +35,22 @@
   "bin": {
     "vite-browser": "dist/cli.js"
   },
+  "scripts": {
+    "start": "node --import tsx src/cli.ts",
+    "dev": "tsx src/cli.ts",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc -p tsconfig.build.json",
+    "prepack": "pnpm build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:evals": "vitest run --dir test/evals",
+    "test:evals:ci": "vitest run --dir test/evals --coverage --reporter=default",
+    "test:evals:e2e": "pnpm build && vitest run --config vitest.e2e.config.ts"
+  },
   "dependencies": {
     "playwright": "^1.50.0",
     "source-map-js": "^1.2.1"
@@ -42,22 +58,12 @@
   "devDependencies": {
     "@types/node": "^22.0.0",
     "@vitest/coverage-v8": "^4.0.18",
-    "@vue/devtools-kit": "^7.3.2",
     "@vue/devtools-api": "^7.3.2",
+    "@vue/devtools-kit": "^7.3.2",
     "tsx": "^4.20.6",
     "typescript": "^5.7.0",
+    "vitepress": "^1.6.4",
     "vitest": "^4.0.16"
   },
-  "scripts": {
-    "start": "node --import tsx src/cli.ts",
-    "dev": "tsx src/cli.ts",
-    "typecheck": "tsc --noEmit",
-    "build": "tsc -p tsconfig.build.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "test:evals": "vitest run --dir test/evals",
-    "test:evals:ci": "vitest run --dir test/evals --coverage --reporter=default",
-    "test:evals:e2e": "pnpm build && vitest run --config vitest.e2e.config.ts"
-  }
-}
+  "packageManager": "pnpm@10.29.2"
+}