From a34a068612521f4536d09d3abd57b5b2f41d789f Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 27 Oct 2020 20:05:58 +0100 Subject: [PATCH] react(-dom): Update experimental typings (#49152) * react: Remove timeoutMS * react: Add unstable_startTransition * Fix new lint rules * Add unstable_expectedLoadTime * react-dom: Remove unstable_discreteUpdates and unstable_flushDiscreteUpdates --- types/react-dom/experimental.d.ts | 15 --------- types/react-dom/test/experimental-tests.tsx | 9 ------ types/react/experimental.d.ts | 35 +++++++++++---------- types/react/test/experimental.tsx | 28 +++++++++++++++-- 4 files changed, 44 insertions(+), 43 deletions(-) diff --git a/types/react-dom/experimental.d.ts b/types/react-dom/experimental.d.ts index b1a69359bf1288..0aa652c5b5c24f 100644 --- a/types/react-dom/experimental.d.ts +++ b/types/react-dom/experimental.d.ts @@ -76,21 +76,6 @@ declare module '.' { */ function unstable_createRoot(container: Element | Document | DocumentFragment | Comment, options?: RootOptions): Root; - function unstable_discreteUpdates(callback: () => R): R; - - function unstable_discreteUpdates(callback: (a1: A1) => R, a1: A1): R; - - function unstable_discreteUpdates(callback: (a1: A1, a2: A2) => R, a1: A1, a2: A2): R; - - function unstable_discreteUpdates( - callback: (a1: A1, a2: A2, a3: A3) => R, - a1: A1, - a2: A2, - a3: A3, - ): R; - - function unstable_flushDiscreteUpdates(): void; - function unstable_flushControlled(callback: () => void): void; // enableSelectiveHydration feature diff --git a/types/react-dom/test/experimental-tests.tsx b/types/react-dom/test/experimental-tests.tsx index 11765a6c4d23fd..cd6a07b903b600 100644 --- a/types/react-dom/test/experimental-tests.tsx +++ b/types/react-dom/test/experimental-tests.tsx @@ -25,14 +25,5 @@ function createBlockingRoot() { } function updates() { - // $ExpectType 0 - ReactDOM.unstable_discreteUpdates((): 0 => 0); - // $ExpectType number - ReactDOM.unstable_discreteUpdates((foo: number) => foo, 1); - // $ExpectError - ReactDOM.unstable_discreteUpdates((foo: number) => foo); - - ReactDOM.unstable_flushDiscreteUpdates(); - ReactDOM.unstable_flushControlled(() => {}); } diff --git a/types/react/experimental.d.ts b/types/react/experimental.d.ts index 49cf7486fc182a..2e0aa293076e73 100644 --- a/types/react/experimental.d.ts +++ b/types/react/experimental.d.ts @@ -39,6 +39,15 @@ import React = require('.'); export {}; declare module '.' { + export interface SuspenseProps { + /** + * The presence of this prop indicates that the content is computationally expensive to render. + * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data). + * @see {@link https://github.com/facebook/react/pull/19936} + */ + unstable_expectedLoadTime?: number; + } + export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together'; export type SuspenseListTailMode = 'collapsed' | 'hidden'; @@ -94,7 +103,7 @@ declare module '.' { */ export const unstable_SuspenseList: ExoticComponent; - export interface SuspenseConfig extends TimeoutConfig { + export interface SuspenseConfig { busyDelayMs?: number; busyMinDurationMs?: number; } @@ -105,17 +114,6 @@ declare module '.' { config: SuspenseConfig | null | undefined, ): void; - export interface TimeoutConfig { - /** - * This timeout (in milliseconds) tells React how long to wait before showing the next state. - * - * React will always try to use a shorter lag when network and device allows it. - * - * **NOTE: We recommend that you share Suspense Config between different modules.** - */ - timeoutMs: number; - } - // must be synchronous export type TransitionFunction = () => void | undefined; // strange definition to allow vscode to show documentation on the invocation @@ -139,11 +137,10 @@ declare module '.' { * A good example of this is a text input. * * @param value The value that is going to be deferred - * @param config An optional object with `timeoutMs` * * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue */ - export function unstable_useDeferredValue(value: T, config?: TimeoutConfig | null): T; + export function unstable_useDeferredValue(value: T): T; /** * Allows components to avoid undesirable loading states by waiting for content to load @@ -164,9 +161,6 @@ declare module '.' { */ export function unstable_useTransition(config?: SuspenseConfig | null): [TransitionStartFunction, boolean]; - /** - * @private - */ const opaqueIdentifierBranding: unique symbol; /** * WARNING: Don't use this as a `string`. @@ -185,4 +179,11 @@ declare module '.' { }; export function unstable_useOpaqueIdentifier(): OpaqueIdentifier; + + /** + * Similar to `useTransition` but allows uses where hooks are not available. + * + * @param callback A _synchronous_ function which causes state updates that can be deferred. + */ + export function unstable_startTransition(scope: TransitionFunction): void; } diff --git a/types/react/test/experimental.tsx b/types/react/test/experimental.tsx index f71035a7f139f8..6a2f135ed2e632 100644 --- a/types/react/test/experimental.tsx +++ b/types/react/test/experimental.tsx @@ -8,13 +8,12 @@ function useExperimentalHooks() { const [startTransition, done] = React.unstable_useTransition({ busyMinDurationMs: 100, busyDelayMs: 200, - timeoutMs: 300, }); // $ExpectType boolean done; // $ExpectType boolean - const deferredToggle = React.unstable_useDeferredValue(toggle, { timeoutMs: 500 }); + const deferredToggle = React.unstable_useDeferredValue(toggle); const [func] = React.useState(() => () => 0); @@ -69,3 +68,28 @@ function InvalidOpaqueIdentifierUsage() { return null; } + +function startTransitionTest() { + function transitionToPage(page: string) {} + + React.unstable_startTransition(() => { + transitionToPage('/'); + }); + + // $ExpectError + React.unstable_startTransition(async () => {}); +} + +function suspenseTest() { + function DisplayData() { + return null; + } + + function FlameChart() { + return ( + + + + ); + } +}