[react-dom] move all client code to `react-dom/client` (#28271)
This PR reorganizes the `react-dom` entrypoint to only pull in code that is environment agnostic. Previously if you required anything from this entrypoint in any environment the entire client reconciler was loaded. In a prior release we added a server rendering stub which you could alias in server environments to omit this unecessary code. After landing this change this entrypoint should not load any environment specific code. While a few APIs are truly client (browser) only such as createRoot and hydrateRoot many of the APIs you import from this package are only useful in the browser but could concievably be imported in shared code (components running in Fizz or shared components as part of an RSC app). To avoid making these require opting into the client bundle we are keeping them in the `react-dom` entrypoint and changing their implementation so that in environments where they are not particularly useful they do something benign and expected. #### Removed APIs The following APIs are being removed in the next major. Largely they have all been deprecated already and are part of legacy rendering modes where concurrent features of React are not available * `render` * `hydrate` * `findDOMNode` * `unmountComponentAtNode` * `unstable_createEventHandle` * `unstable_renderSubtreeIntoContainer` * `unstable_runWithPrioirty` #### moved Client APIs These APIs were available on both `react-dom` (with a warning) and `react-dom/client`. After this change they are only available on `react-dom/client` * `createRoot` * `hydrateRoot` #### retained APIs These APIs still exist on the `react-dom` entrypoint but have normalized behavior depending on which renderers are currently in scope * `flushSync`: will execute the function (if provided) inside the flushSync implemention of FlightServer, Fizz, and Fiber DOM renderers. * `unstable_batchedUpdates`: This is a noop in concurrent mode because it is now the only supported behavior because there is no legacy rendering mode * `createPortal`: This just produces an object. It can be called from anywhere but since you will probably not have a handle on a DOM node to pass to it it will likely warn in environments other than the browser * preloading APIS such as `preload`: These methods will execute the preload across all renderers currently in scope. Since we resolve the Request object on the server using AsyncLocalStorage or the current function stack in practice only one renderer should act upon the preload. In addition to these changes the server rendering stub now just rexports everything from `react-dom`. In a future minor we will add a warning when using the stub and in the next major we will remove the stub altogether
Josh Story committed
Apr 24, 2024 at 08:50 UTC
cb151849e13f46ec64570519cb93d5939fb60cab
51 files changed
+1715
-2052
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+1204
-1164
@@ -121,21 +121,21 @@ describe('Timeline profiler', () => {
121
legacyRender(<div />);
122
123
expect(clearedMarks).toMatchInlineSnapshot(`
124
- [
125
- "--schedule-render-1",
126
- "--render-start-1",
127
- "--render-stop",
128
- "--commit-start-1",
129
- "--react-version-<filtered-version>",
130
- "--profiler-version-1",
131
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
132
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
133
- "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
134
- "--layout-effects-start-1",
135
- "--layout-effects-stop",
136
- "--commit-stop",
137
- ]
138
- `);
124
+ [
125
+ "--schedule-render-1",
126
+ "--render-start-1",
127
+ "--render-stop",
128
+ "--commit-start-1",
129
+ "--react-version-<filtered-version>",
130
+ "--profiler-version-1",
131
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
132
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
133
+ "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
134
+ "--layout-effects-start-1",
135
+ "--layout-effects-stop",
136
+ "--commit-stop",
137
+ ]
138
+ `);
139
});
140
141
// TODO(hoxyq): investigate why running this test with React 18 fails
@@ -154,24 +154,24 @@ describe('Timeline profiler', () => {
154
);
155
156
expect(clearedMarks).toMatchInlineSnapshot(`
157
- [
158
- "--schedule-render-2",
159
- "--render-start-2",
160
- "--component-render-start-Example",
161
- "--component-render-stop",
162
- "--suspense-suspend-0-Example-mount-2-",
163
- "--render-stop",
164
- "--commit-start-2",
165
- "--react-version-<filtered-version>",
166
- "--profiler-version-1",
167
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
168
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
169
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
170
- "--layout-effects-start-2",
171
- "--layout-effects-stop",
172
- "--commit-stop",
173
- ]
174
- `);
157
+ [
158
+ "--schedule-render-2",
159
+ "--render-start-2",
160
+ "--component-render-start-Example",
161
+ "--component-render-stop",
162
+ "--suspense-suspend-0-Example-mount-2-",
163
+ "--render-stop",
164
+ "--commit-start-2",
165
+ "--react-version-<filtered-version>",
166
+ "--profiler-version-1",
167
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
168
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
169
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
170
+ "--layout-effects-start-2",
171
+ "--layout-effects-stop",
172
+ "--commit-stop",
173
+ ]
174
+ `);
175
176
clearPendingMarks();
177
@@ -199,24 +199,24 @@ describe('Timeline profiler', () => {
199
);
200
201
expect(clearedMarks).toMatchInlineSnapshot(`
202
- [
203
- "--schedule-render-2",
204
- "--render-start-2",
205
- "--component-render-start-Example",
206
- "--component-render-stop",
207
- "--suspense-suspend-0-Example-mount-2-",
208
- "--render-stop",
209
- "--commit-start-2",
210
- "--react-version-<filtered-version>",
211
- "--profiler-version-1",
212
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
213
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
214
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
215
- "--layout-effects-start-2",
216
- "--layout-effects-stop",
217
- "--commit-stop",
218
- ]
219
- `);
202
+ [
203
+ "--schedule-render-2",
204
+ "--render-start-2",
205
+ "--component-render-start-Example",
206
+ "--component-render-stop",
207
+ "--suspense-suspend-0-Example-mount-2-",
208
+ "--render-stop",
209
+ "--commit-start-2",
210
+ "--react-version-<filtered-version>",
211
+ "--profiler-version-1",
212
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
213
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
214
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
215
+ "--layout-effects-start-2",
216
+ "--layout-effects-stop",
217
+ "--commit-stop",
218
+ ]
219
+ `);
220
221
clearPendingMarks();
222
@@ -253,39 +253,39 @@ describe('Timeline profiler', () => {
253
);
254
255
expect(clearedMarks).toMatchInlineSnapshot(`
256
- [
257
- "--schedule-render-1",
258
- "--render-start-1",
259
- "--component-render-start-ErrorBoundary",
260
- "--component-render-stop",
261
- "--component-render-start-ExampleThatThrows",
262
- "--component-render-start-ExampleThatThrows",
263
- "--component-render-stop",
264
- "--error-ExampleThatThrows-mount-Expected error",
265
- "--render-stop",
266
- "--commit-start-1",
267
- "--react-version-<filtered-version>",
268
- "--profiler-version-1",
269
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
270
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
271
- "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
272
- "--layout-effects-start-1",
273
- "--schedule-state-update-1-ErrorBoundary",
274
- "--layout-effects-stop",
275
- "--commit-stop",
276
- "--render-start-1",
277
- "--component-render-start-ErrorBoundary",
278
- "--component-render-stop",
279
- "--render-stop",
280
- "--commit-start-1",
281
- "--react-version-<filtered-version>",
282
- "--profiler-version-1",
283
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
284
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
285
- "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
286
- "--commit-stop",
287
- ]
288
- `);
256
+ [
257
+ "--schedule-render-1",
258
+ "--render-start-1",
259
+ "--component-render-start-ErrorBoundary",
260
+ "--component-render-stop",
261
+ "--component-render-start-ExampleThatThrows",
262
+ "--component-render-start-ExampleThatThrows",
263
+ "--component-render-stop",
264
+ "--error-ExampleThatThrows-mount-Expected error",
265
+ "--render-stop",
266
+ "--commit-start-1",
267
+ "--react-version-<filtered-version>",
268
+ "--profiler-version-1",
269
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
270
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
271
+ "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
272
+ "--layout-effects-start-1",
273
+ "--schedule-state-update-1-ErrorBoundary",
274
+ "--layout-effects-stop",
275
+ "--commit-stop",
276
+ "--render-start-1",
277
+ "--component-render-start-ErrorBoundary",
278
+ "--component-render-stop",
279
+ "--render-stop",
280
+ "--commit-start-1",
281
+ "--react-version-<filtered-version>",
282
+ "--profiler-version-1",
283
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
284
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
285
+ "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
286
+ "--commit-stop",
287
+ ]
288
+ `);
289
});
290
});
291
@@ -309,30 +309,32 @@ describe('Timeline profiler', () => {
309
modernRender(<div />);
310
311
expect(clearedMarks).toMatchInlineSnapshot(`
312
- [
313
- "--schedule-render-32",
314
- ]
315
- `);
312
+ [
313
+ "--schedule-render-32",
314
+ ]
315
+ `);
316
317
clearPendingMarks();
318
319
await waitForPaint([]);
320
321
expect(clearedMarks).toMatchInlineSnapshot(`
322
- [
323
- "--render-start-32",
324
- "--render-stop",
325
- "--commit-start-32",
326
- "--react-version-<filtered-version>",
327
- "--profiler-version-1",
328
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
329
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
330
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
331
- "--layout-effects-start-32",
332
- "--layout-effects-stop",
333
- "--commit-stop",
334
- ]
335
- `);
322
+ [
323
+ "--render-start-32",
324
+ "--render-stop",
325
+ "--commit-start-32",
326
+ "--react-version-<filtered-version>",
327
+ "--profiler-version-1",
328
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
329
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
330
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
331
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
332
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
333
+ "--layout-effects-start-32",
334
+ "--layout-effects-stop",
335
+ "--commit-stop",
336
+ ]
337
+ `);
338
});
339
340
it('should mark render yields', async () => {
@@ -353,14 +355,14 @@ describe('Timeline profiler', () => {
355
await waitFor(['Foo']);
356
357
expect(clearedMarks).toMatchInlineSnapshot(`
356
- [
357
- "--schedule-render-128",
358
- "--render-start-128",
359
- "--component-render-start-Foo",
360
- "--component-render-stop",
361
- "--render-yield",
362
- ]
363
- `);
358
+ [
359
+ "--schedule-render-128",
360
+ "--render-start-128",
361
+ "--component-render-start-Foo",
362
+ "--component-render-stop",
363
+ "--render-yield",
364
+ ]
365
+ `);
366
});
367
368
it('should mark concurrent render with suspense that resolves', async () => {
@@ -380,33 +382,35 @@ describe('Timeline profiler', () => {
382
);
383
384
expect(clearedMarks).toMatchInlineSnapshot(`
383
- [
384
- "--schedule-render-32",
385
- ]
386
- `);
385
+ [
386
+ "--schedule-render-32",
387
+ ]
388
+ `);
389
390
clearPendingMarks();
391
392
await waitForPaint([]);
393
394
expect(clearedMarks).toMatchInlineSnapshot(`
393
- [
394
- "--render-start-32",
395
- "--component-render-start-Example",
396
- "--component-render-stop",
397
- "--suspense-suspend-0-Example-mount-32-",
398
- "--render-stop",
399
- "--commit-start-32",
400
- "--react-version-<filtered-version>",
401
- "--profiler-version-1",
402
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
403
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
404
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
405
- "--layout-effects-start-32",
406
- "--layout-effects-stop",
407
- "--commit-stop",
408
- ]
409
- `);
395
+ [
396
+ "--render-start-32",
397
+ "--component-render-start-Example",
398
+ "--component-render-stop",
399
+ "--suspense-suspend-0-Example-mount-32-",
400
+ "--render-stop",
401
+ "--commit-start-32",
402
+ "--react-version-<filtered-version>",
403
+ "--profiler-version-1",
404
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
405
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
406
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
407
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
408
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
409
+ "--layout-effects-start-32",
410
+ "--layout-effects-stop",
411
+ "--commit-stop",
412
+ ]
413
+ `);
414
415
clearPendingMarks();
416
@@ -435,33 +439,35 @@ describe('Timeline profiler', () => {
439
);
440
441
expect(clearedMarks).toMatchInlineSnapshot(`
438
- [
439
- "--schedule-render-32",
440
- ]
441
- `);
442
+ [
443
+ "--schedule-render-32",
444
+ ]
445
+ `);
446
447
clearPendingMarks();
448
449
await waitForPaint([]);
450
451
expect(clearedMarks).toMatchInlineSnapshot(`
448
- [
449
- "--render-start-32",
450
- "--component-render-start-Example",
451
- "--component-render-stop",
452
- "--suspense-suspend-0-Example-mount-32-",
453
- "--render-stop",
454
- "--commit-start-32",
455
- "--react-version-<filtered-version>",
456
- "--profiler-version-1",
457
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
458
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
459
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
460
- "--layout-effects-start-32",
461
- "--layout-effects-stop",
462
- "--commit-stop",
463
- ]
464
- `);
452
+ [
453
+ "--render-start-32",
454
+ "--component-render-start-Example",
455
+ "--component-render-stop",
456
+ "--suspense-suspend-0-Example-mount-32-",
457
+ "--render-stop",
458
+ "--commit-start-32",
459
+ "--react-version-<filtered-version>",
460
+ "--profiler-version-1",
461
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
462
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
463
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
464
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
465
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
466
+ "--layout-effects-start-32",
467
+ "--layout-effects-stop",
468
+ "--commit-stop",
469
+ ]
470
+ `);
471
472
clearPendingMarks();
473
@@ -490,44 +496,48 @@ describe('Timeline profiler', () => {
496
modernRender(<Example />);
497
498
expect(clearedMarks).toMatchInlineSnapshot(`
493
- [
494
- "--schedule-render-32",
495
- ]
496
- `);
499
+ [
500
+ "--schedule-render-32",
501
+ ]
502
+ `);
503
504
clearPendingMarks();
505
506
await waitForPaint([]);
507
508
expect(clearedMarks).toMatchInlineSnapshot(`
503
- [
504
- "--render-start-32",
505
- "--component-render-start-Example",
506
- "--component-render-stop",
507
- "--render-stop",
508
- "--commit-start-32",
509
- "--react-version-<filtered-version>",
510
- "--profiler-version-1",
511
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
512
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
513
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
514
- "--layout-effects-start-32",
515
- "--schedule-state-update-2-Example",
516
- "--layout-effects-stop",
517
- "--render-start-2",
518
- "--component-render-start-Example",
519
- "--component-render-stop",
520
- "--render-stop",
521
- "--commit-start-2",
522
- "--react-version-<filtered-version>",
523
- "--profiler-version-1",
524
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
525
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
526
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
527
- "--commit-stop",
528
- "--commit-stop",
529
- ]
530
- `);
509
+ [
510
+ "--render-start-32",
511
+ "--component-render-start-Example",
512
+ "--component-render-stop",
513
+ "--render-stop",
514
+ "--commit-start-32",
515
+ "--react-version-<filtered-version>",
516
+ "--profiler-version-1",
517
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
518
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
519
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
520
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
521
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
522
+ "--layout-effects-start-32",
523
+ "--schedule-state-update-2-Example",
524
+ "--layout-effects-stop",
525
+ "--render-start-2",
526
+ "--component-render-start-Example",
527
+ "--component-render-stop",
528
+ "--render-stop",
529
+ "--commit-start-2",
530
+ "--react-version-<filtered-version>",
531
+ "--profiler-version-1",
532
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
533
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
534
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
535
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
536
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
537
+ "--commit-stop",
538
+ "--commit-stop",
539
+ ]
540
+ `);
541
});
542
543
it('should mark cascading class component force updates', async () => {
@@ -543,44 +553,48 @@ describe('Timeline profiler', () => {
553
modernRender(<Example />);
554
555
expect(clearedMarks).toMatchInlineSnapshot(`
546
- [
547
- "--schedule-render-32",
548
- ]
549
- `);
556
+ [
557
+ "--schedule-render-32",
558
+ ]
559
+ `);
560
561
clearPendingMarks();
562
563
await waitForPaint([]);
564
565
expect(clearedMarks).toMatchInlineSnapshot(`
556
- [
557
- "--render-start-32",
558
- "--component-render-start-Example",
559
- "--component-render-stop",
560
- "--render-stop",
561
- "--commit-start-32",
562
- "--react-version-<filtered-version>",
563
- "--profiler-version-1",
564
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
565
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
566
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
567
- "--layout-effects-start-32",
568
- "--schedule-forced-update-2-Example",
569
- "--layout-effects-stop",
570
- "--render-start-2",
571
- "--component-render-start-Example",
572
- "--component-render-stop",
573
- "--render-stop",
574
- "--commit-start-2",
575
- "--react-version-<filtered-version>",
576
- "--profiler-version-1",
577
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
578
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
579
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
580
- "--commit-stop",
581
- "--commit-stop",
582
- ]
583
- `);
566
+ [
567
+ "--render-start-32",
568
+ "--component-render-start-Example",
569
+ "--component-render-stop",
570
+ "--render-stop",
571
+ "--commit-start-32",
572
+ "--react-version-<filtered-version>",
573
+ "--profiler-version-1",
574
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
575
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
576
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
577
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
578
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
579
+ "--layout-effects-start-32",
580
+ "--schedule-forced-update-2-Example",
581
+ "--layout-effects-stop",
582
+ "--render-start-2",
583
+ "--component-render-start-Example",
584
+ "--component-render-stop",
585
+ "--render-stop",
586
+ "--commit-start-2",
587
+ "--react-version-<filtered-version>",
588
+ "--profiler-version-1",
589
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
590
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
591
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
592
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
593
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
594
+ "--commit-stop",
595
+ "--commit-stop",
596
+ ]
597
+ `);
598
});
599
600
it('should mark render phase state updates for class component', async () => {
@@ -597,10 +611,10 @@ describe('Timeline profiler', () => {
611
modernRender(<Example />);
612
613
expect(clearedMarks).toMatchInlineSnapshot(`
600
- [
601
- "--schedule-render-32",
602
- ]
603
- `);
614
+ [
615
+ "--schedule-render-32",
616
+ ]
617
+ `);
618
619
clearPendingMarks();
620
@@ -617,23 +631,25 @@ describe('Timeline profiler', () => {
631
);
632
633
expect(clearedMarks).toMatchInlineSnapshot(`
620
- [
621
- "--render-start-32",
622
- "--component-render-start-Example",
623
- "--schedule-state-update-32-Example",
624
- "--component-render-stop",
625
- "--render-stop",
626
- "--commit-start-32",
627
- "--react-version-<filtered-version>",
628
- "--profiler-version-1",
629
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
630
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
631
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
632
- "--layout-effects-start-32",
633
- "--layout-effects-stop",
634
- "--commit-stop",
635
- ]
636
- `);
634
+ [
635
+ "--render-start-32",
636
+ "--component-render-start-Example",
637
+ "--schedule-state-update-32-Example",
638
+ "--component-render-stop",
639
+ "--render-stop",
640
+ "--commit-start-32",
641
+ "--react-version-<filtered-version>",
642
+ "--profiler-version-1",
643
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
644
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
645
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
646
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
647
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
648
+ "--layout-effects-start-32",
649
+ "--layout-effects-stop",
650
+ "--commit-stop",
651
+ ]
652
+ `);
653
});
654
655
it('should mark render phase force updates for class component', async () => {
@@ -651,10 +667,10 @@ describe('Timeline profiler', () => {
667
modernRender(<Example />);
668
669
expect(clearedMarks).toMatchInlineSnapshot(`
654
- [
655
- "--schedule-render-32",
656
- ]
657
- `);
670
+ [
671
+ "--schedule-render-32",
672
+ ]
673
+ `);
674
675
clearPendingMarks();
676
@@ -671,23 +687,25 @@ describe('Timeline profiler', () => {
687
);
688
689
expect(clearedMarks).toMatchInlineSnapshot(`
674
- [
675
- "--render-start-32",
676
- "--component-render-start-Example",
677
- "--schedule-forced-update-32-Example",
678
- "--component-render-stop",
679
- "--render-stop",
680
- "--commit-start-32",
681
- "--react-version-<filtered-version>",
682
- "--profiler-version-1",
683
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
684
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
685
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
686
- "--layout-effects-start-32",
687
- "--layout-effects-stop",
688
- "--commit-stop",
689
- ]
690
- `);
690
+ [
691
+ "--render-start-32",
692
+ "--component-render-start-Example",
693
+ "--schedule-forced-update-32-Example",
694
+ "--component-render-stop",
695
+ "--render-stop",
696
+ "--commit-start-32",
697
+ "--react-version-<filtered-version>",
698
+ "--profiler-version-1",
699
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
700
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
701
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
702
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
703
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
704
+ "--layout-effects-start-32",
705
+ "--layout-effects-stop",
706
+ "--commit-stop",
707
+ ]
708
+ `);
709
});
710
711
it('should mark cascading layout updates', async () => {
@@ -702,46 +720,50 @@ describe('Timeline profiler', () => {
720
modernRender(<Example />);
721
722
expect(clearedMarks).toMatchInlineSnapshot(`
705
- [
706
- "--schedule-render-32",
707
- ]
708
- `);
723
+ [
724
+ "--schedule-render-32",
725
+ ]
726
+ `);
727
728
clearPendingMarks();
729
730
await waitForPaint([]);
731
732
expect(clearedMarks).toMatchInlineSnapshot(`
715
- [
716
- "--render-start-32",
717
- "--component-render-start-Example",
718
- "--component-render-stop",
719
- "--render-stop",
720
- "--commit-start-32",
721
- "--react-version-<filtered-version>",
722
- "--profiler-version-1",
723
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
724
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
725
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
726
- "--layout-effects-start-32",
727
- "--component-layout-effect-mount-start-Example",
728
- "--schedule-state-update-2-Example",
729
- "--component-layout-effect-mount-stop",
730
- "--layout-effects-stop",
731
- "--render-start-2",
732
- "--component-render-start-Example",
733
- "--component-render-stop",
734
- "--render-stop",
735
- "--commit-start-2",
736
- "--react-version-<filtered-version>",
737
- "--profiler-version-1",
738
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
739
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
740
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
741
- "--commit-stop",
742
- "--commit-stop",
743
- ]
744
- `);
733
+ [
734
+ "--render-start-32",
735
+ "--component-render-start-Example",
736
+ "--component-render-stop",
737
+ "--render-stop",
738
+ "--commit-start-32",
739
+ "--react-version-<filtered-version>",
740
+ "--profiler-version-1",
741
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
742
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
743
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
744
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
745
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
746
+ "--layout-effects-start-32",
747
+ "--component-layout-effect-mount-start-Example",
748
+ "--schedule-state-update-2-Example",
749
+ "--component-layout-effect-mount-stop",
750
+ "--layout-effects-stop",
751
+ "--render-start-2",
752
+ "--component-render-start-Example",
753
+ "--component-render-stop",
754
+ "--render-stop",
755
+ "--commit-start-2",
756
+ "--react-version-<filtered-version>",
757
+ "--profiler-version-1",
758
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
759
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
760
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
761
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
762
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
763
+ "--commit-stop",
764
+ "--commit-stop",
765
+ ]
766
+ `);
767
});
768
769
it('should mark cascading passive updates', async () => {
@@ -758,39 +780,43 @@ describe('Timeline profiler', () => {
780
await waitForAll([]);
781
782
expect(clearedMarks).toMatchInlineSnapshot(`
761
- [
762
- "--schedule-render-32",
763
- "--render-start-32",
764
- "--component-render-start-Example",
765
- "--component-render-stop",
766
- "--render-stop",
767
- "--commit-start-32",
768
- "--react-version-<filtered-version>",
769
- "--profiler-version-1",
770
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
771
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
772
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
773
- "--layout-effects-start-32",
774
- "--layout-effects-stop",
775
- "--commit-stop",
776
- "--passive-effects-start-32",
777
- "--component-passive-effect-mount-start-Example",
778
- "--schedule-state-update-32-Example",
779
- "--component-passive-effect-mount-stop",
780
- "--passive-effects-stop",
781
- "--render-start-32",
782
- "--component-render-start-Example",
783
- "--component-render-stop",
784
- "--render-stop",
785
- "--commit-start-32",
786
- "--react-version-<filtered-version>",
787
- "--profiler-version-1",
788
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
789
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
790
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
791
- "--commit-stop",
792
- ]
793
- `);
783
+ [
784
+ "--schedule-render-32",
785
+ "--render-start-32",
786
+ "--component-render-start-Example",
787
+ "--component-render-stop",
788
+ "--render-stop",
789
+ "--commit-start-32",
790
+ "--react-version-<filtered-version>",
791
+ "--profiler-version-1",
792
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
793
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
794
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
795
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
796
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
797
+ "--layout-effects-start-32",
798
+ "--layout-effects-stop",
799
+ "--commit-stop",
800
+ "--passive-effects-start-32",
801
+ "--component-passive-effect-mount-start-Example",
802
+ "--schedule-state-update-32-Example",
803
+ "--component-passive-effect-mount-stop",
804
+ "--passive-effects-stop",
805
+ "--render-start-32",
806
+ "--component-render-start-Example",
807
+ "--component-render-stop",
808
+ "--render-stop",
809
+ "--commit-start-32",
810
+ "--react-version-<filtered-version>",
811
+ "--profiler-version-1",
812
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
813
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
814
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
815
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
816
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
817
+ "--commit-stop",
818
+ ]
819
+ `);
820
});
821
822
it('should mark render phase updates', async () => {
@@ -807,24 +833,26 @@ describe('Timeline profiler', () => {
833
await waitForAll([]);
834
835
expect(clearedMarks).toMatchInlineSnapshot(`
810
- [
811
- "--schedule-render-32",
812
- "--render-start-32",
813
- "--component-render-start-Example",
814
- "--schedule-state-update-32-Example",
815
- "--component-render-stop",
816
- "--render-stop",
817
- "--commit-start-32",
818
- "--react-version-<filtered-version>",
819
- "--profiler-version-1",
820
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
821
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
822
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
823
- "--layout-effects-start-32",
824
- "--layout-effects-stop",
825
- "--commit-stop",
826
- ]
827
- `);
836
+ [
837
+ "--schedule-render-32",
838
+ "--render-start-32",
839
+ "--component-render-start-Example",
840
+ "--schedule-state-update-32-Example",
841
+ "--component-render-stop",
842
+ "--render-stop",
843
+ "--commit-start-32",
844
+ "--react-version-<filtered-version>",
845
+ "--profiler-version-1",
846
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
847
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
848
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
849
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
850
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
851
+ "--layout-effects-start-32",
852
+ "--layout-effects-stop",
853
+ "--commit-stop",
854
+ ]
855
+ `);
856
});
857
858
it('should mark concurrent render that throws', async () => {
@@ -855,54 +883,58 @@ describe('Timeline profiler', () => {
883
);
884
885
expect(clearedMarks).toMatchInlineSnapshot(`
858
- [
859
- "--schedule-render-32",
860
- ]
861
- `);
886
+ [
887
+ "--schedule-render-32",
888
+ ]
889
+ `);
890
891
clearPendingMarks();
892
893
await waitForPaint([]);
894
895
expect(clearedMarks).toMatchInlineSnapshot(`
868
- [
869
- "--render-start-32",
870
- "--component-render-start-ErrorBoundary",
871
- "--component-render-stop",
872
- "--component-render-start-ExampleThatThrows",
873
- "--component-render-stop",
874
- "--error-ExampleThatThrows-mount-Expected error",
875
- "--render-stop",
876
- "--render-start-32",
877
- "--component-render-start-ErrorBoundary",
878
- "--component-render-stop",
879
- "--component-render-start-ExampleThatThrows",
880
- "--component-render-stop",
881
- "--error-ExampleThatThrows-mount-Expected error",
882
- "--render-stop",
883
- "--commit-start-32",
884
- "--react-version-<filtered-version>",
885
- "--profiler-version-1",
886
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
887
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
888
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
889
- "--layout-effects-start-32",
890
- "--schedule-state-update-2-ErrorBoundary",
891
- "--layout-effects-stop",
892
- "--render-start-2",
893
- "--component-render-start-ErrorBoundary",
894
- "--component-render-stop",
895
- "--render-stop",
896
- "--commit-start-2",
897
- "--react-version-<filtered-version>",
898
- "--profiler-version-1",
899
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
900
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
901
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
902
- "--commit-stop",
903
- "--commit-stop",
904
- ]
905
- `);
896
+ [
897
+ "--render-start-32",
898
+ "--component-render-start-ErrorBoundary",
899
+ "--component-render-stop",
900
+ "--component-render-start-ExampleThatThrows",
901
+ "--component-render-stop",
902
+ "--error-ExampleThatThrows-mount-Expected error",
903
+ "--render-stop",
904
+ "--render-start-32",
905
+ "--component-render-start-ErrorBoundary",
906
+ "--component-render-stop",
907
+ "--component-render-start-ExampleThatThrows",
908
+ "--component-render-stop",
909
+ "--error-ExampleThatThrows-mount-Expected error",
910
+ "--render-stop",
911
+ "--commit-start-32",
912
+ "--react-version-<filtered-version>",
913
+ "--profiler-version-1",
914
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
915
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
916
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
917
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
918
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
919
+ "--layout-effects-start-32",
920
+ "--schedule-state-update-2-ErrorBoundary",
921
+ "--layout-effects-stop",
922
+ "--render-start-2",
923
+ "--component-render-start-ErrorBoundary",
924
+ "--component-render-stop",
925
+ "--render-stop",
926
+ "--commit-start-2",
927
+ "--react-version-<filtered-version>",
928
+ "--profiler-version-1",
929
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
930
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
931
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
932
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
933
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
934
+ "--commit-stop",
935
+ "--commit-stop",
936
+ ]
937
+ `);
938
});
939
940
it('should mark passive and layout effects', async () => {
@@ -950,27 +982,29 @@ describe('Timeline profiler', () => {
982
await waitForPaint(['layout 1 mount', 'layout 2 mount']);
983
984
expect(clearedMarks).toMatchInlineSnapshot(`
953
- [
954
- "--schedule-render-32",
955
- "--render-start-32",
956
- "--component-render-start-ComponentWithEffects",
957
- "--component-render-stop",
958
- "--render-stop",
959
- "--commit-start-32",
960
- "--react-version-<filtered-version>",
961
- "--profiler-version-1",
962
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
963
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
964
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
965
- "--layout-effects-start-32",
966
- "--component-layout-effect-mount-start-ComponentWithEffects",
967
- "--component-layout-effect-mount-stop",
968
- "--component-layout-effect-mount-start-ComponentWithEffects",
969
- "--component-layout-effect-mount-stop",
970
- "--layout-effects-stop",
971
- "--commit-stop",
972
- ]
973
- `);
985
+ [
986
+ "--schedule-render-32",
987
+ "--render-start-32",
988
+ "--component-render-start-ComponentWithEffects",
989
+ "--component-render-stop",
990
+ "--render-stop",
991
+ "--commit-start-32",
992
+ "--react-version-<filtered-version>",
993
+ "--profiler-version-1",
994
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
995
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
996
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
997
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
998
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
999
+ "--layout-effects-start-32",
1000
+ "--component-layout-effect-mount-start-ComponentWithEffects",
1001
+ "--component-layout-effect-mount-stop",
1002
+ "--component-layout-effect-mount-start-ComponentWithEffects",
1003
+ "--component-layout-effect-mount-stop",
1004
+ "--layout-effects-stop",
1005
+ "--commit-stop",
1006
+ ]
1007
+ `);
1008
1009
clearPendingMarks();
1010
@@ -981,17 +1015,17 @@ describe('Timeline profiler', () => {
1015
]);
1016
1017
expect(clearedMarks).toMatchInlineSnapshot(`
984
- [
985
- "--passive-effects-start-32",
986
- "--component-passive-effect-mount-start-ComponentWithEffects",
987
- "--component-passive-effect-mount-stop",
988
- "--component-passive-effect-mount-start-ComponentWithEffects",
989
- "--component-passive-effect-mount-stop",
990
- "--component-passive-effect-mount-start-ComponentWithEffects",
991
- "--component-passive-effect-mount-stop",
992
- "--passive-effects-stop",
993
- ]
994
- `);
1018
+ [
1019
+ "--passive-effects-start-32",
1020
+ "--component-passive-effect-mount-start-ComponentWithEffects",
1021
+ "--component-passive-effect-mount-stop",
1022
+ "--component-passive-effect-mount-start-ComponentWithEffects",
1023
+ "--component-passive-effect-mount-stop",
1024
+ "--component-passive-effect-mount-start-ComponentWithEffects",
1025
+ "--component-passive-effect-mount-stop",
1026
+ "--passive-effects-stop",
1027
+ ]
1028
+ `);
1029
1030
clearPendingMarks();
1031
@@ -1008,33 +1042,35 @@ describe('Timeline profiler', () => {
1042
]);
1043
1044
expect(clearedMarks).toMatchInlineSnapshot(`
1011
- [
1012
- "--schedule-render-2",
1013
- "--render-start-2",
1014
- "--render-stop",
1015
- "--commit-start-2",
1016
- "--react-version-<filtered-version>",
1017
- "--profiler-version-1",
1018
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1019
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1020
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
1021
- "--component-layout-effect-unmount-start-ComponentWithEffects",
1022
- "--component-layout-effect-unmount-stop",
1023
- "--component-layout-effect-unmount-start-ComponentWithEffects",
1024
- "--component-layout-effect-unmount-stop",
1025
- "--layout-effects-start-2",
1026
- "--layout-effects-stop",
1027
- "--passive-effects-start-2",
1028
- "--component-passive-effect-unmount-start-ComponentWithEffects",
1029
- "--component-passive-effect-unmount-stop",
1030
- "--component-passive-effect-unmount-start-ComponentWithEffects",
1031
- "--component-passive-effect-unmount-stop",
1032
- "--component-passive-effect-unmount-start-ComponentWithEffects",
1033
- "--component-passive-effect-unmount-stop",
1034
- "--passive-effects-stop",
1035
- "--commit-stop",
1036
- ]
1037
- `);
1045
+ [
1046
+ "--schedule-render-2",
1047
+ "--render-start-2",
1048
+ "--render-stop",
1049
+ "--commit-start-2",
1050
+ "--react-version-<filtered-version>",
1051
+ "--profiler-version-1",
1052
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1053
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1054
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1055
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1056
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
1057
+ "--component-layout-effect-unmount-start-ComponentWithEffects",
1058
+ "--component-layout-effect-unmount-stop",
1059
+ "--component-layout-effect-unmount-start-ComponentWithEffects",
1060
+ "--component-layout-effect-unmount-stop",
1061
+ "--layout-effects-start-2",
1062
+ "--layout-effects-stop",
1063
+ "--passive-effects-start-2",
1064
+ "--component-passive-effect-unmount-start-ComponentWithEffects",
1065
+ "--component-passive-effect-unmount-stop",
1066
+ "--component-passive-effect-unmount-start-ComponentWithEffects",
1067
+ "--component-passive-effect-unmount-stop",
1068
+ "--component-passive-effect-unmount-start-ComponentWithEffects",
1069
+ "--component-passive-effect-unmount-stop",
1070
+ "--passive-effects-stop",
1071
+ "--commit-stop",
1072
+ ]
1073
+ `);
1074
});
1075
});
1076
@@ -1048,21 +1084,21 @@ describe('Timeline profiler', () => {
1084
legacyRender(<div />);
1085
1086
expect(clearedMarks).toMatchInlineSnapshot(`
1051
- [
1052
- "--schedule-render-1",
1053
- "--render-start-1",
1054
- "--render-stop",
1055
- "--commit-start-1",
1056
- "--react-version-<filtered-version>",
1057
- "--profiler-version-1",
1058
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1059
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1060
- "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1061
- "--layout-effects-start-1",
1062
- "--layout-effects-stop",
1063
- "--commit-stop",
1064
- ]
1065
- `);
1087
+ [
1088
+ "--schedule-render-1",
1089
+ "--render-start-1",
1090
+ "--render-stop",
1091
+ "--commit-start-1",
1092
+ "--react-version-<filtered-version>",
1093
+ "--profiler-version-1",
1094
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1095
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1096
+ "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1097
+ "--layout-effects-start-1",
1098
+ "--layout-effects-stop",
1099
+ "--commit-stop",
1100
+ ]
1101
+ `);
1102
});
1103
});
1104
@@ -1079,10 +1115,10 @@ describe('Timeline profiler', () => {
1115
it('regression test DefaultLane', () => {
1116
modernRender(<div />);
1117
expect(clearedMarks).toMatchInlineSnapshot(`
1082
- [
1083
- "--schedule-render-32",
1084
- ]
1085
- `);
1118
+ [
1119
+ "--schedule-render-32",
1120
+ ]
1121
+ `);
1122
});
1123
1124
it('regression test InputDiscreteLane', async () => {
@@ -1107,23 +1143,25 @@ describe('Timeline profiler', () => {
1143
await Promise.resolve();
1144
1145
expect(clearedMarks).toMatchInlineSnapshot(`
1110
- [
1111
- "--schedule-state-update-2-App",
1112
- "--render-start-2",
1113
- "--component-render-start-App",
1114
- "--component-render-stop",
1115
- "--render-stop",
1116
- "--commit-start-2",
1117
- "--react-version-<filtered-version>",
1118
- "--profiler-version-1",
1119
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1120
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1121
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
1122
- "--layout-effects-start-2",
1123
- "--layout-effects-stop",
1124
- "--commit-stop",
1125
- ]
1126
- `);
1146
+ [
1147
+ "--schedule-state-update-2-App",
1148
+ "--render-start-2",
1149
+ "--component-render-start-App",
1150
+ "--component-render-stop",
1151
+ "--render-stop",
1152
+ "--commit-start-2",
1153
+ "--react-version-<filtered-version>",
1154
+ "--profiler-version-1",
1155
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1156
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1157
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1158
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1159
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
1160
+ "--layout-effects-start-2",
1161
+ "--layout-effects-stop",
1162
+ "--commit-stop",
1163
+ ]
1164
+ `);
1165
});
1166
1167
it('regression test InputContinuousLane', async () => {
@@ -1147,23 +1185,25 @@ describe('Timeline profiler', () => {
1185
await waitForAll([]);
1186
1187
expect(clearedMarks).toMatchInlineSnapshot(`
1150
- [
1151
- "--schedule-state-update-8-App",
1152
- "--render-start-8",
1153
- "--component-render-start-App",
1154
- "--component-render-stop",
1155
- "--render-stop",
1156
- "--commit-start-8",
1157
- "--react-version-<filtered-version>",
1158
- "--profiler-version-1",
1159
- "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1160
- "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1161
- "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
1162
- "--layout-effects-start-8",
1163
- "--layout-effects-stop",
1164
- "--commit-stop",
1165
- ]
1166
- `);
1188
+ [
1189
+ "--schedule-state-update-8-App",
1190
+ "--render-start-8",
1191
+ "--component-render-start-App",
1192
+ "--component-render-stop",
1193
+ "--render-stop",
1194
+ "--commit-start-8",
1195
+ "--react-version-<filtered-version>",
1196
+ "--profiler-version-1",
1197
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1198
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1199
+ "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1200
+ "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1201
+ "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen,Deferred",
1202
+ "--layout-effects-start-8",
1203
+ "--layout-effects-stop",
1204
+ "--commit-stop",
1205
+ ]
1206
+ `);
1207
});
1208
});
1209
});
@@ -1229,15 +1269,15 @@ describe('Timeline profiler', () => {
1269
1270
const timelineData = stopProfilingAndGetTimelineData();
1271
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1232
- [
1233
- {
1234
- "lanes": "0b0000000000000000000000000000001",
1235
- "timestamp": 10,
1236
- "type": "schedule-render",
1237
- "warning": null,
1238
- },
1239
- ]
1240
- `);
1272
+ [
1273
+ {
1274
+ "lanes": "0b0000000000000000000000000000001",
1275
+ "timestamp": 10,
1276
+ "type": "schedule-render",
1277
+ "warning": null,
1278
+ },
1279
+ ]
1280
+ `);
1281
});
1282
1283
// @reactVersion <= 18.2
@@ -1281,60 +1321,60 @@ describe('Timeline profiler', () => {
1321
1322
const timelineData = stopProfilingAndGetTimelineData();
1323
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
1284
- [
1285
- {
1286
- "componentName": "ErrorBoundary",
1287
- "duration": 10,
1288
- "timestamp": 10,
1289
- "type": "render",
1290
- "warning": null,
1291
- },
1292
- {
1293
- "componentName": "ExampleThatThrows",
1294
- "duration": 0,
1295
- "timestamp": 20,
1296
- "type": "render",
1297
- "warning": null,
1298
- },
1299
- {
1300
- "componentName": "ErrorBoundary",
1301
- "duration": 10,
1302
- "timestamp": 20,
1303
- "type": "render",
1304
- "warning": null,
1305
- },
1306
- ]
1307
- `);
1324
+ [
1325
+ {
1326
+ "componentName": "ErrorBoundary",
1327
+ "duration": 10,
1328
+ "timestamp": 10,
1329
+ "type": "render",
1330
+ "warning": null,
1331
+ },
1332
+ {
1333
+ "componentName": "ExampleThatThrows",
1334
+ "duration": 0,
1335
+ "timestamp": 20,
1336
+ "type": "render",
1337
+ "warning": null,
1338
+ },
1339
+ {
1340
+ "componentName": "ErrorBoundary",
1341
+ "duration": 10,
1342
+ "timestamp": 20,
1343
+ "type": "render",
1344
+ "warning": null,
1345
+ },
1346
+ ]
1347
+ `);
1348
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1309
- [
1310
- {
1311
- "lanes": "0b0000000000000000000000000000001",
1312
- "timestamp": 10,
1313
- "type": "schedule-render",
1314
- "warning": null,
1315
- },
1316
- {
1317
- "componentName": "ErrorBoundary",
1318
- "componentStack": "
1319
- in ErrorBoundary (at **)",
1320
- "lanes": "0b0000000000000000000000000000001",
1321
- "timestamp": 20,
1322
- "type": "schedule-state-update",
1323
- "warning": null,
1324
- },
1325
- ]
1326
- `);
1349
+ [
1350
+ {
1351
+ "lanes": "0b0000000000000000000000000000001",
1352
+ "timestamp": 10,
1353
+ "type": "schedule-render",
1354
+ "warning": null,
1355
+ },
1356
+ {
1357
+ "componentName": "ErrorBoundary",
1358
+ "componentStack": "
1359
+ in ErrorBoundary (at **)",
1360
+ "lanes": "0b0000000000000000000000000000001",
1361
+ "timestamp": 20,
1362
+ "type": "schedule-state-update",
1363
+ "warning": null,
1364
+ },
1365
+ ]
1366
+ `);
1367
expect(timelineData.thrownErrors).toMatchInlineSnapshot(`
1328
- [
1329
- {
1330
- "componentName": "ExampleThatThrows",
1331
- "message": "Expected error",
1332
- "phase": "mount",
1333
- "timestamp": 20,
1334
- "type": "thrown-error",
1335
- },
1336
- ]
1337
- `);
1368
+ [
1369
+ {
1370
+ "componentName": "ExampleThatThrows",
1371
+ "message": "Expected error",
1372
+ "phase": "mount",
1373
+ "timestamp": 20,
1374
+ "type": "thrown-error",
1375
+ },
1376
+ ]
1377
+ `);
1378
});
1379
1380
// @reactVersion <= 18.2
@@ -1378,19 +1418,19 @@ describe('Timeline profiler', () => {
1418
expect(timelineData.suspenseEvents).toHaveLength(1);
1419
const suspenseEvent = timelineData.suspenseEvents[0];
1420
expect(suspenseEvent).toMatchInlineSnapshot(`
1381
- {
1382
- "componentName": "Example",
1383
- "depth": 0,
1384
- "duration": 10,
1385
- "id": "0",
1386
- "phase": "mount",
1387
- "promiseName": "",
1388
- "resolution": "resolved",
1389
- "timestamp": 10,
1390
- "type": "suspense",
1391
- "warning": null,
1392
- }
1393
- `);
1421
+ {
1422
+ "componentName": "Example",
1423
+ "depth": 0,
1424
+ "duration": 10,
1425
+ "id": "0",
1426
+ "phase": "mount",
1427
+ "promiseName": "",
1428
+ "resolution": "resolved",
1429
+ "timestamp": 10,
1430
+ "type": "suspense",
1431
+ "warning": null,
1432
+ }
1433
+ `);
1434
1435
// There should be two batches of renders: Suspeneded and resolved.
1436
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
@@ -1436,19 +1476,19 @@ describe('Timeline profiler', () => {
1476
expect(timelineData.suspenseEvents).toHaveLength(1);
1477
const suspenseEvent = timelineData.suspenseEvents[0];
1478
expect(suspenseEvent).toMatchInlineSnapshot(`
1439
- {
1440
- "componentName": "Example",
1441
- "depth": 0,
1442
- "duration": 10,
1443
- "id": "0",
1444
- "phase": "mount",
1445
- "promiseName": "",
1446
- "resolution": "rejected",
1447
- "timestamp": 10,
1448
- "type": "suspense",
1449
- "warning": null,
1450
- }
1451
- `);
1479
+ {
1480
+ "componentName": "Example",
1481
+ "depth": 0,
1482
+ "duration": 10,
1483
+ "id": "0",
1484
+ "phase": "mount",
1485
+ "promiseName": "",
1486
+ "resolution": "rejected",
1487
+ "timestamp": 10,
1488
+ "type": "suspense",
1489
+ "warning": null,
1490
+ }
1491
+ `);
1492
1493
// There should be two batches of renders: Suspeneded and resolved.
1494
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
@@ -1477,15 +1517,15 @@ describe('Timeline profiler', () => {
1517
1518
const timelineData = stopProfilingAndGetTimelineData();
1519
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1480
- [
1481
- {
1482
- "lanes": "0b0000000000000000000000000100000",
1483
- "timestamp": 10,
1484
- "type": "schedule-render",
1485
- "warning": null,
1486
- },
1487
- ]
1488
- `);
1520
+ [
1521
+ {
1522
+ "lanes": "0b0000000000000000000000000100000",
1523
+ "timestamp": 10,
1524
+ "type": "schedule-render",
1525
+ "warning": null,
1526
+ },
1527
+ ]
1528
+ `);
1529
});
1530
1531
it('should mark concurrent render without suspends or state updates', () => {
@@ -1514,45 +1554,45 @@ describe('Timeline profiler', () => {
1554
1555
const timelineData = stopProfilingAndGetTimelineData();
1556
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1517
- [
1518
- {
1519
- "componentName": "Example",
1520
- "componentStack": "
1521
- in Example (at **)",
1522
- "lanes": "0b0000000000000000000000010000000",
1523
- "timestamp": 10,
1524
- "type": "schedule-state-update",
1525
- "warning": null,
1526
- },
1527
- {
1528
- "componentName": "Example",
1529
- "componentStack": "
1530
- in Example (at **)",
1531
- "lanes": "0b0000000000000000000000000100000",
1532
- "timestamp": 10,
1533
- "type": "schedule-state-update",
1534
- "warning": null,
1535
- },
1536
- ]
1537
- `);
1557
+ [
1558
+ {
1559
+ "componentName": "Example",
1560
+ "componentStack": "
1561
+ in Example (at **)",
1562
+ "lanes": "0b0000000000000000000000010000000",
1563
+ "timestamp": 10,
1564
+ "type": "schedule-state-update",
1565
+ "warning": null,
1566
+ },
1567
+ {
1568
+ "componentName": "Example",
1569
+ "componentStack": "
1570
+ in Example (at **)",
1571
+ "lanes": "0b0000000000000000000000000100000",
1572
+ "timestamp": 10,
1573
+ "type": "schedule-state-update",
1574
+ "warning": null,
1575
+ },
1576
+ ]
1577
+ `);
1578
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
1539
- [
1540
- {
1541
- "componentName": "Example",
1542
- "duration": 0,
1543
- "timestamp": 10,
1544
- "type": "render",
1545
- "warning": null,
1546
- },
1547
- {
1548
- "componentName": "Example",
1549
- "duration": 10,
1550
- "timestamp": 10,
1551
- "type": "render",
1552
- "warning": null,
1553
- },
1554
- ]
1555
- `);
1579
+ [
1580
+ {
1581
+ "componentName": "Example",
1582
+ "duration": 0,
1583
+ "timestamp": 10,
1584
+ "type": "render",
1585
+ "warning": null,
1586
+ },
1587
+ {
1588
+ "componentName": "Example",
1589
+ "duration": 10,
1590
+ "timestamp": 10,
1591
+ "type": "render",
1592
+ "warning": null,
1593
+ },
1594
+ ]
1595
+ `);
1596
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
1597
});
1598
@@ -1621,19 +1661,19 @@ describe('Timeline profiler', () => {
1661
expect(timelineData.suspenseEvents).toHaveLength(1);
1662
const suspenseEvent = timelineData.suspenseEvents[0];
1663
expect(suspenseEvent).toMatchInlineSnapshot(`
1624
- {
1625
- "componentName": "Example",
1626
- "depth": 0,
1627
- "duration": 10,
1628
- "id": "0",
1629
- "phase": "mount",
1630
- "promiseName": "",
1631
- "resolution": "resolved",
1632
- "timestamp": 10,
1633
- "type": "suspense",
1634
- "warning": null,
1635
- }
1636
- `);
1664
+ {
1665
+ "componentName": "Example",
1666
+ "depth": 0,
1667
+ "duration": 10,
1668
+ "id": "0",
1669
+ "phase": "mount",
1670
+ "promiseName": "",
1671
+ "resolution": "resolved",
1672
+ "timestamp": 10,
1673
+ "type": "suspense",
1674
+ "warning": null,
1675
+ }
1676
+ `);
1677
1678
// There should be two batches of renders: Suspeneded and resolved.
1679
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
@@ -1678,19 +1718,19 @@ describe('Timeline profiler', () => {
1718
expect(timelineData.suspenseEvents).toHaveLength(1);
1719
const suspenseEvent = timelineData.suspenseEvents[0];
1720
expect(suspenseEvent).toMatchInlineSnapshot(`
1681
- {
1682
- "componentName": "Example",
1683
- "depth": 0,
1684
- "duration": 10,
1685
- "id": "0",
1686
- "phase": "mount",
1687
- "promiseName": "",
1688
- "resolution": "rejected",
1689
- "timestamp": 10,
1690
- "type": "suspense",
1691
- "warning": null,
1692
- }
1693
- `);
1721
+ {
1722
+ "componentName": "Example",
1723
+ "depth": 0,
1724
+ "duration": 10,
1725
+ "id": "0",
1726
+ "phase": "mount",
1727
+ "promiseName": "",
1728
+ "resolution": "rejected",
1729
+ "timestamp": 10,
1730
+ "type": "suspense",
1731
+ "warning": null,
1732
+ }
1733
+ `);
1734
1735
// There should be two batches of renders: Suspeneded and resolved.
1736
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
@@ -1717,42 +1757,42 @@ describe('Timeline profiler', () => {
1757
const timelineData = stopProfilingAndGetTimelineData();
1758
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
1759
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
1720
- [
1721
- {
1722
- "componentName": "Example",
1723
- "duration": 10,
1724
- "timestamp": 10,
1725
- "type": "render",
1726
- "warning": null,
1727
- },
1728
- {
1729
- "componentName": "Example",
1730
- "duration": 10,
1731
- "timestamp": 20,
1732
- "type": "render",
1733
- "warning": null,
1734
- },
1735
- ]
1736
- `);
1760
+ [
1761
+ {
1762
+ "componentName": "Example",
1763
+ "duration": 10,
1764
+ "timestamp": 10,
1765
+ "type": "render",
1766
+ "warning": null,
1767
+ },
1768
+ {
1769
+ "componentName": "Example",
1770
+ "duration": 10,
1771
+ "timestamp": 20,
1772
+ "type": "render",
1773
+ "warning": null,
1774
+ },
1775
+ ]
1776
+ `);
1777
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1738
- [
1739
- {
1740
- "lanes": "0b0000000000000000000000000100000",
1741
- "timestamp": 10,
1742
- "type": "schedule-render",
1743
- "warning": null,
1744
- },
1745
- {
1746
- "componentName": "Example",
1747
- "componentStack": "
1748
- in Example (at **)",
1749
- "lanes": "0b0000000000000000000000000000010",
1750
- "timestamp": 20,
1751
- "type": "schedule-state-update",
1752
- "warning": null,
1753
- },
1754
- ]
1755
- `);
1778
+ [
1779
+ {
1780
+ "lanes": "0b0000000000000000000000000100000",
1781
+ "timestamp": 10,
1782
+ "type": "schedule-render",
1783
+ "warning": null,
1784
+ },
1785
+ {
1786
+ "componentName": "Example",
1787
+ "componentStack": "
1788
+ in Example (at **)",
1789
+ "lanes": "0b0000000000000000000000000000010",
1790
+ "timestamp": 20,
1791
+ "type": "schedule-state-update",
1792
+ "warning": null,
1793
+ },
1794
+ ]
1795
+ `);
1796
});
1797
1798
it('should mark cascading class component force updates', async () => {
@@ -1776,40 +1816,40 @@ describe('Timeline profiler', () => {
1816
const timelineData = stopProfilingAndGetTimelineData();
1817
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
1818
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
1779
- [
1780
- {
1781
- "componentName": "Example",
1782
- "duration": 10,
1783
- "timestamp": 10,
1784
- "type": "render",
1785
- "warning": null,
1786
- },
1787
- {
1788
- "componentName": "Example",
1789
- "duration": 10,
1790
- "timestamp": 20,
1791
- "type": "render",
1792
- "warning": null,
1793
- },
1794
- ]
1795
- `);
1819
+ [
1820
+ {
1821
+ "componentName": "Example",
1822
+ "duration": 10,
1823
+ "timestamp": 10,
1824
+ "type": "render",
1825
+ "warning": null,
1826
+ },
1827
+ {
1828
+ "componentName": "Example",
1829
+ "duration": 10,
1830
+ "timestamp": 20,
1831
+ "type": "render",
1832
+ "warning": null,
1833
+ },
1834
+ ]
1835
+ `);
1836
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1797
- [
1798
- {
1799
- "lanes": "0b0000000000000000000000000100000",
1800
- "timestamp": 10,
1801
- "type": "schedule-render",
1802
- "warning": null,
1803
- },
1804
- {
1805
- "componentName": "Example",
1806
- "lanes": "0b0000000000000000000000000000010",
1807
- "timestamp": 20,
1808
- "type": "schedule-force-update",
1809
- "warning": null,
1810
- },
1811
- ]
1812
- `);
1837
+ [
1838
+ {
1839
+ "lanes": "0b0000000000000000000000000100000",
1840
+ "timestamp": 10,
1841
+ "type": "schedule-render",
1842
+ "warning": null,
1843
+ },
1844
+ {
1845
+ "componentName": "Example",
1846
+ "lanes": "0b0000000000000000000000000000010",
1847
+ "timestamp": 20,
1848
+ "type": "schedule-force-update",
1849
+ "warning": null,
1850
+ },
1851
+ ]
1852
+ `);
1853
});
1854
1855
it('should mark render phase state updates for class component', async () => {
@@ -1844,42 +1884,42 @@ describe('Timeline profiler', () => {
1884
const timelineData = stopProfilingAndGetTimelineData();
1885
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
1886
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
1847
- [
1848
- {
1849
- "componentName": "Example",
1850
- "duration": 10,
1851
- "timestamp": 10,
1852
- "type": "render",
1853
- "warning": null,
1854
- },
1855
- {
1856
- "componentName": "Example",
1857
- "duration": 10,
1858
- "timestamp": 20,
1859
- "type": "render",
1860
- "warning": null,
1861
- },
1862
- ]
1863
- `);
1887
+ [
1888
+ {
1889
+ "componentName": "Example",
1890
+ "duration": 10,
1891
+ "timestamp": 10,
1892
+ "type": "render",
1893
+ "warning": null,
1894
+ },
1895
+ {
1896
+ "componentName": "Example",
1897
+ "duration": 10,
1898
+ "timestamp": 20,
1899
+ "type": "render",
1900
+ "warning": null,
1901
+ },
1902
+ ]
1903
+ `);
1904
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1865
- [
1866
- {
1867
- "lanes": "0b0000000000000000000000000100000",
1868
- "timestamp": 10,
1869
- "type": "schedule-render",
1870
- "warning": null,
1871
- },
1872
- {
1873
- "componentName": "Example",
1874
- "componentStack": "
1875
- in Example (at **)",
1876
- "lanes": "0b0000000000000000000000000100000",
1877
- "timestamp": 10,
1878
- "type": "schedule-state-update",
1879
- "warning": null,
1880
- },
1881
- ]
1882
- `);
1905
+ [
1906
+ {
1907
+ "lanes": "0b0000000000000000000000000100000",
1908
+ "timestamp": 10,
1909
+ "type": "schedule-render",
1910
+ "warning": null,
1911
+ },
1912
+ {
1913
+ "componentName": "Example",
1914
+ "componentStack": "
1915
+ in Example (at **)",
1916
+ "lanes": "0b0000000000000000000000000100000",
1917
+ "timestamp": 10,
1918
+ "type": "schedule-state-update",
1919
+ "warning": null,
1920
+ },
1921
+ ]
1922
+ `);
1923
});
1924
1925
it('should mark render phase force updates for class component', async () => {
@@ -1913,40 +1953,40 @@ describe('Timeline profiler', () => {
1953
const timelineData = stopProfilingAndGetTimelineData();
1954
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
1955
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
1916
- [
1917
- {
1918
- "componentName": "Example",
1919
- "duration": 10,
1920
- "timestamp": 10,
1921
- "type": "render",
1922
- "warning": null,
1923
- },
1924
- {
1925
- "componentName": "Example",
1926
- "duration": 10,
1927
- "timestamp": 20,
1928
- "type": "render",
1929
- "warning": null,
1930
- },
1931
- ]
1932
- `);
1956
+ [
1957
+ {
1958
+ "componentName": "Example",
1959
+ "duration": 10,
1960
+ "timestamp": 10,
1961
+ "type": "render",
1962
+ "warning": null,
1963
+ },
1964
+ {
1965
+ "componentName": "Example",
1966
+ "duration": 10,
1967
+ "timestamp": 20,
1968
+ "type": "render",
1969
+ "warning": null,
1970
+ },
1971
+ ]
1972
+ `);
1973
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1934
- [
1935
- {
1936
- "lanes": "0b0000000000000000000000000100000",
1937
- "timestamp": 10,
1938
- "type": "schedule-render",
1939
- "warning": null,
1940
- },
1941
- {
1942
- "componentName": "Example",
1943
- "lanes": "0b0000000000000000000000000100000",
1944
- "timestamp": 20,
1945
- "type": "schedule-force-update",
1946
- "warning": null,
1947
- },
1948
- ]
1949
- `);
1974
+ [
1975
+ {
1976
+ "lanes": "0b0000000000000000000000000100000",
1977
+ "timestamp": 10,
1978
+ "type": "schedule-render",
1979
+ "warning": null,
1980
+ },
1981
+ {
1982
+ "componentName": "Example",
1983
+ "lanes": "0b0000000000000000000000000100000",
1984
+ "timestamp": 20,
1985
+ "type": "schedule-force-update",
1986
+ "warning": null,
1987
+ },
1988
+ ]
1989
+ `);
1990
});
1991
1992
it('should mark cascading layout updates', async () => {
@@ -1968,49 +2008,49 @@ describe('Timeline profiler', () => {
2008
const timelineData = stopProfilingAndGetTimelineData();
2009
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
2010
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
1971
- [
1972
- {
1973
- "componentName": "Example",
1974
- "duration": 10,
1975
- "timestamp": 10,
1976
- "type": "render",
1977
- "warning": null,
1978
- },
1979
- {
1980
- "componentName": "Example",
1981
- "duration": 1,
1982
- "timestamp": 20,
1983
- "type": "layout-effect-mount",
1984
- "warning": null,
1985
- },
1986
- {
1987
- "componentName": "Example",
1988
- "duration": 10,
1989
- "timestamp": 21,
1990
- "type": "render",
1991
- "warning": null,
1992
- },
1993
- ]
1994
- `);
2011
+ [
2012
+ {
2013
+ "componentName": "Example",
2014
+ "duration": 10,
2015
+ "timestamp": 10,
2016
+ "type": "render",
2017
+ "warning": null,
2018
+ },
2019
+ {
2020
+ "componentName": "Example",
2021
+ "duration": 1,
2022
+ "timestamp": 20,
2023
+ "type": "layout-effect-mount",
2024
+ "warning": null,
2025
+ },
2026
+ {
2027
+ "componentName": "Example",
2028
+ "duration": 10,
2029
+ "timestamp": 21,
2030
+ "type": "render",
2031
+ "warning": null,
2032
+ },
2033
+ ]
2034
+ `);
2035
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1996
- [
1997
- {
1998
- "lanes": "0b0000000000000000000000000100000",
1999
- "timestamp": 10,
2000
- "type": "schedule-render",
2001
- "warning": null,
2002
- },
2003
- {
2004
- "componentName": "Example",
2005
- "componentStack": "
2006
- in Example (at **)",
2007
- "lanes": "0b0000000000000000000000000000010",
2008
- "timestamp": 21,
2009
- "type": "schedule-state-update",
2010
- "warning": null,
2011
- },
2012
- ]
2013
- `);
2036
+ [
2037
+ {
2038
+ "lanes": "0b0000000000000000000000000100000",
2039
+ "timestamp": 10,
2040
+ "type": "schedule-render",
2041
+ "warning": null,
2042
+ },
2043
+ {
2044
+ "componentName": "Example",
2045
+ "componentStack": "
2046
+ in Example (at **)",
2047
+ "lanes": "0b0000000000000000000000000000010",
2048
+ "timestamp": 21,
2049
+ "type": "schedule-state-update",
2050
+ "warning": null,
2051
+ },
2052
+ ]
2053
+ `);
2054
});
2055
2056
it('should mark cascading passive updates', async () => {
@@ -2031,49 +2071,49 @@ describe('Timeline profiler', () => {
2071
const timelineData = stopProfilingAndGetTimelineData();
2072
expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
2073
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
2034
- [
2035
- {
2036
- "componentName": "Example",
2037
- "duration": 10,
2038
- "timestamp": 10,
2039
- "type": "render",
2040
- "warning": null,
2041
- },
2042
- {
2043
- "componentName": "Example",
2044
- "duration": 1,
2045
- "timestamp": 20,
2046
- "type": "passive-effect-mount",
2047
- "warning": null,
2048
- },
2049
- {
2050
- "componentName": "Example",
2051
- "duration": 10,
2052
- "timestamp": 21,
2053
- "type": "render",
2054
- "warning": null,
2055
- },
2056
- ]
2057
- `);
2074
+ [
2075
+ {
2076
+ "componentName": "Example",
2077
+ "duration": 10,
2078
+ "timestamp": 10,
2079
+ "type": "render",
2080
+ "warning": null,
2081
+ },
2082
+ {
2083
+ "componentName": "Example",
2084
+ "duration": 1,
2085
+ "timestamp": 20,
2086
+ "type": "passive-effect-mount",
2087
+ "warning": null,
2088
+ },
2089
+ {
2090
+ "componentName": "Example",
2091
+ "duration": 10,
2092
+ "timestamp": 21,
2093
+ "type": "render",
2094
+ "warning": null,
2095
+ },
2096
+ ]
2097
+ `);
2098
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2059
- [
2060
- {
2061
- "lanes": "0b0000000000000000000000000100000",
2062
- "timestamp": 10,
2063
- "type": "schedule-render",
2064
- "warning": null,
2065
- },
2066
- {
2067
- "componentName": "Example",
2068
- "componentStack": "
2069
- in Example (at **)",
2070
- "lanes": "0b0000000000000000000000000100000",
2071
- "timestamp": 21,
2072
- "type": "schedule-state-update",
2073
- "warning": null,
2074
- },
2075
- ]
2076
- `);
2099
+ [
2100
+ {
2101
+ "lanes": "0b0000000000000000000000000100000",
2102
+ "timestamp": 10,
2103
+ "type": "schedule-render",
2104
+ "warning": null,
2105
+ },
2106
+ {
2107
+ "componentName": "Example",
2108
+ "componentStack": "
2109
+ in Example (at **)",
2110
+ "lanes": "0b0000000000000000000000000100000",
2111
+ "timestamp": 21,
2112
+ "type": "schedule-state-update",
2113
+ "warning": null,
2114
+ },
2115
+ ]
2116
+ `);
2117
});
2118
2119
it('should mark render phase updates', async () => {
@@ -2094,35 +2134,35 @@ describe('Timeline profiler', () => {
2134
// Render phase updates should be retried as part of the same batch.
2135
expect(timelineData.batchUIDToMeasuresMap.size).toBe(1);
2136
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
2097
- [
2098
- {
2099
- "componentName": "Example",
2100
- "duration": 20,
2101
- "timestamp": 10,
2102
- "type": "render",
2103
- "warning": null,
2104
- },
2105
- ]
2106
- `);
2137
+ [
2138
+ {
2139
+ "componentName": "Example",
2140
+ "duration": 20,
2141
+ "timestamp": 10,
2142
+ "type": "render",
2143
+ "warning": null,
2144
+ },
2145
+ ]
2146
+ `);
2147
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2108
- [
2109
- {
2110
- "lanes": "0b0000000000000000000000000100000",
2111
- "timestamp": 10,
2112
- "type": "schedule-render",
2113
- "warning": null,
2114
- },
2115
- {
2116
- "componentName": "Example",
2117
- "componentStack": "
2118
- in Example (at **)",
2119
- "lanes": "0b0000000000000000000000000100000",
2120
- "timestamp": 20,
2121
- "type": "schedule-state-update",
2122
- "warning": null,
2123
- },
2124
- ]
2125
- `);
2148
+ [
2149
+ {
2150
+ "lanes": "0b0000000000000000000000000100000",
2151
+ "timestamp": 10,
2152
+ "type": "schedule-render",
2153
+ "warning": null,
2154
+ },
2155
+ {
2156
+ "componentName": "Example",
2157
+ "componentStack": "
2158
+ in Example (at **)",
2159
+ "lanes": "0b0000000000000000000000000100000",
2160
+ "timestamp": 20,
2161
+ "type": "schedule-state-update",
2162
+ "warning": null,
2163
+ },
2164
+ ]
2165
+ `);
2166
});
2167
2168
it('should mark concurrent render that throws', async () => {
@@ -2166,81 +2206,81 @@ describe('Timeline profiler', () => {
2206
2207
const timelineData = stopProfilingAndGetTimelineData();
2208
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
2169
- [
2170
- {
2171
- "componentName": "ErrorBoundary",
2172
- "duration": 10,
2173
- "timestamp": 10,
2174
- "type": "render",
2175
- "warning": null,
2176
- },
2177
- {
2178
- "componentName": "ExampleThatThrows",
2179
- "duration": 0,
2180
- "timestamp": 20,
2181
- "type": "render",
2182
- "warning": null,
2183
- },
2184
- {
2185
- "componentName": "ErrorBoundary",
2186
- "duration": 10,
2187
- "timestamp": 20,
2188
- "type": "render",
2189
- "warning": null,
2190
- },
2191
- {
2192
- "componentName": "ExampleThatThrows",
2193
- "duration": 0,
2194
- "timestamp": 30,
2195
- "type": "render",
2196
- "warning": null,
2197
- },
2198
- {
2199
- "componentName": "ErrorBoundary",
2200
- "duration": 10,
2201
- "timestamp": 30,
2202
- "type": "render",
2203
- "warning": null,
2204
- },
2205
- ]
2206
- `);
2209
+ [
2210
+ {
2211
+ "componentName": "ErrorBoundary",
2212
+ "duration": 10,
2213
+ "timestamp": 10,
2214
+ "type": "render",
2215
+ "warning": null,
2216
+ },
2217
+ {
2218
+ "componentName": "ExampleThatThrows",
2219
+ "duration": 0,
2220
+ "timestamp": 20,
2221
+ "type": "render",
2222
+ "warning": null,
2223
+ },
2224
+ {
2225
+ "componentName": "ErrorBoundary",
2226
+ "duration": 10,
2227
+ "timestamp": 20,
2228
+ "type": "render",
2229
+ "warning": null,
2230
+ },
2231
+ {
2232
+ "componentName": "ExampleThatThrows",
2233
+ "duration": 0,
2234
+ "timestamp": 30,
2235
+ "type": "render",
2236
+ "warning": null,
2237
+ },
2238
+ {
2239
+ "componentName": "ErrorBoundary",
2240
+ "duration": 10,
2241
+ "timestamp": 30,
2242
+ "type": "render",
2243
+ "warning": null,
2244
+ },
2245
+ ]
2246
+ `);
2247
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2208
- [
2209
- {
2210
- "lanes": "0b0000000000000000000000000100000",
2211
- "timestamp": 10,
2212
- "type": "schedule-render",
2213
- "warning": null,
2214
- },
2215
- {
2216
- "componentName": "ErrorBoundary",
2217
- "componentStack": "
2218
- in ErrorBoundary (at **)",
2219
- "lanes": "0b0000000000000000000000000000010",
2220
- "timestamp": 30,
2221
- "type": "schedule-state-update",
2222
- "warning": null,
2223
- },
2224
- ]
2225
- `);
2248
+ [
2249
+ {
2250
+ "lanes": "0b0000000000000000000000000100000",
2251
+ "timestamp": 10,
2252
+ "type": "schedule-render",
2253
+ "warning": null,
2254
+ },
2255
+ {
2256
+ "componentName": "ErrorBoundary",
2257
+ "componentStack": "
2258
+ in ErrorBoundary (at **)",
2259
+ "lanes": "0b0000000000000000000000000000010",
2260
+ "timestamp": 30,
2261
+ "type": "schedule-state-update",
2262
+ "warning": null,
2263
+ },
2264
+ ]
2265
+ `);
2266
expect(timelineData.thrownErrors).toMatchInlineSnapshot(`
2227
- [
2228
- {
2229
- "componentName": "ExampleThatThrows",
2230
- "message": "Expected error",
2231
- "phase": "mount",
2232
- "timestamp": 20,
2233
- "type": "thrown-error",
2234
- },
2235
- {
2236
- "componentName": "ExampleThatThrows",
2237
- "message": "Expected error",
2238
- "phase": "mount",
2239
- "timestamp": 30,
2240
- "type": "thrown-error",
2241
- },
2242
- ]
2243
- `);
2267
+ [
2268
+ {
2269
+ "componentName": "ExampleThatThrows",
2270
+ "message": "Expected error",
2271
+ "phase": "mount",
2272
+ "timestamp": 20,
2273
+ "type": "thrown-error",
2274
+ },
2275
+ {
2276
+ "componentName": "ExampleThatThrows",
2277
+ "message": "Expected error",
2278
+ "phase": "mount",
2279
+ "timestamp": 30,
2280
+ "type": "thrown-error",
2281
+ },
2282
+ ]
2283
+ `);
2284
});
2285
2286
it('should mark passive and layout effects', async () => {
@@ -2307,174 +2347,174 @@ describe('Timeline profiler', () => {
2347
2348
const timelineData = stopProfilingAndGetTimelineData();
2349
expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
2310
- [
2311
- {
2312
- "componentName": "ComponentWithEffects",
2313
- "duration": 0,
2314
- "timestamp": 10,
2315
- "type": "render",
2316
- "warning": null,
2317
- },
2318
- {
2319
- "componentName": "ComponentWithEffects",
2320
- "duration": 0,
2321
- "timestamp": 10,
2322
- "type": "layout-effect-mount",
2323
- "warning": null,
2324
- },
2325
- {
2326
- "componentName": "ComponentWithEffects",
2327
- "duration": 0,
2328
- "timestamp": 10,
2329
- "type": "layout-effect-mount",
2330
- "warning": null,
2331
- },
2332
- {
2333
- "componentName": "ComponentWithEffects",
2334
- "duration": 0,
2335
- "timestamp": 10,
2336
- "type": "passive-effect-mount",
2337
- "warning": null,
2338
- },
2339
- {
2340
- "componentName": "ComponentWithEffects",
2341
- "duration": 0,
2342
- "timestamp": 10,
2343
- "type": "passive-effect-mount",
2344
- "warning": null,
2345
- },
2346
- {
2347
- "componentName": "ComponentWithEffects",
2348
- "duration": 0,
2349
- "timestamp": 10,
2350
- "type": "passive-effect-mount",
2351
- "warning": null,
2352
- },
2353
- {
2354
- "componentName": "ComponentWithEffects",
2355
- "duration": 0,
2356
- "timestamp": 10,
2357
- "type": "layout-effect-unmount",
2358
- "warning": null,
2359
- },
2360
- {
2361
- "componentName": "ComponentWithEffects",
2362
- "duration": 0,
2363
- "timestamp": 10,
2364
- "type": "layout-effect-unmount",
2365
- "warning": null,
2366
- },
2367
- {
2368
- "componentName": "ComponentWithEffects",
2369
- "duration": 0,
2370
- "timestamp": 10,
2371
- "type": "passive-effect-unmount",
2372
- "warning": null,
2373
- },
2374
- {
2375
- "componentName": "ComponentWithEffects",
2376
- "duration": 0,
2377
- "timestamp": 10,
2378
- "type": "passive-effect-unmount",
2379
- "warning": null,
2380
- },
2381
- {
2382
- "componentName": "ComponentWithEffects",
2383
- "duration": 0,
2384
- "timestamp": 10,
2385
- "type": "passive-effect-unmount",
2386
- "warning": null,
2387
- },
2388
- ]
2389
- `);
2350
+ [
2351
+ {
2352
+ "componentName": "ComponentWithEffects",
2353
+ "duration": 0,
2354
+ "timestamp": 10,
2355
+ "type": "render",
2356
+ "warning": null,
2357
+ },
2358
+ {
2359
+ "componentName": "ComponentWithEffects",
2360
+ "duration": 0,
2361
+ "timestamp": 10,
2362
+ "type": "layout-effect-mount",
2363
+ "warning": null,
2364
+ },
2365
+ {
2366
+ "componentName": "ComponentWithEffects",
2367
+ "duration": 0,
2368
+ "timestamp": 10,
2369
+ "type": "layout-effect-mount",
2370
+ "warning": null,
2371
+ },
2372
+ {
2373
+ "componentName": "ComponentWithEffects",
2374
+ "duration": 0,
2375
+ "timestamp": 10,
2376
+ "type": "passive-effect-mount",
2377
+ "warning": null,
2378
+ },
2379
+ {
2380
+ "componentName": "ComponentWithEffects",
2381
+ "duration": 0,
2382
+ "timestamp": 10,
2383
+ "type": "passive-effect-mount",
2384
+ "warning": null,
2385
+ },
2386
+ {
2387
+ "componentName": "ComponentWithEffects",
2388
+ "duration": 0,
2389
+ "timestamp": 10,
2390
+ "type": "passive-effect-mount",
2391
+ "warning": null,
2392
+ },
2393
+ {
2394
+ "componentName": "ComponentWithEffects",
2395
+ "duration": 0,
2396
+ "timestamp": 10,
2397
+ "type": "layout-effect-unmount",
2398
+ "warning": null,
2399
+ },
2400
+ {
2401
+ "componentName": "ComponentWithEffects",
2402
+ "duration": 0,
2403
+ "timestamp": 10,
2404
+ "type": "layout-effect-unmount",
2405
+ "warning": null,
2406
+ },
2407
+ {
2408
+ "componentName": "ComponentWithEffects",
2409
+ "duration": 0,
2410
+ "timestamp": 10,
2411
+ "type": "passive-effect-unmount",
2412
+ "warning": null,
2413
+ },
2414
+ {
2415
+ "componentName": "ComponentWithEffects",
2416
+ "duration": 0,
2417
+ "timestamp": 10,
2418
+ "type": "passive-effect-unmount",
2419
+ "warning": null,
2420
+ },
2421
+ {
2422
+ "componentName": "ComponentWithEffects",
2423
+ "duration": 0,
2424
+ "timestamp": 10,
2425
+ "type": "passive-effect-unmount",
2426
+ "warning": null,
2427
+ },
2428
+ ]
2429
+ `);
2430
expect(timelineData.batchUIDToMeasuresMap).toMatchInlineSnapshot(`
2391
- Map {
2392
- 1 => [
2393
- {
2394
- "batchUID": 1,
2395
- "depth": 0,
2396
- "duration": 0,
2397
- "lanes": "0b0000000000000000000000000100000",
2398
- "timestamp": 10,
2399
- "type": "render-idle",
2400
- },
2401
- {
2402
- "batchUID": 1,
2403
- "depth": 0,
2404
- "duration": 0,
2405
- "lanes": "0b0000000000000000000000000100000",
2406
- "timestamp": 10,
2407
- "type": "render",
2408
- },
2409
- {
2410
- "batchUID": 1,
2411
- "depth": 0,
2412
- "duration": 0,
2413
- "lanes": "0b0000000000000000000000000100000",
2414
- "timestamp": 10,
2415
- "type": "commit",
2416
- },
2417
- {
2418
- "batchUID": 1,
2419
- "depth": 1,
2420
- "duration": 0,
2421
- "lanes": "0b0000000000000000000000000100000",
2422
- "timestamp": 10,
2423
- "type": "layout-effects",
2424
- },
2425
- {
2426
- "batchUID": 1,
2427
- "depth": 0,
2428
- "duration": 0,
2429
- "lanes": "0b0000000000000000000000000100000",
2430
- "timestamp": 10,
2431
- "type": "passive-effects",
2432
- },
2433
- ],
2434
- 2 => [
2435
- {
2436
- "batchUID": 2,
2437
- "depth": 0,
2438
- "duration": 0,
2439
- "lanes": "0b0000000000000000000000000000010",
2440
- "timestamp": 10,
2441
- "type": "render-idle",
2442
- },
2443
- {
2444
- "batchUID": 2,
2445
- "depth": 0,
2446
- "duration": 0,
2447
- "lanes": "0b0000000000000000000000000000010",
2448
- "timestamp": 10,
2449
- "type": "render",
2450
- },
2451
- {
2452
- "batchUID": 2,
2453
- "depth": 0,
2454
- "duration": 0,
2455
- "lanes": "0b0000000000000000000000000000010",
2456
- "timestamp": 10,
2457
- "type": "commit",
2458
- },
2459
- {
2460
- "batchUID": 2,
2461
- "depth": 1,
2462
- "duration": 0,
2463
- "lanes": "0b0000000000000000000000000000010",
2464
- "timestamp": 10,
2465
- "type": "layout-effects",
2466
- },
2467
- {
2468
- "batchUID": 2,
2469
- "depth": 1,
2470
- "duration": 0,
2471
- "lanes": "0b0000000000000000000000000000010",
2472
- "timestamp": 10,
2473
- "type": "passive-effects",
2474
- },
2475
- ],
2476
- }
2477
- `);
2431
+ Map {
2432
+ 1 => [
2433
+ {
2434
+ "batchUID": 1,
2435
+ "depth": 0,
2436
+ "duration": 0,
2437
+ "lanes": "0b0000000000000000000000000100000",
2438
+ "timestamp": 10,
2439
+ "type": "render-idle",
2440
+ },
2441
+ {
2442
+ "batchUID": 1,
2443
+ "depth": 0,
2444
+ "duration": 0,
2445
+ "lanes": "0b0000000000000000000000000100000",
2446
+ "timestamp": 10,
2447
+ "type": "render",
2448
+ },
2449
+ {
2450
+ "batchUID": 1,
2451
+ "depth": 0,
2452
+ "duration": 0,
2453
+ "lanes": "0b0000000000000000000000000100000",
2454
+ "timestamp": 10,
2455
+ "type": "commit",
2456
+ },
2457
+ {
2458
+ "batchUID": 1,
2459
+ "depth": 1,
2460
+ "duration": 0,
2461
+ "lanes": "0b0000000000000000000000000100000",
2462
+ "timestamp": 10,
2463
+ "type": "layout-effects",
2464
+ },
2465
+ {
2466
+ "batchUID": 1,
2467
+ "depth": 0,
2468
+ "duration": 0,
2469
+ "lanes": "0b0000000000000000000000000100000",
2470
+ "timestamp": 10,
2471
+ "type": "passive-effects",
2472
+ },
2473
+ ],
2474
+ 2 => [
2475
+ {
2476
+ "batchUID": 2,
2477
+ "depth": 0,
2478
+ "duration": 0,
2479
+ "lanes": "0b0000000000000000000000000000010",
2480
+ "timestamp": 10,
2481
+ "type": "render-idle",
2482
+ },
2483
+ {
2484
+ "batchUID": 2,
2485
+ "depth": 0,
2486
+ "duration": 0,
2487
+ "lanes": "0b0000000000000000000000000000010",
2488
+ "timestamp": 10,
2489
+ "type": "render",
2490
+ },
2491
+ {
2492
+ "batchUID": 2,
2493
+ "depth": 0,
2494
+ "duration": 0,
2495
+ "lanes": "0b0000000000000000000000000000010",
2496
+ "timestamp": 10,
2497
+ "type": "commit",
2498
+ },
2499
+ {
2500
+ "batchUID": 2,
2501
+ "depth": 1,
2502
+ "duration": 0,
2503
+ "lanes": "0b0000000000000000000000000000010",
2504
+ "timestamp": 10,
2505
+ "type": "layout-effects",
2506
+ },
2507
+ {
2508
+ "batchUID": 2,
2509
+ "depth": 1,
2510
+ "duration": 0,
2511
+ "lanes": "0b0000000000000000000000000000010",
2512
+ "timestamp": 10,
2513
+ "type": "passive-effects",
2514
+ },
2515
+ ],
2516
+ }
2517
+ `);
2518
});
2519
2520
it('should generate component stacks for state update', async () => {
@@ -2502,25 +2542,25 @@ describe('Timeline profiler', () => {
2542
2543
const timelineData = stopProfilingAndGetTimelineData();
2544
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2505
- [
2506
- {
2507
- "lanes": "0b0000000000000000000000000100000",
2508
- "timestamp": 10,
2509
- "type": "schedule-render",
2510
- "warning": null,
2511
- },
2512
- {
2513
- "componentName": "Child",
2514
- "componentStack": "
2515
- in Child (at **)
2516
- in CommponentWithChildren (at **)",
2517
- "lanes": "0b0000000000000000000000000100000",
2518
- "timestamp": 10,
2519
- "type": "schedule-state-update",
2520
- "warning": null,
2521
- },
2522
- ]
2523
- `);
2545
+ [
2546
+ {
2547
+ "lanes": "0b0000000000000000000000000100000",
2548
+ "timestamp": 10,
2549
+ "type": "schedule-render",
2550
+ "warning": null,
2551
+ },
2552
+ {
2553
+ "componentName": "Child",
2554
+ "componentStack": "
2555
+ in Child (at **)
2556
+ in CommponentWithChildren (at **)",
2557
+ "lanes": "0b0000000000000000000000000100000",
2558
+ "timestamp": 10,
2559
+ "type": "schedule-state-update",
2560
+ "warning": null,
2561
+ },
2562
+ ]
2563
+ `);
2564
});
2565
});
2566
});
packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+35
-35
@@ -841,9 +841,9 @@ describe('Timeline profiler', () => {
841
{
842
"batchUID": 0,
843
"depth": 0,
844
- "duration": 0.012,
844
+ "duration": 0.014,
845
"lanes": "0b0000000000000000000000000000101",
846
- "timestamp": 0.006,
846
+ "timestamp": 0.008,
847
"type": "render-idle",
848
},
849
{
@@ -851,15 +851,15 @@ describe('Timeline profiler', () => {
851
"depth": 0,
852
"duration": 0.003,
853
"lanes": "0b0000000000000000000000000000101",
854
- "timestamp": 0.006,
854
+ "timestamp": 0.008,
855
"type": "render",
856
},
857
{
858
"batchUID": 0,
859
"depth": 0,
860
- "duration": 0.008,
860
+ "duration": 0.010,
861
"lanes": "0b0000000000000000000000000000101",
862
- "timestamp": 0.01,
862
+ "timestamp": 0.012,
863
"type": "commit",
864
},
865
{
@@ -867,7 +867,7 @@ describe('Timeline profiler', () => {
867
"depth": 1,
868
"duration": 0.001,
869
"lanes": "0b0000000000000000000000000000101",
870
- "timestamp": 0.016,
870
+ "timestamp": 0.02,
871
"type": "layout-effects",
872
},
873
{
@@ -875,7 +875,7 @@ describe('Timeline profiler', () => {
875
"depth": 0,
876
"duration": 0.004,
877
"lanes": "0b0000000000000000000000000000101",
878
- "timestamp": 0.019,
878
+ "timestamp": 0.023,
879
"type": "passive-effects",
880
},
881
],
@@ -883,9 +883,9 @@ describe('Timeline profiler', () => {
883
{
884
"batchUID": 1,
885
"depth": 0,
886
- "duration": 0.012,
886
+ "duration": 0.014,
887
"lanes": "0b0000000000000000000000000000101",
888
- "timestamp": 0.024,
888
+ "timestamp": 0.028,
889
"type": "render-idle",
890
},
891
{
@@ -893,15 +893,15 @@ describe('Timeline profiler', () => {
893
"depth": 0,
894
"duration": 0.003,
895
"lanes": "0b0000000000000000000000000000101",
896
- "timestamp": 0.024,
896
+ "timestamp": 0.028,
897
"type": "render",
898
},
899
{
900
"batchUID": 1,
901
"depth": 0,
902
- "duration": 0.008,
902
+ "duration": 0.010,
903
"lanes": "0b0000000000000000000000000000101",
904
- "timestamp": 0.028,
904
+ "timestamp": 0.032,
905
"type": "commit",
906
},
907
{
@@ -909,7 +909,7 @@ describe('Timeline profiler', () => {
909
"depth": 1,
910
"duration": 0.001,
911
"lanes": "0b0000000000000000000000000000101",
912
- "timestamp": 0.034,
912
+ "timestamp": 0.04,
913
"type": "layout-effects",
914
},
915
{
@@ -917,7 +917,7 @@ describe('Timeline profiler', () => {
917
"depth": 0,
918
"duration": 0.003,
919
"lanes": "0b0000000000000000000000000000101",
920
- "timestamp": 0.037,
920
+ "timestamp": 0.043,
921
"type": "passive-effects",
922
},
923
],
@@ -926,33 +926,33 @@ describe('Timeline profiler', () => {
926
{
927
"componentName": "App",
928
"duration": 0.001,
929
- "timestamp": 0.007,
929
+ "timestamp": 0.009,
930
"type": "render",
931
"warning": null,
932
},
933
{
934
"componentName": "App",
935
"duration": 0.002,
936
- "timestamp": 0.02,
936
+ "timestamp": 0.024,
937
"type": "passive-effect-mount",
938
"warning": null,
939
},
940
{
941
"componentName": "App",
942
"duration": 0.001,
943
- "timestamp": 0.025,
943
+ "timestamp": 0.029,
944
"type": "render",
945
"warning": null,
946
},
947
{
948
"componentName": "App",
949
"duration": 0.001,
950
- "timestamp": 0.038,
950
+ "timestamp": 0.044,
951
"type": "passive-effect-mount",
952
"warning": null,
953
},
954
],
955
- "duration": 0.04,
955
+ "duration": 0.046,
956
"flamechart": [],
957
"internalModuleSourceToRanges": Map {
958
undefined => [
@@ -1015,9 +1015,9 @@ describe('Timeline profiler', () => {
1015
{
1016
"batchUID": 0,
1017
"depth": 0,
1018
- "duration": 0.012,
1018
+ "duration": 0.014,
1019
"lanes": "0b0000000000000000000000000000101",
1020
- "timestamp": 0.006,
1020
+ "timestamp": 0.008,
1021
"type": "render-idle",
1022
},
1023
{
@@ -1025,15 +1025,15 @@ describe('Timeline profiler', () => {
1025
"depth": 0,
1026
"duration": 0.003,
1027
"lanes": "0b0000000000000000000000000000101",
1028
- "timestamp": 0.006,
1028
+ "timestamp": 0.008,
1029
"type": "render",
1030
},
1031
{
1032
"batchUID": 0,
1033
"depth": 0,
1034
- "duration": 0.008,
1034
+ "duration": 0.010,
1035
"lanes": "0b0000000000000000000000000000101",
1036
- "timestamp": 0.01,
1036
+ "timestamp": 0.012,
1037
"type": "commit",
1038
},
1039
{
@@ -1041,7 +1041,7 @@ describe('Timeline profiler', () => {
1041
"depth": 1,
1042
"duration": 0.001,
1043
"lanes": "0b0000000000000000000000000000101",
1044
- "timestamp": 0.016,
1044
+ "timestamp": 0.02,
1045
"type": "layout-effects",
1046
},
1047
{
@@ -1049,15 +1049,15 @@ describe('Timeline profiler', () => {
1049
"depth": 0,
1050
"duration": 0.004,
1051
"lanes": "0b0000000000000000000000000000101",
1052
- "timestamp": 0.019,
1052
+ "timestamp": 0.023,
1053
"type": "passive-effects",
1054
},
1055
{
1056
"batchUID": 1,
1057
"depth": 0,
1058
- "duration": 0.012,
1058
+ "duration": 0.014,
1059
"lanes": "0b0000000000000000000000000000101",
1060
- "timestamp": 0.024,
1060
+ "timestamp": 0.028,
1061
"type": "render-idle",
1062
},
1063
{
@@ -1065,15 +1065,15 @@ describe('Timeline profiler', () => {
1065
"depth": 0,
1066
"duration": 0.003,
1067
"lanes": "0b0000000000000000000000000000101",
1068
- "timestamp": 0.024,
1068
+ "timestamp": 0.028,
1069
"type": "render",
1070
},
1071
{
1072
"batchUID": 1,
1073
"depth": 0,
1074
- "duration": 0.008,
1074
+ "duration": 0.010,
1075
"lanes": "0b0000000000000000000000000000101",
1076
- "timestamp": 0.028,
1076
+ "timestamp": 0.032,
1077
"type": "commit",
1078
},
1079
{
@@ -1081,7 +1081,7 @@ describe('Timeline profiler', () => {
1081
"depth": 1,
1082
"duration": 0.001,
1083
"lanes": "0b0000000000000000000000000000101",
1084
- "timestamp": 0.034,
1084
+ "timestamp": 0.04,
1085
"type": "layout-effects",
1086
},
1087
{
@@ -1089,7 +1089,7 @@ describe('Timeline profiler', () => {
1089
"depth": 0,
1090
"duration": 0.003,
1091
"lanes": "0b0000000000000000000000000000101",
1092
- "timestamp": 0.037,
1092
+ "timestamp": 0.043,
1093
"type": "passive-effects",
1094
},
1095
],
@@ -1126,14 +1126,14 @@ describe('Timeline profiler', () => {
1126
"schedulingEvents": [
1127
{
1128
"lanes": "0b0000000000000000000000000000101",
1129
- "timestamp": 0.005,
1129
+ "timestamp": 0.007,
1130
"type": "schedule-render",
1131
"warning": null,
1132
},
1133
{
1134
"componentName": "App",
1135
"lanes": "0b0000000000000000000000000000101",
1136
- "timestamp": 0.021,
1136
+ "timestamp": 0.025,
1137
"type": "schedule-state-update",
1138
"warning": null,
1139
},
packages/react-devtools-shell/src/e2e-regression/app.js
+3
-4
@@ -3,8 +3,7 @@
3
// This test harness mounts each test app as a separate root to test multi-root applications.
4
5
import * as React from 'react';
6
-import * as ReactDOM from 'react-dom';
7
-import {createRoot} from 'react-dom/client';
6
+import * as ReactDOMClient from 'react-dom/client';
7
import ListApp from '../e2e-apps/ListApp';
8
9
function mountApp(App: () => React$Node) {
@@ -12,7 +11,7 @@ function mountApp(App: () => React$Node) {
11
12
((document.body: any): HTMLBodyElement).appendChild(container);
13
15
- const root = createRoot(container);
14
+ const root = ReactDOMClient.createRoot(container);
15
root.render(<App />);
16
}
17
function mountTestApp() {
@@ -27,5 +26,5 @@ window.parent.REACT_DOM_APP = {
26
createTestNameSelector: name => `[data-testname="${name}"]`,
27
findAllNodes: (container, nodes) =>
28
container.querySelectorAll(nodes.join(' ')),
30
- ...ReactDOM,
29
+ ...ReactDOMClient,
30
};
packages/react-devtools-shell/src/e2e-regression/devtools.js
+4
-3
@@ -1,6 +1,6 @@
1
import * as React from 'react';
2
import * as ReactDOM from 'react-dom';
3
-import {createRoot} from 'react-dom/client';
3
+import * as ReactDOMClient from 'react-dom/client';
4
import {
5
activate as activateBackend,
6
initialize as initializeBackend,
@@ -32,7 +32,7 @@ function init(appIframe, devtoolsContainer, appSource) {
32
const DevTools = createDevTools(contentWindow);
33
34
inject(contentDocument, appSource, () => {
35
- createRoot(devtoolsContainer).render(
35
+ ReactDOMClient.createRoot(devtoolsContainer).render(
36
<DevTools
37
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
38
showTabBar={true}
@@ -55,4 +55,5 @@ init(
55
);
56
57
// ReactDOM Test Selector APIs used by Playwright e2e tests
58
-window.parent.REACT_DOM_DEVTOOLS = ReactDOM;
58
+window.parent.REACT_DOM_DEVTOOLS =
59
+ 'createTestNameSelector' in ReactDOMClient ? ReactDOMClient : ReactDOM;
packages/react-devtools-shell/src/e2e/app.js
+3
-4
@@ -3,8 +3,7 @@
3
// This test harness mounts each test app as a separate root to test multi-root applications.
4
5
import * as React from 'react';
6
-import * as ReactDOM from 'react-dom';
7
-import {createRoot} from 'react-dom/client';
6
+import * as ReactDOMClient from 'react-dom/client';
7
8
const container = document.createElement('div');
9
@@ -14,8 +13,8 @@ const container = document.createElement('div');
13
// so that it can load things other than just ToDoList.
14
const App = require('../e2e-apps/ListApp').default;
15
17
-const root = createRoot(container);
16
+const root = ReactDOMClient.createRoot(container);
17
root.render(<App />);
18
19
// ReactDOM Test Selector APIs used by Playwright e2e tests
21
-window.parent.REACT_DOM_APP = ReactDOM;
20
+window.parent.REACT_DOM_APP = ReactDOMClient;
packages/react-devtools-shell/src/e2e/devtools.js
+3
-4
@@ -8,8 +8,7 @@
8
*/
9
10
import * as React from 'react';
11
-import * as ReactDOM from 'react-dom';
12
-import {createRoot} from 'react-dom/client';
11
+import * as ReactDOMClient from 'react-dom/client';
12
import {
13
activate as activateBackend,
14
initialize as initializeBackend,
@@ -41,7 +40,7 @@ function init(appIframe, devtoolsContainer, appSource) {
40
const DevTools = createDevTools(contentWindow);
41
42
inject(contentDocument, appSource, () => {
44
- createRoot(devtoolsContainer).render(
43
+ ReactDOMClient.createRoot(devtoolsContainer).render(
44
<DevTools
45
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
46
showTabBar={true}
@@ -58,4 +57,4 @@ const devtoolsContainer = document.getElementById('devtools');
57
init(iframe, devtoolsContainer, 'dist/e2e-app.js');
58
59
// ReactDOM Test Selector APIs used by Playwright e2e tests
61
-window.parent.REACT_DOM_DEVTOOLS = ReactDOM;
60
+window.parent.REACT_DOM_DEVTOOLS = ReactDOMClient;
packages/react-devtools-shell/webpack-server.js
+10
-2
@@ -124,6 +124,8 @@ const makeConfig = (entry, alias) => ({
124
},
125
});
126
127
+const clientAsSeparateBuild = semver.gte(REACT_VERSION, '19.0.0');
128
+
129
const app = makeConfig(
130
{
131
'app-index': './src/app/index.js',
@@ -142,8 +144,14 @@ const app = makeConfig(
144
react: resolve(builtModulesDir, 'react'),
145
'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
146
'react-devtools-feature-flags': resolveFeatureFlags('shell'),
145
- 'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
146
- 'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
147
+ 'react-dom/client': resolve(
148
+ builtModulesDir,
149
+ clientAsSeparateBuild ? 'react-dom/unstable_testing' : 'react-dom/client',
150
+ ),
151
+ 'react-dom': resolve(
152
+ builtModulesDir,
153
+ clientAsSeparateBuild ? 'react-dom' : 'react-dom/unstable_testing',
154
+ ),
155
'react-is': resolve(builtModulesDir, 'react-is'),
156
scheduler: resolve(builtModulesDir, 'scheduler'),
157
},
packages/react-dom-bindings/src/client/ReactDOMContainer.js
new
+42
@@ -0,0 +1,42 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import {disableCommentsAsDOMContainers} from 'shared/ReactFeatureFlags';
11
+
12
+import {
13
+ ELEMENT_NODE,
14
+ COMMENT_NODE,
15
+ DOCUMENT_NODE,
16
+ DOCUMENT_FRAGMENT_NODE,
17
+} from './HTMLNodeType';
18
+
19
+export function isValidContainer(node: any): boolean {
20
+ return !!(
21
+ node &&
22
+ (node.nodeType === ELEMENT_NODE ||
23
+ node.nodeType === DOCUMENT_NODE ||
24
+ node.nodeType === DOCUMENT_FRAGMENT_NODE ||
25
+ (!disableCommentsAsDOMContainers &&
26
+ node.nodeType === COMMENT_NODE &&
27
+ (node: any).nodeValue === ' react-mount-point-unstable '))
28
+ );
29
+}
30
+
31
+// TODO: Remove this function which also includes comment nodes.
32
+// We only use it in places that are currently more relaxed.
33
+export function isValidContainerLegacy(node: any): boolean {
34
+ return !!(
35
+ node &&
36
+ (node.nodeType === ELEMENT_NODE ||
37
+ node.nodeType === DOCUMENT_NODE ||
38
+ node.nodeType === DOCUMENT_FRAGMENT_NODE ||
39
+ (node.nodeType === COMMENT_NODE &&
40
+ (node: any).nodeValue === ' react-mount-point-unstable '))
41
+ );
42
+}
packages/react-dom/client.js
+1
-47
@@ -7,50 +7,4 @@
7
* @flow
8
*/
9
10
-'use strict';
11
-
12
-import type {ReactNodeList} from 'shared/ReactTypes';
13
-import type {
14
- RootType,
15
- HydrateRootOptions,
16
- CreateRootOptions,
17
-} from './src/client/ReactDOMRoot';
18
-
19
-import {
20
- createRoot as createRootImpl,
21
- hydrateRoot as hydrateRootImpl,
22
- __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE as Internals,
23
-} from './';
24
-
25
-export function createRoot(
26
- container: Element | Document | DocumentFragment,
27
- options?: CreateRootOptions,
28
-): RootType {
29
- if (__DEV__) {
30
- Internals.usingClientEntryPoint = true;
31
- }
32
- try {
33
- return createRootImpl(container, options);
34
- } finally {
35
- if (__DEV__) {
36
- Internals.usingClientEntryPoint = false;
37
- }
38
- }
39
-}
40
-
41
-export function hydrateRoot(
42
- container: Document | Element,
43
- children: ReactNodeList,
44
- options?: HydrateRootOptions,
45
-): RootType {
46
- if (__DEV__) {
47
- Internals.usingClientEntryPoint = true;
48
- }
49
- try {
50
- return hydrateRootImpl(container, children, options);
51
- } finally {
52
- if (__DEV__) {
53
- Internals.usingClientEntryPoint = false;
54
- }
55
- }
56
-}
10
+export {createRoot, hydrateRoot, version} from './src/client/ReactDOMClient';
packages/react-dom/index.experimental.js
deleted
-28
@@ -1,28 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow
8
- */
9
-
10
-export {default as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './src/ReactDOMSharedInternals';
11
-export {
12
- createPortal,
13
- createRoot,
14
- hydrateRoot,
15
- flushSync,
16
- unstable_batchedUpdates,
17
- unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
18
- useFormStatus,
19
- useFormState,
20
- requestFormReset,
21
- prefetchDNS,
22
- preconnect,
23
- preload,
24
- preloadModule,
25
- preinit,
26
- preinitModule,
27
- version,
28
-} from './src/client/ReactDOM';
packages/react-dom/index.js
+5
-11
@@ -7,25 +7,19 @@
7
* @flow
8
*/
9
10
-// Export all exports so that they're available in tests.
11
-// We can't use export * from in Flow for some reason.
10
export {default as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './src/ReactDOMSharedInternals';
11
export {
12
createPortal,
15
- createRoot,
16
- hydrateRoot,
13
flushSync,
18
- unstable_batchedUpdates,
19
- unstable_createEventHandle,
20
- unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
21
- useFormStatus,
22
- useFormState,
23
- requestFormReset,
14
prefetchDNS,
15
preconnect,
16
preload,
17
preloadModule,
18
preinit,
19
preinitModule,
20
+ requestFormReset,
21
+ unstable_batchedUpdates,
22
+ useFormState,
23
+ useFormStatus,
24
version,
31
-} from './src/client/ReactDOM';
25
+} from './src/shared/ReactDOM';
packages/react-dom/index.stable.js
deleted
-27
@@ -1,27 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow
8
- */
9
-
10
-export {default as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './src/ReactDOMSharedInternals';
11
-export {
12
- createPortal,
13
- createRoot,
14
- hydrateRoot,
15
- flushSync,
16
- unstable_batchedUpdates,
17
- useFormStatus,
18
- useFormState,
19
- requestFormReset,
20
- prefetchDNS,
21
- preconnect,
22
- preload,
23
- preloadModule,
24
- preinit,
25
- preinitModule,
26
- version,
27
-} from './src/client/ReactDOM';
packages/react-dom/npm/client.js
+33
-20
@@ -1,25 +1,38 @@
1
'use strict';
2
3
-var m = require('react-dom');
3
+function checkDCE() {
4
+ /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
5
+ if (
6
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
7
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
8
+ ) {
9
+ return;
10
+ }
11
+ if (process.env.NODE_ENV !== 'production') {
12
+ // This branch is unreachable because this function is only called
13
+ // in production, but the condition is true only in development.
14
+ // Therefore if the branch is still here, dead code elimination wasn't
15
+ // properly applied.
16
+ // Don't change the message. React DevTools relies on it. Also make sure
17
+ // this message doesn't occur elsewhere in this function, or it will cause
18
+ // a false positive.
19
+ throw new Error('^_^');
20
+ }
21
+ try {
22
+ // Verify that the code above has been dead code eliminated (DCE'd).
23
+ __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
24
+ } catch (err) {
25
+ // DevTools shouldn't crash React, no matter what.
26
+ // We should still report in case we break this code.
27
+ console.error(err);
28
+ }
29
+}
30
+
31
if (process.env.NODE_ENV === 'production') {
5
- exports.createRoot = m.createRoot;
6
- exports.hydrateRoot = m.hydrateRoot;
32
+ // DCE check should happen before ReactDOM bundle executes so that
33
+ // DevTools can report bad minification during injection.
34
+ checkDCE();
35
+ module.exports = require('./cjs/react-dom-client.production.js');
36
} else {
8
- var i = m.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
9
- exports.createRoot = function (c, o) {
10
- i.usingClientEntryPoint = true;
11
- try {
12
- return m.createRoot(c, o);
13
- } finally {
14
- i.usingClientEntryPoint = false;
15
- }
16
- };
17
- exports.hydrateRoot = function (c, h, o) {
18
- i.usingClientEntryPoint = true;
19
- try {
20
- return m.hydrateRoot(c, h, o);
21
- } finally {
22
- i.usingClientEntryPoint = false;
23
- }
24
- };
37
+ module.exports = require('./cjs/react-dom-client.development.js');
38
}
packages/react-dom/npm/profiling.js
+2
-2
@@ -32,7 +32,7 @@ if (process.env.NODE_ENV === 'production') {
32
// DCE check should happen before ReactDOM bundle executes so that
33
// DevTools can report bad minification during injection.
34
checkDCE();
35
- module.exports = require('./cjs/react-dom.profiling.js');
35
+ module.exports = require('./cjs/react-dom-profiling.profiling.js');
36
} else {
37
- module.exports = require('./cjs/react-dom.development.js');
37
+ module.exports = require('./cjs/react-dom-profiling.development.js');
38
}
packages/react-dom/npm/server-rendering-stub.js
deleted
-7
@@ -1,7 +0,0 @@
1
-'use strict';
2
-
3
-if (process.env.NODE_ENV === 'production') {
4
- module.exports = require('./cjs/react-dom-server-rendering-stub.production.js');
5
-} else {
6
- module.exports = require('./cjs/react-dom-server-rendering-stub.development.js');
7
-}
packages/react-dom/package.json
-2
@@ -31,7 +31,6 @@
31
"profiling.js",
32
"profiling.react-server.js",
33
"react-dom.react-server.js",
34
- "server-rendering-stub.js",
34
"server.browser.js",
35
"server.bun.js",
36
"server.edge.js",
@@ -107,7 +106,6 @@
106
"react-server": "./static.react-server.js",
107
"default": "./static.node.js"
108
},
110
- "./server-rendering-stub": "./server-rendering-stub.js",
109
"./profiling": {
110
"react-server": "./profiling.react-server.js",
111
"default": "./profiling.js"
packages/react-dom/profiling.js
new
+12
@@ -0,0 +1,12 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+// This entrypoint should track the /client entrypoint
11
+export * from './client';
12
+export * from './index';
packages/react-dom/server-rendering-stub.js
deleted
-61
@@ -1,61 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow
8
- */
9
-
10
-// Export all exports so that they're available in tests.
11
-// We can't use export * from in Flow for some reason.
12
-
13
-import ReactVersion from 'shared/ReactVersion';
14
-export {ReactVersion as version};
15
-
16
-export {default as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './src/ReactDOMSharedInternals';
17
-
18
-export {
19
- createPortal,
20
- flushSync,
21
- prefetchDNS,
22
- preconnect,
23
- preload,
24
- preloadModule,
25
- preinit,
26
- preinitModule,
27
- useFormStatus,
28
- useFormState,
29
- unstable_batchedUpdates,
30
-} from './src/server/ReactDOMServerRenderingStub';
31
-
32
-import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
33
-import {
34
- useFormStatus,
35
- useFormState,
36
-} from './src/server/ReactDOMServerRenderingStub';
37
-import type {Awaited} from 'shared/ReactTypes';
38
-
39
-export function experimental_useFormStatus(): FormStatus {
40
- if (__DEV__) {
41
- console.error(
42
- 'useFormStatus is now in canary. Remove the experimental_ prefix. ' +
43
- 'The prefixed alias will be removed in an upcoming release.',
44
- );
45
- }
46
- return useFormStatus();
47
-}
48
-
49
-export function experimental_useFormState<S, P>(
50
- action: (Awaited<S>, P) => S,
51
- initialState: Awaited<S>,
52
- permalink?: string,
53
-): [Awaited<S>, (P) => void, boolean] {
54
- if (__DEV__) {
55
- console.error(
56
- 'useFormState is now in canary. Remove the experimental_ prefix. ' +
57
- 'The prefixed alias will be removed in an upcoming release.',
58
- );
59
- }
60
- return useFormState(action, initialState, permalink);
61
-}
packages/react-dom/src/ReactDOMFB.js
renamed
+5
-5
@@ -9,7 +9,7 @@
9
10
import {isEnabled} from 'react-dom-bindings/src/events/ReactDOMEventListener';
11
12
-import Internals from './src/ReactDOMSharedInternalsFB';
12
+import Internals from './ReactDOMSharedInternalsFB';
13
14
// For classic WWW builds, include a few internals that are already in use.
15
Object.assign((Internals: any), {
@@ -18,6 +18,8 @@ Object.assign((Internals: any), {
18
},
19
});
20
21
+export {Internals as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE};
22
+
23
export {
24
createPortal,
25
flushSync,
@@ -33,7 +35,7 @@ export {
35
preinit,
36
preinitModule,
37
version,
36
-} from './src/client/ReactDOMFB';
38
+} from './client/ReactDOMClientFB';
39
40
export {
41
createRoot,
@@ -43,6 +45,4 @@ export {
45
findDOMNode,
46
unstable_renderSubtreeIntoContainer,
47
unmountComponentAtNode,
46
-} from './src/client/ReactDOMRootFB';
47
-
48
-export {Internals as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE};
48
+} from './client/ReactDOMRootFB';
packages/react-dom/src/ReactDOMFB.modern.js
renamed
+4
-3
@@ -7,7 +7,8 @@
7
* @flow
8
*/
9
10
-export {default as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './src/ReactDOMSharedInternalsFB';
10
+export {default as __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE} from './ReactDOMSharedInternalsFB';
11
+
12
export {
13
createPortal,
14
flushSync,
@@ -24,6 +25,6 @@ export {
25
preinit,
26
preinitModule,
27
version,
27
-} from './src/client/ReactDOMFB';
28
+} from './client/ReactDOMClientFB';
29
29
-export {createRoot, hydrateRoot} from './src/client/ReactDOMRootFB';
30
+export {createRoot, hydrateRoot} from './client/ReactDOMRootFB';
packages/react-dom/src/ReactDOMReactServer.js
renamed
packages/react-dom/src/ReactDOMSharedInternals.js
-6
@@ -20,11 +20,6 @@ type ReactDOMInternals = {
20
| ((
21
componentOrElement: React$Component<any, any>,
22
) => null | Element | Text),
23
- usingClientEntryPoint: boolean,
24
-};
25
-
26
-export type ReactDOMInternalsDev = ReactDOMInternals & {
27
- usingClientEntryPoint: boolean,
23
};
24
25
function noop() {}
@@ -52,7 +47,6 @@ const Internals: ReactDOMInternals = {
47
d /* ReactDOMCurrentDispatcher */: DefaultDispatcher,
48
p /* currentUpdatePriority */: NoEventPriority,
49
findDOMNode: null,
55
- usingClientEntryPoint: false,
50
};
51
52
export default Internals;
packages/react-dom/src/ReactDOMTestingFB.js
renamed
+2
-17
@@ -7,23 +7,8 @@
7
* @flow
8
*/
9
10
-export {
11
- createPortal,
12
- flushSync,
13
- unstable_batchedUpdates,
14
- unstable_createEventHandle,
15
- useFormStatus,
16
- useFormState,
17
- prefetchDNS,
18
- preconnect,
19
- preload,
20
- preloadModule,
21
- preinit,
22
- preinitModule,
23
- version,
24
- __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
25
-} from './index.modern.fb.js';
26
-export {createRoot, hydrateRoot} from './client.js';
10
+export * from './ReactDOMFB';
11
+
12
export {
13
createComponentSelector,
14
createHasPseudoClassSelector,
packages/react-dom/src/ReactDOMTestingFB.modern.js
new
+23
@@ -0,0 +1,23 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+export * from './ReactDOMFB.modern';
11
+
12
+export {
13
+ createComponentSelector,
14
+ createHasPseudoClassSelector,
15
+ createRoleSelector,
16
+ createTestNameSelector,
17
+ createTextSelector,
18
+ getFindAllNodesFailureDescription,
19
+ findAllNodes,
20
+ findBoundingRects,
21
+ focusWithin,
22
+ observeVisibleRects,
23
+} from 'react-reconciler/src/ReactFiberReconciler';
packages/react-dom/src/__tests__/ReactDOM-test.js
+2
-2
@@ -22,11 +22,11 @@ describe('ReactDOM', () => {
22
jest.resetModules();
23
React = require('react');
24
ReactDOM = require('react-dom');
25
+ ReactDOMClient = require('react-dom/client');
26
+ ReactDOMServer = require('react-dom/server');
27
findDOMNode =
28
ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
29
.findDOMNode;
28
- ReactDOMClient = require('react-dom/client');
29
- ReactDOMServer = require('react-dom/server');
30
31
act = require('internal-test-utils').act;
32
});
packages/react-dom/src/__tests__/ReactDOMRoot-test.js
-22
@@ -47,28 +47,6 @@ describe('ReactDOMRoot', () => {
47
expect(container.textContent).toEqual('Hi');
48
});
49
50
- // @gate !www || !__DEV__
51
- it('warns if you import createRoot from react-dom', async () => {
52
- expect(() => ReactDOM.createRoot(container)).toErrorDev(
53
- 'You are importing createRoot from "react-dom" which is not supported. ' +
54
- 'You should instead import it from "react-dom/client".',
55
- {
56
- withoutStack: true,
57
- },
58
- );
59
- });
60
-
61
- // @gate !www || !__DEV__
62
- it('warns if you import hydrateRoot from react-dom', async () => {
63
- expect(() => ReactDOM.hydrateRoot(container, null)).toErrorDev(
64
- 'You are importing hydrateRoot from "react-dom" which is not supported. ' +
65
- 'You should instead import it from "react-dom/client".',
66
- {
67
- withoutStack: true,
68
- },
69
- );
70
- });
71
-
50
it('warns if a callback parameter is provided to render', async () => {
51
const callback = jest.fn();
52
const root = ReactDOMClient.createRoot(container);
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+1
-1
@@ -1479,7 +1479,7 @@ describe('ReactDOMServerPartialHydration', () => {
1479
expect(span.className).toBe('hi');
1480
});
1481
1482
- // @gate experimental || www
1482
+ // @gate www
1483
it('blocks updates to hydrate the content first if props changed at idle priority', async () => {
1484
let suspend = false;
1485
let resolve;
packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+3
-3
@@ -1333,7 +1333,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
1333
await waitForAll(['App', 'C', 'B', 'A']);
1334
});
1335
1336
- // @gate experimental || www
1336
+ // @gate www
1337
it('hydrates before an update even if hydration moves away from it', async () => {
1338
function Child({text}) {
1339
Scheduler.log(text);
@@ -1677,7 +1677,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
1677
expect(initialSpan).toBe(spanRef);
1678
});
1679
1680
- // @gate experimental || www
1680
+ // @gate www
1681
it('can force hydration in response to continuous update', async () => {
1682
function Child({text}) {
1683
Scheduler.log(`Child ${text}`);
@@ -1746,7 +1746,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
1746
expect(initialSpan).toBe(spanRef);
1747
});
1748
1749
- // @gate experimental || www
1749
+ // @gate www
1750
it('regression test: can unwind context on selective hydration interruption', async () => {
1751
const Context = React.createContext('DefaultContext');
1752
packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
+1
-1
@@ -26,10 +26,10 @@ describe('ReactDOMSuspensePlaceholder', () => {
26
jest.resetModules();
27
React = require('react');
28
ReactDOM = require('react-dom');
29
+ ReactDOMClient = require('react-dom/client');
30
findDOMNode =
31
ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
32
.findDOMNode;
32
- ReactDOMClient = require('react-dom/client');
33
Scheduler = require('scheduler');
34
act = require('internal-test-utils').act;
35
assertLog = require('internal-test-utils').assertLog;
packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
+1
-1
@@ -26,10 +26,10 @@ describe('ReactEmptyComponent', () => {
26
27
React = require('react');
28
ReactDOM = require('react-dom');
29
+ ReactDOMClient = require('react-dom/client');
30
findDOMNode =
31
ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
32
.findDOMNode;
32
- ReactDOMClient = require('react-dom/client');
33
Scheduler = require('scheduler');
34
const InternalTestUtils = require('internal-test-utils');
35
act = InternalTestUtils.act;
packages/react-dom/src/__tests__/ReactLegacyCompositeComponent-test.js
+1
-1
@@ -21,10 +21,10 @@ describe('ReactLegacyCompositeComponent', () => {
21
jest.resetModules();
22
React = require('react');
23
ReactDOM = require('react-dom');
24
+ ReactDOMClient = require('react-dom/client');
25
findDOMNode =
26
ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
27
.findDOMNode;
27
- ReactDOMClient = require('react-dom/client');
28
PropTypes = require('prop-types');
29
act = require('internal-test-utils').act;
30
});
packages/react-dom/src/__tests__/ReactUpdates-test.js
+1
-1
@@ -24,10 +24,10 @@ describe('ReactUpdates', () => {
24
jest.resetModules();
25
React = require('react');
26
ReactDOM = require('react-dom');
27
+ ReactDOMClient = require('react-dom/client');
28
findDOMNode =
29
ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
30
.findDOMNode;
30
- ReactDOMClient = require('react-dom/client');
31
act = require('internal-test-utils').act;
32
Scheduler = require('scheduler');
33
packages/react-dom/src/__tests__/react-dom-server-rendering-stub-test.js
deleted
-99
@@ -1,99 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- */
9
-
10
-'use strict';
11
-
12
-let React;
13
-let ReactDOM;
14
-let ReactDOMFizzServer;
15
-
16
-describe('react-dom-server-rendering-stub', () => {
17
- beforeEach(() => {
18
- jest.mock('react-dom', () => require('react-dom/server-rendering-stub'));
19
-
20
- React = require('react');
21
- ReactDOM = require('react-dom');
22
- ReactDOMFizzServer = require('react-dom/server');
23
- });
24
-
25
- it('exports a version', () => {
26
- expect(ReactDOM.version).toBeTruthy();
27
- });
28
-
29
- it('exports that are expected to be client only in the future are not exported', () => {
30
- expect(ReactDOM.createRoot).toBe(undefined);
31
- expect(ReactDOM.hydrateRoot).toBe(undefined);
32
- expect(ReactDOM.findDOMNode).toBe(undefined);
33
- expect(
34
- ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
35
- .findDOMNode,
36
- ).toBe(null);
37
- expect(ReactDOM.hydrate).toBe(undefined);
38
- expect(ReactDOM.render).toBe(undefined);
39
- expect(ReactDOM.unmountComponentAtNode).toBe(undefined);
40
- expect(ReactDOM.unstable_createEventHandle).toBe(undefined);
41
- expect(ReactDOM.unstable_renderSubtreeIntoContainer).toBe(undefined);
42
- expect(ReactDOM.unstable_runWithPriority).toBe(undefined);
43
- });
44
-
45
- it('provides preload, preloadModule, preinit, and preinitModule exports', async () => {
46
- function App() {
47
- ReactDOM.preload('foo', {as: 'style'});
48
- ReactDOM.preloadModule('foomodule');
49
- ReactDOM.preinit('bar', {as: 'style'});
50
- ReactDOM.preinitModule('barmodule');
51
- return <div>foo</div>;
52
- }
53
- const html = ReactDOMFizzServer.renderToString(<App />);
54
- expect(html).toEqual(
55
- '<link rel="stylesheet" href="bar" data-precedence="default"/><script src="barmodule" type="module" async=""></script><link rel="preload" href="foo" as="style"/><link rel="modulepreload" href="foomodule"/><div>foo</div>',
56
- );
57
- });
58
-
59
- it('provides preconnect and prefetchDNS exports', async () => {
60
- function App() {
61
- ReactDOM.preconnect('foo', {crossOrigin: 'use-credentials'});
62
- ReactDOM.prefetchDNS('bar');
63
- return <div>foo</div>;
64
- }
65
- const html = ReactDOMFizzServer.renderToString(<App />);
66
- expect(html).toEqual(
67
- '<link rel="preconnect" href="foo" crossorigin="use-credentials"/><link href="bar" rel="dns-prefetch"/><div>foo</div>',
68
- );
69
- });
70
-
71
- it('provides a stub for createPortal', async () => {
72
- expect(() => {
73
- ReactDOM.createPortal();
74
- }).toThrow(
75
- 'createPortal was called on the server. Portals are not currently supported on the server. Update your program to conditionally call createPortal on the client only.',
76
- );
77
- });
78
-
79
- it('provides a stub for flushSync', async () => {
80
- let x = false;
81
- expect(() => {
82
- ReactDOM.flushSync(() => (x = true));
83
- }).toThrow(
84
- 'flushSync was called on the server. This is likely caused by a function being called during render or in module scope that was intended to be called from an effect or event handler. Update your to not call flushSync no the server.',
85
- );
86
- expect(x).toBe(false);
87
- });
88
-
89
- // @gate enableAsyncActions
90
- it('exports useFormStatus', async () => {
91
- function App() {
92
- const {pending} = ReactDOM.useFormStatus();
93
- return 'Pending: ' + pending;
94
- }
95
-
96
- const result = await ReactDOMFizzServer.renderToStaticMarkup(<App />);
97
- expect(result).toEqual('Pending: false');
98
- });
99
-});
packages/react-dom/src/client/ReactDOM.js
deleted
-204
@@ -1,204 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow
8
- */
9
-
10
-import type {ReactNodeList} from 'shared/ReactTypes';
11
-import type {
12
- RootType,
13
- HydrateRootOptions,
14
- CreateRootOptions,
15
-} from './ReactDOMRoot';
16
-
17
-import {disableLegacyMode} from 'shared/ReactFeatureFlags';
18
-import {
19
- createRoot as createRootImpl,
20
- hydrateRoot as hydrateRootImpl,
21
- isValidContainer,
22
-} from './ReactDOMRoot';
23
-import {createEventHandle} from 'react-dom-bindings/src/client/ReactDOMEventHandle';
24
-import {runWithPriority} from 'react-dom-bindings/src/client/ReactDOMUpdatePriority';
25
-import {flushSync as flushSyncIsomorphic} from '../shared/ReactDOMFlushSync';
26
-
27
-import {
28
- flushSyncFromReconciler as flushSyncWithoutWarningIfAlreadyRendering,
29
- isAlreadyRendering,
30
- injectIntoDevTools,
31
- findHostInstance,
32
-} from 'react-reconciler/src/ReactFiberReconciler';
33
-import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
34
-import {canUseDOM} from 'shared/ExecutionEnvironment';
35
-import ReactVersion from 'shared/ReactVersion';
36
-
37
-import {getClosestInstanceFromNode} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
38
-import Internals from '../ReactDOMSharedInternals';
39
-
40
-export {
41
- prefetchDNS,
42
- preconnect,
43
- preload,
44
- preloadModule,
45
- preinit,
46
- preinitModule,
47
-} from '../shared/ReactDOMFloat';
48
-export {
49
- useFormStatus,
50
- useFormState,
51
- requestFormReset,
52
-} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
53
-
54
-if (__DEV__) {
55
- if (
56
- typeof Map !== 'function' ||
57
- // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype
58
- Map.prototype == null ||
59
- typeof Map.prototype.forEach !== 'function' ||
60
- typeof Set !== 'function' ||
61
- // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype
62
- Set.prototype == null ||
63
- typeof Set.prototype.clear !== 'function' ||
64
- typeof Set.prototype.forEach !== 'function'
65
- ) {
66
- console.error(
67
- 'React depends on Map and Set built-in types. Make sure that you load a ' +
68
- 'polyfill in older browsers. https://react.dev/link/react-polyfills',
69
- );
70
- }
71
-}
72
-
73
-function createPortal(
74
- children: ReactNodeList,
75
- container: Element | DocumentFragment,
76
- key: ?string = null,
77
-): React$Portal {
78
- if (!isValidContainer(container)) {
79
- throw new Error('Target container is not a DOM element.');
80
- }
81
-
82
- // TODO: pass ReactDOM portal implementation as third argument
83
- // $FlowFixMe[incompatible-return] The Flow type is opaque but there's no way to actually create it.
84
- return createPortalImpl(children, container, null, key);
85
-}
86
-
87
-function createRoot(
88
- container: Element | Document | DocumentFragment,
89
- options?: CreateRootOptions,
90
-): RootType {
91
- if (__DEV__) {
92
- if (!Internals.usingClientEntryPoint) {
93
- console.error(
94
- 'You are importing createRoot from "react-dom" which is not supported. ' +
95
- 'You should instead import it from "react-dom/client".',
96
- );
97
- }
98
- }
99
- return createRootImpl(container, options);
100
-}
101
-
102
-function hydrateRoot(
103
- container: Document | Element,
104
- initialChildren: ReactNodeList,
105
- options?: HydrateRootOptions,
106
-): RootType {
107
- if (__DEV__) {
108
- if (!Internals.usingClientEntryPoint) {
109
- console.error(
110
- 'You are importing hydrateRoot from "react-dom" which is not supported. ' +
111
- 'You should instead import it from "react-dom/client".',
112
- );
113
- }
114
- }
115
- return hydrateRootImpl(container, initialChildren, options);
116
-}
117
-
118
-// Overload the definition to the two valid signatures.
119
-// Warning, this opts-out of checking the function body.
120
-declare function flushSyncFromReconciler<R>(fn: () => R): R;
121
-// eslint-disable-next-line no-redeclare
122
-declare function flushSyncFromReconciler(): void;
123
-// eslint-disable-next-line no-redeclare
124
-function flushSyncFromReconciler<R>(fn: (() => R) | void): R | void {
125
- if (__DEV__) {
126
- if (isAlreadyRendering()) {
127
- console.error(
128
- 'flushSync was called from inside a lifecycle method. React cannot ' +
129
- 'flush when React is already rendering. Consider moving this call to ' +
130
- 'a scheduler task or micro task.',
131
- );
132
- }
133
- }
134
- return flushSyncWithoutWarningIfAlreadyRendering(fn);
135
-}
136
-
137
-const flushSync: typeof flushSyncIsomorphic = disableLegacyMode
138
- ? flushSyncIsomorphic
139
- : flushSyncFromReconciler;
140
-
141
-function findDOMNode(
142
- componentOrElement: React$Component<any, any>,
143
-): null | Element | Text {
144
- return findHostInstance(componentOrElement);
145
-}
146
-
147
-// Expose findDOMNode on internals
148
-Internals.findDOMNode = findDOMNode;
149
-
150
-function unstable_batchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
151
- // batchedUpdates was a legacy mode feature that is a no-op outside of
152
- // legacy mode. In 19, we made it an actual no-op, but we're keeping it
153
- // for now since there may be libraries that still include it.
154
- return fn(a);
155
-}
156
-
157
-export {
158
- createPortal,
159
- unstable_batchedUpdates,
160
- flushSync,
161
- ReactVersion as version,
162
- // exposeConcurrentModeAPIs
163
- createRoot,
164
- hydrateRoot,
165
- // enableCreateEventHandleAPI
166
- createEventHandle as unstable_createEventHandle,
167
- // TODO: Remove this once callers migrate to alternatives.
168
- // This should only be used by React internals.
169
- runWithPriority as unstable_runWithPriority,
170
-};
171
-
172
-const foundDevTools = injectIntoDevTools({
173
- findFiberByHostInstance: getClosestInstanceFromNode,
174
- bundleType: __DEV__ ? 1 : 0,
175
- version: ReactVersion,
176
- rendererPackageName: 'react-dom',
177
-});
178
-
179
-if (__DEV__) {
180
- if (!foundDevTools && canUseDOM && window.top === window.self) {
181
- // If we're in Chrome or Firefox, provide a download link if not installed.
182
- if (
183
- (navigator.userAgent.indexOf('Chrome') > -1 &&
184
- navigator.userAgent.indexOf('Edge') === -1) ||
185
- navigator.userAgent.indexOf('Firefox') > -1
186
- ) {
187
- const protocol = window.location.protocol;
188
- // Don't warn in exotic cases like chrome-extension://.
189
- if (/^(https?|file):$/.test(protocol)) {
190
- // eslint-disable-next-line react-internal/no-production-logging
191
- console.info(
192
- '%cDownload the React DevTools ' +
193
- 'for a better development experience: ' +
194
- 'https://react.dev/link/react-devtools' +
195
- (protocol === 'file:'
196
- ? '\nYou might need to use a local HTTP server (instead of file://): ' +
197
- 'https://react.dev/link/react-devtools-faq'
198
- : ''),
199
- 'font-weight:bold',
200
- );
201
- }
202
- }
203
- }
204
-}
packages/react-dom/src/client/ReactDOMClient.js
new
+84
@@ -0,0 +1,84 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import {createRoot, hydrateRoot} from './ReactDOMRoot';
11
+
12
+import {
13
+ injectIntoDevTools,
14
+ findHostInstance,
15
+} from 'react-reconciler/src/ReactFiberReconciler';
16
+import {canUseDOM} from 'shared/ExecutionEnvironment';
17
+import ReactVersion from 'shared/ReactVersion';
18
+
19
+import {getClosestInstanceFromNode} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
20
+import Internals from 'shared/ReactDOMSharedInternals';
21
+
22
+if (__DEV__) {
23
+ if (
24
+ typeof Map !== 'function' ||
25
+ // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype
26
+ Map.prototype == null ||
27
+ typeof Map.prototype.forEach !== 'function' ||
28
+ typeof Set !== 'function' ||
29
+ // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype
30
+ Set.prototype == null ||
31
+ typeof Set.prototype.clear !== 'function' ||
32
+ typeof Set.prototype.forEach !== 'function'
33
+ ) {
34
+ console.error(
35
+ 'React depends on Map and Set built-in types. Make sure that you load a ' +
36
+ 'polyfill in older browsers. https://react.dev/link/react-polyfills',
37
+ );
38
+ }
39
+}
40
+
41
+function findDOMNode(
42
+ componentOrElement: React$Component<any, any>,
43
+): null | Element | Text {
44
+ return findHostInstance(componentOrElement);
45
+}
46
+
47
+// Expose findDOMNode on internals
48
+Internals.findDOMNode = findDOMNode;
49
+
50
+export {ReactVersion as version, createRoot, hydrateRoot};
51
+
52
+const foundDevTools = injectIntoDevTools({
53
+ findFiberByHostInstance: getClosestInstanceFromNode,
54
+ bundleType: __DEV__ ? 1 : 0,
55
+ version: ReactVersion,
56
+ rendererPackageName: 'react-dom',
57
+});
58
+
59
+if (__DEV__) {
60
+ if (!foundDevTools && canUseDOM && window.top === window.self) {
61
+ // If we're in Chrome or Firefox, provide a download link if not installed.
62
+ if (
63
+ (navigator.userAgent.indexOf('Chrome') > -1 &&
64
+ navigator.userAgent.indexOf('Edge') === -1) ||
65
+ navigator.userAgent.indexOf('Firefox') > -1
66
+ ) {
67
+ const protocol = window.location.protocol;
68
+ // Don't warn in exotic cases like chrome-extension://.
69
+ if (/^(https?|file):$/.test(protocol)) {
70
+ // eslint-disable-next-line react-internal/no-production-logging
71
+ console.info(
72
+ '%cDownload the React DevTools ' +
73
+ 'for a better development experience: ' +
74
+ 'https://react.dev/link/react-devtools' +
75
+ (protocol === 'file:'
76
+ ? '\nYou might need to use a local HTTP server (instead of file://): ' +
77
+ 'https://react.dev/link/react-devtools-faq'
78
+ : ''),
79
+ 'font-weight:bold',
80
+ );
81
+ }
82
+ }
83
+ }
84
+}
packages/react-dom/src/client/ReactDOMClientFB.js
renamed
+1
-1
@@ -10,7 +10,7 @@
10
import type {ReactNodeList} from 'shared/ReactTypes';
11
12
import {disableLegacyMode} from 'shared/ReactFeatureFlags';
13
-import {isValidContainer} from './ReactDOMRoot';
13
+import {isValidContainer} from 'react-dom-bindings/src/client/ReactDOMContainer';
14
import {createEventHandle} from 'react-dom-bindings/src/client/ReactDOMEventHandle';
15
import {runWithPriority} from 'react-dom-bindings/src/client/ReactDOMUpdatePriority';
16
import {flushSync as flushSyncIsomorphic} from '../shared/ReactDOMFlushSync';
packages/react-dom/src/client/ReactDOMRoot.js
+2
-32
@@ -13,11 +13,11 @@ import type {
13
TransitionTracingCallbacks,
14
} from 'react-reconciler/src/ReactInternalTypes';
15
16
+import {isValidContainer} from 'react-dom-bindings/src/client/ReactDOMContainer';
17
import {queueExplicitHydrationTarget} from 'react-dom-bindings/src/events/ReactDOMEventReplaying';
18
import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
19
import {
20
allowConcurrentByDefault,
20
- disableCommentsAsDOMContainers,
21
enableAsyncActions,
22
} from 'shared/ReactFeatureFlags';
23
@@ -82,12 +82,7 @@ import {
82
unmarkContainerAsRoot,
83
} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
84
import {listenToAllSupportedEvents} from 'react-dom-bindings/src/events/DOMPluginEventSystem';
85
-import {
86
- ELEMENT_NODE,
87
- COMMENT_NODE,
88
- DOCUMENT_NODE,
89
- DOCUMENT_FRAGMENT_NODE,
90
-} from 'react-dom-bindings/src/client/HTMLNodeType';
85
+import {COMMENT_NODE} from 'react-dom-bindings/src/client/HTMLNodeType';
86
87
import {
88
createContainer,
@@ -357,31 +352,6 @@ export function hydrateRoot(
352
return new ReactDOMHydrationRoot(root);
353
}
354
360
-export function isValidContainer(node: any): boolean {
361
- return !!(
362
- node &&
363
- (node.nodeType === ELEMENT_NODE ||
364
- node.nodeType === DOCUMENT_NODE ||
365
- node.nodeType === DOCUMENT_FRAGMENT_NODE ||
366
- (!disableCommentsAsDOMContainers &&
367
- node.nodeType === COMMENT_NODE &&
368
- (node: any).nodeValue === ' react-mount-point-unstable '))
369
- );
370
-}
371
-
372
-// TODO: Remove this function which also includes comment nodes.
373
-// We only use it in places that are currently more relaxed.
374
-export function isValidContainerLegacy(node: any): boolean {
375
- return !!(
376
- node &&
377
- (node.nodeType === ELEMENT_NODE ||
378
- node.nodeType === DOCUMENT_NODE ||
379
- node.nodeType === DOCUMENT_FRAGMENT_NODE ||
380
- (node.nodeType === COMMENT_NODE &&
381
- (node: any).nodeValue === ' react-mount-point-unstable '))
382
- );
383
-}
384
-
355
function warnIfReactDOMContainerInDEV(container: any) {
356
if (__DEV__) {
357
if (isContainerMarkedAsRoot(container)) {
packages/react-dom/src/client/ReactDOMRootFB.js
+1
-1
@@ -36,7 +36,7 @@ import {
36
unmarkContainerAsRoot,
37
} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
38
import {listenToAllSupportedEvents} from 'react-dom-bindings/src/events/DOMPluginEventSystem';
39
-import {isValidContainerLegacy} from './ReactDOMRoot';
39
+import {isValidContainerLegacy} from 'react-dom-bindings/src/client/ReactDOMContainer';
40
import {
41
DOCUMENT_NODE,
42
ELEMENT_NODE,
packages/react-dom/src/server/ReactDOMServerRenderingStub.js
deleted
-48
@@ -1,48 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow
8
- */
9
-
10
-export {
11
- preinit,
12
- preinitModule,
13
- preload,
14
- preloadModule,
15
- preconnect,
16
- prefetchDNS,
17
-} from '../shared/ReactDOMFloat';
18
-export {
19
- useFormStatus,
20
- useFormState,
21
-} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
22
-
23
-export function createPortal() {
24
- throw new Error(
25
- 'createPortal was called on the server. Portals are not currently' +
26
- ' supported on the server. Update your program to conditionally call' +
27
- ' createPortal on the client only.',
28
- );
29
-}
30
-
31
-export function flushSync() {
32
- throw new Error(
33
- 'flushSync was called on the server. This is likely caused by a' +
34
- ' function being called during render or in module scope that was' +
35
- ' intended to be called from an effect or event handler. Update your' +
36
- ' to not call flushSync no the server.',
37
- );
38
-}
39
-
40
-// on the server we just call the callback because there is
41
-// not update mechanism. Really this should not be called on the
42
-// server but since the semantics are generally clear enough we
43
-// can provide this trivial implementation.
44
-function batchedUpdates<A, R>(fn: A => R, a: A): R {
45
- return fn(a);
46
-}
47
-
48
-export {batchedUpdates as unstable_batchedUpdates};
packages/react-dom/src/shared/ReactDOM.js
new
+84
@@ -0,0 +1,84 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import type {ReactNodeList} from 'shared/ReactTypes';
11
+
12
+import ReactVersion from 'shared/ReactVersion';
13
+
14
+import {isValidContainer} from 'react-dom-bindings/src/client/ReactDOMContainer';
15
+import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
16
+import {flushSync} from './ReactDOMFlushSync';
17
+
18
+import {
19
+ prefetchDNS,
20
+ preconnect,
21
+ preload,
22
+ preloadModule,
23
+ preinit,
24
+ preinitModule,
25
+} from './ReactDOMFloat';
26
+import {
27
+ requestFormReset,
28
+ useFormStatus,
29
+ useFormState,
30
+} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
31
+
32
+if (__DEV__) {
33
+ if (
34
+ typeof Map !== 'function' ||
35
+ // $FlowFixMe[prop-missing] Flow incorrectly thinks Map has no prototype
36
+ Map.prototype == null ||
37
+ typeof Map.prototype.forEach !== 'function' ||
38
+ typeof Set !== 'function' ||
39
+ // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype
40
+ Set.prototype == null ||
41
+ typeof Set.prototype.clear !== 'function' ||
42
+ typeof Set.prototype.forEach !== 'function'
43
+ ) {
44
+ console.error(
45
+ 'React depends on Map and Set built-in types. Make sure that you load a ' +
46
+ 'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
47
+ );
48
+ }
49
+}
50
+
51
+function batchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
52
+ // batchedUpdates is now just a passthrough noop
53
+ return fn(a);
54
+}
55
+
56
+function createPortal(
57
+ children: ReactNodeList,
58
+ container: Element | DocumentFragment,
59
+ key: ?string = null,
60
+): React$Portal {
61
+ if (!isValidContainer(container)) {
62
+ throw new Error('Target container is not a DOM element.');
63
+ }
64
+
65
+ // TODO: pass ReactDOM portal implementation as third argument
66
+ // $FlowFixMe[incompatible-return] The Flow type is opaque but there's no way to actually create it.
67
+ return createPortalImpl(children, container, null, key);
68
+}
69
+
70
+export {
71
+ ReactVersion as version,
72
+ createPortal,
73
+ flushSync,
74
+ batchedUpdates as unstable_batchedUpdates,
75
+ prefetchDNS,
76
+ preconnect,
77
+ preload,
78
+ preloadModule,
79
+ preinit,
80
+ preinitModule,
81
+ requestFormReset,
82
+ useFormStatus,
83
+ useFormState,
84
+};
packages/react-dom/unstable_testing.classic.fb.js
deleted
-45
@@ -1,45 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow
8
- */
9
-
10
-export {
11
- createPortal,
12
- findDOMNode,
13
- flushSync,
14
- render,
15
- unmountComponentAtNode,
16
- unstable_batchedUpdates,
17
- unstable_createEventHandle,
18
- unstable_renderSubtreeIntoContainer,
19
- unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
20
- useFormStatus,
21
- useFormState,
22
- prefetchDNS,
23
- preconnect,
24
- preload,
25
- preloadModule,
26
- preinit,
27
- preinitModule,
28
- version,
29
- __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
30
-} from './index.classic.fb.js';
31
-
32
-export {createRoot, hydrateRoot} from './client.js';
33
-
34
-export {
35
- createComponentSelector,
36
- createHasPseudoClassSelector,
37
- createRoleSelector,
38
- createTestNameSelector,
39
- createTextSelector,
40
- getFindAllNodesFailureDescription,
41
- findAllNodes,
42
- findBoundingRects,
43
- focusWithin,
44
- observeVisibleRects,
45
-} from 'react-reconciler/src/ReactFiberReconciler';
packages/react-dom/unstable_testing.experimental.js
+1
-17
@@ -7,23 +7,7 @@
7
* @flow
8
*/
9
10
-export {
11
- createPortal,
12
- flushSync,
13
- unstable_batchedUpdates,
14
- useFormStatus,
15
- useFormState,
16
- prefetchDNS,
17
- preconnect,
18
- preload,
19
- preloadModule,
20
- preinit,
21
- preinitModule,
22
- version,
23
- __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
24
-} from './index.experimental.js';
25
-
26
-export {createRoot, hydrateRoot} from './client.js';
10
+export * from './client.js';
11
12
export {
13
createComponentSelector,
packages/react-dom/unstable_testing.js
+1
-31
@@ -7,34 +7,4 @@
7
* @flow
8
*/
9
10
-export {
11
- createPortal,
12
- flushSync,
13
- unstable_batchedUpdates,
14
- unstable_createEventHandle,
15
- unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
16
- useFormStatus,
17
- useFormState,
18
- prefetchDNS,
19
- preconnect,
20
- preload,
21
- preloadModule,
22
- preinit,
23
- preinitModule,
24
- version,
25
-} from './index.js';
26
-
27
-export {createRoot, hydrateRoot} from './client.js';
28
-
29
-export {
30
- createComponentSelector,
31
- createHasPseudoClassSelector,
32
- createRoleSelector,
33
- createTestNameSelector,
34
- createTextSelector,
35
- getFindAllNodesFailureDescription,
36
- findAllNodes,
37
- findBoundingRects,
38
- focusWithin,
39
- observeVisibleRects,
40
-} from 'react-reconciler/src/ReactFiberReconciler';
10
+export * from './client.js';
packages/react-dom/unstable_testing.stable.js
deleted
-25
@@ -1,25 +0,0 @@
1
-/**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @flow
8
- */
9
-
10
-export {
11
- createPortal,
12
- flushSync,
13
- unstable_batchedUpdates,
14
- useFormStatus,
15
- useFormState,
16
- prefetchDNS,
17
- preconnect,
18
- preload,
19
- preloadModule,
20
- preinit,
21
- preinitModule,
22
- version,
23
- __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
24
-} from './index.stable.js';
25
-export {createRoot, hydrateRoot} from './client.js';
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+16
-13
@@ -1172,19 +1172,22 @@ describe('ReactFlightDOMBrowser', () => {
1172
root.render(<App />);
1173
});
1174
expect(document.head.innerHTML).toBe(
1175
- // Currently the react-dom entrypoint loads the fiber implementation
1176
- // even if you never pull in the the client APIs. this causes the fiber
1177
- // dispatcher to be present even for Flight ReactDOM calls. This is not what
1178
- // you would have in a real application but given we're runnign flight and
1179
- // fiber the in the same scope it's unavoidable until we make the entrypoint
1180
- // not automatically pull in the fiber implementation. This test currently
1181
- // asserts this be demonstrating that the preload call after the await point
1182
- // is written to the document before the call before it. We still demonstrate that
1183
- // flight handled the sync call because if the fiber implementation did it would appear
1184
- // before the after call. In the future we will change this assertion once the fiber
1185
- // implementation no long automatically gets pulled in
1186
- '<link rel="preload" href="after" as="style"><link rel="preload" href="before" as="style">',
1187
- // '<link rel="preload" href="before" as="style">',
1175
+ gate(f => f.www)
1176
+ ? // The www entrypoints for ReactDOM and ReactDOMClient are unified so even
1177
+ // when you pull in just the top level the dispatcher for the Document is
1178
+ // loaded alongside it. In a normal environment there would be nothing to dispatch to
1179
+ // in a server environment so the preload calls would still only be dispatched to fizz
1180
+ // or the browser but not both. However in this contrived test environment the preloads
1181
+ // are being dispatched simultaneously causing an extraneous preload to show up. This test currently
1182
+ // asserts this be demonstrating that the preload call after the await point
1183
+ // is written to the document before the call before it. We still demonstrate that
1184
+ // flight handled the sync call because if the fiber implementation did it would appear
1185
+ // before the after call. In the future we will change this assertion once the fiber
1186
+ // implementation no long automatically gets pulled in
1187
+ '<link rel="preload" href="after" as="style"><link rel="preload" href="before" as="style">'
1188
+ : // For other release channels the client and isomorphic entrypoints are separate and thus we only
1189
+ // observe the expected preload from before the first await
1190
+ '<link rel="preload" href="before" as="style">',
1191
);
1192
expect(container.innerHTML).toBe('<p>hello world</p>');
1193
});
scripts/jest/setupHostConfigs.js
+36
-1
@@ -12,8 +12,43 @@ function resolveEntryFork(resolvedEntry, isFBBundle) {
12
// .stable.js
13
// .experimental.js
14
// .js
15
-
15
if (isFBBundle) {
16
+ // FB builds for react-dom need to alias both react-dom and react-dom/client to the same
17
+ // entrypoint since there is only a single build for them.
18
+ if (
19
+ resolvedEntry.endsWith('react-dom/index.js') ||
20
+ resolvedEntry.endsWith('react-dom/client.js') ||
21
+ resolvedEntry.endsWith('react-dom/unstable_testing.js')
22
+ ) {
23
+ let specifier;
24
+ let entrypoint;
25
+ if (resolvedEntry.endsWith('index.js')) {
26
+ specifier = 'react-dom';
27
+ entrypoint = __EXPERIMENTAL__
28
+ ? 'src/ReactDOMFB.modern.js'
29
+ : 'src/ReactDOMFB.js';
30
+ } else if (resolvedEntry.endsWith('client.js')) {
31
+ specifier = 'react-dom/client';
32
+ entrypoint = __EXPERIMENTAL__
33
+ ? 'src/ReactDOMFB.modern.js'
34
+ : 'src/ReactDOMFB.js';
35
+ } else {
36
+ // must be unstable_testing
37
+ specifier = 'react-dom/unstable_testing';
38
+ entrypoint = __EXPERIMENTAL__
39
+ ? 'src/ReactDOMTestingFB.modern.js'
40
+ : 'src/ReactDOMTestingFB.js';
41
+ }
42
+
43
+ resolvedEntry = nodePath.join(resolvedEntry, '..', entrypoint);
44
+ if (fs.existsSync(resolvedEntry)) {
45
+ return resolvedEntry;
46
+ }
47
+ const fbReleaseChannel = __EXPERIMENTAL__ ? 'www-modern' : 'www-classic';
48
+ throw new Error(
49
+ `${fbReleaseChannel} tests are expected to alias ${specifier} to ${entrypoint} but this file was not found`
50
+ );
51
+ }
52
const resolvedFBEntry = resolvedEntry.replace(
53
'.js',
54
__EXPERIMENTAL__ ? '.modern.fb.js' : '.classic.fb.js'
scripts/rollup/bundles.js
+46
-25
@@ -151,14 +151,7 @@ const bundles = [
151
152
/******* React DOM *******/
153
{
154
- bundleTypes: [
155
- NODE_DEV,
156
- NODE_PROD,
157
- NODE_PROFILING,
158
- FB_WWW_DEV,
159
- FB_WWW_PROD,
160
- FB_WWW_PROFILING,
161
- ],
154
+ bundleTypes: [NODE_DEV, NODE_PROD],
155
moduleType: RENDERER,
156
entry: 'react-dom',
157
global: 'ReactDOM',
@@ -166,12 +159,43 @@ const bundles = [
159
wrapWithModuleBoundaries: true,
160
externals: ['react'],
161
},
162
+ /******* React DOM Client *******/
163
+ {
164
+ bundleTypes: [NODE_DEV, NODE_PROD],
165
+ moduleType: RENDERER,
166
+ entry: 'react-dom/client',
167
+ global: 'ReactDOM',
168
+ minifyWithProdErrorCodes: true,
169
+ wrapWithModuleBoundaries: true,
170
+ externals: ['react', 'react-dom'],
171
+ },
172
+
173
+ /******* React DOM Profiling (Client) *******/
174
+ {
175
+ bundleTypes: [NODE_DEV, NODE_PROFILING],
176
+ moduleType: RENDERER,
177
+ entry: 'react-dom/profiling',
178
+ global: 'ReactDOM',
179
+ minifyWithProdErrorCodes: true,
180
+ wrapWithModuleBoundaries: true,
181
+ externals: ['react', 'react-dom'],
182
+ },
183
+ /******* React DOM FB *******/
184
+ {
185
+ bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING],
186
+ moduleType: RENDERER,
187
+ entry: 'react-dom/src/ReactDOMFB.js',
188
+ global: 'ReactDOM',
189
+ minifyWithProdErrorCodes: true,
190
+ wrapWithModuleBoundaries: true,
191
+ externals: ['react'],
192
+ },
193
194
/******* React DOM React Server *******/
195
{
196
bundleTypes: [NODE_DEV, NODE_PROD],
197
moduleType: RENDERER,
174
- entry: 'react-dom/src/ReactDOMServer.js',
198
+ entry: 'react-dom/src/ReactDOMReactServer.js',
199
name: 'react-dom.react-server',
200
condition: 'react-server',
201
global: 'ReactDOM',
@@ -191,16 +215,25 @@ const bundles = [
215
externals: ['react', 'react-dom'],
216
},
217
194
- /******* React DOM - www - Testing *******/
218
+ /******* React DOM - Testing *******/
219
{
220
moduleType: RENDERER,
197
- bundleTypes: __EXPERIMENTAL__
198
- ? [FB_WWW_DEV, FB_WWW_PROD, NODE_DEV, NODE_PROD]
199
- : [FB_WWW_DEV, FB_WWW_PROD],
221
+ bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
222
entry: 'react-dom/unstable_testing',
223
global: 'ReactDOMTesting',
224
minifyWithProdErrorCodes: true,
225
wrapWithModuleBoundaries: false,
226
+ externals: ['react', 'react-dom'],
227
+ },
228
+
229
+ /******* React DOM - www - Testing *******/
230
+ {
231
+ moduleType: RENDERER,
232
+ bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
233
+ entry: 'react-dom/src/ReactDOMTestingFB.js',
234
+ global: 'ReactDOMTesting',
235
+ minifyWithProdErrorCodes: true,
236
+ wrapWithModuleBoundaries: false,
237
externals: ['react'],
238
},
239
@@ -306,18 +339,6 @@ const bundles = [
339
externals: [],
340
},
341
309
- /******* React DOM Server Render Stub *******/
310
- {
311
- bundleTypes: [NODE_DEV, NODE_PROD],
312
- moduleType: RENDERER,
313
- entry: 'react-dom/server-rendering-stub',
314
- name: 'react-dom-server-rendering-stub',
315
- global: 'ReactDOMServerRenderingStub',
316
- minifyWithProdErrorCodes: true,
317
- wrapWithModuleBoundaries: false,
318
- externals: ['react'],
319
- },
320
-
342
/******* React Server DOM Webpack Server *******/
343
{
344
bundleTypes: [NODE_DEV, NODE_PROD],
scripts/rollup/forks.js
+3
-3
@@ -91,9 +91,9 @@ const forks = Object.freeze({
91
) => {
92
if (
93
entry === 'react-dom' ||
94
- entry === 'react-dom/server-rendering-stub' ||
95
- entry === 'react-dom/src/ReactDOMServer.js' ||
96
- entry === 'react-dom/unstable_testing'
94
+ entry === 'react-dom/src/ReactDOMFB.js' ||
95
+ entry === 'react-dom/src/ReactDOMTestingFB.js' ||
96
+ entry === 'react-dom/src/ReactDOMServer.js'
97
) {
98
if (
99
bundleType === FB_WWW_DEV ||
scripts/rollup/modules.js
-1
@@ -29,7 +29,6 @@ const knownGlobals = Object.freeze({
29
react: 'React',
30
'react-dom': 'ReactDOM',
31
'react-dom/server': 'ReactDOMServer',
32
- 'react-interactions/events/tap': 'ReactEventsTap',
32
scheduler: 'Scheduler',
33
'scheduler/unstable_mock': 'SchedulerMock',
34
ReactNativeInternalFeatureFlags: 'ReactNativeInternalFeatureFlags',
scripts/shared/inlinedHostConfigs.js
+39
-20
@@ -11,21 +11,23 @@ module.exports = [
11
shortName: 'dom-node',
12
entryPoints: [
13
'react-dom',
14
- 'react-dom/src/ReactDOMServer.js',
14
+ 'react-dom/client',
15
+ 'react-dom/profiling',
16
'react-dom/unstable_testing',
17
+ 'react-dom/src/ReactDOMReactServer.js',
18
'react-dom/src/server/react-dom-server.node.js',
19
'react-dom/static.node',
20
'react-dom/test-utils',
19
- 'react-dom/server-rendering-stub',
21
'react-dom/unstable_server-external-runtime',
22
'react-server-dom-webpack/server.node.unbundled',
23
'react-server-dom-webpack/client.node.unbundled',
24
],
25
paths: [
26
'react-dom',
26
- 'react-dom/src/ReactDOMServer.js',
27
+ 'react-dom/src/ReactDOMReactServer.js',
28
'react-dom-bindings',
29
'react-dom/client',
30
+ 'react-dom/profiling',
31
'react-dom/server',
32
'react-dom/server.node',
33
'react-dom/static',
@@ -45,7 +47,6 @@ module.exports = [
47
'react-devtools-core',
48
'react-devtools-shell',
49
'react-devtools-shared',
48
- 'react-interactions',
50
'shared/ReactDOMSharedInternals',
51
'react-server/src/ReactFlightServerConfigDebugNode.js',
52
],
@@ -62,6 +63,7 @@ module.exports = [
63
'react-dom',
64
'react-dom-bindings',
65
'react-dom/client',
66
+ 'react-dom/profiling',
67
'react-dom/server',
68
'react-dom/server.node',
69
'react-dom/static',
@@ -82,7 +84,6 @@ module.exports = [
84
'react-devtools-core',
85
'react-devtools-shell',
86
'react-devtools-shared',
85
- 'react-interactions',
87
'shared/ReactDOMSharedInternals',
88
'react-server/src/ReactFlightServerConfigDebugNode.js',
89
],
@@ -99,6 +100,7 @@ module.exports = [
100
'react-dom',
101
'react-dom-bindings',
102
'react-dom/client',
103
+ 'react-dom/profiling',
104
'react-dom/server',
105
'react-dom/server.node',
106
'react-dom/static',
@@ -119,7 +121,6 @@ module.exports = [
121
'react-devtools-core',
122
'react-devtools-shell',
123
'react-devtools-shared',
122
- 'react-interactions',
124
'shared/ReactDOMSharedInternals',
125
'react-server/src/ReactFlightServerConfigDebugNode.js',
126
],
@@ -136,6 +137,7 @@ module.exports = [
137
'react-dom',
138
'react-dom-bindings',
139
'react-dom/client',
140
+ 'react-dom/profiling',
141
'react-dom/server',
142
'react-dom/server.node',
143
'react-dom/static',
@@ -157,7 +159,6 @@ module.exports = [
159
'react-devtools-core',
160
'react-devtools-shell',
161
'react-devtools-shared',
160
- 'react-interactions',
162
'shared/ReactDOMSharedInternals',
163
'react-server/src/ReactFlightServerConfigDebugNode.js',
164
],
@@ -166,9 +167,17 @@ module.exports = [
167
},
168
{
169
shortName: 'dom-bun',
169
- entryPoints: ['react-dom', 'react-dom/src/server/react-dom-server.bun.js'],
170
+ entryPoints: [
171
+ 'react-dom',
172
+ 'react-dom/client',
173
+ 'react-dom/profiling',
174
+ 'react-dom/unstable_testing',
175
+ 'react-dom/src/server/react-dom-server.bun.js',
176
+ ],
177
paths: [
178
'react-dom',
179
+ 'react-dom/client',
180
+ 'react-dom/profiling',
181
'react-dom/server.bun',
182
'react-dom/src/server/react-dom-server.bun',
183
'react-dom/src/server/ReactDOMFizzServerBun.js',
@@ -182,19 +191,21 @@ module.exports = [
191
shortName: 'dom-browser',
192
entryPoints: [
193
'react-dom',
194
+ 'react-dom/client',
195
+ 'react-dom/profiling',
196
'react-dom/unstable_testing',
197
'react-dom/src/server/react-dom-server.browser.js',
198
'react-dom/static.browser',
188
- 'react-dom/server-rendering-stub',
199
'react-dom/unstable_server-external-runtime',
200
'react-server-dom-webpack/server.browser',
201
'react-server-dom-webpack/client.browser',
202
],
203
paths: [
204
'react-dom',
195
- 'react-dom/src/ReactDOMServer.js',
205
+ 'react-dom/src/ReactDOMReactServer.js',
206
'react-dom-bindings',
207
'react-dom/client',
208
+ 'react-dom/profiling',
209
'react-dom/server.browser',
210
'react-dom/static.browser',
211
'react-dom/unstable_testing',
@@ -223,8 +234,9 @@ module.exports = [
234
entryPoints: ['react-server-dom-esm/client.browser'],
235
paths: [
236
'react-dom',
226
- 'react-dom/src/ReactDOMServer.js',
237
+ 'react-dom/src/ReactDOMReactServer.js',
238
'react-dom/client',
239
+ 'react-dom/profiling',
240
'react-dom/server',
241
'react-dom/server.node',
242
'react-dom-bindings',
@@ -236,7 +248,6 @@ module.exports = [
248
'react-devtools-core',
249
'react-devtools-shell',
250
'react-devtools-shared',
239
- 'react-interactions',
251
'shared/ReactDOMSharedInternals',
252
],
253
isFlowTyped: true,
@@ -251,6 +262,7 @@ module.exports = [
262
paths: [
263
'react-dom',
264
'react-dom/client',
265
+ 'react-dom/profiling',
266
'react-dom/server',
267
'react-dom/server.node',
268
'react-dom-bindings',
@@ -266,7 +278,6 @@ module.exports = [
278
'react-devtools-core',
279
'react-devtools-shell',
280
'react-devtools-shared',
269
- 'react-interactions',
281
'shared/ReactDOMSharedInternals',
282
],
283
isFlowTyped: true,
@@ -282,9 +293,10 @@ module.exports = [
293
],
294
paths: [
295
'react-dom',
285
- 'react-dom/src/ReactDOMServer.js',
296
+ 'react-dom/src/ReactDOMReactServer.js',
297
'react-dom-bindings',
298
'react-dom/client',
299
+ 'react-dom/profiling',
300
'react-dom/server.edge',
301
'react-dom/static.edge',
302
'react-dom/unstable_testing',
@@ -316,9 +328,10 @@ module.exports = [
328
],
329
paths: [
330
'react-dom',
319
- 'react-dom/src/ReactDOMServer.js',
331
+ 'react-dom/src/ReactDOMReactServer.js',
332
'react-dom-bindings',
333
'react-dom/client',
334
+ 'react-dom/profiling',
335
'react-dom/server.edge',
336
'react-dom/static.edge',
337
'react-dom/unstable_testing',
@@ -350,9 +363,10 @@ module.exports = [
363
],
364
paths: [
365
'react-dom',
353
- 'react-dom/src/ReactDOMServer.js',
366
+ 'react-dom/src/ReactDOMReactServer.js',
367
'react-dom-bindings',
368
'react-dom/client',
369
+ 'react-dom/profiling',
370
'react-dom/server',
371
'react-dom/server.node',
372
'react-dom/static',
@@ -370,7 +384,6 @@ module.exports = [
384
'react-devtools-core',
385
'react-devtools-shell',
386
'react-devtools-shared',
373
- 'react-interactions',
387
'shared/ReactDOMSharedInternals',
388
'react-server/src/ReactFlightServerConfigDebugNode.js',
389
],
@@ -385,7 +398,7 @@ module.exports = [
398
],
399
paths: [
400
'react-dom',
388
- 'react-dom/src/ReactDOMServer.js',
401
+ 'react-dom/src/ReactDOMReactServer.js',
402
'react-dom-bindings',
403
'react-server-dom-webpack',
404
'react-dom/src/server/ReactDOMLegacyServerImpl.js', // not an entrypoint, but only usable in *Browser and *Node files
@@ -400,10 +413,16 @@ module.exports = [
413
},
414
{
415
shortName: 'dom-fb',
403
- entryPoints: ['react-server-dom-fb/src/ReactDOMServerFB.js'],
416
+ entryPoints: [
417
+ 'react-dom/src/ReactDOMFB.js',
418
+ 'react-dom/src/ReactDOMTestingFB.js',
419
+ 'react-server-dom-fb/src/ReactDOMServerFB.js',
420
+ ],
421
paths: [
422
'react-dom',
406
- 'react-dom/src/ReactDOMServer.js',
423
+ 'react-dom/src/ReactDOMFB.js',
424
+ 'react-dom/src/ReactDOMTestingFB.js',
425
+ 'react-dom/src/ReactDOMReactServer.js',
426
'react-dom-bindings',
427
'react-server-dom-fb',
428
'shared/ReactDOMSharedInternals',
scripts/shared/pathsByLanguageVersion.js
-2
@@ -16,8 +16,6 @@ const esNextPaths = [
16
// Source files
17
'packages/*/src/**/*.js',
18
'packages/dom-event-testing-library/**/*.js',
19
- 'packages/react-interactions/**/*.js',
20
- 'packages/react-interactions/**/*.js',
19
'packages/shared/**/*.js',
20
// Shims and Flow environment
21
'scripts/flow/*.js',