diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index b5105a31f1..9bdc4e8677 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -178f4351947a842ff0b56700e9115b25ae8f20d0 +417188314dd1d6df54efc8cd6a0c5d4830615888 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 0a74f7eaea..9b8b3e9d34 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "18.3.0-www-classic-8a9e991a"; + var ReactVersion = "18.3.0-www-classic-5e99f036"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index b3640cb69a..08f962935e 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "18.3.0-www-modern-afe290cd"; + var ReactVersion = "18.3.0-www-modern-d235b405"; // 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 a7cd7f80a8..60a56c2601 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-classic-909c7c72"; + var ReactVersion = "18.3.0-www-classic-ffbafb55"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -175,6 +175,7 @@ if (__DEV__) { enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -3001,6 +3002,7 @@ if (__DEV__) { function waitForCommitToBeReady() { return null; } + var NotPendingTransition = null; var ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher; var prefix; @@ -4041,6 +4043,27 @@ if (__DEV__) { var contextStackCursor = createCursor(null); var contextFiberStackCursor = createCursor(null); var rootInstanceStackCursor = createCursor(null); // Represents the nearest host transition provider (in React DOM, a
) + // NOTE: Since forms cannot be nested, and this feature is only implemented by + // React DOM, we don't technically need this to be a stack. It could be a single + // module variable instead. + + var hostTransitionProviderCursor = createCursor(null); // TODO: This should initialize to NotPendingTransition, a constant + // imported from the fiber config. However, because of a cycle in the module + // graph, that value isn't defined during this module's initialization. I can't + // think of a way to work around this without moving that value out of the + // fiber config. For now, the "no provider" case is handled when reading, + // inside useHostTransitionStatus. + + var HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function requiredContext(c) { { @@ -4060,6 +4083,10 @@ if (__DEV__) { return rootInstance; } + function getHostTransitionProvider() { + return hostTransitionProviderCursor.current; + } + function pushHostContainer(fiber, nextRootInstance) { // Push current root instance onto the stack; // This allows us to reset root when portals are popped. @@ -4091,6 +4118,16 @@ if (__DEV__) { } function pushHostContext(fiber) { + if (enableFormActions && enableAsyncActions) { + var stateHook = fiber.memoizedState; + + if (stateHook !== null) { + // Only provide context if this fiber has been upgraded by a host + // transition. We use the same optimization for regular host context below. + push(hostTransitionProviderCursor, fiber, fiber); + } + } + var context = requiredContext(contextStackCursor.current); var nextContext = getChildHostContext(); // Don't push this Fiber's context unless it's unique. @@ -4109,6 +4146,25 @@ if (__DEV__) { pop(contextStackCursor, fiber); pop(contextFiberStackCursor, fiber); } + + if (enableFormActions && enableAsyncActions) { + if (hostTransitionProviderCursor.current === fiber) { + // Do not pop unless this Fiber provided the current context. This is mostly + // a performance optimization, but conveniently it also prevents a potential + // data race where a host provider is upgraded (i.e. memoizedState becomes + // non-null) during a concurrent event. This is a bit of a flaw in the way + // we upgrade host components, but because we're accounting for it here, it + // should be fine. + pop(hostTransitionProviderCursor, fiber); // When popping the transition provider, we reset the context value back + // to `null`. We can do this because you're not allowd to nest forms. If + // we allowed for multiple nested host transition providers, then we'd + // need to reset this to the parent provider's status. + + { + HostTransitionContext._currentValue2 = null; + } + } + } } var isHydrating = false; // This flag allows for warning supression when we expect there to be mismatches @@ -8690,6 +8746,43 @@ if (__DEV__) { return children; } + + function renderTransitionAwareHostComponentWithHooks( + current, + workInProgress, + lanes + ) { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + return renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + lanes + ); + } + function TransitionAwareHostComponent() { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + var dispatcher = ReactCurrentDispatcher$1.current; + + var _dispatcher$useState = dispatcher.useState(), + maybeThenable = _dispatcher$useState[0]; + + if (typeof maybeThenable.then === "function") { + var thenable = maybeThenable; + return useThenable(thenable); + } else { + var status = maybeThenable; + return status; + } + } function bailoutHooks(current, workInProgress, lanes) { workInProgress.updateQueue = current.updateQueue; // TODO: Don't need to reset the flags here, because they're reset in the // complete phase (bubbleProperties). @@ -9644,6 +9737,256 @@ if (__DEV__) { var dispatch = hook.queue.dispatch; return [passthrough, dispatch]; } // useFormState actions run sequentially, because each action receives the + // previous state as an argument. We store pending actions on a queue. + + function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) { + throw new Error("Cannot update form state while rendering."); + } + + var last = actionQueue.pending; + + if (last === null) { + // There are no pending actions; this is the first one. We can run + // it immediately. + var newLast = { + payload: payload, + next: null // circular + }; + newLast.next = actionQueue.pending = newLast; + runFormStateAction(actionQueue, setState, payload); + } else { + // There's already an action running. Add to the queue. + var first = last.next; + var _newLast = { + payload: payload, + next: first + }; + actionQueue.pending = last.next = _newLast; + } + } + + function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action; + var prevState = actionQueue.state; // This is a fork of startTransition + + var prevTransition = ReactCurrentBatchConfig$2.transition; + var currentTransition = { + _callbacks: new Set() + }; + ReactCurrentBatchConfig$2.transition = currentTransition; + + { + ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); + } + + try { + var returnValue = action(prevState, payload); + + if ( + returnValue !== null && + typeof returnValue === "object" && // $FlowFixMe[method-unbinding] + typeof returnValue.then === "function" + ) { + var thenable = returnValue; + notifyTransitionCallbacks(currentTransition, thenable); // Attach a listener to read the return state of the action. As soon as + // this resolves, we can run the next action in the sequence. + + thenable.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ); + setState(thenable); + } else { + setState(returnValue); + var nextState = returnValue; + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + } + } catch (error) { + // This is a trick to get the `useFormState` hook to rethrow the error. + // When it unwraps the thenable with the `use` algorithm, the error + // will be thrown. + var rejectedThenable = { + then: function () {}, + status: "rejected", + reason: error // $FlowFixMe: Not sure why this doesn't work + }; + setState(rejectedThenable); + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$2.transition = prevTransition; + + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; + + currentTransition._updatedFibers.clear(); + + if (updatedFibersCount > 10) { + warn( + "Detected a large number of updates inside startTransition. " + + "If this is due to a subscription please re-write it to use React provided hooks. " + + "Otherwise concurrent mode guarantees are off the table." + ); + } + } + } + } + } + + function finishRunningFormStateAction(actionQueue, setState) { + // The action finished running. Pop it from the queue and run the next pending + // action, if there are any. + var last = actionQueue.pending; + + if (last !== null) { + var first = last.next; + + if (first === last) { + // This was the last action in the queue. + actionQueue.pending = null; + } else { + // Remove the first node from the circular queue. + var next = first.next; + last.next = next; // Run the next action. + + runFormStateAction(actionQueue, setState, next.payload); + } + } + } + + function formStateReducer(oldState, newState) { + return newState; + } + + function mountFormState(action, initialStateProp, permalink) { + var initialState = initialStateProp; + // the `use` algorithm during render. + + var stateHook = mountWorkInProgressHook(); + stateHook.memoizedState = stateHook.baseState = initialState; // TODO: Typing this "correctly" results in recursion limit errors + // const stateQueue: UpdateQueue, S | Awaited> = { + + var stateQueue = { + pending: null, + lanes: NoLanes, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialState + }; + stateHook.queue = stateQueue; + var setState = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + stateQueue + ); + stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + // shared between all instances of the hook. Similar to a regular state queue, + // but different because the actions are run sequentially, and they run in + // an event instead of during render. + + var actionQueueHook = mountWorkInProgressHook(); + var actionQueue = { + state: initialState, + dispatch: null, + // circular + action: action, + pending: null + }; + actionQueueHook.queue = actionQueue; + var dispatch = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + actionQueue, + setState + ); + actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this + // to detect when the action function changes so we can update it in + // an effect. + + actionQueueHook.memoizedState = action; + return [initialState, dispatch]; + } + + function updateFormState(action, initialState, permalink) { + var stateHook = updateWorkInProgressHook(); + var currentStateHook = currentHook; + return updateFormStateImpl(stateHook, currentStateHook, action); + } + + function updateFormStateImpl( + stateHook, + currentStateHook, + action, + initialState, + permalink + ) { + var _updateReducerImpl = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + ), + actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + + var state = + typeof actionResult === "object" && + actionResult !== null && // $FlowFixMe[method-unbinding] + typeof actionResult.then === "function" + ? useThenable(actionResult) + : actionResult; + var actionQueueHook = updateWorkInProgressHook(); + var actionQueue = actionQueueHook.queue; + var dispatch = actionQueue.dispatch; // Check if a new action was passed. If so, update it in an effect. + + var prevAction = actionQueueHook.memoizedState; + + if (action !== prevAction) { + currentlyRenderingFiber$1.flags |= Passive$1; + pushEffect( + HasEffect | Passive, + formStateActionEffect.bind(null, actionQueue, action), + createEffectInstance(), + null + ); + } + + return [state, dispatch]; + } + + function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; + } + + function rerenderFormState(action, initialState, permalink) { + // Unlike useState, useFormState doesn't support render phase updates. + // Also unlike useState, we need to replay all pending updates again in case + // the passthrough value changed. + // + // So instead of a forked re-render implementation that knows how to handle + // render phase udpates, we can use the same implementation as during a + // regular mount or update. + var stateHook = updateWorkInProgressHook(); + var currentStateHook = currentHook; + + if (currentStateHook !== null) { + // This is an update. Process the update queue. + return updateFormStateImpl(stateHook, currentStateHook, action); + } // This is a mount. No updates to process. + + var state = stateHook.memoizedState; + var actionQueueHook = updateWorkInProgressHook(); + var actionQueue = actionQueueHook.queue; + var dispatch = actionQueue.dispatch; // This may have changed during the rerender. + + actionQueueHook.memoizedState = action; + return [state, dispatch]; + } function pushEffect(tag, create, inst, deps) { var effect = { @@ -10313,6 +10656,15 @@ if (__DEV__) { return [isPending, start]; } + function useHostTransitionStatus() { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + var status = readContext(HostTransitionContext); + return status !== null ? status : NotPendingTransition; + } + function mountId() { var hook = mountWorkInProgressHook(); var root = getWorkInProgressRoot(); // TODO: In Fizz, id generation is specific to each server config. Maybe we @@ -10697,6 +11049,11 @@ if (__DEV__) { ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; } + if (enableFormActions && enableAsyncActions) { + ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError; + ContextOnlyDispatcher.useFormState = throwInvalidHookError; + } + if (enableAsyncActions) { ContextOnlyDispatcher.useOptimistic = throwInvalidHookError; } @@ -10867,6 +11224,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnMountInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnMountInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + mountHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { HooksDispatcherOnMountInDEV.useOptimistic = function useOptimistic( passthrough, @@ -11010,6 +11382,18 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnMountWithHookTypesInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnMountWithHookTypesInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { HooksDispatcherOnMountWithHookTypesInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -11152,6 +11536,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnUpdateInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnUpdateInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return updateFormState(action); + }; + } + if (enableAsyncActions) { HooksDispatcherOnUpdateInDEV.useOptimistic = function useOptimistic( passthrough, @@ -11296,6 +11695,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnRerenderInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnRerenderInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return rerenderFormState(action); + }; + } + if (enableAsyncActions) { HooksDispatcherOnRerenderInDEV.useOptimistic = function useOptimistic( passthrough, @@ -11464,6 +11878,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnMountInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnMountInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + mountHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnMountInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -11631,6 +12058,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnUpdateInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnUpdateInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + updateHookTypesDev(); + return updateFormState(action); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnUpdateInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -11798,6 +12238,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnRerenderInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnRerenderInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + updateHookTypesDev(); + return rerenderFormState(action); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnRerenderInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -15231,6 +15684,58 @@ if (__DEV__) { workInProgress.flags |= ContentReset; } + if (enableFormActions && enableAsyncActions) { + var memoizedState = workInProgress.memoizedState; + + if (memoizedState !== null) { + // This fiber has been upgraded to a stateful component. The only way + // happens currently is for form actions. We use hooks to track the + // pending and error state of the form. + // + // Once a fiber is upgraded to be stateful, it remains stateful for the + // rest of its lifetime. + var newState = renderTransitionAwareHostComponentWithHooks( + current, + workInProgress, + renderLanes + ); // If the transition state changed, propagate the change to all the + // descendents. We use Context as an implementation detail for this. + // + // This is intentionally set here instead of pushHostContext because + // pushHostContext gets called before we process the state hook, to avoid + // a state mismatch in the event that something suspends. + // + // NOTE: This assumes that there cannot be nested transition providers, + // because the only renderer that implements this feature is React DOM, + // and forms cannot be nested. If we did support nested providers, then + // we would need to push a context value even for host fibers that + // haven't been upgraded yet. + + { + HostTransitionContext._currentValue2 = newState; + } + + if (enableLazyContextPropagation); + else { + if (didReceiveUpdate) { + if (current !== null) { + var oldStateHook = current.memoizedState; + var oldState = oldStateHook.memoizedState; // This uses regular equality instead of Object.is because we assume + // that host transition state doesn't include NaN as a valid type. + + if (oldState !== newState) { + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + ); + } + } + } + } + } + } + markRef$1(current, workInProgress); reconcileChildren(current, workInProgress, nextChildren, renderLanes); return workInProgress.child; @@ -18207,6 +18712,34 @@ if (__DEV__) { } } } + } else if ( + enableFormActions && + enableAsyncActions && + parent === getHostTransitionProvider() + ) { + // During a host transition, a host component can act like a context + // provider. E.g. in React DOM, this would be a . + var _currentParent = parent.alternate; + + if (_currentParent === null) { + throw new Error( + "Should have a current fiber. This is a bug in React." + ); + } + + var oldStateHook = _currentParent.memoizedState; + var oldState = oldStateHook.memoizedState; + var newStateHook = parent.memoizedState; + var newState = newStateHook.memoizedState; // This uses regular equality instead of Object.is because we assume that + // host transition state doesn't include NaN as a valid type. + + if (oldState !== newState) { + if (contexts !== null) { + contexts.push(HostTransitionContext); + } else { + contexts = [HostTransitionContext]; + } + } } parent = parent.return; diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 3093e66979..cc23b699c4 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "18.3.0-www-modern-4f70a13e"; + var ReactVersion = "18.3.0-www-modern-4fcabd82"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -175,6 +175,7 @@ if (__DEV__) { enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -2998,6 +2999,7 @@ if (__DEV__) { function waitForCommitToBeReady() { return null; } + var NotPendingTransition = null; var ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher; var prefix; @@ -3791,6 +3793,27 @@ if (__DEV__) { var contextStackCursor = createCursor(null); var contextFiberStackCursor = createCursor(null); var rootInstanceStackCursor = createCursor(null); // Represents the nearest host transition provider (in React DOM, a ) + // NOTE: Since forms cannot be nested, and this feature is only implemented by + // React DOM, we don't technically need this to be a stack. It could be a single + // module variable instead. + + var hostTransitionProviderCursor = createCursor(null); // TODO: This should initialize to NotPendingTransition, a constant + // imported from the fiber config. However, because of a cycle in the module + // graph, that value isn't defined during this module's initialization. I can't + // think of a way to work around this without moving that value out of the + // fiber config. For now, the "no provider" case is handled when reading, + // inside useHostTransitionStatus. + + var HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function requiredContext(c) { { @@ -3810,6 +3833,10 @@ if (__DEV__) { return rootInstance; } + function getHostTransitionProvider() { + return hostTransitionProviderCursor.current; + } + function pushHostContainer(fiber, nextRootInstance) { // Push current root instance onto the stack; // This allows us to reset root when portals are popped. @@ -3841,6 +3868,16 @@ if (__DEV__) { } function pushHostContext(fiber) { + if (enableFormActions && enableAsyncActions) { + var stateHook = fiber.memoizedState; + + if (stateHook !== null) { + // Only provide context if this fiber has been upgraded by a host + // transition. We use the same optimization for regular host context below. + push(hostTransitionProviderCursor, fiber, fiber); + } + } + var context = requiredContext(contextStackCursor.current); var nextContext = getChildHostContext(); // Don't push this Fiber's context unless it's unique. @@ -3859,6 +3896,25 @@ if (__DEV__) { pop(contextStackCursor, fiber); pop(contextFiberStackCursor, fiber); } + + if (enableFormActions && enableAsyncActions) { + if (hostTransitionProviderCursor.current === fiber) { + // Do not pop unless this Fiber provided the current context. This is mostly + // a performance optimization, but conveniently it also prevents a potential + // data race where a host provider is upgraded (i.e. memoizedState becomes + // non-null) during a concurrent event. This is a bit of a flaw in the way + // we upgrade host components, but because we're accounting for it here, it + // should be fine. + pop(hostTransitionProviderCursor, fiber); // When popping the transition provider, we reset the context value back + // to `null`. We can do this because you're not allowd to nest forms. If + // we allowed for multiple nested host transition providers, then we'd + // need to reset this to the parent provider's status. + + { + HostTransitionContext._currentValue2 = null; + } + } + } } var isHydrating = false; // This flag allows for warning supression when we expect there to be mismatches @@ -8440,6 +8496,43 @@ if (__DEV__) { return children; } + + function renderTransitionAwareHostComponentWithHooks( + current, + workInProgress, + lanes + ) { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + return renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + lanes + ); + } + function TransitionAwareHostComponent() { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + var dispatcher = ReactCurrentDispatcher$1.current; + + var _dispatcher$useState = dispatcher.useState(), + maybeThenable = _dispatcher$useState[0]; + + if (typeof maybeThenable.then === "function") { + var thenable = maybeThenable; + return useThenable(thenable); + } else { + var status = maybeThenable; + return status; + } + } function bailoutHooks(current, workInProgress, lanes) { workInProgress.updateQueue = current.updateQueue; // TODO: Don't need to reset the flags here, because they're reset in the // complete phase (bubbleProperties). @@ -9394,6 +9487,256 @@ if (__DEV__) { var dispatch = hook.queue.dispatch; return [passthrough, dispatch]; } // useFormState actions run sequentially, because each action receives the + // previous state as an argument. We store pending actions on a queue. + + function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) { + throw new Error("Cannot update form state while rendering."); + } + + var last = actionQueue.pending; + + if (last === null) { + // There are no pending actions; this is the first one. We can run + // it immediately. + var newLast = { + payload: payload, + next: null // circular + }; + newLast.next = actionQueue.pending = newLast; + runFormStateAction(actionQueue, setState, payload); + } else { + // There's already an action running. Add to the queue. + var first = last.next; + var _newLast = { + payload: payload, + next: first + }; + actionQueue.pending = last.next = _newLast; + } + } + + function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action; + var prevState = actionQueue.state; // This is a fork of startTransition + + var prevTransition = ReactCurrentBatchConfig$2.transition; + var currentTransition = { + _callbacks: new Set() + }; + ReactCurrentBatchConfig$2.transition = currentTransition; + + { + ReactCurrentBatchConfig$2.transition._updatedFibers = new Set(); + } + + try { + var returnValue = action(prevState, payload); + + if ( + returnValue !== null && + typeof returnValue === "object" && // $FlowFixMe[method-unbinding] + typeof returnValue.then === "function" + ) { + var thenable = returnValue; + notifyTransitionCallbacks(currentTransition, thenable); // Attach a listener to read the return state of the action. As soon as + // this resolves, we can run the next action in the sequence. + + thenable.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ); + setState(thenable); + } else { + setState(returnValue); + var nextState = returnValue; + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + } + } catch (error) { + // This is a trick to get the `useFormState` hook to rethrow the error. + // When it unwraps the thenable with the `use` algorithm, the error + // will be thrown. + var rejectedThenable = { + then: function () {}, + status: "rejected", + reason: error // $FlowFixMe: Not sure why this doesn't work + }; + setState(rejectedThenable); + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$2.transition = prevTransition; + + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; + + currentTransition._updatedFibers.clear(); + + if (updatedFibersCount > 10) { + warn( + "Detected a large number of updates inside startTransition. " + + "If this is due to a subscription please re-write it to use React provided hooks. " + + "Otherwise concurrent mode guarantees are off the table." + ); + } + } + } + } + } + + function finishRunningFormStateAction(actionQueue, setState) { + // The action finished running. Pop it from the queue and run the next pending + // action, if there are any. + var last = actionQueue.pending; + + if (last !== null) { + var first = last.next; + + if (first === last) { + // This was the last action in the queue. + actionQueue.pending = null; + } else { + // Remove the first node from the circular queue. + var next = first.next; + last.next = next; // Run the next action. + + runFormStateAction(actionQueue, setState, next.payload); + } + } + } + + function formStateReducer(oldState, newState) { + return newState; + } + + function mountFormState(action, initialStateProp, permalink) { + var initialState = initialStateProp; + // the `use` algorithm during render. + + var stateHook = mountWorkInProgressHook(); + stateHook.memoizedState = stateHook.baseState = initialState; // TODO: Typing this "correctly" results in recursion limit errors + // const stateQueue: UpdateQueue, S | Awaited> = { + + var stateQueue = { + pending: null, + lanes: NoLanes, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialState + }; + stateHook.queue = stateQueue; + var setState = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + stateQueue + ); + stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + // shared between all instances of the hook. Similar to a regular state queue, + // but different because the actions are run sequentially, and they run in + // an event instead of during render. + + var actionQueueHook = mountWorkInProgressHook(); + var actionQueue = { + state: initialState, + dispatch: null, + // circular + action: action, + pending: null + }; + actionQueueHook.queue = actionQueue; + var dispatch = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + actionQueue, + setState + ); + actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this + // to detect when the action function changes so we can update it in + // an effect. + + actionQueueHook.memoizedState = action; + return [initialState, dispatch]; + } + + function updateFormState(action, initialState, permalink) { + var stateHook = updateWorkInProgressHook(); + var currentStateHook = currentHook; + return updateFormStateImpl(stateHook, currentStateHook, action); + } + + function updateFormStateImpl( + stateHook, + currentStateHook, + action, + initialState, + permalink + ) { + var _updateReducerImpl = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + ), + actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + + var state = + typeof actionResult === "object" && + actionResult !== null && // $FlowFixMe[method-unbinding] + typeof actionResult.then === "function" + ? useThenable(actionResult) + : actionResult; + var actionQueueHook = updateWorkInProgressHook(); + var actionQueue = actionQueueHook.queue; + var dispatch = actionQueue.dispatch; // Check if a new action was passed. If so, update it in an effect. + + var prevAction = actionQueueHook.memoizedState; + + if (action !== prevAction) { + currentlyRenderingFiber$1.flags |= Passive$1; + pushEffect( + HasEffect | Passive, + formStateActionEffect.bind(null, actionQueue, action), + createEffectInstance(), + null + ); + } + + return [state, dispatch]; + } + + function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; + } + + function rerenderFormState(action, initialState, permalink) { + // Unlike useState, useFormState doesn't support render phase updates. + // Also unlike useState, we need to replay all pending updates again in case + // the passthrough value changed. + // + // So instead of a forked re-render implementation that knows how to handle + // render phase udpates, we can use the same implementation as during a + // regular mount or update. + var stateHook = updateWorkInProgressHook(); + var currentStateHook = currentHook; + + if (currentStateHook !== null) { + // This is an update. Process the update queue. + return updateFormStateImpl(stateHook, currentStateHook, action); + } // This is a mount. No updates to process. + + var state = stateHook.memoizedState; + var actionQueueHook = updateWorkInProgressHook(); + var actionQueue = actionQueueHook.queue; + var dispatch = actionQueue.dispatch; // This may have changed during the rerender. + + actionQueueHook.memoizedState = action; + return [state, dispatch]; + } function pushEffect(tag, create, inst, deps) { var effect = { @@ -10063,6 +10406,15 @@ if (__DEV__) { return [isPending, start]; } + function useHostTransitionStatus() { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + var status = readContext(HostTransitionContext); + return status !== null ? status : NotPendingTransition; + } + function mountId() { var hook = mountWorkInProgressHook(); var root = getWorkInProgressRoot(); // TODO: In Fizz, id generation is specific to each server config. Maybe we @@ -10447,6 +10799,11 @@ if (__DEV__) { ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; } + if (enableFormActions && enableAsyncActions) { + ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError; + ContextOnlyDispatcher.useFormState = throwInvalidHookError; + } + if (enableAsyncActions) { ContextOnlyDispatcher.useOptimistic = throwInvalidHookError; } @@ -10617,6 +10974,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnMountInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnMountInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + mountHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { HooksDispatcherOnMountInDEV.useOptimistic = function useOptimistic( passthrough, @@ -10760,6 +11132,18 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnMountWithHookTypesInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnMountWithHookTypesInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { HooksDispatcherOnMountWithHookTypesInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -10902,6 +11286,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnUpdateInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnUpdateInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return updateFormState(action); + }; + } + if (enableAsyncActions) { HooksDispatcherOnUpdateInDEV.useOptimistic = function useOptimistic( passthrough, @@ -11046,6 +11445,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnRerenderInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnRerenderInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return rerenderFormState(action); + }; + } + if (enableAsyncActions) { HooksDispatcherOnRerenderInDEV.useOptimistic = function useOptimistic( passthrough, @@ -11214,6 +11628,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnMountInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnMountInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + mountHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnMountInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -11381,6 +11808,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnUpdateInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnUpdateInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + updateHookTypesDev(); + return updateFormState(action); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnUpdateInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -11548,6 +11988,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnRerenderInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnRerenderInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + updateHookTypesDev(); + return rerenderFormState(action); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnRerenderInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -14910,6 +15363,58 @@ if (__DEV__) { workInProgress.flags |= ContentReset; } + if (enableFormActions && enableAsyncActions) { + var memoizedState = workInProgress.memoizedState; + + if (memoizedState !== null) { + // This fiber has been upgraded to a stateful component. The only way + // happens currently is for form actions. We use hooks to track the + // pending and error state of the form. + // + // Once a fiber is upgraded to be stateful, it remains stateful for the + // rest of its lifetime. + var newState = renderTransitionAwareHostComponentWithHooks( + current, + workInProgress, + renderLanes + ); // If the transition state changed, propagate the change to all the + // descendents. We use Context as an implementation detail for this. + // + // This is intentionally set here instead of pushHostContext because + // pushHostContext gets called before we process the state hook, to avoid + // a state mismatch in the event that something suspends. + // + // NOTE: This assumes that there cannot be nested transition providers, + // because the only renderer that implements this feature is React DOM, + // and forms cannot be nested. If we did support nested providers, then + // we would need to push a context value even for host fibers that + // haven't been upgraded yet. + + { + HostTransitionContext._currentValue2 = newState; + } + + if (enableLazyContextPropagation); + else { + if (didReceiveUpdate) { + if (current !== null) { + var oldStateHook = current.memoizedState; + var oldState = oldStateHook.memoizedState; // This uses regular equality instead of Object.is because we assume + // that host transition state doesn't include NaN as a valid type. + + if (oldState !== newState) { + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + ); + } + } + } + } + } + } + markRef$1(current, workInProgress); reconcileChildren(current, workInProgress, nextChildren, renderLanes); return workInProgress.child; @@ -17880,6 +18385,34 @@ if (__DEV__) { } } } + } else if ( + enableFormActions && + enableAsyncActions && + parent === getHostTransitionProvider() + ) { + // During a host transition, a host component can act like a context + // provider. E.g. in React DOM, this would be a . + var _currentParent = parent.alternate; + + if (_currentParent === null) { + throw new Error( + "Should have a current fiber. This is a bug in React." + ); + } + + var oldStateHook = _currentParent.memoizedState; + var oldState = oldStateHook.memoizedState; + var newStateHook = parent.memoizedState; + var newState = newStateHook.memoizedState; // This uses regular equality instead of Object.is because we assume that + // host transition state doesn't include NaN as a valid type. + + if (oldState !== newState) { + if (contexts !== null) { + contexts.push(HostTransitionContext); + } else { + contexts = [HostTransitionContext]; + } + } } parent = parent.return; diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index d0ad3b5ca1..d0f6ad796b 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -72,6 +72,7 @@ var ReactSharedInternals = enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -1053,7 +1054,18 @@ function is(x, y) { var objectIs = "function" === typeof Object.is ? Object.is : is, contextStackCursor = createCursor(null), contextFiberStackCursor = createCursor(null), - rootInstanceStackCursor = createCursor(null); + rootInstanceStackCursor = createCursor(null), + hostTransitionProviderCursor = createCursor(null), + HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function pushHostContainer(fiber, nextRootInstance) { push(rootInstanceStackCursor, nextRootInstance); push(contextFiberStackCursor, fiber); @@ -1067,6 +1079,10 @@ function popHostContainer() { pop(rootInstanceStackCursor); } function pushHostContext(fiber) { + enableFormActions && + enableAsyncActions && + null !== fiber.memoizedState && + push(hostTransitionProviderCursor, fiber); contextStackCursor.current !== NO_CONTEXT && (push(contextFiberStackCursor, fiber), push(contextStackCursor, NO_CONTEXT)); @@ -1074,6 +1090,11 @@ function pushHostContext(fiber) { function popHostContext(fiber) { contextFiberStackCursor.current === fiber && (pop(contextStackCursor), pop(contextFiberStackCursor)); + enableFormActions && + enableAsyncActions && + hostTransitionProviderCursor.current === fiber && + (pop(hostTransitionProviderCursor), + (HostTransitionContext._currentValue2 = null)); } var hydrationErrors = null, concurrentQueues = [], @@ -2703,6 +2724,14 @@ function renderWithHooksAgain(workInProgress, Component, props, secondArg) { } while (didScheduleRenderPhaseUpdateDuringThisPass); return children; } +function TransitionAwareHostComponent() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var maybeThenable = ReactCurrentDispatcher$1.current.useState()[0]; + return "function" === typeof maybeThenable.then + ? useThenable(maybeThenable) + : maybeThenable; +} function bailoutHooks(current, workInProgress, lanes) { workInProgress.updateQueue = current.updateQueue; workInProgress.flags &= -2053; @@ -3090,6 +3119,140 @@ function rerenderOptimistic(passthrough, reducer) { hook.baseState = passthrough; return [passthrough, hook.queue.dispatch]; } +function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); + fiber = actionQueue.pending; + null === fiber + ? ((fiber = { payload: payload, next: null }), + (fiber.next = actionQueue.pending = fiber), + runFormStateAction(actionQueue, setState, payload)) + : (actionQueue.pending = fiber.next = + { payload: payload, next: fiber.next }); +} +function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action, + prevState = actionQueue.state, + prevTransition = ReactCurrentBatchConfig$2.transition, + currentTransition = { _callbacks: new Set() }; + ReactCurrentBatchConfig$2.transition = currentTransition; + try { + var returnValue = action(prevState, payload); + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then + ? (notifyTransitionCallbacks(currentTransition, returnValue), + returnValue.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ), + setState(returnValue)) + : (setState(returnValue), + (actionQueue.state = returnValue), + finishRunningFormStateAction(actionQueue, setState)); + } catch (error) { + setState({ then: function () {}, status: "rejected", reason: error }), + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$2.transition = prevTransition; + } +} +function finishRunningFormStateAction(actionQueue, setState) { + var last = actionQueue.pending; + if (null !== last) { + var first = last.next; + first === last + ? (actionQueue.pending = null) + : ((first = first.next), + (last.next = first), + runFormStateAction(actionQueue, setState, first.payload)); + } +} +function formStateReducer(oldState, newState) { + return newState; +} +function mountFormState(action, initialStateProp) { + var stateHook = mountWorkInProgressHook(); + stateHook.memoizedState = stateHook.baseState = initialStateProp; + var stateQueue = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialStateProp + }; + stateHook.queue = stateQueue; + stateHook = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + stateQueue + ); + stateQueue.dispatch = stateHook; + stateQueue = mountWorkInProgressHook(); + var actionQueue = { + state: initialStateProp, + dispatch: null, + action: action, + pending: null + }; + stateQueue.queue = actionQueue; + stateHook = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + actionQueue, + stateHook + ); + actionQueue.dispatch = stateHook; + stateQueue.memoizedState = action; + return [initialStateProp, stateHook]; +} +function updateFormState(action) { + var stateHook = updateWorkInProgressHook(); + return updateFormStateImpl(stateHook, currentHook, action); +} +function updateFormStateImpl(stateHook, currentStateHook, action) { + stateHook = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + )[0]; + stateHook = + "object" === typeof stateHook && + null !== stateHook && + "function" === typeof stateHook.then + ? useThenable(stateHook) + : stateHook; + currentStateHook = updateWorkInProgressHook(); + var actionQueue = currentStateHook.queue, + dispatch = actionQueue.dispatch; + action !== currentStateHook.memoizedState && + ((currentlyRenderingFiber$1.flags |= 2048), + pushEffect( + 9, + formStateActionEffect.bind(null, actionQueue, action), + { destroy: void 0 }, + null + )); + return [stateHook, dispatch]; +} +function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; +} +function rerenderFormState(action) { + var stateHook = updateWorkInProgressHook(), + currentStateHook = currentHook; + if (null !== currentStateHook) + return updateFormStateImpl(stateHook, currentStateHook, action); + stateHook = stateHook.memoizedState; + currentStateHook = updateWorkInProgressHook(); + var dispatch = currentStateHook.queue.dispatch; + currentStateHook.memoizedState = action; + return [stateHook, dispatch]; +} function pushEffect(tag, create, inst, deps) { tag = { tag: tag, create: create, inst: inst, deps: deps, next: null }; create = currentlyRenderingFiber$1.updateQueue; @@ -3286,6 +3449,12 @@ function startTransition( (ReactCurrentBatchConfig$2.transition = prevTransition); } } +function useHostTransitionStatus() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var status = readContext(HostTransitionContext); + return null !== status ? status : null; +} function updateId() { return updateWorkInProgressHook().memoizedState; } @@ -3437,6 +3606,10 @@ var ContextOnlyDispatcher = { ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError; ContextOnlyDispatcher.useMemoCache = throwInvalidHookError; ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; +enableFormActions && + enableAsyncActions && + ((ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError), + (ContextOnlyDispatcher.useFormState = throwInvalidHookError)); enableAsyncActions && (ContextOnlyDispatcher.useOptimistic = throwInvalidHookError); var HooksDispatcherOnMount = { @@ -3575,6 +3748,10 @@ HooksDispatcherOnMount.useEffectEvent = function (callback) { return ref.impl.apply(void 0, arguments); }; }; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnMount.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnMount.useFormState = mountFormState)); enableAsyncActions && (HooksDispatcherOnMount.useOptimistic = mountOptimistic); var HooksDispatcherOnUpdate = { readContext: readContext, @@ -3617,6 +3794,10 @@ var HooksDispatcherOnUpdate = { HooksDispatcherOnUpdate.useCacheRefresh = updateRefresh; HooksDispatcherOnUpdate.useMemoCache = useMemoCache; HooksDispatcherOnUpdate.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnUpdate.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnUpdate.useFormState = updateFormState)); enableAsyncActions && (HooksDispatcherOnUpdate.useOptimistic = updateOptimistic); var HooksDispatcherOnRerender = { @@ -3662,6 +3843,11 @@ var HooksDispatcherOnRerender = { HooksDispatcherOnRerender.useCacheRefresh = updateRefresh; HooksDispatcherOnRerender.useMemoCache = useMemoCache; HooksDispatcherOnRerender.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnRerender.useHostTransitionStatus = + useHostTransitionStatus), + (HooksDispatcherOnRerender.useFormState = rerenderFormState)); enableAsyncActions && (HooksDispatcherOnRerender.useOptimistic = rerenderOptimistic); function resolveDefaultProps(Component, baseProps) { @@ -5625,6 +5811,18 @@ function propagateParentContextChanges( objectIs(parent.pendingProps.value, currentParent.value) || (null !== current ? current.push(context) : (current = [context])); } + } else if ( + enableFormActions && + enableAsyncActions && + parent === hostTransitionProviderCursor.current + ) { + currentParent = parent.alternate; + if (null === currentParent) throw Error(formatProdErrorMessage(387)); + currentParent.memoizedState.memoizedState !== + parent.memoizedState.memoizedState && + (null !== current + ? current.push(HostTransitionContext) + : (current = [HostTransitionContext])); } parent = parent.return; } @@ -5900,14 +6098,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$75 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$75 = lastTailNode), + for (var lastTailNode$77 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$77 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$75 + null === lastTailNode$77 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$75.sibling = null); + : (lastTailNode$77.sibling = null); } } function bubbleProperties(completedWork) { @@ -5917,19 +6115,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$76 = completedWork.child; null !== child$76; ) - (newChildLanes |= child$76.lanes | child$76.childLanes), - (subtreeFlags |= child$76.subtreeFlags & 31457280), - (subtreeFlags |= child$76.flags & 31457280), - (child$76.return = completedWork), - (child$76 = child$76.sibling); + for (var child$78 = completedWork.child; null !== child$78; ) + (newChildLanes |= child$78.lanes | child$78.childLanes), + (subtreeFlags |= child$78.subtreeFlags & 31457280), + (subtreeFlags |= child$78.flags & 31457280), + (child$78.return = completedWork), + (child$78 = child$78.sibling); else - for (child$76 = completedWork.child; null !== child$76; ) - (newChildLanes |= child$76.lanes | child$76.childLanes), - (subtreeFlags |= child$76.subtreeFlags), - (subtreeFlags |= child$76.flags), - (child$76.return = completedWork), - (child$76 = child$76.sibling); + for (child$78 = completedWork.child; null !== child$78; ) + (newChildLanes |= child$78.lanes | child$78.childLanes), + (subtreeFlags |= child$78.subtreeFlags), + (subtreeFlags |= child$78.flags), + (child$78.return = completedWork), + (child$78 = child$78.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -6106,11 +6304,11 @@ function completeWork(current, workInProgress, renderLanes) { null !== newProps.alternate.memoizedState && null !== newProps.alternate.memoizedState.cachePool && (instance = newProps.alternate.memoizedState.cachePool.pool); - var cache$80 = null; + var cache$82 = null; null !== newProps.memoizedState && null !== newProps.memoizedState.cachePool && - (cache$80 = newProps.memoizedState.cachePool.pool); - cache$80 !== instance && (newProps.flags |= 2048); + (cache$82 = newProps.memoizedState.cachePool.pool); + cache$82 !== instance && (newProps.flags |= 2048); } renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), @@ -6140,8 +6338,8 @@ function completeWork(current, workInProgress, renderLanes) { instance = workInProgress.memoizedState; if (null === instance) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - cache$80 = instance.rendering; - if (null === cache$80) + cache$82 = instance.rendering; + if (null === cache$82) if (newProps) cutOffTailIfNeeded(instance, !1); else { if ( @@ -6149,11 +6347,11 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - cache$80 = findFirstSuspended(current); - if (null !== cache$80) { + cache$82 = findFirstSuspended(current); + if (null !== cache$82) { workInProgress.flags |= 128; cutOffTailIfNeeded(instance, !1); - current = cache$80.updateQueue; + current = cache$82.updateQueue; workInProgress.updateQueue = current; scheduleRetryEffect(workInProgress, current); workInProgress.subtreeFlags = 0; @@ -6178,7 +6376,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if (((current = findFirstSuspended(cache$80)), null !== current)) { + if (((current = findFirstSuspended(cache$82)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -6188,7 +6386,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(instance, !0), null === instance.tail && "hidden" === instance.tailMode && - !cache$80.alternate) + !cache$82.alternate) ) return bubbleProperties(workInProgress), null; } else @@ -6200,13 +6398,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(instance, !1), (workInProgress.lanes = 4194304)); instance.isBackwards - ? ((cache$80.sibling = workInProgress.child), - (workInProgress.child = cache$80)) + ? ((cache$82.sibling = workInProgress.child), + (workInProgress.child = cache$82)) : ((current = instance.last), null !== current - ? (current.sibling = cache$80) - : (workInProgress.child = cache$80), - (instance.last = cache$80)); + ? (current.sibling = cache$82) + : (workInProgress.child = cache$82), + (instance.last = cache$82)); } if (null !== instance.tail) return ( @@ -6464,8 +6662,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$98) { - captureCommitPhaseError(current, nearestMountedAncestor, error$98); + } catch (error$100) { + captureCommitPhaseError(current, nearestMountedAncestor, error$100); } else ref.current = null; } @@ -6667,11 +6865,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$99) { + } catch (error$101) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$99 + error$101 ); } } @@ -7264,8 +7462,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$107) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$107); + } catch (error$109) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$109); } } break; @@ -7299,8 +7497,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { finishedWork.updateQueue = null; try { flags._applyProps(flags, newProps, current); - } catch (error$110) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$110); + } catch (error$112) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$112); } } break; @@ -7336,8 +7534,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$112) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$112); + } catch (error$114) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$114); } flags = finishedWork.updateQueue; null !== flags && @@ -7477,12 +7675,12 @@ function commitReconciliationEffects(finishedWork) { break; case 3: case 4: - var parent$102 = JSCompiler_inline_result.stateNode.containerInfo, - before$103 = getHostSibling(finishedWork); + var parent$104 = JSCompiler_inline_result.stateNode.containerInfo, + before$105 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$103, - parent$102 + before$105, + parent$104 ); break; default: @@ -7943,9 +8141,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$118 = finishedWork.stateNode; + var instance$120 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$118._visibility & 4 + ? instance$120._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -7958,7 +8156,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$118._visibility |= 4), + : ((instance$120._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -7966,7 +8164,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$118._visibility |= 4), + : ((instance$120._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -7979,7 +8177,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$118 + instance$120 ); break; case 24: @@ -8819,8 +9017,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$126) { - handleThrow(root, thrownValue$126); + } catch (thrownValue$128) { + handleThrow(root, thrownValue$128); } while (1); lanes && root.shellSuspendCounter++; @@ -8925,8 +9123,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$128) { - handleThrow(root, thrownValue$128); + } catch (thrownValue$130) { + handleThrow(root, thrownValue$130); } while (1); resetContextDependencies(); @@ -9529,21 +9727,45 @@ beginWork = function (current, workInProgress, renderLanes) { case 26: case 27: case 5: - return ( - pushHostContext(workInProgress), - (Component = workInProgress.type), - (context = workInProgress.pendingProps), - (nextProps = null !== current ? current.memoizedProps : null), - (nextCache = context.children), - shouldSetTextContent(Component, context) - ? (nextCache = null) - : null !== nextProps && - shouldSetTextContent(Component, nextProps) && - (workInProgress.flags |= 32), - markRef$1(current, workInProgress), - reconcileChildren(current, workInProgress, nextCache, renderLanes), - workInProgress.child - ); + pushHostContext(workInProgress); + context = workInProgress.type; + nextProps = workInProgress.pendingProps; + nextCache = null !== current ? current.memoizedProps : null; + Component = nextProps.children; + shouldSetTextContent(context, nextProps) + ? (Component = null) + : null !== nextCache && + shouldSetTextContent(context, nextCache) && + (workInProgress.flags |= 32); + if ( + enableFormActions && + enableAsyncActions && + null !== workInProgress.memoizedState + ) { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + context = renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + renderLanes + ); + HostTransitionContext._currentValue2 = context; + enableLazyContextPropagation || + (didReceiveUpdate && + null !== current && + current.memoizedState.memoizedState !== context && + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + )); + } + markRef$1(current, workInProgress); + reconcileChildren(current, workInProgress, Component, renderLanes); + return workInProgress.child; case 6: return null; case 13: @@ -10321,19 +10543,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1146 = { + devToolsConfig$jscomp$inline_1152 = { findFiberByHostInstance: function () { return null; }, bundleType: 0, - version: "18.3.0-www-classic-625f3aa2", + version: "18.3.0-www-classic-871e6cd4", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1312 = { - bundleType: devToolsConfig$jscomp$inline_1146.bundleType, - version: devToolsConfig$jscomp$inline_1146.version, - rendererPackageName: devToolsConfig$jscomp$inline_1146.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1146.rendererConfig, +var internals$jscomp$inline_1323 = { + bundleType: devToolsConfig$jscomp$inline_1152.bundleType, + version: devToolsConfig$jscomp$inline_1152.version, + rendererPackageName: devToolsConfig$jscomp$inline_1152.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1152.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -10350,26 +10572,26 @@ var internals$jscomp$inline_1312 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1146.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1152.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-625f3aa2" + reconcilerVersion: "18.3.0-www-classic-871e6cd4" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1313 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1324 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1313.isDisabled && - hook$jscomp$inline_1313.supportsFiber + !hook$jscomp$inline_1324.isDisabled && + hook$jscomp$inline_1324.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1313.inject( - internals$jscomp$inline_1312 + (rendererID = hook$jscomp$inline_1324.inject( + internals$jscomp$inline_1323 )), - (injectedHook = hook$jscomp$inline_1313); + (injectedHook = hook$jscomp$inline_1324); } catch (err) {} } var Path = Mode$1.Path; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index 21a84846ed..7bd833f423 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -72,6 +72,7 @@ var ReactSharedInternals = enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -860,7 +861,18 @@ function is(x, y) { var objectIs = "function" === typeof Object.is ? Object.is : is, contextStackCursor = createCursor(null), contextFiberStackCursor = createCursor(null), - rootInstanceStackCursor = createCursor(null); + rootInstanceStackCursor = createCursor(null), + hostTransitionProviderCursor = createCursor(null), + HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function pushHostContainer(fiber, nextRootInstance) { push(rootInstanceStackCursor, nextRootInstance); push(contextFiberStackCursor, fiber); @@ -874,6 +886,10 @@ function popHostContainer() { pop(rootInstanceStackCursor); } function pushHostContext(fiber) { + enableFormActions && + enableAsyncActions && + null !== fiber.memoizedState && + push(hostTransitionProviderCursor, fiber); contextStackCursor.current !== NO_CONTEXT && (push(contextFiberStackCursor, fiber), push(contextStackCursor, NO_CONTEXT)); @@ -881,6 +897,11 @@ function pushHostContext(fiber) { function popHostContext(fiber) { contextFiberStackCursor.current === fiber && (pop(contextStackCursor), pop(contextFiberStackCursor)); + enableFormActions && + enableAsyncActions && + hostTransitionProviderCursor.current === fiber && + (pop(hostTransitionProviderCursor), + (HostTransitionContext._currentValue2 = null)); } var hydrationErrors = null, concurrentQueues = [], @@ -2510,6 +2531,14 @@ function renderWithHooksAgain(workInProgress, Component, props, secondArg) { } while (didScheduleRenderPhaseUpdateDuringThisPass); return children; } +function TransitionAwareHostComponent() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var maybeThenable = ReactCurrentDispatcher$1.current.useState()[0]; + return "function" === typeof maybeThenable.then + ? useThenable(maybeThenable) + : maybeThenable; +} function bailoutHooks(current, workInProgress, lanes) { workInProgress.updateQueue = current.updateQueue; workInProgress.flags &= -2053; @@ -2897,6 +2926,140 @@ function rerenderOptimistic(passthrough, reducer) { hook.baseState = passthrough; return [passthrough, hook.queue.dispatch]; } +function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); + fiber = actionQueue.pending; + null === fiber + ? ((fiber = { payload: payload, next: null }), + (fiber.next = actionQueue.pending = fiber), + runFormStateAction(actionQueue, setState, payload)) + : (actionQueue.pending = fiber.next = + { payload: payload, next: fiber.next }); +} +function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action, + prevState = actionQueue.state, + prevTransition = ReactCurrentBatchConfig$2.transition, + currentTransition = { _callbacks: new Set() }; + ReactCurrentBatchConfig$2.transition = currentTransition; + try { + var returnValue = action(prevState, payload); + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then + ? (notifyTransitionCallbacks(currentTransition, returnValue), + returnValue.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ), + setState(returnValue)) + : (setState(returnValue), + (actionQueue.state = returnValue), + finishRunningFormStateAction(actionQueue, setState)); + } catch (error) { + setState({ then: function () {}, status: "rejected", reason: error }), + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$2.transition = prevTransition; + } +} +function finishRunningFormStateAction(actionQueue, setState) { + var last = actionQueue.pending; + if (null !== last) { + var first = last.next; + first === last + ? (actionQueue.pending = null) + : ((first = first.next), + (last.next = first), + runFormStateAction(actionQueue, setState, first.payload)); + } +} +function formStateReducer(oldState, newState) { + return newState; +} +function mountFormState(action, initialStateProp) { + var stateHook = mountWorkInProgressHook(); + stateHook.memoizedState = stateHook.baseState = initialStateProp; + var stateQueue = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialStateProp + }; + stateHook.queue = stateQueue; + stateHook = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + stateQueue + ); + stateQueue.dispatch = stateHook; + stateQueue = mountWorkInProgressHook(); + var actionQueue = { + state: initialStateProp, + dispatch: null, + action: action, + pending: null + }; + stateQueue.queue = actionQueue; + stateHook = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + actionQueue, + stateHook + ); + actionQueue.dispatch = stateHook; + stateQueue.memoizedState = action; + return [initialStateProp, stateHook]; +} +function updateFormState(action) { + var stateHook = updateWorkInProgressHook(); + return updateFormStateImpl(stateHook, currentHook, action); +} +function updateFormStateImpl(stateHook, currentStateHook, action) { + stateHook = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + )[0]; + stateHook = + "object" === typeof stateHook && + null !== stateHook && + "function" === typeof stateHook.then + ? useThenable(stateHook) + : stateHook; + currentStateHook = updateWorkInProgressHook(); + var actionQueue = currentStateHook.queue, + dispatch = actionQueue.dispatch; + action !== currentStateHook.memoizedState && + ((currentlyRenderingFiber$1.flags |= 2048), + pushEffect( + 9, + formStateActionEffect.bind(null, actionQueue, action), + { destroy: void 0 }, + null + )); + return [stateHook, dispatch]; +} +function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; +} +function rerenderFormState(action) { + var stateHook = updateWorkInProgressHook(), + currentStateHook = currentHook; + if (null !== currentStateHook) + return updateFormStateImpl(stateHook, currentStateHook, action); + stateHook = stateHook.memoizedState; + currentStateHook = updateWorkInProgressHook(); + var dispatch = currentStateHook.queue.dispatch; + currentStateHook.memoizedState = action; + return [stateHook, dispatch]; +} function pushEffect(tag, create, inst, deps) { tag = { tag: tag, create: create, inst: inst, deps: deps, next: null }; create = currentlyRenderingFiber$1.updateQueue; @@ -3093,6 +3256,12 @@ function startTransition( (ReactCurrentBatchConfig$2.transition = prevTransition); } } +function useHostTransitionStatus() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var status = readContext(HostTransitionContext); + return null !== status ? status : null; +} function updateId() { return updateWorkInProgressHook().memoizedState; } @@ -3244,6 +3413,10 @@ var ContextOnlyDispatcher = { ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError; ContextOnlyDispatcher.useMemoCache = throwInvalidHookError; ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; +enableFormActions && + enableAsyncActions && + ((ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError), + (ContextOnlyDispatcher.useFormState = throwInvalidHookError)); enableAsyncActions && (ContextOnlyDispatcher.useOptimistic = throwInvalidHookError); var HooksDispatcherOnMount = { @@ -3382,6 +3555,10 @@ HooksDispatcherOnMount.useEffectEvent = function (callback) { return ref.impl.apply(void 0, arguments); }; }; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnMount.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnMount.useFormState = mountFormState)); enableAsyncActions && (HooksDispatcherOnMount.useOptimistic = mountOptimistic); var HooksDispatcherOnUpdate = { readContext: readContext, @@ -3424,6 +3601,10 @@ var HooksDispatcherOnUpdate = { HooksDispatcherOnUpdate.useCacheRefresh = updateRefresh; HooksDispatcherOnUpdate.useMemoCache = useMemoCache; HooksDispatcherOnUpdate.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnUpdate.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnUpdate.useFormState = updateFormState)); enableAsyncActions && (HooksDispatcherOnUpdate.useOptimistic = updateOptimistic); var HooksDispatcherOnRerender = { @@ -3469,6 +3650,11 @@ var HooksDispatcherOnRerender = { HooksDispatcherOnRerender.useCacheRefresh = updateRefresh; HooksDispatcherOnRerender.useMemoCache = useMemoCache; HooksDispatcherOnRerender.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnRerender.useHostTransitionStatus = + useHostTransitionStatus), + (HooksDispatcherOnRerender.useFormState = rerenderFormState)); enableAsyncActions && (HooksDispatcherOnRerender.useOptimistic = rerenderOptimistic); function resolveDefaultProps(Component, baseProps) { @@ -5381,6 +5567,18 @@ function propagateParentContextChanges( objectIs(parent.pendingProps.value, currentParent.value) || (null !== current ? current.push(context) : (current = [context])); } + } else if ( + enableFormActions && + enableAsyncActions && + parent === hostTransitionProviderCursor.current + ) { + currentParent = parent.alternate; + if (null === currentParent) throw Error(formatProdErrorMessage(387)); + currentParent.memoizedState.memoizedState !== + parent.memoizedState.memoizedState && + (null !== current + ? current.push(HostTransitionContext) + : (current = [HostTransitionContext])); } parent = parent.return; } @@ -5656,14 +5854,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$75 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$75 = lastTailNode), + for (var lastTailNode$77 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$77 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$75 + null === lastTailNode$77 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$75.sibling = null); + : (lastTailNode$77.sibling = null); } } function bubbleProperties(completedWork) { @@ -5673,19 +5871,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$76 = completedWork.child; null !== child$76; ) - (newChildLanes |= child$76.lanes | child$76.childLanes), - (subtreeFlags |= child$76.subtreeFlags & 31457280), - (subtreeFlags |= child$76.flags & 31457280), - (child$76.return = completedWork), - (child$76 = child$76.sibling); + for (var child$78 = completedWork.child; null !== child$78; ) + (newChildLanes |= child$78.lanes | child$78.childLanes), + (subtreeFlags |= child$78.subtreeFlags & 31457280), + (subtreeFlags |= child$78.flags & 31457280), + (child$78.return = completedWork), + (child$78 = child$78.sibling); else - for (child$76 = completedWork.child; null !== child$76; ) - (newChildLanes |= child$76.lanes | child$76.childLanes), - (subtreeFlags |= child$76.subtreeFlags), - (subtreeFlags |= child$76.flags), - (child$76.return = completedWork), - (child$76 = child$76.sibling); + for (child$78 = completedWork.child; null !== child$78; ) + (newChildLanes |= child$78.lanes | child$78.childLanes), + (subtreeFlags |= child$78.subtreeFlags), + (subtreeFlags |= child$78.flags), + (child$78.return = completedWork), + (child$78 = child$78.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -5856,11 +6054,11 @@ function completeWork(current, workInProgress, renderLanes) { null !== newProps.alternate.memoizedState && null !== newProps.alternate.memoizedState.cachePool && (instance = newProps.alternate.memoizedState.cachePool.pool); - var cache$80 = null; + var cache$82 = null; null !== newProps.memoizedState && null !== newProps.memoizedState.cachePool && - (cache$80 = newProps.memoizedState.cachePool.pool); - cache$80 !== instance && (newProps.flags |= 2048); + (cache$82 = newProps.memoizedState.cachePool.pool); + cache$82 !== instance && (newProps.flags |= 2048); } renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), @@ -5886,8 +6084,8 @@ function completeWork(current, workInProgress, renderLanes) { instance = workInProgress.memoizedState; if (null === instance) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - cache$80 = instance.rendering; - if (null === cache$80) + cache$82 = instance.rendering; + if (null === cache$82) if (newProps) cutOffTailIfNeeded(instance, !1); else { if ( @@ -5895,11 +6093,11 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - cache$80 = findFirstSuspended(current); - if (null !== cache$80) { + cache$82 = findFirstSuspended(current); + if (null !== cache$82) { workInProgress.flags |= 128; cutOffTailIfNeeded(instance, !1); - current = cache$80.updateQueue; + current = cache$82.updateQueue; workInProgress.updateQueue = current; scheduleRetryEffect(workInProgress, current); workInProgress.subtreeFlags = 0; @@ -5924,7 +6122,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if (((current = findFirstSuspended(cache$80)), null !== current)) { + if (((current = findFirstSuspended(cache$82)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -5934,7 +6132,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(instance, !0), null === instance.tail && "hidden" === instance.tailMode && - !cache$80.alternate) + !cache$82.alternate) ) return bubbleProperties(workInProgress), null; } else @@ -5946,13 +6144,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(instance, !1), (workInProgress.lanes = 4194304)); instance.isBackwards - ? ((cache$80.sibling = workInProgress.child), - (workInProgress.child = cache$80)) + ? ((cache$82.sibling = workInProgress.child), + (workInProgress.child = cache$82)) : ((current = instance.last), null !== current - ? (current.sibling = cache$80) - : (workInProgress.child = cache$80), - (instance.last = cache$80)); + ? (current.sibling = cache$82) + : (workInProgress.child = cache$82), + (instance.last = cache$82)); } if (null !== instance.tail) return ( @@ -6201,8 +6399,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$97) { - captureCommitPhaseError(current, nearestMountedAncestor, error$97); + } catch (error$99) { + captureCommitPhaseError(current, nearestMountedAncestor, error$99); } else ref.current = null; } @@ -6404,11 +6602,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$98) { + } catch (error$100) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$98 + error$100 ); } } @@ -7001,8 +7199,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$106) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$106); + } catch (error$108) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$108); } } break; @@ -7036,8 +7234,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { finishedWork.updateQueue = null; try { flags._applyProps(flags, newProps, current); - } catch (error$109) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$109); + } catch (error$111) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$111); } } break; @@ -7073,8 +7271,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$111) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$111); + } catch (error$113) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$113); } flags = finishedWork.updateQueue; null !== flags && @@ -7214,12 +7412,12 @@ function commitReconciliationEffects(finishedWork) { break; case 3: case 4: - var parent$101 = JSCompiler_inline_result.stateNode.containerInfo, - before$102 = getHostSibling(finishedWork); + var parent$103 = JSCompiler_inline_result.stateNode.containerInfo, + before$104 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$102, - parent$101 + before$104, + parent$103 ); break; default: @@ -7680,9 +7878,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$117 = finishedWork.stateNode; + var instance$119 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$117._visibility & 4 + ? instance$119._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -7695,7 +7893,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$117._visibility |= 4), + : ((instance$119._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -7703,7 +7901,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$117._visibility |= 4), + : ((instance$119._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -7716,7 +7914,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$117 + instance$119 ); break; case 24: @@ -8556,8 +8754,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$125) { - handleThrow(root, thrownValue$125); + } catch (thrownValue$127) { + handleThrow(root, thrownValue$127); } while (1); lanes && root.shellSuspendCounter++; @@ -8662,8 +8860,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$127) { - handleThrow(root, thrownValue$127); + } catch (thrownValue$129) { + handleThrow(root, thrownValue$129); } while (1); resetContextDependencies(); @@ -9255,21 +9453,45 @@ beginWork = function (current, workInProgress, renderLanes) { case 26: case 27: case 5: - return ( - pushHostContext(workInProgress), - (Component = workInProgress.type), - (init = workInProgress.pendingProps), - (nextProps = null !== current ? current.memoizedProps : null), - (nextCache = init.children), - shouldSetTextContent(Component, init) - ? (nextCache = null) - : null !== nextProps && - shouldSetTextContent(Component, nextProps) && - (workInProgress.flags |= 32), - markRef$1(current, workInProgress), - reconcileChildren(current, workInProgress, nextCache, renderLanes), - workInProgress.child - ); + pushHostContext(workInProgress); + init = workInProgress.type; + nextProps = workInProgress.pendingProps; + nextCache = null !== current ? current.memoizedProps : null; + Component = nextProps.children; + shouldSetTextContent(init, nextProps) + ? (Component = null) + : null !== nextCache && + shouldSetTextContent(init, nextCache) && + (workInProgress.flags |= 32); + if ( + enableFormActions && + enableAsyncActions && + null !== workInProgress.memoizedState + ) { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + init = renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + renderLanes + ); + HostTransitionContext._currentValue2 = init; + enableLazyContextPropagation || + (didReceiveUpdate && + null !== current && + current.memoizedState.memoizedState !== init && + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + )); + } + markRef$1(current, workInProgress); + reconcileChildren(current, workInProgress, Component, renderLanes); + return workInProgress.child; case 6: return null; case 13: @@ -9987,19 +10209,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1126 = { + devToolsConfig$jscomp$inline_1132 = { findFiberByHostInstance: function () { return null; }, bundleType: 0, - version: "18.3.0-www-modern-5679160e", + version: "18.3.0-www-modern-83468ada", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1292 = { - bundleType: devToolsConfig$jscomp$inline_1126.bundleType, - version: devToolsConfig$jscomp$inline_1126.version, - rendererPackageName: devToolsConfig$jscomp$inline_1126.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1126.rendererConfig, +var internals$jscomp$inline_1303 = { + bundleType: devToolsConfig$jscomp$inline_1132.bundleType, + version: devToolsConfig$jscomp$inline_1132.version, + rendererPackageName: devToolsConfig$jscomp$inline_1132.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1132.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -10016,26 +10238,26 @@ var internals$jscomp$inline_1292 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1126.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1132.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-5679160e" + reconcilerVersion: "18.3.0-www-modern-83468ada" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1293 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1304 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1293.isDisabled && - hook$jscomp$inline_1293.supportsFiber + !hook$jscomp$inline_1304.isDisabled && + hook$jscomp$inline_1304.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1293.inject( - internals$jscomp$inline_1292 + (rendererID = hook$jscomp$inline_1304.inject( + internals$jscomp$inline_1303 )), - (injectedHook = hook$jscomp$inline_1293); + (injectedHook = hook$jscomp$inline_1304); } catch (err) {} } var Path = Mode$1.Path; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index ac550ae24d..8562b1ffdc 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -137,11 +137,10 @@ if (__DEV__) { enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane, enableRetryLaneExpiration = dynamicFeatureFlags.enableRetryLaneExpiration, enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -162,7 +161,6 @@ if (__DEV__) { var enableClientRenderFallbackOnTextMismatch = false; var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; - var enableFormActions = false; var enableSuspenseCallback = true; var FunctionComponent = 0; @@ -985,14 +983,56 @@ if (__DEV__) { return event === currentReplayingEvent; } - function useFormStatus() { + var ReactCurrentDispatcher$3 = ReactSharedInternals.ReactCurrentDispatcher; // Since the "not pending" value is always the same, we can reuse the + // same object across all transitions. + + var sharedNotPendingObject = { + pending: false, + data: null, + method: null, + action: null + }; + var NotPending = Object.freeze(sharedNotPendingObject); + + function resolveDispatcher() { + // Copied from react/src/ReactHooks.js. It's the same thing but in a + // different package. + var dispatcher = ReactCurrentDispatcher$3.current; + { + if (dispatcher === null) { + error( + "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for" + + " one of the following reasons:\n" + + "1. You might have mismatching versions of React and the renderer (such as React DOM)\n" + + "2. You might be breaking the Rules of Hooks\n" + + "3. You might have more than one copy of React in the same app\n" + + "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." + ); + } + } // Will result in a null access error if accessed outside render phase. We + // intentionally don't throw our own error because this is in a hot path. + // Also helps ensure this is inlined. + + return dispatcher; + } + + function useFormStatus() { + if (!(enableFormActions && enableAsyncActions)) { throw new Error("Not implemented."); + } else { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] We know this exists because of the feature check above. + + return dispatcher.useHostTransitionStatus(); } } function useFormState(action, initialState, permalink) { - { + if (!(enableFormActions && enableAsyncActions)) { throw new Error("Not implemented."); + } else { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional + + return dispatcher.useFormState(action, initialState, permalink); } } @@ -1050,6 +1090,27 @@ if (__DEV__) { var contextStackCursor$1 = createCursor(null); var contextFiberStackCursor = createCursor(null); var rootInstanceStackCursor = createCursor(null); // Represents the nearest host transition provider (in React DOM, a ) + // NOTE: Since forms cannot be nested, and this feature is only implemented by + // React DOM, we don't technically need this to be a stack. It could be a single + // module variable instead. + + var hostTransitionProviderCursor = createCursor(null); // TODO: This should initialize to NotPendingTransition, a constant + // imported from the fiber config. However, because of a cycle in the module + // graph, that value isn't defined during this module's initialization. I can't + // think of a way to work around this without moving that value out of the + // fiber config. For now, the "no provider" case is handled when reading, + // inside useHostTransitionStatus. + + var HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function requiredContext(c) { { @@ -1073,6 +1134,10 @@ if (__DEV__) { return rootInstance; } + function getHostTransitionProvider() { + return hostTransitionProviderCursor.current; + } + function pushHostContainer(fiber, nextRootInstance) { // Push current root instance onto the stack; // This allows us to reset root when portals are popped. @@ -1104,6 +1169,16 @@ if (__DEV__) { } function pushHostContext(fiber) { + if (enableFormActions && enableAsyncActions) { + var stateHook = fiber.memoizedState; + + if (stateHook !== null) { + // Only provide context if this fiber has been upgraded by a host + // transition. We use the same optimization for regular host context below. + push(hostTransitionProviderCursor, fiber, fiber); + } + } + var context = requiredContext(contextStackCursor$1.current); var nextContext = getChildHostContext(context, fiber.type); // Don't push this Fiber's context unless it's unique. @@ -1122,6 +1197,25 @@ if (__DEV__) { pop(contextStackCursor$1, fiber); pop(contextFiberStackCursor, fiber); } + + if (enableFormActions && enableAsyncActions) { + if (hostTransitionProviderCursor.current === fiber) { + // Do not pop unless this Fiber provided the current context. This is mostly + // a performance optimization, but conveniently it also prevents a potential + // data race where a host provider is upgraded (i.e. memoizedState becomes + // non-null) during a concurrent event. This is a bit of a flaw in the way + // we upgrade host components, but because we're accounting for it here, it + // should be fine. + pop(hostTransitionProviderCursor, fiber); // When popping the transition provider, we reset the context value back + // to `null`. We can do this because you're not allowd to nest forms. If + // we allowed for multiple nested host transition providers, then we'd + // need to reset this to the parent provider's status. + + { + HostTransitionContext._currentValue = null; + } + } + } } // This module only exists as an ESM wrapper around the external CommonJS @@ -3135,19 +3229,15 @@ if (__DEV__) { // it would be expected that they end up not having an attribute. return expected; - case "function": - if (enableCustomElementPropertySupport) { + case "function": { + return expected; + } + + case "boolean": { + if (expected === false) { return expected; } - - break; - - case "boolean": - if (enableCustomElementPropertySupport) { - if (expected === false) { - return expected; - } - } + } } return expected === undefined ? undefined : null; @@ -3155,7 +3245,7 @@ if (__DEV__) { var value = node.getAttribute(name); - if (enableCustomElementPropertySupport) { + { if (value === "" && expected === true) { return true; } @@ -6848,6 +6938,23 @@ if (__DEV__) { return true; } + if (enableFormActions) { + // Actions are special because unlike events they can have other value types. + if (typeof value === "function") { + if (tagName === "form" && name === "action") { + return true; + } + + if (tagName === "input" && name === "formAction") { + return true; + } + + if (tagName === "button" && name === "formAction") { + return true; + } + } + } // We can't rely on the event system being injected on the server. + if (eventRegistry != null) { var registrationNameDependencies = eventRegistry.registrationNameDependencies, @@ -6996,10 +7103,9 @@ if (__DEV__) { case "innerText": // Properties - case "textContent": - if (enableCustomElementPropertySupport) { - return true; - } + case "textContent": { + return true; + } } switch (typeof value) { @@ -8658,6 +8764,34 @@ if (__DEV__) { } } + function tryToClaimNextHydratableFormMarkerInstance(fiber) { + if (!isHydrating) { + return false; + } + + if (nextHydratableInstance) { + var markerInstance = canHydrateFormStateMarker( + nextHydratableInstance, + rootOrSingletonContext + ); + + if (markerInstance) { + // Found the marker instance. + nextHydratableInstance = getNextHydratableSibling(markerInstance); // Return true if this marker instance should use the state passed + // to hydrateRoot. + // TODO: As an optimization, Fizz should only emit these markers if form + // state is passed at the root. + + return isFormStateMarkerMatching(markerInstance); + } + } // Should have found a marker instance. Throw an error to trigger client + // rendering. We don't bother to check if we're in a concurrent root because + // useFormState is a new API, so backwards compat is not an issue. + + throwOnHydrationMismatch(); + return false; + } + function prepareToHydrateHostInstance(fiber, hostContext) { var instance = fiber.stateNode; var shouldWarnIfMismatchDev = !didSuspendOrErrorDEV; @@ -8822,7 +8956,8 @@ if (__DEV__) { fiber.tag !== HostSingleton && !( fiber.tag === HostComponent && - shouldSetTextContent(fiber.type, fiber.memoizedProps) + (!shouldDeleteUnhydratedTailInstances(fiber.type) || + shouldSetTextContent(fiber.type, fiber.memoizedProps)) ) ) { shouldClear = true; @@ -13292,6 +13427,43 @@ if (__DEV__) { return children; } + + function renderTransitionAwareHostComponentWithHooks( + current, + workInProgress, + lanes + ) { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + return renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + lanes + ); + } + function TransitionAwareHostComponent() { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + var dispatcher = ReactCurrentDispatcher$1.current; + + var _dispatcher$useState = dispatcher.useState(), + maybeThenable = _dispatcher$useState[0]; + + if (typeof maybeThenable.then === "function") { + var thenable = maybeThenable; + return useThenable(thenable); + } else { + var status = maybeThenable; + return status; + } + } function checkDidRenderIdHook() { // This should be called immediately after every renderWithHooks call. // Conceptually, it's part of the return value of renderWithHooks; it's only a @@ -14288,6 +14460,271 @@ if (__DEV__) { var dispatch = hook.queue.dispatch; return [passthrough, dispatch]; } // useFormState actions run sequentially, because each action receives the + // previous state as an argument. We store pending actions on a queue. + + function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) { + throw new Error("Cannot update form state while rendering."); + } + + var last = actionQueue.pending; + + if (last === null) { + // There are no pending actions; this is the first one. We can run + // it immediately. + var newLast = { + payload: payload, + next: null // circular + }; + newLast.next = actionQueue.pending = newLast; + runFormStateAction(actionQueue, setState, payload); + } else { + // There's already an action running. Add to the queue. + var first = last.next; + var _newLast = { + payload: payload, + next: first + }; + actionQueue.pending = last.next = _newLast; + } + } + + function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action; + var prevState = actionQueue.state; // This is a fork of startTransition + + var prevTransition = ReactCurrentBatchConfig$3.transition; + var currentTransition = { + _callbacks: new Set() + }; + ReactCurrentBatchConfig$3.transition = currentTransition; + + { + ReactCurrentBatchConfig$3.transition._updatedFibers = new Set(); + } + + try { + var returnValue = action(prevState, payload); + + if ( + returnValue !== null && + typeof returnValue === "object" && // $FlowFixMe[method-unbinding] + typeof returnValue.then === "function" + ) { + var thenable = returnValue; + notifyTransitionCallbacks(currentTransition, thenable); // Attach a listener to read the return state of the action. As soon as + // this resolves, we can run the next action in the sequence. + + thenable.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ); + setState(thenable); + } else { + setState(returnValue); + var nextState = returnValue; + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + } + } catch (error) { + // This is a trick to get the `useFormState` hook to rethrow the error. + // When it unwraps the thenable with the `use` algorithm, the error + // will be thrown. + var rejectedThenable = { + then: function () {}, + status: "rejected", + reason: error // $FlowFixMe: Not sure why this doesn't work + }; + setState(rejectedThenable); + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$3.transition = prevTransition; + + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; + + currentTransition._updatedFibers.clear(); + + if (updatedFibersCount > 10) { + warn( + "Detected a large number of updates inside startTransition. " + + "If this is due to a subscription please re-write it to use React provided hooks. " + + "Otherwise concurrent mode guarantees are off the table." + ); + } + } + } + } + } + + function finishRunningFormStateAction(actionQueue, setState) { + // The action finished running. Pop it from the queue and run the next pending + // action, if there are any. + var last = actionQueue.pending; + + if (last !== null) { + var first = last.next; + + if (first === last) { + // This was the last action in the queue. + actionQueue.pending = null; + } else { + // Remove the first node from the circular queue. + var next = first.next; + last.next = next; // Run the next action. + + runFormStateAction(actionQueue, setState, next.payload); + } + } + } + + function formStateReducer(oldState, newState) { + return newState; + } + + function mountFormState(action, initialStateProp, permalink) { + var initialState = initialStateProp; + + if (getIsHydrating()) { + var root = getWorkInProgressRoot(); + var ssrFormState = root.formState; // If a formState option was passed to the root, there are form state + // markers that we need to hydrate. These indicate whether the form state + // matches this hook instance. + + if (ssrFormState !== null) { + var isMatching = tryToClaimNextHydratableFormMarkerInstance(); + + if (isMatching) { + initialState = ssrFormState[0]; + } + } + } // State hook. The state is stored in a thenable which is then unwrapped by + // the `use` algorithm during render. + + var stateHook = mountWorkInProgressHook(); + stateHook.memoizedState = stateHook.baseState = initialState; // TODO: Typing this "correctly" results in recursion limit errors + // const stateQueue: UpdateQueue, S | Awaited> = { + + var stateQueue = { + pending: null, + lanes: NoLanes, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialState + }; + stateHook.queue = stateQueue; + var setState = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + stateQueue + ); + stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + // shared between all instances of the hook. Similar to a regular state queue, + // but different because the actions are run sequentially, and they run in + // an event instead of during render. + + var actionQueueHook = mountWorkInProgressHook(); + var actionQueue = { + state: initialState, + dispatch: null, + // circular + action: action, + pending: null + }; + actionQueueHook.queue = actionQueue; + var dispatch = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + actionQueue, + setState + ); + actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this + // to detect when the action function changes so we can update it in + // an effect. + + actionQueueHook.memoizedState = action; + return [initialState, dispatch]; + } + + function updateFormState(action, initialState, permalink) { + var stateHook = updateWorkInProgressHook(); + var currentStateHook = currentHook; + return updateFormStateImpl(stateHook, currentStateHook, action); + } + + function updateFormStateImpl( + stateHook, + currentStateHook, + action, + initialState, + permalink + ) { + var _updateReducerImpl = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + ), + actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + + var state = + typeof actionResult === "object" && + actionResult !== null && // $FlowFixMe[method-unbinding] + typeof actionResult.then === "function" + ? useThenable(actionResult) + : actionResult; + var actionQueueHook = updateWorkInProgressHook(); + var actionQueue = actionQueueHook.queue; + var dispatch = actionQueue.dispatch; // Check if a new action was passed. If so, update it in an effect. + + var prevAction = actionQueueHook.memoizedState; + + if (action !== prevAction) { + currentlyRenderingFiber$1.flags |= Passive$1; + pushEffect( + HasEffect | Passive, + formStateActionEffect.bind(null, actionQueue, action), + createEffectInstance(), + null + ); + } + + return [state, dispatch]; + } + + function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; + } + + function rerenderFormState(action, initialState, permalink) { + // Unlike useState, useFormState doesn't support render phase updates. + // Also unlike useState, we need to replay all pending updates again in case + // the passthrough value changed. + // + // So instead of a forked re-render implementation that knows how to handle + // render phase udpates, we can use the same implementation as during a + // regular mount or update. + var stateHook = updateWorkInProgressHook(); + var currentStateHook = currentHook; + + if (currentStateHook !== null) { + // This is an update. Process the update queue. + return updateFormStateImpl(stateHook, currentStateHook, action); + } // This is a mount. No updates to process. + + var state = stateHook.memoizedState; + var actionQueueHook = updateWorkInProgressHook(); + var actionQueue = actionQueueHook.queue; + var dispatch = actionQueue.dispatch; // This may have changed during the rerender. + + actionQueueHook.memoizedState = action; + return [state, dispatch]; + } function pushEffect(tag, create, inst, deps) { var effect = { @@ -14916,6 +15353,78 @@ if (__DEV__) { } } + function startHostTransition(formFiber, pendingState, callback, formData) { + if (!enableFormActions) { + // Not implemented. + return; + } + + if (!enableAsyncActions) { + // Form actions are enabled, but async actions are not. Call the function, + // but don't handle any pending or error states. + callback(formData); + return; + } + + if (formFiber.tag !== HostComponent) { + throw new Error( + "Expected the form instance to be a HostComponent. This " + + "is a bug in React." + ); + } + + var queue; + + if (formFiber.memoizedState === null) { + // Upgrade this host component fiber to be stateful. We're going to pretend + // it was stateful all along so we can reuse most of the implementation + // for function components and useTransition. + // + // Create the state hook used by TransitionAwareHostComponent. This is + // essentially an inlined version of mountState. + var newQueue = { + pending: null, + lanes: NoLanes, + // We're going to cheat and intentionally not create a bound dispatch + // method, because we can call it directly in startTransition. + dispatch: null, + lastRenderedReducer: basicStateReducer, + lastRenderedState: NotPendingTransition + }; + queue = newQueue; + var stateHook = { + memoizedState: NotPendingTransition, + baseState: NotPendingTransition, + baseQueue: null, + queue: newQueue, + next: null + }; // Add the state hook to both fiber alternates. The idea is that the fiber + // had this hook all along. + + formFiber.memoizedState = stateHook; + var alternate = formFiber.alternate; + + if (alternate !== null) { + alternate.memoizedState = stateHook; + } + } else { + // This fiber was already upgraded to be stateful. + var _stateHook = formFiber.memoizedState; + queue = _stateHook.queue; + } + + startTransition( + formFiber, + queue, + pendingState, + NotPendingTransition, // TODO: We can avoid this extra wrapper, somehow. Figure out layering + // once more of this function is implemented. + function () { + return callback(formData); + } + ); + } + function mountTransition() { var stateHook = mountStateImpl(false); // The `start` method never changes. @@ -14957,6 +15466,15 @@ if (__DEV__) { return [isPending, start]; } + function useHostTransitionStatus() { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + var status = readContext(HostTransitionContext); + return status !== null ? status : NotPendingTransition; + } + function mountId() { var hook = mountWorkInProgressHook(); var root = getWorkInProgressRoot(); // TODO: In Fizz, id generation is specific to each server config. Maybe we @@ -15355,6 +15873,11 @@ if (__DEV__) { ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; } + if (enableFormActions && enableAsyncActions) { + ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError; + ContextOnlyDispatcher.useFormState = throwInvalidHookError; + } + if (enableAsyncActions) { ContextOnlyDispatcher.useOptimistic = throwInvalidHookError; } @@ -15529,6 +16052,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnMountInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnMountInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + mountHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { HooksDispatcherOnMountInDEV.useOptimistic = function useOptimistic( passthrough, @@ -15676,6 +16214,18 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnMountWithHookTypesInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnMountWithHookTypesInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { HooksDispatcherOnMountWithHookTypesInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -15822,6 +16372,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnUpdateInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnUpdateInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return updateFormState(action); + }; + } + if (enableAsyncActions) { HooksDispatcherOnUpdateInDEV.useOptimistic = function useOptimistic( passthrough, @@ -15970,6 +16535,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnRerenderInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnRerenderInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return rerenderFormState(action); + }; + } + if (enableAsyncActions) { HooksDispatcherOnRerenderInDEV.useOptimistic = function useOptimistic( passthrough, @@ -16142,6 +16722,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnMountInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnMountInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + mountHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnMountInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -16313,6 +16906,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnUpdateInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnUpdateInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + updateHookTypesDev(); + return updateFormState(action); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnUpdateInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -16484,6 +17090,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnRerenderInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnRerenderInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + updateHookTypesDev(); + return rerenderFormState(action); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnRerenderInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -20065,6 +20684,58 @@ if (__DEV__) { workInProgress.flags |= ContentReset; } + if (enableFormActions && enableAsyncActions) { + var memoizedState = workInProgress.memoizedState; + + if (memoizedState !== null) { + // This fiber has been upgraded to a stateful component. The only way + // happens currently is for form actions. We use hooks to track the + // pending and error state of the form. + // + // Once a fiber is upgraded to be stateful, it remains stateful for the + // rest of its lifetime. + var newState = renderTransitionAwareHostComponentWithHooks( + current, + workInProgress, + renderLanes + ); // If the transition state changed, propagate the change to all the + // descendents. We use Context as an implementation detail for this. + // + // This is intentionally set here instead of pushHostContext because + // pushHostContext gets called before we process the state hook, to avoid + // a state mismatch in the event that something suspends. + // + // NOTE: This assumes that there cannot be nested transition providers, + // because the only renderer that implements this feature is React DOM, + // and forms cannot be nested. If we did support nested providers, then + // we would need to push a context value even for host fibers that + // haven't been upgraded yet. + + { + HostTransitionContext._currentValue = newState; + } + + if (enableLazyContextPropagation); + else { + if (didReceiveUpdate) { + if (current !== null) { + var oldStateHook = current.memoizedState; + var oldState = oldStateHook.memoizedState; // This uses regular equality instead of Object.is because we assume + // that host transition state doesn't include NaN as a valid type. + + if (oldState !== newState) { + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + ); + } + } + } + } + } + } + markRef$1(current, workInProgress); reconcileChildren(current, workInProgress, nextChildren, renderLanes); return workInProgress.child; @@ -23209,6 +23880,34 @@ if (__DEV__) { } } } + } else if ( + enableFormActions && + enableAsyncActions && + parent === getHostTransitionProvider() + ) { + // During a host transition, a host component can act like a context + // provider. E.g. in React DOM, this would be a . + var _currentParent = parent.alternate; + + if (_currentParent === null) { + throw new Error( + "Should have a current fiber. This is a bug in React." + ); + } + + var oldStateHook = _currentParent.memoizedState; + var oldState = oldStateHook.memoizedState; + var newStateHook = parent.memoizedState; + var newState = newStateHook.memoizedState; // This uses regular equality instead of Object.is because we assume that + // host transition state doesn't include NaN as a valid type. + + if (oldState !== newState) { + if (contexts !== null) { + contexts.push(HostTransitionContext); + } else { + contexts = [HostTransitionContext]; + } + } } parent = parent.return; @@ -35055,7 +35754,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-classic-fbcbe25e"; + var ReactVersion = "18.3.0-www-classic-c52d28d4"; function createPortal$1( children, @@ -36963,7 +37662,7 @@ if (__DEV__) { * `composition` event types. */ - function extractEvents$5( + function extractEvents$6( dispatchQueue, domEventName, targetInst, @@ -37296,7 +37995,7 @@ if (__DEV__) { * - select */ - function extractEvents$4( + function extractEvents$5( dispatchQueue, domEventName, targetInst, @@ -37319,11 +38018,7 @@ if (__DEV__) { } } else if (shouldUseClickEvent(targetNode)) { getTargetInstFunc = getTargetInstForClickEvent; - } else if ( - enableCustomElementPropertySupport && - targetInst && - isCustomElement(targetInst.elementType) - ) { + } else if (targetInst && isCustomElement(targetInst.elementType)) { getTargetInstFunc = getTargetInstForChangeEvent; } @@ -37368,7 +38063,7 @@ if (__DEV__) { * the `mouseover` top-level event. */ - function extractEvents$3( + function extractEvents$4( dispatchQueue, domEventName, targetInst, @@ -38086,7 +38781,7 @@ if (__DEV__) { * - Fires after user input. */ - function extractEvents$2( + function extractEvents$3( dispatchQueue, domEventName, targetInst, @@ -38278,7 +38973,7 @@ if (__DEV__) { registerSimpleEvent(TRANSITION_END, "onTransitionEnd"); } - function extractEvents$1( + function extractEvents$2( dispatchQueue, domEventName, targetInst, @@ -38473,6 +39168,131 @@ if (__DEV__) { } } + /** + * This plugin invokes action functions on forms, inputs and buttons if + * the form doesn't prevent default. + */ + + function extractEvents$1( + dispatchQueue, + domEventName, + maybeTargetInst, + nativeEvent, + nativeEventTarget, + eventSystemFlags, + targetContainer + ) { + if (domEventName !== "submit") { + return; + } + + if (!maybeTargetInst || maybeTargetInst.stateNode !== nativeEventTarget) { + // If we're inside a parent root that itself is a parent of this root, then + // its deepest target won't be the actual form that's being submitted. + return; + } + + var formInst = maybeTargetInst; + var form = nativeEventTarget; + var action = getFiberCurrentPropsFromNode(form).action; + var submitter = nativeEvent.submitter; + var submitterAction; + + if (submitter) { + var submitterProps = getFiberCurrentPropsFromNode(submitter); + submitterAction = submitterProps + ? submitterProps.formAction + : submitter.getAttribute("formAction"); + + if (submitterAction != null) { + // The submitter overrides the form action. + action = submitterAction; // If the action is a function, we don't want to pass its name + // value to the FormData since it's controlled by the server. + + submitter = null; + } + } + + if (typeof action !== "function") { + return; + } + + var event = new SyntheticEvent( + "action", + "action", + null, + nativeEvent, + nativeEventTarget + ); + + function submitForm() { + if (nativeEvent.defaultPrevented) { + // We let earlier events to prevent the action from submitting. + return; + } // Prevent native navigation. + + event.preventDefault(); + var formData; + + if (submitter) { + // The submitter's value should be included in the FormData. + // It should be in the document order in the form. + // Since the FormData constructor invokes the formdata event it also + // needs to be available before that happens so after construction it's too + // late. We use a temporary fake node for the duration of this event. + // TODO: FormData takes a second argument that it's the submitter but this + // is fairly new so not all browsers support it yet. Switch to that technique + // when available. + var temp = submitter.ownerDocument.createElement("input"); + temp.name = submitter.name; + temp.value = submitter.value; + submitter.parentNode.insertBefore(temp, submitter); + formData = new FormData(form); + temp.parentNode.removeChild(temp); + } else { + formData = new FormData(form); + } + + var pendingState = { + pending: true, + data: formData, + method: form.method, + action: action + }; + + { + Object.freeze(pendingState); + } + + startHostTransition(formInst, pendingState, action, formData); + } + + dispatchQueue.push({ + event: event, + listeners: [ + { + instance: null, + listener: submitForm, + currentTarget: form + } + ] + }); + } + function dispatchReplayedFormAction(formInst, form, action, formData) { + var pendingState = { + pending: true, + data: formData, + method: form.method, + action: action + }; + + { + Object.freeze(pendingState); + } + + startHostTransition(formInst, pendingState, action, formData); + } + registerSimpleEvents(); registerEvents$1(); registerEvents$2(); @@ -38494,7 +39314,7 @@ if (__DEV__) { // should probably be inlined somewhere and have its logic // be core the to event system. This would potentially allow // us to ship builds of React without the polyfilled plugins below. - extractEvents$1( + extractEvents$2( dispatchQueue, domEventName, targetInst, @@ -38523,13 +39343,6 @@ if (__DEV__) { // can't foresee right now. if (shouldProcessPolyfillPlugins) { - extractEvents$3( - dispatchQueue, - domEventName, - targetInst, - nativeEvent, - nativeEventTarget - ); extractEvents$4( dispatchQueue, domEventName, @@ -38537,13 +39350,6 @@ if (__DEV__) { nativeEvent, nativeEventTarget ); - extractEvents$2( - dispatchQueue, - domEventName, - targetInst, - nativeEvent, - nativeEventTarget - ); extractEvents$5( dispatchQueue, domEventName, @@ -38551,6 +39357,30 @@ if (__DEV__) { nativeEvent, nativeEventTarget ); + extractEvents$3( + dispatchQueue, + domEventName, + targetInst, + nativeEvent, + nativeEventTarget + ); + extractEvents$6( + dispatchQueue, + domEventName, + targetInst, + nativeEvent, + nativeEventTarget + ); + + if (enableFormActions) { + extractEvents$1( + dispatchQueue, + domEventName, + targetInst, + nativeEvent, + nativeEventTarget + ); + } } } // List of events that need to be individually attached to media elements. @@ -39834,9 +40664,72 @@ if (__DEV__) { validateFormActionInDevelopment(tag, key, value, props); } + if (enableFormActions) { + if (typeof value === "function") { + // Set a javascript URL that doesn't do anything. We don't expect this to be invoked + // because we'll preventDefault, but it can happen if a form is manually submitted or + // if someone calls stopPropagation before React gets the event. + // If CSP is used to block javascript: URLs that's fine too. It just won't show this + // error message but the URL will be logged. + domElement.setAttribute( + key, // eslint-disable-next-line no-script-url + "javascript:throw new Error('" + + "A React form was unexpectedly submitted. If you called form.submit() manually, " + + "consider using form.requestSubmit() instead. If you\\'re trying to use " + + "event.stopPropagation() in a submit event handler, consider also calling " + + "event.preventDefault()." + + "')" + ); + break; + } else if (typeof prevValue === "function") { + // When we're switching off a Server Action that was originally hydrated. + // The server control these fields during SSR that are now trailing. + // The regular diffing doesn't apply since we compare against the previous props. + // Instead, we need to force them to be set to whatever they should be now. + // This would be a lot cleaner if we did this whole fork in the per-tag approach. + if (key === "formAction") { + if (tag !== "input") { + // Setting the name here isn't completely safe for inputs if this is switching + // to become a radio button. In that case we let the tag based override take + // control. + setProp(domElement, tag, "name", props.name, props, null); + } + + setProp( + domElement, + tag, + "formEncType", + props.formEncType, + props, + null + ); + setProp( + domElement, + tag, + "formMethod", + props.formMethod, + props, + null + ); + setProp( + domElement, + tag, + "formTarget", + props.formTarget, + props, + null + ); + } else { + setProp(domElement, tag, "encType", props.encType, props, null); + setProp(domElement, tag, "method", props.method, props, null); + setProp(domElement, tag, "target", props.target, props, null); + } + } + } + if ( value == null || - typeof value === "function" || + (!enableFormActions && typeof value === "function") || typeof value === "symbol" || typeof value === "boolean" ) { @@ -40225,10 +41118,9 @@ if (__DEV__) { } case "innerText": - case "textContent": - if (enableCustomElementPropertySupport) { - break; - } + case "textContent": { + break; + } // Fall through @@ -40353,10 +41245,9 @@ if (__DEV__) { case "innerText": // Properties - case "textContent": - if (enableCustomElementPropertySupport) { - break; - } + case "textContent": { + break; + } // Fall through @@ -40366,15 +41257,8 @@ if (__DEV__) { warnForInvalidEventListener(key, value); } } else { - if (enableCustomElementPropertySupport) { + { setValueForPropertyOnCustomComponent(domElement, key, value); - } else { - if (typeof value === "boolean") { - // Special case before the new flag is on - value = "" + value; - } - - setValueForAttribute(domElement, key, value); } } } @@ -41780,34 +42664,32 @@ if (__DEV__) { case "offsetHeight": case "isContentEditable": case "outerText": - case "outerHTML": - if (enableCustomElementPropertySupport) { - extraAttributes.delete(propKey.toLowerCase()); + case "outerHTML": { + extraAttributes.delete(propKey.toLowerCase()); - { - error( - "Assignment to read-only property will result in a no-op: `%s`", - propKey - ); - } - - continue; + { + error( + "Assignment to read-only property will result in a no-op: `%s`", + propKey + ); } + continue; + } + // Fall through - case "className": - if (enableCustomElementPropertySupport) { - // className is a special cased property on the server to render as an attribute. - extraAttributes.delete("class"); - var serverValue = getValueForAttributeOnCustomComponent( - domElement, - "class", - value - ); - warnForPropDifference("className", serverValue, value); - continue; - } + case "className": { + // className is a special cased property on the server to render as an attribute. + extraAttributes.delete("class"); + var serverValue = getValueForAttributeOnCustomComponent( + domElement, + "class", + value + ); + warnForPropDifference("className", serverValue, value); + continue; + } // Fall through @@ -41837,6 +42719,11 @@ if (__DEV__) { } } } // This is the exact URL string we expect that Fizz renders if we provide a function action. + // We use this for hydration warnings. It needs to be in sync with Fizz. Maybe makes sense + // as a shared module for that reason. + + var EXPECTED_FORM_ACTION_URL = // eslint-disable-next-line no-script-url + "javascript:throw new Error('A React form was unexpectedly submitted.')"; function diffHydratedGenericElement( domElement, @@ -41989,6 +42876,37 @@ if (__DEV__) { case "action": case "formAction": + if (enableFormActions) { + var _serverValue4 = domElement.getAttribute(propKey); + + if (typeof value === "function") { + extraAttributes.delete(propKey.toLowerCase()); // The server can set these extra properties to implement actions. + // So we remove them from the extra attributes warnings. + + if (propKey === "formAction") { + extraAttributes.delete("name"); + extraAttributes.delete("formenctype"); + extraAttributes.delete("formmethod"); + extraAttributes.delete("formtarget"); + } else { + extraAttributes.delete("enctype"); + extraAttributes.delete("method"); + extraAttributes.delete("target"); + } // Ideally we should be able to warn if the server value was not a function + // however since the function can return any of these attributes any way it + // wants as a custom progressive enhancement, there's nothing to compare to. + // We can check if the function has the $FORM_ACTION property on the client + // and if it's not, warn, but that's an unnecessary constraint that they + // have to have the extra extension that doesn't do anything on the client. + + continue; + } else if (_serverValue4 === EXPECTED_FORM_ACTION_URL) { + extraAttributes.delete(propKey.toLowerCase()); + warnForPropDifference(propKey, "function", value); + continue; + } + } + hydrateSanitizedAttribute( domElement, propKey, @@ -42652,6 +43570,8 @@ if (__DEV__) { var SUSPENSE_END_DATA = "/$"; var SUSPENSE_PENDING_START_DATA = "$?"; var SUSPENSE_FALLBACK_START_DATA = "$!"; + var FORM_STATE_IS_MATCHING = "F!"; + var FORM_STATE_IS_NOT_MATCHING = "F"; var STYLE = "style"; var HostContextNamespaceNone = 0; var HostContextNamespaceSvg = 1; @@ -43424,13 +44344,36 @@ if (__DEV__) { if (element.nodeName.toLowerCase() !== type.toLowerCase()) { if (!inRootOrSingleton) { // Usually we error for mismatched tags. - { + if ( + enableFormActions && + element.nodeName === "INPUT" && + element.type === "hidden" + ); + else { return null; } } // In root or singleton parents we skip past mismatched instances. } else if (!inRootOrSingleton) { // Match - { + if ( + enableFormActions && + type === "input" && + element.type === "hidden" + ) { + { + checkAttributeStringCoercion(anyProps.name, "name"); + } + + var name = anyProps.name == null ? null : "" + anyProps.name; + + if ( + anyProps.type !== "hidden" || + element.getAttribute("name") !== name + ); + else { + return element; + } + } else { return element; } } else if (isMarkedHoistable(element)); @@ -43558,7 +44501,13 @@ if (__DEV__) { if (text === "") return null; while (instance.nodeType !== TEXT_NODE) { - if (!inRootOrSingleton) { + if ( + enableFormActions && + instance.nodeType === ELEMENT_NODE && + instance.nodeName === "INPUT" && + instance.type === "hidden" + ); + else if (!inRootOrSingleton) { return null; } @@ -43620,6 +44569,36 @@ if (__DEV__) { function registerSuspenseInstanceRetry(instance, callback) { instance._reactRetry = callback; } + function canHydrateFormStateMarker(instance, inRootOrSingleton) { + while (instance.nodeType !== COMMENT_NODE) { + if (!inRootOrSingleton) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; + } + + var nodeData = instance.data; + + if ( + nodeData === FORM_STATE_IS_MATCHING || + nodeData === FORM_STATE_IS_NOT_MATCHING + ) { + var markerInstance = instance; + return markerInstance; + } + + return null; + } + function isFormStateMarkerMatching(markerInstance) { + return markerInstance.data === FORM_STATE_IS_MATCHING; + } function getNextHydratable(node) { // Skip non-hydratable nodes. @@ -43637,7 +44616,10 @@ if (__DEV__) { nodeData === SUSPENSE_START_DATA || nodeData === SUSPENSE_FALLBACK_START_DATA || nodeData === SUSPENSE_PENDING_START_DATA || - enableFormActions + (enableFormActions && + enableAsyncActions && + (nodeData === FORM_STATE_IS_MATCHING || + nodeData === FORM_STATE_IS_NOT_MATCHING)) ) { break; } @@ -43773,6 +44755,11 @@ if (__DEV__) { // Retry if any event replaying was blocked on this. retryIfBlockedOn(suspenseInstance); } + function shouldDeleteUnhydratedTailInstances(parentType) { + return ( + !enableFormActions || (parentType !== "form" && parentType !== "button") + ); + } function didNotMatchHydratedContainerTextInstance( parentContainer, textInstance, @@ -45644,6 +46631,8 @@ if (__DEV__) { resource.state.loading |= Inserted; } + var NotPendingTransition = NotPending; + var randomKey = Math.random().toString(36).slice(2); var internalInstanceKey = "__reactFiber$" + randomKey; var internalPropsKey = "__reactProps$" + randomKey; @@ -46272,6 +47261,71 @@ if (__DEV__) { } } // [form, submitter or action, formData...] + var lastScheduledReplayQueue = null; + + function replayUnblockedFormActions(formReplayingQueue) { + if (lastScheduledReplayQueue === formReplayingQueue) { + lastScheduledReplayQueue = null; + } + + for (var i = 0; i < formReplayingQueue.length; i += 3) { + var form = formReplayingQueue[i]; + var submitterOrAction = formReplayingQueue[i + 1]; + var formData = formReplayingQueue[i + 2]; + + if (typeof submitterOrAction !== "function") { + // This action is not hydrated yet. This might be because it's blocked on + // a different React instance or higher up our tree. + var blockedOn = findInstanceBlockingTarget(submitterOrAction || form); + + if (blockedOn === null) { + // We're not blocked but we don't have an action. This must mean that + // this is in another React instance. We'll just skip past it. + continue; + } else { + // We're blocked on something in this React instance. We'll retry later. + break; + } + } + + var formInst = getInstanceFromNode(form); + + if (formInst !== null) { + // This is part of our instance. + // We're ready to replay this. Let's delete it from the queue. + formReplayingQueue.splice(i, 3); + i -= 3; + dispatchReplayedFormAction( + formInst, + form, + submitterOrAction, + formData + ); // Continue without incrementing the index. + + continue; + } // This form must've been part of a different React instance. + // If we want to preserve ordering between React instances on the same root + // we'd need some way for the other instance to ping us when it's done. + // We'll just skip this and let the other instance execute it. + } + } + + function scheduleReplayQueueIfNeeded(formReplayingQueue) { + // Schedule a callback to execute any unblocked form actions in. + // We only keep track of the last queue which means that if multiple React oscillate + // commits, we could schedule more callbacks than necessary but it's not a big deal + // and we only really except one instance. + if (lastScheduledReplayQueue !== formReplayingQueue) { + lastScheduledReplayQueue = formReplayingQueue; + Scheduler.unstable_scheduleCallback( + Scheduler.unstable_NormalPriority, + function () { + return replayUnblockedFormActions(formReplayingQueue); + } + ); + } + } + function retryIfBlockedOn(unblocked) { if (queuedFocus !== null) { scheduleCallbackIfUnblocked(queuedFocus, unblocked); @@ -46315,6 +47369,76 @@ if (__DEV__) { } } } + + if (enableFormActions) { + // Check the document if there are any queued form actions. + var root = unblocked.getRootNode(); + var formReplayingQueue = root.$$reactFormReplay; + + if (formReplayingQueue != null) { + for (var _i = 0; _i < formReplayingQueue.length; _i += 3) { + var form = formReplayingQueue[_i]; + var submitterOrAction = formReplayingQueue[_i + 1]; + var formProps = getFiberCurrentPropsFromNode(form); + + if (typeof submitterOrAction === "function") { + // This action has already resolved. We're just waiting to dispatch it. + if (!formProps) { + // This was not part of this React instance. It might have been recently + // unblocking us from dispatching our events. So let's make sure we schedule + // a retry. + scheduleReplayQueueIfNeeded(formReplayingQueue); + } + + continue; + } + + var target = form; + + if (formProps) { + // This form belongs to this React instance but the submitter might + // not be done yet. + var action = null; + var submitter = submitterOrAction; + + if (submitter && submitter.hasAttribute("formAction")) { + // The submitter is the one that is responsible for the action. + target = submitter; + var submitterProps = getFiberCurrentPropsFromNode(submitter); + + if (submitterProps) { + // The submitter is part of this instance. + action = submitterProps.formAction; + } else { + var blockedOn = findInstanceBlockingTarget(target); + + if (blockedOn !== null) { + // The submitter is not hydrated yet. We'll wait for it. + continue; + } // The submitter must have been a part of a different React instance. + // Except the form isn't. We don't dispatch actions in this scenario. + } + } else { + action = formProps.action; + } + + if (typeof action === "function") { + formReplayingQueue[_i + 1] = action; + } else { + // Something went wrong so let's just delete this action. + formReplayingQueue.splice(_i, 3); + _i -= 3; + } // Schedule a replay in case this unblocked something. + + scheduleReplayQueueIfNeeded(formReplayingQueue); + continue; + } // Something above this target is still blocked so we can't continue yet. + // We're not sure if this target is actually part of this React instance + // yet. It could be a different React as a child but at least some parent is. + // We must continue for any further queued actions. + } + } + } } var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig; // TODO: can we stop exporting these? diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 71c155d443..26f0d90416 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -24,8 +24,8 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var Scheduler = require("scheduler"); var React = require("react"); + var Scheduler = require("scheduler"); var Internals = { usingClientEntryPoint: false, @@ -123,11 +123,10 @@ if (__DEV__) { enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane, enableRetryLaneExpiration = dynamicFeatureFlags.enableRetryLaneExpiration, enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -148,20 +147,61 @@ if (__DEV__) { var enableClientRenderFallbackOnTextMismatch = false; var enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler; - var enableFormActions = false; var enableSuspenseCallback = true; var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; - function useFormStatus() { + var ReactCurrentDispatcher$3 = ReactSharedInternals.ReactCurrentDispatcher; // Since the "not pending" value is always the same, we can reuse the + // same object across all transitions. + + var sharedNotPendingObject = { + pending: false, + data: null, + method: null, + action: null + }; + var NotPending = Object.freeze(sharedNotPendingObject); + + function resolveDispatcher() { + // Copied from react/src/ReactHooks.js. It's the same thing but in a + // different package. + var dispatcher = ReactCurrentDispatcher$3.current; + { + if (dispatcher === null) { + error( + "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for" + + " one of the following reasons:\n" + + "1. You might have mismatching versions of React and the renderer (such as React DOM)\n" + + "2. You might be breaking the Rules of Hooks\n" + + "3. You might have more than one copy of React in the same app\n" + + "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." + ); + } + } // Will result in a null access error if accessed outside render phase. We + // intentionally don't throw our own error because this is in a hot path. + // Also helps ensure this is inlined. + + return dispatcher; + } + + function useFormStatus() { + if (!(enableFormActions && enableAsyncActions)) { throw new Error("Not implemented."); + } else { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] We know this exists because of the feature check above. + + return dispatcher.useHostTransitionStatus(); } } function useFormState(action, initialState, permalink) { - { + if (!(enableFormActions && enableAsyncActions)) { throw new Error("Not implemented."); + } else { + var dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional + + return dispatcher.useFormState(action, initialState, permalink); } } @@ -261,6 +301,27 @@ if (__DEV__) { var contextStackCursor = createCursor(null); var contextFiberStackCursor = createCursor(null); var rootInstanceStackCursor = createCursor(null); // Represents the nearest host transition provider (in React DOM, a ) + // NOTE: Since forms cannot be nested, and this feature is only implemented by + // React DOM, we don't technically need this to be a stack. It could be a single + // module variable instead. + + var hostTransitionProviderCursor = createCursor(null); // TODO: This should initialize to NotPendingTransition, a constant + // imported from the fiber config. However, because of a cycle in the module + // graph, that value isn't defined during this module's initialization. I can't + // think of a way to work around this without moving that value out of the + // fiber config. For now, the "no provider" case is handled when reading, + // inside useHostTransitionStatus. + + var HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function requiredContext(c) { { @@ -284,6 +345,10 @@ if (__DEV__) { return rootInstance; } + function getHostTransitionProvider() { + return hostTransitionProviderCursor.current; + } + function pushHostContainer(fiber, nextRootInstance) { // Push current root instance onto the stack; // This allows us to reset root when portals are popped. @@ -315,6 +380,16 @@ if (__DEV__) { } function pushHostContext(fiber) { + if (enableFormActions && enableAsyncActions) { + var stateHook = fiber.memoizedState; + + if (stateHook !== null) { + // Only provide context if this fiber has been upgraded by a host + // transition. We use the same optimization for regular host context below. + push(hostTransitionProviderCursor, fiber, fiber); + } + } + var context = requiredContext(contextStackCursor.current); var nextContext = getChildHostContext(context, fiber.type); // Don't push this Fiber's context unless it's unique. @@ -333,6 +408,25 @@ if (__DEV__) { pop(contextStackCursor, fiber); pop(contextFiberStackCursor, fiber); } + + if (enableFormActions && enableAsyncActions) { + if (hostTransitionProviderCursor.current === fiber) { + // Do not pop unless this Fiber provided the current context. This is mostly + // a performance optimization, but conveniently it also prevents a potential + // data race where a host provider is upgraded (i.e. memoizedState becomes + // non-null) during a concurrent event. This is a bit of a flaw in the way + // we upgrade host components, but because we're accounting for it here, it + // should be fine. + pop(hostTransitionProviderCursor, fiber); // When popping the transition provider, we reset the context value back + // to `null`. We can do this because you're not allowd to nest forms. If + // we allowed for multiple nested host transition providers, then we'd + // need to reset this to the parent provider's status. + + { + HostTransitionContext._currentValue = null; + } + } + } } var NoFlags$1 = @@ -2752,19 +2846,15 @@ if (__DEV__) { // it would be expected that they end up not having an attribute. return expected; - case "function": - if (enableCustomElementPropertySupport) { + case "function": { + return expected; + } + + case "boolean": { + if (expected === false) { return expected; } - - break; - - case "boolean": - if (enableCustomElementPropertySupport) { - if (expected === false) { - return expected; - } - } + } } return expected === undefined ? undefined : null; @@ -2772,7 +2862,7 @@ if (__DEV__) { var value = node.getAttribute(name); - if (enableCustomElementPropertySupport) { + { if (value === "" && expected === true) { return true; } @@ -6671,6 +6761,23 @@ if (__DEV__) { return true; } + if (enableFormActions) { + // Actions are special because unlike events they can have other value types. + if (typeof value === "function") { + if (tagName === "form" && name === "action") { + return true; + } + + if (tagName === "input" && name === "formAction") { + return true; + } + + if (tagName === "button" && name === "formAction") { + return true; + } + } + } // We can't rely on the event system being injected on the server. + if (eventRegistry != null) { var registrationNameDependencies = eventRegistry.registrationNameDependencies, @@ -6819,10 +6926,9 @@ if (__DEV__) { case "innerText": // Properties - case "textContent": - if (enableCustomElementPropertySupport) { - return true; - } + case "textContent": { + return true; + } } switch (typeof value) { @@ -8594,6 +8700,34 @@ if (__DEV__) { } } + function tryToClaimNextHydratableFormMarkerInstance(fiber) { + if (!isHydrating) { + return false; + } + + if (nextHydratableInstance) { + var markerInstance = canHydrateFormStateMarker( + nextHydratableInstance, + rootOrSingletonContext + ); + + if (markerInstance) { + // Found the marker instance. + nextHydratableInstance = getNextHydratableSibling(markerInstance); // Return true if this marker instance should use the state passed + // to hydrateRoot. + // TODO: As an optimization, Fizz should only emit these markers if form + // state is passed at the root. + + return isFormStateMarkerMatching(markerInstance); + } + } // Should have found a marker instance. Throw an error to trigger client + // rendering. We don't bother to check if we're in a concurrent root because + // useFormState is a new API, so backwards compat is not an issue. + + throwOnHydrationMismatch(); + return false; + } + function prepareToHydrateHostInstance(fiber, hostContext) { var instance = fiber.stateNode; var shouldWarnIfMismatchDev = !didSuspendOrErrorDEV; @@ -8758,7 +8892,8 @@ if (__DEV__) { fiber.tag !== HostSingleton && !( fiber.tag === HostComponent && - shouldSetTextContent(fiber.type, fiber.memoizedProps) + (!shouldDeleteUnhydratedTailInstances(fiber.type) || + shouldSetTextContent(fiber.type, fiber.memoizedProps)) ) ) { shouldClear = true; @@ -13228,6 +13363,43 @@ if (__DEV__) { return children; } + + function renderTransitionAwareHostComponentWithHooks( + current, + workInProgress, + lanes + ) { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + return renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + lanes + ); + } + function TransitionAwareHostComponent() { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + var dispatcher = ReactCurrentDispatcher$1.current; + + var _dispatcher$useState = dispatcher.useState(), + maybeThenable = _dispatcher$useState[0]; + + if (typeof maybeThenable.then === "function") { + var thenable = maybeThenable; + return useThenable(thenable); + } else { + var status = maybeThenable; + return status; + } + } function checkDidRenderIdHook() { // This should be called immediately after every renderWithHooks call. // Conceptually, it's part of the return value of renderWithHooks; it's only a @@ -14224,6 +14396,271 @@ if (__DEV__) { var dispatch = hook.queue.dispatch; return [passthrough, dispatch]; } // useFormState actions run sequentially, because each action receives the + // previous state as an argument. We store pending actions on a queue. + + function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) { + throw new Error("Cannot update form state while rendering."); + } + + var last = actionQueue.pending; + + if (last === null) { + // There are no pending actions; this is the first one. We can run + // it immediately. + var newLast = { + payload: payload, + next: null // circular + }; + newLast.next = actionQueue.pending = newLast; + runFormStateAction(actionQueue, setState, payload); + } else { + // There's already an action running. Add to the queue. + var first = last.next; + var _newLast = { + payload: payload, + next: first + }; + actionQueue.pending = last.next = _newLast; + } + } + + function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action; + var prevState = actionQueue.state; // This is a fork of startTransition + + var prevTransition = ReactCurrentBatchConfig$3.transition; + var currentTransition = { + _callbacks: new Set() + }; + ReactCurrentBatchConfig$3.transition = currentTransition; + + { + ReactCurrentBatchConfig$3.transition._updatedFibers = new Set(); + } + + try { + var returnValue = action(prevState, payload); + + if ( + returnValue !== null && + typeof returnValue === "object" && // $FlowFixMe[method-unbinding] + typeof returnValue.then === "function" + ) { + var thenable = returnValue; + notifyTransitionCallbacks(currentTransition, thenable); // Attach a listener to read the return state of the action. As soon as + // this resolves, we can run the next action in the sequence. + + thenable.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ); + setState(thenable); + } else { + setState(returnValue); + var nextState = returnValue; + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + } + } catch (error) { + // This is a trick to get the `useFormState` hook to rethrow the error. + // When it unwraps the thenable with the `use` algorithm, the error + // will be thrown. + var rejectedThenable = { + then: function () {}, + status: "rejected", + reason: error // $FlowFixMe: Not sure why this doesn't work + }; + setState(rejectedThenable); + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$3.transition = prevTransition; + + { + if (prevTransition === null && currentTransition._updatedFibers) { + var updatedFibersCount = currentTransition._updatedFibers.size; + + currentTransition._updatedFibers.clear(); + + if (updatedFibersCount > 10) { + warn( + "Detected a large number of updates inside startTransition. " + + "If this is due to a subscription please re-write it to use React provided hooks. " + + "Otherwise concurrent mode guarantees are off the table." + ); + } + } + } + } + } + + function finishRunningFormStateAction(actionQueue, setState) { + // The action finished running. Pop it from the queue and run the next pending + // action, if there are any. + var last = actionQueue.pending; + + if (last !== null) { + var first = last.next; + + if (first === last) { + // This was the last action in the queue. + actionQueue.pending = null; + } else { + // Remove the first node from the circular queue. + var next = first.next; + last.next = next; // Run the next action. + + runFormStateAction(actionQueue, setState, next.payload); + } + } + } + + function formStateReducer(oldState, newState) { + return newState; + } + + function mountFormState(action, initialStateProp, permalink) { + var initialState = initialStateProp; + + if (getIsHydrating()) { + var root = getWorkInProgressRoot(); + var ssrFormState = root.formState; // If a formState option was passed to the root, there are form state + // markers that we need to hydrate. These indicate whether the form state + // matches this hook instance. + + if (ssrFormState !== null) { + var isMatching = tryToClaimNextHydratableFormMarkerInstance(); + + if (isMatching) { + initialState = ssrFormState[0]; + } + } + } // State hook. The state is stored in a thenable which is then unwrapped by + // the `use` algorithm during render. + + var stateHook = mountWorkInProgressHook(); + stateHook.memoizedState = stateHook.baseState = initialState; // TODO: Typing this "correctly" results in recursion limit errors + // const stateQueue: UpdateQueue, S | Awaited> = { + + var stateQueue = { + pending: null, + lanes: NoLanes, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialState + }; + stateHook.queue = stateQueue; + var setState = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + stateQueue + ); + stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is + // shared between all instances of the hook. Similar to a regular state queue, + // but different because the actions are run sequentially, and they run in + // an event instead of during render. + + var actionQueueHook = mountWorkInProgressHook(); + var actionQueue = { + state: initialState, + dispatch: null, + // circular + action: action, + pending: null + }; + actionQueueHook.queue = actionQueue; + var dispatch = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + actionQueue, + setState + ); + actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this + // to detect when the action function changes so we can update it in + // an effect. + + actionQueueHook.memoizedState = action; + return [initialState, dispatch]; + } + + function updateFormState(action, initialState, permalink) { + var stateHook = updateWorkInProgressHook(); + var currentStateHook = currentHook; + return updateFormStateImpl(stateHook, currentStateHook, action); + } + + function updateFormStateImpl( + stateHook, + currentStateHook, + action, + initialState, + permalink + ) { + var _updateReducerImpl = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + ), + actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes. + + var state = + typeof actionResult === "object" && + actionResult !== null && // $FlowFixMe[method-unbinding] + typeof actionResult.then === "function" + ? useThenable(actionResult) + : actionResult; + var actionQueueHook = updateWorkInProgressHook(); + var actionQueue = actionQueueHook.queue; + var dispatch = actionQueue.dispatch; // Check if a new action was passed. If so, update it in an effect. + + var prevAction = actionQueueHook.memoizedState; + + if (action !== prevAction) { + currentlyRenderingFiber$1.flags |= Passive$1; + pushEffect( + HasEffect | Passive, + formStateActionEffect.bind(null, actionQueue, action), + createEffectInstance(), + null + ); + } + + return [state, dispatch]; + } + + function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; + } + + function rerenderFormState(action, initialState, permalink) { + // Unlike useState, useFormState doesn't support render phase updates. + // Also unlike useState, we need to replay all pending updates again in case + // the passthrough value changed. + // + // So instead of a forked re-render implementation that knows how to handle + // render phase udpates, we can use the same implementation as during a + // regular mount or update. + var stateHook = updateWorkInProgressHook(); + var currentStateHook = currentHook; + + if (currentStateHook !== null) { + // This is an update. Process the update queue. + return updateFormStateImpl(stateHook, currentStateHook, action); + } // This is a mount. No updates to process. + + var state = stateHook.memoizedState; + var actionQueueHook = updateWorkInProgressHook(); + var actionQueue = actionQueueHook.queue; + var dispatch = actionQueue.dispatch; // This may have changed during the rerender. + + actionQueueHook.memoizedState = action; + return [state, dispatch]; + } function pushEffect(tag, create, inst, deps) { var effect = { @@ -14852,6 +15289,78 @@ if (__DEV__) { } } + function startHostTransition(formFiber, pendingState, callback, formData) { + if (!enableFormActions) { + // Not implemented. + return; + } + + if (!enableAsyncActions) { + // Form actions are enabled, but async actions are not. Call the function, + // but don't handle any pending or error states. + callback(formData); + return; + } + + if (formFiber.tag !== HostComponent) { + throw new Error( + "Expected the form instance to be a HostComponent. This " + + "is a bug in React." + ); + } + + var queue; + + if (formFiber.memoizedState === null) { + // Upgrade this host component fiber to be stateful. We're going to pretend + // it was stateful all along so we can reuse most of the implementation + // for function components and useTransition. + // + // Create the state hook used by TransitionAwareHostComponent. This is + // essentially an inlined version of mountState. + var newQueue = { + pending: null, + lanes: NoLanes, + // We're going to cheat and intentionally not create a bound dispatch + // method, because we can call it directly in startTransition. + dispatch: null, + lastRenderedReducer: basicStateReducer, + lastRenderedState: NotPendingTransition + }; + queue = newQueue; + var stateHook = { + memoizedState: NotPendingTransition, + baseState: NotPendingTransition, + baseQueue: null, + queue: newQueue, + next: null + }; // Add the state hook to both fiber alternates. The idea is that the fiber + // had this hook all along. + + formFiber.memoizedState = stateHook; + var alternate = formFiber.alternate; + + if (alternate !== null) { + alternate.memoizedState = stateHook; + } + } else { + // This fiber was already upgraded to be stateful. + var _stateHook = formFiber.memoizedState; + queue = _stateHook.queue; + } + + startTransition( + formFiber, + queue, + pendingState, + NotPendingTransition, // TODO: We can avoid this extra wrapper, somehow. Figure out layering + // once more of this function is implemented. + function () { + return callback(formData); + } + ); + } + function mountTransition() { var stateHook = mountStateImpl(false); // The `start` method never changes. @@ -14893,6 +15402,15 @@ if (__DEV__) { return [isPending, start]; } + function useHostTransitionStatus() { + if (!(enableFormActions && enableAsyncActions)) { + throw new Error("Not implemented."); + } + + var status = readContext(HostTransitionContext); + return status !== null ? status : NotPendingTransition; + } + function mountId() { var hook = mountWorkInProgressHook(); var root = getWorkInProgressRoot(); // TODO: In Fizz, id generation is specific to each server config. Maybe we @@ -15291,6 +15809,11 @@ if (__DEV__) { ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; } + if (enableFormActions && enableAsyncActions) { + ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError; + ContextOnlyDispatcher.useFormState = throwInvalidHookError; + } + if (enableAsyncActions) { ContextOnlyDispatcher.useOptimistic = throwInvalidHookError; } @@ -15465,6 +15988,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnMountInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnMountInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + mountHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { HooksDispatcherOnMountInDEV.useOptimistic = function useOptimistic( passthrough, @@ -15612,6 +16150,18 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnMountWithHookTypesInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnMountWithHookTypesInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { HooksDispatcherOnMountWithHookTypesInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -15758,6 +16308,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnUpdateInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnUpdateInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return updateFormState(action); + }; + } + if (enableAsyncActions) { HooksDispatcherOnUpdateInDEV.useOptimistic = function useOptimistic( passthrough, @@ -15906,6 +16471,21 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcherOnRerenderInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + HooksDispatcherOnRerenderInDEV.useFormState = function useFormState( + action, + initialState, + permalink + ) { + currentHookNameInDev = "useFormState"; + updateHookTypesDev(); + return rerenderFormState(action); + }; + } + if (enableAsyncActions) { HooksDispatcherOnRerenderInDEV.useOptimistic = function useOptimistic( passthrough, @@ -16078,6 +16658,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnMountInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnMountInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + mountHookTypesDev(); + return mountFormState(action, initialState); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnMountInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -16249,6 +16842,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnUpdateInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnUpdateInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + updateHookTypesDev(); + return updateFormState(action); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnUpdateInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -16420,6 +17026,19 @@ if (__DEV__) { }; } + if (enableFormActions && enableAsyncActions) { + InvalidNestedHooksDispatcherOnRerenderInDEV.useHostTransitionStatus = + useHostTransitionStatus; + + InvalidNestedHooksDispatcherOnRerenderInDEV.useFormState = + function useFormState(action, initialState, permalink) { + currentHookNameInDev = "useFormState"; + warnInvalidHookAccess(); + updateHookTypesDev(); + return rerenderFormState(action); + }; + } + if (enableAsyncActions) { InvalidNestedHooksDispatcherOnRerenderInDEV.useOptimistic = function useOptimistic(passthrough, reducer) { @@ -19930,6 +20549,58 @@ if (__DEV__) { workInProgress.flags |= ContentReset; } + if (enableFormActions && enableAsyncActions) { + var memoizedState = workInProgress.memoizedState; + + if (memoizedState !== null) { + // This fiber has been upgraded to a stateful component. The only way + // happens currently is for form actions. We use hooks to track the + // pending and error state of the form. + // + // Once a fiber is upgraded to be stateful, it remains stateful for the + // rest of its lifetime. + var newState = renderTransitionAwareHostComponentWithHooks( + current, + workInProgress, + renderLanes + ); // If the transition state changed, propagate the change to all the + // descendents. We use Context as an implementation detail for this. + // + // This is intentionally set here instead of pushHostContext because + // pushHostContext gets called before we process the state hook, to avoid + // a state mismatch in the event that something suspends. + // + // NOTE: This assumes that there cannot be nested transition providers, + // because the only renderer that implements this feature is React DOM, + // and forms cannot be nested. If we did support nested providers, then + // we would need to push a context value even for host fibers that + // haven't been upgraded yet. + + { + HostTransitionContext._currentValue = newState; + } + + if (enableLazyContextPropagation); + else { + if (didReceiveUpdate) { + if (current !== null) { + var oldStateHook = current.memoizedState; + var oldState = oldStateHook.memoizedState; // This uses regular equality instead of Object.is because we assume + // that host transition state doesn't include NaN as a valid type. + + if (oldState !== newState) { + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + ); + } + } + } + } + } + } + markRef$1(current, workInProgress); reconcileChildren(current, workInProgress, nextChildren, renderLanes); return workInProgress.child; @@ -23068,6 +23739,34 @@ if (__DEV__) { } } } + } else if ( + enableFormActions && + enableAsyncActions && + parent === getHostTransitionProvider() + ) { + // During a host transition, a host component can act like a context + // provider. E.g. in React DOM, this would be a . + var _currentParent = parent.alternate; + + if (_currentParent === null) { + throw new Error( + "Should have a current fiber. This is a bug in React." + ); + } + + var oldStateHook = _currentParent.memoizedState; + var oldState = oldStateHook.memoizedState; + var newStateHook = parent.memoizedState; + var newState = newStateHook.memoizedState; // This uses regular equality instead of Object.is because we assume that + // host transition state doesn't include NaN as a valid type. + + if (oldState !== newState) { + if (contexts !== null) { + contexts.push(HostTransitionContext); + } else { + contexts = [HostTransitionContext]; + } + } } parent = parent.return; @@ -34876,7 +35575,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-www-modern-cd8a9bf8"; + var ReactVersion = "18.3.0-www-modern-8e7b2378"; function createPortal$1( children, @@ -36177,6 +36876,131 @@ if (__DEV__) { var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface); + /** + * This plugin invokes action functions on forms, inputs and buttons if + * the form doesn't prevent default. + */ + + function extractEvents$6( + dispatchQueue, + domEventName, + maybeTargetInst, + nativeEvent, + nativeEventTarget, + eventSystemFlags, + targetContainer + ) { + if (domEventName !== "submit") { + return; + } + + if (!maybeTargetInst || maybeTargetInst.stateNode !== nativeEventTarget) { + // If we're inside a parent root that itself is a parent of this root, then + // its deepest target won't be the actual form that's being submitted. + return; + } + + var formInst = maybeTargetInst; + var form = nativeEventTarget; + var action = getFiberCurrentPropsFromNode(form).action; + var submitter = nativeEvent.submitter; + var submitterAction; + + if (submitter) { + var submitterProps = getFiberCurrentPropsFromNode(submitter); + submitterAction = submitterProps + ? submitterProps.formAction + : submitter.getAttribute("formAction"); + + if (submitterAction != null) { + // The submitter overrides the form action. + action = submitterAction; // If the action is a function, we don't want to pass its name + // value to the FormData since it's controlled by the server. + + submitter = null; + } + } + + if (typeof action !== "function") { + return; + } + + var event = new SyntheticEvent( + "action", + "action", + null, + nativeEvent, + nativeEventTarget + ); + + function submitForm() { + if (nativeEvent.defaultPrevented) { + // We let earlier events to prevent the action from submitting. + return; + } // Prevent native navigation. + + event.preventDefault(); + var formData; + + if (submitter) { + // The submitter's value should be included in the FormData. + // It should be in the document order in the form. + // Since the FormData constructor invokes the formdata event it also + // needs to be available before that happens so after construction it's too + // late. We use a temporary fake node for the duration of this event. + // TODO: FormData takes a second argument that it's the submitter but this + // is fairly new so not all browsers support it yet. Switch to that technique + // when available. + var temp = submitter.ownerDocument.createElement("input"); + temp.name = submitter.name; + temp.value = submitter.value; + submitter.parentNode.insertBefore(temp, submitter); + formData = new FormData(form); + temp.parentNode.removeChild(temp); + } else { + formData = new FormData(form); + } + + var pendingState = { + pending: true, + data: formData, + method: form.method, + action: action + }; + + { + Object.freeze(pendingState); + } + + startHostTransition(formInst, pendingState, action, formData); + } + + dispatchQueue.push({ + event: event, + listeners: [ + { + instance: null, + listener: submitForm, + currentTarget: form + } + ] + }); + } + function dispatchReplayedFormAction(formInst, form, action, formData) { + var pendingState = { + pending: true, + data: formData, + method: form.method, + action: action + }; + + { + Object.freeze(pendingState); + } + + startHostTransition(formInst, pendingState, action, formData); + } + // has this definition built-in. var hasScheduledReplayAttempt = false; // The last of each continuous event type. We only need to replay the last one @@ -36567,6 +37391,71 @@ if (__DEV__) { } } // [form, submitter or action, formData...] + var lastScheduledReplayQueue = null; + + function replayUnblockedFormActions(formReplayingQueue) { + if (lastScheduledReplayQueue === formReplayingQueue) { + lastScheduledReplayQueue = null; + } + + for (var i = 0; i < formReplayingQueue.length; i += 3) { + var form = formReplayingQueue[i]; + var submitterOrAction = formReplayingQueue[i + 1]; + var formData = formReplayingQueue[i + 2]; + + if (typeof submitterOrAction !== "function") { + // This action is not hydrated yet. This might be because it's blocked on + // a different React instance or higher up our tree. + var blockedOn = findInstanceBlockingTarget(submitterOrAction || form); + + if (blockedOn === null) { + // We're not blocked but we don't have an action. This must mean that + // this is in another React instance. We'll just skip past it. + continue; + } else { + // We're blocked on something in this React instance. We'll retry later. + break; + } + } + + var formInst = getInstanceFromNode$1(form); + + if (formInst !== null) { + // This is part of our instance. + // We're ready to replay this. Let's delete it from the queue. + formReplayingQueue.splice(i, 3); + i -= 3; + dispatchReplayedFormAction( + formInst, + form, + submitterOrAction, + formData + ); // Continue without incrementing the index. + + continue; + } // This form must've been part of a different React instance. + // If we want to preserve ordering between React instances on the same root + // we'd need some way for the other instance to ping us when it's done. + // We'll just skip this and let the other instance execute it. + } + } + + function scheduleReplayQueueIfNeeded(formReplayingQueue) { + // Schedule a callback to execute any unblocked form actions in. + // We only keep track of the last queue which means that if multiple React oscillate + // commits, we could schedule more callbacks than necessary but it's not a big deal + // and we only really except one instance. + if (lastScheduledReplayQueue !== formReplayingQueue) { + lastScheduledReplayQueue = formReplayingQueue; + Scheduler.unstable_scheduleCallback( + Scheduler.unstable_NormalPriority, + function () { + return replayUnblockedFormActions(formReplayingQueue); + } + ); + } + } + function retryIfBlockedOn(unblocked) { if (queuedFocus !== null) { scheduleCallbackIfUnblocked(queuedFocus, unblocked); @@ -36610,6 +37499,76 @@ if (__DEV__) { } } } + + if (enableFormActions) { + // Check the document if there are any queued form actions. + var root = unblocked.getRootNode(); + var formReplayingQueue = root.$$reactFormReplay; + + if (formReplayingQueue != null) { + for (var _i = 0; _i < formReplayingQueue.length; _i += 3) { + var form = formReplayingQueue[_i]; + var submitterOrAction = formReplayingQueue[_i + 1]; + var formProps = getFiberCurrentPropsFromNode(form); + + if (typeof submitterOrAction === "function") { + // This action has already resolved. We're just waiting to dispatch it. + if (!formProps) { + // This was not part of this React instance. It might have been recently + // unblocking us from dispatching our events. So let's make sure we schedule + // a retry. + scheduleReplayQueueIfNeeded(formReplayingQueue); + } + + continue; + } + + var target = form; + + if (formProps) { + // This form belongs to this React instance but the submitter might + // not be done yet. + var action = null; + var submitter = submitterOrAction; + + if (submitter && submitter.hasAttribute("formAction")) { + // The submitter is the one that is responsible for the action. + target = submitter; + var submitterProps = getFiberCurrentPropsFromNode(submitter); + + if (submitterProps) { + // The submitter is part of this instance. + action = submitterProps.formAction; + } else { + var blockedOn = findInstanceBlockingTarget(target); + + if (blockedOn !== null) { + // The submitter is not hydrated yet. We'll wait for it. + continue; + } // The submitter must have been a part of a different React instance. + // Except the form isn't. We don't dispatch actions in this scenario. + } + } else { + action = formProps.action; + } + + if (typeof action === "function") { + formReplayingQueue[_i + 1] = action; + } else { + // Something went wrong so let's just delete this action. + formReplayingQueue.splice(_i, 3); + _i -= 3; + } // Schedule a replay in case this unblocked something. + + scheduleReplayQueueIfNeeded(formReplayingQueue); + continue; + } // Something above this target is still blocked so we can't continue yet. + // We're not sure if this target is actually part of this React instance + // yet. It could be a different React as a child but at least some parent is. + // We must continue for any further queued actions. + } + } + } } var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig; // TODO: can we stop exporting these? @@ -37812,11 +38771,7 @@ if (__DEV__) { } } else if (shouldUseClickEvent(targetNode)) { getTargetInstFunc = getTargetInstForClickEvent; - } else if ( - enableCustomElementPropertySupport && - targetInst && - isCustomElement(targetInst.elementType) - ) { + } else if (targetInst && isCustomElement(targetInst.elementType)) { getTargetInstFunc = getTargetInstForChangeEvent; } @@ -39044,6 +39999,16 @@ if (__DEV__) { nativeEvent, nativeEventTarget ); + + if (enableFormActions) { + extractEvents$6( + dispatchQueue, + domEventName, + targetInst, + nativeEvent, + nativeEventTarget + ); + } } } // List of events that need to be individually attached to media elements. @@ -40328,9 +41293,72 @@ if (__DEV__) { validateFormActionInDevelopment(tag, key, value, props); } + if (enableFormActions) { + if (typeof value === "function") { + // Set a javascript URL that doesn't do anything. We don't expect this to be invoked + // because we'll preventDefault, but it can happen if a form is manually submitted or + // if someone calls stopPropagation before React gets the event. + // If CSP is used to block javascript: URLs that's fine too. It just won't show this + // error message but the URL will be logged. + domElement.setAttribute( + key, // eslint-disable-next-line no-script-url + "javascript:throw new Error('" + + "A React form was unexpectedly submitted. If you called form.submit() manually, " + + "consider using form.requestSubmit() instead. If you\\'re trying to use " + + "event.stopPropagation() in a submit event handler, consider also calling " + + "event.preventDefault()." + + "')" + ); + break; + } else if (typeof prevValue === "function") { + // When we're switching off a Server Action that was originally hydrated. + // The server control these fields during SSR that are now trailing. + // The regular diffing doesn't apply since we compare against the previous props. + // Instead, we need to force them to be set to whatever they should be now. + // This would be a lot cleaner if we did this whole fork in the per-tag approach. + if (key === "formAction") { + if (tag !== "input") { + // Setting the name here isn't completely safe for inputs if this is switching + // to become a radio button. In that case we let the tag based override take + // control. + setProp(domElement, tag, "name", props.name, props, null); + } + + setProp( + domElement, + tag, + "formEncType", + props.formEncType, + props, + null + ); + setProp( + domElement, + tag, + "formMethod", + props.formMethod, + props, + null + ); + setProp( + domElement, + tag, + "formTarget", + props.formTarget, + props, + null + ); + } else { + setProp(domElement, tag, "encType", props.encType, props, null); + setProp(domElement, tag, "method", props.method, props, null); + setProp(domElement, tag, "target", props.target, props, null); + } + } + } + if ( value == null || - typeof value === "function" || + (!enableFormActions && typeof value === "function") || typeof value === "symbol" || typeof value === "boolean" ) { @@ -40719,10 +41747,9 @@ if (__DEV__) { } case "innerText": - case "textContent": - if (enableCustomElementPropertySupport) { - break; - } + case "textContent": { + break; + } // Fall through @@ -40847,10 +41874,9 @@ if (__DEV__) { case "innerText": // Properties - case "textContent": - if (enableCustomElementPropertySupport) { - break; - } + case "textContent": { + break; + } // Fall through @@ -40860,15 +41886,8 @@ if (__DEV__) { warnForInvalidEventListener(key, value); } } else { - if (enableCustomElementPropertySupport) { + { setValueForPropertyOnCustomComponent(domElement, key, value); - } else { - if (typeof value === "boolean") { - // Special case before the new flag is on - value = "" + value; - } - - setValueForAttribute(domElement, key, value); } } } @@ -42271,34 +43290,32 @@ if (__DEV__) { case "offsetHeight": case "isContentEditable": case "outerText": - case "outerHTML": - if (enableCustomElementPropertySupport) { - extraAttributes.delete(propKey.toLowerCase()); + case "outerHTML": { + extraAttributes.delete(propKey.toLowerCase()); - { - error( - "Assignment to read-only property will result in a no-op: `%s`", - propKey - ); - } - - continue; + { + error( + "Assignment to read-only property will result in a no-op: `%s`", + propKey + ); } + continue; + } + // Fall through - case "className": - if (enableCustomElementPropertySupport) { - // className is a special cased property on the server to render as an attribute. - extraAttributes.delete("class"); - var serverValue = getValueForAttributeOnCustomComponent( - domElement, - "class", - value - ); - warnForPropDifference("className", serverValue, value); - continue; - } + case "className": { + // className is a special cased property on the server to render as an attribute. + extraAttributes.delete("class"); + var serverValue = getValueForAttributeOnCustomComponent( + domElement, + "class", + value + ); + warnForPropDifference("className", serverValue, value); + continue; + } // Fall through @@ -42328,6 +43345,11 @@ if (__DEV__) { } } } // This is the exact URL string we expect that Fizz renders if we provide a function action. + // We use this for hydration warnings. It needs to be in sync with Fizz. Maybe makes sense + // as a shared module for that reason. + + var EXPECTED_FORM_ACTION_URL = // eslint-disable-next-line no-script-url + "javascript:throw new Error('A React form was unexpectedly submitted.')"; function diffHydratedGenericElement( domElement, @@ -42480,6 +43502,37 @@ if (__DEV__) { case "action": case "formAction": + if (enableFormActions) { + var _serverValue4 = domElement.getAttribute(propKey); + + if (typeof value === "function") { + extraAttributes.delete(propKey.toLowerCase()); // The server can set these extra properties to implement actions. + // So we remove them from the extra attributes warnings. + + if (propKey === "formAction") { + extraAttributes.delete("name"); + extraAttributes.delete("formenctype"); + extraAttributes.delete("formmethod"); + extraAttributes.delete("formtarget"); + } else { + extraAttributes.delete("enctype"); + extraAttributes.delete("method"); + extraAttributes.delete("target"); + } // Ideally we should be able to warn if the server value was not a function + // however since the function can return any of these attributes any way it + // wants as a custom progressive enhancement, there's nothing to compare to. + // We can check if the function has the $FORM_ACTION property on the client + // and if it's not, warn, but that's an unnecessary constraint that they + // have to have the extra extension that doesn't do anything on the client. + + continue; + } else if (_serverValue4 === EXPECTED_FORM_ACTION_URL) { + extraAttributes.delete(propKey.toLowerCase()); + warnForPropDifference(propKey, "function", value); + continue; + } + } + hydrateSanitizedAttribute( domElement, propKey, @@ -43138,6 +44191,8 @@ if (__DEV__) { var SUSPENSE_END_DATA = "/$"; var SUSPENSE_PENDING_START_DATA = "$?"; var SUSPENSE_FALLBACK_START_DATA = "$!"; + var FORM_STATE_IS_MATCHING = "F!"; + var FORM_STATE_IS_NOT_MATCHING = "F"; var STYLE = "style"; var HostContextNamespaceNone = 0; var HostContextNamespaceSvg = 1; @@ -43910,13 +44965,36 @@ if (__DEV__) { if (element.nodeName.toLowerCase() !== type.toLowerCase()) { if (!inRootOrSingleton) { // Usually we error for mismatched tags. - { + if ( + enableFormActions && + element.nodeName === "INPUT" && + element.type === "hidden" + ); + else { return null; } } // In root or singleton parents we skip past mismatched instances. } else if (!inRootOrSingleton) { // Match - { + if ( + enableFormActions && + type === "input" && + element.type === "hidden" + ) { + { + checkAttributeStringCoercion(anyProps.name, "name"); + } + + var name = anyProps.name == null ? null : "" + anyProps.name; + + if ( + anyProps.type !== "hidden" || + element.getAttribute("name") !== name + ); + else { + return element; + } + } else { return element; } } else if (isMarkedHoistable(element)); @@ -44044,7 +45122,13 @@ if (__DEV__) { if (text === "") return null; while (instance.nodeType !== TEXT_NODE) { - if (!inRootOrSingleton) { + if ( + enableFormActions && + instance.nodeType === ELEMENT_NODE && + instance.nodeName === "INPUT" && + instance.type === "hidden" + ); + else if (!inRootOrSingleton) { return null; } @@ -44106,6 +45190,36 @@ if (__DEV__) { function registerSuspenseInstanceRetry(instance, callback) { instance._reactRetry = callback; } + function canHydrateFormStateMarker(instance, inRootOrSingleton) { + while (instance.nodeType !== COMMENT_NODE) { + if (!inRootOrSingleton) { + return null; + } + + var nextInstance = getNextHydratableSibling(instance); + + if (nextInstance === null) { + return null; + } + + instance = nextInstance; + } + + var nodeData = instance.data; + + if ( + nodeData === FORM_STATE_IS_MATCHING || + nodeData === FORM_STATE_IS_NOT_MATCHING + ) { + var markerInstance = instance; + return markerInstance; + } + + return null; + } + function isFormStateMarkerMatching(markerInstance) { + return markerInstance.data === FORM_STATE_IS_MATCHING; + } function getNextHydratable(node) { // Skip non-hydratable nodes. @@ -44123,7 +45237,10 @@ if (__DEV__) { nodeData === SUSPENSE_START_DATA || nodeData === SUSPENSE_FALLBACK_START_DATA || nodeData === SUSPENSE_PENDING_START_DATA || - enableFormActions + (enableFormActions && + enableAsyncActions && + (nodeData === FORM_STATE_IS_MATCHING || + nodeData === FORM_STATE_IS_NOT_MATCHING)) ) { break; } @@ -44259,6 +45376,11 @@ if (__DEV__) { // Retry if any event replaying was blocked on this. retryIfBlockedOn(suspenseInstance); } + function shouldDeleteUnhydratedTailInstances(parentType) { + return ( + !enableFormActions || (parentType !== "form" && parentType !== "button") + ); + } function didNotMatchHydratedContainerTextInstance( parentContainer, textInstance, @@ -46130,6 +47252,8 @@ if (__DEV__) { resource.state.loading |= Inserted; } + var NotPendingTransition = NotPending; + var Dispatcher$1 = Internals.Dispatcher; if (typeof document !== "undefined") { diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 4fad288071..e0fbc59604 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -48,11 +48,10 @@ var ReactSharedInternals = enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane, enableRetryLaneExpiration = dynamicFeatureFlags.enableRetryLaneExpiration, enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -338,6 +337,13 @@ function doesFiberContain(parentFiber, childFiber) { return !1; } var currentReplayingEvent = null, + ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher, + sharedNotPendingObject = { + pending: !1, + data: null, + method: null, + action: null + }, valueStack = [], index = -1; function createCursor(defaultValue) { @@ -354,7 +360,18 @@ function push(cursor, value) { } var contextStackCursor$1 = createCursor(null), contextFiberStackCursor = createCursor(null), - rootInstanceStackCursor = createCursor(null); + rootInstanceStackCursor = createCursor(null), + hostTransitionProviderCursor = createCursor(null), + HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function pushHostContainer(fiber, nextRootInstance) { push(rootInstanceStackCursor, nextRootInstance); push(contextFiberStackCursor, fiber); @@ -398,6 +415,10 @@ function popHostContainer() { pop(rootInstanceStackCursor); } function pushHostContext(fiber) { + enableFormActions && + enableAsyncActions && + null !== fiber.memoizedState && + push(hostTransitionProviderCursor, fiber); var context = contextStackCursor$1.current; var JSCompiler_inline_result = getChildHostContextProd(context, fiber.type); context !== JSCompiler_inline_result && @@ -407,6 +428,11 @@ function pushHostContext(fiber) { function popHostContext(fiber) { contextFiberStackCursor.current === fiber && (pop(contextStackCursor$1), pop(contextFiberStackCursor)); + enableFormActions && + enableAsyncActions && + hostTransitionProviderCursor.current === fiber && + (pop(hostTransitionProviderCursor), + (HostTransitionContext._currentValue = null)); } var scheduleCallback$3 = Scheduler.unstable_scheduleCallback, cancelCallback$1 = Scheduler.unstable_cancelCallback, @@ -1701,7 +1727,7 @@ function tryHydrateSuspense(fiber, nextInstance) { nextInstance = null; break a; } - instance = getNextHydratable(instance.nextSibling); + instance = getNextHydratableSibling(instance); if (null === instance) { nextInstance = null; break a; @@ -1752,19 +1778,26 @@ function popToNextHostParent(fiber) { function popHydrationState(fiber) { if (fiber !== hydrationParentFiber) return !1; if (!isHydrating) return popToNextHostParent(fiber), (isHydrating = !0), !1; - var shouldClear = !1; - 3 === fiber.tag || - 27 === fiber.tag || - (5 === fiber.tag && - shouldSetTextContent(fiber.type, fiber.memoizedProps)) || - (shouldClear = !0); + var shouldClear = !1, + JSCompiler_temp; + if ((JSCompiler_temp = 3 !== fiber.tag && 27 !== fiber.tag)) { + if ((JSCompiler_temp = 5 === fiber.tag)) + (JSCompiler_temp = fiber.type), + (JSCompiler_temp = + !( + !enableFormActions || + ("form" !== JSCompiler_temp && "button" !== JSCompiler_temp) + ) || shouldSetTextContent(fiber.type, fiber.memoizedProps)); + JSCompiler_temp = !JSCompiler_temp; + } + JSCompiler_temp && (shouldClear = !0); if (shouldClear && (shouldClear = nextHydratableInstance)) if (shouldClientRenderOnMismatch(fiber)) warnIfUnhydratedTailNodes(), throwOnHydrationMismatch(); else for (; shouldClear; ) deleteHydratableInstance(fiber, shouldClear), - (shouldClear = getNextHydratable(shouldClear.nextSibling)); + (shouldClear = getNextHydratableSibling(shouldClear)); popToNextHostParent(fiber); if (13 === fiber.tag) { fiber = fiber.memoizedState; @@ -1773,30 +1806,31 @@ function popHydrationState(fiber) { a: { fiber = fiber.nextSibling; for (shouldClear = 0; fiber; ) { - if (8 === fiber.nodeType) { - var data = fiber.data; - if ("/$" === data) { + if (8 === fiber.nodeType) + if (((JSCompiler_temp = fiber.data), "/$" === JSCompiler_temp)) { if (0 === shouldClear) { - nextHydratableInstance = getNextHydratable(fiber.nextSibling); + nextHydratableInstance = getNextHydratableSibling(fiber); break a; } shouldClear--; } else - ("$" !== data && "$!" !== data && "$?" !== data) || shouldClear++; - } + ("$" !== JSCompiler_temp && + "$!" !== JSCompiler_temp && + "$?" !== JSCompiler_temp) || + shouldClear++; fiber = fiber.nextSibling; } nextHydratableInstance = null; } } else nextHydratableInstance = hydrationParentFiber - ? getNextHydratable(fiber.stateNode.nextSibling) + ? getNextHydratableSibling(fiber.stateNode) : null; return !0; } function warnIfUnhydratedTailNodes() { for (var nextInstance = nextHydratableInstance; nextInstance; ) - nextInstance = getNextHydratable(nextInstance.nextSibling); + nextInstance = getNextHydratableSibling(nextInstance); } function resetHydrationState() { nextHydratableInstance = hydrationParentFiber = null; @@ -3438,6 +3472,14 @@ function renderWithHooksAgain(workInProgress, Component, props, secondArg) { } while (didScheduleRenderPhaseUpdateDuringThisPass); return children; } +function TransitionAwareHostComponent() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var maybeThenable = ReactCurrentDispatcher$1.current.useState()[0]; + return "function" === typeof maybeThenable.then + ? useThenable(maybeThenable) + : maybeThenable; +} function checkDidRenderIdHook() { var didRenderIdHook = 0 !== localIdCounter; localIdCounter = 0; @@ -3841,6 +3883,186 @@ function rerenderOptimistic(passthrough, reducer) { hook.baseState = passthrough; return [passthrough, hook.queue.dispatch]; } +function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); + fiber = actionQueue.pending; + null === fiber + ? ((fiber = { payload: payload, next: null }), + (fiber.next = actionQueue.pending = fiber), + runFormStateAction(actionQueue, setState, payload)) + : (actionQueue.pending = fiber.next = + { payload: payload, next: fiber.next }); +} +function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action, + prevState = actionQueue.state, + prevTransition = ReactCurrentBatchConfig$3.transition, + currentTransition = { _callbacks: new Set() }; + ReactCurrentBatchConfig$3.transition = currentTransition; + try { + var returnValue = action(prevState, payload); + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then + ? (notifyTransitionCallbacks(currentTransition, returnValue), + returnValue.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ), + setState(returnValue)) + : (setState(returnValue), + (actionQueue.state = returnValue), + finishRunningFormStateAction(actionQueue, setState)); + } catch (error) { + setState({ then: function () {}, status: "rejected", reason: error }), + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$3.transition = prevTransition; + } +} +function finishRunningFormStateAction(actionQueue, setState) { + var last = actionQueue.pending; + if (null !== last) { + var first = last.next; + first === last + ? (actionQueue.pending = null) + : ((first = first.next), + (last.next = first), + runFormStateAction(actionQueue, setState, first.payload)); + } +} +function formStateReducer(oldState, newState) { + return newState; +} +function mountFormState(action, initialStateProp) { + if (isHydrating) { + var ssrFormState = workInProgressRoot.formState; + if (null !== ssrFormState) { + a: { + if (isHydrating) { + if (nextHydratableInstance) { + b: { + var JSCompiler_inline_result = nextHydratableInstance; + for ( + var inRootOrSingleton = rootOrSingletonContext; + 8 !== JSCompiler_inline_result.nodeType; + + ) { + if (!inRootOrSingleton) { + JSCompiler_inline_result = null; + break b; + } + JSCompiler_inline_result = getNextHydratableSibling( + JSCompiler_inline_result + ); + if (null === JSCompiler_inline_result) { + JSCompiler_inline_result = null; + break b; + } + } + inRootOrSingleton = JSCompiler_inline_result.data; + JSCompiler_inline_result = + "F!" === inRootOrSingleton || "F" === inRootOrSingleton + ? JSCompiler_inline_result + : null; + } + if (JSCompiler_inline_result) { + nextHydratableInstance = getNextHydratableSibling( + JSCompiler_inline_result + ); + JSCompiler_inline_result = "F!" === JSCompiler_inline_result.data; + break a; + } + } + throwOnHydrationMismatch(); + } + JSCompiler_inline_result = !1; + } + JSCompiler_inline_result && (initialStateProp = ssrFormState[0]); + } + } + ssrFormState = mountWorkInProgressHook(); + ssrFormState.memoizedState = ssrFormState.baseState = initialStateProp; + JSCompiler_inline_result = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialStateProp + }; + ssrFormState.queue = JSCompiler_inline_result; + ssrFormState = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + JSCompiler_inline_result + ); + JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountWorkInProgressHook(); + inRootOrSingleton = { + state: initialStateProp, + dispatch: null, + action: action, + pending: null + }; + JSCompiler_inline_result.queue = inRootOrSingleton; + ssrFormState = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + inRootOrSingleton, + ssrFormState + ); + inRootOrSingleton.dispatch = ssrFormState; + JSCompiler_inline_result.memoizedState = action; + return [initialStateProp, ssrFormState]; +} +function updateFormState(action) { + var stateHook = updateWorkInProgressHook(); + return updateFormStateImpl(stateHook, currentHook, action); +} +function updateFormStateImpl(stateHook, currentStateHook, action) { + stateHook = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + )[0]; + stateHook = + "object" === typeof stateHook && + null !== stateHook && + "function" === typeof stateHook.then + ? useThenable(stateHook) + : stateHook; + currentStateHook = updateWorkInProgressHook(); + var actionQueue = currentStateHook.queue, + dispatch = actionQueue.dispatch; + action !== currentStateHook.memoizedState && + ((currentlyRenderingFiber$1.flags |= 2048), + pushEffect( + 9, + formStateActionEffect.bind(null, actionQueue, action), + { destroy: void 0 }, + null + )); + return [stateHook, dispatch]; +} +function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; +} +function rerenderFormState(action) { + var stateHook = updateWorkInProgressHook(), + currentStateHook = currentHook; + if (null !== currentStateHook) + return updateFormStateImpl(stateHook, currentStateHook, action); + stateHook = stateHook.memoizedState; + currentStateHook = updateWorkInProgressHook(); + var dispatch = currentStateHook.queue.dispatch; + currentStateHook.memoizedState = action; + return [stateHook, dispatch]; +} function pushEffect(tag, create, inst, deps) { tag = { tag: tag, create: create, inst: inst, deps: deps, next: null }; create = currentlyRenderingFiber$1.updateQueue; @@ -4037,6 +4259,47 @@ function startTransition( (ReactCurrentBatchConfig$3.transition = prevTransition); } } +function startHostTransition(formFiber, pendingState, callback, formData) { + if (enableFormActions) + if (enableAsyncActions) { + if (5 !== formFiber.tag) throw Error(formatProdErrorMessage(476)); + if (null === formFiber.memoizedState) { + var newQueue = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: basicStateReducer, + lastRenderedState: sharedNotPendingObject + }; + var queue = newQueue; + newQueue = { + memoizedState: sharedNotPendingObject, + baseState: sharedNotPendingObject, + baseQueue: null, + queue: newQueue, + next: null + }; + formFiber.memoizedState = newQueue; + var alternate = formFiber.alternate; + null !== alternate && (alternate.memoizedState = newQueue); + } else queue = formFiber.memoizedState.queue; + startTransition( + formFiber, + queue, + pendingState, + sharedNotPendingObject, + function () { + return callback(formData); + } + ); + } else callback(formData); +} +function useHostTransitionStatus() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var status = readContext(HostTransitionContext); + return null !== status ? status : sharedNotPendingObject; +} function updateId() { return updateWorkInProgressHook().memoizedState; } @@ -4050,14 +4313,14 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$59 = enqueueUpdate(provider, fiber, lane); - null !== root$59 && - (scheduleUpdateOnFiber(root$59, provider, lane), - entangleTransitions(root$59, provider, lane)); + var root$62 = enqueueUpdate(provider, fiber, lane); + null !== root$62 && + (scheduleUpdateOnFiber(root$62, provider, lane), + entangleTransitions(root$62, provider, lane)); provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$59 && + null !== root$62 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -4188,6 +4451,10 @@ var ContextOnlyDispatcher = { ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError; ContextOnlyDispatcher.useMemoCache = throwInvalidHookError; ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; +enableFormActions && + enableAsyncActions && + ((ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError), + (ContextOnlyDispatcher.useFormState = throwInvalidHookError)); enableAsyncActions && (ContextOnlyDispatcher.useOptimistic = throwInvalidHookError); var HooksDispatcherOnMount = { @@ -4356,6 +4623,10 @@ HooksDispatcherOnMount.useEffectEvent = function (callback) { return ref.impl.apply(void 0, arguments); }; }; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnMount.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnMount.useFormState = mountFormState)); enableAsyncActions && (HooksDispatcherOnMount.useOptimistic = mountOptimistic); var HooksDispatcherOnUpdate = { readContext: readContext, @@ -4398,6 +4669,10 @@ var HooksDispatcherOnUpdate = { HooksDispatcherOnUpdate.useCacheRefresh = updateRefresh; HooksDispatcherOnUpdate.useMemoCache = useMemoCache; HooksDispatcherOnUpdate.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnUpdate.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnUpdate.useFormState = updateFormState)); enableAsyncActions && (HooksDispatcherOnUpdate.useOptimistic = updateOptimistic); var HooksDispatcherOnRerender = { @@ -4443,6 +4718,11 @@ var HooksDispatcherOnRerender = { HooksDispatcherOnRerender.useCacheRefresh = updateRefresh; HooksDispatcherOnRerender.useMemoCache = useMemoCache; HooksDispatcherOnRerender.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnRerender.useHostTransitionStatus = + useHostTransitionStatus), + (HooksDispatcherOnRerender.useFormState = rerenderFormState)); enableAsyncActions && (HooksDispatcherOnRerender.useOptimistic = rerenderOptimistic); function resolveDefaultProps(Component, baseProps) { @@ -4990,10 +5270,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$69 = workInProgress.stateNode; + root$72 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$69.incompleteTransitions.has(transition)) { + if (!root$72.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -5001,11 +5281,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$69.incompleteTransitions.set(transition, markerInstance); + root$72.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$69.incompleteTransitions.forEach(function (markerInstance) { + root$72.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5630,7 +5910,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { else if (!tryHydrateSuspense(workInProgress, nextInstance)) { shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(); - nextHydratableInstance = getNextHydratable(nextInstance.nextSibling); + nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) @@ -6524,6 +6804,18 @@ function propagateParentContextChanges( objectIs(parent.pendingProps.value, currentParent.value) || (null !== current ? current.push(context) : (current = [context])); } + } else if ( + enableFormActions && + enableAsyncActions && + parent === hostTransitionProviderCursor.current + ) { + currentParent = parent.alternate; + if (null === currentParent) throw Error(formatProdErrorMessage(387)); + currentParent.memoizedState.memoizedState !== + parent.memoizedState.memoizedState && + (null !== current + ? current.push(HostTransitionContext) + : (current = [HostTransitionContext])); } parent = parent.return; } @@ -6829,14 +7121,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$107 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$107 = lastTailNode), + for (var lastTailNode$111 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$111 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$107 + null === lastTailNode$111 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$107.sibling = null); + : (lastTailNode$111.sibling = null); } } function bubbleProperties(completedWork) { @@ -6846,19 +7138,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$108 = completedWork.child; null !== child$108; ) - (newChildLanes |= child$108.lanes | child$108.childLanes), - (subtreeFlags |= child$108.subtreeFlags & 31457280), - (subtreeFlags |= child$108.flags & 31457280), - (child$108.return = completedWork), - (child$108 = child$108.sibling); + for (var child$112 = completedWork.child; null !== child$112; ) + (newChildLanes |= child$112.lanes | child$112.childLanes), + (subtreeFlags |= child$112.subtreeFlags & 31457280), + (subtreeFlags |= child$112.flags & 31457280), + (child$112.return = completedWork), + (child$112 = child$112.sibling); else - for (child$108 = completedWork.child; null !== child$108; ) - (newChildLanes |= child$108.lanes | child$108.childLanes), - (subtreeFlags |= child$108.subtreeFlags), - (subtreeFlags |= child$108.flags), - (child$108.return = completedWork), - (child$108 = child$108.sibling); + for (child$112 = completedWork.child; null !== child$112; ) + (newChildLanes |= child$112.lanes | child$112.childLanes), + (subtreeFlags |= child$112.subtreeFlags), + (subtreeFlags |= child$112.flags), + (child$112.return = completedWork), + (child$112 = child$112.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -7203,11 +7495,11 @@ function completeWork(current, workInProgress, renderLanes) { null !== newProps.alternate.memoizedState && null !== newProps.alternate.memoizedState.cachePool && (currentResource = newProps.alternate.memoizedState.cachePool.pool); - var cache$120 = null; + var cache$124 = null; null !== newProps.memoizedState && null !== newProps.memoizedState.cachePool && - (cache$120 = newProps.memoizedState.cachePool.pool); - cache$120 !== currentResource && (newProps.flags |= 2048); + (cache$124 = newProps.memoizedState.cachePool.pool); + cache$124 !== currentResource && (newProps.flags |= 2048); } renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), @@ -7244,8 +7536,8 @@ function completeWork(current, workInProgress, renderLanes) { if (null === currentResource) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - cache$120 = currentResource.rendering; - if (null === cache$120) + cache$124 = currentResource.rendering; + if (null === cache$124) if (newProps) cutOffTailIfNeeded(currentResource, !1); else { if ( @@ -7253,11 +7545,11 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - cache$120 = findFirstSuspended(current); - if (null !== cache$120) { + cache$124 = findFirstSuspended(current); + if (null !== cache$124) { workInProgress.flags |= 128; cutOffTailIfNeeded(currentResource, !1); - current = cache$120.updateQueue; + current = cache$124.updateQueue; workInProgress.updateQueue = current; scheduleRetryEffect(workInProgress, current); workInProgress.subtreeFlags = 0; @@ -7282,7 +7574,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if (((current = findFirstSuspended(cache$120)), null !== current)) { + if (((current = findFirstSuspended(cache$124)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -7292,7 +7584,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(currentResource, !0), null === currentResource.tail && "hidden" === currentResource.tailMode && - !cache$120.alternate && + !cache$124.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -7305,13 +7597,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(currentResource, !1), (workInProgress.lanes = 4194304)); currentResource.isBackwards - ? ((cache$120.sibling = workInProgress.child), - (workInProgress.child = cache$120)) + ? ((cache$124.sibling = workInProgress.child), + (workInProgress.child = cache$124)) : ((current = currentResource.last), null !== current - ? (current.sibling = cache$120) - : (workInProgress.child = cache$120), - (currentResource.last = cache$120)); + ? (current.sibling = cache$124) + : (workInProgress.child = cache$124), + (currentResource.last = cache$124)); } if (null !== currentResource.tail) return ( @@ -7610,8 +7902,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$138) { - captureCommitPhaseError(current, nearestMountedAncestor, error$138); + } catch (error$142) { + captureCommitPhaseError(current, nearestMountedAncestor, error$142); } else ref.current = null; } @@ -7648,7 +7940,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$188) { + } catch (e$192) { JSCompiler_temp = null; break a; } @@ -7914,11 +8206,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$140) { + } catch (error$144) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$140 + error$144 ); } } @@ -8598,8 +8890,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$153) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$153); + } catch (error$157) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$157); } } break; @@ -8771,11 +9063,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { newProps ); domElement[internalPropsKey] = newProps; - } catch (error$154) { + } catch (error$158) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$154 + error$158 ); } } @@ -8813,8 +9105,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$155) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$155); + } catch (error$159) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$159); } } if (flags & 4 && ((flags = finishedWork.stateNode), null != flags)) { @@ -8825,8 +9117,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { updateProperties(flags, hoistableRoot, current, root), (flags[internalPropsKey] = root); - } catch (error$158) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$158); + } catch (error$162) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$162); } } break; @@ -8840,8 +9132,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$159) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$159); + } catch (error$163) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$163); } } break; @@ -8855,8 +9147,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$160) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$160); + } catch (error$164) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$164); } break; case 4: @@ -8886,8 +9178,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$162) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$162); + } catch (error$166) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$166); } current = finishedWork.updateQueue; null !== current && @@ -8965,11 +9257,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$143) { + } catch (error$147) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$143 + error$147 ); } } else if ( @@ -9044,21 +9336,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$144 = JSCompiler_inline_result.stateNode; + var parent$148 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$144, ""), + (setTextContent(parent$148, ""), (JSCompiler_inline_result.flags &= -33)); - var before$145 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$145, parent$144); + var before$149 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$149, parent$148); break; case 3: case 4: - var parent$146 = JSCompiler_inline_result.stateNode.containerInfo, - before$147 = getHostSibling(finishedWork); + var parent$150 = JSCompiler_inline_result.stateNode.containerInfo, + before$151 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$147, - parent$146 + before$151, + parent$150 ); break; default: @@ -9528,9 +9820,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$169 = finishedWork.stateNode; + var instance$173 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$169._visibility & 4 + ? instance$173._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9543,7 +9835,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$169._visibility |= 4), + : ((instance$173._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9551,7 +9843,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$169._visibility |= 4), + : ((instance$173._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9564,7 +9856,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$169 + instance$173 ); break; case 24: @@ -10480,8 +10772,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$177) { - handleThrow(root, thrownValue$177); + } catch (thrownValue$181) { + handleThrow(root, thrownValue$181); } while (1); lanes && root.shellSuspendCounter++; @@ -10586,8 +10878,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$179) { - handleThrow(root, thrownValue$179); + } catch (thrownValue$183) { + handleThrow(root, thrownValue$183); } while (1); resetContextDependencies(); @@ -10801,12 +11093,12 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$183 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$187 = commitBeforeMutationEffects( root, finishedWork ); commitMutationEffectsOnFiber(finishedWork, root); - shouldFireAfterActiveInstanceBlur$183 && + shouldFireAfterActiveInstanceBlur$187 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -10885,7 +11177,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$184 = rootWithPendingPassiveEffects, + var root$188 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -10901,7 +11193,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$184, remainingLanes); + releaseRootPooledCache(root$188, remainingLanes); } } return !1; @@ -11335,45 +11627,69 @@ beginWork = function (current, workInProgress, renderLanes) { workInProgress.child ); case 5: - return ( - pushHostContext(workInProgress), - null === current && - isHydrating && - (((context = Component = nextHydratableInstance), context) - ? tryHydrateInstance(workInProgress, context) || - (shouldClientRenderOnMismatch(workInProgress) && - throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable(context.nextSibling)), - (prevState = hydrationParentFiber), - nextHydratableInstance && - tryHydrateInstance(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(prevState, context) - : (insertNonHydratedInstance( - hydrationParentFiber, - workInProgress - ), - (isHydrating = !1), - (hydrationParentFiber = workInProgress), - (nextHydratableInstance = Component))) - : (shouldClientRenderOnMismatch(workInProgress) && - throwOnHydrationMismatch(), - insertNonHydratedInstance(hydrationParentFiber, workInProgress), - (isHydrating = !1), - (hydrationParentFiber = workInProgress), - (nextHydratableInstance = Component))), - (Component = workInProgress.type), - (context = workInProgress.pendingProps), - (prevState = null !== current ? current.memoizedProps : null), - (nextState = context.children), - shouldSetTextContent(Component, context) - ? (nextState = null) - : null !== prevState && - shouldSetTextContent(Component, prevState) && - (workInProgress.flags |= 32), - markRef$1(current, workInProgress), - reconcileChildren(current, workInProgress, nextState, renderLanes), - workInProgress.child - ); + pushHostContext(workInProgress); + null === current && + isHydrating && + (((context = Component = nextHydratableInstance), context) + ? tryHydrateInstance(workInProgress, context) || + (shouldClientRenderOnMismatch(workInProgress) && + throwOnHydrationMismatch(), + (nextHydratableInstance = getNextHydratableSibling(context)), + (prevState = hydrationParentFiber), + nextHydratableInstance && + tryHydrateInstance(workInProgress, nextHydratableInstance) + ? deleteHydratableInstance(prevState, context) + : (insertNonHydratedInstance( + hydrationParentFiber, + workInProgress + ), + (isHydrating = !1), + (hydrationParentFiber = workInProgress), + (nextHydratableInstance = Component))) + : (shouldClientRenderOnMismatch(workInProgress) && + throwOnHydrationMismatch(), + insertNonHydratedInstance(hydrationParentFiber, workInProgress), + (isHydrating = !1), + (hydrationParentFiber = workInProgress), + (nextHydratableInstance = Component))); + context = workInProgress.type; + prevState = workInProgress.pendingProps; + nextState = null !== current ? current.memoizedProps : null; + Component = prevState.children; + shouldSetTextContent(context, prevState) + ? (Component = null) + : null !== nextState && + shouldSetTextContent(context, nextState) && + (workInProgress.flags |= 32); + if ( + enableFormActions && + enableAsyncActions && + null !== workInProgress.memoizedState + ) { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + context = renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + renderLanes + ); + HostTransitionContext._currentValue = context; + enableLazyContextPropagation || + (didReceiveUpdate && + null !== current && + current.memoizedState.memoizedState !== context && + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + )); + } + markRef$1(current, workInProgress); + reconcileChildren(current, workInProgress, Component, renderLanes); + return workInProgress.child; case 6: return ( null === current && @@ -11384,7 +11700,7 @@ beginWork = function (current, workInProgress, renderLanes) { ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (nextHydratableInstance = getNextHydratableSibling(current)), (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) @@ -12175,12 +12491,12 @@ function getPublicRootInstance(container) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$186 = fiber.stateNode; - if (root$186.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$186.pendingLanes); + var root$190 = fiber.stateNode; + if (root$190.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$190.pendingLanes); 0 !== lanes && - (upgradePendingLanesToSync(root$186, lanes), - ensureRootIsScheduled(root$186), + (upgradePendingLanesToSync(root$190, lanes), + ensureRootIsScheduled(root$190), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -12746,19 +13062,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$345; + var JSCompiler_inline_result$jscomp$352; if (canUseDOM) { - var isSupported$jscomp$inline_1536 = "oninput" in document; - if (!isSupported$jscomp$inline_1536) { - var element$jscomp$inline_1537 = document.createElement("div"); - element$jscomp$inline_1537.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1536 = - "function" === typeof element$jscomp$inline_1537.oninput; + var isSupported$jscomp$inline_1555 = "oninput" in document; + if (!isSupported$jscomp$inline_1555) { + var element$jscomp$inline_1556 = document.createElement("div"); + element$jscomp$inline_1556.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1555 = + "function" === typeof element$jscomp$inline_1556.oninput; } - JSCompiler_inline_result$jscomp$345 = isSupported$jscomp$inline_1536; - } else JSCompiler_inline_result$jscomp$345 = !1; + JSCompiler_inline_result$jscomp$352 = isSupported$jscomp$inline_1555; + } else JSCompiler_inline_result$jscomp$352 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$345 && + JSCompiler_inline_result$jscomp$352 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13066,21 +13382,84 @@ function registerSimpleEvent(domEventName, reactName) { topLevelEventsToReactNames.set(domEventName, reactName); registerTwoPhaseEvent(reactName, [domEventName]); } -for ( - var i$jscomp$inline_1577 = 0; - i$jscomp$inline_1577 < simpleEventPluginEvents.length; - i$jscomp$inline_1577++ +function extractEvents$1( + dispatchQueue, + domEventName, + maybeTargetInst, + nativeEvent, + nativeEventTarget ) { - var eventName$jscomp$inline_1578 = - simpleEventPluginEvents[i$jscomp$inline_1577], - domEventName$jscomp$inline_1579 = - eventName$jscomp$inline_1578.toLowerCase(), - capitalizedEvent$jscomp$inline_1580 = - eventName$jscomp$inline_1578[0].toUpperCase() + - eventName$jscomp$inline_1578.slice(1); + if ( + "submit" === domEventName && + maybeTargetInst && + maybeTargetInst.stateNode === nativeEventTarget + ) { + var action = getFiberCurrentPropsFromNode(nativeEventTarget).action, + submitter = nativeEvent.submitter; + submitter && + ((domEventName = (domEventName = getFiberCurrentPropsFromNode(submitter)) + ? domEventName.formAction + : submitter.getAttribute("formAction")), + null != domEventName && ((action = domEventName), (submitter = null))); + if ("function" === typeof action) { + var event = new SyntheticEvent( + "action", + "action", + null, + nativeEvent, + nativeEventTarget + ); + dispatchQueue.push({ + event: event, + listeners: [ + { + instance: null, + listener: function () { + if (!nativeEvent.defaultPrevented) { + event.preventDefault(); + if (submitter) { + var temp = submitter.ownerDocument.createElement("input"); + temp.name = submitter.name; + temp.value = submitter.value; + submitter.parentNode.insertBefore(temp, submitter); + var formData = new FormData(nativeEventTarget); + temp.parentNode.removeChild(temp); + } else formData = new FormData(nativeEventTarget); + startHostTransition( + maybeTargetInst, + { + pending: !0, + data: formData, + method: nativeEventTarget.method, + action: action + }, + action, + formData + ); + } + }, + currentTarget: nativeEventTarget + } + ] + }); + } + } +} +for ( + var i$jscomp$inline_1596 = 0; + i$jscomp$inline_1596 < simpleEventPluginEvents.length; + i$jscomp$inline_1596++ +) { + var eventName$jscomp$inline_1597 = + simpleEventPluginEvents[i$jscomp$inline_1596], + domEventName$jscomp$inline_1598 = + eventName$jscomp$inline_1597.toLowerCase(), + capitalizedEvent$jscomp$inline_1599 = + eventName$jscomp$inline_1597[0].toUpperCase() + + eventName$jscomp$inline_1597.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1579, - "on" + capitalizedEvent$jscomp$inline_1580 + domEventName$jscomp$inline_1598, + "on" + capitalizedEvent$jscomp$inline_1599 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -13622,8 +14001,7 @@ function dispatchEventForPluginEventSystem( !SyntheticEventCtor || "input" !== SyntheticEventCtor.toLowerCase() || ("checkbox" !== reactName.type && "radio" !== reactName.type) - ? enableCustomElementPropertySupport && - targetInst && + ? targetInst && isCustomElement(targetInst.elementType) && (getTargetInstFunc = getTargetInstForChangeEvent) : (getTargetInstFunc = getTargetInstForClickEvent); @@ -13728,9 +14106,9 @@ function dispatchEventForPluginEventSystem( ? getNativeBeforeInputChars(domEventName, nativeEvent) : getFallbackBeforeInputChars(domEventName, nativeEvent)) ) - (targetInst = accumulateTwoPhaseListeners(targetInst, "onBeforeInput")), - 0 < targetInst.length && - ((nativeEventTarget = new SyntheticCompositionEvent( + (eventType = accumulateTwoPhaseListeners(targetInst, "onBeforeInput")), + 0 < eventType.length && + ((handleEventFunc = new SyntheticCompositionEvent( "onBeforeInput", "beforeinput", null, @@ -13738,10 +14116,18 @@ function dispatchEventForPluginEventSystem( nativeEventTarget )), dispatchQueue.push({ - event: nativeEventTarget, - listeners: targetInst + event: handleEventFunc, + listeners: eventType }), - (nativeEventTarget.data = fallbackData)); + (handleEventFunc.data = fallbackData)); + enableFormActions && + extractEvents$1( + dispatchQueue, + domEventName, + targetInst, + nativeEvent, + nativeEventTarget + ); } processDispatchQueue(dispatchQueue, eventSystemFlags); }); @@ -13963,9 +14349,55 @@ function setProp(domElement, tag, key, value, props, prevValue) { break; case "action": case "formAction": + if (enableFormActions) + if ("function" === typeof value) { + domElement.setAttribute( + key, + "javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')" + ); + break; + } else + "function" === typeof prevValue && + ("formAction" === key + ? ("input" !== tag && + setProp(domElement, tag, "name", props.name, props, null), + setProp( + domElement, + tag, + "formEncType", + props.formEncType, + props, + null + ), + setProp( + domElement, + tag, + "formMethod", + props.formMethod, + props, + null + ), + setProp( + domElement, + tag, + "formTarget", + props.formTarget, + props, + null + )) + : (setProp( + domElement, + tag, + "encType", + props.encType, + props, + null + ), + setProp(domElement, tag, "method", props.method, props, null), + setProp(domElement, tag, "target", props.target, props, null))); if ( null == value || - "function" === typeof value || + (!enableFormActions && "function" === typeof value) || "symbol" === typeof value || "boolean" === typeof value ) { @@ -14180,7 +14612,7 @@ function setProp(domElement, tag, key, value, props, prevValue) { break; case "innerText": case "textContent": - if (enableCustomElementPropertySupport) break; + break; default: if ( !(2 < key.length) || @@ -14229,41 +14661,36 @@ function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { break; case "innerText": case "textContent": - if (enableCustomElementPropertySupport) break; + break; default: if (!registrationNameDependencies.hasOwnProperty(key)) - if (enableCustomElementPropertySupport) - a: { - props = value; - if ( - "o" === key[0] && - "n" === key[1] && - ((tag = key.endsWith("Capture")), - (value = key.slice(2, tag ? key.length - 7 : 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) - : !0 === props - ? domElement.setAttribute(key, "") - : setValueForAttribute(domElement, key, props); + a: { + if ( + "o" === key[0] && + "n" === key[1] && + ((props = key.endsWith("Capture")), + (tag = key.slice(2, props ? key.length - 7 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(tag, prevValue, props), + "function" === typeof value) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(tag, value, props); + break a; } - else - "boolean" === typeof value && (value = "" + value), - setValueForAttribute(domElement, key, value); + key in domElement + ? (domElement[key] = value) + : !0 === value + ? domElement.setAttribute(key, "") + : setValueForAttribute(domElement, key, value); + } } } function setInitialProperties(domElement, tag, props) { @@ -14506,14 +14933,14 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp(domElement, tag, propKey, null, nextProps, lastProp); } } - for (var propKey$215 in nextProps) { - var propKey = nextProps[propKey$215]; - lastProp = lastProps[propKey$215]; + for (var propKey$219 in nextProps) { + var propKey = nextProps[propKey$219]; + lastProp = lastProps[propKey$219]; if ( - nextProps.hasOwnProperty(propKey$215) && + nextProps.hasOwnProperty(propKey$219) && (null != propKey || null != lastProp) ) - switch (propKey$215) { + switch (propKey$219) { case "type": type = propKey; break; @@ -14542,7 +14969,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp( domElement, tag, - propKey$215, + propKey$219, propKey, nextProps, lastProp @@ -14561,7 +14988,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ); return; case "select": - propKey = value = defaultValue = propKey$215 = null; + propKey = value = defaultValue = propKey$219 = null; for (type in lastProps) if ( ((lastDefaultValue = lastProps[type]), @@ -14592,7 +15019,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ) switch (name) { case "value": - propKey$215 = type; + propKey$219 = type; break; case "defaultValue": defaultValue = type; @@ -14613,15 +15040,15 @@ function updateProperties(domElement, tag, lastProps, nextProps) { tag = defaultValue; lastProps = value; nextProps = propKey; - null != propKey$215 - ? updateOptions(domElement, !!lastProps, propKey$215, !1) + null != propKey$219 + ? updateOptions(domElement, !!lastProps, propKey$219, !1) : !!nextProps !== !!lastProps && (null != tag ? updateOptions(domElement, !!lastProps, tag, !0) : updateOptions(domElement, !!lastProps, lastProps ? [] : "", !1)); return; case "textarea": - propKey = propKey$215 = null; + propKey = propKey$219 = null; for (defaultValue in lastProps) if ( ((name = lastProps[defaultValue]), @@ -14645,7 +15072,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ) switch (value) { case "value": - propKey$215 = name; + propKey$219 = name; break; case "defaultValue": propKey = name; @@ -14659,17 +15086,17 @@ function updateProperties(domElement, tag, lastProps, nextProps) { name !== type && setProp(domElement, tag, value, name, nextProps, type); } - updateTextarea(domElement, propKey$215, propKey); + updateTextarea(domElement, propKey$219, propKey); return; case "option": - for (var propKey$231 in lastProps) + for (var propKey$235 in lastProps) if ( - ((propKey$215 = lastProps[propKey$231]), - lastProps.hasOwnProperty(propKey$231) && - null != propKey$215 && - !nextProps.hasOwnProperty(propKey$231)) + ((propKey$219 = lastProps[propKey$235]), + lastProps.hasOwnProperty(propKey$235) && + null != propKey$219 && + !nextProps.hasOwnProperty(propKey$235)) ) - switch (propKey$231) { + switch (propKey$235) { case "selected": domElement.selected = !1; break; @@ -14677,33 +15104,33 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp( domElement, tag, - propKey$231, + propKey$235, null, nextProps, - propKey$215 + propKey$219 ); } for (lastDefaultValue in nextProps) if ( - ((propKey$215 = nextProps[lastDefaultValue]), + ((propKey$219 = nextProps[lastDefaultValue]), (propKey = lastProps[lastDefaultValue]), nextProps.hasOwnProperty(lastDefaultValue) && - propKey$215 !== propKey && - (null != propKey$215 || null != propKey)) + propKey$219 !== propKey && + (null != propKey$219 || null != propKey)) ) switch (lastDefaultValue) { case "selected": domElement.selected = - propKey$215 && - "function" !== typeof propKey$215 && - "symbol" !== typeof propKey$215; + propKey$219 && + "function" !== typeof propKey$219 && + "symbol" !== typeof propKey$219; break; default: setProp( domElement, tag, lastDefaultValue, - propKey$215, + propKey$219, nextProps, propKey ); @@ -14724,24 +15151,24 @@ function updateProperties(domElement, tag, lastProps, nextProps) { case "track": case "wbr": case "menuitem": - for (var propKey$236 in lastProps) - (propKey$215 = lastProps[propKey$236]), - lastProps.hasOwnProperty(propKey$236) && - null != propKey$215 && - !nextProps.hasOwnProperty(propKey$236) && - setProp(domElement, tag, propKey$236, null, nextProps, propKey$215); + for (var propKey$240 in lastProps) + (propKey$219 = lastProps[propKey$240]), + lastProps.hasOwnProperty(propKey$240) && + null != propKey$219 && + !nextProps.hasOwnProperty(propKey$240) && + setProp(domElement, tag, propKey$240, null, nextProps, propKey$219); for (checked in nextProps) if ( - ((propKey$215 = nextProps[checked]), + ((propKey$219 = nextProps[checked]), (propKey = lastProps[checked]), nextProps.hasOwnProperty(checked) && - propKey$215 !== propKey && - (null != propKey$215 || null != propKey)) + propKey$219 !== propKey && + (null != propKey$219 || null != propKey)) ) switch (checked) { case "children": case "dangerouslySetInnerHTML": - if (null != propKey$215) + if (null != propKey$219) throw Error(formatProdErrorMessage(137, tag)); break; default: @@ -14749,7 +15176,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { domElement, tag, checked, - propKey$215, + propKey$219, nextProps, propKey ); @@ -14757,49 +15184,49 @@ function updateProperties(domElement, tag, lastProps, nextProps) { return; default: if (isCustomElement(tag)) { - for (var propKey$241 in lastProps) - (propKey$215 = lastProps[propKey$241]), - lastProps.hasOwnProperty(propKey$241) && - null != propKey$215 && - !nextProps.hasOwnProperty(propKey$241) && + for (var propKey$245 in lastProps) + (propKey$219 = lastProps[propKey$245]), + lastProps.hasOwnProperty(propKey$245) && + null != propKey$219 && + !nextProps.hasOwnProperty(propKey$245) && setPropOnCustomElement( domElement, tag, - propKey$241, + propKey$245, null, nextProps, - propKey$215 + propKey$219 ); for (defaultChecked in nextProps) - (propKey$215 = nextProps[defaultChecked]), + (propKey$219 = nextProps[defaultChecked]), (propKey = lastProps[defaultChecked]), !nextProps.hasOwnProperty(defaultChecked) || - propKey$215 === propKey || - (null == propKey$215 && null == propKey) || + propKey$219 === propKey || + (null == propKey$219 && null == propKey) || setPropOnCustomElement( domElement, tag, defaultChecked, - propKey$215, + propKey$219, nextProps, propKey ); return; } } - for (var propKey$246 in lastProps) - (propKey$215 = lastProps[propKey$246]), - lastProps.hasOwnProperty(propKey$246) && - null != propKey$215 && - !nextProps.hasOwnProperty(propKey$246) && - setProp(domElement, tag, propKey$246, null, nextProps, propKey$215); + for (var propKey$250 in lastProps) + (propKey$219 = lastProps[propKey$250]), + lastProps.hasOwnProperty(propKey$250) && + null != propKey$219 && + !nextProps.hasOwnProperty(propKey$250) && + setProp(domElement, tag, propKey$250, null, nextProps, propKey$219); for (lastProp in nextProps) - (propKey$215 = nextProps[lastProp]), + (propKey$219 = nextProps[lastProp]), (propKey = lastProps[lastProp]), !nextProps.hasOwnProperty(lastProp) || - propKey$215 === propKey || - (null == propKey$215 && null == propKey) || - setProp(domElement, tag, lastProp, propKey$215, nextProps, propKey); + propKey$219 === propKey || + (null == propKey$219 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$219, nextProps, propKey); } var eventsEnabled = null, selectionInformation = null; @@ -14958,56 +15385,65 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) { for (; 1 === instance.nodeType; ) { var anyProps = props; if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { - if (!inRootOrSingleton) break; - } else { - if (!inRootOrSingleton) return instance; - if (!instance[internalHoistableMarker]) - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) break; - return instance; - case "link": - var rel = instance.getAttribute("rel"); - if ( - "stylesheet" === rel && - instance.hasAttribute("data-precedence") - ) - break; - else if ( - rel !== anyProps.rel || - instance.getAttribute("href") !== - (null == anyProps.href ? null : anyProps.href) || + if ( + !( + inRootOrSingleton || + (enableFormActions && + "INPUT" === instance.nodeName && + "hidden" === instance.type) + ) + ) + break; + } else if (!inRootOrSingleton) + if (enableFormActions && "input" === type && "hidden" === instance.type) { + var name = null == anyProps.name ? null : "" + anyProps.name; + if ( + "hidden" === anyProps.type && + instance.getAttribute("name") === name + ) + return instance; + } else return instance; + else if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + name = instance.getAttribute("rel"); + if ("stylesheet" === name && instance.hasAttribute("data-precedence")) + break; + else if ( + name !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + name = instance.getAttribute("src"); + if ( + (name !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || instance.getAttribute("crossorigin") !== - (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || - instance.getAttribute("title") !== - (null == anyProps.title ? null : anyProps.title) - ) - break; - return instance; - case "style": - if (instance.hasAttribute("data-precedence")) break; - return instance; - case "script": - rel = instance.getAttribute("src"); - if ( - (rel !== (null == anyProps.src ? null : anyProps.src) || - instance.getAttribute("type") !== - (null == anyProps.type ? null : anyProps.type) || - instance.getAttribute("crossorigin") !== - (null == anyProps.crossOrigin - ? null - : anyProps.crossOrigin)) && - rel && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop") - ) - break; - return instance; - default: - return instance; - } - } - instance = getNextHydratable(instance.nextSibling); + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin)) && + name && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + return instance; + default: + return instance; + } + instance = getNextHydratableSibling(instance); if (null === instance) break; } return null; @@ -15015,8 +15451,17 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) { function canHydrateTextInstance(instance, text, inRootOrSingleton) { if ("" === text) return null; for (; 3 !== instance.nodeType; ) { - if (!inRootOrSingleton) return null; - instance = getNextHydratable(instance.nextSibling); + if ( + !( + (enableFormActions && + 1 === instance.nodeType && + "INPUT" === instance.nodeName && + "hidden" === instance.type) || + inRootOrSingleton + ) + ) + return null; + instance = getNextHydratableSibling(instance); if (null === instance) return null; } return instance; @@ -15027,12 +15472,23 @@ function getNextHydratable(node) { if (1 === nodeType || 3 === nodeType) break; if (8 === nodeType) { nodeType = node.data; - if ("$" === nodeType || "$!" === nodeType || "$?" === nodeType) break; + if ( + "$" === nodeType || + "$!" === nodeType || + "$?" === nodeType || + (enableFormActions && + enableAsyncActions && + ("F!" === nodeType || "F" === nodeType)) + ) + break; if ("/$" === nodeType) return null; } } return node; } +function getNextHydratableSibling(instance) { + return getNextHydratable(instance.nextSibling); +} function hydrateInstance( instance, type, @@ -15412,17 +15868,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$254 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$255 = styles$254.get(type); - resource$255 || + var styles$258 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$259 = styles$258.get(type); + resource$259 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$255 = { + (resource$259 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$254.set(type, resource$255), + styles$258.set(type, resource$259), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -15437,9 +15893,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$255.state + resource$259.state )); - return resource$255; + return resource$259; } return null; case "script": @@ -15522,37 +15978,37 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = instance); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$259 = hoistableRoot.querySelector( + var instance$263 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$259) + if (instance$263) return ( (resource.state.loading |= 4), - (resource.instance = instance$259), - markNodeAsHoistable(instance$259), - instance$259 + (resource.instance = instance$263), + markNodeAsHoistable(instance$263), + instance$263 ); instance = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(instance, styleProps); - instance$259 = ( + instance$263 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$259); - var linkInstance = instance$259; + markNodeAsHoistable(instance$263); + var linkInstance = instance$263; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$259, "link", instance); + setInitialProperties(instance$263, "link", instance); resource.state.loading |= 4; - insertStylesheet(instance$259, props.precedence, hoistableRoot); - return (resource.instance = instance$259); + insertStylesheet(instance$263, props.precedence, hoistableRoot); + return (resource.instance = instance$263); case "script": - instance$259 = getScriptKey(props.src); + instance$263 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - getScriptSelectorFromKey(instance$259) + getScriptSelectorFromKey(instance$263) )) ) return ( @@ -15561,7 +16017,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); instance = props; - if ((styleProps = preloadPropsMap.get(instance$259))) + if ((styleProps = preloadPropsMap.get(instance$263))) (instance = assign({}, props)), adoptPreloadPropsForScript(instance, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -16168,6 +16624,42 @@ function scheduleCallbackIfUnblocked(queuedEvent, unblocked) { replayUnblockedEvents ))); } +var lastScheduledReplayQueue = null; +function scheduleReplayQueueIfNeeded(formReplayingQueue) { + lastScheduledReplayQueue !== formReplayingQueue && + ((lastScheduledReplayQueue = formReplayingQueue), + Scheduler.unstable_scheduleCallback( + Scheduler.unstable_NormalPriority, + function () { + lastScheduledReplayQueue === formReplayingQueue && + (lastScheduledReplayQueue = null); + for (var i = 0; i < formReplayingQueue.length; i += 3) { + var form = formReplayingQueue[i], + submitterOrAction = formReplayingQueue[i + 1], + formData = formReplayingQueue[i + 2]; + if ("function" !== typeof submitterOrAction) + if (null === findInstanceBlockingTarget(submitterOrAction || form)) + continue; + else break; + var formInst = getInstanceFromNode(form); + null !== formInst && + (formReplayingQueue.splice(i, 3), + (i -= 3), + startHostTransition( + formInst, + { + pending: !0, + data: formData, + method: form.method, + action: submitterOrAction + }, + submitterOrAction, + formData + )); + } + } + )); +} function retryIfBlockedOn(unblocked) { function unblock(queuedEvent) { return scheduleCallbackIfUnblocked(queuedEvent, unblocked); @@ -16189,6 +16681,34 @@ function retryIfBlockedOn(unblocked) { ) attemptExplicitHydrationTarget(i), null === i.blockedOn && queuedExplicitHydrationTargets.shift(); + if ( + enableFormActions && + ((i = unblocked.getRootNode().$$reactFormReplay), null != i) + ) + for (queuedTarget = 0; queuedTarget < i.length; queuedTarget += 3) { + var form = i[queuedTarget], + submitterOrAction = i[queuedTarget + 1], + formProps = getFiberCurrentPropsFromNode(form); + if ("function" === typeof submitterOrAction) + formProps || scheduleReplayQueueIfNeeded(i); + else if (formProps) { + var action = null; + if (submitterOrAction && submitterOrAction.hasAttribute("formAction")) + if ( + ((form = submitterOrAction), + (formProps = getFiberCurrentPropsFromNode(submitterOrAction))) + ) + action = formProps.formAction; + else { + if (null !== findInstanceBlockingTarget(form)) continue; + } + else action = formProps.action; + "function" === typeof action + ? (i[queuedTarget + 1] = action) + : (i.splice(queuedTarget, 3), (queuedTarget -= 3)); + scheduleReplayQueueIfNeeded(i); + } + } } var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig, _enabled = !0; @@ -16308,36 +16828,33 @@ function dispatchEvent( } function findInstanceBlockingEvent(nativeEvent) { nativeEvent = getEventTarget(nativeEvent); - a: { - return_targetInst = null; - nativeEvent = getClosestInstanceFromNode(nativeEvent); - if (null !== nativeEvent) { - var nearestMounted = getNearestMountedFiber(nativeEvent); - if (null === nearestMounted) nativeEvent = null; - else { - var tag = nearestMounted.tag; - if (13 === tag) { - nativeEvent = getSuspenseInstanceFromFiber(nearestMounted); - if (null !== nativeEvent) break a; - nativeEvent = null; - } else if (3 === tag) { - if (nearestMounted.stateNode.current.memoizedState.isDehydrated) { - nativeEvent = - 3 === nearestMounted.tag - ? nearestMounted.stateNode.containerInfo - : null; - break a; - } - nativeEvent = null; - } else nearestMounted !== nativeEvent && (nativeEvent = null); - } - } - return_targetInst = nativeEvent; - nativeEvent = null; - } - return nativeEvent; + return findInstanceBlockingTarget(nativeEvent); } var return_targetInst = null; +function findInstanceBlockingTarget(targetNode) { + return_targetInst = null; + targetNode = getClosestInstanceFromNode(targetNode); + if (null !== targetNode) { + var nearestMounted = getNearestMountedFiber(targetNode); + if (null === nearestMounted) targetNode = null; + else { + var tag = nearestMounted.tag; + if (13 === tag) { + targetNode = getSuspenseInstanceFromFiber(nearestMounted); + if (null !== targetNode) return targetNode; + targetNode = null; + } else if (3 === tag) { + if (nearestMounted.stateNode.current.memoizedState.isDehydrated) + return 3 === nearestMounted.tag + ? nearestMounted.stateNode.containerInfo + : null; + targetNode = null; + } else nearestMounted !== targetNode && (targetNode = null); + } + } + return_targetInst = targetNode; + return null; +} function getEventPriority(domEventName) { switch (domEventName) { case "cancel": @@ -16515,11 +17032,11 @@ function legacyCreateRootFromDOMContainer( if ("function" === typeof callback) { var originalCallback = callback; callback = function () { - var instance = getPublicRootInstance(root$279); + var instance = getPublicRootInstance(root$285); originalCallback.call(instance); }; } - var root$279 = createHydrationContainer( + var root$285 = createHydrationContainer( initialChildren, callback, container, @@ -16532,23 +17049,23 @@ function legacyCreateRootFromDOMContainer( null, null ); - container._reactRootContainer = root$279; - container[internalContainerInstanceKey] = root$279.current; + container._reactRootContainer = root$285; + container[internalContainerInstanceKey] = root$285.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(); - return root$279; + return root$285; } clearContainer(container); if ("function" === typeof callback) { - var originalCallback$280 = callback; + var originalCallback$286 = callback; callback = function () { - var instance = getPublicRootInstance(root$281); - originalCallback$280.call(instance); + var instance = getPublicRootInstance(root$287); + originalCallback$286.call(instance); }; } - var root$281 = createFiberRoot( + var root$287 = createFiberRoot( container, 0, !1, @@ -16561,15 +17078,15 @@ function legacyCreateRootFromDOMContainer( null, null ); - container._reactRootContainer = root$281; - container[internalContainerInstanceKey] = root$281.current; + container._reactRootContainer = root$287; + container[internalContainerInstanceKey] = root$287.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(function () { - updateContainer(initialChildren, root$281, parentComponent, callback); + updateContainer(initialChildren, root$287, parentComponent, callback); }); - return root$281; + return root$287; } function legacyRenderSubtreeIntoContainer( parentComponent, @@ -16634,17 +17151,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1803 = { +var devToolsConfig$jscomp$inline_1823 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-5c298e92", + version: "18.3.0-www-classic-3deaa9d4", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2149 = { - bundleType: devToolsConfig$jscomp$inline_1803.bundleType, - version: devToolsConfig$jscomp$inline_1803.version, - rendererPackageName: devToolsConfig$jscomp$inline_1803.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1803.rendererConfig, +var internals$jscomp$inline_2185 = { + bundleType: devToolsConfig$jscomp$inline_1823.bundleType, + version: devToolsConfig$jscomp$inline_1823.version, + rendererPackageName: devToolsConfig$jscomp$inline_1823.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1823.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16660,26 +17177,26 @@ var internals$jscomp$inline_2149 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1803.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1823.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-5c298e92" + reconcilerVersion: "18.3.0-www-classic-3deaa9d4" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2150 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2186 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2150.isDisabled && - hook$jscomp$inline_2150.supportsFiber + !hook$jscomp$inline_2186.isDisabled && + hook$jscomp$inline_2186.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2150.inject( - internals$jscomp$inline_2149 + (rendererID = hook$jscomp$inline_2186.inject( + internals$jscomp$inline_2185 )), - (injectedHook = hook$jscomp$inline_2150); + (injectedHook = hook$jscomp$inline_2186); } catch (err) {} } assign(Internals, { @@ -16769,7 +17286,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride = !1, identifierPrefix = "", onRecoverableError = defaultOnRecoverableError, - transitionCallbacks = null; + transitionCallbacks = null, + formState = null; null !== options && void 0 !== options && (!0 === options.unstable_strictMode && (isStrictMode = !0), @@ -16780,7 +17298,11 @@ exports.hydrateRoot = function (container, initialChildren, options) { void 0 !== options.onRecoverableError && (onRecoverableError = options.onRecoverableError), void 0 !== options.unstable_transitionCallbacks && - (transitionCallbacks = options.unstable_transitionCallbacks)); + (transitionCallbacks = options.unstable_transitionCallbacks), + enableAsyncActions && + enableFormActions && + void 0 !== options.formState && + (formState = options.formState)); initialChildren = createHydrationContainer( initialChildren, null, @@ -16792,7 +17314,7 @@ exports.hydrateRoot = function (container, initialChildren, options) { identifierPrefix, onRecoverableError, transitionCallbacks, - null + formState ); container[internalContainerInstanceKey] = initialChildren.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -16998,10 +17520,18 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.useFormState = function () { +exports.useFormState = function (action, initialState, permalink) { + if (enableFormActions && enableAsyncActions) + return ReactCurrentDispatcher$2.current.useFormState( + action, + initialState, + permalink + ); throw Error(formatProdErrorMessage(248)); }; exports.useFormStatus = function () { + if (enableFormActions && enableAsyncActions) + return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-classic-5c298e92"; +exports.version = "18.3.0-www-classic-3deaa9d4"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index fe02a6dfd5..3d2b054647 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -51,11 +51,10 @@ var assign = Object.assign, enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane, enableRetryLaneExpiration = dynamicFeatureFlags.enableRetryLaneExpiration, enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -68,6 +67,13 @@ var assign = Object.assign, transitionLaneExpirationMs = dynamicFeatureFlags.transitionLaneExpirationMs, ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, + ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher, + sharedNotPendingObject = { + pending: !1, + data: null, + method: null, + action: null + }, valueStack = [], index = -1; function createCursor(defaultValue) { @@ -112,7 +118,18 @@ function getIteratorFn(maybeIterable) { } var contextStackCursor = createCursor(null), contextFiberStackCursor = createCursor(null), - rootInstanceStackCursor = createCursor(null); + rootInstanceStackCursor = createCursor(null), + hostTransitionProviderCursor = createCursor(null), + HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function pushHostContainer(fiber, nextRootInstance) { push(rootInstanceStackCursor, nextRootInstance); push(contextFiberStackCursor, fiber); @@ -156,6 +173,10 @@ function popHostContainer() { pop(rootInstanceStackCursor); } function pushHostContext(fiber) { + enableFormActions && + enableAsyncActions && + null !== fiber.memoizedState && + push(hostTransitionProviderCursor, fiber); var context = contextStackCursor.current; var JSCompiler_inline_result = getChildHostContextProd(context, fiber.type); context !== JSCompiler_inline_result && @@ -165,6 +186,11 @@ function pushHostContext(fiber) { function popHostContext(fiber) { contextFiberStackCursor.current === fiber && (pop(contextStackCursor), pop(contextFiberStackCursor)); + enableFormActions && + enableAsyncActions && + hostTransitionProviderCursor.current === fiber && + (pop(hostTransitionProviderCursor), + (HostTransitionContext._currentValue = null)); } var scheduleCallback$3 = Scheduler.unstable_scheduleCallback, cancelCallback$1 = Scheduler.unstable_cancelCallback, @@ -1595,7 +1621,7 @@ function tryHydrateSuspense(fiber, nextInstance) { nextInstance = null; break a; } - instance = getNextHydratable(instance.nextSibling); + instance = getNextHydratableSibling(instance); if (null === instance) { nextInstance = null; break a; @@ -1646,19 +1672,26 @@ function popToNextHostParent(fiber) { function popHydrationState(fiber) { if (fiber !== hydrationParentFiber) return !1; if (!isHydrating) return popToNextHostParent(fiber), (isHydrating = !0), !1; - var shouldClear = !1; - 3 === fiber.tag || - 27 === fiber.tag || - (5 === fiber.tag && - shouldSetTextContent(fiber.type, fiber.memoizedProps)) || - (shouldClear = !0); + var shouldClear = !1, + JSCompiler_temp; + if ((JSCompiler_temp = 3 !== fiber.tag && 27 !== fiber.tag)) { + if ((JSCompiler_temp = 5 === fiber.tag)) + (JSCompiler_temp = fiber.type), + (JSCompiler_temp = + !( + !enableFormActions || + ("form" !== JSCompiler_temp && "button" !== JSCompiler_temp) + ) || shouldSetTextContent(fiber.type, fiber.memoizedProps)); + JSCompiler_temp = !JSCompiler_temp; + } + JSCompiler_temp && (shouldClear = !0); if (shouldClear && (shouldClear = nextHydratableInstance)) if (shouldClientRenderOnMismatch(fiber)) warnIfUnhydratedTailNodes(), throwOnHydrationMismatch(); else for (; shouldClear; ) deleteHydratableInstance(fiber, shouldClear), - (shouldClear = getNextHydratable(shouldClear.nextSibling)); + (shouldClear = getNextHydratableSibling(shouldClear)); popToNextHostParent(fiber); if (13 === fiber.tag) { fiber = fiber.memoizedState; @@ -1667,30 +1700,31 @@ function popHydrationState(fiber) { a: { fiber = fiber.nextSibling; for (shouldClear = 0; fiber; ) { - if (8 === fiber.nodeType) { - var data = fiber.data; - if ("/$" === data) { + if (8 === fiber.nodeType) + if (((JSCompiler_temp = fiber.data), "/$" === JSCompiler_temp)) { if (0 === shouldClear) { - nextHydratableInstance = getNextHydratable(fiber.nextSibling); + nextHydratableInstance = getNextHydratableSibling(fiber); break a; } shouldClear--; } else - ("$" !== data && "$!" !== data && "$?" !== data) || shouldClear++; - } + ("$" !== JSCompiler_temp && + "$!" !== JSCompiler_temp && + "$?" !== JSCompiler_temp) || + shouldClear++; fiber = fiber.nextSibling; } nextHydratableInstance = null; } } else nextHydratableInstance = hydrationParentFiber - ? getNextHydratable(fiber.stateNode.nextSibling) + ? getNextHydratableSibling(fiber.stateNode) : null; return !0; } function warnIfUnhydratedTailNodes() { for (var nextInstance = nextHydratableInstance; nextInstance; ) - nextInstance = getNextHydratable(nextInstance.nextSibling); + nextInstance = getNextHydratableSibling(nextInstance); } function resetHydrationState() { nextHydratableInstance = hydrationParentFiber = null; @@ -3332,6 +3366,14 @@ function renderWithHooksAgain(workInProgress, Component, props, secondArg) { } while (didScheduleRenderPhaseUpdateDuringThisPass); return children; } +function TransitionAwareHostComponent() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var maybeThenable = ReactCurrentDispatcher$1.current.useState()[0]; + return "function" === typeof maybeThenable.then + ? useThenable(maybeThenable) + : maybeThenable; +} function checkDidRenderIdHook() { var didRenderIdHook = 0 !== localIdCounter; localIdCounter = 0; @@ -3735,6 +3777,186 @@ function rerenderOptimistic(passthrough, reducer) { hook.baseState = passthrough; return [passthrough, hook.queue.dispatch]; } +function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); + fiber = actionQueue.pending; + null === fiber + ? ((fiber = { payload: payload, next: null }), + (fiber.next = actionQueue.pending = fiber), + runFormStateAction(actionQueue, setState, payload)) + : (actionQueue.pending = fiber.next = + { payload: payload, next: fiber.next }); +} +function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action, + prevState = actionQueue.state, + prevTransition = ReactCurrentBatchConfig$3.transition, + currentTransition = { _callbacks: new Set() }; + ReactCurrentBatchConfig$3.transition = currentTransition; + try { + var returnValue = action(prevState, payload); + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then + ? (notifyTransitionCallbacks(currentTransition, returnValue), + returnValue.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ), + setState(returnValue)) + : (setState(returnValue), + (actionQueue.state = returnValue), + finishRunningFormStateAction(actionQueue, setState)); + } catch (error) { + setState({ then: function () {}, status: "rejected", reason: error }), + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$3.transition = prevTransition; + } +} +function finishRunningFormStateAction(actionQueue, setState) { + var last = actionQueue.pending; + if (null !== last) { + var first = last.next; + first === last + ? (actionQueue.pending = null) + : ((first = first.next), + (last.next = first), + runFormStateAction(actionQueue, setState, first.payload)); + } +} +function formStateReducer(oldState, newState) { + return newState; +} +function mountFormState(action, initialStateProp) { + if (isHydrating) { + var ssrFormState = workInProgressRoot.formState; + if (null !== ssrFormState) { + a: { + if (isHydrating) { + if (nextHydratableInstance) { + b: { + var JSCompiler_inline_result = nextHydratableInstance; + for ( + var inRootOrSingleton = rootOrSingletonContext; + 8 !== JSCompiler_inline_result.nodeType; + + ) { + if (!inRootOrSingleton) { + JSCompiler_inline_result = null; + break b; + } + JSCompiler_inline_result = getNextHydratableSibling( + JSCompiler_inline_result + ); + if (null === JSCompiler_inline_result) { + JSCompiler_inline_result = null; + break b; + } + } + inRootOrSingleton = JSCompiler_inline_result.data; + JSCompiler_inline_result = + "F!" === inRootOrSingleton || "F" === inRootOrSingleton + ? JSCompiler_inline_result + : null; + } + if (JSCompiler_inline_result) { + nextHydratableInstance = getNextHydratableSibling( + JSCompiler_inline_result + ); + JSCompiler_inline_result = "F!" === JSCompiler_inline_result.data; + break a; + } + } + throwOnHydrationMismatch(); + } + JSCompiler_inline_result = !1; + } + JSCompiler_inline_result && (initialStateProp = ssrFormState[0]); + } + } + ssrFormState = mountWorkInProgressHook(); + ssrFormState.memoizedState = ssrFormState.baseState = initialStateProp; + JSCompiler_inline_result = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialStateProp + }; + ssrFormState.queue = JSCompiler_inline_result; + ssrFormState = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + JSCompiler_inline_result + ); + JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountWorkInProgressHook(); + inRootOrSingleton = { + state: initialStateProp, + dispatch: null, + action: action, + pending: null + }; + JSCompiler_inline_result.queue = inRootOrSingleton; + ssrFormState = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + inRootOrSingleton, + ssrFormState + ); + inRootOrSingleton.dispatch = ssrFormState; + JSCompiler_inline_result.memoizedState = action; + return [initialStateProp, ssrFormState]; +} +function updateFormState(action) { + var stateHook = updateWorkInProgressHook(); + return updateFormStateImpl(stateHook, currentHook, action); +} +function updateFormStateImpl(stateHook, currentStateHook, action) { + stateHook = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + )[0]; + stateHook = + "object" === typeof stateHook && + null !== stateHook && + "function" === typeof stateHook.then + ? useThenable(stateHook) + : stateHook; + currentStateHook = updateWorkInProgressHook(); + var actionQueue = currentStateHook.queue, + dispatch = actionQueue.dispatch; + action !== currentStateHook.memoizedState && + ((currentlyRenderingFiber$1.flags |= 2048), + pushEffect( + 9, + formStateActionEffect.bind(null, actionQueue, action), + { destroy: void 0 }, + null + )); + return [stateHook, dispatch]; +} +function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; +} +function rerenderFormState(action) { + var stateHook = updateWorkInProgressHook(), + currentStateHook = currentHook; + if (null !== currentStateHook) + return updateFormStateImpl(stateHook, currentStateHook, action); + stateHook = stateHook.memoizedState; + currentStateHook = updateWorkInProgressHook(); + var dispatch = currentStateHook.queue.dispatch; + currentStateHook.memoizedState = action; + return [stateHook, dispatch]; +} function pushEffect(tag, create, inst, deps) { tag = { tag: tag, create: create, inst: inst, deps: deps, next: null }; create = currentlyRenderingFiber$1.updateQueue; @@ -3931,6 +4153,47 @@ function startTransition( (ReactCurrentBatchConfig$3.transition = prevTransition); } } +function startHostTransition(formFiber, pendingState, callback, formData) { + if (enableFormActions) + if (enableAsyncActions) { + if (5 !== formFiber.tag) throw Error(formatProdErrorMessage(476)); + if (null === formFiber.memoizedState) { + var newQueue = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: basicStateReducer, + lastRenderedState: sharedNotPendingObject + }; + var queue = newQueue; + newQueue = { + memoizedState: sharedNotPendingObject, + baseState: sharedNotPendingObject, + baseQueue: null, + queue: newQueue, + next: null + }; + formFiber.memoizedState = newQueue; + var alternate = formFiber.alternate; + null !== alternate && (alternate.memoizedState = newQueue); + } else queue = formFiber.memoizedState.queue; + startTransition( + formFiber, + queue, + pendingState, + sharedNotPendingObject, + function () { + return callback(formData); + } + ); + } else callback(formData); +} +function useHostTransitionStatus() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var status = readContext(HostTransitionContext); + return null !== status ? status : sharedNotPendingObject; +} function updateId() { return updateWorkInProgressHook().memoizedState; } @@ -3944,14 +4207,14 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$59 = enqueueUpdate(provider, fiber, lane); - null !== root$59 && - (scheduleUpdateOnFiber(root$59, provider, lane), - entangleTransitions(root$59, provider, lane)); + var root$62 = enqueueUpdate(provider, fiber, lane); + null !== root$62 && + (scheduleUpdateOnFiber(root$62, provider, lane), + entangleTransitions(root$62, provider, lane)); provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$59 && + null !== root$62 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -4082,6 +4345,10 @@ var ContextOnlyDispatcher = { ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError; ContextOnlyDispatcher.useMemoCache = throwInvalidHookError; ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; +enableFormActions && + enableAsyncActions && + ((ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError), + (ContextOnlyDispatcher.useFormState = throwInvalidHookError)); enableAsyncActions && (ContextOnlyDispatcher.useOptimistic = throwInvalidHookError); var HooksDispatcherOnMount = { @@ -4250,6 +4517,10 @@ HooksDispatcherOnMount.useEffectEvent = function (callback) { return ref.impl.apply(void 0, arguments); }; }; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnMount.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnMount.useFormState = mountFormState)); enableAsyncActions && (HooksDispatcherOnMount.useOptimistic = mountOptimistic); var HooksDispatcherOnUpdate = { readContext: readContext, @@ -4292,6 +4563,10 @@ var HooksDispatcherOnUpdate = { HooksDispatcherOnUpdate.useCacheRefresh = updateRefresh; HooksDispatcherOnUpdate.useMemoCache = useMemoCache; HooksDispatcherOnUpdate.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnUpdate.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnUpdate.useFormState = updateFormState)); enableAsyncActions && (HooksDispatcherOnUpdate.useOptimistic = updateOptimistic); var HooksDispatcherOnRerender = { @@ -4337,6 +4612,11 @@ var HooksDispatcherOnRerender = { HooksDispatcherOnRerender.useCacheRefresh = updateRefresh; HooksDispatcherOnRerender.useMemoCache = useMemoCache; HooksDispatcherOnRerender.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnRerender.useHostTransitionStatus = + useHostTransitionStatus), + (HooksDispatcherOnRerender.useFormState = rerenderFormState)); enableAsyncActions && (HooksDispatcherOnRerender.useOptimistic = rerenderOptimistic); function resolveDefaultProps(Component, baseProps) { @@ -4869,10 +5149,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$69 = workInProgress.stateNode; + root$72 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$69.incompleteTransitions.has(transition)) { + if (!root$72.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -4880,11 +5160,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$69.incompleteTransitions.set(transition, markerInstance); + root$72.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$69.incompleteTransitions.forEach(function (markerInstance) { + root$72.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5477,7 +5757,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { else if (!tryHydrateSuspense(workInProgress, nextInstance)) { shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(); - nextHydratableInstance = getNextHydratable(nextInstance.nextSibling); + nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) @@ -6367,6 +6647,18 @@ function propagateParentContextChanges( objectIs(parent.pendingProps.value, currentParent.value) || (null !== current ? current.push(context) : (current = [context])); } + } else if ( + enableFormActions && + enableAsyncActions && + parent === hostTransitionProviderCursor.current + ) { + currentParent = parent.alternate; + if (null === currentParent) throw Error(formatProdErrorMessage(387)); + currentParent.memoizedState.memoizedState !== + parent.memoizedState.memoizedState && + (null !== current + ? current.push(HostTransitionContext) + : (current = [HostTransitionContext])); } parent = parent.return; } @@ -6672,14 +6964,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$107 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$107 = lastTailNode), + for (var lastTailNode$111 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$111 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$107 + null === lastTailNode$111 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$107.sibling = null); + : (lastTailNode$111.sibling = null); } } function bubbleProperties(completedWork) { @@ -6689,19 +6981,19 @@ function bubbleProperties(completedWork) { newChildLanes = 0, subtreeFlags = 0; if (didBailout) - for (var child$108 = completedWork.child; null !== child$108; ) - (newChildLanes |= child$108.lanes | child$108.childLanes), - (subtreeFlags |= child$108.subtreeFlags & 31457280), - (subtreeFlags |= child$108.flags & 31457280), - (child$108.return = completedWork), - (child$108 = child$108.sibling); + for (var child$112 = completedWork.child; null !== child$112; ) + (newChildLanes |= child$112.lanes | child$112.childLanes), + (subtreeFlags |= child$112.subtreeFlags & 31457280), + (subtreeFlags |= child$112.flags & 31457280), + (child$112.return = completedWork), + (child$112 = child$112.sibling); else - for (child$108 = completedWork.child; null !== child$108; ) - (newChildLanes |= child$108.lanes | child$108.childLanes), - (subtreeFlags |= child$108.subtreeFlags), - (subtreeFlags |= child$108.flags), - (child$108.return = completedWork), - (child$108 = child$108.sibling); + for (child$112 = completedWork.child; null !== child$112; ) + (newChildLanes |= child$112.lanes | child$112.childLanes), + (subtreeFlags |= child$112.subtreeFlags), + (subtreeFlags |= child$112.flags), + (child$112.return = completedWork), + (child$112 = child$112.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -7040,11 +7332,11 @@ function completeWork(current, workInProgress, renderLanes) { null !== newProps.alternate.memoizedState && null !== newProps.alternate.memoizedState.cachePool && (currentResource = newProps.alternate.memoizedState.cachePool.pool); - var cache$120 = null; + var cache$124 = null; null !== newProps.memoizedState && null !== newProps.memoizedState.cachePool && - (cache$120 = newProps.memoizedState.cachePool.pool); - cache$120 !== currentResource && (newProps.flags |= 2048); + (cache$124 = newProps.memoizedState.cachePool.pool); + cache$124 !== currentResource && (newProps.flags |= 2048); } renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), @@ -7077,8 +7369,8 @@ function completeWork(current, workInProgress, renderLanes) { if (null === currentResource) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - cache$120 = currentResource.rendering; - if (null === cache$120) + cache$124 = currentResource.rendering; + if (null === cache$124) if (newProps) cutOffTailIfNeeded(currentResource, !1); else { if ( @@ -7086,11 +7378,11 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - cache$120 = findFirstSuspended(current); - if (null !== cache$120) { + cache$124 = findFirstSuspended(current); + if (null !== cache$124) { workInProgress.flags |= 128; cutOffTailIfNeeded(currentResource, !1); - current = cache$120.updateQueue; + current = cache$124.updateQueue; workInProgress.updateQueue = current; scheduleRetryEffect(workInProgress, current); workInProgress.subtreeFlags = 0; @@ -7115,7 +7407,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if (((current = findFirstSuspended(cache$120)), null !== current)) { + if (((current = findFirstSuspended(cache$124)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -7125,7 +7417,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(currentResource, !0), null === currentResource.tail && "hidden" === currentResource.tailMode && - !cache$120.alternate && + !cache$124.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -7138,13 +7430,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(currentResource, !1), (workInProgress.lanes = 4194304)); currentResource.isBackwards - ? ((cache$120.sibling = workInProgress.child), - (workInProgress.child = cache$120)) + ? ((cache$124.sibling = workInProgress.child), + (workInProgress.child = cache$124)) : ((current = currentResource.last), null !== current - ? (current.sibling = cache$120) - : (workInProgress.child = cache$120), - (currentResource.last = cache$120)); + ? (current.sibling = cache$124) + : (workInProgress.child = cache$124), + (currentResource.last = cache$124)); } if (null !== currentResource.tail) return ( @@ -7434,8 +7726,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { else if ("function" === typeof ref) try { ref(null); - } catch (error$137) { - captureCommitPhaseError(current, nearestMountedAncestor, error$137); + } catch (error$141) { + captureCommitPhaseError(current, nearestMountedAncestor, error$141); } else ref.current = null; } @@ -7472,7 +7764,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$192) { + } catch (e$198) { JSCompiler_temp = null; break a; } @@ -7751,11 +8043,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$139) { + } catch (error$143) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$139 + error$143 ); } } @@ -8435,8 +8727,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { } try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$152) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$152); + } catch (error$156) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$156); } } break; @@ -8608,11 +8900,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { newProps ); domElement[internalPropsKey] = newProps; - } catch (error$153) { + } catch (error$157) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$153 + error$157 ); } } @@ -8650,8 +8942,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$154) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$154); + } catch (error$158) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$158); } } if (flags & 4 && ((flags = finishedWork.stateNode), null != flags)) { @@ -8662,8 +8954,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { updateProperties(flags, hoistableRoot, current, root), (flags[internalPropsKey] = root); - } catch (error$157) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$157); + } catch (error$161) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$161); } } break; @@ -8677,8 +8969,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$158) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$158); + } catch (error$162) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$162); } } break; @@ -8692,8 +8984,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$159) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$159); + } catch (error$163) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$163); } break; case 4: @@ -8723,8 +9015,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$161) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$161); + } catch (error$165) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$165); } current = finishedWork.updateQueue; null !== current && @@ -8802,11 +9094,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$142) { + } catch (error$146) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$142 + error$146 ); } } else if ( @@ -8881,21 +9173,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$143 = JSCompiler_inline_result.stateNode; + var parent$147 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$143, ""), + (setTextContent(parent$147, ""), (JSCompiler_inline_result.flags &= -33)); - var before$144 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$144, parent$143); + var before$148 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$148, parent$147); break; case 3: case 4: - var parent$145 = JSCompiler_inline_result.stateNode.containerInfo, - before$146 = getHostSibling(finishedWork); + var parent$149 = JSCompiler_inline_result.stateNode.containerInfo, + before$150 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$146, - parent$145 + before$150, + parent$149 ); break; default: @@ -9365,9 +9657,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$168 = finishedWork.stateNode; + var instance$172 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$168._visibility & 4 + ? instance$172._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9380,7 +9672,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$168._visibility |= 4), + : ((instance$172._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9388,7 +9680,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$168._visibility |= 4), + : ((instance$172._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9401,7 +9693,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$168 + instance$172 ); break; case 24: @@ -10317,8 +10609,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$176) { - handleThrow(root, thrownValue$176); + } catch (thrownValue$180) { + handleThrow(root, thrownValue$180); } while (1); lanes && root.shellSuspendCounter++; @@ -10423,8 +10715,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$178) { - handleThrow(root, thrownValue$178); + } catch (thrownValue$182) { + handleThrow(root, thrownValue$182); } while (1); resetContextDependencies(); @@ -10634,12 +10926,12 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$182 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$186 = commitBeforeMutationEffects( root, finishedWork ); commitMutationEffectsOnFiber(finishedWork, root); - shouldFireAfterActiveInstanceBlur$182 && + shouldFireAfterActiveInstanceBlur$186 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -10718,7 +11010,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$183 = rootWithPendingPassiveEffects, + var root$187 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -10734,7 +11026,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$183, remainingLanes); + releaseRootPooledCache(root$187, remainingLanes); } } return !1; @@ -11164,45 +11456,69 @@ beginWork = function (current, workInProgress, renderLanes) { workInProgress.child ); case 5: - return ( - pushHostContext(workInProgress), - null === current && - isHydrating && - (((init = Component = nextHydratableInstance), init) - ? tryHydrateInstance(workInProgress, init) || - (shouldClientRenderOnMismatch(workInProgress) && - throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable(init.nextSibling)), - (prevState = hydrationParentFiber), - nextHydratableInstance && - tryHydrateInstance(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(prevState, init) - : (insertNonHydratedInstance( - hydrationParentFiber, - workInProgress - ), - (isHydrating = !1), - (hydrationParentFiber = workInProgress), - (nextHydratableInstance = Component))) - : (shouldClientRenderOnMismatch(workInProgress) && - throwOnHydrationMismatch(), - insertNonHydratedInstance(hydrationParentFiber, workInProgress), - (isHydrating = !1), - (hydrationParentFiber = workInProgress), - (nextHydratableInstance = Component))), - (Component = workInProgress.type), - (init = workInProgress.pendingProps), - (prevState = null !== current ? current.memoizedProps : null), - (nextState = init.children), - shouldSetTextContent(Component, init) - ? (nextState = null) - : null !== prevState && - shouldSetTextContent(Component, prevState) && - (workInProgress.flags |= 32), - markRef$1(current, workInProgress), - reconcileChildren(current, workInProgress, nextState, renderLanes), - workInProgress.child - ); + pushHostContext(workInProgress); + null === current && + isHydrating && + (((init = Component = nextHydratableInstance), init) + ? tryHydrateInstance(workInProgress, init) || + (shouldClientRenderOnMismatch(workInProgress) && + throwOnHydrationMismatch(), + (nextHydratableInstance = getNextHydratableSibling(init)), + (prevState = hydrationParentFiber), + nextHydratableInstance && + tryHydrateInstance(workInProgress, nextHydratableInstance) + ? deleteHydratableInstance(prevState, init) + : (insertNonHydratedInstance( + hydrationParentFiber, + workInProgress + ), + (isHydrating = !1), + (hydrationParentFiber = workInProgress), + (nextHydratableInstance = Component))) + : (shouldClientRenderOnMismatch(workInProgress) && + throwOnHydrationMismatch(), + insertNonHydratedInstance(hydrationParentFiber, workInProgress), + (isHydrating = !1), + (hydrationParentFiber = workInProgress), + (nextHydratableInstance = Component))); + init = workInProgress.type; + prevState = workInProgress.pendingProps; + nextState = null !== current ? current.memoizedProps : null; + Component = prevState.children; + shouldSetTextContent(init, prevState) + ? (Component = null) + : null !== nextState && + shouldSetTextContent(init, nextState) && + (workInProgress.flags |= 32); + if ( + enableFormActions && + enableAsyncActions && + null !== workInProgress.memoizedState + ) { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + init = renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + renderLanes + ); + HostTransitionContext._currentValue = init; + enableLazyContextPropagation || + (didReceiveUpdate && + null !== current && + current.memoizedState.memoizedState !== init && + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + )); + } + markRef$1(current, workInProgress); + reconcileChildren(current, workInProgress, Component, renderLanes); + return workInProgress.child; case 6: return ( null === current && @@ -11213,7 +11529,7 @@ beginWork = function (current, workInProgress, renderLanes) { ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (nextHydratableInstance = getNextHydratableSibling(current)), (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) @@ -11892,12 +12208,12 @@ function updateContainer(element, container, parentComponent, callback) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$185 = fiber.stateNode; - if (root$185.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$185.pendingLanes); + var root$189 = fiber.stateNode; + if (root$189.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$189.pendingLanes); 0 !== lanes && - (upgradePendingLanesToSync(root$185, lanes), - ensureRootIsScheduled(root$185), + (upgradePendingLanesToSync(root$189, lanes), + ensureRootIsScheduled(root$189), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -12297,8 +12613,71 @@ var KeyboardEventInterface = assign({}, UIEventInterface, { deltaZ: 0, deltaMode: 0 }), - SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface), - hasScheduledReplayAttempt = !1, + SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface); +function extractEvents$6( + dispatchQueue, + domEventName, + maybeTargetInst, + nativeEvent, + nativeEventTarget +) { + if ( + "submit" === domEventName && + maybeTargetInst && + maybeTargetInst.stateNode === nativeEventTarget + ) { + var action = getFiberCurrentPropsFromNode(nativeEventTarget).action, + submitter = nativeEvent.submitter; + submitter && + ((domEventName = (domEventName = getFiberCurrentPropsFromNode(submitter)) + ? domEventName.formAction + : submitter.getAttribute("formAction")), + null != domEventName && ((action = domEventName), (submitter = null))); + if ("function" === typeof action) { + var event = new SyntheticEvent( + "action", + "action", + null, + nativeEvent, + nativeEventTarget + ); + dispatchQueue.push({ + event: event, + listeners: [ + { + instance: null, + listener: function () { + if (!nativeEvent.defaultPrevented) { + event.preventDefault(); + if (submitter) { + var temp = submitter.ownerDocument.createElement("input"); + temp.name = submitter.name; + temp.value = submitter.value; + submitter.parentNode.insertBefore(temp, submitter); + var formData = new FormData(nativeEventTarget); + temp.parentNode.removeChild(temp); + } else formData = new FormData(nativeEventTarget); + startHostTransition( + maybeTargetInst, + { + pending: !0, + data: formData, + method: nativeEventTarget.method, + action: action + }, + action, + formData + ); + } + }, + currentTarget: nativeEventTarget + } + ] + }); + } + } +} +var hasScheduledReplayAttempt = !1, queuedFocus = null, queuedDrag = null, queuedMouse = null, @@ -12532,6 +12911,42 @@ function scheduleCallbackIfUnblocked(queuedEvent, unblocked) { replayUnblockedEvents ))); } +var lastScheduledReplayQueue = null; +function scheduleReplayQueueIfNeeded(formReplayingQueue) { + lastScheduledReplayQueue !== formReplayingQueue && + ((lastScheduledReplayQueue = formReplayingQueue), + Scheduler.unstable_scheduleCallback( + Scheduler.unstable_NormalPriority, + function () { + lastScheduledReplayQueue === formReplayingQueue && + (lastScheduledReplayQueue = null); + for (var i = 0; i < formReplayingQueue.length; i += 3) { + var form = formReplayingQueue[i], + submitterOrAction = formReplayingQueue[i + 1], + formData = formReplayingQueue[i + 2]; + if ("function" !== typeof submitterOrAction) + if (null === findInstanceBlockingTarget(submitterOrAction || form)) + continue; + else break; + var formInst = getInstanceFromNode$1(form); + null !== formInst && + (formReplayingQueue.splice(i, 3), + (i -= 3), + startHostTransition( + formInst, + { + pending: !0, + data: formData, + method: form.method, + action: submitterOrAction + }, + submitterOrAction, + formData + )); + } + } + )); +} function retryIfBlockedOn(unblocked) { function unblock(queuedEvent) { return scheduleCallbackIfUnblocked(queuedEvent, unblocked); @@ -12553,6 +12968,34 @@ function retryIfBlockedOn(unblocked) { ) attemptExplicitHydrationTarget(i), null === i.blockedOn && queuedExplicitHydrationTargets.shift(); + if ( + enableFormActions && + ((i = unblocked.getRootNode().$$reactFormReplay), null != i) + ) + for (queuedTarget = 0; queuedTarget < i.length; queuedTarget += 3) { + var form = i[queuedTarget], + submitterOrAction = i[queuedTarget + 1], + formProps = getFiberCurrentPropsFromNode(form); + if ("function" === typeof submitterOrAction) + formProps || scheduleReplayQueueIfNeeded(i); + else if (formProps) { + var action = null; + if (submitterOrAction && submitterOrAction.hasAttribute("formAction")) + if ( + ((form = submitterOrAction), + (formProps = getFiberCurrentPropsFromNode(submitterOrAction))) + ) + action = formProps.formAction; + else { + if (null !== findInstanceBlockingTarget(form)) continue; + } + else action = formProps.action; + "function" === typeof action + ? (i[queuedTarget + 1] = action) + : (i.splice(queuedTarget, 3), (queuedTarget -= 3)); + scheduleReplayQueueIfNeeded(i); + } + } } var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig, _enabled = !0; @@ -12672,36 +13115,33 @@ function dispatchEvent( } function findInstanceBlockingEvent(nativeEvent) { nativeEvent = getEventTarget(nativeEvent); - a: { - return_targetInst = null; - nativeEvent = getClosestInstanceFromNode(nativeEvent); - if (null !== nativeEvent) { - var nearestMounted = getNearestMountedFiber(nativeEvent); - if (null === nearestMounted) nativeEvent = null; - else { - var tag = nearestMounted.tag; - if (13 === tag) { - nativeEvent = getSuspenseInstanceFromFiber(nearestMounted); - if (null !== nativeEvent) break a; - nativeEvent = null; - } else if (3 === tag) { - if (nearestMounted.stateNode.current.memoizedState.isDehydrated) { - nativeEvent = - 3 === nearestMounted.tag - ? nearestMounted.stateNode.containerInfo - : null; - break a; - } - nativeEvent = null; - } else nearestMounted !== nativeEvent && (nativeEvent = null); - } - } - return_targetInst = nativeEvent; - nativeEvent = null; - } - return nativeEvent; + return findInstanceBlockingTarget(nativeEvent); } var return_targetInst = null; +function findInstanceBlockingTarget(targetNode) { + return_targetInst = null; + targetNode = getClosestInstanceFromNode(targetNode); + if (null !== targetNode) { + var nearestMounted = getNearestMountedFiber(targetNode); + if (null === nearestMounted) targetNode = null; + else { + var tag = nearestMounted.tag; + if (13 === tag) { + targetNode = getSuspenseInstanceFromFiber(nearestMounted); + if (null !== targetNode) return targetNode; + targetNode = null; + } else if (3 === tag) { + if (nearestMounted.stateNode.current.memoizedState.isDehydrated) + return 3 === nearestMounted.tag + ? nearestMounted.stateNode.containerInfo + : null; + targetNode = null; + } else nearestMounted !== targetNode && (targetNode = null); + } + } + return_targetInst = targetNode; + return null; +} function getEventPriority(domEventName) { switch (domEventName) { case "cancel": @@ -12987,19 +13427,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$343; + var JSCompiler_inline_result$jscomp$350; if (canUseDOM) { - var isSupported$jscomp$inline_1535 = "oninput" in document; - if (!isSupported$jscomp$inline_1535) { - var element$jscomp$inline_1536 = document.createElement("div"); - element$jscomp$inline_1536.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1535 = - "function" === typeof element$jscomp$inline_1536.oninput; + var isSupported$jscomp$inline_1555 = "oninput" in document; + if (!isSupported$jscomp$inline_1555) { + var element$jscomp$inline_1556 = document.createElement("div"); + element$jscomp$inline_1556.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1555 = + "function" === typeof element$jscomp$inline_1556.oninput; } - JSCompiler_inline_result$jscomp$343 = isSupported$jscomp$inline_1535; - } else JSCompiler_inline_result$jscomp$343 = !1; + JSCompiler_inline_result$jscomp$350 = isSupported$jscomp$inline_1555; + } else JSCompiler_inline_result$jscomp$350 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$343 && + JSCompiler_inline_result$jscomp$350 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13308,20 +13748,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1576 = 0; - i$jscomp$inline_1576 < simpleEventPluginEvents.length; - i$jscomp$inline_1576++ + var i$jscomp$inline_1596 = 0; + i$jscomp$inline_1596 < simpleEventPluginEvents.length; + i$jscomp$inline_1596++ ) { - var eventName$jscomp$inline_1577 = - simpleEventPluginEvents[i$jscomp$inline_1576], - domEventName$jscomp$inline_1578 = - eventName$jscomp$inline_1577.toLowerCase(), - capitalizedEvent$jscomp$inline_1579 = - eventName$jscomp$inline_1577[0].toUpperCase() + - eventName$jscomp$inline_1577.slice(1); + var eventName$jscomp$inline_1597 = + simpleEventPluginEvents[i$jscomp$inline_1596], + domEventName$jscomp$inline_1598 = + eventName$jscomp$inline_1597.toLowerCase(), + capitalizedEvent$jscomp$inline_1599 = + eventName$jscomp$inline_1597[0].toUpperCase() + + eventName$jscomp$inline_1597.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1578, - "on" + capitalizedEvent$jscomp$inline_1579 + domEventName$jscomp$inline_1598, + "on" + capitalizedEvent$jscomp$inline_1599 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -13863,8 +14303,7 @@ function dispatchEventForPluginEventSystem( !SyntheticEventCtor || "input" !== SyntheticEventCtor.toLowerCase() || ("checkbox" !== reactName.type && "radio" !== reactName.type) - ? enableCustomElementPropertySupport && - targetInst && + ? targetInst && isCustomElement(targetInst.elementType) && (getTargetInstFunc = getTargetInstForChangeEvent) : (getTargetInstFunc = getTargetInstForClickEvent); @@ -13969,9 +14408,9 @@ function dispatchEventForPluginEventSystem( ? getNativeBeforeInputChars(domEventName, nativeEvent) : getFallbackBeforeInputChars(domEventName, nativeEvent)) ) - (targetInst = accumulateTwoPhaseListeners(targetInst, "onBeforeInput")), - 0 < targetInst.length && - ((nativeEventTarget = new SyntheticCompositionEvent( + (eventType = accumulateTwoPhaseListeners(targetInst, "onBeforeInput")), + 0 < eventType.length && + ((handleEventFunc = new SyntheticCompositionEvent( "onBeforeInput", "beforeinput", null, @@ -13979,10 +14418,18 @@ function dispatchEventForPluginEventSystem( nativeEventTarget )), dispatchQueue.push({ - event: nativeEventTarget, - listeners: targetInst + event: handleEventFunc, + listeners: eventType }), - (nativeEventTarget.data = fallbackData)); + (handleEventFunc.data = fallbackData)); + enableFormActions && + extractEvents$6( + dispatchQueue, + domEventName, + targetInst, + nativeEvent, + nativeEventTarget + ); } processDispatchQueue(dispatchQueue, eventSystemFlags); }); @@ -14204,9 +14651,55 @@ function setProp(domElement, tag, key, value, props, prevValue) { break; case "action": case "formAction": + if (enableFormActions) + if ("function" === typeof value) { + domElement.setAttribute( + key, + "javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')" + ); + break; + } else + "function" === typeof prevValue && + ("formAction" === key + ? ("input" !== tag && + setProp(domElement, tag, "name", props.name, props, null), + setProp( + domElement, + tag, + "formEncType", + props.formEncType, + props, + null + ), + setProp( + domElement, + tag, + "formMethod", + props.formMethod, + props, + null + ), + setProp( + domElement, + tag, + "formTarget", + props.formTarget, + props, + null + )) + : (setProp( + domElement, + tag, + "encType", + props.encType, + props, + null + ), + setProp(domElement, tag, "method", props.method, props, null), + setProp(domElement, tag, "target", props.target, props, null))); if ( null == value || - "function" === typeof value || + (!enableFormActions && "function" === typeof value) || "symbol" === typeof value || "boolean" === typeof value ) { @@ -14421,7 +14914,7 @@ function setProp(domElement, tag, key, value, props, prevValue) { break; case "innerText": case "textContent": - if (enableCustomElementPropertySupport) break; + break; default: if ( !(2 < key.length) || @@ -14470,41 +14963,36 @@ function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { break; case "innerText": case "textContent": - if (enableCustomElementPropertySupport) break; + break; default: if (!registrationNameDependencies.hasOwnProperty(key)) - if (enableCustomElementPropertySupport) - a: { - props = value; - if ( - "o" === key[0] && - "n" === key[1] && - ((tag = key.endsWith("Capture")), - (value = key.slice(2, tag ? key.length - 7 : 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) - : !0 === props - ? domElement.setAttribute(key, "") - : setValueForAttribute(domElement, key, props); + a: { + if ( + "o" === key[0] && + "n" === key[1] && + ((props = key.endsWith("Capture")), + (tag = key.slice(2, props ? key.length - 7 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(tag, prevValue, props), + "function" === typeof value) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(tag, value, props); + break a; } - else - "boolean" === typeof value && (value = "" + value), - setValueForAttribute(domElement, key, value); + key in domElement + ? (domElement[key] = value) + : !0 === value + ? domElement.setAttribute(key, "") + : setValueForAttribute(domElement, key, value); + } } } function setInitialProperties(domElement, tag, props) { @@ -14746,14 +15234,14 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp(domElement, tag, propKey, null, nextProps, lastProp); } } - for (var propKey$219 in nextProps) { - var propKey = nextProps[propKey$219]; - lastProp = lastProps[propKey$219]; + for (var propKey$225 in nextProps) { + var propKey = nextProps[propKey$225]; + lastProp = lastProps[propKey$225]; if ( - nextProps.hasOwnProperty(propKey$219) && + nextProps.hasOwnProperty(propKey$225) && (null != propKey || null != lastProp) ) - switch (propKey$219) { + switch (propKey$225) { case "type": type = propKey; break; @@ -14782,7 +15270,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp( domElement, tag, - propKey$219, + propKey$225, propKey, nextProps, lastProp @@ -14801,7 +15289,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ); return; case "select": - propKey = value = defaultValue = propKey$219 = null; + propKey = value = defaultValue = propKey$225 = null; for (type in lastProps) if ( ((lastDefaultValue = lastProps[type]), @@ -14832,7 +15320,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ) switch (name) { case "value": - propKey$219 = type; + propKey$225 = type; break; case "defaultValue": defaultValue = type; @@ -14853,15 +15341,15 @@ function updateProperties(domElement, tag, lastProps, nextProps) { tag = defaultValue; lastProps = value; nextProps = propKey; - null != propKey$219 - ? updateOptions(domElement, !!lastProps, propKey$219, !1) + null != propKey$225 + ? updateOptions(domElement, !!lastProps, propKey$225, !1) : !!nextProps !== !!lastProps && (null != tag ? updateOptions(domElement, !!lastProps, tag, !0) : updateOptions(domElement, !!lastProps, lastProps ? [] : "", !1)); return; case "textarea": - propKey = propKey$219 = null; + propKey = propKey$225 = null; for (defaultValue in lastProps) if ( ((name = lastProps[defaultValue]), @@ -14885,7 +15373,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ) switch (value) { case "value": - propKey$219 = name; + propKey$225 = name; break; case "defaultValue": propKey = name; @@ -14899,17 +15387,17 @@ function updateProperties(domElement, tag, lastProps, nextProps) { name !== type && setProp(domElement, tag, value, name, nextProps, type); } - updateTextarea(domElement, propKey$219, propKey); + updateTextarea(domElement, propKey$225, propKey); return; case "option": - for (var propKey$235 in lastProps) + for (var propKey$241 in lastProps) if ( - ((propKey$219 = lastProps[propKey$235]), - lastProps.hasOwnProperty(propKey$235) && - null != propKey$219 && - !nextProps.hasOwnProperty(propKey$235)) + ((propKey$225 = lastProps[propKey$241]), + lastProps.hasOwnProperty(propKey$241) && + null != propKey$225 && + !nextProps.hasOwnProperty(propKey$241)) ) - switch (propKey$235) { + switch (propKey$241) { case "selected": domElement.selected = !1; break; @@ -14917,33 +15405,33 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp( domElement, tag, - propKey$235, + propKey$241, null, nextProps, - propKey$219 + propKey$225 ); } for (lastDefaultValue in nextProps) if ( - ((propKey$219 = nextProps[lastDefaultValue]), + ((propKey$225 = nextProps[lastDefaultValue]), (propKey = lastProps[lastDefaultValue]), nextProps.hasOwnProperty(lastDefaultValue) && - propKey$219 !== propKey && - (null != propKey$219 || null != propKey)) + propKey$225 !== propKey && + (null != propKey$225 || null != propKey)) ) switch (lastDefaultValue) { case "selected": domElement.selected = - propKey$219 && - "function" !== typeof propKey$219 && - "symbol" !== typeof propKey$219; + propKey$225 && + "function" !== typeof propKey$225 && + "symbol" !== typeof propKey$225; break; default: setProp( domElement, tag, lastDefaultValue, - propKey$219, + propKey$225, nextProps, propKey ); @@ -14964,24 +15452,24 @@ function updateProperties(domElement, tag, lastProps, nextProps) { case "track": case "wbr": case "menuitem": - for (var propKey$240 in lastProps) - (propKey$219 = lastProps[propKey$240]), - lastProps.hasOwnProperty(propKey$240) && - null != propKey$219 && - !nextProps.hasOwnProperty(propKey$240) && - setProp(domElement, tag, propKey$240, null, nextProps, propKey$219); + for (var propKey$246 in lastProps) + (propKey$225 = lastProps[propKey$246]), + lastProps.hasOwnProperty(propKey$246) && + null != propKey$225 && + !nextProps.hasOwnProperty(propKey$246) && + setProp(domElement, tag, propKey$246, null, nextProps, propKey$225); for (checked in nextProps) if ( - ((propKey$219 = nextProps[checked]), + ((propKey$225 = nextProps[checked]), (propKey = lastProps[checked]), nextProps.hasOwnProperty(checked) && - propKey$219 !== propKey && - (null != propKey$219 || null != propKey)) + propKey$225 !== propKey && + (null != propKey$225 || null != propKey)) ) switch (checked) { case "children": case "dangerouslySetInnerHTML": - if (null != propKey$219) + if (null != propKey$225) throw Error(formatProdErrorMessage(137, tag)); break; default: @@ -14989,7 +15477,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { domElement, tag, checked, - propKey$219, + propKey$225, nextProps, propKey ); @@ -14997,49 +15485,49 @@ function updateProperties(domElement, tag, lastProps, nextProps) { return; default: if (isCustomElement(tag)) { - for (var propKey$245 in lastProps) - (propKey$219 = lastProps[propKey$245]), - lastProps.hasOwnProperty(propKey$245) && - null != propKey$219 && - !nextProps.hasOwnProperty(propKey$245) && + for (var propKey$251 in lastProps) + (propKey$225 = lastProps[propKey$251]), + lastProps.hasOwnProperty(propKey$251) && + null != propKey$225 && + !nextProps.hasOwnProperty(propKey$251) && setPropOnCustomElement( domElement, tag, - propKey$245, + propKey$251, null, nextProps, - propKey$219 + propKey$225 ); for (defaultChecked in nextProps) - (propKey$219 = nextProps[defaultChecked]), + (propKey$225 = nextProps[defaultChecked]), (propKey = lastProps[defaultChecked]), !nextProps.hasOwnProperty(defaultChecked) || - propKey$219 === propKey || - (null == propKey$219 && null == propKey) || + propKey$225 === propKey || + (null == propKey$225 && null == propKey) || setPropOnCustomElement( domElement, tag, defaultChecked, - propKey$219, + propKey$225, nextProps, propKey ); return; } } - for (var propKey$250 in lastProps) - (propKey$219 = lastProps[propKey$250]), - lastProps.hasOwnProperty(propKey$250) && - null != propKey$219 && - !nextProps.hasOwnProperty(propKey$250) && - setProp(domElement, tag, propKey$250, null, nextProps, propKey$219); + for (var propKey$256 in lastProps) + (propKey$225 = lastProps[propKey$256]), + lastProps.hasOwnProperty(propKey$256) && + null != propKey$225 && + !nextProps.hasOwnProperty(propKey$256) && + setProp(domElement, tag, propKey$256, null, nextProps, propKey$225); for (lastProp in nextProps) - (propKey$219 = nextProps[lastProp]), + (propKey$225 = nextProps[lastProp]), (propKey = lastProps[lastProp]), !nextProps.hasOwnProperty(lastProp) || - propKey$219 === propKey || - (null == propKey$219 && null == propKey) || - setProp(domElement, tag, lastProp, propKey$219, nextProps, propKey); + propKey$225 === propKey || + (null == propKey$225 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$225, nextProps, propKey); } var eventsEnabled = null, selectionInformation = null; @@ -15184,56 +15672,65 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) { for (; 1 === instance.nodeType; ) { var anyProps = props; if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { - if (!inRootOrSingleton) break; - } else { - if (!inRootOrSingleton) return instance; - if (!instance[internalHoistableMarker]) - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) break; - return instance; - case "link": - var rel = instance.getAttribute("rel"); - if ( - "stylesheet" === rel && - instance.hasAttribute("data-precedence") - ) - break; - else if ( - rel !== anyProps.rel || - instance.getAttribute("href") !== - (null == anyProps.href ? null : anyProps.href) || + if ( + !( + inRootOrSingleton || + (enableFormActions && + "INPUT" === instance.nodeName && + "hidden" === instance.type) + ) + ) + break; + } else if (!inRootOrSingleton) + if (enableFormActions && "input" === type && "hidden" === instance.type) { + var name = null == anyProps.name ? null : "" + anyProps.name; + if ( + "hidden" === anyProps.type && + instance.getAttribute("name") === name + ) + return instance; + } else return instance; + else if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + name = instance.getAttribute("rel"); + if ("stylesheet" === name && instance.hasAttribute("data-precedence")) + break; + else if ( + name !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + name = instance.getAttribute("src"); + if ( + (name !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || instance.getAttribute("crossorigin") !== - (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || - instance.getAttribute("title") !== - (null == anyProps.title ? null : anyProps.title) - ) - break; - return instance; - case "style": - if (instance.hasAttribute("data-precedence")) break; - return instance; - case "script": - rel = instance.getAttribute("src"); - if ( - (rel !== (null == anyProps.src ? null : anyProps.src) || - instance.getAttribute("type") !== - (null == anyProps.type ? null : anyProps.type) || - instance.getAttribute("crossorigin") !== - (null == anyProps.crossOrigin - ? null - : anyProps.crossOrigin)) && - rel && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop") - ) - break; - return instance; - default: - return instance; - } - } - instance = getNextHydratable(instance.nextSibling); + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin)) && + name && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + return instance; + default: + return instance; + } + instance = getNextHydratableSibling(instance); if (null === instance) break; } return null; @@ -15241,8 +15738,17 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) { function canHydrateTextInstance(instance, text, inRootOrSingleton) { if ("" === text) return null; for (; 3 !== instance.nodeType; ) { - if (!inRootOrSingleton) return null; - instance = getNextHydratable(instance.nextSibling); + if ( + !( + (enableFormActions && + 1 === instance.nodeType && + "INPUT" === instance.nodeName && + "hidden" === instance.type) || + inRootOrSingleton + ) + ) + return null; + instance = getNextHydratableSibling(instance); if (null === instance) return null; } return instance; @@ -15253,12 +15759,23 @@ function getNextHydratable(node) { if (1 === nodeType || 3 === nodeType) break; if (8 === nodeType) { nodeType = node.data; - if ("$" === nodeType || "$!" === nodeType || "$?" === nodeType) break; + if ( + "$" === nodeType || + "$!" === nodeType || + "$?" === nodeType || + (enableFormActions && + enableAsyncActions && + ("F!" === nodeType || "F" === nodeType)) + ) + break; if ("/$" === nodeType) return null; } } return node; } +function getNextHydratableSibling(instance) { + return getNextHydratable(instance.nextSibling); +} function hydrateInstance( instance, type, @@ -15638,17 +16155,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$258 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$259 = styles$258.get(type); - resource$259 || + var styles$264 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$265 = styles$264.get(type); + resource$265 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$259 = { + (resource$265 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$258.set(type, resource$259), + styles$264.set(type, resource$265), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -15663,9 +16180,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$259.state + resource$265.state )); - return resource$259; + return resource$265; } return null; case "script": @@ -15748,37 +16265,37 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = instance); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$263 = hoistableRoot.querySelector( + var instance$269 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$263) + if (instance$269) return ( (resource.state.loading |= 4), - (resource.instance = instance$263), - markNodeAsHoistable(instance$263), - instance$263 + (resource.instance = instance$269), + markNodeAsHoistable(instance$269), + instance$269 ); instance = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(instance, styleProps); - instance$263 = ( + instance$269 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$263); - var linkInstance = instance$263; + markNodeAsHoistable(instance$269); + var linkInstance = instance$269; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$263, "link", instance); + setInitialProperties(instance$269, "link", instance); resource.state.loading |= 4; - insertStylesheet(instance$263, props.precedence, hoistableRoot); - return (resource.instance = instance$263); + insertStylesheet(instance$269, props.precedence, hoistableRoot); + return (resource.instance = instance$269); case "script": - instance$263 = getScriptKey(props.src); + instance$269 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - getScriptSelectorFromKey(instance$263) + getScriptSelectorFromKey(instance$269) )) ) return ( @@ -15787,7 +16304,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); instance = props; - if ((styleProps = preloadPropsMap.get(instance$263))) + if ((styleProps = preloadPropsMap.get(instance$269))) (instance = assign({}, props)), adoptPreloadPropsForScript(instance, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -16157,17 +16674,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1762 = { +var devToolsConfig$jscomp$inline_1782 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-bef36890", + version: "18.3.0-www-modern-2bb5f73b", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2113 = { - bundleType: devToolsConfig$jscomp$inline_1762.bundleType, - version: devToolsConfig$jscomp$inline_1762.version, - rendererPackageName: devToolsConfig$jscomp$inline_1762.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1762.rendererConfig, +var internals$jscomp$inline_2149 = { + bundleType: devToolsConfig$jscomp$inline_1782.bundleType, + version: devToolsConfig$jscomp$inline_1782.version, + rendererPackageName: devToolsConfig$jscomp$inline_1782.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1782.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16184,26 +16701,26 @@ var internals$jscomp$inline_2113 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1762.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1782.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-bef36890" + reconcilerVersion: "18.3.0-www-modern-2bb5f73b" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2114 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2150 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2114.isDisabled && - hook$jscomp$inline_2114.supportsFiber + !hook$jscomp$inline_2150.isDisabled && + hook$jscomp$inline_2150.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2114.inject( - internals$jscomp$inline_2113 + (rendererID = hook$jscomp$inline_2150.inject( + internals$jscomp$inline_2149 )), - (injectedHook = hook$jscomp$inline_2114); + (injectedHook = hook$jscomp$inline_2150); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -16260,7 +16777,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride = !1, identifierPrefix = "", onRecoverableError = defaultOnRecoverableError, - transitionCallbacks = null; + transitionCallbacks = null, + formState = null; null !== options && void 0 !== options && (!0 === options.unstable_strictMode && (isStrictMode = !0), @@ -16271,7 +16789,11 @@ exports.hydrateRoot = function (container, initialChildren, options) { void 0 !== options.onRecoverableError && (onRecoverableError = options.onRecoverableError), void 0 !== options.unstable_transitionCallbacks && - (transitionCallbacks = options.unstable_transitionCallbacks)); + (transitionCallbacks = options.unstable_transitionCallbacks), + enableAsyncActions && + enableFormActions && + void 0 !== options.formState && + (formState = options.formState)); initialChildren = createFiberRoot( container, 1, @@ -16283,7 +16805,7 @@ exports.hydrateRoot = function (container, initialChildren, options) { identifierPrefix, onRecoverableError, transitionCallbacks, - null + formState ); initialChildren.context = emptyContextObject; options = initialChildren.current; @@ -16450,10 +16972,18 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.useFormState = function () { +exports.useFormState = function (action, initialState, permalink) { + if (enableFormActions && enableAsyncActions) + return ReactCurrentDispatcher$2.current.useFormState( + action, + initialState, + permalink + ); throw Error(formatProdErrorMessage(248)); }; exports.useFormStatus = function () { + if (enableFormActions && enableAsyncActions) + return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-modern-bef36890"; +exports.version = "18.3.0-www-modern-2bb5f73b"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 32b7464d64..912f46a10d 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -52,11 +52,10 @@ var ReactSharedInternals = enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane, enableRetryLaneExpiration = dynamicFeatureFlags.enableRetryLaneExpiration, enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -345,6 +344,13 @@ function doesFiberContain(parentFiber, childFiber) { return !1; } var currentReplayingEvent = null, + ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher, + sharedNotPendingObject = { + pending: !1, + data: null, + method: null, + action: null + }, valueStack = [], index = -1; function createCursor(defaultValue) { @@ -361,7 +367,18 @@ function push(cursor, value) { } var contextStackCursor$1 = createCursor(null), contextFiberStackCursor = createCursor(null), - rootInstanceStackCursor = createCursor(null); + rootInstanceStackCursor = createCursor(null), + hostTransitionProviderCursor = createCursor(null), + HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function pushHostContainer(fiber, nextRootInstance) { push(rootInstanceStackCursor, nextRootInstance); push(contextFiberStackCursor, fiber); @@ -405,6 +422,10 @@ function popHostContainer() { pop(rootInstanceStackCursor); } function pushHostContext(fiber) { + enableFormActions && + enableAsyncActions && + null !== fiber.memoizedState && + push(hostTransitionProviderCursor, fiber); var context = contextStackCursor$1.current; var JSCompiler_inline_result = getChildHostContextProd(context, fiber.type); context !== JSCompiler_inline_result && @@ -414,6 +435,11 @@ function pushHostContext(fiber) { function popHostContext(fiber) { contextFiberStackCursor.current === fiber && (pop(contextStackCursor$1), pop(contextFiberStackCursor)); + enableFormActions && + enableAsyncActions && + hostTransitionProviderCursor.current === fiber && + (pop(hostTransitionProviderCursor), + (HostTransitionContext._currentValue = null)); } var scheduleCallback$3 = Scheduler.unstable_scheduleCallback, cancelCallback$1 = Scheduler.unstable_cancelCallback, @@ -1839,7 +1865,7 @@ function tryHydrateSuspense(fiber, nextInstance) { nextInstance = null; break a; } - instance = getNextHydratable(instance.nextSibling); + instance = getNextHydratableSibling(instance); if (null === instance) { nextInstance = null; break a; @@ -1890,19 +1916,26 @@ function popToNextHostParent(fiber) { function popHydrationState(fiber) { if (fiber !== hydrationParentFiber) return !1; if (!isHydrating) return popToNextHostParent(fiber), (isHydrating = !0), !1; - var shouldClear = !1; - 3 === fiber.tag || - 27 === fiber.tag || - (5 === fiber.tag && - shouldSetTextContent(fiber.type, fiber.memoizedProps)) || - (shouldClear = !0); + var shouldClear = !1, + JSCompiler_temp; + if ((JSCompiler_temp = 3 !== fiber.tag && 27 !== fiber.tag)) { + if ((JSCompiler_temp = 5 === fiber.tag)) + (JSCompiler_temp = fiber.type), + (JSCompiler_temp = + !( + !enableFormActions || + ("form" !== JSCompiler_temp && "button" !== JSCompiler_temp) + ) || shouldSetTextContent(fiber.type, fiber.memoizedProps)); + JSCompiler_temp = !JSCompiler_temp; + } + JSCompiler_temp && (shouldClear = !0); if (shouldClear && (shouldClear = nextHydratableInstance)) if (shouldClientRenderOnMismatch(fiber)) warnIfUnhydratedTailNodes(), throwOnHydrationMismatch(); else for (; shouldClear; ) deleteHydratableInstance(fiber, shouldClear), - (shouldClear = getNextHydratable(shouldClear.nextSibling)); + (shouldClear = getNextHydratableSibling(shouldClear)); popToNextHostParent(fiber); if (13 === fiber.tag) { fiber = fiber.memoizedState; @@ -1911,30 +1944,31 @@ function popHydrationState(fiber) { a: { fiber = fiber.nextSibling; for (shouldClear = 0; fiber; ) { - if (8 === fiber.nodeType) { - var data = fiber.data; - if ("/$" === data) { + if (8 === fiber.nodeType) + if (((JSCompiler_temp = fiber.data), "/$" === JSCompiler_temp)) { if (0 === shouldClear) { - nextHydratableInstance = getNextHydratable(fiber.nextSibling); + nextHydratableInstance = getNextHydratableSibling(fiber); break a; } shouldClear--; } else - ("$" !== data && "$!" !== data && "$?" !== data) || shouldClear++; - } + ("$" !== JSCompiler_temp && + "$!" !== JSCompiler_temp && + "$?" !== JSCompiler_temp) || + shouldClear++; fiber = fiber.nextSibling; } nextHydratableInstance = null; } } else nextHydratableInstance = hydrationParentFiber - ? getNextHydratable(fiber.stateNode.nextSibling) + ? getNextHydratableSibling(fiber.stateNode) : null; return !0; } function warnIfUnhydratedTailNodes() { for (var nextInstance = nextHydratableInstance; nextInstance; ) - nextInstance = getNextHydratable(nextInstance.nextSibling); + nextInstance = getNextHydratableSibling(nextInstance); } function resetHydrationState() { nextHydratableInstance = hydrationParentFiber = null; @@ -3578,6 +3612,14 @@ function renderWithHooksAgain(workInProgress, Component, props, secondArg) { } while (didScheduleRenderPhaseUpdateDuringThisPass); return children; } +function TransitionAwareHostComponent() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var maybeThenable = ReactCurrentDispatcher$1.current.useState()[0]; + return "function" === typeof maybeThenable.then + ? useThenable(maybeThenable) + : maybeThenable; +} function checkDidRenderIdHook() { var didRenderIdHook = 0 !== localIdCounter; localIdCounter = 0; @@ -3981,6 +4023,186 @@ function rerenderOptimistic(passthrough, reducer) { hook.baseState = passthrough; return [passthrough, hook.queue.dispatch]; } +function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); + fiber = actionQueue.pending; + null === fiber + ? ((fiber = { payload: payload, next: null }), + (fiber.next = actionQueue.pending = fiber), + runFormStateAction(actionQueue, setState, payload)) + : (actionQueue.pending = fiber.next = + { payload: payload, next: fiber.next }); +} +function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action, + prevState = actionQueue.state, + prevTransition = ReactCurrentBatchConfig$3.transition, + currentTransition = { _callbacks: new Set() }; + ReactCurrentBatchConfig$3.transition = currentTransition; + try { + var returnValue = action(prevState, payload); + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then + ? (notifyTransitionCallbacks(currentTransition, returnValue), + returnValue.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ), + setState(returnValue)) + : (setState(returnValue), + (actionQueue.state = returnValue), + finishRunningFormStateAction(actionQueue, setState)); + } catch (error) { + setState({ then: function () {}, status: "rejected", reason: error }), + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$3.transition = prevTransition; + } +} +function finishRunningFormStateAction(actionQueue, setState) { + var last = actionQueue.pending; + if (null !== last) { + var first = last.next; + first === last + ? (actionQueue.pending = null) + : ((first = first.next), + (last.next = first), + runFormStateAction(actionQueue, setState, first.payload)); + } +} +function formStateReducer(oldState, newState) { + return newState; +} +function mountFormState(action, initialStateProp) { + if (isHydrating) { + var ssrFormState = workInProgressRoot.formState; + if (null !== ssrFormState) { + a: { + if (isHydrating) { + if (nextHydratableInstance) { + b: { + var JSCompiler_inline_result = nextHydratableInstance; + for ( + var inRootOrSingleton = rootOrSingletonContext; + 8 !== JSCompiler_inline_result.nodeType; + + ) { + if (!inRootOrSingleton) { + JSCompiler_inline_result = null; + break b; + } + JSCompiler_inline_result = getNextHydratableSibling( + JSCompiler_inline_result + ); + if (null === JSCompiler_inline_result) { + JSCompiler_inline_result = null; + break b; + } + } + inRootOrSingleton = JSCompiler_inline_result.data; + JSCompiler_inline_result = + "F!" === inRootOrSingleton || "F" === inRootOrSingleton + ? JSCompiler_inline_result + : null; + } + if (JSCompiler_inline_result) { + nextHydratableInstance = getNextHydratableSibling( + JSCompiler_inline_result + ); + JSCompiler_inline_result = "F!" === JSCompiler_inline_result.data; + break a; + } + } + throwOnHydrationMismatch(); + } + JSCompiler_inline_result = !1; + } + JSCompiler_inline_result && (initialStateProp = ssrFormState[0]); + } + } + ssrFormState = mountWorkInProgressHook(); + ssrFormState.memoizedState = ssrFormState.baseState = initialStateProp; + JSCompiler_inline_result = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialStateProp + }; + ssrFormState.queue = JSCompiler_inline_result; + ssrFormState = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + JSCompiler_inline_result + ); + JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountWorkInProgressHook(); + inRootOrSingleton = { + state: initialStateProp, + dispatch: null, + action: action, + pending: null + }; + JSCompiler_inline_result.queue = inRootOrSingleton; + ssrFormState = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + inRootOrSingleton, + ssrFormState + ); + inRootOrSingleton.dispatch = ssrFormState; + JSCompiler_inline_result.memoizedState = action; + return [initialStateProp, ssrFormState]; +} +function updateFormState(action) { + var stateHook = updateWorkInProgressHook(); + return updateFormStateImpl(stateHook, currentHook, action); +} +function updateFormStateImpl(stateHook, currentStateHook, action) { + stateHook = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + )[0]; + stateHook = + "object" === typeof stateHook && + null !== stateHook && + "function" === typeof stateHook.then + ? useThenable(stateHook) + : stateHook; + currentStateHook = updateWorkInProgressHook(); + var actionQueue = currentStateHook.queue, + dispatch = actionQueue.dispatch; + action !== currentStateHook.memoizedState && + ((currentlyRenderingFiber$1.flags |= 2048), + pushEffect( + 9, + formStateActionEffect.bind(null, actionQueue, action), + { destroy: void 0 }, + null + )); + return [stateHook, dispatch]; +} +function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; +} +function rerenderFormState(action) { + var stateHook = updateWorkInProgressHook(), + currentStateHook = currentHook; + if (null !== currentStateHook) + return updateFormStateImpl(stateHook, currentStateHook, action); + stateHook = stateHook.memoizedState; + currentStateHook = updateWorkInProgressHook(); + var dispatch = currentStateHook.queue.dispatch; + currentStateHook.memoizedState = action; + return [stateHook, dispatch]; +} function pushEffect(tag, create, inst, deps) { tag = { tag: tag, create: create, inst: inst, deps: deps, next: null }; create = currentlyRenderingFiber$1.updateQueue; @@ -4177,6 +4399,47 @@ function startTransition( (ReactCurrentBatchConfig$3.transition = prevTransition); } } +function startHostTransition(formFiber, pendingState, callback, formData) { + if (enableFormActions) + if (enableAsyncActions) { + if (5 !== formFiber.tag) throw Error(formatProdErrorMessage(476)); + if (null === formFiber.memoizedState) { + var newQueue = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: basicStateReducer, + lastRenderedState: sharedNotPendingObject + }; + var queue = newQueue; + newQueue = { + memoizedState: sharedNotPendingObject, + baseState: sharedNotPendingObject, + baseQueue: null, + queue: newQueue, + next: null + }; + formFiber.memoizedState = newQueue; + var alternate = formFiber.alternate; + null !== alternate && (alternate.memoizedState = newQueue); + } else queue = formFiber.memoizedState.queue; + startTransition( + formFiber, + queue, + pendingState, + sharedNotPendingObject, + function () { + return callback(formData); + } + ); + } else callback(formData); +} +function useHostTransitionStatus() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var status = readContext(HostTransitionContext); + return null !== status ? status : sharedNotPendingObject; +} function updateId() { return updateWorkInProgressHook().memoizedState; } @@ -4190,14 +4453,14 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$62 = enqueueUpdate(provider, fiber, lane); - null !== root$62 && - (scheduleUpdateOnFiber(root$62, provider, lane), - entangleTransitions(root$62, provider, lane)); + var root$65 = enqueueUpdate(provider, fiber, lane); + null !== root$65 && + (scheduleUpdateOnFiber(root$65, provider, lane), + entangleTransitions(root$65, provider, lane)); provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$62 && + null !== root$65 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -4331,6 +4594,10 @@ var ContextOnlyDispatcher = { ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError; ContextOnlyDispatcher.useMemoCache = throwInvalidHookError; ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; +enableFormActions && + enableAsyncActions && + ((ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError), + (ContextOnlyDispatcher.useFormState = throwInvalidHookError)); enableAsyncActions && (ContextOnlyDispatcher.useOptimistic = throwInvalidHookError); var HooksDispatcherOnMount = { @@ -4499,6 +4766,10 @@ HooksDispatcherOnMount.useEffectEvent = function (callback) { return ref.impl.apply(void 0, arguments); }; }; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnMount.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnMount.useFormState = mountFormState)); enableAsyncActions && (HooksDispatcherOnMount.useOptimistic = mountOptimistic); var HooksDispatcherOnUpdate = { readContext: readContext, @@ -4541,6 +4812,10 @@ var HooksDispatcherOnUpdate = { HooksDispatcherOnUpdate.useCacheRefresh = updateRefresh; HooksDispatcherOnUpdate.useMemoCache = useMemoCache; HooksDispatcherOnUpdate.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnUpdate.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnUpdate.useFormState = updateFormState)); enableAsyncActions && (HooksDispatcherOnUpdate.useOptimistic = updateOptimistic); var HooksDispatcherOnRerender = { @@ -4586,6 +4861,11 @@ var HooksDispatcherOnRerender = { HooksDispatcherOnRerender.useCacheRefresh = updateRefresh; HooksDispatcherOnRerender.useMemoCache = useMemoCache; HooksDispatcherOnRerender.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnRerender.useHostTransitionStatus = + useHostTransitionStatus), + (HooksDispatcherOnRerender.useFormState = rerenderFormState)); enableAsyncActions && (HooksDispatcherOnRerender.useOptimistic = rerenderOptimistic); var now = Scheduler.unstable_now, @@ -5203,10 +5483,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$74 = workInProgress.stateNode; + root$77 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$74.incompleteTransitions.has(transition)) { + if (!root$77.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -5214,11 +5494,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$74.incompleteTransitions.set(transition, markerInstance); + root$77.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$74.incompleteTransitions.forEach(function (markerInstance) { + root$77.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5856,7 +6136,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { else if (!tryHydrateSuspense(workInProgress, nextInstance)) { shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(); - nextHydratableInstance = getNextHydratable(nextInstance.nextSibling); + nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) @@ -6768,6 +7048,18 @@ function propagateParentContextChanges( objectIs(parent.pendingProps.value, currentParent.value) || (null !== current ? current.push(context) : (current = [context])); } + } else if ( + enableFormActions && + enableAsyncActions && + parent === hostTransitionProviderCursor.current + ) { + currentParent = parent.alternate; + if (null === currentParent) throw Error(formatProdErrorMessage(387)); + currentParent.memoizedState.memoizedState !== + parent.memoizedState.memoizedState && + (null !== current + ? current.push(HostTransitionContext) + : (current = [HostTransitionContext])); } parent = parent.return; } @@ -7073,14 +7365,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$113 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$113 = lastTailNode), + for (var lastTailNode$117 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$117 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$113 + null === lastTailNode$117 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$113.sibling = null); + : (lastTailNode$117.sibling = null); } } function bubbleProperties(completedWork) { @@ -7092,53 +7384,53 @@ function bubbleProperties(completedWork) { if (didBailout) if (0 !== (completedWork.mode & 2)) { for ( - var treeBaseDuration$115 = completedWork.selfBaseDuration, - child$116 = completedWork.child; - null !== child$116; + var treeBaseDuration$119 = completedWork.selfBaseDuration, + child$120 = completedWork.child; + null !== child$120; ) - (newChildLanes |= child$116.lanes | child$116.childLanes), - (subtreeFlags |= child$116.subtreeFlags & 31457280), - (subtreeFlags |= child$116.flags & 31457280), - (treeBaseDuration$115 += child$116.treeBaseDuration), - (child$116 = child$116.sibling); - completedWork.treeBaseDuration = treeBaseDuration$115; + (newChildLanes |= child$120.lanes | child$120.childLanes), + (subtreeFlags |= child$120.subtreeFlags & 31457280), + (subtreeFlags |= child$120.flags & 31457280), + (treeBaseDuration$119 += child$120.treeBaseDuration), + (child$120 = child$120.sibling); + completedWork.treeBaseDuration = treeBaseDuration$119; } else for ( - treeBaseDuration$115 = completedWork.child; - null !== treeBaseDuration$115; + treeBaseDuration$119 = completedWork.child; + null !== treeBaseDuration$119; ) (newChildLanes |= - treeBaseDuration$115.lanes | treeBaseDuration$115.childLanes), - (subtreeFlags |= treeBaseDuration$115.subtreeFlags & 31457280), - (subtreeFlags |= treeBaseDuration$115.flags & 31457280), - (treeBaseDuration$115.return = completedWork), - (treeBaseDuration$115 = treeBaseDuration$115.sibling); + treeBaseDuration$119.lanes | treeBaseDuration$119.childLanes), + (subtreeFlags |= treeBaseDuration$119.subtreeFlags & 31457280), + (subtreeFlags |= treeBaseDuration$119.flags & 31457280), + (treeBaseDuration$119.return = completedWork), + (treeBaseDuration$119 = treeBaseDuration$119.sibling); else if (0 !== (completedWork.mode & 2)) { - treeBaseDuration$115 = completedWork.actualDuration; - child$116 = completedWork.selfBaseDuration; + treeBaseDuration$119 = completedWork.actualDuration; + child$120 = completedWork.selfBaseDuration; for (var child = completedWork.child; null !== child; ) (newChildLanes |= child.lanes | child.childLanes), (subtreeFlags |= child.subtreeFlags), (subtreeFlags |= child.flags), - (treeBaseDuration$115 += child.actualDuration), - (child$116 += child.treeBaseDuration), + (treeBaseDuration$119 += child.actualDuration), + (child$120 += child.treeBaseDuration), (child = child.sibling); - completedWork.actualDuration = treeBaseDuration$115; - completedWork.treeBaseDuration = child$116; + completedWork.actualDuration = treeBaseDuration$119; + completedWork.treeBaseDuration = child$120; } else for ( - treeBaseDuration$115 = completedWork.child; - null !== treeBaseDuration$115; + treeBaseDuration$119 = completedWork.child; + null !== treeBaseDuration$119; ) (newChildLanes |= - treeBaseDuration$115.lanes | treeBaseDuration$115.childLanes), - (subtreeFlags |= treeBaseDuration$115.subtreeFlags), - (subtreeFlags |= treeBaseDuration$115.flags), - (treeBaseDuration$115.return = completedWork), - (treeBaseDuration$115 = treeBaseDuration$115.sibling); + treeBaseDuration$119.lanes | treeBaseDuration$119.childLanes), + (subtreeFlags |= treeBaseDuration$119.subtreeFlags), + (subtreeFlags |= treeBaseDuration$119.flags), + (treeBaseDuration$119.return = completedWork), + (treeBaseDuration$119 = treeBaseDuration$119.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -7501,11 +7793,11 @@ function completeWork(current, workInProgress, renderLanes) { null !== newProps.alternate.memoizedState && null !== newProps.alternate.memoizedState.cachePool && (currentResource = newProps.alternate.memoizedState.cachePool.pool); - var cache$131 = null; + var cache$135 = null; null !== newProps.memoizedState && null !== newProps.memoizedState.cachePool && - (cache$131 = newProps.memoizedState.cachePool.pool); - cache$131 !== currentResource && (newProps.flags |= 2048); + (cache$135 = newProps.memoizedState.cachePool.pool); + cache$135 !== currentResource && (newProps.flags |= 2048); } renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), @@ -7547,8 +7839,8 @@ function completeWork(current, workInProgress, renderLanes) { if (null === currentResource) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - cache$131 = currentResource.rendering; - if (null === cache$131) + cache$135 = currentResource.rendering; + if (null === cache$135) if (newProps) cutOffTailIfNeeded(currentResource, !1); else { if ( @@ -7556,11 +7848,11 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - cache$131 = findFirstSuspended(current); - if (null !== cache$131) { + cache$135 = findFirstSuspended(current); + if (null !== cache$135) { workInProgress.flags |= 128; cutOffTailIfNeeded(currentResource, !1); - current = cache$131.updateQueue; + current = cache$135.updateQueue; workInProgress.updateQueue = current; scheduleRetryEffect(workInProgress, current); workInProgress.subtreeFlags = 0; @@ -7585,7 +7877,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if (((current = findFirstSuspended(cache$131)), null !== current)) { + if (((current = findFirstSuspended(cache$135)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -7595,7 +7887,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(currentResource, !0), null === currentResource.tail && "hidden" === currentResource.tailMode && - !cache$131.alternate && + !cache$135.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -7608,13 +7900,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(currentResource, !1), (workInProgress.lanes = 4194304)); currentResource.isBackwards - ? ((cache$131.sibling = workInProgress.child), - (workInProgress.child = cache$131)) + ? ((cache$135.sibling = workInProgress.child), + (workInProgress.child = cache$135)) : ((current = currentResource.last), null !== current - ? (current.sibling = cache$131) - : (workInProgress.child = cache$131), - (currentResource.last = cache$131)); + ? (current.sibling = cache$135) + : (workInProgress.child = cache$135), + (currentResource.last = cache$135)); } if (null !== currentResource.tail) return ( @@ -7956,8 +8248,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { recordLayoutEffectDuration(current); } else ref(null); - } catch (error$149) { - captureCommitPhaseError(current, nearestMountedAncestor, error$149); + } catch (error$153) { + captureCommitPhaseError(current, nearestMountedAncestor, error$153); } else ref.current = null; } @@ -7994,7 +8286,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$209) { + } catch (e$213) { JSCompiler_temp = null; break a; } @@ -8251,11 +8543,11 @@ function commitPassiveEffectDurations(finishedRoot, finishedWork) { var _finishedWork$memoize = finishedWork.memoizedProps, id = _finishedWork$memoize.id; _finishedWork$memoize = _finishedWork$memoize.onPostCommit; - var commitTime$151 = commitTime, + var commitTime$155 = commitTime, phase = null === finishedWork.alternate ? "mount" : "update"; currentUpdateIsNested && (phase = "nested-update"); "function" === typeof _finishedWork$memoize && - _finishedWork$memoize(id, phase, finishedRoot, commitTime$151); + _finishedWork$memoize(id, phase, finishedRoot, commitTime$155); finishedWork = finishedWork.return; a: for (; null !== finishedWork; ) { switch (finishedWork.tag) { @@ -8282,8 +8574,8 @@ function commitHookLayoutEffects(finishedWork, hookFlags) { } else try { commitHookEffectListMount(hookFlags, finishedWork); - } catch (error$153) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$153); + } catch (error$157) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$157); } } function commitClassCallbacks(finishedWork) { @@ -8382,11 +8674,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { } else try { finishedRoot.componentDidMount(); - } catch (error$154) { + } catch (error$158) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$154 + error$158 ); } else { @@ -8403,11 +8695,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$155) { + } catch (error$159) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$155 + error$159 ); } recordLayoutEffectDuration(finishedWork); @@ -8418,11 +8710,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$156) { + } catch (error$160) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$156 + error$160 ); } } @@ -9128,22 +9420,22 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { startLayoutEffectTimer(), commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$171) { + } catch (error$175) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$171 + error$175 ); } recordLayoutEffectDuration(finishedWork); } else try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$172) { + } catch (error$176) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$172 + error$176 ); } } @@ -9316,11 +9608,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { newProps ); domElement[internalPropsKey] = newProps; - } catch (error$173) { + } catch (error$177) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$173 + error$177 ); } } @@ -9358,8 +9650,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$174) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$174); + } catch (error$178) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$178); } } if (flags & 4 && ((flags = finishedWork.stateNode), null != flags)) { @@ -9370,8 +9662,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { updateProperties(flags, hoistableRoot, current, root), (flags[internalPropsKey] = root); - } catch (error$177) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$177); + } catch (error$181) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$181); } } break; @@ -9385,8 +9677,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$178) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$178); + } catch (error$182) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$182); } } break; @@ -9400,8 +9692,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$179) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$179); + } catch (error$183) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$183); } break; case 4: @@ -9431,8 +9723,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$181) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$181); + } catch (error$185) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$185); } current = finishedWork.updateQueue; null !== current && @@ -9510,11 +9802,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$161) { + } catch (error$165) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$161 + error$165 ); } } else if ( @@ -9589,21 +9881,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$162 = JSCompiler_inline_result.stateNode; + var parent$166 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$162, ""), + (setTextContent(parent$166, ""), (JSCompiler_inline_result.flags &= -33)); - var before$163 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$163, parent$162); + var before$167 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$167, parent$166); break; case 3: case 4: - var parent$164 = JSCompiler_inline_result.stateNode.containerInfo, - before$165 = getHostSibling(finishedWork); + var parent$168 = JSCompiler_inline_result.stateNode.containerInfo, + before$169 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$165, - parent$164 + before$169, + parent$168 ); break; default: @@ -9795,8 +10087,8 @@ function commitHookPassiveMountEffects(finishedWork, hookFlags) { } else try { commitHookEffectListMount(hookFlags, finishedWork); - } catch (error$184) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$184); + } catch (error$188) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$188); } } function commitOffscreenPassiveMountEffects(current, finishedWork, instance) { @@ -10095,9 +10387,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$189 = finishedWork.stateNode; + var instance$193 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$189._visibility & 4 + ? instance$193._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -10110,7 +10402,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$189._visibility |= 4), + : ((instance$193._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -10118,7 +10410,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$189._visibility |= 4), + : ((instance$193._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -10131,7 +10423,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$189 + instance$193 ); break; case 24: @@ -11123,8 +11415,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$197) { - handleThrow(root, thrownValue$197); + } catch (thrownValue$201) { + handleThrow(root, thrownValue$201); } while (1); lanes && root.shellSuspendCounter++; @@ -11240,8 +11532,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$199) { - handleThrow(root, thrownValue$199); + } catch (thrownValue$203) { + handleThrow(root, thrownValue$203); } while (1); resetContextDependencies(); @@ -11489,7 +11781,7 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$203 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$207 = commitBeforeMutationEffects( root, finishedWork ); @@ -11497,7 +11789,7 @@ function commitRootImpl( enableProfilerNestedUpdateScheduledHook && (rootCommittingMutationOrLayoutEffects = root); commitMutationEffects(root, finishedWork, lanes); - shouldFireAfterActiveInstanceBlur$203 && + shouldFireAfterActiveInstanceBlur$207 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -11591,7 +11883,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$204 = rootWithPendingPassiveEffects, + var root$208 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -11607,7 +11899,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$204, remainingLanes); + releaseRootPooledCache(root$208, remainingLanes); } } return !1; @@ -12070,45 +12362,69 @@ beginWork = function (current, workInProgress, renderLanes) { workInProgress.child ); case 5: - return ( - pushHostContext(workInProgress), - null === current && - isHydrating && - (((context = Component = nextHydratableInstance), context) - ? tryHydrateInstance(workInProgress, context) || - (shouldClientRenderOnMismatch(workInProgress) && - throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable(context.nextSibling)), - (prevState = hydrationParentFiber), - nextHydratableInstance && - tryHydrateInstance(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(prevState, context) - : (insertNonHydratedInstance( - hydrationParentFiber, - workInProgress - ), - (isHydrating = !1), - (hydrationParentFiber = workInProgress), - (nextHydratableInstance = Component))) - : (shouldClientRenderOnMismatch(workInProgress) && - throwOnHydrationMismatch(), - insertNonHydratedInstance(hydrationParentFiber, workInProgress), - (isHydrating = !1), - (hydrationParentFiber = workInProgress), - (nextHydratableInstance = Component))), - (Component = workInProgress.type), - (context = workInProgress.pendingProps), - (prevState = null !== current ? current.memoizedProps : null), - (nextState = context.children), - shouldSetTextContent(Component, context) - ? (nextState = null) - : null !== prevState && - shouldSetTextContent(Component, prevState) && - (workInProgress.flags |= 32), - markRef$1(current, workInProgress), - reconcileChildren(current, workInProgress, nextState, renderLanes), - workInProgress.child - ); + pushHostContext(workInProgress); + null === current && + isHydrating && + (((context = Component = nextHydratableInstance), context) + ? tryHydrateInstance(workInProgress, context) || + (shouldClientRenderOnMismatch(workInProgress) && + throwOnHydrationMismatch(), + (nextHydratableInstance = getNextHydratableSibling(context)), + (prevState = hydrationParentFiber), + nextHydratableInstance && + tryHydrateInstance(workInProgress, nextHydratableInstance) + ? deleteHydratableInstance(prevState, context) + : (insertNonHydratedInstance( + hydrationParentFiber, + workInProgress + ), + (isHydrating = !1), + (hydrationParentFiber = workInProgress), + (nextHydratableInstance = Component))) + : (shouldClientRenderOnMismatch(workInProgress) && + throwOnHydrationMismatch(), + insertNonHydratedInstance(hydrationParentFiber, workInProgress), + (isHydrating = !1), + (hydrationParentFiber = workInProgress), + (nextHydratableInstance = Component))); + context = workInProgress.type; + prevState = workInProgress.pendingProps; + nextState = null !== current ? current.memoizedProps : null; + Component = prevState.children; + shouldSetTextContent(context, prevState) + ? (Component = null) + : null !== nextState && + shouldSetTextContent(context, nextState) && + (workInProgress.flags |= 32); + if ( + enableFormActions && + enableAsyncActions && + null !== workInProgress.memoizedState + ) { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + context = renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + renderLanes + ); + HostTransitionContext._currentValue = context; + enableLazyContextPropagation || + (didReceiveUpdate && + null !== current && + current.memoizedState.memoizedState !== context && + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + )); + } + markRef$1(current, workInProgress); + reconcileChildren(current, workInProgress, Component, renderLanes); + return workInProgress.child; case 6: return ( null === current && @@ -12119,7 +12435,7 @@ beginWork = function (current, workInProgress, renderLanes) { ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (nextHydratableInstance = getNextHydratableSibling(current)), (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) @@ -12944,12 +13260,12 @@ function getPublicRootInstance(container) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$207 = fiber.stateNode; - if (root$207.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$207.pendingLanes); + var root$211 = fiber.stateNode; + if (root$211.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$211.pendingLanes); 0 !== lanes && - (upgradePendingLanesToSync(root$207, lanes), - ensureRootIsScheduled(root$207), + (upgradePendingLanesToSync(root$211, lanes), + ensureRootIsScheduled(root$211), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now$1() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -13515,19 +13831,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$366; + var JSCompiler_inline_result$jscomp$373; if (canUseDOM) { - var isSupported$jscomp$inline_1621 = "oninput" in document; - if (!isSupported$jscomp$inline_1621) { - var element$jscomp$inline_1622 = document.createElement("div"); - element$jscomp$inline_1622.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1621 = - "function" === typeof element$jscomp$inline_1622.oninput; + var isSupported$jscomp$inline_1640 = "oninput" in document; + if (!isSupported$jscomp$inline_1640) { + var element$jscomp$inline_1641 = document.createElement("div"); + element$jscomp$inline_1641.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1640 = + "function" === typeof element$jscomp$inline_1641.oninput; } - JSCompiler_inline_result$jscomp$366 = isSupported$jscomp$inline_1621; - } else JSCompiler_inline_result$jscomp$366 = !1; + JSCompiler_inline_result$jscomp$373 = isSupported$jscomp$inline_1640; + } else JSCompiler_inline_result$jscomp$373 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$366 && + JSCompiler_inline_result$jscomp$373 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -13835,21 +14151,84 @@ function registerSimpleEvent(domEventName, reactName) { topLevelEventsToReactNames.set(domEventName, reactName); registerTwoPhaseEvent(reactName, [domEventName]); } -for ( - var i$jscomp$inline_1662 = 0; - i$jscomp$inline_1662 < simpleEventPluginEvents.length; - i$jscomp$inline_1662++ +function extractEvents$1( + dispatchQueue, + domEventName, + maybeTargetInst, + nativeEvent, + nativeEventTarget ) { - var eventName$jscomp$inline_1663 = - simpleEventPluginEvents[i$jscomp$inline_1662], - domEventName$jscomp$inline_1664 = - eventName$jscomp$inline_1663.toLowerCase(), - capitalizedEvent$jscomp$inline_1665 = - eventName$jscomp$inline_1663[0].toUpperCase() + - eventName$jscomp$inline_1663.slice(1); + if ( + "submit" === domEventName && + maybeTargetInst && + maybeTargetInst.stateNode === nativeEventTarget + ) { + var action = getFiberCurrentPropsFromNode(nativeEventTarget).action, + submitter = nativeEvent.submitter; + submitter && + ((domEventName = (domEventName = getFiberCurrentPropsFromNode(submitter)) + ? domEventName.formAction + : submitter.getAttribute("formAction")), + null != domEventName && ((action = domEventName), (submitter = null))); + if ("function" === typeof action) { + var event = new SyntheticEvent( + "action", + "action", + null, + nativeEvent, + nativeEventTarget + ); + dispatchQueue.push({ + event: event, + listeners: [ + { + instance: null, + listener: function () { + if (!nativeEvent.defaultPrevented) { + event.preventDefault(); + if (submitter) { + var temp = submitter.ownerDocument.createElement("input"); + temp.name = submitter.name; + temp.value = submitter.value; + submitter.parentNode.insertBefore(temp, submitter); + var formData = new FormData(nativeEventTarget); + temp.parentNode.removeChild(temp); + } else formData = new FormData(nativeEventTarget); + startHostTransition( + maybeTargetInst, + { + pending: !0, + data: formData, + method: nativeEventTarget.method, + action: action + }, + action, + formData + ); + } + }, + currentTarget: nativeEventTarget + } + ] + }); + } + } +} +for ( + var i$jscomp$inline_1681 = 0; + i$jscomp$inline_1681 < simpleEventPluginEvents.length; + i$jscomp$inline_1681++ +) { + var eventName$jscomp$inline_1682 = + simpleEventPluginEvents[i$jscomp$inline_1681], + domEventName$jscomp$inline_1683 = + eventName$jscomp$inline_1682.toLowerCase(), + capitalizedEvent$jscomp$inline_1684 = + eventName$jscomp$inline_1682[0].toUpperCase() + + eventName$jscomp$inline_1682.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1664, - "on" + capitalizedEvent$jscomp$inline_1665 + domEventName$jscomp$inline_1683, + "on" + capitalizedEvent$jscomp$inline_1684 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -14391,8 +14770,7 @@ function dispatchEventForPluginEventSystem( !SyntheticEventCtor || "input" !== SyntheticEventCtor.toLowerCase() || ("checkbox" !== reactName.type && "radio" !== reactName.type) - ? enableCustomElementPropertySupport && - targetInst && + ? targetInst && isCustomElement(targetInst.elementType) && (getTargetInstFunc = getTargetInstForChangeEvent) : (getTargetInstFunc = getTargetInstForClickEvent); @@ -14497,9 +14875,9 @@ function dispatchEventForPluginEventSystem( ? getNativeBeforeInputChars(domEventName, nativeEvent) : getFallbackBeforeInputChars(domEventName, nativeEvent)) ) - (targetInst = accumulateTwoPhaseListeners(targetInst, "onBeforeInput")), - 0 < targetInst.length && - ((nativeEventTarget = new SyntheticCompositionEvent( + (eventType = accumulateTwoPhaseListeners(targetInst, "onBeforeInput")), + 0 < eventType.length && + ((handleEventFunc = new SyntheticCompositionEvent( "onBeforeInput", "beforeinput", null, @@ -14507,10 +14885,18 @@ function dispatchEventForPluginEventSystem( nativeEventTarget )), dispatchQueue.push({ - event: nativeEventTarget, - listeners: targetInst + event: handleEventFunc, + listeners: eventType }), - (nativeEventTarget.data = fallbackData)); + (handleEventFunc.data = fallbackData)); + enableFormActions && + extractEvents$1( + dispatchQueue, + domEventName, + targetInst, + nativeEvent, + nativeEventTarget + ); } processDispatchQueue(dispatchQueue, eventSystemFlags); }); @@ -14732,9 +15118,55 @@ function setProp(domElement, tag, key, value, props, prevValue) { break; case "action": case "formAction": + if (enableFormActions) + if ("function" === typeof value) { + domElement.setAttribute( + key, + "javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')" + ); + break; + } else + "function" === typeof prevValue && + ("formAction" === key + ? ("input" !== tag && + setProp(domElement, tag, "name", props.name, props, null), + setProp( + domElement, + tag, + "formEncType", + props.formEncType, + props, + null + ), + setProp( + domElement, + tag, + "formMethod", + props.formMethod, + props, + null + ), + setProp( + domElement, + tag, + "formTarget", + props.formTarget, + props, + null + )) + : (setProp( + domElement, + tag, + "encType", + props.encType, + props, + null + ), + setProp(domElement, tag, "method", props.method, props, null), + setProp(domElement, tag, "target", props.target, props, null))); if ( null == value || - "function" === typeof value || + (!enableFormActions && "function" === typeof value) || "symbol" === typeof value || "boolean" === typeof value ) { @@ -14949,7 +15381,7 @@ function setProp(domElement, tag, key, value, props, prevValue) { break; case "innerText": case "textContent": - if (enableCustomElementPropertySupport) break; + break; default: if ( !(2 < key.length) || @@ -14998,41 +15430,36 @@ function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { break; case "innerText": case "textContent": - if (enableCustomElementPropertySupport) break; + break; default: if (!registrationNameDependencies.hasOwnProperty(key)) - if (enableCustomElementPropertySupport) - a: { - props = value; - if ( - "o" === key[0] && - "n" === key[1] && - ((tag = key.endsWith("Capture")), - (value = key.slice(2, tag ? key.length - 7 : 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) - : !0 === props - ? domElement.setAttribute(key, "") - : setValueForAttribute(domElement, key, props); + a: { + if ( + "o" === key[0] && + "n" === key[1] && + ((props = key.endsWith("Capture")), + (tag = key.slice(2, props ? key.length - 7 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(tag, prevValue, props), + "function" === typeof value) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(tag, value, props); + break a; } - else - "boolean" === typeof value && (value = "" + value), - setValueForAttribute(domElement, key, value); + key in domElement + ? (domElement[key] = value) + : !0 === value + ? domElement.setAttribute(key, "") + : setValueForAttribute(domElement, key, value); + } } } function setInitialProperties(domElement, tag, props) { @@ -15275,14 +15702,14 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp(domElement, tag, propKey, null, nextProps, lastProp); } } - for (var propKey$236 in nextProps) { - var propKey = nextProps[propKey$236]; - lastProp = lastProps[propKey$236]; + for (var propKey$240 in nextProps) { + var propKey = nextProps[propKey$240]; + lastProp = lastProps[propKey$240]; if ( - nextProps.hasOwnProperty(propKey$236) && + nextProps.hasOwnProperty(propKey$240) && (null != propKey || null != lastProp) ) - switch (propKey$236) { + switch (propKey$240) { case "type": type = propKey; break; @@ -15311,7 +15738,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp( domElement, tag, - propKey$236, + propKey$240, propKey, nextProps, lastProp @@ -15330,7 +15757,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ); return; case "select": - propKey = value = defaultValue = propKey$236 = null; + propKey = value = defaultValue = propKey$240 = null; for (type in lastProps) if ( ((lastDefaultValue = lastProps[type]), @@ -15361,7 +15788,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ) switch (name) { case "value": - propKey$236 = type; + propKey$240 = type; break; case "defaultValue": defaultValue = type; @@ -15382,15 +15809,15 @@ function updateProperties(domElement, tag, lastProps, nextProps) { tag = defaultValue; lastProps = value; nextProps = propKey; - null != propKey$236 - ? updateOptions(domElement, !!lastProps, propKey$236, !1) + null != propKey$240 + ? updateOptions(domElement, !!lastProps, propKey$240, !1) : !!nextProps !== !!lastProps && (null != tag ? updateOptions(domElement, !!lastProps, tag, !0) : updateOptions(domElement, !!lastProps, lastProps ? [] : "", !1)); return; case "textarea": - propKey = propKey$236 = null; + propKey = propKey$240 = null; for (defaultValue in lastProps) if ( ((name = lastProps[defaultValue]), @@ -15414,7 +15841,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ) switch (value) { case "value": - propKey$236 = name; + propKey$240 = name; break; case "defaultValue": propKey = name; @@ -15428,17 +15855,17 @@ function updateProperties(domElement, tag, lastProps, nextProps) { name !== type && setProp(domElement, tag, value, name, nextProps, type); } - updateTextarea(domElement, propKey$236, propKey); + updateTextarea(domElement, propKey$240, propKey); return; case "option": - for (var propKey$252 in lastProps) + for (var propKey$256 in lastProps) if ( - ((propKey$236 = lastProps[propKey$252]), - lastProps.hasOwnProperty(propKey$252) && - null != propKey$236 && - !nextProps.hasOwnProperty(propKey$252)) + ((propKey$240 = lastProps[propKey$256]), + lastProps.hasOwnProperty(propKey$256) && + null != propKey$240 && + !nextProps.hasOwnProperty(propKey$256)) ) - switch (propKey$252) { + switch (propKey$256) { case "selected": domElement.selected = !1; break; @@ -15446,33 +15873,33 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp( domElement, tag, - propKey$252, + propKey$256, null, nextProps, - propKey$236 + propKey$240 ); } for (lastDefaultValue in nextProps) if ( - ((propKey$236 = nextProps[lastDefaultValue]), + ((propKey$240 = nextProps[lastDefaultValue]), (propKey = lastProps[lastDefaultValue]), nextProps.hasOwnProperty(lastDefaultValue) && - propKey$236 !== propKey && - (null != propKey$236 || null != propKey)) + propKey$240 !== propKey && + (null != propKey$240 || null != propKey)) ) switch (lastDefaultValue) { case "selected": domElement.selected = - propKey$236 && - "function" !== typeof propKey$236 && - "symbol" !== typeof propKey$236; + propKey$240 && + "function" !== typeof propKey$240 && + "symbol" !== typeof propKey$240; break; default: setProp( domElement, tag, lastDefaultValue, - propKey$236, + propKey$240, nextProps, propKey ); @@ -15493,24 +15920,24 @@ function updateProperties(domElement, tag, lastProps, nextProps) { case "track": case "wbr": case "menuitem": - for (var propKey$257 in lastProps) - (propKey$236 = lastProps[propKey$257]), - lastProps.hasOwnProperty(propKey$257) && - null != propKey$236 && - !nextProps.hasOwnProperty(propKey$257) && - setProp(domElement, tag, propKey$257, null, nextProps, propKey$236); + for (var propKey$261 in lastProps) + (propKey$240 = lastProps[propKey$261]), + lastProps.hasOwnProperty(propKey$261) && + null != propKey$240 && + !nextProps.hasOwnProperty(propKey$261) && + setProp(domElement, tag, propKey$261, null, nextProps, propKey$240); for (checked in nextProps) if ( - ((propKey$236 = nextProps[checked]), + ((propKey$240 = nextProps[checked]), (propKey = lastProps[checked]), nextProps.hasOwnProperty(checked) && - propKey$236 !== propKey && - (null != propKey$236 || null != propKey)) + propKey$240 !== propKey && + (null != propKey$240 || null != propKey)) ) switch (checked) { case "children": case "dangerouslySetInnerHTML": - if (null != propKey$236) + if (null != propKey$240) throw Error(formatProdErrorMessage(137, tag)); break; default: @@ -15518,7 +15945,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { domElement, tag, checked, - propKey$236, + propKey$240, nextProps, propKey ); @@ -15526,49 +15953,49 @@ function updateProperties(domElement, tag, lastProps, nextProps) { return; default: if (isCustomElement(tag)) { - for (var propKey$262 in lastProps) - (propKey$236 = lastProps[propKey$262]), - lastProps.hasOwnProperty(propKey$262) && - null != propKey$236 && - !nextProps.hasOwnProperty(propKey$262) && + for (var propKey$266 in lastProps) + (propKey$240 = lastProps[propKey$266]), + lastProps.hasOwnProperty(propKey$266) && + null != propKey$240 && + !nextProps.hasOwnProperty(propKey$266) && setPropOnCustomElement( domElement, tag, - propKey$262, + propKey$266, null, nextProps, - propKey$236 + propKey$240 ); for (defaultChecked in nextProps) - (propKey$236 = nextProps[defaultChecked]), + (propKey$240 = nextProps[defaultChecked]), (propKey = lastProps[defaultChecked]), !nextProps.hasOwnProperty(defaultChecked) || - propKey$236 === propKey || - (null == propKey$236 && null == propKey) || + propKey$240 === propKey || + (null == propKey$240 && null == propKey) || setPropOnCustomElement( domElement, tag, defaultChecked, - propKey$236, + propKey$240, nextProps, propKey ); return; } } - for (var propKey$267 in lastProps) - (propKey$236 = lastProps[propKey$267]), - lastProps.hasOwnProperty(propKey$267) && - null != propKey$236 && - !nextProps.hasOwnProperty(propKey$267) && - setProp(domElement, tag, propKey$267, null, nextProps, propKey$236); + for (var propKey$271 in lastProps) + (propKey$240 = lastProps[propKey$271]), + lastProps.hasOwnProperty(propKey$271) && + null != propKey$240 && + !nextProps.hasOwnProperty(propKey$271) && + setProp(domElement, tag, propKey$271, null, nextProps, propKey$240); for (lastProp in nextProps) - (propKey$236 = nextProps[lastProp]), + (propKey$240 = nextProps[lastProp]), (propKey = lastProps[lastProp]), !nextProps.hasOwnProperty(lastProp) || - propKey$236 === propKey || - (null == propKey$236 && null == propKey) || - setProp(domElement, tag, lastProp, propKey$236, nextProps, propKey); + propKey$240 === propKey || + (null == propKey$240 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$240, nextProps, propKey); } var eventsEnabled = null, selectionInformation = null; @@ -15727,56 +16154,65 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) { for (; 1 === instance.nodeType; ) { var anyProps = props; if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { - if (!inRootOrSingleton) break; - } else { - if (!inRootOrSingleton) return instance; - if (!instance[internalHoistableMarker]) - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) break; - return instance; - case "link": - var rel = instance.getAttribute("rel"); - if ( - "stylesheet" === rel && - instance.hasAttribute("data-precedence") - ) - break; - else if ( - rel !== anyProps.rel || - instance.getAttribute("href") !== - (null == anyProps.href ? null : anyProps.href) || + if ( + !( + inRootOrSingleton || + (enableFormActions && + "INPUT" === instance.nodeName && + "hidden" === instance.type) + ) + ) + break; + } else if (!inRootOrSingleton) + if (enableFormActions && "input" === type && "hidden" === instance.type) { + var name = null == anyProps.name ? null : "" + anyProps.name; + if ( + "hidden" === anyProps.type && + instance.getAttribute("name") === name + ) + return instance; + } else return instance; + else if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + name = instance.getAttribute("rel"); + if ("stylesheet" === name && instance.hasAttribute("data-precedence")) + break; + else if ( + name !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + name = instance.getAttribute("src"); + if ( + (name !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || instance.getAttribute("crossorigin") !== - (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || - instance.getAttribute("title") !== - (null == anyProps.title ? null : anyProps.title) - ) - break; - return instance; - case "style": - if (instance.hasAttribute("data-precedence")) break; - return instance; - case "script": - rel = instance.getAttribute("src"); - if ( - (rel !== (null == anyProps.src ? null : anyProps.src) || - instance.getAttribute("type") !== - (null == anyProps.type ? null : anyProps.type) || - instance.getAttribute("crossorigin") !== - (null == anyProps.crossOrigin - ? null - : anyProps.crossOrigin)) && - rel && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop") - ) - break; - return instance; - default: - return instance; - } - } - instance = getNextHydratable(instance.nextSibling); + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin)) && + name && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + return instance; + default: + return instance; + } + instance = getNextHydratableSibling(instance); if (null === instance) break; } return null; @@ -15784,8 +16220,17 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) { function canHydrateTextInstance(instance, text, inRootOrSingleton) { if ("" === text) return null; for (; 3 !== instance.nodeType; ) { - if (!inRootOrSingleton) return null; - instance = getNextHydratable(instance.nextSibling); + if ( + !( + (enableFormActions && + 1 === instance.nodeType && + "INPUT" === instance.nodeName && + "hidden" === instance.type) || + inRootOrSingleton + ) + ) + return null; + instance = getNextHydratableSibling(instance); if (null === instance) return null; } return instance; @@ -15796,12 +16241,23 @@ function getNextHydratable(node) { if (1 === nodeType || 3 === nodeType) break; if (8 === nodeType) { nodeType = node.data; - if ("$" === nodeType || "$!" === nodeType || "$?" === nodeType) break; + if ( + "$" === nodeType || + "$!" === nodeType || + "$?" === nodeType || + (enableFormActions && + enableAsyncActions && + ("F!" === nodeType || "F" === nodeType)) + ) + break; if ("/$" === nodeType) return null; } } return node; } +function getNextHydratableSibling(instance) { + return getNextHydratable(instance.nextSibling); +} function hydrateInstance( instance, type, @@ -16181,17 +16637,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$275 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$276 = styles$275.get(type); - resource$276 || + var styles$279 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$280 = styles$279.get(type); + resource$280 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$276 = { + (resource$280 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$275.set(type, resource$276), + styles$279.set(type, resource$280), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -16206,9 +16662,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$276.state + resource$280.state )); - return resource$276; + return resource$280; } return null; case "script": @@ -16291,37 +16747,37 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = instance); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$280 = hoistableRoot.querySelector( + var instance$284 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$280) + if (instance$284) return ( (resource.state.loading |= 4), - (resource.instance = instance$280), - markNodeAsHoistable(instance$280), - instance$280 + (resource.instance = instance$284), + markNodeAsHoistable(instance$284), + instance$284 ); instance = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(instance, styleProps); - instance$280 = ( + instance$284 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$280); - var linkInstance = instance$280; + markNodeAsHoistable(instance$284); + var linkInstance = instance$284; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$280, "link", instance); + setInitialProperties(instance$284, "link", instance); resource.state.loading |= 4; - insertStylesheet(instance$280, props.precedence, hoistableRoot); - return (resource.instance = instance$280); + insertStylesheet(instance$284, props.precedence, hoistableRoot); + return (resource.instance = instance$284); case "script": - instance$280 = getScriptKey(props.src); + instance$284 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - getScriptSelectorFromKey(instance$280) + getScriptSelectorFromKey(instance$284) )) ) return ( @@ -16330,7 +16786,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); instance = props; - if ((styleProps = preloadPropsMap.get(instance$280))) + if ((styleProps = preloadPropsMap.get(instance$284))) (instance = assign({}, props)), adoptPreloadPropsForScript(instance, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -16937,6 +17393,42 @@ function scheduleCallbackIfUnblocked(queuedEvent, unblocked) { replayUnblockedEvents ))); } +var lastScheduledReplayQueue = null; +function scheduleReplayQueueIfNeeded(formReplayingQueue) { + lastScheduledReplayQueue !== formReplayingQueue && + ((lastScheduledReplayQueue = formReplayingQueue), + Scheduler.unstable_scheduleCallback( + Scheduler.unstable_NormalPriority, + function () { + lastScheduledReplayQueue === formReplayingQueue && + (lastScheduledReplayQueue = null); + for (var i = 0; i < formReplayingQueue.length; i += 3) { + var form = formReplayingQueue[i], + submitterOrAction = formReplayingQueue[i + 1], + formData = formReplayingQueue[i + 2]; + if ("function" !== typeof submitterOrAction) + if (null === findInstanceBlockingTarget(submitterOrAction || form)) + continue; + else break; + var formInst = getInstanceFromNode(form); + null !== formInst && + (formReplayingQueue.splice(i, 3), + (i -= 3), + startHostTransition( + formInst, + { + pending: !0, + data: formData, + method: form.method, + action: submitterOrAction + }, + submitterOrAction, + formData + )); + } + } + )); +} function retryIfBlockedOn(unblocked) { function unblock(queuedEvent) { return scheduleCallbackIfUnblocked(queuedEvent, unblocked); @@ -16958,6 +17450,34 @@ function retryIfBlockedOn(unblocked) { ) attemptExplicitHydrationTarget(i), null === i.blockedOn && queuedExplicitHydrationTargets.shift(); + if ( + enableFormActions && + ((i = unblocked.getRootNode().$$reactFormReplay), null != i) + ) + for (queuedTarget = 0; queuedTarget < i.length; queuedTarget += 3) { + var form = i[queuedTarget], + submitterOrAction = i[queuedTarget + 1], + formProps = getFiberCurrentPropsFromNode(form); + if ("function" === typeof submitterOrAction) + formProps || scheduleReplayQueueIfNeeded(i); + else if (formProps) { + var action = null; + if (submitterOrAction && submitterOrAction.hasAttribute("formAction")) + if ( + ((form = submitterOrAction), + (formProps = getFiberCurrentPropsFromNode(submitterOrAction))) + ) + action = formProps.formAction; + else { + if (null !== findInstanceBlockingTarget(form)) continue; + } + else action = formProps.action; + "function" === typeof action + ? (i[queuedTarget + 1] = action) + : (i.splice(queuedTarget, 3), (queuedTarget -= 3)); + scheduleReplayQueueIfNeeded(i); + } + } } var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig, _enabled = !0; @@ -17077,36 +17597,33 @@ function dispatchEvent( } function findInstanceBlockingEvent(nativeEvent) { nativeEvent = getEventTarget(nativeEvent); - a: { - return_targetInst = null; - nativeEvent = getClosestInstanceFromNode(nativeEvent); - if (null !== nativeEvent) { - var nearestMounted = getNearestMountedFiber(nativeEvent); - if (null === nearestMounted) nativeEvent = null; - else { - var tag = nearestMounted.tag; - if (13 === tag) { - nativeEvent = getSuspenseInstanceFromFiber(nearestMounted); - if (null !== nativeEvent) break a; - nativeEvent = null; - } else if (3 === tag) { - if (nearestMounted.stateNode.current.memoizedState.isDehydrated) { - nativeEvent = - 3 === nearestMounted.tag - ? nearestMounted.stateNode.containerInfo - : null; - break a; - } - nativeEvent = null; - } else nearestMounted !== nativeEvent && (nativeEvent = null); - } - } - return_targetInst = nativeEvent; - nativeEvent = null; - } - return nativeEvent; + return findInstanceBlockingTarget(nativeEvent); } var return_targetInst = null; +function findInstanceBlockingTarget(targetNode) { + return_targetInst = null; + targetNode = getClosestInstanceFromNode(targetNode); + if (null !== targetNode) { + var nearestMounted = getNearestMountedFiber(targetNode); + if (null === nearestMounted) targetNode = null; + else { + var tag = nearestMounted.tag; + if (13 === tag) { + targetNode = getSuspenseInstanceFromFiber(nearestMounted); + if (null !== targetNode) return targetNode; + targetNode = null; + } else if (3 === tag) { + if (nearestMounted.stateNode.current.memoizedState.isDehydrated) + return 3 === nearestMounted.tag + ? nearestMounted.stateNode.containerInfo + : null; + targetNode = null; + } else nearestMounted !== targetNode && (targetNode = null); + } + } + return_targetInst = targetNode; + return null; +} function getEventPriority(domEventName) { switch (domEventName) { case "cancel": @@ -17284,11 +17801,11 @@ function legacyCreateRootFromDOMContainer( if ("function" === typeof callback) { var originalCallback = callback; callback = function () { - var instance = getPublicRootInstance(root$300); + var instance = getPublicRootInstance(root$306); originalCallback.call(instance); }; } - var root$300 = createHydrationContainer( + var root$306 = createHydrationContainer( initialChildren, callback, container, @@ -17301,23 +17818,23 @@ function legacyCreateRootFromDOMContainer( null, null ); - container._reactRootContainer = root$300; - container[internalContainerInstanceKey] = root$300.current; + container._reactRootContainer = root$306; + container[internalContainerInstanceKey] = root$306.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(); - return root$300; + return root$306; } clearContainer(container); if ("function" === typeof callback) { - var originalCallback$301 = callback; + var originalCallback$307 = callback; callback = function () { - var instance = getPublicRootInstance(root$302); - originalCallback$301.call(instance); + var instance = getPublicRootInstance(root$308); + originalCallback$307.call(instance); }; } - var root$302 = createFiberRoot( + var root$308 = createFiberRoot( container, 0, !1, @@ -17330,15 +17847,15 @@ function legacyCreateRootFromDOMContainer( null, null ); - container._reactRootContainer = root$302; - container[internalContainerInstanceKey] = root$302.current; + container._reactRootContainer = root$308; + container[internalContainerInstanceKey] = root$308.current; listenToAllSupportedEvents( 8 === container.nodeType ? container.parentNode : container ); flushSync$1(function () { - updateContainer(initialChildren, root$302, parentComponent, callback); + updateContainer(initialChildren, root$308, parentComponent, callback); }); - return root$302; + return root$308; } function legacyRenderSubtreeIntoContainer( parentComponent, @@ -17403,10 +17920,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1888 = { +var devToolsConfig$jscomp$inline_1908 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-8c6367b4", + version: "18.3.0-www-classic-3ac173cd", rendererPackageName: "react-dom" }; (function (internals) { @@ -17424,10 +17941,10 @@ var devToolsConfig$jscomp$inline_1888 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1888.bundleType, - version: devToolsConfig$jscomp$inline_1888.version, - rendererPackageName: devToolsConfig$jscomp$inline_1888.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1888.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1908.bundleType, + version: devToolsConfig$jscomp$inline_1908.version, + rendererPackageName: devToolsConfig$jscomp$inline_1908.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1908.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -17443,14 +17960,14 @@ var devToolsConfig$jscomp$inline_1888 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1888.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1908.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-8c6367b4" + reconcilerVersion: "18.3.0-www-classic-3ac173cd" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -17539,7 +18056,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride = !1, identifierPrefix = "", onRecoverableError = defaultOnRecoverableError, - transitionCallbacks = null; + transitionCallbacks = null, + formState = null; null !== options && void 0 !== options && (!0 === options.unstable_strictMode && (isStrictMode = !0), @@ -17550,7 +18068,11 @@ exports.hydrateRoot = function (container, initialChildren, options) { void 0 !== options.onRecoverableError && (onRecoverableError = options.onRecoverableError), void 0 !== options.unstable_transitionCallbacks && - (transitionCallbacks = options.unstable_transitionCallbacks)); + (transitionCallbacks = options.unstable_transitionCallbacks), + enableAsyncActions && + enableFormActions && + void 0 !== options.formState && + (formState = options.formState)); initialChildren = createHydrationContainer( initialChildren, null, @@ -17562,7 +18084,7 @@ exports.hydrateRoot = function (container, initialChildren, options) { identifierPrefix, onRecoverableError, transitionCallbacks, - null + formState ); container[internalContainerInstanceKey] = initialChildren.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -17768,13 +18290,21 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.useFormState = function () { +exports.useFormState = function (action, initialState, permalink) { + if (enableFormActions && enableAsyncActions) + return ReactCurrentDispatcher$2.current.useFormState( + action, + initialState, + permalink + ); throw Error(formatProdErrorMessage(248)); }; exports.useFormStatus = function () { + if (enableFormActions && enableAsyncActions) + return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-classic-8c6367b4"; +exports.version = "18.3.0-www-classic-3ac173cd"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index 1b532b52ae..589609089b 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -18,8 +18,8 @@ "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error()); -var Scheduler = require("scheduler"), - React = require("react"), +var React = require("react"), + Scheduler = require("scheduler"), Internals = { usingClientEntryPoint: !1, Events: null, @@ -55,11 +55,10 @@ var assign = Object.assign, enableUnifiedSyncLane = dynamicFeatureFlags.enableUnifiedSyncLane, enableRetryLaneExpiration = dynamicFeatureFlags.enableRetryLaneExpiration, enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableDeferRootSchedulingToMicrotask = dynamicFeatureFlags.enableDeferRootSchedulingToMicrotask, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, alwaysThrottleRetries = dynamicFeatureFlags.alwaysThrottleRetries, enableDO_NOT_USE_disableStrictPassiveEffect = dynamicFeatureFlags.enableDO_NOT_USE_disableStrictPassiveEffect, @@ -75,6 +74,13 @@ var assign = Object.assign, enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler, ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, + ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher, + sharedNotPendingObject = { + pending: !1, + data: null, + method: null, + action: null + }, valueStack = [], index = -1; function createCursor(defaultValue) { @@ -119,7 +125,18 @@ function getIteratorFn(maybeIterable) { } var contextStackCursor = createCursor(null), contextFiberStackCursor = createCursor(null), - rootInstanceStackCursor = createCursor(null); + rootInstanceStackCursor = createCursor(null), + hostTransitionProviderCursor = createCursor(null), + HostTransitionContext = { + $$typeof: REACT_CONTEXT_TYPE, + _currentValue: null, + _currentValue2: null, + _threadCount: 0, + Provider: null, + Consumer: null, + _defaultValue: null, + _globalName: null + }; function pushHostContainer(fiber, nextRootInstance) { push(rootInstanceStackCursor, nextRootInstance); push(contextFiberStackCursor, fiber); @@ -163,6 +180,10 @@ function popHostContainer() { pop(rootInstanceStackCursor); } function pushHostContext(fiber) { + enableFormActions && + enableAsyncActions && + null !== fiber.memoizedState && + push(hostTransitionProviderCursor, fiber); var context = contextStackCursor.current; var JSCompiler_inline_result = getChildHostContextProd(context, fiber.type); context !== JSCompiler_inline_result && @@ -172,6 +193,11 @@ function pushHostContext(fiber) { function popHostContext(fiber) { contextFiberStackCursor.current === fiber && (pop(contextStackCursor), pop(contextFiberStackCursor)); + enableFormActions && + enableAsyncActions && + hostTransitionProviderCursor.current === fiber && + (pop(hostTransitionProviderCursor), + (HostTransitionContext._currentValue = null)); } var scheduleCallback$3 = Scheduler.unstable_scheduleCallback, cancelCallback$1 = Scheduler.unstable_cancelCallback, @@ -1733,7 +1759,7 @@ function tryHydrateSuspense(fiber, nextInstance) { nextInstance = null; break a; } - instance = getNextHydratable(instance.nextSibling); + instance = getNextHydratableSibling(instance); if (null === instance) { nextInstance = null; break a; @@ -1784,19 +1810,26 @@ function popToNextHostParent(fiber) { function popHydrationState(fiber) { if (fiber !== hydrationParentFiber) return !1; if (!isHydrating) return popToNextHostParent(fiber), (isHydrating = !0), !1; - var shouldClear = !1; - 3 === fiber.tag || - 27 === fiber.tag || - (5 === fiber.tag && - shouldSetTextContent(fiber.type, fiber.memoizedProps)) || - (shouldClear = !0); + var shouldClear = !1, + JSCompiler_temp; + if ((JSCompiler_temp = 3 !== fiber.tag && 27 !== fiber.tag)) { + if ((JSCompiler_temp = 5 === fiber.tag)) + (JSCompiler_temp = fiber.type), + (JSCompiler_temp = + !( + !enableFormActions || + ("form" !== JSCompiler_temp && "button" !== JSCompiler_temp) + ) || shouldSetTextContent(fiber.type, fiber.memoizedProps)); + JSCompiler_temp = !JSCompiler_temp; + } + JSCompiler_temp && (shouldClear = !0); if (shouldClear && (shouldClear = nextHydratableInstance)) if (shouldClientRenderOnMismatch(fiber)) warnIfUnhydratedTailNodes(), throwOnHydrationMismatch(); else for (; shouldClear; ) deleteHydratableInstance(fiber, shouldClear), - (shouldClear = getNextHydratable(shouldClear.nextSibling)); + (shouldClear = getNextHydratableSibling(shouldClear)); popToNextHostParent(fiber); if (13 === fiber.tag) { fiber = fiber.memoizedState; @@ -1805,30 +1838,31 @@ function popHydrationState(fiber) { a: { fiber = fiber.nextSibling; for (shouldClear = 0; fiber; ) { - if (8 === fiber.nodeType) { - var data = fiber.data; - if ("/$" === data) { + if (8 === fiber.nodeType) + if (((JSCompiler_temp = fiber.data), "/$" === JSCompiler_temp)) { if (0 === shouldClear) { - nextHydratableInstance = getNextHydratable(fiber.nextSibling); + nextHydratableInstance = getNextHydratableSibling(fiber); break a; } shouldClear--; } else - ("$" !== data && "$!" !== data && "$?" !== data) || shouldClear++; - } + ("$" !== JSCompiler_temp && + "$!" !== JSCompiler_temp && + "$?" !== JSCompiler_temp) || + shouldClear++; fiber = fiber.nextSibling; } nextHydratableInstance = null; } } else nextHydratableInstance = hydrationParentFiber - ? getNextHydratable(fiber.stateNode.nextSibling) + ? getNextHydratableSibling(fiber.stateNode) : null; return !0; } function warnIfUnhydratedTailNodes() { for (var nextInstance = nextHydratableInstance; nextInstance; ) - nextInstance = getNextHydratable(nextInstance.nextSibling); + nextInstance = getNextHydratableSibling(nextInstance); } function resetHydrationState() { nextHydratableInstance = hydrationParentFiber = null; @@ -3472,6 +3506,14 @@ function renderWithHooksAgain(workInProgress, Component, props, secondArg) { } while (didScheduleRenderPhaseUpdateDuringThisPass); return children; } +function TransitionAwareHostComponent() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var maybeThenable = ReactCurrentDispatcher$1.current.useState()[0]; + return "function" === typeof maybeThenable.then + ? useThenable(maybeThenable) + : maybeThenable; +} function checkDidRenderIdHook() { var didRenderIdHook = 0 !== localIdCounter; localIdCounter = 0; @@ -3875,6 +3917,186 @@ function rerenderOptimistic(passthrough, reducer) { hook.baseState = passthrough; return [passthrough, hook.queue.dispatch]; } +function dispatchFormState(fiber, actionQueue, setState, payload) { + if (isRenderPhaseUpdate(fiber)) throw Error(formatProdErrorMessage(485)); + fiber = actionQueue.pending; + null === fiber + ? ((fiber = { payload: payload, next: null }), + (fiber.next = actionQueue.pending = fiber), + runFormStateAction(actionQueue, setState, payload)) + : (actionQueue.pending = fiber.next = + { payload: payload, next: fiber.next }); +} +function runFormStateAction(actionQueue, setState, payload) { + var action = actionQueue.action, + prevState = actionQueue.state, + prevTransition = ReactCurrentBatchConfig$3.transition, + currentTransition = { _callbacks: new Set() }; + ReactCurrentBatchConfig$3.transition = currentTransition; + try { + var returnValue = action(prevState, payload); + null !== returnValue && + "object" === typeof returnValue && + "function" === typeof returnValue.then + ? (notifyTransitionCallbacks(currentTransition, returnValue), + returnValue.then( + function (nextState) { + actionQueue.state = nextState; + finishRunningFormStateAction(actionQueue, setState); + }, + function () { + return finishRunningFormStateAction(actionQueue, setState); + } + ), + setState(returnValue)) + : (setState(returnValue), + (actionQueue.state = returnValue), + finishRunningFormStateAction(actionQueue, setState)); + } catch (error) { + setState({ then: function () {}, status: "rejected", reason: error }), + finishRunningFormStateAction(actionQueue, setState); + } finally { + ReactCurrentBatchConfig$3.transition = prevTransition; + } +} +function finishRunningFormStateAction(actionQueue, setState) { + var last = actionQueue.pending; + if (null !== last) { + var first = last.next; + first === last + ? (actionQueue.pending = null) + : ((first = first.next), + (last.next = first), + runFormStateAction(actionQueue, setState, first.payload)); + } +} +function formStateReducer(oldState, newState) { + return newState; +} +function mountFormState(action, initialStateProp) { + if (isHydrating) { + var ssrFormState = workInProgressRoot.formState; + if (null !== ssrFormState) { + a: { + if (isHydrating) { + if (nextHydratableInstance) { + b: { + var JSCompiler_inline_result = nextHydratableInstance; + for ( + var inRootOrSingleton = rootOrSingletonContext; + 8 !== JSCompiler_inline_result.nodeType; + + ) { + if (!inRootOrSingleton) { + JSCompiler_inline_result = null; + break b; + } + JSCompiler_inline_result = getNextHydratableSibling( + JSCompiler_inline_result + ); + if (null === JSCompiler_inline_result) { + JSCompiler_inline_result = null; + break b; + } + } + inRootOrSingleton = JSCompiler_inline_result.data; + JSCompiler_inline_result = + "F!" === inRootOrSingleton || "F" === inRootOrSingleton + ? JSCompiler_inline_result + : null; + } + if (JSCompiler_inline_result) { + nextHydratableInstance = getNextHydratableSibling( + JSCompiler_inline_result + ); + JSCompiler_inline_result = "F!" === JSCompiler_inline_result.data; + break a; + } + } + throwOnHydrationMismatch(); + } + JSCompiler_inline_result = !1; + } + JSCompiler_inline_result && (initialStateProp = ssrFormState[0]); + } + } + ssrFormState = mountWorkInProgressHook(); + ssrFormState.memoizedState = ssrFormState.baseState = initialStateProp; + JSCompiler_inline_result = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: formStateReducer, + lastRenderedState: initialStateProp + }; + ssrFormState.queue = JSCompiler_inline_result; + ssrFormState = dispatchSetState.bind( + null, + currentlyRenderingFiber$1, + JSCompiler_inline_result + ); + JSCompiler_inline_result.dispatch = ssrFormState; + JSCompiler_inline_result = mountWorkInProgressHook(); + inRootOrSingleton = { + state: initialStateProp, + dispatch: null, + action: action, + pending: null + }; + JSCompiler_inline_result.queue = inRootOrSingleton; + ssrFormState = dispatchFormState.bind( + null, + currentlyRenderingFiber$1, + inRootOrSingleton, + ssrFormState + ); + inRootOrSingleton.dispatch = ssrFormState; + JSCompiler_inline_result.memoizedState = action; + return [initialStateProp, ssrFormState]; +} +function updateFormState(action) { + var stateHook = updateWorkInProgressHook(); + return updateFormStateImpl(stateHook, currentHook, action); +} +function updateFormStateImpl(stateHook, currentStateHook, action) { + stateHook = updateReducerImpl( + stateHook, + currentStateHook, + formStateReducer + )[0]; + stateHook = + "object" === typeof stateHook && + null !== stateHook && + "function" === typeof stateHook.then + ? useThenable(stateHook) + : stateHook; + currentStateHook = updateWorkInProgressHook(); + var actionQueue = currentStateHook.queue, + dispatch = actionQueue.dispatch; + action !== currentStateHook.memoizedState && + ((currentlyRenderingFiber$1.flags |= 2048), + pushEffect( + 9, + formStateActionEffect.bind(null, actionQueue, action), + { destroy: void 0 }, + null + )); + return [stateHook, dispatch]; +} +function formStateActionEffect(actionQueue, action) { + actionQueue.action = action; +} +function rerenderFormState(action) { + var stateHook = updateWorkInProgressHook(), + currentStateHook = currentHook; + if (null !== currentStateHook) + return updateFormStateImpl(stateHook, currentStateHook, action); + stateHook = stateHook.memoizedState; + currentStateHook = updateWorkInProgressHook(); + var dispatch = currentStateHook.queue.dispatch; + currentStateHook.memoizedState = action; + return [stateHook, dispatch]; +} function pushEffect(tag, create, inst, deps) { tag = { tag: tag, create: create, inst: inst, deps: deps, next: null }; create = currentlyRenderingFiber$1.updateQueue; @@ -4071,6 +4293,47 @@ function startTransition( (ReactCurrentBatchConfig$3.transition = prevTransition); } } +function startHostTransition(formFiber, pendingState, callback, formData) { + if (enableFormActions) + if (enableAsyncActions) { + if (5 !== formFiber.tag) throw Error(formatProdErrorMessage(476)); + if (null === formFiber.memoizedState) { + var newQueue = { + pending: null, + lanes: 0, + dispatch: null, + lastRenderedReducer: basicStateReducer, + lastRenderedState: sharedNotPendingObject + }; + var queue = newQueue; + newQueue = { + memoizedState: sharedNotPendingObject, + baseState: sharedNotPendingObject, + baseQueue: null, + queue: newQueue, + next: null + }; + formFiber.memoizedState = newQueue; + var alternate = formFiber.alternate; + null !== alternate && (alternate.memoizedState = newQueue); + } else queue = formFiber.memoizedState.queue; + startTransition( + formFiber, + queue, + pendingState, + sharedNotPendingObject, + function () { + return callback(formData); + } + ); + } else callback(formData); +} +function useHostTransitionStatus() { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + var status = readContext(HostTransitionContext); + return null !== status ? status : sharedNotPendingObject; +} function updateId() { return updateWorkInProgressHook().memoizedState; } @@ -4084,14 +4347,14 @@ function refreshCache(fiber, seedKey, seedValue) { case 3: var lane = requestUpdateLane(provider); fiber = createUpdate(lane); - var root$62 = enqueueUpdate(provider, fiber, lane); - null !== root$62 && - (scheduleUpdateOnFiber(root$62, provider, lane), - entangleTransitions(root$62, provider, lane)); + var root$65 = enqueueUpdate(provider, fiber, lane); + null !== root$65 && + (scheduleUpdateOnFiber(root$65, provider, lane), + entangleTransitions(root$65, provider, lane)); provider = createCache(); null !== seedKey && void 0 !== seedKey && - null !== root$62 && + null !== root$65 && provider.data.set(seedKey, seedValue); fiber.payload = { cache: provider }; return; @@ -4225,6 +4488,10 @@ var ContextOnlyDispatcher = { ContextOnlyDispatcher.useCacheRefresh = throwInvalidHookError; ContextOnlyDispatcher.useMemoCache = throwInvalidHookError; ContextOnlyDispatcher.useEffectEvent = throwInvalidHookError; +enableFormActions && + enableAsyncActions && + ((ContextOnlyDispatcher.useHostTransitionStatus = throwInvalidHookError), + (ContextOnlyDispatcher.useFormState = throwInvalidHookError)); enableAsyncActions && (ContextOnlyDispatcher.useOptimistic = throwInvalidHookError); var HooksDispatcherOnMount = { @@ -4393,6 +4660,10 @@ HooksDispatcherOnMount.useEffectEvent = function (callback) { return ref.impl.apply(void 0, arguments); }; }; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnMount.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnMount.useFormState = mountFormState)); enableAsyncActions && (HooksDispatcherOnMount.useOptimistic = mountOptimistic); var HooksDispatcherOnUpdate = { readContext: readContext, @@ -4435,6 +4706,10 @@ var HooksDispatcherOnUpdate = { HooksDispatcherOnUpdate.useCacheRefresh = updateRefresh; HooksDispatcherOnUpdate.useMemoCache = useMemoCache; HooksDispatcherOnUpdate.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnUpdate.useHostTransitionStatus = useHostTransitionStatus), + (HooksDispatcherOnUpdate.useFormState = updateFormState)); enableAsyncActions && (HooksDispatcherOnUpdate.useOptimistic = updateOptimistic); var HooksDispatcherOnRerender = { @@ -4480,6 +4755,11 @@ var HooksDispatcherOnRerender = { HooksDispatcherOnRerender.useCacheRefresh = updateRefresh; HooksDispatcherOnRerender.useMemoCache = useMemoCache; HooksDispatcherOnRerender.useEffectEvent = updateEvent; +enableFormActions && + enableAsyncActions && + ((HooksDispatcherOnRerender.useHostTransitionStatus = + useHostTransitionStatus), + (HooksDispatcherOnRerender.useFormState = rerenderFormState)); enableAsyncActions && (HooksDispatcherOnRerender.useOptimistic = rerenderOptimistic); var now = Scheduler.unstable_now, @@ -5082,10 +5362,10 @@ var markerInstanceStack = createCursor(null); function pushRootMarkerInstance(workInProgress) { if (enableTransitionTracing) { var transitions = workInProgressTransitions, - root$74 = workInProgress.stateNode; + root$77 = workInProgress.stateNode; null !== transitions && transitions.forEach(function (transition) { - if (!root$74.incompleteTransitions.has(transition)) { + if (!root$77.incompleteTransitions.has(transition)) { var markerInstance = { tag: 0, transitions: new Set([transition]), @@ -5093,11 +5373,11 @@ function pushRootMarkerInstance(workInProgress) { aborts: null, name: null }; - root$74.incompleteTransitions.set(transition, markerInstance); + root$77.incompleteTransitions.set(transition, markerInstance); } }); var markerInstances = []; - root$74.incompleteTransitions.forEach(function (markerInstance) { + root$77.incompleteTransitions.forEach(function (markerInstance) { markerInstances.push(markerInstance); }); push(markerInstanceStack, markerInstances); @@ -5697,7 +5977,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { else if (!tryHydrateSuspense(workInProgress, nextInstance)) { shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(); - nextHydratableInstance = getNextHydratable(nextInstance.nextSibling); + nextHydratableInstance = getNextHydratableSibling(nextInstance); var prevHydrationParentFiber = hydrationParentFiber; nextHydratableInstance && tryHydrateSuspense(workInProgress, nextHydratableInstance) @@ -6605,6 +6885,18 @@ function propagateParentContextChanges( objectIs(parent.pendingProps.value, currentParent.value) || (null !== current ? current.push(context) : (current = [context])); } + } else if ( + enableFormActions && + enableAsyncActions && + parent === hostTransitionProviderCursor.current + ) { + currentParent = parent.alternate; + if (null === currentParent) throw Error(formatProdErrorMessage(387)); + currentParent.memoizedState.memoizedState !== + parent.memoizedState.memoizedState && + (null !== current + ? current.push(HostTransitionContext) + : (current = [HostTransitionContext])); } parent = parent.return; } @@ -6910,14 +7202,14 @@ function cutOffTailIfNeeded(renderState, hasRenderedATailFallback) { break; case "collapsed": lastTailNode = renderState.tail; - for (var lastTailNode$113 = null; null !== lastTailNode; ) - null !== lastTailNode.alternate && (lastTailNode$113 = lastTailNode), + for (var lastTailNode$117 = null; null !== lastTailNode; ) + null !== lastTailNode.alternate && (lastTailNode$117 = lastTailNode), (lastTailNode = lastTailNode.sibling); - null === lastTailNode$113 + null === lastTailNode$117 ? hasRenderedATailFallback || null === renderState.tail ? (renderState.tail = null) : (renderState.tail.sibling = null) - : (lastTailNode$113.sibling = null); + : (lastTailNode$117.sibling = null); } } function bubbleProperties(completedWork) { @@ -6929,53 +7221,53 @@ function bubbleProperties(completedWork) { if (didBailout) if (0 !== (completedWork.mode & 2)) { for ( - var treeBaseDuration$115 = completedWork.selfBaseDuration, - child$116 = completedWork.child; - null !== child$116; + var treeBaseDuration$119 = completedWork.selfBaseDuration, + child$120 = completedWork.child; + null !== child$120; ) - (newChildLanes |= child$116.lanes | child$116.childLanes), - (subtreeFlags |= child$116.subtreeFlags & 31457280), - (subtreeFlags |= child$116.flags & 31457280), - (treeBaseDuration$115 += child$116.treeBaseDuration), - (child$116 = child$116.sibling); - completedWork.treeBaseDuration = treeBaseDuration$115; + (newChildLanes |= child$120.lanes | child$120.childLanes), + (subtreeFlags |= child$120.subtreeFlags & 31457280), + (subtreeFlags |= child$120.flags & 31457280), + (treeBaseDuration$119 += child$120.treeBaseDuration), + (child$120 = child$120.sibling); + completedWork.treeBaseDuration = treeBaseDuration$119; } else for ( - treeBaseDuration$115 = completedWork.child; - null !== treeBaseDuration$115; + treeBaseDuration$119 = completedWork.child; + null !== treeBaseDuration$119; ) (newChildLanes |= - treeBaseDuration$115.lanes | treeBaseDuration$115.childLanes), - (subtreeFlags |= treeBaseDuration$115.subtreeFlags & 31457280), - (subtreeFlags |= treeBaseDuration$115.flags & 31457280), - (treeBaseDuration$115.return = completedWork), - (treeBaseDuration$115 = treeBaseDuration$115.sibling); + treeBaseDuration$119.lanes | treeBaseDuration$119.childLanes), + (subtreeFlags |= treeBaseDuration$119.subtreeFlags & 31457280), + (subtreeFlags |= treeBaseDuration$119.flags & 31457280), + (treeBaseDuration$119.return = completedWork), + (treeBaseDuration$119 = treeBaseDuration$119.sibling); else if (0 !== (completedWork.mode & 2)) { - treeBaseDuration$115 = completedWork.actualDuration; - child$116 = completedWork.selfBaseDuration; + treeBaseDuration$119 = completedWork.actualDuration; + child$120 = completedWork.selfBaseDuration; for (var child = completedWork.child; null !== child; ) (newChildLanes |= child.lanes | child.childLanes), (subtreeFlags |= child.subtreeFlags), (subtreeFlags |= child.flags), - (treeBaseDuration$115 += child.actualDuration), - (child$116 += child.treeBaseDuration), + (treeBaseDuration$119 += child.actualDuration), + (child$120 += child.treeBaseDuration), (child = child.sibling); - completedWork.actualDuration = treeBaseDuration$115; - completedWork.treeBaseDuration = child$116; + completedWork.actualDuration = treeBaseDuration$119; + completedWork.treeBaseDuration = child$120; } else for ( - treeBaseDuration$115 = completedWork.child; - null !== treeBaseDuration$115; + treeBaseDuration$119 = completedWork.child; + null !== treeBaseDuration$119; ) (newChildLanes |= - treeBaseDuration$115.lanes | treeBaseDuration$115.childLanes), - (subtreeFlags |= treeBaseDuration$115.subtreeFlags), - (subtreeFlags |= treeBaseDuration$115.flags), - (treeBaseDuration$115.return = completedWork), - (treeBaseDuration$115 = treeBaseDuration$115.sibling); + treeBaseDuration$119.lanes | treeBaseDuration$119.childLanes), + (subtreeFlags |= treeBaseDuration$119.subtreeFlags), + (subtreeFlags |= treeBaseDuration$119.flags), + (treeBaseDuration$119.return = completedWork), + (treeBaseDuration$119 = treeBaseDuration$119.sibling); completedWork.subtreeFlags |= subtreeFlags; completedWork.childLanes = newChildLanes; return didBailout; @@ -7332,11 +7624,11 @@ function completeWork(current, workInProgress, renderLanes) { null !== newProps.alternate.memoizedState && null !== newProps.alternate.memoizedState.cachePool && (currentResource = newProps.alternate.memoizedState.cachePool.pool); - var cache$131 = null; + var cache$135 = null; null !== newProps.memoizedState && null !== newProps.memoizedState.cachePool && - (cache$131 = newProps.memoizedState.cachePool.pool); - cache$131 !== currentResource && (newProps.flags |= 2048); + (cache$135 = newProps.memoizedState.cachePool.pool); + cache$135 !== currentResource && (newProps.flags |= 2048); } renderLanes !== current && (enableTransitionTracing && (workInProgress.child.flags |= 2048), @@ -7374,8 +7666,8 @@ function completeWork(current, workInProgress, renderLanes) { if (null === currentResource) return bubbleProperties(workInProgress), null; newProps = 0 !== (workInProgress.flags & 128); - cache$131 = currentResource.rendering; - if (null === cache$131) + cache$135 = currentResource.rendering; + if (null === cache$135) if (newProps) cutOffTailIfNeeded(currentResource, !1); else { if ( @@ -7383,11 +7675,11 @@ function completeWork(current, workInProgress, renderLanes) { (null !== current && 0 !== (current.flags & 128)) ) for (current = workInProgress.child; null !== current; ) { - cache$131 = findFirstSuspended(current); - if (null !== cache$131) { + cache$135 = findFirstSuspended(current); + if (null !== cache$135) { workInProgress.flags |= 128; cutOffTailIfNeeded(currentResource, !1); - current = cache$131.updateQueue; + current = cache$135.updateQueue; workInProgress.updateQueue = current; scheduleRetryEffect(workInProgress, current); workInProgress.subtreeFlags = 0; @@ -7412,7 +7704,7 @@ function completeWork(current, workInProgress, renderLanes) { } else { if (!newProps) - if (((current = findFirstSuspended(cache$131)), null !== current)) { + if (((current = findFirstSuspended(cache$135)), null !== current)) { if ( ((workInProgress.flags |= 128), (newProps = !0), @@ -7422,7 +7714,7 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(currentResource, !0), null === currentResource.tail && "hidden" === currentResource.tailMode && - !cache$131.alternate && + !cache$135.alternate && !isHydrating) ) return bubbleProperties(workInProgress), null; @@ -7435,13 +7727,13 @@ function completeWork(current, workInProgress, renderLanes) { cutOffTailIfNeeded(currentResource, !1), (workInProgress.lanes = 4194304)); currentResource.isBackwards - ? ((cache$131.sibling = workInProgress.child), - (workInProgress.child = cache$131)) + ? ((cache$135.sibling = workInProgress.child), + (workInProgress.child = cache$135)) : ((current = currentResource.last), null !== current - ? (current.sibling = cache$131) - : (workInProgress.child = cache$131), - (currentResource.last = cache$131)); + ? (current.sibling = cache$135) + : (workInProgress.child = cache$135), + (currentResource.last = cache$135)); } if (null !== currentResource.tail) return ( @@ -7774,8 +8066,8 @@ function safelyDetachRef(current, nearestMountedAncestor) { recordLayoutEffectDuration(current); } else ref(null); - } catch (error$148) { - captureCommitPhaseError(current, nearestMountedAncestor, error$148); + } catch (error$152) { + captureCommitPhaseError(current, nearestMountedAncestor, error$152); } else ref.current = null; } @@ -7812,7 +8104,7 @@ function commitBeforeMutationEffects(root, firstChild) { selection = selection.focusOffset; try { JSCompiler_temp.nodeType, focusNode.nodeType; - } catch (e$213) { + } catch (e$219) { JSCompiler_temp = null; break a; } @@ -8082,11 +8374,11 @@ function commitPassiveEffectDurations(finishedRoot, finishedWork) { var _finishedWork$memoize = finishedWork.memoizedProps, id = _finishedWork$memoize.id; _finishedWork$memoize = _finishedWork$memoize.onPostCommit; - var commitTime$150 = commitTime, + var commitTime$154 = commitTime, phase = null === finishedWork.alternate ? "mount" : "update"; currentUpdateIsNested && (phase = "nested-update"); "function" === typeof _finishedWork$memoize && - _finishedWork$memoize(id, phase, finishedRoot, commitTime$150); + _finishedWork$memoize(id, phase, finishedRoot, commitTime$154); finishedWork = finishedWork.return; a: for (; null !== finishedWork; ) { switch (finishedWork.tag) { @@ -8113,8 +8405,8 @@ function commitHookLayoutEffects(finishedWork, hookFlags) { } else try { commitHookEffectListMount(hookFlags, finishedWork); - } catch (error$152) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$152); + } catch (error$156) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$156); } } function commitClassCallbacks(finishedWork) { @@ -8213,11 +8505,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { } else try { finishedRoot.componentDidMount(); - } catch (error$153) { + } catch (error$157) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$153 + error$157 ); } else { @@ -8234,11 +8526,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$154) { + } catch (error$158) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$154 + error$158 ); } recordLayoutEffectDuration(finishedWork); @@ -8249,11 +8541,11 @@ function commitLayoutEffectOnFiber(finishedRoot, current, finishedWork) { current, finishedRoot.__reactInternalSnapshotBeforeUpdate ); - } catch (error$155) { + } catch (error$159) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$155 + error$159 ); } } @@ -8959,22 +9251,22 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { startLayoutEffectTimer(), commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$170) { + } catch (error$174) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$170 + error$174 ); } recordLayoutEffectDuration(finishedWork); } else try { commitHookEffectListUnmount(5, finishedWork, finishedWork.return); - } catch (error$171) { + } catch (error$175) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$171 + error$175 ); } } @@ -9147,11 +9439,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { newProps ); domElement[internalPropsKey] = newProps; - } catch (error$172) { + } catch (error$176) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$172 + error$176 ); } } @@ -9189,8 +9481,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { root = finishedWork.stateNode; try { setTextContent(root, ""); - } catch (error$173) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$173); + } catch (error$177) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$177); } } if (flags & 4 && ((flags = finishedWork.stateNode), null != flags)) { @@ -9201,8 +9493,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { try { updateProperties(flags, hoistableRoot, current, root), (flags[internalPropsKey] = root); - } catch (error$176) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$176); + } catch (error$180) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$180); } } break; @@ -9216,8 +9508,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { flags = finishedWork.memoizedProps; try { current.nodeValue = flags; - } catch (error$177) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$177); + } catch (error$181) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$181); } } break; @@ -9231,8 +9523,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (flags & 4 && null !== current && current.memoizedState.isDehydrated) try { retryIfBlockedOn(root.containerInfo); - } catch (error$178) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$178); + } catch (error$182) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$182); } break; case 4: @@ -9262,8 +9554,8 @@ function commitMutationEffectsOnFiber(finishedWork, root) { null !== retryQueue && suspenseCallback(new Set(retryQueue)); } } - } catch (error$180) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$180); + } catch (error$184) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$184); } current = finishedWork.updateQueue; null !== current && @@ -9341,11 +9633,11 @@ function commitMutationEffectsOnFiber(finishedWork, root) { if (null === current) try { root.stateNode.nodeValue = domElement ? "" : root.memoizedProps; - } catch (error$160) { + } catch (error$164) { captureCommitPhaseError( finishedWork, finishedWork.return, - error$160 + error$164 ); } } else if ( @@ -9420,21 +9712,21 @@ function commitReconciliationEffects(finishedWork) { insertOrAppendPlacementNode(finishedWork, before, parent$jscomp$0); break; case 5: - var parent$161 = JSCompiler_inline_result.stateNode; + var parent$165 = JSCompiler_inline_result.stateNode; JSCompiler_inline_result.flags & 32 && - (setTextContent(parent$161, ""), + (setTextContent(parent$165, ""), (JSCompiler_inline_result.flags &= -33)); - var before$162 = getHostSibling(finishedWork); - insertOrAppendPlacementNode(finishedWork, before$162, parent$161); + var before$166 = getHostSibling(finishedWork); + insertOrAppendPlacementNode(finishedWork, before$166, parent$165); break; case 3: case 4: - var parent$163 = JSCompiler_inline_result.stateNode.containerInfo, - before$164 = getHostSibling(finishedWork); + var parent$167 = JSCompiler_inline_result.stateNode.containerInfo, + before$168 = getHostSibling(finishedWork); insertOrAppendPlacementNodeIntoContainer( finishedWork, - before$164, - parent$163 + before$168, + parent$167 ); break; default: @@ -9626,8 +9918,8 @@ function commitHookPassiveMountEffects(finishedWork, hookFlags) { } else try { commitHookEffectListMount(hookFlags, finishedWork); - } catch (error$183) { - captureCommitPhaseError(finishedWork, finishedWork.return, error$183); + } catch (error$187) { + captureCommitPhaseError(finishedWork, finishedWork.return, error$187); } } function commitOffscreenPassiveMountEffects(current, finishedWork, instance) { @@ -9926,9 +10218,9 @@ function recursivelyTraverseReconnectPassiveEffects( ); break; case 22: - var instance$188 = finishedWork.stateNode; + var instance$192 = finishedWork.stateNode; null !== finishedWork.memoizedState - ? instance$188._visibility & 4 + ? instance$192._visibility & 4 ? recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9941,7 +10233,7 @@ function recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork ) - : ((instance$188._visibility |= 4), + : ((instance$192._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9949,7 +10241,7 @@ function recursivelyTraverseReconnectPassiveEffects( committedTransitions, includeWorkInProgressEffects )) - : ((instance$188._visibility |= 4), + : ((instance$192._visibility |= 4), recursivelyTraverseReconnectPassiveEffects( finishedRoot, finishedWork, @@ -9962,7 +10254,7 @@ function recursivelyTraverseReconnectPassiveEffects( commitOffscreenPassiveMountEffects( finishedWork.alternate, finishedWork, - instance$188 + instance$192 ); break; case 24: @@ -10954,8 +11246,8 @@ function renderRootSync(root, lanes) { } workLoopSync(); break; - } catch (thrownValue$196) { - handleThrow(root, thrownValue$196); + } catch (thrownValue$200) { + handleThrow(root, thrownValue$200); } while (1); lanes && root.shellSuspendCounter++; @@ -11071,8 +11363,8 @@ function renderRootConcurrent(root, lanes) { } workLoopConcurrent(); break; - } catch (thrownValue$198) { - handleThrow(root, thrownValue$198); + } catch (thrownValue$202) { + handleThrow(root, thrownValue$202); } while (1); resetContextDependencies(); @@ -11316,7 +11608,7 @@ function commitRootImpl( var prevExecutionContext = executionContext; executionContext |= 4; ReactCurrentOwner.current = null; - var shouldFireAfterActiveInstanceBlur$202 = commitBeforeMutationEffects( + var shouldFireAfterActiveInstanceBlur$206 = commitBeforeMutationEffects( root, finishedWork ); @@ -11324,7 +11616,7 @@ function commitRootImpl( enableProfilerNestedUpdateScheduledHook && (rootCommittingMutationOrLayoutEffects = root); commitMutationEffects(root, finishedWork, lanes); - shouldFireAfterActiveInstanceBlur$202 && + shouldFireAfterActiveInstanceBlur$206 && ((_enabled = !0), dispatchAfterDetachedBlur(selectionInformation.focusedElem), (_enabled = !1)); @@ -11418,7 +11710,7 @@ function releaseRootPooledCache(root, remainingLanes) { } function flushPassiveEffects() { if (null !== rootWithPendingPassiveEffects) { - var root$203 = rootWithPendingPassiveEffects, + var root$207 = rootWithPendingPassiveEffects, remainingLanes = pendingPassiveEffectsRemainingLanes; pendingPassiveEffectsRemainingLanes = 0; var renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes); @@ -11434,7 +11726,7 @@ function flushPassiveEffects() { } finally { (currentUpdatePriority = previousPriority), (ReactCurrentBatchConfig$1.transition = prevTransition), - releaseRootPooledCache(root$203, remainingLanes); + releaseRootPooledCache(root$207, remainingLanes); } } return !1; @@ -11893,45 +12185,69 @@ beginWork = function (current, workInProgress, renderLanes) { workInProgress.child ); case 5: - return ( - pushHostContext(workInProgress), - null === current && - isHydrating && - (((init = Component = nextHydratableInstance), init) - ? tryHydrateInstance(workInProgress, init) || - (shouldClientRenderOnMismatch(workInProgress) && - throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable(init.nextSibling)), - (prevState = hydrationParentFiber), - nextHydratableInstance && - tryHydrateInstance(workInProgress, nextHydratableInstance) - ? deleteHydratableInstance(prevState, init) - : (insertNonHydratedInstance( - hydrationParentFiber, - workInProgress - ), - (isHydrating = !1), - (hydrationParentFiber = workInProgress), - (nextHydratableInstance = Component))) - : (shouldClientRenderOnMismatch(workInProgress) && - throwOnHydrationMismatch(), - insertNonHydratedInstance(hydrationParentFiber, workInProgress), - (isHydrating = !1), - (hydrationParentFiber = workInProgress), - (nextHydratableInstance = Component))), - (Component = workInProgress.type), - (init = workInProgress.pendingProps), - (prevState = null !== current ? current.memoizedProps : null), - (nextState = init.children), - shouldSetTextContent(Component, init) - ? (nextState = null) - : null !== prevState && - shouldSetTextContent(Component, prevState) && - (workInProgress.flags |= 32), - markRef$1(current, workInProgress), - reconcileChildren(current, workInProgress, nextState, renderLanes), - workInProgress.child - ); + pushHostContext(workInProgress); + null === current && + isHydrating && + (((init = Component = nextHydratableInstance), init) + ? tryHydrateInstance(workInProgress, init) || + (shouldClientRenderOnMismatch(workInProgress) && + throwOnHydrationMismatch(), + (nextHydratableInstance = getNextHydratableSibling(init)), + (prevState = hydrationParentFiber), + nextHydratableInstance && + tryHydrateInstance(workInProgress, nextHydratableInstance) + ? deleteHydratableInstance(prevState, init) + : (insertNonHydratedInstance( + hydrationParentFiber, + workInProgress + ), + (isHydrating = !1), + (hydrationParentFiber = workInProgress), + (nextHydratableInstance = Component))) + : (shouldClientRenderOnMismatch(workInProgress) && + throwOnHydrationMismatch(), + insertNonHydratedInstance(hydrationParentFiber, workInProgress), + (isHydrating = !1), + (hydrationParentFiber = workInProgress), + (nextHydratableInstance = Component))); + init = workInProgress.type; + prevState = workInProgress.pendingProps; + nextState = null !== current ? current.memoizedProps : null; + Component = prevState.children; + shouldSetTextContent(init, prevState) + ? (Component = null) + : null !== nextState && + shouldSetTextContent(init, nextState) && + (workInProgress.flags |= 32); + if ( + enableFormActions && + enableAsyncActions && + null !== workInProgress.memoizedState + ) { + if (!enableFormActions || !enableAsyncActions) + throw Error(formatProdErrorMessage(248)); + init = renderWithHooks( + current, + workInProgress, + TransitionAwareHostComponent, + null, + null, + renderLanes + ); + HostTransitionContext._currentValue = init; + enableLazyContextPropagation || + (didReceiveUpdate && + null !== current && + current.memoizedState.memoizedState !== init && + propagateContextChange( + workInProgress, + HostTransitionContext, + renderLanes + )); + } + markRef$1(current, workInProgress); + reconcileChildren(current, workInProgress, Component, renderLanes); + return workInProgress.child; case 6: return ( null === current && @@ -11942,7 +12258,7 @@ beginWork = function (current, workInProgress, renderLanes) { ? tryHydrateText(workInProgress, current) || (shouldClientRenderOnMismatch(workInProgress) && throwOnHydrationMismatch(), - (nextHydratableInstance = getNextHydratable(current.nextSibling)), + (nextHydratableInstance = getNextHydratableSibling(current)), (Component = hydrationParentFiber), nextHydratableInstance && tryHydrateText(workInProgress, nextHydratableInstance) @@ -12655,12 +12971,12 @@ function updateContainer(element, container, parentComponent, callback) { function attemptSynchronousHydration(fiber) { switch (fiber.tag) { case 3: - var root$206 = fiber.stateNode; - if (root$206.current.memoizedState.isDehydrated) { - var lanes = getHighestPriorityLanes(root$206.pendingLanes); + var root$210 = fiber.stateNode; + if (root$210.current.memoizedState.isDehydrated) { + var lanes = getHighestPriorityLanes(root$210.pendingLanes); 0 !== lanes && - (upgradePendingLanesToSync(root$206, lanes), - ensureRootIsScheduled(root$206), + (upgradePendingLanesToSync(root$210, lanes), + ensureRootIsScheduled(root$210), 0 === (executionContext & 6) && ((workInProgressRootRenderTargetTime = now$1() + 500), flushSyncWorkAcrossRoots_impl(!1))); @@ -13060,8 +13376,71 @@ var KeyboardEventInterface = assign({}, UIEventInterface, { deltaZ: 0, deltaMode: 0 }), - SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface), - hasScheduledReplayAttempt = !1, + SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface); +function extractEvents$6( + dispatchQueue, + domEventName, + maybeTargetInst, + nativeEvent, + nativeEventTarget +) { + if ( + "submit" === domEventName && + maybeTargetInst && + maybeTargetInst.stateNode === nativeEventTarget + ) { + var action = getFiberCurrentPropsFromNode(nativeEventTarget).action, + submitter = nativeEvent.submitter; + submitter && + ((domEventName = (domEventName = getFiberCurrentPropsFromNode(submitter)) + ? domEventName.formAction + : submitter.getAttribute("formAction")), + null != domEventName && ((action = domEventName), (submitter = null))); + if ("function" === typeof action) { + var event = new SyntheticEvent( + "action", + "action", + null, + nativeEvent, + nativeEventTarget + ); + dispatchQueue.push({ + event: event, + listeners: [ + { + instance: null, + listener: function () { + if (!nativeEvent.defaultPrevented) { + event.preventDefault(); + if (submitter) { + var temp = submitter.ownerDocument.createElement("input"); + temp.name = submitter.name; + temp.value = submitter.value; + submitter.parentNode.insertBefore(temp, submitter); + var formData = new FormData(nativeEventTarget); + temp.parentNode.removeChild(temp); + } else formData = new FormData(nativeEventTarget); + startHostTransition( + maybeTargetInst, + { + pending: !0, + data: formData, + method: nativeEventTarget.method, + action: action + }, + action, + formData + ); + } + }, + currentTarget: nativeEventTarget + } + ] + }); + } + } +} +var hasScheduledReplayAttempt = !1, queuedFocus = null, queuedDrag = null, queuedMouse = null, @@ -13295,6 +13674,42 @@ function scheduleCallbackIfUnblocked(queuedEvent, unblocked) { replayUnblockedEvents ))); } +var lastScheduledReplayQueue = null; +function scheduleReplayQueueIfNeeded(formReplayingQueue) { + lastScheduledReplayQueue !== formReplayingQueue && + ((lastScheduledReplayQueue = formReplayingQueue), + Scheduler.unstable_scheduleCallback( + Scheduler.unstable_NormalPriority, + function () { + lastScheduledReplayQueue === formReplayingQueue && + (lastScheduledReplayQueue = null); + for (var i = 0; i < formReplayingQueue.length; i += 3) { + var form = formReplayingQueue[i], + submitterOrAction = formReplayingQueue[i + 1], + formData = formReplayingQueue[i + 2]; + if ("function" !== typeof submitterOrAction) + if (null === findInstanceBlockingTarget(submitterOrAction || form)) + continue; + else break; + var formInst = getInstanceFromNode$1(form); + null !== formInst && + (formReplayingQueue.splice(i, 3), + (i -= 3), + startHostTransition( + formInst, + { + pending: !0, + data: formData, + method: form.method, + action: submitterOrAction + }, + submitterOrAction, + formData + )); + } + } + )); +} function retryIfBlockedOn(unblocked) { function unblock(queuedEvent) { return scheduleCallbackIfUnblocked(queuedEvent, unblocked); @@ -13316,6 +13731,34 @@ function retryIfBlockedOn(unblocked) { ) attemptExplicitHydrationTarget(i), null === i.blockedOn && queuedExplicitHydrationTargets.shift(); + if ( + enableFormActions && + ((i = unblocked.getRootNode().$$reactFormReplay), null != i) + ) + for (queuedTarget = 0; queuedTarget < i.length; queuedTarget += 3) { + var form = i[queuedTarget], + submitterOrAction = i[queuedTarget + 1], + formProps = getFiberCurrentPropsFromNode(form); + if ("function" === typeof submitterOrAction) + formProps || scheduleReplayQueueIfNeeded(i); + else if (formProps) { + var action = null; + if (submitterOrAction && submitterOrAction.hasAttribute("formAction")) + if ( + ((form = submitterOrAction), + (formProps = getFiberCurrentPropsFromNode(submitterOrAction))) + ) + action = formProps.formAction; + else { + if (null !== findInstanceBlockingTarget(form)) continue; + } + else action = formProps.action; + "function" === typeof action + ? (i[queuedTarget + 1] = action) + : (i.splice(queuedTarget, 3), (queuedTarget -= 3)); + scheduleReplayQueueIfNeeded(i); + } + } } var ReactCurrentBatchConfig = ReactSharedInternals.ReactCurrentBatchConfig, _enabled = !0; @@ -13435,36 +13878,33 @@ function dispatchEvent( } function findInstanceBlockingEvent(nativeEvent) { nativeEvent = getEventTarget(nativeEvent); - a: { - return_targetInst = null; - nativeEvent = getClosestInstanceFromNode(nativeEvent); - if (null !== nativeEvent) { - var nearestMounted = getNearestMountedFiber(nativeEvent); - if (null === nearestMounted) nativeEvent = null; - else { - var tag = nearestMounted.tag; - if (13 === tag) { - nativeEvent = getSuspenseInstanceFromFiber(nearestMounted); - if (null !== nativeEvent) break a; - nativeEvent = null; - } else if (3 === tag) { - if (nearestMounted.stateNode.current.memoizedState.isDehydrated) { - nativeEvent = - 3 === nearestMounted.tag - ? nearestMounted.stateNode.containerInfo - : null; - break a; - } - nativeEvent = null; - } else nearestMounted !== nativeEvent && (nativeEvent = null); - } - } - return_targetInst = nativeEvent; - nativeEvent = null; - } - return nativeEvent; + return findInstanceBlockingTarget(nativeEvent); } var return_targetInst = null; +function findInstanceBlockingTarget(targetNode) { + return_targetInst = null; + targetNode = getClosestInstanceFromNode(targetNode); + if (null !== targetNode) { + var nearestMounted = getNearestMountedFiber(targetNode); + if (null === nearestMounted) targetNode = null; + else { + var tag = nearestMounted.tag; + if (13 === tag) { + targetNode = getSuspenseInstanceFromFiber(nearestMounted); + if (null !== targetNode) return targetNode; + targetNode = null; + } else if (3 === tag) { + if (nearestMounted.stateNode.current.memoizedState.isDehydrated) + return 3 === nearestMounted.tag + ? nearestMounted.stateNode.containerInfo + : null; + targetNode = null; + } else nearestMounted !== targetNode && (targetNode = null); + } + } + return_targetInst = targetNode; + return null; +} function getEventPriority(domEventName) { switch (domEventName) { case "cancel": @@ -13750,19 +14190,19 @@ function getTargetInstForChangeEvent(domEventName, targetInst) { } var isInputEventSupported = !1; if (canUseDOM) { - var JSCompiler_inline_result$jscomp$364; + var JSCompiler_inline_result$jscomp$371; if (canUseDOM) { - var isSupported$jscomp$inline_1620 = "oninput" in document; - if (!isSupported$jscomp$inline_1620) { - var element$jscomp$inline_1621 = document.createElement("div"); - element$jscomp$inline_1621.setAttribute("oninput", "return;"); - isSupported$jscomp$inline_1620 = - "function" === typeof element$jscomp$inline_1621.oninput; + var isSupported$jscomp$inline_1640 = "oninput" in document; + if (!isSupported$jscomp$inline_1640) { + var element$jscomp$inline_1641 = document.createElement("div"); + element$jscomp$inline_1641.setAttribute("oninput", "return;"); + isSupported$jscomp$inline_1640 = + "function" === typeof element$jscomp$inline_1641.oninput; } - JSCompiler_inline_result$jscomp$364 = isSupported$jscomp$inline_1620; - } else JSCompiler_inline_result$jscomp$364 = !1; + JSCompiler_inline_result$jscomp$371 = isSupported$jscomp$inline_1640; + } else JSCompiler_inline_result$jscomp$371 = !1; isInputEventSupported = - JSCompiler_inline_result$jscomp$364 && + JSCompiler_inline_result$jscomp$371 && (!document.documentMode || 9 < document.documentMode); } function stopWatchingForValueChange() { @@ -14071,20 +14511,20 @@ function registerSimpleEvent(domEventName, reactName) { registerTwoPhaseEvent(reactName, [domEventName]); } for ( - var i$jscomp$inline_1661 = 0; - i$jscomp$inline_1661 < simpleEventPluginEvents.length; - i$jscomp$inline_1661++ + var i$jscomp$inline_1681 = 0; + i$jscomp$inline_1681 < simpleEventPluginEvents.length; + i$jscomp$inline_1681++ ) { - var eventName$jscomp$inline_1662 = - simpleEventPluginEvents[i$jscomp$inline_1661], - domEventName$jscomp$inline_1663 = - eventName$jscomp$inline_1662.toLowerCase(), - capitalizedEvent$jscomp$inline_1664 = - eventName$jscomp$inline_1662[0].toUpperCase() + - eventName$jscomp$inline_1662.slice(1); + var eventName$jscomp$inline_1682 = + simpleEventPluginEvents[i$jscomp$inline_1681], + domEventName$jscomp$inline_1683 = + eventName$jscomp$inline_1682.toLowerCase(), + capitalizedEvent$jscomp$inline_1684 = + eventName$jscomp$inline_1682[0].toUpperCase() + + eventName$jscomp$inline_1682.slice(1); registerSimpleEvent( - domEventName$jscomp$inline_1663, - "on" + capitalizedEvent$jscomp$inline_1664 + domEventName$jscomp$inline_1683, + "on" + capitalizedEvent$jscomp$inline_1684 ); } registerSimpleEvent(ANIMATION_END, "onAnimationEnd"); @@ -14626,8 +15066,7 @@ function dispatchEventForPluginEventSystem( !SyntheticEventCtor || "input" !== SyntheticEventCtor.toLowerCase() || ("checkbox" !== reactName.type && "radio" !== reactName.type) - ? enableCustomElementPropertySupport && - targetInst && + ? targetInst && isCustomElement(targetInst.elementType) && (getTargetInstFunc = getTargetInstForChangeEvent) : (getTargetInstFunc = getTargetInstForClickEvent); @@ -14732,9 +15171,9 @@ function dispatchEventForPluginEventSystem( ? getNativeBeforeInputChars(domEventName, nativeEvent) : getFallbackBeforeInputChars(domEventName, nativeEvent)) ) - (targetInst = accumulateTwoPhaseListeners(targetInst, "onBeforeInput")), - 0 < targetInst.length && - ((nativeEventTarget = new SyntheticCompositionEvent( + (eventType = accumulateTwoPhaseListeners(targetInst, "onBeforeInput")), + 0 < eventType.length && + ((handleEventFunc = new SyntheticCompositionEvent( "onBeforeInput", "beforeinput", null, @@ -14742,10 +15181,18 @@ function dispatchEventForPluginEventSystem( nativeEventTarget )), dispatchQueue.push({ - event: nativeEventTarget, - listeners: targetInst + event: handleEventFunc, + listeners: eventType }), - (nativeEventTarget.data = fallbackData)); + (handleEventFunc.data = fallbackData)); + enableFormActions && + extractEvents$6( + dispatchQueue, + domEventName, + targetInst, + nativeEvent, + nativeEventTarget + ); } processDispatchQueue(dispatchQueue, eventSystemFlags); }); @@ -14967,9 +15414,55 @@ function setProp(domElement, tag, key, value, props, prevValue) { break; case "action": case "formAction": + if (enableFormActions) + if ("function" === typeof value) { + domElement.setAttribute( + key, + "javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')" + ); + break; + } else + "function" === typeof prevValue && + ("formAction" === key + ? ("input" !== tag && + setProp(domElement, tag, "name", props.name, props, null), + setProp( + domElement, + tag, + "formEncType", + props.formEncType, + props, + null + ), + setProp( + domElement, + tag, + "formMethod", + props.formMethod, + props, + null + ), + setProp( + domElement, + tag, + "formTarget", + props.formTarget, + props, + null + )) + : (setProp( + domElement, + tag, + "encType", + props.encType, + props, + null + ), + setProp(domElement, tag, "method", props.method, props, null), + setProp(domElement, tag, "target", props.target, props, null))); if ( null == value || - "function" === typeof value || + (!enableFormActions && "function" === typeof value) || "symbol" === typeof value || "boolean" === typeof value ) { @@ -15184,7 +15677,7 @@ function setProp(domElement, tag, key, value, props, prevValue) { break; case "innerText": case "textContent": - if (enableCustomElementPropertySupport) break; + break; default: if ( !(2 < key.length) || @@ -15233,41 +15726,36 @@ function setPropOnCustomElement(domElement, tag, key, value, props, prevValue) { break; case "innerText": case "textContent": - if (enableCustomElementPropertySupport) break; + break; default: if (!registrationNameDependencies.hasOwnProperty(key)) - if (enableCustomElementPropertySupport) - a: { - props = value; - if ( - "o" === key[0] && - "n" === key[1] && - ((tag = key.endsWith("Capture")), - (value = key.slice(2, tag ? key.length - 7 : 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) - : !0 === props - ? domElement.setAttribute(key, "") - : setValueForAttribute(domElement, key, props); + a: { + if ( + "o" === key[0] && + "n" === key[1] && + ((props = key.endsWith("Capture")), + (tag = key.slice(2, props ? key.length - 7 : void 0)), + (prevValue = getFiberCurrentPropsFromNode(domElement)), + (prevValue = null != prevValue ? prevValue[key] : null), + "function" === typeof prevValue && + domElement.removeEventListener(tag, prevValue, props), + "function" === typeof value) + ) { + "function" !== typeof prevValue && + null !== prevValue && + (key in domElement + ? (domElement[key] = null) + : domElement.hasAttribute(key) && + domElement.removeAttribute(key)); + domElement.addEventListener(tag, value, props); + break a; } - else - "boolean" === typeof value && (value = "" + value), - setValueForAttribute(domElement, key, value); + key in domElement + ? (domElement[key] = value) + : !0 === value + ? domElement.setAttribute(key, "") + : setValueForAttribute(domElement, key, value); + } } } function setInitialProperties(domElement, tag, props) { @@ -15509,14 +15997,14 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp(domElement, tag, propKey, null, nextProps, lastProp); } } - for (var propKey$240 in nextProps) { - var propKey = nextProps[propKey$240]; - lastProp = lastProps[propKey$240]; + for (var propKey$246 in nextProps) { + var propKey = nextProps[propKey$246]; + lastProp = lastProps[propKey$246]; if ( - nextProps.hasOwnProperty(propKey$240) && + nextProps.hasOwnProperty(propKey$246) && (null != propKey || null != lastProp) ) - switch (propKey$240) { + switch (propKey$246) { case "type": type = propKey; break; @@ -15545,7 +16033,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp( domElement, tag, - propKey$240, + propKey$246, propKey, nextProps, lastProp @@ -15564,7 +16052,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ); return; case "select": - propKey = value = defaultValue = propKey$240 = null; + propKey = value = defaultValue = propKey$246 = null; for (type in lastProps) if ( ((lastDefaultValue = lastProps[type]), @@ -15595,7 +16083,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ) switch (name) { case "value": - propKey$240 = type; + propKey$246 = type; break; case "defaultValue": defaultValue = type; @@ -15616,15 +16104,15 @@ function updateProperties(domElement, tag, lastProps, nextProps) { tag = defaultValue; lastProps = value; nextProps = propKey; - null != propKey$240 - ? updateOptions(domElement, !!lastProps, propKey$240, !1) + null != propKey$246 + ? updateOptions(domElement, !!lastProps, propKey$246, !1) : !!nextProps !== !!lastProps && (null != tag ? updateOptions(domElement, !!lastProps, tag, !0) : updateOptions(domElement, !!lastProps, lastProps ? [] : "", !1)); return; case "textarea": - propKey = propKey$240 = null; + propKey = propKey$246 = null; for (defaultValue in lastProps) if ( ((name = lastProps[defaultValue]), @@ -15648,7 +16136,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { ) switch (value) { case "value": - propKey$240 = name; + propKey$246 = name; break; case "defaultValue": propKey = name; @@ -15662,17 +16150,17 @@ function updateProperties(domElement, tag, lastProps, nextProps) { name !== type && setProp(domElement, tag, value, name, nextProps, type); } - updateTextarea(domElement, propKey$240, propKey); + updateTextarea(domElement, propKey$246, propKey); return; case "option": - for (var propKey$256 in lastProps) + for (var propKey$262 in lastProps) if ( - ((propKey$240 = lastProps[propKey$256]), - lastProps.hasOwnProperty(propKey$256) && - null != propKey$240 && - !nextProps.hasOwnProperty(propKey$256)) + ((propKey$246 = lastProps[propKey$262]), + lastProps.hasOwnProperty(propKey$262) && + null != propKey$246 && + !nextProps.hasOwnProperty(propKey$262)) ) - switch (propKey$256) { + switch (propKey$262) { case "selected": domElement.selected = !1; break; @@ -15680,33 +16168,33 @@ function updateProperties(domElement, tag, lastProps, nextProps) { setProp( domElement, tag, - propKey$256, + propKey$262, null, nextProps, - propKey$240 + propKey$246 ); } for (lastDefaultValue in nextProps) if ( - ((propKey$240 = nextProps[lastDefaultValue]), + ((propKey$246 = nextProps[lastDefaultValue]), (propKey = lastProps[lastDefaultValue]), nextProps.hasOwnProperty(lastDefaultValue) && - propKey$240 !== propKey && - (null != propKey$240 || null != propKey)) + propKey$246 !== propKey && + (null != propKey$246 || null != propKey)) ) switch (lastDefaultValue) { case "selected": domElement.selected = - propKey$240 && - "function" !== typeof propKey$240 && - "symbol" !== typeof propKey$240; + propKey$246 && + "function" !== typeof propKey$246 && + "symbol" !== typeof propKey$246; break; default: setProp( domElement, tag, lastDefaultValue, - propKey$240, + propKey$246, nextProps, propKey ); @@ -15727,24 +16215,24 @@ function updateProperties(domElement, tag, lastProps, nextProps) { case "track": case "wbr": case "menuitem": - for (var propKey$261 in lastProps) - (propKey$240 = lastProps[propKey$261]), - lastProps.hasOwnProperty(propKey$261) && - null != propKey$240 && - !nextProps.hasOwnProperty(propKey$261) && - setProp(domElement, tag, propKey$261, null, nextProps, propKey$240); + for (var propKey$267 in lastProps) + (propKey$246 = lastProps[propKey$267]), + lastProps.hasOwnProperty(propKey$267) && + null != propKey$246 && + !nextProps.hasOwnProperty(propKey$267) && + setProp(domElement, tag, propKey$267, null, nextProps, propKey$246); for (checked in nextProps) if ( - ((propKey$240 = nextProps[checked]), + ((propKey$246 = nextProps[checked]), (propKey = lastProps[checked]), nextProps.hasOwnProperty(checked) && - propKey$240 !== propKey && - (null != propKey$240 || null != propKey)) + propKey$246 !== propKey && + (null != propKey$246 || null != propKey)) ) switch (checked) { case "children": case "dangerouslySetInnerHTML": - if (null != propKey$240) + if (null != propKey$246) throw Error(formatProdErrorMessage(137, tag)); break; default: @@ -15752,7 +16240,7 @@ function updateProperties(domElement, tag, lastProps, nextProps) { domElement, tag, checked, - propKey$240, + propKey$246, nextProps, propKey ); @@ -15760,49 +16248,49 @@ function updateProperties(domElement, tag, lastProps, nextProps) { return; default: if (isCustomElement(tag)) { - for (var propKey$266 in lastProps) - (propKey$240 = lastProps[propKey$266]), - lastProps.hasOwnProperty(propKey$266) && - null != propKey$240 && - !nextProps.hasOwnProperty(propKey$266) && + for (var propKey$272 in lastProps) + (propKey$246 = lastProps[propKey$272]), + lastProps.hasOwnProperty(propKey$272) && + null != propKey$246 && + !nextProps.hasOwnProperty(propKey$272) && setPropOnCustomElement( domElement, tag, - propKey$266, + propKey$272, null, nextProps, - propKey$240 + propKey$246 ); for (defaultChecked in nextProps) - (propKey$240 = nextProps[defaultChecked]), + (propKey$246 = nextProps[defaultChecked]), (propKey = lastProps[defaultChecked]), !nextProps.hasOwnProperty(defaultChecked) || - propKey$240 === propKey || - (null == propKey$240 && null == propKey) || + propKey$246 === propKey || + (null == propKey$246 && null == propKey) || setPropOnCustomElement( domElement, tag, defaultChecked, - propKey$240, + propKey$246, nextProps, propKey ); return; } } - for (var propKey$271 in lastProps) - (propKey$240 = lastProps[propKey$271]), - lastProps.hasOwnProperty(propKey$271) && - null != propKey$240 && - !nextProps.hasOwnProperty(propKey$271) && - setProp(domElement, tag, propKey$271, null, nextProps, propKey$240); + for (var propKey$277 in lastProps) + (propKey$246 = lastProps[propKey$277]), + lastProps.hasOwnProperty(propKey$277) && + null != propKey$246 && + !nextProps.hasOwnProperty(propKey$277) && + setProp(domElement, tag, propKey$277, null, nextProps, propKey$246); for (lastProp in nextProps) - (propKey$240 = nextProps[lastProp]), + (propKey$246 = nextProps[lastProp]), (propKey = lastProps[lastProp]), !nextProps.hasOwnProperty(lastProp) || - propKey$240 === propKey || - (null == propKey$240 && null == propKey) || - setProp(domElement, tag, lastProp, propKey$240, nextProps, propKey); + propKey$246 === propKey || + (null == propKey$246 && null == propKey) || + setProp(domElement, tag, lastProp, propKey$246, nextProps, propKey); } var eventsEnabled = null, selectionInformation = null; @@ -15947,56 +16435,65 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) { for (; 1 === instance.nodeType; ) { var anyProps = props; if (instance.nodeName.toLowerCase() !== type.toLowerCase()) { - if (!inRootOrSingleton) break; - } else { - if (!inRootOrSingleton) return instance; - if (!instance[internalHoistableMarker]) - switch (type) { - case "meta": - if (!instance.hasAttribute("itemprop")) break; - return instance; - case "link": - var rel = instance.getAttribute("rel"); - if ( - "stylesheet" === rel && - instance.hasAttribute("data-precedence") - ) - break; - else if ( - rel !== anyProps.rel || - instance.getAttribute("href") !== - (null == anyProps.href ? null : anyProps.href) || + if ( + !( + inRootOrSingleton || + (enableFormActions && + "INPUT" === instance.nodeName && + "hidden" === instance.type) + ) + ) + break; + } else if (!inRootOrSingleton) + if (enableFormActions && "input" === type && "hidden" === instance.type) { + var name = null == anyProps.name ? null : "" + anyProps.name; + if ( + "hidden" === anyProps.type && + instance.getAttribute("name") === name + ) + return instance; + } else return instance; + else if (!instance[internalHoistableMarker]) + switch (type) { + case "meta": + if (!instance.hasAttribute("itemprop")) break; + return instance; + case "link": + name = instance.getAttribute("rel"); + if ("stylesheet" === name && instance.hasAttribute("data-precedence")) + break; + else if ( + name !== anyProps.rel || + instance.getAttribute("href") !== + (null == anyProps.href ? null : anyProps.href) || + instance.getAttribute("crossorigin") !== + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || + instance.getAttribute("title") !== + (null == anyProps.title ? null : anyProps.title) + ) + break; + return instance; + case "style": + if (instance.hasAttribute("data-precedence")) break; + return instance; + case "script": + name = instance.getAttribute("src"); + if ( + (name !== (null == anyProps.src ? null : anyProps.src) || + instance.getAttribute("type") !== + (null == anyProps.type ? null : anyProps.type) || instance.getAttribute("crossorigin") !== - (null == anyProps.crossOrigin ? null : anyProps.crossOrigin) || - instance.getAttribute("title") !== - (null == anyProps.title ? null : anyProps.title) - ) - break; - return instance; - case "style": - if (instance.hasAttribute("data-precedence")) break; - return instance; - case "script": - rel = instance.getAttribute("src"); - if ( - (rel !== (null == anyProps.src ? null : anyProps.src) || - instance.getAttribute("type") !== - (null == anyProps.type ? null : anyProps.type) || - instance.getAttribute("crossorigin") !== - (null == anyProps.crossOrigin - ? null - : anyProps.crossOrigin)) && - rel && - instance.hasAttribute("async") && - !instance.hasAttribute("itemprop") - ) - break; - return instance; - default: - return instance; - } - } - instance = getNextHydratable(instance.nextSibling); + (null == anyProps.crossOrigin ? null : anyProps.crossOrigin)) && + name && + instance.hasAttribute("async") && + !instance.hasAttribute("itemprop") + ) + break; + return instance; + default: + return instance; + } + instance = getNextHydratableSibling(instance); if (null === instance) break; } return null; @@ -16004,8 +16501,17 @@ function canHydrateInstance(instance, type, props, inRootOrSingleton) { function canHydrateTextInstance(instance, text, inRootOrSingleton) { if ("" === text) return null; for (; 3 !== instance.nodeType; ) { - if (!inRootOrSingleton) return null; - instance = getNextHydratable(instance.nextSibling); + if ( + !( + (enableFormActions && + 1 === instance.nodeType && + "INPUT" === instance.nodeName && + "hidden" === instance.type) || + inRootOrSingleton + ) + ) + return null; + instance = getNextHydratableSibling(instance); if (null === instance) return null; } return instance; @@ -16016,12 +16522,23 @@ function getNextHydratable(node) { if (1 === nodeType || 3 === nodeType) break; if (8 === nodeType) { nodeType = node.data; - if ("$" === nodeType || "$!" === nodeType || "$?" === nodeType) break; + if ( + "$" === nodeType || + "$!" === nodeType || + "$?" === nodeType || + (enableFormActions && + enableAsyncActions && + ("F!" === nodeType || "F" === nodeType)) + ) + break; if ("/$" === nodeType) return null; } } return node; } +function getNextHydratableSibling(instance) { + return getNextHydratable(instance.nextSibling); +} function hydrateInstance( instance, type, @@ -16401,17 +16918,17 @@ function getResource(type, currentProps, pendingProps) { "string" === typeof pendingProps.precedence ) { type = getStyleKey(pendingProps.href); - var styles$279 = getResourcesFromRoot(currentProps).hoistableStyles, - resource$280 = styles$279.get(type); - resource$280 || + var styles$285 = getResourcesFromRoot(currentProps).hoistableStyles, + resource$286 = styles$285.get(type); + resource$286 || ((currentProps = currentProps.ownerDocument || currentProps), - (resource$280 = { + (resource$286 = { type: "stylesheet", instance: null, count: 0, state: { loading: 0, preload: null } }), - styles$279.set(type, resource$280), + styles$285.set(type, resource$286), preloadPropsMap.has(type) || preloadStylesheet( currentProps, @@ -16426,9 +16943,9 @@ function getResource(type, currentProps, pendingProps) { hrefLang: pendingProps.hrefLang, referrerPolicy: pendingProps.referrerPolicy }, - resource$280.state + resource$286.state )); - return resource$280; + return resource$286; } return null; case "script": @@ -16511,37 +17028,37 @@ function acquireResource(hoistableRoot, resource, props) { return (resource.instance = instance); case "stylesheet": styleProps = getStyleKey(props.href); - var instance$284 = hoistableRoot.querySelector( + var instance$290 = hoistableRoot.querySelector( getStylesheetSelectorFromKey(styleProps) ); - if (instance$284) + if (instance$290) return ( (resource.state.loading |= 4), - (resource.instance = instance$284), - markNodeAsHoistable(instance$284), - instance$284 + (resource.instance = instance$290), + markNodeAsHoistable(instance$290), + instance$290 ); instance = stylesheetPropsFromRawProps(props); (styleProps = preloadPropsMap.get(styleProps)) && adoptPreloadPropsForStylesheet(instance, styleProps); - instance$284 = ( + instance$290 = ( hoistableRoot.ownerDocument || hoistableRoot ).createElement("link"); - markNodeAsHoistable(instance$284); - var linkInstance = instance$284; + markNodeAsHoistable(instance$290); + var linkInstance = instance$290; linkInstance._p = new Promise(function (resolve, reject) { linkInstance.onload = resolve; linkInstance.onerror = reject; }); - setInitialProperties(instance$284, "link", instance); + setInitialProperties(instance$290, "link", instance); resource.state.loading |= 4; - insertStylesheet(instance$284, props.precedence, hoistableRoot); - return (resource.instance = instance$284); + insertStylesheet(instance$290, props.precedence, hoistableRoot); + return (resource.instance = instance$290); case "script": - instance$284 = getScriptKey(props.src); + instance$290 = getScriptKey(props.src); if ( (styleProps = hoistableRoot.querySelector( - getScriptSelectorFromKey(instance$284) + getScriptSelectorFromKey(instance$290) )) ) return ( @@ -16550,7 +17067,7 @@ function acquireResource(hoistableRoot, resource, props) { styleProps ); instance = props; - if ((styleProps = preloadPropsMap.get(instance$284))) + if ((styleProps = preloadPropsMap.get(instance$290))) (instance = assign({}, props)), adoptPreloadPropsForScript(instance, styleProps); hoistableRoot = hoistableRoot.ownerDocument || hoistableRoot; @@ -16920,10 +17437,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1847 = { +var devToolsConfig$jscomp$inline_1867 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-4f70a13e", + version: "18.3.0-www-modern-4fcabd82", rendererPackageName: "react-dom" }; (function (internals) { @@ -16941,10 +17458,10 @@ var devToolsConfig$jscomp$inline_1847 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1847.bundleType, - version: devToolsConfig$jscomp$inline_1847.version, - rendererPackageName: devToolsConfig$jscomp$inline_1847.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1847.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1867.bundleType, + version: devToolsConfig$jscomp$inline_1867.version, + rendererPackageName: devToolsConfig$jscomp$inline_1867.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1867.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16961,14 +17478,14 @@ var devToolsConfig$jscomp$inline_1847 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1847.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1867.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-4f70a13e" + reconcilerVersion: "18.3.0-www-modern-4fcabd82" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17024,7 +17541,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride = !1, identifierPrefix = "", onRecoverableError = defaultOnRecoverableError, - transitionCallbacks = null; + transitionCallbacks = null, + formState = null; null !== options && void 0 !== options && (!0 === options.unstable_strictMode && (isStrictMode = !0), @@ -17035,7 +17553,11 @@ exports.hydrateRoot = function (container, initialChildren, options) { void 0 !== options.onRecoverableError && (onRecoverableError = options.onRecoverableError), void 0 !== options.unstable_transitionCallbacks && - (transitionCallbacks = options.unstable_transitionCallbacks)); + (transitionCallbacks = options.unstable_transitionCallbacks), + enableAsyncActions && + enableFormActions && + void 0 !== options.formState && + (formState = options.formState)); initialChildren = createFiberRoot( container, 1, @@ -17047,7 +17569,7 @@ exports.hydrateRoot = function (container, initialChildren, options) { identifierPrefix, onRecoverableError, transitionCallbacks, - null + formState ); initialChildren.context = emptyContextObject; options = initialChildren.current; @@ -17214,13 +17736,21 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.useFormState = function () { +exports.useFormState = function (action, initialState, permalink) { + if (enableFormActions && enableAsyncActions) + return ReactCurrentDispatcher$2.current.useFormState( + action, + initialState, + permalink + ); throw Error(formatProdErrorMessage(248)); }; exports.useFormStatus = function () { + if (enableFormActions && enableAsyncActions) + return ReactCurrentDispatcher$2.current.useHostTransitionStatus(); throw Error(formatProdErrorMessage(248)); }; -exports.version = "18.3.0-www-modern-4f70a13e"; +exports.version = "18.3.0-www-modern-4fcabd82"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js index 13da746fd9..47f890ef08 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.classic.js +++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); - var ReactVersion = "18.3.0-www-classic-ac038d0e"; + var ReactVersion = "18.3.0-www-classic-59dbb481"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -346,9 +346,8 @@ if (__DEV__) { var dynamicFeatureFlags = require("ReactFeatureFlags"); var enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, enableUseDeferredValueInitialArg = dynamicFeatureFlags.enableUseDeferredValueInitialArg; // On WWW, false is used for a new modern build. @@ -1359,6 +1358,23 @@ if (__DEV__) { return true; } + if (enableFormActions) { + // Actions are special because unlike events they can have other value types. + if (typeof value === "function") { + if (tagName === "form" && name === "action") { + return true; + } + + if (tagName === "input" && name === "formAction") { + return true; + } + + if (tagName === "button" && name === "formAction") { + return true; + } + } + } // We can't rely on the event system being injected on the server. + if (eventRegistry != null) { var registrationNameDependencies = eventRegistry.registrationNameDependencies, @@ -1507,10 +1523,9 @@ if (__DEV__) { case "innerText": // Properties - case "textContent": - if (enableCustomElementPropertySupport) { - return true; - } + case "textContent": { + return true; + } } switch (typeof value) { @@ -1998,6 +2013,8 @@ if (__DEV__) { '$RM=new Map;\n$RR=function(r,t,w){for(var u=$RC,n=$RM,p=new Map,q=document,g,b,h=q.querySelectorAll("link[data-precedence],style[data-precedence]"),v=[],k=0;b=h[k++];)"not all"===b.getAttribute("media")?v.push(b):("LINK"===b.tagName&&n.set(b.getAttribute("href"),b),p.set(b.dataset.precedence,g=b));b=0;h=[];var l,a;for(k=!0;;){if(k){var f=w[b++];if(!f){k=!1;b=0;continue}var c=!1,m=0;var d=f[m++];if(a=n.get(d)){var e=a._p;c=!0}else{a=q.createElement("link");a.href=d;a.rel="stylesheet";for(a.dataset.precedence=\nl=f[m++];e=f[m++];)a.setAttribute(e,f[m++]);e=a._p=new Promise(function(x,y){a.onload=x;a.onerror=y});n.set(d,a)}d=a.getAttribute("media");!e||"l"===e.s||d&&!matchMedia(d).matches||h.push(e);if(c)continue}else{a=v[b++];if(!a)break;l=a.getAttribute("data-precedence");a.removeAttribute("media")}c=p.get(l)||g;c===g&&(g=a);p.set(l,a);c?c.parentNode.insertBefore(a,c.nextSibling):(c=q.head,c.insertBefore(a,c.firstChild))}Promise.all(h).then(u.bind(null,r,t,""),u.bind(null,r,t,"Resource failed to load"))};'; var completeSegment = "$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};"; + var formReplaying = + 'addEventListener("submit",function(a){if(!a.defaultPrevented){var c=a.target,d=a.submitter,e=c.action,b=d;if(d){var f=d.getAttribute("formAction");null!=f&&(e=f,b=null)}"javascript:throw new Error(\'A React form was unexpectedly submitted.\')"===e&&(a.preventDefault(),b?(a=document.createElement("input"),a.name=b.name,a.value=b.value,b.parentNode.insertBefore(a,b),b=new FormData(c),a.parentNode.removeChild(a)):b=new FormData(c),a=c.getRootNode(),(a.$$reactFormReplay=a.$$reactFormReplay||[]).push(c,\nd,b))}});'; function getValueDescriptorExpectingObjectForWarning(thing) { return thing === null @@ -2012,6 +2029,16 @@ if (__DEV__) { var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + // same object across all transitions. + + var sharedNotPendingObject = { + pending: false, + data: null, + method: null, + action: null + }; + var NotPending = Object.freeze(sharedNotPendingObject); + var ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; @@ -2045,6 +2072,9 @@ if (__DEV__) { var SentStyleInsertionFunction = /* */ 8; + var SentFormReplayingRuntime = + /* */ + 16; // Per request, global state that is not contextual to the rendering subtree. // This cannot be resumed and therefore should only contain things that are // temporary working state or are never used in the prerender pass. // Credentials here are things that affect whether a browser will make a request @@ -2751,9 +2781,14 @@ if (__DEV__) { ); } } + + function makeFormFieldPrefix(resumableState) { + var id = resumableState.nextFormID++; + return resumableState.idPrefix + id; + } // Since this will likely be repeated a lot in the HTML, we use a more concise message // than on the client and hopefully it's googleable. - stringToPrecomputedChunk( + var actionJavaScriptURL = stringToPrecomputedChunk( escapeTextForBrowser( // eslint-disable-next-line no-script-url "javascript:throw new Error('A React form was unexpectedly submitted.')" @@ -2798,6 +2833,75 @@ if (__DEV__) { ) { var formData = null; + if (enableFormActions && typeof formAction === "function") { + // Function form actions cannot control the form properties + { + if (name !== null && !didWarnFormActionName) { + didWarnFormActionName = true; + + error( + 'Cannot specify a "name" prop for a button that specifies a function as a formAction. ' + + "React needs it to encode which action should be invoked. It will get overridden." + ); + } + + if ( + (formEncType !== null || formMethod !== null) && + !didWarnFormActionMethod + ) { + didWarnFormActionMethod = true; + + error( + "Cannot specify a formEncType or formMethod for a button that specifies a " + + "function as a formAction. React provides those automatically. They will get overridden." + ); + } + + if (formTarget !== null && !didWarnFormActionTarget) { + didWarnFormActionTarget = true; + + error( + "Cannot specify a formTarget for a button that specifies a function as a formAction. " + + "The function will always be executed in the same window." + ); + } + } + + var customAction = formAction.$$FORM_ACTION; + + if (typeof customAction === "function") { + // This action has a custom progressive enhancement form that can submit the form + // back to the server if it's invoked before hydration. Such as a Server Action. + var prefix = makeFormFieldPrefix(resumableState); + var customFields = formAction.$$FORM_ACTION(prefix); + name = customFields.name; + formAction = customFields.action || ""; + formEncType = customFields.encType; + formMethod = customFields.method; + formTarget = customFields.target; + formData = customFields.data; + } else { + // Set a javascript URL that doesn't do anything. We don't expect this to be invoked + // because we'll preventDefault in the Fizz runtime, but it can happen if a form is + // manually submitted or if someone calls stopPropagation before React gets the event. + // If CSP is used to block javascript: URLs that's fine too. It just won't show this + // error message but the URL will be logged. + target.push( + attributeSeparator, + stringToChunk("formAction"), + attributeAssign, + actionJavaScriptURL, + attributeEnd + ); + name = null; + formAction = null; + formEncType = null; + formMethod = null; + formTarget = null; + injectFormReplayingRuntime(resumableState, renderState); + } + } + if (name != null) { pushAttribute(target, "name", name); } @@ -3197,6 +3301,9 @@ if (__DEV__) { var didWarnInvalidOptionInnerHTML = false; var didWarnSelectedSetOnOption = false; var didWarnFormActionType = false; + var didWarnFormActionName = false; + var didWarnFormActionTarget = false; + var didWarnFormActionMethod = false; function checkSelectProp(props, propName) { { @@ -3428,6 +3535,26 @@ if (__DEV__) { return children; } + var formReplayingRuntimeScript = stringToPrecomputedChunk(formReplaying); + + function injectFormReplayingRuntime(resumableState, renderState) { + // If we haven't sent it yet, inject the runtime that tracks submitted JS actions + // for later replaying by Fiber. If we use an external runtime, we don't need + // to emit anything. It's always used. + if ( + (resumableState.instructions & SentFormReplayingRuntime) === + NothingSent && + !renderState.externalRuntimeScript + ) { + resumableState.instructions |= SentFormReplayingRuntime; + renderState.bootstrapChunks.unshift( + renderState.startInlineScript, + formReplayingRuntimeScript, + endInlineScript + ); + } + } + var formStateMarkerIsMatching = stringToPrecomputedChunk(""); var formStateMarkerIsNotMatching = stringToPrecomputedChunk(""); function pushFormStateMarkerIsMatching(target) { @@ -3486,6 +3613,69 @@ if (__DEV__) { } } + var formData = null; + var formActionName = null; + + if (enableFormActions && typeof formAction === "function") { + // Function form actions cannot control the form properties + { + if ( + (formEncType !== null || formMethod !== null) && + !didWarnFormActionMethod + ) { + didWarnFormActionMethod = true; + + error( + "Cannot specify a encType or method for a form that specifies a " + + "function as the action. React provides those automatically. " + + "They will get overridden." + ); + } + + if (formTarget !== null && !didWarnFormActionTarget) { + didWarnFormActionTarget = true; + + error( + "Cannot specify a target for a form that specifies a function as the action. " + + "The function will always be executed in the same window." + ); + } + } + + var customAction = formAction.$$FORM_ACTION; + + if (typeof customAction === "function") { + // This action has a custom progressive enhancement form that can submit the form + // back to the server if it's invoked before hydration. Such as a Server Action. + var prefix = makeFormFieldPrefix(resumableState); + var customFields = formAction.$$FORM_ACTION(prefix); + formAction = customFields.action || ""; + formEncType = customFields.encType; + formMethod = customFields.method; + formTarget = customFields.target; + formData = customFields.data; + formActionName = customFields.name; + } else { + // Set a javascript URL that doesn't do anything. We don't expect this to be invoked + // because we'll preventDefault in the Fizz runtime, but it can happen if a form is + // manually submitted or if someone calls stopPropagation before React gets the event. + // If CSP is used to block javascript: URLs that's fine too. It just won't show this + // error message but the URL will be logged. + target.push( + attributeSeparator, + stringToChunk("action"), + attributeAssign, + actionJavaScriptURL, + attributeEnd + ); + formAction = null; + formEncType = null; + formMethod = null; + formTarget = null; + injectFormReplayingRuntime(resumableState, renderState); + } + } + if (formAction != null) { pushAttribute(target, "action", formAction); } @@ -3504,6 +3694,13 @@ if (__DEV__) { target.push(endOfStartTag); + if (formActionName !== null) { + target.push(startHiddenInputChunk); + pushStringAttribute(target, "name", formActionName); + target.push(endOfStartTagSelfClosing); + pushAdditionalFormFields(target, formData); + } + pushInnerHTML(target, innerHTML, children); if (typeof children === "string") { @@ -4954,12 +5151,11 @@ if (__DEV__) { // Ignored. These are built-in to React on the client. break; - case "className": - if (enableCustomElementPropertySupport) { - // className gets rendered as class on the client, so it should be - // rendered as class on the server. - attributeName = "class"; - } + case "className": { + // className gets rendered as class on the client, so it should be + // rendered as class on the server. + attributeName = "class"; + } // intentional fallthrough @@ -4969,7 +5165,7 @@ if (__DEV__) { typeof propValue !== "function" && typeof propValue !== "symbol" ) { - if (enableCustomElementPropertySupport) { + { if (propValue === false) { continue; } else if (propValue === true) { @@ -5172,7 +5368,7 @@ if (__DEV__) { return pushStartButton(target, props, resumableState, renderState); case "form": - return pushStartForm(target, props); + return pushStartForm(target, props, resumableState, renderState); case "menuitem": return pushStartMenuItem(target, props); @@ -7895,6 +8091,7 @@ if (__DEV__) { return writeEndClientRenderedSuspenseBoundary$1(destination); } + var NotPendingTransition = NotPending; // ATTENTION // When adding new symbols to this file, @@ -10418,6 +10615,11 @@ if (__DEV__) { return [false, unsupportedStartTransition]; } + function useHostTransitionStatus() { + resolveCurrentlyRenderingComponent(); + return NotPendingTransition; + } + function unsupportedSetOptimisticState() { throw new Error("Cannot update optimistic state while rendering."); } @@ -10661,6 +10863,10 @@ if (__DEV__) { HooksDispatcher.useMemoCache = useMemoCache; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcher.useHostTransitionStatus = useHostTransitionStatus; + } + if (enableAsyncActions) { HooksDispatcher.useOptimistic = useOptimistic; HooksDispatcher.useFormState = useFormState; diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index 23bbb2a263..490963cab1 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js @@ -19,7 +19,7 @@ if (__DEV__) { var React = require("react"); var ReactDOM = require("react-dom"); - var ReactVersion = "18.3.0-www-modern-c10a0d4f"; + var ReactVersion = "18.3.0-www-modern-66f563f5"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -346,9 +346,8 @@ if (__DEV__) { var dynamicFeatureFlags = require("ReactFeatureFlags"); var enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, enableUseDeferredValueInitialArg = dynamicFeatureFlags.enableUseDeferredValueInitialArg; // On WWW, true is used for a new modern build. @@ -1359,6 +1358,23 @@ if (__DEV__) { return true; } + if (enableFormActions) { + // Actions are special because unlike events they can have other value types. + if (typeof value === "function") { + if (tagName === "form" && name === "action") { + return true; + } + + if (tagName === "input" && name === "formAction") { + return true; + } + + if (tagName === "button" && name === "formAction") { + return true; + } + } + } // We can't rely on the event system being injected on the server. + if (eventRegistry != null) { var registrationNameDependencies = eventRegistry.registrationNameDependencies, @@ -1507,10 +1523,9 @@ if (__DEV__) { case "innerText": // Properties - case "textContent": - if (enableCustomElementPropertySupport) { - return true; - } + case "textContent": { + return true; + } } switch (typeof value) { @@ -1998,6 +2013,8 @@ if (__DEV__) { '$RM=new Map;\n$RR=function(r,t,w){for(var u=$RC,n=$RM,p=new Map,q=document,g,b,h=q.querySelectorAll("link[data-precedence],style[data-precedence]"),v=[],k=0;b=h[k++];)"not all"===b.getAttribute("media")?v.push(b):("LINK"===b.tagName&&n.set(b.getAttribute("href"),b),p.set(b.dataset.precedence,g=b));b=0;h=[];var l,a;for(k=!0;;){if(k){var f=w[b++];if(!f){k=!1;b=0;continue}var c=!1,m=0;var d=f[m++];if(a=n.get(d)){var e=a._p;c=!0}else{a=q.createElement("link");a.href=d;a.rel="stylesheet";for(a.dataset.precedence=\nl=f[m++];e=f[m++];)a.setAttribute(e,f[m++]);e=a._p=new Promise(function(x,y){a.onload=x;a.onerror=y});n.set(d,a)}d=a.getAttribute("media");!e||"l"===e.s||d&&!matchMedia(d).matches||h.push(e);if(c)continue}else{a=v[b++];if(!a)break;l=a.getAttribute("data-precedence");a.removeAttribute("media")}c=p.get(l)||g;c===g&&(g=a);p.set(l,a);c?c.parentNode.insertBefore(a,c.nextSibling):(c=q.head,c.insertBefore(a,c.firstChild))}Promise.all(h).then(u.bind(null,r,t,""),u.bind(null,r,t,"Resource failed to load"))};'; var completeSegment = "$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};"; + var formReplaying = + 'addEventListener("submit",function(a){if(!a.defaultPrevented){var c=a.target,d=a.submitter,e=c.action,b=d;if(d){var f=d.getAttribute("formAction");null!=f&&(e=f,b=null)}"javascript:throw new Error(\'A React form was unexpectedly submitted.\')"===e&&(a.preventDefault(),b?(a=document.createElement("input"),a.name=b.name,a.value=b.value,b.parentNode.insertBefore(a,b),b=new FormData(c),a.parentNode.removeChild(a)):b=new FormData(c),a=c.getRootNode(),(a.$$reactFormReplay=a.$$reactFormReplay||[]).push(c,\nd,b))}});'; function getValueDescriptorExpectingObjectForWarning(thing) { return thing === null @@ -2012,6 +2029,16 @@ if (__DEV__) { var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + // same object across all transitions. + + var sharedNotPendingObject = { + pending: false, + data: null, + method: null, + action: null + }; + var NotPending = Object.freeze(sharedNotPendingObject); + var ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; @@ -2045,6 +2072,9 @@ if (__DEV__) { var SentStyleInsertionFunction = /* */ 8; + var SentFormReplayingRuntime = + /* */ + 16; // Per request, global state that is not contextual to the rendering subtree. // This cannot be resumed and therefore should only contain things that are // temporary working state or are never used in the prerender pass. // Credentials here are things that affect whether a browser will make a request @@ -2751,9 +2781,14 @@ if (__DEV__) { ); } } + + function makeFormFieldPrefix(resumableState) { + var id = resumableState.nextFormID++; + return resumableState.idPrefix + id; + } // Since this will likely be repeated a lot in the HTML, we use a more concise message // than on the client and hopefully it's googleable. - stringToPrecomputedChunk( + var actionJavaScriptURL = stringToPrecomputedChunk( escapeTextForBrowser( // eslint-disable-next-line no-script-url "javascript:throw new Error('A React form was unexpectedly submitted.')" @@ -2798,6 +2833,75 @@ if (__DEV__) { ) { var formData = null; + if (enableFormActions && typeof formAction === "function") { + // Function form actions cannot control the form properties + { + if (name !== null && !didWarnFormActionName) { + didWarnFormActionName = true; + + error( + 'Cannot specify a "name" prop for a button that specifies a function as a formAction. ' + + "React needs it to encode which action should be invoked. It will get overridden." + ); + } + + if ( + (formEncType !== null || formMethod !== null) && + !didWarnFormActionMethod + ) { + didWarnFormActionMethod = true; + + error( + "Cannot specify a formEncType or formMethod for a button that specifies a " + + "function as a formAction. React provides those automatically. They will get overridden." + ); + } + + if (formTarget !== null && !didWarnFormActionTarget) { + didWarnFormActionTarget = true; + + error( + "Cannot specify a formTarget for a button that specifies a function as a formAction. " + + "The function will always be executed in the same window." + ); + } + } + + var customAction = formAction.$$FORM_ACTION; + + if (typeof customAction === "function") { + // This action has a custom progressive enhancement form that can submit the form + // back to the server if it's invoked before hydration. Such as a Server Action. + var prefix = makeFormFieldPrefix(resumableState); + var customFields = formAction.$$FORM_ACTION(prefix); + name = customFields.name; + formAction = customFields.action || ""; + formEncType = customFields.encType; + formMethod = customFields.method; + formTarget = customFields.target; + formData = customFields.data; + } else { + // Set a javascript URL that doesn't do anything. We don't expect this to be invoked + // because we'll preventDefault in the Fizz runtime, but it can happen if a form is + // manually submitted or if someone calls stopPropagation before React gets the event. + // If CSP is used to block javascript: URLs that's fine too. It just won't show this + // error message but the URL will be logged. + target.push( + attributeSeparator, + stringToChunk("formAction"), + attributeAssign, + actionJavaScriptURL, + attributeEnd + ); + name = null; + formAction = null; + formEncType = null; + formMethod = null; + formTarget = null; + injectFormReplayingRuntime(resumableState, renderState); + } + } + if (name != null) { pushAttribute(target, "name", name); } @@ -3197,6 +3301,9 @@ if (__DEV__) { var didWarnInvalidOptionInnerHTML = false; var didWarnSelectedSetOnOption = false; var didWarnFormActionType = false; + var didWarnFormActionName = false; + var didWarnFormActionTarget = false; + var didWarnFormActionMethod = false; function checkSelectProp(props, propName) { { @@ -3428,6 +3535,26 @@ if (__DEV__) { return children; } + var formReplayingRuntimeScript = stringToPrecomputedChunk(formReplaying); + + function injectFormReplayingRuntime(resumableState, renderState) { + // If we haven't sent it yet, inject the runtime that tracks submitted JS actions + // for later replaying by Fiber. If we use an external runtime, we don't need + // to emit anything. It's always used. + if ( + (resumableState.instructions & SentFormReplayingRuntime) === + NothingSent && + !renderState.externalRuntimeScript + ) { + resumableState.instructions |= SentFormReplayingRuntime; + renderState.bootstrapChunks.unshift( + renderState.startInlineScript, + formReplayingRuntimeScript, + endInlineScript + ); + } + } + var formStateMarkerIsMatching = stringToPrecomputedChunk(""); var formStateMarkerIsNotMatching = stringToPrecomputedChunk(""); function pushFormStateMarkerIsMatching(target) { @@ -3486,6 +3613,69 @@ if (__DEV__) { } } + var formData = null; + var formActionName = null; + + if (enableFormActions && typeof formAction === "function") { + // Function form actions cannot control the form properties + { + if ( + (formEncType !== null || formMethod !== null) && + !didWarnFormActionMethod + ) { + didWarnFormActionMethod = true; + + error( + "Cannot specify a encType or method for a form that specifies a " + + "function as the action. React provides those automatically. " + + "They will get overridden." + ); + } + + if (formTarget !== null && !didWarnFormActionTarget) { + didWarnFormActionTarget = true; + + error( + "Cannot specify a target for a form that specifies a function as the action. " + + "The function will always be executed in the same window." + ); + } + } + + var customAction = formAction.$$FORM_ACTION; + + if (typeof customAction === "function") { + // This action has a custom progressive enhancement form that can submit the form + // back to the server if it's invoked before hydration. Such as a Server Action. + var prefix = makeFormFieldPrefix(resumableState); + var customFields = formAction.$$FORM_ACTION(prefix); + formAction = customFields.action || ""; + formEncType = customFields.encType; + formMethod = customFields.method; + formTarget = customFields.target; + formData = customFields.data; + formActionName = customFields.name; + } else { + // Set a javascript URL that doesn't do anything. We don't expect this to be invoked + // because we'll preventDefault in the Fizz runtime, but it can happen if a form is + // manually submitted or if someone calls stopPropagation before React gets the event. + // If CSP is used to block javascript: URLs that's fine too. It just won't show this + // error message but the URL will be logged. + target.push( + attributeSeparator, + stringToChunk("action"), + attributeAssign, + actionJavaScriptURL, + attributeEnd + ); + formAction = null; + formEncType = null; + formMethod = null; + formTarget = null; + injectFormReplayingRuntime(resumableState, renderState); + } + } + if (formAction != null) { pushAttribute(target, "action", formAction); } @@ -3504,6 +3694,13 @@ if (__DEV__) { target.push(endOfStartTag); + if (formActionName !== null) { + target.push(startHiddenInputChunk); + pushStringAttribute(target, "name", formActionName); + target.push(endOfStartTagSelfClosing); + pushAdditionalFormFields(target, formData); + } + pushInnerHTML(target, innerHTML, children); if (typeof children === "string") { @@ -4954,12 +5151,11 @@ if (__DEV__) { // Ignored. These are built-in to React on the client. break; - case "className": - if (enableCustomElementPropertySupport) { - // className gets rendered as class on the client, so it should be - // rendered as class on the server. - attributeName = "class"; - } + case "className": { + // className gets rendered as class on the client, so it should be + // rendered as class on the server. + attributeName = "class"; + } // intentional fallthrough @@ -4969,7 +5165,7 @@ if (__DEV__) { typeof propValue !== "function" && typeof propValue !== "symbol" ) { - if (enableCustomElementPropertySupport) { + { if (propValue === false) { continue; } else if (propValue === true) { @@ -5172,7 +5368,7 @@ if (__DEV__) { return pushStartButton(target, props, resumableState, renderState); case "form": - return pushStartForm(target, props); + return pushStartForm(target, props, resumableState, renderState); case "menuitem": return pushStartMenuItem(target, props); @@ -7895,6 +8091,7 @@ if (__DEV__) { return writeEndClientRenderedSuspenseBoundary$1(destination); } + var NotPendingTransition = NotPending; // ATTENTION // When adding new symbols to this file, @@ -10157,6 +10354,11 @@ if (__DEV__) { return [false, unsupportedStartTransition]; } + function useHostTransitionStatus() { + resolveCurrentlyRenderingComponent(); + return NotPendingTransition; + } + function unsupportedSetOptimisticState() { throw new Error("Cannot update optimistic state while rendering."); } @@ -10400,6 +10602,10 @@ if (__DEV__) { HooksDispatcher.useMemoCache = useMemoCache; } + if (enableFormActions && enableAsyncActions) { + HooksDispatcher.useHostTransitionStatus = useHostTransitionStatus; + } + if (enableAsyncActions) { HooksDispatcher.useOptimistic = useOptimistic; HooksDispatcher.useFormState = useFormState; diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js index 07232e7695..da3c102475 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.classic.js +++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js @@ -108,9 +108,8 @@ function murmurhash3_32_gc(key, seed) { var assign = Object.assign, dynamicFeatureFlags = require("ReactFeatureFlags"), enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing, - enableCustomElementPropertySupport = - dynamicFeatureFlags.enableCustomElementPropertySupport, enableAsyncActions = dynamicFeatureFlags.enableAsyncActions, + enableFormActions = dynamicFeatureFlags.enableFormActions, enableUseDeferredValueInitialArg = dynamicFeatureFlags.enableUseDeferredValueInitialArg, hasOwnProperty = Object.prototype.hasOwnProperty, @@ -262,6 +261,12 @@ function sanitizeURL(url) { var isArrayImpl = Array.isArray, ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, + sharedNotPendingObject = { + pending: !1, + data: null, + method: null, + action: null + }, ReactDOMCurrentDispatcher = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Dispatcher, ReactDOMServerDispatcher = { @@ -405,7 +410,11 @@ function pushStringAttribute(target, name, value) { "boolean" !== typeof value && target.push(" ", name, '="', escapeTextForBrowser(value), '"'); } -escapeTextForBrowser( +function makeFormFieldPrefix(resumableState) { + var id = resumableState.nextFormID++; + return resumableState.idPrefix + id; +} +var actionJavaScriptURL = escapeTextForBrowser( "javascript:throw new Error('A React form was unexpectedly submitted.')" ); function pushAdditionalFormField(value, key) { @@ -425,12 +434,27 @@ function pushFormActionAttribute( formTarget, name ) { + var formData = null; + enableFormActions && + "function" === typeof formAction && + ("function" === typeof formAction.$$FORM_ACTION + ? ((formEncType = makeFormFieldPrefix(resumableState)), + (resumableState = formAction.$$FORM_ACTION(formEncType)), + (name = resumableState.name), + (formAction = resumableState.action || ""), + (formEncType = resumableState.encType), + (formMethod = resumableState.method), + (formTarget = resumableState.target), + (formData = resumableState.data)) + : (target.push(" ", "formAction", '="', actionJavaScriptURL, '"'), + (formTarget = formMethod = formEncType = formAction = name = null), + injectFormReplayingRuntime(resumableState, renderState))); null != name && pushAttribute(target, "name", name); null != formAction && pushAttribute(target, "formAction", formAction); null != formEncType && pushAttribute(target, "formEncType", formEncType); null != formMethod && pushAttribute(target, "formMethod", formMethod); null != formTarget && pushAttribute(target, "formTarget", formTarget); - return null; + return formData; } function pushAttribute(target, name, value) { switch (name) { @@ -590,8 +614,8 @@ function pushAttribute(target, name, value) { case "symbol": return; case "boolean": - var prefix$7 = name.toLowerCase().slice(0, 5); - if ("data-" !== prefix$7 && "aria-" !== prefix$7) return; + var prefix$8 = name.toLowerCase().slice(0, 5); + if ("data-" !== prefix$8 && "aria-" !== prefix$8) return; } target.push(" ", name, '="', escapeTextForBrowser(value), '"'); } @@ -613,6 +637,16 @@ function flattenOptionChildren(children) { }); return content; } +function injectFormReplayingRuntime(resumableState, renderState) { + 0 !== (resumableState.instructions & 16) || + renderState.externalRuntimeScript || + ((resumableState.instructions |= 16), + renderState.bootstrapChunks.unshift( + renderState.startInlineScript, + 'addEventListener("submit",function(a){if(!a.defaultPrevented){var c=a.target,d=a.submitter,e=c.action,b=d;if(d){var f=d.getAttribute("formAction");null!=f&&(e=f,b=null)}"javascript:throw new Error(\'A React form was unexpectedly submitted.\')"===e&&(a.preventDefault(),b?(a=document.createElement("input"),a.name=b.name,a.value=b.value,b.parentNode.insertBefore(a,b),b=new FormData(c),a.parentNode.removeChild(a)):b=new FormData(c),a=c.getRootNode(),(a.$$reactFormReplay=a.$$reactFormReplay||[]).push(c,\nd,b))}});', + "\x3c/script>" + )); +} function pushLinkImpl(target, props) { target.push(startChunkForTag("link")); for (var propKey in props) @@ -1072,6 +1106,26 @@ function pushStartInstance( ); } } + var formData$jscomp$1 = null, + formActionName = null; + if (enableFormActions && "function" === typeof formAction$jscomp$1) + if ("function" === typeof formAction$jscomp$1.$$FORM_ACTION) { + var prefix$9 = makeFormFieldPrefix(resumableState), + customFields = formAction$jscomp$1.$$FORM_ACTION(prefix$9); + formAction$jscomp$1 = customFields.action || ""; + formEncType$jscomp$1 = customFields.encType; + formMethod$jscomp$1 = customFields.method; + formTarget$jscomp$1 = customFields.target; + formData$jscomp$1 = customFields.data; + formActionName = customFields.name; + } else + target$jscomp$0.push(" ", "action", '="', actionJavaScriptURL, '"'), + (formTarget$jscomp$1 = + formMethod$jscomp$1 = + formEncType$jscomp$1 = + formAction$jscomp$1 = + null), + injectFormReplayingRuntime(resumableState, renderState); null != formAction$jscomp$1 && pushAttribute(target$jscomp$0, "action", formAction$jscomp$1); null != formEncType$jscomp$1 && @@ -1081,6 +1135,12 @@ function pushStartInstance( null != formTarget$jscomp$1 && pushAttribute(target$jscomp$0, "target", formTarget$jscomp$1); target$jscomp$0.push(">"); + null !== formActionName && + (target$jscomp$0.push('"), + null !== formData$jscomp$1 && + formData$jscomp$1.forEach(pushAdditionalFormField, target$jscomp$0)); pushInnerHTML(target$jscomp$0, innerHTML$jscomp$2, children$jscomp$3); if ("string" === typeof children$jscomp$3) { target$jscomp$0.push(escapeTextForBrowser(children$jscomp$3)); @@ -1181,10 +1241,10 @@ function pushStartInstance( styleQueue.sheets.set(href, resource); hoistableState && hoistableState.stylesheets.add(resource); } else if (styleQueue) { - var resource$8 = styleQueue.sheets.get(href); - resource$8 && + var resource$10 = styleQueue.sheets.get(href); + resource$10 && hoistableState && - hoistableState.stylesheets.add(resource$8); + hoistableState.stylesheets.add(resource$10); } textEmbedded && target$jscomp$0.push("\x3c!-- --\x3e"); JSCompiler_inline_result$jscomp$2 = null; @@ -1582,19 +1642,16 @@ function pushStartInstance( case "suppressHydrationWarning": break; case "className": - enableCustomElementPropertySupport && - (attributeName = "class"); + attributeName = "class"; default: if ( isAttributeNameSafe(propKey$jscomp$9) && "function" !== typeof propValue$jscomp$9 && - "symbol" !== typeof propValue$jscomp$9 + "symbol" !== typeof propValue$jscomp$9 && + !1 !== propValue$jscomp$9 ) { - if (enableCustomElementPropertySupport) - if (!1 === propValue$jscomp$9) continue; - else if (!0 === propValue$jscomp$9) - propValue$jscomp$9 = ""; - else if ("object" === typeof propValue$jscomp$9) continue; + if (!0 === propValue$jscomp$9) propValue$jscomp$9 = ""; + else if ("object" === typeof propValue$jscomp$9) continue; target$jscomp$0.push( " ", attributeName, @@ -2476,16 +2533,16 @@ function createRenderState(resumableState, generateStaticMarkup) { "\x3c/script>" ); bootstrapScriptContent = idPrefix + "P:"; - var JSCompiler_object_inline_segmentPrefix_1594 = idPrefix + "S:"; + var JSCompiler_object_inline_segmentPrefix_1604 = idPrefix + "S:"; idPrefix += "B:"; - var JSCompiler_object_inline_preconnects_1608 = new Set(), - JSCompiler_object_inline_fontPreloads_1609 = new Set(), - JSCompiler_object_inline_highImagePreloads_1610 = new Set(), - JSCompiler_object_inline_styles_1611 = new Map(), - JSCompiler_object_inline_bootstrapScripts_1612 = new Set(), - JSCompiler_object_inline_scripts_1613 = new Set(), - JSCompiler_object_inline_bulkPreloads_1614 = new Set(), - JSCompiler_object_inline_preloads_1615 = { + var JSCompiler_object_inline_preconnects_1618 = new Set(), + JSCompiler_object_inline_fontPreloads_1619 = new Set(), + JSCompiler_object_inline_highImagePreloads_1620 = new Set(), + JSCompiler_object_inline_styles_1621 = new Map(), + JSCompiler_object_inline_bootstrapScripts_1622 = new Set(), + JSCompiler_object_inline_scripts_1623 = new Set(), + JSCompiler_object_inline_bulkPreloads_1624 = new Set(), + JSCompiler_object_inline_preloads_1625 = { images: new Map(), stylesheets: new Map(), scripts: new Map(), @@ -2522,7 +2579,7 @@ function createRenderState(resumableState, generateStaticMarkup) { scriptConfig.moduleScriptResources[href] = null; scriptConfig = []; pushLinkImpl(scriptConfig, props); - JSCompiler_object_inline_bootstrapScripts_1612.add(scriptConfig); + JSCompiler_object_inline_bootstrapScripts_1622.add(scriptConfig); bootstrapChunks.push('