From 6c615dc8336575328187ac22f2a18b0fd938aa0b Mon Sep 17 00:00:00 2001 From: kassens Date: Fri, 21 Apr 2023 18:37:22 +0000 Subject: [PATCH] Squash of #26573, #26580, #26583, #26594, #26595, #26596, #26627 - Refactor some controlled component stuff (#26573) - Don't update textarea defaultValue and input checked unnecessarily (#26580) - Diff properties in the commit phase instead of generating an update payload (#26583) - Move validation of text nesting into ReactDOMComponent (#26594) - Remove initOption special case (#26595) - Use already extracted values instead of reading off props for controlled components (#26596) - Fix input tracking bug (#26627) DiffTrain build for [ded4a785b875d384f78efa28279550d86d93f54f](https://github.com/facebook/react/commit/ded4a785b875d384f78efa28279550d86d93f54f) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-dev.modern.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 30 +- compiled/facebook-www/ReactART-dev.modern.js | 30 +- .../facebook-www/ReactART-prod.classic.js | 22 +- compiled/facebook-www/ReactART-prod.modern.js | 22 +- compiled/facebook-www/ReactDOM-dev.classic.js | 2326 +++++++++++------ compiled/facebook-www/ReactDOM-dev.modern.js | 2326 +++++++++++------ .../facebook-www/ReactDOM-prod.classic.js | 1534 +++++++---- compiled/facebook-www/ReactDOM-prod.modern.js | 1509 +++++++---- .../ReactDOM-profiling.classic.js | 1576 +++++++---- .../facebook-www/ReactDOM-profiling.modern.js | 1551 +++++++---- .../ReactDOMTesting-dev.classic.js | 2326 +++++++++++------ .../ReactDOMTesting-dev.modern.js | 2326 +++++++++++------ .../ReactDOMTesting-prod.classic.js | 1518 +++++++---- .../ReactDOMTesting-prod.modern.js | 1509 +++++++---- .../ReactTestRenderer-dev.classic.js | 29 +- .../ReactTestRenderer-dev.modern.js | 29 +- compiled/facebook-www/WARNINGS | 6 +- 19 files changed, 12419 insertions(+), 6254 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index 98c203dd5bc89..ed2edef52e145 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -e48e771805c44929e0beb6fa138822a20765a3aa +ded4a785b875d384f78efa28279550d86d93f54f diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index 79ae9ed669721..1a04d8df17a3a 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-47cd17f3"; +var ReactVersion = "18.3.0-www-modern-95e6ae95"; // 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 253106fac82bf..da31ddca014d2 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-c6b3e31c"; +var ReactVersion = "18.3.0-www-classic-daf8f3c7"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -177,7 +177,8 @@ var revertRemovalOfSiblingPrerendering = enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane, enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, enableDeferRootSchedulingToMicrotask = - dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, false is used for a new modern build. + dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, false is used for a new modern build. var enableProfilerTimer = true; var enableProfilerCommitHooks = true; var enableProfilerNestedUpdatePhase = true; @@ -17583,18 +17584,23 @@ function updateHostComponent( // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; - } // If we get updated because one of our children updated, we don't - getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host - // component is hitting the resume path. Figure out why. Possibly - // related to `hidden`. + } + + if (diffInCommitPhase) { + markUpdate(workInProgress); + } else { + // component is hitting the resume path. Figure out why. Possibly + // related to `hidden`. - var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component. + getHostContext(); + var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component. - workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. All the work is done in commitWork. + workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. All the work is done in commitWork. - if (updatePayload) { - markUpdate(workInProgress); + if (updatePayload) { + markUpdate(workInProgress); + } } } } // This function must be called at the very end of the complete phase, because @@ -21225,7 +21231,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var _updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (_updatePayload !== null) { + if (_updatePayload !== null || diffInCommitPhase) { try { commitUpdate( _instance2, diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 4e1c010d1ec69..5ebe69b840b6e 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-modern-71e9d049"; +var ReactVersion = "18.3.0-www-modern-ae1f3bca"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -177,7 +177,8 @@ var revertRemovalOfSiblingPrerendering = enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane, enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, enableDeferRootSchedulingToMicrotask = - dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, true is used for a new modern build. + dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, true is used for a new modern build. var enableProfilerTimer = true; var enableProfilerCommitHooks = true; var enableProfilerNestedUpdatePhase = true; @@ -17277,18 +17278,23 @@ function updateHostComponent( // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; - } // If we get updated because one of our children updated, we don't - getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host - // component is hitting the resume path. Figure out why. Possibly - // related to `hidden`. + } + + if (diffInCommitPhase) { + markUpdate(workInProgress); + } else { + // component is hitting the resume path. Figure out why. Possibly + // related to `hidden`. - var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component. + getHostContext(); + var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component. - workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. All the work is done in commitWork. + workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. All the work is done in commitWork. - if (updatePayload) { - markUpdate(workInProgress); + if (updatePayload) { + markUpdate(workInProgress); + } } } } // This function must be called at the very end of the complete phase, because @@ -20890,7 +20896,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var _updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (_updatePayload !== null) { + if (_updatePayload !== null || diffInCommitPhase) { try { commitUpdate( _instance2, diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index 91605ce428803..f18111ccc94e1 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -73,6 +73,7 @@ var ReactSharedInternals = enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase, REACT_ELEMENT_TYPE = Symbol.for("react.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), @@ -5240,6 +5241,9 @@ function getChildContextValues(context) { collectNearestChildContextValues(currentFiber, context, childContextValues); return childContextValues; } +function markUpdate(workInProgress) { + workInProgress.flags |= 4; +} function scheduleRetryEffect(workInProgress, retryQueue) { null !== retryQueue ? (workInProgress.flags |= 4) @@ -5359,8 +5363,10 @@ function completeWork(current, workInProgress, renderLanes) { renderLanes = workInProgress.type; if (null !== current && null != workInProgress.stateNode) current.memoizedProps !== newProps && - (workInProgress.updateQueue = UPDATE_SIGNAL) && - (workInProgress.flags |= 4), + (diffInCommitPhase + ? markUpdate(workInProgress) + : (workInProgress.updateQueue = UPDATE_SIGNAL) && + markUpdate(workInProgress)), current.ref !== workInProgress.ref && (workInProgress.flags |= 2097664); else { @@ -5427,7 +5433,7 @@ function completeWork(current, workInProgress, renderLanes) { return null; case 6: if (current && null != workInProgress.stateNode) - current.memoizedProps !== newProps && (workInProgress.flags |= 4); + current.memoizedProps !== newProps && markUpdate(workInProgress); else { if ("string" !== typeof newProps && null === workInProgress.stateNode) throw Error(formatProdErrorMessage(166)); @@ -5597,8 +5603,8 @@ function completeWork(current, workInProgress, renderLanes) { }), shim$1(), null !== workInProgress.ref && - ((workInProgress.flags |= 2097664), (workInProgress.flags |= 4))) - : (null !== workInProgress.ref && (workInProgress.flags |= 4), + ((workInProgress.flags |= 2097664), markUpdate(workInProgress))) + : (null !== workInProgress.ref && markUpdate(workInProgress), current.ref !== workInProgress.ref && (workInProgress.flags |= 2097664)), bubbleProperties(workInProgress), @@ -6665,7 +6671,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) { current = null !== current ? current.memoizedProps : newProps; var updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (null !== updatePayload) + if (null !== updatePayload || diffInCommitPhase) try { flags._applyProps(flags, newProps, current); } catch (error$108) { @@ -10072,7 +10078,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-classic-0d8af644", + version: "18.3.0-www-classic-9e45a6d4", rendererPackageName: "react-art" }; var internals$jscomp$inline_1344 = { @@ -10103,7 +10109,7 @@ var internals$jscomp$inline_1344 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-0d8af644" + reconcilerVersion: "18.3.0-www-classic-9e45a6d4" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1345 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index a7afcd4f0b1ff..0a1d8eb2374b7 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -73,6 +73,7 @@ var ReactSharedInternals = enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase, REACT_ELEMENT_TYPE = Symbol.for("react.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), @@ -4995,6 +4996,9 @@ function getChildContextValues(context) { collectNearestChildContextValues(currentFiber, context, childContextValues); return childContextValues; } +function markUpdate(workInProgress) { + workInProgress.flags |= 4; +} function scheduleRetryEffect(workInProgress, retryQueue) { null !== retryQueue ? (workInProgress.flags |= 4) @@ -5108,8 +5112,10 @@ function completeWork(current, workInProgress, renderLanes) { renderLanes = workInProgress.type; if (null !== current && null != workInProgress.stateNode) current.memoizedProps !== newProps && - (workInProgress.updateQueue = UPDATE_SIGNAL) && - (workInProgress.flags |= 4), + (diffInCommitPhase + ? markUpdate(workInProgress) + : (workInProgress.updateQueue = UPDATE_SIGNAL) && + markUpdate(workInProgress)), current.ref !== workInProgress.ref && (workInProgress.flags |= 2097664); else { @@ -5176,7 +5182,7 @@ function completeWork(current, workInProgress, renderLanes) { return null; case 6: if (current && null != workInProgress.stateNode) - current.memoizedProps !== newProps && (workInProgress.flags |= 4); + current.memoizedProps !== newProps && markUpdate(workInProgress); else { if ("string" !== typeof newProps && null === workInProgress.stateNode) throw Error(formatProdErrorMessage(166)); @@ -5342,8 +5348,8 @@ function completeWork(current, workInProgress, renderLanes) { }), shim$1(), null !== workInProgress.ref && - ((workInProgress.flags |= 2097664), (workInProgress.flags |= 4))) - : (null !== workInProgress.ref && (workInProgress.flags |= 4), + ((workInProgress.flags |= 2097664), markUpdate(workInProgress))) + : (null !== workInProgress.ref && markUpdate(workInProgress), current.ref !== workInProgress.ref && (workInProgress.flags |= 2097664)), bubbleProperties(workInProgress), @@ -6401,7 +6407,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) { current = null !== current ? current.memoizedProps : newProps; var updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (null !== updatePayload) + if (null !== updatePayload || diffInCommitPhase) try { flags._applyProps(flags, newProps, current); } catch (error$107) { @@ -9737,7 +9743,7 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-modern-5a04a0b8", + version: "18.3.0-www-modern-52157a92", rendererPackageName: "react-art" }; var internals$jscomp$inline_1324 = { @@ -9768,7 +9774,7 @@ var internals$jscomp$inline_1324 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-5a04a0b8" + reconcilerVersion: "18.3.0-www-modern-52157a92" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1325 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index 219d4ea576557..819277ee33402 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -144,7 +144,8 @@ var disableInputAttributeSyncing = enableCustomElementPropertySupport = dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = - dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, false is used for a new modern build. + dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, false is used for a new modern build. var enableProfilerTimer = true; var enableProfilerCommitHooks = true; var enableProfilerNestedUpdatePhase = true; @@ -3802,26 +3803,44 @@ function validateInputProps(element, props) { } } } -function updateInputChecked(element, props) { +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { var node = element; - var checked = props.checked; - if (checked != null) { - node.checked = checked; + if (value != null) { + if (type === "number") { + if ( + // $FlowFixMe[incompatible-type] + (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible. + // eslint-disable-next-line + node.value != value + ) { + node.value = toString(getToStringValue(value)); + } + } else if (node.value !== toString(getToStringValue(value))) { + node.value = toString(getToStringValue(value)); + } + } else if (type === "submit" || type === "reset") { + // Submit/reset inputs need the attribute removed completely to avoid + // blank-text buttons. + node.removeAttribute("value"); + return; } -} -function updateInput(element, props) { - var node = element; - var value = getToStringValue(props.value); - var type = props.type; if (disableInputAttributeSyncing) { // When not syncing the value attribute, React only assigns a new value // whenever the defaultValue React prop has changed. When not present, // React does nothing - if (props.defaultValue != null) { - setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); - } else { + if (defaultValue != null) { + setDefaultValue(node, type, getToStringValue(defaultValue)); + } else if (lastDefaultValue != null) { node.removeAttribute("value"); } } else { @@ -3830,11 +3849,11 @@ function updateInput(element, props) { // 1. The value React property // 2. The defaultValue React property // 3. Otherwise there should be no change - if (props.value != null) { - setDefaultValue(node, props.type, value); - } else if (props.defaultValue != null) { - setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); - } else { + if (value != null) { + setDefaultValue(node, type, getToStringValue(value)); + } else if (defaultValue != null) { + setDefaultValue(node, type, getToStringValue(defaultValue)); + } else if (lastDefaultValue != null) { node.removeAttribute("value"); } } @@ -3843,68 +3862,52 @@ function updateInput(element, props) { // When not syncing the checked attribute, the attribute is directly // controllable from the defaultValue React property. It needs to be // updated as new props come in. - if (props.defaultChecked == null) { + if (defaultChecked == null) { node.removeAttribute("checked"); } else { - node.defaultChecked = !!props.defaultChecked; + node.defaultChecked = !!defaultChecked; } } else { // When syncing the checked attribute, it only changes when it needs // to be removed, such as transitioning from a checkbox into a text input - if (props.checked == null && props.defaultChecked != null) { - node.defaultChecked = !!props.defaultChecked; + if (checked == null && defaultChecked != null) { + node.defaultChecked = !!defaultChecked; } } - updateInputChecked(element, props); - - if (value != null) { - if (type === "number") { - if ( - // $FlowFixMe[incompatible-type] - (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible. - // eslint-disable-next-line - node.value != value - ) { - node.value = toString(value); - } - } else if (node.value !== toString(value)) { - node.value = toString(value); - } - } else if (type === "submit" || type === "reset") { - // Submit/reset inputs need the attribute removed completely to avoid - // blank-text buttons. - node.removeAttribute("value"); - return; + if (checked != null && node.checked !== !!checked) { + node.checked = checked; } } -function initInput(element, props, isHydrating) { +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { var node = element; - if (props.value != null || props.defaultValue != null) { - var type = props.type; + if (value != null || defaultValue != null) { var isButton = type === "submit" || type === "reset"; // Avoid setting value attribute on submit/reset inputs as it overrides the // default value provided by the browser. See: #12872 - if (isButton && (props.value === undefined || props.value === null)) { + if (isButton && (value === undefined || value === null)) { return; } - var defaultValue = - props.defaultValue != null - ? toString(getToStringValue(props.defaultValue)) - : ""; + var defaultValueStr = + defaultValue != null ? toString(getToStringValue(defaultValue)) : ""; var initialValue = - props.value != null - ? toString(getToStringValue(props.value)) - : defaultValue; // Do not assign value if it is already set. This prevents user text input + value != null ? toString(getToStringValue(value)) : defaultValueStr; // Do not assign value if it is already set. This prevents user text input // from being lost during SSR hydration. if (!isHydrating) { if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); // When not syncing the value attribute, the value property points + // When not syncing the value attribute, the value property points // directly to the React prop. Only assign it if it exists. - if (value != null) { // Always assign on buttons so that it is possible to assign an // empty string to clear button text. @@ -3914,8 +3917,8 @@ function initInput(element, props, isHydrating) { // prematurely marking required inputs as invalid. Equality is compared // to the current value in case the browser provided value is not an // empty string. - if (isButton || value !== node.value) { - node.value = toString(value); + if (isButton || toString(getToStringValue(value)) !== node.value) { + node.value = toString(getToStringValue(value)); } } } else { @@ -3934,8 +3937,8 @@ function initInput(element, props, isHydrating) { if (disableInputAttributeSyncing) { // When not syncing the value attribute, assign the value attribute // directly from the defaultValue React property (when present) - if (props.defaultValue != null) { - node.defaultValue = defaultValue; + if (defaultValue != null) { + node.defaultValue = defaultValueStr; } } else { // Otherwise, the value attribute is synchronized to the property, @@ -3955,12 +3958,13 @@ function initInput(element, props, isHydrating) { node.name = ""; } - var defaultChecked = - props.checked != null ? props.checked : props.defaultChecked; + var checkedOrDefault = checked != null ? checked : defaultChecked; // TODO: This 'function' or 'symbol' check isn't replicated in other places + // so this semantic is inconsistent. + var initialChecked = - typeof defaultChecked !== "function" && - typeof defaultChecked !== "symbol" && - !!defaultChecked; // The checked property never gets assigned. It must be manually set. + typeof checkedOrDefault !== "function" && + typeof checkedOrDefault !== "symbol" && + !!checkedOrDefault; // The checked property never gets assigned. It must be manually set. // We don't want to do this when hydrating so that existing user input isn't // modified // TODO: I'm pretty sure this is a bug because initialValueTracking won't be @@ -3974,9 +3978,9 @@ function initInput(element, props, isHydrating) { // Only assign the checked attribute if it is defined. This saves // a DOM write when controlling the checked attribute isn't needed // (text inputs, submit/reset) - if (props.defaultChecked != null) { + if (defaultChecked != null) { node.defaultChecked = !node.defaultChecked; - node.defaultChecked = !!props.defaultChecked; + node.defaultChecked = !!defaultChecked; } } else { // When syncing the checked attribute, both the checked property and @@ -3994,12 +3998,16 @@ function initInput(element, props, isHydrating) { } } function restoreControlledInputState(element, props) { - var node = element; - updateInput(node, props); - updateNamedCousins(node, props); -} - -function updateNamedCousins(rootNode, props) { + var rootNode = element; + updateInput( + rootNode, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); var name = props.name; if (props.type === "radio" && name != null) { @@ -4047,7 +4055,15 @@ function updateNamedCousins(rootNode, props) { // was previously checked to update will cause it to be come re-checked // as appropriate. - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } // In Chrome, assigning defaultValue to certain input types triggers input validation. @@ -4123,12 +4139,6 @@ function validateOptionProps(element, props) { } } } -function initOption(element, props) { - // value="" should make a value attribute (#6219) - if (props.value != null) { - element.setAttribute("value", toString(getToStringValue(props.value))); - } -} var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare @@ -4275,31 +4285,28 @@ function validateSelectProps(element, props) { } } } -function initSelect(element, props) { +function initSelect(element, value, defaultValue, multiple) { var node = element; - node.multiple = !!props.multiple; - var value = props.value; + node.multiple = !!multiple; if (value != null) { - updateOptions(node, !!props.multiple, value, false); - } else if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue, true); + updateOptions(node, !!multiple, value, false); + } else if (defaultValue != null) { + updateOptions(node, !!multiple, defaultValue, true); } } -function updateSelect(element, prevProps, props) { +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { var node = element; - var wasMultiple = !!prevProps.multiple; - var value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value, false); - } else if (wasMultiple !== !!props.multiple) { + updateOptions(node, !!multiple, value, false); + } else if (!!wasMultiple !== !!multiple) { // For simplicity, reapply `defaultValue` if `multiple` is toggled. - if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue, true); + if (defaultValue != null) { + updateOptions(node, !!multiple, defaultValue, true); } else { // Revert the select back to its default unselected state. - updateOptions(node, !!props.multiple, props.multiple ? [] : "", false); + updateOptions(node, !!multiple, multiple ? [] : "", false); } } } @@ -4357,39 +4364,38 @@ function validateTextareaProps(element, props) { } } } -function updateTextarea(element, props) { +function updateTextarea(element, value, defaultValue) { var node = element; - var value = getToStringValue(props.value); - var defaultValue = getToStringValue(props.defaultValue); - - if (defaultValue != null) { - node.defaultValue = toString(defaultValue); - } else { - node.defaultValue = ""; - } if (value != null) { // Cast `value` to a string to ensure the value is set correctly. While // browsers typically do this as necessary, jsdom doesn't. - var newValue = toString(value); // To avoid side effects (such as losing text selection), only set value if changed + var newValue = toString(getToStringValue(value)); // To avoid side effects (such as losing text selection), only set value if changed if (newValue !== node.value) { node.value = newValue; } // TOOO: This should respect disableInputAttributeSyncing flag. - if (props.defaultValue == null && node.defaultValue !== newValue) { - node.defaultValue = newValue; + if (defaultValue == null) { + if (node.defaultValue !== newValue) { + node.defaultValue = newValue; + } + + return; } } + + if (defaultValue != null) { + node.defaultValue = toString(getToStringValue(defaultValue)); + } else { + node.defaultValue = ""; + } } -function initTextarea(element, props) { +function initTextarea(element, value, defaultValue, children) { var node = element; - var initialValue = props.value; // Only bother fetching default value if we're going to use it + var initialValue = value; // Only bother fetching default value if we're going to use it if (initialValue == null) { - var children = props.children, - defaultValue = props.defaultValue; - if (children != null) { { if (defaultValue != null) { @@ -4435,7 +4441,490 @@ function initTextarea(element, props) { } function restoreControlledTextareaState(element, props) { // DOM component is still mounted; update - updateTextarea(element, props); + updateTextarea(element, props.value, props.defaultValue); +} + +// This validation code was written based on the HTML5 parsing spec: +// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope +// +// Note: this does not catch all invalid nesting, nor does it try to (as it's +// not clear what practical benefit doing so provides); instead, we warn only +// for cases where the parser will give a parse tree differing from what React +// intended. For example,
is invalid but we don't warn +// because it still parses correctly; we do warn for other cases like nested +//

tags where the beginning of the second element implicitly closes the +// first, causing a confusing mess. +// https://html.spec.whatwg.org/multipage/syntax.html#special +var specialTags = [ + "address", + "applet", + "area", + "article", + "aside", + "base", + "basefont", + "bgsound", + "blockquote", + "body", + "br", + "button", + "caption", + "center", + "col", + "colgroup", + "dd", + "details", + "dir", + "div", + "dl", + "dt", + "embed", + "fieldset", + "figcaption", + "figure", + "footer", + "form", + "frame", + "frameset", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "head", + "header", + "hgroup", + "hr", + "html", + "iframe", + "img", + "input", + "isindex", + "li", + "link", + "listing", + "main", + "marquee", + "menu", + "menuitem", + "meta", + "nav", + "noembed", + "noframes", + "noscript", + "object", + "ol", + "p", + "param", + "plaintext", + "pre", + "script", + "section", + "select", + "source", + "style", + "summary", + "table", + "tbody", + "td", + "template", + "textarea", + "tfoot", + "th", + "thead", + "title", + "tr", + "track", + "ul", + "wbr", + "xmp" +]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope + +var inScopeTags = [ + "applet", + "caption", + "html", + "table", + "td", + "th", + "marquee", + "object", + "template", // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point + // TODO: Distinguish by namespace here -- for , including it here + // errs on the side of fewer warnings + "foreignObject", + "desc", + "title" +]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope + +var buttonScopeTags = inScopeTags.concat(["button"]); // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags + +var impliedEndTags = ["dd", "dt", "li", "option", "optgroup", "p", "rp", "rt"]; +var emptyAncestorInfoDev = { + current: null, + formTag: null, + aTagInScope: null, + buttonTagInScope: null, + nobrTagInScope: null, + pTagInButtonScope: null, + listItemTagAutoclosing: null, + dlItemTagAutoclosing: null, + containerTagInScope: null +}; + +function updatedAncestorInfoDev(oldInfo, tag) { + { + var ancestorInfo = assign({}, oldInfo || emptyAncestorInfoDev); + + var info = { + tag: tag + }; + + if (inScopeTags.indexOf(tag) !== -1) { + ancestorInfo.aTagInScope = null; + ancestorInfo.buttonTagInScope = null; + ancestorInfo.nobrTagInScope = null; + } + + if (buttonScopeTags.indexOf(tag) !== -1) { + ancestorInfo.pTagInButtonScope = null; + } // See rules for 'li', 'dd', 'dt' start tags in + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody + + if ( + specialTags.indexOf(tag) !== -1 && + tag !== "address" && + tag !== "div" && + tag !== "p" + ) { + ancestorInfo.listItemTagAutoclosing = null; + ancestorInfo.dlItemTagAutoclosing = null; + } + + ancestorInfo.current = info; + + if (tag === "form") { + ancestorInfo.formTag = info; + } + + if (tag === "a") { + ancestorInfo.aTagInScope = info; + } + + if (tag === "button") { + ancestorInfo.buttonTagInScope = info; + } + + if (tag === "nobr") { + ancestorInfo.nobrTagInScope = info; + } + + if (tag === "p") { + ancestorInfo.pTagInButtonScope = info; + } + + if (tag === "li") { + ancestorInfo.listItemTagAutoclosing = info; + } + + if (tag === "dd" || tag === "dt") { + ancestorInfo.dlItemTagAutoclosing = info; + } + + if (tag === "#document" || tag === "html") { + ancestorInfo.containerTagInScope = null; + } else if (!ancestorInfo.containerTagInScope) { + ancestorInfo.containerTagInScope = info; + } + + return ancestorInfo; + } +} +/** + * Returns whether + */ + +function isTagValidWithParent(tag, parentTag) { + // First, let's check if we're in an unusual parsing mode... + switch (parentTag) { + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect + case "select": + return tag === "option" || tag === "optgroup" || tag === "#text"; + + case "optgroup": + return tag === "option" || tag === "#text"; + // Strictly speaking, seeing an <option> doesn't mean we're in a <select> + // but + + case "option": + return tag === "#text"; + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption + // No special behavior since these rules fall back to "in body" mode for + // all except special table nodes which cause bad parsing behavior anyway. + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr + + case "tr": + return ( + tag === "th" || + tag === "td" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody + + case "tbody": + case "thead": + case "tfoot": + return ( + tag === "tr" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup + + case "colgroup": + return tag === "col" || tag === "template"; + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable + + case "table": + return ( + tag === "caption" || + tag === "colgroup" || + tag === "tbody" || + tag === "tfoot" || + tag === "thead" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead + + case "head": + return ( + tag === "base" || + tag === "basefont" || + tag === "bgsound" || + tag === "link" || + tag === "meta" || + tag === "title" || + tag === "noscript" || + tag === "noframes" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element + + case "html": + return tag === "head" || tag === "body" || tag === "frameset"; + + case "frameset": + return tag === "frame"; + + case "#document": + return tag === "html"; + } // Probably in the "in body" parsing mode, so we outlaw only tag combos + // where the parsing rules cause implicit opens or closes to be added. + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody + + switch (tag) { + case "h1": + case "h2": + case "h3": + case "h4": + case "h5": + case "h6": + return ( + parentTag !== "h1" && + parentTag !== "h2" && + parentTag !== "h3" && + parentTag !== "h4" && + parentTag !== "h5" && + parentTag !== "h6" + ); + + case "rp": + case "rt": + return impliedEndTags.indexOf(parentTag) === -1; + + case "body": + case "caption": + case "col": + case "colgroup": + case "frameset": + case "frame": + case "head": + case "html": + case "tbody": + case "td": + case "tfoot": + case "th": + case "thead": + case "tr": + // These tags are only valid with a few parents that have special child + // parsing rules -- if we're down here, then none of those matched and + // so we allow it only if we don't know what the parent is, as all other + // cases are invalid. + return parentTag == null; + } + + return true; +} +/** + * Returns whether + */ + +function findInvalidAncestorForTag(tag, ancestorInfo) { + switch (tag) { + case "address": + case "article": + case "aside": + case "blockquote": + case "center": + case "details": + case "dialog": + case "dir": + case "div": + case "dl": + case "fieldset": + case "figcaption": + case "figure": + case "footer": + case "header": + case "hgroup": + case "main": + case "menu": + case "nav": + case "ol": + case "p": + case "section": + case "summary": + case "ul": + case "pre": + case "listing": + case "table": + case "hr": + case "xmp": + case "h1": + case "h2": + case "h3": + case "h4": + case "h5": + case "h6": + return ancestorInfo.pTagInButtonScope; + + case "form": + return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope; + + case "li": + return ancestorInfo.listItemTagAutoclosing; + + case "dd": + case "dt": + return ancestorInfo.dlItemTagAutoclosing; + + case "button": + return ancestorInfo.buttonTagInScope; + + case "a": + // Spec says something about storing a list of markers, but it sounds + // equivalent to this check. + return ancestorInfo.aTagInScope; + + case "nobr": + return ancestorInfo.nobrTagInScope; + } + + return null; +} + +var didWarn = {}; + +function validateDOMNesting(childTag, ancestorInfo) { + { + ancestorInfo = ancestorInfo || emptyAncestorInfoDev; + var parentInfo = ancestorInfo.current; + var parentTag = parentInfo && parentInfo.tag; + var invalidParent = isTagValidWithParent(childTag, parentTag) + ? null + : parentInfo; + var invalidAncestor = invalidParent + ? null + : findInvalidAncestorForTag(childTag, ancestorInfo); + var invalidParentOrAncestor = invalidParent || invalidAncestor; + + if (!invalidParentOrAncestor) { + return; + } + + var ancestorTag = invalidParentOrAncestor.tag; + var warnKey = String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; // eslint-disable-next-line react-internal/safe-string-coercion + + if (didWarn[warnKey]) { + return; + } + + didWarn[warnKey] = true; + var tagDisplayName = "<" + childTag + ">"; + + if (invalidParent) { + var info = ""; + + if (ancestorTag === "table" && childTag === "tr") { + info += + " Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by " + + "the browser."; + } + + error( + "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s", + tagDisplayName, + ancestorTag, + info + ); + } else { + error( + "validateDOMNesting(...): %s cannot appear as a descendant of " + + "<%s>.", + tagDisplayName, + ancestorTag + ); + } + } +} + +function validateTextNesting(childText, parentTag) { + { + if (isTagValidWithParent("#text", parentTag)) { + return; + } // eslint-disable-next-line react-internal/safe-string-coercion + + var warnKey = "#text|" + parentTag; + + if (didWarn[warnKey]) { + return; + } + + didWarn[warnKey] = true; + + if (/\S/.test(childText)) { + error( + "validateDOMNesting(...): Text nodes cannot appear as a child of <%s>.", + parentTag + ); + } else { + error( + "validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <%s>. " + + "Make sure you don't have any extra whitespace between tags on " + + "each line of your source code.", + parentTag + ); + } + } } var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml"; @@ -5032,6 +5521,44 @@ function createDangerousStringForStyles(styles) { return serialized || null; } } + +function setValueForStyle(style, styleName, value) { + var isCustomProperty = styleName.indexOf("--") === 0; + + { + if (!isCustomProperty) { + warnValidStyle(styleName, value); + } + } + + if (value == null || typeof value === "boolean" || value === "") { + if (isCustomProperty) { + style.setProperty(styleName, ""); + } else if (styleName === "float") { + style.cssFloat = ""; + } else { + style[styleName] = ""; + } + } else if (isCustomProperty) { + style.setProperty(styleName, value); + } else if ( + typeof value === "number" && + value !== 0 && + !isUnitlessNumber(styleName) + ) { + style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers + } else { + if (styleName === "float") { + style.cssFloat = value; + } else { + { + checkCSSPropertyStringCoercion(value, styleName); + } + + style[styleName] = ("" + value).trim(); + } + } +} /** * Sets the value for multiple styles on a node. If a value is specified as * '' (empty string), the corresponding style property will be unset. @@ -5040,7 +5567,7 @@ function createDangerousStringForStyles(styles) { * @param {object} styles */ -function setValueForStyles(node, styles) { +function setValueForStyles(node, styles, prevStyles) { if (styles != null && typeof styles !== "object") { throw new Error( "The `style` prop expects a mapping from style properties to values, " + @@ -5059,45 +5586,44 @@ function setValueForStyles(node, styles) { var style = node.style; - for (var styleName in styles) { - if (!styles.hasOwnProperty(styleName)) { - continue; + if (diffInCommitPhase && prevStyles != null) { + { + validateShorthandPropertyCollisionInDev(prevStyles, styles); } - var value = styles[styleName]; - var isCustomProperty = styleName.indexOf("--") === 0; + for (var styleName in prevStyles) { + if ( + prevStyles.hasOwnProperty(styleName) && + (styles == null || !styles.hasOwnProperty(styleName)) + ) { + // Clear style + var isCustomProperty = styleName.indexOf("--") === 0; - { - if (!isCustomProperty) { - warnValidStyle(styleName, value); + if (isCustomProperty) { + style.setProperty(styleName, ""); + } else if (styleName === "float") { + style.cssFloat = ""; + } else { + style[styleName] = ""; + } } } - if (value == null || typeof value === "boolean" || value === "") { - if (isCustomProperty) { - style.setProperty(styleName, ""); - } else if (styleName === "float") { - style.cssFloat = ""; - } else { - style[styleName] = ""; - } - } else if (isCustomProperty) { - style.setProperty(styleName, value); - } else if ( - typeof value === "number" && - value !== 0 && - !isUnitlessNumber(styleName) - ) { - style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers - } else { - if (styleName === "float") { - style.cssFloat = value; - } else { - { - checkCSSPropertyStringCoercion(value, styleName); - } + for (var _styleName in styles) { + var value = styles[_styleName]; - style[styleName] = ("" + value).trim(); + if ( + styles.hasOwnProperty(_styleName) && + prevStyles[_styleName] !== value + ) { + setValueForStyle(style, _styleName, value); + } + } + } else { + for (var _styleName2 in styles) { + if (styles.hasOwnProperty(_styleName2)) { + var _value = styles[_styleName2]; + setValueForStyle(style, _styleName2, _value); } } } @@ -5143,19 +5669,45 @@ function expandShorthandMap(styles) { * becomes .style.fontVariant = '' */ -function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) { +function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) { { if (!nextStyles) { return; + } // Compute the diff as it would happen elsewhere. + + var expandedUpdates = {}; + + if (prevStyles) { + for (var key in prevStyles) { + if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) { + var longhands = shorthandToLonghand[key] || [key]; + + for (var i = 0; i < longhands.length; i++) { + expandedUpdates[longhands[i]] = key; + } + } + } + } + + for (var _key in nextStyles) { + if ( + nextStyles.hasOwnProperty(_key) && + (!prevStyles || prevStyles[_key] !== nextStyles[_key]) + ) { + var _longhands = shorthandToLonghand[_key] || [_key]; + + for (var _i = 0; _i < _longhands.length; _i++) { + expandedUpdates[_longhands[_i]] = _key; + } + } } - var expandedUpdates = expandShorthandMap(styleUpdates); var expandedStyles = expandShorthandMap(nextStyles); var warnedAbout = {}; - for (var key in expandedUpdates) { - var originalKey = expandedUpdates[key]; - var correctOriginalKey = expandedStyles[key]; + for (var _key2 in expandedUpdates) { + var originalKey = expandedUpdates[_key2]; + var correctOriginalKey = expandedStyles[_key2]; if (correctOriginalKey && originalKey !== correctOriginalKey) { var warningKey = originalKey + "," + correctOriginalKey; @@ -5172,7 +5724,7 @@ function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) { "avoid this, don't mix shorthand and non-shorthand properties " + "for the same value; instead, replace the shorthand with " + "separate values.", - isValueEmpty(styleUpdates[originalKey]) ? "Removing" : "Updating", + isValueEmpty(nextStyles[originalKey]) ? "Removing" : "Updating", originalKey, correctOriginalKey ); @@ -7872,11 +8424,13 @@ function prepareToHydrateHostInstance(fiber, hostContext) { shouldWarnIfMismatchDev ); // TODO: Type this specific to this type of component. - fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. + if (!diffInCommitPhase) { + fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. - if (updatePayload !== null) { - return true; + if (updatePayload !== null) { + return true; + } } return false; @@ -21927,29 +22481,28 @@ function updateHostComponent( // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; - } // If we get updated because one of our children updated, we don't - // have newProps so we'll have to reuse them. - // TODO: Split the update API as separate for the props vs. children. - // Even better would be if children weren't special cased at all tho. + } - var instance = workInProgress.stateNode; - var currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host - // component is hitting the resume path. Figure out why. Possibly - // related to `hidden`. + if (diffInCommitPhase) { + markUpdate(workInProgress); + } else { + // If we get updated because one of our children updated, we don't + // have newProps so we'll have to reuse them. + // TODO: Split the update API as separate for the props vs. children. + // Even better would be if children weren't special cased at all tho. + var instance = workInProgress.stateNode; // TODO: Experiencing an error where oldProps is null. Suggests a host + // component is hitting the resume path. Figure out why. Possibly + // related to `hidden`. - var updatePayload = prepareUpdate( - instance, - type, - oldProps, - newProps, - currentHostContext - ); // TODO: Type this specific to this type of component. + getHostContext(); + var updatePayload = prepareUpdate(instance, type, oldProps, newProps); // TODO: Type this specific to this type of component. - workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. All the work is done in commitWork. + workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. All the work is done in commitWork. - if (updatePayload) { - markUpdate(workInProgress); + if (updatePayload) { + markUpdate(workInProgress); + } } } } // This function must be called at the very end of the complete phase, because @@ -26109,7 +26662,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var _updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (_updatePayload !== null) { + if (_updatePayload !== null || diffInCommitPhase) { try { commitUpdate( _instance2, @@ -33346,7 +33899,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-5865b399"; +var ReactVersion = "18.3.0-www-classic-a8459f07"; function createPortal$1( children, @@ -37821,14 +38374,17 @@ function trapClickOnNonInteractiveElement(node) { var xlinkNamespace = "http://www.w3.org/1999/xlink"; var xmlNamespace = "http://www.w3.org/XML/1998/namespace"; -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": { if (typeof value === "string") { - // Avoid setting initial textContent when the text is empty. In IE11 setting + { + validateTextNesting(value, tag); + } // Avoid setting initial textContent when the text is empty. In IE11 setting // textContent on a <textarea> will cause the placeholder to not // show within the <textarea> until it has been focused and blurred again. // https://github.com/facebook/react/issues/6731#issuecomment-254874553 + var canSetTextContent = tag !== "body" && (tag !== "textarea" || value !== ""); @@ -37836,6 +38392,10 @@ function setProp(domElement, tag, key, value, props) { setTextContent(domElement, value); } } else if (typeof value === "number") { + { + validateTextNesting("" + value, tag); + } + var _canSetTextContent = tag !== "body"; if (_canSetTextContent) { @@ -37868,7 +38428,7 @@ function setProp(domElement, tag, key, value, props) { } case "style": { - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; } // These attributes accept URLs. These must not allow javascript: URLS. @@ -38256,6 +38816,20 @@ function setProp(domElement, tag, key, value, props) { break; // Properties that should not be allowed on custom elements. + case "is": { + { + if (prevValue != null) { + error('Cannot update the "is" prop after it has been initialized.'); + } + } // TODO: We shouldn't actually set this attribute, because we've already + // passed it to createElement. We don't also need the attribute. + // However, our tests currently query for it so it's plausible someone + // else does too so it's break. + + setValueForAttribute(domElement, "is", value); + break; + } + case "innerText": case "textContent": if (enableCustomElementPropertySupport) { @@ -38285,10 +38859,10 @@ function setProp(domElement, tag, key, value, props) { } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": { - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; } @@ -38419,6 +38993,11 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var type = null; + var value = null; + var defaultValue = null; + var checked = null; + var defaultChecked = null; for (var propKey in props) { if (!props.hasOwnProperty(propKey)) { @@ -38440,6 +39019,8 @@ function setInitialProperties(domElement, tag, props) { typeof propValue !== "symbol" && typeof propValue !== "boolean" ) { + type = propValue; + { checkAttributeStringCoercion(propValue, propKey); } @@ -38451,17 +39032,29 @@ function setInitialProperties(domElement, tag, props) { } case "checked": { - var checked = propValue != null ? propValue : props.defaultChecked; + checked = propValue; + var checkedValue = + propValue != null ? propValue : props.defaultChecked; var inputElement = domElement; inputElement.checked = - !!checked && - typeof checked !== "function" && - checked !== "symbol"; + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + break; + } + + case "defaultChecked": { + defaultChecked = propValue; break; } case "value": { - // This is handled by updateWrapper below. + value = propValue; + break; + } + + case "defaultValue": { + defaultValue = propValue; break; } @@ -38477,10 +39070,9 @@ function setInitialProperties(domElement, tag, props) { break; } - // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } } // TODO: Make sure we check if this is still unmounted or do any clean @@ -38488,7 +39080,15 @@ function setInitialProperties(domElement, tag, props) { track(domElement); validateInputProps(domElement, props); - initInput(domElement, props, false); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + false + ); return; } @@ -38499,6 +39099,9 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var _value = null; + var _defaultValue = null; + var multiple = null; for (var _propKey in props) { if (!props.hasOwnProperty(_propKey)) { @@ -38513,19 +39116,31 @@ function setInitialProperties(domElement, tag, props) { switch (_propKey) { case "value": { - // This is handled by updateWrapper below. + _value = _propValue; // This is handled by initSelect below. + + break; + } + + case "defaultValue": { + _defaultValue = _propValue; // This is handled by initSelect below. + break; } - // defaultValue are ignored by setProp + + case "multiple": { + multiple = _propValue; // TODO: We don't actually have to fall through here because we set it + // in initSelect anyway. We can remove the special case in setProp. + } + // Fallthrough default: { - setProp(domElement, tag, _propKey, _propValue, props); + setProp(domElement, tag, _propKey, _propValue, props, null); } } } validateSelectProps(domElement, props); - initSelect(domElement, props); + initSelect(domElement, _value, _defaultValue, multiple); return; } @@ -38536,6 +39151,9 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var _value2 = null; + var _defaultValue2 = null; + var children = null; for (var _propKey2 in props) { if (!props.hasOwnProperty(_propKey2)) { @@ -38550,12 +39168,19 @@ function setInitialProperties(domElement, tag, props) { switch (_propKey2) { case "value": { - // This is handled by updateWrapper below. + _value2 = _propValue2; // This is handled by initTextarea below. + + break; + } + + case "defaultValue": { + _defaultValue2 = _propValue2; break; } case "children": { - // TODO: Handled by initWrapperState above. + children = _propValue2; // Handled by initTextarea above. + break; } @@ -38569,7 +39194,6 @@ function setInitialProperties(domElement, tag, props) { break; } - // defaultValue is ignored by setProp default: { setProp(domElement, tag, _propKey2, _propValue2, props); @@ -38580,7 +39204,7 @@ function setInitialProperties(domElement, tag, props) { track(domElement); validateTextareaProps(domElement, props); - initTextarea(domElement, props); + initTextarea(domElement, _value2, _defaultValue2, children); return; } @@ -38614,7 +39238,6 @@ function setInitialProperties(domElement, tag, props) { } } - initOption(domElement, props); return; } @@ -38703,7 +39326,7 @@ function setInitialProperties(domElement, tag, props) { // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey4, _propValue4, props); + setProp(domElement, tag, _propKey4, _propValue4, props, null); } } } @@ -38729,7 +39352,8 @@ function setInitialProperties(domElement, tag, props) { tag, _propKey5, _propValue5, - props + props, + null ); } @@ -38749,7 +39373,7 @@ function setInitialProperties(domElement, tag, props) { continue; } - setProp(domElement, tag, _propKey6, _propValue6, props); + setProp(domElement, tag, _propKey6, _propValue6, props, null); } } // Calculate the diff between the two objects. @@ -38866,16 +39490,619 @@ function diffProperties(domElement, tag, lastProps, nextProps) { if (styleUpdates) { { - validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style); + validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style); } (updatePayload = updatePayload || []).push("style", styleUpdates); } return updatePayload; +} +function updateProperties(domElement, tag, lastProps, nextProps) { + { + validatePropertiesInDevelopment(tag, nextProps); + } + + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": { + // Fast track the most common tag types + break; + } + + case "input": { + var name = null; + var type = null; + var value = null; + var defaultValue = null; + var lastDefaultValue = null; + var checked = null; + var defaultChecked = null; + + for (var propKey in lastProps) { + var lastProp = lastProps[propKey]; + + if (lastProps.hasOwnProperty(propKey) && lastProp != null) { + switch (propKey) { + case "checked": { + if (!nextProps.hasOwnProperty(propKey)) { + var checkedValue = nextProps.defaultChecked; + var inputElement = domElement; + inputElement.checked = + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + } + + break; + } + + case "value": { + // This is handled by updateWrapper below. + break; + } + + case "defaultValue": { + lastDefaultValue = lastProp; + } + // defaultChecked and defaultValue are ignored by setProp + // Fallthrough + + default: { + if (!nextProps.hasOwnProperty(propKey)) + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + } + } + + for (var _propKey7 in nextProps) { + var nextProp = nextProps[_propKey7]; + var _lastProp = lastProps[_propKey7]; + + if ( + nextProps.hasOwnProperty(_propKey7) && + (nextProp != null || _lastProp != null) + ) { + switch (_propKey7) { + case "type": { + type = nextProp; // Fast path since 'type' is very common on inputs + + if (nextProp !== _lastProp) { + if ( + nextProp != null && + typeof nextProp !== "function" && + typeof nextProp !== "symbol" && + typeof nextProp !== "boolean" + ) { + { + checkAttributeStringCoercion(nextProp, _propKey7); + } + + domElement.setAttribute(_propKey7, nextProp); + } else { + domElement.removeAttribute(_propKey7); + } + } + + break; + } + + case "name": { + name = nextProp; + break; + } + + case "checked": { + checked = nextProp; + + if (nextProp !== _lastProp) { + var _checkedValue = + nextProp != null ? nextProp : nextProps.defaultChecked; + + var _inputElement = domElement; + _inputElement.checked = + !!_checkedValue && + typeof _checkedValue !== "function" && + _checkedValue !== "symbol"; + } + + break; + } + + case "defaultChecked": { + defaultChecked = nextProp; + break; + } + + case "value": { + value = nextProp; + break; + } + + case "defaultValue": { + defaultValue = nextProp; + break; + } + + case "children": + case "dangerouslySetInnerHTML": { + if (nextProp != null) { + throw new Error( + tag + + " is a void element tag and must neither have `children` nor " + + "use `dangerouslySetInnerHTML`." + ); + } + + break; + } + + default: { + if (nextProp !== _lastProp) + setProp( + domElement, + tag, + _propKey7, + nextProp, + nextProps, + _lastProp + ); + } + } + } + } + + { + var wasControlled = + lastProps.type === "checkbox" || lastProps.type === "radio" + ? lastProps.checked != null + : lastProps.value != null; + var isControlled = + nextProps.type === "checkbox" || nextProps.type === "radio" + ? nextProps.checked != null + : nextProps.value != null; + + if ( + !wasControlled && + isControlled && + !didWarnUncontrolledToControlled + ) { + error( + "A component is changing an uncontrolled input to be controlled. " + + "This is likely caused by the value changing from undefined to " + + "a defined value, which should not happen. " + + "Decide between using a controlled or uncontrolled input " + + "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components" + ); + + didWarnUncontrolledToControlled = true; + } + + if ( + wasControlled && + !isControlled && + !didWarnControlledToUncontrolled + ) { + error( + "A component is changing a controlled input to be uncontrolled. " + + "This is likely caused by the value changing from a defined to " + + "undefined, which should not happen. " + + "Decide between using a controlled or uncontrolled input " + + "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components" + ); + + didWarnControlledToUncontrolled = true; + } + } // Update checked *before* name. + // In the middle of an update, it is possible to have multiple checked. + // When a checked radio tries to change name, browser makes another radio's checked false. + + if ( + name != null && + typeof name !== "function" && + typeof name !== "symbol" && + typeof name !== "boolean" + ) { + { + checkAttributeStringCoercion(name, "name"); + } + + domElement.setAttribute("name", name); + } else { + domElement.removeAttribute("name"); + } // Update the wrapper around inputs *after* updating props. This has to + // happen after updating the rest of props. Otherwise HTML5 input validations + // raise warnings and prevent the new value from being assigned. + + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + } + + case "select": { + var _value3 = null; + var _defaultValue3 = null; + var multiple = null; + var wasMultiple = null; + + for (var _propKey8 in lastProps) { + var _lastProp2 = lastProps[_propKey8]; + + if (lastProps.hasOwnProperty(_propKey8) && _lastProp2 != null) { + switch (_propKey8) { + case "value": { + // This is handled by updateWrapper below. + break; + } + // defaultValue are ignored by setProp + + case "multiple": { + wasMultiple = _lastProp2; // TODO: Move special case in here from setProp. + } + // Fallthrough + + default: { + if (!nextProps.hasOwnProperty(_propKey8)) + setProp( + domElement, + tag, + _propKey8, + null, + nextProps, + _lastProp2 + ); + } + } + } + } + + for (var _propKey9 in nextProps) { + var _nextProp = nextProps[_propKey9]; + var _lastProp3 = lastProps[_propKey9]; + + if ( + nextProps.hasOwnProperty(_propKey9) && + (_nextProp != null || _lastProp3 != null) + ) { + switch (_propKey9) { + case "value": { + _value3 = _nextProp; // This is handled by updateSelect below. + + break; + } + + case "defaultValue": { + _defaultValue3 = _nextProp; + break; + } + + case "multiple": { + multiple = _nextProp; // TODO: Just move the special case in here from setProp. + } + // Fallthrough + + default: { + if (_nextProp !== _lastProp3) + setProp( + domElement, + tag, + _propKey9, + _nextProp, + nextProps, + _lastProp3 + ); + } + } + } + } // <select> value update needs to occur after <option> children + // reconciliation + + updateSelect(domElement, _value3, _defaultValue3, multiple, wasMultiple); + return; + } + + case "textarea": { + var _value4 = null; + var _defaultValue4 = null; + + for (var _propKey10 in lastProps) { + var _lastProp4 = lastProps[_propKey10]; + + if ( + lastProps.hasOwnProperty(_propKey10) && + _lastProp4 != null && + !nextProps.hasOwnProperty(_propKey10) + ) { + switch (_propKey10) { + case "value": { + // This is handled by updateTextarea below. + break; + } + + case "children": { + // TODO: This doesn't actually do anything if it updates. + break; + } + // defaultValue is ignored by setProp + + default: { + setProp(domElement, tag, _propKey10, null, nextProps, _lastProp4); + } + } + } + } + + for (var _propKey11 in nextProps) { + var _nextProp2 = nextProps[_propKey11]; + var _lastProp5 = lastProps[_propKey11]; + + if ( + nextProps.hasOwnProperty(_propKey11) && + (_nextProp2 != null || _lastProp5 != null) + ) { + switch (_propKey11) { + case "value": { + _value4 = _nextProp2; // This is handled by updateTextarea below. + + break; + } + + case "defaultValue": { + _defaultValue4 = _nextProp2; + break; + } + + case "children": { + // TODO: This doesn't actually do anything if it updates. + break; + } + + case "dangerouslySetInnerHTML": { + if (_nextProp2 != null) { + // TODO: Do we really need a special error message for this. It's also pretty blunt. + throw new Error( + "`dangerouslySetInnerHTML` does not make sense on <textarea>." + ); + } + + break; + } + + default: { + if (_nextProp2 !== _lastProp5) + setProp( + domElement, + tag, + _propKey11, + _nextProp2, + nextProps, + _lastProp5 + ); + } + } + } + } + + updateTextarea(domElement, _value4, _defaultValue4); + return; + } + + case "option": { + for (var _propKey12 in lastProps) { + var _lastProp6 = lastProps[_propKey12]; + + if ( + lastProps.hasOwnProperty(_propKey12) && + _lastProp6 != null && + !nextProps.hasOwnProperty(_propKey12) + ) { + switch (_propKey12) { + case "selected": { + // TODO: Remove support for selected on option. + domElement.selected = false; + break; + } + + default: { + setProp(domElement, tag, _propKey12, null, nextProps, _lastProp6); + } + } + } + } + + for (var _propKey13 in nextProps) { + var _nextProp3 = nextProps[_propKey13]; + var _lastProp7 = lastProps[_propKey13]; + + if ( + nextProps.hasOwnProperty(_propKey13) && + _nextProp3 !== _lastProp7 && + (_nextProp3 != null || _lastProp7 != null) + ) { + switch (_propKey13) { + case "selected": { + // TODO: Remove support for selected on option. + domElement.selected = + _nextProp3 && + typeof _nextProp3 !== "function" && + typeof _nextProp3 !== "symbol"; + break; + } + + default: { + setProp( + domElement, + tag, + _propKey13, + _nextProp3, + nextProps, + _lastProp7 + ); + } + } + } + } + + return; + } + + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": { + // Void elements + for (var _propKey14 in lastProps) { + var _lastProp8 = lastProps[_propKey14]; + + if ( + lastProps.hasOwnProperty(_propKey14) && + _lastProp8 != null && + !nextProps.hasOwnProperty(_propKey14) + ) { + setProp(domElement, tag, _propKey14, null, nextProps, _lastProp8); + } + } + + for (var _propKey15 in nextProps) { + var _nextProp4 = nextProps[_propKey15]; + var _lastProp9 = lastProps[_propKey15]; + + if ( + nextProps.hasOwnProperty(_propKey15) && + _nextProp4 !== _lastProp9 && + (_nextProp4 != null || _lastProp9 != null) + ) { + switch (_propKey15) { + case "children": + case "dangerouslySetInnerHTML": { + if (_nextProp4 != null) { + // TODO: Can we make this a DEV warning to avoid this deny list? + throw new Error( + tag + + " is a void element tag and must neither have `children` nor " + + "use `dangerouslySetInnerHTML`." + ); + } + + break; + } + // defaultChecked and defaultValue are ignored by setProp + + default: { + setProp( + domElement, + tag, + _propKey15, + _nextProp4, + nextProps, + _lastProp9 + ); + } + } + } + } + + return; + } + + default: { + if (isCustomElement(tag)) { + for (var _propKey16 in lastProps) { + var _lastProp10 = lastProps[_propKey16]; + + if ( + lastProps.hasOwnProperty(_propKey16) && + _lastProp10 != null && + !nextProps.hasOwnProperty(_propKey16) + ) { + setPropOnCustomElement( + domElement, + tag, + _propKey16, + null, + nextProps, + _lastProp10 + ); + } + } + + for (var _propKey17 in nextProps) { + var _nextProp5 = nextProps[_propKey17]; + var _lastProp11 = lastProps[_propKey17]; + + if ( + nextProps.hasOwnProperty(_propKey17) && + _nextProp5 !== _lastProp11 && + (_nextProp5 != null || _lastProp11 != null) + ) { + setPropOnCustomElement( + domElement, + tag, + _propKey17, + _nextProp5, + nextProps, + _lastProp11 + ); + } + } + + return; + } + } + } + + for (var _propKey18 in lastProps) { + var _lastProp12 = lastProps[_propKey18]; + + if ( + lastProps.hasOwnProperty(_propKey18) && + _lastProp12 != null && + !nextProps.hasOwnProperty(_propKey18) + ) { + setProp(domElement, tag, _propKey18, null, nextProps, _lastProp12); + } + } + + for (var _propKey19 in nextProps) { + var _nextProp6 = nextProps[_propKey19]; + var _lastProp13 = lastProps[_propKey19]; + + if ( + nextProps.hasOwnProperty(_propKey19) && + _nextProp6 !== _lastProp13 && + (_nextProp6 != null || _lastProp13 != null) + ) { + setProp(domElement, tag, _propKey19, _nextProp6, nextProps, _lastProp13); + } + } } // Apply the diff. -function updateProperties( +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -38896,31 +40123,63 @@ function updateProperties( } case "input": { - // Update checked *before* name. - // In the middle of an update, it is possible to have multiple checked. - // When a checked radio tries to change name, browser makes another radio's checked false. - if (nextProps.type === "radio" && nextProps.name != null) { - updateInputChecked(domElement, nextProps); - } + var name = nextProps.name; + var type = nextProps.type; + var value = nextProps.value; + var defaultValue = nextProps.defaultValue; + var lastDefaultValue = lastProps.defaultValue; + var checked = nextProps.checked; + var defaultChecked = nextProps.defaultChecked; for (var i = 0; i < updatePayload.length; i += 2) { var propKey = updatePayload[i]; var propValue = updatePayload[i + 1]; switch (propKey) { + case "type": { + // Fast path since 'type' is very common on inputs + if ( + propValue != null && + typeof propValue !== "function" && + typeof propValue !== "symbol" && + typeof propValue !== "boolean" + ) { + { + checkAttributeStringCoercion(propValue, propKey); + } + + domElement.setAttribute(propKey, propValue); + } else { + domElement.removeAttribute(propKey); + } + + break; + } + + case "name": { + break; + } + case "checked": { - var checked = + var checkedValue = propValue != null ? propValue : nextProps.defaultChecked; var inputElement = domElement; inputElement.checked = - !!checked && - typeof checked !== "function" && - checked !== "symbol"; + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + break; + } + + case "defaultChecked": { break; } case "value": { - // This is handled by updateWrapper below. + break; + } + + case "defaultValue": { break; } @@ -38936,10 +40195,9 @@ function updateProperties( break; } - // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } } @@ -38985,20 +40243,50 @@ function updateProperties( didWarnControlledToUncontrolled = true; } + } // Update checked *before* name. + // In the middle of an update, it is possible to have multiple checked. + // When a checked radio tries to change name, browser makes another radio's checked false. + + if ( + name != null && + typeof name !== "function" && + typeof name !== "symbol" && + typeof name !== "boolean" + ) { + { + checkAttributeStringCoercion(name, "name"); + } + + domElement.setAttribute("name", name); + } else { + domElement.removeAttribute("name"); } // Update the wrapper around inputs *after* updating props. This has to // happen after updating the rest of props. Otherwise HTML5 input validations // raise warnings and prevent the new value from being assigned. - updateInput(domElement, nextProps); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); return; } case "select": { + var _value5 = nextProps.value; + var _defaultValue5 = nextProps.defaultValue; + var multiple = nextProps.multiple; + var wasMultiple = lastProps.multiple; + for (var _i = 0; _i < updatePayload.length; _i += 2) { - var _propKey7 = updatePayload[_i]; + var _propKey20 = updatePayload[_i]; var _propValue7 = updatePayload[_i + 1]; - switch (_propKey7) { + switch (_propKey20) { case "value": { // This is handled by updateWrapper below. break; @@ -39006,22 +40294,25 @@ function updateProperties( // defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey7, _propValue7, nextProps); + setProp(domElement, tag, _propKey20, _propValue7, nextProps, null); } } } // <select> value update needs to occur after <option> children // reconciliation - updateSelect(domElement, lastProps, nextProps); + updateSelect(domElement, _value5, _defaultValue5, multiple, wasMultiple); return; } case "textarea": { + var _value6 = nextProps.value; + var _defaultValue6 = nextProps.defaultValue; + for (var _i2 = 0; _i2 < updatePayload.length; _i2 += 2) { - var _propKey8 = updatePayload[_i2]; + var _propKey21 = updatePayload[_i2]; var _propValue8 = updatePayload[_i2 + 1]; - switch (_propKey8) { + switch (_propKey21) { case "value": { // This is handled by updateWrapper below. break; @@ -39045,21 +40336,21 @@ function updateProperties( // defaultValue is ignored by setProp default: { - setProp(domElement, tag, _propKey8, _propValue8, nextProps); + setProp(domElement, tag, _propKey21, _propValue8, nextProps, null); } } } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, _value6, _defaultValue6); return; } case "option": { for (var _i3 = 0; _i3 < updatePayload.length; _i3 += 2) { - var _propKey9 = updatePayload[_i3]; + var _propKey22 = updatePayload[_i3]; var _propValue9 = updatePayload[_i3 + 1]; - switch (_propKey9) { + switch (_propKey22) { case "selected": { // TODO: Remove support for selected on option. domElement.selected = @@ -39070,7 +40361,7 @@ function updateProperties( } default: { - setProp(domElement, tag, _propKey9, _propValue9, nextProps); + setProp(domElement, tag, _propKey22, _propValue9, nextProps, null); } } } @@ -39095,10 +40386,10 @@ function updateProperties( case "menuitem": { // Void elements for (var _i4 = 0; _i4 < updatePayload.length; _i4 += 2) { - var _propKey10 = updatePayload[_i4]; + var _propKey23 = updatePayload[_i4]; var _propValue10 = updatePayload[_i4 + 1]; - switch (_propKey10) { + switch (_propKey23) { case "children": case "dangerouslySetInnerHTML": { if (_propValue10 != null) { @@ -39115,7 +40406,7 @@ function updateProperties( // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey10, _propValue10, nextProps); + setProp(domElement, tag, _propKey23, _propValue10, nextProps, null); } } } @@ -39126,14 +40417,15 @@ function updateProperties( default: { if (isCustomElement(tag)) { for (var _i5 = 0; _i5 < updatePayload.length; _i5 += 2) { - var _propKey11 = updatePayload[_i5]; + var _propKey24 = updatePayload[_i5]; var _propValue11 = updatePayload[_i5 + 1]; setPropOnCustomElement( domElement, tag, - _propKey11, + _propKey24, _propValue11, - nextProps + nextProps, + null ); } @@ -39143,9 +40435,9 @@ function updateProperties( } // Apply the diff. for (var _i6 = 0; _i6 < updatePayload.length; _i6 += 2) { - var _propKey12 = updatePayload[_i6]; + var _propKey25 = updatePayload[_i6]; var _propValue12 = updatePayload[_i6 + 1]; - setProp(domElement, tag, _propKey12, _propValue12, nextProps); + setProp(domElement, tag, _propKey25, _propValue12, nextProps, null); } } @@ -40137,7 +41429,15 @@ function diffHydratedProperties( // is not resilient to the DOM state changing so we don't do that here. // TODO: Consider not doing this for input and textarea. - initInput(domElement, props, true); + initInput( + domElement, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + true + ); break; case "option": @@ -40165,7 +41465,7 @@ function diffHydratedProperties( track(domElement); validateTextareaProps(domElement, props); - initTextarea(domElement, props); + initTextarea(domElement, props.value, props.defaultValue, props.children); break; } @@ -40192,7 +41492,18 @@ function diffHydratedProperties( } if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) { - updatePayload = ["children", children]; + if (diffInCommitPhase) { + // We really should be patching this in the commit phase but since + // this only affects legacy mode hydration which is deprecated anyway + // we can get away with it. + // Host singletons get their children appended and don't use the text + // content mechanism. + if (tag !== "body") { + domElement.textContent = children; + } + } else { + updatePayload = ["children", children]; + } } } } @@ -40345,489 +41656,6 @@ function restoreControlledState(domElement, tag, props) { } } -// This validation code was written based on the HTML5 parsing spec: -// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope -// -// Note: this does not catch all invalid nesting, nor does it try to (as it's -// not clear what practical benefit doing so provides); instead, we warn only -// for cases where the parser will give a parse tree differing from what React -// intended. For example, <b><div></div></b> is invalid but we don't warn -// because it still parses correctly; we do warn for other cases like nested -// <p> tags where the beginning of the second element implicitly closes the -// first, causing a confusing mess. -// https://html.spec.whatwg.org/multipage/syntax.html#special -var specialTags = [ - "address", - "applet", - "area", - "article", - "aside", - "base", - "basefont", - "bgsound", - "blockquote", - "body", - "br", - "button", - "caption", - "center", - "col", - "colgroup", - "dd", - "details", - "dir", - "div", - "dl", - "dt", - "embed", - "fieldset", - "figcaption", - "figure", - "footer", - "form", - "frame", - "frameset", - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "head", - "header", - "hgroup", - "hr", - "html", - "iframe", - "img", - "input", - "isindex", - "li", - "link", - "listing", - "main", - "marquee", - "menu", - "menuitem", - "meta", - "nav", - "noembed", - "noframes", - "noscript", - "object", - "ol", - "p", - "param", - "plaintext", - "pre", - "script", - "section", - "select", - "source", - "style", - "summary", - "table", - "tbody", - "td", - "template", - "textarea", - "tfoot", - "th", - "thead", - "title", - "tr", - "track", - "ul", - "wbr", - "xmp" -]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope - -var inScopeTags = [ - "applet", - "caption", - "html", - "table", - "td", - "th", - "marquee", - "object", - "template", // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point - // TODO: Distinguish by namespace here -- for <title>, including it here - // errs on the side of fewer warnings - "foreignObject", - "desc", - "title" -]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope - -var buttonScopeTags = inScopeTags.concat(["button"]); // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags - -var impliedEndTags = ["dd", "dt", "li", "option", "optgroup", "p", "rp", "rt"]; -var emptyAncestorInfoDev = { - current: null, - formTag: null, - aTagInScope: null, - buttonTagInScope: null, - nobrTagInScope: null, - pTagInButtonScope: null, - listItemTagAutoclosing: null, - dlItemTagAutoclosing: null, - containerTagInScope: null -}; - -function updatedAncestorInfoDev(oldInfo, tag) { - { - var ancestorInfo = assign({}, oldInfo || emptyAncestorInfoDev); - - var info = { - tag: tag - }; - - if (inScopeTags.indexOf(tag) !== -1) { - ancestorInfo.aTagInScope = null; - ancestorInfo.buttonTagInScope = null; - ancestorInfo.nobrTagInScope = null; - } - - if (buttonScopeTags.indexOf(tag) !== -1) { - ancestorInfo.pTagInButtonScope = null; - } // See rules for 'li', 'dd', 'dt' start tags in - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody - - if ( - specialTags.indexOf(tag) !== -1 && - tag !== "address" && - tag !== "div" && - tag !== "p" - ) { - ancestorInfo.listItemTagAutoclosing = null; - ancestorInfo.dlItemTagAutoclosing = null; - } - - ancestorInfo.current = info; - - if (tag === "form") { - ancestorInfo.formTag = info; - } - - if (tag === "a") { - ancestorInfo.aTagInScope = info; - } - - if (tag === "button") { - ancestorInfo.buttonTagInScope = info; - } - - if (tag === "nobr") { - ancestorInfo.nobrTagInScope = info; - } - - if (tag === "p") { - ancestorInfo.pTagInButtonScope = info; - } - - if (tag === "li") { - ancestorInfo.listItemTagAutoclosing = info; - } - - if (tag === "dd" || tag === "dt") { - ancestorInfo.dlItemTagAutoclosing = info; - } - - if (tag === "#document" || tag === "html") { - ancestorInfo.containerTagInScope = null; - } else if (!ancestorInfo.containerTagInScope) { - ancestorInfo.containerTagInScope = info; - } - - return ancestorInfo; - } -} -/** - * Returns whether - */ - -function isTagValidWithParent(tag, parentTag) { - // First, let's check if we're in an unusual parsing mode... - switch (parentTag) { - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect - case "select": - return tag === "option" || tag === "optgroup" || tag === "#text"; - - case "optgroup": - return tag === "option" || tag === "#text"; - // Strictly speaking, seeing an <option> doesn't mean we're in a <select> - // but - - case "option": - return tag === "#text"; - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption - // No special behavior since these rules fall back to "in body" mode for - // all except special table nodes which cause bad parsing behavior anyway. - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr - - case "tr": - return ( - tag === "th" || - tag === "td" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody - - case "tbody": - case "thead": - case "tfoot": - return ( - tag === "tr" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup - - case "colgroup": - return tag === "col" || tag === "template"; - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable - - case "table": - return ( - tag === "caption" || - tag === "colgroup" || - tag === "tbody" || - tag === "tfoot" || - tag === "thead" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead - - case "head": - return ( - tag === "base" || - tag === "basefont" || - tag === "bgsound" || - tag === "link" || - tag === "meta" || - tag === "title" || - tag === "noscript" || - tag === "noframes" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element - - case "html": - return tag === "head" || tag === "body" || tag === "frameset"; - - case "frameset": - return tag === "frame"; - - case "#document": - return tag === "html"; - } // Probably in the "in body" parsing mode, so we outlaw only tag combos - // where the parsing rules cause implicit opens or closes to be added. - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody - - switch (tag) { - case "h1": - case "h2": - case "h3": - case "h4": - case "h5": - case "h6": - return ( - parentTag !== "h1" && - parentTag !== "h2" && - parentTag !== "h3" && - parentTag !== "h4" && - parentTag !== "h5" && - parentTag !== "h6" - ); - - case "rp": - case "rt": - return impliedEndTags.indexOf(parentTag) === -1; - - case "body": - case "caption": - case "col": - case "colgroup": - case "frameset": - case "frame": - case "head": - case "html": - case "tbody": - case "td": - case "tfoot": - case "th": - case "thead": - case "tr": - // These tags are only valid with a few parents that have special child - // parsing rules -- if we're down here, then none of those matched and - // so we allow it only if we don't know what the parent is, as all other - // cases are invalid. - return parentTag == null; - } - - return true; -} -/** - * Returns whether - */ - -function findInvalidAncestorForTag(tag, ancestorInfo) { - switch (tag) { - case "address": - case "article": - case "aside": - case "blockquote": - case "center": - case "details": - case "dialog": - case "dir": - case "div": - case "dl": - case "fieldset": - case "figcaption": - case "figure": - case "footer": - case "header": - case "hgroup": - case "main": - case "menu": - case "nav": - case "ol": - case "p": - case "section": - case "summary": - case "ul": - case "pre": - case "listing": - case "table": - case "hr": - case "xmp": - case "h1": - case "h2": - case "h3": - case "h4": - case "h5": - case "h6": - return ancestorInfo.pTagInButtonScope; - - case "form": - return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope; - - case "li": - return ancestorInfo.listItemTagAutoclosing; - - case "dd": - case "dt": - return ancestorInfo.dlItemTagAutoclosing; - - case "button": - return ancestorInfo.buttonTagInScope; - - case "a": - // Spec says something about storing a list of markers, but it sounds - // equivalent to this check. - return ancestorInfo.aTagInScope; - - case "nobr": - return ancestorInfo.nobrTagInScope; - } - - return null; -} - -var didWarn = {}; - -function validateDOMNesting(childTag, childText, ancestorInfo) { - { - ancestorInfo = ancestorInfo || emptyAncestorInfoDev; - var parentInfo = ancestorInfo.current; - var parentTag = parentInfo && parentInfo.tag; - - if (childText != null) { - if (childTag != null) { - error( - "validateDOMNesting: when childText is passed, childTag should be null" - ); - } - - childTag = "#text"; - } else if (childTag == null) { - error("validateDOMNesting: when childText or childTag must be provided"); - - return; - } - - var invalidParent = isTagValidWithParent(childTag, parentTag) - ? null - : parentInfo; - var invalidAncestor = invalidParent - ? null - : findInvalidAncestorForTag(childTag, ancestorInfo); - var invalidParentOrAncestor = invalidParent || invalidAncestor; - - if (!invalidParentOrAncestor) { - return; - } - - var ancestorTag = invalidParentOrAncestor.tag; - var warnKey = String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; // eslint-disable-next-line react-internal/safe-string-coercion - - if (didWarn[warnKey]) { - return; - } - - didWarn[warnKey] = true; - var tagDisplayName = childTag; - var whitespaceInfo = ""; - - if (childTag === "#text") { - if (childText != null && /\S/.test(childText)) { - tagDisplayName = "Text nodes"; - } else { - tagDisplayName = "Whitespace text nodes"; - whitespaceInfo = - " Make sure you don't have any extra whitespace between tags on " + - "each line of your source code."; - } - } else { - tagDisplayName = "<" + childTag + ">"; - } - - if (invalidParent) { - var info = ""; - - if (ancestorTag === "table" && childTag === "tr") { - info += - " Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by " + - "the browser."; - } - - error( - "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s", - tagDisplayName, - ancestorTag, - whitespaceInfo, - info - ); - } else { - error( - "validateDOMNesting(...): %s cannot appear as a descendant of " + - "<%s>.", - tagDisplayName, - ancestorTag - ); - } - } -} - function validateLinkPropsForStyleResource(props) { { // This should only be called when we know we are opting into Resource semantics (i.e. precedence is not null) @@ -41155,20 +41983,7 @@ function createInstance( { // TODO: take namespace into account when validating. var hostContextDev = hostContext; - validateDOMNesting(type, null, hostContextDev.ancestorInfo); - - if ( - typeof props.children === "string" || - typeof props.children === "number" - ) { - var string = "" + props.children; - var ownAncestorInfo = updatedAncestorInfoDev( - hostContextDev.ancestorInfo, - type - ); - validateDOMNesting(null, string, ownAncestorInfo); - } - + validateDOMNesting(type, hostContextDev.ancestorInfo); namespace = hostContextDev.namespace; } @@ -41315,21 +42130,9 @@ function finalizeInitialChildren(domElement, type, props, hostContext) { } } function prepareUpdate(domElement, type, oldProps, newProps, hostContext) { - { - var hostContextDev = hostContext; - - if ( - typeof newProps.children !== typeof oldProps.children && - (typeof newProps.children === "string" || - typeof newProps.children === "number") - ) { - var string = "" + newProps.children; - var ownAncestorInfo = updatedAncestorInfoDev( - hostContextDev.ancestorInfo, - type - ); - validateDOMNesting(null, string, ownAncestorInfo); - } + if (diffInCommitPhase) { + // TODO: Figure out how to validateDOMNesting when children turn into a string. + return null; } return diffProperties(domElement, type, oldProps, newProps); @@ -41353,7 +42156,11 @@ function createTextInstance( ) { { var hostContextDev = hostContext; - validateDOMNesting(null, text, hostContextDev.ancestorInfo); + var ancestor = hostContextDev.ancestorInfo.current; + + if (ancestor != null) { + validateTextNesting(text, ancestor.tag); + } } var textNode = getOwnerDocumentFromRootContainer( @@ -41451,8 +42258,19 @@ function commitUpdate( newProps, internalInstanceHandle ) { - // Apply the diff to the DOM node. - updateProperties(domElement, updatePayload, type, oldProps, newProps); // Update the props handle so that we know which props are the ones with + if (diffInCommitPhase) { + // Diff and update the properties. + updateProperties(domElement, type, oldProps, newProps); + } else { + // Apply the diff to the DOM node. + updatePropertiesWithDiff( + domElement, + updatePayload, + type, + oldProps, + newProps + ); + } // Update the props handle so that we know which props are the ones with // with current event handlers. updateFiberProps(domElement, newProps); @@ -42209,7 +43027,7 @@ function resolveSingletonInstance( var hostContextDev = hostContext; if (validateDOMNestingDev) { - validateDOMNesting(type, null, hostContextDev.ancestorInfo); + validateDOMNesting(type, hostContextDev.ancestorInfo); } } diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index c78bbe6a04dc7..3ea5801105b75 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -261,7 +261,8 @@ var disableInputAttributeSyncing = enableCustomElementPropertySupport = dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = - dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, true is used for a new modern build. + dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, true is used for a new modern build. var enableProfilerTimer = true; var enableProfilerCommitHooks = true; var enableProfilerNestedUpdatePhase = true; @@ -3636,26 +3637,44 @@ function validateInputProps(element, props) { } } } -function updateInputChecked(element, props) { +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { var node = element; - var checked = props.checked; - if (checked != null) { - node.checked = checked; + if (value != null) { + if (type === "number") { + if ( + // $FlowFixMe[incompatible-type] + (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible. + // eslint-disable-next-line + node.value != value + ) { + node.value = toString(getToStringValue(value)); + } + } else if (node.value !== toString(getToStringValue(value))) { + node.value = toString(getToStringValue(value)); + } + } else if (type === "submit" || type === "reset") { + // Submit/reset inputs need the attribute removed completely to avoid + // blank-text buttons. + node.removeAttribute("value"); + return; } -} -function updateInput(element, props) { - var node = element; - var value = getToStringValue(props.value); - var type = props.type; if (disableInputAttributeSyncing) { // When not syncing the value attribute, React only assigns a new value // whenever the defaultValue React prop has changed. When not present, // React does nothing - if (props.defaultValue != null) { - setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); - } else { + if (defaultValue != null) { + setDefaultValue(node, type, getToStringValue(defaultValue)); + } else if (lastDefaultValue != null) { node.removeAttribute("value"); } } else { @@ -3664,11 +3683,11 @@ function updateInput(element, props) { // 1. The value React property // 2. The defaultValue React property // 3. Otherwise there should be no change - if (props.value != null) { - setDefaultValue(node, props.type, value); - } else if (props.defaultValue != null) { - setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); - } else { + if (value != null) { + setDefaultValue(node, type, getToStringValue(value)); + } else if (defaultValue != null) { + setDefaultValue(node, type, getToStringValue(defaultValue)); + } else if (lastDefaultValue != null) { node.removeAttribute("value"); } } @@ -3677,68 +3696,52 @@ function updateInput(element, props) { // When not syncing the checked attribute, the attribute is directly // controllable from the defaultValue React property. It needs to be // updated as new props come in. - if (props.defaultChecked == null) { + if (defaultChecked == null) { node.removeAttribute("checked"); } else { - node.defaultChecked = !!props.defaultChecked; + node.defaultChecked = !!defaultChecked; } } else { // When syncing the checked attribute, it only changes when it needs // to be removed, such as transitioning from a checkbox into a text input - if (props.checked == null && props.defaultChecked != null) { - node.defaultChecked = !!props.defaultChecked; + if (checked == null && defaultChecked != null) { + node.defaultChecked = !!defaultChecked; } } - updateInputChecked(element, props); - - if (value != null) { - if (type === "number") { - if ( - // $FlowFixMe[incompatible-type] - (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible. - // eslint-disable-next-line - node.value != value - ) { - node.value = toString(value); - } - } else if (node.value !== toString(value)) { - node.value = toString(value); - } - } else if (type === "submit" || type === "reset") { - // Submit/reset inputs need the attribute removed completely to avoid - // blank-text buttons. - node.removeAttribute("value"); - return; + if (checked != null && node.checked !== !!checked) { + node.checked = checked; } } -function initInput(element, props, isHydrating) { +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { var node = element; - if (props.value != null || props.defaultValue != null) { - var type = props.type; + if (value != null || defaultValue != null) { var isButton = type === "submit" || type === "reset"; // Avoid setting value attribute on submit/reset inputs as it overrides the // default value provided by the browser. See: #12872 - if (isButton && (props.value === undefined || props.value === null)) { + if (isButton && (value === undefined || value === null)) { return; } - var defaultValue = - props.defaultValue != null - ? toString(getToStringValue(props.defaultValue)) - : ""; + var defaultValueStr = + defaultValue != null ? toString(getToStringValue(defaultValue)) : ""; var initialValue = - props.value != null - ? toString(getToStringValue(props.value)) - : defaultValue; // Do not assign value if it is already set. This prevents user text input + value != null ? toString(getToStringValue(value)) : defaultValueStr; // Do not assign value if it is already set. This prevents user text input // from being lost during SSR hydration. if (!isHydrating) { if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); // When not syncing the value attribute, the value property points + // When not syncing the value attribute, the value property points // directly to the React prop. Only assign it if it exists. - if (value != null) { // Always assign on buttons so that it is possible to assign an // empty string to clear button text. @@ -3748,8 +3751,8 @@ function initInput(element, props, isHydrating) { // prematurely marking required inputs as invalid. Equality is compared // to the current value in case the browser provided value is not an // empty string. - if (isButton || value !== node.value) { - node.value = toString(value); + if (isButton || toString(getToStringValue(value)) !== node.value) { + node.value = toString(getToStringValue(value)); } } } else { @@ -3768,8 +3771,8 @@ function initInput(element, props, isHydrating) { if (disableInputAttributeSyncing) { // When not syncing the value attribute, assign the value attribute // directly from the defaultValue React property (when present) - if (props.defaultValue != null) { - node.defaultValue = defaultValue; + if (defaultValue != null) { + node.defaultValue = defaultValueStr; } } else { // Otherwise, the value attribute is synchronized to the property, @@ -3789,12 +3792,13 @@ function initInput(element, props, isHydrating) { node.name = ""; } - var defaultChecked = - props.checked != null ? props.checked : props.defaultChecked; + var checkedOrDefault = checked != null ? checked : defaultChecked; // TODO: This 'function' or 'symbol' check isn't replicated in other places + // so this semantic is inconsistent. + var initialChecked = - typeof defaultChecked !== "function" && - typeof defaultChecked !== "symbol" && - !!defaultChecked; // The checked property never gets assigned. It must be manually set. + typeof checkedOrDefault !== "function" && + typeof checkedOrDefault !== "symbol" && + !!checkedOrDefault; // The checked property never gets assigned. It must be manually set. // We don't want to do this when hydrating so that existing user input isn't // modified // TODO: I'm pretty sure this is a bug because initialValueTracking won't be @@ -3808,9 +3812,9 @@ function initInput(element, props, isHydrating) { // Only assign the checked attribute if it is defined. This saves // a DOM write when controlling the checked attribute isn't needed // (text inputs, submit/reset) - if (props.defaultChecked != null) { + if (defaultChecked != null) { node.defaultChecked = !node.defaultChecked; - node.defaultChecked = !!props.defaultChecked; + node.defaultChecked = !!defaultChecked; } } else { // When syncing the checked attribute, both the checked property and @@ -3828,12 +3832,16 @@ function initInput(element, props, isHydrating) { } } function restoreControlledInputState(element, props) { - var node = element; - updateInput(node, props); - updateNamedCousins(node, props); -} - -function updateNamedCousins(rootNode, props) { + var rootNode = element; + updateInput( + rootNode, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); var name = props.name; if (props.type === "radio" && name != null) { @@ -3881,7 +3889,15 @@ function updateNamedCousins(rootNode, props) { // was previously checked to update will cause it to be come re-checked // as appropriate. - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } // In Chrome, assigning defaultValue to certain input types triggers input validation. @@ -3957,12 +3973,6 @@ function validateOptionProps(element, props) { } } } -function initOption(element, props) { - // value="" should make a value attribute (#6219) - if (props.value != null) { - element.setAttribute("value", toString(getToStringValue(props.value))); - } -} var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare @@ -4109,31 +4119,28 @@ function validateSelectProps(element, props) { } } } -function initSelect(element, props) { +function initSelect(element, value, defaultValue, multiple) { var node = element; - node.multiple = !!props.multiple; - var value = props.value; + node.multiple = !!multiple; if (value != null) { - updateOptions(node, !!props.multiple, value, false); - } else if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue, true); + updateOptions(node, !!multiple, value, false); + } else if (defaultValue != null) { + updateOptions(node, !!multiple, defaultValue, true); } } -function updateSelect(element, prevProps, props) { +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { var node = element; - var wasMultiple = !!prevProps.multiple; - var value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value, false); - } else if (wasMultiple !== !!props.multiple) { + updateOptions(node, !!multiple, value, false); + } else if (!!wasMultiple !== !!multiple) { // For simplicity, reapply `defaultValue` if `multiple` is toggled. - if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue, true); + if (defaultValue != null) { + updateOptions(node, !!multiple, defaultValue, true); } else { // Revert the select back to its default unselected state. - updateOptions(node, !!props.multiple, props.multiple ? [] : "", false); + updateOptions(node, !!multiple, multiple ? [] : "", false); } } } @@ -4191,38 +4198,38 @@ function validateTextareaProps(element, props) { } } } -function updateTextarea(element, props) { +function updateTextarea(element, value, defaultValue) { var node = element; - var value = getToStringValue(props.value); - var defaultValue = getToStringValue(props.defaultValue); - - if (defaultValue != null) { - node.defaultValue = toString(defaultValue); - } else { - node.defaultValue = ""; - } if (value != null) { // Cast `value` to a string to ensure the value is set correctly. While // browsers typically do this as necessary, jsdom doesn't. - var newValue = toString(value); // To avoid side effects (such as losing text selection), only set value if changed + var newValue = toString(getToStringValue(value)); // To avoid side effects (such as losing text selection), only set value if changed if (newValue !== node.value) { node.value = newValue; } // TOOO: This should respect disableInputAttributeSyncing flag. - if (props.defaultValue == null && node.defaultValue !== newValue) { - node.defaultValue = newValue; + if (defaultValue == null) { + if (node.defaultValue !== newValue) { + node.defaultValue = newValue; + } + + return; } } + + if (defaultValue != null) { + node.defaultValue = toString(getToStringValue(defaultValue)); + } else { + node.defaultValue = ""; + } } -function initTextarea(element, props) { +function initTextarea(element, value, defaultValue, children) { var node = element; - var initialValue = props.value; // Only bother fetching default value if we're going to use it + var initialValue = value; // Only bother fetching default value if we're going to use it if (initialValue == null) { - var defaultValue = props.defaultValue; - if (defaultValue == null) { defaultValue = ""; } @@ -4248,7 +4255,490 @@ function initTextarea(element, props) { } function restoreControlledTextareaState(element, props) { // DOM component is still mounted; update - updateTextarea(element, props); + updateTextarea(element, props.value, props.defaultValue); +} + +// This validation code was written based on the HTML5 parsing spec: +// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope +// +// Note: this does not catch all invalid nesting, nor does it try to (as it's +// not clear what practical benefit doing so provides); instead, we warn only +// for cases where the parser will give a parse tree differing from what React +// intended. For example, <b><div></div></b> is invalid but we don't warn +// because it still parses correctly; we do warn for other cases like nested +// <p> tags where the beginning of the second element implicitly closes the +// first, causing a confusing mess. +// https://html.spec.whatwg.org/multipage/syntax.html#special +var specialTags = [ + "address", + "applet", + "area", + "article", + "aside", + "base", + "basefont", + "bgsound", + "blockquote", + "body", + "br", + "button", + "caption", + "center", + "col", + "colgroup", + "dd", + "details", + "dir", + "div", + "dl", + "dt", + "embed", + "fieldset", + "figcaption", + "figure", + "footer", + "form", + "frame", + "frameset", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "head", + "header", + "hgroup", + "hr", + "html", + "iframe", + "img", + "input", + "isindex", + "li", + "link", + "listing", + "main", + "marquee", + "menu", + "menuitem", + "meta", + "nav", + "noembed", + "noframes", + "noscript", + "object", + "ol", + "p", + "param", + "plaintext", + "pre", + "script", + "section", + "select", + "source", + "style", + "summary", + "table", + "tbody", + "td", + "template", + "textarea", + "tfoot", + "th", + "thead", + "title", + "tr", + "track", + "ul", + "wbr", + "xmp" +]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope + +var inScopeTags = [ + "applet", + "caption", + "html", + "table", + "td", + "th", + "marquee", + "object", + "template", // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point + // TODO: Distinguish by namespace here -- for <title>, including it here + // errs on the side of fewer warnings + "foreignObject", + "desc", + "title" +]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope + +var buttonScopeTags = inScopeTags.concat(["button"]); // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags + +var impliedEndTags = ["dd", "dt", "li", "option", "optgroup", "p", "rp", "rt"]; +var emptyAncestorInfoDev = { + current: null, + formTag: null, + aTagInScope: null, + buttonTagInScope: null, + nobrTagInScope: null, + pTagInButtonScope: null, + listItemTagAutoclosing: null, + dlItemTagAutoclosing: null, + containerTagInScope: null +}; + +function updatedAncestorInfoDev(oldInfo, tag) { + { + var ancestorInfo = assign({}, oldInfo || emptyAncestorInfoDev); + + var info = { + tag: tag + }; + + if (inScopeTags.indexOf(tag) !== -1) { + ancestorInfo.aTagInScope = null; + ancestorInfo.buttonTagInScope = null; + ancestorInfo.nobrTagInScope = null; + } + + if (buttonScopeTags.indexOf(tag) !== -1) { + ancestorInfo.pTagInButtonScope = null; + } // See rules for 'li', 'dd', 'dt' start tags in + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody + + if ( + specialTags.indexOf(tag) !== -1 && + tag !== "address" && + tag !== "div" && + tag !== "p" + ) { + ancestorInfo.listItemTagAutoclosing = null; + ancestorInfo.dlItemTagAutoclosing = null; + } + + ancestorInfo.current = info; + + if (tag === "form") { + ancestorInfo.formTag = info; + } + + if (tag === "a") { + ancestorInfo.aTagInScope = info; + } + + if (tag === "button") { + ancestorInfo.buttonTagInScope = info; + } + + if (tag === "nobr") { + ancestorInfo.nobrTagInScope = info; + } + + if (tag === "p") { + ancestorInfo.pTagInButtonScope = info; + } + + if (tag === "li") { + ancestorInfo.listItemTagAutoclosing = info; + } + + if (tag === "dd" || tag === "dt") { + ancestorInfo.dlItemTagAutoclosing = info; + } + + if (tag === "#document" || tag === "html") { + ancestorInfo.containerTagInScope = null; + } else if (!ancestorInfo.containerTagInScope) { + ancestorInfo.containerTagInScope = info; + } + + return ancestorInfo; + } +} +/** + * Returns whether + */ + +function isTagValidWithParent(tag, parentTag) { + // First, let's check if we're in an unusual parsing mode... + switch (parentTag) { + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect + case "select": + return tag === "option" || tag === "optgroup" || tag === "#text"; + + case "optgroup": + return tag === "option" || tag === "#text"; + // Strictly speaking, seeing an <option> doesn't mean we're in a <select> + // but + + case "option": + return tag === "#text"; + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption + // No special behavior since these rules fall back to "in body" mode for + // all except special table nodes which cause bad parsing behavior anyway. + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr + + case "tr": + return ( + tag === "th" || + tag === "td" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody + + case "tbody": + case "thead": + case "tfoot": + return ( + tag === "tr" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup + + case "colgroup": + return tag === "col" || tag === "template"; + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable + + case "table": + return ( + tag === "caption" || + tag === "colgroup" || + tag === "tbody" || + tag === "tfoot" || + tag === "thead" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead + + case "head": + return ( + tag === "base" || + tag === "basefont" || + tag === "bgsound" || + tag === "link" || + tag === "meta" || + tag === "title" || + tag === "noscript" || + tag === "noframes" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element + + case "html": + return tag === "head" || tag === "body" || tag === "frameset"; + + case "frameset": + return tag === "frame"; + + case "#document": + return tag === "html"; + } // Probably in the "in body" parsing mode, so we outlaw only tag combos + // where the parsing rules cause implicit opens or closes to be added. + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody + + switch (tag) { + case "h1": + case "h2": + case "h3": + case "h4": + case "h5": + case "h6": + return ( + parentTag !== "h1" && + parentTag !== "h2" && + parentTag !== "h3" && + parentTag !== "h4" && + parentTag !== "h5" && + parentTag !== "h6" + ); + + case "rp": + case "rt": + return impliedEndTags.indexOf(parentTag) === -1; + + case "body": + case "caption": + case "col": + case "colgroup": + case "frameset": + case "frame": + case "head": + case "html": + case "tbody": + case "td": + case "tfoot": + case "th": + case "thead": + case "tr": + // These tags are only valid with a few parents that have special child + // parsing rules -- if we're down here, then none of those matched and + // so we allow it only if we don't know what the parent is, as all other + // cases are invalid. + return parentTag == null; + } + + return true; +} +/** + * Returns whether + */ + +function findInvalidAncestorForTag(tag, ancestorInfo) { + switch (tag) { + case "address": + case "article": + case "aside": + case "blockquote": + case "center": + case "details": + case "dialog": + case "dir": + case "div": + case "dl": + case "fieldset": + case "figcaption": + case "figure": + case "footer": + case "header": + case "hgroup": + case "main": + case "menu": + case "nav": + case "ol": + case "p": + case "section": + case "summary": + case "ul": + case "pre": + case "listing": + case "table": + case "hr": + case "xmp": + case "h1": + case "h2": + case "h3": + case "h4": + case "h5": + case "h6": + return ancestorInfo.pTagInButtonScope; + + case "form": + return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope; + + case "li": + return ancestorInfo.listItemTagAutoclosing; + + case "dd": + case "dt": + return ancestorInfo.dlItemTagAutoclosing; + + case "button": + return ancestorInfo.buttonTagInScope; + + case "a": + // Spec says something about storing a list of markers, but it sounds + // equivalent to this check. + return ancestorInfo.aTagInScope; + + case "nobr": + return ancestorInfo.nobrTagInScope; + } + + return null; +} + +var didWarn = {}; + +function validateDOMNesting(childTag, ancestorInfo) { + { + ancestorInfo = ancestorInfo || emptyAncestorInfoDev; + var parentInfo = ancestorInfo.current; + var parentTag = parentInfo && parentInfo.tag; + var invalidParent = isTagValidWithParent(childTag, parentTag) + ? null + : parentInfo; + var invalidAncestor = invalidParent + ? null + : findInvalidAncestorForTag(childTag, ancestorInfo); + var invalidParentOrAncestor = invalidParent || invalidAncestor; + + if (!invalidParentOrAncestor) { + return; + } + + var ancestorTag = invalidParentOrAncestor.tag; + var warnKey = String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; // eslint-disable-next-line react-internal/safe-string-coercion + + if (didWarn[warnKey]) { + return; + } + + didWarn[warnKey] = true; + var tagDisplayName = "<" + childTag + ">"; + + if (invalidParent) { + var info = ""; + + if (ancestorTag === "table" && childTag === "tr") { + info += + " Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by " + + "the browser."; + } + + error( + "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s", + tagDisplayName, + ancestorTag, + info + ); + } else { + error( + "validateDOMNesting(...): %s cannot appear as a descendant of " + + "<%s>.", + tagDisplayName, + ancestorTag + ); + } + } +} + +function validateTextNesting(childText, parentTag) { + { + if (isTagValidWithParent("#text", parentTag)) { + return; + } // eslint-disable-next-line react-internal/safe-string-coercion + + var warnKey = "#text|" + parentTag; + + if (didWarn[warnKey]) { + return; + } + + didWarn[warnKey] = true; + + if (/\S/.test(childText)) { + error( + "validateDOMNesting(...): Text nodes cannot appear as a child of <%s>.", + parentTag + ); + } else { + error( + "validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <%s>. " + + "Make sure you don't have any extra whitespace between tags on " + + "each line of your source code.", + parentTag + ); + } + } } var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml"; @@ -4845,6 +5335,44 @@ function createDangerousStringForStyles(styles) { return serialized || null; } } + +function setValueForStyle(style, styleName, value) { + var isCustomProperty = styleName.indexOf("--") === 0; + + { + if (!isCustomProperty) { + warnValidStyle(styleName, value); + } + } + + if (value == null || typeof value === "boolean" || value === "") { + if (isCustomProperty) { + style.setProperty(styleName, ""); + } else if (styleName === "float") { + style.cssFloat = ""; + } else { + style[styleName] = ""; + } + } else if (isCustomProperty) { + style.setProperty(styleName, value); + } else if ( + typeof value === "number" && + value !== 0 && + !isUnitlessNumber(styleName) + ) { + style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers + } else { + if (styleName === "float") { + style.cssFloat = value; + } else { + { + checkCSSPropertyStringCoercion(value, styleName); + } + + style[styleName] = ("" + value).trim(); + } + } +} /** * Sets the value for multiple styles on a node. If a value is specified as * '' (empty string), the corresponding style property will be unset. @@ -4853,7 +5381,7 @@ function createDangerousStringForStyles(styles) { * @param {object} styles */ -function setValueForStyles(node, styles) { +function setValueForStyles(node, styles, prevStyles) { if (styles != null && typeof styles !== "object") { throw new Error( "The `style` prop expects a mapping from style properties to values, " + @@ -4872,45 +5400,44 @@ function setValueForStyles(node, styles) { var style = node.style; - for (var styleName in styles) { - if (!styles.hasOwnProperty(styleName)) { - continue; + if (diffInCommitPhase && prevStyles != null) { + { + validateShorthandPropertyCollisionInDev(prevStyles, styles); } - var value = styles[styleName]; - var isCustomProperty = styleName.indexOf("--") === 0; + for (var styleName in prevStyles) { + if ( + prevStyles.hasOwnProperty(styleName) && + (styles == null || !styles.hasOwnProperty(styleName)) + ) { + // Clear style + var isCustomProperty = styleName.indexOf("--") === 0; - { - if (!isCustomProperty) { - warnValidStyle(styleName, value); + if (isCustomProperty) { + style.setProperty(styleName, ""); + } else if (styleName === "float") { + style.cssFloat = ""; + } else { + style[styleName] = ""; + } } } - if (value == null || typeof value === "boolean" || value === "") { - if (isCustomProperty) { - style.setProperty(styleName, ""); - } else if (styleName === "float") { - style.cssFloat = ""; - } else { - style[styleName] = ""; - } - } else if (isCustomProperty) { - style.setProperty(styleName, value); - } else if ( - typeof value === "number" && - value !== 0 && - !isUnitlessNumber(styleName) - ) { - style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers - } else { - if (styleName === "float") { - style.cssFloat = value; - } else { - { - checkCSSPropertyStringCoercion(value, styleName); - } + for (var _styleName in styles) { + var value = styles[_styleName]; - style[styleName] = ("" + value).trim(); + if ( + styles.hasOwnProperty(_styleName) && + prevStyles[_styleName] !== value + ) { + setValueForStyle(style, _styleName, value); + } + } + } else { + for (var _styleName2 in styles) { + if (styles.hasOwnProperty(_styleName2)) { + var _value = styles[_styleName2]; + setValueForStyle(style, _styleName2, _value); } } } @@ -4956,19 +5483,45 @@ function expandShorthandMap(styles) { * becomes .style.fontVariant = '' */ -function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) { +function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) { { if (!nextStyles) { return; + } // Compute the diff as it would happen elsewhere. + + var expandedUpdates = {}; + + if (prevStyles) { + for (var key in prevStyles) { + if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) { + var longhands = shorthandToLonghand[key] || [key]; + + for (var i = 0; i < longhands.length; i++) { + expandedUpdates[longhands[i]] = key; + } + } + } + } + + for (var _key in nextStyles) { + if ( + nextStyles.hasOwnProperty(_key) && + (!prevStyles || prevStyles[_key] !== nextStyles[_key]) + ) { + var _longhands = shorthandToLonghand[_key] || [_key]; + + for (var _i = 0; _i < _longhands.length; _i++) { + expandedUpdates[_longhands[_i]] = _key; + } + } } - var expandedUpdates = expandShorthandMap(styleUpdates); var expandedStyles = expandShorthandMap(nextStyles); var warnedAbout = {}; - for (var key in expandedUpdates) { - var originalKey = expandedUpdates[key]; - var correctOriginalKey = expandedStyles[key]; + for (var _key2 in expandedUpdates) { + var originalKey = expandedUpdates[_key2]; + var correctOriginalKey = expandedStyles[_key2]; if (correctOriginalKey && originalKey !== correctOriginalKey) { var warningKey = originalKey + "," + correctOriginalKey; @@ -4985,7 +5538,7 @@ function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) { "avoid this, don't mix shorthand and non-shorthand properties " + "for the same value; instead, replace the shorthand with " + "separate values.", - isValueEmpty(styleUpdates[originalKey]) ? "Removing" : "Updating", + isValueEmpty(nextStyles[originalKey]) ? "Removing" : "Updating", originalKey, correctOriginalKey ); @@ -7804,11 +8357,13 @@ function prepareToHydrateHostInstance(fiber, hostContext) { shouldWarnIfMismatchDev ); // TODO: Type this specific to this type of component. - fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. + if (!diffInCommitPhase) { + fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. - if (updatePayload !== null) { - return true; + if (updatePayload !== null) { + return true; + } } return false; @@ -21797,29 +22352,28 @@ function updateHostComponent( // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; - } // If we get updated because one of our children updated, we don't - // have newProps so we'll have to reuse them. - // TODO: Split the update API as separate for the props vs. children. - // Even better would be if children weren't special cased at all tho. - - var instance = workInProgress.stateNode; - var currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host - // component is hitting the resume path. Figure out why. Possibly - // related to `hidden`. - - var updatePayload = prepareUpdate( - instance, - type, - oldProps, - newProps, - currentHostContext - ); // TODO: Type this specific to this type of component. - - workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. All the work is done in commitWork. + } - if (updatePayload) { + if (diffInCommitPhase) { markUpdate(workInProgress); + } else { + // If we get updated because one of our children updated, we don't + // have newProps so we'll have to reuse them. + // TODO: Split the update API as separate for the props vs. children. + // Even better would be if children weren't special cased at all tho. + var instance = workInProgress.stateNode; // TODO: Experiencing an error where oldProps is null. Suggests a host + // component is hitting the resume path. Figure out why. Possibly + // related to `hidden`. + + getHostContext(); + var updatePayload = prepareUpdate(instance, type, oldProps, newProps); // TODO: Type this specific to this type of component. + + workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. All the work is done in commitWork. + + if (updatePayload) { + markUpdate(workInProgress); + } } } } // This function must be called at the very end of the complete phase, because @@ -25950,7 +26504,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var _updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (_updatePayload !== null) { + if (_updatePayload !== null || diffInCommitPhase) { try { commitUpdate( _instance2, @@ -33182,7 +33736,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-5a04a0b8"; +var ReactVersion = "18.3.0-www-modern-52157a92"; function createPortal$1( children, @@ -38323,14 +38877,17 @@ function trapClickOnNonInteractiveElement(node) { var xlinkNamespace = "http://www.w3.org/1999/xlink"; var xmlNamespace = "http://www.w3.org/XML/1998/namespace"; -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": { if (typeof value === "string") { - // Avoid setting initial textContent when the text is empty. In IE11 setting + { + validateTextNesting(value, tag); + } // Avoid setting initial textContent when the text is empty. In IE11 setting // textContent on a <textarea> will cause the placeholder to not // show within the <textarea> until it has been focused and blurred again. // https://github.com/facebook/react/issues/6731#issuecomment-254874553 + var canSetTextContent = tag !== "body" && (tag !== "textarea" || value !== ""); @@ -38338,6 +38895,10 @@ function setProp(domElement, tag, key, value, props) { setTextContent(domElement, value); } } else if (typeof value === "number") { + { + validateTextNesting("" + value, tag); + } + var _canSetTextContent = tag !== "body"; if (_canSetTextContent) { @@ -38370,7 +38931,7 @@ function setProp(domElement, tag, key, value, props) { } case "style": { - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; } // These attributes accept URLs. These must not allow javascript: URLS. @@ -38758,6 +39319,20 @@ function setProp(domElement, tag, key, value, props) { break; // Properties that should not be allowed on custom elements. + case "is": { + { + if (prevValue != null) { + error('Cannot update the "is" prop after it has been initialized.'); + } + } // TODO: We shouldn't actually set this attribute, because we've already + // passed it to createElement. We don't also need the attribute. + // However, our tests currently query for it so it's plausible someone + // else does too so it's break. + + setValueForAttribute(domElement, "is", value); + break; + } + case "innerText": case "textContent": if (enableCustomElementPropertySupport) { @@ -38787,10 +39362,10 @@ function setProp(domElement, tag, key, value, props) { } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": { - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; } @@ -38921,6 +39496,11 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var type = null; + var value = null; + var defaultValue = null; + var checked = null; + var defaultChecked = null; for (var propKey in props) { if (!props.hasOwnProperty(propKey)) { @@ -38942,6 +39522,8 @@ function setInitialProperties(domElement, tag, props) { typeof propValue !== "symbol" && typeof propValue !== "boolean" ) { + type = propValue; + { checkAttributeStringCoercion(propValue, propKey); } @@ -38953,17 +39535,29 @@ function setInitialProperties(domElement, tag, props) { } case "checked": { - var checked = propValue != null ? propValue : props.defaultChecked; + checked = propValue; + var checkedValue = + propValue != null ? propValue : props.defaultChecked; var inputElement = domElement; inputElement.checked = - !!checked && - typeof checked !== "function" && - checked !== "symbol"; + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + break; + } + + case "defaultChecked": { + defaultChecked = propValue; break; } case "value": { - // This is handled by updateWrapper below. + value = propValue; + break; + } + + case "defaultValue": { + defaultValue = propValue; break; } @@ -38979,10 +39573,9 @@ function setInitialProperties(domElement, tag, props) { break; } - // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } } // TODO: Make sure we check if this is still unmounted or do any clean @@ -38990,7 +39583,15 @@ function setInitialProperties(domElement, tag, props) { track(domElement); validateInputProps(domElement, props); - initInput(domElement, props, false); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + false + ); return; } @@ -39001,6 +39602,9 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var _value = null; + var _defaultValue = null; + var multiple = null; for (var _propKey in props) { if (!props.hasOwnProperty(_propKey)) { @@ -39015,19 +39619,31 @@ function setInitialProperties(domElement, tag, props) { switch (_propKey) { case "value": { - // This is handled by updateWrapper below. + _value = _propValue; // This is handled by initSelect below. + + break; + } + + case "defaultValue": { + _defaultValue = _propValue; // This is handled by initSelect below. + break; } - // defaultValue are ignored by setProp + + case "multiple": { + multiple = _propValue; // TODO: We don't actually have to fall through here because we set it + // in initSelect anyway. We can remove the special case in setProp. + } + // Fallthrough default: { - setProp(domElement, tag, _propKey, _propValue, props); + setProp(domElement, tag, _propKey, _propValue, props, null); } } } validateSelectProps(domElement, props); - initSelect(domElement, props); + initSelect(domElement, _value, _defaultValue, multiple); return; } @@ -39038,6 +39654,8 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var _value2 = null; + var _defaultValue2 = null; for (var _propKey2 in props) { if (!props.hasOwnProperty(_propKey2)) { @@ -39052,12 +39670,17 @@ function setInitialProperties(domElement, tag, props) { switch (_propKey2) { case "value": { - // This is handled by updateWrapper below. + _value2 = _propValue2; // This is handled by initTextarea below. + + break; + } + + case "defaultValue": { + _defaultValue2 = _propValue2; break; } case "children": { - // TODO: Handled by initWrapperState above. break; } @@ -39071,7 +39694,6 @@ function setInitialProperties(domElement, tag, props) { break; } - // defaultValue is ignored by setProp default: { setProp(domElement, tag, _propKey2, _propValue2, props); @@ -39082,7 +39704,7 @@ function setInitialProperties(domElement, tag, props) { track(domElement); validateTextareaProps(domElement, props); - initTextarea(domElement, props); + initTextarea(domElement, _value2, _defaultValue2); return; } @@ -39116,7 +39738,6 @@ function setInitialProperties(domElement, tag, props) { } } - initOption(domElement, props); return; } @@ -39205,7 +39826,7 @@ function setInitialProperties(domElement, tag, props) { // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey4, _propValue4, props); + setProp(domElement, tag, _propKey4, _propValue4, props, null); } } } @@ -39231,7 +39852,8 @@ function setInitialProperties(domElement, tag, props) { tag, _propKey5, _propValue5, - props + props, + null ); } @@ -39251,7 +39873,7 @@ function setInitialProperties(domElement, tag, props) { continue; } - setProp(domElement, tag, _propKey6, _propValue6, props); + setProp(domElement, tag, _propKey6, _propValue6, props, null); } } // Calculate the diff between the two objects. @@ -39368,16 +39990,619 @@ function diffProperties(domElement, tag, lastProps, nextProps) { if (styleUpdates) { { - validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style); + validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style); } (updatePayload = updatePayload || []).push("style", styleUpdates); } return updatePayload; +} +function updateProperties(domElement, tag, lastProps, nextProps) { + { + validatePropertiesInDevelopment(tag, nextProps); + } + + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": { + // Fast track the most common tag types + break; + } + + case "input": { + var name = null; + var type = null; + var value = null; + var defaultValue = null; + var lastDefaultValue = null; + var checked = null; + var defaultChecked = null; + + for (var propKey in lastProps) { + var lastProp = lastProps[propKey]; + + if (lastProps.hasOwnProperty(propKey) && lastProp != null) { + switch (propKey) { + case "checked": { + if (!nextProps.hasOwnProperty(propKey)) { + var checkedValue = nextProps.defaultChecked; + var inputElement = domElement; + inputElement.checked = + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + } + + break; + } + + case "value": { + // This is handled by updateWrapper below. + break; + } + + case "defaultValue": { + lastDefaultValue = lastProp; + } + // defaultChecked and defaultValue are ignored by setProp + // Fallthrough + + default: { + if (!nextProps.hasOwnProperty(propKey)) + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + } + } + + for (var _propKey7 in nextProps) { + var nextProp = nextProps[_propKey7]; + var _lastProp = lastProps[_propKey7]; + + if ( + nextProps.hasOwnProperty(_propKey7) && + (nextProp != null || _lastProp != null) + ) { + switch (_propKey7) { + case "type": { + type = nextProp; // Fast path since 'type' is very common on inputs + + if (nextProp !== _lastProp) { + if ( + nextProp != null && + typeof nextProp !== "function" && + typeof nextProp !== "symbol" && + typeof nextProp !== "boolean" + ) { + { + checkAttributeStringCoercion(nextProp, _propKey7); + } + + domElement.setAttribute(_propKey7, nextProp); + } else { + domElement.removeAttribute(_propKey7); + } + } + + break; + } + + case "name": { + name = nextProp; + break; + } + + case "checked": { + checked = nextProp; + + if (nextProp !== _lastProp) { + var _checkedValue = + nextProp != null ? nextProp : nextProps.defaultChecked; + + var _inputElement = domElement; + _inputElement.checked = + !!_checkedValue && + typeof _checkedValue !== "function" && + _checkedValue !== "symbol"; + } + + break; + } + + case "defaultChecked": { + defaultChecked = nextProp; + break; + } + + case "value": { + value = nextProp; + break; + } + + case "defaultValue": { + defaultValue = nextProp; + break; + } + + case "children": + case "dangerouslySetInnerHTML": { + if (nextProp != null) { + throw new Error( + tag + + " is a void element tag and must neither have `children` nor " + + "use `dangerouslySetInnerHTML`." + ); + } + + break; + } + + default: { + if (nextProp !== _lastProp) + setProp( + domElement, + tag, + _propKey7, + nextProp, + nextProps, + _lastProp + ); + } + } + } + } + + { + var wasControlled = + lastProps.type === "checkbox" || lastProps.type === "radio" + ? lastProps.checked != null + : lastProps.value != null; + var isControlled = + nextProps.type === "checkbox" || nextProps.type === "radio" + ? nextProps.checked != null + : nextProps.value != null; + + if ( + !wasControlled && + isControlled && + !didWarnUncontrolledToControlled + ) { + error( + "A component is changing an uncontrolled input to be controlled. " + + "This is likely caused by the value changing from undefined to " + + "a defined value, which should not happen. " + + "Decide between using a controlled or uncontrolled input " + + "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components" + ); + + didWarnUncontrolledToControlled = true; + } + + if ( + wasControlled && + !isControlled && + !didWarnControlledToUncontrolled + ) { + error( + "A component is changing a controlled input to be uncontrolled. " + + "This is likely caused by the value changing from a defined to " + + "undefined, which should not happen. " + + "Decide between using a controlled or uncontrolled input " + + "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components" + ); + + didWarnControlledToUncontrolled = true; + } + } // Update checked *before* name. + // In the middle of an update, it is possible to have multiple checked. + // When a checked radio tries to change name, browser makes another radio's checked false. + + if ( + name != null && + typeof name !== "function" && + typeof name !== "symbol" && + typeof name !== "boolean" + ) { + { + checkAttributeStringCoercion(name, "name"); + } + + domElement.setAttribute("name", name); + } else { + domElement.removeAttribute("name"); + } // Update the wrapper around inputs *after* updating props. This has to + // happen after updating the rest of props. Otherwise HTML5 input validations + // raise warnings and prevent the new value from being assigned. + + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + } + + case "select": { + var _value3 = null; + var _defaultValue3 = null; + var multiple = null; + var wasMultiple = null; + + for (var _propKey8 in lastProps) { + var _lastProp2 = lastProps[_propKey8]; + + if (lastProps.hasOwnProperty(_propKey8) && _lastProp2 != null) { + switch (_propKey8) { + case "value": { + // This is handled by updateWrapper below. + break; + } + // defaultValue are ignored by setProp + + case "multiple": { + wasMultiple = _lastProp2; // TODO: Move special case in here from setProp. + } + // Fallthrough + + default: { + if (!nextProps.hasOwnProperty(_propKey8)) + setProp( + domElement, + tag, + _propKey8, + null, + nextProps, + _lastProp2 + ); + } + } + } + } + + for (var _propKey9 in nextProps) { + var _nextProp = nextProps[_propKey9]; + var _lastProp3 = lastProps[_propKey9]; + + if ( + nextProps.hasOwnProperty(_propKey9) && + (_nextProp != null || _lastProp3 != null) + ) { + switch (_propKey9) { + case "value": { + _value3 = _nextProp; // This is handled by updateSelect below. + + break; + } + + case "defaultValue": { + _defaultValue3 = _nextProp; + break; + } + + case "multiple": { + multiple = _nextProp; // TODO: Just move the special case in here from setProp. + } + // Fallthrough + + default: { + if (_nextProp !== _lastProp3) + setProp( + domElement, + tag, + _propKey9, + _nextProp, + nextProps, + _lastProp3 + ); + } + } + } + } // <select> value update needs to occur after <option> children + // reconciliation + + updateSelect(domElement, _value3, _defaultValue3, multiple, wasMultiple); + return; + } + + case "textarea": { + var _value4 = null; + var _defaultValue4 = null; + + for (var _propKey10 in lastProps) { + var _lastProp4 = lastProps[_propKey10]; + + if ( + lastProps.hasOwnProperty(_propKey10) && + _lastProp4 != null && + !nextProps.hasOwnProperty(_propKey10) + ) { + switch (_propKey10) { + case "value": { + // This is handled by updateTextarea below. + break; + } + + case "children": { + // TODO: This doesn't actually do anything if it updates. + break; + } + // defaultValue is ignored by setProp + + default: { + setProp(domElement, tag, _propKey10, null, nextProps, _lastProp4); + } + } + } + } + + for (var _propKey11 in nextProps) { + var _nextProp2 = nextProps[_propKey11]; + var _lastProp5 = lastProps[_propKey11]; + + if ( + nextProps.hasOwnProperty(_propKey11) && + (_nextProp2 != null || _lastProp5 != null) + ) { + switch (_propKey11) { + case "value": { + _value4 = _nextProp2; // This is handled by updateTextarea below. + + break; + } + + case "defaultValue": { + _defaultValue4 = _nextProp2; + break; + } + + case "children": { + // TODO: This doesn't actually do anything if it updates. + break; + } + + case "dangerouslySetInnerHTML": { + if (_nextProp2 != null) { + // TODO: Do we really need a special error message for this. It's also pretty blunt. + throw new Error( + "`dangerouslySetInnerHTML` does not make sense on <textarea>." + ); + } + + break; + } + + default: { + if (_nextProp2 !== _lastProp5) + setProp( + domElement, + tag, + _propKey11, + _nextProp2, + nextProps, + _lastProp5 + ); + } + } + } + } + + updateTextarea(domElement, _value4, _defaultValue4); + return; + } + + case "option": { + for (var _propKey12 in lastProps) { + var _lastProp6 = lastProps[_propKey12]; + + if ( + lastProps.hasOwnProperty(_propKey12) && + _lastProp6 != null && + !nextProps.hasOwnProperty(_propKey12) + ) { + switch (_propKey12) { + case "selected": { + // TODO: Remove support for selected on option. + domElement.selected = false; + break; + } + + default: { + setProp(domElement, tag, _propKey12, null, nextProps, _lastProp6); + } + } + } + } + + for (var _propKey13 in nextProps) { + var _nextProp3 = nextProps[_propKey13]; + var _lastProp7 = lastProps[_propKey13]; + + if ( + nextProps.hasOwnProperty(_propKey13) && + _nextProp3 !== _lastProp7 && + (_nextProp3 != null || _lastProp7 != null) + ) { + switch (_propKey13) { + case "selected": { + // TODO: Remove support for selected on option. + domElement.selected = + _nextProp3 && + typeof _nextProp3 !== "function" && + typeof _nextProp3 !== "symbol"; + break; + } + + default: { + setProp( + domElement, + tag, + _propKey13, + _nextProp3, + nextProps, + _lastProp7 + ); + } + } + } + } + + return; + } + + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": { + // Void elements + for (var _propKey14 in lastProps) { + var _lastProp8 = lastProps[_propKey14]; + + if ( + lastProps.hasOwnProperty(_propKey14) && + _lastProp8 != null && + !nextProps.hasOwnProperty(_propKey14) + ) { + setProp(domElement, tag, _propKey14, null, nextProps, _lastProp8); + } + } + + for (var _propKey15 in nextProps) { + var _nextProp4 = nextProps[_propKey15]; + var _lastProp9 = lastProps[_propKey15]; + + if ( + nextProps.hasOwnProperty(_propKey15) && + _nextProp4 !== _lastProp9 && + (_nextProp4 != null || _lastProp9 != null) + ) { + switch (_propKey15) { + case "children": + case "dangerouslySetInnerHTML": { + if (_nextProp4 != null) { + // TODO: Can we make this a DEV warning to avoid this deny list? + throw new Error( + tag + + " is a void element tag and must neither have `children` nor " + + "use `dangerouslySetInnerHTML`." + ); + } + + break; + } + // defaultChecked and defaultValue are ignored by setProp + + default: { + setProp( + domElement, + tag, + _propKey15, + _nextProp4, + nextProps, + _lastProp9 + ); + } + } + } + } + + return; + } + + default: { + if (isCustomElement(tag)) { + for (var _propKey16 in lastProps) { + var _lastProp10 = lastProps[_propKey16]; + + if ( + lastProps.hasOwnProperty(_propKey16) && + _lastProp10 != null && + !nextProps.hasOwnProperty(_propKey16) + ) { + setPropOnCustomElement( + domElement, + tag, + _propKey16, + null, + nextProps, + _lastProp10 + ); + } + } + + for (var _propKey17 in nextProps) { + var _nextProp5 = nextProps[_propKey17]; + var _lastProp11 = lastProps[_propKey17]; + + if ( + nextProps.hasOwnProperty(_propKey17) && + _nextProp5 !== _lastProp11 && + (_nextProp5 != null || _lastProp11 != null) + ) { + setPropOnCustomElement( + domElement, + tag, + _propKey17, + _nextProp5, + nextProps, + _lastProp11 + ); + } + } + + return; + } + } + } + + for (var _propKey18 in lastProps) { + var _lastProp12 = lastProps[_propKey18]; + + if ( + lastProps.hasOwnProperty(_propKey18) && + _lastProp12 != null && + !nextProps.hasOwnProperty(_propKey18) + ) { + setProp(domElement, tag, _propKey18, null, nextProps, _lastProp12); + } + } + + for (var _propKey19 in nextProps) { + var _nextProp6 = nextProps[_propKey19]; + var _lastProp13 = lastProps[_propKey19]; + + if ( + nextProps.hasOwnProperty(_propKey19) && + _nextProp6 !== _lastProp13 && + (_nextProp6 != null || _lastProp13 != null) + ) { + setProp(domElement, tag, _propKey19, _nextProp6, nextProps, _lastProp13); + } + } } // Apply the diff. -function updateProperties( +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -39398,31 +40623,63 @@ function updateProperties( } case "input": { - // Update checked *before* name. - // In the middle of an update, it is possible to have multiple checked. - // When a checked radio tries to change name, browser makes another radio's checked false. - if (nextProps.type === "radio" && nextProps.name != null) { - updateInputChecked(domElement, nextProps); - } + var name = nextProps.name; + var type = nextProps.type; + var value = nextProps.value; + var defaultValue = nextProps.defaultValue; + var lastDefaultValue = lastProps.defaultValue; + var checked = nextProps.checked; + var defaultChecked = nextProps.defaultChecked; for (var i = 0; i < updatePayload.length; i += 2) { var propKey = updatePayload[i]; var propValue = updatePayload[i + 1]; switch (propKey) { + case "type": { + // Fast path since 'type' is very common on inputs + if ( + propValue != null && + typeof propValue !== "function" && + typeof propValue !== "symbol" && + typeof propValue !== "boolean" + ) { + { + checkAttributeStringCoercion(propValue, propKey); + } + + domElement.setAttribute(propKey, propValue); + } else { + domElement.removeAttribute(propKey); + } + + break; + } + + case "name": { + break; + } + case "checked": { - var checked = + var checkedValue = propValue != null ? propValue : nextProps.defaultChecked; var inputElement = domElement; inputElement.checked = - !!checked && - typeof checked !== "function" && - checked !== "symbol"; + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + break; + } + + case "defaultChecked": { break; } case "value": { - // This is handled by updateWrapper below. + break; + } + + case "defaultValue": { break; } @@ -39438,10 +40695,9 @@ function updateProperties( break; } - // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } } @@ -39487,20 +40743,50 @@ function updateProperties( didWarnControlledToUncontrolled = true; } + } // Update checked *before* name. + // In the middle of an update, it is possible to have multiple checked. + // When a checked radio tries to change name, browser makes another radio's checked false. + + if ( + name != null && + typeof name !== "function" && + typeof name !== "symbol" && + typeof name !== "boolean" + ) { + { + checkAttributeStringCoercion(name, "name"); + } + + domElement.setAttribute("name", name); + } else { + domElement.removeAttribute("name"); } // Update the wrapper around inputs *after* updating props. This has to // happen after updating the rest of props. Otherwise HTML5 input validations // raise warnings and prevent the new value from being assigned. - updateInput(domElement, nextProps); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); return; } case "select": { + var _value5 = nextProps.value; + var _defaultValue5 = nextProps.defaultValue; + var multiple = nextProps.multiple; + var wasMultiple = lastProps.multiple; + for (var _i = 0; _i < updatePayload.length; _i += 2) { - var _propKey7 = updatePayload[_i]; + var _propKey20 = updatePayload[_i]; var _propValue7 = updatePayload[_i + 1]; - switch (_propKey7) { + switch (_propKey20) { case "value": { // This is handled by updateWrapper below. break; @@ -39508,22 +40794,25 @@ function updateProperties( // defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey7, _propValue7, nextProps); + setProp(domElement, tag, _propKey20, _propValue7, nextProps, null); } } } // <select> value update needs to occur after <option> children // reconciliation - updateSelect(domElement, lastProps, nextProps); + updateSelect(domElement, _value5, _defaultValue5, multiple, wasMultiple); return; } case "textarea": { + var _value6 = nextProps.value; + var _defaultValue6 = nextProps.defaultValue; + for (var _i2 = 0; _i2 < updatePayload.length; _i2 += 2) { - var _propKey8 = updatePayload[_i2]; + var _propKey21 = updatePayload[_i2]; var _propValue8 = updatePayload[_i2 + 1]; - switch (_propKey8) { + switch (_propKey21) { case "value": { // This is handled by updateWrapper below. break; @@ -39547,21 +40836,21 @@ function updateProperties( // defaultValue is ignored by setProp default: { - setProp(domElement, tag, _propKey8, _propValue8, nextProps); + setProp(domElement, tag, _propKey21, _propValue8, nextProps, null); } } } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, _value6, _defaultValue6); return; } case "option": { for (var _i3 = 0; _i3 < updatePayload.length; _i3 += 2) { - var _propKey9 = updatePayload[_i3]; + var _propKey22 = updatePayload[_i3]; var _propValue9 = updatePayload[_i3 + 1]; - switch (_propKey9) { + switch (_propKey22) { case "selected": { // TODO: Remove support for selected on option. domElement.selected = @@ -39572,7 +40861,7 @@ function updateProperties( } default: { - setProp(domElement, tag, _propKey9, _propValue9, nextProps); + setProp(domElement, tag, _propKey22, _propValue9, nextProps, null); } } } @@ -39597,10 +40886,10 @@ function updateProperties( case "menuitem": { // Void elements for (var _i4 = 0; _i4 < updatePayload.length; _i4 += 2) { - var _propKey10 = updatePayload[_i4]; + var _propKey23 = updatePayload[_i4]; var _propValue10 = updatePayload[_i4 + 1]; - switch (_propKey10) { + switch (_propKey23) { case "children": case "dangerouslySetInnerHTML": { if (_propValue10 != null) { @@ -39617,7 +40906,7 @@ function updateProperties( // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey10, _propValue10, nextProps); + setProp(domElement, tag, _propKey23, _propValue10, nextProps, null); } } } @@ -39628,14 +40917,15 @@ function updateProperties( default: { if (isCustomElement(tag)) { for (var _i5 = 0; _i5 < updatePayload.length; _i5 += 2) { - var _propKey11 = updatePayload[_i5]; + var _propKey24 = updatePayload[_i5]; var _propValue11 = updatePayload[_i5 + 1]; setPropOnCustomElement( domElement, tag, - _propKey11, + _propKey24, _propValue11, - nextProps + nextProps, + null ); } @@ -39645,9 +40935,9 @@ function updateProperties( } // Apply the diff. for (var _i6 = 0; _i6 < updatePayload.length; _i6 += 2) { - var _propKey12 = updatePayload[_i6]; + var _propKey25 = updatePayload[_i6]; var _propValue12 = updatePayload[_i6 + 1]; - setProp(domElement, tag, _propKey12, _propValue12, nextProps); + setProp(domElement, tag, _propKey25, _propValue12, nextProps, null); } } @@ -40639,7 +41929,15 @@ function diffHydratedProperties( // is not resilient to the DOM state changing so we don't do that here. // TODO: Consider not doing this for input and textarea. - initInput(domElement, props, true); + initInput( + domElement, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + true + ); break; case "option": @@ -40667,7 +41965,7 @@ function diffHydratedProperties( track(domElement); validateTextareaProps(domElement, props); - initTextarea(domElement, props); + initTextarea(domElement, props.value, props.defaultValue); break; } @@ -40694,7 +41992,18 @@ function diffHydratedProperties( } if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) { - updatePayload = ["children", children]; + if (diffInCommitPhase) { + // We really should be patching this in the commit phase but since + // this only affects legacy mode hydration which is deprecated anyway + // we can get away with it. + // Host singletons get their children appended and don't use the text + // content mechanism. + if (tag !== "body") { + domElement.textContent = children; + } + } else { + updatePayload = ["children", children]; + } } } } @@ -40847,489 +42156,6 @@ function restoreControlledState(domElement, tag, props) { } } -// This validation code was written based on the HTML5 parsing spec: -// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope -// -// Note: this does not catch all invalid nesting, nor does it try to (as it's -// not clear what practical benefit doing so provides); instead, we warn only -// for cases where the parser will give a parse tree differing from what React -// intended. For example, <b><div></div></b> is invalid but we don't warn -// because it still parses correctly; we do warn for other cases like nested -// <p> tags where the beginning of the second element implicitly closes the -// first, causing a confusing mess. -// https://html.spec.whatwg.org/multipage/syntax.html#special -var specialTags = [ - "address", - "applet", - "area", - "article", - "aside", - "base", - "basefont", - "bgsound", - "blockquote", - "body", - "br", - "button", - "caption", - "center", - "col", - "colgroup", - "dd", - "details", - "dir", - "div", - "dl", - "dt", - "embed", - "fieldset", - "figcaption", - "figure", - "footer", - "form", - "frame", - "frameset", - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "head", - "header", - "hgroup", - "hr", - "html", - "iframe", - "img", - "input", - "isindex", - "li", - "link", - "listing", - "main", - "marquee", - "menu", - "menuitem", - "meta", - "nav", - "noembed", - "noframes", - "noscript", - "object", - "ol", - "p", - "param", - "plaintext", - "pre", - "script", - "section", - "select", - "source", - "style", - "summary", - "table", - "tbody", - "td", - "template", - "textarea", - "tfoot", - "th", - "thead", - "title", - "tr", - "track", - "ul", - "wbr", - "xmp" -]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope - -var inScopeTags = [ - "applet", - "caption", - "html", - "table", - "td", - "th", - "marquee", - "object", - "template", // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point - // TODO: Distinguish by namespace here -- for <title>, including it here - // errs on the side of fewer warnings - "foreignObject", - "desc", - "title" -]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope - -var buttonScopeTags = inScopeTags.concat(["button"]); // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags - -var impliedEndTags = ["dd", "dt", "li", "option", "optgroup", "p", "rp", "rt"]; -var emptyAncestorInfoDev = { - current: null, - formTag: null, - aTagInScope: null, - buttonTagInScope: null, - nobrTagInScope: null, - pTagInButtonScope: null, - listItemTagAutoclosing: null, - dlItemTagAutoclosing: null, - containerTagInScope: null -}; - -function updatedAncestorInfoDev(oldInfo, tag) { - { - var ancestorInfo = assign({}, oldInfo || emptyAncestorInfoDev); - - var info = { - tag: tag - }; - - if (inScopeTags.indexOf(tag) !== -1) { - ancestorInfo.aTagInScope = null; - ancestorInfo.buttonTagInScope = null; - ancestorInfo.nobrTagInScope = null; - } - - if (buttonScopeTags.indexOf(tag) !== -1) { - ancestorInfo.pTagInButtonScope = null; - } // See rules for 'li', 'dd', 'dt' start tags in - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody - - if ( - specialTags.indexOf(tag) !== -1 && - tag !== "address" && - tag !== "div" && - tag !== "p" - ) { - ancestorInfo.listItemTagAutoclosing = null; - ancestorInfo.dlItemTagAutoclosing = null; - } - - ancestorInfo.current = info; - - if (tag === "form") { - ancestorInfo.formTag = info; - } - - if (tag === "a") { - ancestorInfo.aTagInScope = info; - } - - if (tag === "button") { - ancestorInfo.buttonTagInScope = info; - } - - if (tag === "nobr") { - ancestorInfo.nobrTagInScope = info; - } - - if (tag === "p") { - ancestorInfo.pTagInButtonScope = info; - } - - if (tag === "li") { - ancestorInfo.listItemTagAutoclosing = info; - } - - if (tag === "dd" || tag === "dt") { - ancestorInfo.dlItemTagAutoclosing = info; - } - - if (tag === "#document" || tag === "html") { - ancestorInfo.containerTagInScope = null; - } else if (!ancestorInfo.containerTagInScope) { - ancestorInfo.containerTagInScope = info; - } - - return ancestorInfo; - } -} -/** - * Returns whether - */ - -function isTagValidWithParent(tag, parentTag) { - // First, let's check if we're in an unusual parsing mode... - switch (parentTag) { - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect - case "select": - return tag === "option" || tag === "optgroup" || tag === "#text"; - - case "optgroup": - return tag === "option" || tag === "#text"; - // Strictly speaking, seeing an <option> doesn't mean we're in a <select> - // but - - case "option": - return tag === "#text"; - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption - // No special behavior since these rules fall back to "in body" mode for - // all except special table nodes which cause bad parsing behavior anyway. - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr - - case "tr": - return ( - tag === "th" || - tag === "td" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody - - case "tbody": - case "thead": - case "tfoot": - return ( - tag === "tr" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup - - case "colgroup": - return tag === "col" || tag === "template"; - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable - - case "table": - return ( - tag === "caption" || - tag === "colgroup" || - tag === "tbody" || - tag === "tfoot" || - tag === "thead" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead - - case "head": - return ( - tag === "base" || - tag === "basefont" || - tag === "bgsound" || - tag === "link" || - tag === "meta" || - tag === "title" || - tag === "noscript" || - tag === "noframes" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element - - case "html": - return tag === "head" || tag === "body" || tag === "frameset"; - - case "frameset": - return tag === "frame"; - - case "#document": - return tag === "html"; - } // Probably in the "in body" parsing mode, so we outlaw only tag combos - // where the parsing rules cause implicit opens or closes to be added. - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody - - switch (tag) { - case "h1": - case "h2": - case "h3": - case "h4": - case "h5": - case "h6": - return ( - parentTag !== "h1" && - parentTag !== "h2" && - parentTag !== "h3" && - parentTag !== "h4" && - parentTag !== "h5" && - parentTag !== "h6" - ); - - case "rp": - case "rt": - return impliedEndTags.indexOf(parentTag) === -1; - - case "body": - case "caption": - case "col": - case "colgroup": - case "frameset": - case "frame": - case "head": - case "html": - case "tbody": - case "td": - case "tfoot": - case "th": - case "thead": - case "tr": - // These tags are only valid with a few parents that have special child - // parsing rules -- if we're down here, then none of those matched and - // so we allow it only if we don't know what the parent is, as all other - // cases are invalid. - return parentTag == null; - } - - return true; -} -/** - * Returns whether - */ - -function findInvalidAncestorForTag(tag, ancestorInfo) { - switch (tag) { - case "address": - case "article": - case "aside": - case "blockquote": - case "center": - case "details": - case "dialog": - case "dir": - case "div": - case "dl": - case "fieldset": - case "figcaption": - case "figure": - case "footer": - case "header": - case "hgroup": - case "main": - case "menu": - case "nav": - case "ol": - case "p": - case "section": - case "summary": - case "ul": - case "pre": - case "listing": - case "table": - case "hr": - case "xmp": - case "h1": - case "h2": - case "h3": - case "h4": - case "h5": - case "h6": - return ancestorInfo.pTagInButtonScope; - - case "form": - return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope; - - case "li": - return ancestorInfo.listItemTagAutoclosing; - - case "dd": - case "dt": - return ancestorInfo.dlItemTagAutoclosing; - - case "button": - return ancestorInfo.buttonTagInScope; - - case "a": - // Spec says something about storing a list of markers, but it sounds - // equivalent to this check. - return ancestorInfo.aTagInScope; - - case "nobr": - return ancestorInfo.nobrTagInScope; - } - - return null; -} - -var didWarn = {}; - -function validateDOMNesting(childTag, childText, ancestorInfo) { - { - ancestorInfo = ancestorInfo || emptyAncestorInfoDev; - var parentInfo = ancestorInfo.current; - var parentTag = parentInfo && parentInfo.tag; - - if (childText != null) { - if (childTag != null) { - error( - "validateDOMNesting: when childText is passed, childTag should be null" - ); - } - - childTag = "#text"; - } else if (childTag == null) { - error("validateDOMNesting: when childText or childTag must be provided"); - - return; - } - - var invalidParent = isTagValidWithParent(childTag, parentTag) - ? null - : parentInfo; - var invalidAncestor = invalidParent - ? null - : findInvalidAncestorForTag(childTag, ancestorInfo); - var invalidParentOrAncestor = invalidParent || invalidAncestor; - - if (!invalidParentOrAncestor) { - return; - } - - var ancestorTag = invalidParentOrAncestor.tag; - var warnKey = String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; // eslint-disable-next-line react-internal/safe-string-coercion - - if (didWarn[warnKey]) { - return; - } - - didWarn[warnKey] = true; - var tagDisplayName = childTag; - var whitespaceInfo = ""; - - if (childTag === "#text") { - if (childText != null && /\S/.test(childText)) { - tagDisplayName = "Text nodes"; - } else { - tagDisplayName = "Whitespace text nodes"; - whitespaceInfo = - " Make sure you don't have any extra whitespace between tags on " + - "each line of your source code."; - } - } else { - tagDisplayName = "<" + childTag + ">"; - } - - if (invalidParent) { - var info = ""; - - if (ancestorTag === "table" && childTag === "tr") { - info += - " Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by " + - "the browser."; - } - - error( - "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s", - tagDisplayName, - ancestorTag, - whitespaceInfo, - info - ); - } else { - error( - "validateDOMNesting(...): %s cannot appear as a descendant of " + - "<%s>.", - tagDisplayName, - ancestorTag - ); - } - } -} - function validateLinkPropsForStyleResource(props) { { // This should only be called when we know we are opting into Resource semantics (i.e. precedence is not null) @@ -41657,20 +42483,7 @@ function createInstance( { // TODO: take namespace into account when validating. var hostContextDev = hostContext; - validateDOMNesting(type, null, hostContextDev.ancestorInfo); - - if ( - typeof props.children === "string" || - typeof props.children === "number" - ) { - var string = "" + props.children; - var ownAncestorInfo = updatedAncestorInfoDev( - hostContextDev.ancestorInfo, - type - ); - validateDOMNesting(null, string, ownAncestorInfo); - } - + validateDOMNesting(type, hostContextDev.ancestorInfo); namespace = hostContextDev.namespace; } @@ -41817,21 +42630,9 @@ function finalizeInitialChildren(domElement, type, props, hostContext) { } } function prepareUpdate(domElement, type, oldProps, newProps, hostContext) { - { - var hostContextDev = hostContext; - - if ( - typeof newProps.children !== typeof oldProps.children && - (typeof newProps.children === "string" || - typeof newProps.children === "number") - ) { - var string = "" + newProps.children; - var ownAncestorInfo = updatedAncestorInfoDev( - hostContextDev.ancestorInfo, - type - ); - validateDOMNesting(null, string, ownAncestorInfo); - } + if (diffInCommitPhase) { + // TODO: Figure out how to validateDOMNesting when children turn into a string. + return null; } return diffProperties(domElement, type, oldProps, newProps); @@ -41855,7 +42656,11 @@ function createTextInstance( ) { { var hostContextDev = hostContext; - validateDOMNesting(null, text, hostContextDev.ancestorInfo); + var ancestor = hostContextDev.ancestorInfo.current; + + if (ancestor != null) { + validateTextNesting(text, ancestor.tag); + } } var textNode = getOwnerDocumentFromRootContainer( @@ -41953,8 +42758,19 @@ function commitUpdate( newProps, internalInstanceHandle ) { - // Apply the diff to the DOM node. - updateProperties(domElement, updatePayload, type, oldProps, newProps); // Update the props handle so that we know which props are the ones with + if (diffInCommitPhase) { + // Diff and update the properties. + updateProperties(domElement, type, oldProps, newProps); + } else { + // Apply the diff to the DOM node. + updatePropertiesWithDiff( + domElement, + updatePayload, + type, + oldProps, + newProps + ); + } // Update the props handle so that we know which props are the ones with // with current event handlers. updateFiberProps(domElement, newProps); @@ -42711,7 +43527,7 @@ function resolveSingletonInstance( var hostContextDev = hostContext; if (validateDOMNestingDev) { - validateDOMNesting(type, null, hostContextDev.ancestorInfo); + validateDOMNesting(type, hostContextDev.ancestorInfo); } } diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 1360d9508075a..1dee9435b7928 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -55,6 +55,7 @@ var ReactSharedInternals = dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase, REACT_ELEMENT_TYPE = Symbol.for("react.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), @@ -973,78 +974,85 @@ function getActiveElement(doc) { return doc.body; } } -function updateInput(element, props) { - var value = getToStringValue(props.value), - type = props.type; - disableInputAttributeSyncing - ? null != props.defaultValue - ? setDefaultValue( - element, - props.type, - getToStringValue(props.defaultValue) - ) - : element.removeAttribute("value") - : null != props.value - ? setDefaultValue(element, props.type, value) - : null != props.defaultValue - ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue)) - : element.removeAttribute("value"); - disableInputAttributeSyncing - ? null == props.defaultChecked - ? element.removeAttribute("checked") - : (element.defaultChecked = !!props.defaultChecked) - : null == props.checked && - null != props.defaultChecked && - (element.defaultChecked = !!props.defaultChecked); - props = props.checked; - null != props && (element.checked = props); +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { if (null != value) if ("number" === type) { if ((0 === value && "" === element.value) || element.value != value) - element.value = "" + value; - } else element.value !== "" + value && (element.value = "" + value); - else - ("submit" !== type && "reset" !== type) || element.removeAttribute("value"); -} -function initInput(element, props, isHydrating) { - if (null != props.value || null != props.defaultValue) { - var type = props.type; + element.value = "" + getToStringValue(value); + } else + element.value !== "" + getToStringValue(value) && + (element.value = "" + getToStringValue(value)); + else if ("submit" === type || "reset" === type) { + element.removeAttribute("value"); + return; + } + disableInputAttributeSyncing + ? null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value") + : null != value + ? setDefaultValue(element, type, getToStringValue(value)) + : null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value"); + disableInputAttributeSyncing + ? null == defaultChecked + ? element.removeAttribute("checked") + : (element.defaultChecked = !!defaultChecked) + : null == checked && + null != defaultChecked && + (element.defaultChecked = !!defaultChecked); + null != checked && + element.checked !== !!checked && + (element.checked = checked); +} +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { + if (null != value || null != defaultValue) { if ( (type = "submit" === type || "reset" === type) && - (void 0 === props.value || null === props.value) + (void 0 === value || null === value) ) return; - var defaultValue = - null != props.defaultValue - ? "" + getToStringValue(props.defaultValue) - : "", + var defaultValueStr = + null != defaultValue ? "" + getToStringValue(defaultValue) : "", initialValue = - null != props.value ? "" + getToStringValue(props.value) : defaultValue; - if (!isHydrating) - if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); - null == value || - (!type && value === element.value) || - (element.value = "" + value); - } else initialValue !== element.value && (element.value = initialValue); + null != value ? "" + getToStringValue(value) : defaultValueStr; + isHydrating || + (disableInputAttributeSyncing + ? null == value || + (!type && "" + getToStringValue(value) === element.value) || + (element.value = "" + getToStringValue(value)) + : initialValue !== element.value && (element.value = initialValue)); disableInputAttributeSyncing - ? null != props.defaultValue && (element.defaultValue = defaultValue) + ? null != defaultValue && (element.defaultValue = defaultValueStr) : (element.defaultValue = initialValue); } - type = element.name; - "" !== type && (element.name = ""); - defaultValue = null != props.checked ? props.checked : props.defaultChecked; - defaultValue = - "function" !== typeof defaultValue && - "symbol" !== typeof defaultValue && - !!defaultValue; - isHydrating || (element.checked = !!defaultValue); + value = element.name; + "" !== value && (element.name = ""); + checked = null != checked ? checked : defaultChecked; + checked = + "function" !== typeof checked && "symbol" !== typeof checked && !!checked; + isHydrating || (element.checked = !!checked); disableInputAttributeSyncing - ? null != props.defaultChecked && - ((element.defaultChecked = !element.defaultChecked), - (element.defaultChecked = !!props.defaultChecked)) - : (element.defaultChecked = !!defaultValue); - "" !== type && (element.name = type); + ? null != defaultChecked && (element.defaultChecked = !!defaultChecked) + : (element.defaultChecked = !!checked); + "" !== value && (element.name = value); } function setDefaultValue(node, type, value) { ("number" === type && getActiveElement(node.ownerDocument) === node) || @@ -1076,40 +1084,47 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) { null !== multiple && (multiple.selected = !0); } } -function updateTextarea(element, props) { - var value = getToStringValue(props.value), - defaultValue = getToStringValue(props.defaultValue); - element.defaultValue = null != defaultValue ? "" + defaultValue : ""; - null != value && - ((value = "" + value), +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { + null != value + ? updateOptions(element, !!multiple, value, !1) + : !!wasMultiple !== !!multiple && + (null != defaultValue + ? updateOptions(element, !!multiple, defaultValue, !0) + : updateOptions(element, !!multiple, multiple ? [] : "", !1)); +} +function updateTextarea(element, value, defaultValue) { + if ( + null != value && + ((value = "" + getToStringValue(value)), value !== element.value && (element.value = value), - null == props.defaultValue && - element.defaultValue !== value && - (element.defaultValue = value)); -} -function initTextarea(element, props) { - var initialValue = props.value; - if (null == initialValue) { - initialValue = props.children; - props = props.defaultValue; - if (null != initialValue) { - if (null != props) throw Error(formatProdErrorMessage(92)); - if (isArrayImpl(initialValue)) { - if (1 < initialValue.length) throw Error(formatProdErrorMessage(93)); - initialValue = initialValue[0]; + null == defaultValue) + ) { + element.defaultValue !== value && (element.defaultValue = value); + return; + } + element.defaultValue = + null != defaultValue ? "" + getToStringValue(defaultValue) : ""; +} +function initTextarea(element, value, defaultValue, children) { + if (null == value) { + if (null != children) { + if (null != defaultValue) throw Error(formatProdErrorMessage(92)); + if (isArrayImpl(children)) { + if (1 < children.length) throw Error(formatProdErrorMessage(93)); + children = children[0]; } - props = initialValue; + defaultValue = children; } - null == props && (props = ""); - initialValue = props; + null == defaultValue && (defaultValue = ""); + value = defaultValue; } - props = getToStringValue(initialValue); - element.defaultValue = props; - initialValue = element.textContent; - initialValue === props && - "" !== initialValue && - null !== initialValue && - (element.value = initialValue); + defaultValue = getToStringValue(value); + element.defaultValue = defaultValue; + children = element.textContent; + children === defaultValue && + "" !== children && + null !== children && + (element.value = children); } function getChildNamespace(parentNamespace, type) { if ( @@ -1175,30 +1190,44 @@ var unitlessNumbers = new Set( " " ) ); -function setValueForStyles(node, styles) { +function setValueForStyle(style, styleName, value) { + var isCustomProperty = 0 === styleName.indexOf("--"); + null == value || "boolean" === typeof value || "" === value + ? isCustomProperty + ? style.setProperty(styleName, "") + : "float" === styleName + ? (style.cssFloat = "") + : (style[styleName] = "") + : isCustomProperty + ? style.setProperty(styleName, value) + : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName) + ? "float" === styleName + ? (style.cssFloat = value) + : (style[styleName] = ("" + value).trim()) + : (style[styleName] = value + "px"); +} +function setValueForStyles(node, styles, prevStyles) { if (null != styles && "object" !== typeof styles) throw Error(formatProdErrorMessage(62)); node = node.style; - for (var styleName in styles) - if (styles.hasOwnProperty(styleName)) { - var value = styles[styleName], - isCustomProperty = 0 === styleName.indexOf("--"); - null == value || "boolean" === typeof value || "" === value - ? isCustomProperty + if (diffInCommitPhase && null != prevStyles) { + for (var styleName in prevStyles) + !prevStyles.hasOwnProperty(styleName) || + (null != styles && styles.hasOwnProperty(styleName)) || + (0 === styleName.indexOf("--") ? node.setProperty(styleName, "") : "float" === styleName ? (node.cssFloat = "") - : (node[styleName] = "") - : isCustomProperty - ? node.setProperty(styleName, value) - : "number" !== typeof value || - 0 === value || - unitlessNumbers.has(styleName) - ? "float" === styleName - ? (node.cssFloat = value) - : (node[styleName] = ("" + value).trim()) - : (node[styleName] = value + "px"); - } + : (node[styleName] = "")); + for (var styleName$16 in styles) + (styleName = styles[styleName$16]), + styles.hasOwnProperty(styleName$16) && + prevStyles[styleName$16] !== styleName && + setValueForStyle(node, styleName$16, styleName); + } else + for (var styleName$17 in styles) + styles.hasOwnProperty(styleName$17) && + setValueForStyle(node, styleName$17, styles[styleName$17]); } function isCustomElement(tagName) { if (-1 === tagName.indexOf("-")) return !1; @@ -1317,7 +1346,15 @@ function restoreStateOfTarget(target) { var props = getFiberCurrentPropsFromNode(target); a: switch (((target = internalInstance.stateNode), internalInstance.type)) { case "input": - updateInput(target, props); + updateInput( + target, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); internalInstance = props.name; if ("radio" === props.type && null != internalInstance) { for (props = target; props.parentNode; ) props = props.parentNode; @@ -1336,13 +1373,21 @@ function restoreStateOfTarget(target) { var otherProps = getFiberCurrentPropsFromNode(otherNode); if (!otherProps) throw Error(formatProdErrorMessage(90)); updateValueIfChanged(otherNode); - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } break a; case "textarea": - updateTextarea(target, props); + updateTextarea(target, props.value, props.defaultValue); break a; case "select": (internalInstance = props.value), @@ -1634,8 +1679,8 @@ function prepareToHydrateHostInstance(fiber) { break; case "video": case "audio": - for (type = 0; type < mediaEventTypes.length; type++) - listenToNonDelegatedEvent(mediaEventTypes[type], instance); + for (var i = 0; i < mediaEventTypes.length; i++) + listenToNonDelegatedEvent(mediaEventTypes[i], instance); break; case "source": listenToNonDelegatedEvent("error", instance); @@ -1652,7 +1697,15 @@ function prepareToHydrateHostInstance(fiber) { case "input": listenToNonDelegatedEvent("invalid", instance); track(instance); - initInput(instance, props, !0); + initInput( + instance, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + !0 + ); break; case "select": listenToNonDelegatedEvent("invalid", instance); @@ -1660,22 +1713,30 @@ function prepareToHydrateHostInstance(fiber) { case "textarea": listenToNonDelegatedEvent("invalid", instance), track(instance), - initTextarea(instance, props); - } - var updatePayload = null; - type = props.children; - ("string" !== typeof type && "number" !== typeof type) || - instance.textContent === "" + type || - (!0 !== props.suppressHydrationWarning && - ((updatePayload = instance.textContent), - normalizeMarkupForTextOrAttribute(type), - normalizeMarkupForTextOrAttribute(updatePayload)), - (updatePayload = ["children", type])); + initTextarea(instance, props.value, props.defaultValue, props.children); + } + i = null; + var children = props.children; + if ( + ("string" === typeof children || "number" === typeof children) && + instance.textContent !== "" + children + ) { + if (!0 !== props.suppressHydrationWarning) { + var serverText = instance.textContent; + normalizeMarkupForTextOrAttribute(children); + normalizeMarkupForTextOrAttribute(serverText); + } + diffInCommitPhase + ? "body" !== type && (instance.textContent = children) + : (i = ["children", children]); + } null != props.onScroll && listenToNonDelegatedEvent("scroll", instance); null != props.onClick && (instance.onclick = noop$1); - instance = updatePayload; - fiber.updateQueue = instance; - return null !== instance ? !0 : !1; + instance = i; + return diffInCommitPhase || + ((fiber.updateQueue = instance), null === instance) + ? !1 + : !0; } function popToNextHostParent(fiber) { for (hydrationParentFiber = fiber.return; hydrationParentFiber; ) @@ -3150,10 +3211,10 @@ createFunctionComponentUpdateQueue = function () { function use(usable) { if (null !== usable && "object" === typeof usable) { if ("function" === typeof usable.then) { - var index$41 = thenableIndexCounter; + var index$44 = thenableIndexCounter; thenableIndexCounter += 1; null === thenableState && (thenableState = []); - usable = trackUsedThenable(thenableState, usable, index$41); + usable = trackUsedThenable(thenableState, usable, index$44); null === currentlyRenderingFiber$1.alternate && (null === workInProgressHook ? null === currentlyRenderingFiber$1.memoizedState @@ -3641,16 +3702,16 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$47 = enqueueUpdate(provider, fiber, lane); - if (null !== root$47) { + var root$50 = enqueueUpdate(provider, fiber, lane); + if (null !== root$50) { var eventTime = requestEventTime(); - scheduleUpdateOnFiber(root$47, provider, lane, eventTime); - entangleTransitions(root$47, provider, lane); + scheduleUpdateOnFiber(root$50, provider, lane, eventTime); + entangleTransitions(root$50, provider, lane); } provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$47 && + null !== root$50 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -3857,15 +3918,15 @@ var HooksDispatcherOnMount = { getServerSnapshot = getServerSnapshot(); } else { getServerSnapshot = getSnapshot(); - var root$43 = workInProgressRoot; - if (null === root$43) throw Error(formatProdErrorMessage(349)); - includesBlockingLane(root$43, renderLanes$1) || + var root$46 = workInProgressRoot; + if (null === root$46) throw Error(formatProdErrorMessage(349)); + includesBlockingLane(root$46, renderLanes$1) || pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot); } hook.memoizedState = getServerSnapshot; - root$43 = { value: getServerSnapshot, getSnapshot: getSnapshot }; - hook.queue = root$43; - mountEffect(subscribeToStore.bind(null, fiber, root$43, subscribe), [ + root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot }; + hook.queue = root$46; + mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [ subscribe ]); fiber.flags |= 2048; @@ -3874,7 +3935,7 @@ var HooksDispatcherOnMount = { updateStoreInstance.bind( null, fiber, - root$43, + root$46, getServerSnapshot, getSnapshot ), @@ -4373,10 +4434,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$58 = workInProgress.stateNode; + root$61 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$58.incompleteTransitions.has(transition)) { + if (!root$61.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -4384,11 +4445,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$58.incompleteTransitions.set(transition, markerInstance); + root$61.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$58.incompleteTransitions.forEach(function (markerInstance) { + root$61.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5085,14 +5146,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { } JSCompiler_temp = current.memoizedState; if (null !== JSCompiler_temp) { - var dehydrated$65 = JSCompiler_temp.dehydrated; - if (null !== dehydrated$65) + var dehydrated$68 = JSCompiler_temp.dehydrated; + if (null !== dehydrated$68) return updateDehydratedSuspenseComponent( current, workInProgress, didSuspend, nextProps, - dehydrated$65, + dehydrated$68, JSCompiler_temp, renderLanes ); @@ -5102,7 +5163,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { showFallback = nextProps.fallback; didSuspend = workInProgress.mode; JSCompiler_temp = current.child; - dehydrated$65 = JSCompiler_temp.sibling; + dehydrated$68 = JSCompiler_temp.sibling; var primaryChildProps = { mode: "hidden", children: nextProps.children }; 0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp ? ((nextProps = workInProgress.child), @@ -5111,8 +5172,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { (workInProgress.deletions = null)) : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)), (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280)); - null !== dehydrated$65 - ? (showFallback = createWorkInProgress(dehydrated$65, showFallback)) + null !== dehydrated$68 + ? (showFallback = createWorkInProgress(dehydrated$68, showFallback)) : ((showFallback = createFiberFromFragment( showFallback, didSuspend, @@ -5131,10 +5192,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? (didSuspend = mountSuspenseOffscreenState(renderLanes)) : ((JSCompiler_temp = didSuspend.cachePool), null !== JSCompiler_temp - ? ((dehydrated$65 = CacheContext._currentValue), + ? ((dehydrated$68 = CacheContext._currentValue), (JSCompiler_temp = - JSCompiler_temp.parent !== dehydrated$65 - ? { parent: dehydrated$65, pool: dehydrated$65 } + JSCompiler_temp.parent !== dehydrated$68 + ? { parent: dehydrated$68, pool: dehydrated$68 } : JSCompiler_temp)) : (JSCompiler_temp = getSuspendedCache()), (didSuspend = { @@ -5148,23 +5209,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ((JSCompiler_temp = enableTransitionTracing ? markerInstanceStack.current : null), - (dehydrated$65 = showFallback.updateQueue), + (dehydrated$68 = showFallback.updateQueue), (primaryChildProps = current.updateQueue), - null === dehydrated$65 + null === dehydrated$68 ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null }) - : dehydrated$65 === primaryChildProps + : dehydrated$68 === primaryChildProps ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null !== primaryChildProps ? primaryChildProps.retryQueue : null }) - : ((dehydrated$65.transitions = didSuspend), - (dehydrated$65.markerInstances = JSCompiler_temp)))); + : ((dehydrated$68.transitions = didSuspend), + (dehydrated$68.markerInstances = JSCompiler_temp)))); showFallback.childLanes = current.childLanes & ~renderLanes; workInProgress.memoizedState = SUSPENDED_MARKER; return nextProps; @@ -6127,62 +6188,67 @@ function markRef(workInProgress) { } function updateHostComponent(current, workInProgress, type, newProps) { current = current.memoizedProps; - if (current !== newProps) { - type = null; - var propKey, - styleName, - styleUpdates = null; - for (propKey in current) - if ( - !newProps.hasOwnProperty(propKey) && - current.hasOwnProperty(propKey) && - null != current[propKey] - ) - switch (propKey) { - case "style": - var lastStyle = current[propKey]; - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - break; - default: - (type = type || []).push(propKey, null); - } - for (propKey in newProps) { - lastStyle = newProps[propKey]; - var lastProp = null != current ? current[propKey] : void 0; - if ( - newProps.hasOwnProperty(propKey) && - lastStyle !== lastProp && - (null != lastStyle || null != lastProp) - ) - switch (propKey) { - case "style": - if (lastProp) { - for (styleName in lastProp) - !lastProp.hasOwnProperty(styleName) || - (lastStyle && lastStyle.hasOwnProperty(styleName)) || - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - lastProp[styleName] !== lastStyle[styleName] && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = lastStyle[styleName])); - } else - styleUpdates || - (type || (type = []), type.push(propKey, styleUpdates)), - (styleUpdates = lastStyle); - break; - default: - (type = type || []).push(propKey, lastStyle); + if (current !== newProps) + if (diffInCommitPhase) markUpdate(workInProgress); + else { + if (diffInCommitPhase) newProps = null; + else { + type = null; + var propKey, + styleName, + styleUpdates = null; + for (propKey in current) + if ( + !newProps.hasOwnProperty(propKey) && + current.hasOwnProperty(propKey) && + null != current[propKey] + ) + switch (propKey) { + case "style": + var lastStyle = current[propKey]; + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + break; + default: + (type = type || []).push(propKey, null); + } + for (propKey in newProps) { + lastStyle = newProps[propKey]; + var lastProp = null != current ? current[propKey] : void 0; + if ( + newProps.hasOwnProperty(propKey) && + lastStyle !== lastProp && + (null != lastStyle || null != lastProp) + ) + switch (propKey) { + case "style": + if (lastProp) { + for (styleName in lastProp) + !lastProp.hasOwnProperty(styleName) || + (lastStyle && lastStyle.hasOwnProperty(styleName)) || + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + lastProp[styleName] !== lastStyle[styleName] && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = lastStyle[styleName])); + } else + styleUpdates || + (type || (type = []), type.push(propKey, styleUpdates)), + (styleUpdates = lastStyle); + break; + default: + (type = type || []).push(propKey, lastStyle); + } } + styleUpdates && (type = type || []).push("style", styleUpdates); + newProps = type; + } + (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); } - styleUpdates && (type = type || []).push("style", styleUpdates); - newProps = type; - (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); - } } function preloadResourceAndSuspendIfNeeded(workInProgress, resource) { if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4)) @@ -6226,14 +6292,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$96 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$96 = lastTailNode), + for (var lastTailNode$99 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$99 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$96 + null === lastTailNode$99 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$96.sibling = null); + : (lastTailNode$99.sibling = null); } } function bubbleProperties(completedWork) { @@ -6243,19 +6309,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$97 = completedWork.child; null !== child$97; ) - (newChildLanes |= child$97.lanes | child$97.childLanes), - (subtreeFlags |= child$97.subtreeFlags & 31457280), - (subtreeFlags |= child$97.flags & 31457280), - (child$97.return = completedWork), - (child$97 = child$97.sibling); + for (var child$100 = completedWork.child; null !== child$100; ) + (newChildLanes |= child$100.lanes | child$100.childLanes), + (subtreeFlags |= child$100.subtreeFlags & 31457280), + (subtreeFlags |= child$100.flags & 31457280), + (child$100.return = completedWork), + (child$100 = child$100.sibling); else - for (child$97 = completedWork.child; null !== child$97; ) - (newChildLanes |= child$97.lanes | child$97.childLanes), - (subtreeFlags |= child$97.subtreeFlags), - (subtreeFlags |= child$97.flags), - (child$97.return = completedWork), - (child$97 = child$97.sibling); + for (child$100 = completedWork.child; null !== child$100; ) + (newChildLanes |= child$100.lanes | child$100.childLanes), + (subtreeFlags |= child$100.subtreeFlags), + (subtreeFlags |= child$100.flags), + (child$100.return = completedWork), + (child$100 = child$100.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -6993,8 +7059,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$127) { - captureCommitPhaseError(current, nearestMountedAncestor, error$127); + } catch (error$130) { + captureCommitPhaseError(current, nearestMountedAncestor, error$130); } else ref.current = null; } @@ -7031,7 +7097,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$186) { + } catch (e$189) { JSCompiler_temp = null; break a; } @@ -7297,11 +7363,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$129) { + } catch (error$132) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$129 + error$132 ); } } @@ -7981,8 +8047,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$142) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$142); + } catch (error$145) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$145); } } break; @@ -8151,20 +8217,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) { ) try { var domElement = finishedWork.stateNode, + type = finishedWork.type, + oldProps = current.memoizedProps, newProps = finishedWork.memoizedProps; - updateProperties( - domElement, - flags, - finishedWork.type, - current.memoizedProps, - newProps - ); + diffInCommitPhase + ? updateProperties(domElement, type, oldProps, newProps) + : updatePropertiesWithDiff( + domElement, + flags, + type, + oldProps, + newProps + ); domElement[internalPropsKey] = newProps; - } catch (error$143) { + } catch (error$146) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$143 + error$146 ); } break; @@ -8200,8 +8270,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$144) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$144); + } catch (error$147) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$147); } } if ( @@ -8213,13 +8283,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (hoistableRoot = finishedWork.type), (maybeNodes = finishedWork.updateQueue), (finishedWork.updateQueue = null), - null !== maybeNodes)) + null !== maybeNodes || diffInCommitPhase)) ) try { - updateProperties(flags, maybeNodes, hoistableRoot, current, root), + diffInCommitPhase + ? updateProperties(flags, hoistableRoot, current, root) + : updatePropertiesWithDiff( + flags, + maybeNodes, + hoistableRoot, + current, + root + ), (flags[internalPropsKey] = root); - } catch (error$147) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$147); + } catch (error$150) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$150); } break; case 6: @@ -8232,8 +8310,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$148) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$148); + } catch (error$151) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$151); } } break; @@ -8247,8 +8325,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$149) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$149); + } catch (error$152) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$152); } break; case 4: @@ -8278,8 +8356,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$151) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$151); + } catch (error$154) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$154); } current = finishedWork.updateQueue; null !== current && @@ -8292,15 +8370,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== current && safelyDetachRef(current, current.return); domElement = null !== finishedWork.memoizedState; - newProps = null !== current && null !== current.memoizedState; + type = null !== current && null !== current.memoizedState; finishedWork.mode & 1 - ? ((suspenseCallback = offscreenSubtreeIsHidden), - (retryQueue = offscreenSubtreeWasHidden), - (offscreenSubtreeIsHidden = suspenseCallback || domElement), - (offscreenSubtreeWasHidden = retryQueue || newProps), + ? ((oldProps = offscreenSubtreeIsHidden), + (newProps = offscreenSubtreeWasHidden), + (offscreenSubtreeIsHidden = oldProps || domElement), + (offscreenSubtreeWasHidden = newProps || type), recursivelyTraverseMutationEffects(root, finishedWork), - (offscreenSubtreeWasHidden = retryQueue), - (offscreenSubtreeIsHidden = suspenseCallback)) + (offscreenSubtreeWasHidden = newProps), + (offscreenSubtreeIsHidden = oldProps)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); root = finishedWork.stateNode; @@ -8315,7 +8393,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) { domElement && ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden), null === current || - newProps || + type || root || (0 !== (finishedWork.mode & 1) && recursivelyTraverseDisappearLayoutEffects(finishedWork))), @@ -8357,11 +8435,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$132) { + } catch (error$135) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$132 + error$135 ); } } else if ( @@ -8436,21 +8514,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$133 = JSCompiler_inline_result.stateNode; + var parent$136 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$133, ""), + (setTextContent(parent$136, ""), (JSCompiler_inline_result.flags &= -33)); - var before$134 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$134, parent$133); + var before$137 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$137, parent$136); break; case 3: case 4: - var parent$135 = JSCompiler_inline_result.stateNode.containerInfo, - before$136 = getHostSibling(finishedWork); + var parent$138 = JSCompiler_inline_result.stateNode.containerInfo, + before$139 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$136, - parent$135 + before$139, + parent$138 ); break; default: @@ -8920,9 +8998,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$161 = finishedWork.stateNode; + var instance$164 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$161._visibility & 4 + ? instance$164._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8935,7 +9013,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$161._visibility |= 4), + : ((instance$164._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8943,7 +9021,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$161._visibility |= 4), + : ((instance$164._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8956,7 +9034,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$161 + instance$164 ); break; case 24: @@ -9311,13 +9389,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { isFlushingWork = !0; do { var didPerformSomeWork = !1; - for (var root$169 = firstScheduledRoot; null !== root$169; ) { + for (var root$172 = firstScheduledRoot; null !== root$172; ) { if ( - (!onlyLegacy || 0 === root$169.tag) && + (!onlyLegacy || 0 === root$172.tag) && 0 !== (getNextLanes( - root$169, - root$169 === workInProgressRoot$jscomp$0 + root$172, + root$172 === workInProgressRoot$jscomp$0 ? workInProgressRootRenderLanes$jscomp$0 : 0 ) & @@ -9325,7 +9403,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { ) try { didPerformSomeWork = !0; - var root = root$169; + var root = root$172; if (0 !== (executionContext & 6)) throw Error(formatProdErrorMessage(327)); flushPassiveEffects(); @@ -9368,7 +9446,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { } catch (error) { null === errors ? (errors = [error]) : errors.push(error); } - root$169 = root$169.next; + root$172 = root$172.next; } } while (didPerformSomeWork); isFlushingWork = !1; @@ -9694,16 +9772,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) { exitStatus = renderRootSync(root, lanes); if (2 === exitStatus) { errorRetryLanes = lanes; - var errorRetryLanes$172 = getLanesToRetrySynchronouslyOnError( + var errorRetryLanes$175 = getLanesToRetrySynchronouslyOnError( root, errorRetryLanes ); - 0 !== errorRetryLanes$172 && - ((lanes = errorRetryLanes$172), + 0 !== errorRetryLanes$175 && + ((lanes = errorRetryLanes$175), (exitStatus = recoverFromConcurrentError( root, errorRetryLanes, - errorRetryLanes$172 + errorRetryLanes$175 ))); } if (1 === exitStatus) @@ -9764,14 +9842,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) { if ((lanes & 8388480) === lanes) break; exitStatus = lanes; errorRetryLanes = root.eventTimes; - for (errorRetryLanes$172 = -1; 0 < exitStatus; ) { + for (errorRetryLanes$175 = -1; 0 < exitStatus; ) { var index$2 = 31 - clz32(exitStatus), lane = 1 << index$2; index$2 = errorRetryLanes[index$2]; - index$2 > errorRetryLanes$172 && (errorRetryLanes$172 = index$2); + index$2 > errorRetryLanes$175 && (errorRetryLanes$175 = index$2); exitStatus &= ~lane; } - exitStatus = errorRetryLanes$172; + exitStatus = errorRetryLanes$175; exitStatus = now() - exitStatus; exitStatus = (120 > exitStatus @@ -10103,8 +10181,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$175) { - handleThrow(root, thrownValue$175); + } catch (thrownValue$178) { + handleThrow(root, thrownValue$178); } while (1); resetContextDependencies(); @@ -10210,8 +10288,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$177) { - handleThrow(root, thrownValue$177); + } catch (thrownValue$180) { + handleThrow(root, thrownValue$180); } while (1); resetContextDependencies(); @@ -10378,10 +10456,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) { }; suspenseBoundary.updateQueue = newOffscreenQueue; } else { - var retryQueue$53 = offscreenQueue.retryQueue; - null === retryQueue$53 + var retryQueue$56 = offscreenQueue.retryQueue; + null === retryQueue$56 ? (offscreenQueue.retryQueue = new Set([wakeable])) - : retryQueue$53.add(wakeable); + : retryQueue$56.add(wakeable); } } break; @@ -10578,12 +10656,12 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$181 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$184 = commitBeforeMutationEffects( root, finishedWork ); commitMutationEffectsOnFiber(finishedWork, root); - shouldFireAfterActiveInstanceBlur$181 && + shouldFireAfterActiveInstanceBlur$184 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -10662,7 +10740,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$182 = rootWithPendingPassiveEffects, + var root$185 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -10678,7 +10756,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$182, remainingLanes); + releaseRootPooledCache(root$185, remainingLanes); } } return !1; @@ -11981,12 +12059,12 @@ function getPublicRootInstance(container) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$184 = fiber.stateNode; - if (root$184.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$184.pendingLanes); + var root$187 = fiber.stateNode; + if (root$187.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$187.pendingLanes); 0 !== lanes && - (markRootEntangled(root$184, lanes | 2), - ensureRootIsScheduled(root$184), + (markRootEntangled(root$187, lanes | 2), + ensureRootIsScheduled(root$187), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -12558,19 +12636,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$332; + var JSCompiler_inline_result$jscomp$381; if (canUseDOM) { - var isSupported$jscomp$inline_1562 = "oninput" in document; - if (!isSupported$jscomp$inline_1562) { - var element$jscomp$inline_1563 = document.createElement("div"); - element$jscomp$inline_1563.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1562 = - "function" === typeof element$jscomp$inline_1563.oninput; + 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; } - JSCompiler_inline_result$jscomp$332 = isSupported$jscomp$inline_1562; - } else JSCompiler_inline_result$jscomp$332 = !1; + JSCompiler_inline_result$jscomp$381 = isSupported$jscomp$inline_1613; + } else JSCompiler_inline_result$jscomp$381 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$332 && + JSCompiler_inline_result$jscomp$381 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -12879,20 +12957,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1603 = 0; - i$jscomp$inline_1603 < simpleEventPluginEvents.length; - i$jscomp$inline_1603++ + var i$jscomp$inline_1654 = 0; + i$jscomp$inline_1654 < simpleEventPluginEvents.length; + i$jscomp$inline_1654++ ) { - var eventName$jscomp$inline_1604 = - simpleEventPluginEvents[i$jscomp$inline_1603], - domEventName$jscomp$inline_1605 = - eventName$jscomp$inline_1604.toLowerCase(), - capitalizedEvent$jscomp$inline_1606 = - eventName$jscomp$inline_1604[0].toUpperCase() + - eventName$jscomp$inline_1604.slice(1); + 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); registerSimpleEvent( - domEventName$jscomp$inline_1605, - "on" + capitalizedEvent$jscomp$inline_1606 + domEventName$jscomp$inline_1656, + "on" + capitalizedEvent$jscomp$inline_1657 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -13724,7 +13802,7 @@ function normalizeMarkupForTextOrAttribute(markup) { .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, ""); } function noop$1() {} -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": "string" === typeof value @@ -13749,7 +13827,7 @@ function setProp(domElement, tag, key, value, props) { setValueForKnownAttribute(domElement, key, value); break; case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "src": case "href": @@ -13965,6 +14043,9 @@ function setProp(domElement, tag, key, value, props) { value ); break; + case "is": + setValueForAttribute(domElement, "is", value); + break; case "innerText": case "textContent": if (enableCustomElementPropertySupport) break; @@ -13978,10 +14059,10 @@ function setProp(domElement, tag, key, value, props) { setValueForAttribute(domElement, key, value); } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "dangerouslySetInnerHTML": if (null != value) { @@ -14019,23 +14100,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) { if (enableCustomElementPropertySupport) a: { props = value; - if ("o" === key[0] && "n" === key[1]) { - tag = key.endsWith("Capture"); - value = key.substr(2, tag ? key.length - 9 : void 0); - var prevProps = getFiberCurrentPropsFromNode(domElement); - prevProps = null != prevProps ? prevProps[key] : null; - "function" === typeof prevProps && - domElement.removeEventListener(value, prevProps, tag); - if ("function" === typeof props) { - "function" !== typeof prevProps && - null !== prevProps && - (key in domElement - ? (domElement[key] = null) - : domElement.hasAttribute(key) && - domElement.removeAttribute(key)); - domElement.addEventListener(value, props, tag); - break a; - } + if ( + "o" === key[0] && + "n" === key[1] && + ((tag = key.endsWith("Capture")), + (value = key.substr(2, tag ? key.length - 9 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(value, prevValue, tag), + "function" === typeof props) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(value, props, tag); + break a; } key in domElement ? (domElement[key] = props) @@ -14061,7 +14144,12 @@ function setInitialProperties(domElement, tag, props) { break; case "input": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey in props) + var type = null, + value = null, + defaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in props) if (props.hasOwnProperty(propKey)) { var propValue = props[propKey]; if (null != propValue) @@ -14071,9 +14159,11 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== typeof propValue && "boolean" !== typeof propValue && - domElement.setAttribute(propKey, propValue); + ((type = propValue), + domElement.setAttribute(propKey, propValue)); break; case "checked": + checked = propValue; propValue = null != propValue ? propValue : props.defaultChecked; domElement.checked = @@ -14081,7 +14171,14 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== propValue; break; + case "defaultChecked": + defaultChecked = propValue; + break; case "value": + value = propValue; + break; + case "defaultValue": + defaultValue = propValue; break; case "children": case "dangerouslySetInnerHTML": @@ -14089,60 +14186,81 @@ function setInitialProperties(domElement, tag, props) { throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } track(domElement); - initInput(domElement, props, !1); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + !1 + ); return; case "select": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$196 in props) + var propKey = (value = defaultValue = null); + for (type in props) if ( - props.hasOwnProperty(propKey$196) && - ((propKey = props[propKey$196]), null != propKey) + props.hasOwnProperty(type) && + ((checked = props[type]), null != checked) ) - switch (propKey$196) { + switch (type) { case "value": + defaultValue = checked; + break; + case "defaultValue": + value = checked; break; + case "multiple": + propKey = checked; default: - setProp(domElement, tag, propKey$196, propKey, props); + setProp(domElement, tag, type, checked, props, null); } - domElement.multiple = !!props.multiple; - tag = props.value; + tag = defaultValue; + props = value; + domElement.multiple = !!propKey; null != tag - ? updateOptions(domElement, !!props.multiple, tag, !1) - : null != props.defaultValue && - updateOptions(domElement, !!props.multiple, props.defaultValue, !0); + ? updateOptions(domElement, !!propKey, tag, !1) + : null != props && updateOptions(domElement, !!propKey, props, !0); return; case "textarea": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$198 in props) + defaultValue = type = propKey = null; + for (value in props) if ( - props.hasOwnProperty(propKey$198) && - ((propKey = props[propKey$198]), null != propKey) + props.hasOwnProperty(value) && + ((checked = props[value]), null != checked) ) - switch (propKey$198) { + switch (value) { case "value": + propKey = checked; + break; + case "defaultValue": + type = checked; break; case "children": + defaultValue = checked; break; case "dangerouslySetInnerHTML": - if (null != propKey) throw Error(formatProdErrorMessage(91)); + if (null != checked) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey$198, propKey, props); + setProp(domElement, tag, value, checked, props); } track(domElement); - initTextarea(domElement, props); + initTextarea(domElement, propKey, type, defaultValue); return; case "option": - for (var propKey$200 in props) + for (checked in props) if ( - props.hasOwnProperty(propKey$200) && - ((propKey = props[propKey$200]), null != propKey) + props.hasOwnProperty(checked) && + ((propKey = props[checked]), null != propKey) ) - switch (propKey$200) { + switch (checked) { case "selected": domElement.selected = propKey && @@ -14150,10 +14268,8 @@ function setInitialProperties(domElement, tag, props) { "symbol" !== typeof propKey; break; default: - setProp(domElement, tag, propKey$200, propKey, props); + setProp(domElement, tag, checked, propKey, props); } - null != props.value && - domElement.setAttribute("value", "" + getToStringValue(props.value)); return; case "dialog": listenToNonDelegatedEvent("cancel", domElement); @@ -14192,41 +14308,389 @@ function setInitialProperties(domElement, tag, props) { case "track": case "wbr": case "menuitem": - for (var propKey$202 in props) + for (defaultChecked in props) if ( - props.hasOwnProperty(propKey$202) && - ((propKey = props[propKey$202]), null != propKey) + props.hasOwnProperty(defaultChecked) && + ((propKey = props[defaultChecked]), null != propKey) ) - switch (propKey$202) { + switch (defaultChecked) { case "children": case "dangerouslySetInnerHTML": throw Error(formatProdErrorMessage(137, tag)); default: - setProp(domElement, tag, propKey$202, propKey, props); + setProp(domElement, tag, defaultChecked, propKey, props, null); } return; default: if (isCustomElement(tag)) { - for (var propKey$204 in props) - props.hasOwnProperty(propKey$204) && - ((propKey = props[propKey$204]), + for (propValue in props) + props.hasOwnProperty(propValue) && + ((propKey = props[propValue]), null != propKey && setPropOnCustomElement( domElement, tag, - propKey$204, + propValue, propKey, - props + props, + null )); return; } } - for (propValue in props) - props.hasOwnProperty(propValue) && - ((propKey = props[propValue]), - null != propKey && setProp(domElement, tag, propValue, propKey, props)); + for (defaultValue in props) + props.hasOwnProperty(defaultValue) && + ((propKey = props[defaultValue]), + null != propKey && + setProp(domElement, tag, defaultValue, propKey, props, null)); } -function updateProperties( +function updateProperties(domElement, tag, lastProps, nextProps) { + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": + break; + case "input": + var name = null, + type = null, + value = null, + defaultValue = null, + lastDefaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in lastProps) { + var lastProp = lastProps[propKey]; + if (lastProps.hasOwnProperty(propKey) && null != lastProp) + switch (propKey) { + case "checked": + nextProps.hasOwnProperty(propKey) || + ((lastProp = nextProps.defaultChecked), + (domElement.checked = + !!lastProp && + "function" !== typeof lastProp && + "symbol" !== lastProp)); + break; + case "value": + break; + case "defaultValue": + lastDefaultValue = lastProp; + default: + nextProps.hasOwnProperty(propKey) || + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + for (var propKey$215 in nextProps) { + var propKey = nextProps[propKey$215]; + lastProp = lastProps[propKey$215]; + if ( + nextProps.hasOwnProperty(propKey$215) && + (null != propKey || null != lastProp) + ) + switch (propKey$215) { + case "type": + type = propKey; + propKey !== lastProp && + (null != propKey && + "function" !== typeof propKey && + "symbol" !== typeof propKey && + "boolean" !== typeof propKey + ? domElement.setAttribute(propKey$215, propKey) + : domElement.removeAttribute(propKey$215)); + break; + case "name": + name = propKey; + break; + case "checked": + checked = propKey; + propKey !== lastProp && + ((propKey = + null != propKey ? propKey : nextProps.defaultChecked), + (domElement.checked = + !!propKey && + "function" !== typeof propKey && + "symbol" !== propKey)); + break; + case "defaultChecked": + defaultChecked = propKey; + break; + case "value": + value = propKey; + break; + case "defaultValue": + defaultValue = propKey; + break; + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + propKey !== lastProp && + setProp( + domElement, + tag, + propKey$215, + propKey, + nextProps, + lastProp + ); + } + } + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + case "select": + defaultValue = value = propKey = propKey$215 = null; + for (type in lastProps) + if ( + ((lastDefaultValue = lastProps[type]), + lastProps.hasOwnProperty(type) && null != lastDefaultValue) + ) + switch (type) { + case "value": + break; + case "multiple": + defaultValue = lastDefaultValue; + default: + nextProps.hasOwnProperty(type) || + setProp( + domElement, + tag, + type, + null, + nextProps, + lastDefaultValue + ); + } + for (name in nextProps) + if ( + ((type = nextProps[name]), + (lastDefaultValue = lastProps[name]), + nextProps.hasOwnProperty(name) && + (null != type || null != lastDefaultValue)) + ) + switch (name) { + case "value": + propKey$215 = type; + break; + case "defaultValue": + propKey = type; + break; + case "multiple": + value = type; + default: + type !== lastDefaultValue && + setProp( + domElement, + tag, + name, + type, + nextProps, + lastDefaultValue + ); + } + updateSelect(domElement, propKey$215, propKey, value, defaultValue); + return; + case "textarea": + propKey = propKey$215 = null; + for (defaultValue in lastProps) + if ( + ((name = lastProps[defaultValue]), + lastProps.hasOwnProperty(defaultValue) && + null != name && + !nextProps.hasOwnProperty(defaultValue)) + ) + switch (defaultValue) { + case "value": + break; + case "children": + break; + default: + setProp(domElement, tag, defaultValue, null, nextProps, name); + } + for (value in nextProps) + if ( + ((name = nextProps[value]), + (type = lastProps[value]), + nextProps.hasOwnProperty(value) && (null != name || null != type)) + ) + switch (value) { + case "value": + propKey$215 = name; + break; + case "defaultValue": + propKey = name; + break; + case "children": + break; + case "dangerouslySetInnerHTML": + if (null != name) throw Error(formatProdErrorMessage(91)); + break; + default: + name !== type && + setProp(domElement, tag, value, name, nextProps, type); + } + updateTextarea(domElement, propKey$215, propKey); + return; + case "option": + for (var propKey$233 in lastProps) + if ( + ((propKey$215 = lastProps[propKey$233]), + lastProps.hasOwnProperty(propKey$233) && + null != propKey$215 && + !nextProps.hasOwnProperty(propKey$233)) + ) + switch (propKey$233) { + case "selected": + domElement.selected = !1; + break; + default: + setProp( + domElement, + tag, + propKey$233, + null, + nextProps, + propKey$215 + ); + } + for (lastDefaultValue in nextProps) + if ( + ((propKey$215 = nextProps[lastDefaultValue]), + (propKey = lastProps[lastDefaultValue]), + nextProps.hasOwnProperty(lastDefaultValue) && + propKey$215 !== propKey && + (null != propKey$215 || null != propKey)) + ) + switch (lastDefaultValue) { + case "selected": + domElement.selected = + propKey$215 && + "function" !== typeof propKey$215 && + "symbol" !== typeof propKey$215; + break; + default: + setProp( + domElement, + tag, + lastDefaultValue, + propKey$215, + nextProps, + propKey + ); + } + return; + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": + for (var propKey$238 in lastProps) + (propKey$215 = lastProps[propKey$238]), + lastProps.hasOwnProperty(propKey$238) && + null != propKey$215 && + !nextProps.hasOwnProperty(propKey$238) && + setProp(domElement, tag, propKey$238, null, nextProps, propKey$215); + for (checked in nextProps) + if ( + ((propKey$215 = nextProps[checked]), + (propKey = lastProps[checked]), + nextProps.hasOwnProperty(checked) && + propKey$215 !== propKey && + (null != propKey$215 || null != propKey)) + ) + switch (checked) { + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey$215) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + setProp( + domElement, + tag, + checked, + propKey$215, + nextProps, + propKey + ); + } + return; + default: + if (isCustomElement(tag)) { + for (var propKey$243 in lastProps) + (propKey$215 = lastProps[propKey$243]), + lastProps.hasOwnProperty(propKey$243) && + null != propKey$215 && + !nextProps.hasOwnProperty(propKey$243) && + setPropOnCustomElement( + domElement, + tag, + propKey$243, + null, + nextProps, + propKey$215 + ); + for (defaultChecked in nextProps) + (propKey$215 = nextProps[defaultChecked]), + (propKey = lastProps[defaultChecked]), + !nextProps.hasOwnProperty(defaultChecked) || + propKey$215 === propKey || + (null == propKey$215 && null == propKey) || + setPropOnCustomElement( + domElement, + tag, + defaultChecked, + propKey$215, + nextProps, + propKey + ); + return; + } + } + for (var propKey$248 in lastProps) + (propKey$215 = lastProps[propKey$248]), + lastProps.hasOwnProperty(propKey$248) && + null != propKey$215 && + !nextProps.hasOwnProperty(propKey$248) && + setProp(domElement, tag, propKey$248, null, nextProps, propKey$215); + for (lastProp in nextProps) + (propKey$215 = nextProps[lastProp]), + (propKey = lastProps[lastProp]), + !nextProps.hasOwnProperty(lastProp) || + propKey$215 === propKey || + (null == propKey$215 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$215, nextProps, propKey); +} +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -14244,14 +14708,31 @@ function updateProperties( case "li": break; case "input": - "radio" === nextProps.type && - null != nextProps.name && - ((lastProps = nextProps.checked), - null != lastProps && (domElement.checked = lastProps)); - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) { - var propKey = updatePayload[lastProps], - propValue = updatePayload[lastProps + 1]; + var name = nextProps.name, + type = nextProps.type, + value = nextProps.value, + defaultValue = nextProps.defaultValue; + lastProps = lastProps.defaultValue; + for ( + var checked = nextProps.checked, + defaultChecked = nextProps.defaultChecked, + i = 0; + i < updatePayload.length; + i += 2 + ) { + var propKey = updatePayload[i], + propValue = updatePayload[i + 1]; switch (propKey) { + case "type": + null != propValue && + "function" !== typeof propValue && + "symbol" !== typeof propValue && + "boolean" !== typeof propValue + ? domElement.setAttribute(propKey, propValue) + : domElement.removeAttribute(propKey); + break; + case "name": + break; case "checked": propKey = null != propValue ? propValue : nextProps.defaultChecked; domElement.checked = @@ -14259,83 +14740,89 @@ function updateProperties( "function" !== typeof propKey && "symbol" !== propKey; break; + case "defaultChecked": + break; case "value": break; + case "defaultValue": + break; case "children": case "dangerouslySetInnerHTML": if (null != propValue) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } - updateInput(domElement, nextProps); + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastProps, + checked, + defaultChecked, + type + ); return; case "select": - for (propKey = 0; propKey < updatePayload.length; propKey += 2) { - propValue = updatePayload[propKey]; - var propValue$210 = updatePayload[propKey + 1]; - switch (propValue) { + name = nextProps.value; + type = nextProps.defaultValue; + value = nextProps.multiple; + defaultValue = lastProps.multiple; + for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + switch ( + ((checked = updatePayload[lastProps]), + (defaultChecked = updatePayload[lastProps + 1]), + checked) + ) { case "value": break; default: - setProp(domElement, tag, propValue, propValue$210, nextProps); + setProp(domElement, tag, checked, defaultChecked, nextProps, null); } - } - updatePayload = !!lastProps.multiple; - tag = nextProps.value; - null != tag - ? updateOptions(domElement, !!nextProps.multiple, tag, !1) - : updatePayload !== !!nextProps.multiple && - (null != nextProps.defaultValue - ? updateOptions( - domElement, - !!nextProps.multiple, - nextProps.defaultValue, - !0 - ) - : updateOptions( - domElement, - !!nextProps.multiple, - nextProps.multiple ? [] : "", - !1 - )); + updateSelect(domElement, name, type, value, defaultValue); return; case "textarea": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + name = nextProps.value; + type = nextProps.defaultValue; + for (value = 0; value < updatePayload.length; value += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((defaultValue = updatePayload[value]), + (lastProps = updatePayload[value + 1]), + defaultValue) ) { case "value": break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propValue) throw Error(formatProdErrorMessage(91)); + if (null != lastProps) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, defaultValue, lastProps, nextProps, null); } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, name, type); return; case "option": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "selected": domElement.selected = - propValue && - "function" !== typeof propValue && - "symbol" !== typeof propValue; + value && "function" !== typeof value && "symbol" !== typeof value; break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; case "img": @@ -14353,41 +14840,42 @@ function updateProperties( case "track": case "wbr": case "menuitem": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "children": case "dangerouslySetInnerHTML": - if (null != propValue) - throw Error(formatProdErrorMessage(137, tag)); + if (null != value) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; default: if (isCustomElement(tag)) { - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setPropOnCustomElement( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); return; } } - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setProp( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); } var Dispatcher$1 = Internals.Dispatcher, @@ -14718,14 +15206,14 @@ function preinit$1(href, options) { switch (as) { case "style": as = getResourcesFromRoot(resourceRoot).hoistableStyles; - var key$227 = getStyleKey(href), + var key$276 = getStyleKey(href), precedence = options.precedence || "default", - resource = as.get(key$227); + resource = as.get(key$276); if (resource) break; var state = { loading: 0, preload: null }; if ( (resource = resourceRoot.querySelector( - getStylesheetSelectorFromKey(key$227) + getStylesheetSelectorFromKey(key$276) )) ) state.loading = 1; @@ -14736,7 +15224,7 @@ function preinit$1(href, options) { "data-precedence": precedence, crossOrigin: options.crossOrigin }; - (options = preloadPropsMap.get(key$227)) && + (options = preloadPropsMap.get(key$276)) && adoptPreloadPropsForStylesheet(href, options); var link = (resource = ( resourceRoot.ownerDocument || resourceRoot @@ -14762,15 +15250,15 @@ function preinit$1(href, options) { count: 1, state: state }; - as.set(key$227, resource); + as.set(key$276, resource); break; case "script": (as = getResourcesFromRoot(resourceRoot).hoistableScripts), - (key$227 = getScriptKey(href)), - (precedence = as.get(key$227)), + (key$276 = getScriptKey(href)), + (precedence = as.get(key$276)), precedence || ((precedence = resourceRoot.querySelector( - "script[async]" + key$227 + "script[async]" + key$276 )), precedence || ((href = { @@ -14779,7 +15267,7 @@ function preinit$1(href, options) { crossOrigin: options.crossOrigin, integrity: options.integrity }), - (options = preloadPropsMap.get(key$227)) && + (options = preloadPropsMap.get(key$276)) && adoptPreloadPropsForScript(href, options), (options = resourceRoot.ownerDocument || resourceRoot), (precedence = options.createElement("script")), @@ -14792,13 +15280,13 @@ function preinit$1(href, options) { count: 1, state: null }), - as.set(key$227, precedence)); + as.set(key$276, precedence)); } else if ("style" === as || "script" === as) if ((resourceRoot = getDocumentForPreloads())) { - key$227 = escapeSelectorAttributeValueInsideDoubleQuotes(href); - precedence = key$227 = - 'link[rel="preload"][as="' + as + '"][href="' + key$227 + '"]'; + key$276 = escapeSelectorAttributeValueInsideDoubleQuotes(href); + precedence = key$276 = + 'link[rel="preload"][as="' + as + '"][href="' + key$276 + '"]'; switch (as) { case "style": precedence = getStyleKey(href); @@ -14815,7 +15303,7 @@ function preinit$1(href, options) { integrity: options.integrity }), preloadPropsMap.set(precedence, href), - null === resourceRoot.querySelector(key$227) && + null === resourceRoot.querySelector(key$276) && ((options = resourceRoot.createElement("link")), setInitialProperties(options, "link", href), markNodeAsHoistable(options), @@ -14848,17 +15336,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$236 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$237 = styles$236.get(type); - resource$237 || + var styles$285 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$286 = styles$285.get(type); + resource$286 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$237 = { + (resource$286 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$236.set(type, resource$237), + styles$285.set(type, resource$286), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -14873,9 +15361,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$237.state + resource$286.state )); - return resource$237; + return resource$286; } return null; case "script": @@ -14947,36 +15435,36 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = key); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$242 = hoistableRoot.querySelector( + var instance$291 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$242) + if (instance$291) return ( - (resource.instance = instance$242), - markNodeAsHoistable(instance$242), - instance$242 + (resource.instance = instance$291), + markNodeAsHoistable(instance$291), + instance$291 ); key = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(key, styleProps); - instance$242 = ( + instance$291 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$242); - var linkInstance = instance$242; + markNodeAsHoistable(instance$291); + var linkInstance = instance$291; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$242, "link", key); + setInitialProperties(instance$291, "link", key); resource.state.loading |= 4; - insertStylesheet(instance$242, props.precedence, hoistableRoot); - return (resource.instance = instance$242); + insertStylesheet(instance$291, props.precedence, hoistableRoot); + return (resource.instance = instance$291); case "script": - instance$242 = getScriptKey(props.src); + instance$291 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - "script[async]" + instance$242 + "script[async]" + instance$291 )) ) return ( @@ -14985,7 +15473,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); key = props; - if ((styleProps = preloadPropsMap.get(instance$242))) + if ((styleProps = preloadPropsMap.get(instance$291))) (key = assign({}, props)), adoptPreloadPropsForScript(key, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -15936,11 +16424,11 @@ function legacyCreateRootFromDOMContainer( if ("function" === typeof callback) { var originalCallback = callback; callback = function () { - var instance = getPublicRootInstance(root$262); + var instance = getPublicRootInstance(root$311); originalCallback.call(instance); }; } - var root$262 = createHydrationContainer( + var root$311 = createHydrationContainer( initialChildren, callback, container, @@ -15952,23 +16440,23 @@ function legacyCreateRootFromDOMContainer( noopOnRecoverableError, null ); - container._reactRootContainer = root$262; - container[internalContainerInstanceKey] = root$262.current; + container._reactRootContainer = root$311; + container[internalContainerInstanceKey] = root$311.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(); - return root$262; + return root$311; } clearContainer(container); if ("function" === typeof callback) { - var originalCallback$263 = callback; + var originalCallback$312 = callback; callback = function () { - var instance = getPublicRootInstance(root$264); - originalCallback$263.call(instance); + var instance = getPublicRootInstance(root$313); + originalCallback$312.call(instance); }; } - var root$264 = createFiberRoot( + var root$313 = createFiberRoot( container, 0, !1, @@ -15980,15 +16468,15 @@ function legacyCreateRootFromDOMContainer( noopOnRecoverableError, null ); - container._reactRootContainer = root$264; - container[internalContainerInstanceKey] = root$264.current; + container._reactRootContainer = root$313; + container[internalContainerInstanceKey] = root$313.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(function () { - updateContainer(initialChildren, root$264, parentComponent, callback); + updateContainer(initialChildren, root$313, parentComponent, callback); }); - return root$264; + return root$313; } function legacyRenderSubtreeIntoContainer( parentComponent, @@ -16047,17 +16535,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1822 = { +var devToolsConfig$jscomp$inline_1856 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-42d0ecd9", + version: "18.3.0-www-classic-b6733565", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2191 = { - bundleType: devToolsConfig$jscomp$inline_1822.bundleType, - version: devToolsConfig$jscomp$inline_1822.version, - rendererPackageName: devToolsConfig$jscomp$inline_1822.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1822.rendererConfig, +var internals$jscomp$inline_2231 = { + bundleType: devToolsConfig$jscomp$inline_1856.bundleType, + version: devToolsConfig$jscomp$inline_1856.version, + rendererPackageName: devToolsConfig$jscomp$inline_1856.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1856.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16073,26 +16561,26 @@ var internals$jscomp$inline_2191 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1822.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1856.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-42d0ecd9" + reconcilerVersion: "18.3.0-www-classic-b6733565" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2192 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2232 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2192.isDisabled && - hook$jscomp$inline_2192.supportsFiber + !hook$jscomp$inline_2232.isDisabled && + hook$jscomp$inline_2232.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2192.inject( - internals$jscomp$inline_2191 + (rendererID = hook$jscomp$inline_2232.inject( + internals$jscomp$inline_2231 )), - (injectedHook = hook$jscomp$inline_2192); + (injectedHook = hook$jscomp$inline_2232); } catch (err) {} } assign(Internals, { @@ -16320,4 +16808,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-42d0ecd9"; +exports.version = "18.3.0-www-classic-b6733565"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 109b1ffd863e8..5c7e4230bdac7 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -112,6 +112,7 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"), dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase, scheduleCallback$3 = Scheduler.unstable_scheduleCallback, cancelCallback$1 = Scheduler.unstable_cancelCallback, shouldYield = Scheduler.unstable_shouldYield, @@ -822,78 +823,85 @@ function getActiveElement(doc) { return doc.body; } } -function updateInput(element, props) { - var value = getToStringValue(props.value), - type = props.type; - disableInputAttributeSyncing - ? null != props.defaultValue - ? setDefaultValue( - element, - props.type, - getToStringValue(props.defaultValue) - ) - : element.removeAttribute("value") - : null != props.value - ? setDefaultValue(element, props.type, value) - : null != props.defaultValue - ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue)) - : element.removeAttribute("value"); - disableInputAttributeSyncing - ? null == props.defaultChecked - ? element.removeAttribute("checked") - : (element.defaultChecked = !!props.defaultChecked) - : null == props.checked && - null != props.defaultChecked && - (element.defaultChecked = !!props.defaultChecked); - props = props.checked; - null != props && (element.checked = props); +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { if (null != value) if ("number" === type) { if ((0 === value && "" === element.value) || element.value != value) - element.value = "" + value; - } else element.value !== "" + value && (element.value = "" + value); - else - ("submit" !== type && "reset" !== type) || element.removeAttribute("value"); -} -function initInput(element, props, isHydrating) { - if (null != props.value || null != props.defaultValue) { - var type = props.type; + element.value = "" + getToStringValue(value); + } else + element.value !== "" + getToStringValue(value) && + (element.value = "" + getToStringValue(value)); + else if ("submit" === type || "reset" === type) { + element.removeAttribute("value"); + return; + } + disableInputAttributeSyncing + ? null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value") + : null != value + ? setDefaultValue(element, type, getToStringValue(value)) + : null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value"); + disableInputAttributeSyncing + ? null == defaultChecked + ? element.removeAttribute("checked") + : (element.defaultChecked = !!defaultChecked) + : null == checked && + null != defaultChecked && + (element.defaultChecked = !!defaultChecked); + null != checked && + element.checked !== !!checked && + (element.checked = checked); +} +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { + if (null != value || null != defaultValue) { if ( (type = "submit" === type || "reset" === type) && - (void 0 === props.value || null === props.value) + (void 0 === value || null === value) ) return; - var defaultValue = - null != props.defaultValue - ? "" + getToStringValue(props.defaultValue) - : "", + var defaultValueStr = + null != defaultValue ? "" + getToStringValue(defaultValue) : "", initialValue = - null != props.value ? "" + getToStringValue(props.value) : defaultValue; - if (!isHydrating) - if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); - null == value || - (!type && value === element.value) || - (element.value = "" + value); - } else initialValue !== element.value && (element.value = initialValue); + null != value ? "" + getToStringValue(value) : defaultValueStr; + isHydrating || + (disableInputAttributeSyncing + ? null == value || + (!type && "" + getToStringValue(value) === element.value) || + (element.value = "" + getToStringValue(value)) + : initialValue !== element.value && (element.value = initialValue)); disableInputAttributeSyncing - ? null != props.defaultValue && (element.defaultValue = defaultValue) + ? null != defaultValue && (element.defaultValue = defaultValueStr) : (element.defaultValue = initialValue); } - type = element.name; - "" !== type && (element.name = ""); - defaultValue = null != props.checked ? props.checked : props.defaultChecked; - defaultValue = - "function" !== typeof defaultValue && - "symbol" !== typeof defaultValue && - !!defaultValue; - isHydrating || (element.checked = !!defaultValue); + value = element.name; + "" !== value && (element.name = ""); + checked = null != checked ? checked : defaultChecked; + checked = + "function" !== typeof checked && "symbol" !== typeof checked && !!checked; + isHydrating || (element.checked = !!checked); disableInputAttributeSyncing - ? null != props.defaultChecked && - ((element.defaultChecked = !element.defaultChecked), - (element.defaultChecked = !!props.defaultChecked)) - : (element.defaultChecked = !!defaultValue); - "" !== type && (element.name = type); + ? null != defaultChecked && (element.defaultChecked = !!defaultChecked) + : (element.defaultChecked = !!checked); + "" !== value && (element.name = value); } function setDefaultValue(node, type, value) { ("number" === type && getActiveElement(node.ownerDocument) === node) || @@ -925,30 +933,37 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) { null !== multiple && (multiple.selected = !0); } } -function updateTextarea(element, props) { - var value = getToStringValue(props.value), - defaultValue = getToStringValue(props.defaultValue); - element.defaultValue = null != defaultValue ? "" + defaultValue : ""; - null != value && - ((value = "" + value), +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { + null != value + ? updateOptions(element, !!multiple, value, !1) + : !!wasMultiple !== !!multiple && + (null != defaultValue + ? updateOptions(element, !!multiple, defaultValue, !0) + : updateOptions(element, !!multiple, multiple ? [] : "", !1)); +} +function updateTextarea(element, value, defaultValue) { + if ( + null != value && + ((value = "" + getToStringValue(value)), value !== element.value && (element.value = value), - null == props.defaultValue && - element.defaultValue !== value && - (element.defaultValue = value)); -} -function initTextarea(element, props) { - var initialValue = props.value; - null == initialValue && - ((props = props.defaultValue), - null == props && (props = ""), - (initialValue = props)); - props = getToStringValue(initialValue); - element.defaultValue = props; - initialValue = element.textContent; - initialValue === props && - "" !== initialValue && - null !== initialValue && - (element.value = initialValue); + null == defaultValue) + ) { + element.defaultValue !== value && (element.defaultValue = value); + return; + } + element.defaultValue = + null != defaultValue ? "" + getToStringValue(defaultValue) : ""; +} +function initTextarea(element, value, defaultValue) { + null == value && + (null == defaultValue && (defaultValue = ""), (value = defaultValue)); + defaultValue = getToStringValue(value); + element.defaultValue = defaultValue; + value = element.textContent; + value === defaultValue && + "" !== value && + null !== value && + (element.value = value); } function getChildNamespace(parentNamespace, type) { if ( @@ -1014,30 +1029,44 @@ var unitlessNumbers = new Set( " " ) ); -function setValueForStyles(node, styles) { +function setValueForStyle(style, styleName, value) { + var isCustomProperty = 0 === styleName.indexOf("--"); + null == value || "boolean" === typeof value || "" === value + ? isCustomProperty + ? style.setProperty(styleName, "") + : "float" === styleName + ? (style.cssFloat = "") + : (style[styleName] = "") + : isCustomProperty + ? style.setProperty(styleName, value) + : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName) + ? "float" === styleName + ? (style.cssFloat = value) + : (style[styleName] = ("" + value).trim()) + : (style[styleName] = value + "px"); +} +function setValueForStyles(node, styles, prevStyles) { if (null != styles && "object" !== typeof styles) throw Error(formatProdErrorMessage(62)); node = node.style; - for (var styleName in styles) - if (styles.hasOwnProperty(styleName)) { - var value = styles[styleName], - isCustomProperty = 0 === styleName.indexOf("--"); - null == value || "boolean" === typeof value || "" === value - ? isCustomProperty + if (diffInCommitPhase && null != prevStyles) { + for (var styleName in prevStyles) + !prevStyles.hasOwnProperty(styleName) || + (null != styles && styles.hasOwnProperty(styleName)) || + (0 === styleName.indexOf("--") ? node.setProperty(styleName, "") : "float" === styleName ? (node.cssFloat = "") - : (node[styleName] = "") - : isCustomProperty - ? node.setProperty(styleName, value) - : "number" !== typeof value || - 0 === value || - unitlessNumbers.has(styleName) - ? "float" === styleName - ? (node.cssFloat = value) - : (node[styleName] = ("" + value).trim()) - : (node[styleName] = value + "px"); - } + : (node[styleName] = "")); + for (var styleName$15 in styles) + (styleName = styles[styleName$15]), + styles.hasOwnProperty(styleName$15) && + prevStyles[styleName$15] !== styleName && + setValueForStyle(node, styleName$15, styleName); + } else + for (var styleName$16 in styles) + styles.hasOwnProperty(styleName$16) && + setValueForStyle(node, styleName$16, styles[styleName$16]); } function isCustomElement(tagName) { if (-1 === tagName.indexOf("-")) return !1; @@ -1157,7 +1186,15 @@ function restoreStateOfTarget(target) { var props = getFiberCurrentPropsFromNode(target); a: switch (((target = internalInstance.stateNode), internalInstance.type)) { case "input": - updateInput(target, props); + updateInput( + target, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); internalInstance = props.name; if ("radio" === props.type && null != internalInstance) { for (props = target; props.parentNode; ) props = props.parentNode; @@ -1176,13 +1213,21 @@ function restoreStateOfTarget(target) { var otherProps = getFiberCurrentPropsFromNode(otherNode); if (!otherProps) throw Error(formatProdErrorMessage(90)); updateValueIfChanged(otherNode); - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } break a; case "textarea": - updateTextarea(target, props); + updateTextarea(target, props.value, props.defaultValue); break a; case "select": (internalInstance = props.value), @@ -1266,36 +1311,36 @@ function findCurrentFiberUsingSlowPath(fiber) { } if (a.return !== b.return) (a = parentA), (b = parentB); else { - for (var didFindChild = !1, child$15 = parentA.child; child$15; ) { - if (child$15 === a) { + for (var didFindChild = !1, child$18 = parentA.child; child$18; ) { + if (child$18 === a) { didFindChild = !0; a = parentA; b = parentB; break; } - if (child$15 === b) { + if (child$18 === b) { didFindChild = !0; b = parentA; a = parentB; break; } - child$15 = child$15.sibling; + child$18 = child$18.sibling; } if (!didFindChild) { - for (child$15 = parentB.child; child$15; ) { - if (child$15 === a) { + for (child$18 = parentB.child; child$18; ) { + if (child$18 === a) { didFindChild = !0; a = parentB; b = parentA; break; } - if (child$15 === b) { + if (child$18 === b) { didFindChild = !0; b = parentB; a = parentA; break; } - child$15 = child$15.sibling; + child$18 = child$18.sibling; } if (!didFindChild) throw Error(formatProdErrorMessage(189)); } @@ -1522,8 +1567,8 @@ function prepareToHydrateHostInstance(fiber) { break; case "video": case "audio": - for (type = 0; type < mediaEventTypes.length; type++) - listenToNonDelegatedEvent(mediaEventTypes[type], instance); + for (var i = 0; i < mediaEventTypes.length; i++) + listenToNonDelegatedEvent(mediaEventTypes[i], instance); break; case "source": listenToNonDelegatedEvent("error", instance); @@ -1540,7 +1585,15 @@ function prepareToHydrateHostInstance(fiber) { case "input": listenToNonDelegatedEvent("invalid", instance); track(instance); - initInput(instance, props, !0); + initInput( + instance, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + !0 + ); break; case "select": listenToNonDelegatedEvent("invalid", instance); @@ -1548,22 +1601,30 @@ function prepareToHydrateHostInstance(fiber) { case "textarea": listenToNonDelegatedEvent("invalid", instance), track(instance), - initTextarea(instance, props); - } - var updatePayload = null; - type = props.children; - ("string" !== typeof type && "number" !== typeof type) || - instance.textContent === "" + type || - (!0 !== props.suppressHydrationWarning && - ((updatePayload = instance.textContent), - normalizeMarkupForTextOrAttribute(type), - normalizeMarkupForTextOrAttribute(updatePayload)), - (updatePayload = ["children", type])); + initTextarea(instance, props.value, props.defaultValue); + } + i = null; + var children = props.children; + if ( + ("string" === typeof children || "number" === typeof children) && + instance.textContent !== "" + children + ) { + if (!0 !== props.suppressHydrationWarning) { + var serverText = instance.textContent; + normalizeMarkupForTextOrAttribute(children); + normalizeMarkupForTextOrAttribute(serverText); + } + diffInCommitPhase + ? "body" !== type && (instance.textContent = children) + : (i = ["children", children]); + } null != props.onScroll && listenToNonDelegatedEvent("scroll", instance); null != props.onClick && (instance.onclick = noop$1); - instance = updatePayload; - fiber.updateQueue = instance; - return null !== instance ? !0 : !1; + instance = i; + return diffInCommitPhase || + ((fiber.updateQueue = instance), null === instance) + ? !1 + : !0; } function popToNextHostParent(fiber) { for (hydrationParentFiber = fiber.return; hydrationParentFiber; ) @@ -3038,10 +3099,10 @@ createFunctionComponentUpdateQueue = function () { function use(usable) { if (null !== usable && "object" === typeof usable) { if ("function" === typeof usable.then) { - var index$41 = thenableIndexCounter; + var index$44 = thenableIndexCounter; thenableIndexCounter += 1; null === thenableState && (thenableState = []); - usable = trackUsedThenable(thenableState, usable, index$41); + usable = trackUsedThenable(thenableState, usable, index$44); null === currentlyRenderingFiber$1.alternate && (null === workInProgressHook ? null === currentlyRenderingFiber$1.memoizedState @@ -3529,16 +3590,16 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$47 = enqueueUpdate(provider, fiber, lane); - if (null !== root$47) { + var root$50 = enqueueUpdate(provider, fiber, lane); + if (null !== root$50) { var eventTime = requestEventTime(); - scheduleUpdateOnFiber(root$47, provider, lane, eventTime); - entangleTransitions(root$47, provider, lane); + scheduleUpdateOnFiber(root$50, provider, lane, eventTime); + entangleTransitions(root$50, provider, lane); } provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$47 && + null !== root$50 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -3745,15 +3806,15 @@ var HooksDispatcherOnMount = { getServerSnapshot = getServerSnapshot(); } else { getServerSnapshot = getSnapshot(); - var root$43 = workInProgressRoot; - if (null === root$43) throw Error(formatProdErrorMessage(349)); - includesBlockingLane(root$43, renderLanes$1) || + var root$46 = workInProgressRoot; + if (null === root$46) throw Error(formatProdErrorMessage(349)); + includesBlockingLane(root$46, renderLanes$1) || pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot); } hook.memoizedState = getServerSnapshot; - root$43 = { value: getServerSnapshot, getSnapshot: getSnapshot }; - hook.queue = root$43; - mountEffect(subscribeToStore.bind(null, fiber, root$43, subscribe), [ + root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot }; + hook.queue = root$46; + mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [ subscribe ]); fiber.flags |= 2048; @@ -3762,7 +3823,7 @@ var HooksDispatcherOnMount = { updateStoreInstance.bind( null, fiber, - root$43, + root$46, getServerSnapshot, getSnapshot ), @@ -4246,10 +4307,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$58 = workInProgress.stateNode; + root$61 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$58.incompleteTransitions.has(transition)) { + if (!root$61.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -4257,11 +4318,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$58.incompleteTransitions.set(transition, markerInstance); + root$61.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$58.incompleteTransitions.forEach(function (markerInstance) { + root$61.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -4926,14 +4987,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { } JSCompiler_temp = current.memoizedState; if (null !== JSCompiler_temp) { - var dehydrated$65 = JSCompiler_temp.dehydrated; - if (null !== dehydrated$65) + var dehydrated$68 = JSCompiler_temp.dehydrated; + if (null !== dehydrated$68) return updateDehydratedSuspenseComponent( current, workInProgress, didSuspend, nextProps, - dehydrated$65, + dehydrated$68, JSCompiler_temp, renderLanes ); @@ -4943,7 +5004,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { showFallback = nextProps.fallback; didSuspend = workInProgress.mode; JSCompiler_temp = current.child; - dehydrated$65 = JSCompiler_temp.sibling; + dehydrated$68 = JSCompiler_temp.sibling; var primaryChildProps = { mode: "hidden", children: nextProps.children }; 0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp ? ((nextProps = workInProgress.child), @@ -4952,8 +5013,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { (workInProgress.deletions = null)) : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)), (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280)); - null !== dehydrated$65 - ? (showFallback = createWorkInProgress(dehydrated$65, showFallback)) + null !== dehydrated$68 + ? (showFallback = createWorkInProgress(dehydrated$68, showFallback)) : ((showFallback = createFiberFromFragment( showFallback, didSuspend, @@ -4972,10 +5033,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? (didSuspend = mountSuspenseOffscreenState(renderLanes)) : ((JSCompiler_temp = didSuspend.cachePool), null !== JSCompiler_temp - ? ((dehydrated$65 = CacheContext._currentValue), + ? ((dehydrated$68 = CacheContext._currentValue), (JSCompiler_temp = - JSCompiler_temp.parent !== dehydrated$65 - ? { parent: dehydrated$65, pool: dehydrated$65 } + JSCompiler_temp.parent !== dehydrated$68 + ? { parent: dehydrated$68, pool: dehydrated$68 } : JSCompiler_temp)) : (JSCompiler_temp = getSuspendedCache()), (didSuspend = { @@ -4989,23 +5050,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ((JSCompiler_temp = enableTransitionTracing ? markerInstanceStack.current : null), - (dehydrated$65 = showFallback.updateQueue), + (dehydrated$68 = showFallback.updateQueue), (primaryChildProps = current.updateQueue), - null === dehydrated$65 + null === dehydrated$68 ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null }) - : dehydrated$65 === primaryChildProps + : dehydrated$68 === primaryChildProps ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null !== primaryChildProps ? primaryChildProps.retryQueue : null }) - : ((dehydrated$65.transitions = didSuspend), - (dehydrated$65.markerInstances = JSCompiler_temp)))); + : ((dehydrated$68.transitions = didSuspend), + (dehydrated$68.markerInstances = JSCompiler_temp)))); showFallback.childLanes = current.childLanes & ~renderLanes; workInProgress.memoizedState = SUSPENDED_MARKER; return nextProps; @@ -5964,62 +6025,67 @@ function markRef(workInProgress) { } function updateHostComponent(current, workInProgress, type, newProps) { current = current.memoizedProps; - if (current !== newProps) { - type = null; - var propKey, - styleName, - styleUpdates = null; - for (propKey in current) - if ( - !newProps.hasOwnProperty(propKey) && - current.hasOwnProperty(propKey) && - null != current[propKey] - ) - switch (propKey) { - case "style": - var lastStyle = current[propKey]; - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - break; - default: - (type = type || []).push(propKey, null); - } - for (propKey in newProps) { - lastStyle = newProps[propKey]; - var lastProp = null != current ? current[propKey] : void 0; - if ( - newProps.hasOwnProperty(propKey) && - lastStyle !== lastProp && - (null != lastStyle || null != lastProp) - ) - switch (propKey) { - case "style": - if (lastProp) { - for (styleName in lastProp) - !lastProp.hasOwnProperty(styleName) || - (lastStyle && lastStyle.hasOwnProperty(styleName)) || - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - lastProp[styleName] !== lastStyle[styleName] && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = lastStyle[styleName])); - } else - styleUpdates || - (type || (type = []), type.push(propKey, styleUpdates)), - (styleUpdates = lastStyle); - break; - default: - (type = type || []).push(propKey, lastStyle); + if (current !== newProps) + if (diffInCommitPhase) markUpdate(workInProgress); + else { + if (diffInCommitPhase) newProps = null; + else { + type = null; + var propKey, + styleName, + styleUpdates = null; + for (propKey in current) + if ( + !newProps.hasOwnProperty(propKey) && + current.hasOwnProperty(propKey) && + null != current[propKey] + ) + switch (propKey) { + case "style": + var lastStyle = current[propKey]; + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + break; + default: + (type = type || []).push(propKey, null); + } + for (propKey in newProps) { + lastStyle = newProps[propKey]; + var lastProp = null != current ? current[propKey] : void 0; + if ( + newProps.hasOwnProperty(propKey) && + lastStyle !== lastProp && + (null != lastStyle || null != lastProp) + ) + switch (propKey) { + case "style": + if (lastProp) { + for (styleName in lastProp) + !lastProp.hasOwnProperty(styleName) || + (lastStyle && lastStyle.hasOwnProperty(styleName)) || + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + lastProp[styleName] !== lastStyle[styleName] && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = lastStyle[styleName])); + } else + styleUpdates || + (type || (type = []), type.push(propKey, styleUpdates)), + (styleUpdates = lastStyle); + break; + default: + (type = type || []).push(propKey, lastStyle); + } } + styleUpdates && (type = type || []).push("style", styleUpdates); + newProps = type; + } + (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); } - styleUpdates && (type = type || []).push("style", styleUpdates); - newProps = type; - (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); - } } function preloadResourceAndSuspendIfNeeded(workInProgress, resource) { if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4)) @@ -6063,14 +6129,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$96 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$96 = lastTailNode), + for (var lastTailNode$99 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$99 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$96 + null === lastTailNode$99 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$96.sibling = null); + : (lastTailNode$99.sibling = null); } } function bubbleProperties(completedWork) { @@ -6080,19 +6146,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$97 = completedWork.child; null !== child$97; ) - (newChildLanes |= child$97.lanes | child$97.childLanes), - (subtreeFlags |= child$97.subtreeFlags & 31457280), - (subtreeFlags |= child$97.flags & 31457280), - (child$97.return = completedWork), - (child$97 = child$97.sibling); + for (var child$100 = completedWork.child; null !== child$100; ) + (newChildLanes |= child$100.lanes | child$100.childLanes), + (subtreeFlags |= child$100.subtreeFlags & 31457280), + (subtreeFlags |= child$100.flags & 31457280), + (child$100.return = completedWork), + (child$100 = child$100.sibling); else - for (child$97 = completedWork.child; null !== child$97; ) - (newChildLanes |= child$97.lanes | child$97.childLanes), - (subtreeFlags |= child$97.subtreeFlags), - (subtreeFlags |= child$97.flags), - (child$97.return = completedWork), - (child$97 = child$97.sibling); + for (child$100 = completedWork.child; null !== child$100; ) + (newChildLanes |= child$100.lanes | child$100.childLanes), + (subtreeFlags |= child$100.subtreeFlags), + (subtreeFlags |= child$100.flags), + (child$100.return = completedWork), + (child$100 = child$100.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -6811,8 +6877,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$126) { - captureCommitPhaseError(current, nearestMountedAncestor, error$126); + } catch (error$129) { + captureCommitPhaseError(current, nearestMountedAncestor, error$129); } else ref.current = null; } @@ -6849,7 +6915,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$190) { + } catch (e$193) { JSCompiler_temp = null; break a; } @@ -7128,11 +7194,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$128) { + } catch (error$131) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$128 + error$131 ); } } @@ -7812,8 +7878,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$141) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$141); + } catch (error$144) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$144); } } break; @@ -7982,20 +8048,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) { ) try { var domElement = finishedWork.stateNode, + type = finishedWork.type, + oldProps = current.memoizedProps, newProps = finishedWork.memoizedProps; - updateProperties( - domElement, - flags, - finishedWork.type, - current.memoizedProps, - newProps - ); + diffInCommitPhase + ? updateProperties(domElement, type, oldProps, newProps) + : updatePropertiesWithDiff( + domElement, + flags, + type, + oldProps, + newProps + ); domElement[internalPropsKey] = newProps; - } catch (error$142) { + } catch (error$145) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$142 + error$145 ); } break; @@ -8031,8 +8101,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$143) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$143); + } catch (error$146) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$146); } } if ( @@ -8044,13 +8114,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (hoistableRoot = finishedWork.type), (maybeNodes = finishedWork.updateQueue), (finishedWork.updateQueue = null), - null !== maybeNodes)) + null !== maybeNodes || diffInCommitPhase)) ) try { - updateProperties(flags, maybeNodes, hoistableRoot, current, root), + diffInCommitPhase + ? updateProperties(flags, hoistableRoot, current, root) + : updatePropertiesWithDiff( + flags, + maybeNodes, + hoistableRoot, + current, + root + ), (flags[internalPropsKey] = root); - } catch (error$146) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$146); + } catch (error$149) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$149); } break; case 6: @@ -8063,8 +8141,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$147) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$147); + } catch (error$150) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$150); } } break; @@ -8078,8 +8156,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$148) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$148); + } catch (error$151) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$151); } break; case 4: @@ -8109,8 +8187,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$150) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$150); + } catch (error$153) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$153); } current = finishedWork.updateQueue; null !== current && @@ -8123,15 +8201,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== current && safelyDetachRef(current, current.return); domElement = null !== finishedWork.memoizedState; - newProps = null !== current && null !== current.memoizedState; + type = null !== current && null !== current.memoizedState; finishedWork.mode & 1 - ? ((suspenseCallback = offscreenSubtreeIsHidden), - (retryQueue = offscreenSubtreeWasHidden), - (offscreenSubtreeIsHidden = suspenseCallback || domElement), - (offscreenSubtreeWasHidden = retryQueue || newProps), + ? ((oldProps = offscreenSubtreeIsHidden), + (newProps = offscreenSubtreeWasHidden), + (offscreenSubtreeIsHidden = oldProps || domElement), + (offscreenSubtreeWasHidden = newProps || type), recursivelyTraverseMutationEffects(root, finishedWork), - (offscreenSubtreeWasHidden = retryQueue), - (offscreenSubtreeIsHidden = suspenseCallback)) + (offscreenSubtreeWasHidden = newProps), + (offscreenSubtreeIsHidden = oldProps)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); root = finishedWork.stateNode; @@ -8146,7 +8224,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) { domElement && ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden), null === current || - newProps || + type || root || (0 !== (finishedWork.mode & 1) && recursivelyTraverseDisappearLayoutEffects(finishedWork))), @@ -8188,11 +8266,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$131) { + } catch (error$134) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$131 + error$134 ); } } else if ( @@ -8267,21 +8345,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$132 = JSCompiler_inline_result.stateNode; + var parent$135 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$132, ""), + (setTextContent(parent$135, ""), (JSCompiler_inline_result.flags &= -33)); - var before$133 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$133, parent$132); + var before$136 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$136, parent$135); break; case 3: case 4: - var parent$134 = JSCompiler_inline_result.stateNode.containerInfo, - before$135 = getHostSibling(finishedWork); + var parent$137 = JSCompiler_inline_result.stateNode.containerInfo, + before$138 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$135, - parent$134 + before$138, + parent$137 ); break; default: @@ -8751,9 +8829,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$160 = finishedWork.stateNode; + var instance$163 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$160._visibility & 4 + ? instance$163._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8766,7 +8844,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$160._visibility |= 4), + : ((instance$163._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8774,7 +8852,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$160._visibility |= 4), + : ((instance$163._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8787,7 +8865,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$160 + instance$163 ); break; case 24: @@ -9142,13 +9220,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { isFlushingWork = !0; do { var didPerformSomeWork = !1; - for (var root$168 = firstScheduledRoot; null !== root$168; ) { + for (var root$171 = firstScheduledRoot; null !== root$171; ) { if ( - (!onlyLegacy || 0 === root$168.tag) && + (!onlyLegacy || 0 === root$171.tag) && 0 !== (getNextLanes( - root$168, - root$168 === workInProgressRoot$jscomp$0 + root$171, + root$171 === workInProgressRoot$jscomp$0 ? workInProgressRootRenderLanes$jscomp$0 : 0 ) & @@ -9156,7 +9234,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { ) try { didPerformSomeWork = !0; - var root = root$168; + var root = root$171; if (0 !== (executionContext & 6)) throw Error(formatProdErrorMessage(327)); flushPassiveEffects(); @@ -9199,7 +9277,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { } catch (error) { null === errors ? (errors = [error]) : errors.push(error); } - root$168 = root$168.next; + root$171 = root$171.next; } } while (didPerformSomeWork); isFlushingWork = !1; @@ -9525,16 +9603,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) { exitStatus = renderRootSync(root, lanes); if (2 === exitStatus) { errorRetryLanes = lanes; - var errorRetryLanes$171 = getLanesToRetrySynchronouslyOnError( + var errorRetryLanes$174 = getLanesToRetrySynchronouslyOnError( root, errorRetryLanes ); - 0 !== errorRetryLanes$171 && - ((lanes = errorRetryLanes$171), + 0 !== errorRetryLanes$174 && + ((lanes = errorRetryLanes$174), (exitStatus = recoverFromConcurrentError( root, errorRetryLanes, - errorRetryLanes$171 + errorRetryLanes$174 ))); } if (1 === exitStatus) @@ -9595,14 +9673,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) { if ((lanes & 8388480) === lanes) break; exitStatus = lanes; errorRetryLanes = root.eventTimes; - for (errorRetryLanes$171 = -1; 0 < exitStatus; ) { + for (errorRetryLanes$174 = -1; 0 < exitStatus; ) { var index$1 = 31 - clz32(exitStatus), lane = 1 << index$1; index$1 = errorRetryLanes[index$1]; - index$1 > errorRetryLanes$171 && (errorRetryLanes$171 = index$1); + index$1 > errorRetryLanes$174 && (errorRetryLanes$174 = index$1); exitStatus &= ~lane; } - exitStatus = errorRetryLanes$171; + exitStatus = errorRetryLanes$174; exitStatus = now() - exitStatus; exitStatus = (120 > exitStatus @@ -9934,8 +10012,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$174) { - handleThrow(root, thrownValue$174); + } catch (thrownValue$177) { + handleThrow(root, thrownValue$177); } while (1); resetContextDependencies(); @@ -10041,8 +10119,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$176) { - handleThrow(root, thrownValue$176); + } catch (thrownValue$179) { + handleThrow(root, thrownValue$179); } while (1); resetContextDependencies(); @@ -10205,10 +10283,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) { }; suspenseBoundary.updateQueue = newOffscreenQueue; } else { - var retryQueue$53 = offscreenQueue.retryQueue; - null === retryQueue$53 + var retryQueue$56 = offscreenQueue.retryQueue; + null === retryQueue$56 ? (offscreenQueue.retryQueue = new Set([wakeable])) - : retryQueue$53.add(wakeable); + : retryQueue$56.add(wakeable); } } break; @@ -10405,12 +10483,12 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$180 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$183 = commitBeforeMutationEffects( root, finishedWork ); commitMutationEffectsOnFiber(finishedWork, root); - shouldFireAfterActiveInstanceBlur$180 && + shouldFireAfterActiveInstanceBlur$183 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -10489,7 +10567,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$181 = rootWithPendingPassiveEffects, + var root$184 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -10505,7 +10583,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$181, remainingLanes); + releaseRootPooledCache(root$184, remainingLanes); } } return !1; @@ -11694,12 +11772,12 @@ function updateContainer(element, container, parentComponent, callback) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$183 = fiber.stateNode; - if (root$183.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$183.pendingLanes); + var root$186 = fiber.stateNode; + if (root$186.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$186.pendingLanes); 0 !== lanes && - (markRootEntangled(root$183, lanes | 2), - ensureRootIsScheduled(root$183), + (markRootEntangled(root$186, lanes | 2), + ensureRootIsScheduled(root$186), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -12791,19 +12869,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$329; + var JSCompiler_inline_result$jscomp$378; if (canUseDOM) { - var isSupported$jscomp$inline_1554 = "oninput" in document; - if (!isSupported$jscomp$inline_1554) { - var element$jscomp$inline_1555 = document.createElement("div"); - element$jscomp$inline_1555.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1554 = - "function" === typeof element$jscomp$inline_1555.oninput; + var isSupported$jscomp$inline_1605 = "oninput" in document; + if (!isSupported$jscomp$inline_1605) { + var element$jscomp$inline_1606 = document.createElement("div"); + element$jscomp$inline_1606.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1605 = + "function" === typeof element$jscomp$inline_1606.oninput; } - JSCompiler_inline_result$jscomp$329 = isSupported$jscomp$inline_1554; - } else JSCompiler_inline_result$jscomp$329 = !1; + JSCompiler_inline_result$jscomp$378 = isSupported$jscomp$inline_1605; + } else JSCompiler_inline_result$jscomp$378 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$329 && + JSCompiler_inline_result$jscomp$378 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13112,20 +13190,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1595 = 0; - i$jscomp$inline_1595 < simpleEventPluginEvents.length; - i$jscomp$inline_1595++ + var i$jscomp$inline_1646 = 0; + i$jscomp$inline_1646 < simpleEventPluginEvents.length; + i$jscomp$inline_1646++ ) { - var eventName$jscomp$inline_1596 = - simpleEventPluginEvents[i$jscomp$inline_1595], - domEventName$jscomp$inline_1597 = - eventName$jscomp$inline_1596.toLowerCase(), - capitalizedEvent$jscomp$inline_1598 = - eventName$jscomp$inline_1596[0].toUpperCase() + - eventName$jscomp$inline_1596.slice(1); + var eventName$jscomp$inline_1647 = + simpleEventPluginEvents[i$jscomp$inline_1646], + domEventName$jscomp$inline_1648 = + eventName$jscomp$inline_1647.toLowerCase(), + capitalizedEvent$jscomp$inline_1649 = + eventName$jscomp$inline_1647[0].toUpperCase() + + eventName$jscomp$inline_1647.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1597, - "on" + capitalizedEvent$jscomp$inline_1598 + domEventName$jscomp$inline_1648, + "on" + capitalizedEvent$jscomp$inline_1649 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -13957,7 +14035,7 @@ function normalizeMarkupForTextOrAttribute(markup) { .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, ""); } function noop$1() {} -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": "string" === typeof value @@ -13982,7 +14060,7 @@ function setProp(domElement, tag, key, value, props) { setValueForKnownAttribute(domElement, key, value); break; case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "src": case "href": @@ -14198,6 +14276,9 @@ function setProp(domElement, tag, key, value, props) { value ); break; + case "is": + setValueForAttribute(domElement, "is", value); + break; case "innerText": case "textContent": if (enableCustomElementPropertySupport) break; @@ -14211,10 +14292,10 @@ function setProp(domElement, tag, key, value, props) { setValueForAttribute(domElement, key, value); } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "dangerouslySetInnerHTML": if (null != value) { @@ -14252,23 +14333,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) { if (enableCustomElementPropertySupport) a: { props = value; - if ("o" === key[0] && "n" === key[1]) { - tag = key.endsWith("Capture"); - value = key.substr(2, tag ? key.length - 9 : void 0); - var prevProps = getFiberCurrentPropsFromNode(domElement); - prevProps = null != prevProps ? prevProps[key] : null; - "function" === typeof prevProps && - domElement.removeEventListener(value, prevProps, tag); - if ("function" === typeof props) { - "function" !== typeof prevProps && - null !== prevProps && - (key in domElement - ? (domElement[key] = null) - : domElement.hasAttribute(key) && - domElement.removeAttribute(key)); - domElement.addEventListener(value, props, tag); - break a; - } + if ( + "o" === key[0] && + "n" === key[1] && + ((tag = key.endsWith("Capture")), + (value = key.substr(2, tag ? key.length - 9 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(value, prevValue, tag), + "function" === typeof props) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(value, props, tag); + break a; } key in domElement ? (domElement[key] = props) @@ -14294,7 +14377,12 @@ function setInitialProperties(domElement, tag, props) { break; case "input": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey in props) + var type = null, + value = null, + defaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in props) if (props.hasOwnProperty(propKey)) { var propValue = props[propKey]; if (null != propValue) @@ -14304,9 +14392,11 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== typeof propValue && "boolean" !== typeof propValue && - domElement.setAttribute(propKey, propValue); + ((type = propValue), + domElement.setAttribute(propKey, propValue)); break; case "checked": + checked = propValue; propValue = null != propValue ? propValue : props.defaultChecked; domElement.checked = @@ -14314,7 +14404,14 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== propValue; break; + case "defaultChecked": + defaultChecked = propValue; + break; case "value": + value = propValue; + break; + case "defaultValue": + defaultValue = propValue; break; case "children": case "dangerouslySetInnerHTML": @@ -14322,60 +14419,80 @@ function setInitialProperties(domElement, tag, props) { throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } track(domElement); - initInput(domElement, props, !1); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + !1 + ); return; case "select": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$200 in props) + var propKey = (value = defaultValue = null); + for (type in props) if ( - props.hasOwnProperty(propKey$200) && - ((propKey = props[propKey$200]), null != propKey) + props.hasOwnProperty(type) && + ((checked = props[type]), null != checked) ) - switch (propKey$200) { + switch (type) { case "value": + defaultValue = checked; break; + case "defaultValue": + value = checked; + break; + case "multiple": + propKey = checked; default: - setProp(domElement, tag, propKey$200, propKey, props); + setProp(domElement, tag, type, checked, props, null); } - domElement.multiple = !!props.multiple; - tag = props.value; + tag = defaultValue; + props = value; + domElement.multiple = !!propKey; null != tag - ? updateOptions(domElement, !!props.multiple, tag, !1) - : null != props.defaultValue && - updateOptions(domElement, !!props.multiple, props.defaultValue, !0); + ? updateOptions(domElement, !!propKey, tag, !1) + : null != props && updateOptions(domElement, !!propKey, props, !0); return; case "textarea": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$202 in props) + type = propKey = null; + for (value in props) if ( - props.hasOwnProperty(propKey$202) && - ((propKey = props[propKey$202]), null != propKey) + props.hasOwnProperty(value) && + ((defaultValue = props[value]), null != defaultValue) ) - switch (propKey$202) { + switch (value) { case "value": + propKey = defaultValue; + break; + case "defaultValue": + type = defaultValue; break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propKey) throw Error(formatProdErrorMessage(91)); + if (null != defaultValue) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey$202, propKey, props); + setProp(domElement, tag, value, defaultValue, props); } track(domElement); - initTextarea(domElement, props); + initTextarea(domElement, propKey, type); return; case "option": - for (var propKey$204 in props) + for (checked in props) if ( - props.hasOwnProperty(propKey$204) && - ((propKey = props[propKey$204]), null != propKey) + props.hasOwnProperty(checked) && + ((propKey = props[checked]), null != propKey) ) - switch (propKey$204) { + switch (checked) { case "selected": domElement.selected = propKey && @@ -14383,10 +14500,8 @@ function setInitialProperties(domElement, tag, props) { "symbol" !== typeof propKey; break; default: - setProp(domElement, tag, propKey$204, propKey, props); + setProp(domElement, tag, checked, propKey, props); } - null != props.value && - domElement.setAttribute("value", "" + getToStringValue(props.value)); return; case "dialog": listenToNonDelegatedEvent("cancel", domElement); @@ -14425,41 +14540,389 @@ function setInitialProperties(domElement, tag, props) { case "track": case "wbr": case "menuitem": - for (var propKey$206 in props) + for (defaultChecked in props) if ( - props.hasOwnProperty(propKey$206) && - ((propKey = props[propKey$206]), null != propKey) + props.hasOwnProperty(defaultChecked) && + ((propKey = props[defaultChecked]), null != propKey) ) - switch (propKey$206) { + switch (defaultChecked) { case "children": case "dangerouslySetInnerHTML": throw Error(formatProdErrorMessage(137, tag)); default: - setProp(domElement, tag, propKey$206, propKey, props); + setProp(domElement, tag, defaultChecked, propKey, props, null); } return; default: if (isCustomElement(tag)) { - for (var propKey$208 in props) - props.hasOwnProperty(propKey$208) && - ((propKey = props[propKey$208]), + for (propValue in props) + props.hasOwnProperty(propValue) && + ((propKey = props[propValue]), null != propKey && setPropOnCustomElement( domElement, tag, - propKey$208, + propValue, propKey, - props + props, + null )); return; } } - for (propValue in props) - props.hasOwnProperty(propValue) && - ((propKey = props[propValue]), - null != propKey && setProp(domElement, tag, propValue, propKey, props)); + for (defaultValue in props) + props.hasOwnProperty(defaultValue) && + ((propKey = props[defaultValue]), + null != propKey && + setProp(domElement, tag, defaultValue, propKey, props, null)); } -function updateProperties( +function updateProperties(domElement, tag, lastProps, nextProps) { + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": + break; + case "input": + var name = null, + type = null, + value = null, + defaultValue = null, + lastDefaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in lastProps) { + var lastProp = lastProps[propKey]; + if (lastProps.hasOwnProperty(propKey) && null != lastProp) + switch (propKey) { + case "checked": + nextProps.hasOwnProperty(propKey) || + ((lastProp = nextProps.defaultChecked), + (domElement.checked = + !!lastProp && + "function" !== typeof lastProp && + "symbol" !== lastProp)); + break; + case "value": + break; + case "defaultValue": + lastDefaultValue = lastProp; + default: + nextProps.hasOwnProperty(propKey) || + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + for (var propKey$219 in nextProps) { + var propKey = nextProps[propKey$219]; + lastProp = lastProps[propKey$219]; + if ( + nextProps.hasOwnProperty(propKey$219) && + (null != propKey || null != lastProp) + ) + switch (propKey$219) { + case "type": + type = propKey; + propKey !== lastProp && + (null != propKey && + "function" !== typeof propKey && + "symbol" !== typeof propKey && + "boolean" !== typeof propKey + ? domElement.setAttribute(propKey$219, propKey) + : domElement.removeAttribute(propKey$219)); + break; + case "name": + name = propKey; + break; + case "checked": + checked = propKey; + propKey !== lastProp && + ((propKey = + null != propKey ? propKey : nextProps.defaultChecked), + (domElement.checked = + !!propKey && + "function" !== typeof propKey && + "symbol" !== propKey)); + break; + case "defaultChecked": + defaultChecked = propKey; + break; + case "value": + value = propKey; + break; + case "defaultValue": + defaultValue = propKey; + break; + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + propKey !== lastProp && + setProp( + domElement, + tag, + propKey$219, + propKey, + nextProps, + lastProp + ); + } + } + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + case "select": + defaultValue = value = propKey = propKey$219 = null; + for (type in lastProps) + if ( + ((lastDefaultValue = lastProps[type]), + lastProps.hasOwnProperty(type) && null != lastDefaultValue) + ) + switch (type) { + case "value": + break; + case "multiple": + defaultValue = lastDefaultValue; + default: + nextProps.hasOwnProperty(type) || + setProp( + domElement, + tag, + type, + null, + nextProps, + lastDefaultValue + ); + } + for (name in nextProps) + if ( + ((type = nextProps[name]), + (lastDefaultValue = lastProps[name]), + nextProps.hasOwnProperty(name) && + (null != type || null != lastDefaultValue)) + ) + switch (name) { + case "value": + propKey$219 = type; + break; + case "defaultValue": + propKey = type; + break; + case "multiple": + value = type; + default: + type !== lastDefaultValue && + setProp( + domElement, + tag, + name, + type, + nextProps, + lastDefaultValue + ); + } + updateSelect(domElement, propKey$219, propKey, value, defaultValue); + return; + case "textarea": + propKey = propKey$219 = null; + for (defaultValue in lastProps) + if ( + ((name = lastProps[defaultValue]), + lastProps.hasOwnProperty(defaultValue) && + null != name && + !nextProps.hasOwnProperty(defaultValue)) + ) + switch (defaultValue) { + case "value": + break; + case "children": + break; + default: + setProp(domElement, tag, defaultValue, null, nextProps, name); + } + for (value in nextProps) + if ( + ((name = nextProps[value]), + (type = lastProps[value]), + nextProps.hasOwnProperty(value) && (null != name || null != type)) + ) + switch (value) { + case "value": + propKey$219 = name; + break; + case "defaultValue": + propKey = name; + break; + case "children": + break; + case "dangerouslySetInnerHTML": + if (null != name) throw Error(formatProdErrorMessage(91)); + break; + default: + name !== type && + setProp(domElement, tag, value, name, nextProps, type); + } + updateTextarea(domElement, propKey$219, propKey); + return; + case "option": + for (var propKey$237 in lastProps) + if ( + ((propKey$219 = lastProps[propKey$237]), + lastProps.hasOwnProperty(propKey$237) && + null != propKey$219 && + !nextProps.hasOwnProperty(propKey$237)) + ) + switch (propKey$237) { + case "selected": + domElement.selected = !1; + break; + default: + setProp( + domElement, + tag, + propKey$237, + null, + nextProps, + propKey$219 + ); + } + for (lastDefaultValue in nextProps) + if ( + ((propKey$219 = nextProps[lastDefaultValue]), + (propKey = lastProps[lastDefaultValue]), + nextProps.hasOwnProperty(lastDefaultValue) && + propKey$219 !== propKey && + (null != propKey$219 || null != propKey)) + ) + switch (lastDefaultValue) { + case "selected": + domElement.selected = + propKey$219 && + "function" !== typeof propKey$219 && + "symbol" !== typeof propKey$219; + break; + default: + setProp( + domElement, + tag, + lastDefaultValue, + propKey$219, + nextProps, + propKey + ); + } + return; + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": + for (var propKey$242 in lastProps) + (propKey$219 = lastProps[propKey$242]), + lastProps.hasOwnProperty(propKey$242) && + null != propKey$219 && + !nextProps.hasOwnProperty(propKey$242) && + setProp(domElement, tag, propKey$242, null, nextProps, propKey$219); + for (checked in nextProps) + if ( + ((propKey$219 = nextProps[checked]), + (propKey = lastProps[checked]), + nextProps.hasOwnProperty(checked) && + propKey$219 !== propKey && + (null != propKey$219 || null != propKey)) + ) + switch (checked) { + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey$219) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + setProp( + domElement, + tag, + checked, + propKey$219, + nextProps, + propKey + ); + } + return; + default: + if (isCustomElement(tag)) { + for (var propKey$247 in lastProps) + (propKey$219 = lastProps[propKey$247]), + lastProps.hasOwnProperty(propKey$247) && + null != propKey$219 && + !nextProps.hasOwnProperty(propKey$247) && + setPropOnCustomElement( + domElement, + tag, + propKey$247, + null, + nextProps, + propKey$219 + ); + for (defaultChecked in nextProps) + (propKey$219 = nextProps[defaultChecked]), + (propKey = lastProps[defaultChecked]), + !nextProps.hasOwnProperty(defaultChecked) || + propKey$219 === propKey || + (null == propKey$219 && null == propKey) || + setPropOnCustomElement( + domElement, + tag, + defaultChecked, + propKey$219, + nextProps, + propKey + ); + return; + } + } + for (var propKey$252 in lastProps) + (propKey$219 = lastProps[propKey$252]), + lastProps.hasOwnProperty(propKey$252) && + null != propKey$219 && + !nextProps.hasOwnProperty(propKey$252) && + setProp(domElement, tag, propKey$252, null, nextProps, propKey$219); + for (lastProp in nextProps) + (propKey$219 = nextProps[lastProp]), + (propKey = lastProps[lastProp]), + !nextProps.hasOwnProperty(lastProp) || + propKey$219 === propKey || + (null == propKey$219 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$219, nextProps, propKey); +} +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -14477,14 +14940,31 @@ function updateProperties( case "li": break; case "input": - "radio" === nextProps.type && - null != nextProps.name && - ((lastProps = nextProps.checked), - null != lastProps && (domElement.checked = lastProps)); - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) { - var propKey = updatePayload[lastProps], - propValue = updatePayload[lastProps + 1]; + var name = nextProps.name, + type = nextProps.type, + value = nextProps.value, + defaultValue = nextProps.defaultValue; + lastProps = lastProps.defaultValue; + for ( + var checked = nextProps.checked, + defaultChecked = nextProps.defaultChecked, + i = 0; + i < updatePayload.length; + i += 2 + ) { + var propKey = updatePayload[i], + propValue = updatePayload[i + 1]; switch (propKey) { + case "type": + null != propValue && + "function" !== typeof propValue && + "symbol" !== typeof propValue && + "boolean" !== typeof propValue + ? domElement.setAttribute(propKey, propValue) + : domElement.removeAttribute(propKey); + break; + case "name": + break; case "checked": propKey = null != propValue ? propValue : nextProps.defaultChecked; domElement.checked = @@ -14492,83 +14972,89 @@ function updateProperties( "function" !== typeof propKey && "symbol" !== propKey; break; + case "defaultChecked": + break; case "value": break; + case "defaultValue": + break; case "children": case "dangerouslySetInnerHTML": if (null != propValue) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } - updateInput(domElement, nextProps); + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastProps, + checked, + defaultChecked, + type + ); return; case "select": - for (propKey = 0; propKey < updatePayload.length; propKey += 2) { - propValue = updatePayload[propKey]; - var propValue$214 = updatePayload[propKey + 1]; - switch (propValue) { + name = nextProps.value; + type = nextProps.defaultValue; + value = nextProps.multiple; + defaultValue = lastProps.multiple; + for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + switch ( + ((checked = updatePayload[lastProps]), + (defaultChecked = updatePayload[lastProps + 1]), + checked) + ) { case "value": break; default: - setProp(domElement, tag, propValue, propValue$214, nextProps); + setProp(domElement, tag, checked, defaultChecked, nextProps, null); } - } - updatePayload = !!lastProps.multiple; - tag = nextProps.value; - null != tag - ? updateOptions(domElement, !!nextProps.multiple, tag, !1) - : updatePayload !== !!nextProps.multiple && - (null != nextProps.defaultValue - ? updateOptions( - domElement, - !!nextProps.multiple, - nextProps.defaultValue, - !0 - ) - : updateOptions( - domElement, - !!nextProps.multiple, - nextProps.multiple ? [] : "", - !1 - )); + updateSelect(domElement, name, type, value, defaultValue); return; case "textarea": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + name = nextProps.value; + type = nextProps.defaultValue; + for (value = 0; value < updatePayload.length; value += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((defaultValue = updatePayload[value]), + (lastProps = updatePayload[value + 1]), + defaultValue) ) { case "value": break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propValue) throw Error(formatProdErrorMessage(91)); + if (null != lastProps) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, defaultValue, lastProps, nextProps, null); } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, name, type); return; case "option": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "selected": domElement.selected = - propValue && - "function" !== typeof propValue && - "symbol" !== typeof propValue; + value && "function" !== typeof value && "symbol" !== typeof value; break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; case "img": @@ -14586,41 +15072,42 @@ function updateProperties( case "track": case "wbr": case "menuitem": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "children": case "dangerouslySetInnerHTML": - if (null != propValue) - throw Error(formatProdErrorMessage(137, tag)); + if (null != value) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; default: if (isCustomElement(tag)) { - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setPropOnCustomElement( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); return; } } - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setProp( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); } var Dispatcher$1 = Internals.Dispatcher, @@ -14937,14 +15424,14 @@ function preinit$1(href, options) { switch (as) { case "style": as = getResourcesFromRoot(resourceRoot).hoistableStyles; - var key$231 = getStyleKey(href), + var key$280 = getStyleKey(href), precedence = options.precedence || "default", - resource = as.get(key$231); + resource = as.get(key$280); if (resource) break; var state = { loading: 0, preload: null }; if ( (resource = resourceRoot.querySelector( - getStylesheetSelectorFromKey(key$231) + getStylesheetSelectorFromKey(key$280) )) ) state.loading = 1; @@ -14955,7 +15442,7 @@ function preinit$1(href, options) { "data-precedence": precedence, crossOrigin: options.crossOrigin }; - (options = preloadPropsMap.get(key$231)) && + (options = preloadPropsMap.get(key$280)) && adoptPreloadPropsForStylesheet(href, options); var link = (resource = ( resourceRoot.ownerDocument || resourceRoot @@ -14981,15 +15468,15 @@ function preinit$1(href, options) { count: 1, state: state }; - as.set(key$231, resource); + as.set(key$280, resource); break; case "script": (as = getResourcesFromRoot(resourceRoot).hoistableScripts), - (key$231 = getScriptKey(href)), - (precedence = as.get(key$231)), + (key$280 = getScriptKey(href)), + (precedence = as.get(key$280)), precedence || ((precedence = resourceRoot.querySelector( - "script[async]" + key$231 + "script[async]" + key$280 )), precedence || ((href = { @@ -14998,7 +15485,7 @@ function preinit$1(href, options) { crossOrigin: options.crossOrigin, integrity: options.integrity }), - (options = preloadPropsMap.get(key$231)) && + (options = preloadPropsMap.get(key$280)) && adoptPreloadPropsForScript(href, options), (options = resourceRoot.ownerDocument || resourceRoot), (precedence = options.createElement("script")), @@ -15011,13 +15498,13 @@ function preinit$1(href, options) { count: 1, state: null }), - as.set(key$231, precedence)); + as.set(key$280, precedence)); } else if ("style" === as || "script" === as) if ((resourceRoot = getDocumentForPreloads())) { - key$231 = escapeSelectorAttributeValueInsideDoubleQuotes(href); - precedence = key$231 = - 'link[rel="preload"][as="' + as + '"][href="' + key$231 + '"]'; + key$280 = escapeSelectorAttributeValueInsideDoubleQuotes(href); + precedence = key$280 = + 'link[rel="preload"][as="' + as + '"][href="' + key$280 + '"]'; switch (as) { case "style": precedence = getStyleKey(href); @@ -15034,7 +15521,7 @@ function preinit$1(href, options) { integrity: options.integrity }), preloadPropsMap.set(precedence, href), - null === resourceRoot.querySelector(key$231) && + null === resourceRoot.querySelector(key$280) && ((options = resourceRoot.createElement("link")), setInitialProperties(options, "link", href), markNodeAsHoistable(options), @@ -15067,17 +15554,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$240 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$241 = styles$240.get(type); - resource$241 || + var styles$289 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$290 = styles$289.get(type); + resource$290 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$241 = { + (resource$290 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$240.set(type, resource$241), + styles$289.set(type, resource$290), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -15092,9 +15579,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$241.state + resource$290.state )); - return resource$241; + return resource$290; } return null; case "script": @@ -15166,36 +15653,36 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = key); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$246 = hoistableRoot.querySelector( + var instance$295 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$246) + if (instance$295) return ( - (resource.instance = instance$246), - markNodeAsHoistable(instance$246), - instance$246 + (resource.instance = instance$295), + markNodeAsHoistable(instance$295), + instance$295 ); key = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(key, styleProps); - instance$246 = ( + instance$295 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$246); - var linkInstance = instance$246; + markNodeAsHoistable(instance$295); + var linkInstance = instance$295; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$246, "link", key); + setInitialProperties(instance$295, "link", key); resource.state.loading |= 4; - insertStylesheet(instance$246, props.precedence, hoistableRoot); - return (resource.instance = instance$246); + insertStylesheet(instance$295, props.precedence, hoistableRoot); + return (resource.instance = instance$295); case "script": - instance$246 = getScriptKey(props.src); + instance$295 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - "script[async]" + instance$246 + "script[async]" + instance$295 )) ) return ( @@ -15204,7 +15691,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); key = props; - if ((styleProps = preloadPropsMap.get(instance$246))) + if ((styleProps = preloadPropsMap.get(instance$295))) (key = assign({}, props)), adoptPreloadPropsForScript(key, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -15574,17 +16061,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1780 = { +var devToolsConfig$jscomp$inline_1814 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-95b4ba35", + version: "18.3.0-www-modern-d8cd2d94", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2154 = { - bundleType: devToolsConfig$jscomp$inline_1780.bundleType, - version: devToolsConfig$jscomp$inline_1780.version, - rendererPackageName: devToolsConfig$jscomp$inline_1780.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1780.rendererConfig, +var internals$jscomp$inline_2194 = { + bundleType: devToolsConfig$jscomp$inline_1814.bundleType, + version: devToolsConfig$jscomp$inline_1814.version, + rendererPackageName: devToolsConfig$jscomp$inline_1814.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1814.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15601,26 +16088,26 @@ var internals$jscomp$inline_2154 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1780.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1814.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-95b4ba35" + reconcilerVersion: "18.3.0-www-modern-d8cd2d94" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2195 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2155.isDisabled && - hook$jscomp$inline_2155.supportsFiber + !hook$jscomp$inline_2195.isDisabled && + hook$jscomp$inline_2195.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2155.inject( - internals$jscomp$inline_2154 + (rendererID = hook$jscomp$inline_2195.inject( + internals$jscomp$inline_2194 )), - (injectedHook = hook$jscomp$inline_2155); + (injectedHook = hook$jscomp$inline_2195); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -15777,4 +16264,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-95b4ba35"; +exports.version = "18.3.0-www-modern-d8cd2d94"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index a8e61f1852fbd..a3e91e8009a1f 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -66,6 +66,7 @@ var ReactSharedInternals = dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase, enableProfilerNestedUpdateScheduledHook = dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook, enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler, @@ -1117,78 +1118,85 @@ function getActiveElement(doc) { return doc.body; } } -function updateInput(element, props) { - var value = getToStringValue(props.value), - type = props.type; - disableInputAttributeSyncing - ? null != props.defaultValue - ? setDefaultValue( - element, - props.type, - getToStringValue(props.defaultValue) - ) - : element.removeAttribute("value") - : null != props.value - ? setDefaultValue(element, props.type, value) - : null != props.defaultValue - ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue)) - : element.removeAttribute("value"); - disableInputAttributeSyncing - ? null == props.defaultChecked - ? element.removeAttribute("checked") - : (element.defaultChecked = !!props.defaultChecked) - : null == props.checked && - null != props.defaultChecked && - (element.defaultChecked = !!props.defaultChecked); - props = props.checked; - null != props && (element.checked = props); +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { if (null != value) if ("number" === type) { if ((0 === value && "" === element.value) || element.value != value) - element.value = "" + value; - } else element.value !== "" + value && (element.value = "" + value); - else - ("submit" !== type && "reset" !== type) || element.removeAttribute("value"); -} -function initInput(element, props, isHydrating) { - if (null != props.value || null != props.defaultValue) { - var type = props.type; + element.value = "" + getToStringValue(value); + } else + element.value !== "" + getToStringValue(value) && + (element.value = "" + getToStringValue(value)); + else if ("submit" === type || "reset" === type) { + element.removeAttribute("value"); + return; + } + disableInputAttributeSyncing + ? null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value") + : null != value + ? setDefaultValue(element, type, getToStringValue(value)) + : null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value"); + disableInputAttributeSyncing + ? null == defaultChecked + ? element.removeAttribute("checked") + : (element.defaultChecked = !!defaultChecked) + : null == checked && + null != defaultChecked && + (element.defaultChecked = !!defaultChecked); + null != checked && + element.checked !== !!checked && + (element.checked = checked); +} +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { + if (null != value || null != defaultValue) { if ( (type = "submit" === type || "reset" === type) && - (void 0 === props.value || null === props.value) + (void 0 === value || null === value) ) return; - var defaultValue = - null != props.defaultValue - ? "" + getToStringValue(props.defaultValue) - : "", + var defaultValueStr = + null != defaultValue ? "" + getToStringValue(defaultValue) : "", initialValue = - null != props.value ? "" + getToStringValue(props.value) : defaultValue; - if (!isHydrating) - if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); - null == value || - (!type && value === element.value) || - (element.value = "" + value); - } else initialValue !== element.value && (element.value = initialValue); + null != value ? "" + getToStringValue(value) : defaultValueStr; + isHydrating || + (disableInputAttributeSyncing + ? null == value || + (!type && "" + getToStringValue(value) === element.value) || + (element.value = "" + getToStringValue(value)) + : initialValue !== element.value && (element.value = initialValue)); disableInputAttributeSyncing - ? null != props.defaultValue && (element.defaultValue = defaultValue) + ? null != defaultValue && (element.defaultValue = defaultValueStr) : (element.defaultValue = initialValue); } - type = element.name; - "" !== type && (element.name = ""); - defaultValue = null != props.checked ? props.checked : props.defaultChecked; - defaultValue = - "function" !== typeof defaultValue && - "symbol" !== typeof defaultValue && - !!defaultValue; - isHydrating || (element.checked = !!defaultValue); + value = element.name; + "" !== value && (element.name = ""); + checked = null != checked ? checked : defaultChecked; + checked = + "function" !== typeof checked && "symbol" !== typeof checked && !!checked; + isHydrating || (element.checked = !!checked); disableInputAttributeSyncing - ? null != props.defaultChecked && - ((element.defaultChecked = !element.defaultChecked), - (element.defaultChecked = !!props.defaultChecked)) - : (element.defaultChecked = !!defaultValue); - "" !== type && (element.name = type); + ? null != defaultChecked && (element.defaultChecked = !!defaultChecked) + : (element.defaultChecked = !!checked); + "" !== value && (element.name = value); } function setDefaultValue(node, type, value) { ("number" === type && getActiveElement(node.ownerDocument) === node) || @@ -1220,40 +1228,47 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) { null !== multiple && (multiple.selected = !0); } } -function updateTextarea(element, props) { - var value = getToStringValue(props.value), - defaultValue = getToStringValue(props.defaultValue); - element.defaultValue = null != defaultValue ? "" + defaultValue : ""; - null != value && - ((value = "" + value), +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { + null != value + ? updateOptions(element, !!multiple, value, !1) + : !!wasMultiple !== !!multiple && + (null != defaultValue + ? updateOptions(element, !!multiple, defaultValue, !0) + : updateOptions(element, !!multiple, multiple ? [] : "", !1)); +} +function updateTextarea(element, value, defaultValue) { + if ( + null != value && + ((value = "" + getToStringValue(value)), value !== element.value && (element.value = value), - null == props.defaultValue && - element.defaultValue !== value && - (element.defaultValue = value)); -} -function initTextarea(element, props) { - var initialValue = props.value; - if (null == initialValue) { - initialValue = props.children; - props = props.defaultValue; - if (null != initialValue) { - if (null != props) throw Error(formatProdErrorMessage(92)); - if (isArrayImpl(initialValue)) { - if (1 < initialValue.length) throw Error(formatProdErrorMessage(93)); - initialValue = initialValue[0]; + null == defaultValue) + ) { + element.defaultValue !== value && (element.defaultValue = value); + return; + } + element.defaultValue = + null != defaultValue ? "" + getToStringValue(defaultValue) : ""; +} +function initTextarea(element, value, defaultValue, children) { + if (null == value) { + if (null != children) { + if (null != defaultValue) throw Error(formatProdErrorMessage(92)); + if (isArrayImpl(children)) { + if (1 < children.length) throw Error(formatProdErrorMessage(93)); + children = children[0]; } - props = initialValue; + defaultValue = children; } - null == props && (props = ""); - initialValue = props; + null == defaultValue && (defaultValue = ""); + value = defaultValue; } - props = getToStringValue(initialValue); - element.defaultValue = props; - initialValue = element.textContent; - initialValue === props && - "" !== initialValue && - null !== initialValue && - (element.value = initialValue); + defaultValue = getToStringValue(value); + element.defaultValue = defaultValue; + children = element.textContent; + children === defaultValue && + "" !== children && + null !== children && + (element.value = children); } function getChildNamespace(parentNamespace, type) { if ( @@ -1319,30 +1334,44 @@ var unitlessNumbers = new Set( " " ) ); -function setValueForStyles(node, styles) { +function setValueForStyle(style, styleName, value) { + var isCustomProperty = 0 === styleName.indexOf("--"); + null == value || "boolean" === typeof value || "" === value + ? isCustomProperty + ? style.setProperty(styleName, "") + : "float" === styleName + ? (style.cssFloat = "") + : (style[styleName] = "") + : isCustomProperty + ? style.setProperty(styleName, value) + : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName) + ? "float" === styleName + ? (style.cssFloat = value) + : (style[styleName] = ("" + value).trim()) + : (style[styleName] = value + "px"); +} +function setValueForStyles(node, styles, prevStyles) { if (null != styles && "object" !== typeof styles) throw Error(formatProdErrorMessage(62)); node = node.style; - for (var styleName in styles) - if (styles.hasOwnProperty(styleName)) { - var value = styles[styleName], - isCustomProperty = 0 === styleName.indexOf("--"); - null == value || "boolean" === typeof value || "" === value - ? isCustomProperty + if (diffInCommitPhase && null != prevStyles) { + for (var styleName in prevStyles) + !prevStyles.hasOwnProperty(styleName) || + (null != styles && styles.hasOwnProperty(styleName)) || + (0 === styleName.indexOf("--") ? node.setProperty(styleName, "") : "float" === styleName ? (node.cssFloat = "") - : (node[styleName] = "") - : isCustomProperty - ? node.setProperty(styleName, value) - : "number" !== typeof value || - 0 === value || - unitlessNumbers.has(styleName) - ? "float" === styleName - ? (node.cssFloat = value) - : (node[styleName] = ("" + value).trim()) - : (node[styleName] = value + "px"); - } + : (node[styleName] = "")); + for (var styleName$19 in styles) + (styleName = styles[styleName$19]), + styles.hasOwnProperty(styleName$19) && + prevStyles[styleName$19] !== styleName && + setValueForStyle(node, styleName$19, styleName); + } else + for (var styleName$20 in styles) + styles.hasOwnProperty(styleName$20) && + setValueForStyle(node, styleName$20, styles[styleName$20]); } function isCustomElement(tagName) { if (-1 === tagName.indexOf("-")) return !1; @@ -1461,7 +1490,15 @@ function restoreStateOfTarget(target) { var props = getFiberCurrentPropsFromNode(target); a: switch (((target = internalInstance.stateNode), internalInstance.type)) { case "input": - updateInput(target, props); + updateInput( + target, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); internalInstance = props.name; if ("radio" === props.type && null != internalInstance) { for (props = target; props.parentNode; ) props = props.parentNode; @@ -1480,13 +1517,21 @@ function restoreStateOfTarget(target) { var otherProps = getFiberCurrentPropsFromNode(otherNode); if (!otherProps) throw Error(formatProdErrorMessage(90)); updateValueIfChanged(otherNode); - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } break a; case "textarea": - updateTextarea(target, props); + updateTextarea(target, props.value, props.defaultValue); break a; case "select": (internalInstance = props.value), @@ -1778,8 +1823,8 @@ function prepareToHydrateHostInstance(fiber) { break; case "video": case "audio": - for (type = 0; type < mediaEventTypes.length; type++) - listenToNonDelegatedEvent(mediaEventTypes[type], instance); + for (var i = 0; i < mediaEventTypes.length; i++) + listenToNonDelegatedEvent(mediaEventTypes[i], instance); break; case "source": listenToNonDelegatedEvent("error", instance); @@ -1796,7 +1841,15 @@ function prepareToHydrateHostInstance(fiber) { case "input": listenToNonDelegatedEvent("invalid", instance); track(instance); - initInput(instance, props, !0); + initInput( + instance, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + !0 + ); break; case "select": listenToNonDelegatedEvent("invalid", instance); @@ -1804,22 +1857,30 @@ function prepareToHydrateHostInstance(fiber) { case "textarea": listenToNonDelegatedEvent("invalid", instance), track(instance), - initTextarea(instance, props); + initTextarea(instance, props.value, props.defaultValue, props.children); + } + i = null; + var children = props.children; + if ( + ("string" === typeof children || "number" === typeof children) && + instance.textContent !== "" + children + ) { + if (!0 !== props.suppressHydrationWarning) { + var serverText = instance.textContent; + normalizeMarkupForTextOrAttribute(children); + normalizeMarkupForTextOrAttribute(serverText); + } + diffInCommitPhase + ? "body" !== type && (instance.textContent = children) + : (i = ["children", children]); } - var updatePayload = null; - type = props.children; - ("string" !== typeof type && "number" !== typeof type) || - instance.textContent === "" + type || - (!0 !== props.suppressHydrationWarning && - ((updatePayload = instance.textContent), - normalizeMarkupForTextOrAttribute(type), - normalizeMarkupForTextOrAttribute(updatePayload)), - (updatePayload = ["children", type])); null != props.onScroll && listenToNonDelegatedEvent("scroll", instance); null != props.onClick && (instance.onclick = noop$1); - instance = updatePayload; - fiber.updateQueue = instance; - return null !== instance ? !0 : !1; + instance = i; + return diffInCommitPhase || + ((fiber.updateQueue = instance), null === instance) + ? !1 + : !0; } function popToNextHostParent(fiber) { for (hydrationParentFiber = fiber.return; hydrationParentFiber; ) @@ -3294,10 +3355,10 @@ createFunctionComponentUpdateQueue = function () { function use(usable) { if (null !== usable && "object" === typeof usable) { if ("function" === typeof usable.then) { - var index$44 = thenableIndexCounter; + var index$47 = thenableIndexCounter; thenableIndexCounter += 1; null === thenableState && (thenableState = []); - usable = trackUsedThenable(thenableState, usable, index$44); + usable = trackUsedThenable(thenableState, usable, index$47); null === currentlyRenderingFiber$1.alternate && (null === workInProgressHook ? null === currentlyRenderingFiber$1.memoizedState @@ -3785,16 +3846,16 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$50 = enqueueUpdate(provider, fiber, lane); - if (null !== root$50) { + var root$53 = enqueueUpdate(provider, fiber, lane); + if (null !== root$53) { var eventTime = requestEventTime(); - scheduleUpdateOnFiber(root$50, provider, lane, eventTime); - entangleTransitions(root$50, provider, lane); + scheduleUpdateOnFiber(root$53, provider, lane, eventTime); + entangleTransitions(root$53, provider, lane); } provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$50 && + null !== root$53 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -4003,15 +4064,15 @@ var HooksDispatcherOnMount = { getServerSnapshot = getServerSnapshot(); } else { getServerSnapshot = getSnapshot(); - var root$46 = workInProgressRoot; - if (null === root$46) throw Error(formatProdErrorMessage(349)); - includesBlockingLane(root$46, renderLanes$1) || + var root$49 = workInProgressRoot; + if (null === root$49) throw Error(formatProdErrorMessage(349)); + includesBlockingLane(root$49, renderLanes$1) || pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot); } hook.memoizedState = getServerSnapshot; - root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot }; - hook.queue = root$46; - mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [ + root$49 = { value: getServerSnapshot, getSnapshot: getSnapshot }; + hook.queue = root$49; + mountEffect(subscribeToStore.bind(null, fiber, root$49, subscribe), [ subscribe ]); fiber.flags |= 2048; @@ -4020,7 +4081,7 @@ var HooksDispatcherOnMount = { updateStoreInstance.bind( null, fiber, - root$46, + root$49, getServerSnapshot, getSnapshot ), @@ -4588,10 +4649,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$63 = workInProgress.stateNode; + root$66 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$63.incompleteTransitions.has(transition)) { + if (!root$66.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -4599,11 +4660,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$63.incompleteTransitions.set(transition, markerInstance); + root$66.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$63.incompleteTransitions.forEach(function (markerInstance) { + root$66.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5313,14 +5374,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { } JSCompiler_temp = current.memoizedState; if (null !== JSCompiler_temp) { - var dehydrated$70 = JSCompiler_temp.dehydrated; - if (null !== dehydrated$70) + var dehydrated$73 = JSCompiler_temp.dehydrated; + if (null !== dehydrated$73) return updateDehydratedSuspenseComponent( current, workInProgress, didSuspend, nextProps, - dehydrated$70, + dehydrated$73, JSCompiler_temp, renderLanes ); @@ -5330,7 +5391,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { showFallback = nextProps.fallback; didSuspend = workInProgress.mode; JSCompiler_temp = current.child; - dehydrated$70 = JSCompiler_temp.sibling; + dehydrated$73 = JSCompiler_temp.sibling; var primaryChildProps = { mode: "hidden", children: nextProps.children }; 0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp ? ((nextProps = workInProgress.child), @@ -5344,8 +5405,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { (workInProgress.deletions = null)) : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)), (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280)); - null !== dehydrated$70 - ? (showFallback = createWorkInProgress(dehydrated$70, showFallback)) + null !== dehydrated$73 + ? (showFallback = createWorkInProgress(dehydrated$73, showFallback)) : ((showFallback = createFiberFromFragment( showFallback, didSuspend, @@ -5364,10 +5425,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? (didSuspend = mountSuspenseOffscreenState(renderLanes)) : ((JSCompiler_temp = didSuspend.cachePool), null !== JSCompiler_temp - ? ((dehydrated$70 = CacheContext._currentValue), + ? ((dehydrated$73 = CacheContext._currentValue), (JSCompiler_temp = - JSCompiler_temp.parent !== dehydrated$70 - ? { parent: dehydrated$70, pool: dehydrated$70 } + JSCompiler_temp.parent !== dehydrated$73 + ? { parent: dehydrated$73, pool: dehydrated$73 } : JSCompiler_temp)) : (JSCompiler_temp = getSuspendedCache()), (didSuspend = { @@ -5381,23 +5442,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ((JSCompiler_temp = enableTransitionTracing ? markerInstanceStack.current : null), - (dehydrated$70 = showFallback.updateQueue), + (dehydrated$73 = showFallback.updateQueue), (primaryChildProps = current.updateQueue), - null === dehydrated$70 + null === dehydrated$73 ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null }) - : dehydrated$70 === primaryChildProps + : dehydrated$73 === primaryChildProps ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null !== primaryChildProps ? primaryChildProps.retryQueue : null }) - : ((dehydrated$70.transitions = didSuspend), - (dehydrated$70.markerInstances = JSCompiler_temp)))); + : ((dehydrated$73.transitions = didSuspend), + (dehydrated$73.markerInstances = JSCompiler_temp)))); showFallback.childLanes = current.childLanes & ~renderLanes; workInProgress.memoizedState = SUSPENDED_MARKER; return nextProps; @@ -6373,62 +6434,67 @@ function markRef(workInProgress) { } function updateHostComponent(current, workInProgress, type, newProps) { current = current.memoizedProps; - if (current !== newProps) { - type = null; - var propKey, - styleName, - styleUpdates = null; - for (propKey in current) - if ( - !newProps.hasOwnProperty(propKey) && - current.hasOwnProperty(propKey) && - null != current[propKey] - ) - switch (propKey) { - case "style": - var lastStyle = current[propKey]; - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - break; - default: - (type = type || []).push(propKey, null); - } - for (propKey in newProps) { - lastStyle = newProps[propKey]; - var lastProp = null != current ? current[propKey] : void 0; - if ( - newProps.hasOwnProperty(propKey) && - lastStyle !== lastProp && - (null != lastStyle || null != lastProp) - ) - switch (propKey) { - case "style": - if (lastProp) { - for (styleName in lastProp) - !lastProp.hasOwnProperty(styleName) || - (lastStyle && lastStyle.hasOwnProperty(styleName)) || - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - lastProp[styleName] !== lastStyle[styleName] && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = lastStyle[styleName])); - } else - styleUpdates || - (type || (type = []), type.push(propKey, styleUpdates)), - (styleUpdates = lastStyle); - break; - default: - (type = type || []).push(propKey, lastStyle); + if (current !== newProps) + if (diffInCommitPhase) markUpdate(workInProgress); + else { + if (diffInCommitPhase) newProps = null; + else { + type = null; + var propKey, + styleName, + styleUpdates = null; + for (propKey in current) + if ( + !newProps.hasOwnProperty(propKey) && + current.hasOwnProperty(propKey) && + null != current[propKey] + ) + switch (propKey) { + case "style": + var lastStyle = current[propKey]; + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + break; + default: + (type = type || []).push(propKey, null); + } + for (propKey in newProps) { + lastStyle = newProps[propKey]; + var lastProp = null != current ? current[propKey] : void 0; + if ( + newProps.hasOwnProperty(propKey) && + lastStyle !== lastProp && + (null != lastStyle || null != lastProp) + ) + switch (propKey) { + case "style": + if (lastProp) { + for (styleName in lastProp) + !lastProp.hasOwnProperty(styleName) || + (lastStyle && lastStyle.hasOwnProperty(styleName)) || + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + lastProp[styleName] !== lastStyle[styleName] && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = lastStyle[styleName])); + } else + styleUpdates || + (type || (type = []), type.push(propKey, styleUpdates)), + (styleUpdates = lastStyle); + break; + default: + (type = type || []).push(propKey, lastStyle); + } } + styleUpdates && (type = type || []).push("style", styleUpdates); + newProps = type; + } + (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); } - styleUpdates && (type = type || []).push("style", styleUpdates); - newProps = type; - (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); - } } function preloadResourceAndSuspendIfNeeded(workInProgress, resource) { if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4)) @@ -6472,14 +6538,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$102 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$102 = lastTailNode), + for (var lastTailNode$105 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$105 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$102 + null === lastTailNode$105 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$102.sibling = null); + : (lastTailNode$105.sibling = null); } } function bubbleProperties(completedWork) { @@ -6491,53 +6557,53 @@ function bubbleProperties(completedWork) { if (didBailout) if (0 !== (completedWork.mode & 2)) { for ( - var treeBaseDuration$104 = completedWork.selfBaseDuration, - child$105 = completedWork.child; - null !== child$105; + var treeBaseDuration$107 = completedWork.selfBaseDuration, + child$108 = completedWork.child; + null !== child$108; ) - (newChildLanes |= child$105.lanes | child$105.childLanes), - (subtreeFlags |= child$105.subtreeFlags & 31457280), - (subtreeFlags |= child$105.flags & 31457280), - (treeBaseDuration$104 += child$105.treeBaseDuration), - (child$105 = child$105.sibling); - completedWork.treeBaseDuration = treeBaseDuration$104; + (newChildLanes |= child$108.lanes | child$108.childLanes), + (subtreeFlags |= child$108.subtreeFlags & 31457280), + (subtreeFlags |= child$108.flags & 31457280), + (treeBaseDuration$107 += child$108.treeBaseDuration), + (child$108 = child$108.sibling); + completedWork.treeBaseDuration = treeBaseDuration$107; } else for ( - treeBaseDuration$104 = completedWork.child; - null !== treeBaseDuration$104; + treeBaseDuration$107 = completedWork.child; + null !== treeBaseDuration$107; ) (newChildLanes |= - treeBaseDuration$104.lanes | treeBaseDuration$104.childLanes), - (subtreeFlags |= treeBaseDuration$104.subtreeFlags & 31457280), - (subtreeFlags |= treeBaseDuration$104.flags & 31457280), - (treeBaseDuration$104.return = completedWork), - (treeBaseDuration$104 = treeBaseDuration$104.sibling); + treeBaseDuration$107.lanes | treeBaseDuration$107.childLanes), + (subtreeFlags |= treeBaseDuration$107.subtreeFlags & 31457280), + (subtreeFlags |= treeBaseDuration$107.flags & 31457280), + (treeBaseDuration$107.return = completedWork), + (treeBaseDuration$107 = treeBaseDuration$107.sibling); else if (0 !== (completedWork.mode & 2)) { - treeBaseDuration$104 = completedWork.actualDuration; - child$105 = completedWork.selfBaseDuration; + treeBaseDuration$107 = completedWork.actualDuration; + child$108 = completedWork.selfBaseDuration; for (var child = completedWork.child; null !== child; ) (newChildLanes |= child.lanes | child.childLanes), (subtreeFlags |= child.subtreeFlags), (subtreeFlags |= child.flags), - (treeBaseDuration$104 += child.actualDuration), - (child$105 += child.treeBaseDuration), + (treeBaseDuration$107 += child.actualDuration), + (child$108 += child.treeBaseDuration), (child = child.sibling); - completedWork.actualDuration = treeBaseDuration$104; - completedWork.treeBaseDuration = child$105; + completedWork.actualDuration = treeBaseDuration$107; + completedWork.treeBaseDuration = child$108; } else for ( - treeBaseDuration$104 = completedWork.child; - null !== treeBaseDuration$104; + treeBaseDuration$107 = completedWork.child; + null !== treeBaseDuration$107; ) (newChildLanes |= - treeBaseDuration$104.lanes | treeBaseDuration$104.childLanes), - (subtreeFlags |= treeBaseDuration$104.subtreeFlags), - (subtreeFlags |= treeBaseDuration$104.flags), - (treeBaseDuration$104.return = completedWork), - (treeBaseDuration$104 = treeBaseDuration$104.sibling); + treeBaseDuration$107.lanes | treeBaseDuration$107.childLanes), + (subtreeFlags |= treeBaseDuration$107.subtreeFlags), + (subtreeFlags |= treeBaseDuration$107.flags), + (treeBaseDuration$107.return = completedWork), + (treeBaseDuration$107 = treeBaseDuration$107.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -7341,8 +7407,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { recordLayoutEffectDuration(current); } else ref(null); - } catch (error$138) { - captureCommitPhaseError(current, nearestMountedAncestor, error$138); + } catch (error$141) { + captureCommitPhaseError(current, nearestMountedAncestor, error$141); } else ref.current = null; } @@ -7379,7 +7445,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$207) { + } catch (e$210) { JSCompiler_temp = null; break a; } @@ -7636,11 +7702,11 @@ function commitPassiveEffectDurations(finishedRoot, finishedWork) { var _finishedWork$memoize = finishedWork.memoizedProps, id = _finishedWork$memoize.id; _finishedWork$memoize = _finishedWork$memoize.onPostCommit; - var commitTime$140 = commitTime, + var commitTime$143 = commitTime, phase = null === finishedWork.alternate ? "mount" : "update"; currentUpdateIsNested && (phase = "nested-update"); "function" === typeof _finishedWork$memoize && - _finishedWork$memoize(id, phase, finishedRoot, commitTime$140); + _finishedWork$memoize(id, phase, finishedRoot, commitTime$143); finishedWork = finishedWork.return; a: for (; null !== finishedWork; ) { switch (finishedWork.tag) { @@ -7667,8 +7733,8 @@ function commitHookLayoutEffects(finishedWork, hookFlags) { } else try { commitHookEffectListMount(hookFlags, finishedWork); - } catch (error$142) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$142); + } catch (error$145) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$145); } } function commitClassCallbacks(finishedWork) { @@ -7767,11 +7833,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { } else try { finishedRoot.componentDidMount(); - } catch (error$143) { + } catch (error$146) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$143 + error$146 ); } else { @@ -7788,11 +7854,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$144) { + } catch (error$147) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$144 + error$147 ); } recordLayoutEffectDuration(finishedWork); @@ -7803,11 +7869,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$145) { + } catch (error$148) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$145 + error$148 ); } } @@ -8513,22 +8579,22 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { startLayoutEffectTimer(), commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$160) { + } catch (error$163) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$160 + error$163 ); } recordLayoutEffectDuration(finishedWork); } else try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$161) { + } catch (error$164) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$161 + error$164 ); } } @@ -8698,20 +8764,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) { ) try { var domElement = finishedWork.stateNode, + type = finishedWork.type, + oldProps = current.memoizedProps, newProps = finishedWork.memoizedProps; - updateProperties( - domElement, - flags, - finishedWork.type, - current.memoizedProps, - newProps - ); + diffInCommitPhase + ? updateProperties(domElement, type, oldProps, newProps) + : updatePropertiesWithDiff( + domElement, + flags, + type, + oldProps, + newProps + ); domElement[internalPropsKey] = newProps; - } catch (error$162) { + } catch (error$165) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$162 + error$165 ); } break; @@ -8747,8 +8817,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$163) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$163); + } catch (error$166) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$166); } } if ( @@ -8760,13 +8830,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (hoistableRoot = finishedWork.type), (maybeNodes = finishedWork.updateQueue), (finishedWork.updateQueue = null), - null !== maybeNodes)) + null !== maybeNodes || diffInCommitPhase)) ) try { - updateProperties(flags, maybeNodes, hoistableRoot, current, root), + diffInCommitPhase + ? updateProperties(flags, hoistableRoot, current, root) + : updatePropertiesWithDiff( + flags, + maybeNodes, + hoistableRoot, + current, + root + ), (flags[internalPropsKey] = root); - } catch (error$166) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$166); + } catch (error$169) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$169); } break; case 6: @@ -8779,8 +8857,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$167) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$167); + } catch (error$170) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$170); } } break; @@ -8794,8 +8872,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$168) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$168); + } catch (error$171) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$171); } break; case 4: @@ -8825,8 +8903,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$170) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$170); + } catch (error$173) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$173); } current = finishedWork.updateQueue; null !== current && @@ -8839,15 +8917,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== current && safelyDetachRef(current, current.return); domElement = null !== finishedWork.memoizedState; - newProps = null !== current && null !== current.memoizedState; + type = null !== current && null !== current.memoizedState; finishedWork.mode & 1 - ? ((suspenseCallback = offscreenSubtreeIsHidden), - (retryQueue = offscreenSubtreeWasHidden), - (offscreenSubtreeIsHidden = suspenseCallback || domElement), - (offscreenSubtreeWasHidden = retryQueue || newProps), + ? ((oldProps = offscreenSubtreeIsHidden), + (newProps = offscreenSubtreeWasHidden), + (offscreenSubtreeIsHidden = oldProps || domElement), + (offscreenSubtreeWasHidden = newProps || type), recursivelyTraverseMutationEffects(root, finishedWork), - (offscreenSubtreeWasHidden = retryQueue), - (offscreenSubtreeIsHidden = suspenseCallback)) + (offscreenSubtreeWasHidden = newProps), + (offscreenSubtreeIsHidden = oldProps)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); root = finishedWork.stateNode; @@ -8862,7 +8940,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) { domElement && ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden), null === current || - newProps || + type || root || (0 !== (finishedWork.mode & 1) && recursivelyTraverseDisappearLayoutEffects(finishedWork))), @@ -8904,11 +8982,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$150) { + } catch (error$153) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$150 + error$153 ); } } else if ( @@ -8983,21 +9061,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$151 = JSCompiler_inline_result.stateNode; + var parent$154 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$151, ""), + (setTextContent(parent$154, ""), (JSCompiler_inline_result.flags &= -33)); - var before$152 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$152, parent$151); + var before$155 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$155, parent$154); break; case 3: case 4: - var parent$153 = JSCompiler_inline_result.stateNode.containerInfo, - before$154 = getHostSibling(finishedWork); + var parent$156 = JSCompiler_inline_result.stateNode.containerInfo, + before$157 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$154, - parent$153 + before$157, + parent$156 ); break; default: @@ -9189,8 +9267,8 @@ function commitHookPassiveMountEffects(finishedWork, hookFlags) { } else try { commitHookEffectListMount(hookFlags, finishedWork); - } catch (error$176) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$176); + } catch (error$179) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$179); } } function commitOffscreenPassiveMountEffects(current, finishedWork, instance) { @@ -9489,9 +9567,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$181 = finishedWork.stateNode; + var instance$184 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$181._visibility & 4 + ? instance$184._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9504,7 +9582,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$181._visibility |= 4), + : ((instance$184._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9512,7 +9590,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$181._visibility |= 4), + : ((instance$184._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9525,7 +9603,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$181 + instance$184 ); break; case 24: @@ -9899,13 +9977,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { isFlushingWork = !0; do { var didPerformSomeWork = !1; - for (var root$189 = firstScheduledRoot; null !== root$189; ) { + for (var root$192 = firstScheduledRoot; null !== root$192; ) { if ( - (!onlyLegacy || 0 === root$189.tag) && + (!onlyLegacy || 0 === root$192.tag) && 0 !== (getNextLanes( - root$189, - root$189 === workInProgressRoot$jscomp$0 + root$192, + root$192 === workInProgressRoot$jscomp$0 ? workInProgressRootRenderLanes$jscomp$0 : 0 ) & @@ -9913,7 +9991,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { ) try { didPerformSomeWork = !0; - var root = root$189; + var root = root$192; currentUpdateIsNested = nestedUpdateScheduled; nestedUpdateScheduled = !1; if (0 !== (executionContext & 6)) @@ -9958,7 +10036,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { } catch (error) { null === errors ? (errors = [error]) : errors.push(error); } - root$189 = root$189.next; + root$192 = root$192.next; } } while (didPerformSomeWork); isFlushingWork = !1; @@ -10304,16 +10382,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) { exitStatus = renderRootSync(root, lanes); if (2 === exitStatus) { errorRetryLanes = lanes; - var errorRetryLanes$192 = getLanesToRetrySynchronouslyOnError( + var errorRetryLanes$195 = getLanesToRetrySynchronouslyOnError( root, errorRetryLanes ); - 0 !== errorRetryLanes$192 && - ((lanes = errorRetryLanes$192), + 0 !== errorRetryLanes$195 && + ((lanes = errorRetryLanes$195), (exitStatus = recoverFromConcurrentError( root, errorRetryLanes, - errorRetryLanes$192 + errorRetryLanes$195 ))); } if (1 === exitStatus) @@ -10374,14 +10452,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) { if ((lanes & 8388480) === lanes) break; exitStatus = lanes; errorRetryLanes = root.eventTimes; - for (errorRetryLanes$192 = -1; 0 < exitStatus; ) { + for (errorRetryLanes$195 = -1; 0 < exitStatus; ) { var index$3 = 31 - clz32(exitStatus), lane = 1 << index$3; index$3 = errorRetryLanes[index$3]; - index$3 > errorRetryLanes$192 && (errorRetryLanes$192 = index$3); + index$3 > errorRetryLanes$195 && (errorRetryLanes$195 = index$3); exitStatus &= ~lane; } - exitStatus = errorRetryLanes$192; + exitStatus = errorRetryLanes$195; exitStatus = now$1() - exitStatus; exitStatus = (120 > exitStatus @@ -10752,8 +10830,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$195) { - handleThrow(root, thrownValue$195); + } catch (thrownValue$198) { + handleThrow(root, thrownValue$198); } while (1); resetContextDependencies(); @@ -10870,8 +10948,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$197) { - handleThrow(root, thrownValue$197); + } catch (thrownValue$200) { + handleThrow(root, thrownValue$200); } while (1); resetContextDependencies(); @@ -11058,10 +11136,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) { }; suspenseBoundary.updateQueue = newOffscreenQueue; } else { - var retryQueue$58 = offscreenQueue.retryQueue; - null === retryQueue$58 + var retryQueue$61 = offscreenQueue.retryQueue; + null === retryQueue$61 ? (offscreenQueue.retryQueue = new Set([wakeable])) - : retryQueue$58.add(wakeable); + : retryQueue$61.add(wakeable); } } break; @@ -11272,7 +11350,7 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$201 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$204 = commitBeforeMutationEffects( root, finishedWork ); @@ -11280,7 +11358,7 @@ function commitRootImpl( enableProfilerNestedUpdateScheduledHook && (rootCommittingMutationOrLayoutEffects = root); commitMutationEffects(root, finishedWork, lanes); - shouldFireAfterActiveInstanceBlur$201 && + shouldFireAfterActiveInstanceBlur$204 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -11374,7 +11452,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$202 = rootWithPendingPassiveEffects, + var root$205 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -11390,7 +11468,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$202, remainingLanes); + releaseRootPooledCache(root$205, remainingLanes); } } return !1; @@ -12756,12 +12834,12 @@ function getPublicRootInstance(container) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$205 = fiber.stateNode; - if (root$205.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$205.pendingLanes); + var root$208 = fiber.stateNode; + if (root$208.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$208.pendingLanes); 0 !== lanes && - (markRootEntangled(root$205, lanes | 2), - ensureRootIsScheduled(root$205), + (markRootEntangled(root$208, lanes | 2), + ensureRootIsScheduled(root$208), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now$1() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -13333,19 +13411,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$353; + var JSCompiler_inline_result$jscomp$402; if (canUseDOM) { - var isSupported$jscomp$inline_1641 = "oninput" in document; - if (!isSupported$jscomp$inline_1641) { - var element$jscomp$inline_1642 = document.createElement("div"); - element$jscomp$inline_1642.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1641 = - "function" === typeof element$jscomp$inline_1642.oninput; + var isSupported$jscomp$inline_1692 = "oninput" in document; + if (!isSupported$jscomp$inline_1692) { + var element$jscomp$inline_1693 = document.createElement("div"); + element$jscomp$inline_1693.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1692 = + "function" === typeof element$jscomp$inline_1693.oninput; } - JSCompiler_inline_result$jscomp$353 = isSupported$jscomp$inline_1641; - } else JSCompiler_inline_result$jscomp$353 = !1; + JSCompiler_inline_result$jscomp$402 = isSupported$jscomp$inline_1692; + } else JSCompiler_inline_result$jscomp$402 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$353 && + JSCompiler_inline_result$jscomp$402 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13654,20 +13732,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1682 = 0; - i$jscomp$inline_1682 < simpleEventPluginEvents.length; - i$jscomp$inline_1682++ + var i$jscomp$inline_1733 = 0; + i$jscomp$inline_1733 < simpleEventPluginEvents.length; + i$jscomp$inline_1733++ ) { - var eventName$jscomp$inline_1683 = - simpleEventPluginEvents[i$jscomp$inline_1682], - domEventName$jscomp$inline_1684 = - eventName$jscomp$inline_1683.toLowerCase(), - capitalizedEvent$jscomp$inline_1685 = - eventName$jscomp$inline_1683[0].toUpperCase() + - eventName$jscomp$inline_1683.slice(1); + var eventName$jscomp$inline_1734 = + simpleEventPluginEvents[i$jscomp$inline_1733], + domEventName$jscomp$inline_1735 = + eventName$jscomp$inline_1734.toLowerCase(), + capitalizedEvent$jscomp$inline_1736 = + eventName$jscomp$inline_1734[0].toUpperCase() + + eventName$jscomp$inline_1734.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1684, - "on" + capitalizedEvent$jscomp$inline_1685 + domEventName$jscomp$inline_1735, + "on" + capitalizedEvent$jscomp$inline_1736 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -14499,7 +14577,7 @@ function normalizeMarkupForTextOrAttribute(markup) { .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, ""); } function noop$1() {} -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": "string" === typeof value @@ -14524,7 +14602,7 @@ function setProp(domElement, tag, key, value, props) { setValueForKnownAttribute(domElement, key, value); break; case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "src": case "href": @@ -14740,6 +14818,9 @@ function setProp(domElement, tag, key, value, props) { value ); break; + case "is": + setValueForAttribute(domElement, "is", value); + break; case "innerText": case "textContent": if (enableCustomElementPropertySupport) break; @@ -14753,10 +14834,10 @@ function setProp(domElement, tag, key, value, props) { setValueForAttribute(domElement, key, value); } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "dangerouslySetInnerHTML": if (null != value) { @@ -14794,23 +14875,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) { if (enableCustomElementPropertySupport) a: { props = value; - if ("o" === key[0] && "n" === key[1]) { - tag = key.endsWith("Capture"); - value = key.substr(2, tag ? key.length - 9 : void 0); - var prevProps = getFiberCurrentPropsFromNode(domElement); - prevProps = null != prevProps ? prevProps[key] : null; - "function" === typeof prevProps && - domElement.removeEventListener(value, prevProps, tag); - if ("function" === typeof props) { - "function" !== typeof prevProps && - null !== prevProps && - (key in domElement - ? (domElement[key] = null) - : domElement.hasAttribute(key) && - domElement.removeAttribute(key)); - domElement.addEventListener(value, props, tag); - break a; - } + if ( + "o" === key[0] && + "n" === key[1] && + ((tag = key.endsWith("Capture")), + (value = key.substr(2, tag ? key.length - 9 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(value, prevValue, tag), + "function" === typeof props) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(value, props, tag); + break a; } key in domElement ? (domElement[key] = props) @@ -14836,7 +14919,12 @@ function setInitialProperties(domElement, tag, props) { break; case "input": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey in props) + var type = null, + value = null, + defaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in props) if (props.hasOwnProperty(propKey)) { var propValue = props[propKey]; if (null != propValue) @@ -14846,9 +14934,11 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== typeof propValue && "boolean" !== typeof propValue && - domElement.setAttribute(propKey, propValue); + ((type = propValue), + domElement.setAttribute(propKey, propValue)); break; case "checked": + checked = propValue; propValue = null != propValue ? propValue : props.defaultChecked; domElement.checked = @@ -14856,7 +14946,14 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== propValue; break; + case "defaultChecked": + defaultChecked = propValue; + break; case "value": + value = propValue; + break; + case "defaultValue": + defaultValue = propValue; break; case "children": case "dangerouslySetInnerHTML": @@ -14864,60 +14961,81 @@ function setInitialProperties(domElement, tag, props) { throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } track(domElement); - initInput(domElement, props, !1); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + !1 + ); return; case "select": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$217 in props) + var propKey = (value = defaultValue = null); + for (type in props) if ( - props.hasOwnProperty(propKey$217) && - ((propKey = props[propKey$217]), null != propKey) + props.hasOwnProperty(type) && + ((checked = props[type]), null != checked) ) - switch (propKey$217) { + switch (type) { case "value": + defaultValue = checked; break; + case "defaultValue": + value = checked; + break; + case "multiple": + propKey = checked; default: - setProp(domElement, tag, propKey$217, propKey, props); + setProp(domElement, tag, type, checked, props, null); } - domElement.multiple = !!props.multiple; - tag = props.value; + tag = defaultValue; + props = value; + domElement.multiple = !!propKey; null != tag - ? updateOptions(domElement, !!props.multiple, tag, !1) - : null != props.defaultValue && - updateOptions(domElement, !!props.multiple, props.defaultValue, !0); + ? updateOptions(domElement, !!propKey, tag, !1) + : null != props && updateOptions(domElement, !!propKey, props, !0); return; case "textarea": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$219 in props) + defaultValue = type = propKey = null; + for (value in props) if ( - props.hasOwnProperty(propKey$219) && - ((propKey = props[propKey$219]), null != propKey) + props.hasOwnProperty(value) && + ((checked = props[value]), null != checked) ) - switch (propKey$219) { + switch (value) { case "value": + propKey = checked; + break; + case "defaultValue": + type = checked; break; case "children": + defaultValue = checked; break; case "dangerouslySetInnerHTML": - if (null != propKey) throw Error(formatProdErrorMessage(91)); + if (null != checked) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey$219, propKey, props); + setProp(domElement, tag, value, checked, props); } track(domElement); - initTextarea(domElement, props); + initTextarea(domElement, propKey, type, defaultValue); return; case "option": - for (var propKey$221 in props) + for (checked in props) if ( - props.hasOwnProperty(propKey$221) && - ((propKey = props[propKey$221]), null != propKey) + props.hasOwnProperty(checked) && + ((propKey = props[checked]), null != propKey) ) - switch (propKey$221) { + switch (checked) { case "selected": domElement.selected = propKey && @@ -14925,10 +15043,8 @@ function setInitialProperties(domElement, tag, props) { "symbol" !== typeof propKey; break; default: - setProp(domElement, tag, propKey$221, propKey, props); + setProp(domElement, tag, checked, propKey, props); } - null != props.value && - domElement.setAttribute("value", "" + getToStringValue(props.value)); return; case "dialog": listenToNonDelegatedEvent("cancel", domElement); @@ -14967,41 +15083,389 @@ function setInitialProperties(domElement, tag, props) { case "track": case "wbr": case "menuitem": - for (var propKey$223 in props) + for (defaultChecked in props) if ( - props.hasOwnProperty(propKey$223) && - ((propKey = props[propKey$223]), null != propKey) + props.hasOwnProperty(defaultChecked) && + ((propKey = props[defaultChecked]), null != propKey) ) - switch (propKey$223) { + switch (defaultChecked) { case "children": case "dangerouslySetInnerHTML": throw Error(formatProdErrorMessage(137, tag)); default: - setProp(domElement, tag, propKey$223, propKey, props); + setProp(domElement, tag, defaultChecked, propKey, props, null); } return; default: if (isCustomElement(tag)) { - for (var propKey$225 in props) - props.hasOwnProperty(propKey$225) && - ((propKey = props[propKey$225]), + for (propValue in props) + props.hasOwnProperty(propValue) && + ((propKey = props[propValue]), null != propKey && setPropOnCustomElement( domElement, tag, - propKey$225, + propValue, propKey, - props + props, + null )); return; } } - for (propValue in props) - props.hasOwnProperty(propValue) && - ((propKey = props[propValue]), - null != propKey && setProp(domElement, tag, propValue, propKey, props)); + for (defaultValue in props) + props.hasOwnProperty(defaultValue) && + ((propKey = props[defaultValue]), + null != propKey && + setProp(domElement, tag, defaultValue, propKey, props, null)); } -function updateProperties( +function updateProperties(domElement, tag, lastProps, nextProps) { + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": + break; + case "input": + var name = null, + type = null, + value = null, + defaultValue = null, + lastDefaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in lastProps) { + var lastProp = lastProps[propKey]; + if (lastProps.hasOwnProperty(propKey) && null != lastProp) + switch (propKey) { + case "checked": + nextProps.hasOwnProperty(propKey) || + ((lastProp = nextProps.defaultChecked), + (domElement.checked = + !!lastProp && + "function" !== typeof lastProp && + "symbol" !== lastProp)); + break; + case "value": + break; + case "defaultValue": + lastDefaultValue = lastProp; + default: + nextProps.hasOwnProperty(propKey) || + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + for (var propKey$236 in nextProps) { + var propKey = nextProps[propKey$236]; + lastProp = lastProps[propKey$236]; + if ( + nextProps.hasOwnProperty(propKey$236) && + (null != propKey || null != lastProp) + ) + switch (propKey$236) { + case "type": + type = propKey; + propKey !== lastProp && + (null != propKey && + "function" !== typeof propKey && + "symbol" !== typeof propKey && + "boolean" !== typeof propKey + ? domElement.setAttribute(propKey$236, propKey) + : domElement.removeAttribute(propKey$236)); + break; + case "name": + name = propKey; + break; + case "checked": + checked = propKey; + propKey !== lastProp && + ((propKey = + null != propKey ? propKey : nextProps.defaultChecked), + (domElement.checked = + !!propKey && + "function" !== typeof propKey && + "symbol" !== propKey)); + break; + case "defaultChecked": + defaultChecked = propKey; + break; + case "value": + value = propKey; + break; + case "defaultValue": + defaultValue = propKey; + break; + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + propKey !== lastProp && + setProp( + domElement, + tag, + propKey$236, + propKey, + nextProps, + lastProp + ); + } + } + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + case "select": + defaultValue = value = propKey = propKey$236 = null; + for (type in lastProps) + if ( + ((lastDefaultValue = lastProps[type]), + lastProps.hasOwnProperty(type) && null != lastDefaultValue) + ) + switch (type) { + case "value": + break; + case "multiple": + defaultValue = lastDefaultValue; + default: + nextProps.hasOwnProperty(type) || + setProp( + domElement, + tag, + type, + null, + nextProps, + lastDefaultValue + ); + } + for (name in nextProps) + if ( + ((type = nextProps[name]), + (lastDefaultValue = lastProps[name]), + nextProps.hasOwnProperty(name) && + (null != type || null != lastDefaultValue)) + ) + switch (name) { + case "value": + propKey$236 = type; + break; + case "defaultValue": + propKey = type; + break; + case "multiple": + value = type; + default: + type !== lastDefaultValue && + setProp( + domElement, + tag, + name, + type, + nextProps, + lastDefaultValue + ); + } + updateSelect(domElement, propKey$236, propKey, value, defaultValue); + return; + case "textarea": + propKey = propKey$236 = null; + for (defaultValue in lastProps) + if ( + ((name = lastProps[defaultValue]), + lastProps.hasOwnProperty(defaultValue) && + null != name && + !nextProps.hasOwnProperty(defaultValue)) + ) + switch (defaultValue) { + case "value": + break; + case "children": + break; + default: + setProp(domElement, tag, defaultValue, null, nextProps, name); + } + for (value in nextProps) + if ( + ((name = nextProps[value]), + (type = lastProps[value]), + nextProps.hasOwnProperty(value) && (null != name || null != type)) + ) + switch (value) { + case "value": + propKey$236 = name; + break; + case "defaultValue": + propKey = name; + break; + case "children": + break; + case "dangerouslySetInnerHTML": + if (null != name) throw Error(formatProdErrorMessage(91)); + break; + default: + name !== type && + setProp(domElement, tag, value, name, nextProps, type); + } + updateTextarea(domElement, propKey$236, propKey); + return; + case "option": + for (var propKey$254 in lastProps) + if ( + ((propKey$236 = lastProps[propKey$254]), + lastProps.hasOwnProperty(propKey$254) && + null != propKey$236 && + !nextProps.hasOwnProperty(propKey$254)) + ) + switch (propKey$254) { + case "selected": + domElement.selected = !1; + break; + default: + setProp( + domElement, + tag, + propKey$254, + null, + nextProps, + propKey$236 + ); + } + for (lastDefaultValue in nextProps) + if ( + ((propKey$236 = nextProps[lastDefaultValue]), + (propKey = lastProps[lastDefaultValue]), + nextProps.hasOwnProperty(lastDefaultValue) && + propKey$236 !== propKey && + (null != propKey$236 || null != propKey)) + ) + switch (lastDefaultValue) { + case "selected": + domElement.selected = + propKey$236 && + "function" !== typeof propKey$236 && + "symbol" !== typeof propKey$236; + break; + default: + setProp( + domElement, + tag, + lastDefaultValue, + propKey$236, + nextProps, + propKey + ); + } + return; + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": + for (var propKey$259 in lastProps) + (propKey$236 = lastProps[propKey$259]), + lastProps.hasOwnProperty(propKey$259) && + null != propKey$236 && + !nextProps.hasOwnProperty(propKey$259) && + setProp(domElement, tag, propKey$259, null, nextProps, propKey$236); + for (checked in nextProps) + if ( + ((propKey$236 = nextProps[checked]), + (propKey = lastProps[checked]), + nextProps.hasOwnProperty(checked) && + propKey$236 !== propKey && + (null != propKey$236 || null != propKey)) + ) + switch (checked) { + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey$236) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + setProp( + domElement, + tag, + checked, + propKey$236, + nextProps, + propKey + ); + } + return; + default: + if (isCustomElement(tag)) { + for (var propKey$264 in lastProps) + (propKey$236 = lastProps[propKey$264]), + lastProps.hasOwnProperty(propKey$264) && + null != propKey$236 && + !nextProps.hasOwnProperty(propKey$264) && + setPropOnCustomElement( + domElement, + tag, + propKey$264, + null, + nextProps, + propKey$236 + ); + for (defaultChecked in nextProps) + (propKey$236 = nextProps[defaultChecked]), + (propKey = lastProps[defaultChecked]), + !nextProps.hasOwnProperty(defaultChecked) || + propKey$236 === propKey || + (null == propKey$236 && null == propKey) || + setPropOnCustomElement( + domElement, + tag, + defaultChecked, + propKey$236, + nextProps, + propKey + ); + return; + } + } + for (var propKey$269 in lastProps) + (propKey$236 = lastProps[propKey$269]), + lastProps.hasOwnProperty(propKey$269) && + null != propKey$236 && + !nextProps.hasOwnProperty(propKey$269) && + setProp(domElement, tag, propKey$269, null, nextProps, propKey$236); + for (lastProp in nextProps) + (propKey$236 = nextProps[lastProp]), + (propKey = lastProps[lastProp]), + !nextProps.hasOwnProperty(lastProp) || + propKey$236 === propKey || + (null == propKey$236 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$236, nextProps, propKey); +} +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -15019,14 +15483,31 @@ function updateProperties( case "li": break; case "input": - "radio" === nextProps.type && - null != nextProps.name && - ((lastProps = nextProps.checked), - null != lastProps && (domElement.checked = lastProps)); - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) { - var propKey = updatePayload[lastProps], - propValue = updatePayload[lastProps + 1]; + var name = nextProps.name, + type = nextProps.type, + value = nextProps.value, + defaultValue = nextProps.defaultValue; + lastProps = lastProps.defaultValue; + for ( + var checked = nextProps.checked, + defaultChecked = nextProps.defaultChecked, + i = 0; + i < updatePayload.length; + i += 2 + ) { + var propKey = updatePayload[i], + propValue = updatePayload[i + 1]; switch (propKey) { + case "type": + null != propValue && + "function" !== typeof propValue && + "symbol" !== typeof propValue && + "boolean" !== typeof propValue + ? domElement.setAttribute(propKey, propValue) + : domElement.removeAttribute(propKey); + break; + case "name": + break; case "checked": propKey = null != propValue ? propValue : nextProps.defaultChecked; domElement.checked = @@ -15034,83 +15515,89 @@ function updateProperties( "function" !== typeof propKey && "symbol" !== propKey; break; + case "defaultChecked": + break; case "value": break; + case "defaultValue": + break; case "children": case "dangerouslySetInnerHTML": if (null != propValue) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } - updateInput(domElement, nextProps); + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastProps, + checked, + defaultChecked, + type + ); return; case "select": - for (propKey = 0; propKey < updatePayload.length; propKey += 2) { - propValue = updatePayload[propKey]; - var propValue$231 = updatePayload[propKey + 1]; - switch (propValue) { + name = nextProps.value; + type = nextProps.defaultValue; + value = nextProps.multiple; + defaultValue = lastProps.multiple; + for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + switch ( + ((checked = updatePayload[lastProps]), + (defaultChecked = updatePayload[lastProps + 1]), + checked) + ) { case "value": break; default: - setProp(domElement, tag, propValue, propValue$231, nextProps); + setProp(domElement, tag, checked, defaultChecked, nextProps, null); } - } - updatePayload = !!lastProps.multiple; - tag = nextProps.value; - null != tag - ? updateOptions(domElement, !!nextProps.multiple, tag, !1) - : updatePayload !== !!nextProps.multiple && - (null != nextProps.defaultValue - ? updateOptions( - domElement, - !!nextProps.multiple, - nextProps.defaultValue, - !0 - ) - : updateOptions( - domElement, - !!nextProps.multiple, - nextProps.multiple ? [] : "", - !1 - )); + updateSelect(domElement, name, type, value, defaultValue); return; case "textarea": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + name = nextProps.value; + type = nextProps.defaultValue; + for (value = 0; value < updatePayload.length; value += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((defaultValue = updatePayload[value]), + (lastProps = updatePayload[value + 1]), + defaultValue) ) { case "value": break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propValue) throw Error(formatProdErrorMessage(91)); + if (null != lastProps) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, defaultValue, lastProps, nextProps, null); } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, name, type); return; case "option": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "selected": domElement.selected = - propValue && - "function" !== typeof propValue && - "symbol" !== typeof propValue; + value && "function" !== typeof value && "symbol" !== typeof value; break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; case "img": @@ -15128,41 +15615,42 @@ function updateProperties( case "track": case "wbr": case "menuitem": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "children": case "dangerouslySetInnerHTML": - if (null != propValue) - throw Error(formatProdErrorMessage(137, tag)); + if (null != value) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; default: if (isCustomElement(tag)) { - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setPropOnCustomElement( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); return; } } - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setProp( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); } var Dispatcher$1 = Internals.Dispatcher, @@ -15493,14 +15981,14 @@ function preinit$1(href, options) { switch (as) { case "style": as = getResourcesFromRoot(resourceRoot).hoistableStyles; - var key$248 = getStyleKey(href), + var key$297 = getStyleKey(href), precedence = options.precedence || "default", - resource = as.get(key$248); + resource = as.get(key$297); if (resource) break; var state = { loading: 0, preload: null }; if ( (resource = resourceRoot.querySelector( - getStylesheetSelectorFromKey(key$248) + getStylesheetSelectorFromKey(key$297) )) ) state.loading = 1; @@ -15511,7 +15999,7 @@ function preinit$1(href, options) { "data-precedence": precedence, crossOrigin: options.crossOrigin }; - (options = preloadPropsMap.get(key$248)) && + (options = preloadPropsMap.get(key$297)) && adoptPreloadPropsForStylesheet(href, options); var link = (resource = ( resourceRoot.ownerDocument || resourceRoot @@ -15537,15 +16025,15 @@ function preinit$1(href, options) { count: 1, state: state }; - as.set(key$248, resource); + as.set(key$297, resource); break; case "script": (as = getResourcesFromRoot(resourceRoot).hoistableScripts), - (key$248 = getScriptKey(href)), - (precedence = as.get(key$248)), + (key$297 = getScriptKey(href)), + (precedence = as.get(key$297)), precedence || ((precedence = resourceRoot.querySelector( - "script[async]" + key$248 + "script[async]" + key$297 )), precedence || ((href = { @@ -15554,7 +16042,7 @@ function preinit$1(href, options) { crossOrigin: options.crossOrigin, integrity: options.integrity }), - (options = preloadPropsMap.get(key$248)) && + (options = preloadPropsMap.get(key$297)) && adoptPreloadPropsForScript(href, options), (options = resourceRoot.ownerDocument || resourceRoot), (precedence = options.createElement("script")), @@ -15567,13 +16055,13 @@ function preinit$1(href, options) { count: 1, state: null }), - as.set(key$248, precedence)); + as.set(key$297, precedence)); } else if ("style" === as || "script" === as) if ((resourceRoot = getDocumentForPreloads())) { - key$248 = escapeSelectorAttributeValueInsideDoubleQuotes(href); - precedence = key$248 = - 'link[rel="preload"][as="' + as + '"][href="' + key$248 + '"]'; + key$297 = escapeSelectorAttributeValueInsideDoubleQuotes(href); + precedence = key$297 = + 'link[rel="preload"][as="' + as + '"][href="' + key$297 + '"]'; switch (as) { case "style": precedence = getStyleKey(href); @@ -15590,7 +16078,7 @@ function preinit$1(href, options) { integrity: options.integrity }), preloadPropsMap.set(precedence, href), - null === resourceRoot.querySelector(key$248) && + null === resourceRoot.querySelector(key$297) && ((options = resourceRoot.createElement("link")), setInitialProperties(options, "link", href), markNodeAsHoistable(options), @@ -15623,17 +16111,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$257 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$258 = styles$257.get(type); - resource$258 || + var styles$306 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$307 = styles$306.get(type); + resource$307 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$258 = { + (resource$307 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$257.set(type, resource$258), + styles$306.set(type, resource$307), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -15648,9 +16136,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$258.state + resource$307.state )); - return resource$258; + return resource$307; } return null; case "script": @@ -15722,36 +16210,36 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = key); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$263 = hoistableRoot.querySelector( + var instance$312 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$263) + if (instance$312) return ( - (resource.instance = instance$263), - markNodeAsHoistable(instance$263), - instance$263 + (resource.instance = instance$312), + markNodeAsHoistable(instance$312), + instance$312 ); key = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(key, styleProps); - instance$263 = ( + instance$312 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$263); - var linkInstance = instance$263; + markNodeAsHoistable(instance$312); + var linkInstance = instance$312; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$263, "link", key); + setInitialProperties(instance$312, "link", key); resource.state.loading |= 4; - insertStylesheet(instance$263, props.precedence, hoistableRoot); - return (resource.instance = instance$263); + insertStylesheet(instance$312, props.precedence, hoistableRoot); + return (resource.instance = instance$312); case "script": - instance$263 = getScriptKey(props.src); + instance$312 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - "script[async]" + instance$263 + "script[async]" + instance$312 )) ) return ( @@ -15760,7 +16248,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); key = props; - if ((styleProps = preloadPropsMap.get(instance$263))) + if ((styleProps = preloadPropsMap.get(instance$312))) (key = assign({}, props)), adoptPreloadPropsForScript(key, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -16711,11 +17199,11 @@ function legacyCreateRootFromDOMContainer( if ("function" === typeof callback) { var originalCallback = callback; callback = function () { - var instance = getPublicRootInstance(root$283); + var instance = getPublicRootInstance(root$332); originalCallback.call(instance); }; } - var root$283 = createHydrationContainer( + var root$332 = createHydrationContainer( initialChildren, callback, container, @@ -16727,23 +17215,23 @@ function legacyCreateRootFromDOMContainer( noopOnRecoverableError, null ); - container._reactRootContainer = root$283; - container[internalContainerInstanceKey] = root$283.current; + container._reactRootContainer = root$332; + container[internalContainerInstanceKey] = root$332.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(); - return root$283; + return root$332; } clearContainer(container); if ("function" === typeof callback) { - var originalCallback$284 = callback; + var originalCallback$333 = callback; callback = function () { - var instance = getPublicRootInstance(root$285); - originalCallback$284.call(instance); + var instance = getPublicRootInstance(root$334); + originalCallback$333.call(instance); }; } - var root$285 = createFiberRoot( + var root$334 = createFiberRoot( container, 0, !1, @@ -16755,15 +17243,15 @@ function legacyCreateRootFromDOMContainer( noopOnRecoverableError, null ); - container._reactRootContainer = root$285; - container[internalContainerInstanceKey] = root$285.current; + container._reactRootContainer = root$334; + container[internalContainerInstanceKey] = root$334.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(function () { - updateContainer(initialChildren, root$285, parentComponent, callback); + updateContainer(initialChildren, root$334, parentComponent, callback); }); - return root$285; + return root$334; } function legacyRenderSubtreeIntoContainer( parentComponent, @@ -16822,10 +17310,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1901 = { +var devToolsConfig$jscomp$inline_1935 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-3bbc0e4d", + version: "18.3.0-www-classic-25b599df", rendererPackageName: "react-dom" }; (function (internals) { @@ -16843,10 +17331,10 @@ var devToolsConfig$jscomp$inline_1901 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1901.bundleType, - version: devToolsConfig$jscomp$inline_1901.version, - rendererPackageName: devToolsConfig$jscomp$inline_1901.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1901.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1935.bundleType, + version: devToolsConfig$jscomp$inline_1935.version, + rendererPackageName: devToolsConfig$jscomp$inline_1935.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1935.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16862,14 +17350,14 @@ var devToolsConfig$jscomp$inline_1901 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1901.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1935.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-3bbc0e4d" + reconcilerVersion: "18.3.0-www-classic-25b599df" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -17096,7 +17584,7 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-3bbc0e4d"; +exports.version = "18.3.0-www-classic-25b599df"; /* 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 bd18ddb190a78..00fe55892f809 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -123,6 +123,7 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"), dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase, enableProfilerNestedUpdateScheduledHook = dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook, enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler, @@ -966,78 +967,85 @@ function getActiveElement(doc) { return doc.body; } } -function updateInput(element, props) { - var value = getToStringValue(props.value), - type = props.type; - disableInputAttributeSyncing - ? null != props.defaultValue - ? setDefaultValue( - element, - props.type, - getToStringValue(props.defaultValue) - ) - : element.removeAttribute("value") - : null != props.value - ? setDefaultValue(element, props.type, value) - : null != props.defaultValue - ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue)) - : element.removeAttribute("value"); - disableInputAttributeSyncing - ? null == props.defaultChecked - ? element.removeAttribute("checked") - : (element.defaultChecked = !!props.defaultChecked) - : null == props.checked && - null != props.defaultChecked && - (element.defaultChecked = !!props.defaultChecked); - props = props.checked; - null != props && (element.checked = props); +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { if (null != value) if ("number" === type) { if ((0 === value && "" === element.value) || element.value != value) - element.value = "" + value; - } else element.value !== "" + value && (element.value = "" + value); - else - ("submit" !== type && "reset" !== type) || element.removeAttribute("value"); -} -function initInput(element, props, isHydrating) { - if (null != props.value || null != props.defaultValue) { - var type = props.type; + element.value = "" + getToStringValue(value); + } else + element.value !== "" + getToStringValue(value) && + (element.value = "" + getToStringValue(value)); + else if ("submit" === type || "reset" === type) { + element.removeAttribute("value"); + return; + } + disableInputAttributeSyncing + ? null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value") + : null != value + ? setDefaultValue(element, type, getToStringValue(value)) + : null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value"); + disableInputAttributeSyncing + ? null == defaultChecked + ? element.removeAttribute("checked") + : (element.defaultChecked = !!defaultChecked) + : null == checked && + null != defaultChecked && + (element.defaultChecked = !!defaultChecked); + null != checked && + element.checked !== !!checked && + (element.checked = checked); +} +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { + if (null != value || null != defaultValue) { if ( (type = "submit" === type || "reset" === type) && - (void 0 === props.value || null === props.value) + (void 0 === value || null === value) ) return; - var defaultValue = - null != props.defaultValue - ? "" + getToStringValue(props.defaultValue) - : "", + var defaultValueStr = + null != defaultValue ? "" + getToStringValue(defaultValue) : "", initialValue = - null != props.value ? "" + getToStringValue(props.value) : defaultValue; - if (!isHydrating) - if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); - null == value || - (!type && value === element.value) || - (element.value = "" + value); - } else initialValue !== element.value && (element.value = initialValue); + null != value ? "" + getToStringValue(value) : defaultValueStr; + isHydrating || + (disableInputAttributeSyncing + ? null == value || + (!type && "" + getToStringValue(value) === element.value) || + (element.value = "" + getToStringValue(value)) + : initialValue !== element.value && (element.value = initialValue)); disableInputAttributeSyncing - ? null != props.defaultValue && (element.defaultValue = defaultValue) + ? null != defaultValue && (element.defaultValue = defaultValueStr) : (element.defaultValue = initialValue); } - type = element.name; - "" !== type && (element.name = ""); - defaultValue = null != props.checked ? props.checked : props.defaultChecked; - defaultValue = - "function" !== typeof defaultValue && - "symbol" !== typeof defaultValue && - !!defaultValue; - isHydrating || (element.checked = !!defaultValue); + value = element.name; + "" !== value && (element.name = ""); + checked = null != checked ? checked : defaultChecked; + checked = + "function" !== typeof checked && "symbol" !== typeof checked && !!checked; + isHydrating || (element.checked = !!checked); disableInputAttributeSyncing - ? null != props.defaultChecked && - ((element.defaultChecked = !element.defaultChecked), - (element.defaultChecked = !!props.defaultChecked)) - : (element.defaultChecked = !!defaultValue); - "" !== type && (element.name = type); + ? null != defaultChecked && (element.defaultChecked = !!defaultChecked) + : (element.defaultChecked = !!checked); + "" !== value && (element.name = value); } function setDefaultValue(node, type, value) { ("number" === type && getActiveElement(node.ownerDocument) === node) || @@ -1069,30 +1077,37 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) { null !== multiple && (multiple.selected = !0); } } -function updateTextarea(element, props) { - var value = getToStringValue(props.value), - defaultValue = getToStringValue(props.defaultValue); - element.defaultValue = null != defaultValue ? "" + defaultValue : ""; - null != value && - ((value = "" + value), +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { + null != value + ? updateOptions(element, !!multiple, value, !1) + : !!wasMultiple !== !!multiple && + (null != defaultValue + ? updateOptions(element, !!multiple, defaultValue, !0) + : updateOptions(element, !!multiple, multiple ? [] : "", !1)); +} +function updateTextarea(element, value, defaultValue) { + if ( + null != value && + ((value = "" + getToStringValue(value)), value !== element.value && (element.value = value), - null == props.defaultValue && - element.defaultValue !== value && - (element.defaultValue = value)); -} -function initTextarea(element, props) { - var initialValue = props.value; - null == initialValue && - ((props = props.defaultValue), - null == props && (props = ""), - (initialValue = props)); - props = getToStringValue(initialValue); - element.defaultValue = props; - initialValue = element.textContent; - initialValue === props && - "" !== initialValue && - null !== initialValue && - (element.value = initialValue); + null == defaultValue) + ) { + element.defaultValue !== value && (element.defaultValue = value); + return; + } + element.defaultValue = + null != defaultValue ? "" + getToStringValue(defaultValue) : ""; +} +function initTextarea(element, value, defaultValue) { + null == value && + (null == defaultValue && (defaultValue = ""), (value = defaultValue)); + defaultValue = getToStringValue(value); + element.defaultValue = defaultValue; + value = element.textContent; + value === defaultValue && + "" !== value && + null !== value && + (element.value = value); } function getChildNamespace(parentNamespace, type) { if ( @@ -1158,30 +1173,44 @@ var unitlessNumbers = new Set( " " ) ); -function setValueForStyles(node, styles) { +function setValueForStyle(style, styleName, value) { + var isCustomProperty = 0 === styleName.indexOf("--"); + null == value || "boolean" === typeof value || "" === value + ? isCustomProperty + ? style.setProperty(styleName, "") + : "float" === styleName + ? (style.cssFloat = "") + : (style[styleName] = "") + : isCustomProperty + ? style.setProperty(styleName, value) + : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName) + ? "float" === styleName + ? (style.cssFloat = value) + : (style[styleName] = ("" + value).trim()) + : (style[styleName] = value + "px"); +} +function setValueForStyles(node, styles, prevStyles) { if (null != styles && "object" !== typeof styles) throw Error(formatProdErrorMessage(62)); node = node.style; - for (var styleName in styles) - if (styles.hasOwnProperty(styleName)) { - var value = styles[styleName], - isCustomProperty = 0 === styleName.indexOf("--"); - null == value || "boolean" === typeof value || "" === value - ? isCustomProperty + if (diffInCommitPhase && null != prevStyles) { + for (var styleName in prevStyles) + !prevStyles.hasOwnProperty(styleName) || + (null != styles && styles.hasOwnProperty(styleName)) || + (0 === styleName.indexOf("--") ? node.setProperty(styleName, "") : "float" === styleName ? (node.cssFloat = "") - : (node[styleName] = "") - : isCustomProperty - ? node.setProperty(styleName, value) - : "number" !== typeof value || - 0 === value || - unitlessNumbers.has(styleName) - ? "float" === styleName - ? (node.cssFloat = value) - : (node[styleName] = ("" + value).trim()) - : (node[styleName] = value + "px"); - } + : (node[styleName] = "")); + for (var styleName$18 in styles) + (styleName = styles[styleName$18]), + styles.hasOwnProperty(styleName$18) && + prevStyles[styleName$18] !== styleName && + setValueForStyle(node, styleName$18, styleName); + } else + for (var styleName$19 in styles) + styles.hasOwnProperty(styleName$19) && + setValueForStyle(node, styleName$19, styles[styleName$19]); } function isCustomElement(tagName) { if (-1 === tagName.indexOf("-")) return !1; @@ -1301,7 +1330,15 @@ function restoreStateOfTarget(target) { var props = getFiberCurrentPropsFromNode(target); a: switch (((target = internalInstance.stateNode), internalInstance.type)) { case "input": - updateInput(target, props); + updateInput( + target, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); internalInstance = props.name; if ("radio" === props.type && null != internalInstance) { for (props = target; props.parentNode; ) props = props.parentNode; @@ -1320,13 +1357,21 @@ function restoreStateOfTarget(target) { var otherProps = getFiberCurrentPropsFromNode(otherNode); if (!otherProps) throw Error(formatProdErrorMessage(90)); updateValueIfChanged(otherNode); - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } break a; case "textarea": - updateTextarea(target, props); + updateTextarea(target, props.value, props.defaultValue); break a; case "select": (internalInstance = props.value), @@ -1410,36 +1455,36 @@ function findCurrentFiberUsingSlowPath(fiber) { } if (a.return !== b.return) (a = parentA), (b = parentB); else { - for (var didFindChild = !1, child$18 = parentA.child; child$18; ) { - if (child$18 === a) { + for (var didFindChild = !1, child$21 = parentA.child; child$21; ) { + if (child$21 === a) { didFindChild = !0; a = parentA; b = parentB; break; } - if (child$18 === b) { + if (child$21 === b) { didFindChild = !0; b = parentA; a = parentB; break; } - child$18 = child$18.sibling; + child$21 = child$21.sibling; } if (!didFindChild) { - for (child$18 = parentB.child; child$18; ) { - if (child$18 === a) { + for (child$21 = parentB.child; child$21; ) { + if (child$21 === a) { didFindChild = !0; a = parentB; b = parentA; break; } - if (child$18 === b) { + if (child$21 === b) { didFindChild = !0; b = parentB; a = parentA; break; } - child$18 = child$18.sibling; + child$21 = child$21.sibling; } if (!didFindChild) throw Error(formatProdErrorMessage(189)); } @@ -1666,8 +1711,8 @@ function prepareToHydrateHostInstance(fiber) { break; case "video": case "audio": - for (type = 0; type < mediaEventTypes.length; type++) - listenToNonDelegatedEvent(mediaEventTypes[type], instance); + for (var i = 0; i < mediaEventTypes.length; i++) + listenToNonDelegatedEvent(mediaEventTypes[i], instance); break; case "source": listenToNonDelegatedEvent("error", instance); @@ -1684,7 +1729,15 @@ function prepareToHydrateHostInstance(fiber) { case "input": listenToNonDelegatedEvent("invalid", instance); track(instance); - initInput(instance, props, !0); + initInput( + instance, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + !0 + ); break; case "select": listenToNonDelegatedEvent("invalid", instance); @@ -1692,22 +1745,30 @@ function prepareToHydrateHostInstance(fiber) { case "textarea": listenToNonDelegatedEvent("invalid", instance), track(instance), - initTextarea(instance, props); + initTextarea(instance, props.value, props.defaultValue); + } + i = null; + var children = props.children; + if ( + ("string" === typeof children || "number" === typeof children) && + instance.textContent !== "" + children + ) { + if (!0 !== props.suppressHydrationWarning) { + var serverText = instance.textContent; + normalizeMarkupForTextOrAttribute(children); + normalizeMarkupForTextOrAttribute(serverText); + } + diffInCommitPhase + ? "body" !== type && (instance.textContent = children) + : (i = ["children", children]); } - var updatePayload = null; - type = props.children; - ("string" !== typeof type && "number" !== typeof type) || - instance.textContent === "" + type || - (!0 !== props.suppressHydrationWarning && - ((updatePayload = instance.textContent), - normalizeMarkupForTextOrAttribute(type), - normalizeMarkupForTextOrAttribute(updatePayload)), - (updatePayload = ["children", type])); null != props.onScroll && listenToNonDelegatedEvent("scroll", instance); null != props.onClick && (instance.onclick = noop$1); - instance = updatePayload; - fiber.updateQueue = instance; - return null !== instance ? !0 : !1; + instance = i; + return diffInCommitPhase || + ((fiber.updateQueue = instance), null === instance) + ? !1 + : !0; } function popToNextHostParent(fiber) { for (hydrationParentFiber = fiber.return; hydrationParentFiber; ) @@ -3182,10 +3243,10 @@ createFunctionComponentUpdateQueue = function () { function use(usable) { if (null !== usable && "object" === typeof usable) { if ("function" === typeof usable.then) { - var index$44 = thenableIndexCounter; + var index$47 = thenableIndexCounter; thenableIndexCounter += 1; null === thenableState && (thenableState = []); - usable = trackUsedThenable(thenableState, usable, index$44); + usable = trackUsedThenable(thenableState, usable, index$47); null === currentlyRenderingFiber$1.alternate && (null === workInProgressHook ? null === currentlyRenderingFiber$1.memoizedState @@ -3673,16 +3734,16 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$50 = enqueueUpdate(provider, fiber, lane); - if (null !== root$50) { + var root$53 = enqueueUpdate(provider, fiber, lane); + if (null !== root$53) { var eventTime = requestEventTime(); - scheduleUpdateOnFiber(root$50, provider, lane, eventTime); - entangleTransitions(root$50, provider, lane); + scheduleUpdateOnFiber(root$53, provider, lane, eventTime); + entangleTransitions(root$53, provider, lane); } provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$50 && + null !== root$53 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -3891,15 +3952,15 @@ var HooksDispatcherOnMount = { getServerSnapshot = getServerSnapshot(); } else { getServerSnapshot = getSnapshot(); - var root$46 = workInProgressRoot; - if (null === root$46) throw Error(formatProdErrorMessage(349)); - includesBlockingLane(root$46, renderLanes$1) || + var root$49 = workInProgressRoot; + if (null === root$49) throw Error(formatProdErrorMessage(349)); + includesBlockingLane(root$49, renderLanes$1) || pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot); } hook.memoizedState = getServerSnapshot; - root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot }; - hook.queue = root$46; - mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [ + root$49 = { value: getServerSnapshot, getSnapshot: getSnapshot }; + hook.queue = root$49; + mountEffect(subscribeToStore.bind(null, fiber, root$49, subscribe), [ subscribe ]); fiber.flags |= 2048; @@ -3908,7 +3969,7 @@ var HooksDispatcherOnMount = { updateStoreInstance.bind( null, fiber, - root$46, + root$49, getServerSnapshot, getSnapshot ), @@ -4461,10 +4522,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$63 = workInProgress.stateNode; + root$66 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$63.incompleteTransitions.has(transition)) { + if (!root$66.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -4472,11 +4533,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$63.incompleteTransitions.set(transition, markerInstance); + root$66.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$63.incompleteTransitions.forEach(function (markerInstance) { + root$66.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5148,14 +5209,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { } JSCompiler_temp = current.memoizedState; if (null !== JSCompiler_temp) { - var dehydrated$70 = JSCompiler_temp.dehydrated; - if (null !== dehydrated$70) + var dehydrated$73 = JSCompiler_temp.dehydrated; + if (null !== dehydrated$73) return updateDehydratedSuspenseComponent( current, workInProgress, didSuspend, nextProps, - dehydrated$70, + dehydrated$73, JSCompiler_temp, renderLanes ); @@ -5165,7 +5226,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { showFallback = nextProps.fallback; didSuspend = workInProgress.mode; JSCompiler_temp = current.child; - dehydrated$70 = JSCompiler_temp.sibling; + dehydrated$73 = JSCompiler_temp.sibling; var primaryChildProps = { mode: "hidden", children: nextProps.children }; 0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp ? ((nextProps = workInProgress.child), @@ -5179,8 +5240,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { (workInProgress.deletions = null)) : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)), (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280)); - null !== dehydrated$70 - ? (showFallback = createWorkInProgress(dehydrated$70, showFallback)) + null !== dehydrated$73 + ? (showFallback = createWorkInProgress(dehydrated$73, showFallback)) : ((showFallback = createFiberFromFragment( showFallback, didSuspend, @@ -5199,10 +5260,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? (didSuspend = mountSuspenseOffscreenState(renderLanes)) : ((JSCompiler_temp = didSuspend.cachePool), null !== JSCompiler_temp - ? ((dehydrated$70 = CacheContext._currentValue), + ? ((dehydrated$73 = CacheContext._currentValue), (JSCompiler_temp = - JSCompiler_temp.parent !== dehydrated$70 - ? { parent: dehydrated$70, pool: dehydrated$70 } + JSCompiler_temp.parent !== dehydrated$73 + ? { parent: dehydrated$73, pool: dehydrated$73 } : JSCompiler_temp)) : (JSCompiler_temp = getSuspendedCache()), (didSuspend = { @@ -5216,23 +5277,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ((JSCompiler_temp = enableTransitionTracing ? markerInstanceStack.current : null), - (dehydrated$70 = showFallback.updateQueue), + (dehydrated$73 = showFallback.updateQueue), (primaryChildProps = current.updateQueue), - null === dehydrated$70 + null === dehydrated$73 ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null }) - : dehydrated$70 === primaryChildProps + : dehydrated$73 === primaryChildProps ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null !== primaryChildProps ? primaryChildProps.retryQueue : null }) - : ((dehydrated$70.transitions = didSuspend), - (dehydrated$70.markerInstances = JSCompiler_temp)))); + : ((dehydrated$73.transitions = didSuspend), + (dehydrated$73.markerInstances = JSCompiler_temp)))); showFallback.childLanes = current.childLanes & ~renderLanes; workInProgress.memoizedState = SUSPENDED_MARKER; return nextProps; @@ -6204,62 +6265,67 @@ function markRef(workInProgress) { } function updateHostComponent(current, workInProgress, type, newProps) { current = current.memoizedProps; - if (current !== newProps) { - type = null; - var propKey, - styleName, - styleUpdates = null; - for (propKey in current) - if ( - !newProps.hasOwnProperty(propKey) && - current.hasOwnProperty(propKey) && - null != current[propKey] - ) - switch (propKey) { - case "style": - var lastStyle = current[propKey]; - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - break; - default: - (type = type || []).push(propKey, null); - } - for (propKey in newProps) { - lastStyle = newProps[propKey]; - var lastProp = null != current ? current[propKey] : void 0; - if ( - newProps.hasOwnProperty(propKey) && - lastStyle !== lastProp && - (null != lastStyle || null != lastProp) - ) - switch (propKey) { - case "style": - if (lastProp) { - for (styleName in lastProp) - !lastProp.hasOwnProperty(styleName) || - (lastStyle && lastStyle.hasOwnProperty(styleName)) || - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - lastProp[styleName] !== lastStyle[styleName] && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = lastStyle[styleName])); - } else - styleUpdates || - (type || (type = []), type.push(propKey, styleUpdates)), - (styleUpdates = lastStyle); - break; - default: - (type = type || []).push(propKey, lastStyle); + if (current !== newProps) + if (diffInCommitPhase) markUpdate(workInProgress); + else { + if (diffInCommitPhase) newProps = null; + else { + type = null; + var propKey, + styleName, + styleUpdates = null; + for (propKey in current) + if ( + !newProps.hasOwnProperty(propKey) && + current.hasOwnProperty(propKey) && + null != current[propKey] + ) + switch (propKey) { + case "style": + var lastStyle = current[propKey]; + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + break; + default: + (type = type || []).push(propKey, null); + } + for (propKey in newProps) { + lastStyle = newProps[propKey]; + var lastProp = null != current ? current[propKey] : void 0; + if ( + newProps.hasOwnProperty(propKey) && + lastStyle !== lastProp && + (null != lastStyle || null != lastProp) + ) + switch (propKey) { + case "style": + if (lastProp) { + for (styleName in lastProp) + !lastProp.hasOwnProperty(styleName) || + (lastStyle && lastStyle.hasOwnProperty(styleName)) || + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + lastProp[styleName] !== lastStyle[styleName] && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = lastStyle[styleName])); + } else + styleUpdates || + (type || (type = []), type.push(propKey, styleUpdates)), + (styleUpdates = lastStyle); + break; + default: + (type = type || []).push(propKey, lastStyle); + } } + styleUpdates && (type = type || []).push("style", styleUpdates); + newProps = type; + } + (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); } - styleUpdates && (type = type || []).push("style", styleUpdates); - newProps = type; - (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); - } } function preloadResourceAndSuspendIfNeeded(workInProgress, resource) { if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4)) @@ -6303,14 +6369,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$102 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$102 = lastTailNode), + for (var lastTailNode$105 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$105 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$102 + null === lastTailNode$105 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$102.sibling = null); + : (lastTailNode$105.sibling = null); } } function bubbleProperties(completedWork) { @@ -6322,53 +6388,53 @@ function bubbleProperties(completedWork) { if (didBailout) if (0 !== (completedWork.mode & 2)) { for ( - var treeBaseDuration$104 = completedWork.selfBaseDuration, - child$105 = completedWork.child; - null !== child$105; + var treeBaseDuration$107 = completedWork.selfBaseDuration, + child$108 = completedWork.child; + null !== child$108; ) - (newChildLanes |= child$105.lanes | child$105.childLanes), - (subtreeFlags |= child$105.subtreeFlags & 31457280), - (subtreeFlags |= child$105.flags & 31457280), - (treeBaseDuration$104 += child$105.treeBaseDuration), - (child$105 = child$105.sibling); - completedWork.treeBaseDuration = treeBaseDuration$104; + (newChildLanes |= child$108.lanes | child$108.childLanes), + (subtreeFlags |= child$108.subtreeFlags & 31457280), + (subtreeFlags |= child$108.flags & 31457280), + (treeBaseDuration$107 += child$108.treeBaseDuration), + (child$108 = child$108.sibling); + completedWork.treeBaseDuration = treeBaseDuration$107; } else for ( - treeBaseDuration$104 = completedWork.child; - null !== treeBaseDuration$104; + treeBaseDuration$107 = completedWork.child; + null !== treeBaseDuration$107; ) (newChildLanes |= - treeBaseDuration$104.lanes | treeBaseDuration$104.childLanes), - (subtreeFlags |= treeBaseDuration$104.subtreeFlags & 31457280), - (subtreeFlags |= treeBaseDuration$104.flags & 31457280), - (treeBaseDuration$104.return = completedWork), - (treeBaseDuration$104 = treeBaseDuration$104.sibling); + treeBaseDuration$107.lanes | treeBaseDuration$107.childLanes), + (subtreeFlags |= treeBaseDuration$107.subtreeFlags & 31457280), + (subtreeFlags |= treeBaseDuration$107.flags & 31457280), + (treeBaseDuration$107.return = completedWork), + (treeBaseDuration$107 = treeBaseDuration$107.sibling); else if (0 !== (completedWork.mode & 2)) { - treeBaseDuration$104 = completedWork.actualDuration; - child$105 = completedWork.selfBaseDuration; + treeBaseDuration$107 = completedWork.actualDuration; + child$108 = completedWork.selfBaseDuration; for (var child = completedWork.child; null !== child; ) (newChildLanes |= child.lanes | child.childLanes), (subtreeFlags |= child.subtreeFlags), (subtreeFlags |= child.flags), - (treeBaseDuration$104 += child.actualDuration), - (child$105 += child.treeBaseDuration), + (treeBaseDuration$107 += child.actualDuration), + (child$108 += child.treeBaseDuration), (child = child.sibling); - completedWork.actualDuration = treeBaseDuration$104; - completedWork.treeBaseDuration = child$105; + completedWork.actualDuration = treeBaseDuration$107; + completedWork.treeBaseDuration = child$108; } else for ( - treeBaseDuration$104 = completedWork.child; - null !== treeBaseDuration$104; + treeBaseDuration$107 = completedWork.child; + null !== treeBaseDuration$107; ) (newChildLanes |= - treeBaseDuration$104.lanes | treeBaseDuration$104.childLanes), - (subtreeFlags |= treeBaseDuration$104.subtreeFlags), - (subtreeFlags |= treeBaseDuration$104.flags), - (treeBaseDuration$104.return = completedWork), - (treeBaseDuration$104 = treeBaseDuration$104.sibling); + treeBaseDuration$107.lanes | treeBaseDuration$107.childLanes), + (subtreeFlags |= treeBaseDuration$107.subtreeFlags), + (subtreeFlags |= treeBaseDuration$107.flags), + (treeBaseDuration$107.return = completedWork), + (treeBaseDuration$107 = treeBaseDuration$107.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -7153,8 +7219,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { recordLayoutEffectDuration(current); } else ref(null); - } catch (error$137) { - captureCommitPhaseError(current, nearestMountedAncestor, error$137); + } catch (error$140) { + captureCommitPhaseError(current, nearestMountedAncestor, error$140); } else ref.current = null; } @@ -7191,7 +7257,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$211) { + } catch (e$214) { JSCompiler_temp = null; break a; } @@ -7461,11 +7527,11 @@ function commitPassiveEffectDurations(finishedRoot, finishedWork) { var _finishedWork$memoize = finishedWork.memoizedProps, id = _finishedWork$memoize.id; _finishedWork$memoize = _finishedWork$memoize.onPostCommit; - var commitTime$139 = commitTime, + var commitTime$142 = commitTime, phase = null === finishedWork.alternate ? "mount" : "update"; currentUpdateIsNested && (phase = "nested-update"); "function" === typeof _finishedWork$memoize && - _finishedWork$memoize(id, phase, finishedRoot, commitTime$139); + _finishedWork$memoize(id, phase, finishedRoot, commitTime$142); finishedWork = finishedWork.return; a: for (; null !== finishedWork; ) { switch (finishedWork.tag) { @@ -7492,8 +7558,8 @@ function commitHookLayoutEffects(finishedWork, hookFlags) { } else try { commitHookEffectListMount(hookFlags, finishedWork); - } catch (error$141) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$141); + } catch (error$144) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$144); } } function commitClassCallbacks(finishedWork) { @@ -7592,11 +7658,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { } else try { finishedRoot.componentDidMount(); - } catch (error$142) { + } catch (error$145) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$142 + error$145 ); } else { @@ -7613,11 +7679,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$143) { + } catch (error$146) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$143 + error$146 ); } recordLayoutEffectDuration(finishedWork); @@ -7628,11 +7694,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$144) { + } catch (error$147) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$144 + error$147 ); } } @@ -8338,22 +8404,22 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { startLayoutEffectTimer(), commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$159) { + } catch (error$162) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$159 + error$162 ); } recordLayoutEffectDuration(finishedWork); } else try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$160) { + } catch (error$163) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$160 + error$163 ); } } @@ -8523,20 +8589,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) { ) try { var domElement = finishedWork.stateNode, + type = finishedWork.type, + oldProps = current.memoizedProps, newProps = finishedWork.memoizedProps; - updateProperties( - domElement, - flags, - finishedWork.type, - current.memoizedProps, - newProps - ); + diffInCommitPhase + ? updateProperties(domElement, type, oldProps, newProps) + : updatePropertiesWithDiff( + domElement, + flags, + type, + oldProps, + newProps + ); domElement[internalPropsKey] = newProps; - } catch (error$161) { + } catch (error$164) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$161 + error$164 ); } break; @@ -8572,8 +8642,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$162) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$162); + } catch (error$165) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$165); } } if ( @@ -8585,13 +8655,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (hoistableRoot = finishedWork.type), (maybeNodes = finishedWork.updateQueue), (finishedWork.updateQueue = null), - null !== maybeNodes)) + null !== maybeNodes || diffInCommitPhase)) ) try { - updateProperties(flags, maybeNodes, hoistableRoot, current, root), + diffInCommitPhase + ? updateProperties(flags, hoistableRoot, current, root) + : updatePropertiesWithDiff( + flags, + maybeNodes, + hoistableRoot, + current, + root + ), (flags[internalPropsKey] = root); - } catch (error$165) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$165); + } catch (error$168) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$168); } break; case 6: @@ -8604,8 +8682,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$166) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$166); + } catch (error$169) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$169); } } break; @@ -8619,8 +8697,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$167) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$167); + } catch (error$170) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$170); } break; case 4: @@ -8650,8 +8728,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$169) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$169); + } catch (error$172) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$172); } current = finishedWork.updateQueue; null !== current && @@ -8664,15 +8742,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== current && safelyDetachRef(current, current.return); domElement = null !== finishedWork.memoizedState; - newProps = null !== current && null !== current.memoizedState; + type = null !== current && null !== current.memoizedState; finishedWork.mode & 1 - ? ((suspenseCallback = offscreenSubtreeIsHidden), - (retryQueue = offscreenSubtreeWasHidden), - (offscreenSubtreeIsHidden = suspenseCallback || domElement), - (offscreenSubtreeWasHidden = retryQueue || newProps), + ? ((oldProps = offscreenSubtreeIsHidden), + (newProps = offscreenSubtreeWasHidden), + (offscreenSubtreeIsHidden = oldProps || domElement), + (offscreenSubtreeWasHidden = newProps || type), recursivelyTraverseMutationEffects(root, finishedWork), - (offscreenSubtreeWasHidden = retryQueue), - (offscreenSubtreeIsHidden = suspenseCallback)) + (offscreenSubtreeWasHidden = newProps), + (offscreenSubtreeIsHidden = oldProps)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); root = finishedWork.stateNode; @@ -8687,7 +8765,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) { domElement && ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden), null === current || - newProps || + type || root || (0 !== (finishedWork.mode & 1) && recursivelyTraverseDisappearLayoutEffects(finishedWork))), @@ -8729,11 +8807,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$149) { + } catch (error$152) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$149 + error$152 ); } } else if ( @@ -8808,21 +8886,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$150 = JSCompiler_inline_result.stateNode; + var parent$153 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$150, ""), + (setTextContent(parent$153, ""), (JSCompiler_inline_result.flags &= -33)); - var before$151 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$151, parent$150); + var before$154 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$154, parent$153); break; case 3: case 4: - var parent$152 = JSCompiler_inline_result.stateNode.containerInfo, - before$153 = getHostSibling(finishedWork); + var parent$155 = JSCompiler_inline_result.stateNode.containerInfo, + before$156 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$153, - parent$152 + before$156, + parent$155 ); break; default: @@ -9014,8 +9092,8 @@ function commitHookPassiveMountEffects(finishedWork, hookFlags) { } else try { commitHookEffectListMount(hookFlags, finishedWork); - } catch (error$175) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$175); + } catch (error$178) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$178); } } function commitOffscreenPassiveMountEffects(current, finishedWork, instance) { @@ -9314,9 +9392,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$180 = finishedWork.stateNode; + var instance$183 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$180._visibility & 4 + ? instance$183._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9329,7 +9407,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$180._visibility |= 4), + : ((instance$183._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9337,7 +9415,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$180._visibility |= 4), + : ((instance$183._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9350,7 +9428,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$180 + instance$183 ); break; case 24: @@ -9724,13 +9802,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { isFlushingWork = !0; do { var didPerformSomeWork = !1; - for (var root$188 = firstScheduledRoot; null !== root$188; ) { + for (var root$191 = firstScheduledRoot; null !== root$191; ) { if ( - (!onlyLegacy || 0 === root$188.tag) && + (!onlyLegacy || 0 === root$191.tag) && 0 !== (getNextLanes( - root$188, - root$188 === workInProgressRoot$jscomp$0 + root$191, + root$191 === workInProgressRoot$jscomp$0 ? workInProgressRootRenderLanes$jscomp$0 : 0 ) & @@ -9738,7 +9816,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { ) try { didPerformSomeWork = !0; - var root = root$188; + var root = root$191; currentUpdateIsNested = nestedUpdateScheduled; nestedUpdateScheduled = !1; if (0 !== (executionContext & 6)) @@ -9783,7 +9861,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { } catch (error) { null === errors ? (errors = [error]) : errors.push(error); } - root$188 = root$188.next; + root$191 = root$191.next; } } while (didPerformSomeWork); isFlushingWork = !1; @@ -10129,16 +10207,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) { exitStatus = renderRootSync(root, lanes); if (2 === exitStatus) { errorRetryLanes = lanes; - var errorRetryLanes$191 = getLanesToRetrySynchronouslyOnError( + var errorRetryLanes$194 = getLanesToRetrySynchronouslyOnError( root, errorRetryLanes ); - 0 !== errorRetryLanes$191 && - ((lanes = errorRetryLanes$191), + 0 !== errorRetryLanes$194 && + ((lanes = errorRetryLanes$194), (exitStatus = recoverFromConcurrentError( root, errorRetryLanes, - errorRetryLanes$191 + errorRetryLanes$194 ))); } if (1 === exitStatus) @@ -10199,14 +10277,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) { if ((lanes & 8388480) === lanes) break; exitStatus = lanes; errorRetryLanes = root.eventTimes; - for (errorRetryLanes$191 = -1; 0 < exitStatus; ) { + for (errorRetryLanes$194 = -1; 0 < exitStatus; ) { var index$2 = 31 - clz32(exitStatus), lane = 1 << index$2; index$2 = errorRetryLanes[index$2]; - index$2 > errorRetryLanes$191 && (errorRetryLanes$191 = index$2); + index$2 > errorRetryLanes$194 && (errorRetryLanes$194 = index$2); exitStatus &= ~lane; } - exitStatus = errorRetryLanes$191; + exitStatus = errorRetryLanes$194; exitStatus = now$1() - exitStatus; exitStatus = (120 > exitStatus @@ -10577,8 +10655,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$194) { - handleThrow(root, thrownValue$194); + } catch (thrownValue$197) { + handleThrow(root, thrownValue$197); } while (1); resetContextDependencies(); @@ -10695,8 +10773,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$196) { - handleThrow(root, thrownValue$196); + } catch (thrownValue$199) { + handleThrow(root, thrownValue$199); } while (1); resetContextDependencies(); @@ -10879,10 +10957,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) { }; suspenseBoundary.updateQueue = newOffscreenQueue; } else { - var retryQueue$58 = offscreenQueue.retryQueue; - null === retryQueue$58 + var retryQueue$61 = offscreenQueue.retryQueue; + null === retryQueue$61 ? (offscreenQueue.retryQueue = new Set([wakeable])) - : retryQueue$58.add(wakeable); + : retryQueue$61.add(wakeable); } } break; @@ -11093,7 +11171,7 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$200 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$203 = commitBeforeMutationEffects( root, finishedWork ); @@ -11101,7 +11179,7 @@ function commitRootImpl( enableProfilerNestedUpdateScheduledHook && (rootCommittingMutationOrLayoutEffects = root); commitMutationEffects(root, finishedWork, lanes); - shouldFireAfterActiveInstanceBlur$200 && + shouldFireAfterActiveInstanceBlur$203 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -11195,7 +11273,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$201 = rootWithPendingPassiveEffects, + var root$204 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -11211,7 +11289,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$201, remainingLanes); + releaseRootPooledCache(root$204, remainingLanes); } } return !1; @@ -12463,12 +12541,12 @@ function updateContainer(element, container, parentComponent, callback) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$204 = fiber.stateNode; - if (root$204.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$204.pendingLanes); + var root$207 = fiber.stateNode; + if (root$207.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$207.pendingLanes); 0 !== lanes && - (markRootEntangled(root$204, lanes | 2), - ensureRootIsScheduled(root$204), + (markRootEntangled(root$207, lanes | 2), + ensureRootIsScheduled(root$207), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now$1() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -13560,19 +13638,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$350; + var JSCompiler_inline_result$jscomp$399; if (canUseDOM) { - var isSupported$jscomp$inline_1633 = "oninput" in document; - if (!isSupported$jscomp$inline_1633) { - var element$jscomp$inline_1634 = document.createElement("div"); - element$jscomp$inline_1634.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1633 = - "function" === typeof element$jscomp$inline_1634.oninput; + var isSupported$jscomp$inline_1684 = "oninput" in document; + if (!isSupported$jscomp$inline_1684) { + var element$jscomp$inline_1685 = document.createElement("div"); + element$jscomp$inline_1685.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1684 = + "function" === typeof element$jscomp$inline_1685.oninput; } - JSCompiler_inline_result$jscomp$350 = isSupported$jscomp$inline_1633; - } else JSCompiler_inline_result$jscomp$350 = !1; + JSCompiler_inline_result$jscomp$399 = isSupported$jscomp$inline_1684; + } else JSCompiler_inline_result$jscomp$399 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$350 && + JSCompiler_inline_result$jscomp$399 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13881,20 +13959,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1674 = 0; - i$jscomp$inline_1674 < simpleEventPluginEvents.length; - i$jscomp$inline_1674++ + var i$jscomp$inline_1725 = 0; + i$jscomp$inline_1725 < simpleEventPluginEvents.length; + i$jscomp$inline_1725++ ) { - var eventName$jscomp$inline_1675 = - simpleEventPluginEvents[i$jscomp$inline_1674], - domEventName$jscomp$inline_1676 = - eventName$jscomp$inline_1675.toLowerCase(), - capitalizedEvent$jscomp$inline_1677 = - eventName$jscomp$inline_1675[0].toUpperCase() + - eventName$jscomp$inline_1675.slice(1); + var eventName$jscomp$inline_1726 = + simpleEventPluginEvents[i$jscomp$inline_1725], + domEventName$jscomp$inline_1727 = + eventName$jscomp$inline_1726.toLowerCase(), + capitalizedEvent$jscomp$inline_1728 = + eventName$jscomp$inline_1726[0].toUpperCase() + + eventName$jscomp$inline_1726.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1676, - "on" + capitalizedEvent$jscomp$inline_1677 + domEventName$jscomp$inline_1727, + "on" + capitalizedEvent$jscomp$inline_1728 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -14726,7 +14804,7 @@ function normalizeMarkupForTextOrAttribute(markup) { .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, ""); } function noop$1() {} -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": "string" === typeof value @@ -14751,7 +14829,7 @@ function setProp(domElement, tag, key, value, props) { setValueForKnownAttribute(domElement, key, value); break; case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "src": case "href": @@ -14967,6 +15045,9 @@ function setProp(domElement, tag, key, value, props) { value ); break; + case "is": + setValueForAttribute(domElement, "is", value); + break; case "innerText": case "textContent": if (enableCustomElementPropertySupport) break; @@ -14980,10 +15061,10 @@ function setProp(domElement, tag, key, value, props) { setValueForAttribute(domElement, key, value); } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "dangerouslySetInnerHTML": if (null != value) { @@ -15021,23 +15102,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) { if (enableCustomElementPropertySupport) a: { props = value; - if ("o" === key[0] && "n" === key[1]) { - tag = key.endsWith("Capture"); - value = key.substr(2, tag ? key.length - 9 : void 0); - var prevProps = getFiberCurrentPropsFromNode(domElement); - prevProps = null != prevProps ? prevProps[key] : null; - "function" === typeof prevProps && - domElement.removeEventListener(value, prevProps, tag); - if ("function" === typeof props) { - "function" !== typeof prevProps && - null !== prevProps && - (key in domElement - ? (domElement[key] = null) - : domElement.hasAttribute(key) && - domElement.removeAttribute(key)); - domElement.addEventListener(value, props, tag); - break a; - } + if ( + "o" === key[0] && + "n" === key[1] && + ((tag = key.endsWith("Capture")), + (value = key.substr(2, tag ? key.length - 9 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(value, prevValue, tag), + "function" === typeof props) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(value, props, tag); + break a; } key in domElement ? (domElement[key] = props) @@ -15063,7 +15146,12 @@ function setInitialProperties(domElement, tag, props) { break; case "input": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey in props) + var type = null, + value = null, + defaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in props) if (props.hasOwnProperty(propKey)) { var propValue = props[propKey]; if (null != propValue) @@ -15073,9 +15161,11 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== typeof propValue && "boolean" !== typeof propValue && - domElement.setAttribute(propKey, propValue); + ((type = propValue), + domElement.setAttribute(propKey, propValue)); break; case "checked": + checked = propValue; propValue = null != propValue ? propValue : props.defaultChecked; domElement.checked = @@ -15083,7 +15173,14 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== propValue; break; + case "defaultChecked": + defaultChecked = propValue; + break; case "value": + value = propValue; + break; + case "defaultValue": + defaultValue = propValue; break; case "children": case "dangerouslySetInnerHTML": @@ -15091,60 +15188,80 @@ function setInitialProperties(domElement, tag, props) { throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } track(domElement); - initInput(domElement, props, !1); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + !1 + ); return; case "select": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$221 in props) + var propKey = (value = defaultValue = null); + for (type in props) if ( - props.hasOwnProperty(propKey$221) && - ((propKey = props[propKey$221]), null != propKey) + props.hasOwnProperty(type) && + ((checked = props[type]), null != checked) ) - switch (propKey$221) { + switch (type) { case "value": + defaultValue = checked; + break; + case "defaultValue": + value = checked; break; + case "multiple": + propKey = checked; default: - setProp(domElement, tag, propKey$221, propKey, props); + setProp(domElement, tag, type, checked, props, null); } - domElement.multiple = !!props.multiple; - tag = props.value; + tag = defaultValue; + props = value; + domElement.multiple = !!propKey; null != tag - ? updateOptions(domElement, !!props.multiple, tag, !1) - : null != props.defaultValue && - updateOptions(domElement, !!props.multiple, props.defaultValue, !0); + ? updateOptions(domElement, !!propKey, tag, !1) + : null != props && updateOptions(domElement, !!propKey, props, !0); return; case "textarea": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$223 in props) + type = propKey = null; + for (value in props) if ( - props.hasOwnProperty(propKey$223) && - ((propKey = props[propKey$223]), null != propKey) + props.hasOwnProperty(value) && + ((defaultValue = props[value]), null != defaultValue) ) - switch (propKey$223) { + switch (value) { case "value": + propKey = defaultValue; + break; + case "defaultValue": + type = defaultValue; break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propKey) throw Error(formatProdErrorMessage(91)); + if (null != defaultValue) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey$223, propKey, props); + setProp(domElement, tag, value, defaultValue, props); } track(domElement); - initTextarea(domElement, props); + initTextarea(domElement, propKey, type); return; case "option": - for (var propKey$225 in props) + for (checked in props) if ( - props.hasOwnProperty(propKey$225) && - ((propKey = props[propKey$225]), null != propKey) + props.hasOwnProperty(checked) && + ((propKey = props[checked]), null != propKey) ) - switch (propKey$225) { + switch (checked) { case "selected": domElement.selected = propKey && @@ -15152,10 +15269,8 @@ function setInitialProperties(domElement, tag, props) { "symbol" !== typeof propKey; break; default: - setProp(domElement, tag, propKey$225, propKey, props); + setProp(domElement, tag, checked, propKey, props); } - null != props.value && - domElement.setAttribute("value", "" + getToStringValue(props.value)); return; case "dialog": listenToNonDelegatedEvent("cancel", domElement); @@ -15194,41 +15309,389 @@ function setInitialProperties(domElement, tag, props) { case "track": case "wbr": case "menuitem": - for (var propKey$227 in props) + for (defaultChecked in props) if ( - props.hasOwnProperty(propKey$227) && - ((propKey = props[propKey$227]), null != propKey) + props.hasOwnProperty(defaultChecked) && + ((propKey = props[defaultChecked]), null != propKey) ) - switch (propKey$227) { + switch (defaultChecked) { case "children": case "dangerouslySetInnerHTML": throw Error(formatProdErrorMessage(137, tag)); default: - setProp(domElement, tag, propKey$227, propKey, props); + setProp(domElement, tag, defaultChecked, propKey, props, null); } return; default: if (isCustomElement(tag)) { - for (var propKey$229 in props) - props.hasOwnProperty(propKey$229) && - ((propKey = props[propKey$229]), + for (propValue in props) + props.hasOwnProperty(propValue) && + ((propKey = props[propValue]), null != propKey && setPropOnCustomElement( domElement, tag, - propKey$229, + propValue, propKey, - props + props, + null )); return; } } - for (propValue in props) - props.hasOwnProperty(propValue) && - ((propKey = props[propValue]), - null != propKey && setProp(domElement, tag, propValue, propKey, props)); + for (defaultValue in props) + props.hasOwnProperty(defaultValue) && + ((propKey = props[defaultValue]), + null != propKey && + setProp(domElement, tag, defaultValue, propKey, props, null)); } -function updateProperties( +function updateProperties(domElement, tag, lastProps, nextProps) { + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": + break; + case "input": + var name = null, + type = null, + value = null, + defaultValue = null, + lastDefaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in lastProps) { + var lastProp = lastProps[propKey]; + if (lastProps.hasOwnProperty(propKey) && null != lastProp) + switch (propKey) { + case "checked": + nextProps.hasOwnProperty(propKey) || + ((lastProp = nextProps.defaultChecked), + (domElement.checked = + !!lastProp && + "function" !== typeof lastProp && + "symbol" !== lastProp)); + break; + case "value": + break; + case "defaultValue": + lastDefaultValue = lastProp; + default: + nextProps.hasOwnProperty(propKey) || + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + for (var propKey$240 in nextProps) { + var propKey = nextProps[propKey$240]; + lastProp = lastProps[propKey$240]; + if ( + nextProps.hasOwnProperty(propKey$240) && + (null != propKey || null != lastProp) + ) + switch (propKey$240) { + case "type": + type = propKey; + propKey !== lastProp && + (null != propKey && + "function" !== typeof propKey && + "symbol" !== typeof propKey && + "boolean" !== typeof propKey + ? domElement.setAttribute(propKey$240, propKey) + : domElement.removeAttribute(propKey$240)); + break; + case "name": + name = propKey; + break; + case "checked": + checked = propKey; + propKey !== lastProp && + ((propKey = + null != propKey ? propKey : nextProps.defaultChecked), + (domElement.checked = + !!propKey && + "function" !== typeof propKey && + "symbol" !== propKey)); + break; + case "defaultChecked": + defaultChecked = propKey; + break; + case "value": + value = propKey; + break; + case "defaultValue": + defaultValue = propKey; + break; + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + propKey !== lastProp && + setProp( + domElement, + tag, + propKey$240, + propKey, + nextProps, + lastProp + ); + } + } + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + case "select": + defaultValue = value = propKey = propKey$240 = null; + for (type in lastProps) + if ( + ((lastDefaultValue = lastProps[type]), + lastProps.hasOwnProperty(type) && null != lastDefaultValue) + ) + switch (type) { + case "value": + break; + case "multiple": + defaultValue = lastDefaultValue; + default: + nextProps.hasOwnProperty(type) || + setProp( + domElement, + tag, + type, + null, + nextProps, + lastDefaultValue + ); + } + for (name in nextProps) + if ( + ((type = nextProps[name]), + (lastDefaultValue = lastProps[name]), + nextProps.hasOwnProperty(name) && + (null != type || null != lastDefaultValue)) + ) + switch (name) { + case "value": + propKey$240 = type; + break; + case "defaultValue": + propKey = type; + break; + case "multiple": + value = type; + default: + type !== lastDefaultValue && + setProp( + domElement, + tag, + name, + type, + nextProps, + lastDefaultValue + ); + } + updateSelect(domElement, propKey$240, propKey, value, defaultValue); + return; + case "textarea": + propKey = propKey$240 = null; + for (defaultValue in lastProps) + if ( + ((name = lastProps[defaultValue]), + lastProps.hasOwnProperty(defaultValue) && + null != name && + !nextProps.hasOwnProperty(defaultValue)) + ) + switch (defaultValue) { + case "value": + break; + case "children": + break; + default: + setProp(domElement, tag, defaultValue, null, nextProps, name); + } + for (value in nextProps) + if ( + ((name = nextProps[value]), + (type = lastProps[value]), + nextProps.hasOwnProperty(value) && (null != name || null != type)) + ) + switch (value) { + case "value": + propKey$240 = name; + break; + case "defaultValue": + propKey = name; + break; + case "children": + break; + case "dangerouslySetInnerHTML": + if (null != name) throw Error(formatProdErrorMessage(91)); + break; + default: + name !== type && + setProp(domElement, tag, value, name, nextProps, type); + } + updateTextarea(domElement, propKey$240, propKey); + return; + case "option": + for (var propKey$258 in lastProps) + if ( + ((propKey$240 = lastProps[propKey$258]), + lastProps.hasOwnProperty(propKey$258) && + null != propKey$240 && + !nextProps.hasOwnProperty(propKey$258)) + ) + switch (propKey$258) { + case "selected": + domElement.selected = !1; + break; + default: + setProp( + domElement, + tag, + propKey$258, + null, + nextProps, + propKey$240 + ); + } + for (lastDefaultValue in nextProps) + if ( + ((propKey$240 = nextProps[lastDefaultValue]), + (propKey = lastProps[lastDefaultValue]), + nextProps.hasOwnProperty(lastDefaultValue) && + propKey$240 !== propKey && + (null != propKey$240 || null != propKey)) + ) + switch (lastDefaultValue) { + case "selected": + domElement.selected = + propKey$240 && + "function" !== typeof propKey$240 && + "symbol" !== typeof propKey$240; + break; + default: + setProp( + domElement, + tag, + lastDefaultValue, + propKey$240, + nextProps, + propKey + ); + } + return; + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": + for (var propKey$263 in lastProps) + (propKey$240 = lastProps[propKey$263]), + lastProps.hasOwnProperty(propKey$263) && + null != propKey$240 && + !nextProps.hasOwnProperty(propKey$263) && + setProp(domElement, tag, propKey$263, null, nextProps, propKey$240); + for (checked in nextProps) + if ( + ((propKey$240 = nextProps[checked]), + (propKey = lastProps[checked]), + nextProps.hasOwnProperty(checked) && + propKey$240 !== propKey && + (null != propKey$240 || null != propKey)) + ) + switch (checked) { + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey$240) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + setProp( + domElement, + tag, + checked, + propKey$240, + nextProps, + propKey + ); + } + return; + default: + if (isCustomElement(tag)) { + for (var propKey$268 in lastProps) + (propKey$240 = lastProps[propKey$268]), + lastProps.hasOwnProperty(propKey$268) && + null != propKey$240 && + !nextProps.hasOwnProperty(propKey$268) && + setPropOnCustomElement( + domElement, + tag, + propKey$268, + null, + nextProps, + propKey$240 + ); + for (defaultChecked in nextProps) + (propKey$240 = nextProps[defaultChecked]), + (propKey = lastProps[defaultChecked]), + !nextProps.hasOwnProperty(defaultChecked) || + propKey$240 === propKey || + (null == propKey$240 && null == propKey) || + setPropOnCustomElement( + domElement, + tag, + defaultChecked, + propKey$240, + nextProps, + propKey + ); + return; + } + } + for (var propKey$273 in lastProps) + (propKey$240 = lastProps[propKey$273]), + lastProps.hasOwnProperty(propKey$273) && + null != propKey$240 && + !nextProps.hasOwnProperty(propKey$273) && + setProp(domElement, tag, propKey$273, null, nextProps, propKey$240); + for (lastProp in nextProps) + (propKey$240 = nextProps[lastProp]), + (propKey = lastProps[lastProp]), + !nextProps.hasOwnProperty(lastProp) || + propKey$240 === propKey || + (null == propKey$240 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$240, nextProps, propKey); +} +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -15246,14 +15709,31 @@ function updateProperties( case "li": break; case "input": - "radio" === nextProps.type && - null != nextProps.name && - ((lastProps = nextProps.checked), - null != lastProps && (domElement.checked = lastProps)); - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) { - var propKey = updatePayload[lastProps], - propValue = updatePayload[lastProps + 1]; + var name = nextProps.name, + type = nextProps.type, + value = nextProps.value, + defaultValue = nextProps.defaultValue; + lastProps = lastProps.defaultValue; + for ( + var checked = nextProps.checked, + defaultChecked = nextProps.defaultChecked, + i = 0; + i < updatePayload.length; + i += 2 + ) { + var propKey = updatePayload[i], + propValue = updatePayload[i + 1]; switch (propKey) { + case "type": + null != propValue && + "function" !== typeof propValue && + "symbol" !== typeof propValue && + "boolean" !== typeof propValue + ? domElement.setAttribute(propKey, propValue) + : domElement.removeAttribute(propKey); + break; + case "name": + break; case "checked": propKey = null != propValue ? propValue : nextProps.defaultChecked; domElement.checked = @@ -15261,83 +15741,89 @@ function updateProperties( "function" !== typeof propKey && "symbol" !== propKey; break; + case "defaultChecked": + break; case "value": break; + case "defaultValue": + break; case "children": case "dangerouslySetInnerHTML": if (null != propValue) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } - updateInput(domElement, nextProps); + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastProps, + checked, + defaultChecked, + type + ); return; case "select": - for (propKey = 0; propKey < updatePayload.length; propKey += 2) { - propValue = updatePayload[propKey]; - var propValue$235 = updatePayload[propKey + 1]; - switch (propValue) { + name = nextProps.value; + type = nextProps.defaultValue; + value = nextProps.multiple; + defaultValue = lastProps.multiple; + for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + switch ( + ((checked = updatePayload[lastProps]), + (defaultChecked = updatePayload[lastProps + 1]), + checked) + ) { case "value": break; default: - setProp(domElement, tag, propValue, propValue$235, nextProps); + setProp(domElement, tag, checked, defaultChecked, nextProps, null); } - } - updatePayload = !!lastProps.multiple; - tag = nextProps.value; - null != tag - ? updateOptions(domElement, !!nextProps.multiple, tag, !1) - : updatePayload !== !!nextProps.multiple && - (null != nextProps.defaultValue - ? updateOptions( - domElement, - !!nextProps.multiple, - nextProps.defaultValue, - !0 - ) - : updateOptions( - domElement, - !!nextProps.multiple, - nextProps.multiple ? [] : "", - !1 - )); + updateSelect(domElement, name, type, value, defaultValue); return; case "textarea": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + name = nextProps.value; + type = nextProps.defaultValue; + for (value = 0; value < updatePayload.length; value += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((defaultValue = updatePayload[value]), + (lastProps = updatePayload[value + 1]), + defaultValue) ) { case "value": break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propValue) throw Error(formatProdErrorMessage(91)); + if (null != lastProps) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, defaultValue, lastProps, nextProps, null); } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, name, type); return; case "option": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "selected": domElement.selected = - propValue && - "function" !== typeof propValue && - "symbol" !== typeof propValue; + value && "function" !== typeof value && "symbol" !== typeof value; break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; case "img": @@ -15355,41 +15841,42 @@ function updateProperties( case "track": case "wbr": case "menuitem": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "children": case "dangerouslySetInnerHTML": - if (null != propValue) - throw Error(formatProdErrorMessage(137, tag)); + if (null != value) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; default: if (isCustomElement(tag)) { - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setPropOnCustomElement( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); return; } } - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setProp( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); } var Dispatcher$1 = Internals.Dispatcher, @@ -15706,14 +16193,14 @@ function preinit$1(href, options) { switch (as) { case "style": as = getResourcesFromRoot(resourceRoot).hoistableStyles; - var key$252 = getStyleKey(href), + var key$301 = getStyleKey(href), precedence = options.precedence || "default", - resource = as.get(key$252); + resource = as.get(key$301); if (resource) break; var state = { loading: 0, preload: null }; if ( (resource = resourceRoot.querySelector( - getStylesheetSelectorFromKey(key$252) + getStylesheetSelectorFromKey(key$301) )) ) state.loading = 1; @@ -15724,7 +16211,7 @@ function preinit$1(href, options) { "data-precedence": precedence, crossOrigin: options.crossOrigin }; - (options = preloadPropsMap.get(key$252)) && + (options = preloadPropsMap.get(key$301)) && adoptPreloadPropsForStylesheet(href, options); var link = (resource = ( resourceRoot.ownerDocument || resourceRoot @@ -15750,15 +16237,15 @@ function preinit$1(href, options) { count: 1, state: state }; - as.set(key$252, resource); + as.set(key$301, resource); break; case "script": (as = getResourcesFromRoot(resourceRoot).hoistableScripts), - (key$252 = getScriptKey(href)), - (precedence = as.get(key$252)), + (key$301 = getScriptKey(href)), + (precedence = as.get(key$301)), precedence || ((precedence = resourceRoot.querySelector( - "script[async]" + key$252 + "script[async]" + key$301 )), precedence || ((href = { @@ -15767,7 +16254,7 @@ function preinit$1(href, options) { crossOrigin: options.crossOrigin, integrity: options.integrity }), - (options = preloadPropsMap.get(key$252)) && + (options = preloadPropsMap.get(key$301)) && adoptPreloadPropsForScript(href, options), (options = resourceRoot.ownerDocument || resourceRoot), (precedence = options.createElement("script")), @@ -15780,13 +16267,13 @@ function preinit$1(href, options) { count: 1, state: null }), - as.set(key$252, precedence)); + as.set(key$301, precedence)); } else if ("style" === as || "script" === as) if ((resourceRoot = getDocumentForPreloads())) { - key$252 = escapeSelectorAttributeValueInsideDoubleQuotes(href); - precedence = key$252 = - 'link[rel="preload"][as="' + as + '"][href="' + key$252 + '"]'; + key$301 = escapeSelectorAttributeValueInsideDoubleQuotes(href); + precedence = key$301 = + 'link[rel="preload"][as="' + as + '"][href="' + key$301 + '"]'; switch (as) { case "style": precedence = getStyleKey(href); @@ -15803,7 +16290,7 @@ function preinit$1(href, options) { integrity: options.integrity }), preloadPropsMap.set(precedence, href), - null === resourceRoot.querySelector(key$252) && + null === resourceRoot.querySelector(key$301) && ((options = resourceRoot.createElement("link")), setInitialProperties(options, "link", href), markNodeAsHoistable(options), @@ -15836,17 +16323,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$261 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$262 = styles$261.get(type); - resource$262 || + var styles$310 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$311 = styles$310.get(type); + resource$311 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$262 = { + (resource$311 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$261.set(type, resource$262), + styles$310.set(type, resource$311), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -15861,9 +16348,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$262.state + resource$311.state )); - return resource$262; + return resource$311; } return null; case "script": @@ -15935,36 +16422,36 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = key); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$267 = hoistableRoot.querySelector( + var instance$316 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$267) + if (instance$316) return ( - (resource.instance = instance$267), - markNodeAsHoistable(instance$267), - instance$267 + (resource.instance = instance$316), + markNodeAsHoistable(instance$316), + instance$316 ); key = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(key, styleProps); - instance$267 = ( + instance$316 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$267); - var linkInstance = instance$267; + markNodeAsHoistable(instance$316); + var linkInstance = instance$316; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$267, "link", key); + setInitialProperties(instance$316, "link", key); resource.state.loading |= 4; - insertStylesheet(instance$267, props.precedence, hoistableRoot); - return (resource.instance = instance$267); + insertStylesheet(instance$316, props.precedence, hoistableRoot); + return (resource.instance = instance$316); case "script": - instance$267 = getScriptKey(props.src); + instance$316 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - "script[async]" + instance$267 + "script[async]" + instance$316 )) ) return ( @@ -15973,7 +16460,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); key = props; - if ((styleProps = preloadPropsMap.get(instance$267))) + if ((styleProps = preloadPropsMap.get(instance$316))) (key = assign({}, props)), adoptPreloadPropsForScript(key, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -16343,10 +16830,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1859 = { +var devToolsConfig$jscomp$inline_1893 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-d3a94823", + version: "18.3.0-www-modern-5297e767", rendererPackageName: "react-dom" }; (function (internals) { @@ -16364,10 +16851,10 @@ var devToolsConfig$jscomp$inline_1859 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1859.bundleType, - version: devToolsConfig$jscomp$inline_1859.version, - rendererPackageName: devToolsConfig$jscomp$inline_1859.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1859.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1893.bundleType, + version: devToolsConfig$jscomp$inline_1893.version, + rendererPackageName: devToolsConfig$jscomp$inline_1893.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1893.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16384,14 +16871,14 @@ var devToolsConfig$jscomp$inline_1859 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1859.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1893.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-d3a94823" + reconcilerVersion: "18.3.0-www-modern-5297e767" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -16547,7 +17034,7 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-d3a94823"; +exports.version = "18.3.0-www-modern-5297e767"; /* 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 f95bf9e1cf73b..e971e03b1db33 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -133,7 +133,8 @@ var disableInputAttributeSyncing = enableCustomElementPropertySupport = dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = - dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, false is used for a new modern build. + dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, false is used for a new modern build. var enableProfilerTimer = true; var enableProfilerCommitHooks = true; var enableProfilerNestedUpdatePhase = true; @@ -3836,26 +3837,44 @@ function validateInputProps(element, props) { } } } -function updateInputChecked(element, props) { +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { var node = element; - var checked = props.checked; - if (checked != null) { - node.checked = checked; + if (value != null) { + if (type === "number") { + if ( + // $FlowFixMe[incompatible-type] + (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible. + // eslint-disable-next-line + node.value != value + ) { + node.value = toString(getToStringValue(value)); + } + } else if (node.value !== toString(getToStringValue(value))) { + node.value = toString(getToStringValue(value)); + } + } else if (type === "submit" || type === "reset") { + // Submit/reset inputs need the attribute removed completely to avoid + // blank-text buttons. + node.removeAttribute("value"); + return; } -} -function updateInput(element, props) { - var node = element; - var value = getToStringValue(props.value); - var type = props.type; if (disableInputAttributeSyncing) { // When not syncing the value attribute, React only assigns a new value // whenever the defaultValue React prop has changed. When not present, // React does nothing - if (props.defaultValue != null) { - setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); - } else { + if (defaultValue != null) { + setDefaultValue(node, type, getToStringValue(defaultValue)); + } else if (lastDefaultValue != null) { node.removeAttribute("value"); } } else { @@ -3864,11 +3883,11 @@ function updateInput(element, props) { // 1. The value React property // 2. The defaultValue React property // 3. Otherwise there should be no change - if (props.value != null) { - setDefaultValue(node, props.type, value); - } else if (props.defaultValue != null) { - setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); - } else { + if (value != null) { + setDefaultValue(node, type, getToStringValue(value)); + } else if (defaultValue != null) { + setDefaultValue(node, type, getToStringValue(defaultValue)); + } else if (lastDefaultValue != null) { node.removeAttribute("value"); } } @@ -3877,68 +3896,52 @@ function updateInput(element, props) { // When not syncing the checked attribute, the attribute is directly // controllable from the defaultValue React property. It needs to be // updated as new props come in. - if (props.defaultChecked == null) { + if (defaultChecked == null) { node.removeAttribute("checked"); } else { - node.defaultChecked = !!props.defaultChecked; + node.defaultChecked = !!defaultChecked; } } else { // When syncing the checked attribute, it only changes when it needs // to be removed, such as transitioning from a checkbox into a text input - if (props.checked == null && props.defaultChecked != null) { - node.defaultChecked = !!props.defaultChecked; + if (checked == null && defaultChecked != null) { + node.defaultChecked = !!defaultChecked; } } - updateInputChecked(element, props); - - if (value != null) { - if (type === "number") { - if ( - // $FlowFixMe[incompatible-type] - (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible. - // eslint-disable-next-line - node.value != value - ) { - node.value = toString(value); - } - } else if (node.value !== toString(value)) { - node.value = toString(value); - } - } else if (type === "submit" || type === "reset") { - // Submit/reset inputs need the attribute removed completely to avoid - // blank-text buttons. - node.removeAttribute("value"); - return; + if (checked != null && node.checked !== !!checked) { + node.checked = checked; } } -function initInput(element, props, isHydrating) { +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { var node = element; - if (props.value != null || props.defaultValue != null) { - var type = props.type; + if (value != null || defaultValue != null) { var isButton = type === "submit" || type === "reset"; // Avoid setting value attribute on submit/reset inputs as it overrides the // default value provided by the browser. See: #12872 - if (isButton && (props.value === undefined || props.value === null)) { + if (isButton && (value === undefined || value === null)) { return; } - var defaultValue = - props.defaultValue != null - ? toString(getToStringValue(props.defaultValue)) - : ""; + var defaultValueStr = + defaultValue != null ? toString(getToStringValue(defaultValue)) : ""; var initialValue = - props.value != null - ? toString(getToStringValue(props.value)) - : defaultValue; // Do not assign value if it is already set. This prevents user text input + value != null ? toString(getToStringValue(value)) : defaultValueStr; // Do not assign value if it is already set. This prevents user text input // from being lost during SSR hydration. if (!isHydrating) { if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); // When not syncing the value attribute, the value property points + // When not syncing the value attribute, the value property points // directly to the React prop. Only assign it if it exists. - if (value != null) { // Always assign on buttons so that it is possible to assign an // empty string to clear button text. @@ -3948,8 +3951,8 @@ function initInput(element, props, isHydrating) { // prematurely marking required inputs as invalid. Equality is compared // to the current value in case the browser provided value is not an // empty string. - if (isButton || value !== node.value) { - node.value = toString(value); + if (isButton || toString(getToStringValue(value)) !== node.value) { + node.value = toString(getToStringValue(value)); } } } else { @@ -3968,8 +3971,8 @@ function initInput(element, props, isHydrating) { if (disableInputAttributeSyncing) { // When not syncing the value attribute, assign the value attribute // directly from the defaultValue React property (when present) - if (props.defaultValue != null) { - node.defaultValue = defaultValue; + if (defaultValue != null) { + node.defaultValue = defaultValueStr; } } else { // Otherwise, the value attribute is synchronized to the property, @@ -3989,12 +3992,13 @@ function initInput(element, props, isHydrating) { node.name = ""; } - var defaultChecked = - props.checked != null ? props.checked : props.defaultChecked; + var checkedOrDefault = checked != null ? checked : defaultChecked; // TODO: This 'function' or 'symbol' check isn't replicated in other places + // so this semantic is inconsistent. + var initialChecked = - typeof defaultChecked !== "function" && - typeof defaultChecked !== "symbol" && - !!defaultChecked; // The checked property never gets assigned. It must be manually set. + typeof checkedOrDefault !== "function" && + typeof checkedOrDefault !== "symbol" && + !!checkedOrDefault; // The checked property never gets assigned. It must be manually set. // We don't want to do this when hydrating so that existing user input isn't // modified // TODO: I'm pretty sure this is a bug because initialValueTracking won't be @@ -4008,9 +4012,9 @@ function initInput(element, props, isHydrating) { // Only assign the checked attribute if it is defined. This saves // a DOM write when controlling the checked attribute isn't needed // (text inputs, submit/reset) - if (props.defaultChecked != null) { + if (defaultChecked != null) { node.defaultChecked = !node.defaultChecked; - node.defaultChecked = !!props.defaultChecked; + node.defaultChecked = !!defaultChecked; } } else { // When syncing the checked attribute, both the checked property and @@ -4028,12 +4032,16 @@ function initInput(element, props, isHydrating) { } } function restoreControlledInputState(element, props) { - var node = element; - updateInput(node, props); - updateNamedCousins(node, props); -} - -function updateNamedCousins(rootNode, props) { + var rootNode = element; + updateInput( + rootNode, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); var name = props.name; if (props.type === "radio" && name != null) { @@ -4081,7 +4089,15 @@ function updateNamedCousins(rootNode, props) { // was previously checked to update will cause it to be come re-checked // as appropriate. - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } // In Chrome, assigning defaultValue to certain input types triggers input validation. @@ -4157,12 +4173,6 @@ function validateOptionProps(element, props) { } } } -function initOption(element, props) { - // value="" should make a value attribute (#6219) - if (props.value != null) { - element.setAttribute("value", toString(getToStringValue(props.value))); - } -} var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare @@ -4309,31 +4319,28 @@ function validateSelectProps(element, props) { } } } -function initSelect(element, props) { +function initSelect(element, value, defaultValue, multiple) { var node = element; - node.multiple = !!props.multiple; - var value = props.value; + node.multiple = !!multiple; if (value != null) { - updateOptions(node, !!props.multiple, value, false); - } else if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue, true); + updateOptions(node, !!multiple, value, false); + } else if (defaultValue != null) { + updateOptions(node, !!multiple, defaultValue, true); } } -function updateSelect(element, prevProps, props) { +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { var node = element; - var wasMultiple = !!prevProps.multiple; - var value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value, false); - } else if (wasMultiple !== !!props.multiple) { + updateOptions(node, !!multiple, value, false); + } else if (!!wasMultiple !== !!multiple) { // For simplicity, reapply `defaultValue` if `multiple` is toggled. - if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue, true); + if (defaultValue != null) { + updateOptions(node, !!multiple, defaultValue, true); } else { // Revert the select back to its default unselected state. - updateOptions(node, !!props.multiple, props.multiple ? [] : "", false); + updateOptions(node, !!multiple, multiple ? [] : "", false); } } } @@ -4391,39 +4398,38 @@ function validateTextareaProps(element, props) { } } } -function updateTextarea(element, props) { +function updateTextarea(element, value, defaultValue) { var node = element; - var value = getToStringValue(props.value); - var defaultValue = getToStringValue(props.defaultValue); - - if (defaultValue != null) { - node.defaultValue = toString(defaultValue); - } else { - node.defaultValue = ""; - } if (value != null) { // Cast `value` to a string to ensure the value is set correctly. While // browsers typically do this as necessary, jsdom doesn't. - var newValue = toString(value); // To avoid side effects (such as losing text selection), only set value if changed + var newValue = toString(getToStringValue(value)); // To avoid side effects (such as losing text selection), only set value if changed if (newValue !== node.value) { node.value = newValue; } // TOOO: This should respect disableInputAttributeSyncing flag. - if (props.defaultValue == null && node.defaultValue !== newValue) { - node.defaultValue = newValue; + if (defaultValue == null) { + if (node.defaultValue !== newValue) { + node.defaultValue = newValue; + } + + return; } } + + if (defaultValue != null) { + node.defaultValue = toString(getToStringValue(defaultValue)); + } else { + node.defaultValue = ""; + } } -function initTextarea(element, props) { +function initTextarea(element, value, defaultValue, children) { var node = element; - var initialValue = props.value; // Only bother fetching default value if we're going to use it + var initialValue = value; // Only bother fetching default value if we're going to use it if (initialValue == null) { - var children = props.children, - defaultValue = props.defaultValue; - if (children != null) { { if (defaultValue != null) { @@ -4469,7 +4475,490 @@ function initTextarea(element, props) { } function restoreControlledTextareaState(element, props) { // DOM component is still mounted; update - updateTextarea(element, props); + updateTextarea(element, props.value, props.defaultValue); +} + +// This validation code was written based on the HTML5 parsing spec: +// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope +// +// Note: this does not catch all invalid nesting, nor does it try to (as it's +// not clear what practical benefit doing so provides); instead, we warn only +// for cases where the parser will give a parse tree differing from what React +// intended. For example, <b><div></div></b> is invalid but we don't warn +// because it still parses correctly; we do warn for other cases like nested +// <p> tags where the beginning of the second element implicitly closes the +// first, causing a confusing mess. +// https://html.spec.whatwg.org/multipage/syntax.html#special +var specialTags = [ + "address", + "applet", + "area", + "article", + "aside", + "base", + "basefont", + "bgsound", + "blockquote", + "body", + "br", + "button", + "caption", + "center", + "col", + "colgroup", + "dd", + "details", + "dir", + "div", + "dl", + "dt", + "embed", + "fieldset", + "figcaption", + "figure", + "footer", + "form", + "frame", + "frameset", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "head", + "header", + "hgroup", + "hr", + "html", + "iframe", + "img", + "input", + "isindex", + "li", + "link", + "listing", + "main", + "marquee", + "menu", + "menuitem", + "meta", + "nav", + "noembed", + "noframes", + "noscript", + "object", + "ol", + "p", + "param", + "plaintext", + "pre", + "script", + "section", + "select", + "source", + "style", + "summary", + "table", + "tbody", + "td", + "template", + "textarea", + "tfoot", + "th", + "thead", + "title", + "tr", + "track", + "ul", + "wbr", + "xmp" +]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope + +var inScopeTags = [ + "applet", + "caption", + "html", + "table", + "td", + "th", + "marquee", + "object", + "template", // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point + // TODO: Distinguish by namespace here -- for <title>, including it here + // errs on the side of fewer warnings + "foreignObject", + "desc", + "title" +]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope + +var buttonScopeTags = inScopeTags.concat(["button"]); // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags + +var impliedEndTags = ["dd", "dt", "li", "option", "optgroup", "p", "rp", "rt"]; +var emptyAncestorInfoDev = { + current: null, + formTag: null, + aTagInScope: null, + buttonTagInScope: null, + nobrTagInScope: null, + pTagInButtonScope: null, + listItemTagAutoclosing: null, + dlItemTagAutoclosing: null, + containerTagInScope: null +}; + +function updatedAncestorInfoDev(oldInfo, tag) { + { + var ancestorInfo = assign({}, oldInfo || emptyAncestorInfoDev); + + var info = { + tag: tag + }; + + if (inScopeTags.indexOf(tag) !== -1) { + ancestorInfo.aTagInScope = null; + ancestorInfo.buttonTagInScope = null; + ancestorInfo.nobrTagInScope = null; + } + + if (buttonScopeTags.indexOf(tag) !== -1) { + ancestorInfo.pTagInButtonScope = null; + } // See rules for 'li', 'dd', 'dt' start tags in + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody + + if ( + specialTags.indexOf(tag) !== -1 && + tag !== "address" && + tag !== "div" && + tag !== "p" + ) { + ancestorInfo.listItemTagAutoclosing = null; + ancestorInfo.dlItemTagAutoclosing = null; + } + + ancestorInfo.current = info; + + if (tag === "form") { + ancestorInfo.formTag = info; + } + + if (tag === "a") { + ancestorInfo.aTagInScope = info; + } + + if (tag === "button") { + ancestorInfo.buttonTagInScope = info; + } + + if (tag === "nobr") { + ancestorInfo.nobrTagInScope = info; + } + + if (tag === "p") { + ancestorInfo.pTagInButtonScope = info; + } + + if (tag === "li") { + ancestorInfo.listItemTagAutoclosing = info; + } + + if (tag === "dd" || tag === "dt") { + ancestorInfo.dlItemTagAutoclosing = info; + } + + if (tag === "#document" || tag === "html") { + ancestorInfo.containerTagInScope = null; + } else if (!ancestorInfo.containerTagInScope) { + ancestorInfo.containerTagInScope = info; + } + + return ancestorInfo; + } +} +/** + * Returns whether + */ + +function isTagValidWithParent(tag, parentTag) { + // First, let's check if we're in an unusual parsing mode... + switch (parentTag) { + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect + case "select": + return tag === "option" || tag === "optgroup" || tag === "#text"; + + case "optgroup": + return tag === "option" || tag === "#text"; + // Strictly speaking, seeing an <option> doesn't mean we're in a <select> + // but + + case "option": + return tag === "#text"; + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption + // No special behavior since these rules fall back to "in body" mode for + // all except special table nodes which cause bad parsing behavior anyway. + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr + + case "tr": + return ( + tag === "th" || + tag === "td" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody + + case "tbody": + case "thead": + case "tfoot": + return ( + tag === "tr" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup + + case "colgroup": + return tag === "col" || tag === "template"; + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable + + case "table": + return ( + tag === "caption" || + tag === "colgroup" || + tag === "tbody" || + tag === "tfoot" || + tag === "thead" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead + + case "head": + return ( + tag === "base" || + tag === "basefont" || + tag === "bgsound" || + tag === "link" || + tag === "meta" || + tag === "title" || + tag === "noscript" || + tag === "noframes" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element + + case "html": + return tag === "head" || tag === "body" || tag === "frameset"; + + case "frameset": + return tag === "frame"; + + case "#document": + return tag === "html"; + } // Probably in the "in body" parsing mode, so we outlaw only tag combos + // where the parsing rules cause implicit opens or closes to be added. + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody + + switch (tag) { + case "h1": + case "h2": + case "h3": + case "h4": + case "h5": + case "h6": + return ( + parentTag !== "h1" && + parentTag !== "h2" && + parentTag !== "h3" && + parentTag !== "h4" && + parentTag !== "h5" && + parentTag !== "h6" + ); + + case "rp": + case "rt": + return impliedEndTags.indexOf(parentTag) === -1; + + case "body": + case "caption": + case "col": + case "colgroup": + case "frameset": + case "frame": + case "head": + case "html": + case "tbody": + case "td": + case "tfoot": + case "th": + case "thead": + case "tr": + // These tags are only valid with a few parents that have special child + // parsing rules -- if we're down here, then none of those matched and + // so we allow it only if we don't know what the parent is, as all other + // cases are invalid. + return parentTag == null; + } + + return true; +} +/** + * Returns whether + */ + +function findInvalidAncestorForTag(tag, ancestorInfo) { + switch (tag) { + case "address": + case "article": + case "aside": + case "blockquote": + case "center": + case "details": + case "dialog": + case "dir": + case "div": + case "dl": + case "fieldset": + case "figcaption": + case "figure": + case "footer": + case "header": + case "hgroup": + case "main": + case "menu": + case "nav": + case "ol": + case "p": + case "section": + case "summary": + case "ul": + case "pre": + case "listing": + case "table": + case "hr": + case "xmp": + case "h1": + case "h2": + case "h3": + case "h4": + case "h5": + case "h6": + return ancestorInfo.pTagInButtonScope; + + case "form": + return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope; + + case "li": + return ancestorInfo.listItemTagAutoclosing; + + case "dd": + case "dt": + return ancestorInfo.dlItemTagAutoclosing; + + case "button": + return ancestorInfo.buttonTagInScope; + + case "a": + // Spec says something about storing a list of markers, but it sounds + // equivalent to this check. + return ancestorInfo.aTagInScope; + + case "nobr": + return ancestorInfo.nobrTagInScope; + } + + return null; +} + +var didWarn = {}; + +function validateDOMNesting(childTag, ancestorInfo) { + { + ancestorInfo = ancestorInfo || emptyAncestorInfoDev; + var parentInfo = ancestorInfo.current; + var parentTag = parentInfo && parentInfo.tag; + var invalidParent = isTagValidWithParent(childTag, parentTag) + ? null + : parentInfo; + var invalidAncestor = invalidParent + ? null + : findInvalidAncestorForTag(childTag, ancestorInfo); + var invalidParentOrAncestor = invalidParent || invalidAncestor; + + if (!invalidParentOrAncestor) { + return; + } + + var ancestorTag = invalidParentOrAncestor.tag; + var warnKey = String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; // eslint-disable-next-line react-internal/safe-string-coercion + + if (didWarn[warnKey]) { + return; + } + + didWarn[warnKey] = true; + var tagDisplayName = "<" + childTag + ">"; + + if (invalidParent) { + var info = ""; + + if (ancestorTag === "table" && childTag === "tr") { + info += + " Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by " + + "the browser."; + } + + error( + "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s", + tagDisplayName, + ancestorTag, + info + ); + } else { + error( + "validateDOMNesting(...): %s cannot appear as a descendant of " + + "<%s>.", + tagDisplayName, + ancestorTag + ); + } + } +} + +function validateTextNesting(childText, parentTag) { + { + if (isTagValidWithParent("#text", parentTag)) { + return; + } // eslint-disable-next-line react-internal/safe-string-coercion + + var warnKey = "#text|" + parentTag; + + if (didWarn[warnKey]) { + return; + } + + didWarn[warnKey] = true; + + if (/\S/.test(childText)) { + error( + "validateDOMNesting(...): Text nodes cannot appear as a child of <%s>.", + parentTag + ); + } else { + error( + "validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <%s>. " + + "Make sure you don't have any extra whitespace between tags on " + + "each line of your source code.", + parentTag + ); + } + } } var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml"; @@ -5056,6 +5545,44 @@ function createDangerousStringForStyles(styles) { return serialized || null; } } + +function setValueForStyle(style, styleName, value) { + var isCustomProperty = styleName.indexOf("--") === 0; + + { + if (!isCustomProperty) { + warnValidStyle(styleName, value); + } + } + + if (value == null || typeof value === "boolean" || value === "") { + if (isCustomProperty) { + style.setProperty(styleName, ""); + } else if (styleName === "float") { + style.cssFloat = ""; + } else { + style[styleName] = ""; + } + } else if (isCustomProperty) { + style.setProperty(styleName, value); + } else if ( + typeof value === "number" && + value !== 0 && + !isUnitlessNumber(styleName) + ) { + style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers + } else { + if (styleName === "float") { + style.cssFloat = value; + } else { + { + checkCSSPropertyStringCoercion(value, styleName); + } + + style[styleName] = ("" + value).trim(); + } + } +} /** * Sets the value for multiple styles on a node. If a value is specified as * '' (empty string), the corresponding style property will be unset. @@ -5064,7 +5591,7 @@ function createDangerousStringForStyles(styles) { * @param {object} styles */ -function setValueForStyles(node, styles) { +function setValueForStyles(node, styles, prevStyles) { if (styles != null && typeof styles !== "object") { throw new Error( "The `style` prop expects a mapping from style properties to values, " + @@ -5083,45 +5610,44 @@ function setValueForStyles(node, styles) { var style = node.style; - for (var styleName in styles) { - if (!styles.hasOwnProperty(styleName)) { - continue; + if (diffInCommitPhase && prevStyles != null) { + { + validateShorthandPropertyCollisionInDev(prevStyles, styles); } - var value = styles[styleName]; - var isCustomProperty = styleName.indexOf("--") === 0; + for (var styleName in prevStyles) { + if ( + prevStyles.hasOwnProperty(styleName) && + (styles == null || !styles.hasOwnProperty(styleName)) + ) { + // Clear style + var isCustomProperty = styleName.indexOf("--") === 0; - { - if (!isCustomProperty) { - warnValidStyle(styleName, value); + if (isCustomProperty) { + style.setProperty(styleName, ""); + } else if (styleName === "float") { + style.cssFloat = ""; + } else { + style[styleName] = ""; + } } } - if (value == null || typeof value === "boolean" || value === "") { - if (isCustomProperty) { - style.setProperty(styleName, ""); - } else if (styleName === "float") { - style.cssFloat = ""; - } else { - style[styleName] = ""; - } - } else if (isCustomProperty) { - style.setProperty(styleName, value); - } else if ( - typeof value === "number" && - value !== 0 && - !isUnitlessNumber(styleName) - ) { - style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers - } else { - if (styleName === "float") { - style.cssFloat = value; - } else { - { - checkCSSPropertyStringCoercion(value, styleName); - } + for (var _styleName in styles) { + var value = styles[_styleName]; - style[styleName] = ("" + value).trim(); + if ( + styles.hasOwnProperty(_styleName) && + prevStyles[_styleName] !== value + ) { + setValueForStyle(style, _styleName, value); + } + } + } else { + for (var _styleName2 in styles) { + if (styles.hasOwnProperty(_styleName2)) { + var _value = styles[_styleName2]; + setValueForStyle(style, _styleName2, _value); } } } @@ -5167,19 +5693,45 @@ function expandShorthandMap(styles) { * becomes .style.fontVariant = '' */ -function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) { +function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) { { if (!nextStyles) { return; + } // Compute the diff as it would happen elsewhere. + + var expandedUpdates = {}; + + if (prevStyles) { + for (var key in prevStyles) { + if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) { + var longhands = shorthandToLonghand[key] || [key]; + + for (var i = 0; i < longhands.length; i++) { + expandedUpdates[longhands[i]] = key; + } + } + } + } + + for (var _key in nextStyles) { + if ( + nextStyles.hasOwnProperty(_key) && + (!prevStyles || prevStyles[_key] !== nextStyles[_key]) + ) { + var _longhands = shorthandToLonghand[_key] || [_key]; + + for (var _i = 0; _i < _longhands.length; _i++) { + expandedUpdates[_longhands[_i]] = _key; + } + } } - var expandedUpdates = expandShorthandMap(styleUpdates); var expandedStyles = expandShorthandMap(nextStyles); var warnedAbout = {}; - for (var key in expandedUpdates) { - var originalKey = expandedUpdates[key]; - var correctOriginalKey = expandedStyles[key]; + for (var _key2 in expandedUpdates) { + var originalKey = expandedUpdates[_key2]; + var correctOriginalKey = expandedStyles[_key2]; if (correctOriginalKey && originalKey !== correctOriginalKey) { var warningKey = originalKey + "," + correctOriginalKey; @@ -5196,7 +5748,7 @@ function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) { "avoid this, don't mix shorthand and non-shorthand properties " + "for the same value; instead, replace the shorthand with " + "separate values.", - isValueEmpty(styleUpdates[originalKey]) ? "Removing" : "Updating", + isValueEmpty(nextStyles[originalKey]) ? "Removing" : "Updating", originalKey, correctOriginalKey ); @@ -6606,14 +7158,17 @@ function trapClickOnNonInteractiveElement(node) { var xlinkNamespace = "http://www.w3.org/1999/xlink"; var xmlNamespace = "http://www.w3.org/XML/1998/namespace"; -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": { if (typeof value === "string") { - // Avoid setting initial textContent when the text is empty. In IE11 setting + { + validateTextNesting(value, tag); + } // Avoid setting initial textContent when the text is empty. In IE11 setting // textContent on a <textarea> will cause the placeholder to not // show within the <textarea> until it has been focused and blurred again. // https://github.com/facebook/react/issues/6731#issuecomment-254874553 + var canSetTextContent = tag !== "body" && (tag !== "textarea" || value !== ""); @@ -6621,6 +7176,10 @@ function setProp(domElement, tag, key, value, props) { setTextContent(domElement, value); } } else if (typeof value === "number") { + { + validateTextNesting("" + value, tag); + } + var _canSetTextContent = tag !== "body"; if (_canSetTextContent) { @@ -6653,7 +7212,7 @@ function setProp(domElement, tag, key, value, props) { } case "style": { - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; } // These attributes accept URLs. These must not allow javascript: URLS. @@ -7041,6 +7600,20 @@ function setProp(domElement, tag, key, value, props) { break; // Properties that should not be allowed on custom elements. + case "is": { + { + if (prevValue != null) { + error('Cannot update the "is" prop after it has been initialized.'); + } + } // TODO: We shouldn't actually set this attribute, because we've already + // passed it to createElement. We don't also need the attribute. + // However, our tests currently query for it so it's plausible someone + // else does too so it's break. + + setValueForAttribute(domElement, "is", value); + break; + } + case "innerText": case "textContent": if (enableCustomElementPropertySupport) { @@ -7070,10 +7643,10 @@ function setProp(domElement, tag, key, value, props) { } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": { - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; } @@ -7204,6 +7777,11 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var type = null; + var value = null; + var defaultValue = null; + var checked = null; + var defaultChecked = null; for (var propKey in props) { if (!props.hasOwnProperty(propKey)) { @@ -7225,6 +7803,8 @@ function setInitialProperties(domElement, tag, props) { typeof propValue !== "symbol" && typeof propValue !== "boolean" ) { + type = propValue; + { checkAttributeStringCoercion(propValue, propKey); } @@ -7236,17 +7816,29 @@ function setInitialProperties(domElement, tag, props) { } case "checked": { - var checked = propValue != null ? propValue : props.defaultChecked; + checked = propValue; + var checkedValue = + propValue != null ? propValue : props.defaultChecked; var inputElement = domElement; inputElement.checked = - !!checked && - typeof checked !== "function" && - checked !== "symbol"; + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + break; + } + + case "defaultChecked": { + defaultChecked = propValue; break; } case "value": { - // This is handled by updateWrapper below. + value = propValue; + break; + } + + case "defaultValue": { + defaultValue = propValue; break; } @@ -7262,10 +7854,9 @@ function setInitialProperties(domElement, tag, props) { break; } - // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } } // TODO: Make sure we check if this is still unmounted or do any clean @@ -7273,7 +7864,15 @@ function setInitialProperties(domElement, tag, props) { track(domElement); validateInputProps(domElement, props); - initInput(domElement, props, false); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + false + ); return; } @@ -7284,6 +7883,9 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var _value = null; + var _defaultValue = null; + var multiple = null; for (var _propKey in props) { if (!props.hasOwnProperty(_propKey)) { @@ -7298,19 +7900,31 @@ function setInitialProperties(domElement, tag, props) { switch (_propKey) { case "value": { - // This is handled by updateWrapper below. + _value = _propValue; // This is handled by initSelect below. + + break; + } + + case "defaultValue": { + _defaultValue = _propValue; // This is handled by initSelect below. + break; } - // defaultValue are ignored by setProp + + case "multiple": { + multiple = _propValue; // TODO: We don't actually have to fall through here because we set it + // in initSelect anyway. We can remove the special case in setProp. + } + // Fallthrough default: { - setProp(domElement, tag, _propKey, _propValue, props); + setProp(domElement, tag, _propKey, _propValue, props, null); } } } validateSelectProps(domElement, props); - initSelect(domElement, props); + initSelect(domElement, _value, _defaultValue, multiple); return; } @@ -7321,6 +7935,9 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var _value2 = null; + var _defaultValue2 = null; + var children = null; for (var _propKey2 in props) { if (!props.hasOwnProperty(_propKey2)) { @@ -7335,12 +7952,19 @@ function setInitialProperties(domElement, tag, props) { switch (_propKey2) { case "value": { - // This is handled by updateWrapper below. + _value2 = _propValue2; // This is handled by initTextarea below. + + break; + } + + case "defaultValue": { + _defaultValue2 = _propValue2; break; } case "children": { - // TODO: Handled by initWrapperState above. + children = _propValue2; // Handled by initTextarea above. + break; } @@ -7354,7 +7978,6 @@ function setInitialProperties(domElement, tag, props) { break; } - // defaultValue is ignored by setProp default: { setProp(domElement, tag, _propKey2, _propValue2, props); @@ -7365,7 +7988,7 @@ function setInitialProperties(domElement, tag, props) { track(domElement); validateTextareaProps(domElement, props); - initTextarea(domElement, props); + initTextarea(domElement, _value2, _defaultValue2, children); return; } @@ -7399,7 +8022,6 @@ function setInitialProperties(domElement, tag, props) { } } - initOption(domElement, props); return; } @@ -7488,7 +8110,7 @@ function setInitialProperties(domElement, tag, props) { // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey4, _propValue4, props); + setProp(domElement, tag, _propKey4, _propValue4, props, null); } } } @@ -7514,7 +8136,8 @@ function setInitialProperties(domElement, tag, props) { tag, _propKey5, _propValue5, - props + props, + null ); } @@ -7534,7 +8157,7 @@ function setInitialProperties(domElement, tag, props) { continue; } - setProp(domElement, tag, _propKey6, _propValue6, props); + setProp(domElement, tag, _propKey6, _propValue6, props, null); } } // Calculate the diff between the two objects. @@ -7651,16 +8274,619 @@ function diffProperties(domElement, tag, lastProps, nextProps) { if (styleUpdates) { { - validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style); + validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style); } (updatePayload = updatePayload || []).push("style", styleUpdates); } return updatePayload; +} +function updateProperties(domElement, tag, lastProps, nextProps) { + { + validatePropertiesInDevelopment(tag, nextProps); + } + + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": { + // Fast track the most common tag types + break; + } + + case "input": { + var name = null; + var type = null; + var value = null; + var defaultValue = null; + var lastDefaultValue = null; + var checked = null; + var defaultChecked = null; + + for (var propKey in lastProps) { + var lastProp = lastProps[propKey]; + + if (lastProps.hasOwnProperty(propKey) && lastProp != null) { + switch (propKey) { + case "checked": { + if (!nextProps.hasOwnProperty(propKey)) { + var checkedValue = nextProps.defaultChecked; + var inputElement = domElement; + inputElement.checked = + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + } + + break; + } + + case "value": { + // This is handled by updateWrapper below. + break; + } + + case "defaultValue": { + lastDefaultValue = lastProp; + } + // defaultChecked and defaultValue are ignored by setProp + // Fallthrough + + default: { + if (!nextProps.hasOwnProperty(propKey)) + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + } + } + + for (var _propKey7 in nextProps) { + var nextProp = nextProps[_propKey7]; + var _lastProp = lastProps[_propKey7]; + + if ( + nextProps.hasOwnProperty(_propKey7) && + (nextProp != null || _lastProp != null) + ) { + switch (_propKey7) { + case "type": { + type = nextProp; // Fast path since 'type' is very common on inputs + + if (nextProp !== _lastProp) { + if ( + nextProp != null && + typeof nextProp !== "function" && + typeof nextProp !== "symbol" && + typeof nextProp !== "boolean" + ) { + { + checkAttributeStringCoercion(nextProp, _propKey7); + } + + domElement.setAttribute(_propKey7, nextProp); + } else { + domElement.removeAttribute(_propKey7); + } + } + + break; + } + + case "name": { + name = nextProp; + break; + } + + case "checked": { + checked = nextProp; + + if (nextProp !== _lastProp) { + var _checkedValue = + nextProp != null ? nextProp : nextProps.defaultChecked; + + var _inputElement = domElement; + _inputElement.checked = + !!_checkedValue && + typeof _checkedValue !== "function" && + _checkedValue !== "symbol"; + } + + break; + } + + case "defaultChecked": { + defaultChecked = nextProp; + break; + } + + case "value": { + value = nextProp; + break; + } + + case "defaultValue": { + defaultValue = nextProp; + break; + } + + case "children": + case "dangerouslySetInnerHTML": { + if (nextProp != null) { + throw new Error( + tag + + " is a void element tag and must neither have `children` nor " + + "use `dangerouslySetInnerHTML`." + ); + } + + break; + } + + default: { + if (nextProp !== _lastProp) + setProp( + domElement, + tag, + _propKey7, + nextProp, + nextProps, + _lastProp + ); + } + } + } + } + + { + var wasControlled = + lastProps.type === "checkbox" || lastProps.type === "radio" + ? lastProps.checked != null + : lastProps.value != null; + var isControlled = + nextProps.type === "checkbox" || nextProps.type === "radio" + ? nextProps.checked != null + : nextProps.value != null; + + if ( + !wasControlled && + isControlled && + !didWarnUncontrolledToControlled + ) { + error( + "A component is changing an uncontrolled input to be controlled. " + + "This is likely caused by the value changing from undefined to " + + "a defined value, which should not happen. " + + "Decide between using a controlled or uncontrolled input " + + "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components" + ); + + didWarnUncontrolledToControlled = true; + } + + if ( + wasControlled && + !isControlled && + !didWarnControlledToUncontrolled + ) { + error( + "A component is changing a controlled input to be uncontrolled. " + + "This is likely caused by the value changing from a defined to " + + "undefined, which should not happen. " + + "Decide between using a controlled or uncontrolled input " + + "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components" + ); + + didWarnControlledToUncontrolled = true; + } + } // Update checked *before* name. + // In the middle of an update, it is possible to have multiple checked. + // When a checked radio tries to change name, browser makes another radio's checked false. + + if ( + name != null && + typeof name !== "function" && + typeof name !== "symbol" && + typeof name !== "boolean" + ) { + { + checkAttributeStringCoercion(name, "name"); + } + + domElement.setAttribute("name", name); + } else { + domElement.removeAttribute("name"); + } // Update the wrapper around inputs *after* updating props. This has to + // happen after updating the rest of props. Otherwise HTML5 input validations + // raise warnings and prevent the new value from being assigned. + + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + } + + case "select": { + var _value3 = null; + var _defaultValue3 = null; + var multiple = null; + var wasMultiple = null; + + for (var _propKey8 in lastProps) { + var _lastProp2 = lastProps[_propKey8]; + + if (lastProps.hasOwnProperty(_propKey8) && _lastProp2 != null) { + switch (_propKey8) { + case "value": { + // This is handled by updateWrapper below. + break; + } + // defaultValue are ignored by setProp + + case "multiple": { + wasMultiple = _lastProp2; // TODO: Move special case in here from setProp. + } + // Fallthrough + + default: { + if (!nextProps.hasOwnProperty(_propKey8)) + setProp( + domElement, + tag, + _propKey8, + null, + nextProps, + _lastProp2 + ); + } + } + } + } + + for (var _propKey9 in nextProps) { + var _nextProp = nextProps[_propKey9]; + var _lastProp3 = lastProps[_propKey9]; + + if ( + nextProps.hasOwnProperty(_propKey9) && + (_nextProp != null || _lastProp3 != null) + ) { + switch (_propKey9) { + case "value": { + _value3 = _nextProp; // This is handled by updateSelect below. + + break; + } + + case "defaultValue": { + _defaultValue3 = _nextProp; + break; + } + + case "multiple": { + multiple = _nextProp; // TODO: Just move the special case in here from setProp. + } + // Fallthrough + + default: { + if (_nextProp !== _lastProp3) + setProp( + domElement, + tag, + _propKey9, + _nextProp, + nextProps, + _lastProp3 + ); + } + } + } + } // <select> value update needs to occur after <option> children + // reconciliation + + updateSelect(domElement, _value3, _defaultValue3, multiple, wasMultiple); + return; + } + + case "textarea": { + var _value4 = null; + var _defaultValue4 = null; + + for (var _propKey10 in lastProps) { + var _lastProp4 = lastProps[_propKey10]; + + if ( + lastProps.hasOwnProperty(_propKey10) && + _lastProp4 != null && + !nextProps.hasOwnProperty(_propKey10) + ) { + switch (_propKey10) { + case "value": { + // This is handled by updateTextarea below. + break; + } + + case "children": { + // TODO: This doesn't actually do anything if it updates. + break; + } + // defaultValue is ignored by setProp + + default: { + setProp(domElement, tag, _propKey10, null, nextProps, _lastProp4); + } + } + } + } + + for (var _propKey11 in nextProps) { + var _nextProp2 = nextProps[_propKey11]; + var _lastProp5 = lastProps[_propKey11]; + + if ( + nextProps.hasOwnProperty(_propKey11) && + (_nextProp2 != null || _lastProp5 != null) + ) { + switch (_propKey11) { + case "value": { + _value4 = _nextProp2; // This is handled by updateTextarea below. + + break; + } + + case "defaultValue": { + _defaultValue4 = _nextProp2; + break; + } + + case "children": { + // TODO: This doesn't actually do anything if it updates. + break; + } + + case "dangerouslySetInnerHTML": { + if (_nextProp2 != null) { + // TODO: Do we really need a special error message for this. It's also pretty blunt. + throw new Error( + "`dangerouslySetInnerHTML` does not make sense on <textarea>." + ); + } + + break; + } + + default: { + if (_nextProp2 !== _lastProp5) + setProp( + domElement, + tag, + _propKey11, + _nextProp2, + nextProps, + _lastProp5 + ); + } + } + } + } + + updateTextarea(domElement, _value4, _defaultValue4); + return; + } + + case "option": { + for (var _propKey12 in lastProps) { + var _lastProp6 = lastProps[_propKey12]; + + if ( + lastProps.hasOwnProperty(_propKey12) && + _lastProp6 != null && + !nextProps.hasOwnProperty(_propKey12) + ) { + switch (_propKey12) { + case "selected": { + // TODO: Remove support for selected on option. + domElement.selected = false; + break; + } + + default: { + setProp(domElement, tag, _propKey12, null, nextProps, _lastProp6); + } + } + } + } + + for (var _propKey13 in nextProps) { + var _nextProp3 = nextProps[_propKey13]; + var _lastProp7 = lastProps[_propKey13]; + + if ( + nextProps.hasOwnProperty(_propKey13) && + _nextProp3 !== _lastProp7 && + (_nextProp3 != null || _lastProp7 != null) + ) { + switch (_propKey13) { + case "selected": { + // TODO: Remove support for selected on option. + domElement.selected = + _nextProp3 && + typeof _nextProp3 !== "function" && + typeof _nextProp3 !== "symbol"; + break; + } + + default: { + setProp( + domElement, + tag, + _propKey13, + _nextProp3, + nextProps, + _lastProp7 + ); + } + } + } + } + + return; + } + + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": { + // Void elements + for (var _propKey14 in lastProps) { + var _lastProp8 = lastProps[_propKey14]; + + if ( + lastProps.hasOwnProperty(_propKey14) && + _lastProp8 != null && + !nextProps.hasOwnProperty(_propKey14) + ) { + setProp(domElement, tag, _propKey14, null, nextProps, _lastProp8); + } + } + + for (var _propKey15 in nextProps) { + var _nextProp4 = nextProps[_propKey15]; + var _lastProp9 = lastProps[_propKey15]; + + if ( + nextProps.hasOwnProperty(_propKey15) && + _nextProp4 !== _lastProp9 && + (_nextProp4 != null || _lastProp9 != null) + ) { + switch (_propKey15) { + case "children": + case "dangerouslySetInnerHTML": { + if (_nextProp4 != null) { + // TODO: Can we make this a DEV warning to avoid this deny list? + throw new Error( + tag + + " is a void element tag and must neither have `children` nor " + + "use `dangerouslySetInnerHTML`." + ); + } + + break; + } + // defaultChecked and defaultValue are ignored by setProp + + default: { + setProp( + domElement, + tag, + _propKey15, + _nextProp4, + nextProps, + _lastProp9 + ); + } + } + } + } + + return; + } + + default: { + if (isCustomElement(tag)) { + for (var _propKey16 in lastProps) { + var _lastProp10 = lastProps[_propKey16]; + + if ( + lastProps.hasOwnProperty(_propKey16) && + _lastProp10 != null && + !nextProps.hasOwnProperty(_propKey16) + ) { + setPropOnCustomElement( + domElement, + tag, + _propKey16, + null, + nextProps, + _lastProp10 + ); + } + } + + for (var _propKey17 in nextProps) { + var _nextProp5 = nextProps[_propKey17]; + var _lastProp11 = lastProps[_propKey17]; + + if ( + nextProps.hasOwnProperty(_propKey17) && + _nextProp5 !== _lastProp11 && + (_nextProp5 != null || _lastProp11 != null) + ) { + setPropOnCustomElement( + domElement, + tag, + _propKey17, + _nextProp5, + nextProps, + _lastProp11 + ); + } + } + + return; + } + } + } + + for (var _propKey18 in lastProps) { + var _lastProp12 = lastProps[_propKey18]; + + if ( + lastProps.hasOwnProperty(_propKey18) && + _lastProp12 != null && + !nextProps.hasOwnProperty(_propKey18) + ) { + setProp(domElement, tag, _propKey18, null, nextProps, _lastProp12); + } + } + + for (var _propKey19 in nextProps) { + var _nextProp6 = nextProps[_propKey19]; + var _lastProp13 = lastProps[_propKey19]; + + if ( + nextProps.hasOwnProperty(_propKey19) && + _nextProp6 !== _lastProp13 && + (_nextProp6 != null || _lastProp13 != null) + ) { + setProp(domElement, tag, _propKey19, _nextProp6, nextProps, _lastProp13); + } + } } // Apply the diff. -function updateProperties( +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -7681,31 +8907,63 @@ function updateProperties( } case "input": { - // Update checked *before* name. - // In the middle of an update, it is possible to have multiple checked. - // When a checked radio tries to change name, browser makes another radio's checked false. - if (nextProps.type === "radio" && nextProps.name != null) { - updateInputChecked(domElement, nextProps); - } + var name = nextProps.name; + var type = nextProps.type; + var value = nextProps.value; + var defaultValue = nextProps.defaultValue; + var lastDefaultValue = lastProps.defaultValue; + var checked = nextProps.checked; + var defaultChecked = nextProps.defaultChecked; for (var i = 0; i < updatePayload.length; i += 2) { var propKey = updatePayload[i]; var propValue = updatePayload[i + 1]; switch (propKey) { + case "type": { + // Fast path since 'type' is very common on inputs + if ( + propValue != null && + typeof propValue !== "function" && + typeof propValue !== "symbol" && + typeof propValue !== "boolean" + ) { + { + checkAttributeStringCoercion(propValue, propKey); + } + + domElement.setAttribute(propKey, propValue); + } else { + domElement.removeAttribute(propKey); + } + + break; + } + + case "name": { + break; + } + case "checked": { - var checked = + var checkedValue = propValue != null ? propValue : nextProps.defaultChecked; var inputElement = domElement; inputElement.checked = - !!checked && - typeof checked !== "function" && - checked !== "symbol"; + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + break; + } + + case "defaultChecked": { break; } case "value": { - // This is handled by updateWrapper below. + break; + } + + case "defaultValue": { break; } @@ -7721,10 +8979,9 @@ function updateProperties( break; } - // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } } @@ -7770,20 +9027,50 @@ function updateProperties( didWarnControlledToUncontrolled = true; } + } // Update checked *before* name. + // In the middle of an update, it is possible to have multiple checked. + // When a checked radio tries to change name, browser makes another radio's checked false. + + if ( + name != null && + typeof name !== "function" && + typeof name !== "symbol" && + typeof name !== "boolean" + ) { + { + checkAttributeStringCoercion(name, "name"); + } + + domElement.setAttribute("name", name); + } else { + domElement.removeAttribute("name"); } // Update the wrapper around inputs *after* updating props. This has to // happen after updating the rest of props. Otherwise HTML5 input validations // raise warnings and prevent the new value from being assigned. - updateInput(domElement, nextProps); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); return; } case "select": { + var _value5 = nextProps.value; + var _defaultValue5 = nextProps.defaultValue; + var multiple = nextProps.multiple; + var wasMultiple = lastProps.multiple; + for (var _i = 0; _i < updatePayload.length; _i += 2) { - var _propKey7 = updatePayload[_i]; + var _propKey20 = updatePayload[_i]; var _propValue7 = updatePayload[_i + 1]; - switch (_propKey7) { + switch (_propKey20) { case "value": { // This is handled by updateWrapper below. break; @@ -7791,22 +9078,25 @@ function updateProperties( // defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey7, _propValue7, nextProps); + setProp(domElement, tag, _propKey20, _propValue7, nextProps, null); } } } // <select> value update needs to occur after <option> children // reconciliation - updateSelect(domElement, lastProps, nextProps); + updateSelect(domElement, _value5, _defaultValue5, multiple, wasMultiple); return; } case "textarea": { + var _value6 = nextProps.value; + var _defaultValue6 = nextProps.defaultValue; + for (var _i2 = 0; _i2 < updatePayload.length; _i2 += 2) { - var _propKey8 = updatePayload[_i2]; + var _propKey21 = updatePayload[_i2]; var _propValue8 = updatePayload[_i2 + 1]; - switch (_propKey8) { + switch (_propKey21) { case "value": { // This is handled by updateWrapper below. break; @@ -7830,21 +9120,21 @@ function updateProperties( // defaultValue is ignored by setProp default: { - setProp(domElement, tag, _propKey8, _propValue8, nextProps); + setProp(domElement, tag, _propKey21, _propValue8, nextProps, null); } } } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, _value6, _defaultValue6); return; } case "option": { for (var _i3 = 0; _i3 < updatePayload.length; _i3 += 2) { - var _propKey9 = updatePayload[_i3]; + var _propKey22 = updatePayload[_i3]; var _propValue9 = updatePayload[_i3 + 1]; - switch (_propKey9) { + switch (_propKey22) { case "selected": { // TODO: Remove support for selected on option. domElement.selected = @@ -7855,7 +9145,7 @@ function updateProperties( } default: { - setProp(domElement, tag, _propKey9, _propValue9, nextProps); + setProp(domElement, tag, _propKey22, _propValue9, nextProps, null); } } } @@ -7880,10 +9170,10 @@ function updateProperties( case "menuitem": { // Void elements for (var _i4 = 0; _i4 < updatePayload.length; _i4 += 2) { - var _propKey10 = updatePayload[_i4]; + var _propKey23 = updatePayload[_i4]; var _propValue10 = updatePayload[_i4 + 1]; - switch (_propKey10) { + switch (_propKey23) { case "children": case "dangerouslySetInnerHTML": { if (_propValue10 != null) { @@ -7900,7 +9190,7 @@ function updateProperties( // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey10, _propValue10, nextProps); + setProp(domElement, tag, _propKey23, _propValue10, nextProps, null); } } } @@ -7911,14 +9201,15 @@ function updateProperties( default: { if (isCustomElement(tag)) { for (var _i5 = 0; _i5 < updatePayload.length; _i5 += 2) { - var _propKey11 = updatePayload[_i5]; + var _propKey24 = updatePayload[_i5]; var _propValue11 = updatePayload[_i5 + 1]; setPropOnCustomElement( domElement, tag, - _propKey11, + _propKey24, _propValue11, - nextProps + nextProps, + null ); } @@ -7928,9 +9219,9 @@ function updateProperties( } // Apply the diff. for (var _i6 = 0; _i6 < updatePayload.length; _i6 += 2) { - var _propKey12 = updatePayload[_i6]; + var _propKey25 = updatePayload[_i6]; var _propValue12 = updatePayload[_i6 + 1]; - setProp(domElement, tag, _propKey12, _propValue12, nextProps); + setProp(domElement, tag, _propKey25, _propValue12, nextProps, null); } } @@ -8922,7 +10213,15 @@ function diffHydratedProperties( // is not resilient to the DOM state changing so we don't do that here. // TODO: Consider not doing this for input and textarea. - initInput(domElement, props, true); + initInput( + domElement, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + true + ); break; case "option": @@ -8950,7 +10249,7 @@ function diffHydratedProperties( track(domElement); validateTextareaProps(domElement, props); - initTextarea(domElement, props); + initTextarea(domElement, props.value, props.defaultValue, props.children); break; } @@ -8977,7 +10276,18 @@ function diffHydratedProperties( } if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) { - updatePayload = ["children", children]; + if (diffInCommitPhase) { + // We really should be patching this in the commit phase but since + // this only affects legacy mode hydration which is deprecated anyway + // we can get away with it. + // Host singletons get their children appended and don't use the text + // content mechanism. + if (tag !== "body") { + domElement.textContent = children; + } + } else { + updatePayload = ["children", children]; + } } } } @@ -10580,11 +11890,13 @@ function prepareToHydrateHostInstance(fiber, hostContext) { shouldWarnIfMismatchDev ); // TODO: Type this specific to this type of component. - fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. + if (!diffInCommitPhase) { + fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. - if (updatePayload !== null) { - return true; + if (updatePayload !== null) { + return true; + } } return false; @@ -24635,29 +25947,28 @@ function updateHostComponent( // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; - } // If we get updated because one of our children updated, we don't - // have newProps so we'll have to reuse them. - // TODO: Split the update API as separate for the props vs. children. - // Even better would be if children weren't special cased at all tho. + } - var instance = workInProgress.stateNode; - var currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host - // component is hitting the resume path. Figure out why. Possibly - // related to `hidden`. + if (diffInCommitPhase) { + markUpdate(workInProgress); + } else { + // If we get updated because one of our children updated, we don't + // have newProps so we'll have to reuse them. + // TODO: Split the update API as separate for the props vs. children. + // Even better would be if children weren't special cased at all tho. + var instance = workInProgress.stateNode; // TODO: Experiencing an error where oldProps is null. Suggests a host + // component is hitting the resume path. Figure out why. Possibly + // related to `hidden`. - var updatePayload = prepareUpdate( - instance, - type, - oldProps, - newProps, - currentHostContext - ); // TODO: Type this specific to this type of component. + getHostContext(); + var updatePayload = prepareUpdate(instance, type, oldProps, newProps); // TODO: Type this specific to this type of component. - workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. All the work is done in commitWork. + workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. All the work is done in commitWork. - if (updatePayload) { - markUpdate(workInProgress); + if (updatePayload) { + markUpdate(workInProgress); + } } } } // This function must be called at the very end of the complete phase, because @@ -28817,7 +30128,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var _updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (_updatePayload !== null) { + if (_updatePayload !== null || diffInCommitPhase) { try { commitUpdate( _instance2, @@ -36537,7 +37848,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-f2b8a095"; +var ReactVersion = "18.3.0-www-classic-885b9748"; function createPortal$1( children, @@ -41924,489 +43235,6 @@ function hasRole(element, role) { return role === getImplicitRole(element); } -// This validation code was written based on the HTML5 parsing spec: -// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope -// -// Note: this does not catch all invalid nesting, nor does it try to (as it's -// not clear what practical benefit doing so provides); instead, we warn only -// for cases where the parser will give a parse tree differing from what React -// intended. For example, <b><div></div></b> is invalid but we don't warn -// because it still parses correctly; we do warn for other cases like nested -// <p> tags where the beginning of the second element implicitly closes the -// first, causing a confusing mess. -// https://html.spec.whatwg.org/multipage/syntax.html#special -var specialTags = [ - "address", - "applet", - "area", - "article", - "aside", - "base", - "basefont", - "bgsound", - "blockquote", - "body", - "br", - "button", - "caption", - "center", - "col", - "colgroup", - "dd", - "details", - "dir", - "div", - "dl", - "dt", - "embed", - "fieldset", - "figcaption", - "figure", - "footer", - "form", - "frame", - "frameset", - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "head", - "header", - "hgroup", - "hr", - "html", - "iframe", - "img", - "input", - "isindex", - "li", - "link", - "listing", - "main", - "marquee", - "menu", - "menuitem", - "meta", - "nav", - "noembed", - "noframes", - "noscript", - "object", - "ol", - "p", - "param", - "plaintext", - "pre", - "script", - "section", - "select", - "source", - "style", - "summary", - "table", - "tbody", - "td", - "template", - "textarea", - "tfoot", - "th", - "thead", - "title", - "tr", - "track", - "ul", - "wbr", - "xmp" -]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope - -var inScopeTags = [ - "applet", - "caption", - "html", - "table", - "td", - "th", - "marquee", - "object", - "template", // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point - // TODO: Distinguish by namespace here -- for <title>, including it here - // errs on the side of fewer warnings - "foreignObject", - "desc", - "title" -]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope - -var buttonScopeTags = inScopeTags.concat(["button"]); // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags - -var impliedEndTags = ["dd", "dt", "li", "option", "optgroup", "p", "rp", "rt"]; -var emptyAncestorInfoDev = { - current: null, - formTag: null, - aTagInScope: null, - buttonTagInScope: null, - nobrTagInScope: null, - pTagInButtonScope: null, - listItemTagAutoclosing: null, - dlItemTagAutoclosing: null, - containerTagInScope: null -}; - -function updatedAncestorInfoDev(oldInfo, tag) { - { - var ancestorInfo = assign({}, oldInfo || emptyAncestorInfoDev); - - var info = { - tag: tag - }; - - if (inScopeTags.indexOf(tag) !== -1) { - ancestorInfo.aTagInScope = null; - ancestorInfo.buttonTagInScope = null; - ancestorInfo.nobrTagInScope = null; - } - - if (buttonScopeTags.indexOf(tag) !== -1) { - ancestorInfo.pTagInButtonScope = null; - } // See rules for 'li', 'dd', 'dt' start tags in - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody - - if ( - specialTags.indexOf(tag) !== -1 && - tag !== "address" && - tag !== "div" && - tag !== "p" - ) { - ancestorInfo.listItemTagAutoclosing = null; - ancestorInfo.dlItemTagAutoclosing = null; - } - - ancestorInfo.current = info; - - if (tag === "form") { - ancestorInfo.formTag = info; - } - - if (tag === "a") { - ancestorInfo.aTagInScope = info; - } - - if (tag === "button") { - ancestorInfo.buttonTagInScope = info; - } - - if (tag === "nobr") { - ancestorInfo.nobrTagInScope = info; - } - - if (tag === "p") { - ancestorInfo.pTagInButtonScope = info; - } - - if (tag === "li") { - ancestorInfo.listItemTagAutoclosing = info; - } - - if (tag === "dd" || tag === "dt") { - ancestorInfo.dlItemTagAutoclosing = info; - } - - if (tag === "#document" || tag === "html") { - ancestorInfo.containerTagInScope = null; - } else if (!ancestorInfo.containerTagInScope) { - ancestorInfo.containerTagInScope = info; - } - - return ancestorInfo; - } -} -/** - * Returns whether - */ - -function isTagValidWithParent(tag, parentTag) { - // First, let's check if we're in an unusual parsing mode... - switch (parentTag) { - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect - case "select": - return tag === "option" || tag === "optgroup" || tag === "#text"; - - case "optgroup": - return tag === "option" || tag === "#text"; - // Strictly speaking, seeing an <option> doesn't mean we're in a <select> - // but - - case "option": - return tag === "#text"; - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption - // No special behavior since these rules fall back to "in body" mode for - // all except special table nodes which cause bad parsing behavior anyway. - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr - - case "tr": - return ( - tag === "th" || - tag === "td" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody - - case "tbody": - case "thead": - case "tfoot": - return ( - tag === "tr" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup - - case "colgroup": - return tag === "col" || tag === "template"; - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable - - case "table": - return ( - tag === "caption" || - tag === "colgroup" || - tag === "tbody" || - tag === "tfoot" || - tag === "thead" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead - - case "head": - return ( - tag === "base" || - tag === "basefont" || - tag === "bgsound" || - tag === "link" || - tag === "meta" || - tag === "title" || - tag === "noscript" || - tag === "noframes" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element - - case "html": - return tag === "head" || tag === "body" || tag === "frameset"; - - case "frameset": - return tag === "frame"; - - case "#document": - return tag === "html"; - } // Probably in the "in body" parsing mode, so we outlaw only tag combos - // where the parsing rules cause implicit opens or closes to be added. - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody - - switch (tag) { - case "h1": - case "h2": - case "h3": - case "h4": - case "h5": - case "h6": - return ( - parentTag !== "h1" && - parentTag !== "h2" && - parentTag !== "h3" && - parentTag !== "h4" && - parentTag !== "h5" && - parentTag !== "h6" - ); - - case "rp": - case "rt": - return impliedEndTags.indexOf(parentTag) === -1; - - case "body": - case "caption": - case "col": - case "colgroup": - case "frameset": - case "frame": - case "head": - case "html": - case "tbody": - case "td": - case "tfoot": - case "th": - case "thead": - case "tr": - // These tags are only valid with a few parents that have special child - // parsing rules -- if we're down here, then none of those matched and - // so we allow it only if we don't know what the parent is, as all other - // cases are invalid. - return parentTag == null; - } - - return true; -} -/** - * Returns whether - */ - -function findInvalidAncestorForTag(tag, ancestorInfo) { - switch (tag) { - case "address": - case "article": - case "aside": - case "blockquote": - case "center": - case "details": - case "dialog": - case "dir": - case "div": - case "dl": - case "fieldset": - case "figcaption": - case "figure": - case "footer": - case "header": - case "hgroup": - case "main": - case "menu": - case "nav": - case "ol": - case "p": - case "section": - case "summary": - case "ul": - case "pre": - case "listing": - case "table": - case "hr": - case "xmp": - case "h1": - case "h2": - case "h3": - case "h4": - case "h5": - case "h6": - return ancestorInfo.pTagInButtonScope; - - case "form": - return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope; - - case "li": - return ancestorInfo.listItemTagAutoclosing; - - case "dd": - case "dt": - return ancestorInfo.dlItemTagAutoclosing; - - case "button": - return ancestorInfo.buttonTagInScope; - - case "a": - // Spec says something about storing a list of markers, but it sounds - // equivalent to this check. - return ancestorInfo.aTagInScope; - - case "nobr": - return ancestorInfo.nobrTagInScope; - } - - return null; -} - -var didWarn = {}; - -function validateDOMNesting(childTag, childText, ancestorInfo) { - { - ancestorInfo = ancestorInfo || emptyAncestorInfoDev; - var parentInfo = ancestorInfo.current; - var parentTag = parentInfo && parentInfo.tag; - - if (childText != null) { - if (childTag != null) { - error( - "validateDOMNesting: when childText is passed, childTag should be null" - ); - } - - childTag = "#text"; - } else if (childTag == null) { - error("validateDOMNesting: when childText or childTag must be provided"); - - return; - } - - var invalidParent = isTagValidWithParent(childTag, parentTag) - ? null - : parentInfo; - var invalidAncestor = invalidParent - ? null - : findInvalidAncestorForTag(childTag, ancestorInfo); - var invalidParentOrAncestor = invalidParent || invalidAncestor; - - if (!invalidParentOrAncestor) { - return; - } - - var ancestorTag = invalidParentOrAncestor.tag; - var warnKey = String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; // eslint-disable-next-line react-internal/safe-string-coercion - - if (didWarn[warnKey]) { - return; - } - - didWarn[warnKey] = true; - var tagDisplayName = childTag; - var whitespaceInfo = ""; - - if (childTag === "#text") { - if (childText != null && /\S/.test(childText)) { - tagDisplayName = "Text nodes"; - } else { - tagDisplayName = "Whitespace text nodes"; - whitespaceInfo = - " Make sure you don't have any extra whitespace between tags on " + - "each line of your source code."; - } - } else { - tagDisplayName = "<" + childTag + ">"; - } - - if (invalidParent) { - var info = ""; - - if (ancestorTag === "table" && childTag === "tr") { - info += - " Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by " + - "the browser."; - } - - error( - "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s", - tagDisplayName, - ancestorTag, - whitespaceInfo, - info - ); - } else { - error( - "validateDOMNesting(...): %s cannot appear as a descendant of " + - "<%s>.", - tagDisplayName, - ancestorTag - ); - } - } -} - function validateLinkPropsForStyleResource(props) { { // This should only be called when we know we are opting into Resource semantics (i.e. precedence is not null) @@ -42734,20 +43562,7 @@ function createInstance( { // TODO: take namespace into account when validating. var hostContextDev = hostContext; - validateDOMNesting(type, null, hostContextDev.ancestorInfo); - - if ( - typeof props.children === "string" || - typeof props.children === "number" - ) { - var string = "" + props.children; - var ownAncestorInfo = updatedAncestorInfoDev( - hostContextDev.ancestorInfo, - type - ); - validateDOMNesting(null, string, ownAncestorInfo); - } - + validateDOMNesting(type, hostContextDev.ancestorInfo); namespace = hostContextDev.namespace; } @@ -42894,21 +43709,9 @@ function finalizeInitialChildren(domElement, type, props, hostContext) { } } function prepareUpdate(domElement, type, oldProps, newProps, hostContext) { - { - var hostContextDev = hostContext; - - if ( - typeof newProps.children !== typeof oldProps.children && - (typeof newProps.children === "string" || - typeof newProps.children === "number") - ) { - var string = "" + newProps.children; - var ownAncestorInfo = updatedAncestorInfoDev( - hostContextDev.ancestorInfo, - type - ); - validateDOMNesting(null, string, ownAncestorInfo); - } + if (diffInCommitPhase) { + // TODO: Figure out how to validateDOMNesting when children turn into a string. + return null; } return diffProperties(domElement, type, oldProps, newProps); @@ -42932,7 +43735,11 @@ function createTextInstance( ) { { var hostContextDev = hostContext; - validateDOMNesting(null, text, hostContextDev.ancestorInfo); + var ancestor = hostContextDev.ancestorInfo.current; + + if (ancestor != null) { + validateTextNesting(text, ancestor.tag); + } } var textNode = getOwnerDocumentFromRootContainer( @@ -43030,8 +43837,19 @@ function commitUpdate( newProps, internalInstanceHandle ) { - // Apply the diff to the DOM node. - updateProperties(domElement, updatePayload, type, oldProps, newProps); // Update the props handle so that we know which props are the ones with + if (diffInCommitPhase) { + // Diff and update the properties. + updateProperties(domElement, type, oldProps, newProps); + } else { + // Apply the diff to the DOM node. + updatePropertiesWithDiff( + domElement, + updatePayload, + type, + oldProps, + newProps + ); + } // Update the props handle so that we know which props are the ones with // with current event handlers. updateFiberProps(domElement, newProps); @@ -43920,7 +44738,7 @@ function resolveSingletonInstance( var hostContextDev = hostContext; if (validateDOMNestingDev) { - validateDOMNesting(type, null, hostContextDev.ancestorInfo); + validateDOMNesting(type, hostContextDev.ancestorInfo); } } diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index 583fb59c2a49d..746a4f46f9b7e 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -250,7 +250,8 @@ var disableInputAttributeSyncing = enableCustomElementPropertySupport = dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = - dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask; // On WWW, true is used for a new modern build. + dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase; // On WWW, true is used for a new modern build. var enableProfilerTimer = true; var enableProfilerCommitHooks = true; var enableProfilerNestedUpdatePhase = true; @@ -3772,26 +3773,44 @@ function validateInputProps(element, props) { } } } -function updateInputChecked(element, props) { +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { var node = element; - var checked = props.checked; - if (checked != null) { - node.checked = checked; + if (value != null) { + if (type === "number") { + if ( + // $FlowFixMe[incompatible-type] + (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible. + // eslint-disable-next-line + node.value != value + ) { + node.value = toString(getToStringValue(value)); + } + } else if (node.value !== toString(getToStringValue(value))) { + node.value = toString(getToStringValue(value)); + } + } else if (type === "submit" || type === "reset") { + // Submit/reset inputs need the attribute removed completely to avoid + // blank-text buttons. + node.removeAttribute("value"); + return; } -} -function updateInput(element, props) { - var node = element; - var value = getToStringValue(props.value); - var type = props.type; if (disableInputAttributeSyncing) { // When not syncing the value attribute, React only assigns a new value // whenever the defaultValue React prop has changed. When not present, // React does nothing - if (props.defaultValue != null) { - setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); - } else { + if (defaultValue != null) { + setDefaultValue(node, type, getToStringValue(defaultValue)); + } else if (lastDefaultValue != null) { node.removeAttribute("value"); } } else { @@ -3800,11 +3819,11 @@ function updateInput(element, props) { // 1. The value React property // 2. The defaultValue React property // 3. Otherwise there should be no change - if (props.value != null) { - setDefaultValue(node, props.type, value); - } else if (props.defaultValue != null) { - setDefaultValue(node, props.type, getToStringValue(props.defaultValue)); - } else { + if (value != null) { + setDefaultValue(node, type, getToStringValue(value)); + } else if (defaultValue != null) { + setDefaultValue(node, type, getToStringValue(defaultValue)); + } else if (lastDefaultValue != null) { node.removeAttribute("value"); } } @@ -3813,68 +3832,52 @@ function updateInput(element, props) { // When not syncing the checked attribute, the attribute is directly // controllable from the defaultValue React property. It needs to be // updated as new props come in. - if (props.defaultChecked == null) { + if (defaultChecked == null) { node.removeAttribute("checked"); } else { - node.defaultChecked = !!props.defaultChecked; + node.defaultChecked = !!defaultChecked; } } else { // When syncing the checked attribute, it only changes when it needs // to be removed, such as transitioning from a checkbox into a text input - if (props.checked == null && props.defaultChecked != null) { - node.defaultChecked = !!props.defaultChecked; + if (checked == null && defaultChecked != null) { + node.defaultChecked = !!defaultChecked; } } - updateInputChecked(element, props); - - if (value != null) { - if (type === "number") { - if ( - // $FlowFixMe[incompatible-type] - (value === 0 && node.value === "") || // We explicitly want to coerce to number here if possible. - // eslint-disable-next-line - node.value != value - ) { - node.value = toString(value); - } - } else if (node.value !== toString(value)) { - node.value = toString(value); - } - } else if (type === "submit" || type === "reset") { - // Submit/reset inputs need the attribute removed completely to avoid - // blank-text buttons. - node.removeAttribute("value"); - return; + if (checked != null && node.checked !== !!checked) { + node.checked = checked; } } -function initInput(element, props, isHydrating) { +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { var node = element; - if (props.value != null || props.defaultValue != null) { - var type = props.type; + if (value != null || defaultValue != null) { var isButton = type === "submit" || type === "reset"; // Avoid setting value attribute on submit/reset inputs as it overrides the // default value provided by the browser. See: #12872 - if (isButton && (props.value === undefined || props.value === null)) { + if (isButton && (value === undefined || value === null)) { return; } - var defaultValue = - props.defaultValue != null - ? toString(getToStringValue(props.defaultValue)) - : ""; + var defaultValueStr = + defaultValue != null ? toString(getToStringValue(defaultValue)) : ""; var initialValue = - props.value != null - ? toString(getToStringValue(props.value)) - : defaultValue; // Do not assign value if it is already set. This prevents user text input + value != null ? toString(getToStringValue(value)) : defaultValueStr; // Do not assign value if it is already set. This prevents user text input // from being lost during SSR hydration. if (!isHydrating) { if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); // When not syncing the value attribute, the value property points + // When not syncing the value attribute, the value property points // directly to the React prop. Only assign it if it exists. - if (value != null) { // Always assign on buttons so that it is possible to assign an // empty string to clear button text. @@ -3884,8 +3887,8 @@ function initInput(element, props, isHydrating) { // prematurely marking required inputs as invalid. Equality is compared // to the current value in case the browser provided value is not an // empty string. - if (isButton || value !== node.value) { - node.value = toString(value); + if (isButton || toString(getToStringValue(value)) !== node.value) { + node.value = toString(getToStringValue(value)); } } } else { @@ -3904,8 +3907,8 @@ function initInput(element, props, isHydrating) { if (disableInputAttributeSyncing) { // When not syncing the value attribute, assign the value attribute // directly from the defaultValue React property (when present) - if (props.defaultValue != null) { - node.defaultValue = defaultValue; + if (defaultValue != null) { + node.defaultValue = defaultValueStr; } } else { // Otherwise, the value attribute is synchronized to the property, @@ -3925,12 +3928,13 @@ function initInput(element, props, isHydrating) { node.name = ""; } - var defaultChecked = - props.checked != null ? props.checked : props.defaultChecked; + var checkedOrDefault = checked != null ? checked : defaultChecked; // TODO: This 'function' or 'symbol' check isn't replicated in other places + // so this semantic is inconsistent. + var initialChecked = - typeof defaultChecked !== "function" && - typeof defaultChecked !== "symbol" && - !!defaultChecked; // The checked property never gets assigned. It must be manually set. + typeof checkedOrDefault !== "function" && + typeof checkedOrDefault !== "symbol" && + !!checkedOrDefault; // The checked property never gets assigned. It must be manually set. // We don't want to do this when hydrating so that existing user input isn't // modified // TODO: I'm pretty sure this is a bug because initialValueTracking won't be @@ -3944,9 +3948,9 @@ function initInput(element, props, isHydrating) { // Only assign the checked attribute if it is defined. This saves // a DOM write when controlling the checked attribute isn't needed // (text inputs, submit/reset) - if (props.defaultChecked != null) { + if (defaultChecked != null) { node.defaultChecked = !node.defaultChecked; - node.defaultChecked = !!props.defaultChecked; + node.defaultChecked = !!defaultChecked; } } else { // When syncing the checked attribute, both the checked property and @@ -3964,12 +3968,16 @@ function initInput(element, props, isHydrating) { } } function restoreControlledInputState(element, props) { - var node = element; - updateInput(node, props); - updateNamedCousins(node, props); -} - -function updateNamedCousins(rootNode, props) { + var rootNode = element; + updateInput( + rootNode, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); var name = props.name; if (props.type === "radio" && name != null) { @@ -4017,7 +4025,15 @@ function updateNamedCousins(rootNode, props) { // was previously checked to update will cause it to be come re-checked // as appropriate. - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } // In Chrome, assigning defaultValue to certain input types triggers input validation. @@ -4093,12 +4109,6 @@ function validateOptionProps(element, props) { } } } -function initOption(element, props) { - // value="" should make a value attribute (#6219) - if (props.value != null) { - element.setAttribute("value", toString(getToStringValue(props.value))); - } -} var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare @@ -4245,31 +4255,28 @@ function validateSelectProps(element, props) { } } } -function initSelect(element, props) { +function initSelect(element, value, defaultValue, multiple) { var node = element; - node.multiple = !!props.multiple; - var value = props.value; + node.multiple = !!multiple; if (value != null) { - updateOptions(node, !!props.multiple, value, false); - } else if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue, true); + updateOptions(node, !!multiple, value, false); + } else if (defaultValue != null) { + updateOptions(node, !!multiple, defaultValue, true); } } -function updateSelect(element, prevProps, props) { +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { var node = element; - var wasMultiple = !!prevProps.multiple; - var value = props.value; if (value != null) { - updateOptions(node, !!props.multiple, value, false); - } else if (wasMultiple !== !!props.multiple) { + updateOptions(node, !!multiple, value, false); + } else if (!!wasMultiple !== !!multiple) { // For simplicity, reapply `defaultValue` if `multiple` is toggled. - if (props.defaultValue != null) { - updateOptions(node, !!props.multiple, props.defaultValue, true); + if (defaultValue != null) { + updateOptions(node, !!multiple, defaultValue, true); } else { // Revert the select back to its default unselected state. - updateOptions(node, !!props.multiple, props.multiple ? [] : "", false); + updateOptions(node, !!multiple, multiple ? [] : "", false); } } } @@ -4327,38 +4334,38 @@ function validateTextareaProps(element, props) { } } } -function updateTextarea(element, props) { +function updateTextarea(element, value, defaultValue) { var node = element; - var value = getToStringValue(props.value); - var defaultValue = getToStringValue(props.defaultValue); - - if (defaultValue != null) { - node.defaultValue = toString(defaultValue); - } else { - node.defaultValue = ""; - } if (value != null) { // Cast `value` to a string to ensure the value is set correctly. While // browsers typically do this as necessary, jsdom doesn't. - var newValue = toString(value); // To avoid side effects (such as losing text selection), only set value if changed + var newValue = toString(getToStringValue(value)); // To avoid side effects (such as losing text selection), only set value if changed if (newValue !== node.value) { node.value = newValue; } // TOOO: This should respect disableInputAttributeSyncing flag. - if (props.defaultValue == null && node.defaultValue !== newValue) { - node.defaultValue = newValue; + if (defaultValue == null) { + if (node.defaultValue !== newValue) { + node.defaultValue = newValue; + } + + return; } } + + if (defaultValue != null) { + node.defaultValue = toString(getToStringValue(defaultValue)); + } else { + node.defaultValue = ""; + } } -function initTextarea(element, props) { +function initTextarea(element, value, defaultValue, children) { var node = element; - var initialValue = props.value; // Only bother fetching default value if we're going to use it + var initialValue = value; // Only bother fetching default value if we're going to use it if (initialValue == null) { - var defaultValue = props.defaultValue; - if (defaultValue == null) { defaultValue = ""; } @@ -4384,7 +4391,490 @@ function initTextarea(element, props) { } function restoreControlledTextareaState(element, props) { // DOM component is still mounted; update - updateTextarea(element, props); + updateTextarea(element, props.value, props.defaultValue); +} + +// This validation code was written based on the HTML5 parsing spec: +// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope +// +// Note: this does not catch all invalid nesting, nor does it try to (as it's +// not clear what practical benefit doing so provides); instead, we warn only +// for cases where the parser will give a parse tree differing from what React +// intended. For example, <b><div></div></b> is invalid but we don't warn +// because it still parses correctly; we do warn for other cases like nested +// <p> tags where the beginning of the second element implicitly closes the +// first, causing a confusing mess. +// https://html.spec.whatwg.org/multipage/syntax.html#special +var specialTags = [ + "address", + "applet", + "area", + "article", + "aside", + "base", + "basefont", + "bgsound", + "blockquote", + "body", + "br", + "button", + "caption", + "center", + "col", + "colgroup", + "dd", + "details", + "dir", + "div", + "dl", + "dt", + "embed", + "fieldset", + "figcaption", + "figure", + "footer", + "form", + "frame", + "frameset", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "head", + "header", + "hgroup", + "hr", + "html", + "iframe", + "img", + "input", + "isindex", + "li", + "link", + "listing", + "main", + "marquee", + "menu", + "menuitem", + "meta", + "nav", + "noembed", + "noframes", + "noscript", + "object", + "ol", + "p", + "param", + "plaintext", + "pre", + "script", + "section", + "select", + "source", + "style", + "summary", + "table", + "tbody", + "td", + "template", + "textarea", + "tfoot", + "th", + "thead", + "title", + "tr", + "track", + "ul", + "wbr", + "xmp" +]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope + +var inScopeTags = [ + "applet", + "caption", + "html", + "table", + "td", + "th", + "marquee", + "object", + "template", // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point + // TODO: Distinguish by namespace here -- for <title>, including it here + // errs on the side of fewer warnings + "foreignObject", + "desc", + "title" +]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope + +var buttonScopeTags = inScopeTags.concat(["button"]); // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags + +var impliedEndTags = ["dd", "dt", "li", "option", "optgroup", "p", "rp", "rt"]; +var emptyAncestorInfoDev = { + current: null, + formTag: null, + aTagInScope: null, + buttonTagInScope: null, + nobrTagInScope: null, + pTagInButtonScope: null, + listItemTagAutoclosing: null, + dlItemTagAutoclosing: null, + containerTagInScope: null +}; + +function updatedAncestorInfoDev(oldInfo, tag) { + { + var ancestorInfo = assign({}, oldInfo || emptyAncestorInfoDev); + + var info = { + tag: tag + }; + + if (inScopeTags.indexOf(tag) !== -1) { + ancestorInfo.aTagInScope = null; + ancestorInfo.buttonTagInScope = null; + ancestorInfo.nobrTagInScope = null; + } + + if (buttonScopeTags.indexOf(tag) !== -1) { + ancestorInfo.pTagInButtonScope = null; + } // See rules for 'li', 'dd', 'dt' start tags in + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody + + if ( + specialTags.indexOf(tag) !== -1 && + tag !== "address" && + tag !== "div" && + tag !== "p" + ) { + ancestorInfo.listItemTagAutoclosing = null; + ancestorInfo.dlItemTagAutoclosing = null; + } + + ancestorInfo.current = info; + + if (tag === "form") { + ancestorInfo.formTag = info; + } + + if (tag === "a") { + ancestorInfo.aTagInScope = info; + } + + if (tag === "button") { + ancestorInfo.buttonTagInScope = info; + } + + if (tag === "nobr") { + ancestorInfo.nobrTagInScope = info; + } + + if (tag === "p") { + ancestorInfo.pTagInButtonScope = info; + } + + if (tag === "li") { + ancestorInfo.listItemTagAutoclosing = info; + } + + if (tag === "dd" || tag === "dt") { + ancestorInfo.dlItemTagAutoclosing = info; + } + + if (tag === "#document" || tag === "html") { + ancestorInfo.containerTagInScope = null; + } else if (!ancestorInfo.containerTagInScope) { + ancestorInfo.containerTagInScope = info; + } + + return ancestorInfo; + } +} +/** + * Returns whether + */ + +function isTagValidWithParent(tag, parentTag) { + // First, let's check if we're in an unusual parsing mode... + switch (parentTag) { + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect + case "select": + return tag === "option" || tag === "optgroup" || tag === "#text"; + + case "optgroup": + return tag === "option" || tag === "#text"; + // Strictly speaking, seeing an <option> doesn't mean we're in a <select> + // but + + case "option": + return tag === "#text"; + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption + // No special behavior since these rules fall back to "in body" mode for + // all except special table nodes which cause bad parsing behavior anyway. + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr + + case "tr": + return ( + tag === "th" || + tag === "td" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody + + case "tbody": + case "thead": + case "tfoot": + return ( + tag === "tr" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup + + case "colgroup": + return tag === "col" || tag === "template"; + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable + + case "table": + return ( + tag === "caption" || + tag === "colgroup" || + tag === "tbody" || + tag === "tfoot" || + tag === "thead" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead + + case "head": + return ( + tag === "base" || + tag === "basefont" || + tag === "bgsound" || + tag === "link" || + tag === "meta" || + tag === "title" || + tag === "noscript" || + tag === "noframes" || + tag === "style" || + tag === "script" || + tag === "template" + ); + // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element + + case "html": + return tag === "head" || tag === "body" || tag === "frameset"; + + case "frameset": + return tag === "frame"; + + case "#document": + return tag === "html"; + } // Probably in the "in body" parsing mode, so we outlaw only tag combos + // where the parsing rules cause implicit opens or closes to be added. + // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody + + switch (tag) { + case "h1": + case "h2": + case "h3": + case "h4": + case "h5": + case "h6": + return ( + parentTag !== "h1" && + parentTag !== "h2" && + parentTag !== "h3" && + parentTag !== "h4" && + parentTag !== "h5" && + parentTag !== "h6" + ); + + case "rp": + case "rt": + return impliedEndTags.indexOf(parentTag) === -1; + + case "body": + case "caption": + case "col": + case "colgroup": + case "frameset": + case "frame": + case "head": + case "html": + case "tbody": + case "td": + case "tfoot": + case "th": + case "thead": + case "tr": + // These tags are only valid with a few parents that have special child + // parsing rules -- if we're down here, then none of those matched and + // so we allow it only if we don't know what the parent is, as all other + // cases are invalid. + return parentTag == null; + } + + return true; +} +/** + * Returns whether + */ + +function findInvalidAncestorForTag(tag, ancestorInfo) { + switch (tag) { + case "address": + case "article": + case "aside": + case "blockquote": + case "center": + case "details": + case "dialog": + case "dir": + case "div": + case "dl": + case "fieldset": + case "figcaption": + case "figure": + case "footer": + case "header": + case "hgroup": + case "main": + case "menu": + case "nav": + case "ol": + case "p": + case "section": + case "summary": + case "ul": + case "pre": + case "listing": + case "table": + case "hr": + case "xmp": + case "h1": + case "h2": + case "h3": + case "h4": + case "h5": + case "h6": + return ancestorInfo.pTagInButtonScope; + + case "form": + return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope; + + case "li": + return ancestorInfo.listItemTagAutoclosing; + + case "dd": + case "dt": + return ancestorInfo.dlItemTagAutoclosing; + + case "button": + return ancestorInfo.buttonTagInScope; + + case "a": + // Spec says something about storing a list of markers, but it sounds + // equivalent to this check. + return ancestorInfo.aTagInScope; + + case "nobr": + return ancestorInfo.nobrTagInScope; + } + + return null; +} + +var didWarn = {}; + +function validateDOMNesting(childTag, ancestorInfo) { + { + ancestorInfo = ancestorInfo || emptyAncestorInfoDev; + var parentInfo = ancestorInfo.current; + var parentTag = parentInfo && parentInfo.tag; + var invalidParent = isTagValidWithParent(childTag, parentTag) + ? null + : parentInfo; + var invalidAncestor = invalidParent + ? null + : findInvalidAncestorForTag(childTag, ancestorInfo); + var invalidParentOrAncestor = invalidParent || invalidAncestor; + + if (!invalidParentOrAncestor) { + return; + } + + var ancestorTag = invalidParentOrAncestor.tag; + var warnKey = String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; // eslint-disable-next-line react-internal/safe-string-coercion + + if (didWarn[warnKey]) { + return; + } + + didWarn[warnKey] = true; + var tagDisplayName = "<" + childTag + ">"; + + if (invalidParent) { + var info = ""; + + if (ancestorTag === "table" && childTag === "tr") { + info += + " Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by " + + "the browser."; + } + + error( + "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s", + tagDisplayName, + ancestorTag, + info + ); + } else { + error( + "validateDOMNesting(...): %s cannot appear as a descendant of " + + "<%s>.", + tagDisplayName, + ancestorTag + ); + } + } +} + +function validateTextNesting(childText, parentTag) { + { + if (isTagValidWithParent("#text", parentTag)) { + return; + } // eslint-disable-next-line react-internal/safe-string-coercion + + var warnKey = "#text|" + parentTag; + + if (didWarn[warnKey]) { + return; + } + + didWarn[warnKey] = true; + + if (/\S/.test(childText)) { + error( + "validateDOMNesting(...): Text nodes cannot appear as a child of <%s>.", + parentTag + ); + } else { + error( + "validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <%s>. " + + "Make sure you don't have any extra whitespace between tags on " + + "each line of your source code.", + parentTag + ); + } + } } var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml"; @@ -4981,6 +5471,44 @@ function createDangerousStringForStyles(styles) { return serialized || null; } } + +function setValueForStyle(style, styleName, value) { + var isCustomProperty = styleName.indexOf("--") === 0; + + { + if (!isCustomProperty) { + warnValidStyle(styleName, value); + } + } + + if (value == null || typeof value === "boolean" || value === "") { + if (isCustomProperty) { + style.setProperty(styleName, ""); + } else if (styleName === "float") { + style.cssFloat = ""; + } else { + style[styleName] = ""; + } + } else if (isCustomProperty) { + style.setProperty(styleName, value); + } else if ( + typeof value === "number" && + value !== 0 && + !isUnitlessNumber(styleName) + ) { + style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers + } else { + if (styleName === "float") { + style.cssFloat = value; + } else { + { + checkCSSPropertyStringCoercion(value, styleName); + } + + style[styleName] = ("" + value).trim(); + } + } +} /** * Sets the value for multiple styles on a node. If a value is specified as * '' (empty string), the corresponding style property will be unset. @@ -4989,7 +5517,7 @@ function createDangerousStringForStyles(styles) { * @param {object} styles */ -function setValueForStyles(node, styles) { +function setValueForStyles(node, styles, prevStyles) { if (styles != null && typeof styles !== "object") { throw new Error( "The `style` prop expects a mapping from style properties to values, " + @@ -5008,45 +5536,44 @@ function setValueForStyles(node, styles) { var style = node.style; - for (var styleName in styles) { - if (!styles.hasOwnProperty(styleName)) { - continue; + if (diffInCommitPhase && prevStyles != null) { + { + validateShorthandPropertyCollisionInDev(prevStyles, styles); } - var value = styles[styleName]; - var isCustomProperty = styleName.indexOf("--") === 0; + for (var styleName in prevStyles) { + if ( + prevStyles.hasOwnProperty(styleName) && + (styles == null || !styles.hasOwnProperty(styleName)) + ) { + // Clear style + var isCustomProperty = styleName.indexOf("--") === 0; - { - if (!isCustomProperty) { - warnValidStyle(styleName, value); + if (isCustomProperty) { + style.setProperty(styleName, ""); + } else if (styleName === "float") { + style.cssFloat = ""; + } else { + style[styleName] = ""; + } } } - if (value == null || typeof value === "boolean" || value === "") { - if (isCustomProperty) { - style.setProperty(styleName, ""); - } else if (styleName === "float") { - style.cssFloat = ""; - } else { - style[styleName] = ""; - } - } else if (isCustomProperty) { - style.setProperty(styleName, value); - } else if ( - typeof value === "number" && - value !== 0 && - !isUnitlessNumber(styleName) - ) { - style[styleName] = value + "px"; // Presumes implicit 'px' suffix for unitless numbers - } else { - if (styleName === "float") { - style.cssFloat = value; - } else { - { - checkCSSPropertyStringCoercion(value, styleName); - } + for (var _styleName in styles) { + var value = styles[_styleName]; - style[styleName] = ("" + value).trim(); + if ( + styles.hasOwnProperty(_styleName) && + prevStyles[_styleName] !== value + ) { + setValueForStyle(style, _styleName, value); + } + } + } else { + for (var _styleName2 in styles) { + if (styles.hasOwnProperty(_styleName2)) { + var _value = styles[_styleName2]; + setValueForStyle(style, _styleName2, _value); } } } @@ -5092,19 +5619,45 @@ function expandShorthandMap(styles) { * becomes .style.fontVariant = '' */ -function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) { +function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) { { if (!nextStyles) { return; + } // Compute the diff as it would happen elsewhere. + + var expandedUpdates = {}; + + if (prevStyles) { + for (var key in prevStyles) { + if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) { + var longhands = shorthandToLonghand[key] || [key]; + + for (var i = 0; i < longhands.length; i++) { + expandedUpdates[longhands[i]] = key; + } + } + } + } + + for (var _key in nextStyles) { + if ( + nextStyles.hasOwnProperty(_key) && + (!prevStyles || prevStyles[_key] !== nextStyles[_key]) + ) { + var _longhands = shorthandToLonghand[_key] || [_key]; + + for (var _i = 0; _i < _longhands.length; _i++) { + expandedUpdates[_longhands[_i]] = _key; + } + } } - var expandedUpdates = expandShorthandMap(styleUpdates); var expandedStyles = expandShorthandMap(nextStyles); var warnedAbout = {}; - for (var key in expandedUpdates) { - var originalKey = expandedUpdates[key]; - var correctOriginalKey = expandedStyles[key]; + for (var _key2 in expandedUpdates) { + var originalKey = expandedUpdates[_key2]; + var correctOriginalKey = expandedStyles[_key2]; if (correctOriginalKey && originalKey !== correctOriginalKey) { var warningKey = originalKey + "," + correctOriginalKey; @@ -5121,7 +5674,7 @@ function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) { "avoid this, don't mix shorthand and non-shorthand properties " + "for the same value; instead, replace the shorthand with " + "separate values.", - isValueEmpty(styleUpdates[originalKey]) ? "Removing" : "Updating", + isValueEmpty(nextStyles[originalKey]) ? "Removing" : "Updating", originalKey, correctOriginalKey ); @@ -7940,11 +8493,13 @@ function prepareToHydrateHostInstance(fiber, hostContext) { shouldWarnIfMismatchDev ); // TODO: Type this specific to this type of component. - fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. + if (!diffInCommitPhase) { + fiber.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. - if (updatePayload !== null) { - return true; + if (updatePayload !== null) { + return true; + } } return false; @@ -21933,29 +22488,28 @@ function updateHostComponent( // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; - } // If we get updated because one of our children updated, we don't - // have newProps so we'll have to reuse them. - // TODO: Split the update API as separate for the props vs. children. - // Even better would be if children weren't special cased at all tho. - - var instance = workInProgress.stateNode; - var currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host - // component is hitting the resume path. Figure out why. Possibly - // related to `hidden`. - - var updatePayload = prepareUpdate( - instance, - type, - oldProps, - newProps, - currentHostContext - ); // TODO: Type this specific to this type of component. - - workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. All the work is done in commitWork. + } - if (updatePayload) { + if (diffInCommitPhase) { markUpdate(workInProgress); + } else { + // If we get updated because one of our children updated, we don't + // have newProps so we'll have to reuse them. + // TODO: Split the update API as separate for the props vs. children. + // Even better would be if children weren't special cased at all tho. + var instance = workInProgress.stateNode; // TODO: Experiencing an error where oldProps is null. Suggests a host + // component is hitting the resume path. Figure out why. Possibly + // related to `hidden`. + + getHostContext(); + var updatePayload = prepareUpdate(instance, type, oldProps, newProps); // TODO: Type this specific to this type of component. + + workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there + // is a new ref we mark this as an update. All the work is done in commitWork. + + if (updatePayload) { + markUpdate(workInProgress); + } } } } // This function must be called at the very end of the complete phase, because @@ -26086,7 +26640,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var _updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (_updatePayload !== null) { + if (_updatePayload !== null || diffInCommitPhase) { try { commitUpdate( _instance2, @@ -33801,7 +34355,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-f7b80a78"; +var ReactVersion = "18.3.0-www-modern-487b97ad"; function createPortal$1( children, @@ -38942,14 +39496,17 @@ function trapClickOnNonInteractiveElement(node) { var xlinkNamespace = "http://www.w3.org/1999/xlink"; var xmlNamespace = "http://www.w3.org/XML/1998/namespace"; -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": { if (typeof value === "string") { - // Avoid setting initial textContent when the text is empty. In IE11 setting + { + validateTextNesting(value, tag); + } // Avoid setting initial textContent when the text is empty. In IE11 setting // textContent on a <textarea> will cause the placeholder to not // show within the <textarea> until it has been focused and blurred again. // https://github.com/facebook/react/issues/6731#issuecomment-254874553 + var canSetTextContent = tag !== "body" && (tag !== "textarea" || value !== ""); @@ -38957,6 +39514,10 @@ function setProp(domElement, tag, key, value, props) { setTextContent(domElement, value); } } else if (typeof value === "number") { + { + validateTextNesting("" + value, tag); + } + var _canSetTextContent = tag !== "body"; if (_canSetTextContent) { @@ -38989,7 +39550,7 @@ function setProp(domElement, tag, key, value, props) { } case "style": { - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; } // These attributes accept URLs. These must not allow javascript: URLS. @@ -39377,6 +39938,20 @@ function setProp(domElement, tag, key, value, props) { break; // Properties that should not be allowed on custom elements. + case "is": { + { + if (prevValue != null) { + error('Cannot update the "is" prop after it has been initialized.'); + } + } // TODO: We shouldn't actually set this attribute, because we've already + // passed it to createElement. We don't also need the attribute. + // However, our tests currently query for it so it's plausible someone + // else does too so it's break. + + setValueForAttribute(domElement, "is", value); + break; + } + case "innerText": case "textContent": if (enableCustomElementPropertySupport) { @@ -39406,10 +39981,10 @@ function setProp(domElement, tag, key, value, props) { } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": { - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; } @@ -39540,6 +40115,11 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var type = null; + var value = null; + var defaultValue = null; + var checked = null; + var defaultChecked = null; for (var propKey in props) { if (!props.hasOwnProperty(propKey)) { @@ -39561,6 +40141,8 @@ function setInitialProperties(domElement, tag, props) { typeof propValue !== "symbol" && typeof propValue !== "boolean" ) { + type = propValue; + { checkAttributeStringCoercion(propValue, propKey); } @@ -39572,17 +40154,29 @@ function setInitialProperties(domElement, tag, props) { } case "checked": { - var checked = propValue != null ? propValue : props.defaultChecked; + checked = propValue; + var checkedValue = + propValue != null ? propValue : props.defaultChecked; var inputElement = domElement; inputElement.checked = - !!checked && - typeof checked !== "function" && - checked !== "symbol"; + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + break; + } + + case "defaultChecked": { + defaultChecked = propValue; break; } case "value": { - // This is handled by updateWrapper below. + value = propValue; + break; + } + + case "defaultValue": { + defaultValue = propValue; break; } @@ -39598,10 +40192,9 @@ function setInitialProperties(domElement, tag, props) { break; } - // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } } // TODO: Make sure we check if this is still unmounted or do any clean @@ -39609,7 +40202,15 @@ function setInitialProperties(domElement, tag, props) { track(domElement); validateInputProps(domElement, props); - initInput(domElement, props, false); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + false + ); return; } @@ -39620,6 +40221,9 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var _value = null; + var _defaultValue = null; + var multiple = null; for (var _propKey in props) { if (!props.hasOwnProperty(_propKey)) { @@ -39634,19 +40238,31 @@ function setInitialProperties(domElement, tag, props) { switch (_propKey) { case "value": { - // This is handled by updateWrapper below. + _value = _propValue; // This is handled by initSelect below. + + break; + } + + case "defaultValue": { + _defaultValue = _propValue; // This is handled by initSelect below. + break; } - // defaultValue are ignored by setProp + + case "multiple": { + multiple = _propValue; // TODO: We don't actually have to fall through here because we set it + // in initSelect anyway. We can remove the special case in setProp. + } + // Fallthrough default: { - setProp(domElement, tag, _propKey, _propValue, props); + setProp(domElement, tag, _propKey, _propValue, props, null); } } } validateSelectProps(domElement, props); - initSelect(domElement, props); + initSelect(domElement, _value, _defaultValue, multiple); return; } @@ -39657,6 +40273,8 @@ function setInitialProperties(domElement, tag, props) { // listeners still fire for the invalid event. listenToNonDelegatedEvent("invalid", domElement); + var _value2 = null; + var _defaultValue2 = null; for (var _propKey2 in props) { if (!props.hasOwnProperty(_propKey2)) { @@ -39671,12 +40289,17 @@ function setInitialProperties(domElement, tag, props) { switch (_propKey2) { case "value": { - // This is handled by updateWrapper below. + _value2 = _propValue2; // This is handled by initTextarea below. + + break; + } + + case "defaultValue": { + _defaultValue2 = _propValue2; break; } case "children": { - // TODO: Handled by initWrapperState above. break; } @@ -39690,7 +40313,6 @@ function setInitialProperties(domElement, tag, props) { break; } - // defaultValue is ignored by setProp default: { setProp(domElement, tag, _propKey2, _propValue2, props); @@ -39701,7 +40323,7 @@ function setInitialProperties(domElement, tag, props) { track(domElement); validateTextareaProps(domElement, props); - initTextarea(domElement, props); + initTextarea(domElement, _value2, _defaultValue2); return; } @@ -39735,7 +40357,6 @@ function setInitialProperties(domElement, tag, props) { } } - initOption(domElement, props); return; } @@ -39824,7 +40445,7 @@ function setInitialProperties(domElement, tag, props) { // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey4, _propValue4, props); + setProp(domElement, tag, _propKey4, _propValue4, props, null); } } } @@ -39850,7 +40471,8 @@ function setInitialProperties(domElement, tag, props) { tag, _propKey5, _propValue5, - props + props, + null ); } @@ -39870,7 +40492,7 @@ function setInitialProperties(domElement, tag, props) { continue; } - setProp(domElement, tag, _propKey6, _propValue6, props); + setProp(domElement, tag, _propKey6, _propValue6, props, null); } } // Calculate the diff between the two objects. @@ -39987,16 +40609,619 @@ function diffProperties(domElement, tag, lastProps, nextProps) { if (styleUpdates) { { - validateShorthandPropertyCollisionInDev(styleUpdates, nextProps.style); + validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style); } (updatePayload = updatePayload || []).push("style", styleUpdates); } return updatePayload; +} +function updateProperties(domElement, tag, lastProps, nextProps) { + { + validatePropertiesInDevelopment(tag, nextProps); + } + + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": { + // Fast track the most common tag types + break; + } + + case "input": { + var name = null; + var type = null; + var value = null; + var defaultValue = null; + var lastDefaultValue = null; + var checked = null; + var defaultChecked = null; + + for (var propKey in lastProps) { + var lastProp = lastProps[propKey]; + + if (lastProps.hasOwnProperty(propKey) && lastProp != null) { + switch (propKey) { + case "checked": { + if (!nextProps.hasOwnProperty(propKey)) { + var checkedValue = nextProps.defaultChecked; + var inputElement = domElement; + inputElement.checked = + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + } + + break; + } + + case "value": { + // This is handled by updateWrapper below. + break; + } + + case "defaultValue": { + lastDefaultValue = lastProp; + } + // defaultChecked and defaultValue are ignored by setProp + // Fallthrough + + default: { + if (!nextProps.hasOwnProperty(propKey)) + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + } + } + + for (var _propKey7 in nextProps) { + var nextProp = nextProps[_propKey7]; + var _lastProp = lastProps[_propKey7]; + + if ( + nextProps.hasOwnProperty(_propKey7) && + (nextProp != null || _lastProp != null) + ) { + switch (_propKey7) { + case "type": { + type = nextProp; // Fast path since 'type' is very common on inputs + + if (nextProp !== _lastProp) { + if ( + nextProp != null && + typeof nextProp !== "function" && + typeof nextProp !== "symbol" && + typeof nextProp !== "boolean" + ) { + { + checkAttributeStringCoercion(nextProp, _propKey7); + } + + domElement.setAttribute(_propKey7, nextProp); + } else { + domElement.removeAttribute(_propKey7); + } + } + + break; + } + + case "name": { + name = nextProp; + break; + } + + case "checked": { + checked = nextProp; + + if (nextProp !== _lastProp) { + var _checkedValue = + nextProp != null ? nextProp : nextProps.defaultChecked; + + var _inputElement = domElement; + _inputElement.checked = + !!_checkedValue && + typeof _checkedValue !== "function" && + _checkedValue !== "symbol"; + } + + break; + } + + case "defaultChecked": { + defaultChecked = nextProp; + break; + } + + case "value": { + value = nextProp; + break; + } + + case "defaultValue": { + defaultValue = nextProp; + break; + } + + case "children": + case "dangerouslySetInnerHTML": { + if (nextProp != null) { + throw new Error( + tag + + " is a void element tag and must neither have `children` nor " + + "use `dangerouslySetInnerHTML`." + ); + } + + break; + } + + default: { + if (nextProp !== _lastProp) + setProp( + domElement, + tag, + _propKey7, + nextProp, + nextProps, + _lastProp + ); + } + } + } + } + + { + var wasControlled = + lastProps.type === "checkbox" || lastProps.type === "radio" + ? lastProps.checked != null + : lastProps.value != null; + var isControlled = + nextProps.type === "checkbox" || nextProps.type === "radio" + ? nextProps.checked != null + : nextProps.value != null; + + if ( + !wasControlled && + isControlled && + !didWarnUncontrolledToControlled + ) { + error( + "A component is changing an uncontrolled input to be controlled. " + + "This is likely caused by the value changing from undefined to " + + "a defined value, which should not happen. " + + "Decide between using a controlled or uncontrolled input " + + "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components" + ); + + didWarnUncontrolledToControlled = true; + } + + if ( + wasControlled && + !isControlled && + !didWarnControlledToUncontrolled + ) { + error( + "A component is changing a controlled input to be uncontrolled. " + + "This is likely caused by the value changing from a defined to " + + "undefined, which should not happen. " + + "Decide between using a controlled or uncontrolled input " + + "element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components" + ); + + didWarnControlledToUncontrolled = true; + } + } // Update checked *before* name. + // In the middle of an update, it is possible to have multiple checked. + // When a checked radio tries to change name, browser makes another radio's checked false. + + if ( + name != null && + typeof name !== "function" && + typeof name !== "symbol" && + typeof name !== "boolean" + ) { + { + checkAttributeStringCoercion(name, "name"); + } + + domElement.setAttribute("name", name); + } else { + domElement.removeAttribute("name"); + } // Update the wrapper around inputs *after* updating props. This has to + // happen after updating the rest of props. Otherwise HTML5 input validations + // raise warnings and prevent the new value from being assigned. + + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + } + + case "select": { + var _value3 = null; + var _defaultValue3 = null; + var multiple = null; + var wasMultiple = null; + + for (var _propKey8 in lastProps) { + var _lastProp2 = lastProps[_propKey8]; + + if (lastProps.hasOwnProperty(_propKey8) && _lastProp2 != null) { + switch (_propKey8) { + case "value": { + // This is handled by updateWrapper below. + break; + } + // defaultValue are ignored by setProp + + case "multiple": { + wasMultiple = _lastProp2; // TODO: Move special case in here from setProp. + } + // Fallthrough + + default: { + if (!nextProps.hasOwnProperty(_propKey8)) + setProp( + domElement, + tag, + _propKey8, + null, + nextProps, + _lastProp2 + ); + } + } + } + } + + for (var _propKey9 in nextProps) { + var _nextProp = nextProps[_propKey9]; + var _lastProp3 = lastProps[_propKey9]; + + if ( + nextProps.hasOwnProperty(_propKey9) && + (_nextProp != null || _lastProp3 != null) + ) { + switch (_propKey9) { + case "value": { + _value3 = _nextProp; // This is handled by updateSelect below. + + break; + } + + case "defaultValue": { + _defaultValue3 = _nextProp; + break; + } + + case "multiple": { + multiple = _nextProp; // TODO: Just move the special case in here from setProp. + } + // Fallthrough + + default: { + if (_nextProp !== _lastProp3) + setProp( + domElement, + tag, + _propKey9, + _nextProp, + nextProps, + _lastProp3 + ); + } + } + } + } // <select> value update needs to occur after <option> children + // reconciliation + + updateSelect(domElement, _value3, _defaultValue3, multiple, wasMultiple); + return; + } + + case "textarea": { + var _value4 = null; + var _defaultValue4 = null; + + for (var _propKey10 in lastProps) { + var _lastProp4 = lastProps[_propKey10]; + + if ( + lastProps.hasOwnProperty(_propKey10) && + _lastProp4 != null && + !nextProps.hasOwnProperty(_propKey10) + ) { + switch (_propKey10) { + case "value": { + // This is handled by updateTextarea below. + break; + } + + case "children": { + // TODO: This doesn't actually do anything if it updates. + break; + } + // defaultValue is ignored by setProp + + default: { + setProp(domElement, tag, _propKey10, null, nextProps, _lastProp4); + } + } + } + } + + for (var _propKey11 in nextProps) { + var _nextProp2 = nextProps[_propKey11]; + var _lastProp5 = lastProps[_propKey11]; + + if ( + nextProps.hasOwnProperty(_propKey11) && + (_nextProp2 != null || _lastProp5 != null) + ) { + switch (_propKey11) { + case "value": { + _value4 = _nextProp2; // This is handled by updateTextarea below. + + break; + } + + case "defaultValue": { + _defaultValue4 = _nextProp2; + break; + } + + case "children": { + // TODO: This doesn't actually do anything if it updates. + break; + } + + case "dangerouslySetInnerHTML": { + if (_nextProp2 != null) { + // TODO: Do we really need a special error message for this. It's also pretty blunt. + throw new Error( + "`dangerouslySetInnerHTML` does not make sense on <textarea>." + ); + } + + break; + } + + default: { + if (_nextProp2 !== _lastProp5) + setProp( + domElement, + tag, + _propKey11, + _nextProp2, + nextProps, + _lastProp5 + ); + } + } + } + } + + updateTextarea(domElement, _value4, _defaultValue4); + return; + } + + case "option": { + for (var _propKey12 in lastProps) { + var _lastProp6 = lastProps[_propKey12]; + + if ( + lastProps.hasOwnProperty(_propKey12) && + _lastProp6 != null && + !nextProps.hasOwnProperty(_propKey12) + ) { + switch (_propKey12) { + case "selected": { + // TODO: Remove support for selected on option. + domElement.selected = false; + break; + } + + default: { + setProp(domElement, tag, _propKey12, null, nextProps, _lastProp6); + } + } + } + } + + for (var _propKey13 in nextProps) { + var _nextProp3 = nextProps[_propKey13]; + var _lastProp7 = lastProps[_propKey13]; + + if ( + nextProps.hasOwnProperty(_propKey13) && + _nextProp3 !== _lastProp7 && + (_nextProp3 != null || _lastProp7 != null) + ) { + switch (_propKey13) { + case "selected": { + // TODO: Remove support for selected on option. + domElement.selected = + _nextProp3 && + typeof _nextProp3 !== "function" && + typeof _nextProp3 !== "symbol"; + break; + } + + default: { + setProp( + domElement, + tag, + _propKey13, + _nextProp3, + nextProps, + _lastProp7 + ); + } + } + } + } + + return; + } + + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": { + // Void elements + for (var _propKey14 in lastProps) { + var _lastProp8 = lastProps[_propKey14]; + + if ( + lastProps.hasOwnProperty(_propKey14) && + _lastProp8 != null && + !nextProps.hasOwnProperty(_propKey14) + ) { + setProp(domElement, tag, _propKey14, null, nextProps, _lastProp8); + } + } + + for (var _propKey15 in nextProps) { + var _nextProp4 = nextProps[_propKey15]; + var _lastProp9 = lastProps[_propKey15]; + + if ( + nextProps.hasOwnProperty(_propKey15) && + _nextProp4 !== _lastProp9 && + (_nextProp4 != null || _lastProp9 != null) + ) { + switch (_propKey15) { + case "children": + case "dangerouslySetInnerHTML": { + if (_nextProp4 != null) { + // TODO: Can we make this a DEV warning to avoid this deny list? + throw new Error( + tag + + " is a void element tag and must neither have `children` nor " + + "use `dangerouslySetInnerHTML`." + ); + } + + break; + } + // defaultChecked and defaultValue are ignored by setProp + + default: { + setProp( + domElement, + tag, + _propKey15, + _nextProp4, + nextProps, + _lastProp9 + ); + } + } + } + } + + return; + } + + default: { + if (isCustomElement(tag)) { + for (var _propKey16 in lastProps) { + var _lastProp10 = lastProps[_propKey16]; + + if ( + lastProps.hasOwnProperty(_propKey16) && + _lastProp10 != null && + !nextProps.hasOwnProperty(_propKey16) + ) { + setPropOnCustomElement( + domElement, + tag, + _propKey16, + null, + nextProps, + _lastProp10 + ); + } + } + + for (var _propKey17 in nextProps) { + var _nextProp5 = nextProps[_propKey17]; + var _lastProp11 = lastProps[_propKey17]; + + if ( + nextProps.hasOwnProperty(_propKey17) && + _nextProp5 !== _lastProp11 && + (_nextProp5 != null || _lastProp11 != null) + ) { + setPropOnCustomElement( + domElement, + tag, + _propKey17, + _nextProp5, + nextProps, + _lastProp11 + ); + } + } + + return; + } + } + } + + for (var _propKey18 in lastProps) { + var _lastProp12 = lastProps[_propKey18]; + + if ( + lastProps.hasOwnProperty(_propKey18) && + _lastProp12 != null && + !nextProps.hasOwnProperty(_propKey18) + ) { + setProp(domElement, tag, _propKey18, null, nextProps, _lastProp12); + } + } + + for (var _propKey19 in nextProps) { + var _nextProp6 = nextProps[_propKey19]; + var _lastProp13 = lastProps[_propKey19]; + + if ( + nextProps.hasOwnProperty(_propKey19) && + _nextProp6 !== _lastProp13 && + (_nextProp6 != null || _lastProp13 != null) + ) { + setProp(domElement, tag, _propKey19, _nextProp6, nextProps, _lastProp13); + } + } } // Apply the diff. -function updateProperties( +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -40017,31 +41242,63 @@ function updateProperties( } case "input": { - // Update checked *before* name. - // In the middle of an update, it is possible to have multiple checked. - // When a checked radio tries to change name, browser makes another radio's checked false. - if (nextProps.type === "radio" && nextProps.name != null) { - updateInputChecked(domElement, nextProps); - } + var name = nextProps.name; + var type = nextProps.type; + var value = nextProps.value; + var defaultValue = nextProps.defaultValue; + var lastDefaultValue = lastProps.defaultValue; + var checked = nextProps.checked; + var defaultChecked = nextProps.defaultChecked; for (var i = 0; i < updatePayload.length; i += 2) { var propKey = updatePayload[i]; var propValue = updatePayload[i + 1]; switch (propKey) { + case "type": { + // Fast path since 'type' is very common on inputs + if ( + propValue != null && + typeof propValue !== "function" && + typeof propValue !== "symbol" && + typeof propValue !== "boolean" + ) { + { + checkAttributeStringCoercion(propValue, propKey); + } + + domElement.setAttribute(propKey, propValue); + } else { + domElement.removeAttribute(propKey); + } + + break; + } + + case "name": { + break; + } + case "checked": { - var checked = + var checkedValue = propValue != null ? propValue : nextProps.defaultChecked; var inputElement = domElement; inputElement.checked = - !!checked && - typeof checked !== "function" && - checked !== "symbol"; + !!checkedValue && + typeof checkedValue !== "function" && + checkedValue !== "symbol"; + break; + } + + case "defaultChecked": { break; } case "value": { - // This is handled by updateWrapper below. + break; + } + + case "defaultValue": { break; } @@ -40057,10 +41314,9 @@ function updateProperties( break; } - // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } } @@ -40106,20 +41362,50 @@ function updateProperties( didWarnControlledToUncontrolled = true; } + } // Update checked *before* name. + // In the middle of an update, it is possible to have multiple checked. + // When a checked radio tries to change name, browser makes another radio's checked false. + + if ( + name != null && + typeof name !== "function" && + typeof name !== "symbol" && + typeof name !== "boolean" + ) { + { + checkAttributeStringCoercion(name, "name"); + } + + domElement.setAttribute("name", name); + } else { + domElement.removeAttribute("name"); } // Update the wrapper around inputs *after* updating props. This has to // happen after updating the rest of props. Otherwise HTML5 input validations // raise warnings and prevent the new value from being assigned. - updateInput(domElement, nextProps); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); return; } case "select": { + var _value5 = nextProps.value; + var _defaultValue5 = nextProps.defaultValue; + var multiple = nextProps.multiple; + var wasMultiple = lastProps.multiple; + for (var _i = 0; _i < updatePayload.length; _i += 2) { - var _propKey7 = updatePayload[_i]; + var _propKey20 = updatePayload[_i]; var _propValue7 = updatePayload[_i + 1]; - switch (_propKey7) { + switch (_propKey20) { case "value": { // This is handled by updateWrapper below. break; @@ -40127,22 +41413,25 @@ function updateProperties( // defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey7, _propValue7, nextProps); + setProp(domElement, tag, _propKey20, _propValue7, nextProps, null); } } } // <select> value update needs to occur after <option> children // reconciliation - updateSelect(domElement, lastProps, nextProps); + updateSelect(domElement, _value5, _defaultValue5, multiple, wasMultiple); return; } case "textarea": { + var _value6 = nextProps.value; + var _defaultValue6 = nextProps.defaultValue; + for (var _i2 = 0; _i2 < updatePayload.length; _i2 += 2) { - var _propKey8 = updatePayload[_i2]; + var _propKey21 = updatePayload[_i2]; var _propValue8 = updatePayload[_i2 + 1]; - switch (_propKey8) { + switch (_propKey21) { case "value": { // This is handled by updateWrapper below. break; @@ -40166,21 +41455,21 @@ function updateProperties( // defaultValue is ignored by setProp default: { - setProp(domElement, tag, _propKey8, _propValue8, nextProps); + setProp(domElement, tag, _propKey21, _propValue8, nextProps, null); } } } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, _value6, _defaultValue6); return; } case "option": { for (var _i3 = 0; _i3 < updatePayload.length; _i3 += 2) { - var _propKey9 = updatePayload[_i3]; + var _propKey22 = updatePayload[_i3]; var _propValue9 = updatePayload[_i3 + 1]; - switch (_propKey9) { + switch (_propKey22) { case "selected": { // TODO: Remove support for selected on option. domElement.selected = @@ -40191,7 +41480,7 @@ function updateProperties( } default: { - setProp(domElement, tag, _propKey9, _propValue9, nextProps); + setProp(domElement, tag, _propKey22, _propValue9, nextProps, null); } } } @@ -40216,10 +41505,10 @@ function updateProperties( case "menuitem": { // Void elements for (var _i4 = 0; _i4 < updatePayload.length; _i4 += 2) { - var _propKey10 = updatePayload[_i4]; + var _propKey23 = updatePayload[_i4]; var _propValue10 = updatePayload[_i4 + 1]; - switch (_propKey10) { + switch (_propKey23) { case "children": case "dangerouslySetInnerHTML": { if (_propValue10 != null) { @@ -40236,7 +41525,7 @@ function updateProperties( // defaultChecked and defaultValue are ignored by setProp default: { - setProp(domElement, tag, _propKey10, _propValue10, nextProps); + setProp(domElement, tag, _propKey23, _propValue10, nextProps, null); } } } @@ -40247,14 +41536,15 @@ function updateProperties( default: { if (isCustomElement(tag)) { for (var _i5 = 0; _i5 < updatePayload.length; _i5 += 2) { - var _propKey11 = updatePayload[_i5]; + var _propKey24 = updatePayload[_i5]; var _propValue11 = updatePayload[_i5 + 1]; setPropOnCustomElement( domElement, tag, - _propKey11, + _propKey24, _propValue11, - nextProps + nextProps, + null ); } @@ -40264,9 +41554,9 @@ function updateProperties( } // Apply the diff. for (var _i6 = 0; _i6 < updatePayload.length; _i6 += 2) { - var _propKey12 = updatePayload[_i6]; + var _propKey25 = updatePayload[_i6]; var _propValue12 = updatePayload[_i6 + 1]; - setProp(domElement, tag, _propKey12, _propValue12, nextProps); + setProp(domElement, tag, _propKey25, _propValue12, nextProps, null); } } @@ -41258,7 +42548,15 @@ function diffHydratedProperties( // is not resilient to the DOM state changing so we don't do that here. // TODO: Consider not doing this for input and textarea. - initInput(domElement, props, true); + initInput( + domElement, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + true + ); break; case "option": @@ -41286,7 +42584,7 @@ function diffHydratedProperties( track(domElement); validateTextareaProps(domElement, props); - initTextarea(domElement, props); + initTextarea(domElement, props.value, props.defaultValue); break; } @@ -41313,7 +42611,18 @@ function diffHydratedProperties( } if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) { - updatePayload = ["children", children]; + if (diffInCommitPhase) { + // We really should be patching this in the commit phase but since + // this only affects legacy mode hydration which is deprecated anyway + // we can get away with it. + // Host singletons get their children appended and don't use the text + // content mechanism. + if (tag !== "body") { + domElement.textContent = children; + } + } else { + updatePayload = ["children", children]; + } } } } @@ -41466,489 +42775,6 @@ function restoreControlledState(domElement, tag, props) { } } -// This validation code was written based on the HTML5 parsing spec: -// https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope -// -// Note: this does not catch all invalid nesting, nor does it try to (as it's -// not clear what practical benefit doing so provides); instead, we warn only -// for cases where the parser will give a parse tree differing from what React -// intended. For example, <b><div></div></b> is invalid but we don't warn -// because it still parses correctly; we do warn for other cases like nested -// <p> tags where the beginning of the second element implicitly closes the -// first, causing a confusing mess. -// https://html.spec.whatwg.org/multipage/syntax.html#special -var specialTags = [ - "address", - "applet", - "area", - "article", - "aside", - "base", - "basefont", - "bgsound", - "blockquote", - "body", - "br", - "button", - "caption", - "center", - "col", - "colgroup", - "dd", - "details", - "dir", - "div", - "dl", - "dt", - "embed", - "fieldset", - "figcaption", - "figure", - "footer", - "form", - "frame", - "frameset", - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "head", - "header", - "hgroup", - "hr", - "html", - "iframe", - "img", - "input", - "isindex", - "li", - "link", - "listing", - "main", - "marquee", - "menu", - "menuitem", - "meta", - "nav", - "noembed", - "noframes", - "noscript", - "object", - "ol", - "p", - "param", - "plaintext", - "pre", - "script", - "section", - "select", - "source", - "style", - "summary", - "table", - "tbody", - "td", - "template", - "textarea", - "tfoot", - "th", - "thead", - "title", - "tr", - "track", - "ul", - "wbr", - "xmp" -]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope - -var inScopeTags = [ - "applet", - "caption", - "html", - "table", - "td", - "th", - "marquee", - "object", - "template", // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point - // TODO: Distinguish by namespace here -- for <title>, including it here - // errs on the side of fewer warnings - "foreignObject", - "desc", - "title" -]; // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope - -var buttonScopeTags = inScopeTags.concat(["button"]); // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags - -var impliedEndTags = ["dd", "dt", "li", "option", "optgroup", "p", "rp", "rt"]; -var emptyAncestorInfoDev = { - current: null, - formTag: null, - aTagInScope: null, - buttonTagInScope: null, - nobrTagInScope: null, - pTagInButtonScope: null, - listItemTagAutoclosing: null, - dlItemTagAutoclosing: null, - containerTagInScope: null -}; - -function updatedAncestorInfoDev(oldInfo, tag) { - { - var ancestorInfo = assign({}, oldInfo || emptyAncestorInfoDev); - - var info = { - tag: tag - }; - - if (inScopeTags.indexOf(tag) !== -1) { - ancestorInfo.aTagInScope = null; - ancestorInfo.buttonTagInScope = null; - ancestorInfo.nobrTagInScope = null; - } - - if (buttonScopeTags.indexOf(tag) !== -1) { - ancestorInfo.pTagInButtonScope = null; - } // See rules for 'li', 'dd', 'dt' start tags in - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody - - if ( - specialTags.indexOf(tag) !== -1 && - tag !== "address" && - tag !== "div" && - tag !== "p" - ) { - ancestorInfo.listItemTagAutoclosing = null; - ancestorInfo.dlItemTagAutoclosing = null; - } - - ancestorInfo.current = info; - - if (tag === "form") { - ancestorInfo.formTag = info; - } - - if (tag === "a") { - ancestorInfo.aTagInScope = info; - } - - if (tag === "button") { - ancestorInfo.buttonTagInScope = info; - } - - if (tag === "nobr") { - ancestorInfo.nobrTagInScope = info; - } - - if (tag === "p") { - ancestorInfo.pTagInButtonScope = info; - } - - if (tag === "li") { - ancestorInfo.listItemTagAutoclosing = info; - } - - if (tag === "dd" || tag === "dt") { - ancestorInfo.dlItemTagAutoclosing = info; - } - - if (tag === "#document" || tag === "html") { - ancestorInfo.containerTagInScope = null; - } else if (!ancestorInfo.containerTagInScope) { - ancestorInfo.containerTagInScope = info; - } - - return ancestorInfo; - } -} -/** - * Returns whether - */ - -function isTagValidWithParent(tag, parentTag) { - // First, let's check if we're in an unusual parsing mode... - switch (parentTag) { - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect - case "select": - return tag === "option" || tag === "optgroup" || tag === "#text"; - - case "optgroup": - return tag === "option" || tag === "#text"; - // Strictly speaking, seeing an <option> doesn't mean we're in a <select> - // but - - case "option": - return tag === "#text"; - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption - // No special behavior since these rules fall back to "in body" mode for - // all except special table nodes which cause bad parsing behavior anyway. - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr - - case "tr": - return ( - tag === "th" || - tag === "td" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody - - case "tbody": - case "thead": - case "tfoot": - return ( - tag === "tr" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup - - case "colgroup": - return tag === "col" || tag === "template"; - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable - - case "table": - return ( - tag === "caption" || - tag === "colgroup" || - tag === "tbody" || - tag === "tfoot" || - tag === "thead" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead - - case "head": - return ( - tag === "base" || - tag === "basefont" || - tag === "bgsound" || - tag === "link" || - tag === "meta" || - tag === "title" || - tag === "noscript" || - tag === "noframes" || - tag === "style" || - tag === "script" || - tag === "template" - ); - // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element - - case "html": - return tag === "head" || tag === "body" || tag === "frameset"; - - case "frameset": - return tag === "frame"; - - case "#document": - return tag === "html"; - } // Probably in the "in body" parsing mode, so we outlaw only tag combos - // where the parsing rules cause implicit opens or closes to be added. - // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody - - switch (tag) { - case "h1": - case "h2": - case "h3": - case "h4": - case "h5": - case "h6": - return ( - parentTag !== "h1" && - parentTag !== "h2" && - parentTag !== "h3" && - parentTag !== "h4" && - parentTag !== "h5" && - parentTag !== "h6" - ); - - case "rp": - case "rt": - return impliedEndTags.indexOf(parentTag) === -1; - - case "body": - case "caption": - case "col": - case "colgroup": - case "frameset": - case "frame": - case "head": - case "html": - case "tbody": - case "td": - case "tfoot": - case "th": - case "thead": - case "tr": - // These tags are only valid with a few parents that have special child - // parsing rules -- if we're down here, then none of those matched and - // so we allow it only if we don't know what the parent is, as all other - // cases are invalid. - return parentTag == null; - } - - return true; -} -/** - * Returns whether - */ - -function findInvalidAncestorForTag(tag, ancestorInfo) { - switch (tag) { - case "address": - case "article": - case "aside": - case "blockquote": - case "center": - case "details": - case "dialog": - case "dir": - case "div": - case "dl": - case "fieldset": - case "figcaption": - case "figure": - case "footer": - case "header": - case "hgroup": - case "main": - case "menu": - case "nav": - case "ol": - case "p": - case "section": - case "summary": - case "ul": - case "pre": - case "listing": - case "table": - case "hr": - case "xmp": - case "h1": - case "h2": - case "h3": - case "h4": - case "h5": - case "h6": - return ancestorInfo.pTagInButtonScope; - - case "form": - return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope; - - case "li": - return ancestorInfo.listItemTagAutoclosing; - - case "dd": - case "dt": - return ancestorInfo.dlItemTagAutoclosing; - - case "button": - return ancestorInfo.buttonTagInScope; - - case "a": - // Spec says something about storing a list of markers, but it sounds - // equivalent to this check. - return ancestorInfo.aTagInScope; - - case "nobr": - return ancestorInfo.nobrTagInScope; - } - - return null; -} - -var didWarn = {}; - -function validateDOMNesting(childTag, childText, ancestorInfo) { - { - ancestorInfo = ancestorInfo || emptyAncestorInfoDev; - var parentInfo = ancestorInfo.current; - var parentTag = parentInfo && parentInfo.tag; - - if (childText != null) { - if (childTag != null) { - error( - "validateDOMNesting: when childText is passed, childTag should be null" - ); - } - - childTag = "#text"; - } else if (childTag == null) { - error("validateDOMNesting: when childText or childTag must be provided"); - - return; - } - - var invalidParent = isTagValidWithParent(childTag, parentTag) - ? null - : parentInfo; - var invalidAncestor = invalidParent - ? null - : findInvalidAncestorForTag(childTag, ancestorInfo); - var invalidParentOrAncestor = invalidParent || invalidAncestor; - - if (!invalidParentOrAncestor) { - return; - } - - var ancestorTag = invalidParentOrAncestor.tag; - var warnKey = String(!!invalidParent) + "|" + childTag + "|" + ancestorTag; // eslint-disable-next-line react-internal/safe-string-coercion - - if (didWarn[warnKey]) { - return; - } - - didWarn[warnKey] = true; - var tagDisplayName = childTag; - var whitespaceInfo = ""; - - if (childTag === "#text") { - if (childText != null && /\S/.test(childText)) { - tagDisplayName = "Text nodes"; - } else { - tagDisplayName = "Whitespace text nodes"; - whitespaceInfo = - " Make sure you don't have any extra whitespace between tags on " + - "each line of your source code."; - } - } else { - tagDisplayName = "<" + childTag + ">"; - } - - if (invalidParent) { - var info = ""; - - if (ancestorTag === "table" && childTag === "tr") { - info += - " Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by " + - "the browser."; - } - - error( - "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s", - tagDisplayName, - ancestorTag, - whitespaceInfo, - info - ); - } else { - error( - "validateDOMNesting(...): %s cannot appear as a descendant of " + - "<%s>.", - tagDisplayName, - ancestorTag - ); - } - } -} - function validateLinkPropsForStyleResource(props) { { // This should only be called when we know we are opting into Resource semantics (i.e. precedence is not null) @@ -42276,20 +43102,7 @@ function createInstance( { // TODO: take namespace into account when validating. var hostContextDev = hostContext; - validateDOMNesting(type, null, hostContextDev.ancestorInfo); - - if ( - typeof props.children === "string" || - typeof props.children === "number" - ) { - var string = "" + props.children; - var ownAncestorInfo = updatedAncestorInfoDev( - hostContextDev.ancestorInfo, - type - ); - validateDOMNesting(null, string, ownAncestorInfo); - } - + validateDOMNesting(type, hostContextDev.ancestorInfo); namespace = hostContextDev.namespace; } @@ -42436,21 +43249,9 @@ function finalizeInitialChildren(domElement, type, props, hostContext) { } } function prepareUpdate(domElement, type, oldProps, newProps, hostContext) { - { - var hostContextDev = hostContext; - - if ( - typeof newProps.children !== typeof oldProps.children && - (typeof newProps.children === "string" || - typeof newProps.children === "number") - ) { - var string = "" + newProps.children; - var ownAncestorInfo = updatedAncestorInfoDev( - hostContextDev.ancestorInfo, - type - ); - validateDOMNesting(null, string, ownAncestorInfo); - } + if (diffInCommitPhase) { + // TODO: Figure out how to validateDOMNesting when children turn into a string. + return null; } return diffProperties(domElement, type, oldProps, newProps); @@ -42474,7 +43275,11 @@ function createTextInstance( ) { { var hostContextDev = hostContext; - validateDOMNesting(null, text, hostContextDev.ancestorInfo); + var ancestor = hostContextDev.ancestorInfo.current; + + if (ancestor != null) { + validateTextNesting(text, ancestor.tag); + } } var textNode = getOwnerDocumentFromRootContainer( @@ -42572,8 +43377,19 @@ function commitUpdate( newProps, internalInstanceHandle ) { - // Apply the diff to the DOM node. - updateProperties(domElement, updatePayload, type, oldProps, newProps); // Update the props handle so that we know which props are the ones with + if (diffInCommitPhase) { + // Diff and update the properties. + updateProperties(domElement, type, oldProps, newProps); + } else { + // Apply the diff to the DOM node. + updatePropertiesWithDiff( + domElement, + updatePayload, + type, + oldProps, + newProps + ); + } // Update the props handle so that we know which props are the ones with // with current event handlers. updateFiberProps(domElement, newProps); @@ -43462,7 +44278,7 @@ function resolveSingletonInstance( var hostContextDev = hostContext; if (validateDOMNestingDev) { - validateDOMNesting(type, null, hostContextDev.ancestorInfo); + validateDOMNesting(type, hostContextDev.ancestorInfo); } } diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index ce50a44f02bd9..a3be4ec29c8f3 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -55,6 +55,7 @@ var ReactSharedInternals = dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase, REACT_ELEMENT_TYPE = Symbol.for("react.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), @@ -979,78 +980,85 @@ function getActiveElement(doc) { return doc.body; } } -function updateInput(element, props) { - var value = getToStringValue(props.value), - type = props.type; - disableInputAttributeSyncing - ? null != props.defaultValue - ? setDefaultValue( - element, - props.type, - getToStringValue(props.defaultValue) - ) - : element.removeAttribute("value") - : null != props.value - ? setDefaultValue(element, props.type, value) - : null != props.defaultValue - ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue)) - : element.removeAttribute("value"); - disableInputAttributeSyncing - ? null == props.defaultChecked - ? element.removeAttribute("checked") - : (element.defaultChecked = !!props.defaultChecked) - : null == props.checked && - null != props.defaultChecked && - (element.defaultChecked = !!props.defaultChecked); - props = props.checked; - null != props && (element.checked = props); +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { if (null != value) if ("number" === type) { if ((0 === value && "" === element.value) || element.value != value) - element.value = "" + value; - } else element.value !== "" + value && (element.value = "" + value); - else - ("submit" !== type && "reset" !== type) || element.removeAttribute("value"); -} -function initInput(element, props, isHydrating) { - if (null != props.value || null != props.defaultValue) { - var type = props.type; + element.value = "" + getToStringValue(value); + } else + element.value !== "" + getToStringValue(value) && + (element.value = "" + getToStringValue(value)); + else if ("submit" === type || "reset" === type) { + element.removeAttribute("value"); + return; + } + disableInputAttributeSyncing + ? null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value") + : null != value + ? setDefaultValue(element, type, getToStringValue(value)) + : null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value"); + disableInputAttributeSyncing + ? null == defaultChecked + ? element.removeAttribute("checked") + : (element.defaultChecked = !!defaultChecked) + : null == checked && + null != defaultChecked && + (element.defaultChecked = !!defaultChecked); + null != checked && + element.checked !== !!checked && + (element.checked = checked); +} +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { + if (null != value || null != defaultValue) { if ( (type = "submit" === type || "reset" === type) && - (void 0 === props.value || null === props.value) + (void 0 === value || null === value) ) return; - var defaultValue = - null != props.defaultValue - ? "" + getToStringValue(props.defaultValue) - : "", + var defaultValueStr = + null != defaultValue ? "" + getToStringValue(defaultValue) : "", initialValue = - null != props.value ? "" + getToStringValue(props.value) : defaultValue; - if (!isHydrating) - if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); - null == value || - (!type && value === element.value) || - (element.value = "" + value); - } else initialValue !== element.value && (element.value = initialValue); + null != value ? "" + getToStringValue(value) : defaultValueStr; + isHydrating || + (disableInputAttributeSyncing + ? null == value || + (!type && "" + getToStringValue(value) === element.value) || + (element.value = "" + getToStringValue(value)) + : initialValue !== element.value && (element.value = initialValue)); disableInputAttributeSyncing - ? null != props.defaultValue && (element.defaultValue = defaultValue) + ? null != defaultValue && (element.defaultValue = defaultValueStr) : (element.defaultValue = initialValue); } - type = element.name; - "" !== type && (element.name = ""); - defaultValue = null != props.checked ? props.checked : props.defaultChecked; - defaultValue = - "function" !== typeof defaultValue && - "symbol" !== typeof defaultValue && - !!defaultValue; - isHydrating || (element.checked = !!defaultValue); + value = element.name; + "" !== value && (element.name = ""); + checked = null != checked ? checked : defaultChecked; + checked = + "function" !== typeof checked && "symbol" !== typeof checked && !!checked; + isHydrating || (element.checked = !!checked); disableInputAttributeSyncing - ? null != props.defaultChecked && - ((element.defaultChecked = !element.defaultChecked), - (element.defaultChecked = !!props.defaultChecked)) - : (element.defaultChecked = !!defaultValue); - "" !== type && (element.name = type); + ? null != defaultChecked && (element.defaultChecked = !!defaultChecked) + : (element.defaultChecked = !!checked); + "" !== value && (element.name = value); } function setDefaultValue(node, type, value) { ("number" === type && getActiveElement(node.ownerDocument) === node) || @@ -1082,40 +1090,47 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) { null !== multiple && (multiple.selected = !0); } } -function updateTextarea(element, props) { - var value = getToStringValue(props.value), - defaultValue = getToStringValue(props.defaultValue); - element.defaultValue = null != defaultValue ? "" + defaultValue : ""; - null != value && - ((value = "" + value), +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { + null != value + ? updateOptions(element, !!multiple, value, !1) + : !!wasMultiple !== !!multiple && + (null != defaultValue + ? updateOptions(element, !!multiple, defaultValue, !0) + : updateOptions(element, !!multiple, multiple ? [] : "", !1)); +} +function updateTextarea(element, value, defaultValue) { + if ( + null != value && + ((value = "" + getToStringValue(value)), value !== element.value && (element.value = value), - null == props.defaultValue && - element.defaultValue !== value && - (element.defaultValue = value)); -} -function initTextarea(element, props) { - var initialValue = props.value; - if (null == initialValue) { - initialValue = props.children; - props = props.defaultValue; - if (null != initialValue) { - if (null != props) throw Error(formatProdErrorMessage(92)); - if (isArrayImpl(initialValue)) { - if (1 < initialValue.length) throw Error(formatProdErrorMessage(93)); - initialValue = initialValue[0]; + null == defaultValue) + ) { + element.defaultValue !== value && (element.defaultValue = value); + return; + } + element.defaultValue = + null != defaultValue ? "" + getToStringValue(defaultValue) : ""; +} +function initTextarea(element, value, defaultValue, children) { + if (null == value) { + if (null != children) { + if (null != defaultValue) throw Error(formatProdErrorMessage(92)); + if (isArrayImpl(children)) { + if (1 < children.length) throw Error(formatProdErrorMessage(93)); + children = children[0]; } - props = initialValue; + defaultValue = children; } - null == props && (props = ""); - initialValue = props; + null == defaultValue && (defaultValue = ""); + value = defaultValue; } - props = getToStringValue(initialValue); - element.defaultValue = props; - initialValue = element.textContent; - initialValue === props && - "" !== initialValue && - null !== initialValue && - (element.value = initialValue); + defaultValue = getToStringValue(value); + element.defaultValue = defaultValue; + children = element.textContent; + children === defaultValue && + "" !== children && + null !== children && + (element.value = children); } function getChildNamespace(parentNamespace, type) { if ( @@ -1181,30 +1196,44 @@ var unitlessNumbers = new Set( " " ) ); -function setValueForStyles(node, styles) { +function setValueForStyle(style, styleName, value) { + var isCustomProperty = 0 === styleName.indexOf("--"); + null == value || "boolean" === typeof value || "" === value + ? isCustomProperty + ? style.setProperty(styleName, "") + : "float" === styleName + ? (style.cssFloat = "") + : (style[styleName] = "") + : isCustomProperty + ? style.setProperty(styleName, value) + : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName) + ? "float" === styleName + ? (style.cssFloat = value) + : (style[styleName] = ("" + value).trim()) + : (style[styleName] = value + "px"); +} +function setValueForStyles(node, styles, prevStyles) { if (null != styles && "object" !== typeof styles) throw Error(formatProdErrorMessage(62)); node = node.style; - for (var styleName in styles) - if (styles.hasOwnProperty(styleName)) { - var value = styles[styleName], - isCustomProperty = 0 === styleName.indexOf("--"); - null == value || "boolean" === typeof value || "" === value - ? isCustomProperty + if (diffInCommitPhase && null != prevStyles) { + for (var styleName in prevStyles) + !prevStyles.hasOwnProperty(styleName) || + (null != styles && styles.hasOwnProperty(styleName)) || + (0 === styleName.indexOf("--") ? node.setProperty(styleName, "") : "float" === styleName ? (node.cssFloat = "") - : (node[styleName] = "") - : isCustomProperty - ? node.setProperty(styleName, value) - : "number" !== typeof value || - 0 === value || - unitlessNumbers.has(styleName) - ? "float" === styleName - ? (node.cssFloat = value) - : (node[styleName] = ("" + value).trim()) - : (node[styleName] = value + "px"); - } + : (node[styleName] = "")); + for (var styleName$16 in styles) + (styleName = styles[styleName$16]), + styles.hasOwnProperty(styleName$16) && + prevStyles[styleName$16] !== styleName && + setValueForStyle(node, styleName$16, styleName); + } else + for (var styleName$17 in styles) + styles.hasOwnProperty(styleName$17) && + setValueForStyle(node, styleName$17, styles[styleName$17]); } function isCustomElement(tagName) { if (-1 === tagName.indexOf("-")) return !1; @@ -1317,7 +1346,7 @@ function normalizeMarkupForTextOrAttribute(markup) { .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, ""); } function noop$2() {} -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": "string" === typeof value @@ -1342,7 +1371,7 @@ function setProp(domElement, tag, key, value, props) { setValueForKnownAttribute(domElement, key, value); break; case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "src": case "href": @@ -1558,6 +1587,9 @@ function setProp(domElement, tag, key, value, props) { value ); break; + case "is": + setValueForAttribute(domElement, "is", value); + break; case "innerText": case "textContent": if (enableCustomElementPropertySupport) break; @@ -1571,10 +1603,10 @@ function setProp(domElement, tag, key, value, props) { setValueForAttribute(domElement, key, value); } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "dangerouslySetInnerHTML": if (null != value) { @@ -1612,23 +1644,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) { if (enableCustomElementPropertySupport) a: { props = value; - if ("o" === key[0] && "n" === key[1]) { - tag = key.endsWith("Capture"); - value = key.substr(2, tag ? key.length - 9 : void 0); - var prevProps = getFiberCurrentPropsFromNode(domElement); - prevProps = null != prevProps ? prevProps[key] : null; - "function" === typeof prevProps && - domElement.removeEventListener(value, prevProps, tag); - if ("function" === typeof props) { - "function" !== typeof prevProps && - null !== prevProps && - (key in domElement - ? (domElement[key] = null) - : domElement.hasAttribute(key) && - domElement.removeAttribute(key)); - domElement.addEventListener(value, props, tag); - break a; - } + if ( + "o" === key[0] && + "n" === key[1] && + ((tag = key.endsWith("Capture")), + (value = key.substr(2, tag ? key.length - 9 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(value, prevValue, tag), + "function" === typeof props) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(value, props, tag); + break a; } key in domElement ? (domElement[key] = props) @@ -1654,7 +1688,12 @@ function setInitialProperties(domElement, tag, props) { break; case "input": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey in props) + var type = null, + value = null, + defaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in props) if (props.hasOwnProperty(propKey)) { var propValue = props[propKey]; if (null != propValue) @@ -1664,9 +1703,11 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== typeof propValue && "boolean" !== typeof propValue && - domElement.setAttribute(propKey, propValue); + ((type = propValue), + domElement.setAttribute(propKey, propValue)); break; case "checked": + checked = propValue; propValue = null != propValue ? propValue : props.defaultChecked; domElement.checked = @@ -1674,7 +1715,14 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== propValue; break; + case "defaultChecked": + defaultChecked = propValue; + break; case "value": + value = propValue; + break; + case "defaultValue": + defaultValue = propValue; break; case "children": case "dangerouslySetInnerHTML": @@ -1682,60 +1730,81 @@ function setInitialProperties(domElement, tag, props) { throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } track(domElement); - initInput(domElement, props, !1); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + !1 + ); return; case "select": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$18 in props) + var propKey = (value = defaultValue = null); + for (type in props) if ( - props.hasOwnProperty(propKey$18) && - ((propKey = props[propKey$18]), null != propKey) + props.hasOwnProperty(type) && + ((checked = props[type]), null != checked) ) - switch (propKey$18) { + switch (type) { case "value": + defaultValue = checked; + break; + case "defaultValue": + value = checked; break; + case "multiple": + propKey = checked; default: - setProp(domElement, tag, propKey$18, propKey, props); + setProp(domElement, tag, type, checked, props, null); } - domElement.multiple = !!props.multiple; - tag = props.value; + tag = defaultValue; + props = value; + domElement.multiple = !!propKey; null != tag - ? updateOptions(domElement, !!props.multiple, tag, !1) - : null != props.defaultValue && - updateOptions(domElement, !!props.multiple, props.defaultValue, !0); + ? updateOptions(domElement, !!propKey, tag, !1) + : null != props && updateOptions(domElement, !!propKey, props, !0); return; case "textarea": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$20 in props) + defaultValue = type = propKey = null; + for (value in props) if ( - props.hasOwnProperty(propKey$20) && - ((propKey = props[propKey$20]), null != propKey) + props.hasOwnProperty(value) && + ((checked = props[value]), null != checked) ) - switch (propKey$20) { + switch (value) { case "value": + propKey = checked; + break; + case "defaultValue": + type = checked; break; case "children": + defaultValue = checked; break; case "dangerouslySetInnerHTML": - if (null != propKey) throw Error(formatProdErrorMessage(91)); + if (null != checked) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey$20, propKey, props); + setProp(domElement, tag, value, checked, props); } track(domElement); - initTextarea(domElement, props); + initTextarea(domElement, propKey, type, defaultValue); return; case "option": - for (var propKey$22 in props) + for (checked in props) if ( - props.hasOwnProperty(propKey$22) && - ((propKey = props[propKey$22]), null != propKey) + props.hasOwnProperty(checked) && + ((propKey = props[checked]), null != propKey) ) - switch (propKey$22) { + switch (checked) { case "selected": domElement.selected = propKey && @@ -1743,10 +1812,8 @@ function setInitialProperties(domElement, tag, props) { "symbol" !== typeof propKey; break; default: - setProp(domElement, tag, propKey$22, propKey, props); + setProp(domElement, tag, checked, propKey, props); } - null != props.value && - domElement.setAttribute("value", "" + getToStringValue(props.value)); return; case "dialog": listenToNonDelegatedEvent("cancel", domElement); @@ -1785,41 +1852,375 @@ function setInitialProperties(domElement, tag, props) { case "track": case "wbr": case "menuitem": - for (var propKey$24 in props) + for (defaultChecked in props) if ( - props.hasOwnProperty(propKey$24) && - ((propKey = props[propKey$24]), null != propKey) + props.hasOwnProperty(defaultChecked) && + ((propKey = props[defaultChecked]), null != propKey) ) - switch (propKey$24) { + switch (defaultChecked) { case "children": case "dangerouslySetInnerHTML": throw Error(formatProdErrorMessage(137, tag)); default: - setProp(domElement, tag, propKey$24, propKey, props); + setProp(domElement, tag, defaultChecked, propKey, props, null); } return; default: if (isCustomElement(tag)) { - for (var propKey$26 in props) - props.hasOwnProperty(propKey$26) && - ((propKey = props[propKey$26]), + for (propValue in props) + props.hasOwnProperty(propValue) && + ((propKey = props[propValue]), null != propKey && setPropOnCustomElement( domElement, tag, - propKey$26, + propValue, propKey, - props + props, + null )); return; } } - for (propValue in props) - props.hasOwnProperty(propValue) && - ((propKey = props[propValue]), - null != propKey && setProp(domElement, tag, propValue, propKey, props)); + for (defaultValue in props) + props.hasOwnProperty(defaultValue) && + ((propKey = props[defaultValue]), + null != propKey && + setProp(domElement, tag, defaultValue, propKey, props, null)); } -function updateProperties( +function updateProperties(domElement, tag, lastProps, nextProps) { + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": + break; + case "input": + var name = null, + type = null, + value = null, + defaultValue = null, + lastDefaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in lastProps) { + var lastProp = lastProps[propKey]; + if (lastProps.hasOwnProperty(propKey) && null != lastProp) + switch (propKey) { + case "checked": + nextProps.hasOwnProperty(propKey) || + ((lastProp = nextProps.defaultChecked), + (domElement.checked = + !!lastProp && + "function" !== typeof lastProp && + "symbol" !== lastProp)); + break; + case "value": + break; + case "defaultValue": + lastDefaultValue = lastProp; + default: + nextProps.hasOwnProperty(propKey) || + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + for (var propKey$37 in nextProps) { + var propKey = nextProps[propKey$37]; + lastProp = lastProps[propKey$37]; + if ( + nextProps.hasOwnProperty(propKey$37) && + (null != propKey || null != lastProp) + ) + switch (propKey$37) { + case "type": + type = propKey; + propKey !== lastProp && + (null != propKey && + "function" !== typeof propKey && + "symbol" !== typeof propKey && + "boolean" !== typeof propKey + ? domElement.setAttribute(propKey$37, propKey) + : domElement.removeAttribute(propKey$37)); + break; + case "name": + name = propKey; + break; + case "checked": + checked = propKey; + propKey !== lastProp && + ((propKey = + null != propKey ? propKey : nextProps.defaultChecked), + (domElement.checked = + !!propKey && + "function" !== typeof propKey && + "symbol" !== propKey)); + break; + case "defaultChecked": + defaultChecked = propKey; + break; + case "value": + value = propKey; + break; + case "defaultValue": + defaultValue = propKey; + break; + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + propKey !== lastProp && + setProp( + domElement, + tag, + propKey$37, + propKey, + nextProps, + lastProp + ); + } + } + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + case "select": + defaultValue = value = propKey = propKey$37 = null; + for (type in lastProps) + if ( + ((lastDefaultValue = lastProps[type]), + lastProps.hasOwnProperty(type) && null != lastDefaultValue) + ) + switch (type) { + case "value": + break; + case "multiple": + defaultValue = lastDefaultValue; + default: + nextProps.hasOwnProperty(type) || + setProp( + domElement, + tag, + type, + null, + nextProps, + lastDefaultValue + ); + } + for (name in nextProps) + if ( + ((type = nextProps[name]), + (lastDefaultValue = lastProps[name]), + nextProps.hasOwnProperty(name) && + (null != type || null != lastDefaultValue)) + ) + switch (name) { + case "value": + propKey$37 = type; + break; + case "defaultValue": + propKey = type; + break; + case "multiple": + value = type; + default: + type !== lastDefaultValue && + setProp( + domElement, + tag, + name, + type, + nextProps, + lastDefaultValue + ); + } + updateSelect(domElement, propKey$37, propKey, value, defaultValue); + return; + case "textarea": + propKey = propKey$37 = null; + for (defaultValue in lastProps) + if ( + ((name = lastProps[defaultValue]), + lastProps.hasOwnProperty(defaultValue) && + null != name && + !nextProps.hasOwnProperty(defaultValue)) + ) + switch (defaultValue) { + case "value": + break; + case "children": + break; + default: + setProp(domElement, tag, defaultValue, null, nextProps, name); + } + for (value in nextProps) + if ( + ((name = nextProps[value]), + (type = lastProps[value]), + nextProps.hasOwnProperty(value) && (null != name || null != type)) + ) + switch (value) { + case "value": + propKey$37 = name; + break; + case "defaultValue": + propKey = name; + break; + case "children": + break; + case "dangerouslySetInnerHTML": + if (null != name) throw Error(formatProdErrorMessage(91)); + break; + default: + name !== type && + setProp(domElement, tag, value, name, nextProps, type); + } + updateTextarea(domElement, propKey$37, propKey); + return; + case "option": + for (var propKey$55 in lastProps) + if ( + ((propKey$37 = lastProps[propKey$55]), + lastProps.hasOwnProperty(propKey$55) && + null != propKey$37 && + !nextProps.hasOwnProperty(propKey$55)) + ) + switch (propKey$55) { + case "selected": + domElement.selected = !1; + break; + default: + setProp(domElement, tag, propKey$55, null, nextProps, propKey$37); + } + for (lastDefaultValue in nextProps) + if ( + ((propKey$37 = nextProps[lastDefaultValue]), + (propKey = lastProps[lastDefaultValue]), + nextProps.hasOwnProperty(lastDefaultValue) && + propKey$37 !== propKey && + (null != propKey$37 || null != propKey)) + ) + switch (lastDefaultValue) { + case "selected": + domElement.selected = + propKey$37 && + "function" !== typeof propKey$37 && + "symbol" !== typeof propKey$37; + break; + default: + setProp( + domElement, + tag, + lastDefaultValue, + propKey$37, + nextProps, + propKey + ); + } + return; + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": + for (var propKey$60 in lastProps) + (propKey$37 = lastProps[propKey$60]), + lastProps.hasOwnProperty(propKey$60) && + null != propKey$37 && + !nextProps.hasOwnProperty(propKey$60) && + setProp(domElement, tag, propKey$60, null, nextProps, propKey$37); + for (checked in nextProps) + if ( + ((propKey$37 = nextProps[checked]), + (propKey = lastProps[checked]), + nextProps.hasOwnProperty(checked) && + propKey$37 !== propKey && + (null != propKey$37 || null != propKey)) + ) + switch (checked) { + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey$37) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + setProp(domElement, tag, checked, propKey$37, nextProps, propKey); + } + return; + default: + if (isCustomElement(tag)) { + for (var propKey$65 in lastProps) + (propKey$37 = lastProps[propKey$65]), + lastProps.hasOwnProperty(propKey$65) && + null != propKey$37 && + !nextProps.hasOwnProperty(propKey$65) && + setPropOnCustomElement( + domElement, + tag, + propKey$65, + null, + nextProps, + propKey$37 + ); + for (defaultChecked in nextProps) + (propKey$37 = nextProps[defaultChecked]), + (propKey = lastProps[defaultChecked]), + !nextProps.hasOwnProperty(defaultChecked) || + propKey$37 === propKey || + (null == propKey$37 && null == propKey) || + setPropOnCustomElement( + domElement, + tag, + defaultChecked, + propKey$37, + nextProps, + propKey + ); + return; + } + } + for (var propKey$70 in lastProps) + (propKey$37 = lastProps[propKey$70]), + lastProps.hasOwnProperty(propKey$70) && + null != propKey$37 && + !nextProps.hasOwnProperty(propKey$70) && + setProp(domElement, tag, propKey$70, null, nextProps, propKey$37); + for (lastProp in nextProps) + (propKey$37 = nextProps[lastProp]), + (propKey = lastProps[lastProp]), + !nextProps.hasOwnProperty(lastProp) || + propKey$37 === propKey || + (null == propKey$37 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$37, nextProps, propKey); +} +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -1837,14 +2238,31 @@ function updateProperties( case "li": break; case "input": - "radio" === nextProps.type && - null != nextProps.name && - ((lastProps = nextProps.checked), - null != lastProps && (domElement.checked = lastProps)); - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) { - var propKey = updatePayload[lastProps], - propValue = updatePayload[lastProps + 1]; + var name = nextProps.name, + type = nextProps.type, + value = nextProps.value, + defaultValue = nextProps.defaultValue; + lastProps = lastProps.defaultValue; + for ( + var checked = nextProps.checked, + defaultChecked = nextProps.defaultChecked, + i = 0; + i < updatePayload.length; + i += 2 + ) { + var propKey = updatePayload[i], + propValue = updatePayload[i + 1]; switch (propKey) { + case "type": + null != propValue && + "function" !== typeof propValue && + "symbol" !== typeof propValue && + "boolean" !== typeof propValue + ? domElement.setAttribute(propKey, propValue) + : domElement.removeAttribute(propKey); + break; + case "name": + break; case "checked": propKey = null != propValue ? propValue : nextProps.defaultChecked; domElement.checked = @@ -1852,83 +2270,89 @@ function updateProperties( "function" !== typeof propKey && "symbol" !== propKey; break; + case "defaultChecked": + break; case "value": break; + case "defaultValue": + break; case "children": case "dangerouslySetInnerHTML": if (null != propValue) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } - updateInput(domElement, nextProps); + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastProps, + checked, + defaultChecked, + type + ); return; case "select": - for (propKey = 0; propKey < updatePayload.length; propKey += 2) { - propValue = updatePayload[propKey]; - var propValue$32 = updatePayload[propKey + 1]; - switch (propValue) { + name = nextProps.value; + type = nextProps.defaultValue; + value = nextProps.multiple; + defaultValue = lastProps.multiple; + for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + switch ( + ((checked = updatePayload[lastProps]), + (defaultChecked = updatePayload[lastProps + 1]), + checked) + ) { case "value": break; default: - setProp(domElement, tag, propValue, propValue$32, nextProps); + setProp(domElement, tag, checked, defaultChecked, nextProps, null); } - } - updatePayload = !!lastProps.multiple; - tag = nextProps.value; - null != tag - ? updateOptions(domElement, !!nextProps.multiple, tag, !1) - : updatePayload !== !!nextProps.multiple && - (null != nextProps.defaultValue - ? updateOptions( - domElement, - !!nextProps.multiple, - nextProps.defaultValue, - !0 - ) - : updateOptions( - domElement, - !!nextProps.multiple, - nextProps.multiple ? [] : "", - !1 - )); + updateSelect(domElement, name, type, value, defaultValue); return; case "textarea": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + name = nextProps.value; + type = nextProps.defaultValue; + for (value = 0; value < updatePayload.length; value += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((defaultValue = updatePayload[value]), + (lastProps = updatePayload[value + 1]), + defaultValue) ) { case "value": break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propValue) throw Error(formatProdErrorMessage(91)); + if (null != lastProps) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, defaultValue, lastProps, nextProps, null); } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, name, type); return; case "option": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "selected": domElement.selected = - propValue && - "function" !== typeof propValue && - "symbol" !== typeof propValue; + value && "function" !== typeof value && "symbol" !== typeof value; break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; case "img": @@ -1946,41 +2370,42 @@ function updateProperties( case "track": case "wbr": case "menuitem": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "children": case "dangerouslySetInnerHTML": - if (null != propValue) - throw Error(formatProdErrorMessage(137, tag)); + if (null != value) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; default: if (isCustomElement(tag)) { - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setPropOnCustomElement( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); return; } } - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setProp( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); } var restoreTarget = null, @@ -1991,7 +2416,15 @@ function restoreStateOfTarget(target) { var props = getFiberCurrentPropsFromNode(target); a: switch (((target = internalInstance.stateNode), internalInstance.type)) { case "input": - updateInput(target, props); + updateInput( + target, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); internalInstance = props.name; if ("radio" === props.type && null != internalInstance) { for (props = target; props.parentNode; ) props = props.parentNode; @@ -2010,13 +2443,21 @@ function restoreStateOfTarget(target) { var otherProps = getFiberCurrentPropsFromNode(otherNode); if (!otherProps) throw Error(formatProdErrorMessage(90)); updateValueIfChanged(otherNode); - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } break a; case "textarea": - updateTextarea(target, props); + updateTextarea(target, props.value, props.defaultValue); break a; case "select": (internalInstance = props.value), @@ -2308,8 +2749,8 @@ function prepareToHydrateHostInstance(fiber) { break; case "video": case "audio": - for (type = 0; type < mediaEventTypes.length; type++) - listenToNonDelegatedEvent(mediaEventTypes[type], instance); + for (var i = 0; i < mediaEventTypes.length; i++) + listenToNonDelegatedEvent(mediaEventTypes[i], instance); break; case "source": listenToNonDelegatedEvent("error", instance); @@ -2326,7 +2767,15 @@ function prepareToHydrateHostInstance(fiber) { case "input": listenToNonDelegatedEvent("invalid", instance); track(instance); - initInput(instance, props, !0); + initInput( + instance, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + !0 + ); break; case "select": listenToNonDelegatedEvent("invalid", instance); @@ -2334,22 +2783,30 @@ function prepareToHydrateHostInstance(fiber) { case "textarea": listenToNonDelegatedEvent("invalid", instance), track(instance), - initTextarea(instance, props); + initTextarea(instance, props.value, props.defaultValue, props.children); + } + i = null; + var children = props.children; + if ( + ("string" === typeof children || "number" === typeof children) && + instance.textContent !== "" + children + ) { + if (!0 !== props.suppressHydrationWarning) { + var serverText = instance.textContent; + normalizeMarkupForTextOrAttribute(children); + normalizeMarkupForTextOrAttribute(serverText); + } + diffInCommitPhase + ? "body" !== type && (instance.textContent = children) + : (i = ["children", children]); } - var updatePayload = null; - type = props.children; - ("string" !== typeof type && "number" !== typeof type) || - instance.textContent === "" + type || - (!0 !== props.suppressHydrationWarning && - ((updatePayload = instance.textContent), - normalizeMarkupForTextOrAttribute(type), - normalizeMarkupForTextOrAttribute(updatePayload)), - (updatePayload = ["children", type])); null != props.onScroll && listenToNonDelegatedEvent("scroll", instance); null != props.onClick && (instance.onclick = noop$2); - instance = updatePayload; - fiber.updateQueue = instance; - return null !== instance ? !0 : !1; + instance = i; + return diffInCommitPhase || + ((fiber.updateQueue = instance), null === instance) + ? !1 + : !0; } function popToNextHostParent(fiber) { for (hydrationParentFiber = fiber.return; hydrationParentFiber; ) @@ -3824,10 +4281,10 @@ createFunctionComponentUpdateQueue = function () { function use(usable) { if (null !== usable && "object" === typeof usable) { if ("function" === typeof usable.then) { - var index$73 = thenableIndexCounter; + var index$122 = thenableIndexCounter; thenableIndexCounter += 1; null === thenableState && (thenableState = []); - usable = trackUsedThenable(thenableState, usable, index$73); + usable = trackUsedThenable(thenableState, usable, index$122); null === currentlyRenderingFiber$1.alternate && (null === workInProgressHook ? null === currentlyRenderingFiber$1.memoizedState @@ -4315,16 +4772,16 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$79 = enqueueUpdate(provider, fiber, lane); - if (null !== root$79) { + var root$128 = enqueueUpdate(provider, fiber, lane); + if (null !== root$128) { var eventTime = requestEventTime(); - scheduleUpdateOnFiber(root$79, provider, lane, eventTime); - entangleTransitions(root$79, provider, lane); + scheduleUpdateOnFiber(root$128, provider, lane, eventTime); + entangleTransitions(root$128, provider, lane); } provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$79 && + null !== root$128 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -4531,15 +4988,15 @@ var HooksDispatcherOnMount = { getServerSnapshot = getServerSnapshot(); } else { getServerSnapshot = getSnapshot(); - var root$75 = workInProgressRoot; - if (null === root$75) throw Error(formatProdErrorMessage(349)); - includesBlockingLane(root$75, renderLanes$1) || + var root$124 = workInProgressRoot; + if (null === root$124) throw Error(formatProdErrorMessage(349)); + includesBlockingLane(root$124, renderLanes$1) || pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot); } hook.memoizedState = getServerSnapshot; - root$75 = { value: getServerSnapshot, getSnapshot: getSnapshot }; - hook.queue = root$75; - mountEffect(subscribeToStore.bind(null, fiber, root$75, subscribe), [ + root$124 = { value: getServerSnapshot, getSnapshot: getSnapshot }; + hook.queue = root$124; + mountEffect(subscribeToStore.bind(null, fiber, root$124, subscribe), [ subscribe ]); fiber.flags |= 2048; @@ -4548,7 +5005,7 @@ var HooksDispatcherOnMount = { updateStoreInstance.bind( null, fiber, - root$75, + root$124, getServerSnapshot, getSnapshot ), @@ -5047,10 +5504,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$90 = workInProgress.stateNode; + root$139 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$90.incompleteTransitions.has(transition)) { + if (!root$139.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -5058,11 +5515,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$90.incompleteTransitions.set(transition, markerInstance); + root$139.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$90.incompleteTransitions.forEach(function (markerInstance) { + root$139.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5759,14 +6216,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { } JSCompiler_temp = current.memoizedState; if (null !== JSCompiler_temp) { - var dehydrated$97 = JSCompiler_temp.dehydrated; - if (null !== dehydrated$97) + var dehydrated$146 = JSCompiler_temp.dehydrated; + if (null !== dehydrated$146) return updateDehydratedSuspenseComponent( current, workInProgress, didSuspend, nextProps, - dehydrated$97, + dehydrated$146, JSCompiler_temp, renderLanes ); @@ -5776,7 +6233,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { showFallback = nextProps.fallback; didSuspend = workInProgress.mode; JSCompiler_temp = current.child; - dehydrated$97 = JSCompiler_temp.sibling; + dehydrated$146 = JSCompiler_temp.sibling; var primaryChildProps = { mode: "hidden", children: nextProps.children }; 0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp ? ((nextProps = workInProgress.child), @@ -5785,8 +6242,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { (workInProgress.deletions = null)) : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)), (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280)); - null !== dehydrated$97 - ? (showFallback = createWorkInProgress(dehydrated$97, showFallback)) + null !== dehydrated$146 + ? (showFallback = createWorkInProgress(dehydrated$146, showFallback)) : ((showFallback = createFiberFromFragment( showFallback, didSuspend, @@ -5805,10 +6262,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? (didSuspend = mountSuspenseOffscreenState(renderLanes)) : ((JSCompiler_temp = didSuspend.cachePool), null !== JSCompiler_temp - ? ((dehydrated$97 = CacheContext._currentValue), + ? ((dehydrated$146 = CacheContext._currentValue), (JSCompiler_temp = - JSCompiler_temp.parent !== dehydrated$97 - ? { parent: dehydrated$97, pool: dehydrated$97 } + JSCompiler_temp.parent !== dehydrated$146 + ? { parent: dehydrated$146, pool: dehydrated$146 } : JSCompiler_temp)) : (JSCompiler_temp = getSuspendedCache()), (didSuspend = { @@ -5822,23 +6279,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ((JSCompiler_temp = enableTransitionTracing ? markerInstanceStack.current : null), - (dehydrated$97 = showFallback.updateQueue), + (dehydrated$146 = showFallback.updateQueue), (primaryChildProps = current.updateQueue), - null === dehydrated$97 + null === dehydrated$146 ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null }) - : dehydrated$97 === primaryChildProps + : dehydrated$146 === primaryChildProps ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null !== primaryChildProps ? primaryChildProps.retryQueue : null }) - : ((dehydrated$97.transitions = didSuspend), - (dehydrated$97.markerInstances = JSCompiler_temp)))); + : ((dehydrated$146.transitions = didSuspend), + (dehydrated$146.markerInstances = JSCompiler_temp)))); showFallback.childLanes = current.childLanes & ~renderLanes; workInProgress.memoizedState = SUSPENDED_MARKER; return nextProps; @@ -6801,62 +7258,67 @@ function markRef(workInProgress) { } function updateHostComponent(current, workInProgress, type, newProps) { current = current.memoizedProps; - if (current !== newProps) { - type = null; - var propKey, - styleName, - styleUpdates = null; - for (propKey in current) - if ( - !newProps.hasOwnProperty(propKey) && - current.hasOwnProperty(propKey) && - null != current[propKey] - ) - switch (propKey) { - case "style": - var lastStyle = current[propKey]; - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - break; - default: - (type = type || []).push(propKey, null); - } - for (propKey in newProps) { - lastStyle = newProps[propKey]; - var lastProp = null != current ? current[propKey] : void 0; - if ( - newProps.hasOwnProperty(propKey) && - lastStyle !== lastProp && - (null != lastStyle || null != lastProp) - ) - switch (propKey) { - case "style": - if (lastProp) { - for (styleName in lastProp) - !lastProp.hasOwnProperty(styleName) || - (lastStyle && lastStyle.hasOwnProperty(styleName)) || - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - lastProp[styleName] !== lastStyle[styleName] && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = lastStyle[styleName])); - } else - styleUpdates || - (type || (type = []), type.push(propKey, styleUpdates)), - (styleUpdates = lastStyle); - break; - default: - (type = type || []).push(propKey, lastStyle); + if (current !== newProps) + if (diffInCommitPhase) markUpdate(workInProgress); + else { + if (diffInCommitPhase) newProps = null; + else { + type = null; + var propKey, + styleName, + styleUpdates = null; + for (propKey in current) + if ( + !newProps.hasOwnProperty(propKey) && + current.hasOwnProperty(propKey) && + null != current[propKey] + ) + switch (propKey) { + case "style": + var lastStyle = current[propKey]; + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + break; + default: + (type = type || []).push(propKey, null); + } + for (propKey in newProps) { + lastStyle = newProps[propKey]; + var lastProp = null != current ? current[propKey] : void 0; + if ( + newProps.hasOwnProperty(propKey) && + lastStyle !== lastProp && + (null != lastStyle || null != lastProp) + ) + switch (propKey) { + case "style": + if (lastProp) { + for (styleName in lastProp) + !lastProp.hasOwnProperty(styleName) || + (lastStyle && lastStyle.hasOwnProperty(styleName)) || + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + lastProp[styleName] !== lastStyle[styleName] && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = lastStyle[styleName])); + } else + styleUpdates || + (type || (type = []), type.push(propKey, styleUpdates)), + (styleUpdates = lastStyle); + break; + default: + (type = type || []).push(propKey, lastStyle); + } } + styleUpdates && (type = type || []).push("style", styleUpdates); + newProps = type; + } + (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); } - styleUpdates && (type = type || []).push("style", styleUpdates); - newProps = type; - (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); - } } function preloadResourceAndSuspendIfNeeded(workInProgress, resource) { if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4)) @@ -6900,14 +7362,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$128 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$128 = lastTailNode), + for (var lastTailNode$177 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$177 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$128 + null === lastTailNode$177 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$128.sibling = null); + : (lastTailNode$177.sibling = null); } } function bubbleProperties(completedWork) { @@ -6917,19 +7379,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$129 = completedWork.child; null !== child$129; ) - (newChildLanes |= child$129.lanes | child$129.childLanes), - (subtreeFlags |= child$129.subtreeFlags & 31457280), - (subtreeFlags |= child$129.flags & 31457280), - (child$129.return = completedWork), - (child$129 = child$129.sibling); + for (var child$178 = completedWork.child; null !== child$178; ) + (newChildLanes |= child$178.lanes | child$178.childLanes), + (subtreeFlags |= child$178.subtreeFlags & 31457280), + (subtreeFlags |= child$178.flags & 31457280), + (child$178.return = completedWork), + (child$178 = child$178.sibling); else - for (child$129 = completedWork.child; null !== child$129; ) - (newChildLanes |= child$129.lanes | child$129.childLanes), - (subtreeFlags |= child$129.subtreeFlags), - (subtreeFlags |= child$129.flags), - (child$129.return = completedWork), - (child$129 = child$129.sibling); + for (child$178 = completedWork.child; null !== child$178; ) + (newChildLanes |= child$178.lanes | child$178.childLanes), + (subtreeFlags |= child$178.subtreeFlags), + (subtreeFlags |= child$178.flags), + (child$178.return = completedWork), + (child$178 = child$178.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -7667,8 +8129,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$159) { - captureCommitPhaseError(current, nearestMountedAncestor, error$159); + } catch (error$208) { + captureCommitPhaseError(current, nearestMountedAncestor, error$208); } else ref.current = null; } @@ -7705,7 +8167,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$219) { + } catch (e$268) { JSCompiler_temp = null; break a; } @@ -7971,11 +8433,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$161) { + } catch (error$210) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$161 + error$210 ); } } @@ -8655,8 +9117,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$174) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$174); + } catch (error$223) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$223); } } break; @@ -8825,20 +9287,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) { ) try { var domElement = finishedWork.stateNode, + type = finishedWork.type, + oldProps = current.memoizedProps, newProps = finishedWork.memoizedProps; - updateProperties( - domElement, - flags, - finishedWork.type, - current.memoizedProps, - newProps - ); + diffInCommitPhase + ? updateProperties(domElement, type, oldProps, newProps) + : updatePropertiesWithDiff( + domElement, + flags, + type, + oldProps, + newProps + ); domElement[internalPropsKey] = newProps; - } catch (error$175) { + } catch (error$224) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$175 + error$224 ); } break; @@ -8874,8 +9340,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$176) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$176); + } catch (error$225) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$225); } } if ( @@ -8887,13 +9353,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (hoistableRoot = finishedWork.type), (maybeNodes = finishedWork.updateQueue), (finishedWork.updateQueue = null), - null !== maybeNodes)) + null !== maybeNodes || diffInCommitPhase)) ) try { - updateProperties(flags, maybeNodes, hoistableRoot, current, root), + diffInCommitPhase + ? updateProperties(flags, hoistableRoot, current, root) + : updatePropertiesWithDiff( + flags, + maybeNodes, + hoistableRoot, + current, + root + ), (flags[internalPropsKey] = root); - } catch (error$179) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$179); + } catch (error$228) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$228); } break; case 6: @@ -8906,8 +9380,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$180) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$180); + } catch (error$229) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$229); } } break; @@ -8921,8 +9395,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$181) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$181); + } catch (error$230) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$230); } break; case 4: @@ -8952,8 +9426,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$183) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$183); + } catch (error$232) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$232); } current = finishedWork.updateQueue; null !== current && @@ -8966,15 +9440,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== current && safelyDetachRef(current, current.return); domElement = null !== finishedWork.memoizedState; - newProps = null !== current && null !== current.memoizedState; + type = null !== current && null !== current.memoizedState; finishedWork.mode & 1 - ? ((suspenseCallback = offscreenSubtreeIsHidden), - (retryQueue = offscreenSubtreeWasHidden), - (offscreenSubtreeIsHidden = suspenseCallback || domElement), - (offscreenSubtreeWasHidden = retryQueue || newProps), + ? ((oldProps = offscreenSubtreeIsHidden), + (newProps = offscreenSubtreeWasHidden), + (offscreenSubtreeIsHidden = oldProps || domElement), + (offscreenSubtreeWasHidden = newProps || type), recursivelyTraverseMutationEffects(root, finishedWork), - (offscreenSubtreeWasHidden = retryQueue), - (offscreenSubtreeIsHidden = suspenseCallback)) + (offscreenSubtreeWasHidden = newProps), + (offscreenSubtreeIsHidden = oldProps)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); root = finishedWork.stateNode; @@ -8989,7 +9463,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) { domElement && ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden), null === current || - newProps || + type || root || (0 !== (finishedWork.mode & 1) && recursivelyTraverseDisappearLayoutEffects(finishedWork))), @@ -9031,11 +9505,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$164) { + } catch (error$213) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$164 + error$213 ); } } else if ( @@ -9110,21 +9584,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$165 = JSCompiler_inline_result.stateNode; + var parent$214 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$165, ""), + (setTextContent(parent$214, ""), (JSCompiler_inline_result.flags &= -33)); - var before$166 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$166, parent$165); + var before$215 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$215, parent$214); break; case 3: case 4: - var parent$167 = JSCompiler_inline_result.stateNode.containerInfo, - before$168 = getHostSibling(finishedWork); + var parent$216 = JSCompiler_inline_result.stateNode.containerInfo, + before$217 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$168, - parent$167 + before$217, + parent$216 ); break; default: @@ -9594,9 +10068,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$193 = finishedWork.stateNode; + var instance$242 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$193._visibility & 4 + ? instance$242._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9609,7 +10083,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$193._visibility |= 4), + : ((instance$242._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9617,7 +10091,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$193._visibility |= 4), + : ((instance$242._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9630,7 +10104,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$193 + instance$242 ); break; case 24: @@ -10171,13 +10645,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { isFlushingWork = !0; do { var didPerformSomeWork = !1; - for (var root$202 = firstScheduledRoot; null !== root$202; ) { + for (var root$251 = firstScheduledRoot; null !== root$251; ) { if ( - (!onlyLegacy || 0 === root$202.tag) && + (!onlyLegacy || 0 === root$251.tag) && 0 !== (getNextLanes( - root$202, - root$202 === workInProgressRoot$jscomp$0 + root$251, + root$251 === workInProgressRoot$jscomp$0 ? workInProgressRootRenderLanes$jscomp$0 : 0 ) & @@ -10185,7 +10659,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { ) try { didPerformSomeWork = !0; - var root = root$202; + var root = root$251; if (0 !== (executionContext & 6)) throw Error(formatProdErrorMessage(327)); flushPassiveEffects(); @@ -10228,7 +10702,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { } catch (error) { null === errors ? (errors = [error]) : errors.push(error); } - root$202 = root$202.next; + root$251 = root$251.next; } } while (didPerformSomeWork); isFlushingWork = !1; @@ -10554,16 +11028,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) { exitStatus = renderRootSync(root, lanes); if (2 === exitStatus) { errorRetryLanes = lanes; - var errorRetryLanes$205 = getLanesToRetrySynchronouslyOnError( + var errorRetryLanes$254 = getLanesToRetrySynchronouslyOnError( root, errorRetryLanes ); - 0 !== errorRetryLanes$205 && - ((lanes = errorRetryLanes$205), + 0 !== errorRetryLanes$254 && + ((lanes = errorRetryLanes$254), (exitStatus = recoverFromConcurrentError( root, errorRetryLanes, - errorRetryLanes$205 + errorRetryLanes$254 ))); } if (1 === exitStatus) @@ -10624,14 +11098,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) { if ((lanes & 8388480) === lanes) break; exitStatus = lanes; errorRetryLanes = root.eventTimes; - for (errorRetryLanes$205 = -1; 0 < exitStatus; ) { + for (errorRetryLanes$254 = -1; 0 < exitStatus; ) { var index$2 = 31 - clz32(exitStatus), lane = 1 << index$2; index$2 = errorRetryLanes[index$2]; - index$2 > errorRetryLanes$205 && (errorRetryLanes$205 = index$2); + index$2 > errorRetryLanes$254 && (errorRetryLanes$254 = index$2); exitStatus &= ~lane; } - exitStatus = errorRetryLanes$205; + exitStatus = errorRetryLanes$254; exitStatus = now() - exitStatus; exitStatus = (120 > exitStatus @@ -10963,8 +11437,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$208) { - handleThrow(root, thrownValue$208); + } catch (thrownValue$257) { + handleThrow(root, thrownValue$257); } while (1); resetContextDependencies(); @@ -11070,8 +11544,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$210) { - handleThrow(root, thrownValue$210); + } catch (thrownValue$259) { + handleThrow(root, thrownValue$259); } while (1); resetContextDependencies(); @@ -11238,10 +11712,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) { }; suspenseBoundary.updateQueue = newOffscreenQueue; } else { - var retryQueue$85 = offscreenQueue.retryQueue; - null === retryQueue$85 + var retryQueue$134 = offscreenQueue.retryQueue; + null === retryQueue$134 ? (offscreenQueue.retryQueue = new Set([wakeable])) - : retryQueue$85.add(wakeable); + : retryQueue$134.add(wakeable); } } break; @@ -11438,12 +11912,12 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$214 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$263 = commitBeforeMutationEffects( root, finishedWork ); commitMutationEffectsOnFiber(finishedWork, root); - shouldFireAfterActiveInstanceBlur$214 && + shouldFireAfterActiveInstanceBlur$263 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -11522,7 +11996,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$215 = rootWithPendingPassiveEffects, + var root$264 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -11538,7 +12012,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$215, remainingLanes); + releaseRootPooledCache(root$264, remainingLanes); } } return !1; @@ -12841,12 +13315,12 @@ function getPublicRootInstance(container) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$217 = fiber.stateNode; - if (root$217.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$217.pendingLanes); + var root$266 = fiber.stateNode; + if (root$266.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$266.pendingLanes); 0 !== lanes && - (markRootEntangled(root$217, lanes | 2), - ensureRootIsScheduled(root$217), + (markRootEntangled(root$266, lanes | 2), + ensureRootIsScheduled(root$266), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -13418,19 +13892,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$335; + var JSCompiler_inline_result$jscomp$384; if (canUseDOM) { - var isSupported$jscomp$inline_1624 = "oninput" in document; - if (!isSupported$jscomp$inline_1624) { - var element$jscomp$inline_1625 = document.createElement("div"); - element$jscomp$inline_1625.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1624 = - "function" === typeof element$jscomp$inline_1625.oninput; + var isSupported$jscomp$inline_1658 = "oninput" in document; + if (!isSupported$jscomp$inline_1658) { + var element$jscomp$inline_1659 = document.createElement("div"); + element$jscomp$inline_1659.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1658 = + "function" === typeof element$jscomp$inline_1659.oninput; } - JSCompiler_inline_result$jscomp$335 = isSupported$jscomp$inline_1624; - } else JSCompiler_inline_result$jscomp$335 = !1; + JSCompiler_inline_result$jscomp$384 = isSupported$jscomp$inline_1658; + } else JSCompiler_inline_result$jscomp$384 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$335 && + JSCompiler_inline_result$jscomp$384 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13739,20 +14213,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1665 = 0; - i$jscomp$inline_1665 < simpleEventPluginEvents.length; - i$jscomp$inline_1665++ + var i$jscomp$inline_1699 = 0; + i$jscomp$inline_1699 < simpleEventPluginEvents.length; + i$jscomp$inline_1699++ ) { - var eventName$jscomp$inline_1666 = - simpleEventPluginEvents[i$jscomp$inline_1665], - domEventName$jscomp$inline_1667 = - eventName$jscomp$inline_1666.toLowerCase(), - capitalizedEvent$jscomp$inline_1668 = - eventName$jscomp$inline_1666[0].toUpperCase() + - eventName$jscomp$inline_1666.slice(1); + var eventName$jscomp$inline_1700 = + simpleEventPluginEvents[i$jscomp$inline_1699], + domEventName$jscomp$inline_1701 = + eventName$jscomp$inline_1700.toLowerCase(), + capitalizedEvent$jscomp$inline_1702 = + eventName$jscomp$inline_1700[0].toUpperCase() + + eventName$jscomp$inline_1700.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1667, - "on" + capitalizedEvent$jscomp$inline_1668 + domEventName$jscomp$inline_1701, + "on" + capitalizedEvent$jscomp$inline_1702 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -14654,11 +15128,11 @@ function legacyCreateRootFromDOMContainer( if ("function" === typeof callback) { var originalCallback = callback; callback = function () { - var instance = getPublicRootInstance(root$227); + var instance = getPublicRootInstance(root$276); originalCallback.call(instance); }; } - var root$227 = createHydrationContainer( + var root$276 = createHydrationContainer( initialChildren, callback, container, @@ -14670,23 +15144,23 @@ function legacyCreateRootFromDOMContainer( noopOnRecoverableError, null ); - container._reactRootContainer = root$227; - container[internalContainerInstanceKey] = root$227.current; + container._reactRootContainer = root$276; + container[internalContainerInstanceKey] = root$276.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(); - return root$227; + return root$276; } clearContainer(container); if ("function" === typeof callback) { - var originalCallback$228 = callback; + var originalCallback$277 = callback; callback = function () { - var instance = getPublicRootInstance(root$229); - originalCallback$228.call(instance); + var instance = getPublicRootInstance(root$278); + originalCallback$277.call(instance); }; } - var root$229 = createFiberRoot( + var root$278 = createFiberRoot( container, 0, !1, @@ -14698,15 +15172,15 @@ function legacyCreateRootFromDOMContainer( noopOnRecoverableError, null ); - container._reactRootContainer = root$229; - container[internalContainerInstanceKey] = root$229.current; + container._reactRootContainer = root$278; + container[internalContainerInstanceKey] = root$278.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(function () { - updateContainer(initialChildren, root$229, parentComponent, callback); + updateContainer(initialChildren, root$278, parentComponent, callback); }); - return root$229; + return root$278; } function legacyRenderSubtreeIntoContainer( parentComponent, @@ -14765,17 +15239,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1779 = { +var devToolsConfig$jscomp$inline_1813 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-c6b3e31c", + version: "18.3.0-www-classic-daf8f3c7", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2221 = { - bundleType: devToolsConfig$jscomp$inline_1779.bundleType, - version: devToolsConfig$jscomp$inline_1779.version, - rendererPackageName: devToolsConfig$jscomp$inline_1779.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1779.rendererConfig, +var internals$jscomp$inline_2261 = { + bundleType: devToolsConfig$jscomp$inline_1813.bundleType, + version: devToolsConfig$jscomp$inline_1813.version, + rendererPackageName: devToolsConfig$jscomp$inline_1813.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1813.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -14791,26 +15265,26 @@ var internals$jscomp$inline_2221 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1779.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1813.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-c6b3e31c" + reconcilerVersion: "18.3.0-www-classic-daf8f3c7" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2222 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2262 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2222.isDisabled && - hook$jscomp$inline_2222.supportsFiber + !hook$jscomp$inline_2262.isDisabled && + hook$jscomp$inline_2262.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2222.inject( - internals$jscomp$inline_2221 + (rendererID = hook$jscomp$inline_2262.inject( + internals$jscomp$inline_2261 )), - (injectedHook = hook$jscomp$inline_2222); + (injectedHook = hook$jscomp$inline_2262); } catch (err) {} } var tagToRoleMappings = { @@ -15284,14 +15758,14 @@ function preinit(href, options) { switch (as) { case "style": as = getResourcesFromRoot(resourceRoot).hoistableStyles; - var key$232 = getStyleKey(href), + var key$281 = getStyleKey(href), precedence = options.precedence || "default", - resource = as.get(key$232); + resource = as.get(key$281); if (resource) break; var state = { loading: 0, preload: null }; if ( (resource = resourceRoot.querySelector( - getStylesheetSelectorFromKey(key$232) + getStylesheetSelectorFromKey(key$281) )) ) state.loading = 1; @@ -15302,7 +15776,7 @@ function preinit(href, options) { "data-precedence": precedence, crossOrigin: options.crossOrigin }; - (options = preloadPropsMap.get(key$232)) && + (options = preloadPropsMap.get(key$281)) && adoptPreloadPropsForStylesheet(href, options); var link = (resource = ( resourceRoot.ownerDocument || resourceRoot @@ -15328,15 +15802,15 @@ function preinit(href, options) { count: 1, state: state }; - as.set(key$232, resource); + as.set(key$281, resource); break; case "script": (as = getResourcesFromRoot(resourceRoot).hoistableScripts), - (key$232 = getScriptKey(href)), - (precedence = as.get(key$232)), + (key$281 = getScriptKey(href)), + (precedence = as.get(key$281)), precedence || ((precedence = resourceRoot.querySelector( - "script[async]" + key$232 + "script[async]" + key$281 )), precedence || ((href = { @@ -15345,7 +15819,7 @@ function preinit(href, options) { crossOrigin: options.crossOrigin, integrity: options.integrity }), - (options = preloadPropsMap.get(key$232)) && + (options = preloadPropsMap.get(key$281)) && adoptPreloadPropsForScript(href, options), (options = resourceRoot.ownerDocument || resourceRoot), (precedence = options.createElement("script")), @@ -15358,13 +15832,13 @@ function preinit(href, options) { count: 1, state: null }), - as.set(key$232, precedence)); + as.set(key$281, precedence)); } else if ("style" === as || "script" === as) if ((resourceRoot = getDocumentForPreloads())) { - key$232 = escapeSelectorAttributeValueInsideDoubleQuotes(href); - precedence = key$232 = - 'link[rel="preload"][as="' + as + '"][href="' + key$232 + '"]'; + key$281 = escapeSelectorAttributeValueInsideDoubleQuotes(href); + precedence = key$281 = + 'link[rel="preload"][as="' + as + '"][href="' + key$281 + '"]'; switch (as) { case "style": precedence = getStyleKey(href); @@ -15381,7 +15855,7 @@ function preinit(href, options) { integrity: options.integrity }), preloadPropsMap.set(precedence, href), - null === resourceRoot.querySelector(key$232) && + null === resourceRoot.querySelector(key$281) && ((options = resourceRoot.createElement("link")), setInitialProperties(options, "link", href), markNodeAsHoistable(options), @@ -15414,17 +15888,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$241 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$242 = styles$241.get(type); - resource$242 || + var styles$290 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$291 = styles$290.get(type); + resource$291 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$242 = { + (resource$291 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$241.set(type, resource$242), + styles$290.set(type, resource$291), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -15439,9 +15913,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$242.state + resource$291.state )); - return resource$242; + return resource$291; } return null; case "script": @@ -15513,36 +15987,36 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = key); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$247 = hoistableRoot.querySelector( + var instance$296 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$247) + if (instance$296) return ( - (resource.instance = instance$247), - markNodeAsHoistable(instance$247), - instance$247 + (resource.instance = instance$296), + markNodeAsHoistable(instance$296), + instance$296 ); key = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(key, styleProps); - instance$247 = ( + instance$296 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$247); - var linkInstance = instance$247; + markNodeAsHoistable(instance$296); + var linkInstance = instance$296; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$247, "link", key); + setInitialProperties(instance$296, "link", key); resource.state.loading |= 4; - insertStylesheet(instance$247, props.precedence, hoistableRoot); - return (resource.instance = instance$247); + insertStylesheet(instance$296, props.precedence, hoistableRoot); + return (resource.instance = instance$296); case "script": - instance$247 = getScriptKey(props.src); + instance$296 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - "script[async]" + instance$247 + "script[async]" + instance$296 )) ) return ( @@ -15551,7 +16025,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); key = props; - if ((styleProps = preloadPropsMap.get(instance$247))) + if ((styleProps = preloadPropsMap.get(instance$296))) (key = assign({}, props)), adoptPreloadPropsForScript(key, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -16800,4 +17274,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-c6b3e31c"; +exports.version = "18.3.0-www-classic-daf8f3c7"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index 9afe7ca1f0581..8957dedbdded5 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -112,6 +112,7 @@ var dynamicFeatureFlags = require("ReactFeatureFlags"), dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, + diffInCommitPhase = dynamicFeatureFlags.diffInCommitPhase, scheduleCallback$3 = Scheduler.unstable_scheduleCallback, cancelCallback$1 = Scheduler.unstable_cancelCallback, shouldYield = Scheduler.unstable_shouldYield, @@ -963,78 +964,85 @@ function getActiveElement(doc) { return doc.body; } } -function updateInput(element, props) { - var value = getToStringValue(props.value), - type = props.type; - disableInputAttributeSyncing - ? null != props.defaultValue - ? setDefaultValue( - element, - props.type, - getToStringValue(props.defaultValue) - ) - : element.removeAttribute("value") - : null != props.value - ? setDefaultValue(element, props.type, value) - : null != props.defaultValue - ? setDefaultValue(element, props.type, getToStringValue(props.defaultValue)) - : element.removeAttribute("value"); - disableInputAttributeSyncing - ? null == props.defaultChecked - ? element.removeAttribute("checked") - : (element.defaultChecked = !!props.defaultChecked) - : null == props.checked && - null != props.defaultChecked && - (element.defaultChecked = !!props.defaultChecked); - props = props.checked; - null != props && (element.checked = props); +function updateInput( + element, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type +) { if (null != value) if ("number" === type) { if ((0 === value && "" === element.value) || element.value != value) - element.value = "" + value; - } else element.value !== "" + value && (element.value = "" + value); - else - ("submit" !== type && "reset" !== type) || element.removeAttribute("value"); -} -function initInput(element, props, isHydrating) { - if (null != props.value || null != props.defaultValue) { - var type = props.type; + element.value = "" + getToStringValue(value); + } else + element.value !== "" + getToStringValue(value) && + (element.value = "" + getToStringValue(value)); + else if ("submit" === type || "reset" === type) { + element.removeAttribute("value"); + return; + } + disableInputAttributeSyncing + ? null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value") + : null != value + ? setDefaultValue(element, type, getToStringValue(value)) + : null != defaultValue + ? setDefaultValue(element, type, getToStringValue(defaultValue)) + : null != lastDefaultValue && element.removeAttribute("value"); + disableInputAttributeSyncing + ? null == defaultChecked + ? element.removeAttribute("checked") + : (element.defaultChecked = !!defaultChecked) + : null == checked && + null != defaultChecked && + (element.defaultChecked = !!defaultChecked); + null != checked && + element.checked !== !!checked && + (element.checked = checked); +} +function initInput( + element, + value, + defaultValue, + checked, + defaultChecked, + type, + isHydrating +) { + if (null != value || null != defaultValue) { if ( (type = "submit" === type || "reset" === type) && - (void 0 === props.value || null === props.value) + (void 0 === value || null === value) ) return; - var defaultValue = - null != props.defaultValue - ? "" + getToStringValue(props.defaultValue) - : "", + var defaultValueStr = + null != defaultValue ? "" + getToStringValue(defaultValue) : "", initialValue = - null != props.value ? "" + getToStringValue(props.value) : defaultValue; - if (!isHydrating) - if (disableInputAttributeSyncing) { - var value = getToStringValue(props.value); - null == value || - (!type && value === element.value) || - (element.value = "" + value); - } else initialValue !== element.value && (element.value = initialValue); + null != value ? "" + getToStringValue(value) : defaultValueStr; + isHydrating || + (disableInputAttributeSyncing + ? null == value || + (!type && "" + getToStringValue(value) === element.value) || + (element.value = "" + getToStringValue(value)) + : initialValue !== element.value && (element.value = initialValue)); disableInputAttributeSyncing - ? null != props.defaultValue && (element.defaultValue = defaultValue) + ? null != defaultValue && (element.defaultValue = defaultValueStr) : (element.defaultValue = initialValue); } - type = element.name; - "" !== type && (element.name = ""); - defaultValue = null != props.checked ? props.checked : props.defaultChecked; - defaultValue = - "function" !== typeof defaultValue && - "symbol" !== typeof defaultValue && - !!defaultValue; - isHydrating || (element.checked = !!defaultValue); + value = element.name; + "" !== value && (element.name = ""); + checked = null != checked ? checked : defaultChecked; + checked = + "function" !== typeof checked && "symbol" !== typeof checked && !!checked; + isHydrating || (element.checked = !!checked); disableInputAttributeSyncing - ? null != props.defaultChecked && - ((element.defaultChecked = !element.defaultChecked), - (element.defaultChecked = !!props.defaultChecked)) - : (element.defaultChecked = !!defaultValue); - "" !== type && (element.name = type); + ? null != defaultChecked && (element.defaultChecked = !!defaultChecked) + : (element.defaultChecked = !!checked); + "" !== value && (element.name = value); } function setDefaultValue(node, type, value) { ("number" === type && getActiveElement(node.ownerDocument) === node) || @@ -1066,30 +1074,37 @@ function updateOptions(node, multiple, propValue, setDefaultSelected) { null !== multiple && (multiple.selected = !0); } } -function updateTextarea(element, props) { - var value = getToStringValue(props.value), - defaultValue = getToStringValue(props.defaultValue); - element.defaultValue = null != defaultValue ? "" + defaultValue : ""; - null != value && - ((value = "" + value), +function updateSelect(element, value, defaultValue, multiple, wasMultiple) { + null != value + ? updateOptions(element, !!multiple, value, !1) + : !!wasMultiple !== !!multiple && + (null != defaultValue + ? updateOptions(element, !!multiple, defaultValue, !0) + : updateOptions(element, !!multiple, multiple ? [] : "", !1)); +} +function updateTextarea(element, value, defaultValue) { + if ( + null != value && + ((value = "" + getToStringValue(value)), value !== element.value && (element.value = value), - null == props.defaultValue && - element.defaultValue !== value && - (element.defaultValue = value)); -} -function initTextarea(element, props) { - var initialValue = props.value; - null == initialValue && - ((props = props.defaultValue), - null == props && (props = ""), - (initialValue = props)); - props = getToStringValue(initialValue); - element.defaultValue = props; - initialValue = element.textContent; - initialValue === props && - "" !== initialValue && - null !== initialValue && - (element.value = initialValue); + null == defaultValue) + ) { + element.defaultValue !== value && (element.defaultValue = value); + return; + } + element.defaultValue = + null != defaultValue ? "" + getToStringValue(defaultValue) : ""; +} +function initTextarea(element, value, defaultValue) { + null == value && + (null == defaultValue && (defaultValue = ""), (value = defaultValue)); + defaultValue = getToStringValue(value); + element.defaultValue = defaultValue; + value = element.textContent; + value === defaultValue && + "" !== value && + null !== value && + (element.value = value); } function getChildNamespace(parentNamespace, type) { if ( @@ -1155,30 +1170,44 @@ var unitlessNumbers = new Set( " " ) ); -function setValueForStyles(node, styles) { +function setValueForStyle(style, styleName, value) { + var isCustomProperty = 0 === styleName.indexOf("--"); + null == value || "boolean" === typeof value || "" === value + ? isCustomProperty + ? style.setProperty(styleName, "") + : "float" === styleName + ? (style.cssFloat = "") + : (style[styleName] = "") + : isCustomProperty + ? style.setProperty(styleName, value) + : "number" !== typeof value || 0 === value || unitlessNumbers.has(styleName) + ? "float" === styleName + ? (style.cssFloat = value) + : (style[styleName] = ("" + value).trim()) + : (style[styleName] = value + "px"); +} +function setValueForStyles(node, styles, prevStyles) { if (null != styles && "object" !== typeof styles) throw Error(formatProdErrorMessage(62)); node = node.style; - for (var styleName in styles) - if (styles.hasOwnProperty(styleName)) { - var value = styles[styleName], - isCustomProperty = 0 === styleName.indexOf("--"); - null == value || "boolean" === typeof value || "" === value - ? isCustomProperty + if (diffInCommitPhase && null != prevStyles) { + for (var styleName in prevStyles) + !prevStyles.hasOwnProperty(styleName) || + (null != styles && styles.hasOwnProperty(styleName)) || + (0 === styleName.indexOf("--") ? node.setProperty(styleName, "") : "float" === styleName ? (node.cssFloat = "") - : (node[styleName] = "") - : isCustomProperty - ? node.setProperty(styleName, value) - : "number" !== typeof value || - 0 === value || - unitlessNumbers.has(styleName) - ? "float" === styleName - ? (node.cssFloat = value) - : (node[styleName] = ("" + value).trim()) - : (node[styleName] = value + "px"); - } + : (node[styleName] = "")); + for (var styleName$15 in styles) + (styleName = styles[styleName$15]), + styles.hasOwnProperty(styleName$15) && + prevStyles[styleName$15] !== styleName && + setValueForStyle(node, styleName$15, styleName); + } else + for (var styleName$16 in styles) + styles.hasOwnProperty(styleName$16) && + setValueForStyle(node, styleName$16, styles[styleName$16]); } function isCustomElement(tagName) { if (-1 === tagName.indexOf("-")) return !1; @@ -1298,7 +1327,15 @@ function restoreStateOfTarget(target) { var props = getFiberCurrentPropsFromNode(target); a: switch (((target = internalInstance.stateNode), internalInstance.type)) { case "input": - updateInput(target, props); + updateInput( + target, + props.value, + props.defaultValue, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type + ); internalInstance = props.name; if ("radio" === props.type && null != internalInstance) { for (props = target; props.parentNode; ) props = props.parentNode; @@ -1317,13 +1354,21 @@ function restoreStateOfTarget(target) { var otherProps = getFiberCurrentPropsFromNode(otherNode); if (!otherProps) throw Error(formatProdErrorMessage(90)); updateValueIfChanged(otherNode); - updateInput(otherNode, otherProps); + updateInput( + otherNode, + otherProps.value, + otherProps.defaultValue, + otherProps.defaultValue, + otherProps.checked, + otherProps.defaultChecked, + otherProps.type + ); } } } break a; case "textarea": - updateTextarea(target, props); + updateTextarea(target, props.value, props.defaultValue); break a; case "select": (internalInstance = props.value), @@ -1407,36 +1452,36 @@ function findCurrentFiberUsingSlowPath(fiber) { } if (a.return !== b.return) (a = parentA), (b = parentB); else { - for (var didFindChild = !1, child$15 = parentA.child; child$15; ) { - if (child$15 === a) { + for (var didFindChild = !1, child$18 = parentA.child; child$18; ) { + if (child$18 === a) { didFindChild = !0; a = parentA; b = parentB; break; } - if (child$15 === b) { + if (child$18 === b) { didFindChild = !0; b = parentA; a = parentB; break; } - child$15 = child$15.sibling; + child$18 = child$18.sibling; } if (!didFindChild) { - for (child$15 = parentB.child; child$15; ) { - if (child$15 === a) { + for (child$18 = parentB.child; child$18; ) { + if (child$18 === a) { didFindChild = !0; a = parentB; b = parentA; break; } - if (child$15 === b) { + if (child$18 === b) { didFindChild = !0; b = parentB; a = parentA; break; } - child$15 = child$15.sibling; + child$18 = child$18.sibling; } if (!didFindChild) throw Error(formatProdErrorMessage(189)); } @@ -1663,8 +1708,8 @@ function prepareToHydrateHostInstance(fiber) { break; case "video": case "audio": - for (type = 0; type < mediaEventTypes.length; type++) - listenToNonDelegatedEvent(mediaEventTypes[type], instance); + for (var i = 0; i < mediaEventTypes.length; i++) + listenToNonDelegatedEvent(mediaEventTypes[i], instance); break; case "source": listenToNonDelegatedEvent("error", instance); @@ -1681,7 +1726,15 @@ function prepareToHydrateHostInstance(fiber) { case "input": listenToNonDelegatedEvent("invalid", instance); track(instance); - initInput(instance, props, !0); + initInput( + instance, + props.value, + props.defaultValue, + props.checked, + props.defaultChecked, + props.type, + !0 + ); break; case "select": listenToNonDelegatedEvent("invalid", instance); @@ -1689,22 +1742,30 @@ function prepareToHydrateHostInstance(fiber) { case "textarea": listenToNonDelegatedEvent("invalid", instance), track(instance), - initTextarea(instance, props); - } - var updatePayload = null; - type = props.children; - ("string" !== typeof type && "number" !== typeof type) || - instance.textContent === "" + type || - (!0 !== props.suppressHydrationWarning && - ((updatePayload = instance.textContent), - normalizeMarkupForTextOrAttribute(type), - normalizeMarkupForTextOrAttribute(updatePayload)), - (updatePayload = ["children", type])); + initTextarea(instance, props.value, props.defaultValue); + } + i = null; + var children = props.children; + if ( + ("string" === typeof children || "number" === typeof children) && + instance.textContent !== "" + children + ) { + if (!0 !== props.suppressHydrationWarning) { + var serverText = instance.textContent; + normalizeMarkupForTextOrAttribute(children); + normalizeMarkupForTextOrAttribute(serverText); + } + diffInCommitPhase + ? "body" !== type && (instance.textContent = children) + : (i = ["children", children]); + } null != props.onScroll && listenToNonDelegatedEvent("scroll", instance); null != props.onClick && (instance.onclick = noop$1); - instance = updatePayload; - fiber.updateQueue = instance; - return null !== instance ? !0 : !1; + instance = i; + return diffInCommitPhase || + ((fiber.updateQueue = instance), null === instance) + ? !1 + : !0; } function popToNextHostParent(fiber) { for (hydrationParentFiber = fiber.return; hydrationParentFiber; ) @@ -3179,10 +3240,10 @@ createFunctionComponentUpdateQueue = function () { function use(usable) { if (null !== usable && "object" === typeof usable) { if ("function" === typeof usable.then) { - var index$41 = thenableIndexCounter; + var index$44 = thenableIndexCounter; thenableIndexCounter += 1; null === thenableState && (thenableState = []); - usable = trackUsedThenable(thenableState, usable, index$41); + usable = trackUsedThenable(thenableState, usable, index$44); null === currentlyRenderingFiber$1.alternate && (null === workInProgressHook ? null === currentlyRenderingFiber$1.memoizedState @@ -3670,16 +3731,16 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$47 = enqueueUpdate(provider, fiber, lane); - if (null !== root$47) { + var root$50 = enqueueUpdate(provider, fiber, lane); + if (null !== root$50) { var eventTime = requestEventTime(); - scheduleUpdateOnFiber(root$47, provider, lane, eventTime); - entangleTransitions(root$47, provider, lane); + scheduleUpdateOnFiber(root$50, provider, lane, eventTime); + entangleTransitions(root$50, provider, lane); } provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$47 && + null !== root$50 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -3886,15 +3947,15 @@ var HooksDispatcherOnMount = { getServerSnapshot = getServerSnapshot(); } else { getServerSnapshot = getSnapshot(); - var root$43 = workInProgressRoot; - if (null === root$43) throw Error(formatProdErrorMessage(349)); - includesBlockingLane(root$43, renderLanes$1) || + var root$46 = workInProgressRoot; + if (null === root$46) throw Error(formatProdErrorMessage(349)); + includesBlockingLane(root$46, renderLanes$1) || pushStoreConsistencyCheck(fiber, getSnapshot, getServerSnapshot); } hook.memoizedState = getServerSnapshot; - root$43 = { value: getServerSnapshot, getSnapshot: getSnapshot }; - hook.queue = root$43; - mountEffect(subscribeToStore.bind(null, fiber, root$43, subscribe), [ + root$46 = { value: getServerSnapshot, getSnapshot: getSnapshot }; + hook.queue = root$46; + mountEffect(subscribeToStore.bind(null, fiber, root$46, subscribe), [ subscribe ]); fiber.flags |= 2048; @@ -3903,7 +3964,7 @@ var HooksDispatcherOnMount = { updateStoreInstance.bind( null, fiber, - root$43, + root$46, getServerSnapshot, getSnapshot ), @@ -4387,10 +4448,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$58 = workInProgress.stateNode; + root$61 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$58.incompleteTransitions.has(transition)) { + if (!root$61.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -4398,11 +4459,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$58.incompleteTransitions.set(transition, markerInstance); + root$61.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$58.incompleteTransitions.forEach(function (markerInstance) { + root$61.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5067,14 +5128,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { } JSCompiler_temp = current.memoizedState; if (null !== JSCompiler_temp) { - var dehydrated$65 = JSCompiler_temp.dehydrated; - if (null !== dehydrated$65) + var dehydrated$68 = JSCompiler_temp.dehydrated; + if (null !== dehydrated$68) return updateDehydratedSuspenseComponent( current, workInProgress, didSuspend, nextProps, - dehydrated$65, + dehydrated$68, JSCompiler_temp, renderLanes ); @@ -5084,7 +5145,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { showFallback = nextProps.fallback; didSuspend = workInProgress.mode; JSCompiler_temp = current.child; - dehydrated$65 = JSCompiler_temp.sibling; + dehydrated$68 = JSCompiler_temp.sibling; var primaryChildProps = { mode: "hidden", children: nextProps.children }; 0 === (didSuspend & 1) && workInProgress.child !== JSCompiler_temp ? ((nextProps = workInProgress.child), @@ -5093,8 +5154,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { (workInProgress.deletions = null)) : ((nextProps = createWorkInProgress(JSCompiler_temp, primaryChildProps)), (nextProps.subtreeFlags = JSCompiler_temp.subtreeFlags & 31457280)); - null !== dehydrated$65 - ? (showFallback = createWorkInProgress(dehydrated$65, showFallback)) + null !== dehydrated$68 + ? (showFallback = createWorkInProgress(dehydrated$68, showFallback)) : ((showFallback = createFiberFromFragment( showFallback, didSuspend, @@ -5113,10 +5174,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ? (didSuspend = mountSuspenseOffscreenState(renderLanes)) : ((JSCompiler_temp = didSuspend.cachePool), null !== JSCompiler_temp - ? ((dehydrated$65 = CacheContext._currentValue), + ? ((dehydrated$68 = CacheContext._currentValue), (JSCompiler_temp = - JSCompiler_temp.parent !== dehydrated$65 - ? { parent: dehydrated$65, pool: dehydrated$65 } + JSCompiler_temp.parent !== dehydrated$68 + ? { parent: dehydrated$68, pool: dehydrated$68 } : JSCompiler_temp)) : (JSCompiler_temp = getSuspendedCache()), (didSuspend = { @@ -5130,23 +5191,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { ((JSCompiler_temp = enableTransitionTracing ? markerInstanceStack.current : null), - (dehydrated$65 = showFallback.updateQueue), + (dehydrated$68 = showFallback.updateQueue), (primaryChildProps = current.updateQueue), - null === dehydrated$65 + null === dehydrated$68 ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null }) - : dehydrated$65 === primaryChildProps + : dehydrated$68 === primaryChildProps ? (showFallback.updateQueue = { transitions: didSuspend, markerInstances: JSCompiler_temp, retryQueue: null !== primaryChildProps ? primaryChildProps.retryQueue : null }) - : ((dehydrated$65.transitions = didSuspend), - (dehydrated$65.markerInstances = JSCompiler_temp)))); + : ((dehydrated$68.transitions = didSuspend), + (dehydrated$68.markerInstances = JSCompiler_temp)))); showFallback.childLanes = current.childLanes & ~renderLanes; workInProgress.memoizedState = SUSPENDED_MARKER; return nextProps; @@ -6105,62 +6166,67 @@ function markRef(workInProgress) { } function updateHostComponent(current, workInProgress, type, newProps) { current = current.memoizedProps; - if (current !== newProps) { - type = null; - var propKey, - styleName, - styleUpdates = null; - for (propKey in current) - if ( - !newProps.hasOwnProperty(propKey) && - current.hasOwnProperty(propKey) && - null != current[propKey] - ) - switch (propKey) { - case "style": - var lastStyle = current[propKey]; - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - break; - default: - (type = type || []).push(propKey, null); - } - for (propKey in newProps) { - lastStyle = newProps[propKey]; - var lastProp = null != current ? current[propKey] : void 0; - if ( - newProps.hasOwnProperty(propKey) && - lastStyle !== lastProp && - (null != lastStyle || null != lastProp) - ) - switch (propKey) { - case "style": - if (lastProp) { - for (styleName in lastProp) - !lastProp.hasOwnProperty(styleName) || - (lastStyle && lastStyle.hasOwnProperty(styleName)) || - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = "")); - for (styleName in lastStyle) - lastStyle.hasOwnProperty(styleName) && - lastProp[styleName] !== lastStyle[styleName] && - (styleUpdates || (styleUpdates = {}), - (styleUpdates[styleName] = lastStyle[styleName])); - } else - styleUpdates || - (type || (type = []), type.push(propKey, styleUpdates)), - (styleUpdates = lastStyle); - break; - default: - (type = type || []).push(propKey, lastStyle); + if (current !== newProps) + if (diffInCommitPhase) markUpdate(workInProgress); + else { + if (diffInCommitPhase) newProps = null; + else { + type = null; + var propKey, + styleName, + styleUpdates = null; + for (propKey in current) + if ( + !newProps.hasOwnProperty(propKey) && + current.hasOwnProperty(propKey) && + null != current[propKey] + ) + switch (propKey) { + case "style": + var lastStyle = current[propKey]; + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + break; + default: + (type = type || []).push(propKey, null); + } + for (propKey in newProps) { + lastStyle = newProps[propKey]; + var lastProp = null != current ? current[propKey] : void 0; + if ( + newProps.hasOwnProperty(propKey) && + lastStyle !== lastProp && + (null != lastStyle || null != lastProp) + ) + switch (propKey) { + case "style": + if (lastProp) { + for (styleName in lastProp) + !lastProp.hasOwnProperty(styleName) || + (lastStyle && lastStyle.hasOwnProperty(styleName)) || + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = "")); + for (styleName in lastStyle) + lastStyle.hasOwnProperty(styleName) && + lastProp[styleName] !== lastStyle[styleName] && + (styleUpdates || (styleUpdates = {}), + (styleUpdates[styleName] = lastStyle[styleName])); + } else + styleUpdates || + (type || (type = []), type.push(propKey, styleUpdates)), + (styleUpdates = lastStyle); + break; + default: + (type = type || []).push(propKey, lastStyle); + } } + styleUpdates && (type = type || []).push("style", styleUpdates); + newProps = type; + } + (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); } - styleUpdates && (type = type || []).push("style", styleUpdates); - newProps = type; - (workInProgress.updateQueue = newProps) && markUpdate(workInProgress); - } } function preloadResourceAndSuspendIfNeeded(workInProgress, resource) { if ("stylesheet" !== resource.type || 0 !== (resource.state.loading & 4)) @@ -6204,14 +6270,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$96 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$96 = lastTailNode), + for (var lastTailNode$99 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$99 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$96 + null === lastTailNode$99 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$96.sibling = null); + : (lastTailNode$99.sibling = null); } } function bubbleProperties(completedWork) { @@ -6221,19 +6287,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$97 = completedWork.child; null !== child$97; ) - (newChildLanes |= child$97.lanes | child$97.childLanes), - (subtreeFlags |= child$97.subtreeFlags & 31457280), - (subtreeFlags |= child$97.flags & 31457280), - (child$97.return = completedWork), - (child$97 = child$97.sibling); + for (var child$100 = completedWork.child; null !== child$100; ) + (newChildLanes |= child$100.lanes | child$100.childLanes), + (subtreeFlags |= child$100.subtreeFlags & 31457280), + (subtreeFlags |= child$100.flags & 31457280), + (child$100.return = completedWork), + (child$100 = child$100.sibling); else - for (child$97 = completedWork.child; null !== child$97; ) - (newChildLanes |= child$97.lanes | child$97.childLanes), - (subtreeFlags |= child$97.subtreeFlags), - (subtreeFlags |= child$97.flags), - (child$97.return = completedWork), - (child$97 = child$97.sibling); + for (child$100 = completedWork.child; null !== child$100; ) + (newChildLanes |= child$100.lanes | child$100.childLanes), + (subtreeFlags |= child$100.subtreeFlags), + (subtreeFlags |= child$100.flags), + (child$100.return = completedWork), + (child$100 = child$100.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -6952,8 +7018,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$126) { - captureCommitPhaseError(current, nearestMountedAncestor, error$126); + } catch (error$129) { + captureCommitPhaseError(current, nearestMountedAncestor, error$129); } else ref.current = null; } @@ -6990,7 +7056,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$191) { + } catch (e$194) { JSCompiler_temp = null; break a; } @@ -7269,11 +7335,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$128) { + } catch (error$131) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$128 + error$131 ); } } @@ -7953,8 +8019,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$141) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$141); + } catch (error$144) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$144); } } break; @@ -8123,20 +8189,24 @@ function commitMutationEffectsOnFiber(finishedWork, root) { ) try { var domElement = finishedWork.stateNode, + type = finishedWork.type, + oldProps = current.memoizedProps, newProps = finishedWork.memoizedProps; - updateProperties( - domElement, - flags, - finishedWork.type, - current.memoizedProps, - newProps - ); + diffInCommitPhase + ? updateProperties(domElement, type, oldProps, newProps) + : updatePropertiesWithDiff( + domElement, + flags, + type, + oldProps, + newProps + ); domElement[internalPropsKey] = newProps; - } catch (error$142) { + } catch (error$145) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$142 + error$145 ); } break; @@ -8172,8 +8242,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$143) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$143); + } catch (error$146) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$146); } } if ( @@ -8185,13 +8255,21 @@ function commitMutationEffectsOnFiber(finishedWork, root) { (hoistableRoot = finishedWork.type), (maybeNodes = finishedWork.updateQueue), (finishedWork.updateQueue = null), - null !== maybeNodes)) + null !== maybeNodes || diffInCommitPhase)) ) try { - updateProperties(flags, maybeNodes, hoistableRoot, current, root), + diffInCommitPhase + ? updateProperties(flags, hoistableRoot, current, root) + : updatePropertiesWithDiff( + flags, + maybeNodes, + hoistableRoot, + current, + root + ), (flags[internalPropsKey] = root); - } catch (error$146) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$146); + } catch (error$149) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$149); } break; case 6: @@ -8204,8 +8282,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$147) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$147); + } catch (error$150) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$150); } } break; @@ -8219,8 +8297,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$148) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$148); + } catch (error$151) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$151); } break; case 4: @@ -8250,8 +8328,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$150) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$150); + } catch (error$153) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$153); } current = finishedWork.updateQueue; null !== current && @@ -8264,15 +8342,15 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== current && safelyDetachRef(current, current.return); domElement = null !== finishedWork.memoizedState; - newProps = null !== current && null !== current.memoizedState; + type = null !== current && null !== current.memoizedState; finishedWork.mode & 1 - ? ((suspenseCallback = offscreenSubtreeIsHidden), - (retryQueue = offscreenSubtreeWasHidden), - (offscreenSubtreeIsHidden = suspenseCallback || domElement), - (offscreenSubtreeWasHidden = retryQueue || newProps), + ? ((oldProps = offscreenSubtreeIsHidden), + (newProps = offscreenSubtreeWasHidden), + (offscreenSubtreeIsHidden = oldProps || domElement), + (offscreenSubtreeWasHidden = newProps || type), recursivelyTraverseMutationEffects(root, finishedWork), - (offscreenSubtreeWasHidden = retryQueue), - (offscreenSubtreeIsHidden = suspenseCallback)) + (offscreenSubtreeWasHidden = newProps), + (offscreenSubtreeIsHidden = oldProps)) : recursivelyTraverseMutationEffects(root, finishedWork); commitReconciliationEffects(finishedWork); root = finishedWork.stateNode; @@ -8287,7 +8365,7 @@ function commitMutationEffectsOnFiber(finishedWork, root) { domElement && ((root = offscreenSubtreeIsHidden || offscreenSubtreeWasHidden), null === current || - newProps || + type || root || (0 !== (finishedWork.mode & 1) && recursivelyTraverseDisappearLayoutEffects(finishedWork))), @@ -8329,11 +8407,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$131) { + } catch (error$134) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$131 + error$134 ); } } else if ( @@ -8408,21 +8486,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$132 = JSCompiler_inline_result.stateNode; + var parent$135 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$132, ""), + (setTextContent(parent$135, ""), (JSCompiler_inline_result.flags &= -33)); - var before$133 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$133, parent$132); + var before$136 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$136, parent$135); break; case 3: case 4: - var parent$134 = JSCompiler_inline_result.stateNode.containerInfo, - before$135 = getHostSibling(finishedWork); + var parent$137 = JSCompiler_inline_result.stateNode.containerInfo, + before$138 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$135, - parent$134 + before$138, + parent$137 ); break; default: @@ -8892,9 +8970,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$160 = finishedWork.stateNode; + var instance$163 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$160._visibility & 4 + ? instance$163._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8907,7 +8985,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$160._visibility |= 4), + : ((instance$163._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8915,7 +8993,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$160._visibility |= 4), + : ((instance$163._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -8928,7 +9006,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$160 + instance$163 ); break; case 24: @@ -9469,13 +9547,13 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { isFlushingWork = !0; do { var didPerformSomeWork = !1; - for (var root$169 = firstScheduledRoot; null !== root$169; ) { + for (var root$172 = firstScheduledRoot; null !== root$172; ) { if ( - (!onlyLegacy || 0 === root$169.tag) && + (!onlyLegacy || 0 === root$172.tag) && 0 !== (getNextLanes( - root$169, - root$169 === workInProgressRoot$jscomp$0 + root$172, + root$172 === workInProgressRoot$jscomp$0 ? workInProgressRootRenderLanes$jscomp$0 : 0 ) & @@ -9483,7 +9561,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { ) try { didPerformSomeWork = !0; - var root = root$169; + var root = root$172; if (0 !== (executionContext & 6)) throw Error(formatProdErrorMessage(327)); flushPassiveEffects(); @@ -9526,7 +9604,7 @@ function flushSyncWorkAcrossRoots_impl(onlyLegacy) { } catch (error) { null === errors ? (errors = [error]) : errors.push(error); } - root$169 = root$169.next; + root$172 = root$172.next; } } while (didPerformSomeWork); isFlushingWork = !1; @@ -9852,16 +9930,16 @@ function performConcurrentWorkOnRoot(root, didTimeout) { exitStatus = renderRootSync(root, lanes); if (2 === exitStatus) { errorRetryLanes = lanes; - var errorRetryLanes$172 = getLanesToRetrySynchronouslyOnError( + var errorRetryLanes$175 = getLanesToRetrySynchronouslyOnError( root, errorRetryLanes ); - 0 !== errorRetryLanes$172 && - ((lanes = errorRetryLanes$172), + 0 !== errorRetryLanes$175 && + ((lanes = errorRetryLanes$175), (exitStatus = recoverFromConcurrentError( root, errorRetryLanes, - errorRetryLanes$172 + errorRetryLanes$175 ))); } if (1 === exitStatus) @@ -9922,14 +10000,14 @@ function performConcurrentWorkOnRoot(root, didTimeout) { if ((lanes & 8388480) === lanes) break; exitStatus = lanes; errorRetryLanes = root.eventTimes; - for (errorRetryLanes$172 = -1; 0 < exitStatus; ) { + for (errorRetryLanes$175 = -1; 0 < exitStatus; ) { var index$1 = 31 - clz32(exitStatus), lane = 1 << index$1; index$1 = errorRetryLanes[index$1]; - index$1 > errorRetryLanes$172 && (errorRetryLanes$172 = index$1); + index$1 > errorRetryLanes$175 && (errorRetryLanes$175 = index$1); exitStatus &= ~lane; } - exitStatus = errorRetryLanes$172; + exitStatus = errorRetryLanes$175; exitStatus = now() - exitStatus; exitStatus = (120 > exitStatus @@ -10261,8 +10339,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$175) { - handleThrow(root, thrownValue$175); + } catch (thrownValue$178) { + handleThrow(root, thrownValue$178); } while (1); resetContextDependencies(); @@ -10368,8 +10446,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$177) { - handleThrow(root, thrownValue$177); + } catch (thrownValue$180) { + handleThrow(root, thrownValue$180); } while (1); resetContextDependencies(); @@ -10532,10 +10610,10 @@ function throwAndUnwindWorkLoop(unitOfWork, thrownValue) { }; suspenseBoundary.updateQueue = newOffscreenQueue; } else { - var retryQueue$53 = offscreenQueue.retryQueue; - null === retryQueue$53 + var retryQueue$56 = offscreenQueue.retryQueue; + null === retryQueue$56 ? (offscreenQueue.retryQueue = new Set([wakeable])) - : retryQueue$53.add(wakeable); + : retryQueue$56.add(wakeable); } } break; @@ -10732,12 +10810,12 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$181 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$184 = commitBeforeMutationEffects( root, finishedWork ); commitMutationEffectsOnFiber(finishedWork, root); - shouldFireAfterActiveInstanceBlur$181 && + shouldFireAfterActiveInstanceBlur$184 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -10816,7 +10894,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$182 = rootWithPendingPassiveEffects, + var root$185 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -10832,7 +10910,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$182, remainingLanes); + releaseRootPooledCache(root$185, remainingLanes); } } return !1; @@ -12021,12 +12099,12 @@ function updateContainer(element, container, parentComponent, callback) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$184 = fiber.stateNode; - if (root$184.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$184.pendingLanes); + var root$187 = fiber.stateNode; + if (root$187.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$187.pendingLanes); 0 !== lanes && - (markRootEntangled(root$184, lanes | 2), - ensureRootIsScheduled(root$184), + (markRootEntangled(root$187, lanes | 2), + ensureRootIsScheduled(root$187), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -13118,19 +13196,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$331; + var JSCompiler_inline_result$jscomp$380; if (canUseDOM) { - var isSupported$jscomp$inline_1583 = "oninput" in document; - if (!isSupported$jscomp$inline_1583) { - var element$jscomp$inline_1584 = document.createElement("div"); - element$jscomp$inline_1584.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1583 = - "function" === typeof element$jscomp$inline_1584.oninput; + var isSupported$jscomp$inline_1634 = "oninput" in document; + if (!isSupported$jscomp$inline_1634) { + var element$jscomp$inline_1635 = document.createElement("div"); + element$jscomp$inline_1635.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1634 = + "function" === typeof element$jscomp$inline_1635.oninput; } - JSCompiler_inline_result$jscomp$331 = isSupported$jscomp$inline_1583; - } else JSCompiler_inline_result$jscomp$331 = !1; + JSCompiler_inline_result$jscomp$380 = isSupported$jscomp$inline_1634; + } else JSCompiler_inline_result$jscomp$380 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$331 && + JSCompiler_inline_result$jscomp$380 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13439,20 +13517,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1624 = 0; - i$jscomp$inline_1624 < simpleEventPluginEvents.length; - i$jscomp$inline_1624++ + var i$jscomp$inline_1675 = 0; + i$jscomp$inline_1675 < simpleEventPluginEvents.length; + i$jscomp$inline_1675++ ) { - var eventName$jscomp$inline_1625 = - simpleEventPluginEvents[i$jscomp$inline_1624], - domEventName$jscomp$inline_1626 = - eventName$jscomp$inline_1625.toLowerCase(), - capitalizedEvent$jscomp$inline_1627 = - eventName$jscomp$inline_1625[0].toUpperCase() + - eventName$jscomp$inline_1625.slice(1); + var eventName$jscomp$inline_1676 = + simpleEventPluginEvents[i$jscomp$inline_1675], + domEventName$jscomp$inline_1677 = + eventName$jscomp$inline_1676.toLowerCase(), + capitalizedEvent$jscomp$inline_1678 = + eventName$jscomp$inline_1676[0].toUpperCase() + + eventName$jscomp$inline_1676.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1626, - "on" + capitalizedEvent$jscomp$inline_1627 + domEventName$jscomp$inline_1677, + "on" + capitalizedEvent$jscomp$inline_1678 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -14284,7 +14362,7 @@ function normalizeMarkupForTextOrAttribute(markup) { .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, ""); } function noop$1() {} -function setProp(domElement, tag, key, value, props) { +function setProp(domElement, tag, key, value, props, prevValue) { switch (key) { case "children": "string" === typeof value @@ -14309,7 +14387,7 @@ function setProp(domElement, tag, key, value, props) { setValueForKnownAttribute(domElement, key, value); break; case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "src": case "href": @@ -14525,6 +14603,9 @@ function setProp(domElement, tag, key, value, props) { value ); break; + case "is": + setValueForAttribute(domElement, "is", value); + break; case "innerText": case "textContent": if (enableCustomElementPropertySupport) break; @@ -14538,10 +14619,10 @@ function setProp(domElement, tag, key, value, props) { setValueForAttribute(domElement, key, value); } } -function setPropOnCustomElement(domElement, tag, key, value, props) { +function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { switch (key) { case "style": - setValueForStyles(domElement, value); + setValueForStyles(domElement, value, prevValue); break; case "dangerouslySetInnerHTML": if (null != value) { @@ -14579,23 +14660,25 @@ function setPropOnCustomElement(domElement, tag, key, value, props) { if (enableCustomElementPropertySupport) a: { props = value; - if ("o" === key[0] && "n" === key[1]) { - tag = key.endsWith("Capture"); - value = key.substr(2, tag ? key.length - 9 : void 0); - var prevProps = getFiberCurrentPropsFromNode(domElement); - prevProps = null != prevProps ? prevProps[key] : null; - "function" === typeof prevProps && - domElement.removeEventListener(value, prevProps, tag); - if ("function" === typeof props) { - "function" !== typeof prevProps && - null !== prevProps && - (key in domElement - ? (domElement[key] = null) - : domElement.hasAttribute(key) && - domElement.removeAttribute(key)); - domElement.addEventListener(value, props, tag); - break a; - } + if ( + "o" === key[0] && + "n" === key[1] && + ((tag = key.endsWith("Capture")), + (value = key.substr(2, tag ? key.length - 9 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(value, prevValue, tag), + "function" === typeof props) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(value, props, tag); + break a; } key in domElement ? (domElement[key] = props) @@ -14621,7 +14704,12 @@ function setInitialProperties(domElement, tag, props) { break; case "input": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey in props) + var type = null, + value = null, + defaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in props) if (props.hasOwnProperty(propKey)) { var propValue = props[propKey]; if (null != propValue) @@ -14631,9 +14719,11 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== typeof propValue && "boolean" !== typeof propValue && - domElement.setAttribute(propKey, propValue); + ((type = propValue), + domElement.setAttribute(propKey, propValue)); break; case "checked": + checked = propValue; propValue = null != propValue ? propValue : props.defaultChecked; domElement.checked = @@ -14641,7 +14731,14 @@ function setInitialProperties(domElement, tag, props) { "function" !== typeof propValue && "symbol" !== propValue; break; + case "defaultChecked": + defaultChecked = propValue; + break; case "value": + value = propValue; + break; + case "defaultValue": + defaultValue = propValue; break; case "children": case "dangerouslySetInnerHTML": @@ -14649,60 +14746,80 @@ function setInitialProperties(domElement, tag, props) { throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, props); + setProp(domElement, tag, propKey, propValue, props, null); } } track(domElement); - initInput(domElement, props, !1); + initInput( + domElement, + value, + defaultValue, + checked, + defaultChecked, + type, + !1 + ); return; case "select": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$201 in props) + var propKey = (value = defaultValue = null); + for (type in props) if ( - props.hasOwnProperty(propKey$201) && - ((propKey = props[propKey$201]), null != propKey) + props.hasOwnProperty(type) && + ((checked = props[type]), null != checked) ) - switch (propKey$201) { + switch (type) { case "value": + defaultValue = checked; + break; + case "defaultValue": + value = checked; break; + case "multiple": + propKey = checked; default: - setProp(domElement, tag, propKey$201, propKey, props); + setProp(domElement, tag, type, checked, props, null); } - domElement.multiple = !!props.multiple; - tag = props.value; + tag = defaultValue; + props = value; + domElement.multiple = !!propKey; null != tag - ? updateOptions(domElement, !!props.multiple, tag, !1) - : null != props.defaultValue && - updateOptions(domElement, !!props.multiple, props.defaultValue, !0); + ? updateOptions(domElement, !!propKey, tag, !1) + : null != props && updateOptions(domElement, !!propKey, props, !0); return; case "textarea": listenToNonDelegatedEvent("invalid", domElement); - for (var propKey$203 in props) + type = propKey = null; + for (value in props) if ( - props.hasOwnProperty(propKey$203) && - ((propKey = props[propKey$203]), null != propKey) + props.hasOwnProperty(value) && + ((defaultValue = props[value]), null != defaultValue) ) - switch (propKey$203) { + switch (value) { case "value": + propKey = defaultValue; + break; + case "defaultValue": + type = defaultValue; break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propKey) throw Error(formatProdErrorMessage(91)); + if (null != defaultValue) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey$203, propKey, props); + setProp(domElement, tag, value, defaultValue, props); } track(domElement); - initTextarea(domElement, props); + initTextarea(domElement, propKey, type); return; case "option": - for (var propKey$205 in props) + for (checked in props) if ( - props.hasOwnProperty(propKey$205) && - ((propKey = props[propKey$205]), null != propKey) + props.hasOwnProperty(checked) && + ((propKey = props[checked]), null != propKey) ) - switch (propKey$205) { + switch (checked) { case "selected": domElement.selected = propKey && @@ -14710,10 +14827,8 @@ function setInitialProperties(domElement, tag, props) { "symbol" !== typeof propKey; break; default: - setProp(domElement, tag, propKey$205, propKey, props); + setProp(domElement, tag, checked, propKey, props); } - null != props.value && - domElement.setAttribute("value", "" + getToStringValue(props.value)); return; case "dialog": listenToNonDelegatedEvent("cancel", domElement); @@ -14752,41 +14867,389 @@ function setInitialProperties(domElement, tag, props) { case "track": case "wbr": case "menuitem": - for (var propKey$207 in props) + for (defaultChecked in props) if ( - props.hasOwnProperty(propKey$207) && - ((propKey = props[propKey$207]), null != propKey) + props.hasOwnProperty(defaultChecked) && + ((propKey = props[defaultChecked]), null != propKey) ) - switch (propKey$207) { + switch (defaultChecked) { case "children": case "dangerouslySetInnerHTML": throw Error(formatProdErrorMessage(137, tag)); default: - setProp(domElement, tag, propKey$207, propKey, props); + setProp(domElement, tag, defaultChecked, propKey, props, null); } return; default: if (isCustomElement(tag)) { - for (var propKey$209 in props) - props.hasOwnProperty(propKey$209) && - ((propKey = props[propKey$209]), + for (propValue in props) + props.hasOwnProperty(propValue) && + ((propKey = props[propValue]), null != propKey && setPropOnCustomElement( domElement, tag, - propKey$209, + propValue, propKey, - props + props, + null )); return; } } - for (propValue in props) - props.hasOwnProperty(propValue) && - ((propKey = props[propValue]), - null != propKey && setProp(domElement, tag, propValue, propKey, props)); + for (defaultValue in props) + props.hasOwnProperty(defaultValue) && + ((propKey = props[defaultValue]), + null != propKey && + setProp(domElement, tag, defaultValue, propKey, props, null)); } -function updateProperties( +function updateProperties(domElement, tag, lastProps, nextProps) { + switch (tag) { + case "div": + case "span": + case "svg": + case "path": + case "a": + case "g": + case "p": + case "li": + break; + case "input": + var name = null, + type = null, + value = null, + defaultValue = null, + lastDefaultValue = null, + checked = null, + defaultChecked = null; + for (propKey in lastProps) { + var lastProp = lastProps[propKey]; + if (lastProps.hasOwnProperty(propKey) && null != lastProp) + switch (propKey) { + case "checked": + nextProps.hasOwnProperty(propKey) || + ((lastProp = nextProps.defaultChecked), + (domElement.checked = + !!lastProp && + "function" !== typeof lastProp && + "symbol" !== lastProp)); + break; + case "value": + break; + case "defaultValue": + lastDefaultValue = lastProp; + default: + nextProps.hasOwnProperty(propKey) || + setProp(domElement, tag, propKey, null, nextProps, lastProp); + } + } + for (var propKey$220 in nextProps) { + var propKey = nextProps[propKey$220]; + lastProp = lastProps[propKey$220]; + if ( + nextProps.hasOwnProperty(propKey$220) && + (null != propKey || null != lastProp) + ) + switch (propKey$220) { + case "type": + type = propKey; + propKey !== lastProp && + (null != propKey && + "function" !== typeof propKey && + "symbol" !== typeof propKey && + "boolean" !== typeof propKey + ? domElement.setAttribute(propKey$220, propKey) + : domElement.removeAttribute(propKey$220)); + break; + case "name": + name = propKey; + break; + case "checked": + checked = propKey; + propKey !== lastProp && + ((propKey = + null != propKey ? propKey : nextProps.defaultChecked), + (domElement.checked = + !!propKey && + "function" !== typeof propKey && + "symbol" !== propKey)); + break; + case "defaultChecked": + defaultChecked = propKey; + break; + case "value": + value = propKey; + break; + case "defaultValue": + defaultValue = propKey; + break; + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + propKey !== lastProp && + setProp( + domElement, + tag, + propKey$220, + propKey, + nextProps, + lastProp + ); + } + } + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastDefaultValue, + checked, + defaultChecked, + type + ); + return; + case "select": + defaultValue = value = propKey = propKey$220 = null; + for (type in lastProps) + if ( + ((lastDefaultValue = lastProps[type]), + lastProps.hasOwnProperty(type) && null != lastDefaultValue) + ) + switch (type) { + case "value": + break; + case "multiple": + defaultValue = lastDefaultValue; + default: + nextProps.hasOwnProperty(type) || + setProp( + domElement, + tag, + type, + null, + nextProps, + lastDefaultValue + ); + } + for (name in nextProps) + if ( + ((type = nextProps[name]), + (lastDefaultValue = lastProps[name]), + nextProps.hasOwnProperty(name) && + (null != type || null != lastDefaultValue)) + ) + switch (name) { + case "value": + propKey$220 = type; + break; + case "defaultValue": + propKey = type; + break; + case "multiple": + value = type; + default: + type !== lastDefaultValue && + setProp( + domElement, + tag, + name, + type, + nextProps, + lastDefaultValue + ); + } + updateSelect(domElement, propKey$220, propKey, value, defaultValue); + return; + case "textarea": + propKey = propKey$220 = null; + for (defaultValue in lastProps) + if ( + ((name = lastProps[defaultValue]), + lastProps.hasOwnProperty(defaultValue) && + null != name && + !nextProps.hasOwnProperty(defaultValue)) + ) + switch (defaultValue) { + case "value": + break; + case "children": + break; + default: + setProp(domElement, tag, defaultValue, null, nextProps, name); + } + for (value in nextProps) + if ( + ((name = nextProps[value]), + (type = lastProps[value]), + nextProps.hasOwnProperty(value) && (null != name || null != type)) + ) + switch (value) { + case "value": + propKey$220 = name; + break; + case "defaultValue": + propKey = name; + break; + case "children": + break; + case "dangerouslySetInnerHTML": + if (null != name) throw Error(formatProdErrorMessage(91)); + break; + default: + name !== type && + setProp(domElement, tag, value, name, nextProps, type); + } + updateTextarea(domElement, propKey$220, propKey); + return; + case "option": + for (var propKey$238 in lastProps) + if ( + ((propKey$220 = lastProps[propKey$238]), + lastProps.hasOwnProperty(propKey$238) && + null != propKey$220 && + !nextProps.hasOwnProperty(propKey$238)) + ) + switch (propKey$238) { + case "selected": + domElement.selected = !1; + break; + default: + setProp( + domElement, + tag, + propKey$238, + null, + nextProps, + propKey$220 + ); + } + for (lastDefaultValue in nextProps) + if ( + ((propKey$220 = nextProps[lastDefaultValue]), + (propKey = lastProps[lastDefaultValue]), + nextProps.hasOwnProperty(lastDefaultValue) && + propKey$220 !== propKey && + (null != propKey$220 || null != propKey)) + ) + switch (lastDefaultValue) { + case "selected": + domElement.selected = + propKey$220 && + "function" !== typeof propKey$220 && + "symbol" !== typeof propKey$220; + break; + default: + setProp( + domElement, + tag, + lastDefaultValue, + propKey$220, + nextProps, + propKey + ); + } + return; + case "img": + case "link": + case "area": + case "base": + case "br": + case "col": + case "embed": + case "hr": + case "keygen": + case "meta": + case "param": + case "source": + case "track": + case "wbr": + case "menuitem": + for (var propKey$243 in lastProps) + (propKey$220 = lastProps[propKey$243]), + lastProps.hasOwnProperty(propKey$243) && + null != propKey$220 && + !nextProps.hasOwnProperty(propKey$243) && + setProp(domElement, tag, propKey$243, null, nextProps, propKey$220); + for (checked in nextProps) + if ( + ((propKey$220 = nextProps[checked]), + (propKey = lastProps[checked]), + nextProps.hasOwnProperty(checked) && + propKey$220 !== propKey && + (null != propKey$220 || null != propKey)) + ) + switch (checked) { + case "children": + case "dangerouslySetInnerHTML": + if (null != propKey$220) + throw Error(formatProdErrorMessage(137, tag)); + break; + default: + setProp( + domElement, + tag, + checked, + propKey$220, + nextProps, + propKey + ); + } + return; + default: + if (isCustomElement(tag)) { + for (var propKey$248 in lastProps) + (propKey$220 = lastProps[propKey$248]), + lastProps.hasOwnProperty(propKey$248) && + null != propKey$220 && + !nextProps.hasOwnProperty(propKey$248) && + setPropOnCustomElement( + domElement, + tag, + propKey$248, + null, + nextProps, + propKey$220 + ); + for (defaultChecked in nextProps) + (propKey$220 = nextProps[defaultChecked]), + (propKey = lastProps[defaultChecked]), + !nextProps.hasOwnProperty(defaultChecked) || + propKey$220 === propKey || + (null == propKey$220 && null == propKey) || + setPropOnCustomElement( + domElement, + tag, + defaultChecked, + propKey$220, + nextProps, + propKey + ); + return; + } + } + for (var propKey$253 in lastProps) + (propKey$220 = lastProps[propKey$253]), + lastProps.hasOwnProperty(propKey$253) && + null != propKey$220 && + !nextProps.hasOwnProperty(propKey$253) && + setProp(domElement, tag, propKey$253, null, nextProps, propKey$220); + for (lastProp in nextProps) + (propKey$220 = nextProps[lastProp]), + (propKey = lastProps[lastProp]), + !nextProps.hasOwnProperty(lastProp) || + propKey$220 === propKey || + (null == propKey$220 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$220, nextProps, propKey); +} +function updatePropertiesWithDiff( domElement, updatePayload, tag, @@ -14804,14 +15267,31 @@ function updateProperties( case "li": break; case "input": - "radio" === nextProps.type && - null != nextProps.name && - ((lastProps = nextProps.checked), - null != lastProps && (domElement.checked = lastProps)); - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) { - var propKey = updatePayload[lastProps], - propValue = updatePayload[lastProps + 1]; + var name = nextProps.name, + type = nextProps.type, + value = nextProps.value, + defaultValue = nextProps.defaultValue; + lastProps = lastProps.defaultValue; + for ( + var checked = nextProps.checked, + defaultChecked = nextProps.defaultChecked, + i = 0; + i < updatePayload.length; + i += 2 + ) { + var propKey = updatePayload[i], + propValue = updatePayload[i + 1]; switch (propKey) { + case "type": + null != propValue && + "function" !== typeof propValue && + "symbol" !== typeof propValue && + "boolean" !== typeof propValue + ? domElement.setAttribute(propKey, propValue) + : domElement.removeAttribute(propKey); + break; + case "name": + break; case "checked": propKey = null != propValue ? propValue : nextProps.defaultChecked; domElement.checked = @@ -14819,83 +15299,89 @@ function updateProperties( "function" !== typeof propKey && "symbol" !== propKey; break; + case "defaultChecked": + break; case "value": break; + case "defaultValue": + break; case "children": case "dangerouslySetInnerHTML": if (null != propValue) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, propKey, propValue, nextProps, null); } } - updateInput(domElement, nextProps); + null != name && + "function" !== typeof name && + "symbol" !== typeof name && + "boolean" !== typeof name + ? domElement.setAttribute("name", name) + : domElement.removeAttribute("name"); + updateInput( + domElement, + value, + defaultValue, + lastProps, + checked, + defaultChecked, + type + ); return; case "select": - for (propKey = 0; propKey < updatePayload.length; propKey += 2) { - propValue = updatePayload[propKey]; - var propValue$215 = updatePayload[propKey + 1]; - switch (propValue) { + name = nextProps.value; + type = nextProps.defaultValue; + value = nextProps.multiple; + defaultValue = lastProps.multiple; + for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + switch ( + ((checked = updatePayload[lastProps]), + (defaultChecked = updatePayload[lastProps + 1]), + checked) + ) { case "value": break; default: - setProp(domElement, tag, propValue, propValue$215, nextProps); + setProp(domElement, tag, checked, defaultChecked, nextProps, null); } - } - updatePayload = !!lastProps.multiple; - tag = nextProps.value; - null != tag - ? updateOptions(domElement, !!nextProps.multiple, tag, !1) - : updatePayload !== !!nextProps.multiple && - (null != nextProps.defaultValue - ? updateOptions( - domElement, - !!nextProps.multiple, - nextProps.defaultValue, - !0 - ) - : updateOptions( - domElement, - !!nextProps.multiple, - nextProps.multiple ? [] : "", - !1 - )); + updateSelect(domElement, name, type, value, defaultValue); return; case "textarea": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + name = nextProps.value; + type = nextProps.defaultValue; + for (value = 0; value < updatePayload.length; value += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((defaultValue = updatePayload[value]), + (lastProps = updatePayload[value + 1]), + defaultValue) ) { case "value": break; case "children": break; case "dangerouslySetInnerHTML": - if (null != propValue) throw Error(formatProdErrorMessage(91)); + if (null != lastProps) throw Error(formatProdErrorMessage(91)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, defaultValue, lastProps, nextProps, null); } - updateTextarea(domElement, nextProps); + updateTextarea(domElement, name, type); return; case "option": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "selected": domElement.selected = - propValue && - "function" !== typeof propValue && - "symbol" !== typeof propValue; + value && "function" !== typeof value && "symbol" !== typeof value; break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; case "img": @@ -14913,41 +15399,42 @@ function updateProperties( case "track": case "wbr": case "menuitem": - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) switch ( - ((propKey = updatePayload[lastProps]), - (propValue = updatePayload[lastProps + 1]), - propKey) + ((type = updatePayload[name]), + (value = updatePayload[name + 1]), + type) ) { case "children": case "dangerouslySetInnerHTML": - if (null != propValue) - throw Error(formatProdErrorMessage(137, tag)); + if (null != value) throw Error(formatProdErrorMessage(137, tag)); break; default: - setProp(domElement, tag, propKey, propValue, nextProps); + setProp(domElement, tag, type, value, nextProps, null); } return; default: if (isCustomElement(tag)) { - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setPropOnCustomElement( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); return; } } - for (lastProps = 0; lastProps < updatePayload.length; lastProps += 2) + for (name = 0; name < updatePayload.length; name += 2) setProp( domElement, tag, - updatePayload[lastProps], - updatePayload[lastProps + 1], - nextProps + updatePayload[name], + updatePayload[name + 1], + nextProps, + null ); } var Dispatcher$1 = Internals.Dispatcher, @@ -15321,14 +15808,14 @@ function preinit$1(href, options) { switch (as) { case "style": as = getResourcesFromRoot(resourceRoot).hoistableStyles; - var key$232 = getStyleKey(href), + var key$281 = getStyleKey(href), precedence = options.precedence || "default", - resource = as.get(key$232); + resource = as.get(key$281); if (resource) break; var state = { loading: 0, preload: null }; if ( (resource = resourceRoot.querySelector( - getStylesheetSelectorFromKey(key$232) + getStylesheetSelectorFromKey(key$281) )) ) state.loading = 1; @@ -15339,7 +15826,7 @@ function preinit$1(href, options) { "data-precedence": precedence, crossOrigin: options.crossOrigin }; - (options = preloadPropsMap.get(key$232)) && + (options = preloadPropsMap.get(key$281)) && adoptPreloadPropsForStylesheet(href, options); var link = (resource = ( resourceRoot.ownerDocument || resourceRoot @@ -15365,15 +15852,15 @@ function preinit$1(href, options) { count: 1, state: state }; - as.set(key$232, resource); + as.set(key$281, resource); break; case "script": (as = getResourcesFromRoot(resourceRoot).hoistableScripts), - (key$232 = getScriptKey(href)), - (precedence = as.get(key$232)), + (key$281 = getScriptKey(href)), + (precedence = as.get(key$281)), precedence || ((precedence = resourceRoot.querySelector( - "script[async]" + key$232 + "script[async]" + key$281 )), precedence || ((href = { @@ -15382,7 +15869,7 @@ function preinit$1(href, options) { crossOrigin: options.crossOrigin, integrity: options.integrity }), - (options = preloadPropsMap.get(key$232)) && + (options = preloadPropsMap.get(key$281)) && adoptPreloadPropsForScript(href, options), (options = resourceRoot.ownerDocument || resourceRoot), (precedence = options.createElement("script")), @@ -15395,13 +15882,13 @@ function preinit$1(href, options) { count: 1, state: null }), - as.set(key$232, precedence)); + as.set(key$281, precedence)); } else if ("style" === as || "script" === as) if ((resourceRoot = getDocumentForPreloads())) { - key$232 = escapeSelectorAttributeValueInsideDoubleQuotes(href); - precedence = key$232 = - 'link[rel="preload"][as="' + as + '"][href="' + key$232 + '"]'; + key$281 = escapeSelectorAttributeValueInsideDoubleQuotes(href); + precedence = key$281 = + 'link[rel="preload"][as="' + as + '"][href="' + key$281 + '"]'; switch (as) { case "style": precedence = getStyleKey(href); @@ -15418,7 +15905,7 @@ function preinit$1(href, options) { integrity: options.integrity }), preloadPropsMap.set(precedence, href), - null === resourceRoot.querySelector(key$232) && + null === resourceRoot.querySelector(key$281) && ((options = resourceRoot.createElement("link")), setInitialProperties(options, "link", href), markNodeAsHoistable(options), @@ -15451,17 +15938,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$241 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$242 = styles$241.get(type); - resource$242 || + var styles$290 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$291 = styles$290.get(type); + resource$291 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$242 = { + (resource$291 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$241.set(type, resource$242), + styles$290.set(type, resource$291), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -15476,9 +15963,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$242.state + resource$291.state )); - return resource$242; + return resource$291; } return null; case "script": @@ -15550,36 +16037,36 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = key); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$247 = hoistableRoot.querySelector( + var instance$296 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$247) + if (instance$296) return ( - (resource.instance = instance$247), - markNodeAsHoistable(instance$247), - instance$247 + (resource.instance = instance$296), + markNodeAsHoistable(instance$296), + instance$296 ); key = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(key, styleProps); - instance$247 = ( + instance$296 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$247); - var linkInstance = instance$247; + markNodeAsHoistable(instance$296); + var linkInstance = instance$296; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$247, "link", key); + setInitialProperties(instance$296, "link", key); resource.state.loading |= 4; - insertStylesheet(instance$247, props.precedence, hoistableRoot); - return (resource.instance = instance$247); + insertStylesheet(instance$296, props.precedence, hoistableRoot); + return (resource.instance = instance$296); case "script": - instance$247 = getScriptKey(props.src); + instance$296 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - "script[async]" + instance$247 + "script[async]" + instance$296 )) ) return ( @@ -15588,7 +16075,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); key = props; - if ((styleProps = preloadPropsMap.get(instance$247))) + if ((styleProps = preloadPropsMap.get(instance$296))) (key = assign({}, props)), adoptPreloadPropsForScript(key, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -15958,17 +16445,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1809 = { +var devToolsConfig$jscomp$inline_1843 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-47cd17f3", + version: "18.3.0-www-modern-95e6ae95", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2188 = { - bundleType: devToolsConfig$jscomp$inline_1809.bundleType, - version: devToolsConfig$jscomp$inline_1809.version, - rendererPackageName: devToolsConfig$jscomp$inline_1809.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1809.rendererConfig, +var internals$jscomp$inline_2228 = { + bundleType: devToolsConfig$jscomp$inline_1843.bundleType, + version: devToolsConfig$jscomp$inline_1843.version, + rendererPackageName: devToolsConfig$jscomp$inline_1843.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1843.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -15985,26 +16472,26 @@ var internals$jscomp$inline_2188 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1809.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1843.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-47cd17f3" + reconcilerVersion: "18.3.0-www-modern-95e6ae95" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2189 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2229 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2189.isDisabled && - hook$jscomp$inline_2189.supportsFiber + !hook$jscomp$inline_2229.isDisabled && + hook$jscomp$inline_2229.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2189.inject( - internals$jscomp$inline_2188 + (rendererID = hook$jscomp$inline_2229.inject( + internals$jscomp$inline_2228 )), - (injectedHook = hook$jscomp$inline_2189); + (injectedHook = hook$jscomp$inline_2229); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -16312,4 +16799,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-47cd17f3"; +exports.version = "18.3.0-www-modern-95e6ae95"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index 0efc75e3a9d47..f439711f19071 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -140,6 +140,7 @@ var enableProfilerNestedUpdatePhase = true; var createRootStrictEffectsByDefault = false; var enableLazyContextPropagation = false; var enableLegacyHidden = false; +var diffInCommitPhase = true; // Flow magic to verify the exports of this file match the original version. var FunctionComponent = 0; var ClassComponent = 1; @@ -1965,12 +1966,10 @@ function shim() { var suspendResource = shim; var NO_CONTEXT = {}; -var UPDATE_SIGNAL = {}; var nodeToInstanceMap = new WeakMap(); { Object.freeze(NO_CONTEXT); - Object.freeze(UPDATE_SIGNAL); } function getPublicInstance(inst) { @@ -2061,16 +2060,6 @@ function appendInitialChild(parentInstance, child) { parentInstance.children.push(child); } -function prepareUpdate( - testElement, - type, - oldProps, - newProps, - rootContainerInstance, - hostContext -) { - return UPDATE_SIGNAL; -} function shouldSetTextContent(type, props) { return false; } @@ -15193,17 +15182,9 @@ function updateHostComponent( // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; - } // If we get updated because one of our children updated, we don't - getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host - // component is hitting the resume path. Figure out why. Possibly - // related to `hidden`. - - var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component. - - workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. All the work is done in commitWork. + } - if (updatePayload) { + { markUpdate(workInProgress); } } @@ -18370,7 +18351,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var _updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (_updatePayload !== null) { + if (_updatePayload !== null || diffInCommitPhase) { try { commitUpdate( _instance2, @@ -24501,7 +24482,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-ce15662b"; +var ReactVersion = "18.3.0-www-classic-3b456806"; // Might add PROFILE later. diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index 60539222a3742..3d42e2d0e14ea 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -140,6 +140,7 @@ var enableProfilerNestedUpdatePhase = true; var createRootStrictEffectsByDefault = false; var enableLazyContextPropagation = false; var enableLegacyHidden = false; +var diffInCommitPhase = true; // Flow magic to verify the exports of this file match the original version. var FunctionComponent = 0; var ClassComponent = 1; @@ -1965,12 +1966,10 @@ function shim() { var suspendResource = shim; var NO_CONTEXT = {}; -var UPDATE_SIGNAL = {}; var nodeToInstanceMap = new WeakMap(); { Object.freeze(NO_CONTEXT); - Object.freeze(UPDATE_SIGNAL); } function getPublicInstance(inst) { @@ -2061,16 +2060,6 @@ function appendInitialChild(parentInstance, child) { parentInstance.children.push(child); } -function prepareUpdate( - testElement, - type, - oldProps, - newProps, - rootContainerInstance, - hostContext -) { - return UPDATE_SIGNAL; -} function shouldSetTextContent(type, props) { return false; } @@ -15193,17 +15182,9 @@ function updateHostComponent( // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; - } // If we get updated because one of our children updated, we don't - getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host - // component is hitting the resume path. Figure out why. Possibly - // related to `hidden`. - - var updatePayload = prepareUpdate(); // TODO: Type this specific to this type of component. - - workInProgress.updateQueue = updatePayload; // If the update payload indicates that there is a change or if there - // is a new ref we mark this as an update. All the work is done in commitWork. + } - if (updatePayload) { + { markUpdate(workInProgress); } } @@ -18370,7 +18351,7 @@ function commitMutationEffectsOnFiber(finishedWork, root, lanes) { var _updatePayload = finishedWork.updateQueue; finishedWork.updateQueue = null; - if (_updatePayload !== null) { + if (_updatePayload !== null || diffInCommitPhase) { try { commitUpdate( _instance2, @@ -24501,7 +24482,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-47cd17f3"; +var ReactVersion = "18.3.0-www-modern-95e6ae95"; // Might add PROFILE later. diff --git a/compiled/facebook-www/WARNINGS b/compiled/facebook-www/WARNINGS index 8761170ba0e74..c54246f3a5da7 100644 --- a/compiled/facebook-www/WARNINGS +++ b/compiled/facebook-www/WARNINGS @@ -397,7 +397,7 @@ "unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. %s" "unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React." "useInsertionEffect must not schedule updates." -"validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s" +"validateDOMNesting(...): %s cannot appear as a child of <%s>.%s" "validateDOMNesting(...): %s cannot appear as a descendant of <%s>." -"validateDOMNesting: when childText is passed, childTag should be null" -"validateDOMNesting: when childText or childTag must be provided" +"validateDOMNesting(...): Text nodes cannot appear as a child of <%s>." +"validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <%s>. Make sure you don't have any extra whitespace between tags on each line of your source code."