Skip to content

Commit 7469026

Browse files
eps1loneps1lon
authored
[react] Switch the default revealOrder to "forwards" and tail "hidden" on SuspenseList (DefinitelyTyped#74062)
1 parent 2ff1817 commit 7469026

File tree

4 files changed

+128
-114
lines changed

4 files changed

+128
-114
lines changed

‎types/react/experimental.d.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,25 +69,27 @@ declare module "." {
6969
children: Iterable<ReactElement> | AsyncIterable<ReactElement>;
7070
/**
7171
* Defines the order in which the `SuspenseList` children should be revealed.
72+
* @default "forwards"
7273
*/
73-
revealOrder: "forwards" | "backwards" | "unstable_legacy-backwards";
74+
revealOrder?: "forwards" | "backwards" | "unstable_legacy-backwards" | undefined;
7475
/**
7576
* Dictates how unloaded items in a SuspenseList is shown.
7677
*
77-
* - By default, `SuspenseList` will show all fallbacks in the list.
7878
* - `collapsed` shows only the next fallback in the list.
7979
* - `hidden` doesn't show any unloaded items.
8080
* - `visible` shows all fallbacks in the list.
81+
*
82+
* @default "hidden"
8183
*/
82-
tail: SuspenseListTailMode;
84+
tail?: SuspenseListTailMode | undefined;
8385
}
8486

8587
interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
8688
children: ReactNode;
8789
/**
8890
* Defines the order in which the `SuspenseList` children should be revealed.
8991
*/
90-
revealOrder: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
92+
revealOrder: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]>;
9193
/**
9294
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
9395
*/

‎types/react/test/experimental.tsx‎

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -22,59 +22,64 @@ 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>;
29-
// Unsupported `revealOrder` triggers a runtime warning
30-
// @ts-expect-error
31-
<React.unstable_SuspenseList revealOrder="something">
32-
<React.Suspense fallback="Loading">Content</React.Suspense>
33-
</React.unstable_SuspenseList>;
34-
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">
42-
<React.Suspense fallback="Loading">A</React.Suspense>
43-
<React.Suspense fallback="Loading">B</React.Suspense>
44-
</React.unstable_SuspenseList>;
45-
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">
62-
<React.Suspense fallback="Loading">A</React.Suspense>
63-
<React.Suspense fallback="Loading">B</React.Suspense>
64-
</React.unstable_SuspenseList>;
65-
66-
<React.unstable_SuspenseList revealOrder="together">
67-
<React.Suspense fallback="Loading">A</React.Suspense>
68-
<React.Suspense fallback="Loading">B</React.Suspense>
69-
</React.unstable_SuspenseList>;
70-
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-
);
25+
function suspenseListTests() {
26+
<React.unstable_SuspenseList>
27+
<React.Suspense fallback="Loading">Content</React.Suspense>
28+
<React.Suspense fallback="Loading">Content</React.Suspense>
29+
</React.unstable_SuspenseList>;
30+
// @ts-expect-error -- Directional SuspenseList needs more than one child
31+
<React.unstable_SuspenseList>
32+
<React.Suspense fallback="Loading">Content</React.Suspense>
33+
</React.unstable_SuspenseList>;
34+
// Unsupported `revealOrder` triggers a runtime warning
35+
// @ts-expect-error
36+
<React.unstable_SuspenseList revealOrder="something">
37+
<React.Suspense fallback="Loading">Content</React.Suspense>
38+
</React.unstable_SuspenseList>;
39+
40+
<React.unstable_SuspenseList revealOrder="forwards">
41+
<React.Suspense fallback="Loading">Content</React.Suspense>
42+
<React.Suspense fallback="Loading">Content</React.Suspense>
43+
</React.unstable_SuspenseList>;
44+
45+
<React.unstable_SuspenseList revealOrder="backwards" tail="collapsed">
46+
<React.Suspense fallback="Loading">A</React.Suspense>
47+
<React.Suspense fallback="Loading">B</React.Suspense>
48+
</React.unstable_SuspenseList>;
49+
50+
// @ts-expect-error -- Must have more than one static child
51+
<React.unstable_SuspenseList revealOrder="backwards" tail="collapsed">
52+
<React.Suspense fallback="Loading">B</React.Suspense>
53+
</React.unstable_SuspenseList>;
54+
55+
<React.unstable_SuspenseList revealOrder="unstable_legacy-backwards" tail="collapsed">
56+
<React.Suspense fallback="Loading">A</React.Suspense>
57+
<React.Suspense fallback="Loading">B</React.Suspense>
58+
</React.unstable_SuspenseList>;
59+
60+
<React.unstable_SuspenseList revealOrder="independent">
61+
<React.Suspense fallback="Loading">A</React.Suspense>
62+
<React.Suspense fallback="Loading">B</React.Suspense>
63+
</React.unstable_SuspenseList>;
64+
65+
<React.unstable_SuspenseList revealOrder="forwards" tail="hidden">
66+
<React.Suspense fallback="Loading">A</React.Suspense>
67+
<React.Suspense fallback="Loading">B</React.Suspense>
68+
</React.unstable_SuspenseList>;
69+
70+
<React.unstable_SuspenseList revealOrder="together">
71+
<React.Suspense fallback="Loading">A</React.Suspense>
72+
<React.Suspense fallback="Loading">B</React.Suspense>
73+
</React.unstable_SuspenseList>;
74+
75+
function Page({ children }: { children: NonNullable<React.ReactNode> }) {
76+
return (
77+
// @ts-expect-error -- Can't pass arbitrary Nodes. Must be an Element or Iterable of Elements.
78+
<React.unstable_SuspenseList revealOrder="forwards" tail="collapsed">
79+
{children}
80+
</React.unstable_SuspenseList>
81+
);
82+
}
7883
}
7984

