Skip to content

Commit

Permalink
Add useSwipeTransition Hook Behind Experimental Flag (#32373)
Browse files Browse the repository at this point in the history
This Hook will be used to drive a View Transition based on a gesture.

```js
const [value, startGesture] = useSwipeTransition(prev, current, next);
```

The `enableSwipeTransition` flag will depend on `enableViewTransition`
flag but we may decide to ship them independently. This PR doesn't do
anything interesting yet. There will be a lot more PRs to build out the
actual functionality. This is just wiring up the plumbing for the new
Hook.

This first PR is mainly concerned with how the whole starts (and stops).
The core API is the `startGesture` function (although there will be
other conveniences added in the future). You can call this to start a
gesture with a source provider. You can call this multiple times in one
event to batch multiple Hooks listening to the same provider. However,
each render can only handle one source provider at a time and so it does
one render per scheduled gesture provider.

This uses a separate `GestureLane` to drive gesture renders by marking
the Hook as having an update on that lane. Then schedule a render. These
renders should be blocking and in the same microtask as the
`startGesture` to ensure it can block the paint. So it's similar to
sync.

It may not be possible to finish it synchronously e.g. if something
suspends. If so, it just tries again later when it can like any other
render. This can also happen because it also may not be possible to
drive more than one gesture at a time like if we're limited to one View
Transition per document. So right now you can only run one gesture at a
time in practice.

These renders never commit. This means that we can't clear the
`GestureLane` the normal way. Instead, we have to clear only the root's
`pendingLanes` if we don't have any new renders scheduled. Then wait
until something else updates the Fiber after all gestures on it have
stopped before it really clears.

DiffTrain build for [a53da6a](a53da6a)
  • Loading branch information
sebmarkbage committed Feb 13, 2025
1 parent a622ad3 commit 08859f9
Show file tree
Hide file tree
Showing 34 changed files with 870 additions and 830 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
c6a7e18636e610efd3aa7a437bbcaf321bf73abd
a53da6abe1593483098df2baf927fe07d80153a5
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION_TRANSFORMS
Original file line number Diff line number Diff line change
@@ -1 +1 @@
c6a7e18636e610efd3aa7a437bbcaf321bf73abd
a53da6abe1593483098df2baf927fe07d80153a5
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -1986,7 +1986,7 @@ __DEV__ &&
exports.useTransition = function () {
return resolveDispatcher().useTransition();
};
exports.version = "19.1.0-www-classic-c6a7e186-20250213";
exports.version = "19.1.0-www-classic-a53da6ab-20250213";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -1986,7 +1986,7 @@ __DEV__ &&
exports.useTransition = function () {
return resolveDispatcher().useTransition();
};
exports.version = "19.1.0-www-modern-c6a7e186-20250213";
exports.version = "19.1.0-www-modern-a53da6ab-20250213";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-prod.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -641,4 +641,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.1.0-www-classic-c6a7e186-20250213";
exports.version = "19.1.0-www-classic-a53da6ab-20250213";
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-prod.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -641,4 +641,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.1.0-www-modern-c6a7e186-20250213";
exports.version = "19.1.0-www-modern-a53da6ab-20250213";
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-profiling.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -645,7 +645,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.1.0-www-classic-c6a7e186-20250213";
exports.version = "19.1.0-www-classic-a53da6ab-20250213";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/React-profiling.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -645,7 +645,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.1.0-www-modern-c6a7e186-20250213";
exports.version = "19.1.0-www-modern-a53da6ab-20250213";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
86 changes: 44 additions & 42 deletions compiled/facebook-www/ReactART-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -443,8 +443,8 @@ __DEV__ &&
if (lane & 8) return "InputContinuous";
if (lane & 16) return "DefaultHydration";
if (lane & 32) return "Default";
if (lane & 64) return "TransitionHydration";
if (lane & 4194176) return "Transition";
if (lane & 128) return "TransitionHydration";
if (lane & 4194048) return "Transition";
if (lane & 62914560) return "Retry";
if (lane & 67108864) return "SelectiveHydration";
if (lane & 134217728) return "IdleHydration";
Expand Down Expand Up @@ -472,6 +472,7 @@ __DEV__ &&
case 64:
return 64;
case 128:
return 128;
case 256:
case 512:
case 1024:
Expand All @@ -486,7 +487,7 @@ __DEV__ &&
case 524288:
case 1048576:
case 2097152:
return lanes & 4194176;
return lanes & 4194048;
case 4194304:
case 8388608:
case 16777216:
Expand Down Expand Up @@ -550,7 +551,7 @@ __DEV__ &&
((suspendedLanes = nextLanes & -nextLanes),
(rootHasPendingCommit = wipLanes & -wipLanes),
suspendedLanes >= rootHasPendingCommit ||
(32 === suspendedLanes && 0 !== (rootHasPendingCommit & 4194176)))
(32 === suspendedLanes && 0 !== (rootHasPendingCommit & 4194048)))
? wipLanes
: nextLanes;
}
Expand All @@ -568,10 +569,10 @@ __DEV__ &&
case 2:
case 4:
case 8:
case 64:
return currentTime + syncLaneExpirationMs;
case 16:
case 32:
case 64:
case 128:
case 256:
case 512:
Expand Down Expand Up @@ -613,7 +614,7 @@ __DEV__ &&
function claimNextTransitionLane() {
var lane = nextTransitionLane;
nextTransitionLane <<= 1;
0 === (nextTransitionLane & 4194176) && (nextTransitionLane = 128);
0 === (nextTransitionLane & 4194048) && (nextTransitionLane = 256);
return lane;
}
function claimNextRetryLane() {
Expand Down Expand Up @@ -683,7 +684,7 @@ __DEV__ &&
root.entanglements[spawnedLaneIndex] =
root.entanglements[spawnedLaneIndex] |
1073741824 |
(entangledLanes & 4194218);
(entangledLanes & 4194090);
}
function markRootEntangled(root, entangledLanes) {
var rootEntangledLanes = (root.entangledLanes |= entangledLanes);
Expand Down Expand Up @@ -2284,8 +2285,8 @@ __DEV__ &&
(1 << (31 - clz32(42 | syncTransitionLanes) + 1)) - 1;
nextLanes &= pendingLanes & ~(suspendedLanes & ~pingedLanes);
nextLanes =
nextLanes & 201326677
? (nextLanes & 201326677) | 1
nextLanes & 201326741
? (nextLanes & 201326741) | 1
: nextLanes
? nextLanes | 2
: 0;
Expand Down Expand Up @@ -2775,17 +2776,19 @@ __DEV__ &&
(isHidden = !0)),
(sourceFiber = parent),
(parent = parent.return);
isHidden &&
null !== update &&
3 === sourceFiber.tag &&
((parent = sourceFiber.stateNode),
(isHidden = 31 - clz32(lane)),
(parent = parent.hiddenUpdates),
(sourceFiber = parent[isHidden]),
null === sourceFiber
? (parent[isHidden] = [update])
: sourceFiber.push(update),
(update.lane = lane | 536870912));
return 3 === sourceFiber.tag
? ((parent = sourceFiber.stateNode),
isHidden &&
null !== update &&
((isHidden = 31 - clz32(lane)),
(sourceFiber = parent.hiddenUpdates),
(alternate = sourceFiber[isHidden]),
null === alternate
? (sourceFiber[isHidden] = [update])
: alternate.push(update),
(update.lane = lane | 536870912)),
parent)
: null;
}
function getRootForUpdatedFiber(sourceFiber) {
throwIfInfiniteUpdateLoopDetected();
Expand Down Expand Up @@ -2861,7 +2864,7 @@ __DEV__ &&
}
function entangleTransitions(root, fiber, lane) {
fiber = fiber.updateQueue;
if (null !== fiber && ((fiber = fiber.shared), 0 !== (lane & 4194176))) {
if (null !== fiber && ((fiber = fiber.shared), 0 !== (lane & 4194048))) {
var queueLanes = fiber.lanes;
queueLanes &= root.pendingLanes;
lane |= queueLanes;
Expand Down Expand Up @@ -3702,7 +3705,7 @@ __DEV__ &&
throw Error(
"Expected a work-in-progress root. This is a bug in React. Please file an issue."
);
0 !== (workInProgressRootRenderLanes & 60) ||
0 !== (workInProgressRootRenderLanes & 124) ||
pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
hook.memoizedState = nextSnapshot;
cachedSnapshot = { value: nextSnapshot, getSnapshot: getSnapshot };
Expand Down Expand Up @@ -3772,7 +3775,7 @@ __DEV__ &&
throw Error(
"Expected a work-in-progress root. This is a bug in React. Please file an issue."
);
0 !== (renderLanes & 60) ||
0 !== (renderLanes & 124) ||
pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
}
return nextSnapshot;
Expand Down Expand Up @@ -4791,7 +4794,7 @@ __DEV__ &&
queue.pending = update;
}
function entangleTransitionUpdate(root, queue, lane) {
if (0 !== (lane & 4194176)) {
if (0 !== (lane & 4194048)) {
var queueLanes = queue.lanes;
queueLanes &= root.pendingLanes;
lane |= queueLanes;
Expand Down Expand Up @@ -7659,7 +7662,6 @@ __DEV__ &&
case 32:
nextProps = 16;
break;
case 128:
case 256:
case 512:
case 1024:
Expand All @@ -7678,7 +7680,7 @@ __DEV__ &&
case 8388608:
case 16777216:
case 33554432:
nextProps = 64;
nextProps = 128;
break;
case 268435456:
nextProps = 134217728;
Expand Down Expand Up @@ -10304,7 +10306,7 @@ __DEV__ &&
focusedInstanceHandle = null;
shouldFireAfterActiveInstanceBlur = !1;
root =
enableViewTransition && (committedLanes & 335544192) === committedLanes;
enableViewTransition && (committedLanes & 335544064) === committedLanes;
nextEffect = firstChild;
for (firstChild = root ? 9238 : 9236; null !== nextEffect; ) {
committedLanes = nextEffect;
Expand Down Expand Up @@ -11618,7 +11620,7 @@ __DEV__ &&
recursivelyTraverseMutationEffects(root, finishedWork, lanes);
commitReconciliationEffects(finishedWork);
enableViewTransition &&
(lanes & 335544192) === lanes &&
(lanes & 335544064) === lanes &&
null !== current &&
viewTransitionMutationContext &&
(finishedWork.flags |= 4);
Expand Down Expand Up @@ -11940,7 +11942,7 @@ __DEV__ &&
committedTransitions
) {
var isViewTransitionEligible =
enableViewTransition && (committedLanes & 335544192) === committedLanes;
enableViewTransition && (committedLanes & 335544064) === committedLanes;
if (parentFiber.subtreeFlags & (isViewTransitionEligible ? 10262 : 10256))
for (parentFiber = parentFiber.child; null !== parentFiber; )
commitPassiveMountOnFiber(
Expand All @@ -11960,7 +11962,7 @@ __DEV__ &&
committedTransitions
) {
var isViewTransitionEligible = enableViewTransition
? (committedLanes & 335544192) === committedLanes
? (committedLanes & 335544064) === committedLanes
: !1;
isViewTransitionEligible &&
null === finishedWork.alternate &&
Expand Down Expand Up @@ -12825,7 +12827,7 @@ __DEV__ &&
throw Error("Should not already be working.");
var shouldTimeSlice =
(!forceSync &&
0 === (lanes & 60) &&
0 === (lanes & 124) &&
0 === (lanes & root.expiredLanes)) ||
(enableSiblingPrerendering && checkIfRootIsPrerendering(root, lanes)),
exitStatus = shouldTimeSlice
Expand Down Expand Up @@ -12908,7 +12910,7 @@ __DEV__ &&
case RootFatalErrored:
throw Error("Root did not complete. This is a bug in React.");
case RootSuspendedWithDelay:
if ((lanes & 4194176) !== lanes) break;
if ((lanes & 4194048) !== lanes) break;
case RootSuspendedAtTheShell:
markRootSuspended(
shouldTimeSlice,
Expand Down Expand Up @@ -13014,7 +13016,7 @@ __DEV__ &&
root.timeoutHandle = -1;
var subtreeFlags = finishedWork.subtreeFlags;
if (
(enableViewTransition && (lanes & 335544192) === lanes) ||
(enableViewTransition && (lanes & 335544064) === lanes) ||
subtreeFlags & 8192 ||
16785408 === (subtreeFlags & 16785408)
)
Expand Down Expand Up @@ -13185,7 +13187,7 @@ __DEV__ &&
(JSCompiler_temp =
null === JSCompiler_temp
? !0
: (workInProgressRootRenderLanes & 4194176) ===
: (workInProgressRootRenderLanes & 4194048) ===
workInProgressRootRenderLanes
? null === shellBoundary
? !0
Expand Down Expand Up @@ -13269,7 +13271,7 @@ __DEV__ &&
function renderDidSuspendDelayIfPossible() {
workInProgressRootExitStatus = RootSuspendedWithDelay;
workInProgressRootDidSkipSuspendedSiblings ||
((workInProgressRootRenderLanes & 4194176) !==
((workInProgressRootRenderLanes & 4194048) !==
workInProgressRootRenderLanes &&
null !== suspenseHandlerStackCursor.current) ||
(workInProgressRootIsPrerendering = !0);
Expand Down Expand Up @@ -13818,7 +13820,7 @@ __DEV__ &&
pendingDidIncludeRenderPhaseUpdate = didIncludeRenderPhaseUpdate;
enableViewTransition
? ((pendingViewTransitionEvents = null),
(lanes & 335544192) === lanes
(lanes & 335544064) === lanes
? ((pendingTransitionTypes = ReactSharedInternals.V),
(ReactSharedInternals.V = null),
(recoverableErrors = 10262))
Expand Down Expand Up @@ -13945,7 +13947,7 @@ __DEV__ &&
recoverableErrors = pendingRecoverableErrors,
didIncludeRenderPhaseUpdate = pendingDidIncludeRenderPhaseUpdate,
passiveSubtreeMask =
enableViewTransition && (lanes & 335544192) === lanes
enableViewTransition && (lanes & 335544064) === lanes
? 10262
: 10256;
(passiveSubtreeMask =
Expand Down Expand Up @@ -14045,7 +14047,7 @@ __DEV__ &&
remainingLanes = root.pendingLanes;
(enableInfiniteRenderLoopDetection &&
(didIncludeRenderPhaseUpdate || didIncludeCommitPhaseUpdate)) ||
(0 !== (lanes & 4194218) && 0 !== (remainingLanes & 42))
(0 !== (lanes & 4194090) && 0 !== (remainingLanes & 42))
? ((nestedUpdateScheduled = !0),
root === rootWithNestedUpdates
? nestedUpdateCount++
Expand Down Expand Up @@ -15265,7 +15267,7 @@ __DEV__ &&
clz32 = Math.clz32 ? Math.clz32 : clz32Fallback,
log = Math.log,
LN2 = Math.LN2,
nextTransitionLane = 128,
nextTransitionLane = 256,
nextRetryLane = 4194304,
DiscreteEventPriority = 2,
ContinuousEventPriority = 8,
Expand Down Expand Up @@ -17392,10 +17394,10 @@ __DEV__ &&
(function () {
var internals = {
bundleType: 1,
version: "19.1.0-www-classic-c6a7e186-20250213",
version: "19.1.0-www-classic-a53da6ab-20250213",
rendererPackageName: "react-art",
currentDispatcherRef: ReactSharedInternals,
reconcilerVersion: "19.1.0-www-classic-c6a7e186-20250213"
reconcilerVersion: "19.1.0-www-classic-a53da6ab-20250213"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -17429,7 +17431,7 @@ __DEV__ &&
exports.Shape = Shape;
exports.Surface = Surface;
exports.Text = Text;
exports.version = "19.1.0-www-classic-c6a7e186-20250213";
exports.version = "19.1.0-www-classic-a53da6ab-20250213";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Loading

0 comments on commit 08859f9

Please sign in to comment.