Skip to content

Commit

Permalink
Move Hydration Warnings from the DOM Config into the Fiber reconcilia…
Browse files Browse the repository at this point in the history 
…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.
  • Loading branch information
@sebmarkbage
sebmarkbage committed Mar 26, 2024
1 parent ab96eb3 commit 4159cc9
Show file tree
Hide file tree
Showing 10 changed files with 178 additions and 277 deletions.
37 changes: 5 additions & 32 deletions ...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<c87024931f160e9769cdcf58bdec1a68>>
* @generated SignedSource<<76f5e861be11fcf494a0e765f9e7dd59>>
*/

"use strict";
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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 />)
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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.

Expand Down
39 changes: 18 additions & 21 deletions ...ok-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<9e59b85bab1889d947c7a99fc106a97b>>
* @generated SignedSource<<078314ad2b64a452a5faeecab26ced6f>>
*/

"use strict";
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand Down
39 changes: 18 additions & 21 deletions ...source/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<b2573824248edd9931bd15024b146aaa>>
* @generated SignedSource<<df0e5a7bb66d4bac537671923b9def69>>
*/

"use strict";
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
bb66aa3cef4e42aee790200d03cf7a82659da121
4b8dfd6215bf855402ae1a94cb0ae4f467afca9a
37 changes: 5 additions & 32 deletions ...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<59c12b288a18fed81de38ef7de7f9286>>
* @generated SignedSource<<e76d28cbba11aa5c7a3d0b92eb6ca0f0>>
*/

"use strict";
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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 />)
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 4159cc9

Please sign in to comment.