From a412e3a7fa3642821bda45a3f8852e0639edf9bb Mon Sep 17 00:00:00 2001 From: Jason Pickens Date: Wed, 10 Aug 2022 12:18:43 +1200 Subject: [PATCH] Move experimental APIs to stable for React 18 See https://github.com/facebook/react/pull/21488. --- types/react-is/index.d.ts | 8 ++-- types/react-is/next.d.ts | 37 ----------------- types/react-is/test/next-tests.tsx | 8 ---- types/react-is/test/react-is-tests.tsx | 4 ++ types/react-is/tsconfig.json | 3 +- types/react/experimental.d.ts | 55 ------------------------- types/react/index.d.ts | 56 ++++++++++++++++++++++++++ types/react/test/experimental.tsx | 21 ---------- types/react/test/tsx.tsx | 21 ++++++++++ 9 files changed, 85 insertions(+), 128 deletions(-) delete mode 100644 types/react-is/next.d.ts delete mode 100644 types/react-is/test/next-tests.tsx diff --git a/types/react-is/index.d.ts b/types/react-is/index.d.ts index cc7d946d02cf63..b23f4d8e1ccc5e 100644 --- a/types/react-is/index.d.ts +++ b/types/react-is/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-is 17.0 +// Type definitions for react-is 18.0 // Project: https://reactjs.org/ // Definitions by: Avi Vahl // Christian Chown @@ -6,10 +6,6 @@ // 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 deleted file mode 100644 index 38ea9ba7d6d881..00000000000000 --- a/types/react-is/next.d.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * These are types for things that are present in the React 18 alpha. - * - * Once React 18 is released they can just be moved to the main index file. - * - * To load the types declared here in an actual project, there are three ways. The easiest one, - * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section, - * is to add `"react-is/next"` to the `"types"` array. - * - * Alternatively, a specific import syntax can to be used from a typescript file. - * This module does not exist in reality, which is why the {} is important: - * - * ```ts - * import {} from 'react-is/next' - * ``` - * - * It is also possible to include it through a triple-slash reference: - * - * ```ts - * /// - * ``` - * - * Either the import or the reference only needs to appear once, anywhere in the project. - */ - -// See https://github.com/facebook/react/blob/master/packages/react-is/src/ReactIs.js to see how the exports are declared, - -import ReactIs = require('.'); -import { ReactElement } from 'react'; - -export {}; - -declare module '.' { - function isSuspenseList(value: any): value is ReactElement; - - const SuspenseList: symbol; -} diff --git a/types/react-is/test/next-tests.tsx b/types/react-is/test/next-tests.tsx deleted file mode 100644 index ace470733edbec..00000000000000 --- a/types/react-is/test/next-tests.tsx +++ /dev/null @@ -1,8 +0,0 @@ -/// -import * as React from 'react'; -import * as ReactIs from 'react-is'; -import 'react-is/next'; - -// Suspense -ReactIs.isSuspenseList(} />); // true -ReactIs.typeOf(} />) === ReactIs.SuspenseList; // true diff --git a/types/react-is/test/react-is-tests.tsx b/types/react-is/test/react-is-tests.tsx index 86846fee3e333e..aeeea06cfe7ed8 100644 --- 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(} />); // true ReactIs.typeOf(} />) === ReactIs.Suspense; // true + +// SuspenseList +ReactIs.isSuspenseList(} />); // true +ReactIs.typeOf(} />) === ReactIs.SuspenseList; // true diff --git a/types/react-is/tsconfig.json b/types/react-is/tsconfig.json index 8fbc77ee86591e..e8374f1677b438 100644 --- 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 index fe1902f5630f25..7d159dcb3f0edc 100644 --- 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 ``. - */ - children: ReactElement | Iterable; - } - - 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 | 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; } diff --git a/types/react/index.d.ts b/types/react/index.d.ts index c72b5f88a16748..af15ed578d7442 100644 --- a/types/react/index.d.ts +++ b/types/react/index.d.ts @@ -398,6 +398,62 @@ declare namespace React { } const Suspense: ExoticComponent; + + 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 ``. + */ + children: ReactElement | Iterable; + } + + 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 | 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; + const version: string; /** diff --git a/types/react/test/experimental.tsx b/types/react/test/experimental.tsx index 1a37d5d269006d..f694bdf5dc0bc3 100644 --- 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 - - Content -; - - - A - B -; - - - A - B -; - - - A - B -; diff --git a/types/react/test/tsx.tsx b/types/react/test/tsx.tsx index 69eb9891a26255..622e69d21e2069 100644 --- 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 ; +// Unsupported `revealOrder` triggers a runtime warning +// @ts-expect-error + + Content +; + + + A + B +; + + + A + B +; + + + A + B +; + class LegacyContext extends React.Component { static contextTypes = { foo: PropTypes.node.isRequired };