Skip to content

Commit 38d8fdf

Browse files
rickhanloniirickhanlonii
committed
wip
1 parent 88cf7f4 commit 38d8fdf

14 files changed

+124
-38
lines changed

‎src/components/Icon/IconExperimental.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*/
4+
5+
import {memo} from 'react';
6+
7+
export const IconExperimental = memo<
8+
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
9+
>(function IconCanary(
10+
{className, title, size} = {
11+
className: undefined,
12+
title: undefined,
13+
size: 'md',
14+
}
15+
) {
16+
return (
17+
<svg
18+
className={className}
19+
width={size === 's' ? '12px' : '20px'}
20+
height={size === 's' ? '12px' : '20px'}
21+
viewBox="0 0 20 20"
22+
version="1.1"
23+
xmlns="http://www.w3.org/2000/svg">
24+
{title && <title>{title}</title>}
25+
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
26+
<g
27+
id="noun-labs-1201738-(2)"
28+
transform="translate(2, 0)"
29+
fill="currentColor"
30+
fillRule="nonzero">
31+
<path
32+
d="M10.2865804,5.55665262 L10.2865804,2.22331605 L10.8591544,2.22331605 C11.0103911,2.22244799 11.1551447,2.16342155 11.2617505,2.05914367 C11.3684534,1.95486857 11.4282767,1.81370176 11.4282767,1.66667106 L11.4282767,0.556642208 C11.4282767,0.40907262 11.3678934,0.26747526 11.2605218,0.16308627 C11.1531503,0.0587028348 11.0074938,0 10.8556998,0 L5.14338868,0 C4.9915947,0 4.84594391,0.0587028348 4.73856664,0.16308627 C4.63119507,0.267469704 4.57081178,0.40907262 4.57081178,0.556642208 L4.57081178,1.66667106 C4.57081178,1.81434899 4.63119507,1.95594912 4.73856664,2.06033811 C4.8459382,2.16472155 4.9915947,2.22331605 5.14338868,2.22331605 L5.71596273,2.22331605 L5.71596273,5.55665262 C5.71596273,8.38665538 2.97295619,9.88999017 0.651686904,15.5566623 C-0.0957823782,17.360053 -2.00560068,20 7.99951567,20 C18.004632,20 16.0948137,17.3600252 15.3507732,15.5566623 C13.0124432,9.88999017 10.2865804,8.38665538 10.2865804,5.55665262 Z M9.89570197,10.709991 C10.0921412,10.709991 10.2805515,10.7858383 10.4193876,10.9209301 C10.5583466,11.0559135 10.6363652,11.2390693 10.6363652,11.4300417 C10.6363652,11.6210141 10.5583466,11.8040698 10.4193876,11.9391533 C10.2805401,12.0741367 10.0921412,12.1499813 9.89570197,12.1499813 C9.6992627,12.1499813 9.51096673,12.074134 9.37201631,11.9391533 C9.23316875,11.8040615 9.15515307,11.6210141 9.15515307,11.4300417 C9.15515307,11.2390693 9.2331716,11.0559024 9.37201631,10.9209301 C9.57264221,10.7258996 9.61239426,10.709991 9.89570197,10.709991 Z M8.98919546,9.04212824 C9.09790709,9.14792278 9.15884755,9.29158681 9.1585213,9.44110085 C9.15829001,9.59073155 9.09678989,9.73407335 8.98763252,9.83954568 C8.87847514,9.945018 8.73069852,10.0039347 8.57678157,10.0033977 C8.42286747,10.0027392 8.27565088,9.94273467 8.16727355,9.83639845 C8.05900765,9.73006224 7.99873866,9.58628988 7.99963013,9.43664806 C8.00052304,9.28788403 8.0620221,9.14542556 8.17051087,9.04048101 C8.27911107,8.93555591 8.42599335,8.87663641 8.57913312,8.87663641 C8.73291864,8.87665585 8.88047525,8.93622535 8.98919546,9.04212824 Z M7.99965585,17.9999981 C4.91377349,17.9999981 3.29882839,17.7332867 2.51364277,17.4999976 C2.37780966,17.4476975 2.26954376,17.3439641 2.21396931,17.2125528 C2.15838628,17.0811499 2.16006066,16.9334692 2.21876871,16.8033858 C2.6144474,15.5921346 3.14916224,14.4280501 3.81316983,13.3333824 C5.980145,9.82337899 8.22941036,13.8867718 10.0980836,13.8867718 C11.9666996,13.8867718 11.4695868,12.1534924 12.1827971,13.3333824 C12.8511505,14.4269112 13.3916656,15.5896902 13.794259,16.8000524 C13.8533022,16.9322137 13.8537479,17.0822749 13.7952635,17.2147751 C13.7368889,17.3472613 13.6248314,17.4504531 13.4856467,17.5000531 C12.6833967,17.7332867 11.0855382,17.9999981 7.99965585,17.9999981 Z"
33+
id="Shape"></path>
34+
</g>
35+
</g>
36+
</svg>
37+
);
38+
});

