maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "Add SyncHydrationLane" (#25708) 

Reverts facebook/react#25698
DevTools CI for older version are failing
This commit is contained in:
Tianyu Yao 2022-11-18 15:00:35 -08:00 committed by GitHub
parent 56ffca8b9e
commit c08d8b8041
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 398 additions and 524 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

440
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js vendored
View File

File diff suppressed because it is too large Load Diff

172
packages/react-devtools-shared/src/__tests__/preprocessData-test.js vendored
View File

@ -629,7 +629,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.01,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.006,
"type": "render-idle",
},
@ -637,7 +637,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.006,
"type": "render",
},
@ -645,7 +645,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.008,
"type": "commit",
},
@ -653,7 +653,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.014,
"type": "layout-effects",
},
@ -714,13 +714,12 @@ describe('Timeline profiler', () => {
30 => "Offscreen",
},
"laneToReactMeasureMap": Map {
0 => Array [],
1 => Array [
0 => Array [
Object {
"batchUID": 0,
"depth": 0,
"duration": 0.01,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.006,
"type": "render-idle",
},
@ -728,7 +727,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.006,
"type": "render",
},
@ -736,7 +735,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.008,
"type": "commit",
},
@ -744,11 +743,12 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.014,
"type": "layout-effects",
},
],
1 => Array [],
2 => Array [],
3 => Array [],
4 => Array [],
@ -785,7 +785,7 @@ describe('Timeline profiler', () => {
"reactVersion": "<filtered-version>",
"schedulingEvents": Array [
Object {
"lanes": "0b0000000000000000000000000000001",
"lanes": "0b0000000000000000000000000000000",
"timestamp": 0.005,
"type": "schedule-render",
"warning": null,
@ -827,7 +827,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.012,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.006,
"type": "render-idle",
},
@ -835,7 +835,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.006,
"type": "render",
},
@ -843,7 +843,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.01,
"type": "commit",
},
@ -851,7 +851,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.016,
"type": "layout-effects",
},
@ -859,7 +859,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.004,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.019,
"type": "passive-effects",
},
@ -869,7 +869,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.012,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.024,
"type": "render-idle",
},
@ -877,7 +877,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.024,
"type": "render",
},
@ -885,7 +885,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.028,
"type": "commit",
},
@ -893,7 +893,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.034,
"type": "layout-effects",
},
@ -901,7 +901,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.037,
"type": "passive-effects",
},
@ -995,13 +995,12 @@ describe('Timeline profiler', () => {
1 => Array [],
2 => Array [],
3 => Array [],
4 => Array [],
5 => Array [
4 => Array [
Object {
"batchUID": 0,
"depth": 0,
"duration": 0.012,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.006,
"type": "render-idle",
},
@ -1009,7 +1008,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.006,
"type": "render",
},
@ -1017,7 +1016,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.01,
"type": "commit",
},
@ -1025,7 +1024,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.016,
"type": "layout-effects",
},
@ -1033,7 +1032,7 @@ describe('Timeline profiler', () => {
"batchUID": 0,
"depth": 0,
"duration": 0.004,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.019,
"type": "passive-effects",
},
@ -1041,7 +1040,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.012,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.024,
"type": "render-idle",
},
@ -1049,7 +1048,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.024,
"type": "render",
},
@ -1057,7 +1056,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.008,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.028,
"type": "commit",
},
@ -1065,7 +1064,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.034,
"type": "layout-effects",
},
@ -1073,11 +1072,12 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.037,
"type": "passive-effects",
},
],
5 => Array [],
6 => Array [],
7 => Array [],
8 => Array [],
@ -1110,14 +1110,14 @@ describe('Timeline profiler', () => {
"reactVersion": "<filtered-version>",
"schedulingEvents": Array [
Object {
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.005,
"type": "schedule-render",
"warning": null,
},
Object {
"componentName": "App",
"lanes": "0b0000000000000000000000000000101",
"lanes": "0b0000000000000000000000000000100",
"timestamp": 0.021,
"type": "schedule-state-update",
"warning": null,
@ -1963,7 +1963,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "render-idle",
},
@ -1971,7 +1971,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "render",
},
@ -1979,7 +1979,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "commit",
},
@ -1987,7 +1987,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "layout-effects",
},
@ -1998,13 +1998,13 @@ describe('Timeline profiler', () => {
"flamechart": Array [],
"internalModuleSourceToRanges": Map {},
"laneToLabelMap": Map {
1 => "SyncHydrationLane",
2 => "Sync",
4 => "InputContinuousHydration",
8 => "InputContinuous",
16 => "DefaultHydration",
32 => "Default",
64 => "TransitionHydration",
1 => "Sync",
2 => "InputContinuousHydration",
4 => "InputContinuous",
8 => "DefaultHydration",
16 => "Default",
32 => "TransitionHydration",
64 => "Transition",
128 => "Transition",
256 => "Transition",
512 => "Transition",
@ -2020,7 +2020,7 @@ describe('Timeline profiler', () => {
524288 => "Transition",
1048576 => "Transition",
2097152 => "Transition",
4194304 => "Transition",
4194304 => "Retry",
8388608 => "Retry",
16777216 => "Retry",
33554432 => "Retry",
@ -2031,13 +2031,12 @@ describe('Timeline profiler', () => {
1073741824 => "Offscreen",
},
"laneToReactMeasureMap": Map {
1 => Array [],
2 => Array [
1 => Array [
Object {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "render-idle",
},
@ -2045,7 +2044,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "render",
},
@ -2053,7 +2052,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "commit",
},
@ -2061,11 +2060,12 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "layout-effects",
},
],
2 => Array [],
4 => Array [],
8 => Array [],
16 => Array [],
@ -2102,7 +2102,7 @@ describe('Timeline profiler', () => {
"reactVersion": "<filtered-version>",
"schedulingEvents": Array [
Object {
"lanes": "0b0000000000000000000000000000010",
"lanes": "0b0000000000000000000000000000001",
"timestamp": 10,
"type": "schedule-render",
"warning": null,
@ -2153,7 +2153,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "render-idle",
},
@ -2161,7 +2161,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "render",
},
@ -2169,7 +2169,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "commit",
},
@ -2177,7 +2177,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "layout-effects",
},
@ -2185,7 +2185,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "passive-effects",
},
@ -2195,7 +2195,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "render-idle",
},
@ -2203,7 +2203,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "render",
},
@ -2211,7 +2211,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "commit",
},
@ -2219,7 +2219,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "layout-effects",
},
@ -2227,7 +2227,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "passive-effects",
},
@ -2267,13 +2267,13 @@ describe('Timeline profiler', () => {
"flamechart": Array [],
"internalModuleSourceToRanges": Map {},
"laneToLabelMap": Map {
1 => "SyncHydrationLane",
2 => "Sync",
4 => "InputContinuousHydration",
8 => "InputContinuous",
16 => "DefaultHydration",
32 => "Default",
64 => "TransitionHydration",
1 => "Sync",
2 => "InputContinuousHydration",
4 => "InputContinuous",
8 => "DefaultHydration",
16 => "Default",
32 => "TransitionHydration",
64 => "Transition",
128 => "Transition",
256 => "Transition",
512 => "Transition",
@ -2289,7 +2289,7 @@ describe('Timeline profiler', () => {
524288 => "Transition",
1048576 => "Transition",
2097152 => "Transition",
4194304 => "Transition",
4194304 => "Retry",
8388608 => "Retry",
16777216 => "Retry",
33554432 => "Retry",
@ -2304,13 +2304,12 @@ describe('Timeline profiler', () => {
2 => Array [],
4 => Array [],
8 => Array [],
16 => Array [],
32 => Array [
16 => Array [
Object {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "render-idle",
},
@ -2318,7 +2317,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "render",
},
@ -2326,7 +2325,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "commit",
},
@ -2334,7 +2333,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "layout-effects",
},
@ -2342,7 +2341,7 @@ describe('Timeline profiler', () => {
"batchUID": 1,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "passive-effects",
},
@ -2350,7 +2349,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "render-idle",
},
@ -2358,7 +2357,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "render",
},
@ -2366,7 +2365,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "commit",
},
@ -2374,7 +2373,7 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 1,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "layout-effects",
},
@ -2382,11 +2381,12 @@ describe('Timeline profiler', () => {
"batchUID": 2,
"depth": 0,
"duration": 0,
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "passive-effects",
},
],
32 => Array [],
64 => Array [],
128 => Array [],
256 => Array [],
@ -2419,7 +2419,7 @@ describe('Timeline profiler', () => {
"reactVersion": "<filtered-version>",
"schedulingEvents": Array [
Object {
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "schedule-render",
"warning": null,
@ -2428,7 +2428,7 @@ describe('Timeline profiler', () => {
"componentName": "App",
"componentStack": "
in App (at **)",
"lanes": "0b0000000000000000000000000100000",
"lanes": "0b0000000000000000000000000010000",
"timestamp": 10,
"type": "schedule-state-update",
"warning": null,

115
packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
View File

@ -21,7 +21,6 @@ let Suspense;
let act;
let IdleEventPriority;
let ContinuousEventPriority;
function dispatchMouseHoverEvent(to, from) {
if (!to) {
@ -111,18 +110,6 @@ function TODO_scheduleIdleDOMSchedulerTask(fn) {
});
}
function TODO_scheduleContinuousSchedulerTask(fn) {
ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () => {
const prevEvent = window.event;
window.event = {type: 'message'};
try {
fn();
} finally {
window.event = prevEvent;
}
});
}
describe('ReactDOMServerSelectiveHydration', () => {
beforeEach(() => {
jest.resetModuleRegistry();
@ -138,8 +125,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
Suspense = React.Suspense;
IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
ContinuousEventPriority = require('react-reconciler/constants')
.ContinuousEventPriority;
});
it('hydrates the target boundary synchronously during a click', async () => {
@ -1785,104 +1770,4 @@ describe('ReactDOMServerSelectiveHydration', () => {
document.body.removeChild(container);
});
it('can force hydration in response to sync update', () => {
function Child({text}) {
Scheduler.unstable_yieldValue(`Child ${text}`);
return <span ref={ref => (spanRef = ref)}>{text}</span>;
}
function App({text}) {
Scheduler.unstable_yieldValue(`App ${text}`);
return (
<div>
<Suspense fallback={null}>
<Child text={text} />
</Suspense>
</div>
);
}
let spanRef;
const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
expect(Scheduler).toHaveYielded(['App A', 'Child A']);
const container = document.createElement('div');
document.body.appendChild(container);
container.innerHTML = finalHTML;
const initialSpan = container.getElementsByTagName('span')[0];
const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
expect(Scheduler).toFlushUntilNextPaint(['App A']);
ReactDOM.flushSync(() => {
root.render(<App text="B" />);
});
expect(Scheduler).toHaveYielded(['App B', 'Child A', 'App B', 'Child B']);
expect(initialSpan).toBe(spanRef);
});
// @gate experimental || www
it('can force hydration in response to continuous update', () => {
function Child({text}) {
Scheduler.unstable_yieldValue(`Child ${text}`);
return <span ref={ref => (spanRef = ref)}>{text}</span>;
}
function App({text}) {
Scheduler.unstable_yieldValue(`App ${text}`);
return (
<div>
<Suspense fallback={null}>
<Child text={text} />
</Suspense>
</div>
);
}
let spanRef;
const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
expect(Scheduler).toHaveYielded(['App A', 'Child A']);
const container = document.createElement('div');
document.body.appendChild(container);
container.innerHTML = finalHTML;
const initialSpan = container.getElementsByTagName('span')[0];
const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
expect(Scheduler).toFlushUntilNextPaint(['App A']);
TODO_scheduleContinuousSchedulerTask(() => {
root.render(<App text="B" />);
});
expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']);
expect(initialSpan).toBe(spanRef);
});
it('can force hydration in response to default update', () => {
function Child({text}) {
Scheduler.unstable_yieldValue(`Child ${text}`);
return <span ref={ref => (spanRef = ref)}>{text}</span>;
}
function App({text}) {
Scheduler.unstable_yieldValue(`App ${text}`);
return (
<div>
<Suspense fallback={null}>
<Child text={text} />
</Suspense>
</div>
);
}
let spanRef;
const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
expect(Scheduler).toHaveYielded(['App A', 'Child A']);
const container = document.createElement('div');
document.body.appendChild(container);
container.innerHTML = finalHTML;
const initialSpan = container.getElementsByTagName('span')[0];
const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
expect(Scheduler).toFlushUntilNextPaint(['App A']);
ReactDOM.unstable_batchedUpdates(() => {
root.render(<App text="B" />);
});
expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']);
expect(initialSpan).toBe(spanRef);
});
});

74
packages/react-reconciler/src/ReactFiberLane.new.js
View File

@ -36,39 +36,39 @@ export const TotalLanes = 31;
export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /* */ 0b0000000000000000000000000000000;
export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001;
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010;
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001;
export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000;
export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010;
export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100;
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000;
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000;
export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000;
const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000;
const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000;
const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000;
const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000;
const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000;
const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000;
const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000;
const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000;
const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000;
const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000;
const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000;
const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000;
const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000;
const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000;
const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000;
const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000;
const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000;
const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000;
const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000;
const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000;
const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000;
const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000;
const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000;
const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000;
const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000;
const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000;
const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000;
const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000;
const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000;
const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000;
const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000;
const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000;
const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000;
const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000;
const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000;
const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000;
const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000;
const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000;
const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000;
const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000;
const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000;
const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000;
const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000;
const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000;
const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000;
const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000;
export const SomeRetryLane: Lane = RetryLane1;
@ -85,9 +85,6 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000
// It should be kept in sync with the Lanes values above.
export function getLabelForLane(lane: Lane): string | void {
if (enableSchedulingProfiler) {
if (lane & SyncHydrationLane) {
return 'SyncHydrationLane';
}
if (lane & SyncLane) {
return 'Sync';
}
@ -134,8 +131,6 @@ let nextRetryLane: Lane = RetryLane1;
function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
switch (getHighestPriorityLane(lanes)) {
case SyncHydrationLane:
return SyncHydrationLane;
case SyncLane:
return SyncLane;
case InputContinuousHydrationLane:
@ -169,6 +164,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
return lanes & RetryLanes;
case SelectiveHydrationLane:
return SelectiveHydrationLane;
@ -331,7 +327,6 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
function computeExpirationTime(lane: Lane, currentTime: number) {
switch (lane) {
case SyncHydrationLane:
case SyncLane:
case InputContinuousHydrationLane:
case InputContinuousLane:
@ -369,6 +364,7 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
// TODO: Retries should be allowed to expire if they are CPU bound for
// too long, but when I made this change it caused a spike in browser
// crashes. There must be some other underlying bug; not super urgent but
@ -463,7 +459,7 @@ export function getLanesToRetrySynchronouslyOnError(
}
export function includesSyncLane(lanes: Lanes): boolean {
return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
return (lanes & SyncLane) !== NoLanes;
}
export function includesNonIdleWork(lanes: Lanes): boolean {
@ -473,8 +469,6 @@ export function includesOnlyRetries(lanes: Lanes): boolean {
return (lanes & RetryLanes) === lanes;
}
export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
// TODO: Should hydration lanes be included here? This function is only
// used in `updateDeferredValueImpl`.
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
return (lanes & UrgentLanes) === NoLanes;
}
@ -755,9 +749,6 @@ export function getBumpedLaneForHydration(
let lane;
switch (renderLane) {
case SyncLane:
lane = SyncHydrationLane;
break;
case InputContinuousLane:
lane = InputContinuousHydrationLane;
break;
@ -784,6 +775,7 @@ export function getBumpedLaneForHydration(
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
lane = TransitionHydrationLane;
break;
case IdleLane:

74
packages/react-reconciler/src/ReactFiberLane.old.js
View File

@ -36,39 +36,39 @@ export const TotalLanes = 31;
export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /* */ 0b0000000000000000000000000000000;
export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001;
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010;
export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001;
export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000;
export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010;
export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100;
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000;
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000;
export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000;
const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000;
const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000;
const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000;
const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000;
const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000;
const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000;
const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000;
const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000;
const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000;
const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000;
const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000;
const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000;
const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000;
const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000;
const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000;
const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000;
const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000;
const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000;
const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000;
const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000;
const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000;
const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000;
const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000;
const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000;
const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000;
const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000;
const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000;
const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000;
const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000;
const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000;
const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000;
const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000;
const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000;
const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000;
const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000;
const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000;
const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000;
const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000;
const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000;
const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000;
const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000;
const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000;
const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000;
const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000;
const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000;
const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000;
export const SomeRetryLane: Lane = RetryLane1;
@ -85,9 +85,6 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000
// It should be kept in sync with the Lanes values above.
export function getLabelForLane(lane: Lane): string | void {
if (enableSchedulingProfiler) {
if (lane & SyncHydrationLane) {
return 'SyncHydrationLane';
}
if (lane & SyncLane) {
return 'Sync';
}
@ -134,8 +131,6 @@ let nextRetryLane: Lane = RetryLane1;
function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
switch (getHighestPriorityLane(lanes)) {
case SyncHydrationLane:
return SyncHydrationLane;
case SyncLane:
return SyncLane;
case InputContinuousHydrationLane:
@ -169,6 +164,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
return lanes & RetryLanes;
case SelectiveHydrationLane:
return SelectiveHydrationLane;
@ -331,7 +327,6 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
function computeExpirationTime(lane: Lane, currentTime: number) {
switch (lane) {
case SyncHydrationLane:
case SyncLane:
case InputContinuousHydrationLane:
case InputContinuousLane:
@ -369,6 +364,7 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
// TODO: Retries should be allowed to expire if they are CPU bound for
// too long, but when I made this change it caused a spike in browser
// crashes. There must be some other underlying bug; not super urgent but
@ -463,7 +459,7 @@ export function getLanesToRetrySynchronouslyOnError(
}
export function includesSyncLane(lanes: Lanes): boolean {
return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
return (lanes & SyncLane) !== NoLanes;
}
export function includesNonIdleWork(lanes: Lanes): boolean {
@ -473,8 +469,6 @@ export function includesOnlyRetries(lanes: Lanes): boolean {
return (lanes & RetryLanes) === lanes;
}
export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
// TODO: Should hydration lanes be included here? This function is only
// used in `updateDeferredValueImpl`.
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
return (lanes & UrgentLanes) === NoLanes;
}
@ -755,9 +749,6 @@ export function getBumpedLaneForHydration(
let lane;
switch (renderLane) {
case SyncLane:
lane = SyncHydrationLane;
break;
case InputContinuousLane:
lane = InputContinuousHydrationLane;
break;
@ -784,6 +775,7 @@ export function getBumpedLaneForHydration(
case RetryLane2:
case RetryLane3:
case RetryLane4:
case RetryLane5:
lane = TransitionHydrationLane;
break;
case IdleLane:

15
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View File

@ -141,7 +141,7 @@ import {
NoTimestamp,
claimNextTransitionLane,
claimNextRetryLane,
includesSyncLane,
includesSomeLane,
isSubsetOfLanes,
mergeLanes,
removeLanes,
@ -918,7 +918,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// TODO: Temporary until we confirm this warning is not fired.
if (
existingCallbackNode == null &&
!includesSyncLane(existingCallbackPriority)
existingCallbackPriority !== SyncLane
) {
console.error(
'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@ -936,7 +936,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// Schedule a new callback.
let newCallbackNode;
if (includesSyncLane(newCallbackPriority)) {
if (newCallbackPriority === SyncLane) {
// Special case: Sync React callbacks are scheduled on a special
// internal queue
if (root.tag === LegacyRoot) {
@ -1480,7 +1480,7 @@ function performSyncWorkOnRoot(root) {
flushPassiveEffects();
let lanes = getNextLanes(root, NoLanes);
if (!includesSyncLane(lanes)) {
if (!includesSomeLane(lanes, SyncLane)) {
// There's no remaining sync work left.
ensureRootIsScheduled(root, now());
return null;
@ -2930,13 +2930,16 @@ function commitRootImpl(
// TODO: We can optimize this by not scheduling the callback earlier. Since we
// currently schedule the callback in multiple places, will wait until those
// are consolidated.
if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) {
if (
includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
root.tag !== LegacyRoot
) {
flushPassiveEffects();
}
// Read this again, since a passive effect might have updated it
remainingLanes = root.pendingLanes;
if (includesSyncLane(remainingLanes)) {
if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
markNestedUpdateScheduled();
}

15
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
View File

@ -141,7 +141,7 @@ import {
NoTimestamp,
claimNextTransitionLane,
claimNextRetryLane,
includesSyncLane,
includesSomeLane,
isSubsetOfLanes,
mergeLanes,
removeLanes,
@ -918,7 +918,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// TODO: Temporary until we confirm this warning is not fired.
if (
existingCallbackNode == null &&
!includesSyncLane(existingCallbackPriority)
existingCallbackPriority !== SyncLane
) {
console.error(
'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@ -936,7 +936,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
// Schedule a new callback.
let newCallbackNode;
if (includesSyncLane(newCallbackPriority)) {
if (newCallbackPriority === SyncLane) {
// Special case: Sync React callbacks are scheduled on a special
// internal queue
if (root.tag === LegacyRoot) {
@ -1480,7 +1480,7 @@ function performSyncWorkOnRoot(root) {
flushPassiveEffects();
let lanes = getNextLanes(root, NoLanes);
if (!includesSyncLane(lanes)) {
if (!includesSomeLane(lanes, SyncLane)) {
// There's no remaining sync work left.
ensureRootIsScheduled(root, now());
return null;
@ -2930,13 +2930,16 @@ function commitRootImpl(
// TODO: We can optimize this by not scheduling the callback earlier. Since we
// currently schedule the callback in multiple places, will wait until those
// are consolidated.
if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) {
if (
includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
root.tag !== LegacyRoot
) {
flushPassiveEffects();
}
// Read this again, since a passive effect might have updated it
remainingLanes = root.pendingLanes;
if (includesSyncLane(remainingLanes)) {
if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
markNestedUpdateScheduled();
}

17
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
View File

@ -16,9 +16,8 @@ describe('DebugTracing', () => {
let logs;
const SYNC_LANE_STRING = '0b0000000000000000000000000000010';
const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000';
const RETRY_LANE_STRING = '0b0000000100000000000000000000000';
const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000';
const RETRY_LANE_STRING = '0b0000000010000000000000000000000';
global.IS_REACT_ACT_ENVIRONMENT = true;
@ -88,9 +87,9 @@ describe('DebugTracing', () => {
);
expect(logs).toEqual([
`group: ⚛️ render (${SYNC_LANE_STRING})`,
'group: ⚛️ render (0b0000000000000000000000000000001)',
'log: ⚛️ Example suspended',
`groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
]);
logs.splice(0);
@ -122,9 +121,9 @@ describe('DebugTracing', () => {
);
expect(logs).toEqual([
`group: ⚛️ render (${SYNC_LANE_STRING})`,
'group: ⚛️ render (0b0000000000000000000000000000001)',
'log: <Wrapper/>',
`groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
]);
logs.splice(0);
@ -238,7 +237,7 @@ describe('DebugTracing', () => {
expect(logs).toEqual([
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
`log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
]);
@ -296,7 +295,7 @@ describe('DebugTracing', () => {
expect(logs).toEqual([
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
`log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
]);