Skip to content

Commit 1a60e1b

Browse files
eps1loneps1lon
authored
[react] Update SuspenseList types (DefinitelyTyped#72949)
1 parent b100108 commit 1a60e1b

5 files changed

Lines changed: 100 additions & 31 deletions

File tree

‎types/react-is/test/canary-tests.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ import * as ReactIs from "react-is";
44
import "react-is/canary";
55

66
// Suspense
7-
ReactIs.isSuspenseList(<React.unstable_SuspenseList children={<div />} />); // true
8-
ReactIs.typeOf(<React.unstable_SuspenseList children={<div />} />) === ReactIs.SuspenseList; // true
7+
ReactIs.isSuspenseList(<React.unstable_SuspenseList revealOrder="independent" children={<div />} />); // true
8+
ReactIs.typeOf(<React.unstable_SuspenseList revealOrder="independent" children={<div />} />) === ReactIs.SuspenseList; // true

‎types/react/experimental.d.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,44 +51,46 @@ declare module "." {
5151
unstable_expectedLoadTime?: number | undefined;
5252
}
5353

54-
export type SuspenseListRevealOrder = "forwards" | "backwards" | "together";
55-
export type SuspenseListTailMode = "collapsed" | "hidden";
54+
export type SuspenseListRevealOrder = "forwards" | "backwards" | "together" | "independent";
55+
export type SuspenseListTailMode = "collapsed" | "hidden" | "visible";
5656

5757
export interface SuspenseListCommonProps {
58+
}
59+
60+
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
5861
/**
5962
* Note that SuspenseList require more than one child;
6063
* it is a runtime warning to provide only a single child.
6164
*
6265
* It does, however, allow those children to be wrapped inside a single
6366
* level of `<React.Fragment>`.
6467
*/
65-
children: ReactElement | Iterable<ReactElement>;
66-
}
67-
68-
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
68+
children: Iterable<ReactElement> | AsyncIterable<ReactElement>;
6969
/**
7070
* Defines the order in which the `SuspenseList` children should be revealed.
7171
*/
72-
revealOrder: "forwards" | "backwards";
72+
revealOrder: "forwards" | "backwards" | "unstable_legacy-backwards";
7373
/**
7474
* Dictates how unloaded items in a SuspenseList is shown.
7575
*
7676
* - By default, `SuspenseList` will show all fallbacks in the list.
7777
* - `collapsed` shows only the next fallback in the list.
78-
* - `hidden` doesn’t show any unloaded items.
78+
* - `hidden` doesn't show any unloaded items.
79+
* - `visible` shows all fallbacks in the list.
7980
*/
80-
tail?: SuspenseListTailMode | undefined;
81+
tail: SuspenseListTailMode;
8182
}
8283

8384
interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
85+
children: ReactNode;
8486
/**
8587
* Defines the order in which the `SuspenseList` children should be revealed.
8688
*/
87-
revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
89+
revealOrder: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
8890
/**
8991
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
9092
*/
91-
tail?: never | undefined;
93+
tail?: never;
9294
}
9395

9496
export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;

‎types/react/test/experimental.tsx‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,43 @@ function suspenseTest() {
2222
}
2323
}
2424

25+
// @ts-expect-error -- no revealOrder
26+
<React.unstable_SuspenseList>
27+
<React.Suspense fallback="Loading">Content</React.Suspense>
28+
</React.unstable_SuspenseList>;
2529
// Unsupported `revealOrder` triggers a runtime warning
2630
// @ts-expect-error
2731
<React.unstable_SuspenseList revealOrder="something">
2832
<React.Suspense fallback="Loading">Content</React.Suspense>
2933
</React.unstable_SuspenseList>;
3034

31-
<React.unstable_SuspenseList revealOrder="backwards">
35+
// @ts-expect-error -- no tail
36+
<React.unstable_SuspenseList revealOrder="forwards">
37+
<React.Suspense fallback="Loading">Content</React.Suspense>
38+
<React.Suspense fallback="Loading">Content</React.Suspense>
39+
</React.unstable_SuspenseList>;
40+
41+
<React.unstable_SuspenseList revealOrder="backwards" tail="collapsed">
3242
<React.Suspense fallback="Loading">A</React.Suspense>
3343
<React.Suspense fallback="Loading">B</React.Suspense>
3444
</React.unstable_SuspenseList>;
3545