8085
function elementTypeTests() {

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,25 +69,27 @@ declare module "." {
6969
children: Iterable<ReactElement> | AsyncIterable<ReactElement>;
7070
/**
7171
* Defines the order in which the `SuspenseList` children should be revealed.
72+
* @default "forwards"
7273
*/
73-
revealOrder: "forwards" | "backwards" | "unstable_legacy-backwards";
74+
revealOrder?: "forwards" | "backwards" | "unstable_legacy-backwards" | undefined;
7475
/**
7576
* Dictates how unloaded items in a SuspenseList is shown.
7677
*
77-
* - By default, `SuspenseList` will show all fallbacks in the list.
7878
* - `collapsed` shows only the next fallback in the list.
7979
* - `hidden` doesn't show any unloaded items.
8080
* - `visible` shows all fallbacks in the list.
81+
*
82+
* @default "hidden"
8183
*/
82-
tail: SuspenseListTailMode;
84+
tail?: SuspenseListTailMode | undefined;
8385
}
8486

8587
interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
8688
children: ReactNode;
8789
/**
8890
* Defines the order in which the `SuspenseList` children should be revealed.
8991
*/
90-
revealOrder: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
92+
revealOrder: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]>;
9193
/**
9294
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
9395
*/

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

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -22,59 +22,64 @@ 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>;
29-
// Unsupported `revealOrder` triggers a runtime warning
30-
// @ts-expect-error
31-
<React.unstable_SuspenseList revealOrder="something">
32-
<React.Suspense fallback="Loading">Content</React.Suspense>
33-
</React.unstable_SuspenseList>;
34-
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">
42-
<React.Suspense fallback="Loading">A</React.Suspense>
43-
<React.Suspense fallback="Loading">B</React.Suspense>
44-
</React.unstable_SuspenseList>;
45-
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">
62-
<React.Suspense fallback="Loading">A</React.Suspense>
63-
<React.Suspense fallback="Loading">B</React.Suspense>
64-
</React.unstable_SuspenseList>;
65-
66-
<React.unstable_SuspenseList revealOrder="together">
67-
<React.Suspense fallback="Loading">A</React.Suspense>
68-
<React.Suspense fallback="Loading">B</React.Suspense>
69-
</React.unstable_SuspenseList>;
70-
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-
);
25+
function suspenseListTests() {
26+
<React.unstable_SuspenseList>
27+
<React.Suspense fallback="Loading">Content</React.Suspense>
28+
<React.Suspense fallback="Loading">Content</React.Suspense>
29+
</React.unstable_SuspenseList>;
30+
// @ts-expect-error -- Directional SuspenseList needs more than one child
31+
<React.unstable_SuspenseList>
32+
<React.Suspense fallback="Loading">Content</React.Suspense>
33+
</React.unstable_SuspenseList>;
34+
// Unsupported `revealOrder` triggers a runtime warning
35+
// @ts-expect-error
36+
<React.unstable_SuspenseList revealOrder="something">
37+
<React.Suspense fallback="Loading">Content</React.Suspense>
38+
</React.unstable_SuspenseList>;
39+
40+
<React.unstable_SuspenseList revealOrder="forwards">
41+
<React.Suspense fallback="Loading">Content</React.Suspense>
42+
<React.Suspense fallback="Loading">Content</React.Suspense>
43+
</React.unstable_SuspenseList>;
44+
45+
<React.unstable_SuspenseList revealOrder="backwards" tail="collapsed">
46+
<React.Suspense fallback="Loading">A</React.Suspense>
47+
<React.Suspense fallback="Loading">B</React.Suspense>
48+
</React.unstable_SuspenseList>;
49+
50+
// @ts-expect-error -- Must have more than one static child
51+
<React.unstable_SuspenseList revealOrder="backwards" tail="collapsed">
52+
<React.Suspense fallback="Loading">B</React.Suspense>
53+
</React.unstable_SuspenseList>;
54+
55+
<React.unstable_SuspenseList revealOrder="unstable_legacy-backwards" tail="collapsed">
56+
<React.Suspense fallback="Loading">A</React.Suspense>
57+
<React.Suspense fallback="Loading">B</React.Suspense>
58+
</React.unstable_SuspenseList>;
59+
60+
<React.unstable_SuspenseList revealOrder="independent">
61+
<React.Suspense fallback="Loading">A</React.Suspense>
62+
<React.Suspense fallback="Loading">B</React.Suspense>
63+
</React.unstable_SuspenseList>;
64+
65+
<React.unstable_SuspenseList revealOrder="forwards" tail="hidden">
66+
<React.Suspense fallback="Loading">A</React.Suspense>
67+
<React.Suspense fallback="Loading">B</React.Suspense>
68+
</React.unstable_SuspenseList>;
69+
70+
<React.unstable_SuspenseList revealOrder="together">
71+
<React.Suspense fallback="Loading">A</React.Suspense>
72+
<React.Suspense fallback="Loading">B</React.Suspense>
73+
</React.unstable_SuspenseList>;
74+
75+
function Page({ children }: { children: NonNullable<React.ReactNode> }) {
76+
return (
77+
// @ts-expect-error -- Can't pass arbitrary Nodes. Must be an Element or Iterable of Elements.
78+
<React.unstable_SuspenseList revealOrder="forwards" tail="collapsed">
79+
{children}
80+
</React.unstable_SuspenseList>
81+
);
82+
}
7883
}
7984

8085
function elementTypeTests() {

0 commit comments

Comments
 (0)