@buoy-gg/highlight-updates 7.0.40 → 7.0.42

package/lib/module/highlight-updates/utils/CommitProfiler.js

@@ -1,442 +1 @@
-"use strict";
-
-/**
- * CommitProfiler — per-component render counts + durations across a capture
- * window, React-DevTools-profiler style, without React DevTools attached.
- *
- * Wraps `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot` (the callback React
- * invokes after every commit) and, while a capture is active, walks the
- * committed fiber tree collecting composite fibers that performed work this
- * commit. Self duration follows React's convention: `actualDuration` minus the
- * sum of direct children's `actualDuration` (profiling timers are enabled in
- * dev builds, where Buoy runs).
- *
- * This is intentionally separate from the traceUpdates flow the highlight
- * overlay uses — traceUpdates emits host views with no timing data.
- *
- * Consumed by perf-monitor benchmarks via the shared-ui render-capture
- * registry (see the registration in this package's index.tsx).
- */
-
-import { isDevToolsComponentName, isRenderLoopUnsafeName } from "./devtoolsComponentNames";
-// One implementation, shared with the overlay's RenderCauseDetector — the two
-// classifiers are separate on purpose, but this question is not. See the file
-// for why the obvious identity check is wrong.
-import { ownStateChanged } from "./ownStateChanged";
-
-// React work tags for components that render user code.
-const FunctionComponent = 0;
-const ClassComponent = 1;
-const ForwardRef = 11;
-const MemoComponent = 14;
-const SimpleMemoComponent = 15;
-
-// React fiber flag: this fiber rendered (performed work) in the last commit.
-// Stable value 0b1 across React 16-19 (effectTag pre-18, flags after).
-const PerformedWork = 0b1;
-
-/** Overhead guardrail: stop walking a commit past this many visited fibers. */
-const MAX_FIBERS_PER_COMMIT = 10_000;
-
-/** Bound on distinct component names tracked; overflow still counts in totals. */
-const MAX_TRACKED_NAMES = 300;
-
-/** Components returned in the summary. */
-const TOP_COMPONENTS_CAP = 20;
-let hookInstalled = false;
-let active = false;
-let sawDurations = false;
-let captureDetail = false;
-let totalCommits = 0;
-let totalRenders = 0;
-let totalRenderMs = 0;
-let totalCauses = {};
-let buckets = new Map();
-function getHook() {
-  if (typeof global === "undefined") return null;
-  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? null;
-}
-function getFlags(fiber) {
-  const f = fiber.flags ?? fiber.effectTag;
-  return typeof f === "number" ? f : 0;
-}
-function isCompositeTag(tag) {
-  return tag === FunctionComponent || tag === ClassComponent || tag === ForwardRef || tag === MemoComponent || tag === SimpleMemoComponent;
-}
-
-/** Resolve a composite fiber's display name (DevTools conventions). */
-function getComponentName(fiber) {
-  const type = fiber.type;
-  try {
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ClassComponent:
-        return type?.displayName || type?.name || "Anonymous";
-      case ForwardRef:
-        return type?.displayName || type?.render?.displayName || type?.render?.name || "ForwardRef";
-      case MemoComponent:
-      case SimpleMemoComponent:
-        {
-          const inner = type?.type ?? fiber.elementType?.type;
-          return type?.displayName || inner?.displayName || inner?.name || "Memo";
-        }
-      default:
-        return "Anonymous";
-    }
-  } catch {
-    return "Anonymous";
-  }
-}
-
-/**
- * Self duration = own actualDuration minus direct children's. React's
- * bubbleProperties adds every direct child's actualDuration into the parent,
- * so subtracting them all back out is symmetric and exact.
- */
-function computeSelfMs(fiber) {
-  const actual = fiber.actualDuration;
-  if (typeof actual !== "number") return null;
-  let self = actual;
-  for (let child = fiber.child; child != null; child = child.sibling) {
-    if (typeof child.actualDuration === "number") self -= child.actualDuration;
-  }
-  return self > 0 ? self : 0;
-}
-
-// React Native framework wrapper components. Their renders are real work
-// but the actionable signal lives on the OWNING component (a Touchable
-// re-rendering is already visible as its parent re-rendering), so they're
-// folded into the capture totals and kept OUT of the per-component list.
-// This is a report-level filter only — unlike isDevToolsComponentName it
-// must NOT prune subtrees (their children are user components).
-const FRAMEWORK_WRAPPER_NAMES = new Set(["View", "Text", "Image", "ImageBackground", "ScrollView", "FlatList", "SectionList", "SafeAreaView", "KeyboardAvoidingView", "StatusBar", "ActivityIndicator", "RefreshControl", "Modal", "Switch", "Pressable", "PlatformPressable", "TouchableOpacity", "TouchableHighlight", "TouchableWithoutFeedback", "TouchableNativeFeedback", "PressabilityDebugView", "AnimatedComponent", "Wrapper"]);
-const FRAMEWORK_WRAPPER_PREFIXES = ["Animated(",
-// Animated(View), Animated(Text), Animated(FlatList), …
-"Pressability", "Virtualized",
-// VirtualizedList + its context providers
-"CellRenderer"];
-function isFrameworkWrapperName(name) {
-  if (FRAMEWORK_WRAPPER_NAMES.has(name)) return true;
-  for (let i = 0; i < FRAMEWORK_WRAPPER_PREFIXES.length; i++) {
-    if (name.startsWith(FRAMEWORK_WRAPPER_PREFIXES[i])) return true;
-  }
-  return false;
-}
-
-/** Bound on prop keys compared per render, so a fat props object can't stall a commit. */
-const MAX_PROPS_COMPARED = 40;
-/** Bound on distinct changed-prop key names remembered per component (detail tier). */
-const MAX_CHANGED_KEYS = 5;
-
-/**
- * Are two values for the same prop key equivalent despite differing identity?
- *
- * Functions always count as equivalent: a fresh arrow per render is THE
- * unstable-prop bug, and there's no way to compare behaviour anyway. Plain
- * objects and arrays compare one level deep, which catches `style={{...}}`
- * and `data={[...]}`. Anything else falls through to a real value change.
- */
-function isEquivalentValue(a, b) {
-  if (Object.is(a, b)) return true;
-  const ta = typeof a;
-  if (ta !== typeof b) return false;
-  if (ta === "function") return true;
-  if (a === null || b === null || ta !== "object") return false;
-  const aIsArray = Array.isArray(a);
-  if (aIsArray !== Array.isArray(b)) return false;
-  if (aIsArray) {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return false;
-    return true;
-  }
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    const k = keysA[i];
-    if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
-    if (!Object.is(a[k], b[k])) return false;
-  }
-  return true;
-}
-/**
- * Why did this fiber render?
- *
- * Simpler than the overlay's RenderCauseDetector, and deliberately so: that
- * one carries WeakMap fallbacks and fiber-swap detection because traceUpdates
- * hands it fibers at an ambiguous moment. Here we're inside onCommitFiberRoot
- * walking the committed tree, so `fiber` is current and `fiber.alternate` is
- * previous by definition. Porting the swap logic would be cargo-cult.
- */
-function detectCause(fiber, wantKeys) {
-  const prev = fiber.alternate;
-  if (!prev) return {
-    cause: "mount"
-  };
-  const nextProps = fiber.memoizedProps;
-  const prevProps = prev.memoizedProps;
-  if (nextProps !== prevProps && nextProps && prevProps) {
-    let sawChange = false;
-    let sawValueChange = false;
-    let changedKeys;
-    const keys = Object.keys(nextProps);
-    const limit = keys.length < MAX_PROPS_COMPARED ? keys.length : MAX_PROPS_COMPARED;
-    for (let i = 0; i < limit; i++) {
-      const k = keys[i];
-      const a = prevProps[k];
-      const b = nextProps[k];
-      if (Object.is(a, b)) continue;
-      sawChange = true;
-      if (wantKeys) {
-        if (!changedKeys) changedKeys = [];
-        if (changedKeys.length < MAX_CHANGED_KEYS) changedKeys.push(k);
-      }
-      if (!isEquivalentValue(a, b)) {
-        sawValueChange = true;
-        if (!wantKeys) break; // cause is settled; only keys need the full pass
-      }
-    }
-    // A removed key counts as a real change; cheap to detect via key count.
-    if (!sawValueChange && Object.keys(prevProps).length !== keys.length) {
-      sawChange = true;
-      sawValueChange = true;
-    }
-    if (sawChange) {
-      return {
-        cause: sawValueChange ? "props" : "propsUnstable",
-        changedKeys
-      };
-    }
-  }
-
-  // No prop change of substance. Own state/hooks next.
-  if (ownStateChanged(prev, fiber)) return {
-    cause: "hooks"
-  };
-  return {
-    cause: "parent"
-  };
-}
-
-/**
- * Nearest ancestor that ALSO rendered this commit and is worth naming — i.e.
- * skipping framework wrappers, which are never where a fix goes. Answers "who
- * dragged this along", which is the actionable half of a cascade.
- */
-function nearestRenderedAncestorName(fiber) {
-  for (let p = fiber.return; p != null; p = p.return) {
-    if (!isCompositeTag(p.tag)) continue;
-    if ((getFlags(p) & PerformedWork) === 0) continue;
-    const name = getComponentName(p);
-    if (isFrameworkWrapperName(name)) continue;
-    return name;
-  }
-  return undefined;
-}
-function recordRender(fiber, parentName) {
-  const name = getComponentName(fiber);
-  const selfMs = computeSelfMs(fiber);
-  if (selfMs !== null) sawDurations = true;
-  const ms = selfMs ?? 0;
-  totalRenders += 1;
-  totalRenderMs += ms;
-  const {
-    cause,
-    changedKeys
-  } = detectCause(fiber, captureDetail);
-  totalCauses[cause] = (totalCauses[cause] ?? 0) + 1;
-
-  // Framework wrappers count toward totals but never surface as a row.
-  if (isFrameworkWrapperName(name)) return;
-  let bucket = buckets.get(name);
-  if (!bucket) {
-    // Bounded map: overflow renders still count toward the totals above.
-    if (buckets.size >= MAX_TRACKED_NAMES) return;
-    bucket = {
-      renders: 0,
-      totalSelfMs: 0,
-      maxSelfMs: 0,
-      causes: {}
-    };
-    buckets.set(name, bucket);
-  }
-  bucket.renders += 1;
-  bucket.totalSelfMs += ms;
-  if (ms > bucket.maxSelfMs) bucket.maxSelfMs = ms;
-  bucket.causes[cause] = (bucket.causes[cause] ?? 0) + 1;
-  if (captureDetail) {
-    if (changedKeys) {
-      if (!bucket.changedProps) bucket.changedProps = new Set();
-      for (let i = 0; i < changedKeys.length; i++) {
-        if (bucket.changedProps.size >= MAX_CHANGED_KEYS) break;
-        bucket.changedProps.add(changedKeys[i]);
-      }
-    }
-    // First parent wins — a component rendered under several parents is rare,
-    // and the first is the one that showed up in the heaviest commit.
-    if (parentName && !bucket.parentName) bucket.parentName = parentName;
-  }
-}
-
-/**
- * Iterative walk (child → sibling → return) of the committed tree. Never
- * throws upward — a broken walk must not break React's commit.
- */
-function handleCommit(root) {
-  const start = root?.current;
-  if (!start) return;
-  const rendersBefore = totalRenders;
-  let visited = 0;
-  let fiber = start;
-  while (fiber != null) {
-    visited += 1;
-    if (visited > MAX_FIBERS_PER_COMMIT) break;
-    let skipSubtree = false;
-    const composite = isCompositeTag(fiber.tag);
-    if (composite) {
-      const compositeName = getComponentName(fiber);
-      // Only Buoy's render-tracking UI gets its SUBTREE pruned — walking it
-      // feeds its own renders back in and loops. Everything else that's merely
-      // devtools noise is skipped as a NODE and we keep descending: app
-      // components live underneath Buoy chrome, and pruning a subtree on a name
-      // match is what made a stray "Virtualized" prefix hide every FlatList in
-      // every app.
-      if (isRenderLoopUnsafeName(compositeName)) {
-        skipSubtree = true;
-      } else if (isDevToolsComponentName(compositeName)) {
-        // skip this node, keep walking its children
-      } else if ((getFlags(fiber) & PerformedWork) !== 0) {
-        // PerformedWork is the only trustworthy "rendered this commit"
-        // signal — actualDuration is stale on bailed-out fibers.
-        recordRender(fiber, captureDetail ? nearestRenderedAncestorName(fiber) : undefined);
-      }
-    }
-    if (!skipSubtree) {
-      // Prune subtrees with no work. subtreeFlags only exists on React 18+;
-      // when absent, always descend.
-      const subtreeFlags = fiber.subtreeFlags;
-      const noSubtreeWork = typeof subtreeFlags === "number" && (subtreeFlags & PerformedWork) === 0 && (getFlags(fiber) & PerformedWork) === 0;
-      if (!noSubtreeWork && fiber.child != null) {
-        fiber = fiber.child;
-        continue;
-      }
-    }
-
-    // No descend: advance to sibling, climbing up as needed.
-    while (fiber != null) {
-      if (fiber === start) return finalizeCommit(rendersBefore);
-      if (fiber.sibling != null) {
-        fiber = fiber.sibling;
-        break;
-      }
-      fiber = fiber.return;
-    }
-  }
-  finalizeCommit(rendersBefore);
-}
-function finalizeCommit(rendersBefore) {
-  if (totalRenders > rendersBefore) totalCommits += 1;
-}
-
-/**
- * Install the onCommitFiberRoot wrapper once and never restore it — the
- * `active` flag gates all work, and never restoring avoids clobber races if
- * something else (e.g. React DevTools attaching mid-session) wraps the hook
- * after us. The wrapper dies with the JS realm on reload.
- */
-function ensureHookInstalled() {
-  if (hookInstalled) return true;
-  const hook = getHook();
-  if (!hook) return false;
-  const original = hook.onCommitFiberRoot;
-  hook.onCommitFiberRoot = function (rendererID, root, ...rest) {
-    if (active) {
-      try {
-        handleCommit(root);
-      } catch {
-        // Capture must never break React's commit path.
-      }
-    }
-    return typeof original === "function" ? original.call(hook, rendererID, root, ...rest) : undefined;
-  };
-  hookInstalled = true;
-  return true;
-}
-function isSupported() {
-  if (typeof __DEV__ !== "undefined" && !__DEV__) return false;
-  const hook = getHook();
-  return Boolean(hook && hook.renderers && hook.renderers.size > 0);
-}
-function isCapturing() {
-  return active;
-}
-
-/**
- * Begin a capture window, discarding any previous unclaimed data.
- *
- * `detail` turns on the allocating tier — changed prop key names and parent
- * component names. Causes themselves are always classified: it costs a shallow
- * prop compare, against a `computeSelfMs` that already walks every direct
- * child on every render, and the wasted-render total is the number most worth
- * seeing without having to know to ask for it.
- */
-function startCapture(opts) {
-  if (!ensureHookInstalled()) return;
-  buckets = new Map();
-  sawDurations = false;
-  captureDetail = opts?.detail === true;
-  totalCommits = 0;
-  totalRenders = 0;
-  totalRenderMs = 0;
-  totalCauses = {};
-  active = true;
-}
-
-/** End the window and return the aggregate (null if never started). */
-function stopCapture() {
-  if (!active && totalRenders === 0 && buckets.size === 0) return null;
-  active = false;
-  const topComponents = Array.from(buckets.entries()).sort((a, b) => {
-    const byMs = b[1].totalSelfMs - a[1].totalSelfMs;
-    return byMs !== 0 ? byMs : b[1].renders - a[1].renders;
-  }).slice(0, TOP_COMPONENTS_CAP).map(([name, b]) => ({
-    name,
-    renders: b.renders,
-    totalMs: round2(b.totalSelfMs),
-    maxMs: round2(b.maxSelfMs),
-    avgMs: b.renders > 0 ? round2(b.totalSelfMs / b.renders) : 0,
-    causes: b.causes,
-    ...(b.changedProps && b.changedProps.size > 0 ? {
-      changedProps: Array.from(b.changedProps)
-    } : null),
-    ...(b.parentName ? {
-      parentName: b.parentName
-    } : null)
-  }));
-  const summary = {
-    totalCommits,
-    totalRenders,
-    capturedDurations: sawDurations,
-    totalRenderMs: round2(totalRenderMs),
-    // Parent cascades and identity-only prop churn are both removable without
-    // changing behaviour — together they're the recoverable share.
-    wastedRenders: (totalCauses.parent ?? 0) + (totalCauses.propsUnstable ?? 0),
-    causes: totalCauses,
-    topComponents
-  };
-  buckets = new Map();
-  totalCommits = 0;
-  totalRenders = 0;
-  totalRenderMs = 0;
-  totalCauses = {};
-  return summary;
-}
-function round2(n) {
-  return Math.round(n * 100) / 100;
-}
-export const CommitProfiler = {
-  isSupported,
-  isCapturing,
-  startCapture,
-  stopCapture
-};
+"use strict";import{isDevToolsComponentName as I,isRenderLoopUnsafeName as x}from"./devtoolsComponentNames";import{ownStateChanged as B}from"./ownStateChanged";const k=0;const O=1;const b=11;const w=14;const N=15;const m=1;const K=1e4;const L=300;const H=20;let E=false;let p=false;let C=false;let d=false;let h=0;let u=0;let g=0;let c={};let f=new Map;function F(){if(typeof global==="undefined")return null;return global.__REACT_DEVTOOLS_GLOBAL_HOOK__??null}function P(e){const t=e.flags??e.effectTag;return typeof t==="number"?t:0}function T(e){return e===k||e===O||e===b||e===w||e===N}function _(e){const t=e.type;try{switch(e.tag){case k:case O:return t?.displayName||t?.name||"Anonymous";case b:return t?.displayName||t?.render?.displayName||t?.render?.name||"ForwardRef";case w:case N:{const s=t?.type??e.elementType?.type;return t?.displayName||s?.displayName||s?.name||"Memo"}default:return"Anonymous"}}catch{return"Anonymous"}}function X(e){const t=e.actualDuration;if(typeof t!=="number")return null;let s=t;for(let n=e.child;n!=null;n=n.sibling){if(typeof n.actualDuration==="number")s-=n.actualDuration}return s>0?s:0}const U=new Set(["View","Text","Image","ImageBackground","ScrollView","FlatList","SectionList","SafeAreaView","KeyboardAvoidingView","StatusBar","ActivityIndicator","RefreshControl","Modal","Switch","Pressable","PlatformPressable","TouchableOpacity","TouchableHighlight","TouchableWithoutFeedback","TouchableNativeFeedback","PressabilityDebugView","AnimatedComponent","Wrapper"]);const D=["Animated(","Pressability","Virtualized","CellRenderer"];function v(e){if(U.has(e))return true;for(let t=0;t<D.length;t++){if(e.startsWith(D[t]))return true}return false}const V=40;const j=5;function G(e,t){if(Object.is(e,t))return true;const s=typeof e;if(s!==typeof t)return false;if(s==="function")return true;if(e===null||t===null||s!=="object")return false;const n=Array.isArray(e);if(n!==Array.isArray(t))return false;if(n){if(e.length!==t.length)return false;for(let a=0;a<e.length;a++)if(!Object.is(e[a],t[a]))return false;return true}const r=Object.keys(e);const i=Object.keys(t);if(r.length!==i.length)return false;for(let a=0;a<r.length;a++){const o=r[a];if(!Object.prototype.hasOwnProperty.call(t,o))return false;if(!Object.is(e[o],t[o]))return false}return true}function q(e,t){const s=e.alternate;if(!s)return{cause:"mount"};const n=e.memoizedProps;const r=s.memoizedProps;if(n!==r&&n&&r){let i=false;let a=false;let o;const l=Object.keys(n);const W=l.length<V?l.length:V;for(let M=0;M<W;M++){const A=l[M];const S=r[A];const R=n[A];if(Object.is(S,R))continue;i=true;if(t){if(!o)o=[];if(o.length<j)o.push(A)}if(!G(S,R)){a=true;if(!t)break}}if(!a&&Object.keys(r).length!==l.length){i=true;a=true}if(i){return{cause:a?"props":"propsUnstable",changedKeys:o}}}if(B(s,e))return{cause:"hooks"};return{cause:"parent"}}function Y(e){for(let t=e.return;t!=null;t=t.return){if(!T(t.tag))continue;if((P(t)&m)===0)continue;const s=_(t);if(v(s))continue;return s}return void 0}function J(e,t){const s=_(e);const n=X(e);if(n!==null)C=true;const r=n??0;u+=1;g+=r;const{cause:i,changedKeys:a}=q(e,d);c[i]=(c[i]??0)+1;if(v(s))return;let o=f.get(s);if(!o){if(f.size>=L)return;o={renders:0,totalSelfMs:0,maxSelfMs:0,causes:{}};f.set(s,o)}o.renders+=1;o.totalSelfMs+=r;if(r>o.maxSelfMs)o.maxSelfMs=r;o.causes[i]=(o.causes[i]??0)+1;if(d){if(a){if(!o.changedProps)o.changedProps=new Set;for(let l=0;l<a.length;l++){if(o.changedProps.size>=j)break;o.changedProps.add(a[l])}}if(t&&!o.parentName)o.parentName=t}}function Q(e){const t=e?.current;if(!t)return;const s=u;let n=0;let r=t;while(r!=null){n+=1;if(n>K)break;let i=false;const a=T(r.tag);if(r.memoizedProps?.__buoyDevToolsRoot){i=true}else if(a){const o=_(r);if(x(o)){i=true}else if(I(o)){}else if((P(r)&m)!==0){J(r,d?Y(r):void 0)}}if(!i){const o=r.subtreeFlags;const l=typeof o==="number"&&(o&m)===0&&(P(r)&m)===0;if(!l&&r.child!=null){r=r.child;continue}}while(r!=null){if(r===t)return z(s);if(r.sibling!=null){r=r.sibling;break}r=r.return}}z(s)}function z(e){if(u>e)h+=1}function Z(){if(E)return true;const e=F();if(!e)return false;const t=e.onCommitFiberRoot;e.onCommitFiberRoot=function(s,n,...r){if(p){try{Q(n)}catch{}}return typeof t==="function"?t.call(e,s,n,...r):void 0};E=true;return true}function $(){if(typeof __DEV__!=="undefined"&&!__DEV__)return false;const e=F();return Boolean(e&&e.renderers&&e.renderers.size>0)}function ee(){return p}function te(e){if(!Z())return;f=new Map;C=false;d=e?.detail===true;h=0;u=0;g=0;c={};p=true}function ne(){if(!p&&u===0&&f.size===0)return null;p=false;const e=Array.from(f.entries()).sort((s,n)=>{const r=n[1].totalSelfMs-s[1].totalSelfMs;return r!==0?r:n[1].renders-s[1].renders}).slice(0,H).map(([s,n])=>({name:s,renders:n.renders,totalMs:y(n.totalSelfMs),maxMs:y(n.maxSelfMs),avgMs:n.renders>0?y(n.totalSelfMs/n.renders):0,causes:n.causes,...n.changedProps&&n.changedProps.size>0?{changedProps:Array.from(n.changedProps)}:null,...n.parentName?{parentName:n.parentName}:null}));const t={totalCommits:h,totalRenders:u,capturedDurations:C,totalRenderMs:y(g),wastedRenders:(c.parent??0)+(c.propsUnstable??0),causes:c,topComponents:e};f=new Map;h=0;u=0;g=0;c={};return t}function y(e){return Math.round(e*100)/100}export const CommitProfiler={isSupported:$,isCapturing:ee,startCapture:te,stopCapture:ne};