Skip to content

Commit 8a92a62

Browse files
steinybotsteinybot
committed
Move experimental APIs to stable for React 18
See facebook/react#21488.
1 parent 60f97fb commit 8a92a62

File tree

4 files changed

+77
-76
lines changed

4 files changed

+77
-76
lines changed

‎types/react/experimental.d.ts

-55
Original file line numberDiff line numberDiff line change
@@ -47,59 +47,4 @@ declare module '.' {
4747
*/
4848
unstable_expectedLoadTime?: number | undefined;
4949
}
50-
51-
export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';
52-
export type SuspenseListTailMode = 'collapsed' | 'hidden';
53-
54-
export interface SuspenseListCommonProps {
55-
/**
56-
* Note that SuspenseList require more than one child;
57-
* it is a runtime warning to provide only a single child.
58-
*
59-
* It does, however, allow those children to be wrapped inside a single
60-
* level of `<React.Fragment>`.
61-
*/
62-
children: ReactElement | Iterable<ReactElement>;
63-
}
64-
65-
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
66-
/**
67-
* Defines the order in which the `SuspenseList` children should be revealed.
68-
*/
69-
revealOrder: 'forwards' | 'backwards';
70-
/**
71-
* Dictates how unloaded items in a SuspenseList is shown.
72-
*
73-
* - By default, `SuspenseList` will show all fallbacks in the list.
74-
* - `collapsed` shows only the next fallback in the list.
75-
* - `hidden` doesn’t show any unloaded items.
76-
*/
77-
tail?: SuspenseListTailMode | undefined;
78-
}
79-
80-
interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
81-
/**
82-
* Defines the order in which the `SuspenseList` children should be revealed.
83-
*/
84-
revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps['revealOrder']> | undefined;
85-
/**
86-
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
87-
*/
88-
tail?: never | undefined;
89-
}
90-
91-
export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;
92-
93-
/**
94-
* `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
95-
* in which these components are revealed to the user.
96-
*
97-
* When multiple components need to fetch data, this data may arrive in an unpredictable order.
98-
* However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
99-
* until previous items have been displayed (this behavior is adjustable).
100-
*
101-
* @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
102-
* @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
103-
*/
104-
export const SuspenseList: ExoticComponent<SuspenseListProps>;
10550
}

‎types/react/index.d.ts

+56
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,62 @@ declare namespace React {
398398
}
399399

400400
const Suspense: ExoticComponent<SuspenseProps>;
401+
402+
export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';
403+
export type SuspenseListTailMode = 'collapsed' | 'hidden';
404+
405+
export interface SuspenseListCommonProps {
406+
/**
407+
* Note that SuspenseList require more than one child;
408+
* it is a runtime warning to provide only a single child.
409+
*
410+
* It does, however, allow those children to be wrapped inside a single
411+
* level of `<React.Fragment>`.
412+
*/
413+
children: ReactElement | Iterable<ReactElement>;
414+
}
415+
416+
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
417+
/**
418+
* Defines the order in which the `SuspenseList` children should be revealed.
419+
*/
420+
revealOrder: 'forwards' | 'backwards';
421+
/**
422+
* Dictates how unloaded items in a SuspenseList is shown.
423+
*
424+
* - By default, `SuspenseList` will show all fallbacks in the list.
425+
* - `collapsed` shows only the next fallback in the list.
426+
* - `hidden` doesn’t show any unloaded items.
427+
*/
428+
tail?: SuspenseListTailMode | undefined;
429+
}
430+
431+
interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
432+
/**
433+
* Defines the order in which the `SuspenseList` children should be revealed.
434+
*/
435+
revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps['revealOrder']> | undefined;
436+
/**
437+
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
438+
*/
439+
tail?: never | undefined;
440+
}
441+
442+
export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;
443+
444+
/**
445+
* `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
446+
* in which these components are revealed to the user.
447+
*
448+
* When multiple components need to fetch data, this data may arrive in an unpredictable order.
449+
* However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
450+
* until previous items have been displayed (this behavior is adjustable).
451+
*
452+
* @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
453+
* @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
454+
*/
455+
export const SuspenseList: ExoticComponent<SuspenseListProps>;
456+
401457
const version: string;
402458

403459
/**

‎types/react/test/experimental.tsx

-21
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,3 @@ function suspenseTest() {
1515
);
1616
}
1717
}
18-
19-
// Unsupported `revealOrder` triggers a runtime warning
20-
// @ts-expect-error
21-
<React.SuspenseList revealOrder="something">
22-
<React.Suspense fallback="Loading">Content</React.Suspense>
23-
</React.SuspenseList>;
24-
25-
<React.SuspenseList revealOrder="backwards">
26-
<React.Suspense fallback="Loading">A</React.Suspense>
27-
<React.Suspense fallback="Loading">B</React.Suspense>
28-
</React.SuspenseList>;
29-
30-
<React.SuspenseList revealOrder="forwards">
31-
<React.Suspense fallback="Loading">A</React.Suspense>
32-
<React.Suspense fallback="Loading">B</React.Suspense>
33-
</React.SuspenseList>;
34-
35-
<React.SuspenseList revealOrder="together">
36-
<React.Suspense fallback="Loading">A</React.Suspense>
37-
<React.Suspense fallback="Loading">B</React.Suspense>
38-
</React.SuspenseList>;

‎types/react/test/tsx.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,27 @@ const LazyRefForwarding = React.lazy(async () => ({ default: Memoized4 }));
347347
// @ts-expect-error
348348
<React.Suspense fallback={null} unstable_avoidThisFallback />;
349349

350+
// Unsupported `revealOrder` triggers a runtime warning
351+
// @ts-expect-error
352+
<React.SuspenseList revealOrder="something">
353+
<React.Suspense fallback="Loading">Content</React.Suspense>
354+
</React.SuspenseList>;
355+
356+
<React.SuspenseList revealOrder="backwards">
357+
<React.Suspense fallback="Loading">A</React.Suspense>
358+
<React.Suspense fallback="Loading">B</React.Suspense>
359+
</React.SuspenseList>;
360+
361+
<React.SuspenseList revealOrder="forwards">
362+
<React.Suspense fallback="Loading">A</React.Suspense>
363+
<React.Suspense fallback="Loading">B</React.Suspense>
364+
</React.SuspenseList>;
365+
366+
<React.SuspenseList revealOrder="together">
367+
<React.Suspense fallback="Loading">A</React.Suspense>
368+
<React.Suspense fallback="Loading">B</React.Suspense>
369+
</React.SuspenseList>;
370+
350371
class LegacyContext extends React.Component {
351372
static contextTypes = { foo: PropTypes.node.isRequired };
352373

0 commit comments

Comments
 (0)