UNPKG

5.25 kBTypeScriptView Raw
1/**
2 * These are types for things that are present in the upcoming React 18 release.
3 *
4 * Once React 18 is released they can just be moved to the main index file.
5 *
6 * To load the types declared here in an actual project, there are three ways. The easiest one,
7 * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
8 * is to add `"react-dom/canary"` to the `"types"` array.
9 *
10 * Alternatively, a specific import syntax can to be used from a typescript file.
11 * This module does not exist in reality, which is why the {} is important:
12 *
13 * ```ts
14 * import {} from 'react-dom/canary'
15 * ```
16 *
17 * It is also possible to include it through a triple-slash reference:
18 *
19 * ```ts
20 * /// <reference types="react-dom/canary" />
21 * ```
22 *
23 * Either the import or the reference only needs to appear once, anywhere in the project.
24 */
25
26// See https://github.com/facebook/react/blob/main/packages/react-dom/index.js to see how the exports are declared,
27// but confirm with published source code (e.g. https://unpkg.com/react-dom@canary) that these exports end up in the published code
28
29import React = require("react");
30import ReactDOM = require(".");
31
32export {};
33
34declare const REACT_FORM_STATE_SIGIL: unique symbol;
35
36declare module "." {
37 function prefetchDNS(href: string): void;
38
39 interface PreconnectOptions {
40 // Don't create a helper type.
41 // It would have to be in module scope to be inlined in TS tooltips.
42 // But then it becomes part of the public API.
43 // TODO: Upstream to microsoft/TypeScript-DOM-lib-generator -> w3c/webref
44 // since the spec has a notion of a dedicated type: https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attribute
45 crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
46 }
47 function preconnect(href: string, options?: PreconnectOptions): void;
48
49 type PreloadAs =
50 | "audio"
51 | "document"
52 | "embed"
53 | "fetch"
54 | "font"
55 | "image"
56 | "object"
57 | "track"
58 | "script"
59 | "style"
60 | "video"
61 | "worker";
62 interface PreloadOptions {
63 as: PreloadAs;
64 crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
65 fetchPriority?: "high" | "low" | "auto" | undefined;
66 // TODO: These should only be allowed with `as: 'image'` but it's not trivial to write tests against the full TS support matrix.
67 imageSizes?: string | undefined;
68 imageSrcSet?: string | undefined;
69 integrity?: string | undefined;
70 nonce?: string | undefined;
71 referrerPolicy?: ReferrerPolicy | undefined;
72 }
73 function preload(href: string, options?: PreloadOptions): void;
74
75 // https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload
76 type PreloadModuleAs = RequestDestination;
77 interface PreloadModuleOptions {
78 /**
79 * @default "script"
80 */
81 as: PreloadModuleAs;
82 crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
83 integrity?: string | undefined;
84 nonce?: string | undefined;
85 }
86 function preloadModule(href: string, options?: PreloadModuleOptions): void;
87
88 type PreinitAs = "script" | "style";
89 interface PreinitOptions {
90 as: PreinitAs;
91 crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
92 fetchPriority?: "high" | "low" | "auto" | undefined;
93 precedence?: string | undefined;
94 integrity?: string | undefined;
95 nonce?: string | undefined;
96 }
97 function preinit(href: string, options?: PreinitOptions): void;
98
99 // Will be expanded to include all of https://github.com/tc39/proposal-import-attributes
100 type PreinitModuleAs = "script";
101 interface PreinitModuleOptions {
102 /**
103 * @default "script"
104 */
105 as?: PreinitModuleAs;
106 crossOrigin?: "anonymous" | "use-credentials" | "" | undefined;
107 integrity?: string | undefined;
108 nonce?: string | undefined;
109 }
110 function preinitModule(href: string, options?: PreinitModuleOptions): void;
111
112 interface FormStatusNotPending {
113 pending: false;
114 data: null;
115 method: null;
116 action: null;
117 }
118
119 interface FormStatusPending {
120 pending: true;
121 data: FormData;
122 method: string;
123 action: string | ((formData: FormData) => void | Promise<void>);
124 }
125
126 type FormStatus = FormStatusPending | FormStatusNotPending;
127
128 function useFormStatus(): FormStatus;
129
130 function useFormState<State>(
131 action: (state: Awaited<State>) => State | Promise<State>,
132 initialState: Awaited<State>,
133 permalink?: string,
134 ): [state: Awaited<State>, dispatch: () => void];
135 function useFormState<State, Payload>(
136 action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
137 initialState: Awaited<State>,
138 permalink?: string,
139 ): [state: Awaited<State>, dispatch: (payload: Payload) => void];
140}
141
142declare module "./client" {
143 interface ReactFormState {
144 [REACT_FORM_STATE_SIGIL]: never;
145 }
146
147 interface HydrationOptions {
148 formState?: ReactFormState | null;
149 }
150}