react-debug-updates 0.1.9 → 0.1.10

package/README.md

@@ -14,11 +14,11 @@ So I wrote this — a plug-and-play one-liner that gives you visual highlight ov
 
 ## How it works
 
-Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__` to intercept every React commit. Uses the same fiber tree diffing approach as React DevTools to detect which components actually re-rendered. No React DevTools extension required. No wrappers, no HOCs, no code changes — just call `monitor()` and you get:
+Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__` to intercept every React commit. Uses the same fiber tree diffing approach as React DevTools to detect which components actually re-rendered. No React DevTools extension required. No wrappers, no HOCs, no code changes — just call `startReactUpdatesMonitor()` and you get:
 
-- **Visual overlays** — highlight boxes on re-rendered DOM nodes with a heat-map color scale (blue → red as render count increases)
+- **Visual highlights** — highlight boxes on re-rendered DOM nodes with a heat-map color scale (blue → red as render count increases)
 - **Console logging** — grouped, color-coded re-render reports with component tree paths and render durations
-- **Cause detection** — pinpoint *which* `useState`, `useReducer`, `useSyncExternalStore`, or `useContext` hook triggered each re-render, with previous→next values
+- **Update reasons** — pinpoint *which* `useState`, `useReducer`, `useSyncExternalStore`, or `useContext` hook triggered each re-render, with previous→next values
 
 ## Install
 
@@ -32,80 +32,61 @@ pnpm add react-debug-updates
 
 ## Quick start
 
-Import and call `monitor` **before** React renders anything — ideally at the very top of your entry point. This ensures the hook is in place before the first commit.
+Import and call `startReactUpdatesMonitor` **before** React renders anything — ideally at the very top of your entry point. This ensures the hook is in place before the first commit.
 
 ```ts
-import { monitor } from "react-debug-updates";
+import { startReactUpdatesMonitor } from "react-debug-updates";
 
-// One-liner — overlays + console logging out of the box
-const updates = monitor();
+// One-liner — visual highlights out of the box
+const stop = startReactUpdatesMonitor();
 
 // Later, to clean up:
-updates?.stop();
+stop?.();
 ```
 
 ### Dev-only guard
 
 ```ts
 if (process.env.NODE_ENV === "development") {
-  const { monitor } = await import("react-debug-updates");
-  monitor();
+  const { startReactUpdatesMonitor } = await import("react-debug-updates");
+  startReactUpdatesMonitor();
 }
 ```
 
 ### With options
 
 ```ts
-monitor({
-  showCauses: true,
-  opacity: 0.5,
-  showLabels: false,
-  silent: true, // overlays only, no console output
+startReactUpdatesMonitor({
+  reasonOfUpdate: true,
+  logToConsole: true,
+  highlightOpacity: 0.5,
+  highlightShowLabels: false,
 });
 ```
 
 ## Requirements
 
 - A **React dev build** (which automatically creates `__REACT_DEVTOOLS_GLOBAL_HOOK__`) — no browser extension needed
-- For `showCauses` and render durations: React must be in **dev mode** (provides `_debugHookTypes` and `actualDuration` on fibers)
+- For `reasonOfUpdate` and render durations: React must be in **dev mode** (provides `_debugHookTypes` and `actualDuration` on fibers)
 
 ## API
 
-### `monitor(options?): UpdateMonitor | null`
+### `startReactUpdatesMonitor(options?): (() => void) | null`
 
-Returns an `UpdateMonitor` handle, or `null` if the DevTools hook is not available.
+Returns a `stop` function to unhook from React and remove all overlays, or `null` if the DevTools hook is not available.
 
 #### Options
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
 | `mode` | `"self-triggered" \| "all"` | `"self-triggered"` | `"self-triggered"` tracks only components whose own state changed. `"all"` includes children swept by parent updates |
-| `showCauses` | `boolean` | `false` | Detect and display why each component re-rendered |
-| `silent` | `boolean` | `false` | Suppress console output |
-| `overlay` | `boolean` | `true` | Enable visual highlight overlays |
-| `showLabels` | `boolean` | `true` | Show text labels (name, count, duration, cause) above overlays |
-| `opacity` | `number` | `0.3` | Peak opacity of overlay highlights (0–1) |
-| `flushInterval` | `number` | `250` | Milliseconds between overlay flush cycles |
-| `animationDuration` | `number` | `1200` | Overlay fade-out animation duration (ms) |
-| `bufferSize` | `number` | `500` | Max entries kept in the ring buffer |
-| `filter` | `(entry: RenderEntry) => boolean` | — | Return `false` to skip an entry |
-
-### `UpdateMonitor`
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `entries` | `RenderEntry[]` | Ring buffer of recorded re-render entries |
-| `stop` | `() => void` | Unhook from React and remove all overlays |
-
-### `RenderEntry`
-
-| Property | Type | Description |
-| --- | --- | --- |
-| `component` | `string` | Component display name |
-| `path` | `string` | Ancestor component path (e.g. `"App → Layout → Sidebar"`) |
-| `duration` | `number` | Render duration in ms (requires React dev mode) |
-| `timestamp` | `number` | `performance.now()` when the entry was recorded |
-| `causes` | `UpdateCause[]` | Why this component re-rendered (requires `showCauses`) |
+| `reasonOfUpdate` | `boolean` | `false` | Detect and display why each component re-rendered |
+| `logToConsole` | `boolean` | `false` | Log re-renders to the console |
+| `highlight` | `boolean` | `true` | Enable visual highlight overlays |
+| `highlightShowLabels` | `boolean` | `true` | Show text labels (name, count, duration, cause) above highlights |
+| `highlightOpacity` | `number` | `0.3` | Peak opacity of highlight overlays (0–1) |
+| `highlightFlushInterval` | `number` | `250` | Milliseconds between highlight flush cycles |
+| `highlightAnimationDuration` | `number` | `1200` | Highlight fade-out animation duration (ms) |
 
 ### `UpdateCause`
 
@@ -129,11 +110,11 @@ Returns an `UpdateMonitor` handle, or `null` if the DevTools hook is not availab
     ↳ useContext changed
 ```
 
-## Visual overlays
+## Visual highlights
 
 Re-rendered components get a highlight box that fades out. The color shifts from blue to red as the same node re-renders repeatedly within a flush window — making "hot" components visually obvious.
 
-Each overlay label shows: `ComponentName ×count duration (cause)`
+Each highlight label shows: `ComponentName ×count duration (cause)`
 
 ## License
 

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { monitor } from "./monitor.js";
-export type { MonitorOptions, UpdateMonitor, RenderEntry, UpdateCause, } from "./types.js";
+export { startReactUpdatesMonitor } from "./monitor.js";
+export type { MonitorOptions, UpdateCause } from "./types.js";

package/dist/monitor.d.ts

@@ -1,14 +1,15 @@
-import type { MonitorOptions, UpdateMonitor } from "./types.js";
+import type { MonitorOptions } from "./types.js";
 /**
  * Start monitoring React re-renders.
  *
  * Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot` to intercept
- * every React commit. Records re-render entries, optionally logs them to the
- * console, and optionally shows visual highlight overlays on re-rendered DOM nodes.
+ * every React commit. Shows visual highlight overlays on re-rendered DOM nodes
+ * and optionally logs re-renders to the console.
  *
  * Call this **before** React renders anything — ideally at the very top of
  * your entry point.
  *
- * Returns an `UpdateMonitor` handle, or `null` if the DevTools hook is not found.
+ * Returns a `stop` function to unhook and clean up, or `null` if called
+ * in a non-browser environment (e.g. SSR).
  */
-export declare function monitor(options?: MonitorOptions): UpdateMonitor | null;
+export declare function startReactUpdatesMonitor({ logToConsole, highlight, mode, reasonOfUpdate, highlightFlushInterval, highlightAnimationDuration, highlightShowLabels, highlightOpacity, }?: MonitorOptions): (() => void) | null;

package/dist/react-debug-updates.cjs

@@ -405,28 +405,44 @@ function createHighlighter(config) {
   }
   return { push, dispose };
 }
