reconcile fork

Author: lunaruan

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

@@ -226,18 +226,10 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
-  getWorkInProgressTransitions,
+  generateNewSuspenseOffscreenID,
 } from './ReactFiberWorkLoop.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
-import {
-  requestCacheFromPool,
-  pushCacheProvider,
-  pushRootCachePool,
-  CacheContext,
-  getSuspendedCachePool,
-  pushSpawnedCachePool,
-  getOffscreenDeferredCachePool,
-} from './ReactFiberCacheComponent.old';
+import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
 import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
@@ -248,6 +240,15 @@ import {
   pushTreeId,
   pushMaterializedTreeId,
 } from './ReactFiberTreeContext.old';
+import {pushRootPendingSuspenseBoundaries} from './ReactFiberTracingMarkerComponent.old';
+import {
+  pushRootTransitionPool,
+  getSuspendedCachePool,
+  getSuspendedTransitionPool,
+  pushTransitionPool,
+  getOffscreenDeferredCachePool,
+  requestCacheFromPool,
+} from './ReactFiberTransitionPool.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -646,13 +647,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) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransitionPool(workInProgress, null, null);
         }
       }
       pushRenderLanes(workInProgress, renderLanes);
@@ -679,14 +681,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) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransitionPool(workInProgress, null, null);
         }
       }
 
@@ -714,6 +717,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.
@@ -724,7 +728,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;
-        pushSpawnedCachePool(workInProgress, prevCachePool);
+        pushTransitionPool(workInProgress, prevCachePool, null);
       }
 
       pushRenderLanes(workInProgress, subtreeRenderLanes);
@@ -737,12 +741,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;
-        pushSpawnedCachePool(workInProgress, prevCachePool);
+        const transitions = prevState.transitions;
+
+        pushTransitionPool(workInProgress, prevCachePool, transitions);
       }
 
       // Since we're not hidden anymore, reset the state
@@ -758,7 +764,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         if (current !== null) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransitionPool(workInProgress, null, null);
         }
       }
     }
@@ -1327,9 +1333,12 @@ function updateHostRoot(current, workInProgress, renderLanes) {
 
   const root: FiberRoot = workInProgress.stateNode;
 
+  if (enableCache || enableTransitionTracing) {
+    pushRootTransitionPool(root, renderLanes);
+  }
+
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
-    pushRootCachePool(root);
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
@@ -1338,7 +1347,28 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   }
 
   if (enableTransitionTracing) {
-    workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+    const transitions = getSuspendedTransitionPool();
+    const nextTransitions = [];
+    if (transitions !== null) {
+      transitions.forEach(transition => {
+        nextTransitions.push(transition);
+      });
+    }
+    const rootTransitions = prevState.transitions;
+    if (rootTransitions != null) {
+      rootTransitions.forEach(transition => {
+        nextTransitions.push(transition);
+      });
+    }
+
+    let pendingSuspenseBoundaries = prevState.pendingSuspenseBoundaries;
+    if (pendingSuspenseBoundaries === null) {
+      pendingSuspenseBoundaries = new Map();
+    }
+    // probably have to actually copy this
+    workInProgress.memoizedState.transitions = nextTransitions;
+    workInProgress.memoizedState.pendingSuspenseBoundaries = pendingSuspenseBoundaries;
+    pushRootPendingSuspenseBoundaries(workInProgress);
   }
 
   // Caution: React DevTools currently depends on this property
@@ -1911,6 +1941,7 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
     cachePool: getSuspendedCachePool(),
+    transitions: getSuspendedTransitionPool(),
   };
 }
 
@@ -1942,9 +1973,29 @@ function updateSuspenseOffscreenState(
       cachePool = getSuspendedCachePool();
     }
   }
+
+  const transitions = [];
+  if (enableTransitionTracing) {
+    const prevTransitions = prevOffscreenState.transitions;
+    const newTransitions = getSuspendedTransitionPool();
+    if (prevTransitions !== null) {
+      prevTransitions.forEach(transition => {
+        transitions.push(transition);
+      });
+    }
+    if (newTransitions !== null) {
+      newTransitions.forEach(transition => {
+        if (!transitions.includes(transition)) {
+          transitions.push(transition);
+        }
+      });
+    }
+  }
+
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
+    transitions: transitions.length > 0 ? transitions : null,
   };
 }
 
