Skip to content

Commit a058ee7

Browse files
pull[bot]pull[bot]
committed
Add moveBefore Experiment (facebook#31596)
A long standing issue for React has been that if you reorder stateful nodes, they may lose their state and reload. The thing moving loses its state. There's no way to solve this in general where two stateful nodes swap. The [`moveBefore()` proposal](https://chromestatus.com/feature/5135990159835136?gate=5177450351558656) has now moved to [intent-to-ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/YE_xLH6MkRs/m/_7CD0NYMAAAJ). This function is kind of like `insertBefore` but preserves state. There's [a demo here](https://state-preserving-atomic-move.glitch.me/). Ideally we'd port this demo to a fixture so we can try it. Currently this flag is always off - even in experimental. That's because this is still behind a Chrome flag so it's a little early to turn it on even in experimental. So you need a custom build. It's on in RN but only because it doesn't apply there which makes it easier to tell that it's safe to ship once it's on everywhere else. The other reason it's still off is because there's currently a semantic breaking change. `moveBefore()` errors if both nodes are disconnected. That happens if we're inside a completely disconnected React root. That's not usually how you should use React because it means effects can't read layout etc. However, it is currently supported. To handle this we'd have to try/catch the `moveBefore` to handle this case but we hope this semantic will change before it ships. Before we turn this on in experimental we either have to wait for the implementation to not error in the disconnected-disconnected case in Chrome or we'd have to add try/catch. DiffTrain build for [aba370f](facebook@aba370f)
1 parent eaf9e95 commit a058ee7

23 files changed

+146
-92
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.0.0-native-fb-91061073-20241121
1+
19.0.0-native-fb-aba370f1-20241122

‎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<<cd5f848c5aa7958d343b15d0a13c86dc>>
10+
* @generated SignedSource<<712b04c3a26023e4bea59df930cf674a>>
1111
*/
1212

1313
"use strict";
@@ -420,5 +420,5 @@ __DEV__ &&
420420
exports.useFormStatus = function () {
421421
return resolveDispatcher().useHostTransitionStatus();
422422
};
423-
exports.version = "19.0.0-native-fb-91061073-20241121";
423+
exports.version = "19.0.0-native-fb-aba370f1-20241122";
424424
})();

‎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<<9a7968f790627fbd0936d450d5e8e7e1>>
10+
* @generated SignedSource<<81c01fe21e27672bef833613e7a3e25c>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.0.0-native-fb-91061073-20241121";
206+
exports.version = "19.0.0-native-fb-aba370f1-20241122";

‎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<<9a7968f790627fbd0936d450d5e8e7e1>>
10+
* @generated SignedSource<<81c01fe21e27672bef833613e7a3e25c>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.0.0-native-fb-91061073-20241121";
206+
exports.version = "19.0.0-native-fb-aba370f1-20241122";

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

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

