[react] Enable Awaited<ReactNode> in experimental release channels (#…

…68918)

types/react-dom/test/canary-tests.tsx

@@ -1,4 +1,5 @@
 /// <reference types="../canary"/>
+import React = require("react");
 import ReactDOM = require("react-dom");
 import ReactDOMClient = require("react-dom/client");
 
@@ -167,6 +168,17 @@ function formTest() {
  Promise.resolve(0),
  )[0];
 
+ useFormState(
+ async (state: React.ReactNode, payload: FormData): Promise<React.ReactNode> => {
+ return state;
+ },
+ (
+ <button>
+ New Project
+ </button>
+ ),
+ );
+
  return (
  <button
  onClick={() => {

types/react/experimental.d.ts

@@ -42,10 +42,22 @@ declare const UNDEFINED_VOID_ONLY: unique symbol;
 type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
 
 declare module "." {
- // Need an interface to not cause ReactNode to be a self-referential type.
- interface PromiseLikeOfReactNode extends PromiseLike<ReactNode> {}
+ /**
+ * @internal Use `Awaited<ReactNode>` instead
+ */
+ // Helper type to enable `Awaited<ReactNode>`.
+ // Must be a copy of the non-thenables of `ReactNode`.
+ type AwaitedReactNode =
+ | ReactElement
+ | string
+ | number
+ | Iterable<AwaitedReactNode>
+ | ReactPortal
+ | boolean
+ | null
+ | undefined;
  interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {
- promises: PromiseLikeOfReactNode;
+ promises: Promise<AwaitedReactNode>;
  }
 
  export interface SuspenseProps {

types/react/index.d.ts

@@ -465,6 +465,7 @@ declare namespace React {
  * <Component customElement={<div>hello</div>} />
  * ```
  */
+ // non-thenables need to be kept in sync with AwaitedReactNode
  type ReactNode =
  | ReactElement
  | string

types/react/test/experimental.tsx

@@ -84,6 +84,10 @@ function useEvent() {
  // @ts-expect-error plain objects are not allowed
  <div>{{ dave: true }}</div>;
  <div>{Promise.resolve("React")}</div>;
+
+ const asyncTests = async function asyncTests() {
+ const node: Awaited<React.ReactNode> = await Promise.resolve("React");
+ };
 }
 
 function elementTypeTests() {

types/react/test/index.ts

@@ -714,6 +714,11 @@ class RenderChildren extends React.Component<{ children?: React.ReactNode }> {
  const plainObject: React.ReactNode = { dave: true };
  // Will not type-check in a real project but accepted in DT tests since experimental.d.ts is part of compilation.
  const promise: React.ReactNode = Promise.resolve("React");
+
+ const asyncTests = async function asyncTests() {
+ // Will not type-check in a real project but accepted in DT tests since experimental.d.ts is part of compilation.
+ const node: Awaited<React.ReactNode> = await Promise.resolve("React");
+ };
 }
 
 const Memoized1 = React.memo(function Foo(props: { foo: string }) {

types/react/ts5.0/experimental.d.ts

@@ -42,10 +42,22 @@ declare const UNDEFINED_VOID_ONLY: unique symbol;
 type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
 
 declare module "." {
- // Need an interface to not cause ReactNode to be a self-referential type.
- interface PromiseLikeOfReactNode extends PromiseLike<ReactNode> {}
+ /**
+ * @internal Use `Awaited<ReactNode>` instead
+ */
+ // Helper type to enable `Awaited<ReactNode>`.
+ // Must be a copy of the non-thenables of `ReactNode`.
+ type AwaitedReactNode =
+ | ReactElement
+ | string
+ | number
+ | Iterable<AwaitedReactNode>
+ | ReactPortal
+ | boolean
+ | null
+ | undefined;
  interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {
- promises: PromiseLikeOfReactNode;
+ promises: Promise<AwaitedReactNode>;
  }
 
  export interface SuspenseProps {

types/react/ts5.0/index.d.ts

@@ -466,6 +466,7 @@ declare namespace React {
  * <Component customElement={<div>hello</div>} />
  * ```
  */
+ // non-thenables need to be kept in sync with AwaitedReactNode
  type ReactNode =
  | ReactElement
  | string

types/react/ts5.0/test/experimental.tsx

@@ -84,6 +84,10 @@ function useEvent() {
  // @ts-expect-error plain objects are not allowed
  <div>{{ dave: true }}</div>;
  <div>{Promise.resolve("React")}</div>;
+
+ const asyncTests = async function asyncTests() {
+ const node: Awaited<React.ReactNode> = await Promise.resolve("React");
+ };
 }
 
 function elementTypeTests() {

types/react/ts5.0/test/index.ts

@@ -717,6 +717,11 @@ class RenderChildren extends React.Component<{ children?: React.ReactNode }> {
  const plainObject: React.ReactNode = { dave: true };
  // Will not type-check in a real project but accepted in DT tests since experimental.d.ts is part of compilation.
  const promise: React.ReactNode = Promise.resolve("React");
+
+ const asyncTests = async function asyncTests() {
+ // Will not type-check in a real project but accepted in DT tests since experimental.d.ts is part of compilation.
+ const node: Awaited<React.ReactNode> = await Promise.resolve("React");
+ };
 }
 
 const Memoized1 = React.memo(function Foo(props: { foo: string }) {