Need to beat into Flow that bigint is a thing

Author: eps1lon

packages/react-dom/src/client/ReactDOMComponent.js

@@ -317,7 +317,11 @@ function setInitialDOMProperties(
         if (canSetTextContent) {
           setTextContent(domElement, nextProp);
         }
-      } else if (typeof nextProp === 'number' || typeof nextProp === 'bigint') {
+      } else if (
+        typeof nextProp === 'number' ||
+        // $FlowFixMe - flow is not aware of `bigint`
+        typeof nextProp === 'bigint'
+      ) {
         setTextContent(domElement, '' + nextProp);
       }
     } else if (

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -255,9 +255,13 @@ export function createInstance(
     if (
       typeof props.children === 'string' ||
       typeof props.children === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof props.children === 'bigint'
     ) {
-      const string = '' + props.children;
+      // Flow thinks `children` is still mixed so we need to type-cast
+      // But now the ESLint plugin thinks `children` is mixed as well.
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      const string = '' + ((props.children: any): number | string);
       const ownAncestorInfo = updatedAncestorInfo(
         hostContextDev.ancestorInfo,
         type,

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -297,6 +297,7 @@ function getNonChildrenInnerMarkup(props) {
     if (
       typeof content === 'string' ||
       typeof content === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof content === 'bigint'
     ) {
       return escapeTextForBrowser(content);
@@ -1008,9 +1009,13 @@ class ReactDOMServerRenderer {
     if (
       typeof child === 'string' ||
       typeof child === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof child === 'bigint'
     ) {
-      const text = '' + child;
+      // Flow thinks `child` is still mixed so we need to type-cast
+      // But now the ESLint plugin thinks `children` is mixed as well.
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      const text = '' + ((child: any): number | string);
       if (text === '') {
         return '';
       }

packages/react-reconciler/src/ReactChildFiber.new.js

@@ -491,6 +491,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
@@ -569,6 +570,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
@@ -633,6 +635,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys, so we neither have to check the old nor
@@ -1325,6 +1328,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof newChild === 'bigint'
     ) {
       return placeSingleChild(

packages/react-reconciler/src/ReactChildFiber.old.js

@@ -491,6 +491,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
@@ -569,6 +570,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
@@ -633,6 +635,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys, so we neither have to check the old nor
@@ -1325,6 +1328,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
       typeof newChild === 'number' ||
+      // $FlowFixMe - flow is not aware of `bigint`
       typeof newChild === 'bigint'
     ) {
       return placeSingleChild(

packages/react-server/src/ReactFizzServer.js

@@ -1352,11 +1352,18 @@ function renderNodeDestructiveImpl(
     return;
   }
 
-  if (typeof node === 'number' || typeof node === 'bigint') {
+  if (
+    typeof node === 'number' ||
+    // $FlowFixMe - flow is not aware of `bigint`
+    typeof node === 'bigint'
+  ) {
     const segment = task.blockedSegment;
     segment.lastPushedText = pushTextInstance(
       task.blockedSegment.chunks,
-      '' + node,
+      // Flow thinks `children` is still mixed so we need to type-cast
+      // But now the ESLint plugin thinks `children` is mixed as well.
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      '' + ((node: any): number),
       request.responseState,
       segment.lastPushedText,
     );

packages/react-server/src/ReactFlightServer.js

@@ -667,6 +667,7 @@ export function resolveModelToJSON(
   if (
     typeof value === 'boolean' ||
     typeof value === 'number' ||
+    // $FlowFixMe - flow is not aware of `bigint`
     typeof value === 'bigint' ||
     typeof value === 'undefined'
   ) {

packages/shared/ReactTypes.js

@@ -21,6 +21,7 @@ export type ReactFragment = ReactEmpty | Iterable<React$Node>;
 
 export type ReactNodeList = ReactEmpty | React$Node;
 
+// TODO: Add ` | bigint` once its supported by the used version of Flow.
 export type ReactText = string | number;
 
 export type ReactProvider<T> = {