Skip to content

Commit 8356471

Browse files
authored
Move SuspenseList to experimental channel (#22765)
There's more work to be done to implement this correctly on the server, so we're going to wait to release it until an 18.x minor.
1 parent 489b4bd commit 8356471

File tree

11 files changed

+89
-23
lines changed

11 files changed

+89
-23
lines changed

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ describe('ReactDOMFizzServer', () => {
4242
}
4343
Stream = require('stream');
4444
Suspense = React.Suspense;
45-
SuspenseList = React.SuspenseList;
45+
if (gate(flags => flags.enableSuspenseList)) {
46+
SuspenseList = React.SuspenseList;
47+
}
4648

4749
PropTypes = require('prop-types');
4850

@@ -656,6 +658,7 @@ describe('ReactDOMFizzServer', () => {
656658
expect(ref.current).toBe(b);
657659
});
658660

661+
// @gate enableSuspenseList
659662
// @gate experimental
660663
it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {
661664
const ref = React.createRef();

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,9 @@ describe('ReactDOMServerPartialHydration', () => {
8484
ReactDOMServer = require('react-dom/server');
8585
Scheduler = require('scheduler');
8686
Suspense = React.Suspense;
87-
SuspenseList = React.SuspenseList;
87+
if (gate(flags => flags.enableSuspenseList)) {
88+
SuspenseList = React.SuspenseList;
89+
}
8890

8991
IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
9092
});
@@ -1545,6 +1547,7 @@ describe('ReactDOMServerPartialHydration', () => {
15451547
expect(ref.current).toBe(span);
15461548
});
15471549

1550+
// @gate enableSuspenseList
15481551
it('shows inserted items in a SuspenseList before content is hydrated', async () => {
15491552
let suspend = false;
15501553
let resolve;
@@ -1630,6 +1633,7 @@ describe('ReactDOMServerPartialHydration', () => {
16301633
expect(ref.current).toBe(spanB);
16311634
});
16321635

1636+
// @gate enableSuspenseList
16331637
it('shows is able to hydrate boundaries even if others in a list are pending', async () => {
16341638
let suspend = false;
16351639
let resolve;
@@ -1704,7 +1708,7 @@ describe('ReactDOMServerPartialHydration', () => {
17041708
expect(container.textContent).toBe('ALoading B');
17051709
});
17061710

1707-
// @gate experimental || www
1711+
// @gate enableSuspenseList
17081712
it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {
17091713
let suspend = false;
17101714
let resolve;
@@ -1807,6 +1811,7 @@ describe('ReactDOMServerPartialHydration', () => {
18071811
expect(ref.current).toBe(b);
18081812
});
18091813

1814+
// @gate enableSuspenseList
18101815
it('clears server boundaries when SuspenseList suspends last row hydrating', async () => {
18111816
let suspend = false;
18121817
let resolve;

packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ let ReactDOM;
1616
let ReactDOMServer;
1717
let ReactTestUtils;
1818
let act;
19+
let SuspenseList;
1920

2021
function initModules() {
2122
// Reset warning cache.
@@ -26,6 +27,9 @@ function initModules() {
2627
ReactDOMServer = require('react-dom/server');
2728
ReactTestUtils = require('react-dom/test-utils');
2829
act = require('jest-react').act;
30+
if (gate(flags => flags.enableSuspenseList)) {
31+
SuspenseList = React.SuspenseList;
32+
}
2933

3034
// Make them available to the helpers.
3135
return {
@@ -137,16 +141,17 @@ describe('ReactDOMServerSuspense', () => {
137141
);
138142
});
139143

144+
// @gate enableSuspenseList
140145
it('server renders a SuspenseList component and its children', async () => {
141146
const example = (
142-
<React.SuspenseList>
147+
<SuspenseList>
143148
<React.Suspense fallback="Loading A">
144149
<div>A</div>
145150
</React.Suspense>
146151
<React.Suspense fallback="Loading B">
147152
<div>B</div>
148153
</React.Suspense>
149-
</React.SuspenseList>
154+
</SuspenseList>
150155
);
151156
const element = await serverRender(example);
152157
const parent = element.parentNode;

packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ beforeEach(() => {
2424
act = require('jest-react').act;
2525

2626
Suspense = React.Suspense;
27-
SuspenseList = React.SuspenseList;
27+
if (gate(flags => flags.enableSuspenseList)) {
28+
SuspenseList = React.SuspenseList;
29+
}
2830

2931
getCacheForType = React.unstable_getCacheForType;
3032

@@ -197,6 +199,7 @@ test('warns in DEV if return pointer is inconsistent', async () => {
197199
});
198200

199201
// @gate enableCache
202+
// @gate enableSuspenseList
200203
test('regression (#20932): return pointer is correct before entering deleted tree', async () => {
201204
// Based on a production bug. Designed to trigger a very specific
202205
// implementation path.

packages/react-is/src/__tests__/ReactIs-test.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
let React;
1313
let ReactDOM;
1414
let ReactIs;
15+
let SuspenseList;
1516

1617
describe('ReactIs', () => {
1718
beforeEach(() => {
@@ -20,6 +21,10 @@ describe('ReactIs', () => {
2021
React = require('react');
2122
ReactDOM = require('react-dom');
2223
ReactIs = require('react-is');
24+
25+
if (gate(flags => flags.enableSuspenseList)) {
26+
SuspenseList = React.SuspenseList;
27+
}
2328
});
2429

2530
it('should return undefined for unknown/invalid types', () => {
@@ -186,10 +191,11 @@ describe('ReactIs', () => {
186191
expect(ReactIs.isSuspense(<div />)).toBe(false);
187192
});
188193

194+
// @gate enableSuspenseList
189195
it('should identify suspense list', () => {
190-
expect(ReactIs.isValidElementType(React.SuspenseList)).toBe(true);
191-
expect(ReactIs.typeOf(<React.SuspenseList />)).toBe(ReactIs.SuspenseList);
192-
expect(ReactIs.isSuspenseList(<React.SuspenseList />)).toBe(true);
196+
expect(ReactIs.isValidElementType(SuspenseList)).toBe(true);
197+
expect(ReactIs.typeOf(<SuspenseList />)).toBe(ReactIs.SuspenseList);
198+
expect(ReactIs.isSuspenseList(<SuspenseList />)).toBe(true);
193199
expect(ReactIs.isSuspenseList({type: ReactIs.SuspenseList})).toBe(false);
194200
expect(ReactIs.isSuspenseList('React.SuspenseList')).toBe(false);
195201
expect(ReactIs.isSuspenseList(<div />)).toBe(false);

packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ describe('ReactLazyContextPropagation', () => {
2121
useState = React.useState;
2222
useContext = React.useContext;
2323
Suspense = React.Suspense;
24-
SuspenseList = React.SuspenseList;
24+
if (gate(flags => flags.enableSuspenseList)) {
25+
SuspenseList = React.SuspenseList;
26+
}
2527

2628
getCacheForType = React.unstable_getCacheForType;
2729

@@ -651,6 +653,7 @@ describe('ReactLazyContextPropagation', () => {
651653
expect(root).toMatchRenderedOutput('BBB');
652654
});
653655

656+
// @gate enableSuspenseList
654657
test('contexts are propagated through SuspenseList', async () => {
655658
// This kinda tests an implementation detail. SuspenseList has an early
656659
// bailout that doesn't use `bailoutOnAlreadyFinishedWork`. It probably

packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ let forwardRef;
3434
let memo;
3535
let act;
3636
let ContinuousEventPriority;
37+
let SuspenseList;
3738

3839
describe('ReactHooksWithNoopRenderer', () => {
3940
beforeEach(() => {
@@ -60,6 +61,9 @@ describe('ReactHooksWithNoopRenderer', () => {
6061
Suspense = React.Suspense;
6162
ContinuousEventPriority = require('react-reconciler/constants')
6263
.ContinuousEventPriority;
64+
if (gate(flags => flags.enableSuspenseList)) {
65+
SuspenseList = React.SuspenseList;
66+
}
6367

6468
textCache = new Map();
6569

@@ -4291,9 +4295,8 @@ describe('ReactHooksWithNoopRenderer', () => {
42914295
]);
42924296
});
42934297

4298+
// @gate enableSuspenseList
42944299
it('regression: SuspenseList causes unmounts to be dropped on deletion', async () => {
4295-
const SuspenseList = React.SuspenseList;
4296-
42974300
function Row({label}) {
42984301
useEffect(() => {
42994302
Scheduler.unstable_yieldValue('Mount ' + label);

0 commit comments

Comments
 (0)