‎src/components/Layout/Page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ interface PageProps {
3131
meta: {
3232
title?: string;
3333
titleForTitleTag?: string;
34-
canary?: boolean;
34+
version?: 'experimetnal' | 'canary';
3535
description?: string;
3636
};
3737
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
@@ -53,7 +53,7 @@ export function Page({
5353
routeTree
5454
);
5555
const title = meta.title || route?.title || '';
56-
const canary = meta.canary || false;
56+
const version = meta.version || null;
5757
const description = meta.description || route?.description || '';
5858
const isHomePage = cleanedPath === '/';
5959
const isBlogIndex = cleanedPath === '/blog';
@@ -70,7 +70,7 @@ export function Page({
7070
)}>
7171
<PageHeading
7272
title={title}
73-
canary={canary}
73+
version={version}
7474
description={description}
7575
tags={route?.tags}
7676
breadcrumbs={breadcrumbs}

‎src/components/Layout/Sidebar/SidebarLink.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@ import * as React from 'react';
99
import cn from 'classnames';
1010
import {IconNavArrow} from 'components/Icon/IconNavArrow';
1111
import {IconCanary} from 'components/Icon/IconCanary';
12+
import {IconExperimental} from 'components/Icon/IconExperimental';
1213
import Link from 'next/link';
1314

1415
interface SidebarLinkProps {
1516
href: string;
1617
selected?: boolean;
1718
title: string;
1819
level: number;
19-
version?: 'canary' | 'major';
20+
version?: 'canary' | 'major' | 'experimental';
2021
icon?: React.ReactNode;
2122
isExpanded?: boolean;
2223
hideArrow?: boolean;
@@ -84,7 +85,13 @@ export function SidebarLink({
8485
)}
8586
{version === 'canary' && (
8687
<IconCanary
87-
title=" - This feature is available in the latest Canary"
88+
title=" - This feature is available in the latest Canary version of React"
89+
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
90+
/>
91+
)}
92+
{version === 'experimental' && (
93+
<IconExperimental
94+
title=" - This feature is available in the latest Experimental version of React"
8895
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
8996
/>
9097
)}

‎src/components/MDX/ExpandableCallout.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,15 @@ const variantMap = {
5151
overlayGradient:
5252
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
5353
},
54+
experimental: {
55+
title: 'Experimental Feature',
56+
Icon: IconCanary,
57+
containerClasses:
58+
'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
59+
textColor: 'text-green-60 dark:text-green-40',
60+
overlayGradient:
61+
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
62+
},
5463
pitfall: {
5564
title: 'Pitfall',
5665
Icon: IconPitfall,

‎src/components/MDX/MDXComponents.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,10 @@ const Canary = ({children}: {children: React.ReactNode}) => (
9898
<ExpandableCallout type="canary">{children}</ExpandableCallout>
9999
);
100100

101+
const Experimental = ({children}: {children: React.ReactNode}) => (
102+
<ExpandableCallout type="experimental">{children}</ExpandableCallout>
103+
);
104+
101105
const NextMajor = ({children}: {children: React.ReactNode}) => (
102106
<ExpandableCallout type="major">{children}</ExpandableCallout>
103107
);
@@ -120,6 +124,20 @@ const CanaryBadge = ({title}: {title: string}) => (
120124
</span>
121125
);
122126

127+
const ExperimentalBadge = ({title}: {title: string}) => (
128+
<span
129+
title={title}
130+
className={
131+
'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
132+
}>
133+
<IconCanary
134+
size="s"
135+
className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
136+
/>
137+
Experimental only
138+
</span>
139+
);
140+
123141
const NextMajorBadge = ({title}: {title: string}) => (
124142
<span
125143
title={title}
@@ -508,6 +526,8 @@ export const MDXComponents = {
508526
MathI,
509527
Note,
510528
Canary,
529+
Experimental,
530+
ExperimentalBadge,
511531
CanaryBadge,
512532
NextMajor,
513533
NextMajorBadge,

‎src/components/PageHeading.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ import {H1} from './MDX/Heading';
88
import type {RouteTag, RouteItem} from './Layout/getRouteMeta';
99
import * as React from 'react';
1010
import {IconCanary} from './Icon/IconCanary';
11+
import {IconExperimental} from './Icon/IconExperimental';
1112

1213
interface PageHeadingProps {
1314
title: string;
14-
canary?: boolean;
15+
version?: 'experimental' | 'canary';
16+
experimental?: boolean;
1517
status?: string;
1618
description?: string;
1719
tags?: RouteTag[];
@@ -21,19 +23,26 @@ interface PageHeadingProps {
2123
function PageHeading({
2224
title,
2325
status,
24-
canary,
26+
version,
2527
tags = [],
2628
breadcrumbs,
2729
}: PageHeadingProps) {
30+
console.log('version', version);
2831
return (
2932
<div className="px-5 sm:px-12 pt-3.5">
3033
<div className="max-w-4xl ms-0 2xl:mx-auto">
3134
{breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
3235
<H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">
3336
{title}
34-
{canary && (
37+
{version === 'canary' && (
3538
<IconCanary
36-
title=" - This feature is available in the latest Canary"
39+
title=" - This feature is available in the latest Canary version of React"
40+
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
41+
/>
42+
)}
43+
{version === 'experimental' && (
44+
<IconExperimental
45+
title=" - This feature is available in the latest Experimental version of React"
3746
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
3847
/>
3948
)}

‎src/content/blog/2025/04/01/react-labs-what-we-have-been-working-on-april-2025.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ You can try them by upgrading React packages to the most recent experimental ver
5555

5656
Read more to see how to use these features in your app, or checkout the new docs published today:
5757

58-
- [`<ViewTransition>`](/TODO): A component lets you activate an animation for a Transition.
59-
- [`addTransitionType`](/TODO): A function that allows you to specify the cause of a Transition.
60-
- [`<Activity>`](/TODO): A component that lets you hide and show part of the UI.
58+
- [`<ViewTransition>`](/reference/react/ViewTransition): A component lets you activate an animation for a Transition.
59+
- [`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition.
60+
- [`<Activity>`](/reference/react/Activity): A component that lets you hide and show part of the UI.
6161

6262
## View Transitions {/*view-transitions*/}
6363

@@ -104,9 +104,9 @@ By default, these animations have the [default CSS animations for View Transitio
104104
}
105105
```
106106

107-
When the DOM updates in an animation trigger such as `startTransition`, `useDeferredValue`, or switching Suspense fallbacks to content, React will use [declarative heuristics](#todo) to automatically determine which `<ViewTransition>` components to activate for the animation. The browser will then run the animation that's defined in CSS.
107+
When the DOM updates in an animation trigger such as `startTransition`, `useDeferredValue`, or switching Suspense fallbacks to content, React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `<ViewTransition>` components to activate for the animation. The browser will then run the animation that's defined in CSS.
108108

109-
If you're familar with the browser view transition APIs and curious how we've built support for them into React, checkout [How do View Transitions Work](/#TODO) in the docs.
109+
If you're familar with the browser view transition APIs and curious how we've built support for them into React, checkout [How does View Transitions Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
110110

111111
In this post, let's take a look at a few examples of how to use View Transitions.
112112

@@ -2466,7 +2466,7 @@ If you're curious how this works, see the docs for [How does `<ViewTransition>`
24662466

24672467
By default, `<ViewTransition>` includes the default cross-fade from the browser.
24682468

2469-
To customize animations, you can provide props to the `<ViewTranstion>` component to specify which animations to use, based on how the `<ViewTransition>` activates (see [the docs](/TODO) for the heuristics React uses to activate different types of animations).
2469+
To customize animations, you can provide props to the `<ViewTranstion>` component to specify which animations to use, based on [how the `<ViewTransition>` activates](/reference/react/ViewTransition#props).
24702470

24712471
For example, we can slow down the `default` cross fade animation:
24722472

@@ -10130,7 +10130,7 @@ root.render(
1013010130

1013110131
</Sandpack>
1013210132

10133-
If you're curious to know more about how they work, check out [How Do View Transitons Work](/todo) in the docs.
10133+
If you're curious to know more about how they work, check out [How Does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
1013410134

1013510135
_For more background on how we built View Transitions, see: [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._
1013610136

@@ -12887,11 +12887,11 @@ Once we solve those issues, we'll publish experimental docs and share that it's
1288712887

1288812888
## Compiler IDE Extension {/*ide-extension*/}
1288912889

12890-
Last week [we shared](/TODO) the React Compiler release candidate, and we're working towards shipping the first semver stable version of the compiler in the coming months.
12890+
This week [we shared](/TODO) the React Compiler release candidate, and we're working towards shipping the first semver stable version of the compiler in the coming months.
1289112891

1289212892
We've also begun exploring ways to use the React Compiler to provide information that can improve understanding and debugging your code. One idea we've started exploring is a new experimental LSP-based React IDE extension powered by React Compiler, similar to the extension used in [Lauren Tan's React Conf talk](https://conf2024.react.dev/talks/5).
1289312893

12894-
Our idea is that we can use the compiler's static analysis to provide more information, suggestions, and optimization opportunities directly in your IDE. For example, we can provide diagnostics for code breaking the Rules of React, hovers to show if components and hooks were optimized by the compiler, or a CodeLens to see [automatically inserted Effect dependencies](/todo).
12894+
Our idea is that we can use the compiler's static analysis to provide more information, suggestions, and optimization opportunities directly in your IDE. For example, we can provide diagnostics for code breaking the Rules of React, hovers to show if components and hooks were optimized by the compiler, or a CodeLens to see [automatically inserted Effect dependencies](/#automatic-effect-dependencies).
1289512895

1289612896
The IDE extension is still an early exploration, but we'll share our progress in future updates.
1289712897

‎src/content/reference/react/Activity.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: <Activity>
3-
canary: true
3+
version: experimental
44
---
55

6-
<Wip>
6+
<Experimental>
77

88
**This API is experimental and is not available in a stable version of React yet.**
99

@@ -15,7 +15,7 @@ You can try it by upgrading React packages to the most recent experimental versi
1515

1616
Experimental versions of React may contain bugs. Don't use them in production.
1717

18-
</Wip>
18+
</Experimental>
1919

2020
<Intro>
2121

‎src/content/reference/react/ViewTransition.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: <ViewTransition>
3-
canary: true
3+
version: experimental
44
---
55

6-
<Wip>
6+
<Experimental>
77

88
**This API is experimental and is not available in a stable version of React yet.**
99

@@ -15,7 +15,7 @@ You can try it by upgrading React packages to the most recent experimental versi
1515

1616
Experimental versions of React may contain bugs. Don't use them in production.
1717

18-
</Wip>
18+
</Experimental>
1919

2020
<Intro>
2121

‎src/content/reference/react/addTransitionType.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: unstable_addTransitionType
3-
canary: true
3+
version: experimental
44
---
55

6-
<Wip>
6+
<Experimental>
77

88
**This API is experimental and is not available in a stable version of React yet.**
99

@@ -15,7 +15,7 @@ You can try it by upgrading React packages to the most recent experimental versi
1515

1616
Experimental versions of React may contain bugs. Don't use them in production.
1717

18-
</Wip>
18+
</Experimental>
1919

2020
<Intro>
2121

0 commit comments

Comments
 (0)