Add feature flag for experimental release channel

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

@@ -66,6 +66,7 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
 import sanitizeURL from '../shared/sanitizeURL';
 
 import {
+  enableBigIntSupport,
   enableCustomElementPropertySupport,
   enableClientRenderFallbackOnTextMismatch,
   enableFormActions,
@@ -397,7 +398,10 @@ function setProp(
         if (canSetTextContent) {
           setTextContent(domElement, value);
         }
-      } else if (typeof value === 'number' || typeof value === 'bigint') {
+      } else if (
+        typeof value === 'number' ||
+        (enableBigIntSupport && typeof value === 'bigint')
+      ) {
         if (__DEV__) {
           // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
           validateTextNesting('' + value, tag);
@@ -955,7 +959,10 @@ function setPropOnCustomElement(
     case 'children': {
       if (typeof value === 'string') {
         setTextContent(domElement, value);
-      } else if (typeof value === 'number' || typeof value === 'bigint') {
+      } else if (
+        typeof value === 'number' ||
+        (enableBigIntSupport && typeof value === 'bigint')
+      ) {
         // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
         setTextContent(domElement, '' + value);
       }
@@ -2818,7 +2825,7 @@ export function diffHydratedProperties(
   if (
     typeof children === 'string' ||
     typeof children === 'number' ||
-    typeof children === 'bigint'
+    (enableBigIntSupport && typeof children === 'bigint')
   ) {
     // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
     if (domElement.textContent !== '' + children) {

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

@@ -8,6 +8,7 @@
  */
 
 import {Children} from 'react';
+import {enableBigIntSupport} from 'shared/ReactFeatureFlags';
 
 let didWarnSelectedSetOnOption = false;
 let didWarnInvalidChild = false;
@@ -29,7 +30,7 @@ export function validateOptionProps(element: Element, props: Object) {
           if (
             typeof child === 'string' ||
             typeof child === 'number' ||
-            typeof child === 'bigint'
+            (enableBigIntSupport && typeof child === 'bigint')
           ) {
             return;
           }

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

@@ -89,6 +89,7 @@ import {
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 import {
+  enableBigIntSupport,
   enableCreateEventHandleAPI,
   enableScopeAPI,
   enableFloat,
@@ -548,7 +549,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
     type === 'noscript' ||
     typeof props.children === 'string' ||
     typeof props.children === 'number' ||
-    typeof props.children === 'bigint' ||
+    (enableBigIntSupport && typeof props.children === 'bigint') ||
     (typeof props.dangerouslySetInnerHTML === 'object' &&
       props.dangerouslySetInnerHTML !== null &&
       props.dangerouslySetInnerHTML.__html != null)

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

@@ -8,6 +8,7 @@
  */
 
 import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
+import {enableBigIntSupport} from 'shared/ReactFeatureFlags';
 
 export opaque type ToStringValue =
   | boolean
@@ -29,9 +30,14 @@ export function toString(value: ToStringValue): string {
 
 export function getToStringValue(value: mixed): ToStringValue {
   switch (typeof value) {
+    case 'bigint':
+      if (!enableBigIntSupport) {
+        // bigint is assigned as empty string
+        return '';
+      }
+    // fallthrough for BigInt support
     case 'boolean':
     case 'number':
-    case 'bigint':
     case 'string':
     case 'undefined':
       return value;

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

@@ -28,6 +28,7 @@ import {
 import {Children} from 'react';
 
 import {
+  enableBigIntSupport,
   enableFilterEmptyStringAttributesDOM,
   enableCustomElementPropertySupport,
   enableFloat,
@@ -1626,7 +1627,8 @@ function flattenOptionChildren(children: mixed): string {
         !didWarnInvalidOptionChildren &&
         typeof child !== 'string' &&
         typeof child !== 'number' &&
-        typeof child !== 'bigint'
+        ((enableBigIntSupport && typeof child !== 'bigint') ||
+          !enableBigIntSupport)
       ) {
         didWarnInvalidOptionChildren = true;
         console.error(
@@ -2960,36 +2962,40 @@ function pushTitle(
 
       if (Array.isArray(children) && children.length > 1) {
         console.error(
-          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length %s instead.' +
+          'React expects the `children` prop of <title> tags to be a string, number%s, or object with a novel `toString` method but found an Array with length %s instead.' +
             ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value' +
             ' which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes.' +
             ' For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop' +
             ' is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
+          enableBigIntSupport ? ', bigint' : '',
           children.length,
         );
       } else if (typeof child === 'function' || typeof child === 'symbol') {
         const childType =
           typeof child === 'function' ? 'a Function' : 'a Sybmol';
         console.error(
-          'React expect children of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found %s instead.' +
+          'React expect children of <title> tags to be a string, number%s, or object with a novel `toString` method but found %s instead.' +
             ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title>' +
             ' tags to a single string value.',
+          enableBigIntSupport ? ', bigint' : '',
           childType,
         );
       } else if (child && child.toString === {}.toString) {
         if (child.$$typeof != null) {
           console.error(
-            'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that appears to be' +
+            'React expects the `children` prop of <title> tags to be a string, number%s, or object with a novel `toString` method but found an object that appears to be' +
               ' a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to' +
               ' be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is' +
               ' a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+            enableBigIntSupport ? ', bigint' : '',
           );
         } else {
           console.error(
-            'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that does not implement' +
+            'React expects the `children` prop of <title> tags to be a string, number%s, or object with a novel `toString` method but found an object that does not implement' +
               ' a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags' +
               ' to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title>' +
               ' is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
+            enableBigIntSupport ? ', bigint' : '',
           );
         }
       }
@@ -3124,14 +3130,16 @@ function pushStartTitle(
       childForValidation != null &&
       typeof childForValidation !== 'string' &&
       typeof childForValidation !== 'number' &&
-      typeof childForValidation !== 'bigint'
+      ((enableBigIntSupport && typeof childForValidation !== 'bigint') ||
+        !enableBigIntSupport)
     ) {
       console.error(
-        'A title element received a value that was not a string or number or bigint for children. ' +
+        'A title element received a value that was not a string or number%s for children. ' +
           'In the browser title Elements can only have Text Nodes as children. If ' +
           'the children being rendered output more than a single text node in aggregate the browser ' +
           'will display markup and comments as text in the title and hydration will likely fail and ' +
           'fall back to client rendering',
+        enableBigIntSupport ? ' or bigint' : '',
       );
     }
   }

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

@@ -39,6 +39,7 @@
  */
 
 import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
+import {enableBigIntSupport} from 'shared/ReactFeatureFlags';
 
 const matchHtmlRegExp = /["'&<>]/;
 
@@ -109,7 +110,7 @@ function escapeTextForBrowser(text: string | number | boolean): string {
   if (
     typeof text === 'boolean' ||
     typeof text === 'number' ||
-    typeof text === 'bigint'
+    (enableBigIntSupport && 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

packages/react-dom/src/__tests__/ReactDOMFiber-test.js

@@ -60,6 +60,7 @@ describe('ReactDOMFiber', () => {
     expect(container.textContent).toEqual('10');
   });
 
+  // @gate enableBigIntSupport
   it('should render bigints as children', async () => {
     const Box = ({value}) => <div>{value}</div>;
 

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -3373,6 +3373,7 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate enableBigIntSupport
   it('Supports bigint', async () => {
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -5679,6 +5680,7 @@ describe('ReactDOMFizzServer', () => {
       expect(getVisibleChildren(document.head)).toEqual(<title>4</title>);
     });
 
+    // @gate enableBigIntSupport
     it('should accept a single bigint child', async () => {
       // a Single number child
       function App() {
@@ -5748,7 +5750,9 @@ describe('ReactDOMFizzServer', () => {
           pipe(writable);
         });
       }).toErrorDev([
-        'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
+        'React expects the `children` prop of <title> tags to be a string, number' +
+          gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +
+          ', or object with a novel `toString` method but found an Array with length 2 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be commong to combine text nodes and value nodes. For example: <title>hello {nameOfUser}</title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}</title>.',
       ]);
 
       if (gate(flags => flags.enableFloat)) {
@@ -5808,7 +5812,9 @@ describe('ReactDOMFizzServer', () => {
             pipe(writable);
           });
         }).toErrorDev([
-          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that appears to be a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
+          'React expects the `children` prop of <title> tags to be a string, number' +
+            gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +
+            ', or object with a novel `toString` method but found an object that appears to be a React element which never implements a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value which is why rendering React elements is not supported. If the `children` of <title> is a React Component try moving the <title> tag into that component. If the `children` of <title> is some HTML markup change it to be Text only to be valid HTML.',
         ]);
       } else {
         await expect(async () => {
@@ -5864,7 +5870,9 @@ describe('ReactDOMFizzServer', () => {
             pipe(writable);
           });
         }).toErrorDev([
-          'React expects the `children` prop of <title> tags to be a string, number, bigint, or object with a novel `toString` method but found an object that does not implement a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title> is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
+          'React expects the `children` prop of <title> tags to be a string, number' +
+            gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +
+            ', or object with a novel `toString` method but found an object that does not implement a suitable `toString` method. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title> tags to a single string value. Using the default `toString` method available on every object is almost certainly an error. Consider whether the `children` of this <title> is an object in error and change it to a string or number value if so. Otherwise implement a `toString` method that React can use to produce a valid <title>.',
         ]);
       } else {
         await expect(async () => {

packages/react-dom/src/__tests__/ReactDOMInput-test.js

@@ -657,6 +657,7 @@ describe('ReactDOMInput', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
+  // @gate enableBigIntSupport
   it('should render bigint defaultValue for SSR', () => {
     const markup = ReactDOMServer.renderToString(
       <input type="text" defaultValue={5n} />,
@@ -676,6 +677,7 @@ describe('ReactDOMInput', () => {
     expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
+  // @gate enableBigIntSupport
   it('should render bigint value for SSR', () => {
     const element = <input type="text" value={5n} onChange={() => {}} />;
     const markup = ReactDOMServer.renderToString(element);
@@ -849,6 +851,7 @@ describe('ReactDOMInput', () => {
     expect(node.value).toBe('0');
   });
 
+  // @gate enableBigIntSupport
   it('should display `value` of bigint 5', async () => {
     await act(() => {
       root.render(<input type="text" value={5n} onChange={emptyFunction} />);

packages/react-dom/src/__tests__/ReactDOMOption-test.js

@@ -171,6 +171,7 @@ describe('ReactDOMOption', () => {
     expect(node.value).toBe('hello');
   });
 
+  // @gate enableBigIntSupport
   it('should support bigint values', () => {
     const node = ReactTestUtils.renderIntoDocument(<option>{5n}</option>);
     expect(node.innerHTML).toBe('5');

packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js

@@ -77,8 +77,12 @@ describe('ReactDOMServerIntegration', () => {
 
     itRenders('a bigint', async render => {
       const e = await render(42n);
-      expect(e.nodeType).toBe(3);
-      expect(e.nodeValue).toMatch('42');
+      if (gate(flags => flags.enableBigIntSupport)) {
+        expect(e.nodeType).toBe(3);
+        expect(e.nodeValue).toMatch('42');
+      } else {
+        expect(e).toBe(null);
+      }
     });
 
     itRenders('an array with one child', async render => {

packages/react-dom/src/__tests__/ReactDOMServerIntegrationInput-test.js

@@ -35,7 +35,8 @@ function initModules() {
   };
 }
 
-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+const {resetModules, itRenders, serverRender, streamRender} =
+  ReactDOMServerIntegrationUtils(initModules);
 
 // TODO: Run this in React Fire mode after we figure out the SSR behavior.
 const desc = disableInputAttributeSyncing ? xdescribe : describe;
@@ -50,8 +51,15 @@ desc('ReactDOMServerIntegrationInput', () => {
   });
 
   itRenders('an input with a bigint value and an onChange', async render => {
+    console.log(gate(flags => flags.enableBigIntSupport));
     const e = await render(<input value={5n} onChange={() => {}} />);
-    expect(e.value).toBe('5');
+    expect(e.value).toBe(
+      gate(flags => flags.enableBigIntSupport) ||
+        render === serverRender ||
+        render === streamRender
+        ? '5'
+        : '',
+    );
   });
 
   itRenders('an input with a value and readOnly', async render => {

packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js

@@ -227,7 +227,9 @@ describe('ReactDOMServerIntegrationSelect', () => {
       </select>,
     );
     const option = e.options[0];
-    expect(option.textContent).toBe('A B 5');
+    expect(option.textContent).toBe(
+      gate(flags => flags.enableBigIntSupport) ? 'A B 5' : 'A B ',
+    );
     expect(option.value).toBe('bar');
     expect(option.selected).toBe(true);
   });

packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js

@@ -33,7 +33,8 @@ function initModules() {
   };
 }
 
-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);
+const {resetModules, itRenders, serverRender, streamRender} =
+  ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegrationTextarea', () => {
   beforeEach(() => {
@@ -53,7 +54,13 @@ describe('ReactDOMServerIntegrationTextarea', () => {
   itRenders('a textarea with a bigint value and an onChange', async render => {
     const e = await render(<textarea value={5n} onChange={() => {}} />);
     expect(e.getAttribute('value')).toBe(null);
-    expect(e.value).toBe('5');
+    expect(e.value).toBe(
+      gate(flags => flags.enableBigIntSupport) ||
+        render === serverRender ||
+        render === streamRender
+        ? '5'
+        : '',
+    );
   });
 
   itRenders('a textarea with a value of undefined', async render => {

packages/react-dom/src/__tests__/ReactDOMTextarea-test.js

@@ -80,6 +80,7 @@ describe('ReactDOMTextarea', () => {
     expect(node.value).toBe('0');
   });
 
+  // @gate enableBigIntSupport
   it('should display `defaultValue` of bigint 0', async () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);