Skip to content

Commit 6a8c7fb

Browse files
authored
Release <ViewTransition /> to Canary (facebook#34712)
## Overview This PR ships the View Transition APIs to `react@canary`: - [`<ViewTransition />`](https://react.dev/reference/react/ViewTransition) - [`addTransitionType`](https://react.dev/reference/react/addTransitionType) This means these APIs are ready for final feedback and prepare for semver stable release. ## What this means Shipping `<ViewTransition />` and `addTransitionType` to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like `<ViewTransition />` with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like `<ViewTransition />`. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like `<ViewTransition>` as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions) blog post, and [the new docs for `<ViewTransition />`](https://react.dev/reference/react/ViewTransition) and [`addTransitionType`](https://react.dev/reference/react/addTransitionType) for more info.
1 parent b65e6fc commit 6a8c7fb

21 files changed

+36
-24
lines changed

fixtures/view-transition/src/components/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, {
33
useLayoutEffect,
44
useEffect,
55
useState,
6-
unstable_addTransitionType as addTransitionType,
6+
addTransitionType,
77
} from 'react';
88

99
import Chrome from './Chrome.js';

fixtures/view-transition/src/components/Page.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {
2-
unstable_addTransitionType as addTransitionType,
3-
unstable_ViewTransition as ViewTransition,
2+
addTransitionType,
3+
ViewTransition,
44
Activity,
55
useLayoutEffect,
66
useEffect,

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,8 @@ describe('Store component filters', () => {
251251
});
252252

253253
it('should filter ViewTransition', async () => {
254-
const ViewTransition = React.unstable_ViewTransition;
254+
const ViewTransition =
255+
React.ViewTransition || React.unstable_ViewTransition;
255256

256257
if (ViewTransition != null) {
257258
await actAsync(async () =>

packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ describe('ReactDOMFizzViewTransition', () => {
4040
Stream = require('stream');
4141

4242
Suspense = React.Suspense;
43-
ViewTransition = React.unstable_ViewTransition;
43+
ViewTransition = React.ViewTransition;
4444

4545
// Test Environment
4646
const jsdom = new JSDOM(

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('ReactFragment', () => {
2929
React = require('react');
3030
Suspense = React.Suspense;
3131
Activity = React.Activity;
32-
ViewTransition = React.unstable_ViewTransition;
32+
ViewTransition = React.ViewTransition;
3333
ReactNoop = require('react-noop-renderer');
3434
const InternalTestUtils = require('internal-test-utils');
3535
waitForAll = InternalTestUtils.waitForAll;

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -941,7 +941,7 @@ describe('ReactLazy', () => {
941941

942942
// @gate enableViewTransition
943943
it('throws with a useful error when wrapping ViewTransition with lazy()', async () => {
944-
const BadLazy = lazy(() => fakeImport(React.unstable_ViewTransition));
944+
const BadLazy = lazy(() => fakeImport(React.ViewTransition));
945945

946946
const root = ReactTestRenderer.create(
947947
<Suspense fallback={<Text text="Loading..." />}>
@@ -954,7 +954,7 @@ describe('ReactLazy', () => {
954954

955955
await waitForAll(['Loading...']);
956956

957-
await resolveFakeImport(React.unstable_ViewTransition);
957+
await resolveFakeImport(React.ViewTransition);
958958
root.update(
959959
<Suspense fallback={<Text text="Loading..." />}>
960960
<BadLazy />

packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('ViewTransitionReactServer', () => {
2323
jest.resetModules();
2424
jest.mock('react', () => require('react/react.react-server'));
2525
ReactServer = require('react');
26-
ViewTransition = ReactServer.unstable_ViewTransition;
26+
ViewTransition = ReactServer.ViewTransition;
2727
ReactNoopFlightServer = require('react-noop-renderer/flight-server');
2828

2929
jest.resetModules();

packages/react/index.development.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export {
4545
startTransition,
4646
unstable_LegacyHidden,
4747
Activity,
48+
ViewTransition,
49+
addTransitionType,
4850
unstable_Scope,
4951
unstable_SuspenseList,
5052
unstable_TracingMarker,

packages/react/index.experimental.development.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ export {
3333
unstable_postpone,
3434
unstable_getCacheForType,
3535
unstable_SuspenseList,
36-
unstable_ViewTransition,
36+
ViewTransition,
3737
unstable_startGestureTransition,
38-
unstable_addTransitionType,
38+
addTransitionType,
3939
unstable_useCacheRefresh,
4040
useId,
4141
useCallback,

packages/react/index.experimental.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export {
3434
unstable_postpone,
3535
unstable_getCacheForType,
3636
unstable_SuspenseList,
37-
unstable_ViewTransition,
37+
ViewTransition,
3838
unstable_startGestureTransition,
39-
unstable_addTransitionType,
39+
addTransitionType,
4040
unstable_useCacheRefresh,
4141
useId,
4242
useCallback,

0 commit comments

Comments
 (0)