From 6476ee053151abc898dcf7565d39e8a12b9e5354 Mon Sep 17 00:00:00 2001 From: sebmarkbage Date: Mon, 1 May 2023 19:41:06 +0000 Subject: [PATCH] Allow forms to skip hydration of hidden inputs (#26735) This allows us to emit extra ephemeral data that will only be used on server rendered forms. First I refactored the shouldSkip functions to now just do that work inside the canHydrate methods. This makes the Config bindings a little less surface area but it also helps us optimize a bit since we now can look at the code together and find shared paths. canHydrate returns the instance if it matches, that used to just be there to refine the type but it can also be used to just return a different instance later that we find. If we don't find one, we'll bail out and error regardless so no need to skip past anything. DiffTrain build for [67f4fb02130b1fe1856289e3b66bb0b8cca57ff7](https://github.com/facebook/react/commit/67f4fb02130b1fe1856289e3b66bb0b8cca57ff7) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-dev.modern.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 2 +- compiled/facebook-www/ReactART-prod.modern.js | 4 +- compiled/facebook-www/ReactDOM-dev.classic.js | 352 ++++++++---------- compiled/facebook-www/ReactDOM-dev.modern.js | 352 ++++++++---------- .../facebook-www/ReactDOM-prod.classic.js | 319 ++++++++-------- compiled/facebook-www/ReactDOM-prod.modern.js | 319 ++++++++-------- .../ReactDOM-profiling.classic.js | 305 ++++++++------- .../facebook-www/ReactDOM-profiling.modern.js | 305 ++++++++------- .../ReactDOMTesting-dev.classic.js | 352 ++++++++---------- .../ReactDOMTesting-dev.modern.js | 352 ++++++++---------- .../ReactDOMTesting-prod.classic.js | 319 ++++++++-------- .../ReactDOMTesting-prod.modern.js | 319 ++++++++-------- .../ReactTestRenderer-dev.modern.js | 2 +- 15 files changed, 1548 insertions(+), 1758 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index d0972ff0c5..7dbbadbbae 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -8ea96ef84d8f08ed1846dec9e8ed20d2225db0d3 +67f4fb02130b1fe1856289e3b66bb0b8cca57ff7 diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index 2c5b80b2bf..8407779e5f 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-modern-32c95640"; +var ReactVersion = "18.3.0-www-modern-66e1909a"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index b078247a2d..29683f4d52 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-classic-dfc141bd"; +var ReactVersion = "18.3.0-www-classic-993a41e1"; var LegacyRoot = 0; var ConcurrentRoot = 1; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index 121bb0fbb2..73f8ae642e 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -9859,7 +9859,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-modern-aa18893b", + version: "18.3.0-www-modern-939f40c9", rendererPackageName: "react-art" }; var internals$jscomp$inline_1305 = { @@ -9890,7 +9890,7 @@ var internals$jscomp$inline_1305 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-aa18893b" + reconcilerVersion: "18.3.0-www-modern-939f40c9" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1306 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index fcd41db3d5..9320290aab 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -152,6 +152,7 @@ var enableProfilerNestedUpdatePhase = true; var enableProfilerNestedUpdateScheduledHook = dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook; var createRootStrictEffectsByDefault = false; +var enableHostSingletons = true; var enableClientRenderFallbackOnTextMismatch = false; var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation. @@ -8086,7 +8087,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { function tryHydrateInstance(fiber, nextInstance) { // fiber is a HostComponent Fiber - var instance = canHydrateInstance(nextInstance, fiber.type); + var instance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); if (instance !== null) { fiber.stateNode = instance; @@ -8102,7 +8108,11 @@ function tryHydrateInstance(fiber, nextInstance) { function tryHydrateText(fiber, nextInstance) { // fiber is a HostText Fiber var text = fiber.pendingProps; - var textInstance = canHydrateTextInstance(nextInstance, text); + var textInstance = canHydrateTextInstance( + nextInstance, + text, + rootOrSingletonContext + ); if (textInstance !== null) { fiber.stateNode = textInstance; @@ -8117,7 +8127,10 @@ function tryHydrateText(fiber, nextInstance) { function tryHydrateSuspense(fiber, nextInstance) { // fiber is a SuspenseComponent Fiber - var suspenseInstance = canHydrateSuspenseInstance(nextInstance); + var suspenseInstance = canHydrateSuspenseInstance( + nextInstance, + rootOrSingletonContext + ); if (suspenseInstance !== null) { var suspenseState = { @@ -8179,44 +8192,6 @@ function claimHydratableSingleton(fiber) { } } -function advanceToFirstAttemptableInstance(fiber) { - // fiber is HostComponent Fiber - while ( - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - -function advanceToFirstAttemptableTextInstance() { - while ( - nextHydratableInstance && - shouldSkipHydratableForTextInstance(nextHydratableInstance) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - -function advanceToFirstAttemptableSuspenseInstance() { - while ( - nextHydratableInstance && - shouldSkipHydratableForSuspenseInstance(nextHydratableInstance) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - function tryToClaimNextHydratableInstance(fiber) { if (!isHydrating) { return; @@ -8233,12 +8208,6 @@ function tryToClaimNextHydratableInstance(fiber) { } var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableInstance(fiber); - } - var nextInstance = nextHydratableInstance; if (!nextInstance) { @@ -8267,11 +8236,6 @@ function tryToClaimNextHydratableInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableInstance(fiber); - } - if ( !nextHydratableInstance || !tryHydrateInstance(fiber, nextHydratableInstance) @@ -8299,14 +8263,6 @@ function tryToClaimNextHydratableTextInstance(fiber) { var text = fiber.pendingProps; var isHydratable = isHydratableText(text); var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext && isHydratable) { - // We may need to skip past certain nodes in these contexts. - // We don't skip if the text is not hydratable because we know no hydratables - // exist which could match this Fiber - advanceToFirstAttemptableTextInstance(); - } - var nextInstance = nextHydratableInstance; if (!nextInstance || !isHydratable) { @@ -8337,11 +8293,6 @@ function tryToClaimNextHydratableTextInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext && isHydratable) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableTextInstance(); - } - if ( !nextHydratableInstance || !tryHydrateText(fiber, nextHydratableInstance) @@ -8367,12 +8318,6 @@ function tryToClaimNextHydratableSuspenseInstance(fiber) { } var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableSuspenseInstance(); - } - var nextInstance = nextHydratableInstance; if (!nextInstance) { @@ -8401,11 +8346,6 @@ function tryToClaimNextHydratableSuspenseInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableSuspenseInstance(); - } - if ( !nextHydratableInstance || !tryHydrateSuspense(fiber, nextHydratableInstance) @@ -34222,7 +34162,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-67b77c37"; +var ReactVersion = "18.3.0-www-classic-8f87edd0"; function createPortal$1( children, @@ -42993,146 +42933,170 @@ function isHydratableType(type, props) { function isHydratableText(text) { return text !== ""; } -function shouldSkipHydratableForInstance(instance, type, props) { - if (instance.nodeType !== ELEMENT_NODE) { - // This is a suspense boundary or Text node. - // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched - // and this is a hydration error. - // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for - // but it seems reasonable and conservative to reject this as a hydration error as well - return false; - } else if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - isMarkedHoistable(instance) - ) { - // We are either about to - return true; - } else { - // We have an Element with the right type. +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + while (instance.nodeType === ELEMENT_NODE) { var element = instance; - var anyProps = props; // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if - // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension - // using high entropy attributes for certain types. This technique will fail for strange insertions like - // extension prepending
in the but that already breaks before and that is an edge case. + var anyProps = props; - switch (type) { - // case 'title': - //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope - // and if you are a HostComponent with type title we must either be in an context or this title must have an `itemProp` prop. - case "meta": { - // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be - // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags - // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime - // implications are minimal - if (!element.hasAttribute("itemprop")) { - // This is a Hoistable - return true; + if (element.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton || !enableHostSingletons) { + // Usually we error for mismatched tags. + { + return null; + } + } // In root or singleton parents we skip past mismatched instances. + } else if (!inRootOrSingleton || !enableHostSingletons) { + // Match + { + return element; + } + } else if (isMarkedHoistable(element)); + else { + // We have an Element with the right type. + // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if + // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension + // using high entropy attributes for certain types. This technique will fail for strange insertions like + // extension prepending
in the but that already breaks before and that is an edge case. + switch (type) { + // case 'title': + //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope + // and if you are a HostComponent with type title we must either be in an context or this title must have an `itemProp` prop. + case "meta": { + // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be + // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags + // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime + // implications are minimal + if (!element.hasAttribute("itemprop")) { + // This is a Hoistable + break; + } + + return element; } - break; - } + case "link": { + // Links come in many forms and we do expect 3rd parties to inject them into / . We exclude known resources + // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely + // matches. + var rel = element.getAttribute("rel"); - case "link": { - // Links come in many forms and we do expect 3rd parties to inject them into / . We exclude known resources - // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely - // matches. - var rel = element.getAttribute("rel"); + if (rel === "stylesheet" && element.hasAttribute("data-precedence")) { + // This is a stylesheet resource + break; + } else if ( + rel !== anyProps.rel || + element.getAttribute("href") !== + (anyProps.href == null ? null : anyProps.href) || + element.getAttribute("crossorigin") !== + (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) || + element.getAttribute("title") !== + (anyProps.title == null ? null : anyProps.title) + ) { + // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect + // and title could vary for rel alternate + break; + } - if (rel === "stylesheet" && element.hasAttribute("data-precedence")) { - // This is a stylesheet resource - return true; - } else if ( - rel !== anyProps.rel || - element.getAttribute("href") !== - (anyProps.href == null ? null : anyProps.href) || - element.getAttribute("crossorigin") !== - (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) || - element.getAttribute("title") !== - (anyProps.title == null ? null : anyProps.title) - ) { - // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect - // and title could vary for rel alternate - return true; + return element; } - break; - } + case "style": { + // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags + // in or are likely never going to be unmounted given their position in the document and the fact they likely hold global styles + if (element.hasAttribute("data-precedence")) { + // This is a style resource + break; + } - case "style": { - // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags - // in or are likely never going to be unmounted given their position in the document and the fact they likely hold global styles - if (element.hasAttribute("data-precedence")) { - // This is a style resource - return true; + return element; } - break; - } + case "script": { + // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes + // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could + // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. + // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later + // if we learn it is problematic + var srcAttr = element.getAttribute("src"); - case "script": { - // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes - // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could - // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. - // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later - // if we learn it is problematic - var srcAttr = element.getAttribute("src"); + if ( + srcAttr && + element.hasAttribute("async") && + !element.hasAttribute("itemprop") + ) { + // This is an async script resource + break; + } else if ( + srcAttr !== (anyProps.src == null ? null : anyProps.src) || + element.getAttribute("type") !== + (anyProps.type == null ? null : anyProps.type) || + element.getAttribute("crossorigin") !== + (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) + ) { + // This script is for a different src + break; + } - if ( - srcAttr && - element.hasAttribute("async") && - !element.hasAttribute("itemprop") - ) { - // This is an async script resource - return true; - } else if ( - srcAttr !== (anyProps.src == null ? null : anyProps.src) || - element.getAttribute("type") !== - (anyProps.type == null ? null : anyProps.type) || - element.getAttribute("crossorigin") !== - (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) - ) { - // This script is for a different src - return true; + return element; } - break; + default: { + // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, + // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic + // that should work in the vast majority of cases. + return element; + } } - } // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, - // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic - // that should work in the vast majority of cases. + } - return false; - } + var nextInstance = getNextHydratableSibling(element); + + if (nextInstance === null) { + break; + } + + instance = nextInstance; + } // This is a suspense boundary or Text node or we got the end. + // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched + // and this is a hydration error. + // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for + // but it seems reasonable and conservative to reject this as a hydration error as well + + return null; } -function shouldSkipHydratableForTextInstance(instance) { - return instance.nodeType === ELEMENT_NODE; -} -function shouldSkipHydratableForSuspenseInstance(instance) { - return instance.nodeType === ELEMENT_NODE; -} -function canHydrateInstance(instance, type, props) { - if ( - instance.nodeType !== ELEMENT_NODE || - instance.nodeName.toLowerCase() !== type.toLowerCase() - ) { - return null; - } else { - return instance; - } -} -function canHydrateTextInstance(instance, text) { +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + // Empty strings are not parsed by HTML so there won't be a correct match here. if (text === "") return null; - if (instance.nodeType !== TEXT_NODE) { - // Empty strings are not parsed by HTML so there won't be a correct match here. - return null; + while (instance.nodeType !== TEXT_NODE) { + if (!inRootOrSingleton || !enableHostSingletons) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; } // This has now been refined to a text node. return instance; } -function canHydrateSuspenseInstance(instance) { - if (instance.nodeType !== COMMENT_NODE) { - return null; +function canHydrateSuspenseInstance(instance, inRootOrSingleton) { + while (instance.nodeType !== COMMENT_NODE) { + if (!inRootOrSingleton || !enableHostSingletons) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; } // This has now been refined to a suspense node. return instance; @@ -43318,7 +43282,7 @@ function commitHydratedContainer(container) { function commitHydratedSuspenseInstance(suspenseInstance) { // Retry if any event replaying was blocked on this. retryIfBlockedOn(suspenseInstance); -} // @TODO remove this function once float lands and hydrated tail nodes +} function didNotMatchHydratedContainerTextInstance( parentContainer, textInstance, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 13689f126e..0862df42a7 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -138,6 +138,7 @@ var enableProfilerNestedUpdatePhase = true; var enableProfilerNestedUpdateScheduledHook = dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook; var createRootStrictEffectsByDefault = false; +var enableHostSingletons = true; var enableClientRenderFallbackOnTextMismatch = false; var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation. @@ -8027,7 +8028,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { function tryHydrateInstance(fiber, nextInstance) { // fiber is a HostComponent Fiber - var instance = canHydrateInstance(nextInstance, fiber.type); + var instance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); if (instance !== null) { fiber.stateNode = instance; @@ -8043,7 +8049,11 @@ function tryHydrateInstance(fiber, nextInstance) { function tryHydrateText(fiber, nextInstance) { // fiber is a HostText Fiber var text = fiber.pendingProps; - var textInstance = canHydrateTextInstance(nextInstance, text); + var textInstance = canHydrateTextInstance( + nextInstance, + text, + rootOrSingletonContext + ); if (textInstance !== null) { fiber.stateNode = textInstance; @@ -8058,7 +8068,10 @@ function tryHydrateText(fiber, nextInstance) { function tryHydrateSuspense(fiber, nextInstance) { // fiber is a SuspenseComponent Fiber - var suspenseInstance = canHydrateSuspenseInstance(nextInstance); + var suspenseInstance = canHydrateSuspenseInstance( + nextInstance, + rootOrSingletonContext + ); if (suspenseInstance !== null) { var suspenseState = { @@ -8120,44 +8133,6 @@ function claimHydratableSingleton(fiber) { } } -function advanceToFirstAttemptableInstance(fiber) { - // fiber is HostComponent Fiber - while ( - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - -function advanceToFirstAttemptableTextInstance() { - while ( - nextHydratableInstance && - shouldSkipHydratableForTextInstance(nextHydratableInstance) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - -function advanceToFirstAttemptableSuspenseInstance() { - while ( - nextHydratableInstance && - shouldSkipHydratableForSuspenseInstance(nextHydratableInstance) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - function tryToClaimNextHydratableInstance(fiber) { if (!isHydrating) { return; @@ -8174,12 +8149,6 @@ function tryToClaimNextHydratableInstance(fiber) { } var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableInstance(fiber); - } - var nextInstance = nextHydratableInstance; if (!nextInstance) { @@ -8208,11 +8177,6 @@ function tryToClaimNextHydratableInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableInstance(fiber); - } - if ( !nextHydratableInstance || !tryHydrateInstance(fiber, nextHydratableInstance) @@ -8240,14 +8204,6 @@ function tryToClaimNextHydratableTextInstance(fiber) { var text = fiber.pendingProps; var isHydratable = isHydratableText(text); var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext && isHydratable) { - // We may need to skip past certain nodes in these contexts. - // We don't skip if the text is not hydratable because we know no hydratables - // exist which could match this Fiber - advanceToFirstAttemptableTextInstance(); - } - var nextInstance = nextHydratableInstance; if (!nextInstance || !isHydratable) { @@ -8278,11 +8234,6 @@ function tryToClaimNextHydratableTextInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext && isHydratable) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableTextInstance(); - } - if ( !nextHydratableInstance || !tryHydrateText(fiber, nextHydratableInstance) @@ -8308,12 +8259,6 @@ function tryToClaimNextHydratableSuspenseInstance(fiber) { } var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableSuspenseInstance(); - } - var nextInstance = nextHydratableInstance; if (!nextInstance) { @@ -8342,11 +8287,6 @@ function tryToClaimNextHydratableSuspenseInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableSuspenseInstance(); - } - if ( !nextHydratableInstance || !tryHydrateSuspense(fiber, nextHydratableInstance) @@ -34067,7 +34007,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-aa18893b"; +var ReactVersion = "18.3.0-www-modern-939f40c9"; function createPortal$1( children, @@ -43503,146 +43443,170 @@ function isHydratableType(type, props) { function isHydratableText(text) { return text !== ""; } -function shouldSkipHydratableForInstance(instance, type, props) { - if (instance.nodeType !== ELEMENT_NODE) { - // This is a suspense boundary or Text node. - // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched - // and this is a hydration error. - // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for - // but it seems reasonable and conservative to reject this as a hydration error as well - return false; - } else if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - isMarkedHoistable(instance) - ) { - // We are either about to - return true; - } else { - // We have an Element with the right type. +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + while (instance.nodeType === ELEMENT_NODE) { var element = instance; - var anyProps = props; // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if - // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension - // using high entropy attributes for certain types. This technique will fail for strange insertions like - // extension prepending
in the but that already breaks before and that is an edge case. + var anyProps = props; - switch (type) { - // case 'title': - //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope - // and if you are a HostComponent with type title we must either be in an context or this title must have an `itemProp` prop. - case "meta": { - // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be - // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags - // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime - // implications are minimal - if (!element.hasAttribute("itemprop")) { - // This is a Hoistable - return true; + if (element.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton || !enableHostSingletons) { + // Usually we error for mismatched tags. + { + return null; + } + } // In root or singleton parents we skip past mismatched instances. + } else if (!inRootOrSingleton || !enableHostSingletons) { + // Match + { + return element; + } + } else if (isMarkedHoistable(element)); + else { + // We have an Element with the right type. + // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if + // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension + // using high entropy attributes for certain types. This technique will fail for strange insertions like + // extension prepending
in the but that already breaks before and that is an edge case. + switch (type) { + // case 'title': + //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope + // and if you are a HostComponent with type title we must either be in an context or this title must have an `itemProp` prop. + case "meta": { + // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be + // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags + // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime + // implications are minimal + if (!element.hasAttribute("itemprop")) { + // This is a Hoistable + break; + } + + return element; } - break; - } + case "link": { + // Links come in many forms and we do expect 3rd parties to inject them into / . We exclude known resources + // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely + // matches. + var rel = element.getAttribute("rel"); - case "link": { - // Links come in many forms and we do expect 3rd parties to inject them into / . We exclude known resources - // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely - // matches. - var rel = element.getAttribute("rel"); + if (rel === "stylesheet" && element.hasAttribute("data-precedence")) { + // This is a stylesheet resource + break; + } else if ( + rel !== anyProps.rel || + element.getAttribute("href") !== + (anyProps.href == null ? null : anyProps.href) || + element.getAttribute("crossorigin") !== + (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) || + element.getAttribute("title") !== + (anyProps.title == null ? null : anyProps.title) + ) { + // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect + // and title could vary for rel alternate + break; + } - if (rel === "stylesheet" && element.hasAttribute("data-precedence")) { - // This is a stylesheet resource - return true; - } else if ( - rel !== anyProps.rel || - element.getAttribute("href") !== - (anyProps.href == null ? null : anyProps.href) || - element.getAttribute("crossorigin") !== - (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) || - element.getAttribute("title") !== - (anyProps.title == null ? null : anyProps.title) - ) { - // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect - // and title could vary for rel alternate - return true; + return element; } - break; - } + case "style": { + // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags + // in or are likely never going to be unmounted given their position in the document and the fact they likely hold global styles + if (element.hasAttribute("data-precedence")) { + // This is a style resource + break; + } - case "style": { - // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags - // in or are likely never going to be unmounted given their position in the document and the fact they likely hold global styles - if (element.hasAttribute("data-precedence")) { - // This is a style resource - return true; + return element; } - break; - } + case "script": { + // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes + // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could + // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. + // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later + // if we learn it is problematic + var srcAttr = element.getAttribute("src"); - case "script": { - // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes - // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could - // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. - // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later - // if we learn it is problematic - var srcAttr = element.getAttribute("src"); + if ( + srcAttr && + element.hasAttribute("async") && + !element.hasAttribute("itemprop") + ) { + // This is an async script resource + break; + } else if ( + srcAttr !== (anyProps.src == null ? null : anyProps.src) || + element.getAttribute("type") !== + (anyProps.type == null ? null : anyProps.type) || + element.getAttribute("crossorigin") !== + (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) + ) { + // This script is for a different src + break; + } - if ( - srcAttr && - element.hasAttribute("async") && - !element.hasAttribute("itemprop") - ) { - // This is an async script resource - return true; - } else if ( - srcAttr !== (anyProps.src == null ? null : anyProps.src) || - element.getAttribute("type") !== - (anyProps.type == null ? null : anyProps.type) || - element.getAttribute("crossorigin") !== - (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) - ) { - // This script is for a different src - return true; + return element; } - break; + default: { + // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, + // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic + // that should work in the vast majority of cases. + return element; + } } - } // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, - // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic - // that should work in the vast majority of cases. + } - return false; - } + var nextInstance = getNextHydratableSibling(element); + + if (nextInstance === null) { + break; + } + + instance = nextInstance; + } // This is a suspense boundary or Text node or we got the end. + // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched + // and this is a hydration error. + // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for + // but it seems reasonable and conservative to reject this as a hydration error as well + + return null; } -function shouldSkipHydratableForTextInstance(instance) { - return instance.nodeType === ELEMENT_NODE; -} -function shouldSkipHydratableForSuspenseInstance(instance) { - return instance.nodeType === ELEMENT_NODE; -} -function canHydrateInstance(instance, type, props) { - if ( - instance.nodeType !== ELEMENT_NODE || - instance.nodeName.toLowerCase() !== type.toLowerCase() - ) { - return null; - } else { - return instance; - } -} -function canHydrateTextInstance(instance, text) { +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + // Empty strings are not parsed by HTML so there won't be a correct match here. if (text === "") return null; - if (instance.nodeType !== TEXT_NODE) { - // Empty strings are not parsed by HTML so there won't be a correct match here. - return null; + while (instance.nodeType !== TEXT_NODE) { + if (!inRootOrSingleton || !enableHostSingletons) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; } // This has now been refined to a text node. return instance; } -function canHydrateSuspenseInstance(instance) { - if (instance.nodeType !== COMMENT_NODE) { - return null; +function canHydrateSuspenseInstance(instance, inRootOrSingleton) { + while (instance.nodeType !== COMMENT_NODE) { + if (!inRootOrSingleton || !enableHostSingletons) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; } // This has now been refined to a suspense node. return instance; @@ -43828,7 +43792,7 @@ function commitHydratedContainer(container) { function commitHydratedSuspenseInstance(suspenseInstance) { // Retry if any event replaying was blocked on this. retryIfBlockedOn(suspenseInstance); -} // @TODO remove this function once float lands and hydrated tail nodes +} function didNotMatchHydratedContainerTextInstance( parentContainer, textInstance, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 5d7edc730a..7da7135a3d 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -1594,12 +1594,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & -4097) | 2; } function tryHydrateInstance(fiber, nextInstance) { - var type = fiber.type; - nextInstance = - 1 !== nextInstance.nodeType || - nextInstance.nodeName.toLowerCase() !== type.toLowerCase() - ? null - : nextInstance; + nextInstance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1609,12 +1609,11 @@ function tryHydrateInstance(fiber, nextInstance) { : !1; } function tryHydrateText(fiber, nextInstance) { - nextInstance = - "" === fiber.pendingProps - ? null - : 3 !== nextInstance.nodeType - ? null - : nextInstance; + nextInstance = canHydrateTextInstance( + nextInstance, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1623,26 +1622,39 @@ function tryHydrateText(fiber, nextInstance) { : !1; } function tryHydrateSuspense(fiber, nextInstance) { - nextInstance = 8 !== nextInstance.nodeType ? null : nextInstance; - if (null !== nextInstance) { - var JSCompiler_inline_result = - null !== treeContextProvider - ? { id: treeContextId, overflow: treeContextOverflow } - : null; - fiber.memoizedState = { - dehydrated: nextInstance, - treeContext: JSCompiler_inline_result, - retryLane: 1073741824 - }; - JSCompiler_inline_result = createFiber(18, null, null, 0); - JSCompiler_inline_result.stateNode = nextInstance; - JSCompiler_inline_result.return = fiber; - fiber.child = JSCompiler_inline_result; - hydrationParentFiber = fiber; - nextHydratableInstance = null; - return !0; + a: { + var instance = nextInstance; + for (nextInstance = rootOrSingletonContext; 8 !== instance.nodeType; ) { + if (!nextInstance) { + nextInstance = null; + break a; + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) { + nextInstance = null; + break a; + } + } + nextInstance = instance; } - return !1; + return null !== nextInstance + ? ((instance = + null !== treeContextProvider + ? { id: treeContextId, overflow: treeContextOverflow } + : null), + (fiber.memoizedState = { + dehydrated: nextInstance, + treeContext: instance, + retryLane: 1073741824 + }), + (instance = createFiber(18, null, null, 0)), + (instance.stateNode = nextInstance), + (instance.return = fiber), + (fiber.child = instance), + (hydrationParentFiber = fiber), + (nextHydratableInstance = null), + !0) + : !1; } function shouldClientRenderOnMismatch(fiber) { return 0 !== (fiber.mode & 1) && 0 === (fiber.flags & 128); @@ -1650,33 +1662,6 @@ function shouldClientRenderOnMismatch(fiber) { function throwOnHydrationMismatch() { throw Error(formatProdErrorMessage(418)); } -function advanceToFirstAttemptableInstance(fiber) { - for ( - ; - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ); - - ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableTextInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableSuspenseInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} function prepareToHydrateHostInstance(fiber) { var instance = fiber.stateNode, type = fiber.type, @@ -5477,10 +5462,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? pushPrimaryTreeSuspenseHandler(workInProgress) : reuseSuspenseHandlerOnStack(workInProgress); isHydrating && - (((current = nextHydratableInstance), - rootOrSingletonContext && advanceToFirstAttemptableSuspenseInstance(), - (didSuspend = nextHydratableInstance), - didSuspend) + (((didSuspend = current = nextHydratableInstance), didSuspend) ? tryHydrateSuspense(workInProgress, didSuspend) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -5488,8 +5470,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { didSuspend.nextSibling )), (JSCompiler_temp = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableSuspenseInstance(), nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(JSCompiler_temp, didSuspend) @@ -11349,11 +11329,7 @@ beginWork = function (current, workInProgress, renderLanes) { (Component = !(Component.async && (context || prevState)))) : (Component = !0), Component) - ? ((Component = nextHydratableInstance), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), - (context = nextHydratableInstance), - context) + ? ((context = Component = nextHydratableInstance), context) ? tryHydrateInstance(workInProgress, context) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -11361,8 +11337,6 @@ beginWork = function (current, workInProgress, renderLanes) { context.nextSibling )), (prevState = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), nextHydratableInstance && tryHydrateInstance(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(prevState, context) @@ -11399,39 +11373,30 @@ beginWork = function (current, workInProgress, renderLanes) { return ( null === current && isHydrating && - (((renderLanes = "" !== workInProgress.pendingProps), - (current = nextHydratableInstance), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), - (Component = nextHydratableInstance), - Component && renderLanes) - ? tryHydrateText(workInProgress, Component) || + (((Component = "" !== workInProgress.pendingProps), + (current = renderLanes = nextHydratableInstance), + current && Component) + ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable( - Component.nextSibling - )), - (context = hydrationParentFiber), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), + (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(context, Component) + ? deleteHydratableInstance(Component, current) : (insertNonHydratedInstance( hydrationParentFiber, workInProgress ), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))) + (nextHydratableInstance = renderLanes))) : (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), insertNonHydratedInstance(hydrationParentFiber, workInProgress), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))), + (nextHydratableInstance = renderLanes))), null ); case 13: @@ -12769,14 +12734,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$374; if (canUseDOM) { - var isSupported$jscomp$inline_1585 = "oninput" in document; - if (!isSupported$jscomp$inline_1585) { - var element$jscomp$inline_1586 = document.createElement("div"); - element$jscomp$inline_1586.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1585 = - "function" === typeof element$jscomp$inline_1586.oninput; + var isSupported$jscomp$inline_1578 = "oninput" in document; + if (!isSupported$jscomp$inline_1578) { + var element$jscomp$inline_1579 = document.createElement("div"); + element$jscomp$inline_1579.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1578 = + "function" === typeof element$jscomp$inline_1579.oninput; } - JSCompiler_inline_result$jscomp$374 = isSupported$jscomp$inline_1585; + JSCompiler_inline_result$jscomp$374 = isSupported$jscomp$inline_1578; } else JSCompiler_inline_result$jscomp$374 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$374 && @@ -13088,20 +13053,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1626 = 0; - i$jscomp$inline_1626 < simpleEventPluginEvents.length; - i$jscomp$inline_1626++ + var i$jscomp$inline_1619 = 0; + i$jscomp$inline_1619 < simpleEventPluginEvents.length; + i$jscomp$inline_1619++ ) { - var eventName$jscomp$inline_1627 = - simpleEventPluginEvents[i$jscomp$inline_1626], - domEventName$jscomp$inline_1628 = - eventName$jscomp$inline_1627.toLowerCase(), - capitalizedEvent$jscomp$inline_1629 = - eventName$jscomp$inline_1627[0].toUpperCase() + - eventName$jscomp$inline_1627.slice(1); + var eventName$jscomp$inline_1620 = + simpleEventPluginEvents[i$jscomp$inline_1619], + domEventName$jscomp$inline_1621 = + eventName$jscomp$inline_1620.toLowerCase(), + capitalizedEvent$jscomp$inline_1622 = + eventName$jscomp$inline_1620[0].toUpperCase() + + eventName$jscomp$inline_1620.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1628, - "on" + capitalizedEvent$jscomp$inline_1629 + domEventName$jscomp$inline_1621, + "on" + capitalizedEvent$jscomp$inline_1622 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -15145,48 +15110,72 @@ function clearContainerSparingly(container) { container.removeChild(node); } } -function shouldSkipHydratableForInstance(instance, type, props) { - if (1 !== instance.nodeType) return !1; - if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - instance[internalHoistableMarker] - ) - return !0; - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) return !0; - break; - case "link": - type = instance.getAttribute("rel"); - if ( - ("stylesheet" === type && instance.hasAttribute("data-precedence")) || - type !== props.rel || - instance.getAttribute("href") !== - (null == props.href ? null : props.href) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) || - instance.getAttribute("title") !== - (null == props.title ? null : props.title) - ) - return !0; - break; - case "style": - if (instance.hasAttribute("data-precedence")) return !0; - break; - case "script": - if ( - ((type = instance.getAttribute("src")) && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop")) || - type !== (null == props.src ? null : props.src) || - instance.getAttribute("type") !== - (null == props.type ? null : props.type) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) - ) - return !0; +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + for (; 1 === instance.nodeType; ) { + var anyProps = props; + if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton) break; + } else { + if (!inRootOrSingleton) return instance; + if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + var rel = instance.getAttribute("rel"); + if ( + "stylesheet" === rel && + instance.hasAttribute("data-precedence") + ) + break; + else if ( + rel !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + if ( + (rel = instance.getAttribute("src")) && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + else if ( + rel !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) + ) + break; + return instance; + default: + return instance; + } + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) break; } - return !1; + return null; +} +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + if ("" === text) return null; + for (; 3 !== instance.nodeType; ) { + if (!inRootOrSingleton) return null; + instance = getNextHydratable(instance.nextSibling); + if (null === instance) return null; + } + return instance; } function getNextHydratable(node) { for (; null != node; node = node.nextSibling) { @@ -16651,17 +16640,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1836 = { +var devToolsConfig$jscomp$inline_1829 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-5bd84883", + version: "18.3.0-www-classic-97e2c99b", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2210 = { - bundleType: devToolsConfig$jscomp$inline_1836.bundleType, - version: devToolsConfig$jscomp$inline_1836.version, - rendererPackageName: devToolsConfig$jscomp$inline_1836.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1836.rendererConfig, +var internals$jscomp$inline_2203 = { + bundleType: devToolsConfig$jscomp$inline_1829.bundleType, + version: devToolsConfig$jscomp$inline_1829.version, + rendererPackageName: devToolsConfig$jscomp$inline_1829.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1829.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16677,26 +16666,26 @@ var internals$jscomp$inline_2210 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1836.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1829.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-5bd84883" + reconcilerVersion: "18.3.0-www-classic-97e2c99b" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2211 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2204 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2211.isDisabled && - hook$jscomp$inline_2211.supportsFiber + !hook$jscomp$inline_2204.isDisabled && + hook$jscomp$inline_2204.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2211.inject( - internals$jscomp$inline_2210 + (rendererID = hook$jscomp$inline_2204.inject( + internals$jscomp$inline_2203 )), - (injectedHook = hook$jscomp$inline_2211); + (injectedHook = hook$jscomp$inline_2204); } catch (err) {} } assign(Internals, { @@ -16927,4 +16916,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-5bd84883"; +exports.version = "18.3.0-www-classic-97e2c99b"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 70a461f776..fc4d47091c 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -1487,12 +1487,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & -4097) | 2; } function tryHydrateInstance(fiber, nextInstance) { - var type = fiber.type; - nextInstance = - 1 !== nextInstance.nodeType || - nextInstance.nodeName.toLowerCase() !== type.toLowerCase() - ? null - : nextInstance; + nextInstance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1502,12 +1502,11 @@ function tryHydrateInstance(fiber, nextInstance) { : !1; } function tryHydrateText(fiber, nextInstance) { - nextInstance = - "" === fiber.pendingProps - ? null - : 3 !== nextInstance.nodeType - ? null - : nextInstance; + nextInstance = canHydrateTextInstance( + nextInstance, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1516,26 +1515,39 @@ function tryHydrateText(fiber, nextInstance) { : !1; } function tryHydrateSuspense(fiber, nextInstance) { - nextInstance = 8 !== nextInstance.nodeType ? null : nextInstance; - if (null !== nextInstance) { - var JSCompiler_inline_result = - null !== treeContextProvider - ? { id: treeContextId, overflow: treeContextOverflow } - : null; - fiber.memoizedState = { - dehydrated: nextInstance, - treeContext: JSCompiler_inline_result, - retryLane: 1073741824 - }; - JSCompiler_inline_result = createFiber(18, null, null, 0); - JSCompiler_inline_result.stateNode = nextInstance; - JSCompiler_inline_result.return = fiber; - fiber.child = JSCompiler_inline_result; - hydrationParentFiber = fiber; - nextHydratableInstance = null; - return !0; + a: { + var instance = nextInstance; + for (nextInstance = rootOrSingletonContext; 8 !== instance.nodeType; ) { + if (!nextInstance) { + nextInstance = null; + break a; + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) { + nextInstance = null; + break a; + } + } + nextInstance = instance; } - return !1; + return null !== nextInstance + ? ((instance = + null !== treeContextProvider + ? { id: treeContextId, overflow: treeContextOverflow } + : null), + (fiber.memoizedState = { + dehydrated: nextInstance, + treeContext: instance, + retryLane: 1073741824 + }), + (instance = createFiber(18, null, null, 0)), + (instance.stateNode = nextInstance), + (instance.return = fiber), + (fiber.child = instance), + (hydrationParentFiber = fiber), + (nextHydratableInstance = null), + !0) + : !1; } function shouldClientRenderOnMismatch(fiber) { return 0 !== (fiber.mode & 1) && 0 === (fiber.flags & 128); @@ -1543,33 +1555,6 @@ function shouldClientRenderOnMismatch(fiber) { function throwOnHydrationMismatch() { throw Error(formatProdErrorMessage(418)); } -function advanceToFirstAttemptableInstance(fiber) { - for ( - ; - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ); - - ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableTextInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableSuspenseInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} function prepareToHydrateHostInstance(fiber) { var instance = fiber.stateNode, type = fiber.type, @@ -5323,10 +5308,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? pushPrimaryTreeSuspenseHandler(workInProgress) : reuseSuspenseHandlerOnStack(workInProgress); isHydrating && - (((current = nextHydratableInstance), - rootOrSingletonContext && advanceToFirstAttemptableSuspenseInstance(), - (didSuspend = nextHydratableInstance), - didSuspend) + (((didSuspend = current = nextHydratableInstance), didSuspend) ? tryHydrateSuspense(workInProgress, didSuspend) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -5334,8 +5316,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { didSuspend.nextSibling )), (JSCompiler_temp = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableSuspenseInstance(), nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(JSCompiler_temp, didSuspend) @@ -11176,18 +11156,12 @@ beginWork = function (current, workInProgress, renderLanes) { (Component = !(Component.async && (init || prevState)))) : (Component = !0), Component) - ? ((Component = nextHydratableInstance), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), - (init = nextHydratableInstance), - init) + ? ((init = Component = nextHydratableInstance), init) ? tryHydrateInstance(workInProgress, init) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), (nextHydratableInstance = getNextHydratable(init.nextSibling)), (prevState = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), nextHydratableInstance && tryHydrateInstance(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(prevState, init) @@ -11224,39 +11198,30 @@ beginWork = function (current, workInProgress, renderLanes) { return ( null === current && isHydrating && - (((renderLanes = "" !== workInProgress.pendingProps), - (current = nextHydratableInstance), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), - (Component = nextHydratableInstance), - Component && renderLanes) - ? tryHydrateText(workInProgress, Component) || + (((Component = "" !== workInProgress.pendingProps), + (current = renderLanes = nextHydratableInstance), + current && Component) + ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable( - Component.nextSibling - )), - (init = hydrationParentFiber), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), + (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(init, Component) + ? deleteHydratableInstance(Component, current) : (insertNonHydratedInstance( hydrationParentFiber, workInProgress ), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))) + (nextHydratableInstance = renderLanes))) : (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), insertNonHydratedInstance(hydrationParentFiber, workInProgress), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))), + (nextHydratableInstance = renderLanes))), null ); case 13: @@ -13012,14 +12977,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$372; if (canUseDOM) { - var isSupported$jscomp$inline_1584 = "oninput" in document; - if (!isSupported$jscomp$inline_1584) { - var element$jscomp$inline_1585 = document.createElement("div"); - element$jscomp$inline_1585.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1584 = - "function" === typeof element$jscomp$inline_1585.oninput; + var isSupported$jscomp$inline_1577 = "oninput" in document; + if (!isSupported$jscomp$inline_1577) { + var element$jscomp$inline_1578 = document.createElement("div"); + element$jscomp$inline_1578.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1577 = + "function" === typeof element$jscomp$inline_1578.oninput; } - JSCompiler_inline_result$jscomp$372 = isSupported$jscomp$inline_1584; + JSCompiler_inline_result$jscomp$372 = isSupported$jscomp$inline_1577; } else JSCompiler_inline_result$jscomp$372 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$372 && @@ -13331,20 +13296,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1625 = 0; - i$jscomp$inline_1625 < simpleEventPluginEvents.length; - i$jscomp$inline_1625++ + var i$jscomp$inline_1618 = 0; + i$jscomp$inline_1618 < simpleEventPluginEvents.length; + i$jscomp$inline_1618++ ) { - var eventName$jscomp$inline_1626 = - simpleEventPluginEvents[i$jscomp$inline_1625], - domEventName$jscomp$inline_1627 = - eventName$jscomp$inline_1626.toLowerCase(), - capitalizedEvent$jscomp$inline_1628 = - eventName$jscomp$inline_1626[0].toUpperCase() + - eventName$jscomp$inline_1626.slice(1); + var eventName$jscomp$inline_1619 = + simpleEventPluginEvents[i$jscomp$inline_1618], + domEventName$jscomp$inline_1620 = + eventName$jscomp$inline_1619.toLowerCase(), + capitalizedEvent$jscomp$inline_1621 = + eventName$jscomp$inline_1619[0].toUpperCase() + + eventName$jscomp$inline_1619.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1627, - "on" + capitalizedEvent$jscomp$inline_1628 + domEventName$jscomp$inline_1620, + "on" + capitalizedEvent$jscomp$inline_1621 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -15373,48 +15338,72 @@ function clearContainerSparingly(container) { container.removeChild(node); } } -function shouldSkipHydratableForInstance(instance, type, props) { - if (1 !== instance.nodeType) return !1; - if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - instance[internalHoistableMarker] - ) - return !0; - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) return !0; - break; - case "link": - type = instance.getAttribute("rel"); - if ( - ("stylesheet" === type && instance.hasAttribute("data-precedence")) || - type !== props.rel || - instance.getAttribute("href") !== - (null == props.href ? null : props.href) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) || - instance.getAttribute("title") !== - (null == props.title ? null : props.title) - ) - return !0; - break; - case "style": - if (instance.hasAttribute("data-precedence")) return !0; - break; - case "script": - if ( - ((type = instance.getAttribute("src")) && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop")) || - type !== (null == props.src ? null : props.src) || - instance.getAttribute("type") !== - (null == props.type ? null : props.type) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) - ) - return !0; +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + for (; 1 === instance.nodeType; ) { + var anyProps = props; + if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton) break; + } else { + if (!inRootOrSingleton) return instance; + if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + var rel = instance.getAttribute("rel"); + if ( + "stylesheet" === rel && + instance.hasAttribute("data-precedence") + ) + break; + else if ( + rel !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + if ( + (rel = instance.getAttribute("src")) && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + else if ( + rel !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) + ) + break; + return instance; + default: + return instance; + } + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) break; } - return !1; + return null; +} +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + if ("" === text) return null; + for (; 3 !== instance.nodeType; ) { + if (!inRootOrSingleton) return null; + instance = getNextHydratable(instance.nextSibling); + if (null === instance) return null; + } + return instance; } function getNextHydratable(node) { for (; null != node; node = node.nextSibling) { @@ -16178,17 +16167,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1795 = { +var devToolsConfig$jscomp$inline_1788 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-de4cef88", + version: "18.3.0-www-modern-15711d85", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2174 = { - bundleType: devToolsConfig$jscomp$inline_1795.bundleType, - version: devToolsConfig$jscomp$inline_1795.version, - rendererPackageName: devToolsConfig$jscomp$inline_1795.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1795.rendererConfig, +var internals$jscomp$inline_2167 = { + bundleType: devToolsConfig$jscomp$inline_1788.bundleType, + version: devToolsConfig$jscomp$inline_1788.version, + rendererPackageName: devToolsConfig$jscomp$inline_1788.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1788.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16205,26 +16194,26 @@ var internals$jscomp$inline_2174 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1795.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1788.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-de4cef88" + reconcilerVersion: "18.3.0-www-modern-15711d85" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2175 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2168 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2175.isDisabled && - hook$jscomp$inline_2175.supportsFiber + !hook$jscomp$inline_2168.isDisabled && + hook$jscomp$inline_2168.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2175.inject( - internals$jscomp$inline_2174 + (rendererID = hook$jscomp$inline_2168.inject( + internals$jscomp$inline_2167 )), - (injectedHook = hook$jscomp$inline_2175); + (injectedHook = hook$jscomp$inline_2168); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -16383,4 +16372,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-de4cef88"; +exports.version = "18.3.0-www-modern-15711d85"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 589ac3f73e..b703c0a311 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -1738,12 +1738,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & -4097) | 2; } function tryHydrateInstance(fiber, nextInstance) { - var type = fiber.type; - nextInstance = - 1 !== nextInstance.nodeType || - nextInstance.nodeName.toLowerCase() !== type.toLowerCase() - ? null - : nextInstance; + nextInstance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1753,12 +1753,11 @@ function tryHydrateInstance(fiber, nextInstance) { : !1; } function tryHydrateText(fiber, nextInstance) { - nextInstance = - "" === fiber.pendingProps - ? null - : 3 !== nextInstance.nodeType - ? null - : nextInstance; + nextInstance = canHydrateTextInstance( + nextInstance, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1767,26 +1766,39 @@ function tryHydrateText(fiber, nextInstance) { : !1; } function tryHydrateSuspense(fiber, nextInstance) { - nextInstance = 8 !== nextInstance.nodeType ? null : nextInstance; - if (null !== nextInstance) { - var JSCompiler_inline_result = - null !== treeContextProvider - ? { id: treeContextId, overflow: treeContextOverflow } - : null; - fiber.memoizedState = { - dehydrated: nextInstance, - treeContext: JSCompiler_inline_result, - retryLane: 1073741824 - }; - JSCompiler_inline_result = createFiber(18, null, null, 0); - JSCompiler_inline_result.stateNode = nextInstance; - JSCompiler_inline_result.return = fiber; - fiber.child = JSCompiler_inline_result; - hydrationParentFiber = fiber; - nextHydratableInstance = null; - return !0; + a: { + var instance = nextInstance; + for (nextInstance = rootOrSingletonContext; 8 !== instance.nodeType; ) { + if (!nextInstance) { + nextInstance = null; + break a; + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) { + nextInstance = null; + break a; + } + } + nextInstance = instance; } - return !1; + return null !== nextInstance + ? ((instance = + null !== treeContextProvider + ? { id: treeContextId, overflow: treeContextOverflow } + : null), + (fiber.memoizedState = { + dehydrated: nextInstance, + treeContext: instance, + retryLane: 1073741824 + }), + (instance = createFiber(18, null, null, 0)), + (instance.stateNode = nextInstance), + (instance.return = fiber), + (fiber.child = instance), + (hydrationParentFiber = fiber), + (nextHydratableInstance = null), + !0) + : !1; } function shouldClientRenderOnMismatch(fiber) { return 0 !== (fiber.mode & 1) && 0 === (fiber.flags & 128); @@ -1794,33 +1806,6 @@ function shouldClientRenderOnMismatch(fiber) { function throwOnHydrationMismatch() { throw Error(formatProdErrorMessage(418)); } -function advanceToFirstAttemptableInstance(fiber) { - for ( - ; - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ); - - ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableTextInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableSuspenseInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} function prepareToHydrateHostInstance(fiber) { var instance = fiber.stateNode, type = fiber.type, @@ -5708,10 +5693,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? pushPrimaryTreeSuspenseHandler(workInProgress) : reuseSuspenseHandlerOnStack(workInProgress); isHydrating && - (((current = nextHydratableInstance), - rootOrSingletonContext && advanceToFirstAttemptableSuspenseInstance(), - (didSuspend = nextHydratableInstance), - didSuspend) + (((didSuspend = current = nextHydratableInstance), didSuspend) ? tryHydrateSuspense(workInProgress, didSuspend) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -5719,8 +5701,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { didSuspend.nextSibling )), (JSCompiler_temp = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableSuspenseInstance(), nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(JSCompiler_temp, didSuspend) @@ -12090,11 +12070,7 @@ beginWork = function (current, workInProgress, renderLanes) { (Component = !(Component.async && (context || prevState)))) : (Component = !0), Component) - ? ((Component = nextHydratableInstance), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), - (context = nextHydratableInstance), - context) + ? ((context = Component = nextHydratableInstance), context) ? tryHydrateInstance(workInProgress, context) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -12102,8 +12078,6 @@ beginWork = function (current, workInProgress, renderLanes) { context.nextSibling )), (prevState = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), nextHydratableInstance && tryHydrateInstance(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(prevState, context) @@ -12140,39 +12114,30 @@ beginWork = function (current, workInProgress, renderLanes) { return ( null === current && isHydrating && - (((renderLanes = "" !== workInProgress.pendingProps), - (current = nextHydratableInstance), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), - (Component = nextHydratableInstance), - Component && renderLanes) - ? tryHydrateText(workInProgress, Component) || + (((Component = "" !== workInProgress.pendingProps), + (current = renderLanes = nextHydratableInstance), + current && Component) + ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable( - Component.nextSibling - )), - (context = hydrationParentFiber), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), + (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(context, Component) + ? deleteHydratableInstance(Component, current) : (insertNonHydratedInstance( hydrationParentFiber, workInProgress ), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))) + (nextHydratableInstance = renderLanes))) : (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), insertNonHydratedInstance(hydrationParentFiber, workInProgress), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))), + (nextHydratableInstance = renderLanes))), null ); case 13: @@ -13544,14 +13509,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$395; if (canUseDOM) { - var isSupported$jscomp$inline_1670 = "oninput" in document; - if (!isSupported$jscomp$inline_1670) { - var element$jscomp$inline_1671 = document.createElement("div"); - element$jscomp$inline_1671.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1670 = - "function" === typeof element$jscomp$inline_1671.oninput; + var isSupported$jscomp$inline_1663 = "oninput" in document; + if (!isSupported$jscomp$inline_1663) { + var element$jscomp$inline_1664 = document.createElement("div"); + element$jscomp$inline_1664.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1663 = + "function" === typeof element$jscomp$inline_1664.oninput; } - JSCompiler_inline_result$jscomp$395 = isSupported$jscomp$inline_1670; + JSCompiler_inline_result$jscomp$395 = isSupported$jscomp$inline_1663; } else JSCompiler_inline_result$jscomp$395 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$395 && @@ -13863,20 +13828,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1711 = 0; - i$jscomp$inline_1711 < simpleEventPluginEvents.length; - i$jscomp$inline_1711++ + var i$jscomp$inline_1704 = 0; + i$jscomp$inline_1704 < simpleEventPluginEvents.length; + i$jscomp$inline_1704++ ) { - var eventName$jscomp$inline_1712 = - simpleEventPluginEvents[i$jscomp$inline_1711], - domEventName$jscomp$inline_1713 = - eventName$jscomp$inline_1712.toLowerCase(), - capitalizedEvent$jscomp$inline_1714 = - eventName$jscomp$inline_1712[0].toUpperCase() + - eventName$jscomp$inline_1712.slice(1); + var eventName$jscomp$inline_1705 = + simpleEventPluginEvents[i$jscomp$inline_1704], + domEventName$jscomp$inline_1706 = + eventName$jscomp$inline_1705.toLowerCase(), + capitalizedEvent$jscomp$inline_1707 = + eventName$jscomp$inline_1705[0].toUpperCase() + + eventName$jscomp$inline_1705.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1713, - "on" + capitalizedEvent$jscomp$inline_1714 + domEventName$jscomp$inline_1706, + "on" + capitalizedEvent$jscomp$inline_1707 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -15920,48 +15885,72 @@ function clearContainerSparingly(container) { container.removeChild(node); } } -function shouldSkipHydratableForInstance(instance, type, props) { - if (1 !== instance.nodeType) return !1; - if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - instance[internalHoistableMarker] - ) - return !0; - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) return !0; - break; - case "link": - type = instance.getAttribute("rel"); - if ( - ("stylesheet" === type && instance.hasAttribute("data-precedence")) || - type !== props.rel || - instance.getAttribute("href") !== - (null == props.href ? null : props.href) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) || - instance.getAttribute("title") !== - (null == props.title ? null : props.title) - ) - return !0; - break; - case "style": - if (instance.hasAttribute("data-precedence")) return !0; - break; - case "script": - if ( - ((type = instance.getAttribute("src")) && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop")) || - type !== (null == props.src ? null : props.src) || - instance.getAttribute("type") !== - (null == props.type ? null : props.type) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) - ) - return !0; +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + for (; 1 === instance.nodeType; ) { + var anyProps = props; + if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton) break; + } else { + if (!inRootOrSingleton) return instance; + if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + var rel = instance.getAttribute("rel"); + if ( + "stylesheet" === rel && + instance.hasAttribute("data-precedence") + ) + break; + else if ( + rel !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + if ( + (rel = instance.getAttribute("src")) && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + else if ( + rel !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) + ) + break; + return instance; + default: + return instance; + } + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) break; } - return !1; + return null; +} +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + if ("" === text) return null; + for (; 3 !== instance.nodeType; ) { + if (!inRootOrSingleton) return null; + instance = getNextHydratable(instance.nextSibling); + if (null === instance) return null; + } + return instance; } function getNextHydratable(node) { for (; null != node; node = node.nextSibling) { @@ -17426,10 +17415,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1921 = { +var devToolsConfig$jscomp$inline_1914 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-3f3d6ce7", + version: "18.3.0-www-classic-5bbe5ccf", rendererPackageName: "react-dom" }; (function (internals) { @@ -17447,10 +17436,10 @@ var devToolsConfig$jscomp$inline_1921 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1921.bundleType, - version: devToolsConfig$jscomp$inline_1921.version, - rendererPackageName: devToolsConfig$jscomp$inline_1921.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1921.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1914.bundleType, + version: devToolsConfig$jscomp$inline_1914.version, + rendererPackageName: devToolsConfig$jscomp$inline_1914.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1914.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -17466,14 +17455,14 @@ var devToolsConfig$jscomp$inline_1921 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1921.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1914.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-3f3d6ce7" + reconcilerVersion: "18.3.0-www-classic-5bbe5ccf" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -17703,7 +17692,7 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-3f3d6ce7"; +exports.version = "18.3.0-www-classic-5bbe5ccf"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index acce00954a..3f90e7f995 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -1631,12 +1631,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & -4097) | 2; } function tryHydrateInstance(fiber, nextInstance) { - var type = fiber.type; - nextInstance = - 1 !== nextInstance.nodeType || - nextInstance.nodeName.toLowerCase() !== type.toLowerCase() - ? null - : nextInstance; + nextInstance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1646,12 +1646,11 @@ function tryHydrateInstance(fiber, nextInstance) { : !1; } function tryHydrateText(fiber, nextInstance) { - nextInstance = - "" === fiber.pendingProps - ? null - : 3 !== nextInstance.nodeType - ? null - : nextInstance; + nextInstance = canHydrateTextInstance( + nextInstance, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1660,26 +1659,39 @@ function tryHydrateText(fiber, nextInstance) { : !1; } function tryHydrateSuspense(fiber, nextInstance) { - nextInstance = 8 !== nextInstance.nodeType ? null : nextInstance; - if (null !== nextInstance) { - var JSCompiler_inline_result = - null !== treeContextProvider - ? { id: treeContextId, overflow: treeContextOverflow } - : null; - fiber.memoizedState = { - dehydrated: nextInstance, - treeContext: JSCompiler_inline_result, - retryLane: 1073741824 - }; - JSCompiler_inline_result = createFiber(18, null, null, 0); - JSCompiler_inline_result.stateNode = nextInstance; - JSCompiler_inline_result.return = fiber; - fiber.child = JSCompiler_inline_result; - hydrationParentFiber = fiber; - nextHydratableInstance = null; - return !0; + a: { + var instance = nextInstance; + for (nextInstance = rootOrSingletonContext; 8 !== instance.nodeType; ) { + if (!nextInstance) { + nextInstance = null; + break a; + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) { + nextInstance = null; + break a; + } + } + nextInstance = instance; } - return !1; + return null !== nextInstance + ? ((instance = + null !== treeContextProvider + ? { id: treeContextId, overflow: treeContextOverflow } + : null), + (fiber.memoizedState = { + dehydrated: nextInstance, + treeContext: instance, + retryLane: 1073741824 + }), + (instance = createFiber(18, null, null, 0)), + (instance.stateNode = nextInstance), + (instance.return = fiber), + (fiber.child = instance), + (hydrationParentFiber = fiber), + (nextHydratableInstance = null), + !0) + : !1; } function shouldClientRenderOnMismatch(fiber) { return 0 !== (fiber.mode & 1) && 0 === (fiber.flags & 128); @@ -1687,33 +1699,6 @@ function shouldClientRenderOnMismatch(fiber) { function throwOnHydrationMismatch() { throw Error(formatProdErrorMessage(418)); } -function advanceToFirstAttemptableInstance(fiber) { - for ( - ; - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ); - - ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableTextInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableSuspenseInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} function prepareToHydrateHostInstance(fiber) { var instance = fiber.stateNode, type = fiber.type, @@ -5548,10 +5533,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? pushPrimaryTreeSuspenseHandler(workInProgress) : reuseSuspenseHandlerOnStack(workInProgress); isHydrating && - (((current = nextHydratableInstance), - rootOrSingletonContext && advanceToFirstAttemptableSuspenseInstance(), - (didSuspend = nextHydratableInstance), - didSuspend) + (((didSuspend = current = nextHydratableInstance), didSuspend) ? tryHydrateSuspense(workInProgress, didSuspend) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -5559,8 +5541,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { didSuspend.nextSibling )), (JSCompiler_temp = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableSuspenseInstance(), nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(JSCompiler_temp, didSuspend) @@ -11911,18 +11891,12 @@ beginWork = function (current, workInProgress, renderLanes) { (Component = !(Component.async && (init || prevState)))) : (Component = !0), Component) - ? ((Component = nextHydratableInstance), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), - (init = nextHydratableInstance), - init) + ? ((init = Component = nextHydratableInstance), init) ? tryHydrateInstance(workInProgress, init) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), (nextHydratableInstance = getNextHydratable(init.nextSibling)), (prevState = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), nextHydratableInstance && tryHydrateInstance(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(prevState, init) @@ -11959,39 +11933,30 @@ beginWork = function (current, workInProgress, renderLanes) { return ( null === current && isHydrating && - (((renderLanes = "" !== workInProgress.pendingProps), - (current = nextHydratableInstance), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), - (Component = nextHydratableInstance), - Component && renderLanes) - ? tryHydrateText(workInProgress, Component) || + (((Component = "" !== workInProgress.pendingProps), + (current = renderLanes = nextHydratableInstance), + current && Component) + ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable( - Component.nextSibling - )), - (init = hydrationParentFiber), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), + (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(init, Component) + ? deleteHydratableInstance(Component, current) : (insertNonHydratedInstance( hydrationParentFiber, workInProgress ), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))) + (nextHydratableInstance = renderLanes))) : (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), insertNonHydratedInstance(hydrationParentFiber, workInProgress), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))), + (nextHydratableInstance = renderLanes))), null ); case 13: @@ -13781,14 +13746,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$393; if (canUseDOM) { - var isSupported$jscomp$inline_1669 = "oninput" in document; - if (!isSupported$jscomp$inline_1669) { - var element$jscomp$inline_1670 = document.createElement("div"); - element$jscomp$inline_1670.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1669 = - "function" === typeof element$jscomp$inline_1670.oninput; + var isSupported$jscomp$inline_1662 = "oninput" in document; + if (!isSupported$jscomp$inline_1662) { + var element$jscomp$inline_1663 = document.createElement("div"); + element$jscomp$inline_1663.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1662 = + "function" === typeof element$jscomp$inline_1663.oninput; } - JSCompiler_inline_result$jscomp$393 = isSupported$jscomp$inline_1669; + JSCompiler_inline_result$jscomp$393 = isSupported$jscomp$inline_1662; } else JSCompiler_inline_result$jscomp$393 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$393 && @@ -14100,20 +14065,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1710 = 0; - i$jscomp$inline_1710 < simpleEventPluginEvents.length; - i$jscomp$inline_1710++ + var i$jscomp$inline_1703 = 0; + i$jscomp$inline_1703 < simpleEventPluginEvents.length; + i$jscomp$inline_1703++ ) { - var eventName$jscomp$inline_1711 = - simpleEventPluginEvents[i$jscomp$inline_1710], - domEventName$jscomp$inline_1712 = - eventName$jscomp$inline_1711.toLowerCase(), - capitalizedEvent$jscomp$inline_1713 = - eventName$jscomp$inline_1711[0].toUpperCase() + - eventName$jscomp$inline_1711.slice(1); + var eventName$jscomp$inline_1704 = + simpleEventPluginEvents[i$jscomp$inline_1703], + domEventName$jscomp$inline_1705 = + eventName$jscomp$inline_1704.toLowerCase(), + capitalizedEvent$jscomp$inline_1706 = + eventName$jscomp$inline_1704[0].toUpperCase() + + eventName$jscomp$inline_1704.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1712, - "on" + capitalizedEvent$jscomp$inline_1713 + domEventName$jscomp$inline_1705, + "on" + capitalizedEvent$jscomp$inline_1706 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -16142,48 +16107,72 @@ function clearContainerSparingly(container) { container.removeChild(node); } } -function shouldSkipHydratableForInstance(instance, type, props) { - if (1 !== instance.nodeType) return !1; - if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - instance[internalHoistableMarker] - ) - return !0; - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) return !0; - break; - case "link": - type = instance.getAttribute("rel"); - if ( - ("stylesheet" === type && instance.hasAttribute("data-precedence")) || - type !== props.rel || - instance.getAttribute("href") !== - (null == props.href ? null : props.href) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) || - instance.getAttribute("title") !== - (null == props.title ? null : props.title) - ) - return !0; - break; - case "style": - if (instance.hasAttribute("data-precedence")) return !0; - break; - case "script": - if ( - ((type = instance.getAttribute("src")) && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop")) || - type !== (null == props.src ? null : props.src) || - instance.getAttribute("type") !== - (null == props.type ? null : props.type) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) - ) - return !0; +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + for (; 1 === instance.nodeType; ) { + var anyProps = props; + if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton) break; + } else { + if (!inRootOrSingleton) return instance; + if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + var rel = instance.getAttribute("rel"); + if ( + "stylesheet" === rel && + instance.hasAttribute("data-precedence") + ) + break; + else if ( + rel !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + if ( + (rel = instance.getAttribute("src")) && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + else if ( + rel !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) + ) + break; + return instance; + default: + return instance; + } + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) break; } - return !1; + return null; +} +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + if ("" === text) return null; + for (; 3 !== instance.nodeType; ) { + if (!inRootOrSingleton) return null; + instance = getNextHydratable(instance.nextSibling); + if (null === instance) return null; + } + return instance; } function getNextHydratable(node) { for (; null != node; node = node.nextSibling) { @@ -16947,10 +16936,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1880 = { +var devToolsConfig$jscomp$inline_1873 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-cac82729", + version: "18.3.0-www-modern-55add5ba", rendererPackageName: "react-dom" }; (function (internals) { @@ -16968,10 +16957,10 @@ var devToolsConfig$jscomp$inline_1880 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1880.bundleType, - version: devToolsConfig$jscomp$inline_1880.version, - rendererPackageName: devToolsConfig$jscomp$inline_1880.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1880.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1873.bundleType, + version: devToolsConfig$jscomp$inline_1873.version, + rendererPackageName: devToolsConfig$jscomp$inline_1873.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1873.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16988,14 +16977,14 @@ var devToolsConfig$jscomp$inline_1880 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1880.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1873.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-cac82729" + reconcilerVersion: "18.3.0-www-modern-55add5ba" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17153,7 +17142,7 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-cac82729"; +exports.version = "18.3.0-www-modern-55add5ba"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index 4a03a1a5a3..4bb9bc3475 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -141,6 +141,7 @@ var enableProfilerNestedUpdatePhase = true; var enableProfilerNestedUpdateScheduledHook = dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook; var createRootStrictEffectsByDefault = false; +var enableHostSingletons = true; var enableClientRenderFallbackOnTextMismatch = false; var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation. @@ -8220,7 +8221,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { function tryHydrateInstance(fiber, nextInstance) { // fiber is a HostComponent Fiber - var instance = canHydrateInstance(nextInstance, fiber.type); + var instance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); if (instance !== null) { fiber.stateNode = instance; @@ -8236,7 +8242,11 @@ function tryHydrateInstance(fiber, nextInstance) { function tryHydrateText(fiber, nextInstance) { // fiber is a HostText Fiber var text = fiber.pendingProps; - var textInstance = canHydrateTextInstance(nextInstance, text); + var textInstance = canHydrateTextInstance( + nextInstance, + text, + rootOrSingletonContext + ); if (textInstance !== null) { fiber.stateNode = textInstance; @@ -8251,7 +8261,10 @@ function tryHydrateText(fiber, nextInstance) { function tryHydrateSuspense(fiber, nextInstance) { // fiber is a SuspenseComponent Fiber - var suspenseInstance = canHydrateSuspenseInstance(nextInstance); + var suspenseInstance = canHydrateSuspenseInstance( + nextInstance, + rootOrSingletonContext + ); if (suspenseInstance !== null) { var suspenseState = { @@ -8313,44 +8326,6 @@ function claimHydratableSingleton(fiber) { } } -function advanceToFirstAttemptableInstance(fiber) { - // fiber is HostComponent Fiber - while ( - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - -function advanceToFirstAttemptableTextInstance() { - while ( - nextHydratableInstance && - shouldSkipHydratableForTextInstance(nextHydratableInstance) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - -function advanceToFirstAttemptableSuspenseInstance() { - while ( - nextHydratableInstance && - shouldSkipHydratableForSuspenseInstance(nextHydratableInstance) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - function tryToClaimNextHydratableInstance(fiber) { if (!isHydrating) { return; @@ -8367,12 +8342,6 @@ function tryToClaimNextHydratableInstance(fiber) { } var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableInstance(fiber); - } - var nextInstance = nextHydratableInstance; if (!nextInstance) { @@ -8401,11 +8370,6 @@ function tryToClaimNextHydratableInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableInstance(fiber); - } - if ( !nextHydratableInstance || !tryHydrateInstance(fiber, nextHydratableInstance) @@ -8433,14 +8397,6 @@ function tryToClaimNextHydratableTextInstance(fiber) { var text = fiber.pendingProps; var isHydratable = isHydratableText(text); var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext && isHydratable) { - // We may need to skip past certain nodes in these contexts. - // We don't skip if the text is not hydratable because we know no hydratables - // exist which could match this Fiber - advanceToFirstAttemptableTextInstance(); - } - var nextInstance = nextHydratableInstance; if (!nextInstance || !isHydratable) { @@ -8471,11 +8427,6 @@ function tryToClaimNextHydratableTextInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext && isHydratable) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableTextInstance(); - } - if ( !nextHydratableInstance || !tryHydrateText(fiber, nextHydratableInstance) @@ -8501,12 +8452,6 @@ function tryToClaimNextHydratableSuspenseInstance(fiber) { } var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableSuspenseInstance(); - } - var nextInstance = nextHydratableInstance; if (!nextInstance) { @@ -8535,11 +8480,6 @@ function tryToClaimNextHydratableSuspenseInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableSuspenseInstance(); - } - if ( !nextHydratableInstance || !tryHydrateSuspense(fiber, nextHydratableInstance) @@ -34839,7 +34779,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-9abec2a4"; +var ReactVersion = "18.3.0-www-classic-c84cd989"; function createPortal$1( children, @@ -43610,146 +43550,170 @@ function isHydratableType(type, props) { function isHydratableText(text) { return text !== ""; } -function shouldSkipHydratableForInstance(instance, type, props) { - if (instance.nodeType !== ELEMENT_NODE) { - // This is a suspense boundary or Text node. - // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched - // and this is a hydration error. - // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for - // but it seems reasonable and conservative to reject this as a hydration error as well - return false; - } else if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - isMarkedHoistable(instance) - ) { - // We are either about to - return true; - } else { - // We have an Element with the right type. +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + while (instance.nodeType === ELEMENT_NODE) { var element = instance; - var anyProps = props; // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if - // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension - // using high entropy attributes for certain types. This technique will fail for strange insertions like - // extension prepending
in the but that already breaks before and that is an edge case. + var anyProps = props; - switch (type) { - // case 'title': - //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope - // and if you are a HostComponent with type title we must either be in an context or this title must have an `itemProp` prop. - case "meta": { - // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be - // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags - // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime - // implications are minimal - if (!element.hasAttribute("itemprop")) { - // This is a Hoistable - return true; + if (element.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton || !enableHostSingletons) { + // Usually we error for mismatched tags. + { + return null; + } + } // In root or singleton parents we skip past mismatched instances. + } else if (!inRootOrSingleton || !enableHostSingletons) { + // Match + { + return element; + } + } else if (isMarkedHoistable(element)); + else { + // We have an Element with the right type. + // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if + // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension + // using high entropy attributes for certain types. This technique will fail for strange insertions like + // extension prepending
in the but that already breaks before and that is an edge case. + switch (type) { + // case 'title': + //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope + // and if you are a HostComponent with type title we must either be in an context or this title must have an `itemProp` prop. + case "meta": { + // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be + // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags + // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime + // implications are minimal + if (!element.hasAttribute("itemprop")) { + // This is a Hoistable + break; + } + + return element; } - break; - } + case "link": { + // Links come in many forms and we do expect 3rd parties to inject them into / . We exclude known resources + // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely + // matches. + var rel = element.getAttribute("rel"); - case "link": { - // Links come in many forms and we do expect 3rd parties to inject them into / . We exclude known resources - // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely - // matches. - var rel = element.getAttribute("rel"); + if (rel === "stylesheet" && element.hasAttribute("data-precedence")) { + // This is a stylesheet resource + break; + } else if ( + rel !== anyProps.rel || + element.getAttribute("href") !== + (anyProps.href == null ? null : anyProps.href) || + element.getAttribute("crossorigin") !== + (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) || + element.getAttribute("title") !== + (anyProps.title == null ? null : anyProps.title) + ) { + // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect + // and title could vary for rel alternate + break; + } - if (rel === "stylesheet" && element.hasAttribute("data-precedence")) { - // This is a stylesheet resource - return true; - } else if ( - rel !== anyProps.rel || - element.getAttribute("href") !== - (anyProps.href == null ? null : anyProps.href) || - element.getAttribute("crossorigin") !== - (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) || - element.getAttribute("title") !== - (anyProps.title == null ? null : anyProps.title) - ) { - // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect - // and title could vary for rel alternate - return true; + return element; } - break; - } + case "style": { + // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags + // in or are likely never going to be unmounted given their position in the document and the fact they likely hold global styles + if (element.hasAttribute("data-precedence")) { + // This is a style resource + break; + } - case "style": { - // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags - // in or are likely never going to be unmounted given their position in the document and the fact they likely hold global styles - if (element.hasAttribute("data-precedence")) { - // This is a style resource - return true; + return element; } - break; - } + case "script": { + // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes + // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could + // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. + // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later + // if we learn it is problematic + var srcAttr = element.getAttribute("src"); - case "script": { - // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes - // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could - // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. - // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later - // if we learn it is problematic - var srcAttr = element.getAttribute("src"); + if ( + srcAttr && + element.hasAttribute("async") && + !element.hasAttribute("itemprop") + ) { + // This is an async script resource + break; + } else if ( + srcAttr !== (anyProps.src == null ? null : anyProps.src) || + element.getAttribute("type") !== + (anyProps.type == null ? null : anyProps.type) || + element.getAttribute("crossorigin") !== + (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) + ) { + // This script is for a different src + break; + } - if ( - srcAttr && - element.hasAttribute("async") && - !element.hasAttribute("itemprop") - ) { - // This is an async script resource - return true; - } else if ( - srcAttr !== (anyProps.src == null ? null : anyProps.src) || - element.getAttribute("type") !== - (anyProps.type == null ? null : anyProps.type) || - element.getAttribute("crossorigin") !== - (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) - ) { - // This script is for a different src - return true; + return element; } - break; + default: { + // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, + // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic + // that should work in the vast majority of cases. + return element; + } } - } // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, - // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic - // that should work in the vast majority of cases. + } - return false; - } + var nextInstance = getNextHydratableSibling(element); + + if (nextInstance === null) { + break; + } + + instance = nextInstance; + } // This is a suspense boundary or Text node or we got the end. + // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched + // and this is a hydration error. + // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for + // but it seems reasonable and conservative to reject this as a hydration error as well + + return null; } -function shouldSkipHydratableForTextInstance(instance) { - return instance.nodeType === ELEMENT_NODE; -} -function shouldSkipHydratableForSuspenseInstance(instance) { - return instance.nodeType === ELEMENT_NODE; -} -function canHydrateInstance(instance, type, props) { - if ( - instance.nodeType !== ELEMENT_NODE || - instance.nodeName.toLowerCase() !== type.toLowerCase() - ) { - return null; - } else { - return instance; - } -} -function canHydrateTextInstance(instance, text) { +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + // Empty strings are not parsed by HTML so there won't be a correct match here. if (text === "") return null; - if (instance.nodeType !== TEXT_NODE) { - // Empty strings are not parsed by HTML so there won't be a correct match here. - return null; + while (instance.nodeType !== TEXT_NODE) { + if (!inRootOrSingleton || !enableHostSingletons) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; } // This has now been refined to a text node. return instance; } -function canHydrateSuspenseInstance(instance) { - if (instance.nodeType !== COMMENT_NODE) { - return null; +function canHydrateSuspenseInstance(instance, inRootOrSingleton) { + while (instance.nodeType !== COMMENT_NODE) { + if (!inRootOrSingleton || !enableHostSingletons) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; } // This has now been refined to a suspense node. return instance; @@ -43935,7 +43899,7 @@ function commitHydratedContainer(container) { function commitHydratedSuspenseInstance(suspenseInstance) { // Retry if any event replaying was blocked on this. retryIfBlockedOn(suspenseInstance); -} // @TODO remove this function once float lands and hydrated tail nodes +} function didNotMatchHydratedContainerTextInstance( parentContainer, textInstance, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index d312caaa93..4262078cdb 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -127,6 +127,7 @@ var enableProfilerNestedUpdatePhase = true; var enableProfilerNestedUpdateScheduledHook = dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook; var createRootStrictEffectsByDefault = false; +var enableHostSingletons = true; var enableClientRenderFallbackOnTextMismatch = false; var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; // Note: we'll want to remove this when we to userland implementation. @@ -8161,7 +8162,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { function tryHydrateInstance(fiber, nextInstance) { // fiber is a HostComponent Fiber - var instance = canHydrateInstance(nextInstance, fiber.type); + var instance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); if (instance !== null) { fiber.stateNode = instance; @@ -8177,7 +8183,11 @@ function tryHydrateInstance(fiber, nextInstance) { function tryHydrateText(fiber, nextInstance) { // fiber is a HostText Fiber var text = fiber.pendingProps; - var textInstance = canHydrateTextInstance(nextInstance, text); + var textInstance = canHydrateTextInstance( + nextInstance, + text, + rootOrSingletonContext + ); if (textInstance !== null) { fiber.stateNode = textInstance; @@ -8192,7 +8202,10 @@ function tryHydrateText(fiber, nextInstance) { function tryHydrateSuspense(fiber, nextInstance) { // fiber is a SuspenseComponent Fiber - var suspenseInstance = canHydrateSuspenseInstance(nextInstance); + var suspenseInstance = canHydrateSuspenseInstance( + nextInstance, + rootOrSingletonContext + ); if (suspenseInstance !== null) { var suspenseState = { @@ -8254,44 +8267,6 @@ function claimHydratableSingleton(fiber) { } } -function advanceToFirstAttemptableInstance(fiber) { - // fiber is HostComponent Fiber - while ( - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - -function advanceToFirstAttemptableTextInstance() { - while ( - nextHydratableInstance && - shouldSkipHydratableForTextInstance(nextHydratableInstance) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - -function advanceToFirstAttemptableSuspenseInstance() { - while ( - nextHydratableInstance && - shouldSkipHydratableForSuspenseInstance(nextHydratableInstance) - ) { - // Flow doesn't understand that inside this block nextHydratableInstance is not null - var instance = nextHydratableInstance; - nextHydratableInstance = getNextHydratableSibling(instance); - } -} - function tryToClaimNextHydratableInstance(fiber) { if (!isHydrating) { return; @@ -8308,12 +8283,6 @@ function tryToClaimNextHydratableInstance(fiber) { } var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableInstance(fiber); - } - var nextInstance = nextHydratableInstance; if (!nextInstance) { @@ -8342,11 +8311,6 @@ function tryToClaimNextHydratableInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableInstance(fiber); - } - if ( !nextHydratableInstance || !tryHydrateInstance(fiber, nextHydratableInstance) @@ -8374,14 +8338,6 @@ function tryToClaimNextHydratableTextInstance(fiber) { var text = fiber.pendingProps; var isHydratable = isHydratableText(text); var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext && isHydratable) { - // We may need to skip past certain nodes in these contexts. - // We don't skip if the text is not hydratable because we know no hydratables - // exist which could match this Fiber - advanceToFirstAttemptableTextInstance(); - } - var nextInstance = nextHydratableInstance; if (!nextInstance || !isHydratable) { @@ -8412,11 +8368,6 @@ function tryToClaimNextHydratableTextInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext && isHydratable) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableTextInstance(); - } - if ( !nextHydratableInstance || !tryHydrateText(fiber, nextHydratableInstance) @@ -8442,12 +8393,6 @@ function tryToClaimNextHydratableSuspenseInstance(fiber) { } var initialInstance = nextHydratableInstance; - - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableSuspenseInstance(); - } - var nextInstance = nextHydratableInstance; if (!nextInstance) { @@ -8476,11 +8421,6 @@ function tryToClaimNextHydratableSuspenseInstance(fiber) { nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; - if (rootOrSingletonContext) { - // We may need to skip past certain nodes in these contexts - advanceToFirstAttemptableSuspenseInstance(); - } - if ( !nextHydratableInstance || !tryHydrateSuspense(fiber, nextHydratableInstance) @@ -34684,7 +34624,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-854de993"; +var ReactVersion = "18.3.0-www-modern-8a31c6c4"; function createPortal$1( children, @@ -44120,146 +44060,170 @@ function isHydratableType(type, props) { function isHydratableText(text) { return text !== ""; } -function shouldSkipHydratableForInstance(instance, type, props) { - if (instance.nodeType !== ELEMENT_NODE) { - // This is a suspense boundary or Text node. - // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched - // and this is a hydration error. - // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for - // but it seems reasonable and conservative to reject this as a hydration error as well - return false; - } else if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - isMarkedHoistable(instance) - ) { - // We are either about to - return true; - } else { - // We have an Element with the right type. +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + while (instance.nodeType === ELEMENT_NODE) { var element = instance; - var anyProps = props; // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if - // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension - // using high entropy attributes for certain types. This technique will fail for strange insertions like - // extension prepending
in the but that already breaks before and that is an edge case. + var anyProps = props; - switch (type) { - // case 'title': - //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope - // and if you are a HostComponent with type title we must either be in an context or this title must have an `itemProp` prop. - case "meta": { - // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be - // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags - // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime - // implications are minimal - if (!element.hasAttribute("itemprop")) { - // This is a Hoistable - return true; + if (element.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton || !enableHostSingletons) { + // Usually we error for mismatched tags. + { + return null; + } + } // In root or singleton parents we skip past mismatched instances. + } else if (!inRootOrSingleton || !enableHostSingletons) { + // Match + { + return element; + } + } else if (isMarkedHoistable(element)); + else { + // We have an Element with the right type. + // We are going to try to exclude it if we can definitely identify it as a hoisted Node or if + // we can guess that the node is likely hoisted or was inserted by a 3rd party script or browser extension + // using high entropy attributes for certain types. This technique will fail for strange insertions like + // extension prepending
in the but that already breaks before and that is an edge case. + switch (type) { + // case 'title': + //We assume all titles are matchable. You should only have one in the Document, at least in a hoistable scope + // and if you are a HostComponent with type title we must either be in an context or this title must have an `itemProp` prop. + case "meta": { + // The only way to opt out of hoisting meta tags is to give it an itemprop attribute. We assume there will be + // not 3rd party meta tags that are prepended, accepting the cases where this isn't true because meta tags + // are usually only functional for SSR so even in a rare case where we did bind to an injected tag the runtime + // implications are minimal + if (!element.hasAttribute("itemprop")) { + // This is a Hoistable + break; + } + + return element; } - break; - } + case "link": { + // Links come in many forms and we do expect 3rd parties to inject them into / . We exclude known resources + // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely + // matches. + var rel = element.getAttribute("rel"); - case "link": { - // Links come in many forms and we do expect 3rd parties to inject them into / . We exclude known resources - // and then use high-entroy attributes like href which are almost always used and almost always unique to filter out unlikely - // matches. - var rel = element.getAttribute("rel"); + if (rel === "stylesheet" && element.hasAttribute("data-precedence")) { + // This is a stylesheet resource + break; + } else if ( + rel !== anyProps.rel || + element.getAttribute("href") !== + (anyProps.href == null ? null : anyProps.href) || + element.getAttribute("crossorigin") !== + (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) || + element.getAttribute("title") !== + (anyProps.title == null ? null : anyProps.title) + ) { + // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect + // and title could vary for rel alternate + break; + } - if (rel === "stylesheet" && element.hasAttribute("data-precedence")) { - // This is a stylesheet resource - return true; - } else if ( - rel !== anyProps.rel || - element.getAttribute("href") !== - (anyProps.href == null ? null : anyProps.href) || - element.getAttribute("crossorigin") !== - (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) || - element.getAttribute("title") !== - (anyProps.title == null ? null : anyProps.title) - ) { - // rel + href should usually be enough to uniquely identify a link however crossOrigin can vary for rel preconnect - // and title could vary for rel alternate - return true; + return element; } - break; - } + case "style": { + // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags + // in or are likely never going to be unmounted given their position in the document and the fact they likely hold global styles + if (element.hasAttribute("data-precedence")) { + // This is a style resource + break; + } - case "style": { - // Styles are hard to match correctly. We can exclude known resources but otherwise we accept the fact that a non-hoisted style tags - // in or are likely never going to be unmounted given their position in the document and the fact they likely hold global styles - if (element.hasAttribute("data-precedence")) { - // This is a style resource - return true; + return element; } - break; - } + case "script": { + // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes + // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could + // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. + // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later + // if we learn it is problematic + var srcAttr = element.getAttribute("src"); - case "script": { - // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes - // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could - // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. - // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later - // if we learn it is problematic - var srcAttr = element.getAttribute("src"); + if ( + srcAttr && + element.hasAttribute("async") && + !element.hasAttribute("itemprop") + ) { + // This is an async script resource + break; + } else if ( + srcAttr !== (anyProps.src == null ? null : anyProps.src) || + element.getAttribute("type") !== + (anyProps.type == null ? null : anyProps.type) || + element.getAttribute("crossorigin") !== + (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) + ) { + // This script is for a different src + break; + } - if ( - srcAttr && - element.hasAttribute("async") && - !element.hasAttribute("itemprop") - ) { - // This is an async script resource - return true; - } else if ( - srcAttr !== (anyProps.src == null ? null : anyProps.src) || - element.getAttribute("type") !== - (anyProps.type == null ? null : anyProps.type) || - element.getAttribute("crossorigin") !== - (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) - ) { - // This script is for a different src - return true; + return element; } - break; + default: { + // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, + // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic + // that should work in the vast majority of cases. + return element; + } } - } // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, - // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic - // that should work in the vast majority of cases. + } - return false; - } + var nextInstance = getNextHydratableSibling(element); + + if (nextInstance === null) { + break; + } + + instance = nextInstance; + } // This is a suspense boundary or Text node or we got the end. + // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched + // and this is a hydration error. + // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for + // but it seems reasonable and conservative to reject this as a hydration error as well + + return null; } -function shouldSkipHydratableForTextInstance(instance) { - return instance.nodeType === ELEMENT_NODE; -} -function shouldSkipHydratableForSuspenseInstance(instance) { - return instance.nodeType === ELEMENT_NODE; -} -function canHydrateInstance(instance, type, props) { - if ( - instance.nodeType !== ELEMENT_NODE || - instance.nodeName.toLowerCase() !== type.toLowerCase() - ) { - return null; - } else { - return instance; - } -} -function canHydrateTextInstance(instance, text) { +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + // Empty strings are not parsed by HTML so there won't be a correct match here. if (text === "") return null; - if (instance.nodeType !== TEXT_NODE) { - // Empty strings are not parsed by HTML so there won't be a correct match here. - return null; + while (instance.nodeType !== TEXT_NODE) { + if (!inRootOrSingleton || !enableHostSingletons) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; } // This has now been refined to a text node. return instance; } -function canHydrateSuspenseInstance(instance) { - if (instance.nodeType !== COMMENT_NODE) { - return null; +function canHydrateSuspenseInstance(instance, inRootOrSingleton) { + while (instance.nodeType !== COMMENT_NODE) { + if (!inRootOrSingleton || !enableHostSingletons) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; } // This has now been refined to a suspense node. return instance; @@ -44445,7 +44409,7 @@ function commitHydratedContainer(container) { function commitHydratedSuspenseInstance(suspenseInstance) { // Retry if any event replaying was blocked on this. retryIfBlockedOn(suspenseInstance); -} // @TODO remove this function once float lands and hydrated tail nodes +} function didNotMatchHydratedContainerTextInstance( parentContainer, textInstance, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index 74543ea6cd..7a14bec65f 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -1680,12 +1680,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & -4097) | 2; } function tryHydrateInstance(fiber, nextInstance) { - var type = fiber.type; - nextInstance = - 1 !== nextInstance.nodeType || - nextInstance.nodeName.toLowerCase() !== type.toLowerCase() - ? null - : nextInstance; + nextInstance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1695,12 +1695,11 @@ function tryHydrateInstance(fiber, nextInstance) { : !1; } function tryHydrateText(fiber, nextInstance) { - nextInstance = - "" === fiber.pendingProps - ? null - : 3 !== nextInstance.nodeType - ? null - : nextInstance; + nextInstance = canHydrateTextInstance( + nextInstance, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1709,26 +1708,39 @@ function tryHydrateText(fiber, nextInstance) { : !1; } function tryHydrateSuspense(fiber, nextInstance) { - nextInstance = 8 !== nextInstance.nodeType ? null : nextInstance; - if (null !== nextInstance) { - var JSCompiler_inline_result = - null !== treeContextProvider - ? { id: treeContextId, overflow: treeContextOverflow } - : null; - fiber.memoizedState = { - dehydrated: nextInstance, - treeContext: JSCompiler_inline_result, - retryLane: 1073741824 - }; - JSCompiler_inline_result = createFiber(18, null, null, 0); - JSCompiler_inline_result.stateNode = nextInstance; - JSCompiler_inline_result.return = fiber; - fiber.child = JSCompiler_inline_result; - hydrationParentFiber = fiber; - nextHydratableInstance = null; - return !0; + a: { + var instance = nextInstance; + for (nextInstance = rootOrSingletonContext; 8 !== instance.nodeType; ) { + if (!nextInstance) { + nextInstance = null; + break a; + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) { + nextInstance = null; + break a; + } + } + nextInstance = instance; } - return !1; + return null !== nextInstance + ? ((instance = + null !== treeContextProvider + ? { id: treeContextId, overflow: treeContextOverflow } + : null), + (fiber.memoizedState = { + dehydrated: nextInstance, + treeContext: instance, + retryLane: 1073741824 + }), + (instance = createFiber(18, null, null, 0)), + (instance.stateNode = nextInstance), + (instance.return = fiber), + (fiber.child = instance), + (hydrationParentFiber = fiber), + (nextHydratableInstance = null), + !0) + : !1; } function shouldClientRenderOnMismatch(fiber) { return 0 !== (fiber.mode & 1) && 0 === (fiber.flags & 128); @@ -1736,33 +1748,6 @@ function shouldClientRenderOnMismatch(fiber) { function throwOnHydrationMismatch() { throw Error(formatProdErrorMessage(418)); } -function advanceToFirstAttemptableInstance(fiber) { - for ( - ; - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ); - - ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableTextInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableSuspenseInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} function prepareToHydrateHostInstance(fiber) { var instance = fiber.stateNode, type = fiber.type, @@ -5563,10 +5548,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? pushPrimaryTreeSuspenseHandler(workInProgress) : reuseSuspenseHandlerOnStack(workInProgress); isHydrating && - (((current = nextHydratableInstance), - rootOrSingletonContext && advanceToFirstAttemptableSuspenseInstance(), - (didSuspend = nextHydratableInstance), - didSuspend) + (((didSuspend = current = nextHydratableInstance), didSuspend) ? tryHydrateSuspense(workInProgress, didSuspend) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -5574,8 +5556,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { didSuspend.nextSibling )), (JSCompiler_temp = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableSuspenseInstance(), nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(JSCompiler_temp, didSuspend) @@ -11621,11 +11601,7 @@ beginWork = function (current, workInProgress, renderLanes) { (Component = !(Component.async && (context || prevState)))) : (Component = !0), Component) - ? ((Component = nextHydratableInstance), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), - (context = nextHydratableInstance), - context) + ? ((context = Component = nextHydratableInstance), context) ? tryHydrateInstance(workInProgress, context) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -11633,8 +11609,6 @@ beginWork = function (current, workInProgress, renderLanes) { context.nextSibling )), (prevState = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), nextHydratableInstance && tryHydrateInstance(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(prevState, context) @@ -11671,39 +11645,30 @@ beginWork = function (current, workInProgress, renderLanes) { return ( null === current && isHydrating && - (((renderLanes = "" !== workInProgress.pendingProps), - (current = nextHydratableInstance), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), - (Component = nextHydratableInstance), - Component && renderLanes) - ? tryHydrateText(workInProgress, Component) || + (((Component = "" !== workInProgress.pendingProps), + (current = renderLanes = nextHydratableInstance), + current && Component) + ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable( - Component.nextSibling - )), - (context = hydrationParentFiber), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), + (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(context, Component) + ? deleteHydratableInstance(Component, current) : (insertNonHydratedInstance( hydrationParentFiber, workInProgress ), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))) + (nextHydratableInstance = renderLanes))) : (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), insertNonHydratedInstance(hydrationParentFiber, workInProgress), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))), + (nextHydratableInstance = renderLanes))), null ); case 13: @@ -13041,14 +13006,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$376; if (canUseDOM) { - var isSupported$jscomp$inline_1614 = "oninput" in document; - if (!isSupported$jscomp$inline_1614) { - var element$jscomp$inline_1615 = document.createElement("div"); - element$jscomp$inline_1615.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1614 = - "function" === typeof element$jscomp$inline_1615.oninput; + var isSupported$jscomp$inline_1607 = "oninput" in document; + if (!isSupported$jscomp$inline_1607) { + var element$jscomp$inline_1608 = document.createElement("div"); + element$jscomp$inline_1608.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1607 = + "function" === typeof element$jscomp$inline_1608.oninput; } - JSCompiler_inline_result$jscomp$376 = isSupported$jscomp$inline_1614; + JSCompiler_inline_result$jscomp$376 = isSupported$jscomp$inline_1607; } else JSCompiler_inline_result$jscomp$376 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$376 && @@ -13360,20 +13325,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1655 = 0; - i$jscomp$inline_1655 < simpleEventPluginEvents.length; - i$jscomp$inline_1655++ + var i$jscomp$inline_1648 = 0; + i$jscomp$inline_1648 < simpleEventPluginEvents.length; + i$jscomp$inline_1648++ ) { - var eventName$jscomp$inline_1656 = - simpleEventPluginEvents[i$jscomp$inline_1655], - domEventName$jscomp$inline_1657 = - eventName$jscomp$inline_1656.toLowerCase(), - capitalizedEvent$jscomp$inline_1658 = - eventName$jscomp$inline_1656[0].toUpperCase() + - eventName$jscomp$inline_1656.slice(1); + var eventName$jscomp$inline_1649 = + simpleEventPluginEvents[i$jscomp$inline_1648], + domEventName$jscomp$inline_1650 = + eventName$jscomp$inline_1649.toLowerCase(), + capitalizedEvent$jscomp$inline_1651 = + eventName$jscomp$inline_1649[0].toUpperCase() + + eventName$jscomp$inline_1649.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1657, - "on" + capitalizedEvent$jscomp$inline_1658 + domEventName$jscomp$inline_1650, + "on" + capitalizedEvent$jscomp$inline_1651 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -15417,48 +15382,72 @@ function clearContainerSparingly(container) { container.removeChild(node); } } -function shouldSkipHydratableForInstance(instance, type, props) { - if (1 !== instance.nodeType) return !1; - if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - instance[internalHoistableMarker] - ) - return !0; - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) return !0; - break; - case "link": - type = instance.getAttribute("rel"); - if ( - ("stylesheet" === type && instance.hasAttribute("data-precedence")) || - type !== props.rel || - instance.getAttribute("href") !== - (null == props.href ? null : props.href) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) || - instance.getAttribute("title") !== - (null == props.title ? null : props.title) - ) - return !0; - break; - case "style": - if (instance.hasAttribute("data-precedence")) return !0; - break; - case "script": - if ( - ((type = instance.getAttribute("src")) && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop")) || - type !== (null == props.src ? null : props.src) || - instance.getAttribute("type") !== - (null == props.type ? null : props.type) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) - ) - return !0; +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + for (; 1 === instance.nodeType; ) { + var anyProps = props; + if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton) break; + } else { + if (!inRootOrSingleton) return instance; + if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + var rel = instance.getAttribute("rel"); + if ( + "stylesheet" === rel && + instance.hasAttribute("data-precedence") + ) + break; + else if ( + rel !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + if ( + (rel = instance.getAttribute("src")) && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + else if ( + rel !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) + ) + break; + return instance; + default: + return instance; + } + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) break; } - return !1; + return null; +} +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + if ("" === text) return null; + for (; 3 !== instance.nodeType; ) { + if (!inRootOrSingleton) return null; + instance = getNextHydratable(instance.nextSibling); + if (null === instance) return null; + } + return instance; } function getNextHydratable(node) { for (; null != node; node = node.nextSibling) { @@ -16980,17 +16969,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1865 = { +var devToolsConfig$jscomp$inline_1858 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-dfc141bd", + version: "18.3.0-www-classic-993a41e1", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2244 = { - bundleType: devToolsConfig$jscomp$inline_1865.bundleType, - version: devToolsConfig$jscomp$inline_1865.version, - rendererPackageName: devToolsConfig$jscomp$inline_1865.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1865.rendererConfig, +var internals$jscomp$inline_2237 = { + bundleType: devToolsConfig$jscomp$inline_1858.bundleType, + version: devToolsConfig$jscomp$inline_1858.version, + rendererPackageName: devToolsConfig$jscomp$inline_1858.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1858.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -17006,26 +16995,26 @@ var internals$jscomp$inline_2244 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1865.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1858.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-dfc141bd" + reconcilerVersion: "18.3.0-www-classic-993a41e1" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2245 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2238 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2245.isDisabled && - hook$jscomp$inline_2245.supportsFiber + !hook$jscomp$inline_2238.isDisabled && + hook$jscomp$inline_2238.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2245.inject( - internals$jscomp$inline_2244 + (rendererID = hook$jscomp$inline_2238.inject( + internals$jscomp$inline_2237 )), - (injectedHook = hook$jscomp$inline_2245); + (injectedHook = hook$jscomp$inline_2238); } catch (err) {} } assign(Internals, { @@ -17407,4 +17396,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-dfc141bd"; +exports.version = "18.3.0-www-classic-993a41e1"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index 356991a2ed..b41a48ef09 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -1628,12 +1628,12 @@ function insertNonHydratedInstance(returnFiber, fiber) { fiber.flags = (fiber.flags & -4097) | 2; } function tryHydrateInstance(fiber, nextInstance) { - var type = fiber.type; - nextInstance = - 1 !== nextInstance.nodeType || - nextInstance.nodeName.toLowerCase() !== type.toLowerCase() - ? null - : nextInstance; + nextInstance = canHydrateInstance( + nextInstance, + fiber.type, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1643,12 +1643,11 @@ function tryHydrateInstance(fiber, nextInstance) { : !1; } function tryHydrateText(fiber, nextInstance) { - nextInstance = - "" === fiber.pendingProps - ? null - : 3 !== nextInstance.nodeType - ? null - : nextInstance; + nextInstance = canHydrateTextInstance( + nextInstance, + fiber.pendingProps, + rootOrSingletonContext + ); return null !== nextInstance ? ((fiber.stateNode = nextInstance), (hydrationParentFiber = fiber), @@ -1657,26 +1656,39 @@ function tryHydrateText(fiber, nextInstance) { : !1; } function tryHydrateSuspense(fiber, nextInstance) { - nextInstance = 8 !== nextInstance.nodeType ? null : nextInstance; - if (null !== nextInstance) { - var JSCompiler_inline_result = - null !== treeContextProvider - ? { id: treeContextId, overflow: treeContextOverflow } - : null; - fiber.memoizedState = { - dehydrated: nextInstance, - treeContext: JSCompiler_inline_result, - retryLane: 1073741824 - }; - JSCompiler_inline_result = createFiber(18, null, null, 0); - JSCompiler_inline_result.stateNode = nextInstance; - JSCompiler_inline_result.return = fiber; - fiber.child = JSCompiler_inline_result; - hydrationParentFiber = fiber; - nextHydratableInstance = null; - return !0; + a: { + var instance = nextInstance; + for (nextInstance = rootOrSingletonContext; 8 !== instance.nodeType; ) { + if (!nextInstance) { + nextInstance = null; + break a; + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) { + nextInstance = null; + break a; + } + } + nextInstance = instance; } - return !1; + return null !== nextInstance + ? ((instance = + null !== treeContextProvider + ? { id: treeContextId, overflow: treeContextOverflow } + : null), + (fiber.memoizedState = { + dehydrated: nextInstance, + treeContext: instance, + retryLane: 1073741824 + }), + (instance = createFiber(18, null, null, 0)), + (instance.stateNode = nextInstance), + (instance.return = fiber), + (fiber.child = instance), + (hydrationParentFiber = fiber), + (nextHydratableInstance = null), + !0) + : !1; } function shouldClientRenderOnMismatch(fiber) { return 0 !== (fiber.mode & 1) && 0 === (fiber.flags & 128); @@ -1684,33 +1696,6 @@ function shouldClientRenderOnMismatch(fiber) { function throwOnHydrationMismatch() { throw Error(formatProdErrorMessage(418)); } -function advanceToFirstAttemptableInstance(fiber) { - for ( - ; - nextHydratableInstance && - shouldSkipHydratableForInstance( - nextHydratableInstance, - fiber.type, - fiber.pendingProps - ); - - ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableTextInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} -function advanceToFirstAttemptableSuspenseInstance() { - for (; nextHydratableInstance && 1 === nextHydratableInstance.nodeType; ) - nextHydratableInstance = getNextHydratable( - nextHydratableInstance.nextSibling - ); -} function prepareToHydrateHostInstance(fiber) { var instance = fiber.stateNode, type = fiber.type, @@ -5464,10 +5449,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? pushPrimaryTreeSuspenseHandler(workInProgress) : reuseSuspenseHandlerOnStack(workInProgress); isHydrating && - (((current = nextHydratableInstance), - rootOrSingletonContext && advanceToFirstAttemptableSuspenseInstance(), - (didSuspend = nextHydratableInstance), - didSuspend) + (((didSuspend = current = nextHydratableInstance), didSuspend) ? tryHydrateSuspense(workInProgress, didSuspend) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), @@ -5475,8 +5457,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { didSuspend.nextSibling )), (JSCompiler_temp = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableSuspenseInstance(), nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(JSCompiler_temp, didSuspend) @@ -11503,18 +11483,12 @@ beginWork = function (current, workInProgress, renderLanes) { (Component = !(Component.async && (init || prevState)))) : (Component = !0), Component) - ? ((Component = nextHydratableInstance), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), - (init = nextHydratableInstance), - init) + ? ((init = Component = nextHydratableInstance), init) ? tryHydrateInstance(workInProgress, init) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), (nextHydratableInstance = getNextHydratable(init.nextSibling)), (prevState = hydrationParentFiber), - rootOrSingletonContext && - advanceToFirstAttemptableInstance(workInProgress), nextHydratableInstance && tryHydrateInstance(workInProgress, nextHydratableInstance) ? deleteHydratableInstance(prevState, init) @@ -11551,39 +11525,30 @@ beginWork = function (current, workInProgress, renderLanes) { return ( null === current && isHydrating && - (((renderLanes = "" !== workInProgress.pendingProps), - (current = nextHydratableInstance), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), - (Component = nextHydratableInstance), - Component && renderLanes) - ? tryHydrateText(workInProgress, Component) || + (((Component = "" !== workInProgress.pendingProps), + (current = renderLanes = nextHydratableInstance), + current && Component) + ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable( - Component.nextSibling - )), - (init = hydrationParentFiber), - rootOrSingletonContext && - renderLanes && - advanceToFirstAttemptableTextInstance(), + (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(init, Component) + ? deleteHydratableInstance(Component, current) : (insertNonHydratedInstance( hydrationParentFiber, workInProgress ), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))) + (nextHydratableInstance = renderLanes))) : (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), insertNonHydratedInstance(hydrationParentFiber, workInProgress), (isHydrating = !1), (hydrationParentFiber = workInProgress), - (nextHydratableInstance = current))), + (nextHydratableInstance = renderLanes))), null ); case 13: @@ -13339,14 +13304,14 @@ var isInputEventSupported = !1; if (canUseDOM) { var JSCompiler_inline_result$jscomp$374; if (canUseDOM) { - var isSupported$jscomp$inline_1613 = "oninput" in document; - if (!isSupported$jscomp$inline_1613) { - var element$jscomp$inline_1614 = document.createElement("div"); - element$jscomp$inline_1614.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1613 = - "function" === typeof element$jscomp$inline_1614.oninput; + var isSupported$jscomp$inline_1606 = "oninput" in document; + if (!isSupported$jscomp$inline_1606) { + var element$jscomp$inline_1607 = document.createElement("div"); + element$jscomp$inline_1607.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1606 = + "function" === typeof element$jscomp$inline_1607.oninput; } - JSCompiler_inline_result$jscomp$374 = isSupported$jscomp$inline_1613; + JSCompiler_inline_result$jscomp$374 = isSupported$jscomp$inline_1606; } else JSCompiler_inline_result$jscomp$374 = !1; isInputEventSupported = JSCompiler_inline_result$jscomp$374 && @@ -13658,20 +13623,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1654 = 0; - i$jscomp$inline_1654 < simpleEventPluginEvents.length; - i$jscomp$inline_1654++ + var i$jscomp$inline_1647 = 0; + i$jscomp$inline_1647 < simpleEventPluginEvents.length; + i$jscomp$inline_1647++ ) { - var eventName$jscomp$inline_1655 = - simpleEventPluginEvents[i$jscomp$inline_1654], - domEventName$jscomp$inline_1656 = - eventName$jscomp$inline_1655.toLowerCase(), - capitalizedEvent$jscomp$inline_1657 = - eventName$jscomp$inline_1655[0].toUpperCase() + - eventName$jscomp$inline_1655.slice(1); + var eventName$jscomp$inline_1648 = + simpleEventPluginEvents[i$jscomp$inline_1647], + domEventName$jscomp$inline_1649 = + eventName$jscomp$inline_1648.toLowerCase(), + capitalizedEvent$jscomp$inline_1650 = + eventName$jscomp$inline_1648[0].toUpperCase() + + eventName$jscomp$inline_1648.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1656, - "on" + capitalizedEvent$jscomp$inline_1657 + domEventName$jscomp$inline_1649, + "on" + capitalizedEvent$jscomp$inline_1650 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -15700,48 +15665,72 @@ function clearContainerSparingly(container) { container.removeChild(node); } } -function shouldSkipHydratableForInstance(instance, type, props) { - if (1 !== instance.nodeType) return !1; - if ( - instance.nodeName.toLowerCase() !== type.toLowerCase() || - instance[internalHoistableMarker] - ) - return !0; - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) return !0; - break; - case "link": - type = instance.getAttribute("rel"); - if ( - ("stylesheet" === type && instance.hasAttribute("data-precedence")) || - type !== props.rel || - instance.getAttribute("href") !== - (null == props.href ? null : props.href) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) || - instance.getAttribute("title") !== - (null == props.title ? null : props.title) - ) - return !0; - break; - case "style": - if (instance.hasAttribute("data-precedence")) return !0; - break; - case "script": - if ( - ((type = instance.getAttribute("src")) && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop")) || - type !== (null == props.src ? null : props.src) || - instance.getAttribute("type") !== - (null == props.type ? null : props.type) || - instance.getAttribute("crossorigin") !== - (null == props.crossOrigin ? null : props.crossOrigin) - ) - return !0; +function canHydrateInstance(instance, type, props, inRootOrSingleton) { + for (; 1 === instance.nodeType; ) { + var anyProps = props; + if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { + if (!inRootOrSingleton) break; + } else { + if (!inRootOrSingleton) return instance; + if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + var rel = instance.getAttribute("rel"); + if ( + "stylesheet" === rel && + instance.hasAttribute("data-precedence") + ) + break; + else if ( + rel !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + if ( + (rel = instance.getAttribute("src")) && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + else if ( + rel !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) + ) + break; + return instance; + default: + return instance; + } + } + instance = getNextHydratable(instance.nextSibling); + if (null === instance) break; } - return !1; + return null; +} +function canHydrateTextInstance(instance, text, inRootOrSingleton) { + if ("" === text) return null; + for (; 3 !== instance.nodeType; ) { + if (!inRootOrSingleton) return null; + instance = getNextHydratable(instance.nextSibling); + if (null === instance) return null; + } + return instance; } function getNextHydratable(node) { for (; null != node; node = node.nextSibling) { @@ -16562,17 +16551,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1824 = { +var devToolsConfig$jscomp$inline_1817 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-32c95640", + version: "18.3.0-www-modern-66e1909a", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2208 = { - bundleType: devToolsConfig$jscomp$inline_1824.bundleType, - version: devToolsConfig$jscomp$inline_1824.version, - rendererPackageName: devToolsConfig$jscomp$inline_1824.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1824.rendererConfig, +var internals$jscomp$inline_2201 = { + bundleType: devToolsConfig$jscomp$inline_1817.bundleType, + version: devToolsConfig$jscomp$inline_1817.version, + rendererPackageName: devToolsConfig$jscomp$inline_1817.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1817.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16589,26 +16578,26 @@ var internals$jscomp$inline_2208 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1824.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1817.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-32c95640" + reconcilerVersion: "18.3.0-www-modern-66e1909a" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2209 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2202 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2209.isDisabled && - hook$jscomp$inline_2209.supportsFiber + !hook$jscomp$inline_2202.isDisabled && + hook$jscomp$inline_2202.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2209.inject( - internals$jscomp$inline_2208 + (rendererID = hook$jscomp$inline_2202.inject( + internals$jscomp$inline_2201 )), - (injectedHook = hook$jscomp$inline_2209); + (injectedHook = hook$jscomp$inline_2202); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -16918,4 +16907,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-32c95640"; +exports.version = "18.3.0-www-modern-66e1909a"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index 9005310fbb..95a4dbaef9 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -24549,7 +24549,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-32c95640"; +var ReactVersion = "18.3.0-www-modern-66e1909a"; // Might add PROFILE later.