From b29a80f5067ec4b81fc71314edb27b411b29e8c9 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Mon, 26 Feb 2024 18:23:44 +0000 Subject: [PATCH] Add support for rendering BigInt (#24580) DiffTrain build for [2f240c91ed54900adee213565cb2039e161629e9](https://github.com/facebook/react/commit/2f240c91ed54900adee213565cb2039e161629e9) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-dev.classic.js | 26 ++++++---- compiled/facebook-www/React-dev.modern.js | 26 ++++++---- compiled/facebook-www/React-prod.classic.js | 2 +- compiled/facebook-www/React-prod.modern.js | 2 +- .../facebook-www/React-profiling.classic.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 22 +++++--- compiled/facebook-www/ReactART-dev.modern.js | 22 +++++--- compiled/facebook-www/ReactDOM-dev.classic.js | 50 ++++++++++++++----- compiled/facebook-www/ReactDOM-dev.modern.js | 50 ++++++++++++++----- .../facebook-www/ReactDOM-prod.classic.js | 8 +-- compiled/facebook-www/ReactDOM-prod.modern.js | 8 +-- .../ReactDOM-profiling.classic.js | 8 +-- .../facebook-www/ReactDOM-profiling.modern.js | 8 +-- .../ReactDOMServer-dev.classic.js | 30 +++++++---- .../facebook-www/ReactDOMServer-dev.modern.js | 30 +++++++---- .../ReactDOMServerStreaming-dev.modern.js | 28 +++++++---- .../ReactDOMTesting-dev.classic.js | 50 ++++++++++++++----- .../ReactDOMTesting-dev.modern.js | 50 ++++++++++++++----- .../ReactDOMTesting-prod.classic.js | 8 +-- .../ReactDOMTesting-prod.modern.js | 8 +-- .../facebook-www/ReactServer-dev.modern.js | 8 ++- .../ReactTestRenderer-dev.classic.js | 22 +++++--- .../ReactTestRenderer-dev.modern.js | 22 +++++--- .../__test_utils__/ReactAllWarnings.js | 10 ++-- 25 files changed, 345 insertions(+), 157 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index 3a5119457a91d..94f7d42288038 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -6c3b8dbfed6f879440f484bd0bf801fac67ec684 +2f240c91ed54900adee213565cb2039e161629e9 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index e1a15760fe6a2..27f3669d43e96 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "18.3.0-www-classic-c6726149"; + var ReactVersion = "18.3.0-www-classic-cca960ca"; // ATTENTION // When adding new symbols to this file, @@ -396,6 +396,15 @@ if (__DEV__) { return isArrayImpl(a); } + // Re-export dynamic flags from the www version. + var dynamicFeatureFlags = require("ReactFeatureFlags"); + + var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing, + enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, + enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; + // On WWW, false is used for a new modern build. + var enableRenderableContext = true; + /* * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol * and Temporal.* types. See https://github.com/facebook/react/pull/22064. @@ -470,15 +479,6 @@ if (__DEV__) { } } - // Re-export dynamic flags from the www version. - var dynamicFeatureFlags = require("ReactFeatureFlags"); - - var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing, - enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; - // On WWW, false is used for a new modern build. - var enableRenderableContext = true; - function getWrappedName(outerType, innerType, wrapperName) { var displayName = outerType.displayName; @@ -2348,6 +2348,12 @@ if (__DEV__) { invokeCallback = true; } else { switch (type) { + case "bigint": { + break; + } + + // fallthrough for enabled BigInt support + case "string": case "number": invokeCallback = true; diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index 8caf115b28f0a..7220f1193dff8 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "18.3.0-www-modern-91b2c91d"; + var ReactVersion = "18.3.0-www-modern-f3ad7d8a"; // ATTENTION // When adding new symbols to this file, @@ -396,6 +396,15 @@ if (__DEV__) { return isArrayImpl(a); } + // Re-export dynamic flags from the www version. + var dynamicFeatureFlags = require("ReactFeatureFlags"); + + var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing, + enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, + enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; + // On WWW, true is used for a new modern build. + var enableRenderableContext = true; + /* * The `'' + value` pattern (used in perf-sensitive code) throws for Symbol * and Temporal.* types. See https://github.com/facebook/react/pull/22064. @@ -470,15 +479,6 @@ if (__DEV__) { } } - // Re-export dynamic flags from the www version. - var dynamicFeatureFlags = require("ReactFeatureFlags"); - - var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing, - enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; - // On WWW, true is used for a new modern build. - var enableRenderableContext = true; - function getWrappedName(outerType, innerType, wrapperName) { var displayName = outerType.displayName; @@ -2304,6 +2304,12 @@ if (__DEV__) { invokeCallback = true; } else { switch (type) { + case "bigint": { + break; + } + + // fallthrough for enabled BigInt support + case "string": case "number": invokeCallback = true; diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index e7576eddceb70..c839245d9bad7 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -625,4 +625,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-2523b446"; +exports.version = "18.3.0-www-classic-53c0b633"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index 1aad9a029aecb..bf8353f892885 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -617,4 +617,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-cc766bda"; +exports.version = "18.3.0-www-modern-e541e76b"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index fd63703624a03..917f038d07cc7 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -629,7 +629,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-48808038"; +exports.version = "18.3.0-www-classic-f64bbc43"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index 5aeae7c4d8342..b022ccc863f6e 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-classic-361724d4"; + var ReactVersion = "18.3.0-www-classic-10cc6982"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -198,6 +198,7 @@ if (__DEV__) { var enableAsyncActions = true; // Logs additional User Timing API marks for use with an experimental profiling tool. var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. var FunctionComponent = 0; var ClassComponent = 1; @@ -6865,12 +6866,14 @@ if (__DEV__) { function createChild(returnFiber, newChild, lanes, debugInfo) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. var created = createFiberFromText( + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, returnFiber.mode, lanes @@ -6998,7 +7001,8 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text @@ -7009,7 +7013,7 @@ if (__DEV__) { return updateTextNode( returnFiber, - oldFiber, + oldFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -7124,14 +7128,15 @@ if (__DEV__) { ) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys, so we neither have to check the old nor // new node for the key. If both are text nodes, they match. var matchedFiber = existingChildren.get(newIdx) || null; return updateTextNode( returnFiber, - matchedFiber, + matchedFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -7972,12 +7977,13 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { return placeSingleChild( reconcileSingleTextNode( returnFiber, - currentFirstChild, + currentFirstChild, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes ) diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 8f982570866a1..1e24b730ecf3b 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-modern-1f3124f7"; + var ReactVersion = "18.3.0-www-modern-615fb07a"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -198,6 +198,7 @@ if (__DEV__) { var enableAsyncActions = true; // Logs additional User Timing API marks for use with an experimental profiling tool. var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. var FunctionComponent = 0; var ClassComponent = 1; @@ -6630,12 +6631,14 @@ if (__DEV__) { function createChild(returnFiber, newChild, lanes, debugInfo) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. var created = createFiberFromText( + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, returnFiber.mode, lanes @@ -6763,7 +6766,8 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text @@ -6774,7 +6778,7 @@ if (__DEV__) { return updateTextNode( returnFiber, - oldFiber, + oldFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -6889,14 +6893,15 @@ if (__DEV__) { ) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys, so we neither have to check the old nor // new node for the key. If both are text nodes, they match. var matchedFiber = existingChildren.get(newIdx) || null; return updateTextNode( returnFiber, - matchedFiber, + matchedFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -7737,12 +7742,13 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { return placeSingleChild( reconcileSingleTextNode( returnFiber, - currentFirstChild, + currentFirstChild, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes ) diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index f6ff6bf3b7382..b66c20a63dc58 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -166,6 +166,7 @@ if (__DEV__) { var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; var enableSuspenseCallback = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. var FunctionComponent = 0; var ClassComponent = 1; @@ -3817,6 +3818,13 @@ if (__DEV__) { } function getToStringValue(value) { switch (typeof value) { + case "bigint": { + // bigint is assigned as empty string + return ""; + } + + // fallthrough for BigInt support + case "boolean": case "number": case "string": @@ -4436,7 +4444,11 @@ if (__DEV__) { return; } - if (typeof child === "string" || typeof child === "number") { + if ( + typeof child === "string" || + typeof child === "number" || + enableBigIntSupport + ) { return; } @@ -11587,12 +11599,14 @@ if (__DEV__) { function createChild(returnFiber, newChild, lanes, debugInfo) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. var created = createFiberFromText( + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, returnFiber.mode, lanes @@ -11720,7 +11734,8 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text @@ -11731,7 +11746,7 @@ if (__DEV__) { return updateTextNode( returnFiber, - oldFiber, + oldFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -11846,14 +11861,15 @@ if (__DEV__) { ) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys, so we neither have to check the old nor // new node for the key. If both are text nodes, they match. var matchedFiber = existingChildren.get(newIdx) || null; return updateTextNode( returnFiber, - matchedFiber, + matchedFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -12724,12 +12740,13 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { return placeSingleChild( reconcileSingleTextNode( returnFiber, - currentFirstChild, + currentFirstChild, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes ) @@ -35984,7 +36001,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-530ae50f"; + var ReactVersion = "18.3.0-www-classic-ca77f61d"; function createPortal$1( children, @@ -40793,14 +40810,16 @@ if (__DEV__) { if (canSetTextContent) { setTextContent(domElement, value); } - } else if (typeof value === "number") { + } else if (typeof value === "number" || enableBigIntSupport) { { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint validateTextNesting("" + value, tag); } var _canSetTextContent = tag !== "body"; if (_canSetTextContent) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint setTextContent(domElement, "" + value); } } @@ -41427,7 +41446,8 @@ if (__DEV__) { case "children": { if (typeof value === "string") { setTextContent(domElement, value); - } else if (typeof value === "number") { + } else if (typeof value === "number" || enableBigIntSupport) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint setTextContent(domElement, "" + value); } @@ -43570,7 +43590,12 @@ if (__DEV__) { // TODO: Warn if there is more than a single textNode as a child. // TODO: Should we use domElement.firstChild.nodeValue to compare? - if (typeof children === "string" || typeof children === "number") { + if ( + typeof children === "string" || + typeof children === "number" || + enableBigIntSupport + ) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint if (domElement.textContent !== "" + children) { if (props.suppressHydrationWarning !== true) { checkForUnmatchedText( @@ -44184,6 +44209,7 @@ if (__DEV__) { type === "noscript" || typeof props.children === "string" || typeof props.children === "number" || + enableBigIntSupport || (typeof props.dangerouslySetInnerHTML === "object" && props.dangerouslySetInnerHTML !== null && props.dangerouslySetInnerHTML.__html != null) diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 5bb4f4535f43d..b2cc54955e7d9 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -152,6 +152,7 @@ if (__DEV__) { var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; var enableSuspenseCallback = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; @@ -3660,6 +3661,13 @@ if (__DEV__) { } function getToStringValue(value) { switch (typeof value) { + case "bigint": { + // bigint is assigned as empty string + return ""; + } + + // fallthrough for BigInt support + case "boolean": case "number": case "string": @@ -4279,7 +4287,11 @@ if (__DEV__) { return; } - if (typeof child === "string" || typeof child === "number") { + if ( + typeof child === "string" || + typeof child === "number" || + enableBigIntSupport + ) { return; } @@ -11538,12 +11550,14 @@ if (__DEV__) { function createChild(returnFiber, newChild, lanes, debugInfo) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. var created = createFiberFromText( + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, returnFiber.mode, lanes @@ -11671,7 +11685,8 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text @@ -11682,7 +11697,7 @@ if (__DEV__) { return updateTextNode( returnFiber, - oldFiber, + oldFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -11797,14 +11812,15 @@ if (__DEV__) { ) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys, so we neither have to check the old nor // new node for the key. If both are text nodes, they match. var matchedFiber = existingChildren.get(newIdx) || null; return updateTextNode( returnFiber, - matchedFiber, + matchedFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -12675,12 +12691,13 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { return placeSingleChild( reconcileSingleTextNode( returnFiber, - currentFirstChild, + currentFirstChild, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes ) @@ -35820,7 +35837,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-47456a78"; + var ReactVersion = "18.3.0-www-modern-bb7d97c5"; function createPortal$1( children, @@ -41438,14 +41455,16 @@ if (__DEV__) { if (canSetTextContent) { setTextContent(domElement, value); } - } else if (typeof value === "number") { + } else if (typeof value === "number" || enableBigIntSupport) { { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint validateTextNesting("" + value, tag); } var _canSetTextContent = tag !== "body"; if (_canSetTextContent) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint setTextContent(domElement, "" + value); } } @@ -42072,7 +42091,8 @@ if (__DEV__) { case "children": { if (typeof value === "string") { setTextContent(domElement, value); - } else if (typeof value === "number") { + } else if (typeof value === "number" || enableBigIntSupport) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint setTextContent(domElement, "" + value); } @@ -44207,7 +44227,12 @@ if (__DEV__) { // TODO: Warn if there is more than a single textNode as a child. // TODO: Should we use domElement.firstChild.nodeValue to compare? - if (typeof children === "string" || typeof children === "number") { + if ( + typeof children === "string" || + typeof children === "number" || + enableBigIntSupport + ) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint if (domElement.textContent !== "" + children) { if (props.suppressHydrationWarning !== true) { checkForUnmatchedText( @@ -44821,6 +44846,7 @@ if (__DEV__) { type === "noscript" || typeof props.children === "string" || typeof props.children === "number" || + enableBigIntSupport || (typeof props.dangerouslySetInnerHTML === "object" && props.dangerouslySetInnerHTML !== null && props.dangerouslySetInnerHTML.__html != null) diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 5d96a4c461e4f..df64df938e281 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -1004,6 +1004,8 @@ function getStackByFiberInDevAndProd(workInProgress) { } function getToStringValue(value) { switch (typeof value) { + case "bigint": + return ""; case "boolean": case "number": case "string": @@ -17181,7 +17183,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1818 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-c3ec4175", + version: "18.3.0-www-classic-da91ba99", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2178 = { @@ -17211,7 +17213,7 @@ var internals$jscomp$inline_2178 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-c3ec4175" + reconcilerVersion: "18.3.0-www-classic-da91ba99" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2179 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17554,4 +17556,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-c3ec4175"; +exports.version = "18.3.0-www-classic-da91ba99"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index f187dd8f35289..6cd6debcd5d5a 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -859,6 +859,8 @@ function getStackByFiberInDevAndProd(workInProgress) { Symbol.for("react.client.reference"); function getToStringValue(value) { switch (typeof value) { + case "bigint": + return ""; case "boolean": case "number": case "string": @@ -16708,7 +16710,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1777 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-03e48c28", + version: "18.3.0-www-modern-134a0b47", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2142 = { @@ -16739,7 +16741,7 @@ var internals$jscomp$inline_2142 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-03e48c28" + reconcilerVersion: "18.3.0-www-modern-134a0b47" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2143 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17010,4 +17012,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-03e48c28"; +exports.version = "18.3.0-www-modern-134a0b47"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 0d886ac4b5d19..c4a11dfe339ea 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -1142,6 +1142,8 @@ function getStackByFiberInDevAndProd(workInProgress) { } function getToStringValue(value) { switch (typeof value) { + case "bigint": + return ""; case "boolean": case "number": case "string": @@ -17950,7 +17952,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1903 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-a6e3a333", + version: "18.3.0-www-classic-56d34b21", rendererPackageName: "react-dom" }; (function (internals) { @@ -17994,7 +17996,7 @@ var devToolsConfig$jscomp$inline_1903 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-a6e3a333" + reconcilerVersion: "18.3.0-www-classic-56d34b21" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -18324,7 +18326,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-a6e3a333"; +exports.version = "18.3.0-www-classic-56d34b21"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index ddc93bf4d6305..b99082f4435a5 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -997,6 +997,8 @@ function getStackByFiberInDevAndProd(workInProgress) { Symbol.for("react.client.reference"); function getToStringValue(value) { switch (typeof value) { + case "bigint": + return ""; case "boolean": case "number": case "string": @@ -17471,7 +17473,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1862 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-1f3124f7", + version: "18.3.0-www-modern-615fb07a", rendererPackageName: "react-dom" }; (function (internals) { @@ -17516,7 +17518,7 @@ var devToolsConfig$jscomp$inline_1862 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-1f3124f7" + reconcilerVersion: "18.3.0-www-modern-615fb07a" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17774,7 +17776,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-1f3124f7"; +exports.version = "18.3.0-www-modern-615fb07a"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js index c2e0c7869e8ec..2cc48a7cf4f64 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.classic.js +++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); - var ReactVersion = "18.3.0-www-classic-a992081e"; + var ReactVersion = "18.3.0-www-classic-79137864"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -684,6 +684,7 @@ if (__DEV__) { enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, false is used for a new modern build. var enableFloat = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. // $FlowFixMe[method-unbinding] var hasOwnProperty = Object.prototype.hasOwnProperty; @@ -2267,7 +2268,11 @@ if (__DEV__) { */ function escapeTextForBrowser(text) { - if (typeof text === "boolean" || typeof text === "number") { + if ( + typeof text === "boolean" || + typeof text === "number" || + enableBigIntSupport + ) { // this shortcircuit helps perf for types that we know will never have // special characters, especially given that this function is used often // for numeric dom ids. @@ -3788,7 +3793,8 @@ if (__DEV__) { if ( !didWarnInvalidOptionChildren && typeof child !== "string" && - typeof child !== "number" + typeof child !== "number" && + !enableBigIntSupport ) { didWarnInvalidOptionChildren = true; @@ -5172,11 +5178,12 @@ if (__DEV__) { if (Array.isArray(children) && children.length > 1) { error( - "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." + + "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}. 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: {`hello ${nameOfUser}`}.", + "", children.length ); } else if (typeof child === "function" || typeof child === "symbol") { @@ -5184,25 +5191,28 @@ if (__DEV__) { typeof child === "function" ? "a Function" : "a Sybmol"; error( - "React expect children of tags to be a string, number, 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.", + "", childType ); } else if (child && child.toString === {}.toString) { if (child.$$typeof != null) { error( - "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" + + "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." + " 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 { error( - "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" + + "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>." + " 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>.", + "" ); } } @@ -12830,7 +12840,7 @@ if (__DEV__) { return; } - if (typeof node === "number") { + if (typeof node === "number" || enableBigIntSupport) { var _segment = task.blockedSegment; if (_segment === null); diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index b4723efc3d544..b629264d459e9 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); - var ReactVersion = "18.3.0-www-modern-f380c655"; + var ReactVersion = "18.3.0-www-modern-4a76bb56"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -684,6 +684,7 @@ if (__DEV__) { enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build. var enableFloat = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. // $FlowFixMe[method-unbinding] var hasOwnProperty = Object.prototype.hasOwnProperty; @@ -2267,7 +2268,11 @@ if (__DEV__) { */ function escapeTextForBrowser(text) { - if (typeof text === "boolean" || typeof text === "number") { + if ( + typeof text === "boolean" || + typeof text === "number" || + enableBigIntSupport + ) { // this shortcircuit helps perf for types that we know will never have // special characters, especially given that this function is used often // for numeric dom ids. @@ -3788,7 +3793,8 @@ if (__DEV__) { if ( !didWarnInvalidOptionChildren && typeof child !== "string" && - typeof child !== "number" + typeof child !== "number" && + !enableBigIntSupport ) { didWarnInvalidOptionChildren = true; @@ -5172,11 +5178,12 @@ if (__DEV__) { if (Array.isArray(children) && children.length > 1) { error( - "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 %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}. 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: {`hello ${nameOfUser}`}.", + "", children.length ); } else if (typeof child === "function" || typeof child === "symbol") { @@ -5184,25 +5191,28 @@ if (__DEV__) { typeof child === "function" ? "a Function" : "a Sybmol"; error( - "React expect children of tags to be a string, number, 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.", + "", childType ); } else if (child && child.toString === {}.toString) { if (child.$$typeof != null) { error( - "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" + + "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." + " 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 { error( - "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" + + "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>." + " 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>.", + "" ); } } @@ -12740,7 +12750,7 @@ if (__DEV__) { return; } - if (typeof node === "number") { + if (typeof node === "number" || enableBigIntSupport) { var _segment = task.blockedSegment; if (_segment === null); diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js index ba4e6bccef673..679fc96ba017c 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js @@ -681,6 +681,7 @@ if (__DEV__) { enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build. var enableFloat = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. // $FlowFixMe[method-unbinding] var hasOwnProperty = Object.prototype.hasOwnProperty; @@ -2264,7 +2265,11 @@ if (__DEV__) { */ function escapeTextForBrowser(text) { - if (typeof text === "boolean" || typeof text === "number") { + if ( + typeof text === "boolean" || + typeof text === "number" || + enableBigIntSupport + ) { // this shortcircuit helps perf for types that we know will never have // special characters, especially given that this function is used often // for numeric dom ids. @@ -3785,7 +3790,8 @@ if (__DEV__) { if ( !didWarnInvalidOptionChildren && typeof child !== "string" && - typeof child !== "number" + typeof child !== "number" && + !enableBigIntSupport ) { didWarnInvalidOptionChildren = true; @@ -5169,11 +5175,12 @@ if (__DEV__) { if (Array.isArray(children) && children.length > 1) { error( - "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 %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}. 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: {`hello ${nameOfUser}`}.", + "", children.length ); } else if (typeof child === "function" || typeof child === "symbol") { @@ -5181,25 +5188,28 @@ if (__DEV__) { typeof child === "function" ? "a Function" : "a Sybmol"; error( - "React expect children of tags to be a string, number, 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.", + "", childType ); } else if (child && child.toString === {}.toString) { if (child.$$typeof != null) { error( - "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" + + "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." + " 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 { error( - "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" + + "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>." + " 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>.", + "" ); } } @@ -12621,7 +12631,7 @@ if (__DEV__) { return; } - if (typeof node === "number") { + if (typeof node === "number" || enableBigIntSupport) { var _segment = task.blockedSegment; if (_segment === null); diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index bee51c29040af..9f8ed4ccfcc94 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -158,6 +158,7 @@ if (__DEV__) { var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; var enableSuspenseCallback = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. var FunctionComponent = 0; var ClassComponent = 1; @@ -3954,6 +3955,13 @@ if (__DEV__) { } function getToStringValue(value) { switch (typeof value) { + case "bigint": { + // bigint is assigned as empty string + return ""; + } + + // fallthrough for BigInt support + case "boolean": case "number": case "string": @@ -4573,7 +4581,11 @@ if (__DEV__) { return; } - if (typeof child === "string" || typeof child === "number") { + if ( + typeof child === "string" || + typeof child === "number" || + enableBigIntSupport + ) { return; } @@ -11724,12 +11736,14 @@ if (__DEV__) { function createChild(returnFiber, newChild, lanes, debugInfo) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. var created = createFiberFromText( + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, returnFiber.mode, lanes @@ -11857,7 +11871,8 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text @@ -11868,7 +11883,7 @@ if (__DEV__) { return updateTextNode( returnFiber, - oldFiber, + oldFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -11983,14 +11998,15 @@ if (__DEV__) { ) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys, so we neither have to check the old nor // new node for the key. If both are text nodes, they match. var matchedFiber = existingChildren.get(newIdx) || null; return updateTextNode( returnFiber, - matchedFiber, + matchedFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -12861,12 +12877,13 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { return placeSingleChild( reconcileSingleTextNode( returnFiber, - currentFirstChild, + currentFirstChild, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes ) @@ -36608,7 +36625,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-2523b446"; + var ReactVersion = "18.3.0-www-classic-53c0b633"; function createPortal$1( children, @@ -41417,14 +41434,16 @@ if (__DEV__) { if (canSetTextContent) { setTextContent(domElement, value); } - } else if (typeof value === "number") { + } else if (typeof value === "number" || enableBigIntSupport) { { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint validateTextNesting("" + value, tag); } var _canSetTextContent = tag !== "body"; if (_canSetTextContent) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint setTextContent(domElement, "" + value); } } @@ -42051,7 +42070,8 @@ if (__DEV__) { case "children": { if (typeof value === "string") { setTextContent(domElement, value); - } else if (typeof value === "number") { + } else if (typeof value === "number" || enableBigIntSupport) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint setTextContent(domElement, "" + value); } @@ -44194,7 +44214,12 @@ if (__DEV__) { // TODO: Warn if there is more than a single textNode as a child. // TODO: Should we use domElement.firstChild.nodeValue to compare? - if (typeof children === "string" || typeof children === "number") { + if ( + typeof children === "string" || + typeof children === "number" || + enableBigIntSupport + ) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint if (domElement.textContent !== "" + children) { if (props.suppressHydrationWarning !== true) { checkForUnmatchedText( @@ -44808,6 +44833,7 @@ if (__DEV__) { type === "noscript" || typeof props.children === "string" || typeof props.children === "number" || + enableBigIntSupport || (typeof props.dangerouslySetInnerHTML === "object" && props.dangerouslySetInnerHTML !== null && props.dangerouslySetInnerHTML.__html != null) diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index 2104a4a9abc1b..73f71433758fd 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -144,6 +144,7 @@ if (__DEV__) { var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; var enableSuspenseCallback = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; @@ -3797,6 +3798,13 @@ if (__DEV__) { } function getToStringValue(value) { switch (typeof value) { + case "bigint": { + // bigint is assigned as empty string + return ""; + } + + // fallthrough for BigInt support + case "boolean": case "number": case "string": @@ -4416,7 +4424,11 @@ if (__DEV__) { return; } - if (typeof child === "string" || typeof child === "number") { + if ( + typeof child === "string" || + typeof child === "number" || + enableBigIntSupport + ) { return; } @@ -11675,12 +11687,14 @@ if (__DEV__) { function createChild(returnFiber, newChild, lanes, debugInfo) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. var created = createFiberFromText( + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, returnFiber.mode, lanes @@ -11808,7 +11822,8 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text @@ -11819,7 +11834,7 @@ if (__DEV__) { return updateTextNode( returnFiber, - oldFiber, + oldFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -11934,14 +11949,15 @@ if (__DEV__) { ) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys, so we neither have to check the old nor // new node for the key. If both are text nodes, they match. var matchedFiber = existingChildren.get(newIdx) || null; return updateTextNode( returnFiber, - matchedFiber, + matchedFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -12812,12 +12828,13 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { return placeSingleChild( reconcileSingleTextNode( returnFiber, - currentFirstChild, + currentFirstChild, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes ) @@ -36444,7 +36461,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-f419684e"; + var ReactVersion = "18.3.0-www-modern-ebf69536"; function createPortal$1( children, @@ -42062,14 +42079,16 @@ if (__DEV__) { if (canSetTextContent) { setTextContent(domElement, value); } - } else if (typeof value === "number") { + } else if (typeof value === "number" || enableBigIntSupport) { { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint validateTextNesting("" + value, tag); } var _canSetTextContent = tag !== "body"; if (_canSetTextContent) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint setTextContent(domElement, "" + value); } } @@ -42696,7 +42715,8 @@ if (__DEV__) { case "children": { if (typeof value === "string") { setTextContent(domElement, value); - } else if (typeof value === "number") { + } else if (typeof value === "number" || enableBigIntSupport) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint setTextContent(domElement, "" + value); } @@ -44831,7 +44851,12 @@ if (__DEV__) { // TODO: Warn if there is more than a single textNode as a child. // TODO: Should we use domElement.firstChild.nodeValue to compare? - if (typeof children === "string" || typeof children === "number") { + if ( + typeof children === "string" || + typeof children === "number" || + enableBigIntSupport + ) { + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint if (domElement.textContent !== "" + children) { if (props.suppressHydrationWarning !== true) { checkForUnmatchedText( @@ -45445,6 +45470,7 @@ if (__DEV__) { type === "noscript" || typeof props.children === "string" || typeof props.children === "number" || + enableBigIntSupport || (typeof props.dangerouslySetInnerHTML === "object" && props.dangerouslySetInnerHTML !== null && props.dangerouslySetInnerHTML.__html != null) diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index ab924cbcd4889..6454961ee2d3d 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -1090,6 +1090,8 @@ function getStackByFiberInDevAndProd(workInProgress) { } function getToStringValue(value) { switch (typeof value) { + case "bigint": + return ""; case "boolean": case "number": case "string": @@ -17510,7 +17512,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1823 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-48808038", + version: "18.3.0-www-classic-f64bbc43", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2190 = { @@ -17540,7 +17542,7 @@ var internals$jscomp$inline_2190 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-48808038" + reconcilerVersion: "18.3.0-www-classic-f64bbc43" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2191 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -18034,4 +18036,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-48808038"; +exports.version = "18.3.0-www-classic-f64bbc43"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index 7f4f9d2c9798a..0b91f56675d44 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -999,6 +999,8 @@ function getComponentNameFromType(type) { } function getToStringValue(value) { switch (typeof value) { + case "bigint": + return ""; case "boolean": case "number": case "string": @@ -17091,7 +17093,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1782 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-bb161668", + version: "18.3.0-www-modern-e084bed2", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2153 = { @@ -17122,7 +17124,7 @@ var internals$jscomp$inline_2153 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-bb161668" + reconcilerVersion: "18.3.0-www-modern-e084bed2" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2154 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17543,4 +17545,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-bb161668"; +exports.version = "18.3.0-www-modern-e084bed2"; diff --git a/compiled/facebook-www/ReactServer-dev.modern.js b/compiled/facebook-www/ReactServer-dev.modern.js index e2c51276de728..42a3e8299dccf 100644 --- a/compiled/facebook-www/ReactServer-dev.modern.js +++ b/compiled/facebook-www/ReactServer-dev.modern.js @@ -2017,6 +2017,12 @@ if (__DEV__) { invokeCallback = true; } else { switch (type) { + case "bigint": { + break; + } + + // fallthrough for enabled BigInt support + case "string": case "number": invokeCallback = true; @@ -2792,7 +2798,7 @@ if (__DEV__) { console["error"](error); }; - var ReactVersion = "18.3.0-www-modern-9547fe3f"; + var ReactVersion = "18.3.0-www-modern-7c3fd7c0"; // Patch fetch var Children = { diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index 297b7a71fe895..e43d166709690 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -144,6 +144,7 @@ if (__DEV__) { var enableLegacyHidden = false; var enableAsyncActions = true; var alwaysThrottleRetries = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. var FunctionComponent = 0; var ClassComponent = 1; @@ -5781,12 +5782,14 @@ if (__DEV__) { function createChild(returnFiber, newChild, lanes, debugInfo) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. var created = createFiberFromText( + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, returnFiber.mode, lanes @@ -5914,7 +5917,8 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text @@ -5925,7 +5929,7 @@ if (__DEV__) { return updateTextNode( returnFiber, - oldFiber, + oldFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -6040,14 +6044,15 @@ if (__DEV__) { ) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys, so we neither have to check the old nor // new node for the key. If both are text nodes, they match. var matchedFiber = existingChildren.get(newIdx) || null; return updateTextNode( returnFiber, - matchedFiber, + matchedFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -6888,12 +6893,13 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { return placeSingleChild( reconcileSingleTextNode( returnFiber, - currentFirstChild, + currentFirstChild, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes ) @@ -26091,7 +26097,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-570250e6"; + var ReactVersion = "18.3.0-www-classic-44b067ca"; // Might add PROFILE later. diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index 1acd99b9f2499..5a1282e7ebf18 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -144,6 +144,7 @@ if (__DEV__) { var enableLegacyHidden = false; var enableAsyncActions = true; var alwaysThrottleRetries = true; + var enableBigIntSupport = false; // Flow magic to verify the exports of this file match the original version. var FunctionComponent = 0; var ClassComponent = 1; @@ -5781,12 +5782,14 @@ if (__DEV__) { function createChild(returnFiber, newChild, lanes, debugInfo) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text // node. var created = createFiberFromText( + // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, returnFiber.mode, lanes @@ -5914,7 +5917,8 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys. If the previous node is implicitly keyed // we can continue to replace it without aborting even if it is not a text @@ -5925,7 +5929,7 @@ if (__DEV__) { return updateTextNode( returnFiber, - oldFiber, + oldFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -6040,14 +6044,15 @@ if (__DEV__) { ) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { // Text nodes don't have keys, so we neither have to check the old nor // new node for the key. If both are text nodes, they match. var matchedFiber = existingChildren.get(newIdx) || null; return updateTextNode( returnFiber, - matchedFiber, + matchedFiber, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes, debugInfo @@ -6888,12 +6893,13 @@ if (__DEV__) { if ( (typeof newChild === "string" && newChild !== "") || - typeof newChild === "number" + typeof newChild === "number" || + enableBigIntSupport ) { return placeSingleChild( reconcileSingleTextNode( returnFiber, - currentFirstChild, + currentFirstChild, // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint "" + newChild, lanes ) @@ -26091,7 +26097,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-b70b5d25"; + var ReactVersion = "18.3.0-www-modern-55fd2e28"; // Might add PROFILE later. diff --git a/compiled/facebook-www/__test_utils__/ReactAllWarnings.js b/compiled/facebook-www/__test_utils__/ReactAllWarnings.js index a7434fa6b1020..a489aee53ac01 100644 --- a/compiled/facebook-www/__test_utils__/ReactAllWarnings.js +++ b/compiled/facebook-www/__test_utils__/ReactAllWarnings.js @@ -82,7 +82,7 @@ export default [ "A single row was passed to a <SuspenseList revealOrder=\"%s\" />. This is not useful since it needs multiple rows. Did you mean to pass multiple children or an array?", "A suspended resource finished loading inside a test, but the event was not wrapped in act(...).\n\nWhen testing, code that resolves suspended data should be wrapped into act(...):\n\nact(() => {\n /* finish loading suspended data */\n});\n/* assert on the output */\n\nThis ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act", "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", - "A title element received a value that was not a string or number 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", + "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", "A title element received an array with more than 1 element as children. In browsers 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", "A view is reporting that a touch occurred on tag zero.", "Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release.", @@ -232,13 +232,13 @@ export default [ "React encountered a `<link rel=\"stylesheet\" .../>` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered %s instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.", "React encountered a hoistable style tag for the same href as a preload: \"%s\". When using a style tag to inline styles you should not also preload it as a stylsheet.", "React expect children of <style> tags to be a string, number, or object with a `toString` method but found %s instead. In browsers style Elements can only have `Text` Nodes as children.", - "React expect children of <title> tags to be a string, number, 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.", + "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.", "React expected a positive non-zero `maxHeadersLength` option but found %s instead. When using the `onHeaders` option you may supply an optional `maxHeadersLength` option as well however, when setting this value to zero or less no headers will be captured.", "React expected the `href` prop for a <style> tag opting into hoisting semantics using the `precedence` prop to not have any spaces but ecountered spaces instead. using spaces in this prop will cause hydration of this style to fail on the client. The href for the <style> where this ocurred is \"%s\".", "React expected to have at least one href for an a hoistable style but found none. This is a bug in React.", - "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 %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}. 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: {`hello ${nameOfUser}`}.", - "React expects the `children` prop of 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.", - "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 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%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}. 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: {`hello ${nameOfUser}`}.", + "React expects the `children` prop of 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.", + "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>.", "React has detected a change in the order of Hooks called by %s. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks\n\n Previous render Next render\n ------------------------------------------------------\n%s ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n", "React instrumentation encountered an error: %s", "React instrumentation encountered an error: %s.",