react-debug-updates 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# react-debug-updates
+
+Visual debugging overlays and console logging for React re-renders. See exactly which components re-render, how often, how long they take, and *why* they re-rendered — all without modifying your components.
+
+![highlight overlays](https://img.shields.io/badge/overlays-visual%20highlights-61dafb) ![zero config](https://img.shields.io/badge/setup-zero%20config-green)
+
+## How it works
+
+Hooks into `__REACT_DEVTOOLS_GLOBAL_HOOK__` to intercept every React commit. No wrappers, no HOCs, no code changes — just call `attachRenderLogger()` and you get:
+
+- **Console logging** — grouped, color-coded re-render reports with component tree paths and render durations
+- **Visual overlays** — highlight boxes on re-rendered DOM nodes with a heat-map color scale (blue → red as render count increases)
+- **Cause detection** — pinpoint *which* `useState`, `useReducer`, `useSyncExternalStore`, or `useContext` hook triggered each re-render, with previous→next values
+
+## Install
+
+```bash
+npm install react-debug-updates
+# or
+yarn add react-debug-updates
+# or
+pnpm add react-debug-updates
+```
+
+## Quick start
+
+```ts
+import { attachRenderLogger } from "react-debug-updates";
+
+// Call early in your app's entry point (dev only)
+const logger = attachRenderLogger({
+  highlight: true,
+  showCauses: true,
+});
+
+// Later, to clean up:
+logger?.disconnect();
+```
+
+### Dev-only guard
+
+```ts
+if (process.env.NODE_ENV === "development") {
+  const { attachRenderLogger } = await import("react-debug-updates");
+  attachRenderLogger({ highlight: true, showCauses: true });
+}
+```
+
+## Requirements
+
+- React **DevTools extension** installed, OR a **React dev build** (the library needs `__REACT_DEVTOOLS_GLOBAL_HOOK__`)
+- For `showCauses` and render durations: React must be in **dev mode** (provides `_debugHookTypes` and `actualDuration` on fibers)
+
+## API
+
+### `attachRenderLogger(options?): RenderLogger | null`
+
+Returns a `RenderLogger` handle, or `null` if the DevTools hook is not available.
+
+#### Options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `silent` | `boolean` | `false` | Suppress console output |
+| `mode` | `"self-triggered" \| "all"` | `"self-triggered"` | `"self-triggered"` tracks only components whose own state changed. `"all"` includes children swept by parent updates |
+| `bufferSize` | `number` | `500` | Max entries kept in the ring buffer |
+| `filter` | `(entry: RenderEntry) => boolean` | — | Return `false` to skip an entry |
+| `highlight` | `boolean \| HighlightOptions` | `false` | Enable visual overlay highlights |
+| `showCauses` | `boolean` | `false` | Detect and display why each component re-rendered |
+
+#### `HighlightOptions`
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `flushInterval` | `number` | `250` | Milliseconds between overlay flush cycles |
+| `animationDuration` | `number` | `1200` | Overlay fade-out animation duration (ms) |
+| `showLabels` | `boolean` | `true` | Show text labels (name, count, duration, cause) above overlays |
+
+### `RenderLogger`
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `entries` | `RenderEntry[]` | Ring buffer of recorded re-render entries |
+| `disconnect` | `() => 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`) |
+
+### `UpdateCause`
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `kind` | `"hook" \| "props" \| "class-state" \| "unknown"` | Category of the cause |
+| `hookIndex` | `number?` | Source-order index of the hook (0-based) |
+| `hookType` | `string?` | e.g. `"useState"`, `"useReducer"`, `"useContext"` |
+| `previousValue` | `unknown?` | Previous hook state value |
+| `nextValue` | `unknown?` | New hook state value |
+
+## Console output
+
+```
+⚛ 3 re-renders
+  Counter  App → Dashboard (0.42ms)
+    ↳ useState[0]: 5 → 6
+  TodoList  App → Dashboard (1.03ms)
+    ↳ props changed (parent re-rendered)
+  Sidebar  App (0.15ms)
+    ↳ useContext changed
+```
+
+## Visual overlays
+
+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)`
+
+## License
+
+MIT

package/dist/batcher.d.ts

@@ -0,0 +1,6 @@
+import type { HighlightOptions, PendingEntry } from "./types.js";
+export declare const HIGHLIGHT_DEFAULTS: Required<HighlightOptions>;
+export declare function createBatcher(options: Required<HighlightOptions>): {
+    push: (entry: PendingEntry) => void;
+    dispose: () => void;
+};

package/dist/causes.d.ts

@@ -0,0 +1,2 @@
+import type { Fiber, UpdateCause } from "./types.js";
+export declare function detectCauses(fiber: Fiber): UpdateCause[];

package/dist/fiber.d.ts

@@ -0,0 +1,13 @@
+import type { Fiber, PendingEntry } from "./types.js";
+export declare const FiberTag: {
+    readonly FunctionComponent: 0;
+    readonly ClassComponent: 1;
+    readonly HostComponent: 5;
+    readonly ForwardRef: 11;
+    readonly SimpleMemoComponent: 15;
+    readonly MemoComponent: 14;
+};
+export declare function getComponentName(fiber: Fiber): string | null;
+export declare function findNearestDOMNode(fiber: Fiber): HTMLElement | null;
+export declare function getFiberPath(fiber: Fiber, maxDepth?: number): string;
+export declare function collectPending(root: Fiber, mode: "self-triggered" | "all", trackCauses: boolean): PendingEntry[];

package/dist/format.d.ts

@@ -0,0 +1,6 @@
+import type { UpdateCause } from "./types.js";
+export declare function formatValue(value: unknown, maxLength?: number): string;
+/** Compact summary for overlay labels. */
+export declare function formatCausesShort(causes: UpdateCause[]): string;
+/** Detailed lines for console output. */
+export declare function formatCausesConsole(causes: UpdateCause[]): string[];

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { attachRenderLogger } from "./logger.js";
+export type { LoggerOptions, RenderLogger, RenderEntry, HighlightOptions, UpdateCause, } from "./types.js";

package/dist/logger.d.ts

@@ -0,0 +1,11 @@
+import type { LoggerOptions, RenderLogger } from "./types.js";
+/**
+ * Attach a render logger to React's DevTools hook.
+ *
+ * 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.
+ *
+ * Returns a `RenderLogger` handle, or `null` if the DevTools hook is not found.
+ */
+export declare function attachRenderLogger(options?: LoggerOptions): RenderLogger | null;

package/dist/overlay.d.ts

@@ -0,0 +1,3 @@
+export declare function acquireOverlay(win: Window): HTMLDivElement | null;
+export declare function disposeAllOverlays(): void;
+export declare const OVERLAY_ANIMATION_NAME = "__rdu-fade";

package/dist/react-debug-updates.cjs

@@ -0,0 +1,457 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const STATE_HOOKS = /* @__PURE__ */ new Set([
+  "useState",
+  "useReducer",
+  "useSyncExternalStore"
+]);
+const HOOKS_WITHOUT_NODE = /* @__PURE__ */ new Set(["useContext"]);
+function detectCauses(fiber) {
+  const alternate = fiber.alternate;
+  if (!alternate) return [];
+  const causes = [];
+  if (fiber.memoizedProps !== alternate.memoizedProps) {
+    causes.push({ kind: "props" });
+  }
+  if (fiber.tag === FiberTag.ClassComponent) {
+    if (fiber.memoizedState !== alternate.memoizedState) {
+      causes.push({ kind: "class-state" });
+    }
+    return causes;
+  }
+  const hookTypes = fiber._debugHookTypes;
+  if (!hookTypes) {
+    if (fiber.memoizedState !== alternate.memoizedState) {
+      causes.push({ kind: "unknown" });
+    }
+    return causes;
+  }
+  let currentNode = fiber.memoizedState;
+  let previousNode = alternate.memoizedState;
+  let hasContextHook = false;
+  let anyStateHookChanged = false;
+  for (let i = 0; i < hookTypes.length; i++) {
+    const type = hookTypes[i];
+    if (HOOKS_WITHOUT_NODE.has(type)) {
+      if (type === "useContext") hasContextHook = true;
+      continue;
+    }
+    if (STATE_HOOKS.has(type) && currentNode && previousNode) {
+      if (!Object.is(currentNode.memoizedState, previousNode.memoizedState)) {
+        anyStateHookChanged = true;
+        causes.push({
+          kind: "hook",
+          hookIndex: i,
+          hookType: type,
+          previousValue: previousNode.memoizedState,
+          nextValue: currentNode.memoizedState
+        });
+      }
+    }
+    currentNode = (currentNode == null ? void 0 : currentNode.next) ?? null;
+    previousNode = (previousNode == null ? void 0 : previousNode.next) ?? null;
+  }
+  if (hasContextHook && !anyStateHookChanged && fiber.memoizedProps === alternate.memoizedProps) {
+    causes.push({ kind: "hook", hookType: "useContext" });
+  }
+  if (causes.length === 0 && fiber.memoizedProps === alternate.memoizedProps) {
+    causes.push({ kind: "unknown" });
+  }
+  return causes;
+}
+const FiberTag = {
+  FunctionComponent: 0,
+  ClassComponent: 1,
+  HostComponent: 5,
+  ForwardRef: 11,
+  SimpleMemoComponent: 15,
+  MemoComponent: 14
+};
+const COMPONENT_TAGS = /* @__PURE__ */ new Set([
+  FiberTag.FunctionComponent,
+  FiberTag.ClassComponent,
+  FiberTag.ForwardRef,
+  FiberTag.SimpleMemoComponent,
+  FiberTag.MemoComponent
+]);
+const PerformedWork = 1;
+function getComponentName(fiber) {
+  const { type } = fiber;
+  if (!type || typeof type === "string") return null;
+  return type.displayName ?? type.name ?? null;
+}
+function isHTMLElement(value) {
+  return typeof value === "object" && value !== null && value.nodeType === 1 && typeof value.getBoundingClientRect === "function";
+}
+function findNearestDOMNode(fiber) {
+  if (fiber.tag === FiberTag.HostComponent && isHTMLElement(fiber.stateNode)) {
+    return fiber.stateNode;
+  }
+  let child = fiber.child;
+  while (child) {
+    const found = findNearestDOMNode(child);
+    if (found) return found;
+    child = child.sibling;
+  }
+  return null;
+}
+function getFiberPath(fiber, maxDepth = 5) {
+  const parts = [];
+  let current = fiber.return;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    const name = getComponentName(current);
+    if (name) parts.unshift(name);
+    current = current.return;
+    depth++;
+  }
+  return parts.length ? parts.join(" → ") : "(root)";
+}
+function isSelfTriggered(fiber) {
+  const alternate = fiber.alternate;
+  if (!alternate) return false;
+  return fiber.memoizedProps === alternate.memoizedProps;
+}
+function collectPending(root, mode, trackCauses) {
+  const entries = [];
+  const selfTriggeredOnly = mode === "self-triggered";
+  function walk(fiber) {
+    if (COMPONENT_TAGS.has(fiber.tag) && fiber.flags & PerformedWork && fiber.alternate !== null && (!selfTriggeredOnly || isSelfTriggered(fiber))) {
+      const name = getComponentName(fiber);
+      if (name) {
+        entries.push({
+          component: name,
+          path: getFiberPath(fiber),
+          duration: fiber.actualDuration ?? 0,
+          domNode: findNearestDOMNode(fiber),
+          causes: trackCauses ? detectCauses(fiber) : []
+        });
+      }
+    }
+    if (fiber.child) walk(fiber.child);
+    if (fiber.sibling) walk(fiber.sibling);
+  }
+  walk(root);
+  return entries;
+}
+function formatValue(value, maxLength = 50) {
+  var _a;
+  if (value === null) return "null";
+  if (value === void 0) return "undefined";
+  if (typeof value === "boolean") return String(value);
+  if (typeof value === "number") return String(value);
+  if (typeof value === "function")
+    return `ƒ ${value.name || "anonymous"}`;
+  if (typeof value === "string") {
+    const truncated = value.length > maxLength ? value.slice(0, maxLength) + "…" : value;
+    return JSON.stringify(truncated);
+  }
+  if (Array.isArray(value)) return `Array(${value.length})`;
+  if (typeof value === "object") {
+    const name = (_a = value.constructor) == null ? void 0 : _a.name;
+    if (name && name !== "Object") return name;
+    const keys = Object.keys(value);
+    if (keys.length <= 3) return `{ ${keys.join(", ")} }`;
+    return `{ ${keys.slice(0, 3).join(", ")}, … }`;
+  }
+  return String(value);
+}
+function formatCausesShort(causes) {
+  if (causes.length === 0) return "";
+  const parts = [];
+  for (const cause of causes) {
+    if (cause.kind === "props") {
+      parts.push("props");
+    } else if (cause.kind === "class-state") {
+      parts.push("state");
+    } else if (cause.kind === "hook" && cause.hookType) {
+      const indexSuffix = cause.hookIndex != null ? `[${cause.hookIndex}]` : "";
+      parts.push(`${cause.hookType}${indexSuffix}`);
+    } else {
+      parts.push("?");
+    }
+  }
+  return parts.join(", ");
+}
+function formatCausesConsole(causes) {
+  const lines = [];
+  for (const cause of causes) {
+    if (cause.kind === "props") {
+      lines.push("  ↳ props changed (parent re-rendered)");
+    } else if (cause.kind === "class-state") {
+      lines.push("  ↳ class state changed");
+    } else if (cause.kind === "hook" && cause.hookType) {
+      const indexSuffix = cause.hookIndex != null ? `[${cause.hookIndex}]` : "";
+      const name = `${cause.hookType}${indexSuffix}`;
+      if (cause.previousValue !== void 0 && cause.nextValue !== void 0) {
+        lines.push(
+          `  ↳ ${name}: ${formatValue(cause.previousValue)} → ${formatValue(cause.nextValue)}`
+        );
+      } else {
+        lines.push(`  ↳ ${name} changed`);
+      }
+    } else {
+      lines.push("  ↳ unknown cause");
+    }
+  }
+  return lines;
+}
+const ANIMATION_NAME = "__rdu-fade";
+const injectedWindows = /* @__PURE__ */ new WeakSet();
+function ensureStylesheet(win) {
+  if (injectedWindows.has(win)) return;
+  injectedWindows.add(win);
+  const style = win.document.createElement("style");
+  style.textContent = `
+    @keyframes ${ANIMATION_NAME} {
+      0%   { opacity: 0; }
+      8%   { opacity: 1; }
+      40%  { opacity: 1; }
+      100% { opacity: 0; }
+    }
+    .${ANIMATION_NAME}-box {
+      position: fixed;
+      pointer-events: none;
+      box-sizing: border-box;
+      border-radius: 3px;
+      opacity: 0;
+      will-change: opacity;
+    }
+    .${ANIMATION_NAME}-label {
+      position: absolute;
+      top: -18px;
+      left: -1px;
+      font: 10px/16px ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+      padding: 0 4px;
+      color: #fff;
+      border-radius: 2px 2px 0 0;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+  `;
+  win.document.head.appendChild(style);
+}
+const overlayRoots = /* @__PURE__ */ new WeakMap();
+function getOverlayRoot(win) {
+  if (win.closed) return null;
+  const existing = overlayRoots.get(win);
+  if (existing == null ? void 0 : existing.isConnected) return existing;
+  ensureStylesheet(win);
+  const root = win.document.createElement("div");
+  root.id = "__react-debug-updates";
+  Object.assign(root.style, {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "0",
+    height: "0",
+    overflow: "visible",
+    pointerEvents: "none",
+    zIndex: "2147483647"
+  });
+  win.document.body.appendChild(root);
+  overlayRoots.set(win, root);
+  return root;
+}
+const pools = /* @__PURE__ */ new WeakMap();
+function acquireOverlay(win) {
+  const root = getOverlayRoot(win);
+  if (!root) return null;
+  let pool = pools.get(win);
+  if (!pool) {
+    pool = [];
+    pools.set(win, pool);
+  }
+  const document = win.document;
+  let element = pool.pop();
+  if (!element) {
+    element = document.createElement("div");
+    element.className = `${ANIMATION_NAME}-box`;
+    const label = document.createElement("span");
+    label.className = `${ANIMATION_NAME}-label`;
+    element.appendChild(label);
+    element.addEventListener("animationend", () => {
+      element.style.animation = "none";
+      element.remove();
+      pool.push(element);
+    });
+  }
+  root.appendChild(element);
+  return element;
+}
+function disposeAllOverlays() {
+  const mainRoot = overlayRoots.get(window);
+  mainRoot == null ? void 0 : mainRoot.remove();
+  overlayRoots.delete(window);
+  pools.delete(window);
+}
+const OVERLAY_ANIMATION_NAME = ANIMATION_NAME;
+function heatColor(count, alpha) {
+  const normalizedCount = Math.min((count - 1) / 7, 1);
+  const hue = 200 - normalizedCount * 200;
+  const saturation = 85 + normalizedCount * 15;
+  const lightness = 55 - normalizedCount * 10;
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+}
+const HIGHLIGHT_DEFAULTS = {
+  flushInterval: 250,
+  animationDuration: 1200,
+  showLabels: true
+};
+function createBatcher(options) {
+  let pending = [];
+  let timer = null;
+  function flush() {
+    var _a;
+    if (pending.length === 0) return;
+    const batch = pending;
+    pending = [];
+    const map = /* @__PURE__ */ new Map();
+    for (let i = 0; i < batch.length; i++) {
+      const entry = batch[i];
+      if (!entry.domNode) continue;
+      const existing = map.get(entry.domNode);
+      if (existing) {
+        existing.count++;
+        existing.totalDuration += entry.duration;
+      } else {
+        const win = (_a = entry.domNode.ownerDocument) == null ? void 0 : _a.defaultView;
+        if (!win || win.closed) continue;
+        map.set(entry.domNode, {
+          count: 1,
+          totalDuration: entry.duration,
+          component: entry.component,
+          domNode: entry.domNode,
+          ownerWindow: win,
+          causeSummary: formatCausesShort(entry.causes)
+        });
+      }
+    }
+    const toShow = [];
+    for (const coalesced of map.values()) {
+      const rect = coalesced.domNode.getBoundingClientRect();
+      if (rect.width > 0 || rect.height > 0) {
+        toShow.push({ coalesced, rect });
+      }
+    }
+    for (let i = 0; i < toShow.length; i++) {
+      const { coalesced, rect } = toShow[i];
+      const element = acquireOverlay(coalesced.ownerWindow);
+      if (!element) continue;
+      const fillColor = heatColor(coalesced.count, 0.18);
+      const borderColor = heatColor(coalesced.count, 0.75);
+      const labelBackground = heatColor(coalesced.count, 0.9);
+      const style = element.style;
+      style.top = `${rect.top}px`;
+      style.left = `${rect.left}px`;
+      style.width = `${rect.width}px`;
+      style.height = `${rect.height}px`;
+      style.backgroundColor = fillColor;
+      style.border = `1.5px solid ${borderColor}`;
+      style.animation = `${OVERLAY_ANIMATION_NAME} ${options.animationDuration}ms ease-out forwards`;
+      const label = element.firstElementChild;
+      if (options.showLabels) {
+        const countText = coalesced.count > 1 ? ` ×${coalesced.count}` : "";
+        const durationText = coalesced.totalDuration > 0 ? ` ${coalesced.totalDuration.toFixed(1)}ms` : "";
+        const causeText = coalesced.causeSummary ? ` (${coalesced.causeSummary})` : "";
+        label.textContent = `${coalesced.component}${countText}${durationText}${causeText}`;
+        label.style.backgroundColor = labelBackground;
+      } else {
+        label.textContent = "";
+        label.style.backgroundColor = "transparent";
+      }
+    }
+  }
+  function push(entry) {
+    pending.push(entry);
+    if (!timer) {
+      timer = setInterval(flush, options.flushInterval);
+    }
+  }
+  function dispose() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+    pending = [];
+  }
+  return { push, dispose };
+}
+function attachRenderLogger(options = {}) {
+  const {
+    silent = false,
+    bufferSize = 500,
+    filter,
+    highlight = false,
+    mode = "self-triggered",
+    showCauses = false
+  } = 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;
+  }
+  const highlightOptions = highlight ? {
+    ...HIGHLIGHT_DEFAULTS,
+    ...typeof highlight === "object" ? highlight : {}
+  } : null;
+  const batcher = highlightOptions ? createBatcher(highlightOptions) : null;
+  const entries = [];
+  const previousOnCommit = hook.onCommitFiberRoot.bind(hook);
+  hook.onCommitFiberRoot = (rendererID, root, priorityLevel) => {
+    previousOnCommit(rendererID, root, priorityLevel);
+    const pendingEntries = collectPending(root.current, mode, showCauses);
+    for (let i = 0; i < pendingEntries.length; i++) {
+      const pendingEntry = pendingEntries[i];
+      const entry = {
+        component: pendingEntry.component,
+        path: pendingEntry.path,
+        duration: pendingEntry.duration,
+        timestamp: performance.now(),
+        causes: pendingEntry.causes
+      };
+      if (filter && !filter(entry)) continue;
+      if (entries.length >= bufferSize) entries.shift();
+      entries.push(entry);
+      batcher == null ? void 0 : batcher.push(pendingEntry);
+    }
+    if (!silent && pendingEntries.length > 0) {
+      console.groupCollapsed(
+        `%c⚛ ${pendingEntries.length} re-render${pendingEntries.length > 1 ? "s" : ""}`,
+        "color: #61dafb; font-weight: bold"
+      );
+      for (let i = 0; i < pendingEntries.length; i++) {
+        const pendingEntry = pendingEntries[i];
+        const durationText = pendingEntry.duration > 0 ? ` (${pendingEntry.duration.toFixed(2)}ms)` : "";
+        console.log(
+          `%c${pendingEntry.component}%c ${pendingEntry.path}${durationText}`,
+          "color: #e8e82e; font-weight: bold",
+          "color: #888"
+        );
+        if (showCauses && pendingEntry.causes.length > 0) {
+          const lines = formatCausesConsole(pendingEntry.causes);
+          for (const line of lines) {
+            console.log(`%c${line}`, "color: #aaa");
+          }
+        }
+      }
+      console.groupEnd();
+    }
+  };
+  const disconnect = () => {
+    hook.onCommitFiberRoot = previousOnCommit;
+    batcher == null ? void 0 : batcher.dispose();
+    disposeAllOverlays();
+  };
+  if (!silent) {
+    console.log(
+      "%c⚛ react-debug-updates attached",
+      "color: #61dafb; font-weight: bold"
+    );
+  }
+  return { entries, disconnect };
+}
+exports.attachRenderLogger = attachRenderLogger;
+//# sourceMappingURL=react-debug-updates.cjs.map