@presto1314w/vite-devtools-browser 0.3.3 → 0.3.5

package/dist/react/hook.js

@@ -0,0 +1,227 @@
+/**
+ * Minimal React DevTools Global Hook
+ *
+ * This is a minimal implementation of the React DevTools global hook interface
+ * that allows vite-browser to inspect React component trees without requiring
+ * the full React DevTools browser extension.
+ *
+ * Based on the React DevTools architecture (MIT License)
+ * https://github.com/facebook/react/tree/main/packages/react-devtools
+ *
+ * This implementation provides just enough functionality for:
+ * - Component tree inspection
+ * - Fiber root tracking
+ * - Bridge communication for operations
+ */
+(function installReactDevToolsHook() {
+    if (typeof window === "undefined")
+        return;
+    if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__)
+        return;
+    const hook = {
+        renderers: new Map(),
+        rendererInterfaces: new Map(),
+        supportsFiber: true,
+        // Called by React when a renderer is injected
+        inject(renderer) {
+            const id = Math.random();
+            hook.renderers.set(id, renderer);
+            // Create renderer interface for component inspection
+            const rendererInterface = createRendererInterface(renderer);
+            hook.rendererInterfaces.set(id, rendererInterface);
+            return id;
+        },
+        // Called by React on fiber root commits
+        onCommitFiberRoot(id, root, priorityLevel) {
+            // Hook for tracking renders - can be overridden by profiler
+        },
+        // Called by React on fiber unmount
+        onCommitFiberUnmount(id, fiber) {
+            // Hook for tracking unmounts
+        },
+        // Sub-hooks for advanced features
+        sub(event, handler) {
+            // Event subscription (not implemented in minimal version)
+        },
+        // Check if DevTools is installed
+        checkDCE(fn) {
+            // Dead code elimination check - always pass
+            try {
+                fn();
+            }
+            catch (e) {
+                // Ignore
+            }
+        },
+    };
+    function createRendererInterface(renderer) {
+        const fiberRoots = new Set();
+        const fiberToId = new Map();
+        const idToFiber = new Map();
+        let nextId = 1;
+        return {
+            // Flush initial operations to populate component tree
+            flushInitialOperations() {
+                for (const root of fiberRoots) {
+                    walkTree(root.current, null);
+                }
+                // Send operations via message event
+                const operations = buildOperations();
+                window.postMessage({
+                    source: "react-devtools-bridge",
+                    payload: {
+                        event: "operations",
+                        payload: operations,
+                    },
+                }, "*");
+            },
+            // Check if element exists
+            hasElementWithId(id) {
+                return idToFiber.has(id);
+            },
+            // Get display name for element
+            getDisplayNameForElementID(id) {
+                const fiber = idToFiber.get(id);
+                if (!fiber)
+                    return "Unknown";
+                return getDisplayName(fiber);
+            },
+            // Inspect element details
+            inspectElement(requestID, id, path, forceFullData) {
+                const fiber = idToFiber.get(id);
+                if (!fiber)
+                    return { type: "not-found", id };
+                const data = {
+                    id,
+                    type: "full-data",
+                    value: {
+                        key: fiber.key,
+                        props: extractProps(fiber),
+                        state: extractState(fiber),
+                        hooks: extractHooks(fiber),
+                        context: null,
+                        owners: extractOwners(fiber),
+                        source: extractSource(fiber),
+                    },
+                };
+                return data;
+            },
+        };
+        function walkTree(fiber, parentId) {
+            if (!fiber)
+                return;
+            const id = nextId++;
+            fiberToId.set(fiber, id);
+            idToFiber.set(id, fiber);
+            // Walk children
+            let child = fiber.child;
+            while (child) {
+                walkTree(child, id);
+                child = child.sibling;
+            }
+        }
+        function buildOperations() {
+            const ops = [2, 0]; // version, string table size
+            const strings = [];
+            // Add root operation
+            ops.push(1, 1, 11, 0, 0, 0, 0); // ADD_ROOT
+            // Add fiber nodes
+            for (const [id, fiber] of idToFiber) {
+                if (id === 1)
+                    continue; // Skip root
+                const name = getDisplayName(fiber);
+                const nameIdx = addString(name);
+                const keyIdx = fiber.key ? addString(String(fiber.key)) : 0;
+                const parentId = fiberToId.get(fiber.return) || 0;
+                ops.push(1, id, 5, parentId, 0, nameIdx, keyIdx, 0); // ADD_NODE
+            }
+            // Update string table size
+            ops[1] = strings.length;
+            // Insert string table after version
+            const stringOps = [];
+            for (const str of strings) {
+                const codePoints = Array.from(str).map(c => c.codePointAt(0));
+                stringOps.push(codePoints.length, ...codePoints);
+            }
+            ops.splice(2, 0, ...stringOps);
+            return ops;
+            function addString(str) {
+                let idx = strings.indexOf(str);
+                if (idx === -1) {
+                    idx = strings.length;
+                    strings.push(str);
+                }
+                return idx + 1; // 1-indexed
+            }
+        }
+        function getDisplayName(fiber) {
+            if (!fiber)
+                return "Unknown";
+            if (fiber.type && fiber.type.displayName)
+                return fiber.type.displayName;
+            if (fiber.type && fiber.type.name)
+                return fiber.type.name;
+            if (typeof fiber.type === "string")
+                return fiber.type;
+            if (fiber.tag === 11)
+                return "Root";
+            return "Anonymous";
+        }
+        function extractProps(fiber) {
+            if (!fiber.memoizedProps)
+                return null;
+            const props = { ...fiber.memoizedProps };
+            delete props.children; // Don't include children in props
+            return { data: props };
+        }
+        function extractState(fiber) {
+            if (!fiber.memoizedState)
+                return null;
+            return { data: fiber.memoizedState };
+        }
+        function extractHooks(fiber) {
+            if (!fiber.memoizedState)
+                return null;
+            const hooks = [];
+            let hook = fiber.memoizedState;
+            let index = 0;
+            while (hook) {
+                hooks.push({
+                    id: index++,
+                    name: "Hook",
+                    value: hook.memoizedState,
+                    subHooks: [],
+                });
+                hook = hook.next;
+            }
+            return hooks.length > 0 ? { data: hooks } : null;
+        }
+        function extractOwners(fiber) {
+            const owners = [];
+            let current = fiber.return;
+            while (current) {
+                if (current.type) {
+                    owners.push({
+                        displayName: getDisplayName(current),
+                    });
+                }
+                current = current.return;
+            }
+            return owners;
+        }
+        function extractSource(fiber) {
+            if (!fiber._debugSource)
+                return null;
+            const { fileName, lineNumber, columnNumber } = fiber._debugSource;
+            return [null, fileName, lineNumber, columnNumber];
+        }
+    }
+    // Install the hook
+    Object.defineProperty(window, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
+        value: hook,
+        writable: false,
+        enumerable: false,
+        configurable: false,
+    });
+})();
+export {};