1313
/*
@@ -11874,7 +11874,13 @@ __DEV__ &&
1187411874
var tag = node.tag;
1187511875
if (5 === tag || 6 === tag)
1187611876
(node = node.stateNode),
11877-
before ? parent.insertBefore(node, before) : parent.appendChild(node);
11877+
before
11878+
? supportsMoveBefore
11879+
? parent.moveBefore(node, before)
11880+
: parent.insertBefore(node, before)
11881+
: supportsMoveBefore
11882+
? parent.moveBefore(node, null)
11883+
: parent.appendChild(node);
1187811884
else if (4 !== tag && 27 !== tag && ((node = node.child), null !== node))
1187911885
for (
1188011886
insertOrAppendPlacementNode(node, before, parent),
@@ -25339,6 +25345,9 @@ __DEV__ &&
2533925345
.catch(handleErrorInNextTick);
2534025346
}
2534125347
: scheduleTimeout,
25348+
supportsMoveBefore =
25349+
"undefined" !== typeof window &&
25350+
"function" === typeof window.Node.prototype.moveBefore,
2534225351
NotLoaded = 0,
2534325352
Loaded = 1,
2534425353
Errored = 2,
@@ -25759,11 +25768,11 @@ __DEV__ &&
2575925768
};
2576025769
(function () {
2576125770
var isomorphicReactPackageVersion = React.version;
25762-
if ("19.0.0-native-fb-91061073-20241121" !== isomorphicReactPackageVersion)
25771+
if ("19.0.0-native-fb-aba370f1-20241122" !== isomorphicReactPackageVersion)
2576325772
throw Error(
2576425773
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2576525774
(isomorphicReactPackageVersion +
25766-
"\n - react-dom: 19.0.0-native-fb-91061073-20241121\nLearn more: https://react.dev/warnings/version-mismatch")
25775+
"\n - react-dom: 19.0.0-native-fb-aba370f1-20241122\nLearn more: https://react.dev/warnings/version-mismatch")
2576725776
);
2576825777
})();
2576925778
("function" === typeof Map &&
@@ -25800,11 +25809,11 @@ __DEV__ &&
2580025809
!(function () {
2580125810
var internals = {
2580225811
bundleType: 1,
25803-
version: "19.0.0-native-fb-91061073-20241121",
25812+
version: "19.0.0-native-fb-aba370f1-20241122",
2580425813
rendererPackageName: "react-dom",
2580525814
currentDispatcherRef: ReactSharedInternals,
2580625815
findFiberByHostInstance: getClosestInstanceFromNode,
25807-
reconcilerVersion: "19.0.0-native-fb-91061073-20241121"
25816+
reconcilerVersion: "19.0.0-native-fb-aba370f1-20241122"
2580825817
};
2580925818
internals.overrideHookState = overrideHookState;
2581025819
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -25948,5 +25957,5 @@ __DEV__ &&
2594825957
listenToAllSupportedEvents(container);
2594925958
return new ReactDOMHydrationRoot(initialChildren);
2595025959
};
25951-
exports.version = "19.0.0-native-fb-91061073-20241121";
25960+
exports.version = "19.0.0-native-fb-aba370f1-20241122";
2595225961
})();

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

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

1313
/*
@@ -8271,7 +8271,13 @@ function insertOrAppendPlacementNode(node, before, parent) {
82718271
var tag = node.tag;
82728272
if (5 === tag || 6 === tag)
82738273
(node = node.stateNode),
8274-
before ? parent.insertBefore(node, before) : parent.appendChild(node);
8274+
before
8275+
? supportsMoveBefore
8276+
? parent.moveBefore(node, before)
8277+
: parent.insertBefore(node, before)
8278+
: supportsMoveBefore
8279+
? parent.moveBefore(node, null)
8280+
: parent.appendChild(node);
82758281
else if (4 !== tag && 27 !== tag && ((node = node.child), null !== node))
82768282
for (
82778283
insertOrAppendPlacementNode(node, before, parent), node = node.sibling;
@@ -14127,6 +14133,9 @@ function handleErrorInNextTick(error) {
1412714133
throw error;
1412814134
});
1412914135
}
14136+
var supportsMoveBefore =
14137+
"undefined" !== typeof window &&
14138+
"function" === typeof window.Node.prototype.moveBefore;
1413014139
function clearSuspenseBoundary(parentInstance, suspenseInstance) {
1413114140
var node = suspenseInstance,
1413214141
depth = 0;
@@ -15829,14 +15838,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1582915838
};
1583015839
var isomorphicReactPackageVersion$jscomp$inline_1735 = React.version;
1583115840
if (
15832-
"19.0.0-native-fb-91061073-20241121" !==
15841+
"19.0.0-native-fb-aba370f1-20241122" !==
1583315842
isomorphicReactPackageVersion$jscomp$inline_1735
1583415843
)
1583515844
throw Error(
1583615845
formatProdErrorMessage(
1583715846
527,
1583815847
isomorphicReactPackageVersion$jscomp$inline_1735,
15839-
"19.0.0-native-fb-91061073-20241121"
15848+
"19.0.0-native-fb-aba370f1-20241122"
1584015849
)
1584115850
);
1584215851
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -15858,11 +15867,11 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1585815867
};
1585915868
var internals$jscomp$inline_2193 = {
1586015869
bundleType: 0,
15861-
version: "19.0.0-native-fb-91061073-20241121",
15870+
version: "19.0.0-native-fb-aba370f1-20241122",
1586215871
rendererPackageName: "react-dom",
1586315872
currentDispatcherRef: ReactSharedInternals,
1586415873
findFiberByHostInstance: getClosestInstanceFromNode,
15865-
reconcilerVersion: "19.0.0-native-fb-91061073-20241121"
15874+
reconcilerVersion: "19.0.0-native-fb-aba370f1-20241122"
1586615875
};
1586715876
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1586815877
var hook$jscomp$inline_2194 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15966,4 +15975,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1596615975
listenToAllSupportedEvents(container);
1596715976
return new ReactDOMHydrationRoot(initialChildren);
1596815977
};
15969-
exports.version = "19.0.0-native-fb-91061073-20241121";
15978+
exports.version = "19.0.0-native-fb-aba370f1-20241122";

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

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<8a8945c3d602ca2239d0f25edbe68743>>
10+
* @generated SignedSource<<4646449a1fbaa134be54e6ac1df8a36f>>
1111
*/
1212

