[react-dom] Add support for createRoot(document) in Canary and Expe…

…rimental release channels (DefinitelyTyped#68892)
carboneater · Mar 5, 2024 · a0cdcf3 · a0cdcf3
1 parent 6229418
commit a0cdcf3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/types/react-dom/canary.d.ts b/types/react-dom/canary.d.ts
@@ -147,4 +147,8 @@ declare module "./client" {
     interface HydrationOptions {
         formState?: ReactFormState | null;
     }
+
+    interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS {
+        document: Document;
+    }
 }
diff --git a/types/react-dom/client.d.ts b/types/react-dom/client.d.ts
@@ -32,11 +32,25 @@ export interface Root {
 }
 
 /**
- * Replaces `ReactDOM.render` when the `.render` method is called and enables Concurrent Mode.
+ * Different release channels declare additional types of ReactNode this particular release channel accepts.
+ * App or library types should never augment this interface.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS {}
+
+export type Container =
+    | Element
+    | DocumentFragment
+    | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS[
+        keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_CREATE_ROOT_CONTAINERS
+    ];
+
+/**
+ * createRoot lets you create a root to display React components inside a browser DOM node.
  *
- * @see https://reactjs.org/docs/concurrent-mode-reference.html#createroot
+ * @see {@link https://react.dev/reference/react-dom/client/createRoot API Reference for `createRoot`}
  */
-export function createRoot(container: Element | DocumentFragment, options?: RootOptions): Root;
+export function createRoot(container: Container, options?: RootOptions): Root;
 
 /**
  * Same as `createRoot()`, but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer.

diff --git a/types/react-dom/test/canary-tests.tsx b/types/react-dom/test/canary-tests.tsx
@@ -240,3 +240,8 @@ function formTest() {
     const formState = [1, "", "", 0] as unknown as ReactDOMClient.ReactFormState;
     ReactDOMClient.hydrateRoot(document.body, <Page1 />, { formState });
 }
+
+function createRoot(validContainer: Element | DocumentFragment | Document) {
+    ReactDOMClient.createRoot(document);
+    ReactDOMClient.createRoot(validContainer);
+}
diff --git a/types/react-dom/test/react-dom-tests.tsx b/types/react-dom/test/react-dom-tests.tsx
@@ -371,8 +371,7 @@ function createRoot() {
     root.render(<div>initial render</div>);
     root.render(false);
 
-    // only makes sense for `hydrateRoot`
-    // @ts-expect-error
+    // Will not type-check in a real project but accepted in DT tests since experimental.d.ts is part of compilation.
     ReactDOMClient.createRoot(document);
 }