@presto1314w/vite-devtools-browser 0.3.3 → 0.3.6

package/dist/paths.js

@@ -1,8 +1,50 @@
-import { homedir } from "node:os";
+import { accessSync, constants } from "node:fs";
+import { homedir, tmpdir } from "node:os";
 import { join } from "node:path";
-const isWindows = process.platform === "win32";
-const session = process.env.VITE_BROWSER_SESSION || "default";
-export const socketDir = join(homedir(), ".vite-browser");
+export const isWindows = process.platform === "win32";
+export const isLinux = process.platform === "linux";
+/**
+ * Sanitize a session name for safe use in file paths and pipe names.
+ */
+export function sanitizeSession(name) {
+    return name.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+const session = sanitizeSession(process.env.VITE_BROWSER_SESSION || "default");
+/**
+ * Resolve the base directory for vite-browser runtime files.
+ *
+ * Uses `~/.vite-browser` on all platforms.
+ * Falls back to `$TMPDIR/vite-browser-<uid>` when the home directory
+ * is not writable (e.g. some CI/container environments).
+ */
+export function resolveSocketDir() {
+    try {
+        const home = homedir();
+        if (home) {
+            accessSync(home, constants.W_OK);
+            return join(home, ".vite-browser");
+        }
+    }
+    catch {
+        // homedir() can throw, and sandboxed / CI environments may expose a
+        // home directory that is present but not writable.
+    }
+    // Fallback: use tmpdir scoped by uid to avoid collisions
+    const uid = process.getuid?.() ?? process.pid;
+    return join(tmpdir(), `vite-browser-${uid}`);
+}
+export const socketDir = resolveSocketDir();
+/**
+ * Socket path for the daemon.
+ *
+ * - Windows: uses a named pipe `\\.\pipe\vite-browser-<session>`
+ * - Unix: uses a Unix domain socket file in socketDir
+ *
+ * Note: Unix socket paths have a ~104-char limit on macOS and ~108 on
+ * Linux.  The `~/.vite-browser/<session>.sock` path is well within
+ * that range.  The tmpdir fallback may produce longer paths; we keep
+ * them short by using numeric uid.
+ */
 export const socketPath = isWindows
     ? `\\\\.\\pipe\\vite-browser-${session}`
     : join(socketDir, `${session}.sock`);

package/dist/react/devtools.d.ts

@@ -12,6 +12,16 @@ export type ReactInspection = {
 };
 export declare function snapshot(page: Page): Promise<ReactNode[]>;
 export declare function inspect(page: Page, id: number): Promise<ReactInspection>;
+export declare function getPrimaryRendererInterface(hook: {
+    rendererInterfaces?: Map<unknown, unknown> | {
+        values?: () => IterableIterator<unknown>;
+    };
+} | null | undefined): unknown;
+export declare function findRendererInterfaceForElement(hook: {
+    rendererInterfaces?: Map<unknown, unknown> | {
+        values?: () => IterableIterator<unknown>;
+    };
+} | null | undefined, id: number): unknown;
 export declare function format(nodes: ReactNode[]): string;
 export declare function path(nodes: ReactNode[], id: number): string;
 export declare function typeName(type: number): string;

package/dist/react/devtools.js

@@ -4,6 +4,21 @@ export async function snapshot(page) {
 export async function inspect(page, id) {
     return page.evaluate(inPageInspect, id);
 }
+export function getPrimaryRendererInterface(hook) {
+    const values = hook?.rendererInterfaces?.values?.();
+    return values?.next().value ?? null;
+}
+export function findRendererInterfaceForElement(hook, id) {
+    const values = hook?.rendererInterfaces?.values?.();
+    if (!values)
+        return null;
+    for (const rendererInterface of values) {
+        if (rendererInterface?.hasElementWithId?.(id)) {
+            return rendererInterface;
+        }
+    }
+    return null;
+}
 export function format(nodes) {
     const children = new Map();
     for (const n of nodes) {
@@ -182,7 +197,7 @@ async function inPageSnapshot() {
     const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     if (!hook)
         throw new Error("React DevTools hook not installed");
-    const ri = hook.rendererInterfaces?.get?.(1);
+    const ri = getPrimaryRendererInterface(hook);
     if (!ri)
         throw new Error("no React renderer attached");
     const batches = await collect(ri);
@@ -207,7 +222,8 @@ async function inPageSnapshot() {
 }
 function inPageInspect(id) {
     const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    const ri = hook?.rendererInterfaces?.get?.(1);
+    const ri = findRendererInterfaceForElement(hook, id) ??
+        getPrimaryRendererInterface(hook);
     if (!ri)
         throw new Error("no React renderer attached");
     if (!ri.hasElementWithId(id))

package/dist/react/hook-manager.d.ts

@@ -0,0 +1,29 @@
+/**
+ * React DevTools Hook Management
+ *
+ * Provides health checks and injection helpers for the bundled React DevTools hook.
+ * This removes the dependency on external browser extensions for React inspection.
+ */
+import type { Page } from "playwright";
+/**
+ * Get the hook source code, lazily loaded and cached
+ */
+export declare function getHookSource(): string;
+export interface HookHealthStatus {
+    installed: boolean;
+    hasRenderers: boolean;
+    rendererCount: number;
+    hasFiberSupport: boolean;
+}
+/**
+ * Check the health of the React DevTools hook in the page
+ */
+export declare function checkHookHealth(page: Page): Promise<HookHealthStatus>;
+/**
+ * Inject the React DevTools hook into a page if not already present.
+ */
+export declare function injectHook(page: Page): Promise<boolean>;
+/**
+ * Format hook health status for CLI output
+ */
+export declare function formatHookHealth(status: HookHealthStatus): string;

package/dist/react/hook-manager.js

@@ -0,0 +1,75 @@
+/**
+ * React DevTools Hook Management
+ *
+ * Provides health checks and injection helpers for the bundled React DevTools hook.
+ * This removes the dependency on external browser extensions for React inspection.
+ */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+/** Path to the bundled React DevTools hook */
+const hookPath = resolve(import.meta.dirname, "./hook.js");
+/** Cached hook source code */
+let hookSource = null;
+/**
+ * Get the hook source code, lazily loaded and cached
+ */
+export function getHookSource() {
+    if (!hookSource) {
+        hookSource = readFileSync(hookPath, "utf-8");
+    }
+    return hookSource;
+}
+/**
+ * Check the health of the React DevTools hook in the page
+ */
+export async function checkHookHealth(page) {
+    return page.evaluate(inPageCheckHookHealth);
+}
+/**
+ * Inject the React DevTools hook into a page if not already present.
+ */
+export async function injectHook(page) {
+    const alreadyInstalled = await page.evaluate(() => !!window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+    if (alreadyInstalled)
+        return false;
+    await page.evaluate(getHookSource());
+    return true;
+}
+/**
+ * Format hook health status for CLI output
+ */
+export function formatHookHealth(status) {
+    const lines = ["# React DevTools Hook Status\n"];
+    lines.push(`Installed: ${status.installed ? "✅ Yes" : "❌ No"}`);
+    lines.push(`Fiber support: ${status.hasFiberSupport ? "✅ Yes" : "❌ No"}`);
+    lines.push(`Renderers: ${status.rendererCount}`);
+    lines.push(`Has renderers: ${status.hasRenderers ? "✅ Yes" : "❌ No"}`);
+    if (!status.installed) {
+        lines.push("\n⚠️ Hook not installed. React DevTools features will not work.");
+        lines.push("The hook should be injected before React loads.");
+    }
+    else if (!status.hasRenderers) {
+        lines.push("\n⚠️ No React renderers detected.");
+        lines.push("This page may not be using React, or React hasn't mounted yet.");
+    }
+    return lines.join("\n");
+}
+// In-page functions
+function inPageCheckHookHealth() {
+    const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (!hook) {
+        return {
+            installed: false,
+            hasRenderers: false,
+            rendererCount: 0,
+            hasFiberSupport: false,
+        };
+    }
+    const rendererCount = hook.renderers?.size ?? 0;
+    return {
+        installed: true,
+        hasRenderers: rendererCount > 0,
+        rendererCount,
+        hasFiberSupport: !!hook.supportsFiber,
+    };
+}

package/dist/react/hook.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/react/hook.js

@@ -0,0 +1,255 @@
+/**
+ * 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;
+    let nextRendererId = 1;
+    const hook = {
+        renderers: new Map(),
+        rendererInterfaces: new Map(),
+        supportsFiber: true,
+        // Called by React when a renderer is injected
+        inject(renderer) {
+            const id = nextRendererId++;
+            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) {
+            const rendererInterface = hook.rendererInterfaces.get(id);
+            rendererInterface?.trackFiberRoot(root);
+        },
+        // Called by React on fiber unmount
+        onCommitFiberUnmount(id, fiber) {
+            const rendererInterface = hook.rendererInterfaces.get(id);
+            rendererInterface?.handleCommitFiberUnmount(fiber);
+        },
+        // 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();
+        const fiberParents = new Map();
+        let nextId = 2;
+        return {
+            trackFiberRoot(root) {
+                if (root && root.current) {
+                    fiberRoots.add(root);
+                }
+            },
+            handleCommitFiberUnmount(fiber) {
+                pruneFiber(fiber);
+            },
+            // Flush initial operations to populate component tree
+            flushInitialOperations() {
+                fiberToId.clear();
+                idToFiber.clear();
+                fiberParents.clear();
+                nextId = 2;
+                for (const root of fiberRoots) {
+                    walkTree(root.current, 1);
+                }
+                // 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);
+            fiberParents.set(fiber, parentId);
+            // Walk children
+            let child = fiber.child;
+            while (child) {
+                walkTree(child, id);
+                child = child.sibling;
+            }
+        }
+        function buildOperations() {
+            const strings = [];
+            const nodeOps = [];
+            // Add fiber nodes
+            for (const [id, fiber] of idToFiber) {
+                const name = getDisplayName(fiber);
+                const nameIdx = addString(name);
+                const keyIdx = fiber.key ? addString(String(fiber.key)) : 0;
+                const parentId = fiberParents.get(fiber) || 0;
+                nodeOps.push(1, id, 0, parentId, 0, nameIdx, keyIdx, 0); // ADD_NODE
+            }
+            const stringOps = [];
+            for (const str of strings) {
+                const codePoints = Array.from(str).map(c => c.codePointAt(0));
+                stringOps.push(codePoints.length, ...codePoints);
+            }
+            const ops = [0, 0, stringOps.length, ...stringOps];
+            // Add root operation
+            ops.push(1, 1, 11, 0, 0, 0, 0); // ADD_ROOT
+            ops.push(...nodeOps);
+            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];
+        }
+        function pruneFiber(fiber) {
+            if (!fiber)
+                return;
+            const mappedId = fiberToId.get(fiber);
+            if (mappedId != null) {
+                fiberToId.delete(fiber);
+                idToFiber.delete(mappedId);
+                fiberParents.delete(fiber);
+            }
+            let child = fiber.child;
+            while (child) {
+                pruneFiber(child);
+                child = child.sibling;
+            }
+        }
+    }
+    // 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,38 @@
+/**
+ * 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.
+ */
+import type { Page } from "playwright";
+export interface RenderInteraction {
+    id: number;
+    name: string;
+    timestamp: number;
+}
+export interface RenderInfo {
+    rendererId: number;
+    rootName: string;
+    phase: "mount" | "update" | "nested-update";
+    actualDuration: number | null;
+    baseDuration: number | null;
+    startTime: number | null;
+    commitTime: number;
+    fiberCount: number;
+    interactions: RenderInteraction[];
+}
+export interface RenderTrigger {
+    rendererId: number;
+    rootName: string;
+    reason: "props" | "state" | "hooks" | "parent" | "context" | "unknown";
+    timestamp: number;
+    details?: string;
+}
+export declare function installRenderTracking(page: Page): Promise<void>;
+export declare function getRecentRenders(page: Page, limit?: number): Promise<RenderInfo[]>;
+export declare function getRenderTriggers(page: Page, limit?: number): Promise<RenderTrigger[]>;
+export declare function clearRenderHistory(page: Page): Promise<void>;
+export declare function formatDuration(duration: number | null): string;
+export declare function formatRenderInfo(renders: RenderInfo[]): string;
+export declare function formatRenderTriggers(triggers: RenderTrigger[]): string;
+export declare function analyzeSlowRenders(renders: RenderInfo[]): string;