Move Hydration Warnings from the DOM Config into the Fiber reconcilia…

…tion (#28476) Stacked on #28458. This doesn't actually really change the messages yet, it's just a refactor. Hydration warnings can be presented either as HTML or React JSX format. If presented as HTML it makes more sense to make that a DOM specific concept, however, I think it's actually better to present it in terms of React JSX. Most of the time the errors aren't going to be something messing with them at the HTML/HTTP layer. It's because the JS code does something different. Most of the time you're working in just React. People don't necessarily even know what the HTML form of it looks like. So this takes the approach that the warnings are presented in React JSX in their rich object form. Therefore, I'm moving the approach to yield diff data to the reconciler but it's the reconciler that's actually printing all the warnings. DiffTrain build for commit 4b8dfd6.
facebook · Mar 26, 2024 · 4159cc9 · 4159cc9
1 parent ab96eb3
commit 4159cc9
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 277 deletions.
diff --git a/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<c87024931f160e9769cdcf58bdec1a68>>
+ * @generated SignedSource<<76f5e861be11fcf494a0e765f9e7dd59>>
  */
 
 "use strict";
@@ -2019,13 +2019,14 @@ if (__DEV__) {
           "Please file an issue."
       );
     } // Hydration (when unsupported)
+
+    var supportsHydration = false;
     var isSuspenseInstancePending = shim$1;
     var isSuspenseInstanceFallback = shim$1;
     var getSuspenseInstanceFallbackErrorDetails = shim$1;
     var registerSuspenseInstanceRetry = shim$1;
     var clearSuspenseBoundary = shim$1;
     var clearSuspenseBoundaryFromContainer = shim$1;
-    var errorHydratingContainer = shim$1;
 
     // Renderers that don't support hydration
     // can re-export everything from this module.
