rerender-lens 0.1.0

package/dist/chunk-DOYB4MKH.cjs

@@ -0,0 +1,562 @@
+'use strict';
+
+// 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";
+function fixFor(change) {
+  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) {
+  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) {
+    reasons.push(
+      `re-rendered with identical props because its parent re-rendered. Wrap "${input.component}" in React.memo (or extend PureComponent).`
+    );
+  }
+  for (const c of input.propChanges) {
+    const fix = fixFor(c);
+    reasons.push(fix ? `${describe(c)}: ${fix}.` : `${describe(c)}.`);
+  }
+  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 (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.`);
+  }
+  return {
+    component: input.component,
+    renderCount: input.renderCount,
+    trigger,
+    avoidable,
+    props: { prev: input.prevProps, next: input.nextProps },
+    propChanges: input.propChanges,
+    stateChanges,
+    hookChanges,
+    reasons,
+    time: now()
+  };
+}
+var KIND_LABEL = {
+  "deep-equal": "equal by value",
+  function: "new function",
+  element: "equal element",
+  different: "changed",
+  added: "added",
+  removed: "removed"
+};
+function summarize(report) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const c of [...report.propChanges, ...report.stateChanges, ...report.hookChanges]) {
+    counts.set(c.kind, (counts.get(c.kind) ?? 0) + 1);
+  }
+  const parts = [...counts].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}`);
+  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 = {
+      React: null,
+      options: {},
+      generation: 0,
+      decisions: /* @__PURE__ */ new WeakMap(),
+      wrappers: /* @__PURE__ */ new WeakMap(),
+      wrapperSet: /* @__PURE__ */ new WeakSet(),
+      originals: {},
+      capture: null,
+      patched: false
+    };
+    g[KEY] = s;
+  }
+  return s;
+}
+function dispatch(report, override) {
+  const options = override ? { ...getState().options, ...override } : getState().options;
+  if (!options.silent && (report.avoidable || options.logAll)) {
+    printReport(report, options);
+  }
+  if (options.notifier) {
+    try {
+      options.notifier(report);
+    } catch (err) {
+      (options.console ?? console).warn("[rerender-lens] notifier threw", err);
+    }
+  }
+}
+
+// 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;
+}
+var SKIP_STATICS = /* @__PURE__ */ new Set(["length", "name", "prototype", "arguments", "caller", "$$typeof", "render", "type", "compare"]);
+function hoistStatics(from, to) {
+  for (const key of Object.getOwnPropertyNames(from)) {
+    if (SKIP_STATICS.has(key)) continue;
+    const desc = Object.getOwnPropertyDescriptor(from, key);
+    if (desc) {
+      try {
+        Object.defineProperty(to, key, desc);
+      } catch {
+      }
+    }
+  }
+}
+function sameHookRefs(prev, next) {
+  if (!prev || !next) return true;
+  if (prev.length !== next.length) return false;
+  for (let i = 0; i < prev.length; i++) if (!Object.is(prev[i].value, next[i].value)) return false;
+  return true;
+}
+function diffHooks(prev, next) {
+  if (!prev || !next) return [];
+  const out = [];
+  const len = Math.max(prev.length, next.length);
+  for (let i = 0; i < len; i++) {
+    const a = prev[i];
+    const b = next[i];
+    if (!a || !b) continue;
+    if (Object.is(a.value, b.value)) continue;
+    out.push({ path: `${b.hook}#${i}`, hook: b.hook, index: i, kind: classify(a.value, b.value), prev: a.value, next: b.value });
+  }
+  return out;
+}
+function wrapRender(R, render, name) {
+  const Wrapped = function(props, second) {
+    const s = getState();
+    const store = R.useRef(null);
+    const capture = s.options.trackHooks === false ? null : [];
+    const outer = s.capture;
+    s.capture = capture;
+    let result;
+    try {
+      result = render(props, second);
+    } finally {
+      s.capture = outer;
+    }
+    const prev = store.current;
+    if (!prev || !s.patched) {
+      store.current = { props, hooks: capture, count: prev?.count ?? 0 };
+      return result;
+    }
+    const sameProps = prev.props === props;
+    if (sameProps && sameHookRefs(prev.hooks, capture)) {
+      store.current = { props, hooks: capture, count: prev.count };
+      return result;
+    }
+    const count = prev.count + 1;
+    store.current = { props, hooks: capture, count };
+    dispatch(
+      buildReport({
+        component: name,
+        renderCount: count,
+        prevProps: prev.props,
+        nextProps: props,
+        propChanges: sameProps ? [] : diffRecords(prev.props, props),
+        hookChanges: diffHooks(prev.hooks, capture)
+      })
+    );
+    return result;
+  };
+  hoistStatics(render, Wrapped);
+  Object.defineProperty(Wrapped, "name", { value: name, configurable: true });
+  Wrapped.displayName = name;
+  return Wrapped;
+}
+var COUNT = /* @__PURE__ */ Symbol.for("rerender-lens.count");
+function wrapClass(Original, name) {
+  class Tracked extends Original {
+    componentDidUpdate(prevProps, prevState, snapshot) {
+      const s = getState();
+      if (s.patched) {
+        const self = this;
+        const count = self[COUNT] = (self[COUNT] ?? 0) + 1;
+        const propChanges = prevProps === this.props ? [] : diffRecords(prevProps, this.props);
+        const stateChanges = prevState === this.state ? [] : diffRecords(prevState ?? {}, this.state ?? {});
+        dispatch(
+          buildReport({
+            component: name,
+            renderCount: count,
+            prevProps,
+            nextProps: this.props,
+            propChanges,
+            stateChanges
+          })
+        );
+      }
+      const superDidUpdate = Original.prototype.componentDidUpdate;
+      if (superDidUpdate) superDidUpdate.call(this, prevProps, prevState, snapshot);
+    }
+  }
+  Tracked.displayName = name;
+  return Tracked;
+}
+function createWrapper(R, type) {
+  const name = getDisplayName(type);
+  if (isMemo(type)) {
+    const inner = createWrapper(R, type.type);
+    if (!inner) return null;
+    const wrapped = R.memo(inner, type.compare ?? void 0);
+    hoistStatics(type, wrapped);
+    wrapped.displayName = name;
+    return wrapped;
+  }
+  if (isForwardRef(type)) {
+    const wrapped = R.forwardRef(wrapRender(R, type.render, name));
+    hoistStatics(type, wrapped);
+    wrapped.displayName = name;
+    return wrapped;
+  }
+  if (isClass(type)) return wrapClass(type, name);
+  if (typeof type === "function") return wrapRender(R, type, name);
+  return null;
+}
+function resolveType(type) {
+  const s = getState();
+  if (!s.patched || !s.React) return type;
+  if (type === null || typeof type !== "function" && typeof type !== "object") return type;
+  if (s.wrapperSet.has(type)) return type;
+  let tracked;
+  const d = s.decisions.get(type);
+  if (d && d.generation === s.generation) {
+    tracked = d.tracked;
+  } else {
+    tracked = shouldTrack(type, s.options);
+    s.decisions.set(type, { generation: s.generation, tracked });
+  }
+  if (!tracked) return type;
+  let w = s.wrappers.get(type);
+  if (!w) {
+    const created = createWrapper(s.React, type);
+    if (!created) return type;
+    w = created;
+    s.wrappers.set(type, w);
+    s.wrapperSet.add(w);
+  }
+  return w;
+}
+var HOOK_KEYS = ["useState", "useReducer", "useContext", "useSyncExternalStore"];
+function assign(target, key, value) {
+  try {
+    target[key] = value;
+  } catch {
+  }
+  if (target[key] !== value) {
+    throw new Error(
+      `[rerender-lens] Cannot patch React.${key}. Pass the default import (\`import React from 'react'\`), not a namespace import.`
+    );
+  }
+}
+function init(R, options = {}) {
+  const s = getState();
+  if (s.patched) {
+    configure(options);
+    return disable;
+  }
+  s.React = R;
+  s.options = { ...options };
+  s.generation++;
+  const origCreateElement = R.createElement;
+  s.originals.createElement = origCreateElement;
+  assign(R, "createElement", function createElement(...args) {
+    args[0] = resolveType(args[0]);
+    return origCreateElement.apply(R, args);
+  });
+  for (const key of HOOK_KEYS) {
+    const orig = R[key];
+    if (typeof orig !== "function") continue;
+    s.originals[key] = orig;
+    const patched = function(...args) {
+      const r = orig.apply(this, args);
+      const cap = getState().capture;
+      if (cap) cap.push({ hook: key, value: key === "useState" || key === "useReducer" ? r[0] : r });
+      return r;
+    };
+    Object.defineProperty(patched, "name", { value: key, configurable: true });
+    assign(R, key, patched);
+  }
+  s.patched = true;
+  return disable;
+}
+function configure(options) {
+  const s = getState();
+  s.options = { ...s.options, ...options };
+  s.generation++;
+}
+function disable() {
+  const s = getState();
+  if (!s.patched || !s.React) return;
+  const R = s.React;
+  for (const [key, orig] of Object.entries(s.originals)) {
+    if (orig) R[key] = orig;
+  }
+  s.originals = {};
+  s.patched = false;
+  s.React = null;
+  s.capture = null;
+}
+function isEnabled() {
+  return getState().patched;
+}
+function track(component, name) {
+  const t = component;
+  t[MARKER] = true;
+  if (name) t.displayName = name;
+  return component;
+}
+
+exports.MARKER = MARKER;
+exports.buildReport = buildReport;
+exports.classify = classify;
+exports.configure = configure;
+exports.deepEqual = deepEqual;
+exports.diffRecords = diffRecords;
+exports.disable = disable;
+exports.dispatch = dispatch;
+exports.getDisplayName = getDisplayName;
+exports.getState = getState;
+exports.init = init;
+exports.isEnabled = isEnabled;
+exports.isReactElement = isReactElement;
+exports.printReport = printReport;
+exports.resolveType = resolveType;
+exports.summarize = summarize;
+exports.track = track;
+//# sourceMappingURL=chunk-DOYB4MKH.cjs.map
+//# sourceMappingURL=chunk-DOYB4MKH.cjs.map