-function monitor(options = {}) {
-  const {
-    silent = false,
-    bufferSize = 500,
-    filter,
-    overlay = true,
-    mode = "self-triggered",
-    showCauses = false,
-    flushInterval = 250,
-    animationDuration = 1200,
-    showLabels = true,
-    opacity = 0.3
-  } = options;
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (!hook) {
-    console.warn(
-      "[react-debug-updates] __REACT_DEVTOOLS_GLOBAL_HOOK__ not found. Make sure React DevTools or a dev build of React is active."
-    );
-    return null;
+function ensureDevToolsHook(win) {
+  const global = win;
+  if (!global.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+      supportsFiber: true,
+      inject() {
+        return 1;
+      },
+      onCommitFiberRoot() {
+      },
+      onCommitFiberUnmount() {
+      },
+      onPostCommitFiberRoot() {
+      },
+      checkDCE() {
+      }
+    };
   }
-  const highlighter = overlay ? createHighlighter({ flushInterval, animationDuration, showLabels, opacity }) : null;
-  const entries = [];
+  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+}
+function startReactUpdatesMonitor({
+  logToConsole = false,
+  highlight = true,
+  mode = "self-triggered",
+  reasonOfUpdate = false,
+  highlightFlushInterval = 250,
+  highlightAnimationDuration = 1200,
+  highlightShowLabels = true,
+  highlightOpacity = 0.3
+} = {}) {
+  if (typeof window === "undefined") return null;
+  const hook = ensureDevToolsHook(window);
+  const highlighter = highlight ? createHighlighter({
+    flushInterval: highlightFlushInterval,
+    animationDuration: highlightAnimationDuration,
+    showLabels: highlightShowLabels,
+    opacity: highlightOpacity
+  }) : null;
   const previousOnCommit = hook.onCommitFiberRoot.bind(hook);
   hook.onCommitFiberRoot = (rendererID, root, priorityLevel) => {
     previousOnCommit(rendererID, root, priorityLevel);
@@ -437,43 +453,32 @@ function monitor(options = {}) {
       const { fiber, depth } = detectedRenders[i];
       const name = getComponentName(fiber);
       if (!name) continue;
-      const highlightEntry = {
+      const entry = {
         component: name,
         path: getFiberPath(fiber),
         duration: fiber.actualDuration ?? 0,
         depth,
         domNode: findNearestDOMNode(fiber),
-        causes: showCauses ? detectCauses(fiber) : []
+        causes: reasonOfUpdate ? detectCauses(fiber) : []
       };
-      const renderEntry = {
-        component: highlightEntry.component,
-        path: highlightEntry.path,
-        duration: highlightEntry.duration,
-        timestamp: performance.now(),
-        causes: highlightEntry.causes
-      };
-      if (filter && !filter(renderEntry)) continue;
-      if (entries.length >= bufferSize) entries.shift();
-      entries.push(renderEntry);
-      highlightEntries.push(highlightEntry);
-      highlighter == null ? void 0 : highlighter.push(highlightEntry);
+      highlightEntries.push(entry);
+      highlighter == null ? void 0 : highlighter.push(entry);
     }
-    if (!silent) {
-      logRerendersToConsole(highlightEntries, showCauses);
+    if (logToConsole) {
+      logRerendersToConsole(highlightEntries, reasonOfUpdate);
     }
   };
-  const stop = () => {
-    hook.onCommitFiberRoot = previousOnCommit;
-    highlighter == null ? void 0 : highlighter.dispose();
-    disposeAllOverlays();
-  };
-  if (!silent) {
+  if (logToConsole) {
     console.log(
       "%c⚛ react-debug-updates attached",
       "color: #61dafb; font-weight: bold"
     );
   }
-  return { entries, stop };
+  return () => {
+    hook.onCommitFiberRoot = previousOnCommit;
+    highlighter == null ? void 0 : highlighter.dispose();
+    disposeAllOverlays();
+  };
 }
-exports.monitor = monitor;
+exports.startReactUpdatesMonitor = startReactUpdatesMonitor;
 //# sourceMappingURL=react-debug-updates.cjs.map

package/dist/react-debug-updates.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"react-debug-updates.cjs","sources":["../src/fiber.ts","../src/causes.ts","../src/format.ts","../src/overlay.ts","../src/highlights.ts","../src/monitor.ts"],"sourcesContent":["import type { Fiber, DetectedRender } from \"./types.js\";\n\n// ────────────────────────────────────────────\n// Fiber tag constants\n// ────────────────────────────────────────────\n\nexport const FiberTag = {\n  FunctionComponent: 0,\n  ClassComponent: 1,\n  HostComponent: 5,\n  ForwardRef: 11,\n  SimpleMemoComponent: 15,\n  MemoComponent: 14,\n} as const;\n\n// Component tags we report as re-renders.\n// MemoComponent (14) is excluded to avoid double-reporting — it's a wrapper\n// fiber around the inner component. The inner component (FunctionComponent,\n// ForwardRef, or SimpleMemoComponent) has its own PerformedWork flag and\n// will be reported correctly on its own.\nconst COMPONENT_TAGS = new Set<number>([\n  FiberTag.FunctionComponent,\n  FiberTag.ClassComponent,\n  FiberTag.ForwardRef,\n  FiberTag.SimpleMemoComponent,\n]);\n\nconst PerformedWork = 0b0000001;\n\n// ────────────────────────────────────────────\n// Fiber tree helpers\n// ────────────────────────────────────────────\n\nexport function getComponentName(fiber: Fiber): string | null {\n  const { type } = fiber;\n  if (!type || typeof type === \"string\") return null;\n  return type.displayName ?? type.name ?? null;\n}\n\nfunction isHTMLElement(value: unknown): value is HTMLElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    (value as Node).nodeType === 1 &&\n    typeof (value as HTMLElement).getBoundingClientRect === \"function\"\n  );\n}\n\nexport function findNearestDOMNode(fiber: Fiber): HTMLElement | null {\n  if (fiber.tag === FiberTag.HostComponent && isHTMLElement(fiber.stateNode)) {\n    return fiber.stateNode;\n  }\n  let child: Fiber | null = fiber.child;\n  while (child) {\n    const found = findNearestDOMNode(child);\n    if (found) return found;\n    child = child.sibling;\n  }\n  return null;\n}\n\nexport function getFiberPath(fiber: Fiber, maxDepth = 5): string {\n  const parts: string[] = [];\n  let current: Fiber | null = fiber.return;\n  let depth = 0;\n  while (current && depth < maxDepth) {\n    const name = getComponentName(current);\n    if (name) parts.unshift(name);\n    current = current.return;\n    depth++;\n  }\n  return parts.length ? parts.join(\" → \") : \"(root)\";\n}\n\n// ────────────────────────────────────────────\n// Self-triggered detection\n// ────────────────────────────────────────────\n\nfunction isSelfTriggered(fiber: Fiber): boolean {\n  const alternate = fiber.alternate;\n  if (!alternate) return false;\n  return fiber.memoizedProps === alternate.memoizedProps;\n}\n\n// ────────────────────────────────────────────\n// didFiberRender — mirrors React DevTools\n// ────────────────────────────────────────────\n//\n// See: react-devtools-shared/src/backend/fiber/shared/DevToolsFiberChangeDetection.js\n//\n// For component fibers (function, class, memo, forwardRef), React sets the\n// PerformedWork flag (bit 0) only when user code actually executes.\n// createWorkInProgress resets flags to NoFlags, so PerformedWork on a\n// work-in-progress fiber is always fresh — never stale from a prior commit.\n//\n// This check must only be called AFTER confirming prevFiber !== nextFiber\n// (i.e. the fiber was actually processed, not a bailed-out subtree).\n\nfunction didFiberRender(nextFiber: Fiber): boolean {\n  return (nextFiber.flags & PerformedWork) === PerformedWork;\n}\n\n// ────────────────────────────────────────────\n// Detect which components re-rendered in a commit\n// ────────────────────────────────────────────\n//\n// Mirrors React DevTools' updateFiberRecursively / updateChildrenRecursively.\n//\n// React double-buffers fibers. After a commit, root.current is the committed\n// tree and root.current.alternate is the previous tree. We walk both in\n// parallel. At each level, if prevChild and nextChild are the same object,\n// React bailed out that entire subtree (via cloneChildFibers) — we skip it.\n// Otherwise, we use nextChild.alternate as the previous fiber and check\n// didFiberRender (PerformedWork) to see if user code actually ran.\n//\n// Returns lightweight DetectedRender objects — just the fiber and its depth.\n// DOM lookup, cause detection, and formatting are the caller's responsibility.\n\nexport function detectRenders(\n  root: Fiber,\n  mode: \"self-triggered\" | \"all\",\n): DetectedRender[] {\n  const results: DetectedRender[] = [];\n  const selfTriggeredOnly = mode === \"self-triggered\";\n\n  // The alternate of the committed root is the previous tree's root.\n  // On initial mount this is null — nothing to report.\n  const previousRoot = root.alternate;\n  if (!previousRoot) return results;\n\n  function walk(\n    nextFiber: Fiber,\n    previousFiber: Fiber | null,\n    depth: number,\n  ) {\n    // ── Check this fiber ──\n    if (\n      COMPONENT_TAGS.has(nextFiber.tag) &&\n      previousFiber !== null &&\n      previousFiber !== nextFiber && // same object → bailed-out subtree\n      didFiberRender(nextFiber) &&\n      (!selfTriggeredOnly || isSelfTriggered(nextFiber))\n    ) {\n      results.push({ fiber: nextFiber, depth });\n    }\n\n    // ── Walk children, matching with previous tree ──\n    let nextChild = nextFiber.child;\n    let previousChildAtSameIndex = previousFiber?.child ?? null;\n\n    while (nextChild) {\n      let matchedPrevious: Fiber | null;\n\n      if (previousChildAtSameIndex === nextChild) {\n        // Same object identity — React shared this fiber via cloneChildFibers.\n        // The entire subtree was bailed out; passing the same object as both\n        // prev and next causes the prevFiber !== nextFiber guard to skip it.\n        matchedPrevious = nextChild;\n      } else {\n        // Different object — this fiber was processed. The alternate is the\n        // corresponding fiber from the previous tree.\n        matchedPrevious = nextChild.alternate;\n      }\n\n      walk(nextChild, matchedPrevious, depth + 1);\n\n      nextChild = nextChild.sibling;\n      previousChildAtSameIndex = previousChildAtSameIndex?.sibling ?? null;\n    }\n  }\n\n  walk(root, previousRoot, 0);\n  return results;\n}\n","import type { Fiber, HookNode, UpdateCause } from \"./types.js\";\nimport { FiberTag } from \"./fiber.js\";\n\n// ────────────────────────────────────────────\n// Update cause detection\n// ────────────────────────────────────────────\n//\n// For function components, React stores hooks as a linked list on\n// fiber.memoizedState. In dev builds, _debugHookTypes lists hook names\n// in call order. We walk both in parallel, comparing memoizedState\n// on each node to find which hook's state actually changed.\n//\n// Caveat: useContext does NOT create a linked list node, so we skip it\n// when advancing the pointer, and detect it by elimination.\n\n/**\n * Hooks whose memoizedState changing can trigger a re-render.\n * We only report these — useEffect/useMemo/etc. don't cause re-renders.\n */\nconst STATE_HOOKS = new Set([\n  \"useState\",\n  \"useReducer\",\n  \"useSyncExternalStore\",\n]);\n\n/**\n * Hooks that do NOT create a node in the memoizedState linked list.\n * Currently only useContext — every other hook allocates a node.\n */\nconst HOOKS_WITHOUT_NODE = new Set([\"useContext\"]);\n\nexport function detectCauses(fiber: Fiber): UpdateCause[] {\n  const alternate = fiber.alternate;\n  if (!alternate) return [];\n\n  const causes: UpdateCause[] = [];\n\n  // ── Props changed (parent re-rendered us with new props) ──\n  if (fiber.memoizedProps !== alternate.memoizedProps) {\n    causes.push({ kind: \"props\" });\n  }\n\n  // ── Class component ──\n  if (fiber.tag === FiberTag.ClassComponent) {\n    if (fiber.memoizedState !== alternate.memoizedState) {\n      causes.push({ kind: \"class-state\" });\n    }\n    return causes;\n  }\n\n  // ── Function component hooks ──\n  const hookTypes = fiber._debugHookTypes;\n\n  if (!hookTypes) {\n    // No debug info (prod build) — best effort\n    if (fiber.memoizedState !== alternate.memoizedState) {\n      causes.push({ kind: \"unknown\" });\n    }\n    return causes;\n  }\n\n  let currentNode = fiber.memoizedState as HookNode | null;\n  let previousNode = alternate.memoizedState as HookNode | null;\n  let hasContextHook = false;\n  let anyStateHookChanged = false;\n\n  for (let i = 0; i < hookTypes.length; i++) {\n    const type = hookTypes[i];\n\n    // useContext has no linked list node — skip pointer advance\n    if (HOOKS_WITHOUT_NODE.has(type)) {\n      if (type === \"useContext\") hasContextHook = true;\n      continue;\n    }\n\n    if (STATE_HOOKS.has(type) && currentNode && previousNode) {\n      if (!Object.is(currentNode.memoizedState, previousNode.memoizedState)) {\n        anyStateHookChanged = true;\n        causes.push({\n          kind: \"hook\",\n          hookIndex: i,\n          hookType: type,\n          previousValue: previousNode.memoizedState,\n          nextValue: currentNode.memoizedState,\n        });\n      }\n    }\n\n    currentNode = currentNode?.next ?? null;\n    previousNode = previousNode?.next ?? null;\n  }\n\n  // If no state hook changed but component is self-triggered and has\n  // useContext → the context value must have changed.\n  if (\n    hasContextHook &&\n    !anyStateHookChanged &&\n    fiber.memoizedProps === alternate.memoizedProps\n  ) {\n    causes.push({ kind: \"hook\", hookType: \"useContext\" });\n  }\n\n  // If still nothing and self-triggered, mark unknown\n  if (causes.length === 0 && fiber.memoizedProps === alternate.memoizedProps) {\n    causes.push({ kind: \"unknown\" });\n  }\n\n  return causes;\n}\n","import type { HighlightEntry, UpdateCause } from \"./types.js\";\n\n// ────────────────────────────────────────────\n// Value formatting\n// ────────────────────────────────────────────\n\nexport function formatValue(value: unknown, maxLength = 50): string {\n  if (value === null) return \"null\";\n  if (value === undefined) return \"undefined\";\n  if (typeof value === \"boolean\") return String(value);\n  if (typeof value === \"number\") return String(value);\n  if (typeof value === \"function\")\n    return `ƒ ${(value as { name?: string }).name || \"anonymous\"}`;\n\n  if (typeof value === \"string\") {\n    const truncated =\n      value.length > maxLength ? value.slice(0, maxLength) + \"…\" : value;\n    return JSON.stringify(truncated);\n  }\n\n  if (Array.isArray(value)) return `Array(${value.length})`;\n\n  if (typeof value === \"object\") {\n    const name = (value as object).constructor?.name;\n    if (name && name !== \"Object\") return name;\n    const keys = Object.keys(value as object);\n    if (keys.length <= 3) return `{ ${keys.join(\", \")} }`;\n    return `{ ${keys.slice(0, 3).join(\", \")}, … }`;\n  }\n\n  return String(value);\n}\n\n// ────────────────────────────────────────────\n// Cause formatting\n// ────────────────────────────────────────────\n\n/** Compact summary for overlay labels. */\nexport function formatCausesShort(causes: UpdateCause[]): string {\n  if (causes.length === 0) return \"\";\n\n  const parts: string[] = [];\n  for (const cause of causes) {\n    if (cause.kind === \"props\") {\n      parts.push(\"props\");\n    } else if (cause.kind === \"class-state\") {\n      parts.push(\"state\");\n    } else if (cause.kind === \"hook\" && cause.hookType) {\n      const indexSuffix = cause.hookIndex != null ? `[${cause.hookIndex}]` : \"\";\n      parts.push(`${cause.hookType}${indexSuffix}`);\n    } else {\n      parts.push(\"?\");\n    }\n  }\n\n  return parts.join(\", \");\n}\n\n/** Detailed lines for console output. */\nexport function formatCausesConsole(causes: UpdateCause[]): string[] {\n  const lines: string[] = [];\n\n  for (const cause of causes) {\n    if (cause.kind === \"props\") {\n      lines.push(\"  ↳ props changed (parent re-rendered)\");\n    } else if (cause.kind === \"class-state\") {\n      lines.push(\"  ↳ class state changed\");\n    } else if (cause.kind === \"hook\" && cause.hookType) {\n      const indexSuffix =\n        cause.hookIndex != null ? `[${cause.hookIndex}]` : \"\";\n      const name = `${cause.hookType}${indexSuffix}`;\n\n      if (cause.previousValue !== undefined && cause.nextValue !== undefined) {\n        lines.push(\n          `  ↳ ${name}: ${formatValue(cause.previousValue)} → ${formatValue(cause.nextValue)}`,\n        );\n      } else {\n        lines.push(`  ↳ ${name} changed`);\n      }\n    } else {\n      lines.push(\"  ↳ unknown cause\");\n    }\n  }\n\n  return lines;\n}\n\n// ────────────────────────────────────────────\n// Console output\n// ────────────────────────────────────────────\n\n/** Log re-renders as a collapsed console group. */\nexport function logRerendersToConsole(\n  entries: HighlightEntry[],\n  showCauses: boolean,\n) {\n  if (entries.length === 0) return;\n\n  console.groupCollapsed(\n    `%c⚛ ${entries.length} re-render${entries.length > 1 ? \"s\" : \"\"}`,\n    \"color: #61dafb; font-weight: bold\",\n  );\n\n  for (let i = 0; i < entries.length; i++) {\n    const entry = entries[i];\n    const durationText =\n      entry.duration > 0 ? ` (${entry.duration.toFixed(2)}ms)` : \"\";\n    console.log(\n      `%c${entry.component}%c ${entry.path}${durationText}`,\n      \"color: #e8e82e; font-weight: bold\",\n      \"color: #888\",\n    );\n\n    if (showCauses && entry.causes.length > 0) {\n      const lines = formatCausesConsole(entry.causes);\n      for (const line of lines) {\n        console.log(`%c${line}`, \"color: #aaa\");\n      }\n    }\n  }\n\n  console.groupEnd();\n}\n","// ────────────────────────────────────────────\n// Per-window overlay infrastructure\n// ────────────────────────────────────────────\n//\n// Performance:\n//  - Overlay elements pooled per window, reused via animationend\n//  - Single CSS @keyframes per window, no JS timers per element\n\nconst ANIMATION_NAME = \"__rdu-fade\";\n\nconst injectedWindows = new WeakSet<Window>();\n\nfunction ensureStylesheet(win: Window) {\n  if (injectedWindows.has(win)) return;\n  injectedWindows.add(win);\n\n  const style = win.document.createElement(\"style\");\n  style.textContent = `\n    @keyframes ${ANIMATION_NAME} {\n      0%   { opacity: 0; }\n      8%   { opacity: var(--rdu-opacity, 1); }\n      40%  { opacity: var(--rdu-opacity, 1); }\n      100% { opacity: 0; }\n    }\n    .${ANIMATION_NAME}-box {\n      position: fixed;\n      pointer-events: none;\n      box-sizing: border-box;\n      border-radius: 3px;\n      opacity: 0;\n      will-change: opacity;\n    }\n    .${ANIMATION_NAME}-label {\n      position: absolute;\n      top: -18px;\n      left: -1px;\n      font: 10px/16px ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n      padding: 0 4px;\n      color: #fff;\n      border-radius: 2px 2px 0 0;\n      white-space: nowrap;\n      pointer-events: none;\n    }\n  `;\n  win.document.head.appendChild(style);\n}\n\n// ────────────────────────────────────────────\n// Overlay root container\n// ────────────────────────────────────────────\n\nconst overlayRoots = new WeakMap<Window, HTMLDivElement>();\n\nfunction getOverlayRoot(win: Window): HTMLDivElement | null {\n  if (win.closed) return null;\n\n  const existing = overlayRoots.get(win);\n  if (existing?.isConnected) return existing;\n\n  ensureStylesheet(win);\n\n  const root = win.document.createElement(\"div\");\n  root.id = \"__react-debug-updates\";\n  Object.assign(root.style, {\n    position: \"fixed\",\n    top: \"0\",\n    left: \"0\",\n    width: \"0\",\n    height: \"0\",\n    overflow: \"visible\",\n    pointerEvents: \"none\",\n    zIndex: \"2147483647\",\n  } satisfies Partial<CSSStyleDeclaration>);\n  win.document.body.appendChild(root);\n\n  overlayRoots.set(win, root);\n  return root;\n}\n\n// ────────────────────────────────────────────\n// Element pool\n// ────────────────────────────────────────────\n\nconst pools = new WeakMap<Window, HTMLDivElement[]>();\n\nexport function acquireOverlay(win: Window): HTMLDivElement | null {\n  const root = getOverlayRoot(win);\n  if (!root) return null;\n\n  let pool = pools.get(win);\n  if (!pool) {\n    pool = [];\n    pools.set(win, pool);\n  }\n\n  const document = win.document;\n  let element = pool.pop();\n\n  if (!element) {\n    element = document.createElement(\"div\");\n    element.className = `${ANIMATION_NAME}-box`;\n\n    const label = document.createElement(\"span\");\n    label.className = `${ANIMATION_NAME}-label`;\n    element.appendChild(label);\n\n    element.addEventListener(\"animationend\", () => {\n      element!.style.animation = \"none\";\n      element!.remove();\n      pool!.push(element!);\n    });\n  }\n\n  root.appendChild(element);\n  return element;\n}\n\nexport function disposeAllOverlays() {\n  const mainRoot = overlayRoots.get(window);\n  mainRoot?.remove();\n  overlayRoots.delete(window);\n  pools.delete(window);\n}\n\nexport const OVERLAY_ANIMATION_NAME = ANIMATION_NAME;\n","import type { OverlayConfig, HighlightEntry } from \"./types.js\";\nimport { formatCausesShort } from \"./format.js\";\nimport { acquireOverlay, OVERLAY_ANIMATION_NAME } from \"./overlay.js\";\n\n// ────────────────────────────────────────────\n// Heat color\n// ────────────────────────────────────────────\n\nfunction heatColor(count: number, alpha: number): string {\n  const normalizedCount = Math.min((count - 1) / 7, 1);\n  const hue = 200 - normalizedCount * 200;\n  const saturation = 85 + normalizedCount * 15;\n  const lightness = 55 - normalizedCount * 10;\n  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;\n}\n\n// ────────────────────────────────────────────\n// Highlight scheduler\n// ────────────────────────────────────────────\n//\n// Commit path just pushes lightweight entries (no DOM reads, no formatting).\n// Flush (setInterval): batched rect reads → batched DOM writes.\n\ninterface CoalescedEntry {\n  count: number;\n  totalDuration: number;\n  component: string;\n  /** Shallowest fiber depth among coalesced entries (for z-ordering). */\n  depth: number;\n  domNode: HTMLElement;\n  ownerWindow: Window;\n  causeSummary: string;\n}\n\nexport function createHighlighter(config: OverlayConfig) {\n  let pending: HighlightEntry[] = [];\n  let timer: ReturnType<typeof setInterval> | null = null;\n\n  function flush() {\n    if (pending.length === 0) return;\n\n    const batch = pending;\n    pending = [];\n\n    // Coalesce by DOM node identity\n    const map = new Map<HTMLElement, CoalescedEntry>();\n\n    for (let i = 0; i < batch.length; i++) {\n      const entry = batch[i];\n      if (!entry.domNode) continue;\n\n      const existing = map.get(entry.domNode);\n      if (existing) {\n        existing.count++;\n        existing.totalDuration += entry.duration;\n        existing.depth = Math.min(existing.depth, entry.depth);\n      } else {\n        const win = entry.domNode.ownerDocument?.defaultView;\n        if (!win || win.closed) continue;\n        map.set(entry.domNode, {\n          count: 1,\n          totalDuration: entry.duration,\n          component: entry.component,\n          depth: entry.depth,\n          domNode: entry.domNode,\n          ownerWindow: win,\n          causeSummary: formatCausesShort(entry.causes),\n        });\n      }\n    }\n\n    // Read phase: batch all rect reads\n    const toShow: Array<{ coalesced: CoalescedEntry; rect: DOMRect }> = [];\n    for (const coalesced of map.values()) {\n      const rect = coalesced.domNode.getBoundingClientRect();\n      if (rect.width > 0 || rect.height > 0) {\n        toShow.push({ coalesced, rect });\n      }\n    }\n\n    // Sort deepest first so parents are appended last (render on top)\n    toShow.sort((a, b) => b.coalesced.depth - a.coalesced.depth);\n\n    // Write phase: position overlays\n    for (let i = 0; i < toShow.length; i++) {\n      const { coalesced, rect } = toShow[i];\n      const element = acquireOverlay(coalesced.ownerWindow);\n      if (!element) continue;\n\n      const fillColor = heatColor(coalesced.count, 0.18);\n      const borderColor = heatColor(coalesced.count, 0.75);\n      const labelBackground = heatColor(coalesced.count, 0.9);\n\n      const style = element.style;\n      style.top = `${rect.top}px`;\n      style.left = `${rect.left}px`;\n      style.width = `${rect.width}px`;\n      style.height = `${rect.height}px`;\n      style.backgroundColor = fillColor;\n      style.border = `1.5px solid ${borderColor}`;\n      style.setProperty(\"--rdu-opacity\", String(config.opacity));\n      style.animation = `${OVERLAY_ANIMATION_NAME} ${config.animationDuration}ms ease-out forwards`;\n\n      const label = element.firstElementChild as HTMLElement;\n      if (config.showLabels) {\n        const countText = coalesced.count > 1 ? ` ×${coalesced.count}` : \"\";\n        const durationText =\n          coalesced.totalDuration > 0\n            ? ` ${coalesced.totalDuration.toFixed(1)}ms`\n            : \"\";\n        const causeText = coalesced.causeSummary\n          ? ` (${coalesced.causeSummary})`\n          : \"\";\n        label.textContent = `${coalesced.component}${countText}${durationText}${causeText}`;\n        label.style.backgroundColor = labelBackground;\n      } else {\n        label.textContent = \"\";\n        label.style.backgroundColor = \"transparent\";\n      }\n    }\n  }\n\n  function push(entry: HighlightEntry) {\n    pending.push(entry);\n    if (!timer) {\n      timer = setInterval(flush, config.flushInterval);\n    }\n  }\n\n  function dispose() {\n    if (timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n    pending = [];\n  }\n\n  return { push, dispose };\n}\n","import type {\n  DevToolsHook,\n  FiberRoot,\n  HighlightEntry,\n  MonitorOptions,\n  RenderEntry,\n  UpdateMonitor,\n} from \"./types.js\";\nimport {\n  detectRenders,\n  findNearestDOMNode,\n  getComponentName,\n  getFiberPath,\n} from \"./fiber.js\";\nimport { detectCauses } from \"./causes.js\";\nimport { logRerendersToConsole } from \"./format.js\";\nimport { createHighlighter } from \"./highlights.js\";\nimport { disposeAllOverlays } from \"./overlay.js\";\n\n/**\n * Start monitoring React re-renders.\n *\n * Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot` to intercept\n * every React commit. Records re-render entries, optionally logs them to the\n * console, and optionally shows visual highlight overlays on re-rendered DOM nodes.\n *\n * Call this **before** React renders anything — ideally at the very top of\n * your entry point.\n *\n * Returns an `UpdateMonitor` handle, or `null` if the DevTools hook is not found.\n */\nexport function monitor(options: MonitorOptions = {}): UpdateMonitor | null {\n  const {\n    silent = false,\n    bufferSize = 500,\n    filter,\n    overlay = true,\n    mode = \"self-triggered\",\n    showCauses = false,\n    flushInterval = 250,\n    animationDuration = 1200,\n    showLabels = true,\n    opacity = 0.3,\n  } = options;\n\n  const hook = (\n    window as unknown as { __REACT_DEVTOOLS_GLOBAL_HOOK__?: DevToolsHook }\n  ).__REACT_DEVTOOLS_GLOBAL_HOOK__;\n\n  if (!hook) {\n    console.warn(\n      \"[react-debug-updates] __REACT_DEVTOOLS_GLOBAL_HOOK__ not found. \" +\n        \"Make sure React DevTools or a dev build of React is active.\",\n    );\n    return null;\n  }\n\n  const highlighter = overlay\n    ? createHighlighter({ flushInterval, animationDuration, showLabels, opacity })\n    : null;\n\n  const entries: RenderEntry[] = [];\n  const previousOnCommit = hook.onCommitFiberRoot.bind(hook);\n\n  hook.onCommitFiberRoot = (\n    rendererID: number,\n    root: FiberRoot,\n    priorityLevel?: unknown,\n  ) => {\n    previousOnCommit(rendererID, root, priorityLevel);\n\n    // 1. Detect which component fibers actually re-rendered (pure fiber analysis)\n    const detectedRenders = detectRenders(root.current, mode);\n    if (detectedRenders.length === 0) return;\n\n    // 2. Build full entries: resolve names, DOM nodes, causes\n    const highlightEntries: HighlightEntry[] = [];\n\n    for (let i = 0; i < detectedRenders.length; i++) {\n      const { fiber, depth } = detectedRenders[i];\n      const name = getComponentName(fiber);\n      if (!name) continue;\n\n      const highlightEntry: HighlightEntry = {\n        component: name,\n        path: getFiberPath(fiber),\n        duration: fiber.actualDuration ?? 0,\n        depth,\n        domNode: findNearestDOMNode(fiber),\n        causes: showCauses ? detectCauses(fiber) : [],\n      };\n\n      const renderEntry: RenderEntry = {\n        component: highlightEntry.component,\n        path: highlightEntry.path,\n        duration: highlightEntry.duration,\n        timestamp: performance.now(),\n        causes: highlightEntry.causes,\n      };\n\n      if (filter && !filter(renderEntry)) continue;\n\n      if (entries.length >= bufferSize) entries.shift();\n      entries.push(renderEntry);\n\n      highlightEntries.push(highlightEntry);\n      highlighter?.push(highlightEntry);\n    }\n\n    // 3. Console output\n    if (!silent) {\n      logRerendersToConsole(highlightEntries, showCauses);\n    }\n  };\n\n  const stop = () => {\n    hook.onCommitFiberRoot = previousOnCommit;\n    highlighter?.dispose();\n    disposeAllOverlays();\n  };\n\n  if (!silent) {\n    console.log(\n      \"%c⚛ react-debug-updates attached\",\n      \"color: #61dafb; font-weight: bold\",\n    );\n  }\n\n  return { entries, stop };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"react-debug-updates.cjs","sources":["../src/fiber.ts","../src/causes.ts","../src/format.ts","../src/overlay.ts","../src/highlights.ts","../src/monitor.ts"],"sourcesContent":["import type { Fiber, DetectedRender } from \"./types.js\";\n\n// ────────────────────────────────────────────\n// Fiber tag constants\n// ────────────────────────────────────────────\n\nexport const FiberTag = {\n  FunctionComponent: 0,\n  ClassComponent: 1,\n  HostComponent: 5,\n  ForwardRef: 11,\n  SimpleMemoComponent: 15,\n  MemoComponent: 14,\n} as const;\n\n// Component tags we report as re-renders.\n// MemoComponent (14) is excluded to avoid double-reporting — it's a wrapper\n// fiber around the inner component. The inner component (FunctionComponent,\n// ForwardRef, or SimpleMemoComponent) has its own PerformedWork flag and\n// will be reported correctly on its own.\nconst COMPONENT_TAGS = new Set<number>([\n  FiberTag.FunctionComponent,\n  FiberTag.ClassComponent,\n  FiberTag.ForwardRef,\n  FiberTag.SimpleMemoComponent,\n]);\n\nconst PerformedWork = 0b0000001;\n\n// ────────────────────────────────────────────\n// Fiber tree helpers\n// ────────────────────────────────────────────\n\nexport function getComponentName(fiber: Fiber): string | null {\n  const { type } = fiber;\n  if (!type || typeof type === \"string\") return null;\n  return type.displayName ?? type.name ?? null;\n}\n\nfunction isHTMLElement(value: unknown): value is HTMLElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    (value as Node).nodeType === 1 &&\n    typeof (value as HTMLElement).getBoundingClientRect === \"function\"\n  );\n}\n\nexport function findNearestDOMNode(fiber: Fiber): HTMLElement | null {\n  if (fiber.tag === FiberTag.HostComponent && isHTMLElement(fiber.stateNode)) {\n    return fiber.stateNode;\n  }\n  let child: Fiber | null = fiber.child;\n  while (child) {\n    const found = findNearestDOMNode(child);\n    if (found) return found;\n    child = child.sibling;\n  }\n  return null;\n}\n\nexport function getFiberPath(fiber: Fiber, maxDepth = 5): string {\n  const parts: string[] = [];\n  let current: Fiber | null = fiber.return;\n  let depth = 0;\n  while (current && depth < maxDepth) {\n    const name = getComponentName(current);\n    if (name) parts.unshift(name);\n    current = current.return;\n    depth++;\n  }\n  return parts.length ? parts.join(\" → \") : \"(root)\";\n}\n\n// ────────────────────────────────────────────\n// Self-triggered detection\n// ────────────────────────────────────────────\n\nfunction isSelfTriggered(fiber: Fiber): boolean {\n  const alternate = fiber.alternate;\n  if (!alternate) return false;\n  return fiber.memoizedProps === alternate.memoizedProps;\n}\n\n// ────────────────────────────────────────────\n// didFiberRender — mirrors React DevTools\n// ────────────────────────────────────────────\n//\n// See: react-devtools-shared/src/backend/fiber/shared/DevToolsFiberChangeDetection.js\n//\n// For component fibers (function, class, memo, forwardRef), React sets the\n// PerformedWork flag (bit 0) only when user code actually executes.\n// createWorkInProgress resets flags to NoFlags, so PerformedWork on a\n// work-in-progress fiber is always fresh — never stale from a prior commit.\n//\n// This check must only be called AFTER confirming prevFiber !== nextFiber\n// (i.e. the fiber was actually processed, not a bailed-out subtree).\n\nfunction didFiberRender(nextFiber: Fiber): boolean {\n  return (nextFiber.flags & PerformedWork) === PerformedWork;\n}\n\n// ────────────────────────────────────────────\n// Detect which components re-rendered in a commit\n// ────────────────────────────────────────────\n//\n// Mirrors React DevTools' updateFiberRecursively / updateChildrenRecursively.\n//\n// React double-buffers fibers. After a commit, root.current is the committed\n// tree and root.current.alternate is the previous tree. We walk both in\n// parallel. At each level, if prevChild and nextChild are the same object,\n// React bailed out that entire subtree (via cloneChildFibers) — we skip it.\n// Otherwise, we use nextChild.alternate as the previous fiber and check\n// didFiberRender (PerformedWork) to see if user code actually ran.\n//\n// Returns lightweight DetectedRender objects — just the fiber and its depth.\n// DOM lookup, cause detection, and formatting are the caller's responsibility.\n\nexport function detectRenders(\n  root: Fiber,\n  mode: \"self-triggered\" | \"all\",\n): DetectedRender[] {\n  const results: DetectedRender[] = [];\n  const selfTriggeredOnly = mode === \"self-triggered\";\n\n  // The alternate of the committed root is the previous tree's root.\n  // On initial mount this is null — nothing to report.\n  const previousRoot = root.alternate;\n  if (!previousRoot) return results;\n\n  function walk(\n    nextFiber: Fiber,\n    previousFiber: Fiber | null,\n    depth: number,\n  ) {\n    // ── Check this fiber ──\n    if (\n      COMPONENT_TAGS.has(nextFiber.tag) &&\n      previousFiber !== null &&\n      previousFiber !== nextFiber && // same object → bailed-out subtree\n      didFiberRender(nextFiber) &&\n      (!selfTriggeredOnly || isSelfTriggered(nextFiber))\n    ) {\n      results.push({ fiber: nextFiber, depth });\n    }\n\n    // ── Walk children, matching with previous tree ──\n    let nextChild = nextFiber.child;\n    let previousChildAtSameIndex = previousFiber?.child ?? null;\n\n    while (nextChild) {\n      let matchedPrevious: Fiber | null;\n\n      if (previousChildAtSameIndex === nextChild) {\n        // Same object identity — React shared this fiber via cloneChildFibers.\n        // The entire subtree was bailed out; passing the same object as both\n        // prev and next causes the prevFiber !== nextFiber guard to skip it.\n        matchedPrevious = nextChild;\n      } else {\n        // Different object — this fiber was processed. The alternate is the\n        // corresponding fiber from the previous tree.\n        matchedPrevious = nextChild.alternate;\n      }\n\n      walk(nextChild, matchedPrevious, depth + 1);\n\n      nextChild = nextChild.sibling;\n      previousChildAtSameIndex = previousChildAtSameIndex?.sibling ?? null;\n    }\n  }\n\n  walk(root, previousRoot, 0);\n  return results;\n}\n","import type { Fiber, HookNode, UpdateCause } from \"./types.js\";\nimport { FiberTag } from \"./fiber.js\";\n\n// ────────────────────────────────────────────\n// Update cause detection\n// ────────────────────────────────────────────\n//\n// For function components, React stores hooks as a linked list on\n// fiber.memoizedState. In dev builds, _debugHookTypes lists hook names\n// in call order. We walk both in parallel, comparing memoizedState\n// on each node to find which hook's state actually changed.\n//\n// Caveat: useContext does NOT create a linked list node, so we skip it\n// when advancing the pointer, and detect it by elimination.\n\n/**\n * Hooks whose memoizedState changing can trigger a re-render.\n * We only report these — useEffect/useMemo/etc. don't cause re-renders.\n */\nconst STATE_HOOKS = new Set([\n  \"useState\",\n  \"useReducer\",\n  \"useSyncExternalStore\",\n]);\n\n/**\n * Hooks that do NOT create a node in the memoizedState linked list.\n * Currently only useContext — every other hook allocates a node.\n */\nconst HOOKS_WITHOUT_NODE = new Set([\"useContext\"]);\n\nexport function detectCauses(fiber: Fiber): UpdateCause[] {\n  const alternate = fiber.alternate;\n  if (!alternate) return [];\n\n  const causes: UpdateCause[] = [];\n\n  // ── Props changed (parent re-rendered us with new props) ──\n  if (fiber.memoizedProps !== alternate.memoizedProps) {\n    causes.push({ kind: \"props\" });\n  }\n\n  // ── Class component ──\n  if (fiber.tag === FiberTag.ClassComponent) {\n    if (fiber.memoizedState !== alternate.memoizedState) {\n      causes.push({ kind: \"class-state\" });\n    }\n    return causes;\n  }\n\n  // ── Function component hooks ──\n  const hookTypes = fiber._debugHookTypes;\n\n  if (!hookTypes) {\n    // No debug info (prod build) — best effort\n    if (fiber.memoizedState !== alternate.memoizedState) {\n      causes.push({ kind: \"unknown\" });\n    }\n    return causes;\n  }\n\n  let currentNode = fiber.memoizedState as HookNode | null;\n  let previousNode = alternate.memoizedState as HookNode | null;\n  let hasContextHook = false;\n  let anyStateHookChanged = false;\n\n  for (let i = 0; i < hookTypes.length; i++) {\n    const type = hookTypes[i];\n\n    // useContext has no linked list node — skip pointer advance\n    if (HOOKS_WITHOUT_NODE.has(type)) {\n      if (type === \"useContext\") hasContextHook = true;\n      continue;\n    }\n\n    if (STATE_HOOKS.has(type) && currentNode && previousNode) {\n      if (!Object.is(currentNode.memoizedState, previousNode.memoizedState)) {\n        anyStateHookChanged = true;\n        causes.push({\n          kind: \"hook\",\n          hookIndex: i,\n          hookType: type,\n          previousValue: previousNode.memoizedState,\n          nextValue: currentNode.memoizedState,\n        });\n      }\n    }\n\n    currentNode = currentNode?.next ?? null;\n    previousNode = previousNode?.next ?? null;\n  }\n\n  // If no state hook changed but component is self-triggered and has\n  // useContext → the context value must have changed.\n  if (\n    hasContextHook &&\n    !anyStateHookChanged &&\n    fiber.memoizedProps === alternate.memoizedProps\n  ) {\n    causes.push({ kind: \"hook\", hookType: \"useContext\" });\n  }\n\n  // If still nothing and self-triggered, mark unknown\n  if (causes.length === 0 && fiber.memoizedProps === alternate.memoizedProps) {\n    causes.push({ kind: \"unknown\" });\n  }\n\n  return causes;\n}\n","import type { HighlightEntry, UpdateCause } from \"./types.js\";\n\n// ────────────────────────────────────────────\n// Value formatting\n// ────────────────────────────────────────────\n\nexport function formatValue(value: unknown, maxLength = 50): string {\n  if (value === null) return \"null\";\n  if (value === undefined) return \"undefined\";\n  if (typeof value === \"boolean\") return String(value);\n  if (typeof value === \"number\") return String(value);\n  if (typeof value === \"function\")\n    return `ƒ ${(value as { name?: string }).name || \"anonymous\"}`;\n\n  if (typeof value === \"string\") {\n    const truncated =\n      value.length > maxLength ? value.slice(0, maxLength) + \"…\" : value;\n    return JSON.stringify(truncated);\n  }\n\n  if (Array.isArray(value)) return `Array(${value.length})`;\n\n  if (typeof value === \"object\") {\n    const name = (value as object).constructor?.name;\n    if (name && name !== \"Object\") return name;\n    const keys = Object.keys(value as object);\n    if (keys.length <= 3) return `{ ${keys.join(\", \")} }`;\n    return `{ ${keys.slice(0, 3).join(\", \")}, … }`;\n  }\n\n  return String(value);\n}\n\n// ────────────────────────────────────────────\n// Cause formatting\n// ────────────────────────────────────────────\n\n/** Compact summary for overlay labels. */\nexport function formatCausesShort(causes: UpdateCause[]): string {\n  if (causes.length === 0) return \"\";\n\n  const parts: string[] = [];\n  for (const cause of causes) {\n    if (cause.kind === \"props\") {\n      parts.push(\"props\");\n    } else if (cause.kind === \"class-state\") {\n      parts.push(\"state\");\n    } else if (cause.kind === \"hook\" && cause.hookType) {\n      const indexSuffix = cause.hookIndex != null ? `[${cause.hookIndex}]` : \"\";\n      parts.push(`${cause.hookType}${indexSuffix}`);\n    } else {\n      parts.push(\"?\");\n    }\n  }\n\n  return parts.join(\", \");\n}\n\n/** Detailed lines for console output. */\nexport function formatCausesConsole(causes: UpdateCause[]): string[] {\n  const lines: string[] = [];\n\n  for (const cause of causes) {\n    if (cause.kind === \"props\") {\n      lines.push(\"  ↳ props changed (parent re-rendered)\");\n    } else if (cause.kind === \"class-state\") {\n      lines.push(\"  ↳ class state changed\");\n    } else if (cause.kind === \"hook\" && cause.hookType) {\n      const indexSuffix =\n        cause.hookIndex != null ? `[${cause.hookIndex}]` : \"\";\n      const name = `${cause.hookType}${indexSuffix}`;\n\n      if (cause.previousValue !== undefined && cause.nextValue !== undefined) {\n        lines.push(\n          `  ↳ ${name}: ${formatValue(cause.previousValue)} → ${formatValue(cause.nextValue)}`,\n        );\n      } else {\n        lines.push(`  ↳ ${name} changed`);\n      }\n    } else {\n      lines.push(\"  ↳ unknown cause\");\n    }\n  }\n\n  return lines;\n}\n\n// ────────────────────────────────────────────\n// Console output\n// ────────────────────────────────────────────\n\n/** Log re-renders as a collapsed console group. */\nexport function logRerendersToConsole(\n  entries: HighlightEntry[],\n  showCauses: boolean,\n) {\n  if (entries.length === 0) return;\n\n  console.groupCollapsed(\n    `%c⚛ ${entries.length} re-render${entries.length > 1 ? \"s\" : \"\"}`,\n    \"color: #61dafb; font-weight: bold\",\n  );\n\n  for (let i = 0; i < entries.length; i++) {\n    const entry = entries[i];\n    const durationText =\n      entry.duration > 0 ? ` (${entry.duration.toFixed(2)}ms)` : \"\";\n    console.log(\n      `%c${entry.component}%c ${entry.path}${durationText}`,\n      \"color: #e8e82e; font-weight: bold\",\n      \"color: #888\",\n    );\n\n    if (showCauses && entry.causes.length > 0) {\n      const lines = formatCausesConsole(entry.causes);\n      for (const line of lines) {\n        console.log(`%c${line}`, \"color: #aaa\");\n      }\n    }\n  }\n\n  console.groupEnd();\n}\n","// ────────────────────────────────────────────\n// Per-window overlay infrastructure\n// ────────────────────────────────────────────\n//\n// Performance:\n//  - Overlay elements pooled per window, reused via animationend\n//  - Single CSS @keyframes per window, no JS timers per element\n\nconst ANIMATION_NAME = \"__rdu-fade\";\n\nconst injectedWindows = new WeakSet<Window>();\n\nfunction ensureStylesheet(win: Window) {\n  if (injectedWindows.has(win)) return;\n  injectedWindows.add(win);\n\n  const style = win.document.createElement(\"style\");\n  style.textContent = `\n    @keyframes ${ANIMATION_NAME} {\n      0%   { opacity: 0; }\n      8%   { opacity: var(--rdu-opacity, 1); }\n      40%  { opacity: var(--rdu-opacity, 1); }\n      100% { opacity: 0; }\n    }\n    .${ANIMATION_NAME}-box {\n      position: fixed;\n      pointer-events: none;\n      box-sizing: border-box;\n      border-radius: 3px;\n      opacity: 0;\n      will-change: opacity;\n    }\n    .${ANIMATION_NAME}-label {\n      position: absolute;\n      top: -18px;\n      left: -1px;\n      font: 10px/16px ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n      padding: 0 4px;\n      color: #fff;\n      border-radius: 2px 2px 0 0;\n      white-space: nowrap;\n      pointer-events: none;\n    }\n  `;\n  win.document.head.appendChild(style);\n}\n\n// ────────────────────────────────────────────\n// Overlay root container\n// ────────────────────────────────────────────\n\nconst overlayRoots = new WeakMap<Window, HTMLDivElement>();\n\nfunction getOverlayRoot(win: Window): HTMLDivElement | null {\n  if (win.closed) return null;\n\n  const existing = overlayRoots.get(win);\n  if (existing?.isConnected) return existing;\n\n  ensureStylesheet(win);\n\n  const root = win.document.createElement(\"div\");\n  root.id = \"__react-debug-updates\";\n  Object.assign(root.style, {\n    position: \"fixed\",\n    top: \"0\",\n    left: \"0\",\n    width: \"0\",\n    height: \"0\",\n    overflow: \"visible\",\n    pointerEvents: \"none\",\n    zIndex: \"2147483647\",\n  } satisfies Partial<CSSStyleDeclaration>);\n  win.document.body.appendChild(root);\n\n  overlayRoots.set(win, root);\n  return root;\n}\n\n// ────────────────────────────────────────────\n// Element pool\n// ────────────────────────────────────────────\n\nconst pools = new WeakMap<Window, HTMLDivElement[]>();\n\nexport function acquireOverlay(win: Window): HTMLDivElement | null {\n  const root = getOverlayRoot(win);\n  if (!root) return null;\n\n  let pool = pools.get(win);\n  if (!pool) {\n    pool = [];\n    pools.set(win, pool);\n  }\n\n  const document = win.document;\n  let element = pool.pop();\n\n  if (!element) {\n    element = document.createElement(\"div\");\n    element.className = `${ANIMATION_NAME}-box`;\n\n    const label = document.createElement(\"span\");\n    label.className = `${ANIMATION_NAME}-label`;\n    element.appendChild(label);\n\n    element.addEventListener(\"animationend\", () => {\n      element!.style.animation = \"none\";\n      element!.remove();\n      pool!.push(element!);\n    });\n  }\n\n  root.appendChild(element);\n  return element;\n}\n\nexport function disposeAllOverlays() {\n  const mainRoot = overlayRoots.get(window);\n  mainRoot?.remove();\n  overlayRoots.delete(window);\n  pools.delete(window);\n}\n\nexport const OVERLAY_ANIMATION_NAME = ANIMATION_NAME;\n","import type { OverlayConfig, HighlightEntry } from \"./types.js\";\nimport { formatCausesShort } from \"./format.js\";\nimport { acquireOverlay, OVERLAY_ANIMATION_NAME } from \"./overlay.js\";\n\n// ────────────────────────────────────────────\n// Heat color\n// ────────────────────────────────────────────\n\nfunction heatColor(count: number, alpha: number): string {\n  const normalizedCount = Math.min((count - 1) / 7, 1);\n  const hue = 200 - normalizedCount * 200;\n  const saturation = 85 + normalizedCount * 15;\n  const lightness = 55 - normalizedCount * 10;\n  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;\n}\n\n// ────────────────────────────────────────────\n// Highlight scheduler\n// ────────────────────────────────────────────\n//\n// Commit path just pushes lightweight entries (no DOM reads, no formatting).\n// Flush (setInterval): batched rect reads → batched DOM writes.\n\ninterface CoalescedEntry {\n  count: number;\n  totalDuration: number;\n  component: string;\n  /** Shallowest fiber depth among coalesced entries (for z-ordering). */\n  depth: number;\n  domNode: HTMLElement;\n  ownerWindow: Window;\n  causeSummary: string;\n}\n\nexport function createHighlighter(config: OverlayConfig) {\n  let pending: HighlightEntry[] = [];\n  let timer: ReturnType<typeof setInterval> | null = null;\n\n  function flush() {\n    if (pending.length === 0) return;\n\n    const batch = pending;\n    pending = [];\n\n    // Coalesce by DOM node identity\n    const map = new Map<HTMLElement, CoalescedEntry>();\n\n    for (let i = 0; i < batch.length; i++) {\n      const entry = batch[i];\n      if (!entry.domNode) continue;\n\n      const existing = map.get(entry.domNode);\n      if (existing) {\n        existing.count++;\n        existing.totalDuration += entry.duration;\n        existing.depth = Math.min(existing.depth, entry.depth);\n      } else {\n        const win = entry.domNode.ownerDocument?.defaultView;\n        if (!win || win.closed) continue;\n        map.set(entry.domNode, {\n          count: 1,\n          totalDuration: entry.duration,\n          component: entry.component,\n          depth: entry.depth,\n          domNode: entry.domNode,\n          ownerWindow: win,\n          causeSummary: formatCausesShort(entry.causes),\n        });\n      }\n    }\n\n    // Read phase: batch all rect reads\n    const toShow: Array<{ coalesced: CoalescedEntry; rect: DOMRect }> = [];\n    for (const coalesced of map.values()) {\n      const rect = coalesced.domNode.getBoundingClientRect();\n      if (rect.width > 0 || rect.height > 0) {\n        toShow.push({ coalesced, rect });\n      }\n    }\n\n    // Sort deepest first so parents are appended last (render on top)\n    toShow.sort((a, b) => b.coalesced.depth - a.coalesced.depth);\n\n    // Write phase: position overlays\n    for (let i = 0; i < toShow.length; i++) {\n      const { coalesced, rect } = toShow[i];\n      const element = acquireOverlay(coalesced.ownerWindow);\n      if (!element) continue;\n\n      const fillColor = heatColor(coalesced.count, 0.18);\n      const borderColor = heatColor(coalesced.count, 0.75);\n      const labelBackground = heatColor(coalesced.count, 0.9);\n\n      const style = element.style;\n      style.top = `${rect.top}px`;\n      style.left = `${rect.left}px`;\n      style.width = `${rect.width}px`;\n      style.height = `${rect.height}px`;\n      style.backgroundColor = fillColor;\n      style.border = `1.5px solid ${borderColor}`;\n      style.setProperty(\"--rdu-opacity\", String(config.opacity));\n      style.animation = `${OVERLAY_ANIMATION_NAME} ${config.animationDuration}ms ease-out forwards`;\n\n      const label = element.firstElementChild as HTMLElement;\n      if (config.showLabels) {\n        const countText = coalesced.count > 1 ? ` ×${coalesced.count}` : \"\";\n        const durationText =\n          coalesced.totalDuration > 0\n            ? ` ${coalesced.totalDuration.toFixed(1)}ms`\n            : \"\";\n        const causeText = coalesced.causeSummary\n          ? ` (${coalesced.causeSummary})`\n          : \"\";\n        label.textContent = `${coalesced.component}${countText}${durationText}${causeText}`;\n        label.style.backgroundColor = labelBackground;\n      } else {\n        label.textContent = \"\";\n        label.style.backgroundColor = \"transparent\";\n      }\n    }\n  }\n\n  function push(entry: HighlightEntry) {\n    pending.push(entry);\n    if (!timer) {\n      timer = setInterval(flush, config.flushInterval);\n    }\n  }\n\n  function dispose() {\n    if (timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n    pending = [];\n  }\n\n  return { push, dispose };\n}\n","import type {\n  DevToolsHook,\n  FiberRoot,\n  HighlightEntry,\n  MonitorOptions,\n} from \"./types.js\";\nimport {\n  detectRenders,\n  findNearestDOMNode,\n  getComponentName,\n  getFiberPath,\n} from \"./fiber.js\";\nimport { detectCauses } from \"./causes.js\";\nimport { logRerendersToConsole } from \"./format.js\";\nimport { createHighlighter } from \"./highlights.js\";\nimport { disposeAllOverlays } from \"./overlay.js\";\n\n/**\n * Ensure __REACT_DEVTOOLS_GLOBAL_HOOK__ exists on window.\n *\n * React reads this hook during initialization — if it's missing, React will\n * never connect. When this library is imported before React (the recommended\n * setup), we need to create a minimal hook so React can find and register with it.\n *\n * If a hook already exists (e.g. from the React DevTools extension), we leave\n * it untouched and hook into it.\n */\nfunction ensureDevToolsHook(win: Window): DevToolsHook {\n  const global = win as unknown as {\n    __REACT_DEVTOOLS_GLOBAL_HOOK__?: DevToolsHook;\n  };\n\n  if (!global.__REACT_DEVTOOLS_GLOBAL_HOOK__) {\n    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {\n      supportsFiber: true,\n      inject() {\n        return 1;\n      },\n      onCommitFiberRoot() {},\n      onCommitFiberUnmount() {},\n      onPostCommitFiberRoot() {},\n      checkDCE() {},\n    } as DevToolsHook;\n  }\n\n  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n}\n\n/**\n * Start monitoring React re-renders.\n *\n * Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot` to intercept\n * every React commit. Shows visual highlight overlays on re-rendered DOM nodes\n * and optionally logs re-renders to the console.\n *\n * Call this **before** React renders anything — ideally at the very top of\n * your entry point.\n *\n * Returns a `stop` function to unhook and clean up, or `null` if called\n * in a non-browser environment (e.g. SSR).\n */\nexport function startReactUpdatesMonitor({\n  logToConsole = false,\n  highlight = true,\n  mode = \"self-triggered\",\n  reasonOfUpdate = false,\n  highlightFlushInterval = 250,\n  highlightAnimationDuration = 1200,\n  highlightShowLabels = true,\n  highlightOpacity = 0.3,\n}: MonitorOptions = {}): (() => void) | null {\n  // SSR guard — nothing to do without a DOM\n  if (typeof window === \"undefined\") return null;\n\n  const hook = ensureDevToolsHook(window);\n\n  const highlighter = highlight\n    ? createHighlighter({\n        flushInterval: highlightFlushInterval,\n        animationDuration: highlightAnimationDuration,\n        showLabels: highlightShowLabels,\n        opacity: highlightOpacity,\n      })\n    : null;\n\n  const previousOnCommit = hook.onCommitFiberRoot.bind(hook);\n\n  hook.onCommitFiberRoot = (\n    rendererID: number,\n    root: FiberRoot,\n    priorityLevel?: unknown,\n  ) => {\n    previousOnCommit(rendererID, root, priorityLevel);\n\n    // 1. Detect which component fibers actually re-rendered (pure fiber analysis)\n    const detectedRenders = detectRenders(root.current, mode);\n    if (detectedRenders.length === 0) return;\n\n    // 2. Build full entries: resolve names, DOM nodes, causes\n    const highlightEntries: HighlightEntry[] = [];\n\n    for (let i = 0; i < detectedRenders.length; i++) {\n      const { fiber, depth } = detectedRenders[i];\n      const name = getComponentName(fiber);\n      if (!name) continue;\n\n      const entry: HighlightEntry = {\n        component: name,\n        path: getFiberPath(fiber),\n        duration: fiber.actualDuration ?? 0,\n        depth,\n        domNode: findNearestDOMNode(fiber),\n        causes: reasonOfUpdate ? detectCauses(fiber) : [],\n      };\n\n      highlightEntries.push(entry);\n      highlighter?.push(entry);\n    }\n\n    // 3. Console output\n    if (logToConsole) {\n      logRerendersToConsole(highlightEntries, reasonOfUpdate);\n    }\n  };\n\n  if (logToConsole) {\n    console.log(\n      \"%c⚛ react-debug-updates attached\",\n      \"color: #61dafb; font-weight: bold\",\n    );\n  }\n\n  return () => {\n    hook.onCommitFiberRoot = previousOnCommit;\n    highlighter?.dispose();\n    disposeAllOverlays();\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/react-debug-updates.js

@@ -403,28 +403,44 @@ function createHighlighter(config) {
   }
   return { push, dispose };
 }
-function monitor(options = {}) {
-  const {
-    silent = false,
-    bufferSize = 500,
-    filter,
-    overlay = true,
-    mode = "self-triggered",
-    showCauses = false,
-    flushInterval = 250,
-    animationDuration = 1200,
-    showLabels = true,
-    opacity = 0.3
-  } = options;
-  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  if (!hook) {
-    console.warn(
-      "[react-debug-updates] __REACT_DEVTOOLS_GLOBAL_HOOK__ not found. Make sure React DevTools or a dev build of React is active."
-    );
-    return null;
+function ensureDevToolsHook(win) {
+  const global = win;
+  if (!global.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+      supportsFiber: true,
+      inject() {
+        return 1;
+      },
+      onCommitFiberRoot() {
+      },
+      onCommitFiberUnmount() {
+      },
+      onPostCommitFiberRoot() {
+      },
+      checkDCE() {
+      }
+    };
   }
-  const highlighter = overlay ? createHighlighter({ flushInterval, animationDuration, showLabels, opacity }) : null;
-  const entries = [];
+  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+}
+function startReactUpdatesMonitor({
+  logToConsole = false,
+  highlight = true,
+  mode = "self-triggered",
+  reasonOfUpdate = false,
+  highlightFlushInterval = 250,
+  highlightAnimationDuration = 1200,
+  highlightShowLabels = true,
+  highlightOpacity = 0.3
+} = {}) {
+  if (typeof window === "undefined") return null;
+  const hook = ensureDevToolsHook(window);
+  const highlighter = highlight ? createHighlighter({
+    flushInterval: highlightFlushInterval,
+    animationDuration: highlightAnimationDuration,
+    showLabels: highlightShowLabels,
+    opacity: highlightOpacity
+  }) : null;
   const previousOnCommit = hook.onCommitFiberRoot.bind(hook);
   hook.onCommitFiberRoot = (rendererID, root, priorityLevel) => {
     previousOnCommit(rendererID, root, priorityLevel);
@@ -435,45 +451,34 @@ function monitor(options = {}) {
       const { fiber, depth } = detectedRenders[i];
       const name = getComponentName(fiber);
       if (!name) continue;
-      const highlightEntry = {
+      const entry = {
         component: name,
         path: getFiberPath(fiber),
         duration: fiber.actualDuration ?? 0,
         depth,
         domNode: findNearestDOMNode(fiber),
-        causes: showCauses ? detectCauses(fiber) : []
+        causes: reasonOfUpdate ? detectCauses(fiber) : []
       };
-      const renderEntry = {
-        component: highlightEntry.component,
-        path: highlightEntry.path,
-        duration: highlightEntry.duration,
-        timestamp: performance.now(),
-        causes: highlightEntry.causes
-      };
-      if (filter && !filter(renderEntry)) continue;
-      if (entries.length >= bufferSize) entries.shift();
-      entries.push(renderEntry);
-      highlightEntries.push(highlightEntry);
-      highlighter == null ? void 0 : highlighter.push(highlightEntry);
+      highlightEntries.push(entry);
+      highlighter == null ? void 0 : highlighter.push(entry);
     }
-    if (!silent) {
-      logRerendersToConsole(highlightEntries, showCauses);
+    if (logToConsole) {
+      logRerendersToConsole(highlightEntries, reasonOfUpdate);
     }
   };
-  const stop = () => {
-    hook.onCommitFiberRoot = previousOnCommit;
-    highlighter == null ? void 0 : highlighter.dispose();
-    disposeAllOverlays();
-  };
-  if (!silent) {
+  if (logToConsole) {
     console.log(
       "%c⚛ react-debug-updates attached",
       "color: #61dafb; font-weight: bold"
     );
   }
-  return { entries, stop };
+  return () => {
+    hook.onCommitFiberRoot = previousOnCommit;
+    highlighter == null ? void 0 : highlighter.dispose();
+    disposeAllOverlays();
+  };
 }
 export {
-  monitor
+  startReactUpdatesMonitor
 };
 //# sourceMappingURL=react-debug-updates.js.map

package/dist/react-debug-updates.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-debug-updates.js","sources":["../src/fiber.ts","../src/causes.ts","../src/format.ts","../src/overlay.ts","../src/highlights.ts","../src/monitor.ts"],"sourcesContent":["import type { Fiber, DetectedRender } from \"./types.js\";\n\n// ────────────────────────────────────────────\n// Fiber tag constants\n// ────────────────────────────────────────────\n\nexport const FiberTag = {\n  FunctionComponent: 0,\n  ClassComponent: 1,\n  HostComponent: 5,\n  ForwardRef: 11,\n  SimpleMemoComponent: 15,\n  MemoComponent: 14,\n} as const;\n\n// Component tags we report as re-renders.\n// MemoComponent (14) is excluded to avoid double-reporting — it's a wrapper\n// fiber around the inner component. The inner component (FunctionComponent,\n// ForwardRef, or SimpleMemoComponent) has its own PerformedWork flag and\n// will be reported correctly on its own.\nconst COMPONENT_TAGS = new Set<number>([\n  FiberTag.FunctionComponent,\n  FiberTag.ClassComponent,\n  FiberTag.ForwardRef,\n  FiberTag.SimpleMemoComponent,\n]);\n\nconst PerformedWork = 0b0000001;\n\n// ────────────────────────────────────────────\n// Fiber tree helpers\n// ────────────────────────────────────────────\n\nexport function getComponentName(fiber: Fiber): string | null {\n  const { type } = fiber;\n  if (!type || typeof type === \"string\") return null;\n  return type.displayName ?? type.name ?? null;\n}\n\nfunction isHTMLElement(value: unknown): value is HTMLElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    (value as Node).nodeType === 1 &&\n    typeof (value as HTMLElement).getBoundingClientRect === \"function\"\n  );\n}\n\nexport function findNearestDOMNode(fiber: Fiber): HTMLElement | null {\n  if (fiber.tag === FiberTag.HostComponent && isHTMLElement(fiber.stateNode)) {\n    return fiber.stateNode;\n  }\n  let child: Fiber | null = fiber.child;\n  while (child) {\n    const found = findNearestDOMNode(child);\n    if (found) return found;\n    child = child.sibling;\n  }\n  return null;\n}\n\nexport function getFiberPath(fiber: Fiber, maxDepth = 5): string {\n  const parts: string[] = [];\n  let current: Fiber | null = fiber.return;\n  let depth = 0;\n  while (current && depth < maxDepth) {\n    const name = getComponentName(current);\n    if (name) parts.unshift(name);\n    current = current.return;\n    depth++;\n  }\n  return parts.length ? parts.join(\" → \") : \"(root)\";\n}\n\n// ────────────────────────────────────────────\n// Self-triggered detection\n// ────────────────────────────────────────────\n\nfunction isSelfTriggered(fiber: Fiber): boolean {\n  const alternate = fiber.alternate;\n  if (!alternate) return false;\n  return fiber.memoizedProps === alternate.memoizedProps;\n}\n\n// ────────────────────────────────────────────\n// didFiberRender — mirrors React DevTools\n// ────────────────────────────────────────────\n//\n// See: react-devtools-shared/src/backend/fiber/shared/DevToolsFiberChangeDetection.js\n//\n// For component fibers (function, class, memo, forwardRef), React sets the\n// PerformedWork flag (bit 0) only when user code actually executes.\n// createWorkInProgress resets flags to NoFlags, so PerformedWork on a\n// work-in-progress fiber is always fresh — never stale from a prior commit.\n//\n// This check must only be called AFTER confirming prevFiber !== nextFiber\n// (i.e. the fiber was actually processed, not a bailed-out subtree).\n\nfunction didFiberRender(nextFiber: Fiber): boolean {\n  return (nextFiber.flags & PerformedWork) === PerformedWork;\n}\n\n// ────────────────────────────────────────────\n// Detect which components re-rendered in a commit\n// ────────────────────────────────────────────\n//\n// Mirrors React DevTools' updateFiberRecursively / updateChildrenRecursively.\n//\n// React double-buffers fibers. After a commit, root.current is the committed\n// tree and root.current.alternate is the previous tree. We walk both in\n// parallel. At each level, if prevChild and nextChild are the same object,\n// React bailed out that entire subtree (via cloneChildFibers) — we skip it.\n// Otherwise, we use nextChild.alternate as the previous fiber and check\n// didFiberRender (PerformedWork) to see if user code actually ran.\n//\n// Returns lightweight DetectedRender objects — just the fiber and its depth.\n// DOM lookup, cause detection, and formatting are the caller's responsibility.\n\nexport function detectRenders(\n  root: Fiber,\n  mode: \"self-triggered\" | \"all\",\n): DetectedRender[] {\n  const results: DetectedRender[] = [];\n  const selfTriggeredOnly = mode === \"self-triggered\";\n\n  // The alternate of the committed root is the previous tree's root.\n  // On initial mount this is null — nothing to report.\n  const previousRoot = root.alternate;\n  if (!previousRoot) return results;\n\n  function walk(\n    nextFiber: Fiber,\n    previousFiber: Fiber | null,\n    depth: number,\n  ) {\n    // ── Check this fiber ──\n    if (\n      COMPONENT_TAGS.has(nextFiber.tag) &&\n      previousFiber !== null &&\n      previousFiber !== nextFiber && // same object → bailed-out subtree\n      didFiberRender(nextFiber) &&\n      (!selfTriggeredOnly || isSelfTriggered(nextFiber))\n    ) {\n      results.push({ fiber: nextFiber, depth });\n    }\n\n    // ── Walk children, matching with previous tree ──\n    let nextChild = nextFiber.child;\n    let previousChildAtSameIndex = previousFiber?.child ?? null;\n\n    while (nextChild) {\n      let matchedPrevious: Fiber | null;\n\n      if (previousChildAtSameIndex === nextChild) {\n        // Same object identity — React shared this fiber via cloneChildFibers.\n        // The entire subtree was bailed out; passing the same object as both\n        // prev and next causes the prevFiber !== nextFiber guard to skip it.\n        matchedPrevious = nextChild;\n      } else {\n        // Different object — this fiber was processed. The alternate is the\n        // corresponding fiber from the previous tree.\n        matchedPrevious = nextChild.alternate;\n      }\n\n      walk(nextChild, matchedPrevious, depth + 1);\n\n      nextChild = nextChild.sibling;\n      previousChildAtSameIndex = previousChildAtSameIndex?.sibling ?? null;\n    }\n  }\n\n  walk(root, previousRoot, 0);\n  return results;\n}\n","import type { Fiber, HookNode, UpdateCause } from \"./types.js\";\nimport { FiberTag } from \"./fiber.js\";\n\n// ────────────────────────────────────────────\n// Update cause detection\n// ────────────────────────────────────────────\n//\n// For function components, React stores hooks as a linked list on\n// fiber.memoizedState. In dev builds, _debugHookTypes lists hook names\n// in call order. We walk both in parallel, comparing memoizedState\n// on each node to find which hook's state actually changed.\n//\n// Caveat: useContext does NOT create a linked list node, so we skip it\n// when advancing the pointer, and detect it by elimination.\n\n/**\n * Hooks whose memoizedState changing can trigger a re-render.\n * We only report these — useEffect/useMemo/etc. don't cause re-renders.\n */\nconst STATE_HOOKS = new Set([\n  \"useState\",\n  \"useReducer\",\n  \"useSyncExternalStore\",\n]);\n\n/**\n * Hooks that do NOT create a node in the memoizedState linked list.\n * Currently only useContext — every other hook allocates a node.\n */\nconst HOOKS_WITHOUT_NODE = new Set([\"useContext\"]);\n\nexport function detectCauses(fiber: Fiber): UpdateCause[] {\n  const alternate = fiber.alternate;\n  if (!alternate) return [];\n\n  const causes: UpdateCause[] = [];\n\n  // ── Props changed (parent re-rendered us with new props) ──\n  if (fiber.memoizedProps !== alternate.memoizedProps) {\n    causes.push({ kind: \"props\" });\n  }\n\n  // ── Class component ──\n  if (fiber.tag === FiberTag.ClassComponent) {\n    if (fiber.memoizedState !== alternate.memoizedState) {\n      causes.push({ kind: \"class-state\" });\n    }\n    return causes;\n  }\n\n  // ── Function component hooks ──\n  const hookTypes = fiber._debugHookTypes;\n\n  if (!hookTypes) {\n    // No debug info (prod build) — best effort\n    if (fiber.memoizedState !== alternate.memoizedState) {\n      causes.push({ kind: \"unknown\" });\n    }\n    return causes;\n  }\n\n  let currentNode = fiber.memoizedState as HookNode | null;\n  let previousNode = alternate.memoizedState as HookNode | null;\n  let hasContextHook = false;\n  let anyStateHookChanged = false;\n\n  for (let i = 0; i < hookTypes.length; i++) {\n    const type = hookTypes[i];\n\n    // useContext has no linked list node — skip pointer advance\n    if (HOOKS_WITHOUT_NODE.has(type)) {\n      if (type === \"useContext\") hasContextHook = true;\n      continue;\n    }\n\n    if (STATE_HOOKS.has(type) && currentNode && previousNode) {\n      if (!Object.is(currentNode.memoizedState, previousNode.memoizedState)) {\n        anyStateHookChanged = true;\n        causes.push({\n          kind: \"hook\",\n          hookIndex: i,\n          hookType: type,\n          previousValue: previousNode.memoizedState,\n          nextValue: currentNode.memoizedState,\n        });\n      }\n    }\n\n    currentNode = currentNode?.next ?? null;\n    previousNode = previousNode?.next ?? null;\n  }\n\n  // If no state hook changed but component is self-triggered and has\n  // useContext → the context value must have changed.\n  if (\n    hasContextHook &&\n    !anyStateHookChanged &&\n    fiber.memoizedProps === alternate.memoizedProps\n  ) {\n    causes.push({ kind: \"hook\", hookType: \"useContext\" });\n  }\n\n  // If still nothing and self-triggered, mark unknown\n  if (causes.length === 0 && fiber.memoizedProps === alternate.memoizedProps) {\n    causes.push({ kind: \"unknown\" });\n  }\n\n  return causes;\n}\n","import type { HighlightEntry, UpdateCause } from \"./types.js\";\n\n// ────────────────────────────────────────────\n// Value formatting\n// ────────────────────────────────────────────\n\nexport function formatValue(value: unknown, maxLength = 50): string {\n  if (value === null) return \"null\";\n  if (value === undefined) return \"undefined\";\n  if (typeof value === \"boolean\") return String(value);\n  if (typeof value === \"number\") return String(value);\n  if (typeof value === \"function\")\n    return `ƒ ${(value as { name?: string }).name || \"anonymous\"}`;\n\n  if (typeof value === \"string\") {\n    const truncated =\n      value.length > maxLength ? value.slice(0, maxLength) + \"…\" : value;\n    return JSON.stringify(truncated);\n  }\n\n  if (Array.isArray(value)) return `Array(${value.length})`;\n\n  if (typeof value === \"object\") {\n    const name = (value as object).constructor?.name;\n    if (name && name !== \"Object\") return name;\n    const keys = Object.keys(value as object);\n    if (keys.length <= 3) return `{ ${keys.join(\", \")} }`;\n    return `{ ${keys.slice(0, 3).join(\", \")}, … }`;\n  }\n\n  return String(value);\n}\n\n// ────────────────────────────────────────────\n// Cause formatting\n// ────────────────────────────────────────────\n\n/** Compact summary for overlay labels. */\nexport function formatCausesShort(causes: UpdateCause[]): string {\n  if (causes.length === 0) return \"\";\n\n  const parts: string[] = [];\n  for (const cause of causes) {\n    if (cause.kind === \"props\") {\n      parts.push(\"props\");\n    } else if (cause.kind === \"class-state\") {\n      parts.push(\"state\");\n    } else if (cause.kind === \"hook\" && cause.hookType) {\n      const indexSuffix = cause.hookIndex != null ? `[${cause.hookIndex}]` : \"\";\n      parts.push(`${cause.hookType}${indexSuffix}`);\n    } else {\n      parts.push(\"?\");\n    }\n  }\n\n  return parts.join(\", \");\n}\n\n/** Detailed lines for console output. */\nexport function formatCausesConsole(causes: UpdateCause[]): string[] {\n  const lines: string[] = [];\n\n  for (const cause of causes) {\n    if (cause.kind === \"props\") {\n      lines.push(\"  ↳ props changed (parent re-rendered)\");\n    } else if (cause.kind === \"class-state\") {\n      lines.push(\"  ↳ class state changed\");\n    } else if (cause.kind === \"hook\" && cause.hookType) {\n      const indexSuffix =\n        cause.hookIndex != null ? `[${cause.hookIndex}]` : \"\";\n      const name = `${cause.hookType}${indexSuffix}`;\n\n      if (cause.previousValue !== undefined && cause.nextValue !== undefined) {\n        lines.push(\n          `  ↳ ${name}: ${formatValue(cause.previousValue)} → ${formatValue(cause.nextValue)}`,\n        );\n      } else {\n        lines.push(`  ↳ ${name} changed`);\n      }\n    } else {\n      lines.push(\"  ↳ unknown cause\");\n    }\n  }\n\n  return lines;\n}\n\n// ────────────────────────────────────────────\n// Console output\n// ────────────────────────────────────────────\n\n/** Log re-renders as a collapsed console group. */\nexport function logRerendersToConsole(\n  entries: HighlightEntry[],\n  showCauses: boolean,\n) {\n  if (entries.length === 0) return;\n\n  console.groupCollapsed(\n    `%c⚛ ${entries.length} re-render${entries.length > 1 ? \"s\" : \"\"}`,\n    \"color: #61dafb; font-weight: bold\",\n  );\n\n  for (let i = 0; i < entries.length; i++) {\n    const entry = entries[i];\n    const durationText =\n      entry.duration > 0 ? ` (${entry.duration.toFixed(2)}ms)` : \"\";\n    console.log(\n      `%c${entry.component}%c ${entry.path}${durationText}`,\n      \"color: #e8e82e; font-weight: bold\",\n      \"color: #888\",\n    );\n\n    if (showCauses && entry.causes.length > 0) {\n      const lines = formatCausesConsole(entry.causes);\n      for (const line of lines) {\n        console.log(`%c${line}`, \"color: #aaa\");\n      }\n    }\n  }\n\n  console.groupEnd();\n}\n","// ────────────────────────────────────────────\n// Per-window overlay infrastructure\n// ────────────────────────────────────────────\n//\n// Performance:\n//  - Overlay elements pooled per window, reused via animationend\n//  - Single CSS @keyframes per window, no JS timers per element\n\nconst ANIMATION_NAME = \"__rdu-fade\";\n\nconst injectedWindows = new WeakSet<Window>();\n\nfunction ensureStylesheet(win: Window) {\n  if (injectedWindows.has(win)) return;\n  injectedWindows.add(win);\n\n  const style = win.document.createElement(\"style\");\n  style.textContent = `\n    @keyframes ${ANIMATION_NAME} {\n      0%   { opacity: 0; }\n      8%   { opacity: var(--rdu-opacity, 1); }\n      40%  { opacity: var(--rdu-opacity, 1); }\n      100% { opacity: 0; }\n    }\n    .${ANIMATION_NAME}-box {\n      position: fixed;\n      pointer-events: none;\n      box-sizing: border-box;\n      border-radius: 3px;\n      opacity: 0;\n      will-change: opacity;\n    }\n    .${ANIMATION_NAME}-label {\n      position: absolute;\n      top: -18px;\n      left: -1px;\n      font: 10px/16px ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n      padding: 0 4px;\n      color: #fff;\n      border-radius: 2px 2px 0 0;\n      white-space: nowrap;\n      pointer-events: none;\n    }\n  `;\n  win.document.head.appendChild(style);\n}\n\n// ────────────────────────────────────────────\n// Overlay root container\n// ────────────────────────────────────────────\n\nconst overlayRoots = new WeakMap<Window, HTMLDivElement>();\n\nfunction getOverlayRoot(win: Window): HTMLDivElement | null {\n  if (win.closed) return null;\n\n  const existing = overlayRoots.get(win);\n  if (existing?.isConnected) return existing;\n\n  ensureStylesheet(win);\n\n  const root = win.document.createElement(\"div\");\n  root.id = \"__react-debug-updates\";\n  Object.assign(root.style, {\n    position: \"fixed\",\n    top: \"0\",\n    left: \"0\",\n    width: \"0\",\n    height: \"0\",\n    overflow: \"visible\",\n    pointerEvents: \"none\",\n    zIndex: \"2147483647\",\n  } satisfies Partial<CSSStyleDeclaration>);\n  win.document.body.appendChild(root);\n\n  overlayRoots.set(win, root);\n  return root;\n}\n\n// ────────────────────────────────────────────\n// Element pool\n// ────────────────────────────────────────────\n\nconst pools = new WeakMap<Window, HTMLDivElement[]>();\n\nexport function acquireOverlay(win: Window): HTMLDivElement | null {\n  const root = getOverlayRoot(win);\n  if (!root) return null;\n\n  let pool = pools.get(win);\n  if (!pool) {\n    pool = [];\n    pools.set(win, pool);\n  }\n\n  const document = win.document;\n  let element = pool.pop();\n\n  if (!element) {\n    element = document.createElement(\"div\");\n    element.className = `${ANIMATION_NAME}-box`;\n\n    const label = document.createElement(\"span\");\n    label.className = `${ANIMATION_NAME}-label`;\n    element.appendChild(label);\n\n    element.addEventListener(\"animationend\", () => {\n      element!.style.animation = \"none\";\n      element!.remove();\n      pool!.push(element!);\n    });\n  }\n\n  root.appendChild(element);\n  return element;\n}\n\nexport function disposeAllOverlays() {\n  const mainRoot = overlayRoots.get(window);\n  mainRoot?.remove();\n  overlayRoots.delete(window);\n  pools.delete(window);\n}\n\nexport const OVERLAY_ANIMATION_NAME = ANIMATION_NAME;\n","import type { OverlayConfig, HighlightEntry } from \"./types.js\";\nimport { formatCausesShort } from \"./format.js\";\nimport { acquireOverlay, OVERLAY_ANIMATION_NAME } from \"./overlay.js\";\n\n// ────────────────────────────────────────────\n// Heat color\n// ────────────────────────────────────────────\n\nfunction heatColor(count: number, alpha: number): string {\n  const normalizedCount = Math.min((count - 1) / 7, 1);\n  const hue = 200 - normalizedCount * 200;\n  const saturation = 85 + normalizedCount * 15;\n  const lightness = 55 - normalizedCount * 10;\n  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;\n}\n\n// ────────────────────────────────────────────\n// Highlight scheduler\n// ────────────────────────────────────────────\n//\n// Commit path just pushes lightweight entries (no DOM reads, no formatting).\n// Flush (setInterval): batched rect reads → batched DOM writes.\n\ninterface CoalescedEntry {\n  count: number;\n  totalDuration: number;\n  component: string;\n  /** Shallowest fiber depth among coalesced entries (for z-ordering). */\n  depth: number;\n  domNode: HTMLElement;\n  ownerWindow: Window;\n  causeSummary: string;\n}\n\nexport function createHighlighter(config: OverlayConfig) {\n  let pending: HighlightEntry[] = [];\n  let timer: ReturnType<typeof setInterval> | null = null;\n\n  function flush() {\n    if (pending.length === 0) return;\n\n    const batch = pending;\n    pending = [];\n\n    // Coalesce by DOM node identity\n    const map = new Map<HTMLElement, CoalescedEntry>();\n\n    for (let i = 0; i < batch.length; i++) {\n      const entry = batch[i];\n      if (!entry.domNode) continue;\n\n      const existing = map.get(entry.domNode);\n      if (existing) {\n        existing.count++;\n        existing.totalDuration += entry.duration;\n        existing.depth = Math.min(existing.depth, entry.depth);\n      } else {\n        const win = entry.domNode.ownerDocument?.defaultView;\n        if (!win || win.closed) continue;\n        map.set(entry.domNode, {\n          count: 1,\n          totalDuration: entry.duration,\n          component: entry.component,\n          depth: entry.depth,\n          domNode: entry.domNode,\n          ownerWindow: win,\n          causeSummary: formatCausesShort(entry.causes),\n        });\n      }\n    }\n\n    // Read phase: batch all rect reads\n    const toShow: Array<{ coalesced: CoalescedEntry; rect: DOMRect }> = [];\n    for (const coalesced of map.values()) {\n      const rect = coalesced.domNode.getBoundingClientRect();\n      if (rect.width > 0 || rect.height > 0) {\n        toShow.push({ coalesced, rect });\n      }\n    }\n\n    // Sort deepest first so parents are appended last (render on top)\n    toShow.sort((a, b) => b.coalesced.depth - a.coalesced.depth);\n\n    // Write phase: position overlays\n    for (let i = 0; i < toShow.length; i++) {\n      const { coalesced, rect } = toShow[i];\n      const element = acquireOverlay(coalesced.ownerWindow);\n      if (!element) continue;\n\n      const fillColor = heatColor(coalesced.count, 0.18);\n      const borderColor = heatColor(coalesced.count, 0.75);\n      const labelBackground = heatColor(coalesced.count, 0.9);\n\n      const style = element.style;\n      style.top = `${rect.top}px`;\n      style.left = `${rect.left}px`;\n      style.width = `${rect.width}px`;\n      style.height = `${rect.height}px`;\n      style.backgroundColor = fillColor;\n      style.border = `1.5px solid ${borderColor}`;\n      style.setProperty(\"--rdu-opacity\", String(config.opacity));\n      style.animation = `${OVERLAY_ANIMATION_NAME} ${config.animationDuration}ms ease-out forwards`;\n\n      const label = element.firstElementChild as HTMLElement;\n      if (config.showLabels) {\n        const countText = coalesced.count > 1 ? ` ×${coalesced.count}` : \"\";\n        const durationText =\n          coalesced.totalDuration > 0\n            ? ` ${coalesced.totalDuration.toFixed(1)}ms`\n            : \"\";\n        const causeText = coalesced.causeSummary\n          ? ` (${coalesced.causeSummary})`\n          : \"\";\n        label.textContent = `${coalesced.component}${countText}${durationText}${causeText}`;\n        label.style.backgroundColor = labelBackground;\n      } else {\n        label.textContent = \"\";\n        label.style.backgroundColor = \"transparent\";\n      }\n    }\n  }\n\n  function push(entry: HighlightEntry) {\n    pending.push(entry);\n    if (!timer) {\n      timer = setInterval(flush, config.flushInterval);\n    }\n  }\n\n  function dispose() {\n    if (timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n    pending = [];\n  }\n\n  return { push, dispose };\n}\n","import type {\n  DevToolsHook,\n  FiberRoot,\n  HighlightEntry,\n  MonitorOptions,\n  RenderEntry,\n  UpdateMonitor,\n} from \"./types.js\";\nimport {\n  detectRenders,\n  findNearestDOMNode,\n  getComponentName,\n  getFiberPath,\n} from \"./fiber.js\";\nimport { detectCauses } from \"./causes.js\";\nimport { logRerendersToConsole } from \"./format.js\";\nimport { createHighlighter } from \"./highlights.js\";\nimport { disposeAllOverlays } from \"./overlay.js\";\n\n/**\n * Start monitoring React re-renders.\n *\n * Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot` to intercept\n * every React commit. Records re-render entries, optionally logs them to the\n * console, and optionally shows visual highlight overlays on re-rendered DOM nodes.\n *\n * Call this **before** React renders anything — ideally at the very top of\n * your entry point.\n *\n * Returns an `UpdateMonitor` handle, or `null` if the DevTools hook is not found.\n */\nexport function monitor(options: MonitorOptions = {}): UpdateMonitor | null {\n  const {\n    silent = false,\n    bufferSize = 500,\n    filter,\n    overlay = true,\n    mode = \"self-triggered\",\n    showCauses = false,\n    flushInterval = 250,\n    animationDuration = 1200,\n    showLabels = true,\n    opacity = 0.3,\n  } = options;\n\n  const hook = (\n    window as unknown as { __REACT_DEVTOOLS_GLOBAL_HOOK__?: DevToolsHook }\n  ).__REACT_DEVTOOLS_GLOBAL_HOOK__;\n\n  if (!hook) {\n    console.warn(\n      \"[react-debug-updates] __REACT_DEVTOOLS_GLOBAL_HOOK__ not found. \" +\n        \"Make sure React DevTools or a dev build of React is active.\",\n    );\n    return null;\n  }\n\n  const highlighter = overlay\n    ? createHighlighter({ flushInterval, animationDuration, showLabels, opacity })\n    : null;\n\n  const entries: RenderEntry[] = [];\n  const previousOnCommit = hook.onCommitFiberRoot.bind(hook);\n\n  hook.onCommitFiberRoot = (\n    rendererID: number,\n    root: FiberRoot,\n    priorityLevel?: unknown,\n  ) => {\n    previousOnCommit(rendererID, root, priorityLevel);\n\n    // 1. Detect which component fibers actually re-rendered (pure fiber analysis)\n    const detectedRenders = detectRenders(root.current, mode);\n    if (detectedRenders.length === 0) return;\n\n    // 2. Build full entries: resolve names, DOM nodes, causes\n    const highlightEntries: HighlightEntry[] = [];\n\n    for (let i = 0; i < detectedRenders.length; i++) {\n      const { fiber, depth } = detectedRenders[i];\n      const name = getComponentName(fiber);\n      if (!name) continue;\n\n      const highlightEntry: HighlightEntry = {\n        component: name,\n        path: getFiberPath(fiber),\n        duration: fiber.actualDuration ?? 0,\n        depth,\n        domNode: findNearestDOMNode(fiber),\n        causes: showCauses ? detectCauses(fiber) : [],\n      };\n\n      const renderEntry: RenderEntry = {\n        component: highlightEntry.component,\n        path: highlightEntry.path,\n        duration: highlightEntry.duration,\n        timestamp: performance.now(),\n        causes: highlightEntry.causes,\n      };\n\n      if (filter && !filter(renderEntry)) continue;\n\n      if (entries.length >= bufferSize) entries.shift();\n      entries.push(renderEntry);\n\n      highlightEntries.push(highlightEntry);\n      highlighter?.push(highlightEntry);\n    }\n\n    // 3. Console output\n    if (!silent) {\n      logRerendersToConsole(highlightEntries, showCauses);\n    }\n  };\n\n  const stop = () => {\n    hook.onCommitFiberRoot = previousOnCommit;\n    highlighter?.dispose();\n    disposeAllOverlays();\n  };\n\n  if (!silent) {\n    console.log(\n      \"%c⚛ react-debug-updates attached\",\n      \"color: #61dafb; font-weight: bold\",\n    );\n  }\n\n  return { entries, stop };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"react-debug-updates.js","sources":["../src/fiber.ts","../src/causes.ts","../src/format.ts","../src/overlay.ts","../src/highlights.ts","../src/monitor.ts"],"sourcesContent":["import type { Fiber, DetectedRender } from \"./types.js\";\n\n// ────────────────────────────────────────────\n// Fiber tag constants\n// ────────────────────────────────────────────\n\nexport const FiberTag = {\n  FunctionComponent: 0,\n  ClassComponent: 1,\n  HostComponent: 5,\n  ForwardRef: 11,\n  SimpleMemoComponent: 15,\n  MemoComponent: 14,\n} as const;\n\n// Component tags we report as re-renders.\n// MemoComponent (14) is excluded to avoid double-reporting — it's a wrapper\n// fiber around the inner component. The inner component (FunctionComponent,\n// ForwardRef, or SimpleMemoComponent) has its own PerformedWork flag and\n// will be reported correctly on its own.\nconst COMPONENT_TAGS = new Set<number>([\n  FiberTag.FunctionComponent,\n  FiberTag.ClassComponent,\n  FiberTag.ForwardRef,\n  FiberTag.SimpleMemoComponent,\n]);\n\nconst PerformedWork = 0b0000001;\n\n// ────────────────────────────────────────────\n// Fiber tree helpers\n// ────────────────────────────────────────────\n\nexport function getComponentName(fiber: Fiber): string | null {\n  const { type } = fiber;\n  if (!type || typeof type === \"string\") return null;\n  return type.displayName ?? type.name ?? null;\n}\n\nfunction isHTMLElement(value: unknown): value is HTMLElement {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    (value as Node).nodeType === 1 &&\n    typeof (value as HTMLElement).getBoundingClientRect === \"function\"\n  );\n}\n\nexport function findNearestDOMNode(fiber: Fiber): HTMLElement | null {\n  if (fiber.tag === FiberTag.HostComponent && isHTMLElement(fiber.stateNode)) {\n    return fiber.stateNode;\n  }\n  let child: Fiber | null = fiber.child;\n  while (child) {\n    const found = findNearestDOMNode(child);\n    if (found) return found;\n    child = child.sibling;\n  }\n  return null;\n}\n\nexport function getFiberPath(fiber: Fiber, maxDepth = 5): string {\n  const parts: string[] = [];\n  let current: Fiber | null = fiber.return;\n  let depth = 0;\n  while (current && depth < maxDepth) {\n    const name = getComponentName(current);\n    if (name) parts.unshift(name);\n    current = current.return;\n    depth++;\n  }\n  return parts.length ? parts.join(\" → \") : \"(root)\";\n}\n\n// ────────────────────────────────────────────\n// Self-triggered detection\n// ────────────────────────────────────────────\n\nfunction isSelfTriggered(fiber: Fiber): boolean {\n  const alternate = fiber.alternate;\n  if (!alternate) return false;\n  return fiber.memoizedProps === alternate.memoizedProps;\n}\n\n// ────────────────────────────────────────────\n// didFiberRender — mirrors React DevTools\n// ────────────────────────────────────────────\n//\n// See: react-devtools-shared/src/backend/fiber/shared/DevToolsFiberChangeDetection.js\n//\n// For component fibers (function, class, memo, forwardRef), React sets the\n// PerformedWork flag (bit 0) only when user code actually executes.\n// createWorkInProgress resets flags to NoFlags, so PerformedWork on a\n// work-in-progress fiber is always fresh — never stale from a prior commit.\n//\n// This check must only be called AFTER confirming prevFiber !== nextFiber\n// (i.e. the fiber was actually processed, not a bailed-out subtree).\n\nfunction didFiberRender(nextFiber: Fiber): boolean {\n  return (nextFiber.flags & PerformedWork) === PerformedWork;\n}\n\n// ────────────────────────────────────────────\n// Detect which components re-rendered in a commit\n// ────────────────────────────────────────────\n//\n// Mirrors React DevTools' updateFiberRecursively / updateChildrenRecursively.\n//\n// React double-buffers fibers. After a commit, root.current is the committed\n// tree and root.current.alternate is the previous tree. We walk both in\n// parallel. At each level, if prevChild and nextChild are the same object,\n// React bailed out that entire subtree (via cloneChildFibers) — we skip it.\n// Otherwise, we use nextChild.alternate as the previous fiber and check\n// didFiberRender (PerformedWork) to see if user code actually ran.\n//\n// Returns lightweight DetectedRender objects — just the fiber and its depth.\n// DOM lookup, cause detection, and formatting are the caller's responsibility.\n\nexport function detectRenders(\n  root: Fiber,\n  mode: \"self-triggered\" | \"all\",\n): DetectedRender[] {\n  const results: DetectedRender[] = [];\n  const selfTriggeredOnly = mode === \"self-triggered\";\n\n  // The alternate of the committed root is the previous tree's root.\n  // On initial mount this is null — nothing to report.\n  const previousRoot = root.alternate;\n  if (!previousRoot) return results;\n\n  function walk(\n    nextFiber: Fiber,\n    previousFiber: Fiber | null,\n    depth: number,\n  ) {\n    // ── Check this fiber ──\n    if (\n      COMPONENT_TAGS.has(nextFiber.tag) &&\n      previousFiber !== null &&\n      previousFiber !== nextFiber && // same object → bailed-out subtree\n      didFiberRender(nextFiber) &&\n      (!selfTriggeredOnly || isSelfTriggered(nextFiber))\n    ) {\n      results.push({ fiber: nextFiber, depth });\n    }\n\n    // ── Walk children, matching with previous tree ──\n    let nextChild = nextFiber.child;\n    let previousChildAtSameIndex = previousFiber?.child ?? null;\n\n    while (nextChild) {\n      let matchedPrevious: Fiber | null;\n\n      if (previousChildAtSameIndex === nextChild) {\n        // Same object identity — React shared this fiber via cloneChildFibers.\n        // The entire subtree was bailed out; passing the same object as both\n        // prev and next causes the prevFiber !== nextFiber guard to skip it.\n        matchedPrevious = nextChild;\n      } else {\n        // Different object — this fiber was processed. The alternate is the\n        // corresponding fiber from the previous tree.\n        matchedPrevious = nextChild.alternate;\n      }\n\n      walk(nextChild, matchedPrevious, depth + 1);\n\n      nextChild = nextChild.sibling;\n      previousChildAtSameIndex = previousChildAtSameIndex?.sibling ?? null;\n    }\n  }\n\n  walk(root, previousRoot, 0);\n  return results;\n}\n","import type { Fiber, HookNode, UpdateCause } from \"./types.js\";\nimport { FiberTag } from \"./fiber.js\";\n\n// ────────────────────────────────────────────\n// Update cause detection\n// ────────────────────────────────────────────\n//\n// For function components, React stores hooks as a linked list on\n// fiber.memoizedState. In dev builds, _debugHookTypes lists hook names\n// in call order. We walk both in parallel, comparing memoizedState\n// on each node to find which hook's state actually changed.\n//\n// Caveat: useContext does NOT create a linked list node, so we skip it\n// when advancing the pointer, and detect it by elimination.\n\n/**\n * Hooks whose memoizedState changing can trigger a re-render.\n * We only report these — useEffect/useMemo/etc. don't cause re-renders.\n */\nconst STATE_HOOKS = new Set([\n  \"useState\",\n  \"useReducer\",\n  \"useSyncExternalStore\",\n]);\n\n/**\n * Hooks that do NOT create a node in the memoizedState linked list.\n * Currently only useContext — every other hook allocates a node.\n */\nconst HOOKS_WITHOUT_NODE = new Set([\"useContext\"]);\n\nexport function detectCauses(fiber: Fiber): UpdateCause[] {\n  const alternate = fiber.alternate;\n  if (!alternate) return [];\n\n  const causes: UpdateCause[] = [];\n\n  // ── Props changed (parent re-rendered us with new props) ──\n  if (fiber.memoizedProps !== alternate.memoizedProps) {\n    causes.push({ kind: \"props\" });\n  }\n\n  // ── Class component ──\n  if (fiber.tag === FiberTag.ClassComponent) {\n    if (fiber.memoizedState !== alternate.memoizedState) {\n      causes.push({ kind: \"class-state\" });\n    }\n    return causes;\n  }\n\n  // ── Function component hooks ──\n  const hookTypes = fiber._debugHookTypes;\n\n  if (!hookTypes) {\n    // No debug info (prod build) — best effort\n    if (fiber.memoizedState !== alternate.memoizedState) {\n      causes.push({ kind: \"unknown\" });\n    }\n    return causes;\n  }\n\n  let currentNode = fiber.memoizedState as HookNode | null;\n  let previousNode = alternate.memoizedState as HookNode | null;\n  let hasContextHook = false;\n  let anyStateHookChanged = false;\n\n  for (let i = 0; i < hookTypes.length; i++) {\n    const type = hookTypes[i];\n\n    // useContext has no linked list node — skip pointer advance\n    if (HOOKS_WITHOUT_NODE.has(type)) {\n      if (type === \"useContext\") hasContextHook = true;\n      continue;\n    }\n\n    if (STATE_HOOKS.has(type) && currentNode && previousNode) {\n      if (!Object.is(currentNode.memoizedState, previousNode.memoizedState)) {\n        anyStateHookChanged = true;\n        causes.push({\n          kind: \"hook\",\n          hookIndex: i,\n          hookType: type,\n          previousValue: previousNode.memoizedState,\n          nextValue: currentNode.memoizedState,\n        });\n      }\n    }\n\n    currentNode = currentNode?.next ?? null;\n    previousNode = previousNode?.next ?? null;\n  }\n\n  // If no state hook changed but component is self-triggered and has\n  // useContext → the context value must have changed.\n  if (\n    hasContextHook &&\n    !anyStateHookChanged &&\n    fiber.memoizedProps === alternate.memoizedProps\n  ) {\n    causes.push({ kind: \"hook\", hookType: \"useContext\" });\n  }\n\n  // If still nothing and self-triggered, mark unknown\n  if (causes.length === 0 && fiber.memoizedProps === alternate.memoizedProps) {\n    causes.push({ kind: \"unknown\" });\n  }\n\n  return causes;\n}\n","import type { HighlightEntry, UpdateCause } from \"./types.js\";\n\n// ────────────────────────────────────────────\n// Value formatting\n// ────────────────────────────────────────────\n\nexport function formatValue(value: unknown, maxLength = 50): string {\n  if (value === null) return \"null\";\n  if (value === undefined) return \"undefined\";\n  if (typeof value === \"boolean\") return String(value);\n  if (typeof value === \"number\") return String(value);\n  if (typeof value === \"function\")\n    return `ƒ ${(value as { name?: string }).name || \"anonymous\"}`;\n\n  if (typeof value === \"string\") {\n    const truncated =\n      value.length > maxLength ? value.slice(0, maxLength) + \"…\" : value;\n    return JSON.stringify(truncated);\n  }\n\n  if (Array.isArray(value)) return `Array(${value.length})`;\n\n  if (typeof value === \"object\") {\n    const name = (value as object).constructor?.name;\n    if (name && name !== \"Object\") return name;\n    const keys = Object.keys(value as object);\n    if (keys.length <= 3) return `{ ${keys.join(\", \")} }`;\n    return `{ ${keys.slice(0, 3).join(\", \")}, … }`;\n  }\n\n  return String(value);\n}\n\n// ────────────────────────────────────────────\n// Cause formatting\n// ────────────────────────────────────────────\n\n/** Compact summary for overlay labels. */\nexport function formatCausesShort(causes: UpdateCause[]): string {\n  if (causes.length === 0) return \"\";\n\n  const parts: string[] = [];\n  for (const cause of causes) {\n    if (cause.kind === \"props\") {\n      parts.push(\"props\");\n    } else if (cause.kind === \"class-state\") {\n      parts.push(\"state\");\n    } else if (cause.kind === \"hook\" && cause.hookType) {\n      const indexSuffix = cause.hookIndex != null ? `[${cause.hookIndex}]` : \"\";\n      parts.push(`${cause.hookType}${indexSuffix}`);\n    } else {\n      parts.push(\"?\");\n    }\n  }\n\n  return parts.join(\", \");\n}\n\n/** Detailed lines for console output. */\nexport function formatCausesConsole(causes: UpdateCause[]): string[] {\n  const lines: string[] = [];\n\n  for (const cause of causes) {\n    if (cause.kind === \"props\") {\n      lines.push(\"  ↳ props changed (parent re-rendered)\");\n    } else if (cause.kind === \"class-state\") {\n      lines.push(\"  ↳ class state changed\");\n    } else if (cause.kind === \"hook\" && cause.hookType) {\n      const indexSuffix =\n        cause.hookIndex != null ? `[${cause.hookIndex}]` : \"\";\n      const name = `${cause.hookType}${indexSuffix}`;\n\n      if (cause.previousValue !== undefined && cause.nextValue !== undefined) {\n        lines.push(\n          `  ↳ ${name}: ${formatValue(cause.previousValue)} → ${formatValue(cause.nextValue)}`,\n        );\n      } else {\n        lines.push(`  ↳ ${name} changed`);\n      }\n    } else {\n      lines.push(\"  ↳ unknown cause\");\n    }\n  }\n\n  return lines;\n}\n\n// ────────────────────────────────────────────\n// Console output\n// ────────────────────────────────────────────\n\n/** Log re-renders as a collapsed console group. */\nexport function logRerendersToConsole(\n  entries: HighlightEntry[],\n  showCauses: boolean,\n) {\n  if (entries.length === 0) return;\n\n  console.groupCollapsed(\n    `%c⚛ ${entries.length} re-render${entries.length > 1 ? \"s\" : \"\"}`,\n    \"color: #61dafb; font-weight: bold\",\n  );\n\n  for (let i = 0; i < entries.length; i++) {\n    const entry = entries[i];\n    const durationText =\n      entry.duration > 0 ? ` (${entry.duration.toFixed(2)}ms)` : \"\";\n    console.log(\n      `%c${entry.component}%c ${entry.path}${durationText}`,\n      \"color: #e8e82e; font-weight: bold\",\n      \"color: #888\",\n    );\n\n    if (showCauses && entry.causes.length > 0) {\n      const lines = formatCausesConsole(entry.causes);\n      for (const line of lines) {\n        console.log(`%c${line}`, \"color: #aaa\");\n      }\n    }\n  }\n\n  console.groupEnd();\n}\n","// ────────────────────────────────────────────\n// Per-window overlay infrastructure\n// ────────────────────────────────────────────\n//\n// Performance:\n//  - Overlay elements pooled per window, reused via animationend\n//  - Single CSS @keyframes per window, no JS timers per element\n\nconst ANIMATION_NAME = \"__rdu-fade\";\n\nconst injectedWindows = new WeakSet<Window>();\n\nfunction ensureStylesheet(win: Window) {\n  if (injectedWindows.has(win)) return;\n  injectedWindows.add(win);\n\n  const style = win.document.createElement(\"style\");\n  style.textContent = `\n    @keyframes ${ANIMATION_NAME} {\n      0%   { opacity: 0; }\n      8%   { opacity: var(--rdu-opacity, 1); }\n      40%  { opacity: var(--rdu-opacity, 1); }\n      100% { opacity: 0; }\n    }\n    .${ANIMATION_NAME}-box {\n      position: fixed;\n      pointer-events: none;\n      box-sizing: border-box;\n      border-radius: 3px;\n      opacity: 0;\n      will-change: opacity;\n    }\n    .${ANIMATION_NAME}-label {\n      position: absolute;\n      top: -18px;\n      left: -1px;\n      font: 10px/16px ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n      padding: 0 4px;\n      color: #fff;\n      border-radius: 2px 2px 0 0;\n      white-space: nowrap;\n      pointer-events: none;\n    }\n  `;\n  win.document.head.appendChild(style);\n}\n\n// ────────────────────────────────────────────\n// Overlay root container\n// ────────────────────────────────────────────\n\nconst overlayRoots = new WeakMap<Window, HTMLDivElement>();\n\nfunction getOverlayRoot(win: Window): HTMLDivElement | null {\n  if (win.closed) return null;\n\n  const existing = overlayRoots.get(win);\n  if (existing?.isConnected) return existing;\n\n  ensureStylesheet(win);\n\n  const root = win.document.createElement(\"div\");\n  root.id = \"__react-debug-updates\";\n  Object.assign(root.style, {\n    position: \"fixed\",\n    top: \"0\",\n    left: \"0\",\n    width: \"0\",\n    height: \"0\",\n    overflow: \"visible\",\n    pointerEvents: \"none\",\n    zIndex: \"2147483647\",\n  } satisfies Partial<CSSStyleDeclaration>);\n  win.document.body.appendChild(root);\n\n  overlayRoots.set(win, root);\n  return root;\n}\n\n// ────────────────────────────────────────────\n// Element pool\n// ────────────────────────────────────────────\n\nconst pools = new WeakMap<Window, HTMLDivElement[]>();\n\nexport function acquireOverlay(win: Window): HTMLDivElement | null {\n  const root = getOverlayRoot(win);\n  if (!root) return null;\n\n  let pool = pools.get(win);\n  if (!pool) {\n    pool = [];\n    pools.set(win, pool);\n  }\n\n  const document = win.document;\n  let element = pool.pop();\n\n  if (!element) {\n    element = document.createElement(\"div\");\n    element.className = `${ANIMATION_NAME}-box`;\n\n    const label = document.createElement(\"span\");\n    label.className = `${ANIMATION_NAME}-label`;\n    element.appendChild(label);\n\n    element.addEventListener(\"animationend\", () => {\n      element!.style.animation = \"none\";\n      element!.remove();\n      pool!.push(element!);\n    });\n  }\n\n  root.appendChild(element);\n  return element;\n}\n\nexport function disposeAllOverlays() {\n  const mainRoot = overlayRoots.get(window);\n  mainRoot?.remove();\n  overlayRoots.delete(window);\n  pools.delete(window);\n}\n\nexport const OVERLAY_ANIMATION_NAME = ANIMATION_NAME;\n","import type { OverlayConfig, HighlightEntry } from \"./types.js\";\nimport { formatCausesShort } from \"./format.js\";\nimport { acquireOverlay, OVERLAY_ANIMATION_NAME } from \"./overlay.js\";\n\n// ────────────────────────────────────────────\n// Heat color\n// ────────────────────────────────────────────\n\nfunction heatColor(count: number, alpha: number): string {\n  const normalizedCount = Math.min((count - 1) / 7, 1);\n  const hue = 200 - normalizedCount * 200;\n  const saturation = 85 + normalizedCount * 15;\n  const lightness = 55 - normalizedCount * 10;\n  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;\n}\n\n// ────────────────────────────────────────────\n// Highlight scheduler\n// ────────────────────────────────────────────\n//\n// Commit path just pushes lightweight entries (no DOM reads, no formatting).\n// Flush (setInterval): batched rect reads → batched DOM writes.\n\ninterface CoalescedEntry {\n  count: number;\n  totalDuration: number;\n  component: string;\n  /** Shallowest fiber depth among coalesced entries (for z-ordering). */\n  depth: number;\n  domNode: HTMLElement;\n  ownerWindow: Window;\n  causeSummary: string;\n}\n\nexport function createHighlighter(config: OverlayConfig) {\n  let pending: HighlightEntry[] = [];\n  let timer: ReturnType<typeof setInterval> | null = null;\n\n  function flush() {\n    if (pending.length === 0) return;\n\n    const batch = pending;\n    pending = [];\n\n    // Coalesce by DOM node identity\n    const map = new Map<HTMLElement, CoalescedEntry>();\n\n    for (let i = 0; i < batch.length; i++) {\n      const entry = batch[i];\n      if (!entry.domNode) continue;\n\n      const existing = map.get(entry.domNode);\n      if (existing) {\n        existing.count++;\n        existing.totalDuration += entry.duration;\n        existing.depth = Math.min(existing.depth, entry.depth);\n      } else {\n        const win = entry.domNode.ownerDocument?.defaultView;\n        if (!win || win.closed) continue;\n        map.set(entry.domNode, {\n          count: 1,\n          totalDuration: entry.duration,\n          component: entry.component,\n          depth: entry.depth,\n          domNode: entry.domNode,\n          ownerWindow: win,\n          causeSummary: formatCausesShort(entry.causes),\n        });\n      }\n    }\n\n    // Read phase: batch all rect reads\n    const toShow: Array<{ coalesced: CoalescedEntry; rect: DOMRect }> = [];\n    for (const coalesced of map.values()) {\n      const rect = coalesced.domNode.getBoundingClientRect();\n      if (rect.width > 0 || rect.height > 0) {\n        toShow.push({ coalesced, rect });\n      }\n    }\n\n    // Sort deepest first so parents are appended last (render on top)\n    toShow.sort((a, b) => b.coalesced.depth - a.coalesced.depth);\n\n    // Write phase: position overlays\n    for (let i = 0; i < toShow.length; i++) {\n      const { coalesced, rect } = toShow[i];\n      const element = acquireOverlay(coalesced.ownerWindow);\n      if (!element) continue;\n\n      const fillColor = heatColor(coalesced.count, 0.18);\n      const borderColor = heatColor(coalesced.count, 0.75);\n      const labelBackground = heatColor(coalesced.count, 0.9);\n\n      const style = element.style;\n      style.top = `${rect.top}px`;\n      style.left = `${rect.left}px`;\n      style.width = `${rect.width}px`;\n      style.height = `${rect.height}px`;\n      style.backgroundColor = fillColor;\n      style.border = `1.5px solid ${borderColor}`;\n      style.setProperty(\"--rdu-opacity\", String(config.opacity));\n      style.animation = `${OVERLAY_ANIMATION_NAME} ${config.animationDuration}ms ease-out forwards`;\n\n      const label = element.firstElementChild as HTMLElement;\n      if (config.showLabels) {\n        const countText = coalesced.count > 1 ? ` ×${coalesced.count}` : \"\";\n        const durationText =\n          coalesced.totalDuration > 0\n            ? ` ${coalesced.totalDuration.toFixed(1)}ms`\n            : \"\";\n        const causeText = coalesced.causeSummary\n          ? ` (${coalesced.causeSummary})`\n          : \"\";\n        label.textContent = `${coalesced.component}${countText}${durationText}${causeText}`;\n        label.style.backgroundColor = labelBackground;\n      } else {\n        label.textContent = \"\";\n        label.style.backgroundColor = \"transparent\";\n      }\n    }\n  }\n\n  function push(entry: HighlightEntry) {\n    pending.push(entry);\n    if (!timer) {\n      timer = setInterval(flush, config.flushInterval);\n    }\n  }\n\n  function dispose() {\n    if (timer) {\n      clearInterval(timer);\n      timer = null;\n    }\n    pending = [];\n  }\n\n  return { push, dispose };\n}\n","import type {\n  DevToolsHook,\n  FiberRoot,\n  HighlightEntry,\n  MonitorOptions,\n} from \"./types.js\";\nimport {\n  detectRenders,\n  findNearestDOMNode,\n  getComponentName,\n  getFiberPath,\n} from \"./fiber.js\";\nimport { detectCauses } from \"./causes.js\";\nimport { logRerendersToConsole } from \"./format.js\";\nimport { createHighlighter } from \"./highlights.js\";\nimport { disposeAllOverlays } from \"./overlay.js\";\n\n/**\n * Ensure __REACT_DEVTOOLS_GLOBAL_HOOK__ exists on window.\n *\n * React reads this hook during initialization — if it's missing, React will\n * never connect. When this library is imported before React (the recommended\n * setup), we need to create a minimal hook so React can find and register with it.\n *\n * If a hook already exists (e.g. from the React DevTools extension), we leave\n * it untouched and hook into it.\n */\nfunction ensureDevToolsHook(win: Window): DevToolsHook {\n  const global = win as unknown as {\n    __REACT_DEVTOOLS_GLOBAL_HOOK__?: DevToolsHook;\n  };\n\n  if (!global.__REACT_DEVTOOLS_GLOBAL_HOOK__) {\n    global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {\n      supportsFiber: true,\n      inject() {\n        return 1;\n      },\n      onCommitFiberRoot() {},\n      onCommitFiberUnmount() {},\n      onPostCommitFiberRoot() {},\n      checkDCE() {},\n    } as DevToolsHook;\n  }\n\n  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n}\n\n/**\n * Start monitoring React re-renders.\n *\n * Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot` to intercept\n * every React commit. Shows visual highlight overlays on re-rendered DOM nodes\n * and optionally logs re-renders to the console.\n *\n * Call this **before** React renders anything — ideally at the very top of\n * your entry point.\n *\n * Returns a `stop` function to unhook and clean up, or `null` if called\n * in a non-browser environment (e.g. SSR).\n */\nexport function startReactUpdatesMonitor({\n  logToConsole = false,\n  highlight = true,\n  mode = \"self-triggered\",\n  reasonOfUpdate = false,\n  highlightFlushInterval = 250,\n  highlightAnimationDuration = 1200,\n  highlightShowLabels = true,\n  highlightOpacity = 0.3,\n}: MonitorOptions = {}): (() => void) | null {\n  // SSR guard — nothing to do without a DOM\n  if (typeof window === \"undefined\") return null;\n\n  const hook = ensureDevToolsHook(window);\n\n  const highlighter = highlight\n    ? createHighlighter({\n        flushInterval: highlightFlushInterval,\n        animationDuration: highlightAnimationDuration,\n        showLabels: highlightShowLabels,\n        opacity: highlightOpacity,\n      })\n    : null;\n\n  const previousOnCommit = hook.onCommitFiberRoot.bind(hook);\n\n  hook.onCommitFiberRoot = (\n    rendererID: number,\n    root: FiberRoot,\n    priorityLevel?: unknown,\n  ) => {\n    previousOnCommit(rendererID, root, priorityLevel);\n\n    // 1. Detect which component fibers actually re-rendered (pure fiber analysis)\n    const detectedRenders = detectRenders(root.current, mode);\n    if (detectedRenders.length === 0) return;\n\n    // 2. Build full entries: resolve names, DOM nodes, causes\n    const highlightEntries: HighlightEntry[] = [];\n\n    for (let i = 0; i < detectedRenders.length; i++) {\n      const { fiber, depth } = detectedRenders[i];\n      const name = getComponentName(fiber);\n      if (!name) continue;\n\n      const entry: HighlightEntry = {\n        component: name,\n        path: getFiberPath(fiber),\n        duration: fiber.actualDuration ?? 0,\n        depth,\n        domNode: findNearestDOMNode(fiber),\n        causes: reasonOfUpdate ? detectCauses(fiber) : [],\n      };\n\n      highlightEntries.push(entry);\n      highlighter?.push(entry);\n    }\n\n    // 3. Console output\n    if (logToConsole) {\n      logRerendersToConsole(highlightEntries, reasonOfUpdate);\n    }\n  };\n\n  if (logToConsole) {\n    console.log(\n      \"%c⚛ react-debug-updates attached\",\n      \"color: #61dafb; font-weight: bold\",\n    );\n  }\n\n  return () => {\n    hook.onCommitFiberRoot = previousOnCommit;\n    highlighter?.dispose();\n    disposeAllOverlays();\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -56,16 +56,7 @@ export interface OverlayConfig {
     showLabels: boolean;
     opacity: number;
 }
-export interface RenderEntry {
-    component: string;
-    path: string;
-    duration: number;
-    timestamp: number;
-    causes: UpdateCause[];
-}
 export interface MonitorOptions {
-    /** Suppress console output. Default: false */
-    silent?: boolean;
     /**
      * Which re-renders to track.
      *  - `"self-triggered"` — only components whose own state/hooks changed
@@ -74,10 +65,6 @@ export interface MonitorOptions {
      * Default: `"self-triggered"`
      */
     mode?: "self-triggered" | "all";
-    /** Ring buffer size for stored entries. Default: 500 */
-    bufferSize?: number;
-    /** Filter — return `false` to skip an entry. */
-    filter?: (entry: RenderEntry) => boolean;
     /**
      * Detect and display *why* each component re-rendered.
      *
@@ -85,21 +72,17 @@ export interface MonitorOptions {
      * with previous→next values for state hooks.
      * Requires a React dev build (`_debugHookTypes`). Default: `false`
      */
-    showCauses?: boolean;
+    reasonOfUpdate?: boolean;
+    /** Log re-renders to the console. Default: false */
+    logToConsole?: boolean;
     /** Enable visual highlight overlays. Default: true */
-    overlay?: boolean;
+    highlight?: boolean;
     /** Show text labels (component name, count, duration, cause) above overlays. Default: true */
-    showLabels?: boolean;
-    /** Peak opacity of overlay highlights (0–1). Default: 0.3 */
-    opacity?: number;
-    /** Time between overlay flush cycles (ms). Default: 250 */
-    flushInterval?: number;
-    /** Overlay fade-out animation duration (ms). Default: 1200 */
-    animationDuration?: number;
-}
-export interface UpdateMonitor {
-    /** Ring buffer of recorded re-render entries. */
-    entries: RenderEntry[];
-    /** Unhook from React and clean up overlays. */
-    stop: () => void;
+    highlightShowLabels?: boolean;
+    /** Peak opacity of highlight overlays (0–1). Default: 0.3 */
+    highlightOpacity?: number;
+    /** Time between highlight flush cycles (ms). Default: 250 */
+    highlightFlushInterval?: number;
+    /** Highlight fade-out animation duration (ms). Default: 1200 */
+    highlightAnimationDuration?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-debug-updates",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "See why React components re-render — visual overlays, console logging, and hook-level cause detection with zero code changes",
   "type": "module",
   "main": "./dist/react-debug-updates.cjs",