Skip to content

Commit e7c554a

Browse files
sebmarkbagesebmarkbage
committed
Skip hydration errors when a view transition has been applied (#35380)
When the Fizz runtime runs a view-transition we apply `view-transition-name` and `view-transition-class` to the `style`. These can be observed by Fiber when hydrating which incorrectly leads to hydration errors. More over, even after we remove them, the `style` attribute has now been normalized which we are unable to diff because we diff against the SSR generated `style` attribute string and not the normalized form. So if there are other inline styles defined, we have to skip diffing them in this scenario. DiffTrain build for [f93b9fd](f93b9fd)
1 parent aff7da4 commit e7c554a

File tree

21 files changed

+158
-94
lines changed

21 files changed

+158
-94
lines changed

‎compiled-rn/VERSION_NATIVE_FB‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.3.0-native-fb-88ee1f59-20251215
1+
19.3.0-native-fb-f93b9fd4-20251217

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<de3c182a8119ae869f84e7fb2bf8f9bf>>
10+
* @generated SignedSource<<883edbdfc3b9b29ee185901610ee5e1d>>
1111
*/
1212

1313
"use strict";
@@ -410,5 +410,5 @@ __DEV__ &&
410410
exports.useFormStatus = function () {
411411
return resolveDispatcher().useHostTransitionStatus();
412412
};
413-
exports.version = "19.3.0-native-fb-88ee1f59-20251215";
413+
exports.version = "19.3.0-native-fb-f93b9fd4-20251217";
414414
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<b93211ef85967a349414ae9c7cbbb4d9>>
10+
* @generated SignedSource<<9fbbc6ca87ee43714d4fd42664f9f2ee>>
1111
*/
1212

1313
"use strict";
@@ -209,4 +209,4 @@ exports.useFormState = function (action, initialState, permalink) {
209209
exports.useFormStatus = function () {
210210
return ReactSharedInternals.H.useHostTransitionStatus();
211211
};
212-
exports.version = "19.3.0-native-fb-88ee1f59-20251215";
212+
exports.version = "19.3.0-native-fb-f93b9fd4-20251217";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<b93211ef85967a349414ae9c7cbbb4d9>>
10+
* @generated SignedSource<<9fbbc6ca87ee43714d4fd42664f9f2ee>>
1111
*/
1212

1313
"use strict";
@@ -209,4 +209,4 @@ exports.useFormState = function (action, initialState, permalink) {
209209
exports.useFormStatus = function () {
210210
return ReactSharedInternals.H.useHostTransitionStatus();
211211
};
212-
exports.version = "19.3.0-native-fb-88ee1f59-20251215";
212+
exports.version = "19.3.0-native-fb-f93b9fd4-20251217";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js‎

Lines changed: 49 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<1e297877b0a1b5e6ded4090641a8eab4>>
10+
* @generated SignedSource<<d5cf2ac5581b56bd59e36fd1d65fc30f>>
1111
*/
1212

1313
/*
@@ -21417,16 +21417,41 @@ __DEV__ &&
2141721417
normalizeMarkupForTextOrAttribute(serverValue) !== clientValue &&
2141821418
(serverDifferences[propName] = serverValue));
2141921419
}
21420+
function hasViewTransition(htmlElement) {
21421+
return !!(
21422+
htmlElement.getAttribute("vt-share") ||
21423+
htmlElement.getAttribute("vt-exit") ||
21424+
htmlElement.getAttribute("vt-enter") ||
21425+
htmlElement.getAttribute("vt-update")
21426+
);
21427+
}
21428+
function isExpectedViewTransitionName(htmlElement) {
21429+
if (!hasViewTransition(htmlElement)) return !1;
21430+
var expectedVtName = htmlElement.getAttribute("vt-name");
21431+
htmlElement = htmlElement.style["view-transition-name"];
21432+
return expectedVtName
21433+
? expectedVtName === htmlElement
21434+
: htmlElement.startsWith("_T_");
21435+
}
2142021436
function warnForExtraAttributes(
2142121437
domElement,
2142221438
attributeNames,
2142321439
serverDifferences
2142421440
) {
2142521441
attributeNames.forEach(function (attributeName) {
21426-
serverDifferences[getPropNameFromAttributeName(attributeName)] =
21427-
"style" === attributeName
21428-
? getStylesObjectFromElement(domElement)
21429-
: domElement.getAttribute(attributeName);
21442+
"style" === attributeName
21443+
? "" !== domElement.getAttribute(attributeName) &&
21444+
((attributeName = domElement.style),
21445+
(((1 === attributeName.length &&
21446+
"view-transition-name" === attributeName[0]) ||
21447+
(2 === attributeName.length &&
21448+
"view-transition-class" === attributeName[0] &&
21449+
"view-transition-name" === attributeName[1])) &&
21450+
isExpectedViewTransitionName(domElement)) ||
21451+
(serverDifferences.style =
21452+
getStylesObjectFromElement(domElement)))
21453+
: (serverDifferences[getPropNameFromAttributeName(attributeName)] =
21454+
domElement.getAttribute(attributeName));
2143021455
});
2143121456
}
2143221457
function warnForInvalidEventListener(registrationName, listener) {
@@ -22733,12 +22758,16 @@ __DEV__ &&
2273322758
}
2273422759
}
2273522760
function getStylesObjectFromElement(domElement) {
22736-
var serverValueInObjectForm = {};
22737-
domElement = domElement.style;
22738-
for (var i = 0; i < domElement.length; i++) {
22739-
var styleName = domElement[i];
22740-
serverValueInObjectForm[styleName] =
22741-
domElement.getPropertyValue(styleName);
22761+
for (
22762+
var serverValueInObjectForm = {}, style = domElement.style, i = 0;
22763+
i < style.length;
22764+
i++
22765+
) {
22766+
var styleName = style[i];
22767+
("view-transition-name" === styleName &&
22768+
isExpectedViewTransitionName(domElement)) ||
22769+
(serverValueInObjectForm[styleName] =
22770+
style.getPropertyValue(styleName));
2274222771
}
2274322772
return serverValueInObjectForm;
2274422773
}
@@ -22788,7 +22817,10 @@ __DEV__ &&
2278822817
value$jscomp$0 = domElement.getAttribute("style");
2278922818
value$jscomp$0 !== clientValue &&
2279022819
((clientValue = normalizeMarkupForTextOrAttribute(clientValue)),
22791-
normalizeMarkupForTextOrAttribute(value$jscomp$0) !== clientValue &&
22820+
(value$jscomp$0 = normalizeMarkupForTextOrAttribute(value$jscomp$0)),
22821+
value$jscomp$0 === clientValue ||
22822+
(";" === value$jscomp$0[value$jscomp$0.length - 1] &&
22823+
hasViewTransition(domElement)) ||
2279222824
(serverDifferences.style = getStylesObjectFromElement(domElement)));
2279322825
}
2279422826
}
@@ -30244,11 +30276,11 @@ __DEV__ &&
3024430276
};
3024530277
(function () {
3024630278
var isomorphicReactPackageVersion = React.version;
30247-
if ("19.3.0-native-fb-88ee1f59-20251215" !== isomorphicReactPackageVersion)
30279+
if ("19.3.0-native-fb-f93b9fd4-20251217" !== isomorphicReactPackageVersion)
3024830280
throw Error(
3024930281
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
3025030282
(isomorphicReactPackageVersion +
30251-
"\n - react-dom: 19.3.0-native-fb-88ee1f59-20251215\nLearn more: https://react.dev/warnings/version-mismatch")
30283+
"\n - react-dom: 19.3.0-native-fb-f93b9fd4-20251217\nLearn more: https://react.dev/warnings/version-mismatch")
3025230284
);
3025330285
})();
3025430286
("function" === typeof Map &&
@@ -30285,10 +30317,10 @@ __DEV__ &&
3028530317
!(function () {
3028630318
var internals = {
3028730319
bundleType: 1,
30288-
version: "19.3.0-native-fb-88ee1f59-20251215",
30320+
version: "19.3.0-native-fb-f93b9fd4-20251217",
3028930321
rendererPackageName: "react-dom",
3029030322
currentDispatcherRef: ReactSharedInternals,
30291-
reconcilerVersion: "19.3.0-native-fb-88ee1f59-20251215"
30323+
reconcilerVersion: "19.3.0-native-fb-f93b9fd4-20251217"
3029230324
};
3029330325
internals.overrideHookState = overrideHookState;
3029430326
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -30438,5 +30470,5 @@ __DEV__ &&
3043830470
listenToAllSupportedEvents(container);
3043930471
return new ReactDOMHydrationRoot(initialChildren);
3044030472
};
30441-
exports.version = "19.3.0-native-fb-88ee1f59-20251215";
30473+
exports.version = "19.3.0-native-fb-f93b9fd4-20251217";
3044230474
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<6bd60083cb13509973aa784c9dccf6d1>>
10+
* @generated SignedSource<<aa74022e2b10c0d62d72e6fa07da62f0>>
1111
*/
1212

1313
/*
@@ -17707,14 +17707,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1770717707
};
1770817708
var isomorphicReactPackageVersion$jscomp$inline_2054 = React.version;
1770917709
if (
17710-
"19.3.0-native-fb-88ee1f59-20251215" !==
17710+
"19.3.0-native-fb-f93b9fd4-20251217" !==
1771117711
isomorphicReactPackageVersion$jscomp$inline_2054
1771217712
)
1771317713
throw Error(
1771417714
formatProdErrorMessage(
1771517715
527,
1771617716
isomorphicReactPackageVersion$jscomp$inline_2054,
17717-
"19.3.0-native-fb-88ee1f59-20251215"
17717+
"19.3.0-native-fb-f93b9fd4-20251217"
1771817718
)
1771917719
);
1772017720
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17736,10 +17736,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1773617736
};
1773717737
var internals$jscomp$inline_2636 = {
1773817738
bundleType: 0,
17739-
version: "19.3.0-native-fb-88ee1f59-20251215",
17739+
version: "19.3.0-native-fb-f93b9fd4-20251217",
1774017740
rendererPackageName: "react-dom",
1774117741
currentDispatcherRef: ReactSharedInternals,
17742-
reconcilerVersion: "19.3.0-native-fb-88ee1f59-20251215"
17742+
reconcilerVersion: "19.3.0-native-fb-f93b9fd4-20251217"
1774317743
};
1774417744
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1774517745
var hook$jscomp$inline_2637 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17846,4 +17846,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1784617846
listenToAllSupportedEvents(container);
1784717847
return new ReactDOMHydrationRoot(initialChildren);
1784817848
};
17849-
exports.version = "19.3.0-native-fb-88ee1f59-20251215";
17849+
exports.version = "19.3.0-native-fb-f93b9fd4-20251217";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-profiling.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<23f501124df16f594ddf439fc5855420>>
10+
* @generated SignedSource<<48e0510363ab218634ad75dcd3edba9e>>
1111
*/
1212

1313
/*
@@ -19833,14 +19833,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1983319833
};
1983419834
var isomorphicReactPackageVersion$jscomp$inline_2369 = React.version;
1983519835
if (
19836-
"19.3.0-native-fb-88ee1f59-20251215" !==
19836+
"19.3.0-native-fb-f93b9fd4-20251217" !==
1983719837
isomorphicReactPackageVersion$jscomp$inline_2369
1983819838
)
1983919839
throw Error(
1984019840
formatProdErrorMessage(
1984119841
527,
1984219842
isomorphicReactPackageVersion$jscomp$inline_2369,
19843-
"19.3.0-native-fb-88ee1f59-20251215"
19843+
"19.3.0-native-fb-f93b9fd4-20251217"
1984419844
)
1984519845
);
1984619846
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -19862,10 +19862,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1986219862
};
1986319863
var internals$jscomp$inline_2376 = {
1986419864
bundleType: 0,
19865-
version: "19.3.0-native-fb-88ee1f59-20251215",
19865+
version: "19.3.0-native-fb-f93b9fd4-20251217",
1986619866
rendererPackageName: "react-dom",
1986719867
currentDispatcherRef: ReactSharedInternals,
19868-
reconcilerVersion: "19.3.0-native-fb-88ee1f59-20251215",
19868+
reconcilerVersion: "19.3.0-native-fb-f93b9fd4-20251217",
1986919869
getLaneLabelMap: function () {
1987019870
for (
1987119871
var map = new Map(), lane = 1, index$336 = 0;
@@ -19988,4 +19988,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1998819988
listenToAllSupportedEvents(container);
1998919989
return new ReactDOMHydrationRoot(initialChildren);
1999019990
};
19991-
exports.version = "19.3.0-native-fb-88ee1f59-20251215";
19991+
exports.version = "19.3.0-native-fb-f93b9fd4-20251217";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-dev.js‎

Lines changed: 49 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<e3e34bb784eb6a157ee539346867bb53>>
10+
* @generated SignedSource<<7b3b6e758ee4610ca590f21e070b7ae3>>
1111
*/
1212

1313
/*
@@ -21425,16 +21425,41 @@ __DEV__ &&
2142521425
normalizeMarkupForTextOrAttribute(serverValue) !== clientValue &&
2142621426
(serverDifferences[propName] = serverValue));
2142721427
}
21428+
function hasViewTransition(htmlElement) {
21429+
return !!(
21430+
htmlElement.getAttribute("vt-share") ||
21431+
htmlElement.getAttribute("vt-exit") ||
21432+
htmlElement.getAttribute("vt-enter") ||
21433+
htmlElement.getAttribute("vt-update")
21434+
);
21435+
}
21436+
function isExpectedViewTransitionName(htmlElement) {
21437+
if (!hasViewTransition(htmlElement)) return !1;
21438+
var expectedVtName = htmlElement.getAttribute("vt-name");
21439+
htmlElement = htmlElement.style["view-transition-name"];
21440+
return expectedVtName
21441+
? expectedVtName === htmlElement
21442+
: htmlElement.startsWith("_T_");
21443+
}
2142821444
function warnForExtraAttributes(
2142921445
domElement,
2143021446
attributeNames,
2143121447
serverDifferences
2143221448
) {
2143321449
attributeNames.forEach(function (attributeName) {
21434-
serverDifferences[getPropNameFromAttributeName(attributeName)] =
21435-
"style" === attributeName
21436-
? getStylesObjectFromElement(domElement)
21437-
: domElement.getAttribute(attributeName);
21450+
"style" === attributeName
21451+
? "" !== domElement.getAttribute(attributeName) &&
21452+
((attributeName = domElement.style),
21453+
(((1 === attributeName.length &&
21454+
"view-transition-name" === attributeName[0]) ||
21455+
(2 === attributeName.length &&
21456+
"view-transition-class" === attributeName[0] &&
21457+
"view-transition-name" === attributeName[1])) &&
21458+
isExpectedViewTransitionName(domElement)) ||
21459+
(serverDifferences.style =
21460+
getStylesObjectFromElement(domElement)))
21461+
: (serverDifferences[getPropNameFromAttributeName(attributeName)] =
21462+
domElement.getAttribute(attributeName));
2143821463
});
2143921464
}
2144021465
function warnForInvalidEventListener(registrationName, listener) {
@@ -22741,12 +22766,16 @@ __DEV__ &&
2274122766
}
2274222767
}
2274322768
function getStylesObjectFromElement(domElement) {
22744-
var serverValueInObjectForm = {};
22745-
domElement = domElement.style;
22746-
for (var i = 0; i < domElement.length; i++) {
22747-
var styleName = domElement[i];
22748-
serverValueInObjectForm[styleName] =
22749-
domElement.getPropertyValue(styleName);
22769+
for (
22770+
var serverValueInObjectForm = {}, style = domElement.style, i = 0;
22771+
i < style.length;
22772+
i++
22773+
) {
22774+
var styleName = style[i];
22775+
("view-transition-name" === styleName &&
22776+
isExpectedViewTransitionName(domElement)) ||
22777+
(serverValueInObjectForm[styleName] =
22778+
style.getPropertyValue(styleName));
2275022779
}
2275122780
return serverValueInObjectForm;
2275222781
}
@@ -22796,7 +22825,10 @@ __DEV__ &&
2279622825
value$jscomp$0 = domElement.getAttribute("style");
2279722826
value$jscomp$0 !== clientValue &&
2279822827
((clientValue = normalizeMarkupForTextOrAttribute(clientValue)),
22799-
normalizeMarkupForTextOrAttribute(value$jscomp$0) !== clientValue &&
22828+
(value$jscomp$0 = normalizeMarkupForTextOrAttribute(value$jscomp$0)),
22829+
value$jscomp$0 === clientValue ||
22830+
(";" === value$jscomp$0[value$jscomp$0.length - 1] &&
22831+
hasViewTransition(domElement)) ||
2280022832
(serverDifferences.style = getStylesObjectFromElement(domElement)));
2280122833
}
2280222834
}
@@ -30306,11 +30338,11 @@ __DEV__ &&
3030630338
};
3030730339
(function () {
3030830340
var isomorphicReactPackageVersion = React.version;
30309-
if ("19.3.0-native-fb-88ee1f59-20251215" !== isomorphicReactPackageVersion)
30341+
if ("19.3.0-native-fb-f93b9fd4-20251217" !== isomorphicReactPackageVersion)
3031030342
throw Error(
3031130343
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
3031230344
(isomorphicReactPackageVersion +
30313-
"\n - react-dom: 19.3.0-native-fb-88ee1f59-20251215\nLearn more: https://react.dev/warnings/version-mismatch")
30345+
"\n - react-dom: 19.3.0-native-fb-f93b9fd4-20251217\nLearn more: https://react.dev/warnings/version-mismatch")
3031430346
);
3031530347
})();
3031630348
("function" === typeof Map &&
@@ -30347,10 +30379,10 @@ __DEV__ &&
3034730379
!(function () {
3034830380
var internals = {
3034930381
bundleType: 1,
30350-
version: "19.3.0-native-fb-88ee1f59-20251215",
30382+
version: "19.3.0-native-fb-f93b9fd4-20251217",
3035130383
rendererPackageName: "react-dom",
3035230384
currentDispatcherRef: ReactSharedInternals,
30353-
reconcilerVersion: "19.3.0-native-fb-88ee1f59-20251215"
30385+
reconcilerVersion: "19.3.0-native-fb-f93b9fd4-20251217"
3035430386
};
3035530387
internals.overrideHookState = overrideHookState;
3035630388
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -30816,7 +30848,7 @@ __DEV__ &&
3081630848
exports.useFormStatus = function () {
3081730849
return resolveDispatcher().useHostTransitionStatus();
3081830850
};
30819-
exports.version = "19.3.0-native-fb-88ee1f59-20251215";
30851+
exports.version = "19.3.0-native-fb-f93b9fd4-20251217";
3082030852
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
3082130853
"function" ===
3082230854
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)