From 7cc8093003df07df612ceafb52eb31ea766d884d Mon Sep 17 00:00:00 2001 From: sebmarkbage Date: Fri, 6 Jun 2025 07:36:11 -0700 Subject: [PATCH] [Fizz] Error and deopt from rel=expect for large documents without boundaries (#33454) We want to make sure that we can block the reveal of a well designed complete shell reliably. In the Suspense model, client transitions don't have any way to implicitly resolve. This means you need to use Suspense or SuspenseList to explicitly split the document. Relying on implicit would mean you can't add a Suspense boundary later where needed. So we highly encourage the use of them around large content. However, if you have constructed a too large shell (e.g. by not adding any Suspense boundaries at all) then that might take too long to render on the client. We shouldn't punish users (or overzealous metrics tracking tools like search engines) in that scenario. This opts out of render blocking if the shell ends up too large to be intentional and too slow to load. Instead it deopts to showing the content split up in arbitrary ways (browser default). It only does this for SSR, and not client navs so it's not reliable. In fact, we issue an error to `onError`. This error is recoverable in that the document is still produced. It's up to your framework to decide if this errors the build or just surface it for action later. What should be the limit though? There's a trade off here. If this limit is too low then you can't fit a reasonably well built UI within it without getting errors. If it's too high then things that accidentally fall below it might take too long to load. I came up with 512kB of uncompressed shell HTML. See the comment in code for the rationale for this number. TL;DR: Data and theory indicates that having this much content inside `rel="expect"` doesn't meaningfully change metrics. Research of above-the-fold content on various websites indicate that this can comfortable fit all of them which should be enough for any intentional initial paint. DiffTrain build for [d177272802b7f86a847312c23b7e60a6f56434de](https://github.com/facebook/react/commit/d177272802b7f86a847312c23b7e60a6f56434de) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/REVISION_TRANSFORMS | 2 +- compiled/facebook-www/React-dev.classic.js | 2 +- compiled/facebook-www/React-dev.modern.js | 2 +- compiled/facebook-www/React-prod.classic.js | 2 +- compiled/facebook-www/React-prod.modern.js | 2 +- .../facebook-www/React-profiling.classic.js | 2 +- .../facebook-www/React-profiling.modern.js | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 6 +- compiled/facebook-www/ReactART-dev.modern.js | 6 +- .../facebook-www/ReactART-prod.classic.js | 6 +- compiled/facebook-www/ReactART-prod.modern.js | 6 +- compiled/facebook-www/ReactDOM-dev.classic.js | 10 +- compiled/facebook-www/ReactDOM-dev.modern.js | 10 +- .../facebook-www/ReactDOM-prod.classic.js | 10 +- compiled/facebook-www/ReactDOM-prod.modern.js | 10 +- .../ReactDOM-profiling.classic.js | 10 +- .../facebook-www/ReactDOM-profiling.modern.js | 10 +- .../ReactDOMServer-dev.classic.js | 93 ++++++++++--------- .../facebook-www/ReactDOMServer-dev.modern.js | 93 ++++++++++--------- .../ReactDOMServer-prod.classic.js | 93 ++++++++++--------- .../ReactDOMServer-prod.modern.js | 93 ++++++++++--------- .../ReactDOMServerStreaming-dev.modern.js | 18 +++- .../ReactDOMServerStreaming-prod.modern.js | 18 +++- .../ReactDOMTesting-dev.classic.js | 10 +- .../ReactDOMTesting-dev.modern.js | 10 +- .../ReactDOMTesting-prod.classic.js | 10 +- .../ReactDOMTesting-prod.modern.js | 10 +- .../ReactReconciler-dev.classic.js | 2 +- .../ReactReconciler-dev.modern.js | 2 +- .../ReactReconciler-prod.classic.js | 2 +- .../ReactReconciler-prod.modern.js | 2 +- .../ReactTestRenderer-dev.classic.js | 6 +- .../ReactTestRenderer-dev.modern.js | 6 +- compiled/facebook-www/VERSION_CLASSIC | 2 +- compiled/facebook-www/VERSION_MODERN | 2 +- 36 files changed, 312 insertions(+), 260 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index ae2bc10d09..a816aca4e0 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -22b929156c325eaf52c375f0c62801831951814a +d177272802b7f86a847312c23b7e60a6f56434de diff --git a/compiled/facebook-www/REVISION_TRANSFORMS b/compiled/facebook-www/REVISION_TRANSFORMS index ae2bc10d09..a816aca4e0 100644 --- a/compiled/facebook-www/REVISION_TRANSFORMS +++ b/compiled/facebook-www/REVISION_TRANSFORMS @@ -1 +1 @@ -22b929156c325eaf52c375f0c62801831951814a +d177272802b7f86a847312c23b7e60a6f56434de diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 64cc4d5fc7..1db001fdc2 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -1537,7 +1537,7 @@ __DEV__ && exports.useTransition = function () { return resolveDispatcher().useTransition(); }; - exports.version = "19.2.0-www-classic-22b92915-20250606"; + exports.version = "19.2.0-www-classic-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js index 6e2a2e88b7..47e63a4f0b 100644 --- a/compiled/facebook-www/React-dev.modern.js +++ b/compiled/facebook-www/React-dev.modern.js @@ -1537,7 +1537,7 @@ __DEV__ && exports.useTransition = function () { return resolveDispatcher().useTransition(); }; - exports.version = "19.2.0-www-modern-22b92915-20250606"; + exports.version = "19.2.0-www-modern-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js index 7749d6b534..eb564b6e82 100644 --- a/compiled/facebook-www/React-prod.classic.js +++ b/compiled/facebook-www/React-prod.classic.js @@ -635,4 +635,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactSharedInternals.H.useTransition(); }; -exports.version = "19.2.0-www-classic-22b92915-20250606"; +exports.version = "19.2.0-www-classic-d1772728-20250606"; diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index c66c4e7e40..7952b62fcc 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -635,4 +635,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactSharedInternals.H.useTransition(); }; -exports.version = "19.2.0-www-modern-22b92915-20250606"; +exports.version = "19.2.0-www-modern-d1772728-20250606"; diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js index de013f6642..b716ae260e 100644 --- a/compiled/facebook-www/React-profiling.classic.js +++ b/compiled/facebook-www/React-profiling.classic.js @@ -639,7 +639,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactSharedInternals.H.useTransition(); }; -exports.version = "19.2.0-www-classic-22b92915-20250606"; +exports.version = "19.2.0-www-classic-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js index 93873af74b..5ebfcbab43 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -639,7 +639,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactSharedInternals.H.useTransition(); }; -exports.version = "19.2.0-www-modern-22b92915-20250606"; +exports.version = "19.2.0-www-modern-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index 4d4005a269..e45c16a31c 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -19105,10 +19105,10 @@ __DEV__ && (function () { var internals = { bundleType: 1, - version: "19.2.0-www-classic-22b92915-20250606", + version: "19.2.0-www-classic-d1772728-20250606", rendererPackageName: "react-art", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-classic-22b92915-20250606" + reconcilerVersion: "19.2.0-www-classic-d1772728-20250606" }; internals.overrideHookState = overrideHookState; internals.overrideHookStateDeletePath = overrideHookStateDeletePath; @@ -19142,7 +19142,7 @@ __DEV__ && exports.Shape = Shape; exports.Surface = Surface; exports.Text = Text; - exports.version = "19.2.0-www-classic-22b92915-20250606"; + exports.version = "19.2.0-www-classic-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 63c3fed3ea..3dc448ce92 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -18877,10 +18877,10 @@ __DEV__ && (function () { var internals = { bundleType: 1, - version: "19.2.0-www-modern-22b92915-20250606", + version: "19.2.0-www-modern-d1772728-20250606", rendererPackageName: "react-art", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-modern-22b92915-20250606" + reconcilerVersion: "19.2.0-www-modern-d1772728-20250606" }; internals.overrideHookState = overrideHookState; internals.overrideHookStateDeletePath = overrideHookStateDeletePath; @@ -18914,7 +18914,7 @@ __DEV__ && exports.Shape = Shape; exports.Surface = Surface; exports.Text = Text; - exports.version = "19.2.0-www-modern-22b92915-20250606"; + exports.version = "19.2.0-www-modern-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index 3a24944c00..95db2cd876 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -11395,10 +11395,10 @@ var slice = Array.prototype.slice, })(React.Component); var internals$jscomp$inline_1624 = { bundleType: 0, - version: "19.2.0-www-classic-22b92915-20250606", + version: "19.2.0-www-classic-d1772728-20250606", rendererPackageName: "react-art", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-classic-22b92915-20250606" + reconcilerVersion: "19.2.0-www-classic-d1772728-20250606" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1625 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -11424,4 +11424,4 @@ exports.RadialGradient = RadialGradient; exports.Shape = TYPES.SHAPE; exports.Surface = Surface; exports.Text = Text; -exports.version = "19.2.0-www-classic-22b92915-20250606"; +exports.version = "19.2.0-www-classic-d1772728-20250606"; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index 56532c3c68..f784fb23da 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -11107,10 +11107,10 @@ var slice = Array.prototype.slice, })(React.Component); var internals$jscomp$inline_1597 = { bundleType: 0, - version: "19.2.0-www-modern-22b92915-20250606", + version: "19.2.0-www-modern-d1772728-20250606", rendererPackageName: "react-art", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-modern-22b92915-20250606" + reconcilerVersion: "19.2.0-www-modern-d1772728-20250606" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1598 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -11136,4 +11136,4 @@ exports.RadialGradient = RadialGradient; exports.Shape = TYPES.SHAPE; exports.Surface = Surface; exports.Text = Text; -exports.version = "19.2.0-www-modern-22b92915-20250606"; +exports.version = "19.2.0-www-modern-d1772728-20250606"; diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index 94f668104f..2e22b7a810 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -31481,11 +31481,11 @@ __DEV__ && return_targetInst = null; (function () { var isomorphicReactPackageVersion = React.version; - if ("19.2.0-www-classic-22b92915-20250606" !== isomorphicReactPackageVersion) + if ("19.2.0-www-classic-d1772728-20250606" !== isomorphicReactPackageVersion) throw Error( 'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion + - "\n - react-dom: 19.2.0-www-classic-22b92915-20250606\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-dom: 19.2.0-www-classic-d1772728-20250606\nLearn more: https://react.dev/warnings/version-mismatch") ); })(); ("function" === typeof Map && @@ -31528,10 +31528,10 @@ __DEV__ && !(function () { var internals = { bundleType: 1, - version: "19.2.0-www-classic-22b92915-20250606", + version: "19.2.0-www-classic-d1772728-20250606", rendererPackageName: "react-dom", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-classic-22b92915-20250606" + reconcilerVersion: "19.2.0-www-classic-d1772728-20250606" }; internals.overrideHookState = overrideHookState; internals.overrideHookStateDeletePath = overrideHookStateDeletePath; @@ -32131,7 +32131,7 @@ __DEV__ && exports.useFormStatus = function () { return resolveDispatcher().useHostTransitionStatus(); }; - exports.version = "19.2.0-www-classic-22b92915-20250606"; + exports.version = "19.2.0-www-classic-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index a4f771bf3f..0a0a1c230b 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -31267,11 +31267,11 @@ __DEV__ && return_targetInst = null; (function () { var isomorphicReactPackageVersion = React.version; - if ("19.2.0-www-modern-22b92915-20250606" !== isomorphicReactPackageVersion) + if ("19.2.0-www-modern-d1772728-20250606" !== isomorphicReactPackageVersion) throw Error( 'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' + (isomorphicReactPackageVersion + - "\n - react-dom: 19.2.0-www-modern-22b92915-20250606\nLearn more: https://react.dev/warnings/version-mismatch") + "\n - react-dom: 19.2.0-www-modern-d1772728-20250606\nLearn more: https://react.dev/warnings/version-mismatch") ); })(); ("function" === typeof Map && @@ -31314,10 +31314,10 @@ __DEV__ && !(function () { var internals = { bundleType: 1, - version: "19.2.0-www-modern-22b92915-20250606", + version: "19.2.0-www-modern-d1772728-20250606", rendererPackageName: "react-dom", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-modern-22b92915-20250606" + reconcilerVersion: "19.2.0-www-modern-d1772728-20250606" }; internals.overrideHookState = overrideHookState; internals.overrideHookStateDeletePath = overrideHookStateDeletePath; @@ -31917,7 +31917,7 @@ __DEV__ && exports.useFormStatus = function () { return resolveDispatcher().useHostTransitionStatus(); }; - exports.version = "19.2.0-www-modern-22b92915-20250606"; + exports.version = "19.2.0-www-modern-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index 528526edd2..39cdf7d198 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -19573,14 +19573,14 @@ function getCrossOriginStringAs(as, input) { } var isomorphicReactPackageVersion$jscomp$inline_2083 = React.version; if ( - "19.2.0-www-classic-22b92915-20250606" !== + "19.2.0-www-classic-d1772728-20250606" !== isomorphicReactPackageVersion$jscomp$inline_2083 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_2083, - "19.2.0-www-classic-22b92915-20250606" + "19.2.0-www-classic-d1772728-20250606" ) ); Internals.findDOMNode = function (componentOrElement) { @@ -19598,10 +19598,10 @@ Internals.Events = [ ]; var internals$jscomp$inline_2696 = { bundleType: 0, - version: "19.2.0-www-classic-22b92915-20250606", + version: "19.2.0-www-classic-d1772728-20250606", rendererPackageName: "react-dom", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-classic-22b92915-20250606" + reconcilerVersion: "19.2.0-www-classic-d1772728-20250606" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2697 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -20013,4 +20013,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactSharedInternals.H.useHostTransitionStatus(); }; -exports.version = "19.2.0-www-classic-22b92915-20250606"; +exports.version = "19.2.0-www-classic-d1772728-20250606"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index 76aef96e24..f2daa79cb1 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -19302,14 +19302,14 @@ function getCrossOriginStringAs(as, input) { } var isomorphicReactPackageVersion$jscomp$inline_2073 = React.version; if ( - "19.2.0-www-modern-22b92915-20250606" !== + "19.2.0-www-modern-d1772728-20250606" !== isomorphicReactPackageVersion$jscomp$inline_2073 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_2073, - "19.2.0-www-modern-22b92915-20250606" + "19.2.0-www-modern-d1772728-20250606" ) ); Internals.findDOMNode = function (componentOrElement) { @@ -19327,10 +19327,10 @@ Internals.Events = [ ]; var internals$jscomp$inline_2678 = { bundleType: 0, - version: "19.2.0-www-modern-22b92915-20250606", + version: "19.2.0-www-modern-d1772728-20250606", rendererPackageName: "react-dom", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-modern-22b92915-20250606" + reconcilerVersion: "19.2.0-www-modern-d1772728-20250606" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2679 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -19742,4 +19742,4 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactSharedInternals.H.useHostTransitionStatus(); }; -exports.version = "19.2.0-www-modern-22b92915-20250606"; +exports.version = "19.2.0-www-modern-d1772728-20250606"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 0ea3771a53..5f9cb118ea 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -21555,14 +21555,14 @@ function getCrossOriginStringAs(as, input) { } var isomorphicReactPackageVersion$jscomp$inline_2327 = React.version; if ( - "19.2.0-www-classic-22b92915-20250606" !== + "19.2.0-www-classic-d1772728-20250606" !== isomorphicReactPackageVersion$jscomp$inline_2327 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_2327, - "19.2.0-www-classic-22b92915-20250606" + "19.2.0-www-classic-d1772728-20250606" ) ); Internals.findDOMNode = function (componentOrElement) { @@ -21580,10 +21580,10 @@ Internals.Events = [ ]; var internals$jscomp$inline_2329 = { bundleType: 0, - version: "19.2.0-www-classic-22b92915-20250606", + version: "19.2.0-www-classic-d1772728-20250606", rendererPackageName: "react-dom", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-classic-22b92915-20250606" + reconcilerVersion: "19.2.0-www-classic-d1772728-20250606" }; enableSchedulingProfiler && ((internals$jscomp$inline_2329.getLaneLabelMap = getLaneLabelMap), @@ -21998,7 +21998,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactSharedInternals.H.useHostTransitionStatus(); }; -exports.version = "19.2.0-www-classic-22b92915-20250606"; +exports.version = "19.2.0-www-classic-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index 721bee17b0..07f4889419 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -21353,14 +21353,14 @@ function getCrossOriginStringAs(as, input) { } var isomorphicReactPackageVersion$jscomp$inline_2317 = React.version; if ( - "19.2.0-www-modern-22b92915-20250606" !== + "19.2.0-www-modern-d1772728-20250606" !== isomorphicReactPackageVersion$jscomp$inline_2317 ) throw Error( formatProdErrorMessage( 527, isomorphicReactPackageVersion$jscomp$inline_2317, - "19.2.0-www-modern-22b92915-20250606" + "19.2.0-www-modern-d1772728-20250606" ) ); Internals.findDOMNode = function (componentOrElement) { @@ -21378,10 +21378,10 @@ Internals.Events = [ ]; var internals$jscomp$inline_2319 = { bundleType: 0, - version: "19.2.0-www-modern-22b92915-20250606", + version: "19.2.0-www-modern-d1772728-20250606", rendererPackageName: "react-dom", currentDispatcherRef: ReactSharedInternals, - reconcilerVersion: "19.2.0-www-modern-22b92915-20250606" + reconcilerVersion: "19.2.0-www-modern-d1772728-20250606" }; enableSchedulingProfiler && ((internals$jscomp$inline_2319.getLaneLabelMap = getLaneLabelMap), @@ -21796,7 +21796,7 @@ exports.useFormState = function (action, initialState, permalink) { exports.useFormStatus = function () { return ReactSharedInternals.H.useHostTransitionStatus(); }; -exports.version = "19.2.0-www-modern-22b92915-20250606"; +exports.version = "19.2.0-www-modern-d1772728-20250606"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js index 9f4cee627b..0e20873310 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.classic.js +++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js @@ -8154,6 +8154,18 @@ __DEV__ && var completedPreambleSegments = request.completedPreambleSegments; if (null === completedPreambleSegments) return; flushedByteSize = request.byteSize; + var blockingRenderMaxSize = 40 * request.progressiveChunkSize; + flushedByteSize > blockingRenderMaxSize && + logRecoverableError( + request, + Error( + "This rendered a large document (>" + + Math.round(blockingRenderMaxSize / 1e3) + + ") without any Suspense boundaries around most of it. That can delay initial paint longer than necessary. To improve load performance, add a or around the content you expect to be below the header or below the fold. In the meantime, the content will deopt to paint arbitrary incomplete pieces of HTML." + ), + {}, + null + ); var resumableState = request.resumableState, renderState = request.renderState; if (renderState.externalRuntimeScript) { @@ -8224,13 +8236,7 @@ __DEV__ && renderState.scripts.clear(); renderState.bulkPreloads.forEach(flushResource, destination); renderState.bulkPreloads.clear(); - if (htmlChunks || headChunks) { - var shellId = "_" + resumableState.idPrefix + "R_"; - destination.push(blockingRenderChunkStart); - var chunk$jscomp$0 = escapeTextForBrowser(shellId); - destination.push(chunk$jscomp$0); - destination.push(blockingRenderChunkEnd); - } + resumableState.instructions |= SentCompletedShellId; var hoistableChunks = renderState.hoistableChunks; for ( i$jscomp$0 = 0; @@ -8239,23 +8245,28 @@ __DEV__ && ) destination.push(hoistableChunks[i$jscomp$0]); for ( - resumableState = hoistableChunks.length = 0; - resumableState < completedPreambleSegments.length; - resumableState++ + blockingRenderMaxSize = hoistableChunks.length = 0; + blockingRenderMaxSize < completedPreambleSegments.length; + blockingRenderMaxSize++ ) { - var segments = completedPreambleSegments[resumableState]; + var segments = completedPreambleSegments[blockingRenderMaxSize]; for ( - renderState = 0; - renderState < segments.length; - renderState++ + resumableState = 0; + resumableState < segments.length; + resumableState++ ) - flushSegment(request, destination, segments[renderState], null); + flushSegment( + request, + destination, + segments[resumableState], + null + ); } var preamble$jscomp$0 = request.renderState.preamble, headChunks$jscomp$0 = preamble$jscomp$0.headChunks; if (preamble$jscomp$0.htmlChunks || headChunks$jscomp$0) { - var chunk$jscomp$1 = endChunkForTag("head"); - destination.push(chunk$jscomp$1); + var chunk$jscomp$0 = endChunkForTag("head"); + destination.push(chunk$jscomp$0); } var bodyChunks = preamble$jscomp$0.bodyChunks; if (bodyChunks) @@ -8294,15 +8305,15 @@ __DEV__ && (resumableState$jscomp$0.instructions & SentCompletedShellId) === NothingSent ) { - var chunk$jscomp$2 = startChunkForTag("template"); - destination.push(chunk$jscomp$2); + var chunk$jscomp$1 = startChunkForTag("template"); + destination.push(chunk$jscomp$1); writeCompletedShellIdAttribute( destination, resumableState$jscomp$0 ); destination.push(endOfStartTag); - var chunk$jscomp$3 = endChunkForTag("template"); - destination.push(chunk$jscomp$3); + var chunk$jscomp$2 = endChunkForTag("template"); + destination.push(chunk$jscomp$2); } writeBootstrap(destination, renderState$jscomp$0); } @@ -8366,8 +8377,8 @@ __DEV__ && : renderState$jscomp$1.push(clientRenderScript1Partial)) : renderState$jscomp$1.push(clientRenderData1); renderState$jscomp$1.push(renderState$jscomp$2.boundaryPrefix); - var chunk$jscomp$4 = id.toString(16); - renderState$jscomp$1.push(chunk$jscomp$4); + var chunk$jscomp$3 = id.toString(16); + renderState$jscomp$1.push(chunk$jscomp$3); scriptFormat && renderState$jscomp$1.push(clientRenderScript1A); if ( errorDigest || @@ -8379,55 +8390,55 @@ __DEV__ && renderState$jscomp$1.push( clientRenderErrorScriptArgInterstitial ); - var chunk$jscomp$5 = escapeJSStringsForInstructionScripts( + var chunk$jscomp$4 = escapeJSStringsForInstructionScripts( errorDigest || "" ); - renderState$jscomp$1.push(chunk$jscomp$5); + renderState$jscomp$1.push(chunk$jscomp$4); } else { renderState$jscomp$1.push(clientRenderData2); - var chunk$jscomp$6 = escapeTextForBrowser(errorDigest || ""); - renderState$jscomp$1.push(chunk$jscomp$6); + var chunk$jscomp$5 = escapeTextForBrowser(errorDigest || ""); + renderState$jscomp$1.push(chunk$jscomp$5); } if (errorMessage || errorStack || errorComponentStack) if (scriptFormat) { renderState$jscomp$1.push( clientRenderErrorScriptArgInterstitial ); - var chunk$jscomp$7 = escapeJSStringsForInstructionScripts( + var chunk$jscomp$6 = escapeJSStringsForInstructionScripts( errorMessage || "" ); - renderState$jscomp$1.push(chunk$jscomp$7); + renderState$jscomp$1.push(chunk$jscomp$6); } else { renderState$jscomp$1.push(clientRenderData3); - var chunk$jscomp$8 = escapeTextForBrowser(errorMessage || ""); - renderState$jscomp$1.push(chunk$jscomp$8); + var chunk$jscomp$7 = escapeTextForBrowser(errorMessage || ""); + renderState$jscomp$1.push(chunk$jscomp$7); } if (errorStack || errorComponentStack) if (scriptFormat) { renderState$jscomp$1.push( clientRenderErrorScriptArgInterstitial ); - var chunk$jscomp$9 = escapeJSStringsForInstructionScripts( + var chunk$jscomp$8 = escapeJSStringsForInstructionScripts( errorStack || "" ); - renderState$jscomp$1.push(chunk$jscomp$9); + renderState$jscomp$1.push(chunk$jscomp$8); } else { renderState$jscomp$1.push(clientRenderData4); - var chunk$jscomp$10 = escapeTextForBrowser(errorStack || ""); - renderState$jscomp$1.push(chunk$jscomp$10); + var chunk$jscomp$9 = escapeTextForBrowser(errorStack || ""); + renderState$jscomp$1.push(chunk$jscomp$9); } if (errorComponentStack) if (scriptFormat) { renderState$jscomp$1.push( clientRenderErrorScriptArgInterstitial ); - var chunk$jscomp$11 = + var chunk$jscomp$10 = escapeJSStringsForInstructionScripts(errorComponentStack); - renderState$jscomp$1.push(chunk$jscomp$11); + renderState$jscomp$1.push(chunk$jscomp$10); } else { renderState$jscomp$1.push(clientRenderData5); - var chunk$jscomp$12 = escapeTextForBrowser(errorComponentStack); - renderState$jscomp$1.push(chunk$jscomp$12); + var chunk$jscomp$11 = escapeTextForBrowser(errorComponentStack); + renderState$jscomp$1.push(chunk$jscomp$11); } var JSCompiler_inline_result = scriptFormat ? renderState$jscomp$1.push(clientRenderScriptEnd) @@ -9894,8 +9905,6 @@ __DEV__ && spaceSeparator = " ", styleTagResourceOpen3 = '">', styleTagResourceClose = "", - blockingRenderChunkStart = '', completedShellIdAttributeStart = ' id="', arrayFirstOpenBracket = "[", arraySubsequentOpenBracket = ",[", @@ -10170,5 +10179,5 @@ __DEV__ && '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 = "19.2.0-www-classic-22b92915-20250606"; + exports.version = "19.2.0-www-classic-d1772728-20250606"; })(); diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js index bba418051a..3bef63d7a1 100644 --- a/compiled/facebook-www/ReactDOMServer-dev.modern.js +++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js @@ -8087,6 +8087,18 @@ __DEV__ && var completedPreambleSegments = request.completedPreambleSegments; if (null === completedPreambleSegments) return; flushedByteSize = request.byteSize; + var blockingRenderMaxSize = 40 * request.progressiveChunkSize; + flushedByteSize > blockingRenderMaxSize && + logRecoverableError( + request, + Error( + "This rendered a large document (>" + + Math.round(blockingRenderMaxSize / 1e3) + + ") without any Suspense boundaries around most of it. That can delay initial paint longer than necessary. To improve load performance, add a or around the content you expect to be below the header or below the fold. In the meantime, the content will deopt to paint arbitrary incomplete pieces of HTML." + ), + {}, + null + ); var resumableState = request.resumableState, renderState = request.renderState; if (renderState.externalRuntimeScript) { @@ -8157,13 +8169,7 @@ __DEV__ && renderState.scripts.clear(); renderState.bulkPreloads.forEach(flushResource, destination); renderState.bulkPreloads.clear(); - if (htmlChunks || headChunks) { - var shellId = "_" + resumableState.idPrefix + "R_"; - destination.push(blockingRenderChunkStart); - var chunk$jscomp$0 = escapeTextForBrowser(shellId); - destination.push(chunk$jscomp$0); - destination.push(blockingRenderChunkEnd); - } + resumableState.instructions |= SentCompletedShellId; var hoistableChunks = renderState.hoistableChunks; for ( i$jscomp$0 = 0; @@ -8172,23 +8178,28 @@ __DEV__ && ) destination.push(hoistableChunks[i$jscomp$0]); for ( - resumableState = hoistableChunks.length = 0; - resumableState < completedPreambleSegments.length; - resumableState++ + blockingRenderMaxSize = hoistableChunks.length = 0; + blockingRenderMaxSize < completedPreambleSegments.length; + blockingRenderMaxSize++ ) { - var segments = completedPreambleSegments[resumableState]; + var segments = completedPreambleSegments[blockingRenderMaxSize]; for ( - renderState = 0; - renderState < segments.length; - renderState++ + resumableState = 0; + resumableState < segments.length; + resumableState++ ) - flushSegment(request, destination, segments[renderState], null); + flushSegment( + request, + destination, + segments[resumableState], + null + ); } var preamble$jscomp$0 = request.renderState.preamble, headChunks$jscomp$0 = preamble$jscomp$0.headChunks; if (preamble$jscomp$0.htmlChunks || headChunks$jscomp$0) { - var chunk$jscomp$1 = endChunkForTag("head"); - destination.push(chunk$jscomp$1); + var chunk$jscomp$0 = endChunkForTag("head"); + destination.push(chunk$jscomp$0); } var bodyChunks = preamble$jscomp$0.bodyChunks; if (bodyChunks) @@ -8227,15 +8238,15 @@ __DEV__ && (resumableState$jscomp$0.instructions & SentCompletedShellId) === NothingSent ) { - var chunk$jscomp$2 = startChunkForTag("template"); - destination.push(chunk$jscomp$2); + var chunk$jscomp$1 = startChunkForTag("template"); + destination.push(chunk$jscomp$1); writeCompletedShellIdAttribute( destination, resumableState$jscomp$0 ); destination.push(endOfStartTag); - var chunk$jscomp$3 = endChunkForTag("template"); - destination.push(chunk$jscomp$3); + var chunk$jscomp$2 = endChunkForTag("template"); + destination.push(chunk$jscomp$2); } writeBootstrap(destination, renderState$jscomp$0); } @@ -8299,8 +8310,8 @@ __DEV__ && : renderState$jscomp$1.push(clientRenderScript1Partial)) : renderState$jscomp$1.push(clientRenderData1); renderState$jscomp$1.push(renderState$jscomp$2.boundaryPrefix); - var chunk$jscomp$4 = id.toString(16); - renderState$jscomp$1.push(chunk$jscomp$4); + var chunk$jscomp$3 = id.toString(16); + renderState$jscomp$1.push(chunk$jscomp$3); scriptFormat && renderState$jscomp$1.push(clientRenderScript1A); if ( errorDigest || @@ -8312,55 +8323,55 @@ __DEV__ && renderState$jscomp$1.push( clientRenderErrorScriptArgInterstitial ); - var chunk$jscomp$5 = escapeJSStringsForInstructionScripts( + var chunk$jscomp$4 = escapeJSStringsForInstructionScripts( errorDigest || "" ); - renderState$jscomp$1.push(chunk$jscomp$5); + renderState$jscomp$1.push(chunk$jscomp$4); } else { renderState$jscomp$1.push(clientRenderData2); - var chunk$jscomp$6 = escapeTextForBrowser(errorDigest || ""); - renderState$jscomp$1.push(chunk$jscomp$6); + var chunk$jscomp$5 = escapeTextForBrowser(errorDigest || ""); + renderState$jscomp$1.push(chunk$jscomp$5); } if (errorMessage || errorStack || errorComponentStack) if (scriptFormat) { renderState$jscomp$1.push( clientRenderErrorScriptArgInterstitial ); - var chunk$jscomp$7 = escapeJSStringsForInstructionScripts( + var chunk$jscomp$6 = escapeJSStringsForInstructionScripts( errorMessage || "" ); - renderState$jscomp$1.push(chunk$jscomp$7); + renderState$jscomp$1.push(chunk$jscomp$6); } else { renderState$jscomp$1.push(clientRenderData3); - var chunk$jscomp$8 = escapeTextForBrowser(errorMessage || ""); - renderState$jscomp$1.push(chunk$jscomp$8); + var chunk$jscomp$7 = escapeTextForBrowser(errorMessage || ""); + renderState$jscomp$1.push(chunk$jscomp$7); } if (errorStack || errorComponentStack) if (scriptFormat) { renderState$jscomp$1.push( clientRenderErrorScriptArgInterstitial ); - var chunk$jscomp$9 = escapeJSStringsForInstructionScripts( + var chunk$jscomp$8 = escapeJSStringsForInstructionScripts( errorStack || "" ); - renderState$jscomp$1.push(chunk$jscomp$9); + renderState$jscomp$1.push(chunk$jscomp$8); } else { renderState$jscomp$1.push(clientRenderData4); - var chunk$jscomp$10 = escapeTextForBrowser(errorStack || ""); - renderState$jscomp$1.push(chunk$jscomp$10); + var chunk$jscomp$9 = escapeTextForBrowser(errorStack || ""); + renderState$jscomp$1.push(chunk$jscomp$9); } if (errorComponentStack) if (scriptFormat) { renderState$jscomp$1.push( clientRenderErrorScriptArgInterstitial ); - var chunk$jscomp$11 = + var chunk$jscomp$10 = escapeJSStringsForInstructionScripts(errorComponentStack); - renderState$jscomp$1.push(chunk$jscomp$11); + renderState$jscomp$1.push(chunk$jscomp$10); } else { renderState$jscomp$1.push(clientRenderData5); - var chunk$jscomp$12 = escapeTextForBrowser(errorComponentStack); - renderState$jscomp$1.push(chunk$jscomp$12); + var chunk$jscomp$11 = escapeTextForBrowser(errorComponentStack); + renderState$jscomp$1.push(chunk$jscomp$11); } var JSCompiler_inline_result = scriptFormat ? renderState$jscomp$1.push(clientRenderScriptEnd) @@ -9825,8 +9836,6 @@ __DEV__ && spaceSeparator = " ", styleTagResourceOpen3 = '">', styleTagResourceClose = "", - blockingRenderChunkStart = '', completedShellIdAttributeStart = ' id="', arrayFirstOpenBracket = "[", arraySubsequentOpenBracket = ",[", @@ -10099,5 +10108,5 @@ __DEV__ && '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 = "19.2.0-www-modern-22b92915-20250606"; + exports.version = "19.2.0-www-modern-d1772728-20250606"; })(); diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js index b475fc3f6e..d9b647cc53 100644 --- a/compiled/facebook-www/ReactDOMServer-prod.classic.js +++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js @@ -2913,16 +2913,16 @@ function createRenderState(resumableState, generateStaticMarkup) { "\x3c/script>" )); bootstrapScriptContent = idPrefix + "P:"; - var JSCompiler_object_inline_segmentPrefix_1856 = idPrefix + "S:"; + var JSCompiler_object_inline_segmentPrefix_1851 = idPrefix + "S:"; idPrefix += "B:"; - var JSCompiler_object_inline_preconnects_1870 = new Set(), - JSCompiler_object_inline_fontPreloads_1871 = new Set(), - JSCompiler_object_inline_highImagePreloads_1872 = new Set(), - JSCompiler_object_inline_styles_1873 = new Map(), - JSCompiler_object_inline_bootstrapScripts_1874 = new Set(), - JSCompiler_object_inline_scripts_1875 = new Set(), - JSCompiler_object_inline_bulkPreloads_1876 = new Set(), - JSCompiler_object_inline_preloads_1877 = { + var JSCompiler_object_inline_preconnects_1865 = new Set(), + JSCompiler_object_inline_fontPreloads_1866 = new Set(), + JSCompiler_object_inline_highImagePreloads_1867 = new Set(), + JSCompiler_object_inline_styles_1868 = new Map(), + JSCompiler_object_inline_bootstrapScripts_1869 = new Set(), + JSCompiler_object_inline_scripts_1870 = new Set(), + JSCompiler_object_inline_bulkPreloads_1871 = new Set(), + JSCompiler_object_inline_preloads_1872 = { images: new Map(), stylesheets: new Map(), scripts: new Map(), @@ -2959,7 +2959,7 @@ function createRenderState(resumableState, generateStaticMarkup) { scriptConfig.moduleScriptResources[href] = null; scriptConfig = []; pushLinkImpl(scriptConfig, props); - JSCompiler_object_inline_bootstrapScripts_1874.add(scriptConfig); + JSCompiler_object_inline_bootstrapScripts_1869.add(scriptConfig); bootstrapChunks.push('