old

Author: lunaruan

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -236,7 +236,7 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
-  getWorkInProgressTransitions,
+  setRootPendingSuspenseBoundaries,
 } from './ReactFiberWorkLoop.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
@@ -256,6 +256,7 @@ import {
   getSuspendedCache,
   pushTransition,
   getOffscreenDeferredCache,
+  getSuspendedTransitions,
 } from './ReactFiberTransition.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -655,13 +656,14 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       if (enableCache) {
         // push the cache pool even though we're going to bail out
         // because otherwise there'd be a context mismatch
         if (current !== null) {
-          pushTransition(workInProgress, null);
+          pushTransition(workInProgress, null, null);
         }
       }
       pushRenderLanes(workInProgress, renderLanes);
@@ -688,14 +690,15 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
         cachePool: spawnedCachePool,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
       if (enableCache) {
         // push the cache pool even though we're going to bail out
         // because otherwise there'd be a context mismatch
         if (current !== null) {
-          pushTransition(workInProgress, null);
+          pushTransition(workInProgress, null, null);
         }
       }
 
@@ -723,6 +726,7 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       // Push the lanes that were skipped when we bailed out.
@@ -733,7 +737,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState !== null ? prevState.cachePool : null;
-        pushTransition(workInProgress, prevCachePool);
+        pushTransition(workInProgress, prevCachePool, null);
       }
 
       pushRenderLanes(workInProgress, subtreeRenderLanes);
@@ -746,14 +750,14 @@ function updateOffscreenComponent(
 
       subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
 
-      if (enableCache) {
+      if (enableCache || enableTransitionTracing) {
         // If the render that spawned this one accessed the cache pool, resume
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        pushTransition(workInProgress, prevCachePool);
+        const transitions = prevState.transitions;
+        pushTransition(workInProgress, prevCachePool, transitions);
       }
-
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
     } else {
@@ -767,7 +771,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         if (current !== null) {
-          pushTransition(workInProgress, null);
+          pushTransition(workInProgress, null, null);
         }
       }
     }
@@ -1325,29 +1329,57 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
+
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
-
-  const nextState: RootState = workInProgress.memoizedState;
   const root: FiberRoot = workInProgress.stateNode;
 
+  if (enableCache || enableTransitionTracing) {
+    pushRootTransition(workInProgress, root, renderLanes);
+  }
+
   if (enableCache) {
-    const nextCache: Cache = nextState.cache;
-    pushRootTransition(root);
+    const nextCache: Cache = workInProgress.memoizedState.cache;
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
       propagateContextChange(workInProgress, CacheContext, renderLanes);
     }
   }
 
+  let transitions = null;
+  let pendingSuspenseBoundaries = null;
   if (enableTransitionTracing) {
-    // FIXME: Slipped past code review. This is not a safe mutation:
-    // workInProgress.memoizedState is a shared object. Need to fix before
-    // rolling out the Transition Tracing experiment.
-    workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+    const currentTransitions = getSuspendedTransitions();
+    const prevTransitions = prevState.transitions;
+
+    if (currentTransitions !== null) {
+      if (prevTransitions === null) {
+        transitions = currentTransitions;
+      } else {
+        transitions = prevTransitions.concat(currentTransitions);
+      }
+    } else {
+      transitions = prevTransitions;
+    }
+
+    if (prevState.pendingSuspenseBoundaries === null) {
+      pendingSuspenseBoundaries = new Map();
+    } else {
+      pendingSuspenseBoundaries = new Map(prevState.pendingSuspenseBoundaries);
+    }
+    setRootPendingSuspenseBoundaries(pendingSuspenseBoundaries);
   }
 
+  const nextState: RootState = {
+    element: workInProgress.memoizedState.element,
+    cache: workInProgress.memoizedState.cache,
+    isDehydrated: workInProgress.memoizedState.isDehydrated,
+    pendingSuspenseBoundaries,
+    transitions,
+  };
+  workInProgress.memoizedState = nextState;
+
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
@@ -1361,6 +1393,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
+      pendingSuspenseBoundaries: nextState.pendingSuspenseBoundaries,
       transitions: nextState.transitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
@@ -1978,6 +2011,7 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
     cachePool: getSuspendedCache(),
+    transitions: getSuspendedTransitions(),
   };
 }
 
@@ -2009,9 +2043,22 @@ function updateSuspenseOffscreenState(
       cachePool = getSuspendedCache();
     }
   }
+
+  let transitions = null;
+  if (enableTransitionTracing) {
+    const currentTransitions = getSuspendedTransitions();
+    const prevTransitions = prevOffscreenState.transitions;
+    if (prevTransitions !== null) {
+      transitions = prevTransitions.concat(currentTransitions);
+    } else {
+      transitions = currentTransitions;
+    }
+  }
+
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
+    transitions,
   };
 }
 
