bigint-render-impl

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

@@ -326,7 +326,7 @@ function normalizeMarkupForTextOrAttribute(markup: mixed): string {
 
 export function checkForUnmatchedText(
   serverText: string,
-  clientText: string | number,
+  clientText: string | number | bigint,
   isConcurrentMode: boolean,
   shouldWarnDev: boolean,
 ) {
@@ -397,12 +397,14 @@ function setProp(
         if (canSetTextContent) {
           setTextContent(domElement, value);
         }
-      } else if (typeof value === 'number') {
+      } else if (typeof value === 'number' || typeof value === 'bigint') {
         if (__DEV__) {
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
           validateTextNesting('' + value, tag);
         }
         const canSetTextContent = tag !== 'body';
         if (canSetTextContent) {
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
           setTextContent(domElement, '' + value);
         }
       }
@@ -955,7 +957,8 @@ function setPropOnCustomElement(
     case 'children': {
       if (typeof value === 'string') {
         setTextContent(domElement, value);
-      } else if (typeof value === 'number') {
+      } else if (typeof value === 'number' || typeof value === 'bigint') {
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         setTextContent(domElement, '' + value);
       }
       break;
@@ -2817,7 +2820,12 @@ export function diffHydratedProperties(
   // even listeners these nodes might be wired up to.
   // TODO: Warn if there is more than a single textNode as a child.
   // TODO: Should we use domElement.firstChild.nodeValue to compare?
-  if (typeof children === 'string' || typeof children === 'number') {
+  if (
+    typeof children === 'string' ||
+    typeof children === 'number' ||
+    typeof children === 'bigint'
+  ) {
+    // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
     if (domElement.textContent !== '' + children) {
       if (props.suppressHydrationWarning !== true) {
         checkForUnmatchedText(

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -1626,7 +1626,8 @@ function flattenOptionChildren(children: mixed): string {
       if (
         !didWarnInvalidOptionChildren &&
         typeof child !== 'string' &&
-        typeof child !== 'number'
+        typeof child !== 'number' &&
+        typeof child !== 'bigint'
       ) {
         didWarnInvalidOptionChildren = true;
         console.error(

packages/react-dom-bindings/src/server/escapeTextForBrowser.js

@@ -106,7 +106,11 @@ function escapeHtml(string: string) {
  * @return {string} An escaped string.
  */
 function escapeTextForBrowser(text: string | number | boolean): string {
-  if (typeof text === 'boolean' || typeof text === 'number') {
+  if (
+    typeof text === 'boolean' ||
+    typeof text === 'number' ||
+    typeof text === 'bigint'
+  ) {
     // this shortcircuit helps perf for types that we know will never have
     // special characters, especially given that this function is used often
     // for numeric dom ids.

packages/react-noop-renderer/src/createReactNoop.js

@@ -272,7 +272,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       throw new Error('Error in host config.');
     }
     return (
-      typeof props.children === 'string' || typeof props.children === 'number'
+      typeof props.children === 'string' ||
+      typeof props.children === 'number' ||
+      typeof props.children === 'bigint'
     );
   }
 
@@ -828,7 +830,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         return childToJSX(child[0], null);
       }
       const children = child.map(c => childToJSX(c, null));
-      if (children.every(c => typeof c === 'string' || typeof c === 'number')) {
+      if (
+        children.every(
+          c =>
+            typeof c === 'string' ||
+            typeof c === 'number' ||
+            typeof c === 'bigint',
+        )
+      ) {
         return children.join('');
       }
       return children;

packages/react-reconciler/src/ReactChildFiber.js

@@ -665,12 +665,14 @@ function createChildReconciler(
   ): Fiber | null {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
       // node.
       const created = createFiberFromText(
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         '' + newChild,
         returnFiber.mode,
         lanes,
@@ -785,7 +787,8 @@ function createChildReconciler(
 
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys. If the previous node is implicitly keyed
       // we can continue to replace it without aborting even if it is not a text
@@ -796,6 +799,7 @@ function createChildReconciler(
       return updateTextNode(
         returnFiber,
         oldFiber,
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         '' + newChild,
         lanes,
         debugInfo,
@@ -908,14 +912,16 @@ function createChildReconciler(
   ): Fiber | null {
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       // Text nodes don't have keys, so we neither have to check the old nor
       // new node for the key. If both are text nodes, they match.
       const matchedFiber = existingChildren.get(newIdx) || null;
       return updateTextNode(
         returnFiber,
         matchedFiber,
+        // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         '' + newChild,
         lanes,
         debugInfo,
@@ -1723,12 +1729,14 @@ function createChildReconciler(
 
     if (
       (typeof newChild === 'string' && newChild !== '') ||
-      typeof newChild === 'number'
+      typeof newChild === 'number' ||
+      typeof newChild === 'bigint'
     ) {
       return placeSingleChild(
         reconcileSingleTextNode(
           returnFiber,
           currentFirstChild,
+          // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
           '' + newChild,
           lanes,
         ),

packages/react-server/src/ReactFizzServer.js

@@ -2364,7 +2364,7 @@ function renderNodeDestructive(
     return;
   }
 
-  if (typeof node === 'number') {
+  if (typeof node === 'number' || typeof node === 'bigint') {
     const segment = task.blockedSegment;
     if (segment === null) {
       // We assume a text node doesn't have a representation in the replay set,

packages/react/src/ReactChildren.js

@@ -165,6 +165,7 @@ function mapIntoArray(
     switch (type) {
       case 'string':
       case 'number':
+      case 'bigint':
         invokeCallback = true;
         break;
       case 'object':