rerender-lens 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,7 +1,832 @@
-import { diffRecords, dispatch, buildReport, getState, isReactElement, getDisplayName } from './chunk-3YHI7BCU.js';
-export { MARKER, buildReport, classify, configure, deepEqual, diffRecords, disable, getDisplayName, init, isEnabled, printReport, resolveType, summarize, track } from './chunk-3YHI7BCU.js';
 import { useRef, useEffect } from 'react';
 
+// src/types.ts
+var MARKER = "rerenderLens";
+
+// src/diff.ts
+var REACT_ELEMENT = /* @__PURE__ */ Symbol.for("react.element");
+var REACT_TRANSITIONAL_ELEMENT = /* @__PURE__ */ Symbol.for("react.transitional.element");
+function isReactElement(v) {
+  if (typeof v !== "object" || v === null) return false;
+  const t = v.$$typeof;
+  return t === REACT_ELEMENT || t === REACT_TRANSITIONAL_ELEMENT;
+}
+function isPlainObject(v) {
+  if (typeof v !== "object" || v === null) return false;
+  const proto = Object.getPrototypeOf(v);
+  return proto === Object.prototype || proto === null;
+}
+function remember(seen, a, b) {
+  let set = seen.get(a);
+  if (!set) {
+    set = /* @__PURE__ */ new Set();
+    seen.set(a, set);
+  }
+  if (set.has(b)) return true;
+  set.add(b);
+  return false;
+}
+function deepEqual(a, b, seen = /* @__PURE__ */ new Map()) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== "object" || a === null || b === null) return false;
+  const objA = a;
+  const objB = b;
+  if (remember(seen, objA, objB)) return true;
+  if (a instanceof Date) return b instanceof Date && a.getTime() === b.getTime();
+  if (a instanceof RegExp) return b instanceof RegExp && a.source === b.source && a.flags === b.flags;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) if (!deepEqual(a[i], b[i], seen)) return false;
+    return true;
+  }
+  if (Array.isArray(b)) return false;
+  if (ArrayBuffer.isView(a)) {
+    if (!ArrayBuffer.isView(b) || a.constructor !== b.constructor) return false;
+    const ta = a;
+    const tb = b;
+    if (ta.length !== tb.length) return false;
+    for (let i = 0; i < ta.length; i++) if (ta[i] !== tb[i]) return false;
+    return true;
+  }
+  if (a instanceof Map) {
+    if (!(b instanceof Map) || a.size !== b.size) return false;
+    for (const [k, v] of a) {
+      if (!b.has(k) || !deepEqual(v, b.get(k), seen)) return false;
+    }
+    return true;
+  }
+  if (a instanceof Set) {
+    if (!(b instanceof Set) || a.size !== b.size) return false;
+    outer: for (const v of a) {
+      if (b.has(v)) continue;
+      for (const w of b) if (deepEqual(v, w, seen)) continue outer;
+      return false;
+    }
+    return true;
+  }
+  if (isReactElement(a)) {
+    if (!isReactElement(b)) return false;
+    return a.type === b.type && a.key === b.key && deepEqual(a.props, b.props, seen);
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+    if (ka.length !== kb.length) return false;
+    for (const k of ka) {
+      if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+      if (!deepEqual(a[k], b[k], seen)) return false;
+    }
+    return true;
+  }
+  return false;
+}
+function classify(prev, next) {
+  if (typeof prev === "function" && typeof next === "function") {
+    return prev.name === next.name && prev.toString() === next.toString() ? "function" : "different";
+  }
+  if (isReactElement(prev) && isReactElement(next)) {
+    return deepEqual(prev, next) ? "element" : "different";
+  }
+  return deepEqual(prev, next) ? "deep-equal" : "different";
+}
+function joinPath(base, key) {
+  if (typeof key === "number") return `${base}[${key}]`;
+  if (base === "") return key;
+  return /^[A-Za-z_$][\w$]*$/.test(key) ? `${base}.${key}` : `${base}[${JSON.stringify(key)}]`;
+}
+function diffRecords(prev, next, basePath = "") {
+  const p = prev ?? {};
+  const n = next ?? {};
+  const changes = [];
+  const keys = /* @__PURE__ */ new Set([...Object.keys(p), ...Object.keys(n)]);
+  for (const key of keys) {
+    const inPrev = Object.prototype.hasOwnProperty.call(p, key);
+    const inNext = Object.prototype.hasOwnProperty.call(n, key);
+    const path = joinPath(basePath, key);
+    if (inPrev && !inNext) {
+      changes.push({ path, kind: "removed", prev: p[key], next: void 0 });
+      continue;
+    }
+    if (!inPrev && inNext) {
+      changes.push({ path, kind: "added", prev: void 0, next: n[key] });
+      continue;
+    }
+    const a = p[key];
+    const b = n[key];
+    if (Object.is(a, b)) continue;
+    const kind = classify(a, b);
+    if (kind === "different") {
+      changes.push({ path: firstDifferentPath(a, b, path), kind, prev: a, next: b });
+    } else {
+      changes.push({ path, kind, prev: a, next: b });
+    }
+  }
+  return changes;
+}
+function firstDifferentPath(a, b, path, depth = 0) {
+  if (depth > 8) return path;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return `${path}.length`;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return firstDifferentPath(a[i], b[i], joinPath(path, i), depth + 1);
+    }
+    return path;
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+    for (const k of keys) {
+      if (!deepEqual(a[k], b[k])) return firstDifferentPath(a[k], b[k], joinPath(path, k), depth + 1);
+    }
+    return path;
+  }
+  return path;
+}
+
+// src/report.ts
+var now = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+var isGenuine = (c) => c.kind === "different" || c.kind === "added" || c.kind === "removed";
+var isChildren = (change) => change.path === "children";
+function fixFor(change) {
+  if (isChildren(change) && (change.kind === "element" || change.kind === "deep-equal")) {
+    return `lift the children out of the parent's render: memoize them with useMemo, hoist static elements to module scope, or render them from a component that does not re-render`;
+  }
+  switch (change.kind) {
+    case "function":
+      return `wrap it in useCallback (or hoist it out of the parent's render)`;
+    case "element":
+      return `memoize the element with useMemo, or pass it as children from a stable parent`;
+    case "deep-equal":
+      return Array.isArray(change.next) ? `memoize the array with useMemo (same items, new reference)` : `memoize the object with useMemo, or hoist it to module scope if it is constant`;
+    default:
+      return "";
+  }
+}
+function describe(change) {
+  if (isChildren(change) && (change.kind === "element" || change.kind === "deep-equal")) {
+    return `children are new React elements with the same types and props on every render of the parent`;
+  }
+  switch (change.kind) {
+    case "deep-equal":
+      return `prop "${change.path}" is a new reference but deep-equal to the previous value`;
+    case "function":
+      return `prop "${change.path}" is a new function instance on every render`;
+    case "element":
+      return `prop "${change.path}" is a new React element with the same type and props`;
+    case "different":
+      return `prop "${change.path}" changed`;
+    case "added":
+      return `prop "${change.path}" was added`;
+    case "removed":
+      return `prop "${change.path}" was removed`;
+  }
+}
+function buildReport(input) {
+  const stateChanges = input.stateChanges ?? [];
+  const hookChanges = input.hookChanges ?? [];
+  const isStateHook = (h) => h.hook === "useState" || h.hook === "useReducer";
+  const genuineProps = input.propChanges.some(isGenuine);
+  const genuineState = stateChanges.some(isGenuine) || hookChanges.some((h) => isStateHook(h) && isGenuine(h));
+  const genuineHooks = hookChanges.some((h) => !isStateHook(h) && isGenuine(h));
+  const causes = [genuineProps && "props", genuineState && "state", genuineHooks && "hooks"].filter(Boolean);
+  let trigger;
+  if (causes.length === 0) trigger = "parent";
+  else if (causes.length === 1) trigger = causes[0];
+  else trigger = "mixed";
+  const avoidable = trigger === "parent";
+  const reasons = [];
+  if (avoidable && input.propChanges.length === 0 && stateChanges.length === 0 && hookChanges.length === 0) {
+    const who = input.parent ? `<${input.parent.name}> re-rendered (${describeTrigger(input.parent.trigger)})` : "its parent re-rendered";
+    reasons.push(`re-rendered with identical props because ${who}. Wrap "${input.component}" in React.memo (or extend PureComponent).`);
+  } else if (avoidable && input.parent) {
+    reasons.push(`caused by <${input.parent.name}> re-rendering (${describeTrigger(input.parent.trigger)}).`);
+  }
+  for (const c of input.propChanges) {
+    const fix = fixFor(c);
+    reasons.push(fix ? `${describe(c)}: ${fix}.` : `${describe(c)}.`);
+  }
+  const memoized = input.memoized !== false;
+  if (avoidable && !memoized && input.propChanges.length > 0) {
+    reasons.push(
+      `"${input.component}" is not memoized, so fixing the props alone will not stop this re-render: also wrap it in React.memo (or extend PureComponent).`
+    );
+  }
+  for (const c of stateChanges) {
+    if (isGenuine(c)) reasons.push(`state "${c.path}" changed.`);
+    else reasons.push(`setState was called with a value deep-equal to the current "${c.path}" (new reference, same contents).`);
+  }
+  for (const c of hookChanges) {
+    if (c.hook === "useContext" && isGenuine(c)) {
+      const where = c.provider && c.provider.component ? ` (provided by <${c.provider.component}>)` : "";
+      const keys = c.changedKeys && typeof c.totalKeys === "number" && c.changedKeys.length > 0 && c.changedKeys.length < c.totalKeys ? `: only ${c.changedKeys.map((k) => `"${k}"`).join(", ")} of ${c.totalKeys} keys changed, yet every consumer re-renders. Split the context or memoize the slices consumers read` : "";
+      reasons.push(`${c.path} changed${where}${keys}.`);
+    } else if (isGenuine(c)) reasons.push(`${c.hook} #${c.index} changed.`);
+    else if (isStateHook(c))
+      reasons.push(`${c.hook} #${c.index} was set to a value deep-equal to the current one (new reference, same contents): reuse the existing object or bail out before calling the setter.`);
+    else reasons.push(`${c.hook} #${c.index} returned a new reference that is deep-equal to the previous value: memoize the context/store value where it is produced.`);
+  }
+  const report = {
+    component: input.component,
+    instanceId: input.instanceId ?? 0,
+    commitId: input.commitId ?? 0,
+    renderCount: input.renderCount,
+    trigger,
+    avoidable,
+    memoized,
+    props: { prev: input.prevProps, next: input.nextProps },
+    propChanges: input.propChanges,
+    stateChanges,
+    hookChanges,
+    parent: input.parent ?? null,
+    owner: input.owner ?? null,
+    path: input.path ?? [],
+    reasons,
+    time: now()
+  };
+  if (input.selfDuration !== void 0) report.selfDuration = input.selfDuration;
+  if (input.treeDuration !== void 0) report.treeDuration = input.treeDuration;
+  if (input.commitPriority) report.commitPriority = input.commitPriority;
+  if (input.source) report.source = input.source;
+  return report;
+}
+function describeTrigger(t) {
+  switch (t) {
+    case "props":
+      return "its props changed";
+    case "state":
+      return "its state changed";
+    case "hooks":
+      return "a context or store it reads changed";
+    case "mixed":
+      return "its props and state changed";
+    default:
+      return "its own parent re-rendered";
+  }
+}
+var KIND_LABEL = {
+  "deep-equal": "equal by value",
+  function: "new function",
+  element: "equal element",
+  different: "changed",
+  added: "added",
+  removed: "removed"
+};
+function summarize(report) {
+  const counts2 = /* @__PURE__ */ new Map();
+  for (const c of [...report.propChanges, ...report.stateChanges, ...report.hookChanges]) {
+    counts2.set(c.kind, (counts2.get(c.kind) ?? 0) + 1);
+  }
+  const parts = [...counts2].map(([kind, n]) => `${n} ${KIND_LABEL[kind]}`);
+  if (parts.length === 0) parts.push("no changes");
+  return parts.join(", ");
+}
+function printReport(report, options) {
+  const c = options.console ?? console;
+  const open = options.collapse === false ? c.group : c.groupCollapsed;
+  const verdict = report.avoidable ? "avoidable re-render" : `re-render (${report.trigger})`;
+  open.call(c, `[rerender-lens] <${report.component}> ${verdict}: ${summarize(report)}`);
+  for (const r of report.reasons) c.log(`- ${r}`);
+  if (report.path.length) c.log(`at ${[...report.path, report.component].join(" > ")}`);
+  for (const ch of [...report.propChanges, ...report.stateChanges, ...report.hookChanges]) {
+    c.log(`${ch.path} (${KIND_LABEL[ch.kind]})`, { prev: ch.prev, next: ch.next });
+  }
+  c.log("props", report.props);
+  c.groupEnd();
+}
+
+// src/state.ts
+var KEY = /* @__PURE__ */ Symbol.for("rerender-lens.state");
+function getState() {
+  const g = globalThis;
+  let s = g[KEY];
+  if (!s) {
+    s = { options: {}, enabled: false, printed: /* @__PURE__ */ new Map(), detach: null, nextInstanceId: 1, nextCommitId: 1, warnedOnce: /* @__PURE__ */ new Set(), scheduled: 0, commits: 0 };
+    g[KEY] = s;
+  }
+  return s;
+}
+function warnOnce(key, message) {
+  const s = getState();
+  if (s.warnedOnce.has(key)) return;
+  s.warnedOnce.add(key);
+  (s.options.console ?? console).warn(`[rerender-lens] ${message}`);
+}
+function dispatch(report, override) {
+  const s = getState();
+  const options = override ? { ...s.options, ...override } : s.options;
+  if (!options.silent && (report.avoidable || options.logAll)) {
+    const max = options.maxReportsPerComponent ?? 0;
+    const n = (s.printed.get(report.component) ?? 0) + 1;
+    s.printed.set(report.component, n);
+    if (max <= 0 || n <= max) {
+      printReport(report, options);
+    } else if (n === max + 1) {
+      (options.console ?? console).log(
+        `[rerender-lens] <${report.component}> reached maxReportsPerComponent (${max}); further reports are not printed.`
+      );
+    }
+  }
+  if (options.notifier) {
+    try {
+      options.notifier(report);
+    } catch (err) {
+      (options.console ?? console).warn("[rerender-lens] notifier threw", err);
+    }
+  }
+}
+
+// src/fiber.ts
+var FunctionComponent = 0;
+var ClassComponent = 1;
+var HostRoot = 3;
+var HostComponent = 5;
+var ContextProvider = 10;
+var ForwardRef = 11;
+var MemoComponent = 14;
+var SimpleMemoComponent = 15;
+var PerformedWork = 1;
+var HOOK = "__REACT_DEVTOOLS_GLOBAL_HOOK__";
+function ensureDevtoolsHook() {
+  const g = globalThis;
+  let hook = g[HOOK];
+  if (!hook) {
+    let nextId = 0;
+    const renderers = /* @__PURE__ */ new Map();
+    hook = {
+      renderers,
+      supportsFiber: true,
+      inject(renderer) {
+        const id = ++nextId;
+        renderers.set(id, renderer);
+        return id;
+      },
+      onCommitFiberRoot() {
+      },
+      onCommitFiberUnmount() {
+      },
+      onScheduleFiberRoot() {
+      },
+      onPostCommitFiberRoot() {
+      }
+    };
+    g[HOOK] = hook;
+  }
+  return hook;
+}
+var capturedRenderers = /* @__PURE__ */ new Map();
+var INJECT_WRAPPED = /* @__PURE__ */ Symbol.for("rerender-lens.injectWrapped");
+function pickRenderer(r) {
+  const info = r ?? {};
+  return { version: info.version, bundleType: info.bundleType, rendererPackageName: info.rendererPackageName };
+}
+function wrapInject(hook) {
+  const h = hook;
+  if (h[INJECT_WRAPPED] || typeof hook.inject !== "function") return;
+  const original = hook.inject;
+  hook.inject = function(renderer) {
+    const id = original.call(this, renderer);
+    capturedRenderers.set(typeof id === "number" ? id : capturedRenderers.size + 1, pickRenderer(renderer));
+    return id;
+  };
+  h[INJECT_WRAPPED] = true;
+}
+function attach() {
+  const hook = ensureDevtoolsHook();
+  wrapInject(hook);
+  const previous = hook.onCommitFiberRoot;
+  const patched = function(id, root, priority, didError) {
+    try {
+      onCommit(root, priorityLabel(priority));
+    } catch (err) {
+      warnOnce("commit", `failed to inspect a commit: ${String(err)}`);
+    }
+    if (typeof previous === "function") return previous.call(this, id, root, priority, didError);
+  };
+  hook.onCommitFiberRoot = patched;
+  const previousSchedule = hook.onScheduleFiberRoot;
+  const patchedSchedule = function(id, root, children) {
+    getState().scheduled++;
+    if (typeof previousSchedule === "function") return previousSchedule.call(this, id, root, children);
+  };
+  hook.onScheduleFiberRoot = patchedSchedule;
+  return () => {
+    if (hook.onCommitFiberRoot === patched) hook.onCommitFiberRoot = previous;
+    if (hook.onScheduleFiberRoot === patchedSchedule) hook.onScheduleFiberRoot = previousSchedule;
+  };
+}
+function priorityLabel(priority) {
+  switch (priority) {
+    case 1:
+      return "immediate";
+    case 2:
+      return "user-blocking";
+    case 3:
+      return "normal";
+    case 4:
+      return "low";
+    case 5:
+      return "idle";
+    default:
+      return void 0;
+  }
+}
+function getRenderers() {
+  const g = globalThis;
+  const hook = g[HOOK];
+  const byId = new Map(capturedRenderers);
+  if (hook && hook.renderers && typeof hook.renderers.forEach === "function") {
+    hook.renderers.forEach((r, id) => {
+      if (!byId.has(id)) byId.set(id, pickRenderer(r));
+    });
+  }
+  return [...byId.values()];
+}
+function isProductionReact() {
+  const renderers = getRenderers();
+  return renderers.length > 0 && renderers.every((r) => r.bundleType === 0);
+}
+var flagsOf = (f) => f.flags ?? f.effectTag ?? 0;
+var isComponentTag = (tag) => tag === FunctionComponent || tag === ClassComponent || tag === ForwardRef || tag === MemoComponent || tag === SimpleMemoComponent;
+function isMemoizedFiber(fiber) {
+  if (fiber.tag === MemoComponent || fiber.tag === SimpleMemoComponent) return true;
+  if (fiber.tag === ClassComponent) {
+    const inst = fiber.stateNode;
+    return !!(inst && inst.isPureReactComponent);
+  }
+  return false;
+}
+function durationsOf(fiber) {
+  if (typeof fiber.actualDuration !== "number") return null;
+  const tree = fiber.actualDuration;
+  let children = 0;
+  for (let c = fiber.child; c; c = c.sibling) if (typeof c.actualDuration === "number") children += c.actualDuration;
+  return { self: Math.max(0, tree - children), tree };
+}
+function fiberType(fiber) {
+  return fiber.elementType ?? fiber.type;
+}
+function fiberName(fiber) {
+  return getDisplayName(fiberType(fiber));
+}
+function didRender(fiber) {
+  return (flagsOf(fiber) & PerformedWork) !== 0;
+}
+function isHotSwapped(fiber, alt) {
+  return fiber.type !== alt.type;
+}
+var counts = /* @__PURE__ */ new WeakMap();
+var ids = /* @__PURE__ */ new WeakMap();
+var fibersById = /* @__PURE__ */ new Map();
+var hasWeakRef = typeof WeakRef === "function";
+function remember2(id, fiber) {
+  if (!hasWeakRef) return;
+  fibersById.set(id, new WeakRef(fiber));
+  if (fibersById.size > 5e3) {
+    for (const [k, ref] of fibersById) if (!ref.deref()) fibersById.delete(k);
+  }
+}
+function instanceIdOf(fiber) {
+  return ids.get(fiber) ?? (fiber.alternate ? ids.get(fiber.alternate) : void 0);
+}
+function fiberById(id) {
+  const f = fibersById.get(id)?.deref() ?? null;
+  if (!f) return null;
+  const alt = f.alternate;
+  if (alt && counts.get(alt) !== void 0 && (counts.get(alt) ?? 0) > (counts.get(f) ?? 0)) return alt;
+  return f;
+}
+function instanceId(fiber) {
+  const existing = instanceIdOf(fiber);
+  if (existing !== void 0) {
+    ids.set(fiber, existing);
+    remember2(existing, fiber);
+    return existing;
+  }
+  const s = getState();
+  const id = s.nextInstanceId++;
+  ids.set(fiber, id);
+  remember2(id, fiber);
+  return id;
+}
+function hostNodesOf(fiber, limit = 50) {
+  const out = [];
+  const stack = [];
+  for (let c = fiber.child; c; c = c.sibling) stack.push(c);
+  while (stack.length && out.length < limit) {
+    const f = stack.pop();
+    if (f.tag === HostComponent) {
+      if (typeof Element !== "undefined" && f.stateNode instanceof Element) out.push(f.stateNode);
+      continue;
+    }
+    for (let c = f.child; c; c = c.sibling) stack.push(c);
+  }
+  return out;
+}
+function fiberForNode(node) {
+  if (!node || typeof node !== "object") return null;
+  const key = Object.keys(node).find((k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$"));
+  return key ? node[key] ?? null : null;
+}
+function nearestComponent(fiber) {
+  let f = fiber;
+  while (f && f.tag !== HostRoot) {
+    if (isComponentTag(f.tag)) return f;
+    f = f.return;
+  }
+  return null;
+}
+var INTERNAL_FRAME = /react-dom|react_jsx|jsx-(dev-)?runtime|\/react\/|node_modules\/react|react-stack-bottom-frame|react_stack_bottom_frame|scheduler/;
+function parseStackLocation(stack) {
+  for (const line of stack.split("\n")) {
+    const m = /(?:at\s+(?:.*?\s+)?\(?|@)?((?:https?|file|webpack|vite|blob):[^\s()]+?):(\d+):(\d+)\)?\s*$/.exec(line.trim());
+    if (!m || !m[1] || INTERNAL_FRAME.test(m[1])) continue;
+    return { fileName: m[1], lineNumber: Number(m[2]), columnNumber: Number(m[3]) };
+  }
+  return void 0;
+}
+function sourceOf(fiber) {
+  const src = fiber._debugSource;
+  if (src && typeof src.fileName === "string") {
+    const out = { fileName: src.fileName };
+    if (typeof src.lineNumber === "number") out.lineNumber = src.lineNumber;
+    if (typeof src.columnNumber === "number") out.columnNumber = src.columnNumber;
+    return out;
+  }
+  const st = fiber._debugStack;
+  const text = typeof st === "string" ? st : st && typeof st.stack === "string" ? st.stack : null;
+  return text ? parseStackLocation(text) : void 0;
+}
+function bumpCount(fiber) {
+  const prev = counts.get(fiber) ?? (fiber.alternate ? counts.get(fiber.alternate) : void 0) ?? 0;
+  const n = prev + 1;
+  counts.set(fiber, n);
+  return n;
+}
+function componentPath(fiber) {
+  const path = [];
+  let f = fiber.return;
+  while (f && f.tag !== HostRoot) {
+    if (isComponentTag(f.tag)) path.unshift(fiberName(f));
+    f = f.return;
+  }
+  return path;
+}
+function ownerName(fiber) {
+  const owner = fiber._debugOwner;
+  if (!owner) return null;
+  if (owner.type !== void 0) return getDisplayName(owner.type);
+  return typeof owner.name === "string" ? owner.name : null;
+}
+var isStateNode = (n) => !!n.queue && typeof n.queue.lastRenderedReducer === "function";
+var isStoreNode = (n) => !!n.queue && typeof n.queue.getSnapshot === "function";
+function hookLabel(node) {
+  if (isStoreNode(node)) return "useSyncExternalStore";
+  if (isStateNode(node)) {
+    const r = node.queue.lastRenderedReducer;
+    return r.name === "basicStateReducer" ? "useState" : "useReducer";
+  }
+  return "state";
+}
+var NODELESS_HOOKS = /* @__PURE__ */ new Set(["useContext", "useDebugValue", "use"]);
+function diffHooks(fiber, alt) {
+  const out = [];
+  if (fiber.tag === ClassComponent) return out;
+  let a = alt.memoizedState;
+  let b = fiber.memoizedState;
+  if (!a || !b || typeof b !== "object" || !("next" in b)) return out;
+  const types = fiber._debugHookTypes?.filter((t) => !NODELESS_HOOKS.has(t));
+  let nodeCount = 0;
+  for (let n = b; n; n = n.next) nodeCount++;
+  const labels = types && types.length === nodeCount ? types : null;
+  let i = 0;
+  while (a && b) {
+    if ((isStateNode(b) || isStoreNode(b)) && !Object.is(a.memoizedState, b.memoizedState)) {
+      const hook = labels?.[i] ?? hookLabel(b);
+      out.push({
+        path: `${hook}#${i}`,
+        hook,
+        index: i,
+        kind: classify(a.memoizedState, b.memoizedState),
+        prev: a.memoizedState,
+        next: b.memoizedState
+      });
+    }
+    a = a.next;
+    b = b.next;
+    i++;
+  }
+  return out;
+}
+function findProvider(fiber, context) {
+  let f = fiber.return;
+  while (f && f.tag !== HostRoot) {
+    if (f.tag === ContextProvider) {
+      const t = f.type;
+      if (t === context || t && typeof t === "object" && t._context === context) return f;
+    }
+    f = f.return;
+  }
+  return null;
+}
+var isPlainObject2 = (v) => typeof v === "object" && v !== null && !Array.isArray(v) && Object.getPrototypeOf(v) === Object.prototype;
+function diffContexts(fiber, alt) {
+  const out = [];
+  let a = alt.dependencies?.firstContext ?? null;
+  let b = fiber.dependencies?.firstContext ?? null;
+  let i = 0;
+  while (a && b) {
+    if (a.context === b.context && !Object.is(a.memoizedValue, b.memoizedValue)) {
+      const name = b.context.displayName ?? "Context";
+      const change = {
+        path: `useContext(${name})`,
+        hook: "useContext",
+        index: i,
+        kind: classify(a.memoizedValue, b.memoizedValue),
+        prev: a.memoizedValue,
+        next: b.memoizedValue
+      };
+      const provider = findProvider(fiber, b.context);
+      if (provider) {
+        const path = componentPath(provider);
+        change.provider = { component: path[path.length - 1] ?? null, path };
+      }
+      if (isPlainObject2(a.memoizedValue) && isPlainObject2(b.memoizedValue)) {
+        const prev = a.memoizedValue;
+        const next = b.memoizedValue;
+        const keys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)]);
+        change.changedKeys = [...keys].filter((k) => !Object.is(prev[k], next[k]));
+        change.totalKeys = keys.size;
+      }
+      out.push(change);
+    }
+    a = a.next;
+    b = b.next;
+    i++;
+  }
+  return out;
+}
+var isGenuine2 = (c) => c.kind === "different" || c.kind === "added" || c.kind === "removed";
+function analyze(fiber, alt, trackHooks) {
+  const prevProps = alt.memoizedProps ?? {};
+  const nextProps = fiber.memoizedProps ?? {};
+  const propChanges = prevProps === nextProps ? [] : diffRecords(prevProps, nextProps);
+  let stateChanges = [];
+  let hookChanges = [];
+  if (fiber.tag === ClassComponent) {
+    if (alt.memoizedState !== fiber.memoizedState) {
+      stateChanges = diffRecords(
+        alt.memoizedState ?? {},
+        fiber.memoizedState ?? {}
+      );
+    }
+  } else if (trackHooks) {
+    hookChanges = [...diffHooks(fiber, alt), ...diffContexts(fiber, alt)];
+  }
+  const isStateHook = (h) => h.hook !== "useContext" && h.hook !== "useSyncExternalStore";
+  const causes = [];
+  if (propChanges.some(isGenuine2)) causes.push("props");
+  if (stateChanges.some(isGenuine2) || hookChanges.some((h) => isStateHook(h) && isGenuine2(h))) causes.push("state");
+  if (hookChanges.some((h) => !isStateHook(h) && isGenuine2(h))) causes.push("hooks");
+  const trigger = causes.length === 0 ? "parent" : causes.length === 1 ? causes[0] : "mixed";
+  return { propChanges, stateChanges, hookChanges, trigger };
+}
+function nearestRenderedAncestor(fiber, cache, trackHooks) {
+  let f = fiber.return;
+  while (f && f.tag !== HostRoot) {
+    if (isComponentTag(f.tag) && f.alternate && didRender(f)) {
+      let info = cache.get(f);
+      if (info === void 0) {
+        info = { name: fiberName(f), trigger: analyze(f, f.alternate, trackHooks).trigger };
+        cache.set(f, info);
+      }
+      return info;
+    }
+    f = f.return;
+  }
+  return null;
+}
+function onCommit(root, commitPriority) {
+  const s = getState();
+  if (!s.enabled) return;
+  s.commits++;
+  const o = s.options;
+  const trackHooks = o.trackHooks !== false;
+  const rendered = [];
+  let hot = false;
+  const stack = [root.current];
+  while (stack.length) {
+    const fiber = stack.pop();
+    const alt = fiber.alternate;
+    if (alt && isComponentTag(fiber.tag) && didRender(fiber)) {
+      if (isHotSwapped(fiber, alt)) hot = true;
+      if (shouldTrack(fiberType(fiber), o)) rendered.push(fiber);
+    }
+    if (!alt || fiber.child !== alt.child) {
+      for (let c = fiber.child; c; c = c.sibling) stack.push(c);
+    }
+  }
+  if (hot && o.ignoreHotReload !== false) return;
+  rendered.reverse();
+  if (rendered.length === 0) return;
+  const commitId = s.nextCommitId++;
+  const parentCache = /* @__PURE__ */ new Map();
+  for (const fiber of rendered) {
+    const alt = fiber.alternate;
+    const a = analyze(fiber, alt, trackHooks);
+    const durations = durationsOf(fiber);
+    const report = buildReport({
+      component: fiberName(fiber),
+      instanceId: instanceId(fiber),
+      renderCount: bumpCount(fiber),
+      prevProps: alt.memoizedProps ?? {},
+      nextProps: fiber.memoizedProps ?? {},
+      propChanges: a.propChanges,
+      stateChanges: a.stateChanges,
+      hookChanges: a.hookChanges,
+      parent: a.trigger === "parent" ? nearestRenderedAncestor(fiber, parentCache, trackHooks) : null,
+      owner: ownerName(fiber),
+      path: componentPath(fiber),
+      memoized: isMemoizedFiber(fiber),
+      selfDuration: durations ? durations.self : void 0,
+      treeDuration: durations ? durations.tree : void 0,
+      commitId,
+      commitPriority,
+      source: sourceOf(fiber)
+    });
+    dispatch(report);
+  }
+}
+
+// src/tracker.ts
+var MEMO = /* @__PURE__ */ Symbol.for("react.memo");
+var FORWARD_REF = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var isMemo = (t) => typeof t === "object" && t !== null && t.$$typeof === MEMO;
+var isForwardRef = (t) => typeof t === "object" && t !== null && t.$$typeof === FORWARD_REF;
+var isClass = (t) => typeof t === "function" && !!t.prototype?.isReactComponent;
+var isPureClass = (t) => isClass(t) && !!t.prototype.isPureReactComponent;
+var isComponentLike = (t) => typeof t === "function" || isMemo(t) || isForwardRef(t);
+function getDisplayName(type) {
+  if (typeof type === "string") return type;
+  if (isMemo(type)) return type.displayName ?? getDisplayName(type.type);
+  if (isForwardRef(type)) return type.displayName ?? getDisplayName(type.render);
+  if (typeof type === "function") {
+    const t = type;
+    return t.displayName ?? (t.name || "Anonymous");
+  }
+  return "Anonymous";
+}
+function hasMarker(type) {
+  if (type === null || typeof type !== "function" && typeof type !== "object") return false;
+  if (type[MARKER] === true) return true;
+  if (isMemo(type)) return hasMarker(type.type);
+  if (isForwardRef(type)) return hasMarker(type.render);
+  return false;
+}
+function matches(m, name) {
+  if (typeof m === "string") return m === name;
+  if (m instanceof RegExp) return m.test(name);
+  return m(name);
+}
+function shouldTrack(type, o) {
+  if (!isComponentLike(type)) return false;
+  const name = getDisplayName(type);
+  if (o.exclude?.some((m) => matches(m, name))) return false;
+  if (hasMarker(type)) return true;
+  if (o.include?.some((m) => matches(m, name))) return true;
+  if (o.trackAllComponents) return true;
+  if (o.trackAllMemoized) return isMemo(type) || isPureClass(type);
+  return false;
+}
+function init(options = {}) {
+  const s = getState();
+  s.options = { ...options };
+  s.printed.clear();
+  if (!s.enabled) {
+    s.detach = attach();
+    s.enabled = true;
+  }
+  return disable;
+}
+function configure(options) {
+  const s = getState();
+  s.options = { ...s.options, ...options };
+}
+function disable() {
+  const s = getState();
+  if (!s.enabled) return;
+  s.detach?.();
+  s.detach = null;
+  s.enabled = false;
+}
+function isEnabled() {
+  return getState().enabled;
+}
+function track(component, name) {
+  const t = component;
+  t[MARKER] = true;
+  if (name) t.displayName = name;
+  return component;
+}
 function useWhyRerender(name, values, options) {
   const ref = useRef({
     committed: null,
@@ -61,9 +886,99 @@ function combineNotifiers(...notifiers) {
   };
 }
 
+// src/overlay.ts
+var ROOT_ID = "rerender-lens-overlay";
+var layer = null;
+function ensureLayer() {
+  if (typeof document === "undefined" || !document.body) return null;
+  if (layer && layer.root.isConnected) return layer;
+  let root = document.getElementById(ROOT_ID);
+  if (!root) {
+    root = document.createElement("div");
+    root.id = ROOT_ID;
+    root.setAttribute("aria-hidden", "true");
+    Object.assign(root.style, {
+      position: "fixed",
+      inset: "0",
+      pointerEvents: "none",
+      zIndex: "2147483647",
+      overflow: "visible"
+    });
+    document.body.appendChild(root);
+  }
+  layer = { root, sticky: [] };
+  return layer;
+}
+function box(rect, color, fill, label) {
+  const b = document.createElement("div");
+  Object.assign(b.style, {
+    position: "absolute",
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${Math.max(rect.width, 2)}px`,
+    height: `${Math.max(rect.height, 2)}px`,
+    boxSizing: "border-box",
+    border: `2px solid ${color}`,
+    background: fill,
+    borderRadius: "2px"
+  });
+  if (label) {
+    const tag = document.createElement("span");
+    tag.textContent = label;
+    Object.assign(tag.style, {
+      position: "absolute",
+      left: "-2px",
+      top: rect.top > 20 ? "-20px" : "100%",
+      font: "11px/16px system-ui, sans-serif",
+      color: "#fff",
+      background: color,
+      padding: "1px 5px",
+      borderRadius: "2px",
+      whiteSpace: "nowrap"
+    });
+    b.appendChild(tag);
+  }
+  return b;
+}
+function highlight(target) {
+  const l = ensureLayer();
+  if (!l) return;
+  for (const s of l.sticky) s.remove();
+  l.sticky = [];
+  if (!target) return;
+  for (const node of target.nodes) {
+    const rect = node.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) continue;
+    const b = box(rect, "#1a73e8", "rgba(26, 115, 232, 0.12)", target.label);
+    l.root.appendChild(b);
+    l.sticky.push(b);
+  }
+}
+function clearHighlight() {
+  highlight(null);
+}
+function flash(target, duration = 500) {
+  const l = ensureLayer();
+  if (!l) return;
+  for (const node of target.nodes) {
+    const rect = node.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) continue;
+    const b = box(rect, "#d93025", "rgba(217, 48, 37, 0.15)");
+    b.style.transition = `opacity ${duration}ms ease-out`;
+    l.root.appendChild(b);
+    requestAnimationFrame(() => {
+      b.style.opacity = "0";
+    });
+    setTimeout(() => b.remove(), duration + 50);
+  }
+}
+
+// src/version.ts
+var VERSION = "0.2.0" ;
+
 // src/devtools.ts
 var DEVTOOLS_MARKER = "__rerenderLens";
-var PROTOCOL_VERSION = 1;
+var PROTOCOL_VERSION = 2;
 function serialize(value, maxDepth = 6, seen = /* @__PURE__ */ new WeakSet(), depth = 0) {
   if (value === null || value === void 0) return value;
   const t = typeof value;
@@ -77,7 +992,12 @@ function serialize(value, maxDepth = 6, seen = /* @__PURE__ */ new WeakSet(), de
   if (depth >= maxDepth) return "[\u2026]";
   seen.add(obj);
   try {
-    if (isReactElement(obj)) return `<${getDisplayName(obj.type)}>`;
+    if (isReactElement(obj)) {
+      const out2 = { $type: "element", name: getDisplayName(obj.type) };
+      if (obj.key !== null && obj.key !== void 0) out2.key = String(obj.key);
+      out2.props = serialize(obj.props, maxDepth, seen, depth + 1);
+      return out2;
+    }
     if (obj instanceof Date) return { $type: "Date", value: obj.toISOString() };
     if (obj instanceof RegExp) return { $type: "RegExp", value: String(obj) };
     if (obj instanceof Map) {
@@ -95,20 +1015,66 @@ function serialize(value, maxDepth = 6, seen = /* @__PURE__ */ new WeakSet(), de
     seen.delete(obj);
   }
 }
+var matcherToString = (m) => typeof m === "string" ? m : m instanceof RegExp ? String(m) : null;
+var stringToMatcher = (s) => {
+  const m = /^\/(.+)\/([a-z]*)$/.exec(s);
+  if (m && m[1] !== void 0) {
+    try {
+      return new RegExp(m[1], m[2]);
+    } catch {
+      return s;
+    }
+  }
+  return s;
+};
+function serializeOptions(o) {
+  const out = {};
+  const bools = ["trackAllMemoized", "trackAllComponents", "trackHooks", "logAll", "silent", "collapse", "ignoreHotReload"];
+  for (const k of bools) if (typeof o[k] === "boolean") out[k] = o[k];
+  if (typeof o.maxReportsPerComponent === "number") out.maxReportsPerComponent = o.maxReportsPerComponent;
+  if (o.include) out.include = o.include.map(matcherToString).filter((x) => x !== null);
+  if (o.exclude) out.exclude = o.exclude.map(matcherToString).filter((x) => x !== null);
+  return out;
+}
+function deserializeOptions(o) {
+  const out = {};
+  const bools = ["trackAllMemoized", "trackAllComponents", "trackHooks", "logAll", "silent", "collapse", "ignoreHotReload"];
+  for (const k of bools) if (typeof o[k] === "boolean") out[k] = o[k];
+  if (typeof o.maxReportsPerComponent === "number") out.maxReportsPerComponent = o.maxReportsPerComponent;
+  if (Array.isArray(o.include)) out.include = o.include.filter((s) => typeof s === "string" && s).map(stringToMatcher);
+  if (Array.isArray(o.exclude)) out.exclude = o.exclude.filter((s) => typeof s === "string" && s).map(stringToMatcher);
+  return out;
+}
 function createDevtoolsNotifier(options = {}) {
   const bufferSize = options.bufferSize ?? 300;
   const maxDepth = options.maxDepth ?? 6;
   const target = options.target ?? (typeof window !== "undefined" ? window : void 0);
   const buffer = [];
+  let seq = 0;
+  let flashOn = options.flashAvoidable ?? false;
   const post = (type, payload) => {
     if (!target) return;
     const msg = { [DEVTOOLS_MARKER]: true, version: PROTOCOL_VERSION, type, payload };
     target.postMessage(msg, "*");
   };
+  const source = options.source ?? "page";
+  const info = () => ({
+    count: buffer.length,
+    library: VERSION,
+    protocol: PROTOCOL_VERSION,
+    react: getRenderers(),
+    production: isProductionReact(),
+    enabled: isEnabled(),
+    options: serializeOptions(getState().options),
+    source,
+    injected: typeof window !== "undefined" && typeof window.__RERENDER_LENS_INJECTED__ === "string",
+    scheduled: getState().scheduled,
+    commits: getState().commits
+  });
   const bridge = {
     replay: () => {
-      post("hello", { count: buffer.length });
-      for (const p of buffer) post("report", p);
+      post("hello", info());
+      for (const e of buffer) post("report", e.payload);
     },
     clear: () => {
       buffer.length = 0;
@@ -117,18 +1083,70 @@ function createDevtoolsNotifier(options = {}) {
     get size() {
       return buffer.length;
     },
-    version: PROTOCOL_VERSION
+    version: PROTOCOL_VERSION,
+    library: VERSION,
+    info,
+    pull: (since = 0) => {
+      const first = buffer[0];
+      const dropped = since > 0 && !!first && first.seq > since + 1;
+      const reports = buffer.filter((e) => e.seq > since).map((e) => e.payload);
+      return { seq, reports, dropped };
+    },
+    configure: (next) => {
+      configure(deserializeOptions(next ?? {}));
+      return serializeOptions(getState().options);
+    },
+    getOptions: () => serializeOptions(getState().options),
+    highlight: (id) => {
+      if (id === null || id === void 0) {
+        clearHighlight();
+        return true;
+      }
+      const fiber = fiberById(id);
+      if (!fiber) {
+        clearHighlight();
+        return false;
+      }
+      const nodes = hostNodesOf(fiber);
+      highlight({ nodes, label: fiberName(fiber) });
+      return nodes.length > 0;
+    },
+    flashAvoidable: (on) => {
+      flashOn = !!on;
+    },
+    inspect: (node) => {
+      const comp = nearestComponent(fiberForNode(node));
+      if (!comp) return null;
+      const id = instanceIdOf(comp) ?? null;
+      const path = [];
+      let f = comp.return;
+      while (f) {
+        if (f.tag === 0 || f.tag === 1 || f.tag === 11 || f.tag === 14 || f.tag === 15) path.unshift(fiberName(f));
+        f = f.return;
+      }
+      return {
+        component: fiberName(comp),
+        instanceId: id,
+        tracked: shouldTrack(fiberType(comp), getState().options),
+        path,
+        reports: id === null ? [] : buffer.filter((e) => e.instanceId === id).slice(-20).map((e) => e.payload)
+      };
+    }
   };
   if (typeof window !== "undefined") window.__RERENDER_LENS_DEVTOOLS__ = bridge;
-  post("hello", { count: 0 });
+  post("hello", info());
   return (report) => {
     const payload = serialize(report, maxDepth);
-    buffer.push(payload);
+    buffer.push({ seq: ++seq, instanceId: report.instanceId, payload });
     if (buffer.length > bufferSize) buffer.splice(0, buffer.length - bufferSize);
     post("report", payload);
+    if (flashOn && report.avoidable && report.instanceId) {
+      const fiber = fiberById(report.instanceId);
+      if (fiber) flash({ nodes: hostNodesOf(fiber), label: report.component });
+    }
   };
 }
 
-export { DEVTOOLS_MARKER, PROTOCOL_VERSION, combineNotifiers, createCollector, createDevtoolsNotifier, serialize, useWhyRerender };
+export { DEVTOOLS_MARKER, MARKER, PROTOCOL_VERSION, VERSION, buildReport, classify, combineNotifiers, configure, createCollector, createDevtoolsNotifier, deepEqual, deserializeOptions, diffRecords, disable, ensureDevtoolsHook, getDisplayName, getRenderers, init, isEnabled, isProductionReact, printReport, serialize, serializeOptions, shouldTrack, summarize, track, useWhyRerender };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map