Skip to content

Commit

Permalink
old
Browse files Browse the repository at this point in the history
  • Loading branch information
@lunaruan
lunaruan committed Aug 22, 2022
1 parent df7c004 commit 505f0c7
Show file tree
Hide file tree
Showing 6 changed files with 308 additions and 47 deletions.
2 changes: 2 additions & 0 deletions packages/react-reconciler/src/ReactFiber.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -774,6 +774,8 @@ export function createFiberFromTracingMarker(
tag: TransitionTracingMarker,
transitions: null,
pendingBoundaries: null,
aborts: null,
name: pendingProps.name,
};
fiber.stateNode = tracingMarkerInstance;
return fiber;
Expand Down
6 changes: 5 additions & 1 deletion packages/react-reconciler/src/ReactFiberBeginWork.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ import {
StaticMask,
ShouldCapture,
ForceClientRender,
Passive,
} from './ReactFiberFlags';
import ReactSharedInternals from 'shared/ReactSharedInternals';
import {
Expand Down Expand Up @@ -979,10 +980,13 @@ function updateTracingMarkerComponent(
const markerInstance: TracingMarkerInstance = {
tag: TransitionTracingMarker,
transitions: new Set(currentTransitions),
pendingBoundaries: new Map(),
pendingBoundaries: null,
name: workInProgress.pendingProps.name,
aborts: null,
};
workInProgress.stateNode = markerInstance;

workInProgress.flags |= Passive;
}
} else {
if (__DEV__) {
Expand Down
236 changes: 204 additions & 32 deletions packages/react-reconciler/src/ReactFiberCommitWork.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,11 @@ import type {
import type {HookFlags} from './ReactHookEffectTags';
import type {Cache} from './ReactFiberCacheComponent.old';
import type {RootState} from './ReactFiberRoot.old';
import type {Transition} from './ReactFiberTracingMarkerComponent.old';
import type {
Transition,
TracingMarkerInstance,
TransitionAbort,
} from './ReactFiberTracingMarkerComponent.old';

import {
enableCreateEventHandleAPI,
Expand Down Expand Up @@ -146,6 +150,7 @@ import {
addTransitionProgressCallbackToPendingTransition,
addTransitionCompleteCallbackToPendingTransition,
addMarkerProgressCallbackToPendingTransition,
addMarkerIncompleteCallbackToPendingTransition,
addMarkerCompleteCallbackToPendingTransition,
setIsRunningInsertionEffect,
} from './ReactFiberWorkLoop.old';
Expand Down Expand Up @@ -1135,6 +1140,128 @@ function commitLayoutEffectOnFiber(
}
}

function abortTransitionMarker(
deletedFiber: Fiber,
currentFiber: Fiber,
abort: TransitionAbort,
isInDeletedTree: boolean,
) {
const markerInstance: TracingMarkerInstance = currentFiber.stateNode;
const deletedInstance: OffscreenInstance = deletedFiber.stateNode;
const deletedTransitions = deletedFiber.stateNode.transitions;
const pendingBoundaries = markerInstance.pendingBoundaries;

let aborts = markerInstance.aborts;
if (aborts === null) {
markerInstance.aborts = aborts = [];
}

aborts.push(abort);
addMarkerIncompleteCallbackToPendingTransition(
currentFiber.memoizedProps.name,
deletedTransitions,
aborts,
);

// We only want to call onTransitionProgress when the marker hasn't been
// deleted
if (
!isInDeletedTree &&
pendingBoundaries !== null &&
pendingBoundaries.has(deletedInstance)
) {
pendingBoundaries.delete(deletedInstance);

addMarkerProgressCallbackToPendingTransition(
currentFiber.memoizedProps.name,
deletedTransitions,
pendingBoundaries,
);
}
}

function abortParentMarkerTransitions(
deletedFiber: Fiber,
nearestMountedAncestor: Fiber,
abort: TransitionAbort,
) {
// Find all pending markers that are waiting on child suspense boundaries in the
// aborted subtree and cancels them
const deletedFiberInstance: OffscreenInstance = deletedFiber.stateNode;
const abortedTransitions = deletedFiberInstance.transitions;
if (abortedTransitions !== null) {
let fiber = deletedFiber;
let isInDeletedTree = true;
while (fiber !== null) {
switch (fiber.tag) {
case TracingMarkerComponent:
const markerInstance: TracingMarkerInstance = fiber.stateNode;
const markerTransitions = markerInstance.transitions;
if (markerTransitions !== null) {
// TODO: Refactor this code. Is there a way to move this code to
// the deletions phase instead of calculating it here while making sure
// complete is called appropriately?
abortedTransitions.forEach(transition => {
// If one of the transitions on the tracing marker is a transition
// that was in an aborted subtree, we will abort that tracing marker
if (
fiber !== null &&
markerTransitions.has(transition) &&
(markerInstance.aborts === null ||
!markerInstance.aborts.includes(abort))
) {
abortTransitionMarker(
deletedFiber,
fiber,
abort,
isInDeletedTree,
);
}
});
}
break;
case HostRoot:
const root = fiber.stateNode;
const rootTransitions = root.incompleteTransitions;

abortedTransitions.forEach(transition => {
if (rootTransitions.has(transition)) {
const transitionInstance: TracingMarkerInstance = rootTransitions.get(
transition,
);
if (transitionInstance.aborts === null) {
transitionInstance.aborts = [];
}
transitionInstance.aborts.push(abort);

if (
transitionInstance.pendingBoundaries !== null &&
transitionInstance.pendingBoundaries.has(deletedFiberInstance)
) {
transitionInstance.pendingBoundaries.delete(
deletedFiberInstance,
);
}
}
});
break;
default:
break;
}

if (
nearestMountedAncestor.deletions !== null &&
nearestMountedAncestor.deletions.includes(fiber)
) {
isInDeletedTree = false;
fiber = nearestMountedAncestor;
} else {
fiber = fiber.return;
}
}
}
}

function commitTransitionProgress(offscreenFiber: Fiber) {
if (enableTransitionTracing) {
// This function adds suspense boundaries to the root
Expand Down Expand Up @@ -1180,6 +1307,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
pendingMarkers.forEach(markerInstance => {
const pendingBoundaries = markerInstance.pendingBoundaries;
const transitions = markerInstance.transitions;
const markerName = markerInstance.name;
if (
pendingBoundaries !== null &&
!pendingBoundaries.has(offscreenInstance)
Expand All @@ -1190,10 +1318,10 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
if (transitions !== null) {
if (
markerInstance.tag === TransitionTracingMarker &&
markerInstance.name !== undefined
markerName !== null
) {
addMarkerProgressCallbackToPendingTransition(
markerInstance.name,
markerName,
transitions,
pendingBoundaries,
);
Expand All @@ -1217,6 +1345,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
pendingMarkers.forEach(markerInstance => {
const pendingBoundaries = markerInstance.pendingBoundaries;
const transitions = markerInstance.transitions;
const markerName = markerInstance.name;
if (
pendingBoundaries !== null &&
pendingBoundaries.has(offscreenInstance)
Expand All @@ -1225,13 +1354,25 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
if (transitions !== null) {
if (
markerInstance.tag === TransitionTracingMarker &&
markerInstance.name !== undefined
markerName !== null
) {
addMarkerProgressCallbackToPendingTransition(
markerInstance.name,
markerName,
transitions,
pendingBoundaries,
);

if (pendingBoundaries.size === 0) {
if (markerInstance.aborts === null) {
addMarkerCompleteCallbackToPendingTransition(
markerName,
transitions,
);
}
markerInstance.transitions = null;
markerInstance.pendingBoundaries = null;
markerInstance.aborts = null;
}
} else if (markerInstance.tag === TransitionRoot) {
transitions.forEach(transition => {
addTransitionProgressCallbackToPendingTransition(
Expand Down Expand Up @@ -1996,6 +2137,7 @@ function commitDeletionEffectsOnFiber(
const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
offscreenSubtreeWasHidden =
prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;

recursivelyTraverseDeletionEffects(
finishedRoot,
nearestMountedAncestor,
Expand All @@ -2011,6 +2153,45 @@ function commitDeletionEffectsOnFiber(
}
break;
}
case SuspenseComponent: {
if (enableTransitionTracing) {
// We need to mark this fiber's parents as deleted
const offscreenFiber: Fiber = (deletedFiber.child: any);
const instance: OffscreenInstance = offscreenFiber.stateNode;
const transitions = instance.transitions;
if (transitions !== null) {
abortParentMarkerTransitions(offscreenFiber, nearestMountedAncestor, {
reason: 'suspense',
name: deletedFiber.memoizedProps.unstable_name || null,
});
}
}
recursivelyTraverseDeletionEffects(
finishedRoot,
nearestMountedAncestor,
deletedFiber,
);
return;
}
case TracingMarkerComponent: {
if (enableTransitionTracing) {
// We need to mark this fiber's parents as deleted
const instance: TracingMarkerInstance = deletedFiber.stateNode;
const transitions = instance.transitions;
if (transitions !== null) {
abortParentMarkerTransitions(deletedFiber, nearestMountedAncestor, {
reason: 'marker',
name: deletedFiber.memoizedProps.name,
});
}
}
recursivelyTraverseDeletionEffects(
finishedRoot,
nearestMountedAncestor,
deletedFiber,
);
return;
}
default: {
recursivelyTraverseDeletionEffects(
finishedRoot,
Expand Down Expand Up @@ -2986,6 +3167,12 @@ function commitOffscreenPassiveMountEffects(
}

commitTransitionProgress(finishedWork);

// TODO: Refactor this into an if/else branch
if (!isHidden) {
instance.transitions = null;
instance.pendingMarkers = null;
}
}
}

Expand Down Expand Up @@ -3016,20 +3203,18 @@ function commitCachePassiveMountEffect(
function commitTracingMarkerPassiveMountEffect(finishedWork: Fiber) {
// Get the transitions that were initiatized during the render
// and add a start transition callback for each of them
// We will only call this on initial mount of the tracing marker
// only if there are no suspense children
const instance = finishedWork.stateNode;
if (
instance.transitions !== null &&
(instance.pendingBoundaries === null ||
instance.pendingBoundaries.size === 0)
) {
instance.transitions.forEach(transition => {
addMarkerCompleteCallbackToPendingTransition(
finishedWork.memoizedProps.name,
instance.transitions,
);
});
if (instance.transitions !== null && instance.pendingBoundaries === null) {
addMarkerCompleteCallbackToPendingTransition(
finishedWork.memoizedProps.name,
instance.transitions,
);
instance.transitions = null;
instance.pendingBoundaries = null;
instance.aborts = null;
instance.name = null;
}
}

Expand Down Expand Up @@ -3145,7 +3330,9 @@ function commitPassiveMountOnFiber(
incompleteTransitions.forEach((markerInstance, transition) => {
const pendingBoundaries = markerInstance.pendingBoundaries;
if (pendingBoundaries === null || pendingBoundaries.size === 0) {
addTransitionCompleteCallbackToPendingTransition(transition);
if (markerInstance.aborts === null) {
addTransitionCompleteCallbackToPendingTransition(transition);
}
incompleteTransitions.delete(transition);
}
});
Expand Down Expand Up @@ -3518,21 +3705,6 @@ function commitAtomicPassiveEffects(
}
break;
}
case TracingMarkerComponent: {
if (enableTransitionTracing) {
recursivelyTraverseAtomicPassiveEffects(
finishedRoot,
finishedWork,
committedLanes,
committedTransitions,
);
if (flags & Passive) {
commitTracingMarkerPassiveMountEffect(finishedWork);
}
break;
}
// Intentional fallthrough to next branch
}
// eslint-disable-next-line-no-fallthrough
default: {
recursivelyTraverseAtomicPassiveEffects(
Expand Down
10 changes: 0 additions & 10 deletions packages/react-reconciler/src/ReactFiberCompleteWork.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1589,16 +1589,6 @@ function completeWork(
popMarkerInstance(workInProgress);
}
bubbleProperties(workInProgress);

if (
current === null ||
(workInProgress.subtreeFlags & Visibility) !== NoFlags
) {
// If any of our suspense children toggle visibility, this means that
// the pending boundaries array needs to be updated, which we only
// do in the passive phase.
workInProgress.flags |= Passive;
}
}
return null;
}
Expand Down
Loading

0 comments on commit 505f0c7

Please sign in to comment.