@buoy-gg/highlight-updates 7.0.38 → 7.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/highlight-updates/HighlightUpdatesOverlay.js +281 -1
- package/lib/commonjs/highlight-updates/components/HighlightFilterView.js +1474 -1
- package/lib/commonjs/highlight-updates/components/HighlightUpdatesModal.js +641 -1
- package/lib/commonjs/highlight-updates/components/IdentifierBadge.js +273 -1
- package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js +188 -1
- package/lib/commonjs/highlight-updates/components/ModalHeaderContent.js +293 -1
- package/lib/commonjs/highlight-updates/components/RenderCauseBadge.js +508 -1
- package/lib/commonjs/highlight-updates/components/RenderDetailView.js +846 -1
- package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js +915 -1
- package/lib/commonjs/highlight-updates/components/RenderListItem.js +235 -1
- package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js +469 -1
- package/lib/commonjs/highlight-updates/components/StatsDisplay.js +73 -1
- package/lib/commonjs/highlight-updates/types/copySettings.js +107 -1
- package/lib/commonjs/highlight-updates/utils/CommitProfiler.js +446 -1
- package/lib/commonjs/highlight-updates/utils/HighlightUpdatesController.js +1920 -1
- package/lib/commonjs/highlight-updates/utils/PerformanceLogger.js +359 -1
- package/lib/commonjs/highlight-updates/utils/ProfilerInterceptor.js +371 -1
- package/lib/commonjs/highlight-updates/utils/RenderCauseDetector.js +1840 -1
- package/lib/commonjs/highlight-updates/utils/RenderTracker.js +952 -1
- package/lib/commonjs/highlight-updates/utils/ViewTypeMapper.js +264 -1
- package/lib/commonjs/highlight-updates/utils/copySettingsStorage.js +32 -1
- package/lib/commonjs/highlight-updates/utils/devtoolsComponentNames.js +188 -1
- package/lib/commonjs/highlight-updates/utils/namedComposite.js +41 -1
- package/lib/commonjs/highlight-updates/utils/ownStateChanged.js +103 -1
- package/lib/commonjs/highlight-updates/utils/rawEventEmitter.js +50 -1
- package/lib/commonjs/highlight-updates/utils/renderExportFormatter.js +58 -1
- package/lib/commonjs/highlight-updates/utils/rendersExportFormatter.js +485 -1
- package/lib/commonjs/highlight-updates/utils/screenElements.js +1248 -1
- package/lib/commonjs/highlight-updates/utils/tapMatch.js +83 -1
- package/lib/commonjs/highlight-updates/utils/testIDs.js +68 -1
- package/lib/commonjs/highlight-updates/utils/touchCapture.js +277 -1
- package/lib/commonjs/index.js +429 -1
- package/lib/commonjs/preset.js +278 -1
- package/lib/commonjs/sync/highlightUpdatesSyncAdapter.js +235 -1
- package/lib/module/highlight-updates/HighlightUpdatesOverlay.js +274 -1
- package/lib/module/highlight-updates/components/HighlightFilterView.js +1468 -1
- package/lib/module/highlight-updates/components/HighlightUpdatesModal.js +634 -1
- package/lib/module/highlight-updates/components/IdentifierBadge.js +265 -1
- package/lib/module/highlight-updates/components/IsolatedRenderList.js +183 -1
- package/lib/module/highlight-updates/components/ModalHeaderContent.js +288 -1
- package/lib/module/highlight-updates/components/RenderCauseBadge.js +499 -1
- package/lib/module/highlight-updates/components/RenderDetailView.js +840 -1
- package/lib/module/highlight-updates/components/RenderHistoryViewer.js +908 -1
- package/lib/module/highlight-updates/components/RenderListItem.js +230 -1
- package/lib/module/highlight-updates/components/RendersCopySettingsView.js +465 -1
- package/lib/module/highlight-updates/components/StatsDisplay.js +70 -1
- package/lib/module/highlight-updates/types/copySettings.js +102 -1
- package/lib/module/highlight-updates/utils/CommitProfiler.js +442 -1
- package/lib/module/highlight-updates/utils/HighlightUpdatesController.js +1916 -1
- package/lib/module/highlight-updates/utils/PerformanceLogger.js +353 -1
- package/lib/module/highlight-updates/utils/ProfilerInterceptor.js +358 -1
- package/lib/module/highlight-updates/utils/RenderCauseDetector.js +1830 -1
- package/lib/module/highlight-updates/utils/RenderTracker.js +949 -1
- package/lib/module/highlight-updates/utils/ViewTypeMapper.js +255 -1
- package/lib/module/highlight-updates/utils/copySettingsStorage.js +26 -1
- package/lib/module/highlight-updates/utils/devtoolsComponentNames.js +178 -1
- package/lib/module/highlight-updates/utils/namedComposite.js +36 -1
- package/lib/module/highlight-updates/utils/ownStateChanged.js +98 -1
- package/lib/module/highlight-updates/utils/rawEventEmitter.js +46 -1
- package/lib/module/highlight-updates/utils/renderExportFormatter.js +54 -1
- package/lib/module/highlight-updates/utils/rendersExportFormatter.js +478 -1
- package/lib/module/highlight-updates/utils/screenElements.js +1242 -1
- package/lib/module/highlight-updates/utils/tapMatch.js +76 -1
- package/lib/module/highlight-updates/utils/testIDs.js +60 -1
- package/lib/module/highlight-updates/utils/touchCapture.js +270 -1
- package/lib/module/index.js +130 -1
- package/lib/module/preset.js +272 -1
- package/lib/module/sync/highlightUpdatesSyncAdapter.js +230 -1
- package/lib/typescript/highlight-updates/HighlightUpdatesOverlay.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/HighlightFilterView.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/HighlightUpdatesModal.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/IdentifierBadge.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/IsolatedRenderList.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/ModalHeaderContent.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/RenderCauseBadge.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/RenderDetailView.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/RenderHistoryViewer.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/RenderListItem.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/RendersCopySettingsView.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/components/StatsDisplay.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/types/copySettings.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/CommitProfiler.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/HighlightUpdatesController.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/PerformanceLogger.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/ProfilerInterceptor.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/RenderCauseDetector.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/RenderTracker.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/ViewTypeMapper.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/copySettingsStorage.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/devtoolsComponentNames.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/namedComposite.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/ownStateChanged.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/rawEventEmitter.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/renderExportFormatter.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/rendersExportFormatter.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/screenElements.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/tapMatch.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/testIDs.d.ts.map +1 -0
- package/lib/typescript/highlight-updates/utils/touchCapture.d.ts.map +1 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/preset.d.ts.map +1 -0
- package/lib/typescript/sync/highlightUpdatesSyncAdapter.d.ts.map +1 -0
- package/package.json +7 -7
|
@@ -1 +1,442 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* CommitProfiler — per-component render counts + durations across a capture
|
|
5
|
+
* window, React-DevTools-profiler style, without React DevTools attached.
|
|
6
|
+
*
|
|
7
|
+
* Wraps `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot` (the callback React
|
|
8
|
+
* invokes after every commit) and, while a capture is active, walks the
|
|
9
|
+
* committed fiber tree collecting composite fibers that performed work this
|
|
10
|
+
* commit. Self duration follows React's convention: `actualDuration` minus the
|
|
11
|
+
* sum of direct children's `actualDuration` (profiling timers are enabled in
|
|
12
|
+
* dev builds, where Buoy runs).
|
|
13
|
+
*
|
|
14
|
+
* This is intentionally separate from the traceUpdates flow the highlight
|
|
15
|
+
* overlay uses — traceUpdates emits host views with no timing data.
|
|
16
|
+
*
|
|
17
|
+
* Consumed by perf-monitor benchmarks via the shared-ui render-capture
|
|
18
|
+
* registry (see the registration in this package's index.tsx).
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
import { isDevToolsComponentName, isRenderLoopUnsafeName } from "./devtoolsComponentNames";
|
|
22
|
+
// One implementation, shared with the overlay's RenderCauseDetector — the two
|
|
23
|
+
// classifiers are separate on purpose, but this question is not. See the file
|
|
24
|
+
// for why the obvious identity check is wrong.
|
|
25
|
+
import { ownStateChanged } from "./ownStateChanged";
|
|
26
|
+
|
|
27
|
+
// React work tags for components that render user code.
|
|
28
|
+
const FunctionComponent = 0;
|
|
29
|
+
const ClassComponent = 1;
|
|
30
|
+
const ForwardRef = 11;
|
|
31
|
+
const MemoComponent = 14;
|
|
32
|
+
const SimpleMemoComponent = 15;
|
|
33
|
+
|
|
34
|
+
// React fiber flag: this fiber rendered (performed work) in the last commit.
|
|
35
|
+
// Stable value 0b1 across React 16-19 (effectTag pre-18, flags after).
|
|
36
|
+
const PerformedWork = 0b1;
|
|
37
|
+
|
|
38
|
+
/** Overhead guardrail: stop walking a commit past this many visited fibers. */
|
|
39
|
+
const MAX_FIBERS_PER_COMMIT = 10_000;
|
|
40
|
+
|
|
41
|
+
/** Bound on distinct component names tracked; overflow still counts in totals. */
|
|
42
|
+
const MAX_TRACKED_NAMES = 300;
|
|
43
|
+
|
|
44
|
+
/** Components returned in the summary. */
|
|
45
|
+
const TOP_COMPONENTS_CAP = 20;
|
|
46
|
+
let hookInstalled = false;
|
|
47
|
+
let active = false;
|
|
48
|
+
let sawDurations = false;
|
|
49
|
+
let captureDetail = false;
|
|
50
|
+
let totalCommits = 0;
|
|
51
|
+
let totalRenders = 0;
|
|
52
|
+
let totalRenderMs = 0;
|
|
53
|
+
let totalCauses = {};
|
|
54
|
+
let buckets = new Map();
|
|
55
|
+
function getHook() {
|
|
56
|
+
if (typeof global === "undefined") return null;
|
|
57
|
+
return global.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? null;
|
|
58
|
+
}
|
|
59
|
+
function getFlags(fiber) {
|
|
60
|
+
const f = fiber.flags ?? fiber.effectTag;
|
|
61
|
+
return typeof f === "number" ? f : 0;
|
|
62
|
+
}
|
|
63
|
+
function isCompositeTag(tag) {
|
|
64
|
+
return tag === FunctionComponent || tag === ClassComponent || tag === ForwardRef || tag === MemoComponent || tag === SimpleMemoComponent;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/** Resolve a composite fiber's display name (DevTools conventions). */
|
|
68
|
+
function getComponentName(fiber) {
|
|
69
|
+
const type = fiber.type;
|
|
70
|
+
try {
|
|
71
|
+
switch (fiber.tag) {
|
|
72
|
+
case FunctionComponent:
|
|
73
|
+
case ClassComponent:
|
|
74
|
+
return type?.displayName || type?.name || "Anonymous";
|
|
75
|
+
case ForwardRef:
|
|
76
|
+
return type?.displayName || type?.render?.displayName || type?.render?.name || "ForwardRef";
|
|
77
|
+
case MemoComponent:
|
|
78
|
+
case SimpleMemoComponent:
|
|
79
|
+
{
|
|
80
|
+
const inner = type?.type ?? fiber.elementType?.type;
|
|
81
|
+
return type?.displayName || inner?.displayName || inner?.name || "Memo";
|
|
82
|
+
}
|
|
83
|
+
default:
|
|
84
|
+
return "Anonymous";
|
|
85
|
+
}
|
|
86
|
+
} catch {
|
|
87
|
+
return "Anonymous";
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Self duration = own actualDuration minus direct children's. React's
|
|
93
|
+
* bubbleProperties adds every direct child's actualDuration into the parent,
|
|
94
|
+
* so subtracting them all back out is symmetric and exact.
|
|
95
|
+
*/
|
|
96
|
+
function computeSelfMs(fiber) {
|
|
97
|
+
const actual = fiber.actualDuration;
|
|
98
|
+
if (typeof actual !== "number") return null;
|
|
99
|
+
let self = actual;
|
|
100
|
+
for (let child = fiber.child; child != null; child = child.sibling) {
|
|
101
|
+
if (typeof child.actualDuration === "number") self -= child.actualDuration;
|
|
102
|
+
}
|
|
103
|
+
return self > 0 ? self : 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// React Native framework wrapper components. Their renders are real work
|
|
107
|
+
// but the actionable signal lives on the OWNING component (a Touchable
|
|
108
|
+
// re-rendering is already visible as its parent re-rendering), so they're
|
|
109
|
+
// folded into the capture totals and kept OUT of the per-component list.
|
|
110
|
+
// This is a report-level filter only — unlike isDevToolsComponentName it
|
|
111
|
+
// must NOT prune subtrees (their children are user components).
|
|
112
|
+
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"]);
|
|
113
|
+
const FRAMEWORK_WRAPPER_PREFIXES = ["Animated(",
|
|
114
|
+
// Animated(View), Animated(Text), Animated(FlatList), …
|
|
115
|
+
"Pressability", "Virtualized",
|
|
116
|
+
// VirtualizedList + its context providers
|
|
117
|
+
"CellRenderer"];
|
|
118
|
+
function isFrameworkWrapperName(name) {
|
|
119
|
+
if (FRAMEWORK_WRAPPER_NAMES.has(name)) return true;
|
|
120
|
+
for (let i = 0; i < FRAMEWORK_WRAPPER_PREFIXES.length; i++) {
|
|
121
|
+
if (name.startsWith(FRAMEWORK_WRAPPER_PREFIXES[i])) return true;
|
|
122
|
+
}
|
|
123
|
+
return false;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/** Bound on prop keys compared per render, so a fat props object can't stall a commit. */
|
|
127
|
+
const MAX_PROPS_COMPARED = 40;
|
|
128
|
+
/** Bound on distinct changed-prop key names remembered per component (detail tier). */
|
|
129
|
+
const MAX_CHANGED_KEYS = 5;
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Are two values for the same prop key equivalent despite differing identity?
|
|
133
|
+
*
|
|
134
|
+
* Functions always count as equivalent: a fresh arrow per render is THE
|
|
135
|
+
* unstable-prop bug, and there's no way to compare behaviour anyway. Plain
|
|
136
|
+
* objects and arrays compare one level deep, which catches `style={{...}}`
|
|
137
|
+
* and `data={[...]}`. Anything else falls through to a real value change.
|
|
138
|
+
*/
|
|
139
|
+
function isEquivalentValue(a, b) {
|
|
140
|
+
if (Object.is(a, b)) return true;
|
|
141
|
+
const ta = typeof a;
|
|
142
|
+
if (ta !== typeof b) return false;
|
|
143
|
+
if (ta === "function") return true;
|
|
144
|
+
if (a === null || b === null || ta !== "object") return false;
|
|
145
|
+
const aIsArray = Array.isArray(a);
|
|
146
|
+
if (aIsArray !== Array.isArray(b)) return false;
|
|
147
|
+
if (aIsArray) {
|
|
148
|
+
if (a.length !== b.length) return false;
|
|
149
|
+
for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return false;
|
|
150
|
+
return true;
|
|
151
|
+
}
|
|
152
|
+
const keysA = Object.keys(a);
|
|
153
|
+
const keysB = Object.keys(b);
|
|
154
|
+
if (keysA.length !== keysB.length) return false;
|
|
155
|
+
for (let i = 0; i < keysA.length; i++) {
|
|
156
|
+
const k = keysA[i];
|
|
157
|
+
if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
|
|
158
|
+
if (!Object.is(a[k], b[k])) return false;
|
|
159
|
+
}
|
|
160
|
+
return true;
|
|
161
|
+
}
|
|
162
|
+
/**
|
|
163
|
+
* Why did this fiber render?
|
|
164
|
+
*
|
|
165
|
+
* Simpler than the overlay's RenderCauseDetector, and deliberately so: that
|
|
166
|
+
* one carries WeakMap fallbacks and fiber-swap detection because traceUpdates
|
|
167
|
+
* hands it fibers at an ambiguous moment. Here we're inside onCommitFiberRoot
|
|
168
|
+
* walking the committed tree, so `fiber` is current and `fiber.alternate` is
|
|
169
|
+
* previous by definition. Porting the swap logic would be cargo-cult.
|
|
170
|
+
*/
|
|
171
|
+
function detectCause(fiber, wantKeys) {
|
|
172
|
+
const prev = fiber.alternate;
|
|
173
|
+
if (!prev) return {
|
|
174
|
+
cause: "mount"
|
|
175
|
+
};
|
|
176
|
+
const nextProps = fiber.memoizedProps;
|
|
177
|
+
const prevProps = prev.memoizedProps;
|
|
178
|
+
if (nextProps !== prevProps && nextProps && prevProps) {
|
|
179
|
+
let sawChange = false;
|
|
180
|
+
let sawValueChange = false;
|
|
181
|
+
let changedKeys;
|
|
182
|
+
const keys = Object.keys(nextProps);
|
|
183
|
+
const limit = keys.length < MAX_PROPS_COMPARED ? keys.length : MAX_PROPS_COMPARED;
|
|
184
|
+
for (let i = 0; i < limit; i++) {
|
|
185
|
+
const k = keys[i];
|
|
186
|
+
const a = prevProps[k];
|
|
187
|
+
const b = nextProps[k];
|
|
188
|
+
if (Object.is(a, b)) continue;
|
|
189
|
+
sawChange = true;
|
|
190
|
+
if (wantKeys) {
|
|
191
|
+
if (!changedKeys) changedKeys = [];
|
|
192
|
+
if (changedKeys.length < MAX_CHANGED_KEYS) changedKeys.push(k);
|
|
193
|
+
}
|
|
194
|
+
if (!isEquivalentValue(a, b)) {
|
|
195
|
+
sawValueChange = true;
|
|
196
|
+
if (!wantKeys) break; // cause is settled; only keys need the full pass
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
// A removed key counts as a real change; cheap to detect via key count.
|
|
200
|
+
if (!sawValueChange && Object.keys(prevProps).length !== keys.length) {
|
|
201
|
+
sawChange = true;
|
|
202
|
+
sawValueChange = true;
|
|
203
|
+
}
|
|
204
|
+
if (sawChange) {
|
|
205
|
+
return {
|
|
206
|
+
cause: sawValueChange ? "props" : "propsUnstable",
|
|
207
|
+
changedKeys
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// No prop change of substance. Own state/hooks next.
|
|
213
|
+
if (ownStateChanged(prev, fiber)) return {
|
|
214
|
+
cause: "hooks"
|
|
215
|
+
};
|
|
216
|
+
return {
|
|
217
|
+
cause: "parent"
|
|
218
|
+
};
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/**
|
|
222
|
+
* Nearest ancestor that ALSO rendered this commit and is worth naming — i.e.
|
|
223
|
+
* skipping framework wrappers, which are never where a fix goes. Answers "who
|
|
224
|
+
* dragged this along", which is the actionable half of a cascade.
|
|
225
|
+
*/
|
|
226
|
+
function nearestRenderedAncestorName(fiber) {
|
|
227
|
+
for (let p = fiber.return; p != null; p = p.return) {
|
|
228
|
+
if (!isCompositeTag(p.tag)) continue;
|
|
229
|
+
if ((getFlags(p) & PerformedWork) === 0) continue;
|
|
230
|
+
const name = getComponentName(p);
|
|
231
|
+
if (isFrameworkWrapperName(name)) continue;
|
|
232
|
+
return name;
|
|
233
|
+
}
|
|
234
|
+
return undefined;
|
|
235
|
+
}
|
|
236
|
+
function recordRender(fiber, parentName) {
|
|
237
|
+
const name = getComponentName(fiber);
|
|
238
|
+
const selfMs = computeSelfMs(fiber);
|
|
239
|
+
if (selfMs !== null) sawDurations = true;
|
|
240
|
+
const ms = selfMs ?? 0;
|
|
241
|
+
totalRenders += 1;
|
|
242
|
+
totalRenderMs += ms;
|
|
243
|
+
const {
|
|
244
|
+
cause,
|
|
245
|
+
changedKeys
|
|
246
|
+
} = detectCause(fiber, captureDetail);
|
|
247
|
+
totalCauses[cause] = (totalCauses[cause] ?? 0) + 1;
|
|
248
|
+
|
|
249
|
+
// Framework wrappers count toward totals but never surface as a row.
|
|
250
|
+
if (isFrameworkWrapperName(name)) return;
|
|
251
|
+
let bucket = buckets.get(name);
|
|
252
|
+
if (!bucket) {
|
|
253
|
+
// Bounded map: overflow renders still count toward the totals above.
|
|
254
|
+
if (buckets.size >= MAX_TRACKED_NAMES) return;
|
|
255
|
+
bucket = {
|
|
256
|
+
renders: 0,
|
|
257
|
+
totalSelfMs: 0,
|
|
258
|
+
maxSelfMs: 0,
|
|
259
|
+
causes: {}
|
|
260
|
+
};
|
|
261
|
+
buckets.set(name, bucket);
|
|
262
|
+
}
|
|
263
|
+
bucket.renders += 1;
|
|
264
|
+
bucket.totalSelfMs += ms;
|
|
265
|
+
if (ms > bucket.maxSelfMs) bucket.maxSelfMs = ms;
|
|
266
|
+
bucket.causes[cause] = (bucket.causes[cause] ?? 0) + 1;
|
|
267
|
+
if (captureDetail) {
|
|
268
|
+
if (changedKeys) {
|
|
269
|
+
if (!bucket.changedProps) bucket.changedProps = new Set();
|
|
270
|
+
for (let i = 0; i < changedKeys.length; i++) {
|
|
271
|
+
if (bucket.changedProps.size >= MAX_CHANGED_KEYS) break;
|
|
272
|
+
bucket.changedProps.add(changedKeys[i]);
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
// First parent wins — a component rendered under several parents is rare,
|
|
276
|
+
// and the first is the one that showed up in the heaviest commit.
|
|
277
|
+
if (parentName && !bucket.parentName) bucket.parentName = parentName;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* Iterative walk (child → sibling → return) of the committed tree. Never
|
|
283
|
+
* throws upward — a broken walk must not break React's commit.
|
|
284
|
+
*/
|
|
285
|
+
function handleCommit(root) {
|
|
286
|
+
const start = root?.current;
|
|
287
|
+
if (!start) return;
|
|
288
|
+
const rendersBefore = totalRenders;
|
|
289
|
+
let visited = 0;
|
|
290
|
+
let fiber = start;
|
|
291
|
+
while (fiber != null) {
|
|
292
|
+
visited += 1;
|
|
293
|
+
if (visited > MAX_FIBERS_PER_COMMIT) break;
|
|
294
|
+
let skipSubtree = false;
|
|
295
|
+
const composite = isCompositeTag(fiber.tag);
|
|
296
|
+
if (composite) {
|
|
297
|
+
const compositeName = getComponentName(fiber);
|
|
298
|
+
// Only Buoy's render-tracking UI gets its SUBTREE pruned — walking it
|
|
299
|
+
// feeds its own renders back in and loops. Everything else that's merely
|
|
300
|
+
// devtools noise is skipped as a NODE and we keep descending: app
|
|
301
|
+
// components live underneath Buoy chrome, and pruning a subtree on a name
|
|
302
|
+
// match is what made a stray "Virtualized" prefix hide every FlatList in
|
|
303
|
+
// every app.
|
|
304
|
+
if (isRenderLoopUnsafeName(compositeName)) {
|
|
305
|
+
skipSubtree = true;
|
|
306
|
+
} else if (isDevToolsComponentName(compositeName)) {
|
|
307
|
+
// skip this node, keep walking its children
|
|
308
|
+
} else if ((getFlags(fiber) & PerformedWork) !== 0) {
|
|
309
|
+
// PerformedWork is the only trustworthy "rendered this commit"
|
|
310
|
+
// signal — actualDuration is stale on bailed-out fibers.
|
|
311
|
+
recordRender(fiber, captureDetail ? nearestRenderedAncestorName(fiber) : undefined);
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
if (!skipSubtree) {
|
|
315
|
+
// Prune subtrees with no work. subtreeFlags only exists on React 18+;
|
|
316
|
+
// when absent, always descend.
|
|
317
|
+
const subtreeFlags = fiber.subtreeFlags;
|
|
318
|
+
const noSubtreeWork = typeof subtreeFlags === "number" && (subtreeFlags & PerformedWork) === 0 && (getFlags(fiber) & PerformedWork) === 0;
|
|
319
|
+
if (!noSubtreeWork && fiber.child != null) {
|
|
320
|
+
fiber = fiber.child;
|
|
321
|
+
continue;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
// No descend: advance to sibling, climbing up as needed.
|
|
326
|
+
while (fiber != null) {
|
|
327
|
+
if (fiber === start) return finalizeCommit(rendersBefore);
|
|
328
|
+
if (fiber.sibling != null) {
|
|
329
|
+
fiber = fiber.sibling;
|
|
330
|
+
break;
|
|
331
|
+
}
|
|
332
|
+
fiber = fiber.return;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
finalizeCommit(rendersBefore);
|
|
336
|
+
}
|
|
337
|
+
function finalizeCommit(rendersBefore) {
|
|
338
|
+
if (totalRenders > rendersBefore) totalCommits += 1;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/**
|
|
342
|
+
* Install the onCommitFiberRoot wrapper once and never restore it — the
|
|
343
|
+
* `active` flag gates all work, and never restoring avoids clobber races if
|
|
344
|
+
* something else (e.g. React DevTools attaching mid-session) wraps the hook
|
|
345
|
+
* after us. The wrapper dies with the JS realm on reload.
|
|
346
|
+
*/
|
|
347
|
+
function ensureHookInstalled() {
|
|
348
|
+
if (hookInstalled) return true;
|
|
349
|
+
const hook = getHook();
|
|
350
|
+
if (!hook) return false;
|
|
351
|
+
const original = hook.onCommitFiberRoot;
|
|
352
|
+
hook.onCommitFiberRoot = function (rendererID, root, ...rest) {
|
|
353
|
+
if (active) {
|
|
354
|
+
try {
|
|
355
|
+
handleCommit(root);
|
|
356
|
+
} catch {
|
|
357
|
+
// Capture must never break React's commit path.
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
return typeof original === "function" ? original.call(hook, rendererID, root, ...rest) : undefined;
|
|
361
|
+
};
|
|
362
|
+
hookInstalled = true;
|
|
363
|
+
return true;
|
|
364
|
+
}
|
|
365
|
+
function isSupported() {
|
|
366
|
+
if (typeof __DEV__ !== "undefined" && !__DEV__) return false;
|
|
367
|
+
const hook = getHook();
|
|
368
|
+
return Boolean(hook && hook.renderers && hook.renderers.size > 0);
|
|
369
|
+
}
|
|
370
|
+
function isCapturing() {
|
|
371
|
+
return active;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/**
|
|
375
|
+
* Begin a capture window, discarding any previous unclaimed data.
|
|
376
|
+
*
|
|
377
|
+
* `detail` turns on the allocating tier — changed prop key names and parent
|
|
378
|
+
* component names. Causes themselves are always classified: it costs a shallow
|
|
379
|
+
* prop compare, against a `computeSelfMs` that already walks every direct
|
|
380
|
+
* child on every render, and the wasted-render total is the number most worth
|
|
381
|
+
* seeing without having to know to ask for it.
|
|
382
|
+
*/
|
|
383
|
+
function startCapture(opts) {
|
|
384
|
+
if (!ensureHookInstalled()) return;
|
|
385
|
+
buckets = new Map();
|
|
386
|
+
sawDurations = false;
|
|
387
|
+
captureDetail = opts?.detail === true;
|
|
388
|
+
totalCommits = 0;
|
|
389
|
+
totalRenders = 0;
|
|
390
|
+
totalRenderMs = 0;
|
|
391
|
+
totalCauses = {};
|
|
392
|
+
active = true;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/** End the window and return the aggregate (null if never started). */
|
|
396
|
+
function stopCapture() {
|
|
397
|
+
if (!active && totalRenders === 0 && buckets.size === 0) return null;
|
|
398
|
+
active = false;
|
|
399
|
+
const topComponents = Array.from(buckets.entries()).sort((a, b) => {
|
|
400
|
+
const byMs = b[1].totalSelfMs - a[1].totalSelfMs;
|
|
401
|
+
return byMs !== 0 ? byMs : b[1].renders - a[1].renders;
|
|
402
|
+
}).slice(0, TOP_COMPONENTS_CAP).map(([name, b]) => ({
|
|
403
|
+
name,
|
|
404
|
+
renders: b.renders,
|
|
405
|
+
totalMs: round2(b.totalSelfMs),
|
|
406
|
+
maxMs: round2(b.maxSelfMs),
|
|
407
|
+
avgMs: b.renders > 0 ? round2(b.totalSelfMs / b.renders) : 0,
|
|
408
|
+
causes: b.causes,
|
|
409
|
+
...(b.changedProps && b.changedProps.size > 0 ? {
|
|
410
|
+
changedProps: Array.from(b.changedProps)
|
|
411
|
+
} : null),
|
|
412
|
+
...(b.parentName ? {
|
|
413
|
+
parentName: b.parentName
|
|
414
|
+
} : null)
|
|
415
|
+
}));
|
|
416
|
+
const summary = {
|
|
417
|
+
totalCommits,
|
|
418
|
+
totalRenders,
|
|
419
|
+
capturedDurations: sawDurations,
|
|
420
|
+
totalRenderMs: round2(totalRenderMs),
|
|
421
|
+
// Parent cascades and identity-only prop churn are both removable without
|
|
422
|
+
// changing behaviour — together they're the recoverable share.
|
|
423
|
+
wastedRenders: (totalCauses.parent ?? 0) + (totalCauses.propsUnstable ?? 0),
|
|
424
|
+
causes: totalCauses,
|
|
425
|
+
topComponents
|
|
426
|
+
};
|
|
427
|
+
buckets = new Map();
|
|
428
|
+
totalCommits = 0;
|
|
429
|
+
totalRenders = 0;
|
|
430
|
+
totalRenderMs = 0;
|
|
431
|
+
totalCauses = {};
|
|
432
|
+
return summary;
|
|
433
|
+
}
|
|
434
|
+
function round2(n) {
|
|
435
|
+
return Math.round(n * 100) / 100;
|
|
436
|
+
}
|
|
437
|
+
export const CommitProfiler = {
|
|
438
|
+
isSupported,
|
|
439
|
+
isCapturing,
|
|
440
|
+
startCapture,
|
|
441
|
+
stopCapture
|
|
442
|
+
};
|