36-
<React.unstable_SuspenseList revealOrder="forwards">
46+
// @ts-expect-error -- Must have more than one static child
47+
<React.unstable_SuspenseList revealOrder="backwards" tail="collapsed">
48+
<React.Suspense fallback="Loading">B</React.Suspense>
49+
</React.unstable_SuspenseList>;
50+
51+
<React.unstable_SuspenseList revealOrder="unstable_legacy-backwards" tail="collapsed">
52+
<React.Suspense fallback="Loading">A</React.Suspense>
53+
<React.Suspense fallback="Loading">B</React.Suspense>
54+
</React.unstable_SuspenseList>;
55+
56+
<React.unstable_SuspenseList revealOrder="independent">
57+
<React.Suspense fallback="Loading">A</React.Suspense>
58+
<React.Suspense fallback="Loading">B</React.Suspense>
59+
</React.unstable_SuspenseList>;
60+
61+
<React.unstable_SuspenseList revealOrder="forwards" tail="hidden">
3762
<React.Suspense fallback="Loading">A</React.Suspense>
3863
<React.Suspense fallback="Loading">B</React.Suspense>
3964
</React.unstable_SuspenseList>;
@@ -43,6 +68,15 @@ function suspenseTest() {
4368
<React.Suspense fallback="Loading">B</React.Suspense>
4469
</React.unstable_SuspenseList>;
4570

71+
function Page({ children }: { children: NonNullable<React.ReactNode> }) {
72+
return (
73+
// @ts-expect-error -- Can't pass arbitrary Nodes. Must be an Element or Iterable of Elements.
74+
<React.unstable_SuspenseList revealOrder="forwards" tail="collapsed">
75+
{children}
76+
</React.unstable_SuspenseList>
77+
);
78+
}
79+
4680
function useEvent() {
4781
// Implicit any
4882
// @ts-expect-error

‎types/react/ts5.0/experimental.d.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,44 +51,46 @@ declare module "." {
5151
unstable_expectedLoadTime?: number | undefined;
5252
}
5353

54-
export type SuspenseListRevealOrder = "forwards" | "backwards" | "together";
55-
export type SuspenseListTailMode = "collapsed" | "hidden";
54+
export type SuspenseListRevealOrder = "forwards" | "backwards" | "together" | "independent";
55+
export type SuspenseListTailMode = "collapsed" | "hidden" | "visible";
5656

5757
export interface SuspenseListCommonProps {
58+
}
59+
60+
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
5861
/**
5962
* Note that SuspenseList require more than one child;
6063
* it is a runtime warning to provide only a single child.
6164
*
6265
* It does, however, allow those children to be wrapped inside a single
6366
* level of `<React.Fragment>`.
6467
*/
65-
children: ReactElement | Iterable<ReactElement>;
66-
}
67-
68-
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
68+
children: Iterable<ReactElement> | AsyncIterable<ReactElement>;
6969
/**
7070
* Defines the order in which the `SuspenseList` children should be revealed.
7171
*/
72-
revealOrder: "forwards" | "backwards";
72+
revealOrder: "forwards" | "backwards" | "unstable_legacy-backwards";
7373
/**
7474
* Dictates how unloaded items in a SuspenseList is shown.
7575
*
7676
* - By default, `SuspenseList` will show all fallbacks in the list.
7777
* - `collapsed` shows only the next fallback in the list.
78-
* - `hidden` doesn’t show any unloaded items.
78+
* - `hidden` doesn't show any unloaded items.
79+
* - `visible` shows all fallbacks in the list.
7980
*/
80-
tail?: SuspenseListTailMode | undefined;
81+
tail: SuspenseListTailMode;
8182
}
8283

