diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index 5cded15609..e24c9d8cab 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -16d3f7833d25b1ea026add83dd109601b60f138e +aed00dacfb79d17c53218404c52b1c7aa59c4a89 diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index f4f569fe71..c7e76fb4d1 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -633,4 +633,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-16574b61"; +exports.version = "18.3.0-www-classic-0b5500fd"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index ba6384db8b..80a6193dc2 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -637,7 +637,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-classic-3a8f9fbb"; +exports.version = "18.3.0-www-classic-97730216"; "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 5ac25004e9..dd8388d04a 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-b340e372"; + var ReactVersion = "18.3.0-www-classic-0a32c1f5"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -15724,7 +15724,6 @@ if (__DEV__) { function updateHostComponent$1(current, workInProgress, renderLanes) { pushHostContext(workInProgress); - var type = workInProgress.type; var nextProps = workInProgress.pendingProps; var prevProps = current !== null ? current.memoizedProps : null; diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index ac1d06a034..4a83d4be4a 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-787d1085"; + var ReactVersion = "18.3.0-www-modern-7015f801"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -15418,7 +15418,6 @@ if (__DEV__) { function updateHostComponent$1(current, workInProgress, renderLanes) { pushHostContext(workInProgress); - var type = workInProgress.type; var nextProps = workInProgress.pendingProps; var prevProps = current !== null ? current.memoizedProps : null; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index 6fa165f9e4..ddf09769ea 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -5221,7 +5221,7 @@ if (__DEV__) { var invalidParentOrAncestor = invalidParent || invalidAncestor; if (!invalidParentOrAncestor) { - return; + return true; } var ancestorTag = invalidParentOrAncestor.tag; @@ -5229,7 +5229,7 @@ if (__DEV__) { String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; if (didWarn[warnKey]) { - return; + return false; } didWarn[warnKey] = true; @@ -5245,45 +5245,56 @@ if (__DEV__) { } error( - "%s cannot appear as a child of <%s>.%s", + "In HTML, %s cannot be a child of <%s>.%s\n" + + "This will cause a hydration error.", tagDisplayName, ancestorTag, info ); } else { error( - "%s cannot appear as a descendant of " + "<%s>.", + "In HTML, %s cannot be a descendant of <%s>.\n" + + "This will cause a hydration error.", tagDisplayName, ancestorTag ); } + + return false; } } function validateTextNesting(childText, parentTag) { { if (isTagValidWithParent("#text", parentTag)) { - return; + return true; } // eslint-disable-next-line react-internal/safe-string-coercion var warnKey = "#text|" + parentTag; if (didWarn[warnKey]) { - return; + return false; } didWarn[warnKey] = true; if (/\S/.test(childText)) { - error("Text nodes cannot appear as a child of <%s>.", parentTag); + error( + "In HTML, text nodes cannot be a child of <%s>.\n" + + "This will cause a hydration error.", + parentTag + ); } else { error( - "Whitespace text nodes cannot appear as a child of <%s>. " + + "In HTML, whitespace text nodes cannot be a child of <%s>. " + "Make sure you don't have any extra whitespace between tags on " + - "each line of your source code.", + "each line of your source code.\n" + + "This will cause a hydration error.", parentTag ); } + + return false; } } @@ -8217,7 +8228,6 @@ if (__DEV__) { } function deleteHydratableInstance(returnFiber, instance) { - warnUnhydratedInstance(returnFiber, instance); var childToDelete = createFiberFromHostInstanceForDeletion(); childToDelete.stateNode = instance; childToDelete.return = returnFiber; @@ -8231,7 +8241,7 @@ if (__DEV__) { } } - function warnNonhydratedInstance(returnFiber, fiber) { + function warnNonHydratedInstance(returnFiber, fiber) { { if (didSuspendOrErrorDEV) { // Inside a boundary that already suspended. We're currently rendering the @@ -8343,7 +8353,6 @@ if (__DEV__) { function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & ~Hydrating) | Placement; - warnNonhydratedInstance(returnFiber, fiber); } function tryHydrateInstance(fiber, nextInstance) { @@ -8456,18 +8465,32 @@ if (__DEV__) { function tryToClaimNextHydratableInstance(fiber) { if (!isHydrating) { return; - } + } // Validate that this is ok to render here before any mismatches. + var currentHostContext = getHostContext(); + var shouldKeepWarning = validateHydratableInstance( + fiber.type, + fiber.pendingProps, + currentHostContext + ); var initialInstance = nextHydratableInstance; var nextInstance = nextHydratableInstance; if (!nextInstance) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8478,7 +8501,10 @@ if (__DEV__) { if (!tryHydrateInstance(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8493,6 +8519,11 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8502,6 +8533,13 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + if (shouldKeepWarning) { + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); + } + deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8516,6 +8554,17 @@ if (__DEV__) { var text = fiber.pendingProps; var isHydratable = isHydratableText(text); + var shouldKeepWarning = true; + + if (isHydratable) { + // Validate that this is ok to render here before any mismatches. + var currentHostContext = getHostContext(); + shouldKeepWarning = validateHydratableTextInstance( + text, + currentHostContext + ); + } + var initialInstance = nextHydratableInstance; var nextInstance = nextHydratableInstance; @@ -8523,11 +8572,19 @@ if (__DEV__) { // We exclude non hydrabable text because we know there are no matching hydratables. // We either throw or insert depending on the render mode. if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8538,7 +8595,10 @@ if (__DEV__) { if (!tryHydrateText(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8553,6 +8613,11 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8562,6 +8627,13 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + if (shouldKeepWarning) { + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); + } + deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8579,11 +8651,12 @@ if (__DEV__) { if (!nextInstance) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8594,7 +8667,7 @@ if (__DEV__) { if (!tryHydrateSuspense(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8609,6 +8682,7 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8618,6 +8692,10 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8834,6 +8912,7 @@ if (__DEV__) { throwOnHydrationMismatch(); } else { while (nextInstance) { + warnUnhydratedInstance(fiber, nextInstance); deleteHydratableInstance(fiber, nextInstance); nextInstance = getNextHydratableSibling(nextInstance); } @@ -20701,12 +20780,11 @@ if (__DEV__) { } function updateHostComponent$1(current, workInProgress, renderLanes) { - pushHostContext(workInProgress); - if (current === null) { tryToClaimNextHydratableInstance(workInProgress); } + pushHostContext(workInProgress); var type = workInProgress.type; var nextProps = workInProgress.pendingProps; var prevProps = current !== null ? current.memoizedProps : null; @@ -35955,7 +36033,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-717c70e3"; + var ReactVersion = "18.3.0-www-classic-b1a014cb"; function createPortal$1( children, @@ -44846,6 +44924,13 @@ if (__DEV__) { function getFirstHydratableChildWithinSuspenseInstance(parentInstance) { return getNextHydratable(parentInstance.nextSibling); } + function validateHydratableInstance(type, props, hostContext) { + { + // TODO: take namespace into account when validating. + var hostContextDev = hostContext; + return validateDOMNesting(type, hostContextDev.ancestorInfo); + } + } function hydrateInstance( instance, type, @@ -44871,6 +44956,18 @@ if (__DEV__) { hostContext ); } + function validateHydratableTextInstance(text, hostContext) { + { + var hostContextDev = hostContext; + var ancestor = hostContextDev.ancestorInfo.current; + + if (ancestor != null) { + return validateTextNesting(text, ancestor.tag); + } + } + + return true; + } function hydrateTextInstance( textInstance, text, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index cc0b84253e..fe88df148f 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -5044,7 +5044,7 @@ if (__DEV__) { var invalidParentOrAncestor = invalidParent || invalidAncestor; if (!invalidParentOrAncestor) { - return; + return true; } var ancestorTag = invalidParentOrAncestor.tag; @@ -5052,7 +5052,7 @@ if (__DEV__) { String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; if (didWarn[warnKey]) { - return; + return false; } didWarn[warnKey] = true; @@ -5068,45 +5068,56 @@ if (__DEV__) { } error( - "%s cannot appear as a child of <%s>.%s", + "In HTML, %s cannot be a child of <%s>.%s\n" + + "This will cause a hydration error.", tagDisplayName, ancestorTag, info ); } else { error( - "%s cannot appear as a descendant of " + "<%s>.", + "In HTML, %s cannot be a descendant of <%s>.\n" + + "This will cause a hydration error.", tagDisplayName, ancestorTag ); } + + return false; } } function validateTextNesting(childText, parentTag) { { if (isTagValidWithParent("#text", parentTag)) { - return; + return true; } // eslint-disable-next-line react-internal/safe-string-coercion var warnKey = "#text|" + parentTag; if (didWarn[warnKey]) { - return; + return false; } didWarn[warnKey] = true; if (/\S/.test(childText)) { - error("Text nodes cannot appear as a child of <%s>.", parentTag); + error( + "In HTML, text nodes cannot be a child of <%s>.\n" + + "This will cause a hydration error.", + parentTag + ); } else { error( - "Whitespace text nodes cannot appear as a child of <%s>. " + + "In HTML, whitespace text nodes cannot be a child of <%s>. " + "Make sure you don't have any extra whitespace between tags on " + - "each line of your source code.", + "each line of your source code.\n" + + "This will cause a hydration error.", parentTag ); } + + return false; } } @@ -8168,7 +8179,6 @@ if (__DEV__) { } function deleteHydratableInstance(returnFiber, instance) { - warnUnhydratedInstance(returnFiber, instance); var childToDelete = createFiberFromHostInstanceForDeletion(); childToDelete.stateNode = instance; childToDelete.return = returnFiber; @@ -8182,7 +8192,7 @@ if (__DEV__) { } } - function warnNonhydratedInstance(returnFiber, fiber) { + function warnNonHydratedInstance(returnFiber, fiber) { { if (didSuspendOrErrorDEV) { // Inside a boundary that already suspended. We're currently rendering the @@ -8294,7 +8304,6 @@ if (__DEV__) { function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & ~Hydrating) | Placement; - warnNonhydratedInstance(returnFiber, fiber); } function tryHydrateInstance(fiber, nextInstance) { @@ -8407,18 +8416,32 @@ if (__DEV__) { function tryToClaimNextHydratableInstance(fiber) { if (!isHydrating) { return; - } + } // Validate that this is ok to render here before any mismatches. + var currentHostContext = getHostContext(); + var shouldKeepWarning = validateHydratableInstance( + fiber.type, + fiber.pendingProps, + currentHostContext + ); var initialInstance = nextHydratableInstance; var nextInstance = nextHydratableInstance; if (!nextInstance) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8429,7 +8452,10 @@ if (__DEV__) { if (!tryHydrateInstance(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8444,6 +8470,11 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8453,6 +8484,13 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + if (shouldKeepWarning) { + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); + } + deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8467,6 +8505,17 @@ if (__DEV__) { var text = fiber.pendingProps; var isHydratable = isHydratableText(text); + var shouldKeepWarning = true; + + if (isHydratable) { + // Validate that this is ok to render here before any mismatches. + var currentHostContext = getHostContext(); + shouldKeepWarning = validateHydratableTextInstance( + text, + currentHostContext + ); + } + var initialInstance = nextHydratableInstance; var nextInstance = nextHydratableInstance; @@ -8474,11 +8523,19 @@ if (__DEV__) { // We exclude non hydrabable text because we know there are no matching hydratables. // We either throw or insert depending on the render mode. if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8489,7 +8546,10 @@ if (__DEV__) { if (!tryHydrateText(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8504,6 +8564,11 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8513,6 +8578,13 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + if (shouldKeepWarning) { + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); + } + deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8530,11 +8602,12 @@ if (__DEV__) { if (!nextInstance) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8545,7 +8618,7 @@ if (__DEV__) { if (!tryHydrateSuspense(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8560,6 +8633,7 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8569,6 +8643,10 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8785,6 +8863,7 @@ if (__DEV__) { throwOnHydrationMismatch(); } else { while (nextInstance) { + warnUnhydratedInstance(fiber, nextInstance); deleteHydratableInstance(fiber, nextInstance); nextInstance = getNextHydratableSibling(nextInstance); } @@ -20581,12 +20660,11 @@ if (__DEV__) { } function updateHostComponent$1(current, workInProgress, renderLanes) { - pushHostContext(workInProgress); - if (current === null) { tryToClaimNextHydratableInstance(workInProgress); } + pushHostContext(workInProgress); var type = workInProgress.type; var nextProps = workInProgress.pendingProps; var prevProps = current !== null ? current.memoizedProps : null; @@ -35791,7 +35869,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-a35e6921"; + var ReactVersion = "18.3.0-www-modern-8fdd8f89"; function createPortal$1( children, @@ -45483,6 +45561,13 @@ if (__DEV__) { function getFirstHydratableChildWithinSuspenseInstance(parentInstance) { return getNextHydratable(parentInstance.nextSibling); } + function validateHydratableInstance(type, props, hostContext) { + { + // TODO: take namespace into account when validating. + var hostContextDev = hostContext; + return validateDOMNesting(type, hostContextDev.ancestorInfo); + } + } function hydrateInstance( instance, type, @@ -45508,6 +45593,18 @@ if (__DEV__) { hostContext ); } + function validateHydratableTextInstance(text, hostContext) { + { + var hostContextDev = hostContext; + var ancestor = hostContextDev.ancestorInfo.current; + + if (ancestor != null) { + return validateTextNesting(text, ancestor.tag); + } + } + + return true; + } function hydrateTextInstance( textInstance, text, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 0cea54bf06..5cfeac2b67 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -11668,7 +11668,6 @@ beginWork = function (current, workInProgress, renderLanes) { ); case 5: return ( - pushHostContext(workInProgress), null === current && isHydrating && (((context = Component = nextHydratableInstance), context) @@ -11693,6 +11692,7 @@ beginWork = function (current, workInProgress, renderLanes) { (isHydrating = !1), (hydrationParentFiber = workInProgress), (nextHydratableInstance = Component))), + pushHostContext(workInProgress), (context = workInProgress.type), (prevState = workInProgress.pendingProps), (nextState = null !== current ? current.memoizedProps : null), @@ -17178,7 +17178,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1819 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-01311d12", + version: "18.3.0-www-classic-e691c5db", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2179 = { @@ -17208,7 +17208,7 @@ var internals$jscomp$inline_2179 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-01311d12" + reconcilerVersion: "18.3.0-www-classic-e691c5db" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2180 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17551,4 +17551,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-01311d12"; +exports.version = "18.3.0-www-classic-e691c5db"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 999667b347..8423c1bce0 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -11486,7 +11486,6 @@ beginWork = function (current, workInProgress, renderLanes) { ); case 5: return ( - pushHostContext(workInProgress), null === current && isHydrating && (((init = Component = nextHydratableInstance), init) @@ -11511,6 +11510,7 @@ beginWork = function (current, workInProgress, renderLanes) { (isHydrating = !1), (hydrationParentFiber = workInProgress), (nextHydratableInstance = Component))), + pushHostContext(workInProgress), (init = workInProgress.type), (prevState = workInProgress.pendingProps), (nextState = null !== current ? current.memoizedProps : null), @@ -16694,7 +16694,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1778 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-7fe0e911", + version: "18.3.0-www-modern-e1a7b81e", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2143 = { @@ -16725,7 +16725,7 @@ var internals$jscomp$inline_2143 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-7fe0e911" + reconcilerVersion: "18.3.0-www-modern-e1a7b81e" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2144 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16996,4 +16996,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-7fe0e911"; +exports.version = "18.3.0-www-modern-e1a7b81e"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 10b6357f40..5b3f7e8906 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -12403,7 +12403,6 @@ beginWork = function (current, workInProgress, renderLanes) { ); case 5: return ( - pushHostContext(workInProgress), null === current && isHydrating && (((context = Component = nextHydratableInstance), context) @@ -12428,6 +12427,7 @@ beginWork = function (current, workInProgress, renderLanes) { (isHydrating = !1), (hydrationParentFiber = workInProgress), (nextHydratableInstance = Component))), + pushHostContext(workInProgress), (context = workInProgress.type), (prevState = workInProgress.pendingProps), (nextState = null !== current ? current.memoizedProps : null), @@ -17947,7 +17947,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1904 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-1e15ae1d", + version: "18.3.0-www-classic-572d6aa6", rendererPackageName: "react-dom" }; (function (internals) { @@ -17991,7 +17991,7 @@ var devToolsConfig$jscomp$inline_1904 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-1e15ae1d" + reconcilerVersion: "18.3.0-www-classic-572d6aa6" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -18321,7 +18321,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-1e15ae1d"; +exports.version = "18.3.0-www-classic-572d6aa6"; "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 37bdc6f92b..258ac9050f 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -12215,7 +12215,6 @@ beginWork = function (current, workInProgress, renderLanes) { ); case 5: return ( - pushHostContext(workInProgress), null === current && isHydrating && (((init = Component = nextHydratableInstance), init) @@ -12240,6 +12239,7 @@ beginWork = function (current, workInProgress, renderLanes) { (isHydrating = !1), (hydrationParentFiber = workInProgress), (nextHydratableInstance = Component))), + pushHostContext(workInProgress), (init = workInProgress.type), (prevState = workInProgress.pendingProps), (nextState = null !== current ? current.memoizedProps : null), @@ -17457,7 +17457,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1863 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-787d1085", + version: "18.3.0-www-modern-7015f801", rendererPackageName: "react-dom" }; (function (internals) { @@ -17502,7 +17502,7 @@ var devToolsConfig$jscomp$inline_1863 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-787d1085" + reconcilerVersion: "18.3.0-www-modern-7015f801" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17760,7 +17760,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-787d1085"; +exports.version = "18.3.0-www-modern-7015f801"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index 56b9a7e75d..7a24f4943a 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -5358,7 +5358,7 @@ if (__DEV__) { var invalidParentOrAncestor = invalidParent || invalidAncestor; if (!invalidParentOrAncestor) { - return; + return true; } var ancestorTag = invalidParentOrAncestor.tag; @@ -5366,7 +5366,7 @@ if (__DEV__) { String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; if (didWarn[warnKey]) { - return; + return false; } didWarn[warnKey] = true; @@ -5382,45 +5382,56 @@ if (__DEV__) { } error( - "%s cannot appear as a child of <%s>.%s", + "In HTML, %s cannot be a child of <%s>.%s\n" + + "This will cause a hydration error.", tagDisplayName, ancestorTag, info ); } else { error( - "%s cannot appear as a descendant of " + "<%s>.", + "In HTML, %s cannot be a descendant of <%s>.\n" + + "This will cause a hydration error.", tagDisplayName, ancestorTag ); } + + return false; } } function validateTextNesting(childText, parentTag) { { if (isTagValidWithParent("#text", parentTag)) { - return; + return true; } // eslint-disable-next-line react-internal/safe-string-coercion var warnKey = "#text|" + parentTag; if (didWarn[warnKey]) { - return; + return false; } didWarn[warnKey] = true; if (/\S/.test(childText)) { - error("Text nodes cannot appear as a child of <%s>.", parentTag); + error( + "In HTML, text nodes cannot be a child of <%s>.\n" + + "This will cause a hydration error.", + parentTag + ); } else { error( - "Whitespace text nodes cannot appear as a child of <%s>. " + + "In HTML, whitespace text nodes cannot be a child of <%s>. " + "Make sure you don't have any extra whitespace between tags on " + - "each line of your source code.", + "each line of your source code.\n" + + "This will cause a hydration error.", parentTag ); } + + return false; } } @@ -8354,7 +8365,6 @@ if (__DEV__) { } function deleteHydratableInstance(returnFiber, instance) { - warnUnhydratedInstance(returnFiber, instance); var childToDelete = createFiberFromHostInstanceForDeletion(); childToDelete.stateNode = instance; childToDelete.return = returnFiber; @@ -8368,7 +8378,7 @@ if (__DEV__) { } } - function warnNonhydratedInstance(returnFiber, fiber) { + function warnNonHydratedInstance(returnFiber, fiber) { { if (didSuspendOrErrorDEV) { // Inside a boundary that already suspended. We're currently rendering the @@ -8480,7 +8490,6 @@ if (__DEV__) { function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & ~Hydrating) | Placement; - warnNonhydratedInstance(returnFiber, fiber); } function tryHydrateInstance(fiber, nextInstance) { @@ -8593,18 +8602,32 @@ if (__DEV__) { function tryToClaimNextHydratableInstance(fiber) { if (!isHydrating) { return; - } + } // Validate that this is ok to render here before any mismatches. + var currentHostContext = getHostContext(); + var shouldKeepWarning = validateHydratableInstance( + fiber.type, + fiber.pendingProps, + currentHostContext + ); var initialInstance = nextHydratableInstance; var nextInstance = nextHydratableInstance; if (!nextInstance) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8615,7 +8638,10 @@ if (__DEV__) { if (!tryHydrateInstance(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8630,6 +8656,11 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8639,6 +8670,13 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + if (shouldKeepWarning) { + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); + } + deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8653,6 +8691,17 @@ if (__DEV__) { var text = fiber.pendingProps; var isHydratable = isHydratableText(text); + var shouldKeepWarning = true; + + if (isHydratable) { + // Validate that this is ok to render here before any mismatches. + var currentHostContext = getHostContext(); + shouldKeepWarning = validateHydratableTextInstance( + text, + currentHostContext + ); + } + var initialInstance = nextHydratableInstance; var nextInstance = nextHydratableInstance; @@ -8660,11 +8709,19 @@ if (__DEV__) { // We exclude non hydrabable text because we know there are no matching hydratables. // We either throw or insert depending on the render mode. if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8675,7 +8732,10 @@ if (__DEV__) { if (!tryHydrateText(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8690,6 +8750,11 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8699,6 +8764,13 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + if (shouldKeepWarning) { + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); + } + deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8716,11 +8788,12 @@ if (__DEV__) { if (!nextInstance) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8731,7 +8804,7 @@ if (__DEV__) { if (!tryHydrateSuspense(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8746,6 +8819,7 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8755,6 +8829,10 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8971,6 +9049,7 @@ if (__DEV__) { throwOnHydrationMismatch(); } else { while (nextInstance) { + warnUnhydratedInstance(fiber, nextInstance); deleteHydratableInstance(fiber, nextInstance); nextInstance = getNextHydratableSibling(nextInstance); } @@ -20838,12 +20917,11 @@ if (__DEV__) { } function updateHostComponent$1(current, workInProgress, renderLanes) { - pushHostContext(workInProgress); - if (current === null) { tryToClaimNextHydratableInstance(workInProgress); } + pushHostContext(workInProgress); var type = workInProgress.type; var nextProps = workInProgress.pendingProps; var prevProps = current !== null ? current.memoizedProps : null; @@ -36579,7 +36657,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-16574b61"; + var ReactVersion = "18.3.0-www-classic-0b5500fd"; function createPortal$1( children, @@ -45470,6 +45548,13 @@ if (__DEV__) { function getFirstHydratableChildWithinSuspenseInstance(parentInstance) { return getNextHydratable(parentInstance.nextSibling); } + function validateHydratableInstance(type, props, hostContext) { + { + // TODO: take namespace into account when validating. + var hostContextDev = hostContext; + return validateDOMNesting(type, hostContextDev.ancestorInfo); + } + } function hydrateInstance( instance, type, @@ -45495,6 +45580,18 @@ if (__DEV__) { hostContext ); } + function validateHydratableTextInstance(text, hostContext) { + { + var hostContextDev = hostContext; + var ancestor = hostContextDev.ancestorInfo.current; + + if (ancestor != null) { + return validateTextNesting(text, ancestor.tag); + } + } + + return true; + } function hydrateTextInstance( textInstance, text, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index 8807ee2660..aae1fb3287 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -5181,7 +5181,7 @@ if (__DEV__) { var invalidParentOrAncestor = invalidParent || invalidAncestor; if (!invalidParentOrAncestor) { - return; + return true; } var ancestorTag = invalidParentOrAncestor.tag; @@ -5189,7 +5189,7 @@ if (__DEV__) { String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; if (didWarn[warnKey]) { - return; + return false; } didWarn[warnKey] = true; @@ -5205,45 +5205,56 @@ if (__DEV__) { } error( - "%s cannot appear as a child of <%s>.%s", + "In HTML, %s cannot be a child of <%s>.%s\n" + + "This will cause a hydration error.", tagDisplayName, ancestorTag, info ); } else { error( - "%s cannot appear as a descendant of " + "<%s>.", + "In HTML, %s cannot be a descendant of <%s>.\n" + + "This will cause a hydration error.", tagDisplayName, ancestorTag ); } + + return false; } } function validateTextNesting(childText, parentTag) { { if (isTagValidWithParent("#text", parentTag)) { - return; + return true; } // eslint-disable-next-line react-internal/safe-string-coercion var warnKey = "#text|" + parentTag; if (didWarn[warnKey]) { - return; + return false; } didWarn[warnKey] = true; if (/\S/.test(childText)) { - error("Text nodes cannot appear as a child of <%s>.", parentTag); + error( + "In HTML, text nodes cannot be a child of <%s>.\n" + + "This will cause a hydration error.", + parentTag + ); } else { error( - "Whitespace text nodes cannot appear as a child of <%s>. " + + "In HTML, whitespace text nodes cannot be a child of <%s>. " + "Make sure you don't have any extra whitespace between tags on " + - "each line of your source code.", + "each line of your source code.\n" + + "This will cause a hydration error.", parentTag ); } + + return false; } } @@ -8305,7 +8316,6 @@ if (__DEV__) { } function deleteHydratableInstance(returnFiber, instance) { - warnUnhydratedInstance(returnFiber, instance); var childToDelete = createFiberFromHostInstanceForDeletion(); childToDelete.stateNode = instance; childToDelete.return = returnFiber; @@ -8319,7 +8329,7 @@ if (__DEV__) { } } - function warnNonhydratedInstance(returnFiber, fiber) { + function warnNonHydratedInstance(returnFiber, fiber) { { if (didSuspendOrErrorDEV) { // Inside a boundary that already suspended. We're currently rendering the @@ -8431,7 +8441,6 @@ if (__DEV__) { function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & ~Hydrating) | Placement; - warnNonhydratedInstance(returnFiber, fiber); } function tryHydrateInstance(fiber, nextInstance) { @@ -8544,18 +8553,32 @@ if (__DEV__) { function tryToClaimNextHydratableInstance(fiber) { if (!isHydrating) { return; - } + } // Validate that this is ok to render here before any mismatches. + var currentHostContext = getHostContext(); + var shouldKeepWarning = validateHydratableInstance( + fiber.type, + fiber.pendingProps, + currentHostContext + ); var initialInstance = nextHydratableInstance; var nextInstance = nextHydratableInstance; if (!nextInstance) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8566,7 +8589,10 @@ if (__DEV__) { if (!tryHydrateInstance(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8581,6 +8607,11 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8590,6 +8621,13 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + if (shouldKeepWarning) { + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); + } + deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8604,6 +8642,17 @@ if (__DEV__) { var text = fiber.pendingProps; var isHydratable = isHydratableText(text); + var shouldKeepWarning = true; + + if (isHydratable) { + // Validate that this is ok to render here before any mismatches. + var currentHostContext = getHostContext(); + shouldKeepWarning = validateHydratableTextInstance( + text, + currentHostContext + ); + } + var initialInstance = nextHydratableInstance; var nextInstance = nextHydratableInstance; @@ -8611,11 +8660,19 @@ if (__DEV__) { // We exclude non hydrabable text because we know there are no matching hydratables. // We either throw or insert depending on the render mode. if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8626,7 +8683,10 @@ if (__DEV__) { if (!tryHydrateText(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8641,6 +8701,11 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + + if (shouldKeepWarning) { + warnNonHydratedInstance(hydrationParentFiber, fiber); + } + isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8650,6 +8715,13 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + if (shouldKeepWarning) { + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); + } + deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8667,11 +8739,12 @@ if (__DEV__) { if (!nextInstance) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); throwOnHydrationMismatch(); } // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8682,7 +8755,7 @@ if (__DEV__) { if (!tryHydrateSuspense(fiber, nextInstance)) { if (shouldClientRenderOnMismatch(fiber)) { - warnNonhydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); throwOnHydrationMismatch(); } // If we can't hydrate this instance let's try the next one. // We use this as a heuristic. It's based on intuition and not data so it @@ -8697,6 +8770,7 @@ if (__DEV__) { ) { // Nothing to hydrate. Make it an insertion. insertNonHydratedInstance(hydrationParentFiber, fiber); + warnNonHydratedInstance(hydrationParentFiber, fiber); isHydrating = false; hydrationParentFiber = fiber; nextHydratableInstance = initialInstance; @@ -8706,6 +8780,10 @@ if (__DEV__) { // we'll have to schedule a deletion. To do that, this node needs a dummy // fiber associated with it. + warnUnhydratedInstance( + prevHydrationParentFiber, + firstAttemptedInstance + ); deleteHydratableInstance( prevHydrationParentFiber, firstAttemptedInstance @@ -8922,6 +9000,7 @@ if (__DEV__) { throwOnHydrationMismatch(); } else { while (nextInstance) { + warnUnhydratedInstance(fiber, nextInstance); deleteHydratableInstance(fiber, nextInstance); nextInstance = getNextHydratableSibling(nextInstance); } @@ -20718,12 +20797,11 @@ if (__DEV__) { } function updateHostComponent$1(current, workInProgress, renderLanes) { - pushHostContext(workInProgress); - if (current === null) { tryToClaimNextHydratableInstance(workInProgress); } + pushHostContext(workInProgress); var type = workInProgress.type; var nextProps = workInProgress.pendingProps; var prevProps = current !== null ? current.memoizedProps : null; @@ -36415,7 +36493,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-dac10aba"; + var ReactVersion = "18.3.0-www-modern-3a8af120"; function createPortal$1( children, @@ -46107,6 +46185,13 @@ if (__DEV__) { function getFirstHydratableChildWithinSuspenseInstance(parentInstance) { return getNextHydratable(parentInstance.nextSibling); } + function validateHydratableInstance(type, props, hostContext) { + { + // TODO: take namespace into account when validating. + var hostContextDev = hostContext; + return validateDOMNesting(type, hostContextDev.ancestorInfo); + } + } function hydrateInstance( instance, type, @@ -46132,6 +46217,18 @@ if (__DEV__) { hostContext ); } + function validateHydratableTextInstance(text, hostContext) { + { + var hostContextDev = hostContext; + var ancestor = hostContextDev.ancestorInfo.current; + + if (ancestor != null) { + return validateTextNesting(text, ancestor.tag); + } + } + + return true; + } function hydrateTextInstance( textInstance, text, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index 37e90fc931..f8550823d6 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -11940,7 +11940,6 @@ beginWork = function (current, workInProgress, renderLanes) { ); case 5: return ( - pushHostContext(workInProgress), null === current && isHydrating && (((context = Component = nextHydratableInstance), context) @@ -11965,6 +11964,7 @@ beginWork = function (current, workInProgress, renderLanes) { (isHydrating = !1), (hydrationParentFiber = workInProgress), (nextHydratableInstance = Component))), + pushHostContext(workInProgress), (context = workInProgress.type), (prevState = workInProgress.pendingProps), (nextState = null !== current ? current.memoizedProps : null), @@ -17507,7 +17507,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1824 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-3a8f9fbb", + version: "18.3.0-www-classic-97730216", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2191 = { @@ -17537,7 +17537,7 @@ var internals$jscomp$inline_2191 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-3a8f9fbb" + reconcilerVersion: "18.3.0-www-classic-97730216" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2192 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -18031,4 +18031,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-classic-3a8f9fbb"; +exports.version = "18.3.0-www-classic-97730216"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index cc71d8833d..4a8871d012 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -11819,7 +11819,6 @@ beginWork = function (current, workInProgress, renderLanes) { ); case 5: return ( - pushHostContext(workInProgress), null === current && isHydrating && (((init = Component = nextHydratableInstance), init) @@ -11844,6 +11843,7 @@ beginWork = function (current, workInProgress, renderLanes) { (isHydrating = !1), (hydrationParentFiber = workInProgress), (nextHydratableInstance = Component))), + pushHostContext(workInProgress), (init = workInProgress.type), (prevState = workInProgress.pendingProps), (nextState = null !== current ? current.memoizedProps : null), @@ -17084,7 +17084,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1783 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-b3aa24eb", + version: "18.3.0-www-modern-dd36f326", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2154 = { @@ -17115,7 +17115,7 @@ var internals$jscomp$inline_2154 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-b3aa24eb" + reconcilerVersion: "18.3.0-www-modern-dd36f326" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17536,4 +17536,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); }; -exports.version = "18.3.0-www-modern-b3aa24eb"; +exports.version = "18.3.0-www-modern-dd36f326"; diff --git a/compiled/facebook-www/__test_utils__/ReactAllWarnings.js b/compiled/facebook-www/__test_utils__/ReactAllWarnings.js index d6fea60ee8..a7434fa6b1 100644 --- a/compiled/facebook-www/__test_utils__/ReactAllWarnings.js +++ b/compiled/facebook-www/__test_utils__/ReactAllWarnings.js @@ -15,8 +15,6 @@ export default [ "\"%s\" is not a valid value for revealOrder on . React uses the -s suffix in the spelling. Use \"%ss\" instead.", "\"%s\" is not a valid value for revealOrder on . Use lowercase \"%s\" instead.", "%s a style property during rerender (%s) when a conflicting property is set (%s) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.", - "%s cannot appear as a child of <%s>.%s", - "%s cannot appear as a descendant of <%s>.", "%s contains a textarea with both value and defaultValue props. Textarea elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled textarea and remove one of these props. More info: https://reactjs.org/link/controlled-components", "%s contains an input of type %s with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components", "%s contains an input of type %s with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components", @@ -177,6 +175,10 @@ export default [ "Functions are not valid as a React child. This may happen if you return %s instead of <%s /> from render. Or maybe you meant to call this function rather than return it.", "Functions are not valid as a React child. This may happen if you return %s instead of <%s /> from render. Or maybe you meant to call this function rather than return it.\n <%s>{%s}", "Functions are not valid as a React child. This may happen if you return %s instead of <%s /> from render. Or maybe you meant to call this function rather than return it.\n root.render(%s)", + "In HTML, %s cannot be a child of <%s>.%s\nThis will cause a hydration error.", + "In HTML, %s cannot be a descendant of <%s>.\nThis will cause a hydration error.", + "In HTML, text nodes cannot be a child of <%s>.\nThis will cause a hydration error.", + "In HTML, whitespace text nodes cannot be a child of <%s>. Make sure you don't have any extra whitespace between tags on each line of your source code.\nThis will cause a hydration error.", "Injected module is missing getNodeFromInstance or getInstanceFromNode.", "Internal React Error: React expected bootstrap script or module with src \"%s\" to not have been preloaded already. please file an issue", "Internal React error: A listener was unexpectedly attached to a \"noop\" thenable. This is a bug in React. Please file an issue.", @@ -280,7 +282,6 @@ export default [ "Symbols are not valid as a React child.\n <%s>%s", "Symbols are not valid as a React child.\n root.render(%s)", "Text content did not match. Server: \"%s\" Client: \"%s\"", - "Text nodes cannot appear as a child of <%s>.", "Text strings must be rendered within a component.", "Textarea elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled textarea and remove one of these props. More info: https://reactjs.org/link/controlled-components", "The <%s /> component appears to be a function component that returns a class instance. Change %s to a class that extends React.Component instead. If you can't use a class try assigning the prototype on the function as a workaround. `%s.prototype = React.Component.prototype`. Don't use an arrow function since it cannot be called with `new` by React.", @@ -335,7 +336,6 @@ export default [ "Warning: ref.measureLayout must be called with a node handle or a ref to a native component.", "We should not be hydrating here. This is a bug in React. Please file a bug.", "When calling super() in `%s`, make sure to pass up the same props that your component's constructor was passed.", - "Whitespace text nodes cannot appear as a child of <%s>. Make sure you don't have any extra whitespace between tags on each line of your source code.", "You are accessing \"digest\" from the errorInfo object passed to onRecoverableError. This property is deprecated and will be removed in a future version of React. To access the digest of an Error look for this property on the Error instance itself.", "You are calling ReactDOM.hydrate() on a container that was previously passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call hydrateRoot(container, element)?", "You are calling ReactDOM.render() on a container that was previously passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.render(element)?",