tags to be a string, number, or object with a novel `toString` method but found an Array with length %s instead.' +\n+ '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.' +\n ' 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' +\n ' 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.' +\n ' For example: <title>hello {nameOfUser}<\/title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop' +\n ' is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}<\/title>.',\n+ enableBigIntSupport ? ', bigint' : '',\n children.length,\n );\n } else if (typeof child === 'function' || typeof child === 'symbol') {\n const childType =\n typeof child === 'function' ? 'a Function' : 'a Sybmol';\n console.error(\n- 'React expect children of <title> tags to be a string, number, or object with a novel `toString` method but found %s instead.' +\n+ 'React expect children of <title> tags to be a string, number%s, or object with a novel `toString` method but found %s instead.' +\n ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title>' +\n ' tags to a single string value.',\n+ enableBigIntSupport ? ', bigint' : '',\n childType,\n );\n } else if (child && child.toString === {}.toString) {\n if (child.$$typeof != null) {\n console.error(\n- 'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that appears to be' +\n+ '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' +\n ' 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' +\n ' 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' +\n ' 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.',\n+ enableBigIntSupport ? ', bigint' : '',\n );\n } else {\n console.error(\n- 'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that does not implement' +\n+ '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' +\n ' 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' +\n ' 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>' +\n ' 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>.',\n+ enableBigIntSupport ? ', bigint' : '',\n );\n }\n }\n@@ -3123,14 +3130,17 @@ function pushStartTitle(\n } else if (\n childForValidation != null &&\n typeof childForValidation !== 'string' &&\n- typeof childForValidation !== 'number'\n+ typeof childForValidation !== 'number' &&\n+ ((enableBigIntSupport && typeof childForValidation !== 'bigint') ||\n+ !enableBigIntSupport)\n ) {\n console.error(\n- 'A title element received a value that was not a string or number for children. ' +\n+ 'A title element received a value that was not a string or number%s for children. ' +\n 'In the browser title Elements can only have Text Nodes as children. If ' +\n 'the children being rendered output more than a single text node in aggregate the browser ' +\n 'will display markup and comments as text in the title and hydration will likely fail and ' +\n 'fall back to client rendering',\n+ enableBigIntSupport ? ' or bigint' : '',\n );\n }\n }\ndiff --git a\/packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js b\/packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js\nindex 842d1b1328..6fd43c01c5 100644\n--- a\/packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js\n+++ b\/packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js\n@@ -39,6 +39,7 @@\n *\/\n \n import {checkHtmlStringCoercion} from 'shared\/CheckStringCoercion';\n+import {enableBigIntSupport} from 'shared\/ReactFeatureFlags';\n \n const matchHtmlRegExp = \/[\"'&<>]\/;\n \n@@ -106,7 +107,11 @@ function escapeHtml(string: string) {\n * @return {string} An escaped string.\n *\/\n function escapeTextForBrowser(text: string | number | boolean): string {\n- if (typeof text === 'boolean' || typeof text === 'number') {\n+ if (\n+ typeof text === 'boolean' ||\n+ typeof text === 'number' ||\n+ (enableBigIntSupport && typeof text === 'bigint')\n+ ) {\n \/\/ this shortcircuit helps perf for types that we know will never have\n \/\/ special characters, especially given that this function is used often\n \/\/ for numeric dom ids.\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\nindex 94172ab77b..2882cab2e9 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\n@@ -60,6 +60,17 @@ describe('ReactDOMFiber', () => {\n expect(container.textContent).toEqual('10');\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should render bigints as children', async () => {\n+ const Box = ({value}) => <div>{value}<\/div>;\n+\n+ await act(async () => {\n+ root.render(<Box value={10n} \/>);\n+ });\n+\n+ expect(container.textContent).toEqual('10');\n+ });\n+\n it('should call an effect after mount\/update (replacing render callback pattern)', async () => {\n function Component() {\n React.useEffect(() => {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex 5a796c5446..ac7ddfd2f5 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -3373,6 +3373,17 @@ describe('ReactDOMFizzServer', () => {\n );\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('Supports bigint', async () => {\n+ await act(async () => {\n+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+ <div>{10n}<\/div>,\n+ );\n+ pipe(writable);\n+ });\n+ expect(getVisibleChildren(container)).toEqual(<div>10<\/div>);\n+ });\n+\n it('Supports custom abort reasons with a string', async () => {\n function App() {\n return (\n@@ -5642,6 +5653,60 @@ describe('ReactDOMFizzServer', () => {\n expect(getVisibleChildren(document.head)).toEqual(<title>hello<\/title>);\n });\n \n+ it('should accept a single number child', async () => {\n+ \/\/ a Single number child\n+ function App() {\n+ return (\n+ <head>\n+ <title>4<\/title>\n+ <\/head>\n+ );\n+ }\n+\n+ await act(() => {\n+ const {pipe} = renderToPipeableStream(<App \/>);\n+ pipe(writable);\n+ });\n+ expect(getVisibleChildren(document.head)).toEqual(<title>4<\/title>);\n+\n+ const errors = [];\n+ ReactDOMClient.hydrateRoot(container, <App \/>, {\n+ onRecoverableError(error) {\n+ errors.push(error.message);\n+ },\n+ });\n+ await waitForAll([]);\n+ expect(errors).toEqual([]);\n+ expect(getVisibleChildren(document.head)).toEqual(<title>4<\/title>);\n+ });\n+\n+ it('should accept a single bigint child', async () => {\n+ \/\/ a Single number child\n+ function App() {\n+ return (\n+ <head>\n+ <title>5n<\/title>\n+ <\/head>\n+ );\n+ }\n+\n+ await act(() => {\n+ const {pipe} = renderToPipeableStream(<App \/>);\n+ pipe(writable);\n+ });\n+ expect(getVisibleChildren(document.head)).toEqual(<title>5n<\/title>);\n+\n+ const errors = [];\n+ ReactDOMClient.hydrateRoot(container, <App \/>, {\n+ onRecoverableError(error) {\n+ errors.push(error.message);\n+ },\n+ });\n+ await waitForAll([]);\n+ expect(errors).toEqual([]);\n+ expect(getVisibleChildren(document.head)).toEqual(<title>5n<\/title>);\n+ });\n+\n it('should accept children array of length 1 containing a string', async () => {\n \/\/ a Single string child\n function App() {\n@@ -5684,7 +5749,9 @@ describe('ReactDOMFizzServer', () => {\n pipe(writable);\n });\n }).toErrorDev([\n- 'React expects the `children` prop of <title> tags to be a string, number, 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>.',\n+ 'React expects the `children` prop of <title> tags to be a string, number' +\n+ gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +\n+ ', 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>.',\n ]);\n \n if (gate(flags => flags.enableFloat)) {\n@@ -5744,7 +5811,67 @@ describe('ReactDOMFizzServer', () => {\n pipe(writable);\n });\n }).toErrorDev([\n- 'React expects the `children` prop of <title> tags to be a string, number, 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.',\n+ 'React expects the `children` prop of <title> tags to be a string, number' +\n+ gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +\n+ ', 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.',\n+ ]);\n+ } else {\n+ await expect(async () => {\n+ await act(() => {\n+ const {pipe} = renderToPipeableStream(<App \/>);\n+ pipe(writable);\n+ });\n+ }).toErrorDev([\n+ 'A title element received a React element 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',\n+ ]);\n+ }\n+\n+ if (gate(flags => flags.enableFloat)) {\n+ \/\/ object titles are toStringed when float is on\n+ expect(getVisibleChildren(document.head)).toEqual(\n+ <title>{'[object Object]'}<\/title>,\n+ );\n+ } else {\n+ expect(getVisibleChildren(document.head)).toEqual(<title>hello<\/title>);\n+ }\n+\n+ const errors = [];\n+ ReactDOMClient.hydrateRoot(document.head, <App \/>, {\n+ onRecoverableError(error) {\n+ errors.push(error.message);\n+ },\n+ });\n+ await waitForAll([]);\n+ expect(errors).toEqual([]);\n+ if (gate(flags => flags.enableFloat)) {\n+ \/\/ object titles are toStringed when float is on\n+ expect(getVisibleChildren(document.head)).toEqual(\n+ <title>{'[object Object]'}<\/title>,\n+ );\n+ } else {\n+ expect(getVisibleChildren(document.head)).toEqual(<title>hello<\/title>);\n+ }\n+ });\n+\n+ it('should warn in dev if you pass an object that does not implement toString as a child to <title>', async () => {\n+ function App() {\n+ return (\n+ <head>\n+ <title>{{}}<\/title>\n+ <\/head>\n+ );\n+ }\n+\n+ if (gate(flags => flags.enableFloat)) {\n+ await expect(async () => {\n+ await act(() => {\n+ const {pipe} = renderToPipeableStream(<App \/>);\n+ pipe(writable);\n+ });\n+ }).toErrorDev([\n+ 'React expects the `children` prop of <title> tags to be a string, number' +\n+ gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +\n+ ', 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>.',\n ]);\n } else {\n await expect(async () => {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\nindex 7d1ed0e21d..ad7342f533 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\n@@ -657,6 +657,16 @@ describe('ReactDOMInput', () => {\n expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n });\n \n+ it('should render bigint defaultValue for SSR', () => {\n+ const markup = ReactDOMServer.renderToString(\n+ <input type=\"text\" defaultValue={5n} \/>,\n+ );\n+ const div = document.createElement('div');\n+ div.innerHTML = markup;\n+ expect(div.firstChild.getAttribute('value')).toBe('5');\n+ expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n+ });\n+\n it('should render value for SSR', () => {\n const element = <input type=\"text\" value=\"1\" onChange={() => {}} \/>;\n const markup = ReactDOMServer.renderToString(element);\n@@ -666,6 +676,15 @@ describe('ReactDOMInput', () => {\n expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n });\n \n+ it('should render bigint value for SSR', () => {\n+ const element = <input type=\"text\" value={5n} onChange={() => {}} \/>;\n+ const markup = ReactDOMServer.renderToString(element);\n+ const div = document.createElement('div');\n+ div.innerHTML = markup;\n+ expect(div.firstChild.getAttribute('value')).toBe('5');\n+ expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n+ });\n+\n it('should render name attribute if it is supplied', async () => {\n await act(() => {\n root.render(<input type=\"text\" name=\"name\" \/>);\n@@ -830,6 +849,16 @@ describe('ReactDOMInput', () => {\n expect(node.value).toBe('0');\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should display `value` of bigint 5', async () => {\n+ await act(() => {\n+ root.render(<input type=\"text\" value={5n} onChange={emptyFunction} \/>);\n+ });\n+ const node = container.firstChild;\n+\n+ expect(node.value).toBe('5');\n+ });\n+\n it('should allow setting `value` to `true`', async () => {\n await act(() => {\n root.render(<input type=\"text\" value=\"yolo\" onChange={emptyFunction} \/>);\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js\nindex abeae80125..a75ce87500 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js\n@@ -172,6 +172,13 @@ describe('ReactDOMOption', () => {\n expect(node.value).toBe('hello');\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should support bigint values', () => {\n+ const node = ReactTestUtils.renderIntoDocument(<option>{5n}<\/option>);\n+ expect(node.innerHTML).toBe('5');\n+ expect(node.value).toBe('5');\n+ });\n+\n it('should be able to use dangerouslySetInnerHTML on option', () => {\n const stub = <option dangerouslySetInnerHTML={{__html: 'foobar'}} \/>;\n let node;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js\nindex 5589e5dc3a..266bae3d5e 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js\n@@ -72,6 +72,16 @@ describe('ReactDOMServerIntegration', () => {\n expect(e.nodeValue).toMatch('42');\n });\n \n+ itRenders('a bigint', async render => {\n+ const e = await render(42n);\n+ if (gate(flags => flags.enableBigIntSupport)) {\n+ expect(e.nodeType).toBe(3);\n+ expect(e.nodeValue).toMatch('42');\n+ } else {\n+ expect(e).toBe(null);\n+ }\n+ });\n+\n itRenders('an array with one child', async render => {\n const e = await render([<div key={1}>text1<\/div>]);\n const parent = e.parentNode;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js\nindex 4abf637a53..3ad7abf91a 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js\n@@ -32,7 +32,8 @@ function initModules() {\n };\n }\n \n-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);\n+const {resetModules, itRenders, serverRender, streamRender} =\n+ ReactDOMServerIntegrationUtils(initModules);\n \n \/\/ TODO: Run this in React Fire mode after we figure out the SSR behavior.\n const desc = disableInputAttributeSyncing ? xdescribe : describe;\n@@ -46,6 +47,18 @@ desc('ReactDOMServerIntegrationInput', () => {\n expect(e.value).toBe('foo');\n });\n \n+ itRenders('an input with a bigint value and an onChange', async render => {\n+ console.log(gate(flags => flags.enableBigIntSupport));\n+ const e = await render(<input value={5n} onChange={() => {}} \/>);\n+ expect(e.value).toBe(\n+ gate(flags => flags.enableBigIntSupport) ||\n+ render === serverRender ||\n+ render === streamRender\n+ ? '5'\n+ : '',\n+ );\n+ });\n+\n itRenders('an input with a value and readOnly', async render => {\n const e = await render(<input value=\"foo\" readOnly={true} \/>);\n expect(e.value).toBe('foo');\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js\nindex 8bf3c7c3d2..13c7f78ea8 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js\n@@ -218,11 +218,15 @@ describe('ReactDOMServerIntegrationSelect', () => {\n itRenders('a select option with flattened children', async render => {\n const e = await render(\n <select value=\"bar\" readOnly={true}>\n- <option value=\"bar\">A {'B'}<\/option>\n+ <option value=\"bar\">\n+ A {'B'} {5n}\n+ <\/option>\n <\/select>,\n );\n const option = e.options[0];\n- expect(option.textContent).toBe('A B');\n+ expect(option.textContent).toBe(\n+ gate(flags => flags.enableBigIntSupport) ? 'A B 5' : 'A B ',\n+ );\n expect(option.value).toBe('bar');\n expect(option.selected).toBe(true);\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js\nindex ff69355812..79b5fd840d 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js\n@@ -30,7 +30,8 @@ function initModules() {\n };\n }\n \n-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);\n+const {resetModules, itRenders, serverRender, streamRender} =\n+ ReactDOMServerIntegrationUtils(initModules);\n \n describe('ReactDOMServerIntegrationTextarea', () => {\n beforeEach(() => {\n@@ -47,12 +48,23 @@ describe('ReactDOMServerIntegrationTextarea', () => {\n expect(e.value).toBe('foo');\n });\n \n+ itRenders('a textarea with a bigint value and an onChange', async render => {\n+ const e = await render(<textarea value={5n} onChange={() => {}} \/>);\n+ expect(e.getAttribute('value')).toBe(null);\n+ expect(e.value).toBe(\n+ gate(flags => flags.enableBigIntSupport) ||\n+ render === serverRender ||\n+ render === streamRender\n+ ? '5'\n+ : '',\n+ );\n+ });\n+\n itRenders('a textarea with a value of undefined', async render => {\n const e = await render(<textarea value={undefined} \/>);\n expect(e.getAttribute('value')).toBe(null);\n expect(e.value).toBe('');\n });\n-\n itRenders('a textarea with a value and readOnly', async render => {\n const e = await render(<textarea value=\"foo\" readOnly={true} \/>);\n \/\/ textarea DOM elements don't have a value **attribute**, the text is\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\nindex 3d21ca64e3..88c574b4cb 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\n@@ -80,6 +80,19 @@ describe('ReactDOMTextarea', () => {\n expect(node.value).toBe('0');\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should display `defaultValue` of bigint 0', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ const node = await renderTextarea(\n+ <textarea defaultValue={0n} \/>,\n+ container,\n+ root,\n+ );\n+\n+ expect(node.value).toBe('0');\n+ });\n+\n it('should display \"false\" for `defaultValue` of `false`', async () => {\n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js b\/packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js\nindex 450d0383eb..7cf2c048c5 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js\n@@ -58,6 +58,7 @@ const expectChildren = function (container, children) {\n continue;\n }\n textNode = outerNode.childNodes[mountIndex];\n+ expect(textNode != null).toBe(true);\n expect(textNode.nodeType).toBe(3);\n expect(textNode.data).toBe(child);\n mountIndex++;\n@@ -173,6 +174,15 @@ describe('ReactMultiChildText', () => {\n ]);\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should correctly handle bigint children for render and update', async () => {\n+ \/\/ prettier-ignore\n+ await testAllPermutations([\n+ 10n, '10',\n+ [10n], ['10']\n+ ]);\n+ });\n+\n it('should throw if rendering both HTML and children', async () => {\n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 77c386457e..0470672f4b 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -272,7 +272,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n throw new Error('Error in host config.');\n }\n return (\n- typeof props.children === 'string' || typeof props.children === 'number'\n+ typeof props.children === 'string' ||\n+ typeof props.children === 'number' ||\n+ typeof props.children === 'bigint'\n );\n }\n \n@@ -828,7 +830,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n return childToJSX(child[0], null);\n }\n const children = child.map(c => childToJSX(c, null));\n- if (children.every(c => typeof c === 'string' || typeof c === 'number')) {\n+ if (\n+ children.every(\n+ c =>\n+ typeof c === 'string' ||\n+ typeof c === 'number' ||\n+ typeof c === 'bigint',\n+ )\n+ ) {\n return children.join('');\n }\n return children;\ndiff --git a\/packages\/react-reconciler\/src\/ReactChildFiber.js b\/packages\/react-reconciler\/src\/ReactChildFiber.js\nindex 118162ae36..41cdf9a02f 100644\n--- a\/packages\/react-reconciler\/src\/ReactChildFiber.js\n+++ b\/packages\/react-reconciler\/src\/ReactChildFiber.js\n@@ -25,6 +25,7 @@ import {\n Forked,\n PlacementDEV,\n } from '.\/ReactFiberFlags';\n+import {enableBigIntSupport} from 'shared\/ReactFeatureFlags';\n import {\n getIteratorFn,\n REACT_ELEMENT_TYPE,\n@@ -665,12 +666,14 @@ function createChildReconciler(\n ): Fiber | null {\n if (\n (typeof newChild === 'string' && newChild !== '') ||\n- typeof newChild === 'number'\n+ typeof newChild === 'number' ||\n+ (enableBigIntSupport && typeof newChild === 'bigint')\n ) {\n \/\/ Text nodes don't have keys. If the previous node is implicitly keyed\n \/\/ we can continue to replace it without aborting even if it is not a text\n \/\/ node.\n const created = createFiberFromText(\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n '' + newChild,\n returnFiber.mode,\n lanes,\n@@ -785,7 +788,8 @@ function createChildReconciler(\n \n if (\n (typeof newChild === 'string' && newChild !== '') ||\n- typeof newChild === 'number'\n+ typeof newChild === 'number' ||\n+ (enableBigIntSupport && typeof newChild === 'bigint')\n ) {\n \/\/ Text nodes don't have keys. If the previous node is implicitly keyed\n \/\/ we can continue to replace it without aborting even if it is not a text\n@@ -796,6 +800,7 @@ function createChildReconciler(\n return updateTextNode(\n returnFiber,\n oldFiber,\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n '' + newChild,\n lanes,\n debugInfo,\n@@ -908,7 +913,8 @@ function createChildReconciler(\n ): Fiber | null {\n if (\n (typeof newChild === 'string' && newChild !== '') ||\n- typeof newChild === 'number'\n+ typeof newChild === 'number' ||\n+ (enableBigIntSupport && typeof newChild === 'bigint')\n ) {\n \/\/ Text nodes don't have keys, so we neither have to check the old nor\n \/\/ new node for the key. If both are text nodes, they match.\n@@ -916,6 +922,7 @@ function createChildReconciler(\n return updateTextNode(\n returnFiber,\n matchedFiber,\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n '' + newChild,\n lanes,\n debugInfo,\n@@ -1723,12 +1730,14 @@ function createChildReconciler(\n \n if (\n (typeof newChild === 'string' && newChild !== '') ||\n- typeof newChild === 'number'\n+ typeof newChild === 'number' ||\n+ (enableBigIntSupport && typeof newChild === 'bigint')\n ) {\n return placeSingleChild(\n reconcileSingleTextNode(\n returnFiber,\n currentFirstChild,\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n '' + newChild,\n lanes,\n ),\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js\nindex 30a3fa093b..9c5de7bd2e 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js\n@@ -39,4 +39,12 @@ describe('ReactTopLevelText', () => {\n await waitForAll([]);\n expect(ReactNoop).toMatchRenderedOutput('10');\n });\n+\n+ \/\/ @gate enableBigIntSupport\n+ it('should render a component returning bigints directly from render', async () => {\n+ const Text = ({value}) => value;\n+ ReactNoop.render(<Text value={10n} \/>);\n+ await waitForAll([]);\n+ expect(ReactNoop).toMatchRenderedOutput('10');\n+ });\n });\ndiff --git a\/packages\/react-server\/src\/ReactFizzServer.js b\/packages\/react-server\/src\/ReactFizzServer.js\nindex 7930aad882..e17b58826f 100644\n--- a\/packages\/react-server\/src\/ReactFizzServer.js\n+++ b\/packages\/react-server\/src\/ReactFizzServer.js\n@@ -139,6 +139,7 @@ import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import {\n disableLegacyContext,\n disableModulePatternComponents,\n+ enableBigIntSupport,\n enableScopeAPI,\n enableSuspenseAvoidThisFallbackFizz,\n enableFloat,\n@@ -2364,7 +2365,10 @@ function renderNodeDestructive(\n return;\n }\n \n- if (typeof node === 'number') {\n+ if (\n+ typeof node === 'number' ||\n+ (enableBigIntSupport && typeof node === 'bigint')\n+ ) {\n const segment = task.blockedSegment;\n if (segment === null) {\n \/\/ We assume a text node doesn't have a representation in the replay set,\ndiff --git a\/packages\/react\/src\/ReactChildren.js b\/packages\/react\/src\/ReactChildren.js\nindex 8b9219b9fb..d3c155dc8b 100644\n--- a\/packages\/react\/src\/ReactChildren.js\n+++ b\/packages\/react\/src\/ReactChildren.js\n@@ -16,6 +16,7 @@ import type {\n } from 'shared\/ReactTypes';\n \n import isArray from 'shared\/isArray';\n+import {enableBigIntSupport} from 'shared\/ReactFeatureFlags';\n import {\n getIteratorFn,\n REACT_ELEMENT_TYPE,\n@@ -163,6 +164,11 @@ function mapIntoArray(\n invokeCallback = true;\n } else {\n switch (type) {\n+ case 'bigint':\n+ if (!enableBigIntSupport) {\n+ break;\n+ }\n+ \/\/ fallthrough for enabled BigInt support\n case 'string':\n case 'number':\n invokeCallback = true;\ndiff --git a\/packages\/react\/src\/__tests__\/ReactChildren-test.js b\/packages\/react\/src\/__tests__\/ReactChildren-test.js\nindex 016e4089d8..532cc3e8ec 100644\n--- a\/packages\/react\/src\/__tests__\/ReactChildren-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactChildren-test.js\n@@ -183,11 +183,14 @@ describe('ReactChildren', () => {\n {false}\n {null}\n {undefined}\n+ {9n}\n <\/div>\n );\n \n function assertCalls() {\n- expect(callback).toHaveBeenCalledTimes(9);\n+ expect(callback).toHaveBeenCalledTimes(\n+ gate(flags => flags.enableBigIntSupport) ? 10 : 9,\n+ );\n expect(callback).toHaveBeenCalledWith(div, 0);\n expect(callback).toHaveBeenCalledWith(span, 1);\n expect(callback).toHaveBeenCalledWith(a, 2);\n@@ -197,6 +200,11 @@ describe('ReactChildren', () => {\n expect(callback).toHaveBeenCalledWith(null, 6);\n expect(callback).toHaveBeenCalledWith(null, 7);\n expect(callback).toHaveBeenCalledWith(null, 8);\n+ if (gate(flags => flags.enableBigIntSupport)) {\n+ expect(callback).toHaveBeenCalledWith(9n, 9);\n+ } else {\n+ expect(callback).not.toHaveBeenCalledWith(9n, 9);\n+ }\n callback.mockClear();\n }\n \n@@ -209,13 +217,24 @@ describe('ReactChildren', () => {\n context,\n );\n assertCalls();\n- expect(mappedChildren).toEqual([\n- <div key=\".$divNode\" \/>,\n- <span key=\".1:0:$spanNode\" \/>,\n- <a key=\".2:$aNode\" \/>,\n- 'string',\n- 1234,\n- ]);\n+ expect(mappedChildren).toEqual(\n+ gate(flags => flags.enableBigIntSupport)\n+ ? [\n+ <div key=\".$divNode\" \/>,\n+ <span key=\".1:0:$spanNode\" \/>,\n+ <a key=\".2:$aNode\" \/>,\n+ 'string',\n+ 1234,\n+ 9n,\n+ ]\n+ : [\n+ <div key=\".$divNode\" \/>,\n+ <span key=\".1:0:$spanNode\" \/>,\n+ <a key=\".2:$aNode\" \/>,\n+ 'string',\n+ 1234,\n+ ],\n+ );\n });\n \n it('should be called for each child in nested structure', () => {\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 1655c4eed0..0d283614d3 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -174,6 +174,8 @@ export const disableClientCache = false;\n \/\/ Changes Server Components Reconciliation when they have keys\n export const enableServerComponentKeys = __NEXT_MAJOR__;\n \n+export const enableBigIntSupport = __NEXT_MAJOR__;\n+\n \/**\n * Enables a new error detection for infinite render loops from updates caused\n * by setState or similar outside of the component owning the state.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex 1bf08bdffe..83f004e7ca 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -104,5 +104,7 @@ export const enableRefAsProp = false;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex 703c1b706c..33226be203 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -95,5 +95,7 @@ export const enableRefAsProp = false;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 7a76a71b27..0bc3beb753 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -99,6 +99,7 @@ export const enableInfiniteRenderLoopDetection = false;\n const __NEXT_MAJOR__ = __EXPERIMENTAL__;\n export const enableRefAsProp = __NEXT_MAJOR__;\n export const enableReactTestRendererWarning = false;\n+export const enableBigIntSupport = __NEXT_MAJOR__;\n \n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\nindex 166fcd5871..c9a7cece9c 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -91,5 +91,7 @@ export const enableRefAsProp = false;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 1728537564..034c8525cd 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -94,5 +94,7 @@ export const enableRefAsProp = false;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 1074b75463..65b0a891aa 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -119,5 +119,7 @@ export const enableServerComponentLogs = true;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\n"}</article></body></html>

