mirror of
https://github.com/facebook/react.git
synced 2026-02-27 03:07:57 +00:00
a4d122f2d1
This will provide the opt-in for using [View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) in React. View Transitions only trigger for async updates like `startTransition`, `useDeferredValue`, Actions or `<Suspense>` revealing from fallback to content. Synchronous updates provide an opt-out but also guarantee that they commit immediately which View Transitions can't. There's no need to opt-in to View Transitions at the "cause" side like event handlers or actions. They don't know what UI will change and whether that has an animated transition described. Conceptually the `<ViewTransition>` component is like a DOM fragment that transitions its children in its own isolate/snapshot. The API works by wrapping a DOM node or inner component: ```js import {ViewTransition} from 'react'; <ViewTransition><Component /></ViewTransition> ``` The default is `name="auto"` which will automatically assign a `view-transition-name` to the inner DOM node. That way you can add a View Transition to a Component without controlling its DOM nodes styling otherwise. A difference between this and the browser's built-in `view-transition-name: auto` is that switching the DOM nodes within the `<ViewTransition>` component preserves the same name so this example cross-fades between the DOM nodes instead of causing an exit and enter: ```js <ViewTransition>{condition ? <ComponentA /> : <ComponentB />}</ViewTransition> ``` This becomes especially useful with `<Suspense>` as this example cross-fades between Skeleton and Content: ```js <ViewTransition> <Suspense fallback={<Skeleton />}> <Content /> </Suspense> </ViewTransition> ``` Where as this example triggers an exit of the Skeleton and an enter of the Content: ```js <Suspense fallback={<ViewTransition><Skeleton /></ViewTransition>}> <ViewTransition><Content /></ViewTransition> </Suspense> ``` Managing instances and keys becomes extra important. You can also specify an explicit `name` property for example for animating the same conceptual item from one page onto another. However, best practices is to property namespace these since they can easily collide. It's also useful to add an `id` to it if available. ```js <ViewTransition name="my-shared-view"> ``` The model in general is the same as plain `view-transition-name` except React manages a set of heuristics for when to apply it. A problem with the naive View Transitions model is that it overly opts in every boundary that *might* transition into transitioning. This is leads to unfortunate effects like things floating around when unrelated updates happen. This leads the whole document to animate which means that nothing is clickable in the meantime. It makes it not useful for smaller and more local transitions. Best practice is to add `view-transition-name` only right before you're about to need to animate the thing. This is tricky to manage globally on complex apps and is not compositional. Instead we let React manage when a `<ViewTransition>` "activates" and add/remove the `view-transition-name`. This is also when React calls `startViewTransition` behind the scenes while it mutates the DOM. I've come up with a number of heuristics that I think will make a lot easier to coordinate this. The principle is that only if something that updates that particular boundary do we activate it. I hope that one day maybe browsers will have something like these built-in and we can remove our implementation. A `<ViewTransition>` only activates if: - If a mounted Component renders a `<ViewTransition>` within it outside the first DOM node, and it is within the viewport, then that ViewTransition activates as an "enter" animation. This avoids inner "enter" animations trigger when the parent mounts. - If an unmounted Component had a `<ViewTransition>` within it outside the first DOM node, and it was within the viewport, then that ViewTransition activates as an "exit" animation. This avoids inner "exit" animations triggering when the parent unmounts. - If an explicitly named `<ViewTransition name="...">` is deep within an unmounted tree and one with the same name appears in a mounted tree at the same time, then both are activated as a pair, but only if they're both in the viewport. This avoids these triggering "enter" or "exit" animations when going between parents that don't have a pair. - If an already mounted `<ViewTransition>` is visible and a DOM mutation, that might affect how it's painted, happens within its children but outside any nested `<ViewTransition>`. This allows it to "cross-fade" between its updates. - If an already mounted `<ViewTransition>` resizes or moves as the result of direct DOM nodes siblings changing or moving around. This allows insertion, deletion and reorders into a list to animate all children. It is only within one DOM node though, to avoid unrelated changes in the parent to trigger this. If an item is outside the viewport before and after, then it's skipped to avoid things flying across the screen. - If a `<ViewTransition>` boundary changes size, due to a DOM mutation within it, then the parent activates (or the root document if there are no more parents). This ensures that the container can cross-fade to avoid abrupt relayout. This can be avoided by using absolutely positioned children. When this can avoid bubbling to the root document, whatever is not animating is still responsive to clicks during the transition. Conceptually each DOM node has its own default that activates the parent `<ViewTransition>` or no transition if the parent is the root. That means that if you add a DOM node like `<div><ViewTransition><Component /></ViewTransition></div>` this won't trigger an "enter" animation since it was the div that was added, not the ViewTransition. Instead, it might cause a cross-fade of the parent ViewTransition or no transition if it had no parent. This ensures that only explicit boundaries perform coarse animations instead of every single node which is really the benefit of the View Transitions model. This ends up working out well for simple cases like switching between two pages immediately while transitioning one floating item that appears on both pages. Because only the floating item transitions by default. Note that it's possible to add manual `view-transition-name` with CSS or `style={{ viewTransitionName: 'auto' }}` that always transitions as long as something else has a `<ViewTransition>` that activates. For example a `<ViewTransition>` can wrap a whole page for a cross-fade but inside of it an explicit name can be added to something to ensure it animates as a move when something relates else changes its layout. Instead of just cross-fading it along with the Page which would be the default. There's more PRs coming with some optimizations, fixes and expanded APIs. This first PR explores the above core heuristic. --------- Co-authored-by: Sebastian "Sebbie" Silbermann <silbermann.sebastian@gmail.com>
266 lines
9.6 KiB
JavaScript
266 lines
9.6 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict
|
|
*/
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Land or remove (zero effort)
|
|
//
|
|
// Flags that can likely be deleted or landed without consequences
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// None
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Killswitch
|
|
//
|
|
// Flags that exist solely to turn off a change in case it causes a regression
|
|
// when it rolls out to prod. We should remove these as soon as possible.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
export const enableHydrationLaneScheduling = true;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Land or remove (moderate effort)
|
|
//
|
|
// Flags that can be probably deleted or landed, but might require extra effort
|
|
// like migrating internal callers or performance testing.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// TODO: Finish rolling out in www
|
|
export const favorSafetyOverHydrationPerf = true;
|
|
|
|
// Need to remove didTimeout argument from Scheduler before landing
|
|
export const disableSchedulerTimeoutInWorkLoop = false;
|
|
|
|
// TODO: Land at Meta before removing.
|
|
export const disableDefaultPropsExceptForClasses = true;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Slated for removal in the future (significant effort)
|
|
//
|
|
// These are experiments that didn't work out, and never shipped, but we can't
|
|
// delete from the codebase until we migrate internal callers.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Add a callback property to suspense to notify which promises are currently
|
|
// in the update queue. This allows reporting and tracing of what is causing
|
|
// the user to see a loading state.
|
|
//
|
|
// Also allows hydration callbacks to fire when a dehydrated boundary gets
|
|
// hydrated or deleted.
|
|
//
|
|
// This will eventually be replaced by the Transition Tracing proposal.
|
|
export const enableSuspenseCallback = false;
|
|
|
|
// Experimental Scope support.
|
|
export const enableScopeAPI = false;
|
|
|
|
// Experimental Create Event Handle API.
|
|
export const enableCreateEventHandleAPI = false;
|
|
|
|
// Support legacy Primer support on internal FB www
|
|
export const enableLegacyFBSupport = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Ongoing experiments
|
|
//
|
|
// These are features that we're either actively exploring or are reasonably
|
|
// likely to include in an upcoming release.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Yield to the browser event loop and not just the scheduler event loop before passive effects.
|
|
// Fix gated tests that fail with this flag enabled before turning it back on.
|
|
export const enableYieldingBeforePassive = false;
|
|
|
|
// Experiment to intentionally yield less to block high framerate animations.
|
|
export const enableThrottledScheduling = false;
|
|
|
|
export const enableLegacyCache = __EXPERIMENTAL__;
|
|
|
|
export const enableAsyncIterableChildren = __EXPERIMENTAL__;
|
|
|
|
export const enableTaint = __EXPERIMENTAL__;
|
|
|
|
export const enablePostpone = __EXPERIMENTAL__;
|
|
|
|
export const enableHalt = __EXPERIMENTAL__;
|
|
|
|
export const enableViewTransition = __EXPERIMENTAL__;
|
|
|
|
/**
|
|
* Switches the Fabric API from doing layout in commit work instead of complete work.
|
|
*/
|
|
export const enableFabricCompleteRootInCommitPhase = false;
|
|
|
|
/**
|
|
* Switches Fiber creation to a simple object instead of a constructor.
|
|
*/
|
|
export const enableObjectFiber = false;
|
|
|
|
export const enableTransitionTracing = false;
|
|
|
|
// FB-only usage. The new API has different semantics.
|
|
export const enableLegacyHidden = false;
|
|
|
|
// Enables unstable_avoidThisFallback feature in Fiber
|
|
export const enableSuspenseAvoidThisFallback = false;
|
|
|
|
export const enableCPUSuspense = __EXPERIMENTAL__;
|
|
|
|
// Test this at Meta before enabling.
|
|
export const enableNoCloningMemoCache = false;
|
|
|
|
export const enableUseEffectEventHook = __EXPERIMENTAL__;
|
|
|
|
// Test in www before enabling in open source.
|
|
// Enables DOM-server to stream its instruction set as data-attributes
|
|
// (handled with an MutationObserver) instead of inline-scripts
|
|
export const enableFizzExternalRuntime = __EXPERIMENTAL__;
|
|
|
|
export const alwaysThrottleRetries = true;
|
|
|
|
export const passChildrenWhenCloningPersistedNodes = false;
|
|
|
|
/**
|
|
* Enables a new Fiber flag used in persisted mode to reduce the number
|
|
* of cloned host components.
|
|
*/
|
|
export const enablePersistedModeClonedFlag = false;
|
|
|
|
export const enableOwnerStacks = __EXPERIMENTAL__;
|
|
|
|
export const enableShallowPropDiffing = false;
|
|
|
|
export const enableSiblingPrerendering = true;
|
|
|
|
/**
|
|
* Enables an expiration time for retry lanes to avoid starvation.
|
|
*/
|
|
export const enableRetryLaneExpiration = false;
|
|
export const retryLaneExpirationMs = 5000;
|
|
export const syncLaneExpirationMs = 250;
|
|
export const transitionLaneExpirationMs = 5000;
|
|
|
|
/**
|
|
* Enables a new error detection for infinite render loops from updates caused
|
|
* by setState or similar outside of the component owning the state.
|
|
*/
|
|
export const enableInfiniteRenderLoopDetection = false;
|
|
|
|
/**
|
|
* Experimental new hook for better managing resources in effects.
|
|
*/
|
|
export const enableUseResourceEffectHook = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Ready for next major.
|
|
//
|
|
// Alias __NEXT_MAJOR__ to __EXPERIMENTAL__ for easier skimming.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// TODO: Anything that's set to `true` in this section should either be cleaned
|
|
// up (if it's on everywhere, including Meta and RN builds) or moved to a
|
|
// different section of this file.
|
|
|
|
// const __NEXT_MAJOR__ = __EXPERIMENTAL__;
|
|
|
|
// Renames the internal symbol for elements since they have changed signature/constructor
|
|
export const renameElementSymbol = true;
|
|
|
|
/**
|
|
* Enables a fix to run insertion effect cleanup on hidden subtrees.
|
|
*/
|
|
export const enableHiddenSubtreeInsertionEffectCleanup = false;
|
|
|
|
/**
|
|
* Removes legacy style context defined using static `contextTypes` and consumed with static `childContextTypes`.
|
|
*/
|
|
export const disableLegacyContext = true;
|
|
/**
|
|
* Removes legacy style context just from function components.
|
|
*/
|
|
export const disableLegacyContextForFunctionComponents = true;
|
|
|
|
// Enable the moveBefore() alternative to insertBefore(). This preserves states of moves.
|
|
export const enableMoveBefore = false;
|
|
|
|
// Disabled caching behavior of `react/cache` in client runtimes.
|
|
export const disableClientCache = true;
|
|
|
|
// Warn on any usage of ReactTestRenderer
|
|
export const enableReactTestRendererWarning = true;
|
|
|
|
// Disables legacy mode
|
|
// This allows us to land breaking changes to remove legacy mode APIs in experimental builds
|
|
// before removing them in stable in the next Major
|
|
export const disableLegacyMode = true;
|
|
|
|
// Make <Context> equivalent to <Context.Provider> instead of <Context.Consumer>
|
|
export const enableRenderableContext = true;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Chopping Block
|
|
//
|
|
// Planned feature deprecations and breaking changes. Sorted roughly in order of
|
|
// when we plan to enable them.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// React DOM Chopping Block
|
|
//
|
|
// Similar to main Chopping Block but only flags related to React DOM. These are
|
|
// grouped because we will likely batch all of them into a single major release.
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Disable support for comment nodes as React DOM containers. Already disabled
|
|
// in open source, but www codebase still relies on it. Need to remove.
|
|
export const disableCommentsAsDOMContainers = true;
|
|
|
|
export const enableTrustedTypesIntegration = false;
|
|
|
|
// Prevent the value and checked attributes from syncing with their related
|
|
// DOM properties
|
|
export const disableInputAttributeSyncing = false;
|
|
|
|
// Disables children for <textarea> elements
|
|
export const disableTextareaChildren = false;
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Debugging and DevTools
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Gather advanced timing metrics for Profiler subtrees.
|
|
export const enableProfilerTimer = __PROFILE__;
|
|
|
|
// Adds performance.measure() marks using Chrome extensions to allow formatted
|
|
// Component rendering tracks to show up in the Performance tab.
|
|
// This flag will be used for both Server Component and Client Component tracks.
|
|
// All calls should also be gated on enableProfilerTimer.
|
|
export const enableComponentPerformanceTrack = __EXPERIMENTAL__;
|
|
|
|
// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
|
|
// for an experimental timeline tool.
|
|
export const enableSchedulingProfiler: boolean =
|
|
!enableComponentPerformanceTrack && __PROFILE__;
|
|
|
|
// Record durations for commit and passive effects phases.
|
|
export const enableProfilerCommitHooks = __PROFILE__;
|
|
|
|
// Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
|
|
export const enableProfilerNestedUpdatePhase = __PROFILE__;
|
|
|
|
export const enableAsyncDebugInfo = __EXPERIMENTAL__;
|
|
|
|
// Track which Fiber(s) schedule render work.
|
|
export const enableUpdaterTracking = __PROFILE__;
|
|
|
|
// Internal only.
|
|
export const enableGetInspectorDataForInstanceInProduction = false;
|
|
|
|
export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
|