From 056073de4c50b65807cd77ae6715c9ea8ee64277 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 9 Jan 2025 16:37:00 -0500
Subject: [PATCH] [Fiber] Support moveBefore at the top level of a container
 (#32036)

Parity with appendChild and insertBefore. This allows reordering at the
root while preserving state.
---
 .../src/client/ReactFiberConfigDOM.js         | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index c9dbcdb68c50f..9bb20a56df67e 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -793,10 +793,20 @@ export function appendChildToContainer(
   let parentNode;
   if (container.nodeType === COMMENT_NODE) {
     parentNode = (container.parentNode: any);
-    parentNode.insertBefore(child, container);
+    if (supportsMoveBefore) {
+      // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+      parentNode.moveBefore(child, container);
+    } else {
+      parentNode.insertBefore(child, container);
+    }
   } else {
     parentNode = container;
-    parentNode.appendChild(child);
+    if (supportsMoveBefore) {
+      // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+      parentNode.moveBefore(child, null);
+    } else {
+      parentNode.appendChild(child);
+    }
   }
   // This container might be used for a portal.
   // If something inside a portal is clicked, that click should bubble
@@ -835,9 +845,19 @@ export function insertInContainerBefore(
   beforeChild: Instance | TextInstance | SuspenseInstance,
 ): void {
   if (container.nodeType === COMMENT_NODE) {
-    (container.parentNode: any).insertBefore(child, beforeChild);
+    if (supportsMoveBefore) {
+      // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+      (container.parentNode: any).moveBefore(child, beforeChild);
+    } else {
+      (container.parentNode: any).insertBefore(child, beforeChild);
+    }
   } else {
-    container.insertBefore(child, beforeChild);
+    if (supportsMoveBefore) {
+      // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore.
+      container.moveBefore(child, beforeChild);
+    } else {
+      container.insertBefore(child, beforeChild);
+    }
   }
 }