From 43fc2ba9a21ba0ea166b070a850a8e47202b07d2 Mon Sep 17 00:00:00 2001 From: acdlite Date: Wed, 13 Sep 2023 22:35:27 +0000 Subject: [PATCH] useFormState: Reuse state from previous form submission (#27321) If a Server Action is passed to useFormState, the action may be submitted before it has hydrated. This will trigger a full page (MPA-style) navigation. We can transfer the form state to the next page by comparing the key path of the hook instance. `ReactServerDOMServer.decodeFormState` is used by the server to extract the form state from the submitted action. This value can then be passed as an option when rendering the new page. It must be passed during both SSR and hydration. ```js const boundAction = await decodeAction(formData, serverManifest); const result = await boundAction(); const formState = decodeFormState(result, formData, serverManifest); // SSR const response = createFromReadableStream(); const ssrStream = await renderToReadableStream(response, { formState }) // Hydration hydrateRoot(container, , { formState }); ``` If the `formState` option is omitted, then the state won't be transferred to the next page. However, it must be passed in both places, or in neither; misconfiguring will result in a hydration mismatch. (The `formState` option is currently prefixed with `experimental_`) DiffTrain build for [612b2b6601abb844248c384d1e288bb824b180b7](https://github.com/facebook/react/commit/612b2b6601abb844248c384d1e288bb824b180b7) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-dev.classic.js | 2 +- compiled/facebook-www/React-dev.modern.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 15 ++-- compiled/facebook-www/ReactART-dev.modern.js | 15 ++-- .../facebook-www/ReactART-prod.classic.js | 24 +++--- compiled/facebook-www/ReactART-prod.modern.js | 24 +++--- compiled/facebook-www/ReactDOM-dev.classic.js | 32 +++++-- compiled/facebook-www/ReactDOM-dev.modern.js | 31 +++++-- .../facebook-www/ReactDOM-prod.classic.js | 56 +++++++----- compiled/facebook-www/ReactDOM-prod.modern.js | 48 ++++++----- .../ReactDOM-profiling.classic.js | 42 +++++---- .../facebook-www/ReactDOM-profiling.modern.js | 34 +++++--- .../ReactDOMServer-dev.classic.js | 86 ++++++++++++++++--- .../facebook-www/ReactDOMServer-dev.modern.js | 86 ++++++++++++++++--- .../ReactDOMServer-prod.classic.js | 35 ++++++-- .../ReactDOMServer-prod.modern.js | 35 ++++++-- .../ReactDOMServerStreaming-dev.modern.js | 84 +++++++++++++++--- .../ReactDOMServerStreaming-prod.modern.js | 30 ++++++- .../ReactDOMTesting-dev.classic.js | 32 +++++-- .../ReactDOMTesting-dev.modern.js | 31 +++++-- .../ReactDOMTesting-prod.classic.js | 56 +++++++----- .../ReactDOMTesting-prod.modern.js | 48 ++++++----- .../ReactTestRenderer-dev.classic.js | 19 ++-- .../ReactTestRenderer-dev.modern.js | 19 ++-- 25 files changed, 637 insertions(+), 251 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index c9f13bb82a..ccf919c9f4 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -e5205658f40ad181279857dbb66e36b8ebcd8c0e +612b2b6601abb844248c384d1e288bb824b180b7 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index b3a07ddc34..17a1d9976f 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-classic-06724970"; +var ReactVersion = "18.3.0-www-classic-d9972e1c"; // 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 c28bba0ff8..67d526f925 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-modern-5ff32fc3"; +var ReactVersion = "18.3.0-www-modern-e51d03c9"; // 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 07cd17ebcd..ba05d3fcdd 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-classic-bb068684"; +var ReactVersion = "18.3.0-www-classic-4de809d2"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -28256,7 +28256,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -28294,6 +28295,7 @@ function FiberRootNode( this.hydrationCallbacks = null; } + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) { @@ -28345,7 +28347,8 @@ function createFiberRoot( // single type, like a DynamicHostConfig that is defined by the renderer. identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions var root = new FiberRootNode( @@ -28353,7 +28356,8 @@ function createFiberRoot( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); { @@ -28446,7 +28450,8 @@ function createContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); } function updateContainer(element, container, parentComponent, callback) { diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 0884c15009..701107904f 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -69,7 +69,7 @@ function _assertThisInitialized(self) { return self; } -var ReactVersion = "18.3.0-www-modern-dcc12554"; +var ReactVersion = "18.3.0-www-modern-d6fa9db4"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -27916,7 +27916,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -27954,6 +27955,7 @@ function FiberRootNode( this.hydrationCallbacks = null; } + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) { @@ -28005,7 +28007,8 @@ function createFiberRoot( // single type, like a DynamicHostConfig that is defined by the renderer. identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions var root = new FiberRootNode( @@ -28013,7 +28016,8 @@ function createFiberRoot( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); { @@ -28106,7 +28110,8 @@ function createContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); } function updateContainer(element, container, parentComponent, callback) { diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index 8a5566d1c8..dbc0127da1 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -9890,7 +9890,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -9924,6 +9925,7 @@ function FiberRootNode( this.pooledCache = null; this.pooledCacheLanes = 0; this.hydrationCallbacks = null; + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) for ( @@ -10036,7 +10038,7 @@ var slice = Array.prototype.slice, +_this$props.height, this._tagRef ); - _this$props = new FiberRootNode(this._surface, 0, !1, "", void 0); + _this$props = new FiberRootNode(this._surface, 0, !1, "", void 0, null); _this$props.hydrationCallbacks = null; enableTransitionTracing && (_this$props.transitionCallbacks = void 0); var JSCompiler_inline_result = createFiber(3, null, null, 0); @@ -10115,10 +10117,10 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-classic-06724970", + version: "18.3.0-www-classic-d9972e1c", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1302 = { +var internals$jscomp$inline_1303 = { bundleType: devToolsConfig$jscomp$inline_1130.bundleType, version: devToolsConfig$jscomp$inline_1130.version, rendererPackageName: devToolsConfig$jscomp$inline_1130.rendererPackageName, @@ -10146,19 +10148,19 @@ var internals$jscomp$inline_1302 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-06724970" + reconcilerVersion: "18.3.0-www-classic-d9972e1c" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1303 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1304 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1303.isDisabled && - hook$jscomp$inline_1303.supportsFiber + !hook$jscomp$inline_1304.isDisabled && + hook$jscomp$inline_1304.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1303.inject( - internals$jscomp$inline_1302 + (rendererID = hook$jscomp$inline_1304.inject( + internals$jscomp$inline_1303 )), - (injectedHook = hook$jscomp$inline_1303); + (injectedHook = hook$jscomp$inline_1304); } 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 948424e34d..4ce90e3213 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -9595,7 +9595,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -9629,6 +9630,7 @@ function FiberRootNode( this.pooledCache = null; this.pooledCacheLanes = 0; this.hydrationCallbacks = null; + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) for ( @@ -9701,7 +9703,7 @@ var slice = Array.prototype.slice, +_this$props.height, this._tagRef ); - _this$props = new FiberRootNode(this._surface, 0, !1, "", void 0); + _this$props = new FiberRootNode(this._surface, 0, !1, "", void 0, null); _this$props.hydrationCallbacks = null; enableTransitionTracing && (_this$props.transitionCallbacks = void 0); var JSCompiler_inline_result = createFiber(3, null, null, 0); @@ -9780,10 +9782,10 @@ var slice = Array.prototype.slice, return null; }, bundleType: 0, - version: "18.3.0-www-modern-ca0ea9bc", + version: "18.3.0-www-modern-06894e4c", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1282 = { +var internals$jscomp$inline_1283 = { bundleType: devToolsConfig$jscomp$inline_1110.bundleType, version: devToolsConfig$jscomp$inline_1110.version, rendererPackageName: devToolsConfig$jscomp$inline_1110.rendererPackageName, @@ -9811,19 +9813,19 @@ var internals$jscomp$inline_1282 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-ca0ea9bc" + reconcilerVersion: "18.3.0-www-modern-06894e4c" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1283 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1284 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1283.isDisabled && - hook$jscomp$inline_1283.supportsFiber + !hook$jscomp$inline_1284.isDisabled && + hook$jscomp$inline_1284.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1283.inject( - internals$jscomp$inline_1282 + (rendererID = hook$jscomp$inline_1284.inject( + internals$jscomp$inline_1283 )), - (injectedHook = hook$jscomp$inline_1283); + (injectedHook = hook$jscomp$inline_1284); } 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 07722c52da..ffd416dd63 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -33868,7 +33868,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -33906,6 +33907,7 @@ function FiberRootNode( this.hydrationCallbacks = null; } + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) { @@ -33957,7 +33959,8 @@ function createFiberRoot( // single type, like a DynamicHostConfig that is defined by the renderer. identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions var root = new FiberRootNode( @@ -33965,7 +33968,8 @@ function createFiberRoot( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); { @@ -34009,7 +34013,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-6066e798"; +var ReactVersion = "18.3.0-www-classic-8517a3ec"; function createPortal$1( children, @@ -34154,7 +34158,8 @@ function createContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); } function createHydrationContainer( @@ -34167,7 +34172,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { var hydrate = true; var root = createFiberRoot( @@ -34180,7 +34186,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); // TODO: Move this to FiberRoot constructor root.context = getContextForSubtree(null); // Schedule the initial render. In a hydration root, this is different from @@ -46016,6 +46023,7 @@ function hydrateRoot$1(container, initialChildren, options) { var identifierPrefix = ""; var onRecoverableError = defaultOnRecoverableError; var transitionCallbacks = null; + var formState = null; if (options !== null && options !== undefined) { if (options.unstable_strictMode === true) { @@ -46037,6 +46045,12 @@ function hydrateRoot$1(container, initialChildren, options) { if (options.unstable_transitionCallbacks !== undefined) { transitionCallbacks = options.unstable_transitionCallbacks; } + + if (enableAsyncActions && enableFormActions) { + if (options.experimental_formState !== undefined) { + formState = options.experimental_formState; + } + } } var root = createHydrationContainer( @@ -46049,7 +46063,8 @@ function hydrateRoot$1(container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); markContainerAsRoot(root.current, container); Dispatcher$1.current = ReactDOMClientDispatcher; // This can't be a comment node since hydration doesn't work on comment nodes anyway. @@ -46181,6 +46196,7 @@ function legacyCreateRootFromDOMContainer( false, // concurrentUpdatesByDefaultOverride, "", // identifierPrefix noopOnRecoverableError, // TODO(luna) Support hydration later + null, null ); container._reactRootContainer = root; diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 3af20d6363..4d43b3eb03 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -33713,7 +33713,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -33751,6 +33752,7 @@ function FiberRootNode( this.hydrationCallbacks = null; } + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) { @@ -33802,7 +33804,8 @@ function createFiberRoot( // single type, like a DynamicHostConfig that is defined by the renderer. identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions var root = new FiberRootNode( @@ -33810,7 +33813,8 @@ function createFiberRoot( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); { @@ -33854,7 +33858,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-aab107b3"; +var ReactVersion = "18.3.0-www-modern-d0f0d3ff"; function createPortal$1( children, @@ -33927,7 +33931,8 @@ function createContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); } function createHydrationContainer( @@ -33940,7 +33945,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { var hydrate = true; var root = createFiberRoot( @@ -33953,7 +33959,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); // TODO: Move this to FiberRoot constructor root.context = getContextForSubtree(null); // Schedule the initial render. In a hydration root, this is different from @@ -45518,6 +45525,7 @@ function hydrateRoot$1(container, initialChildren, options) { var identifierPrefix = ""; var onRecoverableError = defaultOnRecoverableError; var transitionCallbacks = null; + var formState = null; if (options !== null && options !== undefined) { if (options.unstable_strictMode === true) { @@ -45539,6 +45547,12 @@ function hydrateRoot$1(container, initialChildren, options) { if (options.unstable_transitionCallbacks !== undefined) { transitionCallbacks = options.unstable_transitionCallbacks; } + + if (enableAsyncActions && enableFormActions) { + if (options.experimental_formState !== undefined) { + formState = options.experimental_formState; + } + } } var root = createHydrationContainer( @@ -45551,7 +45565,8 @@ function hydrateRoot$1(container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); markContainerAsRoot(root.current, container); Dispatcher$1.current = ReactDOMClientDispatcher; // This can't be a comment node since hydration doesn't work on comment nodes anyway. diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 07a90af1c1..f39ebe54a4 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -11886,7 +11886,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -11920,6 +11921,7 @@ function FiberRootNode( this.pooledCache = null; this.pooledCacheLanes = 0; this.hydrationCallbacks = null; + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) for ( @@ -11941,14 +11943,16 @@ function createFiberRoot( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { containerInfo = new FiberRootNode( containerInfo, tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); containerInfo.hydrationCallbacks = hydrationCallbacks; enableTransitionTracing && @@ -12032,7 +12036,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { initialChildren = createFiberRoot( containerInfo, @@ -12044,7 +12049,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); initialChildren.context = getContextForSubtree(null); containerInfo = initialChildren.current; @@ -16541,6 +16547,7 @@ function legacyCreateRootFromDOMContainer( !1, "", noopOnRecoverableError, + null, null ); container._reactRootContainer = root$297; @@ -16569,6 +16576,7 @@ function legacyCreateRootFromDOMContainer( !1, "", noopOnRecoverableError, + null, null ); container._reactRootContainer = root$299; @@ -16648,17 +16656,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1778 = { +var devToolsConfig$jscomp$inline_1779 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-bdb60afd", + version: "18.3.0-www-classic-fd844ceb", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2135 = { - bundleType: devToolsConfig$jscomp$inline_1778.bundleType, - version: devToolsConfig$jscomp$inline_1778.version, - rendererPackageName: devToolsConfig$jscomp$inline_1778.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1778.rendererConfig, +var internals$jscomp$inline_2136 = { + bundleType: devToolsConfig$jscomp$inline_1779.bundleType, + version: devToolsConfig$jscomp$inline_1779.version, + rendererPackageName: devToolsConfig$jscomp$inline_1779.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1779.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16674,26 +16682,26 @@ var internals$jscomp$inline_2135 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1778.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1779.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-bdb60afd" + reconcilerVersion: "18.3.0-www-classic-fd844ceb" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2136 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2137 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2136.isDisabled && - hook$jscomp$inline_2136.supportsFiber + !hook$jscomp$inline_2137.isDisabled && + hook$jscomp$inline_2137.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2136.inject( - internals$jscomp$inline_2135 + (rendererID = hook$jscomp$inline_2137.inject( + internals$jscomp$inline_2136 )), - (injectedHook = hook$jscomp$inline_2136); + (injectedHook = hook$jscomp$inline_2137); } catch (err) {} } assign(Internals, { @@ -16738,7 +16746,8 @@ exports.createRoot = function (container, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = options.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -16810,7 +16819,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = initialChildren.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -17013,4 +17023,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-bdb60afd"; +exports.version = "18.3.0-www-classic-fd844ceb"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 1207929206..9d0142e56c 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -11690,7 +11690,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -11724,6 +11725,7 @@ function FiberRootNode( this.pooledCache = null; this.pooledCacheLanes = 0; this.hydrationCallbacks = null; + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) for ( @@ -11745,14 +11747,16 @@ function createFiberRoot( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { containerInfo = new FiberRootNode( containerInfo, tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); containerInfo.hydrationCallbacks = hydrationCallbacks; enableTransitionTracing && @@ -16174,17 +16178,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1737 = { +var devToolsConfig$jscomp$inline_1738 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-cb1eb6e1", + version: "18.3.0-www-modern-dca40e7a", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2099 = { - bundleType: devToolsConfig$jscomp$inline_1737.bundleType, - version: devToolsConfig$jscomp$inline_1737.version, - rendererPackageName: devToolsConfig$jscomp$inline_1737.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1737.rendererConfig, +var internals$jscomp$inline_2100 = { + bundleType: devToolsConfig$jscomp$inline_1738.bundleType, + version: devToolsConfig$jscomp$inline_1738.version, + rendererPackageName: devToolsConfig$jscomp$inline_1738.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1738.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16201,26 +16205,26 @@ var internals$jscomp$inline_2099 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1737.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1738.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-cb1eb6e1" + reconcilerVersion: "18.3.0-www-modern-dca40e7a" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2100 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2101 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2100.isDisabled && - hook$jscomp$inline_2100.supportsFiber + !hook$jscomp$inline_2101.isDisabled && + hook$jscomp$inline_2101.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2100.inject( - internals$jscomp$inline_2099 + (rendererID = hook$jscomp$inline_2101.inject( + internals$jscomp$inline_2100 )), - (injectedHook = hook$jscomp$inline_2100); + (injectedHook = hook$jscomp$inline_2101); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -16258,7 +16262,8 @@ exports.createRoot = function (container, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = options.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -16304,7 +16309,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); initialChildren.context = emptyContextObject; options = initialChildren.current; @@ -16468,4 +16474,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-cb1eb6e1"; +exports.version = "18.3.0-www-modern-dca40e7a"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 4f49fe7c57..44543ce199 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -12651,7 +12651,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -12685,6 +12686,7 @@ function FiberRootNode( this.pooledCache = null; this.pooledCacheLanes = 0; this.hydrationCallbacks = null; + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) for ( @@ -12710,14 +12712,16 @@ function createFiberRoot( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { containerInfo = new FiberRootNode( containerInfo, tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); containerInfo.hydrationCallbacks = hydrationCallbacks; enableTransitionTracing && @@ -12802,7 +12806,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { initialChildren = createFiberRoot( containerInfo, @@ -12814,7 +12819,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); initialChildren.context = getContextForSubtree(null); containerInfo = initialChildren.current; @@ -17316,6 +17322,7 @@ function legacyCreateRootFromDOMContainer( !1, "", noopOnRecoverableError, + null, null ); container._reactRootContainer = root$318; @@ -17344,6 +17351,7 @@ function legacyCreateRootFromDOMContainer( !1, "", noopOnRecoverableError, + null, null ); container._reactRootContainer = root$320; @@ -17423,10 +17431,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1863 = { +var devToolsConfig$jscomp$inline_1864 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-e8e035f8", + version: "18.3.0-www-classic-1ae9bd91", rendererPackageName: "react-dom" }; (function (internals) { @@ -17444,10 +17452,10 @@ var devToolsConfig$jscomp$inline_1863 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1863.bundleType, - version: devToolsConfig$jscomp$inline_1863.version, - rendererPackageName: devToolsConfig$jscomp$inline_1863.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1863.rendererConfig, + bundleType: devToolsConfig$jscomp$inline_1864.bundleType, + version: devToolsConfig$jscomp$inline_1864.version, + rendererPackageName: devToolsConfig$jscomp$inline_1864.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1864.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -17463,14 +17471,14 @@ var devToolsConfig$jscomp$inline_1863 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1863.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1864.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-e8e035f8" + reconcilerVersion: "18.3.0-www-classic-1ae9bd91" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -17514,7 +17522,8 @@ exports.createRoot = function (container, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = options.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -17586,7 +17595,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = initialChildren.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -17789,7 +17799,7 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-e8e035f8"; +exports.version = "18.3.0-www-classic-1ae9bd91"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index 9773dfae72..3c1fa4d84a 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -12449,7 +12449,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -12483,6 +12484,7 @@ function FiberRootNode( this.pooledCache = null; this.pooledCacheLanes = 0; this.hydrationCallbacks = null; + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) for ( @@ -12508,14 +12510,16 @@ function createFiberRoot( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { containerInfo = new FiberRootNode( containerInfo, tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); containerInfo.hydrationCallbacks = hydrationCallbacks; enableTransitionTracing && @@ -16943,10 +16947,10 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1822 = { +var devToolsConfig$jscomp$inline_1823 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-4b32ae1f", + version: "18.3.0-www-modern-e59033a4", rendererPackageName: "react-dom" }; (function (internals) { @@ -16964,10 +16968,10 @@ var devToolsConfig$jscomp$inline_1822 = { } catch (err) {} return hook.checkDCE ? !0 : !1; })({ - bundleType: devToolsConfig$jscomp$inline_1822.bundleType, - version: devToolsConfig$jscomp$inline_1822.version, - rendererPackageName: devToolsConfig$jscomp$inline_1822.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1822.rendererConfig, + 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, @@ -16984,14 +16988,14 @@ var devToolsConfig$jscomp$inline_1822 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1822.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1823.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-4b32ae1f" + reconcilerVersion: "18.3.0-www-modern-e59033a4" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -17028,7 +17032,8 @@ exports.createRoot = function (container, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = options.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -17074,7 +17079,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); initialChildren.context = emptyContextObject; options = initialChildren.current; @@ -17238,7 +17244,7 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-4b32ae1f"; +exports.version = "18.3.0-www-modern-e59033a4"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js index 01a35eba69..6c0928e737 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-49aaaaa7"; +var ReactVersion = "18.3.0-www-classic-71d6b3f3"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -8930,6 +8930,8 @@ var objectIs = typeof Object.is === "function" ? Object.is : is; // $FlowFixMe[m var currentlyRenderingComponent = null; var currentlyRenderingTask = null; +var currentlyRenderingRequest = null; +var currentlyRenderingKeyPath = null; var firstWorkInProgressHook = null; var workInProgressHook = null; // Whether the work-in-progress hook is a re-rendered hook @@ -9063,9 +9065,17 @@ function createWorkInProgressHook() { return workInProgressHook; } -function prepareToUseHooks(task, componentIdentity, prevThenableState) { +function prepareToUseHooks( + request, + task, + keyPath, + componentIdentity, + prevThenableState +) { currentlyRenderingComponent = componentIdentity; currentlyRenderingTask = task; + currentlyRenderingRequest = request; + currentlyRenderingKeyPath = keyPath; { isInHookUserCodeInDev = false; @@ -9136,6 +9146,8 @@ function resetHooksState() { currentlyRenderingComponent = null; currentlyRenderingTask = null; + currentlyRenderingRequest = null; + currentlyRenderingKeyPath = null; didScheduleRenderPhaseUpdate = false; firstWorkInProgressHook = null; numberOfReRenders = 0; @@ -9416,15 +9428,42 @@ function useOptimistic(passthrough, reducer) { } function useFormState(action, initialState, permalink) { - resolveCurrentlyRenderingComponent(); // Count the number of useFormState hooks per component. - // TODO: We should also track which hook matches the form state passed at - // the root, if any. Matching is not yet implemented. + resolveCurrentlyRenderingComponent(); // Count the number of useFormState hooks per component. We also use this to + // track the position of this useFormState hook relative to the other ones in + // this component, so we can generate a unique key for each one. - formStateCounter++; // Bind the initial state to the first argument of the action. - // TODO: Use the keypath (or permalink) to check if there's matching state - // from the previous page. + var formStateHookIndex = formStateCounter++; + var request = currentlyRenderingRequest; // Append a node to the key path that represents the form state hook. - var boundAction = action.bind(null, initialState); // Wrap the action so the return value is void. + var componentKey = currentlyRenderingKeyPath; + var key = [componentKey, null, formStateHookIndex]; + var keyJSON = JSON.stringify(key); // Get the form state. If we received form state from a previous page, then + // we should reuse that, if the action identity matches. Otherwise we'll use + // the initial state argument. We emit a comment marker into the stream + // that indicates whether the state was reused. + + var state; + var postbackFormState = getFormState(request); + + if (postbackFormState !== null) { + var postbackKey = postbackFormState[1]; // TODO: Compare the action identity, too + // TODO: If a permalink is used, disregard the key and compare that instead. + + if (keyJSON === postbackKey) { + // This was a match. + formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form. + + state = postbackFormState[0]; + } else { + state = initialState; + } + } else { + // TODO: As an optimization, Fizz should only emit these markers if form + // state is passed at the root. + state = initialState; + } // Bind the state to the first argument of the action. + + var boundAction = action.bind(null, state); // Wrap the action so the return value is void. var dispatch = function (payload) { boundAction(payload); @@ -9434,7 +9473,12 @@ function useFormState(action, initialState, permalink) { // $FlowIgnore[prop-missing] dispatch.$$FORM_ACTION = function (prefix) { // $FlowIgnore[prop-missing] - var metadata = boundAction.$$FORM_ACTION(prefix); // Override the action URL + var metadata = boundAction.$$FORM_ACTION(prefix); + var formData = metadata.data; + + if (formData) { + formData.append("$ACTION_KEY", keyJSON); + } // Override the action URL if (permalink !== undefined) { { @@ -9448,7 +9492,7 @@ function useFormState(action, initialState, permalink) { }; } - return [initialState, dispatch]; + return [state, dispatch]; } function useId() { @@ -9654,7 +9698,8 @@ function createRequest( onShellReady, onShellError, onFatalError, - onPostpone + onPostpone, + formState ) { prepareHostDispatcher(); var pingedTasks = []; @@ -9686,7 +9731,8 @@ function createRequest( onAllReady: onAllReady === undefined ? noop : onAllReady, onShellReady: onShellReady === undefined ? noop : onShellReady, onShellError: onShellError === undefined ? noop : onShellError, - onFatalError: onFatalError === undefined ? noop : onFatalError + onFatalError: onFatalError === undefined ? noop : onFatalError, + formState: formState === undefined ? null : formState }; // This segment represents the root fallback. var rootSegment = createPendingSegment( @@ -10106,13 +10152,20 @@ function shouldConstruct(Component) { function renderWithHooks( request, task, + keyPath, prevThenableState, Component, props, secondArg ) { var componentIdentity = {}; - prepareToUseHooks(task, componentIdentity, prevThenableState); + prepareToUseHooks( + request, + task, + keyPath, + componentIdentity, + prevThenableState + ); var result = Component(props, secondArg); return finishHooks(Component, props, result, secondArg); } @@ -10224,6 +10277,7 @@ function renderIndeterminateComponent( var value = renderWithHooks( request, task, + keyPath, prevThenableState, Component, props, @@ -10431,6 +10485,7 @@ function renderForwardRef( var children = renderWithHooks( request, task, + keyPath, prevThenableState, type.render, props, @@ -12017,6 +12072,9 @@ function abort(request, reason) { function flushResources(request) { enqueueFlush(request); } +function getFormState(request) { + return request.formState; +} function getResumableState(request) { return request.resumableState; } diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index ad79ea9471..3c64a78a0a 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-b00edc72"; +var ReactVersion = "18.3.0-www-modern-5b6fb822"; // This refers to a WWW module. var warningWWW = require("warning"); @@ -8689,6 +8689,8 @@ var objectIs = typeof Object.is === "function" ? Object.is : is; // $FlowFixMe[m var currentlyRenderingComponent = null; var currentlyRenderingTask = null; +var currentlyRenderingRequest = null; +var currentlyRenderingKeyPath = null; var firstWorkInProgressHook = null; var workInProgressHook = null; // Whether the work-in-progress hook is a re-rendered hook @@ -8822,9 +8824,17 @@ function createWorkInProgressHook() { return workInProgressHook; } -function prepareToUseHooks(task, componentIdentity, prevThenableState) { +function prepareToUseHooks( + request, + task, + keyPath, + componentIdentity, + prevThenableState +) { currentlyRenderingComponent = componentIdentity; currentlyRenderingTask = task; + currentlyRenderingRequest = request; + currentlyRenderingKeyPath = keyPath; { isInHookUserCodeInDev = false; @@ -8895,6 +8905,8 @@ function resetHooksState() { currentlyRenderingComponent = null; currentlyRenderingTask = null; + currentlyRenderingRequest = null; + currentlyRenderingKeyPath = null; didScheduleRenderPhaseUpdate = false; firstWorkInProgressHook = null; numberOfReRenders = 0; @@ -9175,15 +9187,42 @@ function useOptimistic(passthrough, reducer) { } function useFormState(action, initialState, permalink) { - resolveCurrentlyRenderingComponent(); // Count the number of useFormState hooks per component. - // TODO: We should also track which hook matches the form state passed at - // the root, if any. Matching is not yet implemented. + resolveCurrentlyRenderingComponent(); // Count the number of useFormState hooks per component. We also use this to + // track the position of this useFormState hook relative to the other ones in + // this component, so we can generate a unique key for each one. - formStateCounter++; // Bind the initial state to the first argument of the action. - // TODO: Use the keypath (or permalink) to check if there's matching state - // from the previous page. + var formStateHookIndex = formStateCounter++; + var request = currentlyRenderingRequest; // Append a node to the key path that represents the form state hook. - var boundAction = action.bind(null, initialState); // Wrap the action so the return value is void. + var componentKey = currentlyRenderingKeyPath; + var key = [componentKey, null, formStateHookIndex]; + var keyJSON = JSON.stringify(key); // Get the form state. If we received form state from a previous page, then + // we should reuse that, if the action identity matches. Otherwise we'll use + // the initial state argument. We emit a comment marker into the stream + // that indicates whether the state was reused. + + var state; + var postbackFormState = getFormState(request); + + if (postbackFormState !== null) { + var postbackKey = postbackFormState[1]; // TODO: Compare the action identity, too + // TODO: If a permalink is used, disregard the key and compare that instead. + + if (keyJSON === postbackKey) { + // This was a match. + formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form. + + state = postbackFormState[0]; + } else { + state = initialState; + } + } else { + // TODO: As an optimization, Fizz should only emit these markers if form + // state is passed at the root. + state = initialState; + } // Bind the state to the first argument of the action. + + var boundAction = action.bind(null, state); // Wrap the action so the return value is void. var dispatch = function (payload) { boundAction(payload); @@ -9193,7 +9232,12 @@ function useFormState(action, initialState, permalink) { // $FlowIgnore[prop-missing] dispatch.$$FORM_ACTION = function (prefix) { // $FlowIgnore[prop-missing] - var metadata = boundAction.$$FORM_ACTION(prefix); // Override the action URL + var metadata = boundAction.$$FORM_ACTION(prefix); + var formData = metadata.data; + + if (formData) { + formData.append("$ACTION_KEY", keyJSON); + } // Override the action URL if (permalink !== undefined) { { @@ -9207,7 +9251,7 @@ function useFormState(action, initialState, permalink) { }; } - return [initialState, dispatch]; + return [state, dispatch]; } function useId() { @@ -9413,7 +9457,8 @@ function createRequest( onShellReady, onShellError, onFatalError, - onPostpone + onPostpone, + formState ) { prepareHostDispatcher(); var pingedTasks = []; @@ -9445,7 +9490,8 @@ function createRequest( onAllReady: onAllReady === undefined ? noop : onAllReady, onShellReady: onShellReady === undefined ? noop : onShellReady, onShellError: onShellError === undefined ? noop : onShellError, - onFatalError: onFatalError === undefined ? noop : onFatalError + onFatalError: onFatalError === undefined ? noop : onFatalError, + formState: formState === undefined ? null : formState }; // This segment represents the root fallback. var rootSegment = createPendingSegment( @@ -9865,13 +9911,20 @@ function shouldConstruct(Component) { function renderWithHooks( request, task, + keyPath, prevThenableState, Component, props, secondArg ) { var componentIdentity = {}; - prepareToUseHooks(task, componentIdentity, prevThenableState); + prepareToUseHooks( + request, + task, + keyPath, + componentIdentity, + prevThenableState + ); var result = Component(props, secondArg); return finishHooks(Component, props, result, secondArg); } @@ -9961,6 +10014,7 @@ function renderIndeterminateComponent( var value = renderWithHooks( request, task, + keyPath, prevThenableState, Component, props, @@ -10179,6 +10233,7 @@ function renderForwardRef( var children = renderWithHooks( request, task, + keyPath, prevThenableState, type.render, props, @@ -11765,6 +11820,9 @@ function abort(request, reason) { function flushResources(request) { enqueueFlush(request); } +function getFormState(request) { + return request.formState; +} function getResumableState(request) { return request.resumableState; } diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js index fc8cf4e3e0..161fd5a02a 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.classic.js +++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js @@ -2583,6 +2583,8 @@ function is(x, y) { var objectIs = "function" === typeof Object.is ? Object.is : is, currentlyRenderingComponent = null, currentlyRenderingTask = null, + currentlyRenderingRequest = null, + currentlyRenderingKeyPath = null, firstWorkInProgressHook = null, workInProgressHook = null, isReRender = !1, @@ -2633,7 +2635,11 @@ function getThenableStateAfterSuspending() { return state; } function resetHooksState() { - currentlyRenderingTask = currentlyRenderingComponent = null; + currentlyRenderingKeyPath = + currentlyRenderingRequest = + currentlyRenderingTask = + currentlyRenderingComponent = + null; didScheduleRenderPhaseUpdate = !1; firstWorkInProgressHook = null; numberOfReRenders = 0; @@ -2736,11 +2742,24 @@ function useFormState(action, initialState, permalink) { boundAction(payload); } resolveCurrentlyRenderingComponent(); - formStateCounter++; + var formStateHookIndex = formStateCounter++, + request = currentlyRenderingRequest, + keyJSON = JSON.stringify([ + currentlyRenderingKeyPath, + null, + formStateHookIndex + ]); + request = request.formState; + null !== request && + keyJSON === request[1] && + ((formStateMatchingIndex = formStateHookIndex), + (initialState = request[0])); var boundAction = action.bind(null, initialState); "function" === typeof boundAction.$$FORM_ACTION && (dispatch.$$FORM_ACTION = function (prefix) { prefix = boundAction.$$FORM_ACTION(prefix); + var formData = prefix.data; + formData && formData.append("$ACTION_KEY", keyJSON); void 0 !== permalink && (prefix.action = permalink + ""); return prefix; }); @@ -2870,7 +2889,8 @@ function createRequest( onShellReady, onShellError, onFatalError, - onPostpone + onPostpone, + formState ) { ReactDOMCurrentDispatcher.current = ReactDOMServerDispatcher; var pingedTasks = [], @@ -2900,7 +2920,8 @@ function createRequest( onAllReady: void 0 === onAllReady ? noop : onAllReady, onShellReady: void 0 === onShellReady ? noop : onShellReady, onShellError: void 0 === onShellError ? noop : onShellError, - onFatalError: void 0 === onFatalError ? noop : onFatalError + onFatalError: void 0 === onFatalError ? noop : onFatalError, + formState: void 0 === formState ? null : formState }; renderState = createPendingSegment( resumableState, @@ -3181,6 +3202,8 @@ function renderElement( (contextKey = getMaskedContext(type, task.legacyContext)), (currentlyRenderingComponent = {}), (currentlyRenderingTask = task), + (currentlyRenderingRequest = request), + (currentlyRenderingKeyPath = keyPath), (formStateCounter = localIdCounter = 0), (formStateMatchingIndex = -1), (thenableIndexCounter = 0), @@ -3388,6 +3411,8 @@ function renderElement( type = type.render; currentlyRenderingComponent = {}; currentlyRenderingTask = task; + currentlyRenderingRequest = request; + currentlyRenderingKeyPath = keyPath; formStateCounter = localIdCounter = 0; formStateMatchingIndex = -1; thenableIndexCounter = 0; @@ -4505,4 +4530,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "18.3.0-www-classic-019477d4"; +exports.version = "18.3.0-www-classic-53a2640c"; diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js index ab14ec9744..7511181f29 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js @@ -2575,6 +2575,8 @@ function is(x, y) { var objectIs = "function" === typeof Object.is ? Object.is : is, currentlyRenderingComponent = null, currentlyRenderingTask = null, + currentlyRenderingRequest = null, + currentlyRenderingKeyPath = null, firstWorkInProgressHook = null, workInProgressHook = null, isReRender = !1, @@ -2625,7 +2627,11 @@ function getThenableStateAfterSuspending() { return state; } function resetHooksState() { - currentlyRenderingTask = currentlyRenderingComponent = null; + currentlyRenderingKeyPath = + currentlyRenderingRequest = + currentlyRenderingTask = + currentlyRenderingComponent = + null; didScheduleRenderPhaseUpdate = !1; firstWorkInProgressHook = null; numberOfReRenders = 0; @@ -2728,11 +2734,24 @@ function useFormState(action, initialState, permalink) { boundAction(payload); } resolveCurrentlyRenderingComponent(); - formStateCounter++; + var formStateHookIndex = formStateCounter++, + request = currentlyRenderingRequest, + keyJSON = JSON.stringify([ + currentlyRenderingKeyPath, + null, + formStateHookIndex + ]); + request = request.formState; + null !== request && + keyJSON === request[1] && + ((formStateMatchingIndex = formStateHookIndex), + (initialState = request[0])); var boundAction = action.bind(null, initialState); "function" === typeof boundAction.$$FORM_ACTION && (dispatch.$$FORM_ACTION = function (prefix) { prefix = boundAction.$$FORM_ACTION(prefix); + var formData = prefix.data; + formData && formData.append("$ACTION_KEY", keyJSON); void 0 !== permalink && (prefix.action = permalink + ""); return prefix; }); @@ -2862,7 +2881,8 @@ function createRequest( onShellReady, onShellError, onFatalError, - onPostpone + onPostpone, + formState ) { ReactDOMCurrentDispatcher.current = ReactDOMServerDispatcher; var pingedTasks = [], @@ -2892,7 +2912,8 @@ function createRequest( onAllReady: void 0 === onAllReady ? noop : onAllReady, onShellReady: void 0 === onShellReady ? noop : onShellReady, onShellError: void 0 === onShellError ? noop : onShellError, - onFatalError: void 0 === onFatalError ? noop : onFatalError + onFatalError: void 0 === onFatalError ? noop : onFatalError, + formState: void 0 === formState ? null : formState }; renderState = createPendingSegment( resumableState, @@ -3157,6 +3178,8 @@ function renderElement( } else (currentlyRenderingComponent = {}), (currentlyRenderingTask = task), + (currentlyRenderingRequest = request), + (currentlyRenderingKeyPath = keyPath), (formStateCounter = localIdCounter = 0), (formStateMatchingIndex = -1), (thenableIndexCounter = 0), @@ -3361,6 +3384,8 @@ function renderElement( type = type.render; currentlyRenderingComponent = {}; currentlyRenderingTask = task; + currentlyRenderingRequest = request; + currentlyRenderingKeyPath = keyPath; formStateCounter = localIdCounter = 0; formStateMatchingIndex = -1; thenableIndexCounter = 0; @@ -4472,4 +4497,4 @@ exports.renderToString = function (children, options) { 'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server' ); }; -exports.version = "18.3.0-www-modern-3e1a78b1"; +exports.version = "18.3.0-www-modern-49e9de7a"; diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js index 31d4c5bf4a..dc5ffd4038 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js @@ -8595,6 +8595,8 @@ var objectIs = typeof Object.is === "function" ? Object.is : is; // $FlowFixMe[m var currentlyRenderingComponent = null; var currentlyRenderingTask = null; +var currentlyRenderingRequest = null; +var currentlyRenderingKeyPath = null; var firstWorkInProgressHook = null; var workInProgressHook = null; // Whether the work-in-progress hook is a re-rendered hook @@ -8728,9 +8730,17 @@ function createWorkInProgressHook() { return workInProgressHook; } -function prepareToUseHooks(task, componentIdentity, prevThenableState) { +function prepareToUseHooks( + request, + task, + keyPath, + componentIdentity, + prevThenableState +) { currentlyRenderingComponent = componentIdentity; currentlyRenderingTask = task; + currentlyRenderingRequest = request; + currentlyRenderingKeyPath = keyPath; { isInHookUserCodeInDev = false; @@ -8801,6 +8811,8 @@ function resetHooksState() { currentlyRenderingComponent = null; currentlyRenderingTask = null; + currentlyRenderingRequest = null; + currentlyRenderingKeyPath = null; didScheduleRenderPhaseUpdate = false; firstWorkInProgressHook = null; numberOfReRenders = 0; @@ -9081,15 +9093,42 @@ function useOptimistic(passthrough, reducer) { } function useFormState(action, initialState, permalink) { - resolveCurrentlyRenderingComponent(); // Count the number of useFormState hooks per component. - // TODO: We should also track which hook matches the form state passed at - // the root, if any. Matching is not yet implemented. + resolveCurrentlyRenderingComponent(); // Count the number of useFormState hooks per component. We also use this to + // track the position of this useFormState hook relative to the other ones in + // this component, so we can generate a unique key for each one. - formStateCounter++; // Bind the initial state to the first argument of the action. - // TODO: Use the keypath (or permalink) to check if there's matching state - // from the previous page. + var formStateHookIndex = formStateCounter++; + var request = currentlyRenderingRequest; // Append a node to the key path that represents the form state hook. - var boundAction = action.bind(null, initialState); // Wrap the action so the return value is void. + var componentKey = currentlyRenderingKeyPath; + var key = [componentKey, null, formStateHookIndex]; + var keyJSON = JSON.stringify(key); // Get the form state. If we received form state from a previous page, then + // we should reuse that, if the action identity matches. Otherwise we'll use + // the initial state argument. We emit a comment marker into the stream + // that indicates whether the state was reused. + + var state; + var postbackFormState = getFormState(request); + + if (postbackFormState !== null) { + var postbackKey = postbackFormState[1]; // TODO: Compare the action identity, too + // TODO: If a permalink is used, disregard the key and compare that instead. + + if (keyJSON === postbackKey) { + // This was a match. + formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form. + + state = postbackFormState[0]; + } else { + state = initialState; + } + } else { + // TODO: As an optimization, Fizz should only emit these markers if form + // state is passed at the root. + state = initialState; + } // Bind the state to the first argument of the action. + + var boundAction = action.bind(null, state); // Wrap the action so the return value is void. var dispatch = function (payload) { boundAction(payload); @@ -9099,7 +9138,12 @@ function useFormState(action, initialState, permalink) { // $FlowIgnore[prop-missing] dispatch.$$FORM_ACTION = function (prefix) { // $FlowIgnore[prop-missing] - var metadata = boundAction.$$FORM_ACTION(prefix); // Override the action URL + var metadata = boundAction.$$FORM_ACTION(prefix); + var formData = metadata.data; + + if (formData) { + formData.append("$ACTION_KEY", keyJSON); + } // Override the action URL if (permalink !== undefined) { { @@ -9113,7 +9157,7 @@ function useFormState(action, initialState, permalink) { }; } - return [initialState, dispatch]; + return [state, dispatch]; } function useId() { @@ -9319,7 +9363,8 @@ function createRequest( onShellReady, onShellError, onFatalError, - onPostpone + onPostpone, + formState ) { prepareHostDispatcher(); var pingedTasks = []; @@ -9351,7 +9396,8 @@ function createRequest( onAllReady: onAllReady === undefined ? noop : onAllReady, onShellReady: onShellReady === undefined ? noop : onShellReady, onShellError: onShellError === undefined ? noop : onShellError, - onFatalError: onFatalError === undefined ? noop : onFatalError + onFatalError: onFatalError === undefined ? noop : onFatalError, + formState: formState === undefined ? null : formState }; // This segment represents the root fallback. var rootSegment = createPendingSegment( @@ -9768,13 +9814,20 @@ function shouldConstruct(Component) { function renderWithHooks( request, task, + keyPath, prevThenableState, Component, props, secondArg ) { var componentIdentity = {}; - prepareToUseHooks(task, componentIdentity, prevThenableState); + prepareToUseHooks( + request, + task, + keyPath, + componentIdentity, + prevThenableState + ); var result = Component(props, secondArg); return finishHooks(Component, props, result, secondArg); } @@ -9864,6 +9917,7 @@ function renderIndeterminateComponent( var value = renderWithHooks( request, task, + keyPath, prevThenableState, Component, props, @@ -10082,6 +10136,7 @@ function renderForwardRef( var children = renderWithHooks( request, task, + keyPath, prevThenableState, type.render, props, @@ -11655,6 +11710,9 @@ function abort(request, reason) { function flushResources(request) { enqueueFlush(request); } +function getFormState(request) { + return request.formState; +} function getResumableState(request) { return request.resumableState; } diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js index e1c6d8983c..5144459db5 100644 --- a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js +++ b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js @@ -2423,6 +2423,8 @@ function is(x, y) { var objectIs = "function" === typeof Object.is ? Object.is : is, currentlyRenderingComponent = null, currentlyRenderingTask = null, + currentlyRenderingRequest = null, + currentlyRenderingKeyPath = null, firstWorkInProgressHook = null, workInProgressHook = null, isReRender = !1, @@ -2476,7 +2478,11 @@ function getThenableStateAfterSuspending() { return state; } function resetHooksState() { - currentlyRenderingTask = currentlyRenderingComponent = null; + currentlyRenderingKeyPath = + currentlyRenderingRequest = + currentlyRenderingTask = + currentlyRenderingComponent = + null; didScheduleRenderPhaseUpdate = !1; firstWorkInProgressHook = null; numberOfReRenders = 0; @@ -2584,11 +2590,24 @@ function useFormState(action, initialState, permalink) { boundAction(payload); } resolveCurrentlyRenderingComponent(); - formStateCounter++; + var formStateHookIndex = formStateCounter++, + request = currentlyRenderingRequest, + keyJSON = JSON.stringify([ + currentlyRenderingKeyPath, + null, + formStateHookIndex + ]); + request = request.formState; + null !== request && + keyJSON === request[1] && + ((formStateMatchingIndex = formStateHookIndex), + (initialState = request[0])); var boundAction = action.bind(null, initialState); "function" === typeof boundAction.$$FORM_ACTION && (dispatch.$$FORM_ACTION = function (prefix) { prefix = boundAction.$$FORM_ACTION(prefix); + var formData = prefix.data; + formData && formData.append("$ACTION_KEY", keyJSON); void 0 !== permalink && (prefix.action = permalink + ""); return prefix; }); @@ -2953,6 +2972,8 @@ function renderElement( } else (currentlyRenderingComponent = {}), (currentlyRenderingTask = task), + (currentlyRenderingRequest = request), + (currentlyRenderingKeyPath = keyPath), (formStateCounter = localIdCounter = 0), (formStateMatchingIndex = -1), (thenableIndexCounter = 0), @@ -3156,6 +3177,8 @@ function renderElement( type = type.render; currentlyRenderingComponent = {}; currentlyRenderingTask = task; + currentlyRenderingRequest = request; + currentlyRenderingKeyPath = keyPath; formStateCounter = localIdCounter = 0; formStateMatchingIndex = -1; thenableIndexCounter = 0; @@ -4432,7 +4455,8 @@ exports.renderToStream = function (children, options) { onAllReady: noop, onShellReady: noop, onShellError: noop, - onFatalError: noop + onFatalError: noop, + formState: null }; bootstrapScripts = createPendingSegment( bootstrapScriptContent, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index 8d7539955f..3f6672e930 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -34485,7 +34485,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -34523,6 +34524,7 @@ function FiberRootNode( this.hydrationCallbacks = null; } + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) { @@ -34574,7 +34576,8 @@ function createFiberRoot( // single type, like a DynamicHostConfig that is defined by the renderer. identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions var root = new FiberRootNode( @@ -34582,7 +34585,8 @@ function createFiberRoot( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); { @@ -34626,7 +34630,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-f857f390"; +var ReactVersion = "18.3.0-www-classic-3d9f6d60"; function createPortal$1( children, @@ -34771,7 +34775,8 @@ function createContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); } function createHydrationContainer( @@ -34784,7 +34789,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { var hydrate = true; var root = createFiberRoot( @@ -34797,7 +34803,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); // TODO: Move this to FiberRoot constructor root.context = getContextForSubtree(null); // Schedule the initial render. In a hydration root, this is different from @@ -46765,6 +46772,7 @@ function hydrateRoot$1(container, initialChildren, options) { var identifierPrefix = ""; var onRecoverableError = defaultOnRecoverableError; var transitionCallbacks = null; + var formState = null; if (options !== null && options !== undefined) { if (options.unstable_strictMode === true) { @@ -46786,6 +46794,12 @@ function hydrateRoot$1(container, initialChildren, options) { if (options.unstable_transitionCallbacks !== undefined) { transitionCallbacks = options.unstable_transitionCallbacks; } + + if (enableAsyncActions && enableFormActions) { + if (options.experimental_formState !== undefined) { + formState = options.experimental_formState; + } + } } var root = createHydrationContainer( @@ -46798,7 +46812,8 @@ function hydrateRoot$1(container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); markContainerAsRoot(root.current, container); Dispatcher$1.current = ReactDOMClientDispatcher; // This can't be a comment node since hydration doesn't work on comment nodes anyway. @@ -46930,6 +46945,7 @@ function legacyCreateRootFromDOMContainer( false, // concurrentUpdatesByDefaultOverride, "", // identifierPrefix noopOnRecoverableError, // TODO(luna) Support hydration later + null, null ); container._reactRootContainer = root; diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index a529f914d3..b7c7bd26c3 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -34330,7 +34330,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -34368,6 +34369,7 @@ function FiberRootNode( this.hydrationCallbacks = null; } + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) { @@ -34419,7 +34421,8 @@ function createFiberRoot( // single type, like a DynamicHostConfig that is defined by the renderer. identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions var root = new FiberRootNode( @@ -34427,7 +34430,8 @@ function createFiberRoot( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); { @@ -34471,7 +34475,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-6b264517"; +var ReactVersion = "18.3.0-www-modern-6c1a2a23"; function createPortal$1( children, @@ -34544,7 +34548,8 @@ function createContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); } function createHydrationContainer( @@ -34557,7 +34562,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { var hydrate = true; var root = createFiberRoot( @@ -34570,7 +34576,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); // TODO: Move this to FiberRoot constructor root.context = getContextForSubtree(null); // Schedule the initial render. In a hydration root, this is different from @@ -46267,6 +46274,7 @@ function hydrateRoot$1(container, initialChildren, options) { var identifierPrefix = ""; var onRecoverableError = defaultOnRecoverableError; var transitionCallbacks = null; + var formState = null; if (options !== null && options !== undefined) { if (options.unstable_strictMode === true) { @@ -46288,6 +46296,12 @@ function hydrateRoot$1(container, initialChildren, options) { if (options.unstable_transitionCallbacks !== undefined) { transitionCallbacks = options.unstable_transitionCallbacks; } + + if (enableAsyncActions && enableFormActions) { + if (options.experimental_formState !== undefined) { + formState = options.experimental_formState; + } + } } var root = createHydrationContainer( @@ -46300,7 +46314,8 @@ function hydrateRoot$1(container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); markContainerAsRoot(root.current, container); Dispatcher$1.current = ReactDOMClientDispatcher; // This can't be a comment node since hydration doesn't work on comment nodes anyway. diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index bd6296492a..e5bbf15210 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -12158,7 +12158,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -12192,6 +12193,7 @@ function FiberRootNode( this.pooledCache = null; this.pooledCacheLanes = 0; this.hydrationCallbacks = null; + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) for ( @@ -12213,14 +12215,16 @@ function createFiberRoot( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { containerInfo = new FiberRootNode( containerInfo, tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); containerInfo.hydrationCallbacks = hydrationCallbacks; enableTransitionTracing && @@ -12304,7 +12308,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { initialChildren = createFiberRoot( containerInfo, @@ -12316,7 +12321,8 @@ function createHydrationContainer( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ); initialChildren.context = getContextForSubtree(null); containerInfo = initialChildren.current; @@ -16870,6 +16876,7 @@ function legacyCreateRootFromDOMContainer( !1, "", noopOnRecoverableError, + null, null ); container._reactRootContainer = root$298; @@ -16898,6 +16905,7 @@ function legacyCreateRootFromDOMContainer( !1, "", noopOnRecoverableError, + null, null ); container._reactRootContainer = root$300; @@ -16977,17 +16985,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1807 = { +var devToolsConfig$jscomp$inline_1808 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-eeba9077", + version: "18.3.0-www-classic-8f569ab3", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2169 = { - bundleType: devToolsConfig$jscomp$inline_1807.bundleType, - version: devToolsConfig$jscomp$inline_1807.version, - rendererPackageName: devToolsConfig$jscomp$inline_1807.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1807.rendererConfig, +var internals$jscomp$inline_2170 = { + bundleType: devToolsConfig$jscomp$inline_1808.bundleType, + version: devToolsConfig$jscomp$inline_1808.version, + rendererPackageName: devToolsConfig$jscomp$inline_1808.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1808.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -17003,26 +17011,26 @@ var internals$jscomp$inline_2169 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1807.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1808.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-eeba9077" + reconcilerVersion: "18.3.0-www-classic-8f569ab3" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2170 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2171 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2170.isDisabled && - hook$jscomp$inline_2170.supportsFiber + !hook$jscomp$inline_2171.isDisabled && + hook$jscomp$inline_2171.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2170.inject( - internals$jscomp$inline_2169 + (rendererID = hook$jscomp$inline_2171.inject( + internals$jscomp$inline_2170 )), - (injectedHook = hook$jscomp$inline_2170); + (injectedHook = hook$jscomp$inline_2171); } catch (err) {} } assign(Internals, { @@ -17076,7 +17084,8 @@ exports.createRoot = function (container, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = options.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -17272,7 +17281,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = initialChildren.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -17493,4 +17503,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-eeba9077"; +exports.version = "18.3.0-www-classic-8f569ab3"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index 5323ca9f6d..b6a17a086f 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -12017,7 +12017,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -12051,6 +12052,7 @@ function FiberRootNode( this.pooledCache = null; this.pooledCacheLanes = 0; this.hydrationCallbacks = null; + this.formState = formState; this.incompleteTransitions = new Map(); if (enableTransitionTracing) for ( @@ -12072,14 +12074,16 @@ function createFiberRoot( concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { containerInfo = new FiberRootNode( containerInfo, tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); containerInfo.hydrationCallbacks = hydrationCallbacks; enableTransitionTracing && @@ -16558,17 +16562,17 @@ Internals.Events = [ restoreStateIfNeeded, batchedUpdates$1 ]; -var devToolsConfig$jscomp$inline_1766 = { +var devToolsConfig$jscomp$inline_1767 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-5ff32fc3", + version: "18.3.0-www-modern-e51d03c9", rendererPackageName: "react-dom" }; -var internals$jscomp$inline_2133 = { - bundleType: devToolsConfig$jscomp$inline_1766.bundleType, - version: devToolsConfig$jscomp$inline_1766.version, - rendererPackageName: devToolsConfig$jscomp$inline_1766.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1766.rendererConfig, +var internals$jscomp$inline_2134 = { + bundleType: devToolsConfig$jscomp$inline_1767.bundleType, + version: devToolsConfig$jscomp$inline_1767.version, + rendererPackageName: devToolsConfig$jscomp$inline_1767.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1767.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -16585,26 +16589,26 @@ var internals$jscomp$inline_2133 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1766.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1767.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-5ff32fc3" + reconcilerVersion: "18.3.0-www-modern-e51d03c9" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_2134 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_2135 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_2134.isDisabled && - hook$jscomp$inline_2134.supportsFiber + !hook$jscomp$inline_2135.isDisabled && + hook$jscomp$inline_2135.supportsFiber ) try { - (rendererID = hook$jscomp$inline_2134.inject( - internals$jscomp$inline_2133 + (rendererID = hook$jscomp$inline_2135.inject( + internals$jscomp$inline_2134 )), - (injectedHook = hook$jscomp$inline_2134); + (injectedHook = hook$jscomp$inline_2135); } catch (err) {} } exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; @@ -16651,7 +16655,8 @@ exports.createRoot = function (container, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); container[internalContainerInstanceKey] = options.current; Dispatcher$1.current = ReactDOMClientDispatcher; @@ -16821,7 +16826,8 @@ exports.hydrateRoot = function (container, initialChildren, options) { concurrentUpdatesByDefaultOverride, identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + null ); initialChildren.context = emptyContextObject; options = initialChildren.current; @@ -17003,4 +17009,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-5ff32fc3"; +exports.version = "18.3.0-www-modern-e51d03c9"; diff --git a/compiled/facebook-www/ReactTestRenderer-dev.classic.js b/compiled/facebook-www/ReactTestRenderer-dev.classic.js index 64a5224f37..17dcaec415 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.classic.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.classic.js @@ -24237,7 +24237,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -24275,6 +24276,7 @@ function FiberRootNode( this.hydrationCallbacks = null; } + this.formState = formState; this.incompleteTransitions = new Map(); { @@ -24308,7 +24310,8 @@ function createFiberRoot( // single type, like a DynamicHostConfig that is defined by the renderer. identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions var root = new FiberRootNode( @@ -24316,7 +24319,8 @@ function createFiberRoot( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); { @@ -24356,7 +24360,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-f857f390"; +var ReactVersion = "18.3.0-www-classic-3d9f6d60"; // Might add PROFILE later. @@ -24406,7 +24410,9 @@ function createContainer( isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, - onRecoverableError + onRecoverableError, + transitionCallbacks, + null ); } function updateContainer(element, container, parentComponent, callback) { @@ -25273,7 +25279,8 @@ function create(element, options) { isStrictMode, concurrentUpdatesByDefault, "", - onRecoverableError + onRecoverableError, + null ); if (root == null) { diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js index 618d908a92..6f7b134ebe 100644 --- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js +++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js @@ -24237,7 +24237,8 @@ function FiberRootNode( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ) { this.tag = tag; this.containerInfo = containerInfo; @@ -24275,6 +24276,7 @@ function FiberRootNode( this.hydrationCallbacks = null; } + this.formState = formState; this.incompleteTransitions = new Map(); { @@ -24308,7 +24310,8 @@ function createFiberRoot( // single type, like a DynamicHostConfig that is defined by the renderer. identifierPrefix, onRecoverableError, - transitionCallbacks + transitionCallbacks, + formState ) { // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions var root = new FiberRootNode( @@ -24316,7 +24319,8 @@ function createFiberRoot( tag, hydrate, identifierPrefix, - onRecoverableError + onRecoverableError, + formState ); { @@ -24356,7 +24360,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-cd8f2d61"; +var ReactVersion = "18.3.0-www-modern-4234bfd2"; // Might add PROFILE later. @@ -24406,7 +24410,9 @@ function createContainer( isStrictMode, concurrentUpdatesByDefaultOverride, identifierPrefix, - onRecoverableError + onRecoverableError, + transitionCallbacks, + null ); } function updateContainer(element, container, parentComponent, callback) { @@ -25273,7 +25279,8 @@ function create(element, options) { isStrictMode, concurrentUpdatesByDefault, "", - onRecoverableError + onRecoverableError, + null ); if (root == null) {