1313
/*
@@ -8631,7 +8631,13 @@ function insertOrAppendPlacementNode(node, before, parent) {
86318631
var tag = node.tag;
86328632
if (5 === tag || 6 === tag)
86338633
(node = node.stateNode),
8634-
before ? parent.insertBefore(node, before) : parent.appendChild(node);
8634+
before
8635+
? supportsMoveBefore
8636+
? parent.moveBefore(node, before)
8637+
: parent.insertBefore(node, before)
8638+
: supportsMoveBefore
8639+
? parent.moveBefore(node, null)
8640+
: parent.appendChild(node);
86358641
else if (4 !== tag && 27 !== tag && ((node = node.child), null !== node))
86368642
for (
86378643
insertOrAppendPlacementNode(node, before, parent), node = node.sibling;
@@ -14772,6 +14778,9 @@ function handleErrorInNextTick(error) {
1477214778
throw error;
1477314779
});
1477414780
}
14781+
var supportsMoveBefore =
14782+
"undefined" !== typeof window &&
14783+
"function" === typeof window.Node.prototype.moveBefore;
1477514784
function clearSuspenseBoundary(parentInstance, suspenseInstance) {
1477614785
var node = suspenseInstance,
1477714786
depth = 0;
@@ -16482,14 +16491,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1648216491
};
1648316492
var isomorphicReactPackageVersion$jscomp$inline_1825 = React.version;
1648416493
if (
16485-
"19.0.0-native-fb-91061073-20241121" !==
16494+
"19.0.0-native-fb-aba370f1-20241122" !==
1648616495
isomorphicReactPackageVersion$jscomp$inline_1825
1648716496
)
1648816497
throw Error(
1648916498
formatProdErrorMessage(
1649016499
527,
1649116500
isomorphicReactPackageVersion$jscomp$inline_1825,
16492-
"19.0.0-native-fb-91061073-20241121"
16501+
"19.0.0-native-fb-aba370f1-20241122"
1649316502
)
1649416503
);
1649516504
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16511,11 +16520,11 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1651116520
};
1651216521
var internals$jscomp$inline_1832 = {
1651316522
bundleType: 0,
16514-
version: "19.0.0-native-fb-91061073-20241121",
16523+
version: "19.0.0-native-fb-aba370f1-20241122",
1651516524
rendererPackageName: "react-dom",
1651616525
currentDispatcherRef: ReactSharedInternals,
1651716526
findFiberByHostInstance: getClosestInstanceFromNode,
16518-
reconcilerVersion: "19.0.0-native-fb-91061073-20241121",
16527+
reconcilerVersion: "19.0.0-native-fb-aba370f1-20241122",
1651916528
getLaneLabelMap: function () {
1652016529
for (
1652116530
var map = new Map(), lane = 1, index$292 = 0;
@@ -16634,4 +16643,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1663416643
listenToAllSupportedEvents(container);
1663516644
return new ReactDOMHydrationRoot(initialChildren);
1663616645
};
16637-
exports.version = "19.0.0-native-fb-91061073-20241121";
16646+
exports.version = "19.0.0-native-fb-aba370f1-20241122";

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

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

1313
/*
@@ -11882,7 +11882,13 @@ __DEV__ &&
1188211882
var tag = node.tag;
1188311883
if (5 === tag || 6 === tag)
1188411884
(node = node.stateNode),
11885-
before ? parent.insertBefore(node, before) : parent.appendChild(node);
11885+
before
11886+
? supportsMoveBefore
11887+
? parent.moveBefore(node, before)
11888+
: parent.insertBefore(node, before)
11889+
: supportsMoveBefore
11890+
? parent.moveBefore(node, null)
11891+
: parent.appendChild(node);
1188611892
else if (4 !== tag && 27 !== tag && ((node = node.child), null !== node))
1188711893
for (
1188811894
insertOrAppendPlacementNode(node, before, parent),
@@ -25400,6 +25406,9 @@ __DEV__ &&
2540025406
.catch(handleErrorInNextTick);
2540125407
}
2540225408
: scheduleTimeout,
25409+
supportsMoveBefore =
25410+
"undefined" !== typeof window &&
25411+
"function" === typeof window.Node.prototype.moveBefore,
2540325412
NotLoaded = 0,
2540425413
Loaded = 1,
2540525414
Errored = 2,
@@ -25820,11 +25829,11 @@ __DEV__ &&
2582025829
};
2582125830
(function () {
2582225831
var isomorphicReactPackageVersion = React.version;
25823-
if ("19.0.0-native-fb-91061073-20241121" !== isomorphicReactPackageVersion)
25832+
if ("19.0.0-native-fb-aba370f1-20241122" !== isomorphicReactPackageVersion)
2582425833
throw Error(
2582525834
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2582625835
(isomorphicReactPackageVersion +
25827-
"\n - react-dom: 19.0.0-native-fb-91061073-20241121\nLearn more: https://react.dev/warnings/version-mismatch")
25836+
"\n - react-dom: 19.0.0-native-fb-aba370f1-20241122\nLearn more: https://react.dev/warnings/version-mismatch")
2582825837
);
2582925838
})();
2583025839
("function" === typeof Map &&
@@ -25861,11 +25870,11 @@ __DEV__ &&
2586125870
!(function () {
2586225871
var internals = {
2586325872
bundleType: 1,
25864-
version: "19.0.0-native-fb-91061073-20241121",
25873+
version: "19.0.0-native-fb-aba370f1-20241122",
2586525874
rendererPackageName: "react-dom",
2586625875
currentDispatcherRef: ReactSharedInternals,
2586725876
findFiberByHostInstance: getClosestInstanceFromNode,
25868-
reconcilerVersion: "19.0.0-native-fb-91061073-20241121"
25877+
reconcilerVersion: "19.0.0-native-fb-aba370f1-20241122"
2586925878
};
2587025879
internals.overrideHookState = overrideHookState;
2587125880
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -26325,7 +26334,7 @@ __DEV__ &&
2632526334
exports.useFormStatus = function () {
2632626335
return resolveDispatcher().useHostTransitionStatus();
2632726336
};
26328-
exports.version = "19.0.0-native-fb-91061073-20241121";
26337+
exports.version = "19.0.0-native-fb-aba370f1-20241122";
2632926338
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
2633026339
"function" ===
2633126340
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)