package/dist/react/profiler.d.ts

@@ -0,0 +1,55 @@
+/**
+ * React render tracking and profiling
+ *
+ * Tracks component renders, durations, and trigger reasons using React DevTools Profiler API.
+ */
+import type { Page } from "playwright";
+export interface RenderInfo {
+    componentId: number;
+    componentName: string;
+    phase: "mount" | "update" | "nested-update";
+    actualDuration: number;
+    baseDuration: number;
+    startTime: number;
+    commitTime: number;
+    interactions: Set<{
+        id: number;
+        name: string;
+        timestamp: number;
+    }>;
+}
+export interface RenderTrigger {
+    componentId: number;
+    componentName: string;
+    reason: "props" | "state" | "hooks" | "parent" | "context" | "unknown";
+    timestamp: number;
+    details?: string;
+}
+/**
+ * Install render tracking in the page
+ */
+export declare function installRenderTracking(page: Page): Promise<void>;
+/**
+ * Get recent render events
+ */
+export declare function getRecentRenders(page: Page, limit?: number): Promise<RenderInfo[]>;
+/**
+ * Get render triggers (why components re-rendered)
+ */
+export declare function getRenderTriggers(page: Page, limit?: number): Promise<RenderTrigger[]>;
+/**
+ * Clear render history
+ */
+export declare function clearRenderHistory(page: Page): Promise<void>;
+/**
+ * Format render info for CLI output
+ */
+export declare function formatRenderInfo(renders: RenderInfo[]): string;
+/**
+ * Format render triggers for CLI output
+ */
+export declare function formatRenderTriggers(triggers: RenderTrigger[]): string;
+/**
+ * Analyze slow renders (> 16ms)
+ */
+export declare function analyzeSlowRenders(renders: RenderInfo[]): string;

package/dist/react/profiler.js

