fix: devtools source field disappears after component remount (#27297)

## Summary Fixes: #27296 On actions that cause a component to change its signature, and therefore to remount, the `_debugSource` property of the fiber updates in delay and causes the `devtools` source field to vanish. This issue happens in https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberBeginWork.js ```js function beginWork( current: Fiber | null, workInProgress: Fiber, renderLanes: Lanes, ): Fiber | null { if (__DEV__) { if (workInProgress._debugNeedsRemount && current !== null) { // This will restart the begin phase with a new fiber. return remountFiber( current, workInProgress, createFiberFromTypeAndProps( workInProgress.type, workInProgress.key, workInProgress.pendingProps, workInProgress._debugOwner || null, workInProgress.mode, workInProgress.lanes, ), ); } } // ... ``` `remountFiber` uses the 3rd parameter as the new fiber (`createFiberFromTypeAndProps(...)`), but this parameter doesn’t contain a `_debugSource`. ## How did you test this change? Tested by monkey patching `./node_modules/react-dom/cjs/react-dom.development.js`: <img width="1749" alt="image" src="https://github.com/facebook/react/assets/75563024/ccaf7fab-4cc9-4c05-a48b-64db6f55dc23"> https://github.com/facebook/react/assets/75563024/0650ae5c-b277-44d1-acbb-a08d98bd38e0 DiffTrain build for [eaa6968](eaa6968)
facebook · Aug 29, 2023 · c4d091a · c4d091a
1 parent 5a211bb
commit c4d091a
Show file tree

Hide file tree

Showing 20 changed files with 250 additions and 158 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-4129ea8c922b950be3964f98d2bb74ff4a1c5431
+eaa696876ee40bb048727aefe995be1bbb7384a8
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-classic-44782c01";
+var ReactVersion = "18.3.0-www-classic-06724970";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-modern-c6e988f2";
+var ReactVersion = "18.3.0-www-modern-5ec21dc5";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
@@ -615,4 +615,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-cbca474e";
+exports.version = "18.3.0-www-modern-feef7178";
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-classic-958fdb2b";
+var ReactVersion = "18.3.0-www-classic-bb068684";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -13766,6 +13766,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
+      null,
       workInProgress,
       workInProgress.mode,
       renderLanes
@@ -16787,6 +16788,7 @@ function beginWork$1(current, workInProgress, renderLanes) {
           workInProgress.type,
           workInProgress.key,
           workInProgress.pendingProps,
+          workInProgress._debugSource || null,
           workInProgress._debugOwner || null,
           workInProgress.mode,
           workInProgress.lanes
@@ -21024,6 +21026,7 @@ function detachFiberAfterEffects(fiber) {
   fiber.stateNode = null;
 
   {
+    fiber._debugSource = null;
     fiber._debugOwner = null;
   } // Theoretically, nothing in here should be necessary, because we already
   // disconnected the fiber from the tree. So even if something leaks this
@@ -27869,6 +27872,7 @@ function createFiberFromTypeAndProps(
   type, // React$ElementType
   key,
   pendingProps,
+  source,
   owner,
   mode,
   lanes
@@ -28031,15 +28035,18 @@ function createFiberFromTypeAndProps(
   fiber.lanes = lanes;
 
   {
+    fiber._debugSource = source;
     fiber._debugOwner = owner;
   }
 
   return fiber;
 }
 function createFiberFromElement(element, mode, lanes) {
+  var source = null;
   var owner = null;
 
   {
+    source = element._source;
     owner = element._owner;
   }
 
@@ -28050,6 +28057,7 @@ function createFiberFromElement(element, mode, lanes) {
     type,
     key,
     pendingProps,
+    source,
     owner,
     mode,
     lanes

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-modern-94891484";
+var ReactVersion = "18.3.0-www-modern-fa00f381";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;
@@ -13488,6 +13488,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
+      null,
       workInProgress,
       workInProgress.mode,
       renderLanes
@@ -16481,6 +16482,7 @@ function beginWork$1(current, workInProgress, renderLanes) {
           workInProgress.type,
           workInProgress.key,
           workInProgress.pendingProps,
+          workInProgress._debugSource || null,
           workInProgress._debugOwner || null,
           workInProgress.mode,
           workInProgress.lanes
@@ -20689,6 +20691,7 @@ function detachFiberAfterEffects(fiber) {
   fiber.stateNode = null;
 
   {
+    fiber._debugSource = null;
     fiber._debugOwner = null;
   } // Theoretically, nothing in here should be necessary, because we already
   // disconnected the fiber from the tree. So even if something leaks this
@@ -27529,6 +27532,7 @@ function createFiberFromTypeAndProps(
   type, // React$ElementType
   key,
   pendingProps,
+  source,
   owner,
   mode,
   lanes
@@ -27691,15 +27695,18 @@ function createFiberFromTypeAndProps(
   fiber.lanes = lanes;
 
   {
+    fiber._debugSource = source;
     fiber._debugOwner = owner;
   }
 
   return fiber;
 }
 function createFiberFromElement(element, mode, lanes) {
+  var source = null;
   var owner = null;
 
   {
+    source = element._source;
     owner = element._owner;
   }
 
@@ -27710,6 +27717,7 @@ function createFiberFromElement(element, mode, lanes) {
     type,
     key,
     pendingProps,
+    source,
     owner,
     mode,
     lanes

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -1596,6 +1596,7 @@ function createChildReconciler(shouldTrackSideEffects) {
       element.key,
       element.props,
       null,
+      null,
       returnFiber.mode,
       lanes
     );
@@ -1658,6 +1659,7 @@ function createChildReconciler(shouldTrackSideEffects) {
               newChild.key,
               newChild.props,
               null,
+              null,
               returnFiber.mode,
               lanes
             )),
@@ -2060,6 +2062,7 @@ function createChildReconciler(shouldTrackSideEffects) {
                   newChild.key,
                   newChild.props,
                   null,
+                  null,
                   returnFiber.mode,
                   lanes
                 )),
@@ -4016,6 +4019,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
+      null,
       workInProgress,
       workInProgress.mode,
       renderLanes
@@ -9701,20 +9705,21 @@ function createFiberFromTypeAndProps(
   type,
   key,
   pendingProps,
+  source,
   owner,
   mode,
   lanes
 ) {
-  var fiberTag = 2;
-  owner = type;
-  if ("function" === typeof type) shouldConstruct(type) && (fiberTag = 1);
-  else if ("string" === typeof type) fiberTag = 5;
+  owner = 2;
+  source = type;
+  if ("function" === typeof type) shouldConstruct(type) && (owner = 1);
+  else if ("string" === typeof type) owner = 5;
   else
     a: switch (type) {
       case REACT_FRAGMENT_TYPE:
         return createFiberFromFragment(pendingProps.children, mode, lanes, key);
       case REACT_STRICT_MODE_TYPE:
-        fiberTag = 8;
+        owner = 8;
         mode |= 8;
         0 !== (mode & 1) &&
           ((mode |= 16),
@@ -9779,37 +9784,37 @@ function createFiberFromTypeAndProps(
           );
       case REACT_DEBUG_TRACING_MODE_TYPE:
         if (enableDebugTracing) {
-          fiberTag = 8;
+          owner = 8;
           mode |= 4;
           break;
         }
       default:
         if ("object" === typeof type && null !== type)
           switch (type.$$typeof) {
             case REACT_PROVIDER_TYPE:
-              fiberTag = 10;
+              owner = 10;
               break a;
             case REACT_CONTEXT_TYPE:
-              fiberTag = 9;
+              owner = 9;
               break a;
             case REACT_FORWARD_REF_TYPE:
-              fiberTag = 11;
+              owner = 11;
               break a;
             case REACT_MEMO_TYPE:
-              fiberTag = 14;
+              owner = 14;
               break a;
             case REACT_LAZY_TYPE:
-              fiberTag = 16;
-              owner = null;
+              owner = 16;
+              source = null;
               break a;
           }
         throw Error(
           formatProdErrorMessage(130, null == type ? type : typeof type, "")
         );
     }
-  pendingProps = createFiber(fiberTag, pendingProps, key, mode);
+  pendingProps = createFiber(owner, pendingProps, key, mode);
   pendingProps.elementType = type;
-  pendingProps.type = owner;
+  pendingProps.type = source;
   pendingProps.lanes = lanes;
   return pendingProps;
 }
@@ -10110,7 +10115,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-classic-44782c01",
+    version: "18.3.0-www-classic-06724970",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1302 = {
@@ -10141,7 +10146,7 @@ var internals$jscomp$inline_1302 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-44782c01"
+  reconcilerVersion: "18.3.0-www-classic-06724970"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1303 = __REACT_DEVTOOLS_GLOBAL_HOOK__;