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("./canary");
|
38 |
|
39 | export {};
|
40 |
|
41 | declare const UNDEFINED_VOID_ONLY: unique symbol;
|
42 | type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
|
43 |
|
44 | declare module "." {
|
45 | /**
|
46 | * @internal Use `Awaited<ReactNode>` instead
|
47 | */
|
48 | // Helper type to enable `Awaited<ReactNode>`.
|
49 | // Must be a copy of the non-thenables of `ReactNode`.
|
50 | type AwaitedReactNode =
|
51 | | ReactElement
|
52 | | string
|
53 | | number
|
54 | | Iterable<AwaitedReactNode>
|
55 | | ReactPortal
|
56 | | boolean
|
57 | | null
|
58 | | undefined;
|
59 | interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {
|
60 | promises: Promise<AwaitedReactNode>;
|
61 | }
|
62 |
|
63 | export interface SuspenseProps {
|
64 | /**
|
65 | * The presence of this prop indicates that the content is computationally expensive to render.
|
66 | * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
|
67 | * @see {@link https://github.com/facebook/react/pull/19936}
|
68 | */
|
69 | unstable_expectedLoadTime?: number | undefined;
|
70 | }
|
71 |
|
72 | export type SuspenseListRevealOrder = "forwards" | "backwards" | "together";
|
73 | export type SuspenseListTailMode = "collapsed" | "hidden";
|
74 |
|
75 | export interface SuspenseListCommonProps {
|
76 | /**
|
77 | * Note that SuspenseList require more than one child;
|
78 | * it is a runtime warning to provide only a single child.
|
79 | *
|
80 | * It does, however, allow those children to be wrapped inside a single
|
81 | * level of `<React.Fragment>`.
|
82 | */
|
83 | children: ReactElement | Iterable<ReactElement>;
|
84 | }
|
85 |
|
86 | interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
|
87 | /**
|
88 | * Defines the order in which the `SuspenseList` children should be revealed.
|
89 | */
|
90 | revealOrder: "forwards" | "backwards";
|
91 | /**
|
92 | * Dictates how unloaded items in a SuspenseList is shown.
|
93 | *
|
94 | * - By default, `SuspenseList` will show all fallbacks in the list.
|
95 | * - `collapsed` shows only the next fallback in the list.
|
96 | * - `hidden` doesn’t show any unloaded items.
|
97 | */
|
98 | tail?: SuspenseListTailMode | undefined;
|
99 | }
|
100 |
|
101 | interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
|
102 | /**
|
103 | * Defines the order in which the `SuspenseList` children should be revealed.
|
104 | */
|
105 | revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
|
106 | /**
|
107 | * The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
|
108 | */
|
109 | tail?: never | undefined;
|
110 | }
|
111 |
|
112 | export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;
|
113 |
|
114 | /**
|
115 | * `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
|
116 | * in which these components are revealed to the user.
|
117 | *
|
118 | * When multiple components need to fetch data, this data may arrive in an unpredictable order.
|
119 | * However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
|
120 | * until previous items have been displayed (this behavior is adjustable).
|
121 | *
|
122 | * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
|
123 | * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
|
124 | */
|
125 | export const unstable_SuspenseList: ExoticComponent<SuspenseListProps>;
|
126 |
|
127 | // eslint-disable-next-line @typescript-eslint/ban-types
|
128 | export function experimental_useEffectEvent<T extends Function>(event: T): T;
|
129 |
|
130 | type Reference = object;
|
131 | type TaintableUniqueValue = string | bigint | ArrayBufferView;
|
132 | function experimental_taintUniqueValue(
|
133 | message: string | undefined,
|
134 | lifetime: Reference,
|
135 | value: TaintableUniqueValue,
|
136 | ): void;
|
137 | function experimental_taintObjectReference(message: string | undefined, object: Reference): void;
|
138 |
|
139 | export interface HTMLAttributes<T> {
|
140 | /**
|
141 | * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
|
142 | */
|
143 | inert?: boolean | undefined;
|
144 | }
|
145 | }
|