From 20c41c9131d34e3acc223aedd8e4feaadc65875c Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Wed, 20 Nov 2024 10:38:58 -0500 Subject: [PATCH 1/3] Feature Flag --- packages/shared/ReactFeatureFlags.js | 3 +++ packages/shared/forks/ReactFeatureFlags.native-fb.js | 1 + packages/shared/forks/ReactFeatureFlags.native-oss.js | 1 + packages/shared/forks/ReactFeatureFlags.test-renderer.js | 1 + .../shared/forks/ReactFeatureFlags.test-renderer.native-fb.js | 1 + packages/shared/forks/ReactFeatureFlags.test-renderer.www.js | 1 + packages/shared/forks/ReactFeatureFlags.www.js | 1 + 7 files changed, 9 insertions(+) diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 997e9461059f..e82bce7b50cb 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -210,6 +210,9 @@ export const disableIEWorkarounds = true; // request for certain browsers. export const enableFilterEmptyStringAttributesDOM = true; +// Enable the moveBefore() alternative to insertBefore(). This preserves states of moves. +export const enableMoveBefore = false; + // Disabled caching behavior of `react/cache` in client runtimes. export const disableClientCache = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 748aa03a9d7a..defa7cd330d7 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -55,6 +55,7 @@ export const enableDebugTracing = false; export const enableDeferRootSchedulingToMicrotask = true; export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = true; export const enableFizzExternalRuntime = true; export const enableFlightReadableStream = true; export const enableGetInspectorDataForInstanceInProduction = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 9f48f3877f81..16c156f41c5a 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -44,6 +44,7 @@ export const enableDeferRootSchedulingToMicrotask = true; export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableFabricCompleteRootInCommitPhase = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = true; export const enableFizzExternalRuntime = true; export const enableFlightReadableStream = true; export const enableGetInspectorDataForInstanceInProduction = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index fbb95e082901..01462919600d 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -45,6 +45,7 @@ export const favorSafetyOverHydrationPerf = true; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableFabricCompleteRootInCommitPhase = false; export const enableHiddenSubtreeInsertionEffectCleanup = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index 8bc77e4bfe37..51d9b90d4f7b 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -35,6 +35,7 @@ export const enableDebugTracing = false; export const enableDeferRootSchedulingToMicrotask = true; export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = false; export const enableFizzExternalRuntime = true; export const enableFlightReadableStream = true; export const enableGetInspectorDataForInstanceInProduction = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index e28627760a75..272886cc58d0 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -47,6 +47,7 @@ export const favorSafetyOverHydrationPerf = true; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableRenderableContext = false; export const enableFabricCompleteRootInCommitPhase = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 67d1ad74c049..8ddbf3dd7c51 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -57,6 +57,7 @@ export const enableCPUSuspense = true; export const enableUseMemoCacheHook = true; export const enableUseEffectEventHook = true; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = false; export const enableAsyncActions = true; export const disableInputAttributeSyncing = false; export const enableLegacyFBSupport = true; From f382484c1538e504622048204ef1e7de929b6929 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Wed, 20 Nov 2024 10:53:23 -0500 Subject: [PATCH 2/3] Use moveBefore if available and the flag is on --- .../src/client/ReactFiberConfigDOM.js | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 3315ce92bbc4..223b36ecfa4e 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -93,6 +93,7 @@ import { enableTrustedTypesIntegration, enableAsyncActions, disableLegacyMode, + enableMoveBefore, } from 'shared/ReactFeatureFlags'; import { HostComponent, @@ -525,6 +526,7 @@ export function appendInitialChild( parentInstance: Instance, child: Instance | TextInstance, ): void { + // Note: This should not use moveBefore() because initial are appended while disconnected. parentInstance.appendChild(child); } @@ -761,7 +763,12 @@ export function appendChild( parentInstance: Instance, child: Instance | TextInstance, ): void { - parentInstance.appendChild(child); + if (supportsMoveBefore) { + // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore. + parentInstance.moveBefore(child, null); + } else { + parentInstance.appendChild(child); + } } export function appendChildToContainer( @@ -794,12 +801,21 @@ export function appendChildToContainer( } } +const supportsMoveBefore = + // $FlowFixMe[prop-missing]: We're doing the feature detection here. + enableMoveBefore && typeof Node.prototype.moveBefore === 'function'; + export function insertBefore( parentInstance: Instance, child: Instance | TextInstance, beforeChild: Instance | TextInstance | SuspenseInstance, ): void { - parentInstance.insertBefore(child, beforeChild); + if (supportsMoveBefore) { + // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore. + parentInstance.moveBefore(child, beforeChild); + } else { + parentInstance.insertBefore(child, beforeChild); + } } export function insertInContainerBefore( From 48ff9b873e5ef4174717f478b1ed39bf48d74b7f Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Fri, 22 Nov 2024 12:55:12 -0500 Subject: [PATCH 3/3] Check if window exists --- .../src/client/ReactFiberConfigDOM.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 223b36ecfa4e..bfa9adb48d73 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -759,6 +759,12 @@ export function commitTextUpdate( textInstance.nodeValue = newText; } +const supportsMoveBefore = + // $FlowFixMe[prop-missing]: We're doing the feature detection here. + enableMoveBefore && + typeof window !== 'undefined' && + typeof window.Node.prototype.moveBefore === 'function'; + export function appendChild( parentInstance: Instance, child: Instance | TextInstance, @@ -801,10 +807,6 @@ export function appendChildToContainer( } } -const supportsMoveBefore = - // $FlowFixMe[prop-missing]: We're doing the feature detection here. - enableMoveBefore && typeof Node.prototype.moveBefore === 'function'; - export function insertBefore( parentInstance: Instance, child: Instance | TextInstance,