@@ -2345,9 +2392,16 @@ function mountSuspensePrimaryChildren(
   renderLanes,
 ) {
   const mode = workInProgress.mode;
+  const props = workInProgress.memoizedProps;
+  let name = null;
+  if (props !== null) {
+    name = props.name;
+  }
+
   const primaryChildProps: OffscreenProps = {
     mode: 'visible',
     children: primaryChildren,
+    name,
   };
   const primaryChildFragment = mountWorkInProgressOffscreenFiber(
     primaryChildProps,
@@ -2367,10 +2421,15 @@ function mountSuspenseFallbackChildren(
 ) {
   const mode = workInProgress.mode;
   const progressedPrimaryFragment: Fiber | null = workInProgress.child;
-
+  const props = workInProgress.memoizedProps;
+  let name = null;
+  if (props !== null) {
+    name = props.name;
+  }
   const primaryChildProps: OffscreenProps = {
     mode: 'hidden',
     children: primaryChildren,
+    name,
   };
 
   let primaryChildFragment;
@@ -2448,6 +2507,7 @@ function updateSuspensePrimaryChildren(
   primaryChildren,
   renderLanes,
 ) {
+  const name = workInProgress.pendingProps.name;
   const currentPrimaryChildFragment: Fiber = (current.child: any);
   const currentFallbackChildFragment: Fiber | null =
     currentPrimaryChildFragment.sibling;
@@ -2457,6 +2517,7 @@ function updateSuspensePrimaryChildren(
     {
       mode: 'visible',
       children: primaryChildren,
+      name,
     },
   );
   if ((workInProgress.mode & ConcurrentMode) === NoMode) {
@@ -2486,6 +2547,7 @@ function updateSuspenseFallbackChildren(
   fallbackChildren,
   renderLanes,
 ) {
+  const name = workInProgress.pendingProps.name;
   const mode = workInProgress.mode;
   const currentPrimaryChildFragment: Fiber = (current.child: any);
   const currentFallbackChildFragment: Fiber | null =
@@ -2494,6 +2556,7 @@ function updateSuspenseFallbackChildren(
   const primaryChildProps: OffscreenProps = {
     mode: 'hidden',
     children: primaryChildren,
+    name,
   };
 
   let primaryChildFragment;
@@ -2652,10 +2715,12 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   fallbackChildren,
   renderLanes,
 ) {
+  const name = workInProgress.pendingProps.name;
   const fiberMode = workInProgress.mode;
   const primaryChildProps: OffscreenProps = {
     mode: 'visible',
     children: primaryChildren,
+    name,
   };
   const primaryChildFragment = mountWorkInProgressOffscreenFiber(
     primaryChildProps,
@@ -3571,14 +3636,50 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     case HostRoot:
       pushHostRootContext(workInProgress);
       const root: FiberRoot = workInProgress.stateNode;
+      if (enableCache || enableTransitionTracing) {
+        pushRootTransition(workInProgress, root, renderLanes);
+      }
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
-        pushRootTransition(root);
       }
+
+      let transitions = null;
+      let pendingSuspenseBoundaries = null;
       if (enableTransitionTracing) {
-        workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+        const prevState = current.memoizedState;
+
+        const currentTransitions = getSuspendedTransitions();
+        const prevTransitions = prevState.transitions;
+        if (currentTransitions !== null) {
+          if (prevTransitions === null) {
+            transitions = currentTransitions;
+          } else {
+            transitions = prevTransitions.concat(currentTransitions);
+          }
+        } else {
+          transitions = prevTransitions;
+        }
+
+        if (prevState.pendingSuspenseBoundaries === null) {
+          pendingSuspenseBoundaries = new Map();
+        } else {
+          pendingSuspenseBoundaries = new Map(
+            prevState.pendingSuspenseBoundaries,
+          );
+        }
+        setRootPendingSuspenseBoundaries(pendingSuspenseBoundaries);
       }
+
+      const nextState: RootState = {
+        element: workInProgress.memoizedState.element,
+        cache: workInProgress.memoizedState.cache,
+        isDehydrated: workInProgress.memoizedState.isDehydrated,
+        pendingSuspenseBoundaries,
+        transitions,
+      };
+      workInProgress.memoizedState = nextState;
       resetHydrationState();
       break;
     case HostComponent:

packages/react-reconciler/src/ReactFiberCacheComponent.old.js

@@ -13,8 +13,8 @@ import {enableCache} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 import {pushProvider, popProvider} from './ReactFiberNewContext.old';
-import * as Scheduler from 'scheduler';
 
+import * as Scheduler from 'scheduler';
 export type Cache = {|
   controller: AbortController,
   data: Map<() => mixed, mixed>,