8384
interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
85+
children: ReactNode;
8486
/**
8587
* Defines the order in which the `SuspenseList` children should be revealed.
8688
*/
87-
revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
89+
revealOrder: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
8890
/**
8991
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
9092
*/
91-
tail?: never | undefined;
93+
tail?: never;
9294
}
9395

9496
export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;

‎types/react/ts5.0/test/experimental.tsx‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,43 @@ function suspenseTest() {
2222
}
2323
}
2424

25+
// @ts-expect-error -- no revealOrder
26+
<React.unstable_SuspenseList>
27+
<React.Suspense fallback="Loading">Content</React.Suspense>
28+
</React.unstable_SuspenseList>;
2529
// Unsupported `revealOrder` triggers a runtime warning
2630
// @ts-expect-error
2731
<React.unstable_SuspenseList revealOrder="something">
2832
<React.Suspense fallback="Loading">Content</React.Suspense>
2933
</React.unstable_SuspenseList>;
3034

31-
<React.unstable_SuspenseList revealOrder="backwards">
35+
// @ts-expect-error -- no tail
36+
<React.unstable_SuspenseList revealOrder="forwards">
37+
<React.Suspense fallback="Loading">Content</React.Suspense>
38+
<React.Suspense fallback="Loading">Content</React.Suspense>
39+
</React.unstable_SuspenseList>;
40+
41+
<React.unstable_SuspenseList revealOrder="backwards" tail="collapsed">
3242
<React.Suspense fallback="Loading">A</React.Suspense>
3343
<React.Suspense fallback="Loading">B</React.Suspense>
3444
</React.unstable_SuspenseList>;
3545

36-
<React.unstable_SuspenseList revealOrder="forwards">
46+
// @ts-expect-error -- Must have more than one static child
47+
<React.unstable_SuspenseList revealOrder="backwards" tail="collapsed">
48+
<React.Suspense fallback="Loading">B</React.Suspense>
49+
</React.unstable_SuspenseList>;
50+
51+
<React.unstable_SuspenseList revealOrder="unstable_legacy-backwards" tail="collapsed">
52+
<React.Suspense fallback="Loading">A</React.Suspense>
53+
<React.Suspense fallback="Loading">B</React.Suspense>
54+
</React.unstable_SuspenseList>;
55+
56+
<React.unstable_SuspenseList revealOrder="independent">
57+
<React.Suspense fallback="Loading">A</React.Suspense>
58+
<React.Suspense fallback="Loading">B</React.Suspense>
59+
</React.unstable_SuspenseList>;
60+
61+
<React.unstable_SuspenseList revealOrder="forwards" tail="hidden">
3762
<React.Suspense fallback="Loading">A</React.Suspense>
3863
<React.Suspense fallback="Loading">B</React.Suspense>
3964
</React.unstable_SuspenseList>;
@@ -43,6 +68,15 @@ function suspenseTest() {
4368
<React.Suspense fallback="Loading">B</React.Suspense>
4469
</React.unstable_SuspenseList>;
4570

71+
function Page({ children }: { children: NonNullable<React.ReactNode> }) {
72+
return (
73+
// @ts-expect-error -- Can't pass arbitrary Nodes. Must be an Element or Iterable of Elements.
74+
<React.unstable_SuspenseList revealOrder="forwards" tail="collapsed">
75+
{children}
76+
</React.unstable_SuspenseList>
77+
);
78+
}
79+
4680
function useEvent() {
4781
// Implicit any
4882
// @ts-expect-error
@@ -74,17 +108,14 @@ function useEvent() {
74108

75109
function elementTypeTests() {
76110
const ReturnPromise = () => Promise.resolve("React");
77-
// @ts-expect-error Needs https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
78111
const FCPromise: React.FC = ReturnPromise;
79112
class RenderPromise extends React.Component {
80113
render() {
81114
return Promise.resolve("React");
82115
}
83116
}
84117

85-
// @ts-expect-error Needs https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
86118
<ReturnPromise />;
87-
// @ts-expect-error Needs https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
88119
React.createElement(ReturnPromise);
89120
<RenderPromise />;
90121
React.createElement(RenderPromise);

0 commit comments

Comments
 (0)