@samitouri / QOS-React-1 / commits / ce2bc58a9f

[activity] rename unstable_Offscreen to unstable_Activity (#27640)

`Activity` is the current candidate name. This PR starts the rename work by renaming the exported unstable component name. NOTE: downstream consumers need to rename the import when updating to this commit.

Jan Kassens committed Nov 2, 2023 at 16:13 UTC ce2bc58a9f6f3b0bfc8c738a0d8e2a5f3a332ff5
24 files changed +283 -285
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+13 -13
@@ -10,15 +10,15 @@
10
11 'use strict';
12
13 +let Activity;
14 let React = require('react');
15 let ReactDOM;
16 let ReactDOMClient;
17 let ReactDOMServer;
17 -let Scheduler;
18 let ReactFeatureFlags;
19 +let Scheduler;
20 let Suspense;
21 let SuspenseList;
21 -let Offscreen;
22 let useSyncExternalStore;
23 let act;
24 let IdleEventPriority;
@@ -112,8 +112,8 @@ describe('ReactDOMServerPartialHydration', () => {
112 act = require('internal-test-utils').act;
113 ReactDOMServer = require('react-dom/server');
114 Scheduler = require('scheduler');
115 + Activity = React.unstable_Activity;
116 Suspense = React.Suspense;
116 - Offscreen = React.unstable_Offscreen;
117 useSyncExternalStore = React.useSyncExternalStore;
118 if (gate(flags => flags.enableSuspenseList)) {
119 SuspenseList = React.unstable_SuspenseList;
@@ -778,7 +778,7 @@ describe('ReactDOMServerPartialHydration', () => {
778 expect(span).not.toBe(span2);
779
780 if (gate(flags => flags.dfsEffectsRefactor)) {
781 - // The effects list refactor causes this to be null because the Suspense Offscreen's child
781 + // The effects list refactor causes this to be null because the Suspense Activity's child
782 // is null. However, since we can't hydrate Suspense in legacy this change in behavior is ok
783 expect(ref.current).toBe(null);
784 } else {
@@ -3151,15 +3151,15 @@ describe('ReactDOMServerPartialHydration', () => {
3151 expect(ref.current.innerHTML).toBe('Hidden child');
3152 });
3153
3154 - // @gate enableOffscreen
3155 - it('a visible Offscreen component acts like a fragment', async () => {
3154 + // @gate enableActivity
3155 + it('a visible Activity component acts like a fragment', async () => {
3156 const ref = React.createRef();
3157
3158 function App() {
3159 return (
3160 - <Offscreen mode="visible">
3160 + <Activity mode="visible">
3161 <span ref={ref}>Child</span>
3162 - </Offscreen>
3162 + </Activity>
3163 );
3164 }
3165
@@ -3169,7 +3169,7 @@ describe('ReactDOMServerPartialHydration', () => {
3169 const container = document.createElement('div');
3170 container.innerHTML = finalHTML;
3171
3172 - // Visible Offscreen boundaries behave exactly like fragments: a
3172 + // Visible Activity boundaries behave exactly like fragments: a
3173 // pure indirection.
3174 expect(container).toMatchInlineSnapshot(`
3175 <div>
@@ -3187,8 +3187,8 @@ describe('ReactDOMServerPartialHydration', () => {
3187 expect(ref.current).toBe(span);
3188 });
3189
3190 - // @gate enableOffscreen
3191 - it('a hidden Offscreen component is skipped over during server rendering', async () => {
3190 + // @gate enableActivity
3191 + it('a hidden Activity component is skipped over during server rendering', async () => {
3192 const visibleRef = React.createRef();
3193
3194 function HiddenChild() {
@@ -3201,9 +3201,9 @@ describe('ReactDOMServerPartialHydration', () => {
3201 return (
3202 <>
3203 <span ref={visibleRef}>Visible</span>
3204 - <Offscreen mode="hidden">
3204 + <Activity mode="hidden">
3205 <HiddenChild />
3206 - </Offscreen>
3206 + </Activity>
3207 </>
3208 );
3209 }
packages/react-reconciler/src/ReactFiber.js
+2 -2
@@ -18,7 +18,7 @@ import type {SuspenseInstance} from './ReactFiberConfig';
18 import type {
19 OffscreenProps,
20 OffscreenInstance,
21 -} from './ReactFiberOffscreenComponent';
21 +} from './ReactFiberActivityComponent';
22 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
23
24 import {
@@ -71,7 +71,7 @@ import {
71 CacheComponent,
72 TracingMarkerComponent,
73 } from './ReactWorkTags';
74 -import {OffscreenVisible} from './ReactFiberOffscreenComponent';
74 +import {OffscreenVisible} from './ReactFiberActivityComponent';
75 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
76 import {isDevToolsPresent} from './ReactFiberDevToolsHook';
77 import {
packages/react-reconciler/src/ReactFiberActivityComponent.js renamed
packages/react-reconciler/src/ReactFiberBeginWork.js
+2 -2
@@ -27,8 +27,8 @@ import type {
27 OffscreenState,
28 OffscreenQueue,
29 OffscreenInstance,
30 -} from './ReactFiberOffscreenComponent';
31 -import {OffscreenDetached} from './ReactFiberOffscreenComponent';
30 +} from './ReactFiberActivityComponent';
31 +import {OffscreenDetached} from './ReactFiberActivityComponent';
32 import type {
33 Cache,
34 CacheComponentState,
packages/react-reconciler/src/ReactFiberCommitWork.js
+3 -3
@@ -23,13 +23,13 @@ import type {SuspenseState, RetryQueue} from './ReactFiberSuspenseComponent';
23 import type {UpdateQueue} from './ReactFiberClassUpdateQueue';
24 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks';
25 import type {Wakeable} from 'shared/ReactTypes';
26 -import {isOffscreenManual} from './ReactFiberOffscreenComponent';
26 +import {isOffscreenManual} from './ReactFiberActivityComponent';
27 import type {
28 OffscreenState,
29 OffscreenInstance,
30 OffscreenQueue,
31 OffscreenProps,
32 -} from './ReactFiberOffscreenComponent';
32 +} from './ReactFiberActivityComponent';
33 import type {HookFlags} from './ReactHookEffectTags';
34 import type {Cache} from './ReactFiberCacheComponent';
35 import type {RootState} from './ReactFiberRoot';
@@ -209,7 +209,7 @@ import {
209 OffscreenVisible,
210 OffscreenDetached,
211 OffscreenPassiveEffectsConnected,
212 -} from './ReactFiberOffscreenComponent';
212 +} from './ReactFiberActivityComponent';
213 import {
214 TransitionRoot,
215 TransitionTracingMarker,
packages/react-reconciler/src/ReactFiberCompleteWork.js
+5 -3
@@ -24,9 +24,11 @@ import type {
24 SuspenseListRenderState,
25 RetryQueue,
26 } from './ReactFiberSuspenseComponent';
27 -import type {OffscreenQueue} from './ReactFiberOffscreenComponent';
28 -import {isOffscreenManual} from './ReactFiberOffscreenComponent';
29 -import type {OffscreenState} from './ReactFiberOffscreenComponent';
27 +import type {
28 + OffscreenState,
29 + OffscreenQueue,
30 +} from './ReactFiberActivityComponent';
31 +import {isOffscreenManual} from './ReactFiberActivityComponent';
32 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent';
33 import type {Cache} from './ReactFiberCacheComponent';
34 import {
packages/react-reconciler/src/ReactFiberConcurrentUpdates.js
+2 -2
@@ -17,7 +17,7 @@ import type {
17 Update as ClassUpdate,
18 } from './ReactFiberClassUpdateQueue';
19 import type {Lane, Lanes} from './ReactFiberLane';
20 -import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
20 +import type {OffscreenInstance} from './ReactFiberActivityComponent';
21
22 import {
23 warnAboutUpdateOnNotYetMountedFiberInDEV,
@@ -27,7 +27,7 @@ import {
27 import {NoLane, NoLanes, mergeLanes, markHiddenUpdate} from './ReactFiberLane';
28 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
29 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
30 -import {OffscreenVisible} from './ReactFiberOffscreenComponent';
30 +import {OffscreenVisible} from './ReactFiberActivityComponent';
31
32 export type ConcurrentUpdate = {
33 next: ConcurrentUpdate,
packages/react-reconciler/src/ReactFiberSuspenseContext.js
+1 -1
@@ -10,7 +10,7 @@
10 import type {Fiber} from './ReactInternalTypes';
11 import type {StackCursor} from './ReactFiberStack';
12 import type {SuspenseProps, SuspenseState} from './ReactFiberSuspenseComponent';
13 -import type {OffscreenState} from './ReactFiberOffscreenComponent';
13 +import type {OffscreenState} from './ReactFiberActivityComponent';
14
15 import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
16 import {createCursor, push, pop} from './ReactFiberStack';
packages/react-reconciler/src/ReactFiberThrow.js
+1 -1
@@ -12,7 +12,7 @@ import type {Lane, Lanes} from './ReactFiberLane';
12 import type {CapturedValue} from './ReactCapturedValue';
13 import type {Update} from './ReactFiberClassUpdateQueue';
14 import type {Wakeable} from 'shared/ReactTypes';
15 -import type {OffscreenQueue} from './ReactFiberOffscreenComponent';
15 +import type {OffscreenQueue} from './ReactFiberActivityComponent';
16 import type {RetryQueue} from './ReactFiberSuspenseComponent';
17
18 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.js
+1 -1
@@ -12,7 +12,7 @@ import type {
12 Fiber,
13 FiberRoot,
14 } from './ReactInternalTypes';
15 -import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
15 +import type {OffscreenInstance} from './ReactFiberActivityComponent';
16 import type {StackCursor} from './ReactFiberStack';
17
18 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
packages/react-reconciler/src/ReactFiberWorkLoop.js
+1 -1
@@ -21,7 +21,7 @@ import type {
21 Transition,
22 TransitionAbort,
23 } from './ReactFiberTracingMarkerComponent';
24 -import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
24 +import type {OffscreenInstance} from './ReactFiberActivityComponent';
25 import type {RenderTaskFn} from './ReactFiberRootScheduler';
26
27 import {
packages/react-reconciler/src/__tests__/Activity-test.js renamed
+175 -175
@@ -3,7 +3,7 @@ let ReactNoop;
3 let Scheduler;
4 let act;
5 let LegacyHidden;
6 -let Offscreen;
6 +let Activity;
7 let useState;
8 let useLayoutEffect;
9 let useEffect;
@@ -14,7 +14,7 @@ let waitForPaint;
14 let waitFor;
15 let assertLog;
16
17 -describe('ReactOffscreen', () => {
17 +describe('Activity', () => {
18 beforeEach(() => {
19 jest.resetModules();
20
@@ -23,7 +23,7 @@ describe('ReactOffscreen', () => {
23 Scheduler = require('scheduler');
24 act = require('internal-test-utils').act;
25 LegacyHidden = React.unstable_LegacyHidden;
26 - Offscreen = React.unstable_Offscreen;
26 + Activity = React.unstable_Activity;
27 useState = React.useState;
28 useLayoutEffect = React.useLayoutEffect;
29 useEffect = React.useEffect;
@@ -209,7 +209,7 @@ describe('ReactOffscreen', () => {
209 );
210 });
211
212 - // @gate enableOffscreen
212 + // @gate enableActivity
213 it('mounts without layout effects when hidden', async () => {
214 function Child({text}) {
215 useLayoutEffect(() => {
@@ -226,9 +226,9 @@ describe('ReactOffscreen', () => {
226 // Mount hidden tree.
227 await act(() => {
228 root.render(
229 - <Offscreen mode="hidden">
229 + <Activity mode="hidden">
230 <Child />
231 - </Offscreen>,
231 + </Activity>,
232 );
233 });
234 // No layout effect.
@@ -238,16 +238,16 @@ describe('ReactOffscreen', () => {
238 // Unhide the tree. The layout effect is mounted.
239 await act(() => {
240 root.render(
241 - <Offscreen mode="visible">
241 + <Activity mode="visible">
242 <Child />
243 - </Offscreen>,
243 + </Activity>,
244 );
245 });
246 assertLog(['Child', 'Mount layout']);
247 expect(root).toMatchRenderedOutput(<span prop="Child" />);
248 });
249
250 - // @gate enableOffscreen
250 + // @gate enableActivity
251 it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
252 function Child({text}) {
253 useLayoutEffect(() => {
@@ -262,9 +262,9 @@ describe('ReactOffscreen', () => {
262 const root = ReactNoop.createRoot();
263 await act(() => {
264 root.render(
265 - <Offscreen mode="visible">
265 + <Activity mode="visible">
266 <Child />
267 - </Offscreen>,
267 + </Activity>,
268 );
269 });
270 assertLog(['Child', 'Mount layout']);
@@ -273,9 +273,9 @@ describe('ReactOffscreen', () => {
273 // Hide the tree. The layout effect is unmounted.
274 await act(() => {
275 root.render(
276 - <Offscreen mode="hidden">
276 + <Activity mode="hidden">
277 <Child />
278 - </Offscreen>,
278 + </Activity>,
279 );
280 });
281 assertLog(['Unmount layout', 'Child']);
@@ -284,18 +284,18 @@ describe('ReactOffscreen', () => {
284 // Unhide the tree. The layout effect is re-mounted.
285 await act(() => {
286 root.render(
287 - <Offscreen mode="visible">
287 + <Activity mode="visible">
288 <Child />
289 - </Offscreen>,
289 + </Activity>,
290 );
291 });
292 assertLog(['Child', 'Mount layout']);
293 expect(root).toMatchRenderedOutput(<span prop="Child" />);
294 });
295
296 - // @gate enableOffscreen
296 + // @gate enableActivity
297 it('nested offscreen does not call componentWillUnmount when hidden', async () => {
298 - // This is a bug that appeared during production test of <unstable_Offscreen />.
298 + // This is a bug that appeared during production test of <unstable_Activity />.
299 // It is a very specific scenario with nested Offscreens. The inner offscreen
300 // goes from visible to hidden in synchronous update.
301 class ClassComponent extends React.Component {
@@ -316,11 +316,11 @@ describe('ReactOffscreen', () => {
316 await act(() => {
317 // Outer and inner offscreen are hidden.
318 root.render(
319 - <Offscreen mode={'hidden'}>
320 - <Offscreen mode={'hidden'}>
319 + <Activity mode={'hidden'}>
320 + <Activity mode={'hidden'}>
321 <ClassComponent />
322 - </Offscreen>
323 - </Offscreen>,
322 + </Activity>
323 + </Activity>,
324 );
325 });
326
@@ -330,11 +330,11 @@ describe('ReactOffscreen', () => {
330 await act(() => {
331 // Inner offscreen is visible.
332 root.render(
333 - <Offscreen mode={'hidden'}>
334 - <Offscreen mode={'visible'}>
333 + <Activity mode={'hidden'}>
334 + <Activity mode={'visible'}>
335 <ClassComponent />
336 - </Offscreen>
337 - </Offscreen>,
336 + </Activity>
337 + </Activity>,
338 );
339 });
340
@@ -344,11 +344,11 @@ describe('ReactOffscreen', () => {
344 await act(() => {
345 // Inner offscreen is hidden.
346 root.render(
347 - <Offscreen mode={'hidden'}>
348 - <Offscreen mode={'hidden'}>
347 + <Activity mode={'hidden'}>
348 + <Activity mode={'hidden'}>
349 <ClassComponent />
350 - </Offscreen>
351 - </Offscreen>,
350 + </Activity>
351 + </Activity>,
352 );
353 });
354
@@ -358,11 +358,11 @@ describe('ReactOffscreen', () => {
358 await act(() => {
359 // Inner offscreen is visible.
360 root.render(
361 - <Offscreen mode={'hidden'}>
362 - <Offscreen mode={'visible'}>
361 + <Activity mode={'hidden'}>
362 + <Activity mode={'visible'}>
363 <ClassComponent />
364 - </Offscreen>
365 - </Offscreen>,
364 + </Activity>
365 + </Activity>,
366 );
367 });
368
@@ -372,11 +372,11 @@ describe('ReactOffscreen', () => {
372 // Outer offscreen is visible.
373 // Inner offscreen is hidden.
374 root.render(
375 - <Offscreen mode={'visible'}>
376 - <Offscreen mode={'hidden'}>
375 + <Activity mode={'visible'}>
376 + <Activity mode={'hidden'}>
377 <ClassComponent />
378 - </Offscreen>
379 - </Offscreen>,
378 + </Activity>
379 + </Activity>,
380 );
381 });
382
@@ -386,18 +386,18 @@ describe('ReactOffscreen', () => {
386 // Outer offscreen is hidden.
387 // Inner offscreen is visible.
388 root.render(
389 - <Offscreen mode={'hidden'}>
390 - <Offscreen mode={'visible'}>
389 + <Activity mode={'hidden'}>
390 + <Activity mode={'visible'}>
391 <ClassComponent />
392 - </Offscreen>
393 - </Offscreen>,
392 + </Activity>
393 + </Activity>,
394 );
395 });
396
397 assertLog(['child']);
398 });
399
400 - // @gate enableOffscreen
400 + // @gate enableActivity
401 it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
402 function Child({text}) {
403 useLayoutEffect(() => {
@@ -413,9 +413,9 @@ describe('ReactOffscreen', () => {
413 await act(() => {
414 // Start the tree hidden. The layout effect is not mounted.
415 root.render(
416 - <Offscreen mode="hidden">
416 + <Activity mode="hidden">
417 <Child />
418 - </Offscreen>,
418 + </Activity>,
419 );
420 });
421 assertLog(['Child']);
@@ -424,9 +424,9 @@ describe('ReactOffscreen', () => {
424 // Show the tree. The layout effect is mounted.
425 await act(() => {
426 root.render(
427 - <Offscreen mode="visible">
427 + <Activity mode="visible">
428 <Child />
429 - </Offscreen>,
429 + </Activity>,
430 );
431 });
432 assertLog(['Child', 'Mount layout']);
@@ -435,16 +435,16 @@ describe('ReactOffscreen', () => {
435 // Hide the tree again. The layout effect is un-mounted.
436 await act(() => {
437 root.render(
438 - <Offscreen mode="hidden">
438 + <Activity mode="hidden">
439 <Child />
440 - </Offscreen>,
440 + </Activity>,
441 );
442 });
443 assertLog(['Unmount layout', 'Child']);
444 expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
445 });
446
447 - // @gate enableOffscreen
447 + // @gate enableActivity
448 it('hides children of offscreen after layout effects are destroyed', async () => {
449 const root = ReactNoop.createRoot();
450 function Child({text}) {
@@ -461,9 +461,9 @@ describe('ReactOffscreen', () => {
461
462 await act(() => {
463 root.render(
464 - <Offscreen mode="visible">
464 + <Activity mode="visible">
465 <Child />
466 - </Offscreen>,
466 + </Activity>,
467 );
468 });
469 assertLog(['Child', 'Mount layout']);
@@ -472,9 +472,9 @@ describe('ReactOffscreen', () => {
472 // Hide the tree. The layout effect is unmounted.
473 await act(() => {
474 root.render(
475 - <Offscreen mode="hidden">
475 + <Activity mode="hidden">
476 <Child />
477 - </Offscreen>,
477 + </Activity>,
478 );
479 });
480 assertLog(['Unmount layout', 'Child']);
@@ -531,14 +531,14 @@ describe('ReactOffscreen', () => {
531 assertLog(['Unmount layout']);
532 });
533
534 - // @gate enableOffscreen
534 + // @gate enableActivity
535 it('hides new insertions into an already hidden tree', async () => {
536 const root = ReactNoop.createRoot();
537 await act(() => {
538 root.render(
539 - <Offscreen mode="hidden">
539 + <Activity mode="hidden">
540 <span>Hi</span>
541 - </Offscreen>,
541 + </Activity>,
542 );
543 });
544 expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
@@ -546,10 +546,10 @@ describe('ReactOffscreen', () => {
546 // Insert a new node into the hidden tree
547 await act(() => {
548 root.render(
549 - <Offscreen mode="hidden">
549 + <Activity mode="hidden">
550 <span>Hi</span>
551 <span>Something new</span>
552 - </Offscreen>,
552 + </Activity>,
553 );
554 });
555 expect(root).toMatchRenderedOutput(
@@ -561,14 +561,14 @@ describe('ReactOffscreen', () => {
561 );
562 });
563
564 - // @gate enableOffscreen
564 + // @gate enableActivity
565 it('hides updated nodes inside an already hidden tree', async () => {
566 const root = ReactNoop.createRoot();
567 await act(() => {
568 root.render(
569 - <Offscreen mode="hidden">
569 + <Activity mode="hidden">
570 <span>Hi</span>
571 - </Offscreen>,
571 + </Activity>,
572 );
573 });
574 expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
@@ -576,20 +576,20 @@ describe('ReactOffscreen', () => {
576 // Set the `hidden` prop to on an already hidden node
577 await act(() => {
578 root.render(
579 - <Offscreen mode="hidden">
579 + <Activity mode="hidden">
580 <span hidden={false}>Hi</span>
581 - </Offscreen>,
581 + </Activity>,
582 );
583 });
584 - // It should still be hidden, because the Offscreen container overrides it
584 + // It should still be hidden, because the Activity container overrides it
585 expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
586
587 // Unhide the boundary
588 await act(() => {
589 root.render(
590 - <Offscreen mode="visible">
590 + <Activity mode="visible">
591 <span hidden={true}>Hi</span>
592 - </Offscreen>,
592 + </Activity>,
593 );
594 });
595 // It should still be hidden, because of the prop
@@ -598,16 +598,16 @@ describe('ReactOffscreen', () => {
598 // Remove the `hidden` prop
599 await act(() => {
600 root.render(
601 - <Offscreen mode="visible">
601 + <Activity mode="visible">
602 <span>Hi</span>
603 - </Offscreen>,
603 + </Activity>,
604 );
605 });
606 // Now it's visible
607 expect(root).toMatchRenderedOutput(<span>Hi</span>);
608 });
609
610 - // @gate enableOffscreen
610 + // @gate enableActivity
611 it('revealing a hidden tree at high priority does not cause tearing', async () => {
612 // When revealing an offscreen tree, we need to include updates that were
613 // previously deferred because the tree was hidden, even if they are lower
@@ -661,9 +661,9 @@ describe('ReactOffscreen', () => {
661 return (
662 <>
663 <Text text={'Outer: ' + outer} />
664 - <Offscreen mode={show ? 'visible' : 'hidden'}>
664 + <Activity mode={show ? 'visible' : 'hidden'}>
665 <Child />
666 - </Offscreen>
666 + </Activity>
667 </>
668 );
669 }
@@ -741,8 +741,8 @@ describe('ReactOffscreen', () => {
741 expect(areOuterAndInnerConsistent()).toBe(true);
742 });
743
744 - // @gate enableOffscreen
745 - it('regression: Offscreen instance is sometimes null during setState', async () => {
744 + // @gate enableActivity
745 + it('regression: Activity instance is sometimes null during setState', async () => {
746 let setState;
747 function Child() {
748 const [state, _setState] = useState('Initial');
@@ -752,7 +752,7 @@ describe('ReactOffscreen', () => {
752
753 const root = ReactNoop.createRoot();
754 await act(() => {
755 - root.render(<Offscreen hidden={false} />);
755 + root.render(<Activity hidden={false} />);
756 });
757 assertLog([]);
758 expect(root).toMatchRenderedOutput(null);
@@ -761,10 +761,10 @@ describe('ReactOffscreen', () => {
761 // Partially render a component
762 startTransition(() => {
763 root.render(
764 - <Offscreen hidden={false}>
764 + <Activity hidden={false}>
765 <Child />
766 <Text text="Sibling" />
767 - </Offscreen>,
767 + </Activity>,
768 );
769 });
770 await waitFor(['Initial']);
@@ -776,7 +776,7 @@ describe('ReactOffscreen', () => {
776
777 // Something attempts to update the never-mounted component. When this
778 // regression test was written, we would walk up the component's return
779 - // path and reach an unmounted Offscreen component fiber. Its `stateNode`
779 + // path and reach an unmounted Activity component fiber. Its `stateNode`
780 // would be null because it was nulled out when it was deleted, but there
781 // was no null check before we accessed it. A weird edge case but we must
782 // account for it.
@@ -789,7 +789,7 @@ describe('ReactOffscreen', () => {
789 expect(root).toMatchRenderedOutput(null);
790 });
791
792 - // @gate enableOffscreen
792 + // @gate enableActivity
793 it('class component setState callbacks do not fire until tree is visible', async () => {
794 const root = ReactNoop.createRoot();
795
@@ -805,9 +805,9 @@ describe('ReactOffscreen', () => {
805 // Initial render
806 await act(() => {
807 root.render(
808 - <Offscreen mode="hidden">
808 + <Activity mode="hidden">
809 <Child />
810 - </Offscreen>,
810 + </Activity>,
811 );
812 });
813 assertLog(['A']);
@@ -829,9 +829,9 @@ describe('ReactOffscreen', () => {
829 // revealed, both the B callback and C callback should fire, in that order.
830 await act(() => {
831 root.render(
832 - <Offscreen mode="visible">
832 + <Activity mode="visible">
833 <Child />
834 - </Offscreen>,
834 + </Activity>,
835 );
836 child.setState({text: 'C'}, () => {
837 Scheduler.log('C update finished');
@@ -841,7 +841,7 @@ describe('ReactOffscreen', () => {
841 expect(root).toMatchRenderedOutput(<span prop="C" />);
842 });
843
844 - // @gate enableOffscreen
844 + // @gate enableActivity
845 it('does not call componentDidUpdate when reappearing a hidden class component', async () => {
846 class Child extends React.Component {
847 componentDidMount() {
@@ -862,9 +862,9 @@ describe('ReactOffscreen', () => {
862 const root = ReactNoop.createRoot();
863 await act(() => {
864 root.render(
865 - <Offscreen mode="visible">
865 + <Activity mode="visible">
866 <Child />
867 - </Offscreen>,
867 + </Activity>,
868 );
869 });
870 assertLog(['componentDidMount']);
@@ -872,9 +872,9 @@ describe('ReactOffscreen', () => {
872 // Hide the class component
873 await act(() => {
874 root.render(
875 - <Offscreen mode="hidden">
875 + <Activity mode="hidden">
876 <Child />
877 - </Offscreen>,
877 + </Activity>,
878 );
879 });
880 assertLog(['componentWillUnmount']);
@@ -883,15 +883,15 @@ describe('ReactOffscreen', () => {
883 // componentDidUpdate.
884 await act(() => {
885 root.render(
886 - <Offscreen mode="visible">
886 + <Activity mode="visible">
887 <Child />
888 - </Offscreen>,
888 + </Activity>,
889 );
890 });
891 assertLog(['componentDidMount']);
892 });
893
894 - // @gate enableOffscreen
894 + // @gate enableActivity
895 it(
896 'when reusing old components (hidden -> visible), layout effects fire ' +
897 'with same timing as if it were brand new',
@@ -910,9 +910,9 @@ describe('ReactOffscreen', () => {
910 const root = ReactNoop.createRoot();
911 await act(() => {
912 root.render(
913 - <Offscreen mode="visible">
913 + <Activity mode="visible">
914 <Child key="B" label="B" />
915 - </Offscreen>,
915 + </Activity>,
916 );
917 });
918 assertLog(['Mount B']);
@@ -920,9 +920,9 @@ describe('ReactOffscreen', () => {
920 // Hide the component
921 await act(() => {
922 root.render(
923 - <Offscreen mode="hidden">
923 + <Activity mode="hidden">
924 <Child key="B" label="B" />
925 - </Offscreen>,
925 + </Activity>,
926 );
927 });
928 assertLog(['Unmount B']);
@@ -930,11 +930,11 @@ describe('ReactOffscreen', () => {
930 // Reappear the component and also add some new siblings.
931 await act(() => {
932 root.render(
933 - <Offscreen mode="visible">
933 + <Activity mode="visible">
934 <Child key="A" label="A" />
935 <Child key="B" label="B" />
936 <Child key="C" label="C" />
937 - </Offscreen>,
937 + </Activity>,
938 );
939 });
940 // B's effect should fire in between A and C even though it's been reused
@@ -944,7 +944,7 @@ describe('ReactOffscreen', () => {
944 },
945 );
946
947 - // @gate enableOffscreen
947 + // @gate enableActivity
948 it(
949 'when reusing old components (hidden -> visible), layout effects fire ' +
950 'with same timing as if it were brand new (includes setState callback)',
@@ -966,9 +966,9 @@ describe('ReactOffscreen', () => {
966 const root = ReactNoop.createRoot();
967 await act(() => {
968 root.render(
969 - <Offscreen mode="visible">
969 + <Activity mode="visible">
970 <Child key="B" ref={bRef} label="B" />
971 - </Offscreen>,
971 + </Activity>,
972 );
973 });
974 assertLog(['Mount B']);
@@ -980,9 +980,9 @@ describe('ReactOffscreen', () => {
980 // Hide the component
981 await act(() => {
982 root.render(
983 - <Offscreen mode="hidden">
983 + <Activity mode="hidden">
984 <Child key="B" ref={bRef} label="B" />
985 - </Offscreen>,
985 + </Activity>,
986 );
987 });
988 assertLog(['Unmount B']);
@@ -993,11 +993,11 @@ describe('ReactOffscreen', () => {
993 Scheduler.log('setState callback B');
994 });
995 root.render(
996 - <Offscreen mode="visible">
996 + <Activity mode="visible">
997 <Child key="A" label="A" />
998 <Child key="B" ref={bRef} label="B" />
999 <Child key="C" label="C" />
1000 - </Offscreen>,
1000 + </Activity>,
1001 );
1002 });
1003 // B's effect should fire in between A and C even though it's been reused
@@ -1007,8 +1007,8 @@ describe('ReactOffscreen', () => {
1007 },
1008 );
1009
1010 - // @gate enableOffscreen
1011 - it('defer passive effects when prerendering a new Offscreen tree', async () => {
1010 + // @gate enableActivity
1011 + it('defer passive effects when prerendering a new Activity tree', async () => {
1012 function Child({label}) {
1013 useEffect(() => {
1014 Scheduler.log('Mount ' + label);
@@ -1023,9 +1023,9 @@ describe('ReactOffscreen', () => {
1023 return (
1024 <>
1025 <Child label="Shell" />
1026 - <Offscreen mode={showMore ? 'visible' : 'hidden'}>
1026 + <Activity mode={showMore ? 'visible' : 'hidden'}>
1027 <Child label="More" />
1028 - </Offscreen>
1028 + </Activity>
1029 </>
1030 );
1031 }
@@ -1104,7 +1104,7 @@ describe('ReactOffscreen', () => {
1104 'Shell',
1105 'Mount Shell',
1106
1107 - // Then prerender the hidden extra context. Unlike Offscreen, the passive
1107 + // Then prerender the hidden extra context. Unlike Activity, the passive
1108 // effects in the hidden tree *should* fire
1109 'More',
1110 'Mount More',
@@ -1125,7 +1125,7 @@ describe('ReactOffscreen', () => {
1125 assertLog(['Shell', 'More']);
1126 });
1127
1128 - // @gate enableOffscreen
1128 + // @gate enableActivity
1129 it('passive effects are connected and disconnected when the visibility changes', async () => {
1130 function Child({step}) {
1131 useEffect(() => {
@@ -1139,14 +1139,14 @@ describe('ReactOffscreen', () => {
1139
1140 function App({show, step}) {
1141 return (
1142 - <Offscreen mode={show ? 'visible' : 'hidden'}>
1142 + <Activity mode={show ? 'visible' : 'hidden'}>
1143 {useMemo(
1144 () => (
1145 <Child step={step} />
1146 ),
1147 [step],
1148 )}
1149 - </Offscreen>
1149 + </Activity>
1150 );
1151 }
1152
@@ -1182,7 +1182,7 @@ describe('ReactOffscreen', () => {
1182 expect(root).toMatchRenderedOutput(<span prop={2} />);
1183 });
1184
1185 - // @gate enableOffscreen
1185 + // @gate enableActivity
1186 it('passive effects are unmounted on hide in the same order as during a deletion: parent before child', async () => {
1187 function Child({label}) {
1188 useEffect(() => {
@@ -1205,9 +1205,9 @@ describe('ReactOffscreen', () => {
1205
1206 function App({show}) {
1207 return (
1208 - <Offscreen mode={show ? 'visible' : 'hidden'}>
1208 + <Activity mode={show ? 'visible' : 'hidden'}>
1209 <Parent />
1210 - </Offscreen>
1210 + </Activity>
1211 );
1212 }
1213
@@ -1240,7 +1240,7 @@ describe('ReactOffscreen', () => {
1240 // Re-enable this test once we add this ability. For example, we'll likely add
1241 // either an option or a heuristic to mount passive effects inside a hidden
1242 // tree after a delay.
1243 - // @gate enableOffscreen
1243 + // @gate enableActivity
1244 it.skip("don't defer passive effects when prerendering in a tree whose effects are already connected", async () => {
1245 function Child({label}) {
1246 useEffect(() => {
@@ -1256,9 +1256,9 @@ describe('ReactOffscreen', () => {
1256 return (
1257 <>
1258 <Child label={'Shell ' + step} />
1259 - <Offscreen mode={showMore ? 'visible' : 'hidden'}>
1259 + <Activity mode={showMore ? 'visible' : 'hidden'}>
1260 <Child label={'More ' + step} />
1261 - </Offscreen>
1261 + </Activity>
1262 </>
1263 );
1264 }
@@ -1296,8 +1296,8 @@ describe('ReactOffscreen', () => {
1296 ]);
1297 });
1298
1299 - // @gate enableOffscreen
1300 - it('does not mount effects when prerendering a nested Offscreen boundary', async () => {
1299 + // @gate enableActivity
1300 + it('does not mount effects when prerendering a nested Activity boundary', async () => {
1301 function Child({label}) {
1302 useEffect(() => {
1303 Scheduler.log('Mount ' + label);
@@ -1310,23 +1310,23 @@ describe('ReactOffscreen', () => {
1310
1311 function App({showOuter, showInner}) {
1312 return (
1313 - <Offscreen mode={showOuter ? 'visible' : 'hidden'}>
1313 + <Activity mode={showOuter ? 'visible' : 'hidden'}>
1314 {useMemo(
1315 () => (
1316 <div>
1317 <Child label="Outer" />
1318 {showInner ? (
1319 - <Offscreen mode="visible">
1319 + <Activity mode="visible">
1320 <div>
1321 <Child label="Inner" />
1322 </div>
1323 - </Offscreen>
1323 + </Activity>
1324 ) : null}
1325 </div>
1326 ),
1327 [showInner],
1328 )}
1329 - </Offscreen>
1329 + </Activity>
1330 );
1331 }
1332
@@ -1374,8 +1374,8 @@ describe('ReactOffscreen', () => {
1374 );
1375 });
1376
1377 - // @gate enableOffscreen
1378 - it('reveal an outer Offscreen boundary without revealing an inner one', async () => {
1377 + // @gate enableActivity
1378 + it('reveal an outer Activity boundary without revealing an inner one', async () => {
1379 function Child({label}) {
1380 useEffect(() => {
1381 Scheduler.log('Mount ' + label);
@@ -1388,21 +1388,21 @@ describe('ReactOffscreen', () => {
1388
1389 function App({showOuter, showInner}) {
1390 return (
1391 - <Offscreen mode={showOuter ? 'visible' : 'hidden'}>
1391 + <Activity mode={showOuter ? 'visible' : 'hidden'}>
1392 {useMemo(
1393 () => (
1394 <div>
1395 <Child label="Outer" />
1396 - <Offscreen mode={showInner ? 'visible' : 'hidden'}>
1396 + <Activity mode={showInner ? 'visible' : 'hidden'}>
1397 <div>
1398 <Child label="Inner" />
1399 </div>
1400 - </Offscreen>
1400 + </Activity>
1401 </div>
1402 ),
1403 [showInner],
1404 )}
1405 - </Offscreen>
1405 + </Activity>
1406 );
1407 }
1408
@@ -1441,20 +1441,20 @@ describe('ReactOffscreen', () => {
1441 });
1442
1443 describe('manual interactivity', () => {
1444 - // @gate enableOffscreen
1444 + // @gate enableActivity
1445 it('should attach ref only for mode null', async () => {
1446 let offscreenRef;
1447
1448 function App({mode}) {
1449 offscreenRef = useRef(null);
1450 return (
1451 - <Offscreen
1451 + <Activity
1452 mode={mode}
1453 ref={ref => {
1454 offscreenRef.current = ref;
1455 }}>
1456 <div />
1457 - </Offscreen>
1457 + </Activity>
1458 );
1459 }
1460
@@ -1485,8 +1485,8 @@ describe('ReactOffscreen', () => {
1485 expect(offscreenRef.current).not.toBeNull();
1486 });
1487
1488 - // @gate enableOffscreen
1489 - it('should lower update priority for detached Offscreen', async () => {
1488 + // @gate enableActivity
1489 + it('should lower update priority for detached Activity', async () => {
1490 let updateChildState;
1491 let updateHighPriorityComponentState;
1492 let offscreenRef;
@@ -1515,9 +1515,9 @@ describe('ReactOffscreen', () => {
1515 return (
1516 <>
1517 <HighPriorityComponent>
1518 - <Offscreen mode={'manual'} ref={offscreenRef}>
1518 + <Activity mode={'manual'} ref={offscreenRef}>
1519 <Child />
1520 - </Offscreen>
1520 + </Activity>
1521 </HighPriorityComponent>
1522 </>
1523 );
@@ -1539,7 +1539,7 @@ describe('ReactOffscreen', () => {
1539
1540 expect(offscreenRef.current).not.toBeNull();
1541
1542 - // Offscreen is attached by default. State updates from offscreen are **not defered**.
1542 + // Activity is attached by default. State updates from offscreen are **not defered**.
1543 await act(async () => {
1544 updateChildState(1);
1545 updateHighPriorityComponentState(1);
@@ -1556,7 +1556,7 @@ describe('ReactOffscreen', () => {
1556 offscreenRef.current.detach();
1557 });
1558
1559 - // Offscreen is detached. State updates from offscreen are **defered**.
1559 + // Activity is detached. State updates from offscreen are **defered**.
1560 await act(async () => {
1561 updateChildState(2);
1562 updateHighPriorityComponentState(2);
@@ -1581,7 +1581,7 @@ describe('ReactOffscreen', () => {
1581 offscreenRef.current.attach();
1582 });
1583
1584 - // Offscreen is attached. State updates from offscreen are **not defered**.
1584 + // Activity is attached. State updates from offscreen are **not defered**.
1585 await act(async () => {
1586 updateChildState(3);
1587 updateHighPriorityComponentState(3);
@@ -1595,7 +1595,7 @@ describe('ReactOffscreen', () => {
1595 });
1596 });
1597
1598 - // @gate enableOffscreen
1598 + // @gate enableActivity
1599 it('defers detachment if called during commit', async () => {
1600 let updateChildState;
1601 let updateHighPriorityComponentState;
@@ -1640,9 +1640,9 @@ describe('ReactOffscreen', () => {
1640 return (
1641 <>
1642 <HighPriorityComponent>
1643 - <Offscreen mode={'manual'} ref={offscreenRef}>
1643 + <Activity mode={'manual'} ref={offscreenRef}>
1644 <Child />
1645 - </Offscreen>
1645 + </Activity>
1646 </HighPriorityComponent>
1647 </>
1648 );
@@ -1658,7 +1658,7 @@ describe('ReactOffscreen', () => {
1658
1659 nextRenderTriggerDetach = true;
1660
1661 - // Offscreen is attached and gets detached inside useLayoutEffect.
1661 + // Activity is attached and gets detached inside useLayoutEffect.
1662 // State updates from offscreen are **defered**.
1663 await act(async () => {
1664 updateChildState(1);
@@ -1686,8 +1686,8 @@ describe('ReactOffscreen', () => {
1686
1687 nextRenderTriggerAttach = true;
1688
1689 - // Offscreen is detached. State updates from offscreen are **defered**.
1690 - // Offscreen is attached inside useLayoutEffect;
1689 + // Activity is detached. State updates from offscreen are **defered**.
1690 + // Activity is attached inside useLayoutEffect;
1691 await act(async () => {
1692 updateChildState(3);
1693 updateHighPriorityComponentState(3);
@@ -1702,20 +1702,20 @@ describe('ReactOffscreen', () => {
1702 });
1703 });
1704
1705 - // @gate enableOffscreen
1706 - it('should detach ref if Offscreen is unmounted', async () => {
1705 + // @gate enableActivity
1706 + it('should detach ref if Activity is unmounted', async () => {
1707 let offscreenRef;
1708
1709 function App({showOffscreen}) {
1710 offscreenRef = useRef(null);
1711 return showOffscreen ? (
1712 - <Offscreen
1712 + <Activity
1713 mode={'manual'}
1714 ref={ref => {
1715 offscreenRef.current = ref;
1716 }}>
1717 <div />
1718 - </Offscreen>
1718 + </Activity>
1719 ) : null;
1720 }
1721
@@ -1740,18 +1740,18 @@ describe('ReactOffscreen', () => {
1740 expect(offscreenRef.current).not.toBeNull();
1741 });
1742
1743 - // @gate enableOffscreen
1744 - it('should detach ref when parent Offscreen is hidden', async () => {
1743 + // @gate enableActivity
1744 + it('should detach ref when parent Activity is hidden', async () => {
1745 let offscreenRef;
1746
1747 function App({mode}) {
1748 offscreenRef = useRef(null);
1749 return (
1750 - <Offscreen mode={mode}>
1751 - <Offscreen mode={'manual'} ref={offscreenRef}>
1750 + <Activity mode={mode}>
1751 + <Activity mode={'manual'} ref={offscreenRef}>
1752 <div />
1753 - </Offscreen>
1754 - </Offscreen>
1753 + </Activity>
1754 + </Activity>
1755 );
1756 }
1757
@@ -1775,7 +1775,7 @@ describe('ReactOffscreen', () => {
1775 expect(offscreenRef.current).toBeNull();
1776 });
1777
1778 - // @gate enableOffscreen
1778 + // @gate enableActivity
1779 it('should change _current', async () => {
1780 let offscreenRef;
1781 const root = ReactNoop.createRoot();
@@ -1783,9 +1783,9 @@ describe('ReactOffscreen', () => {
1783 function App({children}) {
1784 offscreenRef = useRef(null);
1785 return (
1786 - <Offscreen mode={'manual'} ref={offscreenRef}>
1786 + <Activity mode={'manual'} ref={offscreenRef}>
1787 {children}
1788 - </Offscreen>
1788 + </Activity>
1789 );
1790 }
1791
@@ -1811,7 +1811,7 @@ describe('ReactOffscreen', () => {
1811 expect(offscreenRef.current._current === firstFiber).toBeFalsy();
1812 });
1813
1814 - // @gate enableOffscreen
1814 + // @gate enableActivity
1815 it('does not mount tree until attach is called', async () => {
1816 let offscreenRef;
1817 let spanRef;
@@ -1836,9 +1836,9 @@ describe('ReactOffscreen', () => {
1836
1837 function App() {
1838 return (
1839 - <Offscreen mode={'manual'} ref={el => (offscreenRef = el)}>
1839 + <Activity mode={'manual'} ref={el => (offscreenRef = el)}>
1840 <Child />
1841 - </Offscreen>
1841 + </Activity>
1842 );
1843 }
1844
@@ -1859,7 +1859,7 @@ describe('ReactOffscreen', () => {
1859 expect(spanRef.current).toBeNull();
1860 assertLog(['Unmount Layout Child', 'Unmount Child']);
1861
1862 - // Calling attach on already attached Offscreen.
1862 + // Calling attach on already attached Activity.
1863 await act(() => {
1864 offscreenRef.detach();
1865 });
@@ -1873,13 +1873,13 @@ describe('ReactOffscreen', () => {
1873 expect(spanRef.current).not.toBeNull();
1874 assertLog(['Mount Layout Child', 'Mount Child']);
1875
1876 - // Calling attach on already attached Offscreen
1876 + // Calling attach on already attached Activity
1877 offscreenRef.attach();
1878
1879 assertLog([]);
1880 });
1881
1882 - // @gate enableOffscreen
1882 + // @gate enableActivity
1883 it('handles nested manual offscreens', async () => {
1884 let outerOffscreen;
1885 let innerOffscreen;
@@ -1887,13 +1887,13 @@ describe('ReactOffscreen', () => {
1887 function App() {
1888 return (
1889 <LoggedText text={'outer'}>
1890 - <Offscreen mode={'manual'} ref={el => (outerOffscreen = el)}>
1890 + <Activity mode={'manual'} ref={el => (outerOffscreen = el)}>
1891 <LoggedText text={'middle'}>
1892 - <Offscreen mode={'manual'} ref={el => (innerOffscreen = el)}>
1892 + <Activity mode={'manual'} ref={el => (innerOffscreen = el)}>
1893 <LoggedText text={'inner'} />
1894 - </Offscreen>
1894 + </Activity>
1895 </LoggedText>
1896 - </Offscreen>
1896 + </Activity>
1897 </LoggedText>
1898 );
1899 }
@@ -1949,7 +1949,7 @@ describe('ReactOffscreen', () => {
1949
1950 assertLog(['unmount layout inner', 'unmount inner']);
1951
1952 - // Calling detach on already detached Offscreen.
1952 + // Calling detach on already detached Activity.
1953 await act(() => {
1954 innerOffscreen.detach();
1955 });
@@ -1970,7 +1970,7 @@ describe('ReactOffscreen', () => {
1970 assertLog(['unmount layout inner', 'unmount inner']);
1971 });
1972
1973 - // @gate enableOffscreen
1973 + // @gate enableActivity
1974 it('batches multiple attach and detach calls scheduled from an event handler', async () => {
1975 function Child() {
1976 useEffect(() => {
@@ -1985,9 +1985,9 @@ describe('ReactOffscreen', () => {
1985 const offscreen = React.createRef(null);
1986 function App() {
1987 return (
1988 - <Offscreen ref={offscreen} mode="manual">
1988 + <Activity ref={offscreen} mode="manual">
1989 <Child />
1990 - </Offscreen>
1990 + </Activity>
1991 );
1992 }
1993
@@ -2024,7 +2024,7 @@ describe('ReactOffscreen', () => {
2024 assertLog([]);
2025 });
2026
2027 - // @gate enableOffscreen
2027 + // @gate enableActivity
2028 it('batches multiple attach and detach calls scheduled from an effect', async () => {
2029 function Child() {
2030 useEffect(() => {
@@ -2045,9 +2045,9 @@ describe('ReactOffscreen', () => {
2045 instance.attach();
2046 }, []);
2047 return (
2048 - <Offscreen ref={offscreen} mode="manual">
2048 + <Activity ref={offscreen} mode="manual">
2049 <Child />
2050 - </Offscreen>
2050 + </Activity>
2051 );
2052 }
2053
packages/react-reconciler/src/__tests__/ActivityStrictMode-test.js renamed
+21 -21
@@ -1,16 +1,16 @@
1 let React;
2 -let Offscreen;
2 +let Activity;
3 let ReactNoop;
4 let act;
5 let log;
6
7 -describe('ReactOffscreenStrictMode', () => {
7 +describe('Activity StrictMode', () => {
8 beforeEach(() => {
9 jest.resetModules();
10 log = [];
11
12 React = require('react');
13 - Offscreen = React.unstable_Offscreen;
13 + Activity = React.unstable_Activity;
14 ReactNoop = require('react-noop-renderer');
15 act = require('internal-test-utils').act;
16 });
@@ -31,14 +31,14 @@ describe('ReactOffscreenStrictMode', () => {
31 return <span>label</span>;
32 }
33
34 - // @gate __DEV__ && enableOffscreen
34 + // @gate __DEV__ && enableActivity
35 it('should trigger strict effects when offscreen is visible', async () => {
36 await act(() => {
37 ReactNoop.render(
38 <React.StrictMode>
39 - <Offscreen mode="visible">
39 + <Activity mode="visible">
40 <Component label="A" />
41 - </Offscreen>
41 + </Activity>
42 </React.StrictMode>,
43 );
44 });
@@ -55,14 +55,14 @@ describe('ReactOffscreenStrictMode', () => {
55 ]);
56 });
57
58 - // @gate __DEV__ && enableOffscreen && enableDO_NOT_USE_disableStrictPassiveEffect
58 + // @gate __DEV__ && enableActivity && enableDO_NOT_USE_disableStrictPassiveEffect
59 it('does not trigger strict effects when disableStrictPassiveEffect is presented on StrictMode', async () => {
60 await act(() => {
61 ReactNoop.render(
62 <React.StrictMode DO_NOT_USE_disableStrictPassiveEffect={true}>
63 - <Offscreen>
63 + <Activity>
64 <Component label="A" />
65 - </Offscreen>
65 + </Activity>
66 </React.StrictMode>,
67 );
68 });
@@ -77,14 +77,14 @@ describe('ReactOffscreenStrictMode', () => {
77 ]);
78 });
79
80 - // @gate __DEV__ && enableOffscreen && useModernStrictMode
80 + // @gate __DEV__ && enableActivity && useModernStrictMode
81 it('should not trigger strict effects when offscreen is hidden', async () => {
82 await act(() => {
83 ReactNoop.render(
84 <React.StrictMode>
85 - <Offscreen mode="hidden">
85 + <Activity mode="hidden">
86 <Component label="A" />
87 - </Offscreen>
87 + </Activity>
88 </React.StrictMode>,
89 );
90 });
@@ -96,10 +96,10 @@ describe('ReactOffscreenStrictMode', () => {
96 await act(() => {
97 ReactNoop.render(
98 <React.StrictMode>
99 - <Offscreen mode="hidden">
99 + <Activity mode="hidden">
100 <Component label="A" />
101 <Component label="B" />
102 - </Offscreen>
102 + </Activity>
103 </React.StrictMode>,
104 );
105 });
@@ -111,9 +111,9 @@ describe('ReactOffscreenStrictMode', () => {
111 await act(() => {
112 ReactNoop.render(
113 <React.StrictMode>
114 - <Offscreen mode="visible">
114 + <Activity mode="visible">
115 <Component label="A" />
116 - </Offscreen>
116 + </Activity>
117 </React.StrictMode>,
118 );
119 });
@@ -134,9 +134,9 @@ describe('ReactOffscreenStrictMode', () => {
134 await act(() => {
135 ReactNoop.render(
136 <React.StrictMode>
137 - <Offscreen mode="hidden">
137 + <Activity mode="hidden">
138 <Component label="A" />
139 - </Offscreen>
139 + </Activity>
140 </React.StrictMode>,
141 );
142 });
@@ -176,7 +176,7 @@ describe('ReactOffscreenStrictMode', () => {
176 });
177 });
178
179 - // @gate __DEV__ && enableOffscreen
179 + // @gate __DEV__ && enableActivity
180 it('should double invoke effects on unsuspended child', async () => {
181 let shouldSuspend = true;
182 let resolve;
@@ -218,9 +218,9 @@ describe('ReactOffscreenStrictMode', () => {
218 await act(() => {
219 ReactNoop.render(
220 <React.StrictMode>
221 - <Offscreen mode="visible">
221 + <Activity mode="visible">
222 <Parent />
223 - </Offscreen>
223 + </Activity>
224 </React.StrictMode>,
225 );
226 });
packages/react-reconciler/src/__tests__/ActivitySuspense-test.js renamed
+20 -20
@@ -3,7 +3,7 @@ let ReactNoop;
3 let Scheduler;
4 let act;
5 let LegacyHidden;
6 -let Offscreen;
6 +let Activity;
7 let Suspense;
8 let useState;
9 let useEffect;
@@ -13,7 +13,7 @@ let waitFor;
13 let waitForPaint;
14 let assertLog;
15
16 -describe('ReactOffscreen', () => {
16 +describe('Activity Suspense', () => {
17 beforeEach(() => {
18 jest.resetModules();
19
@@ -22,7 +22,7 @@ describe('ReactOffscreen', () => {
22 Scheduler = require('scheduler');
23 act = require('internal-test-utils').act;
24 LegacyHidden = React.unstable_LegacyHidden;
25 - Offscreen = React.unstable_Offscreen;
25 + Activity = React.unstable_Activity;
26 Suspense = React.Suspense;
27 useState = React.useState;
28 useEffect = React.useEffect;
@@ -98,7 +98,7 @@ describe('ReactOffscreen', () => {
98 return text;
99 }
100
101 - // @gate enableOffscreen
101 + // @gate enableActivity
102 test('basic example of suspending inside hidden tree', async () => {
103 const root = ReactNoop.createRoot();
104
@@ -108,11 +108,11 @@ describe('ReactOffscreen', () => {
108 <span>
109 <Text text="Visible" />
110 </span>
111 - <Offscreen mode="hidden">
111 + <Activity mode="hidden">
112 <span>
113 <AsyncText text="Hidden" />
114 </span>
115 - </Offscreen>
115 + </Activity>
116 </Suspense>
117 );
118 }
@@ -159,7 +159,7 @@ describe('ReactOffscreen', () => {
159 );
160 }
161
162 - // Unlike Offscreen, LegacyHidden never captures if something suspends
162 + // Unlike Activity, LegacyHidden never captures if something suspends
163 await act(() => {
164 root.render(<App />);
165 });
@@ -184,9 +184,9 @@ describe('ReactOffscreen', () => {
184 <span>
185 <Text text={open ? 'Open' : 'Closed'} />
186 </span>
187 - <Offscreen mode={open ? 'visible' : 'hidden'}>
187 + <Activity mode={open ? 'visible' : 'hidden'}>
188 <span>{children}</span>
189 - </Offscreen>
189 + </Activity>
190 </Suspense>
191 );
192 }
@@ -233,7 +233,7 @@ describe('ReactOffscreen', () => {
233 );
234 });
235
236 - // @gate enableOffscreen
236 + // @gate enableActivity
237 test("suspending inside currently visible tree that's switching to hidden", async () => {
238 const root = ReactNoop.createRoot();
239
@@ -243,9 +243,9 @@ describe('ReactOffscreen', () => {
243 <span>
244 <Text text={open ? 'Open' : 'Closed'} />
245 </span>
246 - <Offscreen mode={open ? 'visible' : 'hidden'}>
246 + <Activity mode={open ? 'visible' : 'hidden'}>
247 <span>{children}</span>
248 - </Offscreen>
248 + </Activity>
249 </Suspense>
250 );
251 }
@@ -330,11 +330,11 @@ describe('ReactOffscreen', () => {
330
331 function App({show}) {
332 return (
333 - <Offscreen mode={show ? 'visible' : 'hidden'}>
333 + <Activity mode={show ? 'visible' : 'hidden'}>
334 <span>
335 <Child />
336 </span>
337 - </Offscreen>
337 + </Activity>
338 );
339 }
340
@@ -368,11 +368,11 @@ describe('ReactOffscreen', () => {
368
369 function App({show}) {
370 return (
371 - <Offscreen mode={show ? 'visible' : 'hidden'}>
371 + <Activity mode={show ? 'visible' : 'hidden'}>
372 <span>
373 <Child />
374 </span>
375 - </Offscreen>
375 + </Activity>
376 );
377 }
378
@@ -409,11 +409,11 @@ describe('ReactOffscreen', () => {
409 expect(root).toMatchRenderedOutput(<span hidden={true}>B1</span>);
410 });
411
412 - // @gate enableOffscreen
412 + // @gate enableActivity
413 test('detect updates to a hidden tree during a concurrent event', async () => {
414 // This is a pretty complex test case. It relates to how we detect if an
415 // update is made to a hidden tree: when scheduling the update, we walk up
416 - // the fiber return path to see if any of the parents is a hidden Offscreen
416 + // the fiber return path to see if any of the parents is a hidden Activity
417 // component. This doesn't work if there's already a render in progress,
418 // because the tree might be about to flip to hidden. To avoid a data race,
419 // queue updates atomically: wait to queue the update until after the
@@ -443,11 +443,11 @@ describe('ReactOffscreen', () => {
443 setOuter = _setOuter;
444 return (
445 <>
446 - <Offscreen mode={show ? 'visible' : 'hidden'}>
446 + <Activity mode={show ? 'visible' : 'hidden'}>
447 <span>
448 <Child outer={outer} />
449 </span>
450 - </Offscreen>
450 + </Activity>
451 <span>
452 <Text text={'Outer: ' + outer} />
453 </span>
packages/react-reconciler/src/__tests__/ReactCache-test.js
+6 -6
@@ -6,7 +6,7 @@ let Scheduler;
6 let assertLog;
7 let act;
8 let Suspense;
9 -let Offscreen;
9 +let Activity;
10 let useCacheRefresh;
11 let startTransition;
12 let useState;
@@ -27,7 +27,7 @@ describe('ReactCache', () => {
27 act = require('internal-test-utils').act;
28 Suspense = React.Suspense;
29 cache = React.cache;
30 - Offscreen = React.unstable_Offscreen;
30 + Activity = React.unstable_Activity;
31 getCacheSignal = React.unstable_getCacheSignal;
32 useCacheRefresh = React.unstable_useCacheRefresh;
33 startTransition = React.startTransition;
@@ -1576,12 +1576,12 @@ describe('ReactCache', () => {
1576 expect(root).toMatchRenderedOutput('Bye!');
1577 });
1578
1579 - // @gate enableOffscreen
1579 + // @gate enableActivity
1580 // @gate enableCache
1581 - test('prerender a new cache boundary inside an Offscreen tree', async () => {
1581 + test('prerender a new cache boundary inside an Activity tree', async () => {
1582 function App({prerenderMore}) {
1583 return (
1584 - <Offscreen mode="hidden">
1584 + <Activity mode="hidden">
1585 <div>
1586 {prerenderMore ? (
1587 <Cache>
@@ -1589,7 +1589,7 @@ describe('ReactCache', () => {
1589 </Cache>
1590 ) : null}
1591 </div>
1592 - </Offscreen>
1592 + </Activity>
1593 );
1594 }
1595
packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
+15 -19
@@ -16,7 +16,7 @@ let useDeferredValue;
16 let useMemo;
17 let useState;
18 let Suspense;
19 -let Offscreen;
19 +let Activity;
20 let assertLog;
21 let waitForPaint;
22 let textCache;
@@ -34,7 +34,7 @@ describe('ReactDeferredValue', () => {
34 useMemo = React.useMemo;
35 useState = React.useState;
36 Suspense = React.Suspense;
37 - Offscreen = React.unstable_Offscreen;
37 + Activity = React.unstable_Activity;
38
39 const InternalTestUtils = require('internal-test-utils');
40 assertLog = InternalTestUtils.assertLog;
@@ -569,7 +569,7 @@ describe('ReactDeferredValue', () => {
569 });
570
571 // @gate enableUseDeferredValueInitialArg
572 - // @gate enableOffscreen
572 + // @gate enableActivity
573 it('useDeferredValue can spawn a deferred task while prerendering a hidden tree', async () => {
574 function App() {
575 const text = useDeferredValue('Final', 'Preview');
@@ -585,9 +585,7 @@ describe('ReactDeferredValue', () => {
585 const [shouldShow, setState] = useState(false);
586 revealContent = () => setState(true);
587 return (
588 - <Offscreen mode={shouldShow ? 'visible' : 'hidden'}>
589 - {children}
590 - </Offscreen>
588 + <Activity mode={shouldShow ? 'visible' : 'hidden'}>{children}</Activity>
589 );
590 }
591
@@ -618,7 +616,7 @@ describe('ReactDeferredValue', () => {
616 });
617
618 // @gate enableUseDeferredValueInitialArg
621 - // @gate enableOffscreen
619 + // @gate enableActivity
620 it('useDeferredValue can prerender the initial value inside a hidden tree', async () => {
621 function App({text}) {
622 const renderedText = useDeferredValue(text, `Preview [${text}]`);
@@ -634,9 +632,7 @@ describe('ReactDeferredValue', () => {
632 const [shouldShow, setState] = useState(false);
633 revealContent = () => setState(true);
634 return (
637 - <Offscreen mode={shouldShow ? 'visible' : 'hidden'}>
638 - {children}
639 - </Offscreen>
635 + <Activity mode={shouldShow ? 'visible' : 'hidden'}>{children}</Activity>
636 );
637 }
638
@@ -679,7 +675,7 @@ describe('ReactDeferredValue', () => {
675 });
676
677 // @gate enableUseDeferredValueInitialArg
682 - // @gate enableOffscreen
678 + // @gate enableActivity
679 it(
680 'useDeferredValue skips the preview state when revealing a hidden tree ' +
681 'if the final value is referentially identical',
@@ -695,9 +691,9 @@ describe('ReactDeferredValue', () => {
691
692 function Container({text, shouldShow}) {
693 return (
698 - <Offscreen mode={shouldShow ? 'visible' : 'hidden'}>
694 + <Activity mode={shouldShow ? 'visible' : 'hidden'}>
695 <App text={text} />
700 - </Offscreen>
696 + </Activity>
697 );
698 }
699
@@ -720,7 +716,7 @@ describe('ReactDeferredValue', () => {
716 );
717
718 // @gate enableUseDeferredValueInitialArg
723 - // @gate enableOffscreen
719 + // @gate enableActivity
720 it(
721 'useDeferredValue does not skip the preview state when revealing a ' +
722 'hidden tree if the final value is different from the currently rendered one',
@@ -736,9 +732,9 @@ describe('ReactDeferredValue', () => {
732
733 function Container({text, shouldShow}) {
734 return (
739 - <Offscreen mode={shouldShow ? 'visible' : 'hidden'}>
735 + <Activity mode={shouldShow ? 'visible' : 'hidden'}>
736 <App text={text} />
741 - </Offscreen>
737 + </Activity>
738 );
739 }
740
@@ -765,7 +761,7 @@ describe('ReactDeferredValue', () => {
761 },
762 );
763
768 - // @gate enableOffscreen
764 + // @gate enableActivity
765 it(
766 'useDeferredValue does not show "previous" value when revealing a hidden ' +
767 'tree (no initial value)',
@@ -781,9 +777,9 @@ describe('ReactDeferredValue', () => {
777
778 function Container({text, shouldShow}) {
779 return (
784 - <Offscreen mode={shouldShow ? 'visible' : 'hidden'}>
780 + <Activity mode={shouldShow ? 'visible' : 'hidden'}>
781 <App text={text} />
786 - </Offscreen>
782 + </Activity>
783 );
784 }
785
packages/react-reconciler/src/__tests__/ReactSuspenseyCommitPhase-test.js
+5 -5
@@ -4,7 +4,7 @@ let ReactNoop;
4 let resolveSuspenseyThing;
5 let getSuspenseyThingStatus;
6 let Suspense;
7 -let Offscreen;
7 +let Activity;
8 let SuspenseList;
9 let useMemo;
10 let Scheduler;
@@ -23,7 +23,7 @@ describe('ReactSuspenseyCommitPhase', () => {
23 if (gate(flags => flags.enableSuspenseList)) {
24 SuspenseList = React.unstable_SuspenseList;
25 }
26 - Offscreen = React.unstable_Offscreen;
26 + Activity = React.unstable_Activity;
27 useMemo = React.useMemo;
28 startTransition = React.startTransition;
29 resolveSuspenseyThing = ReactNoop.resolveSuspenseyThing;
@@ -206,7 +206,7 @@ describe('ReactSuspenseyCommitPhase', () => {
206 // TODO: Notice that none of these items appear until they've all loaded.
207 // That's not ideal; we should commit each row as it becomes ready to
208 // commit. That means we need to prepare both the fallback and the primary
209 - // tree during the render phase. Related to Offscreen, too.
209 + // tree during the render phase. Related to Activity, too.
210 resolveSuspenseyThing('A');
211 expect(root).toMatchRenderedOutput('Loading ALoading BLoading C');
212 resolveSuspenseyThing('B');
@@ -269,7 +269,7 @@ describe('ReactSuspenseyCommitPhase', () => {
269 );
270 });
271
272 - // @gate enableOffscreen
272 + // @gate enableActivity
273 test("host instances don't suspend during prerendering, but do suspend when they are revealed", async () => {
274 function More() {
275 Scheduler.log('More');
@@ -282,7 +282,7 @@ describe('ReactSuspenseyCommitPhase', () => {
282 return (
283 <>
284 <div>Main Content</div>
285 - <Offscreen mode={showMore ? 'visible' : 'hidden'}>{more}</Offscreen>
285 + <Activity mode={showMore ? 'visible' : 'hidden'}>{more}</Activity>
286 </>
287 );
288 }
packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+4 -4
@@ -18,7 +18,7 @@ let assertLog;
18 let getCacheForType;
19 let useState;
20 let Suspense;
21 -let Offscreen;
21 +let Activity;
22 let startTransition;
23
24 let caches;
@@ -52,7 +52,7 @@ describe('ReactInteractionTracing', () => {
52 useState = React.useState;
53 startTransition = React.startTransition;
54 Suspense = React.Suspense;
55 - Offscreen = React.unstable_Offscreen;
55 + Activity = React.unstable_Activity;
56
57 getCacheForType = React.unstable_getCacheForType;
58
@@ -2180,11 +2180,11 @@ describe('ReactInteractionTracing', () => {
2180 <Suspense fallback={<Text text="Loading..." />}>
2181 <AsyncText text="Text" />
2182 </Suspense>
2183 - <Offscreen mode="hidden">
2183 + <Activity mode="hidden">
2184 <Suspense fallback={<Text text="Hidden Loading..." />}>
2185 <AsyncText text="Hidden Text" />
2186 </Suspense>
2187 - </Offscreen>
2187 + </Activity>
2188 </React.unstable_TracingMarker>
2189 );
2190 }
packages/react/index.classic.fb.js
+1 -1
@@ -29,11 +29,11 @@ export {
29 memo,
30 cache,
31 startTransition,
32 + unstable_Activity,
33 unstable_Cache,
34 unstable_TracingMarker,
35 unstable_DebugTracingMode,
36 unstable_LegacyHidden,
36 - unstable_Offscreen,
37 unstable_Scope,
38 unstable_SuspenseList,
39 unstable_getCacheSignal,
packages/react/index.experimental.js
+1 -1
@@ -32,7 +32,7 @@ export {
32 startTransition,
33 unstable_Cache,
34 unstable_DebugTracingMode,
35 - unstable_Offscreen,
35 + unstable_Activity,
36 unstable_postpone,
37 unstable_getCacheSignal,
38 unstable_getCacheForType,
packages/react/index.js
+1 -1
@@ -56,7 +56,7 @@ export {
56 unstable_Cache,
57 unstable_DebugTracingMode,
58 unstable_LegacyHidden,
59 - unstable_Offscreen,
59 + unstable_Activity,
60 unstable_Scope,
61 unstable_SuspenseList,
62 unstable_TracingMarker,
packages/react/index.modern.fb.js
+1 -1
@@ -31,7 +31,7 @@ export {
31 unstable_Cache,
32 unstable_DebugTracingMode,
33 unstable_LegacyHidden,
34 - unstable_Offscreen,
34 + unstable_Activity,
35 unstable_Scope,
36 unstable_SuspenseList,
37 unstable_getCacheSignal,
packages/react/src/React.js
+1 -1
@@ -134,7 +134,7 @@ export {
134 useDeferredValue,
135 REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList,
136 REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
137 - REACT_OFFSCREEN_TYPE as unstable_Offscreen,
137 + REACT_OFFSCREEN_TYPE as unstable_Activity,
138 getCacheSignal as unstable_getCacheSignal,
139 getCacheForType as unstable_getCacheForType,
140 useCacheRefresh as unstable_useCacheRefresh,
scripts/jest/TestFlags.js
+1 -1
@@ -82,9 +82,9 @@ function getTestFlags() {
82 www,
83
84 // This isn't a flag, just a useful alias for tests.
85 + enableActivity: releaseChannel === 'experimental' || www,
86 enableUseSyncExternalStoreShim: !__VARIANT__,
87 enableSuspenseList: releaseChannel === 'experimental' || www,
87 - enableOffscreen: releaseChannel === 'experimental' || www,
88 enableLegacyHidden: www,
89
90 // If there's a naming conflict between scheduler and React feature flags, the