1 | /**
|
2 | * These are types for things that are present in the `experimental` builds of React but not yet
|
3 | * on a stable build.
|
4 | *
|
5 | * Once they are promoted to stable they can just be moved to the main index file.
|
6 | *
|
7 | * To load the types declared here in an actual project, there are three ways. The easiest one,
|
8 | * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
|
9 | * is to add `"react/experimental"` to the `"types"` array.
|
10 | *
|
11 | * Alternatively, a specific import syntax can to be used from a typescript file.
|
12 | * This module does not exist in reality, which is why the {} is important:
|
13 | *
|
14 | * ```ts
|
15 | * import {} from 'react/experimental'
|
16 | * ```
|
17 | *
|
18 | * It is also possible to include it through a triple-slash reference:
|
19 | *
|
20 | * ```ts
|
21 | * /// <reference types="react/experimental" />
|
22 | * ```
|
23 | *
|
24 | * Either the import or the reference only needs to appear once, anywhere in the project.
|
25 | */
|
26 |
|
27 | // See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared,
|
28 | // and https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js to verify which APIs are
|
29 | // flagged experimental or not. Experimental APIs will be tagged with `__EXPERIMENTAL__`.
|
30 | //
|
31 | // For the inputs of types exported as simply a fiber tag, the `beginWork` function of ReactFiberBeginWork.js
|
32 | // is a good place to start looking for details; it generally calls prop validation functions or delegates
|
33 | // all tasks done as part of the render phase (the concurrent part of the React update cycle).
|
34 | //
|
35 | // Suspense-related handling can be found in ReactFiberThrow.js.
|
36 |
|
37 | import React = require('.');
|
38 |
|
39 | export {};
|
40 |
|
41 | declare module '.' {
|
42 | export interface SuspenseProps {
|
43 | /**
|
44 | * The presence of this prop indicates that the content is computationally expensive to render.
|
45 | * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
|
46 | * @see {@link https://github.com/facebook/react/pull/19936}
|
47 | */
|
48 | unstable_expectedLoadTime?: number;
|
49 | }
|
50 |
|
51 | export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';
|
52 | export type SuspenseListTailMode = 'collapsed' | 'hidden';
|
53 |
|
54 | export interface SuspenseListCommonProps {
|
55 | /**
|
56 | * Note that SuspenseList require more than one child;
|
57 | * it is a runtime warning to provide only a single child.
|
58 | *
|
59 | * It does, however, allow those children to be wrapped inside a single
|
60 | * level of `<React.Fragment>`.
|
61 | */
|
62 | children: ReactElement | Iterable<ReactElement>;
|
63 | }
|
64 |
|
65 | interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
|
66 | /**
|
67 | * Defines the order in which the `SuspenseList` children should be revealed.
|
68 | */
|
69 | revealOrder: 'forwards' | 'backwards';
|
70 | /**
|
71 | * Dictates how unloaded items in a SuspenseList is shown.
|
72 | *
|
73 | * - By default, `SuspenseList` will show all fallbacks in the list.
|
74 | * - `collapsed` shows only the next fallback in the list.
|
75 | * - `hidden` doesn’t show any unloaded items.
|
76 | */
|
77 | tail?: SuspenseListTailMode;
|
78 | }
|
79 |
|
80 | interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
|
81 | /**
|
82 | * Defines the order in which the `SuspenseList` children should be revealed.
|
83 | */
|
84 | revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps['revealOrder']>;
|
85 | /**
|
86 | * The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
|
87 | */
|
88 | tail?: never;
|
89 | }
|
90 |
|
91 | export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;
|
92 |
|
93 | /**
|
94 | * `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
|
95 | * in which these components are revealed to the user.
|
96 | *
|
97 | * When multiple components need to fetch data, this data may arrive in an unpredictable order.
|
98 | * However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
|
99 | * until previous items have been displayed (this behavior is adjustable).
|
100 | *
|
101 | * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
|
102 | * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
|
103 | */
|
104 | export const unstable_SuspenseList: ExoticComponent<SuspenseListProps>;
|
105 |
|
106 | export interface SuspenseConfig {
|
107 | busyDelayMs?: number;
|
108 | busyMinDurationMs?: number;
|
109 | }
|
110 |
|
111 | // undocumented, considered for removal
|
112 | export function unstable_withSuspenseConfig(
|
113 | scope: () => void | undefined,
|
114 | config: SuspenseConfig | null | undefined,
|
115 | ): void;
|
116 |
|
117 | // must be synchronous
|
118 | export type TransitionFunction = () => void | undefined;
|
119 | // strange definition to allow vscode to show documentation on the invocation
|
120 | export interface TransitionStartFunction {
|
121 | /**
|
122 | * State updates caused inside the callback are allowed to be deferred.
|
123 | *
|
124 | * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
|
125 | *
|
126 | * @param callback A _synchronous_ function which causes state updates that can be deferred.
|
127 | */
|
128 | (callback: TransitionFunction): void;
|
129 | }
|
130 |
|
131 | /**
|
132 | * Returns a deferred version of the value that may “lag behind” it for at most `timeoutMs`.
|
133 | *
|
134 | * This is commonly used to keep the interface responsive when you have something that renders immediately
|
135 | * based on user input and something that needs to wait for a data fetch.
|
136 | *
|
137 | * A good example of this is a text input.
|
138 | *
|
139 | * @param value The value that is going to be deferred
|
140 | *
|
141 | * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue
|
142 | */
|
143 | export function unstable_useDeferredValue<T>(value: T): T;
|
144 |
|
145 | /**
|
146 | * Allows components to avoid undesirable loading states by waiting for content to load
|
147 | * before transitioning to the next screen. It also allows components to defer slower,
|
148 | * data fetching updates until subsequent renders so that more crucial updates can be
|
149 | * rendered immediately.
|
150 | *
|
151 | * The `useTransition` hook returns two values in an array.
|
152 | *
|
153 | * The first is a function that takes a callback. We can use it to tell React which state we want to defer.
|
154 | * The seconda boolean. It’s React’s way of informing us whether we’re waiting for the transition to finish.
|
155 | *
|
156 | * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**
|
157 | *
|
158 | * @param config An optional object with `timeoutMs`
|
159 | *
|
160 | * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition
|
161 | */
|
162 | export function unstable_useTransition(config?: SuspenseConfig | null): [TransitionStartFunction, boolean];
|
163 |
|
164 | const opaqueIdentifierBranding: unique symbol;
|
165 | /**
|
166 | * WARNING: Don't use this as a `string`.
|
167 | *
|
168 | * This is an opaque type that is not supposed to type-check structurally.
|
169 | * It is only valid if returned from React methods and passed to React e.g. `<button aria-labelledby={opaqueIdentifier} />`
|
170 | */
|
171 | // We can't create a type that would be rejected for string concatenation or `.toString()` calls.
|
172 | // So in order to not have to add `string | OpaqueIdentifier` to every react-dom host prop we intersect it with `string`.
|
173 | type OpaqueIdentifier = string & {
|
174 | readonly [opaqueIdentifierBranding]: unknown;
|
175 | // While this would cause `const stringified: string = opaqueIdentifier.toString()` to not type-check it also adds completions while typing.
|
176 | // It would also still allow string concatenation.
|
177 | // Unsure which is better. Not type-checking or not suggesting.
|
178 | // toString(): void;
|
179 | };
|
180 |
|
181 | export function unstable_useOpaqueIdentifier(): OpaqueIdentifier;
|
182 |
|
183 | /**
|
184 | * Similar to `useTransition` but allows uses where hooks are not available.
|
185 | *
|
186 | * @param callback A _synchronous_ function which causes state updates that can be deferred.
|
187 | */
|
188 | export function unstable_startTransition(scope: TransitionFunction): void;
|
189 | }
|