@@ -2547,14 +2548,6 @@ if (__DEV__) {
 
     var objectIs = typeof Object.is === "function" ? Object.is : is; // $FlowFixMe[method-unbinding]
 
-    // This is imported by the event replaying implementation in React DOM. It's
-    // in a separate file to break a circular dependency between the renderer and
-    // the reconciler.
-    function isRootDehydrated(root) {
-      var currentState = root.current.memoizedState;
-      return currentState.isDehydrated;
-    }
-
     var contextStackCursor = createCursor(null);
     var contextFiberStackCursor = createCursor(null);
     var rootInstanceStackCursor = createCursor(null); // Represents the nearest host transition provider (in React DOM, a <form />)
@@ -21790,27 +21783,7 @@ if (__DEV__) {
       // back to client side render.
       // Before rendering again, save the errors from the previous attempt.
       var errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
-      var wasRootDehydrated = isRootDehydrated(root);
-
-      if (wasRootDehydrated) {
-        // The shell failed to hydrate. Set a flag to force a client rendering
-        // during the next attempt. To do this, we call prepareFreshStack now
-        // to create the root work-in-progress fiber. This is a bit weird in terms
-        // of factoring, because it relies on renderRootSync not calling
-        // prepareFreshStack again in the call below, which happens because the
-        // root and lanes haven't changed.
-        //
-        // TODO: I think what we should do is set ForceClientRender inside
-        // throwException, like we do for nested Suspense boundaries. The reason
-        // it's here instead is so we can switch to the synchronous work loop, too.
-        // Something to consider for a future refactor.
-        var rootWorkInProgress = prepareFreshStack(root, errorRetryLanes);
-        rootWorkInProgress.flags |= ForceClientRender;
-
-        {
-          errorHydratingContainer();
-        }
-      }
+      var wasRootDehydrated = supportsHydration;
 
       var exitStatus = renderRootSync(root, errorRetryLanes);
 
@@ -25509,7 +25482,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-canary-ab33cef8";
+    var ReactVersion = "19.0.0-canary-57dfa024";
 
     // Might add PROFILE later.
 

diff --git a/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<9e59b85bab1889d947c7a99fc106a97b>>
+ * @generated SignedSource<<078314ad2b64a452a5faeecab26ced6f>>
  */
 
 "use strict";
@@ -7624,13 +7624,10 @@ function recoverFromConcurrentError(
   originallyAttemptedLanes,
   errorRetryLanes
 ) {
-  var errorsFromFirstAttempt = workInProgressRootConcurrentErrors,
-    JSCompiler_inline_result;
-  (JSCompiler_inline_result = root.current.memoizedState.isDehydrated) &&
-    (prepareFreshStack(root, errorRetryLanes).flags |= 256);
+  var errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   errorRetryLanes = renderRootSync(root, errorRetryLanes);
   if (2 !== errorRetryLanes) {
-    if (workInProgressRootDidAttachPingListener && !JSCompiler_inline_result)
+    if (workInProgressRootDidAttachPingListener)
       return (
         (root.errorRecoveryDisabledLanes |= originallyAttemptedLanes),
         (workInProgressRootInterleavedUpdatedLanes |= originallyAttemptedLanes),
@@ -9154,19 +9151,19 @@ function wrapFiber(fiber) {
     fiberToWrapper.set(fiber, wrapper));
   return wrapper;
 }
-var devToolsConfig$jscomp$inline_1023 = {
+var devToolsConfig$jscomp$inline_1019 = {
   findFiberByHostInstance: function () {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "19.0.0-canary-f55d214e",
+  version: "19.0.0-canary-bd6c6cc2",
   rendererPackageName: "react-test-renderer"
 };
-var internals$jscomp$inline_1213 = {
-  bundleType: devToolsConfig$jscomp$inline_1023.bundleType,
-  version: devToolsConfig$jscomp$inline_1023.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1023.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1023.rendererConfig,
+var internals$jscomp$inline_1209 = {
+  bundleType: devToolsConfig$jscomp$inline_1019.bundleType,
+  version: devToolsConfig$jscomp$inline_1019.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1019.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1019.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -9183,26 +9180,26 @@ var internals$jscomp$inline_1213 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1023.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1019.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-canary-f55d214e"
+  reconcilerVersion: "19.0.0-canary-bd6c6cc2"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1214 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1210 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1214.isDisabled &&
-    hook$jscomp$inline_1214.supportsFiber
+    !hook$jscomp$inline_1210.isDisabled &&
+    hook$jscomp$inline_1210.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1214.inject(
-        internals$jscomp$inline_1213
+      (rendererID = hook$jscomp$inline_1210.inject(
+        internals$jscomp$inline_1209
       )),
-        (injectedHook = hook$jscomp$inline_1214);
+        (injectedHook = hook$jscomp$inline_1210);
     } catch (err) {}
 }
 exports._Scheduler = Scheduler;

diff --git a/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<b2573824248edd9931bd15024b146aaa>>
+ * @generated SignedSource<<df0e5a7bb66d4bac537671923b9def69>>
  */
 
 "use strict";
@@ -7968,13 +7968,10 @@ function recoverFromConcurrentError(
   originallyAttemptedLanes,
   errorRetryLanes
 ) {
-  var errorsFromFirstAttempt = workInProgressRootConcurrentErrors,
-    JSCompiler_inline_result;
-  (JSCompiler_inline_result = root.current.memoizedState.isDehydrated) &&
-    (prepareFreshStack(root, errorRetryLanes).flags |= 256);
+  var errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   errorRetryLanes = renderRootSync(root, errorRetryLanes);
   if (2 !== errorRetryLanes) {
-    if (workInProgressRootDidAttachPingListener && !JSCompiler_inline_result)
+    if (workInProgressRootDidAttachPingListener)
       return (
         (root.errorRecoveryDisabledLanes |= originallyAttemptedLanes),
         (workInProgressRootInterleavedUpdatedLanes |= originallyAttemptedLanes),
@@ -9580,19 +9577,19 @@ function wrapFiber(fiber) {
     fiberToWrapper.set(fiber, wrapper));
   return wrapper;
 }
-var devToolsConfig$jscomp$inline_1065 = {
+var devToolsConfig$jscomp$inline_1061 = {
   findFiberByHostInstance: function () {
     throw Error("TestRenderer does not support findFiberByHostInstance()");
   },
   bundleType: 0,
-  version: "19.0.0-canary-cdabf445",
+  version: "19.0.0-canary-1f27a620",
   rendererPackageName: "react-test-renderer"
 };
-var internals$jscomp$inline_1254 = {
-  bundleType: devToolsConfig$jscomp$inline_1065.bundleType,
-  version: devToolsConfig$jscomp$inline_1065.version,
-  rendererPackageName: devToolsConfig$jscomp$inline_1065.rendererPackageName,
-  rendererConfig: devToolsConfig$jscomp$inline_1065.rendererConfig,
+var internals$jscomp$inline_1250 = {
+  bundleType: devToolsConfig$jscomp$inline_1061.bundleType,
+  version: devToolsConfig$jscomp$inline_1061.version,
+  rendererPackageName: devToolsConfig$jscomp$inline_1061.rendererPackageName,
+  rendererConfig: devToolsConfig$jscomp$inline_1061.rendererConfig,
   overrideHookState: null,
   overrideHookStateDeletePath: null,
   overrideHookStateRenamePath: null,
@@ -9609,26 +9606,26 @@ var internals$jscomp$inline_1254 = {
     return null === fiber ? null : fiber.stateNode;
   },
   findFiberByHostInstance:
-    devToolsConfig$jscomp$inline_1065.findFiberByHostInstance ||
+    devToolsConfig$jscomp$inline_1061.findFiberByHostInstance ||
     emptyFindFiberByHostInstance,
   findHostInstancesForRefresh: null,
   scheduleRefresh: null,
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-canary-cdabf445"
+  reconcilerVersion: "19.0.0-canary-1f27a620"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
-  var hook$jscomp$inline_1255 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  var hook$jscomp$inline_1251 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (
-    !hook$jscomp$inline_1255.isDisabled &&
-    hook$jscomp$inline_1255.supportsFiber
+    !hook$jscomp$inline_1251.isDisabled &&
+    hook$jscomp$inline_1251.supportsFiber
   )
     try {
-      (rendererID = hook$jscomp$inline_1255.inject(
-        internals$jscomp$inline_1254
+      (rendererID = hook$jscomp$inline_1251.inject(
+        internals$jscomp$inline_1250
       )),
-        (injectedHook = hook$jscomp$inline_1255);
+        (injectedHook = hook$jscomp$inline_1251);
     } catch (err) {}
 }
 exports._Scheduler = Scheduler;

diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
@@ -1 +1 @@
-bb66aa3cef4e42aee790200d03cf7a82659da121
+4b8dfd6215bf855402ae1a94cb0ae4f467afca9a
diff --git a/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<59c12b288a18fed81de38ef7de7f9286>>
+ * @generated SignedSource<<e76d28cbba11aa5c7a3d0b92eb6ca0f0>>
  */
 
 "use strict";
@@ -4701,11 +4701,12 @@ to return true:wantsResponderID|                            |
           "Please file an issue."
       );
     } // Hydration (when unsupported)
+
+    var supportsHydration = false;
     var isSuspenseInstancePending = shim$1;
     var isSuspenseInstanceFallback = shim$1;
     var getSuspenseInstanceFallbackErrorDetails = shim$1;
     var registerSuspenseInstanceRetry = shim$1;
-    var errorHydratingContainer = shim$1;
 
     // Renderers that don't support hydration
     // can re-export everything from this module.
@@ -6027,14 +6028,6 @@ to return true:wantsResponderID|                            |
 
     var objectIs = typeof Object.is === "function" ? Object.is : is; // $FlowFixMe[method-unbinding]
 
-    // This is imported by the event replaying implementation in React DOM. It's
-    // in a separate file to break a circular dependency between the renderer and
-    // the reconciler.
-    function isRootDehydrated(root) {
-      var currentState = root.current.memoizedState;
-      return currentState.isDehydrated;
-    }
-
     var contextStackCursor = createCursor(null);
     var contextFiberStackCursor = createCursor(null);
     var rootInstanceStackCursor = createCursor(null); // Represents the nearest host transition provider (in React DOM, a <form />)
@@ -25837,27 +25830,7 @@ to return true:wantsResponderID|                            |
       // back to client side render.
       // Before rendering again, save the errors from the previous attempt.
       var errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
-      var wasRootDehydrated = isRootDehydrated(root);
-
-      if (wasRootDehydrated) {
-        // The shell failed to hydrate. Set a flag to force a client rendering
-        // during the next attempt. To do this, we call prepareFreshStack now
-        // to create the root work-in-progress fiber. This is a bit weird in terms
-        // of factoring, because it relies on renderRootSync not calling
-        // prepareFreshStack again in the call below, which happens because the
-        // root and lanes haven't changed.
-        //
-        // TODO: I think what we should do is set ForceClientRender inside
-        // throwException, like we do for nested Suspense boundaries. The reason
-        // it's here instead is so we can switch to the synchronous work loop, too.
-        // Something to consider for a future refactor.
-        var rootWorkInProgress = prepareFreshStack(root, errorRetryLanes);
-        rootWorkInProgress.flags |= ForceClientRender;
-
-        {
-          errorHydratingContainer();
-        }
-      }
+      var wasRootDehydrated = supportsHydration;
 
       var exitStatus = renderRootSync(root, errorRetryLanes);
 
@@ -29856,7 +29829,7 @@ to return true:wantsResponderID|                            |
       return root;
     }
 
-    var ReactVersion = "19.0.0-canary-6e1959ee";
+    var ReactVersion = "19.0.0-canary-1559f120";
 
     function createPortal$1(
       children,
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		bb66aa3cef4e42aee790200d03cf7a82659da121
		4b8dfd6215bf855402ae1a94cb0ae4f467afca9a