Move experimental APIs to stable for React 18

See facebook/react#21488.
steinybot · Aug 10, 2022 · a412e3a · a412e3a
1 parent 2d2f21e
commit a412e3a
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 128 deletions.
diff --git a/types/react-is/index.d.ts b/types/react-is/index.d.ts
@@ -1,15 +1,11 @@
-// Type definitions for react-is 17.0
+// Type definitions for react-is 18.0
 // Project: https://reactjs.org/
 // Definitions by: Avi Vahl <https://github.com/AviVahl>
 //                 Christian Chown <https://github.com/christianchown>
 //                 Sebastian Silbermann <https://github.com/eps1lon>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-// NOTE: Users of the React 18 alpha should add a reference
-// to 'react-is/next' in their project. See next.d.ts's top comment
-// for reference and documentation on how exactly to do it.
-
 export as namespace ReactIs;
 
 import {
@@ -33,6 +29,7 @@ export function isProfiler(value: any): value is ReactElement;
 export function isPortal(value: any): value is ReactElement;
 export function isStrictMode(value: any): value is ReactElement;
 export function isSuspense(value: any): value is ReactElement;
+export function isSuspenseList(value: any): value is ReactElement;
 
 export const AsyncMode: symbol;
 export const ContextConsumer: symbol;
@@ -46,3 +43,4 @@ export const Portal: symbol;
 export const Profiler: symbol;
 export const StrictMode: symbol;
 export const Suspense: symbol;
+export const SuspenseList: symbol;
diff --git a/types/react-is/next.d.ts b/types/react-is/next.d.ts
diff --git a/types/react-is/test/next-tests.tsx b/types/react-is/test/next-tests.tsx
diff --git a/types/react-is/test/react-is-tests.tsx b/types/react-is/test/react-is-tests.tsx
@@ -96,3 +96,7 @@ ReactIs.typeOf(MemoComponent) === ReactIs.Memo; // true
 // Suspense
 ReactIs.isForwardRef(<React.Suspense fallback={<FunctionComponent />} />); // true
 ReactIs.typeOf(<React.Suspense fallback={<FunctionComponent />} />) === ReactIs.Suspense; // true
+
+// SuspenseList
+ReactIs.isSuspenseList(<React.SuspenseList children={<div />} />); // true
+ReactIs.typeOf(<React.SuspenseList children={<div />} />) === ReactIs.SuspenseList; // true
diff --git a/types/react-is/tsconfig.json b/types/react-is/tsconfig.json
@@ -20,7 +20,6 @@
     },
     "files": [
         "index.d.ts",
-        "test/react-is-tests.tsx",
-        "test/next-tests.tsx"
+        "test/react-is-tests.tsx"
     ]
 }
diff --git a/types/react/experimental.d.ts b/types/react/experimental.d.ts
@@ -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>;
 }
diff --git a/types/react/index.d.ts b/types/react/index.d.ts
@@ -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;
 
     /**

diff --git a/types/react/test/experimental.tsx b/types/react/test/experimental.tsx
@@ -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>;
diff --git a/types/react/test/tsx.tsx b/types/react/test/tsx.tsx
@@ -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 };