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 [4b8dfd6](4b8dfd6)
  • Loading branch information
sebmarkbage committed Mar 26, 2024
1 parent 34ee899 commit 0602001
Show file tree
Hide file tree
Showing 18 changed files with 3,146 additions and 2,631 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
bb66aa3cef4e42aee790200d03cf7a82659da121
4b8dfd6215bf855402ae1a94cb0ae4f467afca9a
35 changes: 4 additions & 31 deletions compiled/facebook-www/ReactART-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ if (__DEV__) {
return self;
}

var ReactVersion = "19.0.0-www-classic-ae7c23fd";
var ReactVersion = "19.0.0-www-classic-9130e73d";

var LegacyRoot = 0;
var ConcurrentRoot = 1;
Expand Down Expand Up @@ -2617,13 +2617,14 @@ if (__DEV__) {
"Please file an issue."
);
} // Hydration (when unsupported)

var supportsHydration = false;
var isSuspenseInstancePending = shim$2;
var isSuspenseInstanceFallback = shim$2;
var getSuspenseInstanceFallbackErrorDetails = shim$2;
var registerSuspenseInstanceRetry = shim$2;
var clearSuspenseBoundary = shim$2;
var clearSuspenseBoundaryFromContainer = shim$2;
var errorHydratingContainer = shim$2;

// Renderers that don't support React Scopes
// can re-export everything from this module.
Expand Down Expand Up @@ -3593,14 +3594,6 @@ if (__DEV__) {
}
}

// 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 @@ -25730,27 +25723,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
35 changes: 4 additions & 31 deletions compiled/facebook-www/ReactART-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ if (__DEV__) {
return self;
}

var ReactVersion = "19.0.0-www-modern-c5863941";
var ReactVersion = "19.0.0-www-modern-937bdc18";

var LegacyRoot = 0;
var ConcurrentRoot = 1;
Expand Down Expand Up @@ -2614,13 +2614,14 @@ if (__DEV__) {
"Please file an issue."
);
} // Hydration (when unsupported)

var supportsHydration = false;
var isSuspenseInstancePending = shim$2;
var isSuspenseInstanceFallback = shim$2;
var getSuspenseInstanceFallbackErrorDetails = shim$2;
var registerSuspenseInstanceRetry = shim$2;
var clearSuspenseBoundary = shim$2;
var clearSuspenseBoundaryFromContainer = shim$2;
var errorHydratingContainer = shim$2;

// Renderers that don't support React Scopes
// can re-export everything from this module.
Expand Down Expand Up @@ -3358,14 +3359,6 @@ if (__DEV__) {
}
}