{"files":[{"status":"M","path":"packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js"},{"status":"M","path":"packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js"},{"status":"M","path":"packages\/react-dom-bindings\/src\/client\/ReactDOMOption.js"},{"status":"M","path":"packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js"},{"status":"M","path":"packages\/react-dom-bindings\/src\/client\/ToStringValue.js"},{"status":"M","path":"packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js"},{"status":"M","path":"packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js"},{"status":"M","path":"packages\/react-noop-renderer\/src\/createReactNoop.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactChildFiber.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js"},{"status":"M","path":"packages\/react-server\/src\/ReactFizzServer.js"},{"status":"M","path":"packages\/react\/src\/ReactChildren.js"},{"status":"M","path":"packages\/react\/src\/__tests__\/ReactChildren-test.js"},{"status":"M","path":"packages\/shared\/ReactFeatureFlags.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-fb.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-oss.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www.js"}],"commit":{"authorName":"Sebastian Silbermann","shortRevision":"2f240c91ed","revision":"2f240c91ed54900adee213565cb2039e161629e9","authorEmail":"silbermann.sebastian@gmail.com","authoredAt":"2024-02-26T19:18:50+01:00","subject":"Add support for rendering BigInt (#24580)"},"parents":["6c3b8dbfed6f879440f484bd0bf801fac67ec684"],"body":"","patch":"diff --git a\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js b\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js\nindex d04783b6a7..906683c097 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js\n@@ -58,5 +58,9 @@ export default function UnserializableProps(): React.Node {\n }\n \n function ChildComponent(props: any) {\n- return null;\n+ return (\n+ <>\n+

{props.bigInt}<\/div>\n+ <\/>\n+ );\n }\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\nindex cc773dea4d..24462c1d2b 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\n@@ -66,6 +66,7 @@ import {validateProperties as validateUnknownProperties} from '..\/shared\/ReactDO\n import sanitizeURL from '..\/shared\/sanitizeURL';\n \n import {\n+ enableBigIntSupport,\n enableCustomElementPropertySupport,\n enableClientRenderFallbackOnTextMismatch,\n enableFormActions,\n@@ -326,7 +327,7 @@ function normalizeMarkupForTextOrAttribute(markup: mixed): string {\n \n export function checkForUnmatchedText(\n serverText: string,\n- clientText: string | number,\n+ clientText: string | number | bigint,\n isConcurrentMode: boolean,\n shouldWarnDev: boolean,\n ) {\n@@ -397,12 +398,17 @@ function setProp(\n if (canSetTextContent) {\n setTextContent(domElement, value);\n }\n- } else if (typeof value === 'number') {\n+ } else if (\n+ typeof value === 'number' ||\n+ (enableBigIntSupport && typeof value === 'bigint')\n+ ) {\n if (__DEV__) {\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n validateTextNesting('' + value, tag);\n }\n const canSetTextContent = tag !== 'body';\n if (canSetTextContent) {\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n setTextContent(domElement, '' + value);\n }\n }\n@@ -955,7 +961,11 @@ function setPropOnCustomElement(\n case 'children': {\n if (typeof value === 'string') {\n setTextContent(domElement, value);\n- } else if (typeof value === 'number') {\n+ } else if (\n+ typeof value === 'number' ||\n+ (enableBigIntSupport && typeof value === 'bigint')\n+ ) {\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n setTextContent(domElement, '' + value);\n }\n break;\n@@ -2817,7 +2827,12 @@ export function diffHydratedProperties(\n \/\/ even listeners these nodes might be wired up to.\n \/\/ TODO: Warn if there is more than a single textNode as a child.\n \/\/ TODO: Should we use domElement.firstChild.nodeValue to compare?\n- if (typeof children === 'string' || typeof children === 'number') {\n+ if (\n+ typeof children === 'string' ||\n+ typeof children === 'number' ||\n+ (enableBigIntSupport && typeof children === 'bigint')\n+ ) {\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n if (domElement.textContent !== '' + children) {\n if (props.suppressHydrationWarning !== true) {\n checkForUnmatchedText(\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/ReactDOMOption.js b\/packages\/react-dom-bindings\/src\/client\/ReactDOMOption.js\nindex 4f7d3105a8..10d04bd6f7 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactDOMOption.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactDOMOption.js\n@@ -8,6 +8,7 @@\n *\/\n \n import {Children} from 'react';\n+import {enableBigIntSupport} from 'shared\/ReactFeatureFlags';\n \n let didWarnSelectedSetOnOption = false;\n let didWarnInvalidChild = false;\n@@ -26,7 +27,11 @@ export function validateOptionProps(element: Element, props: Object) {\n if (child == null) {\n return;\n }\n- if (typeof child === 'string' || typeof child === 'number') {\n+ if (\n+ typeof child === 'string' ||\n+ typeof child === 'number' ||\n+ (enableBigIntSupport && typeof child === 'bigint')\n+ ) {\n return;\n }\n if (!didWarnInvalidChild) {\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js b\/packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js\nindex 9e2c5e41c0..973a9fb931 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactFiberConfigDOM.js\n@@ -89,6 +89,7 @@ import {\n import {retryIfBlockedOn} from '..\/events\/ReactDOMEventReplaying';\n \n import {\n+ enableBigIntSupport,\n enableCreateEventHandleAPI,\n enableScopeAPI,\n enableFloat,\n@@ -548,6 +549,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean {\n type === 'noscript' ||\n typeof props.children === 'string' ||\n typeof props.children === 'number' ||\n+ (enableBigIntSupport && typeof props.children === 'bigint') ||\n (typeof props.dangerouslySetInnerHTML === 'object' &&\n props.dangerouslySetInnerHTML !== null &&\n props.dangerouslySetInnerHTML.__html != null)\ndiff --git a\/packages\/react-dom-bindings\/src\/client\/ToStringValue.js b\/packages\/react-dom-bindings\/src\/client\/ToStringValue.js\nindex 74a9b5b4bc..e1fc51b775 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ToStringValue.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ToStringValue.js\n@@ -8,10 +8,12 @@\n *\/\n \n import {checkFormFieldValueStringCoercion} from 'shared\/CheckStringCoercion';\n+import {enableBigIntSupport} from 'shared\/ReactFeatureFlags';\n \n export opaque type ToStringValue =\n | boolean\n | number\n+ | bigint\n | Object\n | string\n | null\n@@ -28,6 +30,12 @@ export function toString(value: ToStringValue): string {\n \n export function getToStringValue(value: mixed): ToStringValue {\n switch (typeof value) {\n+ case 'bigint':\n+ if (!enableBigIntSupport) {\n+ \/\/ bigint is assigned as empty string\n+ return '';\n+ }\n+ \/\/ fallthrough for BigInt support\n case 'boolean':\n case 'number':\n case 'string':\ndiff --git a\/packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js b\/packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js\nindex 411e81180d..a469b5587d 100644\n--- a\/packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js\n+++ b\/packages\/react-dom-bindings\/src\/server\/ReactFizzConfigDOM.js\n@@ -28,6 +28,7 @@ import {\n import {Children} from 'react';\n \n import {\n+ enableBigIntSupport,\n enableFilterEmptyStringAttributesDOM,\n enableCustomElementPropertySupport,\n enableFloat,\n@@ -1626,7 +1627,9 @@ function flattenOptionChildren(children: mixed): string {\n if (\n !didWarnInvalidOptionChildren &&\n typeof child !== 'string' &&\n- typeof child !== 'number'\n+ typeof child !== 'number' &&\n+ ((enableBigIntSupport && typeof child !== 'bigint') ||\n+ !enableBigIntSupport)\n ) {\n didWarnInvalidOptionChildren = true;\n console.error(\n@@ -2960,36 +2963,40 @@ function pushTitle(\n \n if (Array.isArray(children) && children.length > 1) {\n console.error(\n- 'React expects the `children` prop of tags to be a string, number, or object with a novel `toString` method but found an Array with length %s instead.' +\n+ '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.' +\n ' 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' +\n ' 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.' +\n ' For example: <title>hello {nameOfUser}<\/title>. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop' +\n ' is using this form try rewriting it using a template string: <title>{`hello ${nameOfUser}`}<\/title>.',\n+ enableBigIntSupport ? ', bigint' : '',\n children.length,\n );\n } else if (typeof child === 'function' || typeof child === 'symbol') {\n const childType =\n typeof child === 'function' ? 'a Function' : 'a Sybmol';\n console.error(\n- 'React expect children of <title> tags to be a string, number, or object with a novel `toString` method but found %s instead.' +\n+ 'React expect children of <title> tags to be a string, number%s, or object with a novel `toString` method but found %s instead.' +\n ' Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert children of <title>' +\n ' tags to a single string value.',\n+ enableBigIntSupport ? ', bigint' : '',\n childType,\n );\n } else if (child && child.toString === {}.toString) {\n if (child.$$typeof != null) {\n console.error(\n- 'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that appears to be' +\n+ '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' +\n ' 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' +\n ' 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' +\n ' 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.',\n+ enableBigIntSupport ? ', bigint' : '',\n );\n } else {\n console.error(\n- 'React expects the `children` prop of <title> tags to be a string, number, or object with a novel `toString` method but found an object that does not implement' +\n+ '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' +\n ' 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' +\n ' 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>' +\n ' 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>.',\n+ enableBigIntSupport ? ', bigint' : '',\n );\n }\n }\n@@ -3123,14 +3130,17 @@ function pushStartTitle(\n } else if (\n childForValidation != null &&\n typeof childForValidation !== 'string' &&\n- typeof childForValidation !== 'number'\n+ typeof childForValidation !== 'number' &&\n+ ((enableBigIntSupport && typeof childForValidation !== 'bigint') ||\n+ !enableBigIntSupport)\n ) {\n console.error(\n- 'A title element received a value that was not a string or number for children. ' +\n+ 'A title element received a value that was not a string or number%s for children. ' +\n 'In the browser title Elements can only have Text Nodes as children. If ' +\n 'the children being rendered output more than a single text node in aggregate the browser ' +\n 'will display markup and comments as text in the title and hydration will likely fail and ' +\n 'fall back to client rendering',\n+ enableBigIntSupport ? ' or bigint' : '',\n );\n }\n }\ndiff --git a\/packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js b\/packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js\nindex 842d1b1328..6fd43c01c5 100644\n--- a\/packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js\n+++ b\/packages\/react-dom-bindings\/src\/server\/escapeTextForBrowser.js\n@@ -39,6 +39,7 @@\n *\/\n \n import {checkHtmlStringCoercion} from 'shared\/CheckStringCoercion';\n+import {enableBigIntSupport} from 'shared\/ReactFeatureFlags';\n \n const matchHtmlRegExp = \/[\"'&<>]\/;\n \n@@ -106,7 +107,11 @@ function escapeHtml(string: string) {\n * @return {string} An escaped string.\n *\/\n function escapeTextForBrowser(text: string | number | boolean): string {\n- if (typeof text === 'boolean' || typeof text === 'number') {\n+ if (\n+ typeof text === 'boolean' ||\n+ typeof text === 'number' ||\n+ (enableBigIntSupport && typeof text === 'bigint')\n+ ) {\n \/\/ this shortcircuit helps perf for types that we know will never have\n \/\/ special characters, especially given that this function is used often\n \/\/ for numeric dom ids.\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\nindex 94172ab77b..2882cab2e9 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\n@@ -60,6 +60,17 @@ describe('ReactDOMFiber', () => {\n expect(container.textContent).toEqual('10');\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should render bigints as children', async () => {\n+ const Box = ({value}) => <div>{value}<\/div>;\n+\n+ await act(async () => {\n+ root.render(<Box value={10n} \/>);\n+ });\n+\n+ expect(container.textContent).toEqual('10');\n+ });\n+\n it('should call an effect after mount\/update (replacing render callback pattern)', async () => {\n function Component() {\n React.useEffect(() => {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex 5a796c5446..ac7ddfd2f5 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -3373,6 +3373,17 @@ describe('ReactDOMFizzServer', () => {\n );\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('Supports bigint', async () => {\n+ await act(async () => {\n+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n+ <div>{10n}<\/div>,\n+ );\n+ pipe(writable);\n+ });\n+ expect(getVisibleChildren(container)).toEqual(<div>10<\/div>);\n+ });\n+\n it('Supports custom abort reasons with a string', async () => {\n function App() {\n return (\n@@ -5642,6 +5653,60 @@ describe('ReactDOMFizzServer', () => {\n expect(getVisibleChildren(document.head)).toEqual(<title>hello<\/title>);\n });\n \n+ it('should accept a single number child', async () => {\n+ \/\/ a Single number child\n+ function App() {\n+ return (\n+ <head>\n+ <title>4<\/title>\n+ <\/head>\n+ );\n+ }\n+\n+ await act(() => {\n+ const {pipe} = renderToPipeableStream(<App \/>);\n+ pipe(writable);\n+ });\n+ expect(getVisibleChildren(document.head)).toEqual(<title>4<\/title>);\n+\n+ const errors = [];\n+ ReactDOMClient.hydrateRoot(container, <App \/>, {\n+ onRecoverableError(error) {\n+ errors.push(error.message);\n+ },\n+ });\n+ await waitForAll([]);\n+ expect(errors).toEqual([]);\n+ expect(getVisibleChildren(document.head)).toEqual(<title>4<\/title>);\n+ });\n+\n+ it('should accept a single bigint child', async () => {\n+ \/\/ a Single number child\n+ function App() {\n+ return (\n+ <head>\n+ <title>5n<\/title>\n+ <\/head>\n+ );\n+ }\n+\n+ await act(() => {\n+ const {pipe} = renderToPipeableStream(<App \/>);\n+ pipe(writable);\n+ });\n+ expect(getVisibleChildren(document.head)).toEqual(<title>5n<\/title>);\n+\n+ const errors = [];\n+ ReactDOMClient.hydrateRoot(container, <App \/>, {\n+ onRecoverableError(error) {\n+ errors.push(error.message);\n+ },\n+ });\n+ await waitForAll([]);\n+ expect(errors).toEqual([]);\n+ expect(getVisibleChildren(document.head)).toEqual(<title>5n<\/title>);\n+ });\n+\n it('should accept children array of length 1 containing a string', async () => {\n \/\/ a Single string child\n function App() {\n@@ -5684,7 +5749,9 @@ describe('ReactDOMFizzServer', () => {\n pipe(writable);\n });\n }).toErrorDev([\n- 'React expects the `children` prop of <title> tags to be a string, number, 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>.',\n+ 'React expects the `children` prop of <title> tags to be a string, number' +\n+ gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +\n+ ', 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>.',\n ]);\n \n if (gate(flags => flags.enableFloat)) {\n@@ -5744,7 +5811,67 @@ describe('ReactDOMFizzServer', () => {\n pipe(writable);\n });\n }).toErrorDev([\n- 'React expects the `children` prop of <title> tags to be a string, number, 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.',\n+ 'React expects the `children` prop of <title> tags to be a string, number' +\n+ gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +\n+ ', 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.',\n+ ]);\n+ } else {\n+ await expect(async () => {\n+ await act(() => {\n+ const {pipe} = renderToPipeableStream(<App \/>);\n+ pipe(writable);\n+ });\n+ }).toErrorDev([\n+ 'A title element received a React element 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',\n+ ]);\n+ }\n+\n+ if (gate(flags => flags.enableFloat)) {\n+ \/\/ object titles are toStringed when float is on\n+ expect(getVisibleChildren(document.head)).toEqual(\n+ <title>{'[object Object]'}<\/title>,\n+ );\n+ } else {\n+ expect(getVisibleChildren(document.head)).toEqual(<title>hello<\/title>);\n+ }\n+\n+ const errors = [];\n+ ReactDOMClient.hydrateRoot(document.head, <App \/>, {\n+ onRecoverableError(error) {\n+ errors.push(error.message);\n+ },\n+ });\n+ await waitForAll([]);\n+ expect(errors).toEqual([]);\n+ if (gate(flags => flags.enableFloat)) {\n+ \/\/ object titles are toStringed when float is on\n+ expect(getVisibleChildren(document.head)).toEqual(\n+ <title>{'[object Object]'}<\/title>,\n+ );\n+ } else {\n+ expect(getVisibleChildren(document.head)).toEqual(<title>hello<\/title>);\n+ }\n+ });\n+\n+ it('should warn in dev if you pass an object that does not implement toString as a child to <title>', async () => {\n+ function App() {\n+ return (\n+ <head>\n+ <title>{{}}<\/title>\n+ <\/head>\n+ );\n+ }\n+\n+ if (gate(flags => flags.enableFloat)) {\n+ await expect(async () => {\n+ await act(() => {\n+ const {pipe} = renderToPipeableStream(<App \/>);\n+ pipe(writable);\n+ });\n+ }).toErrorDev([\n+ 'React expects the `children` prop of <title> tags to be a string, number' +\n+ gate(flags => (flags.enableBigIntSupport ? ', bigint' : '')) +\n+ ', 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>.',\n ]);\n } else {\n await expect(async () => {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\nindex 7d1ed0e21d..ad7342f533 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMInput-test.js\n@@ -657,6 +657,16 @@ describe('ReactDOMInput', () => {\n expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n });\n \n+ it('should render bigint defaultValue for SSR', () => {\n+ const markup = ReactDOMServer.renderToString(\n+ <input type=\"text\" defaultValue={5n} \/>,\n+ );\n+ const div = document.createElement('div');\n+ div.innerHTML = markup;\n+ expect(div.firstChild.getAttribute('value')).toBe('5');\n+ expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n+ });\n+\n it('should render value for SSR', () => {\n const element = <input type=\"text\" value=\"1\" onChange={() => {}} \/>;\n const markup = ReactDOMServer.renderToString(element);\n@@ -666,6 +676,15 @@ describe('ReactDOMInput', () => {\n expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n });\n \n+ it('should render bigint value for SSR', () => {\n+ const element = <input type=\"text\" value={5n} onChange={() => {}} \/>;\n+ const markup = ReactDOMServer.renderToString(element);\n+ const div = document.createElement('div');\n+ div.innerHTML = markup;\n+ expect(div.firstChild.getAttribute('value')).toBe('5');\n+ expect(div.firstChild.getAttribute('defaultValue')).toBe(null);\n+ });\n+\n it('should render name attribute if it is supplied', async () => {\n await act(() => {\n root.render(<input type=\"text\" name=\"name\" \/>);\n@@ -830,6 +849,16 @@ describe('ReactDOMInput', () => {\n expect(node.value).toBe('0');\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should display `value` of bigint 5', async () => {\n+ await act(() => {\n+ root.render(<input type=\"text\" value={5n} onChange={emptyFunction} \/>);\n+ });\n+ const node = container.firstChild;\n+\n+ expect(node.value).toBe('5');\n+ });\n+\n it('should allow setting `value` to `true`', async () => {\n await act(() => {\n root.render(<input type=\"text\" value=\"yolo\" onChange={emptyFunction} \/>);\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js\nindex abeae80125..a75ce87500 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMOption-test.js\n@@ -172,6 +172,13 @@ describe('ReactDOMOption', () => {\n expect(node.value).toBe('hello');\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should support bigint values', () => {\n+ const node = ReactTestUtils.renderIntoDocument(<option>{5n}<\/option>);\n+ expect(node.innerHTML).toBe('5');\n+ expect(node.value).toBe('5');\n+ });\n+\n it('should be able to use dangerouslySetInnerHTML on option', () => {\n const stub = <option dangerouslySetInnerHTML={{__html: 'foobar'}} \/>;\n let node;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js\nindex 5589e5dc3a..266bae3d5e 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationBasic-test.js\n@@ -72,6 +72,16 @@ describe('ReactDOMServerIntegration', () => {\n expect(e.nodeValue).toMatch('42');\n });\n \n+ itRenders('a bigint', async render => {\n+ const e = await render(42n);\n+ if (gate(flags => flags.enableBigIntSupport)) {\n+ expect(e.nodeType).toBe(3);\n+ expect(e.nodeValue).toMatch('42');\n+ } else {\n+ expect(e).toBe(null);\n+ }\n+ });\n+\n itRenders('an array with one child', async render => {\n const e = await render([<div key={1}>text1<\/div>]);\n const parent = e.parentNode;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js\nindex 4abf637a53..3ad7abf91a 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationInput-test.js\n@@ -32,7 +32,8 @@ function initModules() {\n };\n }\n \n-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);\n+const {resetModules, itRenders, serverRender, streamRender} =\n+ ReactDOMServerIntegrationUtils(initModules);\n \n \/\/ TODO: Run this in React Fire mode after we figure out the SSR behavior.\n const desc = disableInputAttributeSyncing ? xdescribe : describe;\n@@ -46,6 +47,18 @@ desc('ReactDOMServerIntegrationInput', () => {\n expect(e.value).toBe('foo');\n });\n \n+ itRenders('an input with a bigint value and an onChange', async render => {\n+ console.log(gate(flags => flags.enableBigIntSupport));\n+ const e = await render(<input value={5n} onChange={() => {}} \/>);\n+ expect(e.value).toBe(\n+ gate(flags => flags.enableBigIntSupport) ||\n+ render === serverRender ||\n+ render === streamRender\n+ ? '5'\n+ : '',\n+ );\n+ });\n+\n itRenders('an input with a value and readOnly', async render => {\n const e = await render(<input value=\"foo\" readOnly={true} \/>);\n expect(e.value).toBe('foo');\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js\nindex 8bf3c7c3d2..13c7f78ea8 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationSelect-test.js\n@@ -218,11 +218,15 @@ describe('ReactDOMServerIntegrationSelect', () => {\n itRenders('a select option with flattened children', async render => {\n const e = await render(\n <select value=\"bar\" readOnly={true}>\n- <option value=\"bar\">A {'B'}<\/option>\n+ <option value=\"bar\">\n+ A {'B'} {5n}\n+ <\/option>\n <\/select>,\n );\n const option = e.options[0];\n- expect(option.textContent).toBe('A B');\n+ expect(option.textContent).toBe(\n+ gate(flags => flags.enableBigIntSupport) ? 'A B 5' : 'A B ',\n+ );\n expect(option.value).toBe('bar');\n expect(option.selected).toBe(true);\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js\nindex ff69355812..79b5fd840d 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationTextarea-test.js\n@@ -30,7 +30,8 @@ function initModules() {\n };\n }\n \n-const {resetModules, itRenders} = ReactDOMServerIntegrationUtils(initModules);\n+const {resetModules, itRenders, serverRender, streamRender} =\n+ ReactDOMServerIntegrationUtils(initModules);\n \n describe('ReactDOMServerIntegrationTextarea', () => {\n beforeEach(() => {\n@@ -47,12 +48,23 @@ describe('ReactDOMServerIntegrationTextarea', () => {\n expect(e.value).toBe('foo');\n });\n \n+ itRenders('a textarea with a bigint value and an onChange', async render => {\n+ const e = await render(<textarea value={5n} onChange={() => {}} \/>);\n+ expect(e.getAttribute('value')).toBe(null);\n+ expect(e.value).toBe(\n+ gate(flags => flags.enableBigIntSupport) ||\n+ render === serverRender ||\n+ render === streamRender\n+ ? '5'\n+ : '',\n+ );\n+ });\n+\n itRenders('a textarea with a value of undefined', async render => {\n const e = await render(<textarea value={undefined} \/>);\n expect(e.getAttribute('value')).toBe(null);\n expect(e.value).toBe('');\n });\n-\n itRenders('a textarea with a value and readOnly', async render => {\n const e = await render(<textarea value=\"foo\" readOnly={true} \/>);\n \/\/ textarea DOM elements don't have a value **attribute**, the text is\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\nindex 3d21ca64e3..88c574b4cb 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMTextarea-test.js\n@@ -80,6 +80,19 @@ describe('ReactDOMTextarea', () => {\n expect(node.value).toBe('0');\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should display `defaultValue` of bigint 0', async () => {\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+ const node = await renderTextarea(\n+ <textarea defaultValue={0n} \/>,\n+ container,\n+ root,\n+ );\n+\n+ expect(node.value).toBe('0');\n+ });\n+\n it('should display \"false\" for `defaultValue` of `false`', async () => {\n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js b\/packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js\nindex 450d0383eb..7cf2c048c5 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactMultiChildText-test.js\n@@ -58,6 +58,7 @@ const expectChildren = function (container, children) {\n continue;\n }\n textNode = outerNode.childNodes[mountIndex];\n+ expect(textNode != null).toBe(true);\n expect(textNode.nodeType).toBe(3);\n expect(textNode.data).toBe(child);\n mountIndex++;\n@@ -173,6 +174,15 @@ describe('ReactMultiChildText', () => {\n ]);\n });\n \n+ \/\/ @gate enableBigIntSupport\n+ it('should correctly handle bigint children for render and update', async () => {\n+ \/\/ prettier-ignore\n+ await testAllPermutations([\n+ 10n, '10',\n+ [10n], ['10']\n+ ]);\n+ });\n+\n it('should throw if rendering both HTML and children', async () => {\n const container = document.createElement('div');\n const root = ReactDOMClient.createRoot(container);\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 77c386457e..0470672f4b 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -272,7 +272,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n throw new Error('Error in host config.');\n }\n return (\n- typeof props.children === 'string' || typeof props.children === 'number'\n+ typeof props.children === 'string' ||\n+ typeof props.children === 'number' ||\n+ typeof props.children === 'bigint'\n );\n }\n \n@@ -828,7 +830,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n return childToJSX(child[0], null);\n }\n const children = child.map(c => childToJSX(c, null));\n- if (children.every(c => typeof c === 'string' || typeof c === 'number')) {\n+ if (\n+ children.every(\n+ c =>\n+ typeof c === 'string' ||\n+ typeof c === 'number' ||\n+ typeof c === 'bigint',\n+ )\n+ ) {\n return children.join('');\n }\n return children;\ndiff --git a\/packages\/react-reconciler\/src\/ReactChildFiber.js b\/packages\/react-reconciler\/src\/ReactChildFiber.js\nindex 118162ae36..41cdf9a02f 100644\n--- a\/packages\/react-reconciler\/src\/ReactChildFiber.js\n+++ b\/packages\/react-reconciler\/src\/ReactChildFiber.js\n@@ -25,6 +25,7 @@ import {\n Forked,\n PlacementDEV,\n } from '.\/ReactFiberFlags';\n+import {enableBigIntSupport} from 'shared\/ReactFeatureFlags';\n import {\n getIteratorFn,\n REACT_ELEMENT_TYPE,\n@@ -665,12 +666,14 @@ function createChildReconciler(\n ): Fiber | null {\n if (\n (typeof newChild === 'string' && newChild !== '') ||\n- typeof newChild === 'number'\n+ typeof newChild === 'number' ||\n+ (enableBigIntSupport && typeof newChild === 'bigint')\n ) {\n \/\/ Text nodes don't have keys. If the previous node is implicitly keyed\n \/\/ we can continue to replace it without aborting even if it is not a text\n \/\/ node.\n const created = createFiberFromText(\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n '' + newChild,\n returnFiber.mode,\n lanes,\n@@ -785,7 +788,8 @@ function createChildReconciler(\n \n if (\n (typeof newChild === 'string' && newChild !== '') ||\n- typeof newChild === 'number'\n+ typeof newChild === 'number' ||\n+ (enableBigIntSupport && typeof newChild === 'bigint')\n ) {\n \/\/ Text nodes don't have keys. If the previous node is implicitly keyed\n \/\/ we can continue to replace it without aborting even if it is not a text\n@@ -796,6 +800,7 @@ function createChildReconciler(\n return updateTextNode(\n returnFiber,\n oldFiber,\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n '' + newChild,\n lanes,\n debugInfo,\n@@ -908,7 +913,8 @@ function createChildReconciler(\n ): Fiber | null {\n if (\n (typeof newChild === 'string' && newChild !== '') ||\n- typeof newChild === 'number'\n+ typeof newChild === 'number' ||\n+ (enableBigIntSupport && typeof newChild === 'bigint')\n ) {\n \/\/ Text nodes don't have keys, so we neither have to check the old nor\n \/\/ new node for the key. If both are text nodes, they match.\n@@ -916,6 +922,7 @@ function createChildReconciler(\n return updateTextNode(\n returnFiber,\n matchedFiber,\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n '' + newChild,\n lanes,\n debugInfo,\n@@ -1723,12 +1730,14 @@ function createChildReconciler(\n \n if (\n (typeof newChild === 'string' && newChild !== '') ||\n- typeof newChild === 'number'\n+ typeof newChild === 'number' ||\n+ (enableBigIntSupport && typeof newChild === 'bigint')\n ) {\n return placeSingleChild(\n reconcileSingleTextNode(\n returnFiber,\n currentFirstChild,\n+ \/\/ $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint\n '' + newChild,\n lanes,\n ),\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js\nindex 30a3fa093b..9c5de7bd2e 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactTopLevelText-test.js\n@@ -39,4 +39,12 @@ describe('ReactTopLevelText', () => {\n await waitForAll([]);\n expect(ReactNoop).toMatchRenderedOutput('10');\n });\n+\n+ \/\/ @gate enableBigIntSupport\n+ it('should render a component returning bigints directly from render', async () => {\n+ const Text = ({value}) => value;\n+ ReactNoop.render(<Text value={10n} \/>);\n+ await waitForAll([]);\n+ expect(ReactNoop).toMatchRenderedOutput('10');\n+ });\n });\ndiff --git a\/packages\/react-server\/src\/ReactFizzServer.js b\/packages\/react-server\/src\/ReactFizzServer.js\nindex 7930aad882..e17b58826f 100644\n--- a\/packages\/react-server\/src\/ReactFizzServer.js\n+++ b\/packages\/react-server\/src\/ReactFizzServer.js\n@@ -139,6 +139,7 @@ import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import {\n disableLegacyContext,\n disableModulePatternComponents,\n+ enableBigIntSupport,\n enableScopeAPI,\n enableSuspenseAvoidThisFallbackFizz,\n enableFloat,\n@@ -2364,7 +2365,10 @@ function renderNodeDestructive(\n return;\n }\n \n- if (typeof node === 'number') {\n+ if (\n+ typeof node === 'number' ||\n+ (enableBigIntSupport && typeof node === 'bigint')\n+ ) {\n const segment = task.blockedSegment;\n if (segment === null) {\n \/\/ We assume a text node doesn't have a representation in the replay set,\ndiff --git a\/packages\/react\/src\/ReactChildren.js b\/packages\/react\/src\/ReactChildren.js\nindex 8b9219b9fb..d3c155dc8b 100644\n--- a\/packages\/react\/src\/ReactChildren.js\n+++ b\/packages\/react\/src\/ReactChildren.js\n@@ -16,6 +16,7 @@ import type {\n } from 'shared\/ReactTypes';\n \n import isArray from 'shared\/isArray';\n+import {enableBigIntSupport} from 'shared\/ReactFeatureFlags';\n import {\n getIteratorFn,\n REACT_ELEMENT_TYPE,\n@@ -163,6 +164,11 @@ function mapIntoArray(\n invokeCallback = true;\n } else {\n switch (type) {\n+ case 'bigint':\n+ if (!enableBigIntSupport) {\n+ break;\n+ }\n+ \/\/ fallthrough for enabled BigInt support\n case 'string':\n case 'number':\n invokeCallback = true;\ndiff --git a\/packages\/react\/src\/__tests__\/ReactChildren-test.js b\/packages\/react\/src\/__tests__\/ReactChildren-test.js\nindex 016e4089d8..532cc3e8ec 100644\n--- a\/packages\/react\/src\/__tests__\/ReactChildren-test.js\n+++ b\/packages\/react\/src\/__tests__\/ReactChildren-test.js\n@@ -183,11 +183,14 @@ describe('ReactChildren', () => {\n {false}\n {null}\n {undefined}\n+ {9n}\n <\/div>\n );\n \n function assertCalls() {\n- expect(callback).toHaveBeenCalledTimes(9);\n+ expect(callback).toHaveBeenCalledTimes(\n+ gate(flags => flags.enableBigIntSupport) ? 10 : 9,\n+ );\n expect(callback).toHaveBeenCalledWith(div, 0);\n expect(callback).toHaveBeenCalledWith(span, 1);\n expect(callback).toHaveBeenCalledWith(a, 2);\n@@ -197,6 +200,11 @@ describe('ReactChildren', () => {\n expect(callback).toHaveBeenCalledWith(null, 6);\n expect(callback).toHaveBeenCalledWith(null, 7);\n expect(callback).toHaveBeenCalledWith(null, 8);\n+ if (gate(flags => flags.enableBigIntSupport)) {\n+ expect(callback).toHaveBeenCalledWith(9n, 9);\n+ } else {\n+ expect(callback).not.toHaveBeenCalledWith(9n, 9);\n+ }\n callback.mockClear();\n }\n \n@@ -209,13 +217,24 @@ describe('ReactChildren', () => {\n context,\n );\n assertCalls();\n- expect(mappedChildren).toEqual([\n- <div key=\".$divNode\" \/>,\n- <span key=\".1:0:$spanNode\" \/>,\n- <a key=\".2:$aNode\" \/>,\n- 'string',\n- 1234,\n- ]);\n+ expect(mappedChildren).toEqual(\n+ gate(flags => flags.enableBigIntSupport)\n+ ? [\n+ <div key=\".$divNode\" \/>,\n+ <span key=\".1:0:$spanNode\" \/>,\n+ <a key=\".2:$aNode\" \/>,\n+ 'string',\n+ 1234,\n+ 9n,\n+ ]\n+ : [\n+ <div key=\".$divNode\" \/>,\n+ <span key=\".1:0:$spanNode\" \/>,\n+ <a key=\".2:$aNode\" \/>,\n+ 'string',\n+ 1234,\n+ ],\n+ );\n });\n \n it('should be called for each child in nested structure', () => {\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 1655c4eed0..0d283614d3 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -174,6 +174,8 @@ export const disableClientCache = false;\n \/\/ Changes Server Components Reconciliation when they have keys\n export const enableServerComponentKeys = __NEXT_MAJOR__;\n \n+export const enableBigIntSupport = __NEXT_MAJOR__;\n+\n \/**\n * Enables a new error detection for infinite render loops from updates caused\n * by setState or similar outside of the component owning the state.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex 1bf08bdffe..83f004e7ca 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -104,5 +104,7 @@ export const enableRefAsProp = false;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex 703c1b706c..33226be203 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -95,5 +95,7 @@ export const enableRefAsProp = false;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 7a76a71b27..0bc3beb753 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -99,6 +99,7 @@ export const enableInfiniteRenderLoopDetection = false;\n const __NEXT_MAJOR__ = __EXPERIMENTAL__;\n export const enableRefAsProp = __NEXT_MAJOR__;\n export const enableReactTestRendererWarning = false;\n+export const enableBigIntSupport = __NEXT_MAJOR__;\n \n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\nindex 166fcd5871..c9a7cece9c 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -91,5 +91,7 @@ export const enableRefAsProp = false;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 1728537564..034c8525cd 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -94,5 +94,7 @@ export const enableRefAsProp = false;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 1074b75463..65b0a891aa 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -119,5 +119,7 @@ export const enableServerComponentLogs = true;\n \n export const enableReactTestRendererWarning = false;\n \n+export const enableBigIntSupport = false;\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n ((((null: any): ExportsType): FeatureFlagsType): ExportsType);\n"}</article></body></html>

dillon1000/react

Files changed