@@ -0,0 +1,166 @@
+/**
+ * React render tracking and profiling
+ *
+ * Tracks component renders, durations, and trigger reasons using React DevTools Profiler API.
+ */
+/**
+ * Install render tracking in the page
+ */
+export async function installRenderTracking(page) {
+    await page.evaluate(inPageInstallRenderTracking);
+}
+/**
+ * Get recent render events
+ */
+export async function getRecentRenders(page, limit = 50) {
+    return page.evaluate(inPageGetRecentRenders, limit);
+}
+/**
+ * Get render triggers (why components re-rendered)
+ */
+export async function getRenderTriggers(page, limit = 50) {
+    return page.evaluate(inPageGetRenderTriggers, limit);
+}
+/**
+ * Clear render history
+ */
+export async function clearRenderHistory(page) {
+    await page.evaluate(inPageClearRenderHistory);
+}
+/**
+ * Format render info for CLI output
+ */
+export function formatRenderInfo(renders) {
+    if (renders.length === 0)
+        return "No renders recorded";
+    const lines = ["# React Renders\n"];
+    for (const render of renders) {
+        const phase = render.phase === "mount" ? "MOUNT" : render.phase === "update" ? "UPDATE" : "NESTED";
+        const duration = render.actualDuration.toFixed(2);
+        const slow = render.actualDuration > 16 ? " ⚠️ SLOW" : "";
+        lines.push(`[${phase}] ${render.componentName} (${duration}ms)${slow}`);
+        if (render.interactions.size > 0) {
+            const interactions = Array.from(render.interactions)
+                .map((i) => i.name)
+                .join(", ");
+            lines.push(`  Interactions: ${interactions}`);
+        }
+    }
+    return lines.join("\n");
+}
+/**
+ * Format render triggers for CLI output
+ */
+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.componentName}${details}`);
+    }
+    return lines.join("\n");
+}
+/**
+ * Analyze slow renders (> 16ms)
+ */
+export function analyzeSlowRenders(renders) {
+    const slowRenders = renders.filter((r) => r.actualDuration > 16);
+    if (slowRenders.length === 0) {
+        return "No slow renders detected (all renders < 16ms)";
+    }
+    const lines = [
+        "# Slow Renders Analysis\n",
+        `Found ${slowRenders.length} slow render(s) (> 16ms)\n`,
+    ];
+    // Group by component
+    const byComponent = new Map();
+    for (const render of slowRenders) {
+        const list = byComponent.get(render.componentName) || [];
+        list.push(render);
+        byComponent.set(render.componentName, list);
+    }
+    // Sort by total time
+    const sorted = Array.from(byComponent.entries()).sort(([, a], [, b]) => {
+        const totalA = a.reduce((sum, r) => sum + r.actualDuration, 0);
+        const totalB = b.reduce((sum, r) => sum + r.actualDuration, 0);
+        return totalB - totalA;
+    });
+    for (const [name, renders] of sorted) {
+        const count = renders.length;
+        const total = renders.reduce((sum, r) => sum + r.actualDuration, 0);
+        const avg = total / count;
+        const max = Math.max(...renders.map((r) => r.actualDuration));
+        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");
+}
+// In-page functions
+function inPageInstallRenderTracking() {
+    const win = window;
+    // Initialize storage
+    win.__REACT_RENDER_HISTORY__ = win.__REACT_RENDER_HISTORY__ || [];
+    win.__REACT_RENDER_TRIGGERS__ = win.__REACT_RENDER_TRIGGERS__ || [];
+    // Hook into React DevTools if available
+    const hook = win.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (!hook) {
+        console.warn("React DevTools hook not found, render tracking limited");
+        return;
+    }
+    // Listen for commit events
+    if (!win.__REACT_RENDER_TRACKING_INSTALLED__) {
+        win.__REACT_RENDER_TRACKING_INSTALLED__ = true;
+        // Track renders via Profiler API
+        const originalOnCommitFiberRoot = hook.onCommitFiberRoot;
+        hook.onCommitFiberRoot = function (id, root, priorityLevel) {
+            try {
+                // Record render info
+                const renderInfo = {
+                    componentId: id,
+                    componentName: root?.current?.type?.name || "Root",
+                    phase: root?.current?.mode === 0 ? "mount" : "update",
+                    actualDuration: 0,
+                    baseDuration: 0,
+                    startTime: Date.now(),
+                    commitTime: Date.now(),
+                    interactions: new Set(),
+                };
+                win.__REACT_RENDER_HISTORY__.push(renderInfo);
+                // Keep only last 100 renders
+                if (win.__REACT_RENDER_HISTORY__.length > 100) {
+                    win.__REACT_RENDER_HISTORY__.shift();
+                }
+            }
+            catch (e) {
+                // Ignore errors in tracking
+            }
+            if (originalOnCommitFiberRoot) {
+                return originalOnCommitFiberRoot.call(this, id, root, priorityLevel);
+            }
+        };
+    }
+}
+function inPageGetRecentRenders(limit) {
+    const win = window;
+    const history = win.__REACT_RENDER_HISTORY__ || [];
+    return history.slice(-limit).map((r) => ({
+        ...r,
+        interactions: Array.from(r.interactions || []),
+    }));
+}
+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__ = [];
+}

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