// 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 @@ -25389,27 +25382,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
37 changes: 17 additions & 20 deletions compiled/facebook-www/ReactART-prod.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -9246,13 +9246,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 @@ -10609,19 +10606,19 @@ var slice = Array.prototype.slice,
};
return Text;
})(React.Component),
devToolsConfig$jscomp$inline_1132 = {
devToolsConfig$jscomp$inline_1128 = {
findFiberByHostInstance: function () {
return null;
},
bundleType: 0,
version: "19.0.0-www-classic-3c2c0375",
version: "19.0.0-www-classic-63a4b87a",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1337 = {
bundleType: devToolsConfig$jscomp$inline_1132.bundleType,
version: devToolsConfig$jscomp$inline_1132.version,
rendererPackageName: devToolsConfig$jscomp$inline_1132.rendererPackageName,
rendererConfig: devToolsConfig$jscomp$inline_1132.rendererConfig,
var internals$jscomp$inline_1333 = {
bundleType: devToolsConfig$jscomp$inline_1128.bundleType,
version: devToolsConfig$jscomp$inline_1128.version,
rendererPackageName: devToolsConfig$jscomp$inline_1128.rendererPackageName,
rendererConfig: devToolsConfig$jscomp$inline_1128.rendererConfig,
overrideHookState: null,
overrideHookStateDeletePath: null,
overrideHookStateRenamePath: null,
Expand All @@ -10638,26 +10635,26 @@ var internals$jscomp$inline_1337 = {
return null === fiber ? null : fiber.stateNode;
},
findFiberByHostInstance:
devToolsConfig$jscomp$inline_1132.findFiberByHostInstance ||
devToolsConfig$jscomp$inline_1128.findFiberByHostInstance ||
emptyFindFiberByHostInstance,
findHostInstancesForRefresh: null,
scheduleRefresh: null,
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "19.0.0-www-classic-3c2c0375"
reconcilerVersion: "19.0.0-www-classic-63a4b87a"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1338 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
var hook$jscomp$inline_1334 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
if (
!hook$jscomp$inline_1338.isDisabled &&
hook$jscomp$inline_1338.supportsFiber
!hook$jscomp$inline_1334.isDisabled &&
hook$jscomp$inline_1334.supportsFiber
)
try {
(rendererID = hook$jscomp$inline_1338.inject(
internals$jscomp$inline_1337
(rendererID = hook$jscomp$inline_1334.inject(
internals$jscomp$inline_1333
)),
(injectedHook = hook$jscomp$inline_1338);
(injectedHook = hook$jscomp$inline_1334);
} catch (err) {}
}
var Path = Mode$1.Path;
Expand Down
37 changes: 17 additions & 20 deletions compiled/facebook-www/ReactART-prod.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -8945,13 +8945,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 @@ -10264,19 +10261,19 @@ var slice = Array.prototype.slice,
};
return Text;
})(React.Component),
devToolsConfig$jscomp$inline_1112 = {
devToolsConfig$jscomp$inline_1108 = {
findFiberByHostInstance: function () {
return null;
},
bundleType: 0,
version: "19.0.0-www-modern-f6a224b8",
version: "19.0.0-www-modern-32937d9c",
rendererPackageName: "react-art"
};
var internals$jscomp$inline_1317 = {
bundleType: devToolsConfig$jscomp$inline_1112.bundleType,
version: devToolsConfig$jscomp$inline_1112.version,
rendererPackageName: devToolsConfig$jscomp$inline_1112.rendererPackageName,
rendererConfig: devToolsConfig$jscomp$inline_1112.rendererConfig,
var internals$jscomp$inline_1313 = {
bundleType: devToolsConfig$jscomp$inline_1108.bundleType,
version: devToolsConfig$jscomp$inline_1108.version,
rendererPackageName: devToolsConfig$jscomp$inline_1108.rendererPackageName,
rendererConfig: devToolsConfig$jscomp$inline_1108.rendererConfig,
overrideHookState: null,
overrideHookStateDeletePath: null,
overrideHookStateRenamePath: null,
Expand All @@ -10293,26 +10290,26 @@ var internals$jscomp$inline_1317 = {
return null === fiber ? null : fiber.stateNode;
},
findFiberByHostInstance:
devToolsConfig$jscomp$inline_1112.findFiberByHostInstance ||
devToolsConfig$jscomp$inline_1108.findFiberByHostInstance ||
emptyFindFiberByHostInstance,
findHostInstancesForRefresh: null,
scheduleRefresh: null,
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "19.0.0-www-modern-f6a224b8"
reconcilerVersion: "19.0.0-www-modern-32937d9c"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1318 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
var hook$jscomp$inline_1314 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
if (
!hook$jscomp$inline_1318.isDisabled &&
hook$jscomp$inline_1318.supportsFiber
!hook$jscomp$inline_1314.isDisabled &&
hook$jscomp$inline_1314.supportsFiber
)
try {
(rendererID = hook$jscomp$inline_1318.inject(
internals$jscomp$inline_1317
(rendererID = hook$jscomp$inline_1314.inject(
internals$jscomp$inline_1313
)),
(injectedHook = hook$jscomp$inline_1318);
(injectedHook = hook$jscomp$inline_1314);
} catch (err) {}
}
var Path = Mode$1.Path;
Expand Down
Loading

0 comments on commit 0602001

Please sign in to comment.