Skip to content

Commit

Permalink
Move experimental APIs to stable for React 18
Browse files Browse the repository at this point in the history
steinybot committed Aug 10, 2022

Verified

This commit was signed with the committer’s verified signature.
steinybot Jason Pickens
1 parent 60f97fb commit 8a92a62
Showing 4 changed files with 77 additions and 76 deletions.
55 changes: 0 additions & 55 deletions types/react/experimental.d.ts
Original file line number Diff line number Diff line change
@@ -47,59 +47,4 @@ declare module '.' {
*/
unstable_expectedLoadTime?: number | undefined;
}

export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';
export type SuspenseListTailMode = 'collapsed' | 'hidden';

export interface SuspenseListCommonProps {
/**
* Note that SuspenseList require more than one child;
* it is a runtime warning to provide only a single child.
*
* It does, however, allow those children to be wrapped inside a single
* level of `<React.Fragment>`.
*/
children: ReactElement | Iterable<ReactElement>;
}

interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
/**
* Defines the order in which the `SuspenseList` children should be revealed.
*/
revealOrder: 'forwards' | 'backwards';
/**
* Dictates how unloaded items in a SuspenseList is shown.
*
* - By default, `SuspenseList` will show all fallbacks in the list.
* - `collapsed` shows only the next fallback in the list.
* - `hidden` doesn’t show any unloaded items.
*/
tail?: SuspenseListTailMode | undefined;
}

interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
/**
* Defines the order in which the `SuspenseList` children should be revealed.
*/
revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps['revealOrder']> | undefined;
/**
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
*/
tail?: never | undefined;
}

export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;

/**
* `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
* in which these components are revealed to the user.
*
* When multiple components need to fetch data, this data may arrive in an unpredictable order.
* However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
* until previous items have been displayed (this behavior is adjustable).
*
* @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
* @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
*/
export const SuspenseList: ExoticComponent<SuspenseListProps>;
}
56 changes: 56 additions & 0 deletions types/react/index.d.ts
Original file line number Diff line number Diff line change
@@ -398,6 +398,62 @@ declare namespace React {
}

const Suspense: ExoticComponent<SuspenseProps>;

export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';
export type SuspenseListTailMode = 'collapsed' | 'hidden';

export interface SuspenseListCommonProps {
/**
* Note that SuspenseList require more than one child;
* it is a runtime warning to provide only a single child.
*
* It does, however, allow those children to be wrapped inside a single
* level of `<React.Fragment>`.
*/
children: ReactElement | Iterable<ReactElement>;
}

interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
/**
* Defines the order in which the `SuspenseList` children should be revealed.
*/
revealOrder: 'forwards' | 'backwards';
/**
* Dictates how unloaded items in a SuspenseList is shown.
*
* - By default, `SuspenseList` will show all fallbacks in the list.
* - `collapsed` shows only the next fallback in the list.
* - `hidden` doesn’t show any unloaded items.
*/
tail?: SuspenseListTailMode | undefined;
}

interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
/**
* Defines the order in which the `SuspenseList` children should be revealed.
*/
revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps['revealOrder']> | undefined;
/**
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
*/
tail?: never | undefined;
}

export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;

/**
* `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
* in which these components are revealed to the user.
*
* When multiple components need to fetch data, this data may arrive in an unpredictable order.
* However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
* until previous items have been displayed (this behavior is adjustable).
*
* @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
* @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
*/
export const SuspenseList: ExoticComponent<SuspenseListProps>;

const version: string;

/**
21 changes: 0 additions & 21 deletions types/react/test/experimental.tsx
Original file line number Diff line number Diff line change
@@ -15,24 +15,3 @@ function suspenseTest() {
);
}
}

// Unsupported `revealOrder` triggers a runtime warning
// @ts-expect-error
<React.SuspenseList revealOrder="something">
<React.Suspense fallback="Loading">Content</React.Suspense>
</React.SuspenseList>;

<React.SuspenseList revealOrder="backwards">
<React.Suspense fallback="Loading">A</React.Suspense>
<React.Suspense fallback="Loading">B</React.Suspense>
</React.SuspenseList>;

<React.SuspenseList revealOrder="forwards">
<React.Suspense fallback="Loading">A</React.Suspense>
<React.Suspense fallback="Loading">B</React.Suspense>
</React.SuspenseList>;

<React.SuspenseList revealOrder="together">
<React.Suspense fallback="Loading">A</React.Suspense>
<React.Suspense fallback="Loading">B</React.Suspense>
</React.SuspenseList>;
21 changes: 21 additions & 0 deletions types/react/test/tsx.tsx
Original file line number Diff line number Diff line change
@@ -347,6 +347,27 @@ const LazyRefForwarding = React.lazy(async () => ({ default: Memoized4 }));
// @ts-expect-error
<React.Suspense fallback={null} unstable_avoidThisFallback />;

// Unsupported `revealOrder` triggers a runtime warning
// @ts-expect-error
<React.SuspenseList revealOrder="something">
<React.Suspense fallback="Loading">Content</React.Suspense>
</React.SuspenseList>;

<React.SuspenseList revealOrder="backwards">
<React.Suspense fallback="Loading">A</React.Suspense>
<React.Suspense fallback="Loading">B</React.Suspense>
</React.SuspenseList>;

<React.SuspenseList revealOrder="forwards">
<React.Suspense fallback="Loading">A</React.Suspense>
<React.Suspense fallback="Loading">B</React.Suspense>
</React.SuspenseList>;

<React.SuspenseList revealOrder="together">
<React.Suspense fallback="Loading">A</React.Suspense>
<React.Suspense fallback="Loading">B</React.Suspense>
</React.SuspenseList>;

class LegacyContext extends React.Component {
static contextTypes = { foo: PropTypes.node.isRequired };

0 comments on commit 8a92a62

Please sign in to comment.