@@ -2275,9 +2326,17 @@ 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,
+    id: generateNewSuspenseOffscreenID(),
   };
   const primaryChildFragment = mountWorkInProgressOffscreenFiber(
     primaryChildProps,
@@ -2297,10 +2356,16 @@ 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,
+    id: generateNewSuspenseOffscreenID(),
   };
 
   let primaryChildFragment;
@@ -2378,15 +2443,22 @@ function updateSuspensePrimaryChildren(
   primaryChildren,
   renderLanes,
 ) {
+  const name = workInProgress.pendingProps.name;
   const currentPrimaryChildFragment: Fiber = (current.child: any);
   const currentFallbackChildFragment: Fiber | null =
     currentPrimaryChildFragment.sibling;
+  const props =
+    currentPrimaryChildFragment.memoizedProps !== null
+      ? currentPrimaryChildFragment.memoizedProps
+      : currentPrimaryChildFragment.pendingProps;
 
   const primaryChildFragment = updateWorkInProgressOffscreenFiber(
     currentPrimaryChildFragment,
     {
       mode: 'visible',
       children: primaryChildren,
+      name,
+      id: props.id,
     },
   );
   if ((workInProgress.mode & ConcurrentMode) === NoMode) {
@@ -2416,14 +2488,21 @@ function updateSuspenseFallbackChildren(
   fallbackChildren,
   renderLanes,
 ) {
+  const name = workInProgress.pendingProps.name;
   const mode = workInProgress.mode;
   const currentPrimaryChildFragment: Fiber = (current.child: any);
   const currentFallbackChildFragment: Fiber | null =
     currentPrimaryChildFragment.sibling;
+  const props =
+    currentPrimaryChildFragment.memoizedProps !== null
+      ? currentPrimaryChildFragment.memoizedProps
+      : currentPrimaryChildFragment.pendingProps;
 
   const primaryChildProps: OffscreenProps = {
     mode: 'hidden',
     children: primaryChildren,
+    name,
+    id: props.id,
   };
 
   let primaryChildFragment;
@@ -2582,10 +2661,13 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   fallbackChildren,
   renderLanes,
 ) {
+  const name = workInProgress.pendingProps.name;
   const fiberMode = workInProgress.mode;
   const primaryChildProps: OffscreenProps = {
     mode: 'visible',
     children: primaryChildren,
+    name,
+    id: generateNewSuspenseOffscreenID(),
   };
   const primaryChildFragment = mountWorkInProgressOffscreenFiber(
     primaryChildProps,
@@ -3501,13 +3583,41 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     case HostRoot:
       pushHostRootContext(workInProgress);
       const root: FiberRoot = workInProgress.stateNode;
+      if (enableCache || enableTransitionTracing) {
+        pushRootTransitionPool(root, renderLanes);
+      }
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
-        pushRootCachePool(root);
       }
       if (enableTransitionTracing) {
-        workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+        const prevState = current.memoizedState;
+
+        const nextTransitions = [];
+        const transitions = getSuspendedTransitionPool();
+        if (transitions !== null) {
+          transitions.forEach(transition => {
+            nextTransitions.push(transition);
+          });
+        }
+        const rootTransitions = prevState.transitions;
+        if (rootTransitions != null) {
+          rootTransitions.forEach(transition => {
+            if (!nextTransitions.includes(transition))
+              nextTransitions.push(transition);
+          });
+        }
+
+        let pendingSuspenseBoundaries = prevState.pendingSuspenseBoundaries;
+        if (pendingSuspenseBoundaries == null) {
+          pendingSuspenseBoundaries = new Map();
+        }
+        // probably have to actually copy this
+        workInProgress.memoizedState.transitions = nextTransitions;
+        workInProgress.memoizedState.pendingSuspenseBoundaries = pendingSuspenseBoundaries;
+
+        pushRootPendingSuspenseBoundaries(workInProgress);
       }
       resetHydrationState();
       break;