deletions

packages/react-reconciler/src/ReactFiberCommitWork.new.js

@@ -25,6 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
+import type {Transitions} from './ReactFiberTracingMarkerComponent.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -40,6 +41,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   enableCache,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -60,6 +62,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
@@ -132,6 +135,7 @@ import {
   markCommitTimeOfFallback,
   enqueuePendingPassiveProfilerEffect,
   restorePendingUpdaters,
+  addCallbackToPendingTransitionCallbacks,
 } from './ReactFiberWorkLoop.new';
 import {
   NoFlags as NoHookEffect,
@@ -1764,6 +1768,38 @@ function unmountHostComponents(
         node = node.child;
         continue;
       }
+    } else if (node.tag === OffscreenComponent) {
+      // All transition on the tracing marker are now considered deleted
+      // We need to figure out how to remove them from the tree
+      if (enableTransitionTracing) {
+        const stateNode = node.memoizedState;
+        if (stateNode !== null) {
+          const incompleteTransitions = stateNode.transitions;
+
+          if (incompleteTransitions !== null) {
+            markIncompleteTransitionsFromFiberToRoot(
+              node,
+              incompleteTransitions,
+            );
+          }
+        }
+      }
+    } else if (node.tag === TracingMarkerComponent) {
+      // All transition on the tracing marker are now considered deleted
+      // We need to figure out how to remove them from the tree
+      if (enableTransitionTracing) {
+        const stateNode = node.memoizedState;
+        if (stateNode !== null) {
+          const incompleteTransitions = stateNode.transitions;
+
+          if (incompleteTransitions !== null) {
+            markIncompleteTransitionsFromFiberToRoot(
+              node,
+              incompleteTransitions,
+            );
+          }
+        }
+      }
     } else {
       commitUnmount(finishedRoot, node, nearestMountedAncestor);
       // Visit children because we may find more host components below.
@@ -1792,6 +1828,76 @@ function unmountHostComponents(
   }
 }
 
+function markIncompleteTransitionsFromFiberToRoot(
+  fiber: Fiber,
+  incompleteTransitions: Transitions,
+) {
+  if (!enableTransitionTracing) {
+    return;
+  }
+
+  const stateNode = fiber.memoizedState;
+  let deletion = null;
+  if (fiber.type === SuspenseComponent) {
+    const returnFiber = fiber.return;
+    if (
+      stateNode !== null &&
+      stateNode.transitions !== null &&
+      returnFiber !== null &&
+      returnFiber.type === SuspenseComponent
+    ) {
+      let suspenseName = null;
+      if (
+        returnFiber.memoizedProps !== null &&
+        returnFiber.memoizedProps.name
+      ) {
+        suspenseName = returnFiber.memoizedProps.name;
+      }
+
+      const deletion = {
+        type: 'suspense',
+        name: suspenseName,
+      };
+    }
+  } else if (fiber.type === OffscreenComponent) {
+    const deletion = {
+      type: 'marker',
+      name: fiber.memoizedProps.name,
+    };
+
+    let node = fiber;
+    while (node !== null) {
+      if (node.tag === TracingMarkerComponent) {
+        const markerStateNode = node.memoizedState;
+        if (markerStateNode !== null && markerStateNode.transitions !== null) {
+          incompleteTransitions.forEach(transition => {
+            alert;
+            // The transition on this marker also incomplete because
+            // the child marker with the same transition was deleted
+            if (markerStateNode.transitions.has(transition)) {
+              addCallbackToPendingTransitionCallbacks({
+                type: 'markerIncomplete',
+                transition,
+                deletion,
+              });
+            }
+          });
+        }
+      }
+      node = node.return;
+    }
+  }
+
+  // transition is also incomplete
+  incompleteTransitions.forEach(transition => {
+    addCallbackToPendingTransitionCallbacks({
+      type: 'transitionIncomplete',
+      transition,
+      deletion,
+    });
+  });
+}
+
 function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,

packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js

@@ -29,6 +29,7 @@ export type SuspenseProps = {|
   suspenseCallback?: (Set<Wakeable> | null) => mixed,
 
   unstable_expectedLoadTime?: number,
+  name?: string,
 |};
 
 // A null SuspenseState represents an unsuspended normal Suspense boundary.

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -316,6 +316,17 @@ let workInProgressRootRenderTargetTime: number = Infinity;
 // suspense heuristics and opt out of rendering more content.
 const RENDER_TIMEOUT_MS = 500;
 
+// TODO(luna) Actually figure out what the type of callbackObj is
+export function addCallbackToPendingTransitionCallbacks(callbackObj: {}) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = [];
+    }
+
+    currentPendingTransitionCallbacks.push(callbackObj);
+  }
+}
+
 function resetRenderTimer() {
   workInProgressRootRenderTargetTime = now() + RENDER_TIMEOUT_MS;
 }