diff --git a/.eslintrc b/.eslintrc
index f617dea26..f8b03f98a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,11 +2,13 @@
"root": true,
"extends": "next/core-web-vitals",
"parser": "@typescript-eslint/parser",
- "plugins": ["@typescript-eslint"],
+ "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"],
"rules": {
"no-unused-vars": "off",
- "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
- "react-hooks/exhaustive-deps": "error"
+ "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}],
+ "react-hooks/exhaustive-deps": "error",
+ "react/no-unknown-property": ["error", {"ignore": ["meta"]}],
+ "react-compiler/react-compiler": "error"
},
"env": {
"node": true,
diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml
index b1ef428d0..83e7f2e8a 100644
--- a/.github/workflows/analyze.yml
+++ b/.github/workflows/analyze.yml
@@ -7,6 +7,8 @@ on:
- main # change this if your default branch is named differently
workflow_dispatch:
+permissions: {}
+
jobs:
analyze:
runs-on: ubuntu-latest
@@ -23,7 +25,7 @@ jobs:
- name: Restore cached node_modules
uses: actions/cache@v4
with:
- path: "**/node_modules"
+ path: '**/node_modules'
key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- name: Install deps
@@ -55,7 +57,7 @@ jobs:
name: bundle_analysis.json
- name: Download base branch bundle stats
- uses: dawidd6/action-download-artifact@v2
+ uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
if: success() && github.event.number
with:
workflow: analyze.yml
diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml
index 5a3047cfc..1e086b9b7 100644
--- a/.github/workflows/analyze_comment.yml
+++ b/.github/workflows/analyze_comment.yml
@@ -2,10 +2,12 @@ name: Analyze Bundle (Comment)
on:
workflow_run:
- workflows: ["Analyze Bundle"]
+ workflows: ['Analyze Bundle']
types:
- completed
+permissions: {}
+
jobs:
comment:
runs-on: ubuntu-latest
@@ -14,7 +16,7 @@ jobs:
github.event.workflow_run.conclusion == 'success' }}
steps:
- name: Download base branch bundle stats
- uses: dawidd6/action-download-artifact@v2
+ uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
with:
workflow: analyze.yml
run_id: ${{ github.event.workflow_run.id }}
@@ -22,7 +24,7 @@ jobs:
path: analysis_comment.txt
- name: Download PR number
- uses: dawidd6/action-download-artifact@v2
+ uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
with:
workflow: analyze.yml
run_id: ${{ github.event.workflow_run.id }}
@@ -48,7 +50,7 @@ jobs:
echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
- name: Comment
- uses: marocchino/sticky-pull-request-comment@v2
+ uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728
with:
header: next-bundle-analysis
number: ${{ steps.get-comment-body.outputs.pr-number }}
diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml
new file mode 100644
index 000000000..2f5b2a497
--- /dev/null
+++ b/.github/workflows/discord_notify.yml
@@ -0,0 +1,32 @@
+name: Discord Notify
+
+on:
+ pull_request_target:
+ types: [opened, ready_for_review]
+
+permissions: {}
+
+jobs:
+ check_maintainer:
+ uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+ permissions:
+ # Used by check_maintainer
+ contents: read
+ with:
+ actor: ${{ github.event.pull_request.user.login }}
+
+ notify:
+ if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+ needs: check_maintainer
+ runs-on: ubuntu-latest
+ steps:
+ - name: Discord Webhook Action
+ uses: tsickert/discord-webhook@v6.0.0
+ with:
+ webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+ embed-author-name: ${{ github.event.pull_request.user.login }}
+ embed-author-url: ${{ github.event.pull_request.user.html_url }}
+ embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+ embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+ embed-description: ${{ github.event.pull_request.body }}
+ embed-url: ${{ github.event.pull_request.html_url }}
diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml
new file mode 100644
index 000000000..f9b3328ee
--- /dev/null
+++ b/.github/workflows/label_core_team_prs.yml
@@ -0,0 +1,41 @@
+name: Label Core Team PRs
+
+on:
+ pull_request_target:
+
+permissions: {}
+
+env:
+ TZ: /usr/share/zoneinfo/America/Los_Angeles
+ # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
+ SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+jobs:
+ check_maintainer:
+ uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+ permissions:
+ # Used by check_maintainer
+ contents: read
+ with:
+ actor: ${{ github.event.pull_request.user.login }}
+
+ label:
+ if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+ runs-on: ubuntu-latest
+ needs: check_maintainer
+ permissions:
+ # Used to add labels on issues
+ issues: write
+ # Used to add labels on PRs
+ pull-requests: write
+ steps:
+ - name: Label PR as React Core Team
+ uses: actions/github-script@v7
+ with:
+ script: |
+ github.rest.issues.addLabels({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ issue_number: ${{ github.event.number }},
+ labels: ['React Core Team']
+ });
diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml
index 36f7642c9..81a04601c 100644
--- a/.github/workflows/site_lint.yml
+++ b/.github/workflows/site_lint.yml
@@ -7,6 +7,8 @@ on:
pull_request:
types: [opened, synchronize, reopened]
+permissions: {}
+
jobs:
lint:
runs-on: ubuntu-latest
@@ -25,7 +27,7 @@ jobs:
- name: Restore cached node_modules
uses: actions/cache@v4
with:
- path: "**/node_modules"
+ path: '**/node_modules'
key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
- name: Install deps
diff --git a/README.md b/README.md
index 966131db5..182192cb5 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ This repo contains the source code and documentation powering [react.dev](https:
### Prerequisites
1. Git
-1. Node: any 12.x version starting with v12.0.0 or greater
+1. Node: any version starting with v16.8.0 or greater
1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
1. A fork of the repo (for any contributions)
1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc..52e831b43 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/next.config.js b/next.config.js
index 61ff1944a..861792c8e 100644
--- a/next.config.js
+++ b/next.config.js
@@ -9,10 +9,8 @@ const nextConfig = {
pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
reactStrictMode: true,
experimental: {
- // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed
- appDir: false,
scrollRestoration: true,
- legacyBrowsers: false,
+ reactCompiler: true,
},
env: {},
webpack: (config, {dev, isServer, ...options}) => {
diff --git a/package.json b/package.json
index ad9b9baa4..6d6b53f92 100644
--- a/package.json
+++ b/package.json
@@ -18,14 +18,14 @@
"ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss",
"tsc": "tsc --noEmit",
"start": "next start",
- "postinstall": "patch-package && (is-ci || husky install .husky)",
+ "postinstall": "is-ci || husky install .husky",
"check-all": "npm-run-all prettier lint:fix tsc rss",
"rss": "node scripts/generateRss.js"
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.5",
- "@docsearch/css": "^3.6.1",
- "@docsearch/react": "^3.6.1",
+ "@docsearch/css": "^3.8.3",
+ "@docsearch/react": "^3.8.3",
"@headlessui/react": "^1.7.0",
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
@@ -33,12 +33,12 @@
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
"github-slugger": "^1.3.0",
- "next": "^13.4.1",
+ "next": "15.1.0",
"next-remote-watch": "^1.0.0",
"parse-numeric-range": "^1.2.0",
- "react": "^0.0.0-experimental-16d053d59-20230506",
+ "react": "^19.0.0",
"react-collapsed": "4.0.4",
- "react-dom": "^0.0.0-experimental-16d053d59-20230506",
+ "react-dom": "^19.0.0",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1"
},
@@ -54,13 +54,14 @@
"@types/mdx-js__react": "^1.5.2",
"@types/node": "^14.6.4",
"@types/parse-numeric-range": "^0.0.1",
- "@types/react": "^18.0.9",
- "@types/react-dom": "^18.0.5",
+ "@types/react": "^19.0.0",
+ "@types/react-dom": "^19.0.0",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"asyncro": "^3.0.0",
"autoprefixer": "^10.4.2",
"babel-eslint": "10.x",
+ "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
"eslint": "7.x",
"eslint-config-next": "12.0.3",
"eslint-config-react-app": "^5.2.1",
@@ -68,6 +69,7 @@
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-react": "7.x",
+ "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
"eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
"fs-extra": "^9.0.1",
"globby": "^11.0.1",
@@ -78,7 +80,6 @@
"mdast-util-to-string": "^1.1.0",
"metro-cache": "0.72.2",
"npm-run-all": "^4.1.5",
- "patch-package": "^6.2.2",
"postcss": "^8.4.5",
"postcss-flexbugs-fixes": "4.2.1",
"postcss-preset-env": "^6.7.0",
@@ -94,7 +95,7 @@
"retext-smartypants": "^4.0.0",
"rss": "^1.2.2",
"tailwindcss": "^3.4.1",
- "typescript": "^4.0.2",
+ "typescript": "^5.7.2",
"unist-util-visit": "^2.0.3",
"webpack-bundle-analyzer": "^4.5.0"
},
@@ -109,5 +110,6 @@
"lint-staged": {
"*.{js,ts,jsx,tsx,css}": "yarn prettier",
"src/**/*.md": "yarn fix-headings"
- }
+ },
+ "packageManager": "yarn@1.22.22"
}
diff --git a/patches/next+13.4.1.patch b/patches/next+13.4.1.patch
deleted file mode 100644
index 6de490aa4..000000000
--- a/patches/next+13.4.1.patch
+++ /dev/null
@@ -1,22 +0,0 @@
-diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js
-index a1f8648..1b3d608 100644
---- a/node_modules/next/dist/server/render.js
-+++ b/node_modules/next/dist/server/render.js
-@@ -758,9 +758,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) {
- // Always using react concurrent rendering mode with required react version 18.x
- const renderShell = async (EnhancedApp, EnhancedComponent)=>{
- const content = renderContent(EnhancedApp, EnhancedComponent);
-- return await (0, _nodewebstreamshelper.renderToInitialStream)({
-- ReactDOMServer: _serverbrowser.default,
-- element: content
-+ return new Promise((resolve, reject) => {
-+ (0, _nodewebstreamshelper.renderToInitialStream)({
-+ ReactDOMServer: _serverbrowser.default,
-+ element: content,
-+ streamOptions: {
-+ onError: reject
-+ }
-+ }).then(resolve, reject);
- });
- };
- const createBodyResult = (0, _tracer.getTracer)().wrap(_constants2.RenderSpan.createBodyResult, (initialStream, suffix)=>{
diff --git a/patches/next-remote-watch+1.0.0.patch b/patches/next-remote-watch+1.0.0.patch
deleted file mode 100644
index c9ecef84d..000000000
--- a/patches/next-remote-watch+1.0.0.patch
+++ /dev/null
@@ -1,16 +0,0 @@
-diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch
-index c055b66..a2f749c 100755
---- a/node_modules/next-remote-watch/bin/next-remote-watch
-+++ b/node_modules/next-remote-watch/bin/next-remote-watch
-@@ -66,7 +66,10 @@ app.prepare().then(() => {
- }
- }
-
-- app.server.hotReloader.send('reloadPage')
-+ app.server.hotReloader.send({
-+ event: 'serverOnlyChanges',
-+ pages: ['/[[...markdownPath]]']
-+ });
- }
- )
- }
diff --git a/postcss.config.js b/postcss.config.js
index 427294522..d55c43c90 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -17,4 +17,4 @@ module.exports = {
},
},
},
-}
+};
diff --git a/public/fonts/Source-Code-Pro-Bold.woff2 b/public/fonts/Source-Code-Pro-Bold.woff2
new file mode 100644
index 000000000..220bd5d96
Binary files /dev/null and b/public/fonts/Source-Code-Pro-Bold.woff2 differ
diff --git a/public/fonts/Source-Code-Pro-Regular.woff2 b/public/fonts/Source-Code-Pro-Regular.woff2
index 655cd9e81..fd665c465 100644
Binary files a/public/fonts/Source-Code-Pro-Regular.woff2 and b/public/fonts/Source-Code-Pro-Regular.woff2 differ
diff --git a/public/images/blog/react-labs-april-2025/perf_tracks.png b/public/images/blog/react-labs-april-2025/perf_tracks.png
new file mode 100644
index 000000000..835a247cf
Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks.png differ
diff --git a/public/images/blog/react-labs-april-2025/perf_tracks.webp b/public/images/blog/react-labs-april-2025/perf_tracks.webp
new file mode 100644
index 000000000..88a7eb792
Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks.webp differ
diff --git a/public/images/blog/react-labs-april-2025/perf_tracks_dark.png b/public/images/blog/react-labs-april-2025/perf_tracks_dark.png
new file mode 100644
index 000000000..07513fe90
Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks_dark.png differ
diff --git a/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp b/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp
new file mode 100644
index 000000000..1a0521bf8
Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp differ
diff --git a/public/images/team/andrey-lunyov.jpg b/public/images/team/andrey-lunyov.jpg
deleted file mode 100644
index aeaaec06a..000000000
Binary files a/public/images/team/andrey-lunyov.jpg and /dev/null differ
diff --git a/public/images/team/hendrik.jpg b/public/images/team/hendrik.jpg
new file mode 100644
index 000000000..b39ea5be2
Binary files /dev/null and b/public/images/team/hendrik.jpg differ
diff --git a/public/images/team/jordan.jpg b/public/images/team/jordan.jpg
new file mode 100644
index 000000000..d8874a29f
Binary files /dev/null and b/public/images/team/jordan.jpg differ
diff --git a/public/images/team/kathryn-middleton.jpg b/public/images/team/kathryn-middleton.jpg
deleted file mode 100644
index 904c3b134..000000000
Binary files a/public/images/team/kathryn-middleton.jpg and /dev/null differ
diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg
index cb08b9725..a8615aa00 100644
Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ
diff --git a/public/images/team/luna-wei.jpg b/public/images/team/luna-wei.jpg
deleted file mode 100644
index cdc4a2b6a..000000000
Binary files a/public/images/team/luna-wei.jpg and /dev/null differ
diff --git a/public/images/team/mike.jpg b/public/images/team/mike.jpg
new file mode 100644
index 000000000..39fe23fea
Binary files /dev/null and b/public/images/team/mike.jpg differ
diff --git a/public/images/team/noahlemen.jpg b/public/images/team/noahlemen.jpg
deleted file mode 100644
index e3f788d89..000000000
Binary files a/public/images/team/noahlemen.jpg and /dev/null differ
diff --git a/public/images/team/pieter.jpg b/public/images/team/pieter.jpg
new file mode 100644
index 000000000..d098e5abe
Binary files /dev/null and b/public/images/team/pieter.jpg differ
diff --git a/public/images/team/sam.jpg b/public/images/team/sam.jpg
deleted file mode 100644
index f73474b91..000000000
Binary files a/public/images/team/sam.jpg and /dev/null differ
diff --git a/public/images/team/sathya.jpg b/public/images/team/sathya.jpg
deleted file mode 100644
index 0f087f4a3..000000000
Binary files a/public/images/team/sathya.jpg and /dev/null differ
diff --git a/public/images/team/tianyu.jpg b/public/images/team/tianyu.jpg
deleted file mode 100644
index aeb6ed9fa..000000000
Binary files a/public/images/team/tianyu.jpg and /dev/null differ
diff --git a/public/js/jsfiddle-integration-babel.js b/public/js/jsfiddle-integration-babel.js
index 006c79c8a..56059472f 100644
--- a/public/js/jsfiddle-integration-babel.js
+++ b/public/js/jsfiddle-integration-babel.js
@@ -4,12 +4,14 @@
// Do not delete or move this file.
// Many fiddles reference it so we have to keep it here.
-(function() {
+(function () {
var tag = document.querySelector(
'script[type="application/javascript;version=1.7"]'
);
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
- alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+ alert(
+ 'Bad JSFiddle configuration, please fork the original React JSFiddle'
+ );
}
tag.setAttribute('type', 'text/babel');
tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
diff --git a/public/js/jsfiddle-integration.js b/public/js/jsfiddle-integration.js
index fcf09e43f..2151435d4 100644
--- a/public/js/jsfiddle-integration.js
+++ b/public/js/jsfiddle-integration.js
@@ -4,12 +4,14 @@
// Do not delete or move this file.
// Many fiddles reference it so we have to keep it here.
-(function() {
+(function () {
var tag = document.querySelector(
'script[type="application/javascript;version=1.7"]'
);
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
- alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+ alert(
+ 'Bad JSFiddle configuration, please fork the original React JSFiddle'
+ );
}
tag.setAttribute('type', 'text/jsx;harmony=true');
tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
diff --git a/scripts/headingIDHelpers/walk.js b/scripts/headingIDHelpers/walk.js
index 721274e09..54cd500ca 100644
--- a/scripts/headingIDHelpers/walk.js
+++ b/scripts/headingIDHelpers/walk.js
@@ -2,10 +2,10 @@ const fs = require('fs');
module.exports = function walk(dir) {
let results = [];
- /**
+ /**
* If the param is a directory we can return the file
*/
- if(dir.includes('md')){
+ if (dir.includes('md')) {
return [dir];
}
const list = fs.readdirSync(dir);
diff --git a/scripts/headingIdLinter.js b/scripts/headingIdLinter.js
index 037e4945f..6b8f75fc7 100644
--- a/scripts/headingIdLinter.js
+++ b/scripts/headingIdLinter.js
@@ -1,12 +1,12 @@
const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs');
const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs');
-/**
+/**
* yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing
* yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs
* yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file)
* yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file)
-*/
+ */
const markdownPaths = process.argv.slice(2);
if (markdownPaths.includes('--fix')) {
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
index 38b1f2c5f..13fe6d3a9 100644
--- a/src/components/ExternalLink.tsx
+++ b/src/components/ExternalLink.tsx
@@ -1,13 +1,17 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
+import type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react';
export function ExternalLink({
href,
target,
children,
...props
-}: JSX.IntrinsicElements['a']) {
+}: DetailedHTMLProps<
+ AnchorHTMLAttributes<HTMLAnchorElement>,
+ HTMLAnchorElement
+>) {
return (
<a href={href} target={target ?? '_blank'} rel="noopener" {...props}>
{children}
diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx
index 714cccd82..61e4e52cd 100644
--- a/src/components/Icon/IconArrow.tsx
+++ b/src/components/Icon/IconArrow.tsx
@@ -4,9 +4,10 @@
import {memo} from 'react';
import cn from 'classnames';
+import type {SVGProps} from 'react';
export const IconArrow = memo<
- JSX.IntrinsicElements['svg'] & {
+ SVGProps<SVGSVGElement> & {
/**
* The direction the arrow should point.
* `start` and `end` are relative to the current locale.
diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx
index 6653dc387..4a3d3ad02 100644
--- a/src/components/Icon/IconArrowSmall.tsx
+++ b/src/components/Icon/IconArrowSmall.tsx
@@ -4,9 +4,10 @@
import {memo} from 'react';
import cn from 'classnames';
+import type {SVGProps} from 'react';
export const IconArrowSmall = memo<
- JSX.IntrinsicElements['svg'] & {
+ SVGProps<SVGSVGElement> & {
/**
* The direction the arrow should point.
* `start` and `end` are relative to the current locale.
diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx
index 6645152dd..5d461556f 100644
--- a/src/components/Icon/IconBsky.tsx
+++ b/src/components/Icon/IconBsky.tsx
@@ -3,10 +3,9 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconBsky = memo<JSX.IntrinsicElements['svg']>(function IconBsky(
- props
-) {
+export const IconBsky = memo<SVGProps<SVGSVGElement>>(function IconBsky(props) {
return (
<svg
aria-label="Bluesky"
diff --git a/src/components/Icon/IconClose.tsx b/src/components/Icon/IconClose.tsx
index 5ad352cf0..d685fb217 100644
--- a/src/components/Icon/IconClose.tsx
+++ b/src/components/Icon/IconClose.tsx
@@ -3,8 +3,9 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconClose = memo<JSX.IntrinsicElements['svg']>(function IconClose(
+export const IconClose = memo<SVGProps<SVGSVGElement>>(function IconClose(
props
) {
return (
diff --git a/src/components/Icon/IconExperimental.tsx b/src/components/Icon/IconExperimental.tsx
new file mode 100644
index 000000000..0bba612eb
--- /dev/null
+++ b/src/components/Icon/IconExperimental.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconExperimental = memo<
+ JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
+>(function IconCanary(
+ {className, title, size} = {
+ className: undefined,
+ title: undefined,
+ size: 'md',
+ }
+) {
+ return (
+ <svg
+ className={className}
+ width={size === 's' ? '12px' : '20px'}
+ height={size === 's' ? '12px' : '20px'}
+ viewBox="0 0 20 20"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg">
+ {title && <title>{title}</title>}
+ <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+ <g
+ id="noun-labs-1201738-(2)"
+ transform="translate(2, 0)"
+ fill="currentColor"
+ fillRule="nonzero">
+ <path
+ 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"
+ id="Shape"></path>
+ </g>
+ </g>
+ </svg>
+ );
+});
diff --git a/src/components/Icon/IconFacebookCircle.tsx b/src/components/Icon/IconFacebookCircle.tsx
index 0900d6815..7f1080afa 100644
--- a/src/components/Icon/IconFacebookCircle.tsx
+++ b/src/components/Icon/IconFacebookCircle.tsx
@@ -3,8 +3,9 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconFacebookCircle = memo<JSX.IntrinsicElements['svg']>(
+export const IconFacebookCircle = memo<SVGProps<SVGSVGElement>>(
function IconFacebookCircle(props) {
return (
<svg
diff --git a/src/components/Icon/IconGitHub.tsx b/src/components/Icon/IconGitHub.tsx
index 49d7fb460..1852f52f1 100644
--- a/src/components/Icon/IconGitHub.tsx
+++ b/src/components/Icon/IconGitHub.tsx
@@ -3,19 +3,20 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
- function IconGitHub(props) {
- return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="1.5em"
- height="1.5em"
- viewBox="0 -2 24 24"
- fill="currentColor"
- {...props}>
- <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
- </svg>
- );
- }
-);
+export const IconGitHub = memo<SVGProps<SVGSVGElement>>(function IconGitHub(
+ props
+) {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="1.5em"
+ height="1.5em"
+ viewBox="0 -2 24 24"
+ fill="currentColor"
+ {...props}>
+ <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
+ </svg>
+ );
+});
diff --git a/src/components/Icon/IconHamburger.tsx b/src/components/Icon/IconHamburger.tsx
index 5e6aa725a..8bc90ee0c 100644
--- a/src/components/Icon/IconHamburger.tsx
+++ b/src/components/Icon/IconHamburger.tsx
@@ -3,8 +3,9 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconHamburger = memo<JSX.IntrinsicElements['svg']>(
+export const IconHamburger = memo<SVGProps<SVGSVGElement>>(
function IconHamburger(props) {
return (
<svg
diff --git a/src/components/Icon/IconInstagram.tsx b/src/components/Icon/IconInstagram.tsx
index 6868a0a75..79def08e3 100644
--- a/src/components/Icon/IconInstagram.tsx
+++ b/src/components/Icon/IconInstagram.tsx
@@ -3,8 +3,9 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconInstagram = memo<JSX.IntrinsicElements['svg']>(
+export const IconInstagram = memo<SVGProps<SVGSVGElement>>(
function IconInstagram(props) {
return (
<svg
diff --git a/src/components/Icon/IconLink.tsx b/src/components/Icon/IconLink.tsx
index 587b4e6ed..e6e716d00 100644
--- a/src/components/Icon/IconLink.tsx
+++ b/src/components/Icon/IconLink.tsx
@@ -3,10 +3,9 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconLink = memo<JSX.IntrinsicElements['svg']>(function IconLink(
- props
-) {
+export const IconLink = memo<SVGProps<SVGSVGElement>>(function IconLink(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Icon/IconNewPage.tsx b/src/components/Icon/IconNewPage.tsx
index e32901c5a..dfa13bac9 100644
--- a/src/components/Icon/IconNewPage.tsx
+++ b/src/components/Icon/IconNewPage.tsx
@@ -3,26 +3,27 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconNewPage = memo<JSX.IntrinsicElements['svg']>(
- function IconNewPage(props) {
- return (
- <svg
- width="1em"
- height="1em"
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- {...props}>
- <path
- d="M20.5001 2H15.5001C15.3675 2 15.2403 2.05268 15.1465 2.14645C15.0528 2.24021 15.0001 2.36739 15.0001 2.5V3.5C15.0001 3.63261 15.0528 3.75979 15.1465 3.85355C15.2403 3.94732 15.3675 4 15.5001 4H18.5901L7.6501 14.94C7.60323 14.9865 7.56604 15.0418 7.54065 15.1027C7.51527 15.1636 7.5022 15.229 7.5022 15.295C7.5022 15.361 7.51527 15.4264 7.54065 15.4873C7.56604 15.5482 7.60323 15.6035 7.6501 15.65L8.3501 16.35C8.39658 16.3969 8.45188 16.4341 8.51281 16.4594C8.57374 16.4848 8.63909 16.4979 8.7051 16.4979C8.7711 16.4979 8.83646 16.4848 8.89738 16.4594C8.95831 16.4341 9.01362 16.3969 9.0601 16.35L20.0001 5.41V8.5C20.0001 8.63261 20.0528 8.75979 20.1465 8.85355C20.2403 8.94732 20.3675 9 20.5001 9H21.5001C21.6327 9 21.7599 8.94732 21.8537 8.85355C21.9474 8.75979 22.0001 8.63261 22.0001 8.5V3.5C22.0001 3.10218 21.8421 2.72064 21.5608 2.43934C21.2795 2.15804 20.8979 2 20.5001 2V2Z"
- fill="currentColor"
- />
- <path
- d="M21.5 13H20.5C20.3674 13 20.2402 13.0527 20.1464 13.1464C20.0527 13.2402 20 13.3674 20 13.5V20H4V4H10.5C10.6326 4 10.7598 3.94732 10.8536 3.85355C10.9473 3.75979 11 3.63261 11 3.5V2.5C11 2.36739 10.9473 2.24021 10.8536 2.14645C10.7598 2.05268 10.6326 2 10.5 2H3.5C3.10218 2 2.72064 2.15804 2.43934 2.43934C2.15804 2.72064 2 3.10218 2 3.5V20.5C2 20.8978 2.15804 21.2794 2.43934 21.5607C2.72064 21.842 3.10218 22 3.5 22H20.5C20.8978 22 21.2794 21.842 21.5607 21.5607C21.842 21.2794 22 20.8978 22 20.5V13.5C22 13.3674 21.9473 13.2402 21.8536 13.1464C21.7598 13.0527 21.6326 13 21.5 13Z"
- fill="currentColor"
- />
- </svg>
- );
- }
-);
+export const IconNewPage = memo<SVGProps<SVGSVGElement>>(function IconNewPage(
+ props
+) {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}>
+ <path
+ d="M20.5001 2H15.5001C15.3675 2 15.2403 2.05268 15.1465 2.14645C15.0528 2.24021 15.0001 2.36739 15.0001 2.5V3.5C15.0001 3.63261 15.0528 3.75979 15.1465 3.85355C15.2403 3.94732 15.3675 4 15.5001 4H18.5901L7.6501 14.94C7.60323 14.9865 7.56604 15.0418 7.54065 15.1027C7.51527 15.1636 7.5022 15.229 7.5022 15.295C7.5022 15.361 7.51527 15.4264 7.54065 15.4873C7.56604 15.5482 7.60323 15.6035 7.6501 15.65L8.3501 16.35C8.39658 16.3969 8.45188 16.4341 8.51281 16.4594C8.57374 16.4848 8.63909 16.4979 8.7051 16.4979C8.7711 16.4979 8.83646 16.4848 8.89738 16.4594C8.95831 16.4341 9.01362 16.3969 9.0601 16.35L20.0001 5.41V8.5C20.0001 8.63261 20.0528 8.75979 20.1465 8.85355C20.2403 8.94732 20.3675 9 20.5001 9H21.5001C21.6327 9 21.7599 8.94732 21.8537 8.85355C21.9474 8.75979 22.0001 8.63261 22.0001 8.5V3.5C22.0001 3.10218 21.8421 2.72064 21.5608 2.43934C21.2795 2.15804 20.8979 2 20.5001 2V2Z"
+ fill="currentColor"
+ />
+ <path
+ d="M21.5 13H20.5C20.3674 13 20.2402 13.0527 20.1464 13.1464C20.0527 13.2402 20 13.3674 20 13.5V20H4V4H10.5C10.6326 4 10.7598 3.94732 10.8536 3.85355C10.9473 3.75979 11 3.63261 11 3.5V2.5C11 2.36739 10.9473 2.24021 10.8536 2.14645C10.7598 2.05268 10.6326 2 10.5 2H3.5C3.10218 2 2.72064 2.15804 2.43934 2.43934C2.15804 2.72064 2 3.10218 2 3.5V20.5C2 20.8978 2.15804 21.2794 2.43934 21.5607C2.72064 21.842 3.10218 22 3.5 22H20.5C20.8978 22 21.2794 21.842 21.5607 21.5607C21.842 21.2794 22 20.8978 22 20.5V13.5C22 13.3674 21.9473 13.2402 21.8536 13.1464C21.7598 13.0527 21.6326 13 21.5 13Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+});
diff --git a/src/components/Icon/IconRocket.tsx b/src/components/Icon/IconRocket.tsx
new file mode 100644
index 000000000..457736c7c
--- /dev/null
+++ b/src/components/Icon/IconRocket.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconRocket = memo<
+ JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
+>(function IconRocket({className, size = 'md'}) {
+ return (
+ <svg
+ className={className}
+ aria-hidden="true"
+ width={size === 's' ? '1.2em' : '1.5em'}
+ height={size === 's' ? '1.2em' : '1.5em'}
+ fill="currentColor"
+ version="1.1"
+ viewBox="0 0 1200 1200"
+ xmlns="http://www.w3.org/2000/svg">
+ <g fillRule="evenodd">
+ <path d="m911.8 288.2c65.051 65.051 65.051 170.6 0 235.65-65.051 65.051-170.6 65.051-235.65 0-65.051-65.051-65.051-170.6 0-235.65 65.051-65.051 170.6-65.051 235.65 0zm-53.051 53.051c-35.75-35.801-93.801-35.801-129.55 0-35.801 35.75-35.801 93.801 0 129.55 35.75 35.801 93.801 35.801 129.55 0 35.801-35.75 35.801-93.801 0-129.55z" />
+ <path d="m1122.2 103.4s96.648 328.1-194.4 619.1c-130.75 130.75-303.25 226.75-440.75 250.5-12.102 2.0508-24.449-1.8984-33.102-10.648l-231.55-234.8c-8.6484-8.8008-12.449-21.301-10.102-33.398 26.102-135.4 135.45-292.2 265.2-421.95 291-291.05 619.1-194.4 619.1-194.4 12.352 3.6016 22 13.25 25.602 25.602zm-67.5 41.898c-70.898-12.898-308.6-35.602-524.15 179.9-112.35 112.35-210.4 245.4-240.4 364.25 0 0 203.05 205.9 203.1 205.9 121.75-26.852 268.4-112.75 381.55-225.9 215.5-215.55 192.8-453.25 179.9-524.15z" />
+ <path d="m151.55 543.85 124 20.648c20.398 3.3984 34.25 22.75 30.801 43.148-3.3984 20.449-22.699 34.25-43.148 30.852l-144.35-24.051c-22.148-3.6992-40.699-18.949-48.602-40-7.9492-21.051-4.0508-44.699 10.199-62.148l122.85-150.15c15.051-18.398 36.898-30 60.551-32.148l179.55-16.301c20.602-1.8984 38.852 13.352 40.75 33.949 1.8516 20.602-13.352 38.852-33.949 40.75l-179.55 16.301c-3.6484 0.35156-7 2.1016-9.3008 4.9492z" />
+ <path d="m656.15 1048.4 134.2-109.8c2.8516-2.3008 4.6016-5.6484 4.9492-9.3008l16.301-179.55c1.8984-20.602 20.148-35.801 40.75-33.949 20.602 1.8984 35.852 20.148 33.949 40.75l-16.301 179.55c-2.1484 23.648-13.75 45.5-32.148 60.551l-150.15 122.85c-17.449 14.25-41.102 18.148-62.148 10.199-21.051-7.8984-36.301-26.449-40-48.602l-29.25-175.7c-3.3984-20.398 10.398-39.75 30.801-43.148 20.449-3.3984 39.75 10.449 43.148 30.852l25.898 155.3z" />
+ <path d="m310.9 560.4c-14.648-14.648-14.648-38.398 0-53.051 14.648-14.648 38.398-14.648 53.051 0l328.7 328.7c14.648 14.648 14.648 38.398 0 53.051-14.648 14.648-38.398 14.648-53.051 0z" />
+ <path d="m383.95 982.15c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
+ <path d="m237.85 909.1c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-127.85 127.85c-14.648 14.648-38.398 14.648-53.051 0-14.648-14.648-14.648-38.398 0-53.051z" />
+ <path d="m164.8 763c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
+ </g>
+ </svg>
+ );
+});
diff --git a/src/components/Icon/IconRss.tsx b/src/components/Icon/IconRss.tsx
index f2a52ee25..6208236f4 100644
--- a/src/components/Icon/IconRss.tsx
+++ b/src/components/Icon/IconRss.tsx
@@ -3,10 +3,9 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconRss = memo<JSX.IntrinsicElements['svg']>(function IconRss(
- props
-) {
+export const IconRss = memo<SVGProps<SVGSVGElement>>(function IconRss(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Icon/IconSearch.tsx b/src/components/Icon/IconSearch.tsx
index a2816991e..917513561 100644
--- a/src/components/Icon/IconSearch.tsx
+++ b/src/components/Icon/IconSearch.tsx
@@ -3,20 +3,21 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconSearch = memo<JSX.IntrinsicElements['svg']>(
- function IconSearch(props) {
- return (
- <svg width="1em" height="1em" viewBox="0 0 20 20" {...props}>
- <path
- d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
- stroke="currentColor"
- fill="none"
- strokeWidth="2"
- fillRule="evenodd"
- strokeLinecap="round"
- strokeLinejoin="round"></path>
- </svg>
- );
- }
-);
+export const IconSearch = memo<SVGProps<SVGSVGElement>>(function IconSearch(
+ props
+) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20" {...props}>
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+});
diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx
index 5a007657f..9ea0bafdf 100644
--- a/src/components/Icon/IconThreads.tsx
+++ b/src/components/Icon/IconThreads.tsx
@@ -3,22 +3,23 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconThreads = memo<JSX.IntrinsicElements['svg']>(
- function IconThreads(props) {
- return (
- <svg
- aria-label="Threads"
- viewBox="0 0 192 192"
- height="1.40em"
- width="1.40em"
- fill="currentColor"
- xmlns="http://www.w3.org/2000/svg"
- {...props}>
- <path
- className="x19hqcy"
- d="M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.19447 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C161.776 103.087 153.227 94.5962 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z"></path>
- </svg>
- );
- }
-);
+export const IconThreads = memo<SVGProps<SVGSVGElement>>(function IconThreads(
+ props
+) {
+ return (
+ <svg
+ aria-label="Threads"
+ viewBox="0 0 192 192"
+ height="1.40em"
+ width="1.40em"
+ fill="currentColor"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}>
+ <path
+ className="x19hqcy"
+ d="M141.537 88.9883C140.71 88.5919 139.87 88.2104 139.019 87.8451C137.537 60.5382 122.616 44.905 97.5619 44.745C97.4484 44.7443 97.3355 44.7443 97.222 44.7443C82.2364 44.7443 69.7731 51.1409 62.102 62.7807L75.881 72.2328C81.6116 63.5383 90.6052 61.6848 97.2286 61.6848C97.3051 61.6848 97.3819 61.6848 97.4576 61.6855C105.707 61.7381 111.932 64.1366 115.961 68.814C118.893 72.2193 120.854 76.925 121.825 82.8638C114.511 81.6207 106.601 81.2385 98.145 81.7233C74.3247 83.0954 59.0111 96.9879 60.0396 116.292C60.5615 126.084 65.4397 134.508 73.775 140.011C80.8224 144.663 89.899 146.938 99.3323 146.423C111.79 145.74 121.563 140.987 128.381 132.296C133.559 125.696 136.834 117.143 138.28 106.366C144.217 109.949 148.617 114.664 151.047 120.332C155.179 129.967 155.42 145.8 142.501 158.708C131.182 170.016 117.576 174.908 97.0135 175.059C74.2042 174.89 56.9538 167.575 45.7381 153.317C35.2355 139.966 29.8077 120.682 29.6052 96C29.8077 71.3178 35.2355 52.0336 45.7381 38.6827C56.9538 24.4249 74.2039 17.11 97.0132 16.9405C119.988 17.1113 137.539 24.4614 149.184 38.788C154.894 45.8136 159.199 54.6488 162.037 64.9503L178.184 60.6422C174.744 47.9622 169.331 37.0357 161.965 27.974C147.036 9.60668 125.202 0.195148 97.0695 0H96.9569C68.8816 0.19447 47.2921 9.6418 32.7883 28.0793C19.8819 44.4864 13.2244 67.3157 13.0007 95.9325L13 96L13.0007 96.0675C13.2244 124.684 19.8819 147.514 32.7883 163.921C47.2921 182.358 68.8816 191.806 96.9569 192H97.0695C122.03 191.827 139.624 185.292 154.118 170.811C173.081 151.866 172.51 128.119 166.26 113.541C161.776 103.087 153.227 94.5962 141.537 88.9883ZM98.4405 129.507C88.0005 130.095 77.1544 125.409 76.6196 115.372C76.2232 107.93 81.9158 99.626 99.0812 98.6368C101.047 98.5234 102.976 98.468 104.871 98.468C111.106 98.468 116.939 99.0737 122.242 100.233C120.264 124.935 108.662 128.946 98.4405 129.507Z"></path>
+ </svg>
+ );
+});
diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx
index e7b0cf09e..e84971f4e 100644
--- a/src/components/Icon/IconTwitter.tsx
+++ b/src/components/Icon/IconTwitter.tsx
@@ -3,20 +3,21 @@
*/
import {memo} from 'react';
+import type {SVGProps} from 'react';
-export const IconTwitter = memo<JSX.IntrinsicElements['svg']>(
- function IconTwitter(props) {
- return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 512 512"
- height="1.30em"
- width="1.30em"
- fill="currentColor"
- {...props}>
- <path fill="none" d="M0 0h24v24H0z" />
- <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
- </svg>
- );
- }
-);
+export const IconTwitter = memo<SVGProps<SVGSVGElement>>(function IconTwitter(
+ props
+) {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 512 512"
+ height="1.30em"
+ width="1.30em"
+ fill="currentColor"
+ {...props}>
+ <path fill="none" d="M0 0h24v24H0z" />
+ <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
+ </svg>
+ );
+});
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index bee8f524e..2ace6b97e 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -877,7 +877,8 @@ function ExampleLayout({
</div>
<div
ref={contentRef}
- className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center">
+ className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center"
+ dir="ltr">
{right}
<div
className={cn(
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index e5ba8e992..86ffdda83 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -4,6 +4,19 @@
import * as React from 'react';
import {Footer} from './Footer';
+<<<<<<< HEAD
+=======
+import {Toc} from './Toc';
+import SocialBanner from '../SocialBanner';
+import {DocsPageFooter} from 'components/DocsFooter';
+import {Seo} from 'components/Seo';
+import PageHeading from 'components/PageHeading';
+import {getRouteMeta} from './getRouteMeta';
+import {TocContext} from '../MDX/TocContext';
+import {Languages, LanguagesContext} from '../MDX/LanguagesContext';
+import type {TocItem} from 'components/MDX/TocContext';
+import type {RouteItem} from 'components/Layout/getRouteMeta';
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
import {HomeContent} from './HomeContent';
import cn from 'classnames';
import {DocsPageFooter} from 'components/DocsFooter';
@@ -30,7 +43,7 @@ interface PageProps {
meta: {
title?: string;
titleForTitleTag?: string;
- canary?: boolean;
+ version?: 'experimental' | 'canary';
description?: string;
};
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
@@ -52,7 +65,7 @@ export function Page({
routeTree
);
const title = meta.title || route?.title || '';
- const canary = meta.canary || false;
+ const version = meta.version;
const description = meta.description || route?.description || '';
const isHomePage = cleanedPath === '/';
const isBlogIndex = cleanedPath === '/blog';
@@ -69,7 +82,7 @@ export function Page({
)}>
<PageHeading
title={title}
- canary={canary}
+ version={version}
description={description}
tags={route?.tags}
breadcrumbs={breadcrumbs}
@@ -136,7 +149,7 @@ export function Page({
/>
</Head>
)}
- {/*<SocialBanner />*/}
+ <SocialBanner />
<TopNav
section={section}
routeTree={routeTree}
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index 8ab329eec..355f82ee0 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -9,6 +9,7 @@ import * as React from 'react';
import cn from 'classnames';
import {IconNavArrow} from 'components/Icon/IconNavArrow';
import {IconCanary} from 'components/Icon/IconCanary';
+import {IconExperimental} from 'components/Icon/IconExperimental';
import Link from 'next/link';
interface SidebarLinkProps {
@@ -16,7 +17,7 @@ interface SidebarLinkProps {
selected?: boolean;
title: string;
level: number;
- canary?: boolean;
+ version?: 'canary' | 'major' | 'experimental';
icon?: React.ReactNode;
isExpanded?: boolean;
hideArrow?: boolean;
@@ -27,7 +28,7 @@ export function SidebarLink({
href,
selected = false,
title,
- canary,
+ version,
level,
isExpanded,
hideArrow,
@@ -75,10 +76,28 @@ export function SidebarLink({
{/* This here needs to be refactored ofc */}
<div>
{title}{' '}
- {canary && (
+ {version === 'major' && (
+ <span
+ title="- This feature is available in React 19 beta and the React canary channel"
+ className={`text-xs px-1 ms-1 rounded bg-gray-10 dark:bg-gray-40 dark:bg-opacity-20 text-gray-40 dark:text-gray-40`}>
+ React 19
+ </span>
+ )}
+ {version === 'canary' && (
<IconCanary
+<<<<<<< HEAD
title=" - Cette fonctionnalité est disponible dans le dernier Canary"
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
+=======
+ title=" - This feature is available in the latest Canary version of React"
+ className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
+ />
+ )}
+ {version === 'experimental' && (
+ <IconExperimental
+ title=" - This feature is available in the latest Experimental version of React"
+ className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
/>
)}
</div>
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 3f058073c..72003df74 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -38,6 +38,7 @@ function CollapseWrapper({
// Disable pointer events while animating.
const isExpandedRef = useRef(isExpanded);
if (typeof window !== 'undefined') {
+ // eslint-disable-next-line react-compiler/react-compiler
// eslint-disable-next-line react-hooks/rules-of-hooks
useLayoutEffect(() => {
const wasExpanded = isExpandedRef.current;
@@ -87,7 +88,7 @@ export function SidebarRouteTree({
path,
title,
routes,
- canary,
+ version,
heading,
hasSectionHeader,
sectionHeader,
@@ -121,7 +122,7 @@ export function SidebarRouteTree({
selected={selected}
level={level}
title={title}
- canary={canary}
+ version={version}
isExpanded={isExpanded}
hideArrow={isForceExpanded}
/>
@@ -145,7 +146,7 @@ export function SidebarRouteTree({
selected={selected}
level={level}
title={title}
- canary={canary}
+ version={version}
/>
</li>
);
diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx
index 3564dd738..b3d14725d 100644
--- a/src/components/Layout/getRouteMeta.tsx
+++ b/src/components/Layout/getRouteMeta.tsx
@@ -19,8 +19,8 @@ export type RouteTag =
export interface RouteItem {
/** Page title (for the sidebar) */
title: string;
- /** Optional canary flag for heading */
- canary?: boolean;
+ /** Optional version flag for heading */
+ version?: 'canary' | 'major';
/** Optional page description for heading */
description?: string;
/* Additional meta info for page tagging */
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 07e72c992..8c4f7da4f 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,8 +1,9 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
+import type {SVGProps} from 'react';
-export function Logo(props: JSX.IntrinsicElements['svg']) {
+export function Logo(props: SVGProps<SVGSVGElement>) {
return (
<svg
width="100%"
diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx
index 79ddcd0d3..1870856f5 100644
--- a/src/components/MDX/Challenges/Challenges.tsx
+++ b/src/components/MDX/Challenges/Challenges.tsx
@@ -40,7 +40,10 @@ const parseChallengeContents = (
let challenge: Partial<ChallengeContents> = {};
let content: React.ReactElement[] = [];
Children.forEach(children, (child) => {
- const {props, type} = child;
+ const {props, type} = child as React.ReactElement<{
+ children?: string;
+ id?: string;
+ }>;
switch ((type as any).mdxName) {
case 'Solution': {
challenge.solution = child;
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 7eef0abe8..42165c57d 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -289,7 +289,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle {
function getLineDecorators(
code: string,
- meta: string
+ meta?: string
): Array<{
line: number;
className: string;
@@ -309,7 +309,7 @@ function getLineDecorators(
function getInlineDecorators(
code: string,
- meta: string
+ meta?: string
): Array<{
step: number;
line: number;
@@ -336,6 +336,7 @@ function getInlineDecorators(
line.step === 3,
'bg-green-40 border-green-40 text-green-60 dark:text-green-30':
line.step === 4,
+ // TODO: Some codeblocks use up to 6 steps.
}
),
})
diff --git a/src/components/MDX/CodeDiagram.tsx b/src/components/MDX/CodeDiagram.tsx
index 7a503f068..2a198fc56 100644
--- a/src/components/MDX/CodeDiagram.tsx
+++ b/src/components/MDX/CodeDiagram.tsx
@@ -17,7 +17,14 @@ export function CodeDiagram({children, flip = false}: CodeDiagramProps) {
});
const content = Children.toArray(children).map((child: any) => {
if (child.type?.mdxName === 'pre') {
- return <CodeBlock {...child.props} noMargin={true} noMarkers={true} />;
+ return (
+ <CodeBlock
+ key={child.key}
+ {...child.props}
+ noMargin={true}
+ noMarkers={true}
+ />
+ );
} else if (child.type === 'img') {
return null;
} else {
diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
index 6e704b417..6044b1370 100644
--- a/src/components/MDX/ConsoleBlock.tsx
+++ b/src/components/MDX/ConsoleBlock.tsx
@@ -38,7 +38,8 @@ export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
if (typeof children === 'string') {
message = children;
} else if (isValidElement(children)) {
- message = children.props.children;
+ message = (children as React.ReactElement<{children?: React.ReactNode}>)
+ .props.children;
}
return (
@@ -113,7 +114,8 @@ export function ConsoleLogLine({children, level}: ConsoleBlockProps) {
if (typeof children === 'string') {
message = children;
} else if (isValidElement(children)) {
- message = children.props.children;
+ message = (children as React.ReactElement<{children?: React.ReactNode}>)
+ .props.children;
} else if (Array.isArray(children)) {
message = children.reduce((result, child) => {
if (typeof child === 'string') {
diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx
index 198aa939d..a9b7455df 100644
--- a/src/components/MDX/ErrorDecoder.tsx
+++ b/src/components/MDX/ErrorDecoder.tsx
@@ -11,7 +11,7 @@ function replaceArgs(
return msg.replace(/%s/g, function () {
const arg = argList[argIdx++];
// arg can be an empty string: ?args[0]=&args[1]=count
- return arg === undefined || arg === '' ? replacer : arg;
+ return arg === undefined ? replacer : arg;
});
}
@@ -69,7 +69,7 @@ function parseQueryString(search: string): Array<string | undefined> {
}
export default function ErrorDecoder() {
- const {errorMessage} = useErrorDecoderParams();
+ const {errorMessage, errorCode} = useErrorDecoderParams();
/** error messages that contain %s require reading location.search */
const hasParams = errorMessage?.includes('%s');
const [message, setMessage] = useState<React.ReactNode | null>(() =>
@@ -82,23 +82,28 @@ export default function ErrorDecoder() {
if (errorMessage == null || !hasParams) {
return;
}
+ const args = parseQueryString(window.location.search);
+ let message = errorMessage;
+ if (errorCode === '418') {
+ // Hydration errors have a %s for the diff, but we don't add that to the args for security reasons.
+ message = message.replace(/%s$/, '');
- setMessage(
- urlify(
- replaceArgs(
- errorMessage,
- parseQueryString(window.location.search),
- '[missing argument]'
- )
- )
- );
+ // Before React 19.1, the error message didn't have an arg, and was always HTML.
+ if (args.length === 0) {
+ args.push('HTML');
+ } else if (args.length === 1 && args[0] === '') {
+ args[0] = 'HTML';
+ }
+ }
+
+ setMessage(urlify(replaceArgs(message, args, '[missing argument]')));
setIsReady(true);
- }, [hasParams, errorMessage]);
+ }, [errorCode, hasParams, errorMessage]);
return (
<code
className={cn(
- 'block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg',
+ 'whitespace-pre-line block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg',
isReady ? 'opacity-100' : 'opacity-0'
)}>
<b>{message}</b>
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index 5212aa9bd..fb9ad2792 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -8,8 +8,17 @@ import {IconNote} from '../Icon/IconNote';
import {IconWarning} from '../Icon/IconWarning';
import {IconPitfall} from '../Icon/IconPitfall';
import {IconCanary} from '../Icon/IconCanary';
+import {IconRocket} from '../Icon/IconRocket';
-type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary';
+type CalloutVariants =
+ | 'deprecated'
+ | 'pitfall'
+ | 'note'
+ | 'wip'
+ | 'canary'
+ | 'experimental'
+ | 'major'
+ | 'rsc';
interface ExpandableCalloutProps {
children: React.ReactNode;
@@ -43,6 +52,15 @@ const variantMap = {
overlayGradient:
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
},
+ experimental: {
+ title: 'Experimental Feature',
+ Icon: IconCanary,
+ containerClasses:
+ 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
+ textColor: 'text-green-60 dark:text-green-40',
+ overlayGradient:
+ 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
+ },
pitfall: {
title: 'Piège',
Icon: IconPitfall,
@@ -59,6 +77,22 @@ const variantMap = {
overlayGradient:
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
},
+ major: {
+ title: 'React 19',
+ Icon: IconRocket,
+ containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
+ textColor: 'text-blue-50 dark:text-blue-40',
+ overlayGradient:
+ 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+ },
+ rsc: {
+ title: 'React Server Components',
+ Icon: null,
+ containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
+ textColor: 'text-blue-50 dark:text-blue-40',
+ overlayGradient:
+ 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+ },
};
function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
@@ -72,9 +106,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
variant.containerClasses
)}>
<h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
- <variant.Icon
- className={cn('inline me-3 mb-1 text-lg', variant.textColor)}
- />
+ {variant.Icon && (
+ <variant.Icon
+ className={cn('inline me-2 mb-1 text-lg', variant.textColor)}
+ />
+ )}
{variant.title}
</h3>
<div className="relative">
diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx
index 0e8db0165..5759a7c0a 100644
--- a/src/components/MDX/InlineCode.tsx
+++ b/src/components/MDX/InlineCode.tsx
@@ -3,6 +3,7 @@
*/
import cn from 'classnames';
+import type {HTMLAttributes} from 'react';
interface InlineCodeProps {
isLink?: boolean;
@@ -11,7 +12,7 @@ interface InlineCodeProps {
function InlineCode({
isLink,
...props
-}: JSX.IntrinsicElements['code'] & InlineCodeProps) {
+}: HTMLAttributes<HTMLElement> & InlineCodeProps) {
return (
<code
dir="ltr" // This is needed to prevent the code from inheriting the RTL direction of <html> in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()`
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index a6dfdfd31..3b2e45739 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -5,6 +5,7 @@
import {Children, useContext, useMemo} from 'react';
import * as React from 'react';
import cn from 'classnames';
+import type {HTMLAttributes} from 'react';
import CodeBlock from './CodeBlock';
import {CodeDiagram} from './CodeDiagram';
@@ -59,21 +60,31 @@ function CodeStep({children, step}: {children: any; step: number}) {
);
}
+<<<<<<< HEAD
const P = (p: JSX.IntrinsicElements['p']) => (
<p className="whitespace-pre-wrap my-4 text-pretty" {...p} />
+=======
+const P = (p: HTMLAttributes<HTMLParagraphElement>) => (
+ <p className="whitespace-pre-wrap my-4" {...p} />
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
);
-const Strong = (strong: JSX.IntrinsicElements['strong']) => (
+const Strong = (strong: HTMLAttributes<HTMLElement>) => (
<strong className="font-bold" {...strong} />
);
-const OL = (p: JSX.IntrinsicElements['ol']) => (
+const OL = (p: HTMLAttributes<HTMLOListElement>) => (
<ol className="ms-6 my-3 list-decimal" {...p} />
);
+<<<<<<< HEAD
const LI = (p: JSX.IntrinsicElements['li']) => (
<li className="leading-relaxed mb-1 text-pretty" {...p} />
+=======
+const LI = (p: HTMLAttributes<HTMLLIElement>) => (
+ <li className="leading-relaxed mb-1" {...p} />
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
);
-const UL = (p: JSX.IntrinsicElements['ul']) => (
+const UL = (p: HTMLAttributes<HTMLUListElement>) => (
<ul className="ms-6 my-3 list-disc" {...p} />
);
@@ -97,6 +108,18 @@ const Canary = ({children}: {children: React.ReactNode}) => (
<ExpandableCallout type="canary">{children}</ExpandableCallout>
);
+const Experimental = ({children}: {children: React.ReactNode}) => (
+ <ExpandableCallout type="experimental">{children}</ExpandableCallout>
+);
+
+const NextMajor = ({children}: {children: React.ReactNode}) => (
+ <ExpandableCallout type="major">{children}</ExpandableCallout>
+);
+
+const RSC = ({children}: {children: React.ReactNode}) => (
+ <ExpandableCallout type="rsc">{children}</ExpandableCallout>
+);
+
const CanaryBadge = ({title}: {title: string}) => (
<span
title={title}
@@ -111,10 +134,41 @@ const CanaryBadge = ({title}: {title: string}) => (
</span>
);
-const Blockquote = ({
- children,
- ...props
-}: JSX.IntrinsicElements['blockquote']) => {
+const ExperimentalBadge = ({title}: {title: string}) => (
+ <span
+ title={title}
+ className={
+ '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'
+ }>
+ <IconCanary
+ size="s"
+ className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
+ />
+ Experimental only
+ </span>
+);
+
+const NextMajorBadge = ({title}: {title: string}) => (
+ <span
+ title={title}
+ className={
+ 'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-60 text-gray-60 dark:text-gray-10 rounded'
+ }>
+ React 19
+ </span>
+);
+
+const RSCBadge = ({title}: {title: string}) => (
+ <span
+ title={title}
+ className={
+ 'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-50 text-gray-60 dark:text-gray-10 rounded'
+ }>
+ RSC
+ </span>
+);
+
+const Blockquote = ({children, ...props}: HTMLAttributes<HTMLQuoteElement>) => {
return (
<blockquote
className="mdx-blockquote py-4 px-8 my-8 shadow-inner-border dark:shadow-inner-border-dark bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-2xl leading-6 flex relative"
@@ -492,7 +546,13 @@ export const MDXComponents = {
MathI,
Note,
Canary,
+ Experimental,
+ ExperimentalBadge,
CanaryBadge,
+ NextMajor,
+ NextMajorBadge,
+ RSC,
+ RSCBadge,
PackageImport,
ReadBlogPost,
Recap,
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index 561cd21da..756936a8e 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -28,6 +28,7 @@ export const CustomPreset = memo(function CustomPreset({
const {activeFile} = sandpack;
const lineCountRef = useRef<{[key: string]: number}>({});
if (!lineCountRef.current[activeFile]) {
+ // eslint-disable-next-line react-compiler/react-compiler
lineCountRef.current[activeFile] = code.split('\n').length;
}
const lineCount = lineCountRef.current[activeFile];
diff --git a/src/components/MDX/Sandpack/LoadingOverlay.tsx b/src/components/MDX/Sandpack/LoadingOverlay.tsx
index cd3f38fca..de883629c 100644
--- a/src/components/MDX/Sandpack/LoadingOverlay.tsx
+++ b/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -17,7 +17,7 @@ export const LoadingOverlay = ({
clientId: string;
dependenciesLoading: boolean;
forceLoading: boolean;
-} & React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => {
+} & React.HTMLAttributes<HTMLDivElement>): React.ReactNode | null => {
const loadingOverlayState = useLoadingOverlayState(
clientId,
dependenciesLoading,
@@ -64,6 +64,7 @@ export const LoadingOverlay = ({
transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`,
}}>
<div className="sp-cube-wrapper" title="Open in CodeSandbox">
+ {/* @ts-ignore: the OpenInCodeSandboxButton type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
<OpenInCodeSandboxButton />
<div className="sp-cube">
<div className="sp-sides">
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index 8662c92f0..54740f89e 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -115,7 +115,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
return (
<div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg text-lg">
+ {/* If Prettier reformats this block, the two @ts-ignore directives will no longer be adjacent to the problematic lines, causing TypeScript errors */}
+ {/* prettier-ignore */}
<div className="flex-1 grow min-w-0 px-4 lg:px-6">
+ {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
<Listbox value={activeFile} onChange={setActiveFile}>
<div ref={containerRef}>
<div className="relative overflow-hidden">
@@ -129,8 +132,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
'w-[fit-content]',
showDropdown ? 'invisible' : ''
)}>
+ {/* @ts-ignore: the FileTabs type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
<FileTabs />
</div>
+ {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
<Listbox.Button as={Fragment}>
{({open}) => (
// If tabs don't fit, display the dropdown instead.
@@ -160,10 +165,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
</Listbox.Button>
</div>
</div>
- {isMultiFile && showDropdown && (
- <Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 inset-x-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
- {visibleFiles.map((filePath: string) => (
- <Listbox.Option key={filePath} value={filePath} as={Fragment}>
+ {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
+ {isMultiFile && showDropdown && (<Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 inset-x-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
+ {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
+ {visibleFiles.map((filePath: string) => (<Listbox.Option key={filePath} value={filePath} as={Fragment}>
{({active}) => (
<li
className={cn(
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 774c8c576..16c208ab2 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -2,6 +2,7 @@
* Copyright (c) Facebook, Inc. and its affiliates.
*/
+// eslint-disable-next-line react-compiler/react-compiler
/* eslint-disable react-hooks/exhaustive-deps */
import {useRef, useState, useEffect, useMemo, useId} from 'react';
import {useSandpack, SandpackStack} from '@codesandbox/sandpack-react/unstyled';
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index a47fa6860..67f40d0b3 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -71,6 +71,13 @@ function SandpackRoot(props: SandpackProps) {
const codeSnippets = Children.toArray(children) as React.ReactElement[];
const files = createFileMap(codeSnippets);
+ if ('/index.html' in files) {
+ throw new Error(
+ 'You cannot use `index.html` file in sandboxes. ' +
+ 'Only `public/index.html` is respected by Sandpack and CodeSandbox (where forks are created).'
+ );
+ }
+
files['/src/styles.css'] = {
code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'),
hidden: !files['/src/styles.css']?.visible,
diff --git a/src/components/MDX/Sandpack/createFileMap.ts b/src/components/MDX/Sandpack/createFileMap.ts
index 615d34c9a..193b07be8 100644
--- a/src/components/MDX/Sandpack/createFileMap.ts
+++ b/src/components/MDX/Sandpack/createFileMap.ts
@@ -3,6 +3,7 @@
*/
import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';
+import type {PropsWithChildren, ReactElement, HTMLAttributes} from 'react';
export const AppJSPath = `/src/App.js`;
export const StylesCSSPath = `/src/styles.css`;
@@ -17,7 +18,13 @@ export const createFileMap = (codeSnippets: any) => {
) {
return result;
}
- const {props} = codeSnippet.props.children;
+ const {props} = (
+ codeSnippet.props as PropsWithChildren<{
+ children: ReactElement<
+ HTMLAttributes<HTMLDivElement> & {meta?: string}
+ >;
+ }>
+ ).children;
let filePath; // path in the folder structure
let fileHidden = false; // if the file is available as a tab
let fileActive = false; // if the file tab is shown by default
diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
index e1169b7ae..2589d1791 100644
--- a/src/components/MDX/Sandpack/template.ts
+++ b/src/components/MDX/Sandpack/template.ts
@@ -1,7 +1,7 @@
export const template = {
'/src/index.js': {
hidden: true,
- code: `import React, { StrictMode } from "react";
+ code: `import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
@@ -28,8 +28,8 @@ root.render(
eject: 'react-scripts eject',
},
dependencies: {
- react: '^18.0.0',
- 'react-dom': '^18.0.0',
+ react: '^19.1.0',
+ 'react-dom': '^19.1.0',
'react-scripts': '^5.0.0',
},
},
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index dffb767dc..6e692d27c 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -3,7 +3,7 @@
*/
import * as React from 'react';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
import {IconTwitter} from '../Icon/IconTwitter';
import {IconThreads} from '../Icon/IconThreads';
import {IconBsky} from '../Icon/IconBsky';
@@ -39,11 +39,9 @@ export function TeamMember({
personal,
}: TeamMemberProps) {
if (name == null || title == null || permalink == null || children == null) {
+ const identifier = name ?? title ?? permalink ?? 'unknown';
throw new Error(
- 'Expected name, title, permalink, and children for ' + name ??
- title ??
- permalink ??
- 'unknown'
+ `Expected name, title, permalink, and children for ${identifier}`
);
}
return (
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index fc13af338..475292716 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -31,9 +31,11 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
message = children;
} else if (
isValidElement(children) &&
- typeof children.props.children === 'string'
+ typeof (children as React.ReactElement<{children: string}>).props
+ .children === 'string'
) {
- message = children.props.children;
+ message = (children as React.ReactElement<{children: string}>).props
+ .children;
} else {
throw Error('Expected TerminalBlock children to be a plain string.');
}
@@ -71,7 +73,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
</div>
</div>
<div
- className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-scroll"
+ className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-auto"
translate="no"
dir="ltr">
<LevelText type={level} />
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index 0a71658a2..dee9f030e 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -8,10 +8,12 @@ import {H1} from './MDX/Heading';
import type {RouteTag, RouteItem} from './Layout/getRouteMeta';
import * as React from 'react';
import {IconCanary} from './Icon/IconCanary';
+import {IconExperimental} from './Icon/IconExperimental';
interface PageHeadingProps {
title: string;
- canary?: boolean;
+ version?: 'experimental' | 'canary';
+ experimental?: boolean;
status?: string;
description?: string;
tags?: RouteTag[];
@@ -21,7 +23,7 @@ interface PageHeadingProps {
function PageHeading({
title,
status,
- canary,
+ version,
tags = [],
breadcrumbs,
}: PageHeadingProps) {
@@ -31,9 +33,19 @@ function PageHeading({
{breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
<H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">
{title}
- {canary && (
+ {version === 'canary' && (
<IconCanary
+<<<<<<< HEAD
title=" - Cette fonctionnalité est disponible dans le dernier Canary"
+=======
+ title=" - This feature is available in the latest Canary version of React"
+ className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
+ />
+ )}
+ {version === 'experimental' && (
+ <IconExperimental
+ title=" - This feature is available in the latest Experimental version of React"
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
/>
)}
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index f5c963f67..c7401487b 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -9,6 +9,8 @@ import {lazy, useEffect} from 'react';
import * as React from 'react';
import {createPortal} from 'react-dom';
import {siteConfig} from 'siteConfig';
+import type {ComponentType, PropsWithChildren} from 'react';
+import type {DocSearchModalProps} from '@docsearch/react/modal';
export interface SearchProps {
appId?: string;
@@ -83,9 +85,10 @@ const options = {
};
const DocSearchModal: any = lazy(() =>
- // @ts-ignore
import('@docsearch/react/modal').then((mod) => ({
- default: mod.DocSearchModal,
+ default: mod.DocSearchModal as ComponentType<
+ PropsWithChildren<DocSearchModalProps>
+ >,
}))
);
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index 93d27983d..ae90398c4 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -124,7 +124,14 @@ export const Seo = withRouter(
)}
<link
rel="preload"
- href="/fonts/Source-Code-Pro-Regular.woff2"
+ href="https://react.dev/fonts/Source-Code-Pro-Regular.woff2"
+ as="font"
+ type="font/woff2"
+ crossOrigin="anonymous"
+ />
+ <link
+ rel="preload"
+ href="https://react.dev/fonts/Source-Code-Pro-Bold.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index 70529254b..9b4e703c9 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -5,10 +5,14 @@
import {useEffect, useRef} from 'react';
+<<<<<<< HEAD
import {ExternalLink} from './ExternalLink';
import cn from 'classnames';
const bannerText = 'Rejoignez-nous à la React Conf les 15-16 mai.';
+=======
+const bannerText = 'Join us for React Conf on Oct 7-8.';
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
const bannerLink = 'https://conf.react.dev/';
const bannerLinkText = 'En savoir plus';
diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
index df7bfc1fd..4fca5b59a 100644
--- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
+++ b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
@@ -6,7 +6,11 @@ description: 2020, c'était long. Alors que l'année se termine, nous voulions
---
+<<<<<<< HEAD
Le 21 décembre 2020 par [Dan Abramov](https://twitter.com/dan_abramov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS) et [Sebastian Markbåge](https://twitter.com/sebmarkbage)
+=======
+December 21, 2020 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md
index 10f74aeb7..01b89ba46 100644
--- a/src/content/blog/2021/06/08/the-plan-for-react-18.md
+++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md
@@ -5,7 +5,11 @@ date: 2021/06/08
description: L'équipe React est ravie de vous donner quelques nouvelles. Nous avons commencé à travailler sur React 18, qui sera notre prochaine version majeure. Nous avons créé un groupe de travail pour préparer la communauté à l'adoption graduelle des nouvelles fonctionnalités de React 18. Nous avons publié une React 18 Alpha pour que les mainteneurs de bibliothèques puissent l'essayer et nous faire leurs retours…
---
+<<<<<<< HEAD
Le 8 juin 2021 par [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://twitter.com/dan_abramov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Seth Webster](https://twitter.com/sethwebster)
+=======
+June 8, 2021 by [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Seth Webster](https://twitter.com/sethwebster)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md
index 944902a7e..330a5ba66 100644
--- a/src/content/blog/2021/12/17/react-conf-2021-recap.md
+++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md
@@ -132,7 +132,11 @@ C'était la première fois que nous planifiions une conférence nous-mêmes, et
Merci tout d'abord à nos orateurs et oratrices [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0) et [Xuan Huang (黄玄)](https://twitter.com/Huxpro).
+<<<<<<< HEAD
Merci à celles et ceux qui ont aidé en fournissant des retours sur les présentations, notamment [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors) et [Tim Yung](https://twitter.com/yungsters).
+=======
+Thanks to everyone who helped provide feedback on talks including [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), and [Tim Yung](https://twitter.com/yungsters).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Merci [Lauren Tan](https://twitter.com/potetotes) pour avoir mis en place le Discord de la conférence et avoir joué le rôle de notre administrateur Discord.
diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
index a545d370e..ee3c6c6ef 100644
--- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
+++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md
@@ -6,7 +6,11 @@ description: React 18 a pris des années, mais il était porteur de précieuses
---
+<<<<<<< HEAD
Le 15 juin 2022 par [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Xuan Huang](https://twitter.com/Huxpro)
+=======
+June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Xuan Huang](https://twitter.com/Huxpro)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
@@ -28,7 +32,11 @@ Nous avons annoncé une [démo expérimentale des React Server Components](/blog
Nous avons notamment abandonné l'idée de versions dédiées de bibliothèques d'E/S (ex. react-fetch), pour plutôt adopter un modèle à base d'async/await pour une meilleure compatibilité. Ça ne bloque pas en soit la sortie des RSC parce que vous pouvez aussi utiliser des routeurs pour le chargement de données. Autre évolution : nous avons délaissé l'approche à base d'extension de fichiers au profit [d'annotations](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278).
+<<<<<<< HEAD
Nous collaborons avec Vercel et Shopify pour unifier la prise en charge de *bundlers* pour viser une sémantique partagée avec Webpack et Vite. D'ici la sortie, nous souhaitons nous assurer que la sémantique des RSC sera la même à travers tout l'écosystème de React. C'est le principal point bloquant pour arriver à une version stable.
+=======
+We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
## Chargement de ressources {/*asset-loading*/}
diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index 41fbf7328..ed1232dc6 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -5,7 +5,11 @@ date: 2023/03/16
description: Nous sommes enchantés d'annoncer aujourd'hui la sortie de react.dev, le nouveau site officiel de React et de sa documentation. Dans ce billet, nous aimerions vous faire faire un tour du nouveau site.
---
+<<<<<<< HEAD
Le 16 mars 2023 par [Dan Abramov](https://twitter.com/dan_abramov) et [Rachel Nabors](https://twitter.com/rachelnabors)
+=======
+March 16, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Rachel Nabors](https://twitter.com/rachelnabors)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
@@ -632,7 +636,11 @@ Nous pensons qu'il n'y a jamais eu de meilleur moment pour apprendre React.
## Qui a travaillé sur tout ça ? {/*who-worked-on-this*/}
+<<<<<<< HEAD
Dans l'équipe React, [Rachel Nabors](https://twitter.com/rachelnabors/) a piloté le projet (et fourni les illustrations) et [Dan Abramov](https://twitter.com/dan_abramov) a conçu le cursus. Ils ont par ailleurs co-écrit ensemble la majorité du contenu.
+=======
+On the React team, [Rachel Nabors](https://twitter.com/rachelnabors/) led the project (and provided the illustrations), and [Dan Abramov](https://bsky.app/profile/danabra.mov) designed the curriculum. They co-authored most of the content together as well.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Naturellement, un projet de cette taille ne se fait pas avec une petite équipe dans son coin ! Nous avons beaucoup de monde à remercier !
diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
index 66599c139..bc7aa9a7a 100644
--- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
+++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md
@@ -96,9 +96,16 @@ Depuis notre dernier bulletin, nous avons testé une version expérimentale du p
L'API de pistage des transitions vous permet de détecter que des [transitions React](/reference/react/useTransition) ralentissent, et d'enquêter sur les causes du ralentissement. Depuis notre dernier bulletin, nous avons terminé la conception initiale de l'API et publié une [RFC](https://github.com/reactjs/rfcs/pull/238). Les capacités de base ont été implémentées. Le projet est actuellement en suspens. Nous sommes à l'écoute de vos retours sur la RFC et espérons reprendre le développement pour fournir de meilleurs outils de mesure de la performance pour React. Ça sera particulièrement utile pour les routeurs basés sur les transitions React, tels que [l'*App Router* de Next.js](/learn/start-a-new-react-project#nextjs-app-router).
+<<<<<<< HEAD
---
En complément de ce bulletin, notre équipe est récemment apparue dans des podcasts communautaires et des *livestreams* pour parler de notre travail et répondre à vos questions.
+=======
+* [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Joe Savona](https://twitter.com/en_JS) were interviewed by [Kent C. Dodds on his YouTube channel](https://www.youtube.com/watch?v=h7tur48JSaw), where they discussed concerns around React Server Components.
+* [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Joe Savona](https://twitter.com/en_JS) were guests on the [JSParty podcast](https://jsparty.fm/267) and shared their thoughts about the future of React.
+
+Thanks to [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Luna Wei](https://twitter.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Sean Keegan](https://twitter.com/DevRelSean), [Sebastian Silbermann](https://twitter.com/sebsilbermann), [Seth Webster](https://twitter.com/sethwebster), and [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this post.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* [Dan Abramov](https://twitter.com/dan_abramov) et [Joe Savona](https://twitter.com/en_JS) étaient interviewés par [Kent C. Dodds sur sa chaîne YouTube](https://www.youtube.com/watch?v=h7tur48JSaw), pour parler de leurs préoccupations sur les React Server Components.
* [Dan Abramov](https://twitter.com/dan_abramov) et [Joe Savona](https://twitter.com/en_JS) étaient les invités du [podcast JSParty](https://jsparty.fm/267) pour parler de leurd visions respectives de l'avenir de React.
diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md
index f7a39d268..2ecd7fa1b 100644
--- a/src/content/blog/2023/05/03/react-canaries.md
+++ b/src/content/blog/2023/05/03/react-canaries.md
@@ -6,7 +6,11 @@ description: Nous aimerions offrir à la communauté React un moyen d'adopter in
---
+<<<<<<< HEAD
Le 3 mai 2023 par [Dan Abramov](https://twitter.com/dan_abramov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Andrew Clark](https://twitter.com/acdlite)
+=======
+May 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Andrew Clark](https://twitter.com/acdlite)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index fed42389a..991a7c520 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -5,7 +5,11 @@ date: 2024/02/15
description: Dans les billets React Labs, nous vous parlons de nos projets de recherche et développement actifs. Depuis notre dernier bulletin, nous avons fait des progrès significatifs et nous aimerions partager ce que nous avons appris.
---
+<<<<<<< HEAD
Le 15 février 2024 par [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode) et [Dan Abramov](https://twitter.com/dan_abramov).
+=======
+February 15, 2024 by [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode), and [Dan Abramov](https://bsky.app/profile/danabra.mov).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index 08529b4a0..3387bc2e7 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -1,5 +1,9 @@
---
+<<<<<<< HEAD
title: "React 19 RC : guide de migration"
+=======
+title: "React 19 Upgrade Guide"
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
author: Ricky Hanlon
date: 2024/04/25
description: Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19.
@@ -12,7 +16,11 @@ Le 25 avril 2024 par [Ricky Hanlon](https://twitter.com/rickhanlonii)
<Intro>
+<<<<<<< HEAD
Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications.
+=======
+The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Intro>
@@ -24,7 +32,11 @@ Pour vous aider à migrer vers React 19, nous avons publié une version `react@1
Nous vous conseillons de d'abord mettre à jour vers React 18.3 pour vous aider à identifier tout problème avant de passer à React 19.
+<<<<<<< HEAD
Pour une liste détaillées des modifications de la 18.3, consultez ses [notes de publication](https://github.com/facebook/react/blob/main/CHANGELOG.md).
+=======
+For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Note>
@@ -38,7 +50,11 @@ Dans cet article, nous vous guidons à travers les étapes nécessaires à une m
- [Changements liés à TypeScript](#typescript-changes)
- [Changelog](#changelog)
+<<<<<<< HEAD
Si vous aimeriez nous aider à tester React 19, suivez les étapes de ce guide de migration et [signalez-nous tout problème](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) que vous rencontreriez. Pour une liste des nouveautés de React 19, consultez [l’annonce de sortie de React 19](/blog/2024/04/25/react-19).
+=======
+If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
@@ -71,28 +87,27 @@ Nous estimons que la plupart des applis ne seront pas affectées par ça, dans l
Pour installer la dernière version de React et React DOM :
```bash
-npm install --save-exact react@rc react-dom@rc
+npm install --save-exact react@^19.0.0 react-dom@^19.0.0
```
Ou si vous utilisez Yarn :
```bash
-yarn add --exact react@rc react-dom@rc
+yarn add --exact react@^19.0.0 react-dom@^19.0.0
```
+<<<<<<< HEAD
Si vous utilisez TypeScript, vous aurez aussi besoin de mettre à jour les types. Une fois que React 19 sortira en version stable, vous pourrez installer les types au travers des paquets habituels `@types/react` et `@types/react-dom`. D'ici là, ces types sont mis à disposition par des paquets distincts que vous devrez forcer dans votre `package.json` :
+=======
+If you're using TypeScript, you also need to update the types.
+```bash
+npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
+```
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-```json
-{
- "dependencies": {
- "@types/react": "npm:types-react@rc",
- "@types/react-dom": "npm:types-react-dom@rc"
- },
- "overrides": {
- "@types/react": "npm:types-react@rc",
- "@types/react-dom": "npm:types-react-dom@rc"
- }
-}
+Or, if you're using Yarn:
+```bash
+yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
```
Nous fournissons par ailleurs un codemod pour les remplacements les plus courants. Consultez par exemple la section [Changements liés à TypeScript](#typescript-changes) plus loin.
@@ -117,8 +132,13 @@ Elle exploitera les codemods suivants du dépôt `react-codemod` :
- [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render)
- [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref)
- [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import)
+<<<<<<< HEAD
- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state)
- [`prop-types-typescript`](TODO)
+=======
+- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state)
+- [`prop-types-typescript`](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Ça n'inclut toutefois pas les changements liés à TypeScript. Consultez la section [Changements liés à TypeScript](#typescript-changes) plus loin.
@@ -746,6 +766,7 @@ const reducer = (state: State, action: Action) => state;
### Autres ruptures de compatibilité ascendante {/*other-breaking-changes*/}
+<<<<<<< HEAD
- **react-dom**: Erreur sur URL JavaScript dans src/href [#26507](https://github.com/facebook/react/pull/26507)
- **react-dom**: Retrait de `errorInfo.digest` dans `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
- **react-dom**: Retrait de `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
@@ -753,6 +774,15 @@ const reducer = (state: State, action: Action) => state;
- **react-dom**: Retrait de `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
- **react-dom**: Retrait de `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
- **react-is**: Retrait de méthodes dépréciées dans `react-is` [28224](https://github.com/facebook/react/pull/28224)
+=======
+- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507)
+- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
+- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
+- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
+- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### Autres changements notables {/*other-notable-changes*/}
@@ -763,7 +793,11 @@ const reducer = (state: State, action: Action) => state;
- **react-dom**: Retire l'avertissement des Effets de layout lors du SSR [#26395](https://github.com/facebook/react/pull/26395)
- **react-dom**: Avertit et évite les chaînes vides pour src/href (sauf sur balises d'ancres) [#28124](https://github.com/facebook/react/pull/28124)
+<<<<<<< HEAD
Nous publierons un changelog complet avec la version stable de React 19.
+=======
+For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md
index 46063b260..642a109f2 100644
--- a/src/content/blog/2024/05/22/react-conf-2024-recap.md
+++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md
@@ -17,7 +17,11 @@ La semaine dernière nous avons organisé React Conf 2024, une conférence de de
---
+<<<<<<< HEAD
Lors de la React Conf 2024, nous avons annoncé [React 19 RC](/blog/2024/04/25/react-19), la [beta de la nouvelle architecture React Native](https://github.com/reactwg/react-native-new-architecture/discussions/189), et une sortie expérimentale du [React Compiler](/learn/react-compiler). La communauté est également montée sur scène pour annoncer [React Router v7](https://remix.run/blog/merging-remix-and-react-router), les [Composants Serveur universels](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) dans Expo Router, les Composants Serveur dans [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), et bien plus encore.
+=======
+At React Conf 2024, we announced the [React 19 RC](/blog/2024/12/05/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
L'intégralité des flux pour le [jour 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) et le [jour 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) est disponible en ligne. Dans cet article, nous récapitulons les présentations et annonces de l'événement.
@@ -36,6 +40,7 @@ Pour en apprendre davantage, allez voir ces présentations de la communauté plu
- [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) par [Amy Dutton](https://twitter.com/selfteachme)
- [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) par [Evan Bacon](https://twitter.com/Baconbrix)
+<<<<<<< HEAD
Pour la suite de la plénière, [Josh Story](https://twitter.com/joshcstory) et [Andrew Clark](https://twitter.com/acdlite) ont présenté de nouvelles fonctionnalités à venir dans React 19, et annoncé que React 19 RC était prête pour être testée en production. Découvrez toutes ces nouveautés dans [l'annonce de sortie de React 19](/blog/2024/04/25/react-19) et allez voir ces présentations qui explorent en détail les nouvelles fonctionnalités :
- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) par [Lydia Hallie](https://twitter.com/lydiahallie)
@@ -44,6 +49,16 @@ Pour la suite de la plénière, [Josh Story](https://twitter.com/joshcstory) et
- [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) par [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) par [Dan Abramov](https://twitter.com/dan_abramov2)
- [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) par [Kent C. Dodds](https://twitter.com/kentcdodds)
+=======
+Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/12/05/react-19), and see these talks for deep dives on the new features:
+
+- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) by [Lydia Hallie](https://twitter.com/lydiahallie)
+- [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) by [Sam Selikoff](https://twitter.com/samselikoff)
+- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24916s) by [Josh Story](https://twitter.com/joshcstory)
+- [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
+- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://bsky.app/profile/danabra.mov)
+- [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Nous avons conclu la plénière avec [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya) et [Mofei Zhang](https://twitter.com/zmofei) qui ont annoncé que le React Compiler était désormais [*open source*](https://github.com/facebook/react/pull/29061) et ont mis à disposition une version expérimentale du React Compiler pour que chacun·e puisse l'essayer.
diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md
index 303a95840..0131a59d4 100644
--- a/src/content/blog/2024/10/21/react-compiler-beta-release.md
+++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md
@@ -10,6 +10,14 @@ Le 21 octobre 2024 par [Lauren Tan](https://twitter.com/potetotes).
---
+<Note>
+
+### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/}
+
+Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details.
+
+</Note>
+
<Intro>
L'équipe React est heureuse de partager avec vous les annonces suivantes :
diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/12/05/react-19.md
similarity index 90%
rename from src/content/blog/2024/04/25/react-19.md
rename to src/content/blog/2024/12/05/react-19.md
index 44dac8fcd..d5833ab7b 100644
--- a/src/content/blog/2024/04/25/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -1,4 +1,5 @@
---
+<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md
title: "React 19 RC"
author: L'équipe React
date: 2024/04/25
@@ -6,16 +7,45 @@ description: React 19 RC est désormais disponible sur npm ! Dans cet article,
---
Le 25 avril 2024 par [l'équipe React](/community/team)
+=======
+title: "React v19"
+author: The React Team
+date: 2024/12/05
+description: React 19 is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them.
+---
+
+December 05, 2024 by [The React Team](/community/team)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772:src/content/blog/2024/12/05/react-19.md
---
+<Note>
+
+### React 19 is now stable! {/*react-19-is-now-stable*/}
+
+Additions since this post was originally shared with the React 19 RC in April:
+
+- **Pre-warming for suspended trees**: see [Improvements to Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense).
+- **React DOM static APIs**: see [New React DOM Static APIs](#new-react-dom-static-apis).
+
+_The date for this post has been updated to reflect the stable release date._
+
+</Note>
<Intro>
+<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md
React 19 RC est désormais disponible sur npm !
</Intro>
Dans notre [guide de migration pour React 19 RC](/blog/2024/04/25/react-19-upgrade-guide), nous avons fourni des instructions pas à pas pour mettre à jour votre appli vers React 19. Dans cet article, nous allons passer en revue les nouveautés de React 19, et voir comment vous pouvez les adopter.
+=======
+React v19 is now available on npm!
+
+</Intro>
+
+In our [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide), we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772:src/content/blog/2024/12/05/react-19.md
- [Quoi de neuf dans React 19](#whats-new-in-react-19)
- [React Server Components](#react-server-components)
@@ -283,9 +313,13 @@ A component was suspended by an uncached promise. Creating promises inside a Cli
</ConsoleBlockMulti>
+<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md
*(« Un composant est suspendu sur une promesse absente du cache. Nous ne prenons pas encore en charge les promesses créées dans un Composant Client ou dans un Hook, sauf au travers de bibliothèques ou frameworks compatibles avec Suspense. » — NdT)*
Pour corriger ça, vous devez passer une promesse issue d'une bibliothèque ou d'un framework prenant en charge la mise en cache de promesses à destination de Suspense. Nous prévoyons de livrer à l'avenir des fonctionnalités qui faciliteront la mise en cache de promesses au sein du rendu.
+=======
+To fix, you need to pass a promise from a Suspense powered library or framework that supports caching for promises. In the future we plan to ship features to make it easier to cache promises in render.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772:src/content/blog/2024/12/05/react-19.md
</Note>
@@ -313,7 +347,34 @@ function Heading({children}) {
La fonction `use` ne peut être appelée qu'au sein du rendu, comme pour les Hooks. Mais contrairement aux Hooks, `use` peut être appelée conditionnellement. Nous prévoyons d'ajouter à l'avenir des modes supplémentaires de consommation de ressources lors du rendu grâce à `use`.
+<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md
Pour en apprendre davantage, consultez la documentation de [`use`](/reference/react/use).
+=======
+## New React DOM Static APIs {/*new-react-dom-static-apis*/}
+
+We've added two new APIs to `react-dom/static` for static site generation:
+- [`prerender`](/reference/react-dom/static/prerender)
+- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)
+
+These new APIs improve on `renderToString` by waiting for data to load for static HTML generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. For example, in a Web Stream environment, you can prerender a React tree to static HTML with `prerender`:
+
+```js
+import { prerender } from 'react-dom/static';
+
+async function handler(request) {
+ const {prelude} = await prerender(<App />, {
+ bootstrapScripts: ['/main.js']
+ });
+ return new Response(prelude, {
+ headers: { 'content-type': 'text/html' },
+ });
+}
+```
+
+Prerender APIs will wait for all data to load before returning the static HTML stream. Streams can be converted to strings, or sent with a streaming response. They do not support streaming content as it loads, which is supported by the existing [React DOM server rendering APIs](/reference/react-dom/server).
+
+For more information, see [React DOM Static APIs](/reference/react-dom/static).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772:src/content/blog/2024/12/05/react-19.md
## React Server Components {/*react-server-components*/}
@@ -327,7 +388,11 @@ React 19 inclut toutes les fonctionnalités de Composants Serveur issues du cana
#### Comment prendre en charge les Composants Serveur ? {/*how-do-i-build-support-for-server-components*/}
+<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md
Même si les Composants Serveur dans React 19 sont stables et ne casseront pas la compatibilité entre les versions majeures, les API sous-jacentes utilisées pour implémenter les Composants Serveur au sein d'un *bundler* ou framework ne suivent pas, elles, le versionnage sémantique et sont susceptibles de casser la compatibilité entre les versions mineures de React 19.x.
+=======
+While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772:src/content/blog/2024/12/05/react-19.md
Pour prendre en charge les Composants Serveur dans un *bundler* ou framework, nous vous conseillons de figer React sur une version spécifique, ou d'utiliser une version Canari. Nous allons continuer à collaborer avec les *bundlers* et frameworks pour stabiliser les API utilisées pour implémenter les Composants Serveur à l'avenir.
@@ -765,8 +830,12 @@ Dans les précédentes versions, utiliser des éléments personnalisés dans Rea
- **Côté serveur** : les props passées à un élément personnalisé produisent des attributs si leur type est primitif (ex. `string`, `number`) ou si la valeur est `true`. Les props de type non primitif tels qu’`object`, `symbol`, `function` ainsi que la valeur `false` sont ignorés.
- **Côté client** : les props qui correspondent à une propriété de l'instance de l'élément personnalisé sont affectées à ces propriétés, à défaut de quoi elles produisent des attributs.
+<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md
Merci à [Joey Arhar](https://github.com/josepharhar) pour avoir piloté la conception et l'implémentation de la prise en charge des éléments personnalisés dans React.
## Comment mettre à jour {/*how-to-upgrade*/}
-Consultez le [guide de migration React 19](/blog/2024/04/25/react-19-upgrade-guide) pour des instructions pas à pas et la liste complète des ruptures de compatibilité ascendante et des changements notables.
\ No newline at end of file
+Consultez le [guide de migration React 19](/blog/2024/04/25/react-19-upgrade-guide) pour des instructions pas à pas et la liste complète des ruptures de compatibilité ascendante et des changements notables.
+=======
+_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772:src/content/blog/2024/12/05/react-19.md
diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
new file mode 100644
index 000000000..9ced6231c
--- /dev/null
+++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
@@ -0,0 +1,320 @@
+---
+title: "Sunsetting Create React App"
+author: Matt Carroll and Ricky Hanlon
+date: 2025/02/14
+description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch.
+---
+
+February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm)
+
+---
+
+<Intro>
+
+Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild.
+
+We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by [building a React app from scratch](/learn/build-a-react-app-from-scratch).
+
+</Intro>
+
+-----
+
+When we released Create React App in 2016, there was no clear way to build a new React app.
+
+To create a React app, you had to install a bunch of tools and wire them up together yourself to support basic features like JSX, linting, and hot reloading. This was very tricky to do correctly, so the [community](https://github.com/react-boilerplate/react-boilerplate) [created](https://github.com/kriasoft/react-starter-kit) [boilerplates](https://github.com/petehunt/react-boilerplate) for [common](https://github.com/gaearon/react-hot-boilerplate) [setups](https://github.com/erikras/react-redux-universal-hot-example). However, boilerplates were difficult to update and fragmentation made it difficult for React to release new features.
+
+Create React App solved these problems by combining several tools into a single recommended configuration. This allowed apps a simple way to upgrade to new tooling features, and allowed the React team to deploy non-trivial tooling changes (Fast Refresh support, React Hooks lint rules) to the broadest possible audience.
+
+This model became so popular that there's an entire category of tools working this way today.
+
+## Deprecating Create React App {/*deprecating-create-react-app*/}
+
+Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-build-tools) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks).
+
+However, since Create React App currently has no active maintainers, and there are many existing frameworks that solve these problems already, we’ve decided to deprecate Create React App.
+
+Starting today, if you install a new app, you will see a deprecation warning:
+
+<ConsoleBlockMulti>
+<ConsoleLogLine level="error">
+
+create-react-app is deprecated.
+{'\n\n'}
+You can find a list of up-to-date React frameworks on react.dev
+For more info see: react.dev/link/cra
+{'\n\n'}
+This error message will only be shown once per install.
+
+</ConsoleLogLine>
+</ConsoleBlockMulti>
+
+We've also added a deprecation notice to the Create React App [website](https://create-react-app.dev/) and GitHub [repo](https://github.com/facebook/create-react-app). Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19.
+
+## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/}
+We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) and single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and can be deployed to a CDN or static hosting service without a server.
+
+For existing apps, these guides will help you migrate to a client-only SPA:
+
+* [Next.js’ Create React App migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app)
+* [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes).
+* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
+
+## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/}
+
+If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how react works from scratch, you can roll your own custom setup with React using Vite, Parcel or Rsbuild.
+
+For existing apps, these guides will help you migrate to a build tool:
+
+* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/)
+* [Parcel Create React App migration guide](https://parceljs.org/migration/cra/)
+* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra)
+
+To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Building a React App from Scratch](/learn/build-a-react-app-from-scratch).
+
+<DeepDive>
+
+#### Do I need a framework? {/*do-i-need-a-framework*/}
+
+Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework.
+
+Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself.
+
+However, you can always [build a React app from scratch](/learn/build-a-react-app-from-scratch) using a build tool like Vite, Parcel, or Rsbuild.
+
+</DeepDive>
+
+Continue reading to learn more about the [limitations of build tools](#limitations-of-build-tools) and [why we recommend frameworks](#why-we-recommend-frameworks).
+
+## Limitations of Build Tools {/*limitations-of-build-tools*/}
+
+Create React App and build tools like it make it easy to get started building a React app. After running `npx create-react-app my-app`, you get a fully configured React app with a development server, linting, and a production build.
+
+For example, if you're building an internal admin tool, you can start with a landing page:
+
+```js
+export default function App() {
+ return (
+ <div>
+ <h1>Welcome to the Admin Tool!</h1>
+ </div>
+ )
+}
+```
+
+This allows you to immediately start coding in React with features like JSX, default linting rules, and a bundler to run in both development and production. However, this setup is missing the tools you need to build a real production app.
+
+Most production apps need solutions to problems like routing, data fetching, and code splitting.
+
+### Routing {/*routing*/}
+
+Create React App does not include a specific routing solution. If you're just getting started, one option is to use `useState` to switch between routes. But doing this means that you can't share links to your app - every link would go to the same page - and structuring your app becomes difficult over time:
+
+```js
+import {useState} from 'react';
+
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+export default function App() {
+ // ❌ Routing in state does not create URLs
+ const [route, setRoute] = useState('home');
+ return (
+ <div>
+ {route === 'home' && <Home />}
+ {route === 'dashboard' && <Dashboard />}
+ </div>
+ )
+}
+```
+
+This is why most apps that use Create React App solve add routing with a routing library like [React Router](https://reactrouter.com/) or [Tanstack Router](https://tanstack.com/router/latest). With a routing library, you can add additional routes to the app, which provides opinions on the structure of your app, and allows you to start sharing links to routes. For example, with React Router you can define routes:
+
+```js
+import {RouterProvider, createBrowserRouter} from 'react-router';
+
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+// ✅ Each route has it's own URL
+const router = createBrowserRouter([
+ {path: '/', element: <Home />},
+ {path: '/dashboard', element: <Dashboard />}
+]);
+
+export default function App() {
+ return (
+ <RouterProvider value={router} />
+ )
+}
+```
+
+With this change, you can share a link to `/dashboard` and the app will navigate to the dashboard page . Once you have a routing library, you can add additional features like nested routes, route guards, and route transitions, which are difficult to implement without a routing library.
+
+There's a tradeoff being made here: the routing library adds complexity to the app, but it also adds features that are difficult to implement without it.
+
+### Data Fetching {/*data-fetching*/}
+
+Another common problem in Create React App is data fetching. Create React App does not include a specific data fetching solution. If you're just getting started, a common option is to use `fetch` in an effect to load data.
+
+But doing this means that the data is fetched after the component renders, which can cause network waterfalls. Network waterfalls are caused by fetching data when your app renders instead of in parallel while the code is downloading:
+
+```js
+export default function Dashboard() {
+ const [data, setData] = useState(null);
+
+ // ❌ Fetching data in a component causes network waterfalls
+ useEffect(() => {
+ fetch('/api/data')
+ .then(response => response.json())
+ .then(data => setData(data));
+ }, []);
+
+ return (
+ <div>
+ {data.map(item => <div key={item.id}>{item.name}</div>)}
+ </div>
+ )
+}
+```
+
+Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [React Query](https://react-query.tanstack.com/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders.
+
+These libraries work best when integrated with your routing "loader" pattern to specify data dependencies at the route level, which allows the router to optimize your data fetches:
+
+```js
+export async function loader() {
+ const response = await fetch(`/api/data`);
+ const data = await response.json();
+ return data;
+}
+
+// ✅ Fetching data in parallel while the code is downloading
+export default function Dashboard({loaderData}) {
+ return (
+ <div>
+ {loaderData.map(item => <div key={item.id}>{item.name}</div>)}
+ </div>
+ )
+}
+```
+
+On initial load, the router can fetch the data immediately before the route is rendered. As the user navigates around the app, the router is able to fetch both the data and the route at the same time, parallelizing the fetches. This reduces the time it takes to see the content on the screen, and can improve the user experience.
+
+However, this requires correctly configuring the loaders in your app and trades off complexity for performance.
+
+### Code Splitting {/*code-splitting*/}
+
+Another common problem in Create React App is [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App does not include a specific code splitting solution. If you're just getting started, you might not consider code splitting at all.
+
+This means your app is shipped as a single bundle:
+
+```txt
+- bundle.js 75kb
+```
+
+But for ideal performance, you should "split" your code into separate bundles so the user only needs to download what they need. This decreases the time the user needs to wait to load your app, by only downloading the code they need to see the page they are on.
+
+```txt
+- core.js 25kb
+- home.js 25kb
+- dashboard.js 25kb
+```
+
+One way to do code-splitting is with `React.lazy`. However, this means that the code is not fetched until the component renders, which can cause network waterfalls. A more optimal solution is to use a router feature that fetches the code in parallel while the code is downloading. For example, React Router provides a `lazy` option to specify that a route should be code split and optimize when it is loaded:
+
+```js
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+// ✅ Routes are downloaded before rendering
+const router = createBrowserRouter([
+ {path: '/', lazy: () => import('./Home')},
+ {path: '/dashboard', lazy: () => import('Dashboard')}
+]);
+```
+
+Optimized code-splitting is tricky to get right, and it's easy to make mistakes that can cause the user to download more code than they need. It works best when integrated with your router and data loading solutions to maximize caching, parallelize fetches, and support ["import on interaction"](https://www.patterns.dev/vanilla/import-on-interaction) patterns.
+
+### And more... {/*and-more*/}
+
+These are just a few examples of the limitations of Create React App.
+
+Once you've integrated routing, data-fetching, and code splitting, you now also need to consider pending states, navigation interruptions, error messages to the user, and revalidation of the data. There are entire categories of problems that users need to solve like:
+
+<div style={{display: 'flex', width: '100%', justifyContent: 'space-around'}}>
+ <ul>
+ <li>Accessibility</li>
+ <li>Asset loading</li>
+ <li>Authentication</li>
+ <li>Caching</li>
+ </ul>
+ <ul>
+ <li>Error handling</li>
+ <li>Mutating data</li>
+ <li>Navigations</li>
+ <li>Optimistic updates</li>
+ </ul>
+ <ul>
+ <li>Progressive enhancement</li>
+ <li>Server-side rendering</li>
+ <li>Static site generation</li>
+ <li>Streaming</li>
+ </ul>
+</div>
+
+All of these work together to create the most optimal [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
+
+Solving each of these problems individually in Create React App can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas users may not be familiar with. In order to solve these problems, users end up building their own bespoke solutions on top of Create React App, which was the problem Create React App originally tried to solve.
+
+## Why we Recommend Frameworks {/*why-we-recommend-frameworks*/}
+
+Although you could solve all these pieces yourself in a build tool like Create React App, Vite, or Parcel, it is hard to do well. Just like when Create React App itself integrated several build tools together, you need a tool to integrate all of these features together to provide the best experience to users.
+
+This category of tools that integrates build tools, rendering, routing, data fetching, and code splitting are known as "frameworks" -- or if you prefer to call React itself a framework, you might call them "metaframeworks".
+
+Frameworks impose some opinions about structuring your app in order to provide a much better user experience, in the same way build tools impose some opinions to make tooling easier. This is why we started recommending frameworks like [Next.js](https://nextjs.org/), [React Router](https://reactrouter.com/), and [Expo](https://expo.dev/) for new projects.
+
+Frameworks provide the same getting started experience as Create React App, but also provide solutions to problems users need to solve anyway in real production apps.
+
+<DeepDive>
+
+#### Server rendering is optional {/*server-rendering-is-optional*/}
+
+The frameworks we recommend all provide the option to create a [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR) app.
+
+In some cases, CSR is the right choice for a page, but many times it's not. Even if most of your app is client-side, there are often individual pages that could benefit from server rendering features like [static-site generation (SSG)](https://developer.mozilla.org/en-US/docs/Glossary/SSG) or [server-side rendering (SSR)](https://developer.mozilla.org/en-US/docs/Glossary/SSR), for example a Terms of Service page, or documentation.
+
+Server rendering generally sends less JavaScript to the client, and a full HTML document which produces a faster [First Contentful Paint (FCP)](https://web.dev/articles/fcp) by reducing [Total Blocking Time (TBD)](https://web.dev/articles/tbt), which can also lower [Interaction to Next Paint (INP)](https://web.dev/articles/inp). This is why the [Chrome team has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance.
+
+There are tradeoffs to using a server, and it is not always the best option for every page. Generating pages on the server incurs additional cost and takes time to generate which can increase [Time to First Byte (TTFB)](https://web.dev/articles/ttfb). The best performing apps are able to pick the right rendering strategy on a per-page basis, based on the tradeoffs of each strategy.
+
+Frameworks provide the option to use a server on any page if you want to, but do not force you to use a server. This allows you to pick the right rendering strategy for each page in your app.
+
+#### What About Server Components {/*server-components*/}
+
+The frameworks we recommend also include support for React Server Components.
+
+Server Components help solve these problems by moving routing and data fetching to the server, and allowing code splitting to be done for client components based on the data you render, instead of just the route rendered, and reducing the amount of JavaScript shipped for the best possible [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
+
+Server Components do not require a server. They can be run at build time on your CI server to create a static-site generated app (SSG) app, at runtime on a web server for a server-side rendered (SSR) app.
+
+See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) and [the docs](/reference/rsc/server-components) for more info.
+
+</DeepDive>
+
+<Note>
+
+#### Server Rendering is not just for SEO {/*server-rendering-is-not-just-for-seo*/}
+
+A common misunderstanding is that server rendering is only for [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO).
+
+While server rendering can improve SEO, it also improves performance by reducing the amount of JavaScript the user needs to download and parse before they can see the content on the screen.
+
+This is why the Chrome team [has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance.
+
+</Note>
+
+---
+
+_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._
+
diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md
new file mode 100644
index 000000000..ecbbb8747
--- /dev/null
+++ b/src/content/blog/2025/04/21/react-compiler-rc.md
@@ -0,0 +1,128 @@
+---
+title: "React Compiler RC"
+author: Lauren Tan and Mofei Zhang
+date: 2025/04/21
+description: We are releasing the compiler's first Release Candidate (RC) today.
+
+---
+
+April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
+
+---
+
+<Intro>
+
+The React team is excited to share new updates:
+
+</Intro>
+
+1. We're publishing React Compiler RC today, in preparation of the compiler's stable release.
+2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`.
+3. We've added support for swc and are working with oxc to support Babel-free builds.
+
+---
+
+[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release.
+
+We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production.
+
+## Use React Compiler RC today {/*use-react-compiler-rc-today*/}
+To install the RC:
+
+npm
+<TerminalBlock>
+{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`}
+</TerminalBlock>
+
+pnpm
+<TerminalBlock>
+{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`}
+</TerminalBlock>
+
+yarn
+<TerminalBlock>
+{`yarn add --dev --exact babel-plugin-react-compiler@rc`}
+</TerminalBlock>
+
+As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs.
+
+We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release.
+
+You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler).
+
+## Feedback {/*feedback*/}
+During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions).
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+
+## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
+If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
+
+To install:
+
+npm
+<TerminalBlock>
+{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+</TerminalBlock>
+
+pnpm
+<TerminalBlock>
+{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+</TerminalBlock>
+
+yarn
+<TerminalBlock>
+{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+</TerminalBlock>
+
+```js
+// eslint.config.js
+import * as reactHooks from 'eslint-plugin-react-hooks';
+
+export default [
+ // Flat Config (eslint 9+)
+ reactHooks.configs.recommended,
+
+ // Legacy Config
+ reactHooks.configs['recommended-latest']
+];
+```
+
+To enable the React Compiler rule, add `'react-hooks/react-compiler': 'error'` to your ESLint configuration.
+
+The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today.
+
+## swc support (experimental) {/*swc-support-experimental*/}
+React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild.
+
+In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler).
+
+We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance.
+
+Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate.
+
+## Upgrading React Compiler {/*upgrading-react-compiler*/}
+React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise.
+
+However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing.
+
+In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues.
+
+If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.1.0`) rather than a SemVer range (eg `^19.1.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected.
+
+## Roadmap to Stable {/*roadmap-to-stable*/}
+*This is not a final roadmap, and is subject to change.*
+
+After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler.
+
+* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers.
+* ✅ Public Beta: Available today, for feedback from library authors.
+* ✅ Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
+* General Availability: After final feedback period from the community.
+
+Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
+
+---
+
+Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post.
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
new file mode 100644
index 000000000..e4bb25a4a
--- /dev/null
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -0,0 +1,14358 @@
+---
+title: "React Labs: View Transitions, Activity, and more"
+author: Ricky Hanlon
+date: 2025/04/23
+description: In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now.
+---
+
+April 23, 2025 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
+
+---
+
+<Intro>
+
+In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now.
+
+</Intro>
+
+
+<Note>
+
+React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
+
+We're looking for speakers to help us create talks about the features covered in this post. If you're interested in speaking at ReactConf, [please apply here](https://forms.reform.app/react-conf/call-for-speakers/) (no talk proposal required).
+
+For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
+
+</Note>
+
+Today, we're excited to release documentation for two new experimental features that are ready for testing:
+
+- [View Transitions](#view-transitions)
+- [Activity](#activity)
+
+We're also sharing updates on new features currently in development:
+- [React Performance Tracks](#react-performance-tracks)
+- [Compiler IDE Extension](#compiler-ide-extension)
+- [Automatic Effect Dependencies](#automatic-effect-dependencies)
+- [Fragment Refs](#fragment-refs)
+- [Concurrent Stores](#concurrent-stores)
+
+---
+
+# New Experimental Features {/*new-experimental-features*/}
+
+View Transitions and Activity are now ready for testing in `react@experimental`. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback.
+
+You can try them by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+
+Read on to learn how to use these features in your app, or check out the newly published docs:
+
+- [`<ViewTransition>`](/reference/react/ViewTransition): A component that lets you activate an animation for a Transition.
+- [`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition.
+- [`<Activity>`](/reference/react/Activity): A component that lets you hide and show parts of the UI.
+
+## View Transitions {/*view-transitions*/}
+
+React View Transitions are a new experimental feature that makes it easier to add animations to UI transitions in your app. Under-the-hood, these animations use the new [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) API available in most modern browsers.
+
+To opt-in to animating an element, wrap it in the new `<ViewTransition>` component:
+
+```js
+// "what" to animate.
+<ViewTransition>
+ <div>animate me</div>
+</ViewTransition>
+```
+
+This new component lets you declaratively define "what" to animate when an animation is activated.
+
+You can define "when" to animate by using one of these three triggers for a View Transition:
+
+```js
+// "when" to animate.
+
+// Transitions
+startTransition(() => setState(...));
+
+// Deferred Values
+const deferred = useDeferredValue(value);
+
+// Suspense
+<Suspense fallback={<Fallback />}>
+ <div>Loading...</div>
+</Suspense>
+```
+
+By default, these animations use the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (typically a smooth cross-fade). You can use [view transition pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to define "how" the animation runs. For example, you can use `*` to change the default animation for all transitions:
+
+```
+// "how" to animate.
+::view-transition-old(*) {
+ animation: 300ms ease-out fade-out;
+}
+::view-transition-new(*) {
+ animation: 300ms ease-in fade-in;
+}
+```
+
+When the DOM updates due to an animation trigger—like `startTransition`, `useDeferredValue`, or a `Suspense` fallback switching 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.
+
+If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
+
+In this post, let's take a look at a few examples of how to use View Transitions.
+
+We'll start with this app, which doesn't animate any of the following interactions:
+- Click a video to view the details.
+- Click "back" to go back to the feed.
+- Type in the list to filter the videos.
+
+<Sandpack>
+
+```js src/App.js active
+import TalkDetails from './Details'; import Home from './Home'; import {useRouter} from './router';
+
+export default function App() {
+ const {url} = useRouter();
+
+ // 🚩This version doesn't include any animations yet
+ return url === '/' ? <Home /> : <TalkDetails />;
+}
+```
+
+```js src/Details.js
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js
+import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {heading}
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js
+import { useState } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js
+import {
+ useState,
+ createContext,
+ use,
+ useTransition,
+ useLayoutEffect,
+ useEffect,
+} from "react";
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+export function Router({ children }) {
+ const [routerState, setRouterState] = useState({
+ pendingNav: () => {},
+ url: document.location.pathname,
+ });
+ const [isPending, startTransition] = useTransition();
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+ function navigate(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ function navigateBack(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+```
+
+```css src/styles.css
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+<Note>
+
+#### View Transitions do not replace CSS and JS driven animations {/*view-transitions-do-not-replace-css-and-js-driven-animations*/}
+
+View Transitions are meant to be used for UI transitions such as navigation, expanding, opening, or re-ordering. They are not meant to replace all the animations in your app.
+
+In our example app above, notice that there are already animations when you click the "like" button and in the Suspense fallback glimmer. These are good use cases for CSS animations because they are animating a specific element.
+
+</Note>
+
+### Animating navigations {/*animating-navigations*/}
+
+Our app includes a Suspense-enabled router, with [page transitions already marked as Transitions](/reference/react/useTransition#building-a-suspense-enabled-router), which means navigations are performed with `startTransition`:
+
+```js
+function navigate(url) {
+ startTransition(() => {
+ go(url);
+ });
+}
+```
+
+`startTransition` is a View Transition trigger, so we can add `<ViewTransition>` to animate between pages:
+
+```js
+// "what" to animate
+<ViewTransition key={url}>
+ {url === '/' ? <Home /> : <TalkDetails />}
+</ViewTransition>
+```
+
+When the `url` changes, the `<ViewTransition>` and new route are rendered. Since the `<ViewTransition>` was updated inside of `startTransition`, the `<ViewTransition>` is activated for an animation.
+
+
+By default, View Transitions include the browser default cross-fade animation. Adding this to our example, we now have a cross-fade whenever we navigate between pages:
+
+<Sandpack>
+
+```js src/App.js active
+import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';
+
+export default function App() {
+ const {url} = useRouter();
+
+ // Use ViewTransition to animate between pages.
+ // No additional CSS needed by default.
+ return (
+ <ViewTransition>
+ {url === '/' ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {heading}
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js
+import {useState, createContext,use,useTransition,useLayoutEffect,useEffect} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+
+ function navigate(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+
+
+
+ const [routerState, setRouterState] = useState({
+ pendingNav: () => {},
+ url: document.location.pathname,
+ });
+
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+
+ function navigateBack(url) {
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+Since our router already updates the route using `startTransition`, this one line change to add `<ViewTransition>` activates with the default cross-fade animation.
+
+If you're curious how this works, see the docs for [How does `<ViewTransition>` work?](/reference/react/ViewTransition#how-does-viewtransition-work)
+
+<Note>
+
+#### Opting out of `<ViewTransition>` animations {/*opting-out-of-viewtransition-animations*/}
+
+In this example, we're wrapping the root of the app in `<ViewTransition>` for simplicity, but this means that all transitions in the app will be animated, which can lead to unexpected animations.
+
+To fix, we're wrapping route children with `"none"` so each page can control its own animation:
+
+```js
+// Layout.js
+<ViewTransition default="none">
+ {children}
+</ViewTransition>
+```
+
+In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types.
+
+</Note>
+
+### Customizing animations {/*customizing-animations*/}
+
+By default, `<ViewTransition>` includes the default cross-fade from the browser.
+
+To customize animations, you can provide props to the `<ViewTransition>` component to specify which animations to use, based on [how the `<ViewTransition>` activates](/reference/react/ViewTransition#props).
+
+For example, we can slow down the `default` cross fade animation:
+
+```js
+<ViewTransition default="slow-fade">
+ <Home />
+</ViewTransition>
+```
+
+And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-classes):
+
+```css
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+Now, the cross fade is slower:
+
+<Sandpack>
+
+```js src/App.js active
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Define a default animation of .slow-fade.
+ // See animations.css for the animation definiton.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === '/' ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {heading}
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {
+ useState,
+ createContext,
+ use,
+ useTransition,
+ useLayoutEffect,
+ useEffect,
+} from "react";
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+export function Router({ children }) {
+ const [routerState, setRouterState] = useState({
+ pendingNav: () => {},
+ url: document.location.pathname,
+ });
+ const [isPending, startTransition] = useTransition();
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+ function navigate(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ function navigateBack(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Define .slow-fade using view transition classes */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+See [Styling View Transitions](/reference/react/ViewTransition#styling-view-transitions) for a full guide on styling `<ViewTransition>`.
+
+### Shared Element Transitions {/*shared-element-transitions*/}
+
+When two pages include the same element, often you want to animate it from one page to the next.
+
+To do this you can add a unique `name` to the `<ViewTransition>`:
+
+```js
+<ViewTransition name={`video-${video.id}`}>
+ <Thumbnail video={video} />
+</ViewTransition>
+```
+
+Now the video thumbnail animates between the two pages:
+
+<Sandpack>
+
+```js src/App.js
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Keeping our default slow-fade.
+ // This allows the content not in the shared
+ // element transition to cross-fade.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {heading}
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js active
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {
+ useState,
+ createContext,
+ use,
+ useTransition,
+ useLayoutEffect,
+ useEffect,
+} from "react";
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+export function Router({ children }) {
+ const [routerState, setRouterState] = useState({
+ pendingNav: () => {},
+ url: document.location.pathname,
+ });
+ const [isPending, startTransition] = useTransition();
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+ function navigate(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ function navigateBack(url) {
+ // Update router state in transition.
+ startTransition(() => {
+ go(url);
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+By default, React automatically generates a unique `name` for each element activated for a transition (see [How does `<ViewTransition>` work](/reference/react/ViewTransition#how-does-viewtransition-work)). When React sees a transition where a `<ViewTransition>` with a `name` is removed and a new `<ViewTransition>` with the same `name` is added, it will activate a shared element transition.
+
+For more info, see the docs for [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element).
+
+### Animating based on cause {/*animating-based-on-cause*/}
+
+Sometimes, you may want elements to animate differently based on how it was triggered. For this use case, we've added a new API called `addTransitionType` to specify the cause of a transition:
+
+```js {4,11}
+function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+}
+function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+}
+```
+
+With transition types, you can provide custom animations via props to `<ViewTransition>`. Let's add a shared element transition to the header for "6 Videos" and "Back":
+
+```js {4,5}
+<ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+</ViewTransition>
+```
+
+Here we pass a `share` prop to define how to animate based on the transition type. When the share transition activates from `nav-forward`, the view transition class `slide-forward` is applied. When it's from `nav-back`, the `slide-back` animation is activated. Let's define these animations in CSS:
+
+```css
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: ...
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: ...
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: ...
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: ...
+}
+```
+
+Now we can animate the header along with thumbnail based on navigation type:
+
+<Sandpack>
+
+```js src/App.js hidden
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Keeping our default slow-fade.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={video.id} />
+ </Suspense>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js active
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* New keyframes to support our animations above. */
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Previously defined animations. */
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+### Animating Suspense Boundaries {/*animating-suspense-boundaries*/}
+
+Suspense will also activate View Transitions.
+
+To animate the fallback to content, we can wrap `Suspense` with `<ViewTranstion>`:
+
+```js
+<ViewTransition>
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo />
+ </Suspense>
+</ViewTransition>
+```
+
+By adding this, the fallback will cross-fade into the content. Click a video and see the video info animate in:
+
+<Sandpack>
+
+```js src/App.js hidden
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Default slow-fade animation.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js active
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+
+function VideoDetails({ id }) {
+ // Cross-fade the fallback to content.
+ return (
+ <ViewTransition default="slow-fade">
+ <Suspense fallback={<VideoInfoFallback />}>
+ <VideoInfo id={id} />
+ </Suspense>
+ </ViewTransition>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <div>
+ <div className="fit fallback title"></div>
+ <div className="fit fallback description"></div>
+ </div>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <div>
+ <p className="fit info-title">{details.title}</p>
+ <p className="fit info-description">{details.description}</p>
+ </div>
+ );
+}
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Slide the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+/* Slide the content up */
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Define the new keyframes */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+/* Previously defined animations below */
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+We can also provide custom animations using an `exit` on the fallback, and `enter` on the content:
+
+```js {3,8}
+<Suspense
+ fallback={
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+>
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+</Suspense>
+```
+
+Here's how we'll define `slide-down` and `slide-up` with CSS:
+
+```css {1, 6}
+::view-transition-old(.slide-down) {
+ /* Slide the fallback down */
+ animation: ...;
+}
+
+::view-transition-new(.slide-up) {
+ /* Slide the content up */
+ animation: ...;
+}
+```
+
+Now, the Suspense content replaces the fallback with a sliding animation:
+
+<Sandpack>
+
+```js src/App.js hidden
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Default slow-fade animation.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js active
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+
+function VideoDetails({ id }) {
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js hidden
+import { Video } from "./Videos";
+import Layout from "./Layout";
+import { fetchVideos } from "./data";
+import { useId, useState, use } from "react";
+import { IconSearch } from "./Icons";
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState("");
+ const foundVideos = filterVideos(videos, searchText);
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <div className="video-list">
+ {foundVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {foundVideos.map((video) => (
+ <Video key={video.id} video={video} />
+ ))}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Slide the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+/* Slide the content up */
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Define the new keyframes */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+/* Previously defined animations below */
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+
+### Animating Lists {/*animating-lists*/}
+
+You can also use `<ViewTransition>` to animate lists of items as they re-order, like in a searchable list of items:
+
+```js {3,5}
+<div className="videos">
+ {filteredVideos.map((video) => (
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+</div>
+```
+
+To activate the ViewTransition, we can use `useDeferredValue`:
+
+```js {2}
+const [searchText, setSearchText] = useState('');
+const deferredSearchText = useDeferredValue(searchText);
+const filteredVideos = filterVideos(videos, deferredSearchText);
+```
+
+Now the items animate as you type in the search bar:
+
+<Sandpack>
+
+```js src/App.js hidden
+import { unstable_ViewTransition as ViewTransition } from "react";
+import Details from "./Details";
+import Home from "./Home";
+import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ // Default slow-fade animation.
+ return (
+ <ViewTransition default="slow-fade">
+ {url === "/" ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react";
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { ChevronLeft } from "./Icons";
+
+function VideoDetails({id}) {
+ // Animate from Suspense fallback to content
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js
+import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+
+function SearchList({searchText, videos}) {
+ // Activate with useDeferredValue ("when")
+ const deferredSearchText = useDeferredValue(searchText);
+ const filteredVideos = filterVideos(videos, deferredSearchText);
+ return (
+ <div className="video-list">
+ <div className="videos">
+ {filteredVideos.map((video) => (
+ // Animate each item in list ("what")
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+ </div>
+ {filteredVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ </div>
+ );
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState('');
+
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <SearchList videos={videos} searchText={searchText} />
+ </Layout>
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+
+/* Slide animation for Suspense */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+### Final result {/*final-result*/}
+
+By adding a few `<ViewTransition>` components and a few lines of CSS, we were able to add all the animations above into the final result.
+
+We're excited about View Transitions and think they will level up the apps you're able to build. They're ready to start trying today in the experimental channel of React releases.
+
+Let's remove the slow fade, and take a look at the final result:
+
+<Sandpack>
+
+```js src/App.js
+import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';
+
+export default function App() {
+ const {url} = useRouter();
+
+ // Animate with a cross fade between pages.
+ return (
+ <ViewTransition key={url}>
+ {url === '/' ? <Home /> : <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+
+function VideoDetails({id}) {
+ // Animate from Suspense fallback to content
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js
+import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+
+function SearchList({searchText, videos}) {
+ // Activate with useDeferredValue ("when")
+ const deferredSearchText = useDeferredValue(searchText);
+ const filteredVideos = filterVideos(videos, deferredSearchText);
+ return (
+ <div className="video-list">
+ <div className="videos">
+ {filteredVideos.map((video) => (
+ // Animate each item in list ("what")
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+ </div>
+ {filteredVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ </div>
+ );
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState('');
+
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <SearchList videos={videos} searchText={searchText} />
+ </Layout>
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* Slide animations for Suspense the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+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.
+
+_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!)._
+
+---
+
+## Activity {/*activity*/}
+
+In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS.
+
+We're now ready to share the API and how it works, so you can start testing it in experimental React versions.
+
+`<Activity>` is a new component to hide and show parts of the UI:
+
+```js [[1, 1, "'visible'"], [2, 1, "'hidden'"]]
+<Activity mode={isVisible ? 'visible' : 'hidden'}>
+ <Page />
+</Activity>
+```
+
+When an Activity is <CodeStep step={1}>visible</CodeStep> it's rendered as normal. When an Activity is <CodeStep step={2}>hidden</CodeStep> it is unmounted, but will save its state and continue to render at a lower priority than anything visible on screen.
+
+You can use `Activity` to save state for parts of the UI the user isn't using, or pre-render parts that a user is likely to use next.
+
+Let's look at some examples improving the View Transition examples above.
+
+<Note>
+
+**Effects don’t mount when an Activity is hidden.**
+
+When an `<Activity>` is `hidden`, Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later.
+
+In practice, this works as expected if you have followed the [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side effects.
+
+</Note>
+
+### Restoring state with Activity {/*restoring-state-with-activity*/}
+
+When a user navigates away from a page, it's common to stop rendering the old page:
+
+```js {6,7}
+function App() {
+ const { url } = useRouter();
+
+ return (
+ <>
+ {url === '/' && <Home />}
+ {url !== '/' && <Details />}
+ </>
+ );
+}
+```
+
+However, this means if the user goes back to the old page, all of the previous state is lost. For example, if the `<Home />` page has an `<input>` field, when the user leaves the page the `<input>` is unmounted, and all of the text they had typed is lost.
+
+Activity allows you to keep the state around as the user changes pages, so when they come back they can resume where they left off. This is done by wrapping part of the tree in `<Activity>` and toggling the `mode`:
+
+```js {6-8}
+function App() {
+ const { url } = useRouter();
+
+ return (
+ <>
+ <Activity mode={url === '/' ? 'visible' : 'hidden'}>
+ <Home />
+ </Activity>
+ {url !== '/' && <Details />}
+ </>
+ );
+}
+```
+
+With this change, we can improve on our View Transitions example above. Before, when you searched for a video, selected one, and returned, your search filter was lost. With Activity, your search filter is restored and you can pick up where you left off.
+
+Try searching for a video, selecting it, and clicking "back":
+
+<Sandpack>
+
+```js src/App.js
+import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
+
+export default function App() {
+ const { url } = useRouter();
+
+ return (
+ // View Transitions know about Activity
+ <ViewTransition>
+ {/* Render Home in Activity so we don't lose state */}
+ <Activity mode={url === '/' ? 'visible' : 'hidden'}>
+ <Home />
+ </Activity>
+ {url !== '/' && <Details />}
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js hidden
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react";
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { ChevronLeft } from "./Icons";
+
+function VideoDetails({id}) {
+ // Animate from Suspense fallback to content
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details() {
+ const { url, navigateBack } = useRouter();
+ const videoId = url.split("/").pop();
+ const video = use(fetchVideo(videoId));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js hidden
+import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+
+function SearchList({searchText, videos}) {
+ // Activate with useDeferredValue ("when")
+ const deferredSearchText = useDeferredValue(searchText);
+ const filteredVideos = filterVideos(videos, deferredSearchText);
+ return (
+ <div className="video-list">
+ {filteredVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {filteredVideos.map((video) => (
+ // Animate each item in list ("what")
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState('');
+
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <SearchList videos={videos} searchText={searchText} />
+ </Layout>
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+
+/* Slide animations for Suspense the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+### Pre-rendering with Activity {/*prerender-with-activity*/}
+
+Sometimes, you may want to prepare the next part of the UI a user is likely to use ahead of time, so it's ready by the time they are ready to use it. This is especially useful if the next route needs to suspend on data it needs to render, because you can help ensure the data is already fetched before the user navigates.
+
+For example, our app currently needs to suspend to load the data for each video when you select one. We can improve this by rendering all of the pages in a hidden `<Activity>` until the user navigates:
+
+```js {2,5,8}
+<ViewTransition>
+ <Activity mode={url === '/' ? 'visible' : 'hidden'}>
+ <Home />
+ </Activity>
+ <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}>
+ <Details id={id} />
+ </Activity>
+ <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}>
+ <Details id={id} />
+ </Activity>
+<ViewTransition>
+```
+
+With this update, if the content on the next page has time to pre-render, it will animate in without the Suspense fallback. Click a video, and notice that the video title and description on the Details page render immediately, without a fallback:
+
+<Sandpack>
+
+```js src/App.js
+import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'
+
+export default function App() {
+ const { url } = useRouter();
+ const videoId = url.split("/").pop();
+ const videos = use(fetchVideos());
+
+ return (
+ <ViewTransition>
+ {/* Render videos in Activity to pre-render them */}
+ {videos.map(({id}) => (
+ <Activity key={id} mode={videoId === id ? 'visible' : 'hidden'}>
+ <Details id={id}/>
+ </Activity>
+ ))}
+ <Activity mode={url === '/' ? 'visible' : 'hidden'}>
+ <Home />
+ </Activity>
+ </ViewTransition>
+ );
+}
+```
+
+```js src/Details.js
+import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+
+function VideoDetails({id}) {
+ // Animate from Suspense fallback to content.
+ // If this is pre-rendered then the fallback
+ // won't need to show.
+ return (
+ <Suspense
+ fallback={
+ // Animate the fallback down.
+ <ViewTransition exit="slide-down">
+ <VideoInfoFallback />
+ </ViewTransition>
+ }
+ >
+ {/* Animate the content up */}
+ <ViewTransition enter="slide-up">
+ <VideoInfo id={id} />
+ </ViewTransition>
+ </Suspense>
+ );
+}
+
+function VideoInfoFallback() {
+ return (
+ <>
+ <div className="fallback title"></div>
+ <div className="fallback description"></div>
+ </>
+ );
+}
+
+export default function Details({id}) {
+ const { url, navigateBack } = useRouter();
+ const video = use(fetchVideo(id));
+
+ return (
+ <Layout
+ heading={
+ <div
+ className="fit back"
+ onClick={() => {
+ navigateBack("/");
+ }}
+ >
+ <ChevronLeft /> Back
+ </div>
+ }
+ >
+ <div className="details">
+ <Thumbnail video={video} large>
+ <VideoControls />
+ </Thumbnail>
+ <VideoDetails id={video.id} />
+ </div>
+ </Layout>
+ );
+}
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+ <p className="info-title">{details.title}</p>
+ <p className="info-description">{details.description}</p>
+ </>
+ );
+}
+```
+
+```js src/Home.js hidden
+import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+
+function SearchList({searchText, videos}) {
+ // Activate with useDeferredValue ("when")
+ const deferredSearchText = useDeferredValue(searchText);
+ const filteredVideos = filterVideos(videos, deferredSearchText);
+ return (
+ <div className="video-list">
+ {filteredVideos.length === 0 && (
+ <div className="no-results">No results</div>
+ )}
+ <div className="videos">
+ {filteredVideos.map((video) => (
+ // Animate each item in list ("what")
+ <ViewTransition key={video.id}>
+ <Video video={video} />
+ </ViewTransition>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+export default function Home() {
+ const videos = use(fetchVideos());
+ const count = videos.length;
+ const [searchText, setSearchText] = useState('');
+
+ return (
+ <Layout heading={<div className="fit">{count} Videos</div>}>
+ <SearchInput value={searchText} onChange={setSearchText} />
+ <SearchList videos={videos} searchText={searchText} />
+ </Layout>
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+ <form className="search" onSubmit={(e) => e.preventDefault()}>
+ <label htmlFor={id} className="sr-only">
+ Search
+ </label>
+ <div className="search-input">
+ <div className="search-icon">
+ <IconSearch />
+ </div>
+ <input
+ type="text"
+ id={id}
+ placeholder="Search"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+ </div>
+ </form>
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+ <svg
+ className="chevron-left"
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
+ <path
+ fill="currentColor"
+ fillRule="nonzero"
+ d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z"
+ transform="translate(356.5 164.5)"
+ />
+ <polygon points="446 418 466 418 466 398 446 398" />
+ </g>
+ </svg>
+ );
+}
+
+export function PauseIcon() {
+ return (
+ <svg
+ className="control-icon"
+ style={{padding: '4px'}}
+ width="100"
+ height="100"
+ viewBox="0 0 512 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+
+export function PlayIcon() {
+ return (
+ <svg
+ className="control-icon"
+ width="100"
+ height="100"
+ viewBox="0 0 72 72"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z"
+ fill="currentColor"
+ />
+ </svg>
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+ <svg
+ className="absolute overflow-visible"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <circle
+ className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ cx="12"
+ cy="12"
+ r="11.5"
+ fill="transparent"
+ strokeWidth="0"
+ stroke="currentColor"
+ />
+ </svg>
+
+ <svg
+ className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`}
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ {liked ? (
+ <path
+ d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z"
+ fill="currentColor"
+ />
+ ) : (
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z"
+ fill="currentColor"
+ />
+ )}
+ </svg>
+ </>
+ );
+}
+
+export function IconSearch(props) {
+ return (
+ <svg width="1em" height="1em" viewBox="0 0 20 20">
+ <path
+ d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+ stroke="currentColor"
+ fill="none"
+ strokeWidth="2"
+ fillRule="evenodd"
+ strokeLinecap="round"
+ strokeLinejoin="round"></path>
+ </svg>
+ );
+}
+```
+
+```js src/Layout.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+ <div className="page">
+ <div className="top">
+ <div className="top-nav">
+ {/* Custom classes based on transition type. */}
+ <ViewTransition
+ name="nav"
+ share={{
+ 'nav-forward': 'slide-forward',
+ 'nav-back': 'slide-back',
+ }}>
+ {heading}
+ </ViewTransition>
+ {isPending && <span className="loader"></span>}
+ </div>
+ </div>
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+ <ViewTransition default="none">
+ <div className="bottom">
+ <div className="content">{children}</div>
+ </div>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+ <button
+ className={`like-button ${isLiked && 'liked'}`}
+ aria-label={isLiked ? 'Unsave' : 'Save'}
+ onClick={() => {
+ const nextIsLiked = !isLiked;
+ if (nextIsLiked) {
+ likedVideos.add(video.id);
+ } else {
+ likedVideos.delete(video.id);
+ }
+ setAnimate(true);
+ setIsLiked(nextIsLiked);
+ }}>
+ <Heart liked={isLiked} animate={animate} />
+ </button>
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+ <ViewTransition name={`video-${video.id}`}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ >
+ {children}
+ </div>
+ </ViewTransition>
+ );
+}
+
+export function VideoControls() {
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ return (
+ <span
+ className="controls"
+ onClick={() =>
+ startTransition(() => {
+ setIsPlaying((p) => !p);
+ })
+ }
+ >
+ {isPlaying ? <PauseIcon /> : <PlayIcon />}
+ </span>
+ );
+}
+
+export function Video({ video }) {
+ const { navigate } = useRouter();
+
+ return (
+ <div className="video">
+ <div
+ className="link"
+ onClick={(e) => {
+ e.preventDefault();
+ navigate(`/video/${video.id}`);
+ }}
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ <LikeButton video={video} />
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+ <RouterContext
+ value={{
+ url: routerState.url,
+ navigate,
+ navigateBack,
+ isPending,
+ params: {},
+ }}
+ >
+ {children}
+ </RouterContext>
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+
+/* Slide animations for Suspense the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+ <StrictMode>
+ <Router>
+ <App />
+ </Router>
+ </StrictMode>
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+### Server-Side Rendering with Activity {/*server-side-rendering-with-activity*/}
+
+When using Activity on a page that uses server-side rendering (SSR), there are additional optimizations.
+
+If part of the page is rendered with `mode="hidden"`, then it will not be included in the SSR response. Instead, React will schedule a client render for the content inside Activity while the rest of the page hydrates, prioritizing the visible content on screen.
+
+For parts of the UI rendered with `mode="visible"`, React will de-prioritize hydration of content within Activity, similar to how Suspense content is hydrated at a lower priority. If the user interacts with the page, we'll prioritize hydration within the boundary if needed.
+
+These are advanced use cases, but they show the additional benefits considered with Activity.
+
+### Future modes for Activity {/*future-modes-for-activity*/}
+
+In the future, we may add more modes to Activity.
+
+For example, a common use case is rendering a modal, where the previous "inactive" page is visible behind the "active" modal view. The "hidden" mode does not work for this use case because it's not visible and not included in SSR.
+
+Instead, we're considering a new mode that would keep the content visible—and included in SSR—but keep it unmounted and de-prioritize updates. This mode may also need to "pause" DOM updates, since it can be distracting to see backgrounded content updating while a modal is open.
+
+Another mode we're considering for Activity is the ability to automatically destroy state for hidden Activities if there is too much memory being used. Since the component is already unmounted, it may be preferable to destroy state for the least recently used hidden parts of the app rather than consume too many resources.
+
+These are areas we're still exploring, and we'll share more as we make progress. For more information on what Activity includes today, [check out the docs](/reference/react/Activity).
+
+---
+
+# Features in development {/*features-in-development*/}
+
+We're also developing features to help solve the common problems below.
+
+As we iterate on possible solutions, you may see some potential APIs we're testing being shared based on the PRs we are landing. Please keep in mind that as we try different ideas, we often change or remove different solutions after trying them out.
+
+When the solutions we're working on are shared too early, it can create churn and confusion in the community. To balance being transparent and limiting confusion, we're sharing the problems we're currently developing solutions for, without sharing a particular solution we have in mind.
+
+As these features progress, we'll announce them on the blog with docs included so you can try them out.
+
+## React Performance Tracks {/*react-performance-tracks*/}
+
+We're working on a new set of custom tracks to performance profilers using browser APIs that [allow adding custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to provide more information about the performance of your React app.
+
+This feature is still in progress, so we're not ready to publish docs to fully release it as an experimental feature yet. You can get a sneak preview when using an experimental version of React, which will automatically add the performance tracks to profiles:
+
+<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
+ <picture >
+ <source srcset="/images/blog/react-labs-april-2025/perf_tracks.png" />
+ <img className="w-full light-image" src="/images/blog/react-labs-april-2025/perf_tracks.webp" />
+ </picture>
+ <picture >
+ <source srcset="/images/blog/react-labs-april-2025/perf_tracks_dark.png" />
+ <img className="w-full dark-image" src="/images/blog/react-labs-april-2025/perf_tracks_dark.webp" />
+ </picture>
+</div>
+
+There are a few known issues we plan to address such as performance, and the scheduler track not always "connecting" work across Suspended trees, so it's not quite ready to try. We're also still collecting feedback from early adopters to improve the design and usability of the tracks.
+
+Once we solve those issues, we'll publish experimental docs and share that it's ready to try.
+
+---
+
+## Automatic Effect Dependencies {/*automatic-effect-dependencies*/}
+
+When we released hooks, we had three motivations:
+
+- **Sharing code between components**: hooks replaced patterns like render props and higher-order components to allow you to reuse stateful logic without changing your component hierarchy.
+- **Think in terms of function, not lifecycles**: hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.
+- **Support ahead-of-time compilation**: hooks were designed to support ahead-of-time compilation with less pitfalls causing unintentional de-optimizations caused by lifecycle methods, and limitations of classes.
+
+Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components.
+
+### Effects can be hard {/*effects-can-be-hard*/}
+
+Unfortunately, some hooks are still hard to think in terms of function instead of lifecycles. Effects specifically are still hard to understand and are the most common pain point we hear from developers. Last year, we spent a significant amount of time researching how Effects were used, and how those use cases could be simplified and easier to understand.
+
+We found that often, the confusion is from using an Effect when you don't need to. The [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide covers many cases for when Effects are not the right solution. However, even when an Effect is the right fit for a problem, Effects can still be harder to understand than class component lifecycles.
+
+We believe one of the reasons for confusion is that developers to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
+
+Let's look at an example [from the docs](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
+
+```js
+useEffect(() => {
+ // Your Effect connected to the room specified with roomId...
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ // ...until it disconnected
+ connection.disconnect();
+ };
+}, [roomId]);
+```
+
+Many users would read this code as "on mount, connect to the roomId. whenever `roomId` changes, disconnect to the old room and re-create the connection". However, this is thinking from the component's lifecycle perspective, which means you will need to think of every component lifecycle state to write the Effect correctly. This can be difficult, so it's understandable that Effects seem harder than class lifecycles when using the component perspective.
+
+### Effects without dependencies {/*effects-without-dependencies*/}
+
+Instead, it's better to think from the Effect's perspective. The Effect doesn't know about the component lifecycles. It only describes how to start synchronization and how to stop it. When users think of Effects in this way, their Effects tend to be easier to write, and more resilient to being started and stopped as many times as is needed.
+
+We spent some time researching why Effects are thought of from the component perspective, and we think one of the reasons is the dependency array. Since you have to write it, it's right there and in your face reminding you of what you're "reacting" to and baiting you into the mental model of 'do this when these values change'.
+
+When we released hooks, we knew we could make them easier to use with ahead-of-time compilation. With the React Compiler, you're now able to avoid writing `useCallback` and `useMemo` yourself in most cases. For Effects, the compiler can insert the dependencies for you:
+
+```js
+useEffect(() => {
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ connection.disconnect();
+ };
+}); // compiler inserted dependencies.
+```
+
+With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/experimental_useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
+
+Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
+
+---
+
+## Compiler IDE Extension {/*compiler-ide-extension*/}
+
+Earlier this week [we shared](/blog/2025/04/21/react-compiler-rc) the React Compiler release candidate, and we're working towards shipping the first SemVer stable version of the compiler in the coming months.
+
+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).
+
+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).
+
+The IDE extension is still an early exploration, but we'll share our progress in future updates.
+
+---
+
+## Fragment Refs {/*fragment-refs*/}
+
+Many DOM APIs like those for event management, positioning, and focus are difficult to compose when writing with React. This often leads developers to reach for Effects, managing multiple Refs, by using APIs like `findDOMNode` (removed in React 19).
+
+We are exploring adding refs to Fragments that would point to a group of DOM elements, rather than just a single element. Our hope is that this will simplify managing multiple children and make it easier to write composable React code when calling DOM APIs.
+
+Fragment refs are still being researched. We'll share more when we're closer to having the final API finished.
+
+---
+
+## Gesture Animations {/*gesture-animations*/}
+
+We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel.
+
+Gestures present new challenges for a few reasons:
+
+- **Gestures are continuous**: as you swipe the animation is tied to your finger placement time, rather than triggering and running to completion.
+- **Gestures don't complete**: when you release your finger gesture animations can run to completion, or revert to their original state (like when you only partially open a menu) depending on how far you go.
+- **Gestures invert old and new**: while you're animating, you want the page you are animating from to stay "alive" and interactive. This inverts the browser View Transition model where the "old" state is a snapshot and the "new" state is the live DOM.
+
+We believe we’ve found an approach that works well and may introduce a new API for triggering gesture transitions. For now, we're focused on shipping `<ViewTransition>`, and will revisit gestures afterward.
+
+---
+
+## Concurrent Stores {/*concurrent-stores*/}
+
+When we released React 18 with concurrent rendering, we also released `useSyncExternalStore` so external store libraries that did not use React state or context could [support concurrent rendering](https://github.com/reactwg/react-18/discussions/70) by forcing a synchronous render when the store is updated.
+
+Using `useSyncExternalStore` comes at a cost though, since it forces a bail out from concurrent features like transitions, and forces existing content to show Suspense fallbacks.
+
+Now that React 19 has shipped, we're revisiting this problem space to create a primitive to fully support concurrent external stores with the `use` API:
+
+```js
+const value = use(store);
+```
+
+Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers.
+
+This research is still early. We'll share more, and what the new APIs will look like, when we're further along.
+
+---
+
+_Thanks to [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu), and [Tim Yung](https://github.com/yungsters) for reviewing this post._
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index 165fac7ab..51c428bc3 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -4,13 +4,47 @@ title: Blog React
<Intro>
+<<<<<<< HEAD
Ce blog est la source officielle des mises à jour par l'équipe React. Toute annonce importante, y compris les notes de versions et les avertissements de dépréciation, sera faite ici en premier. Vous pouvez aussi suivre le compte [@reactjs](https://twitter.com/reactjs) sur Twitter, mais vous êtes sûr·e de ne rien rater d'important si vous ne lisez que ce blog.
+=======
+This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first.
+
+You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Intro>
<div className="sm:-mx-5 flex flex-col gap-5 mt-12">
+<<<<<<< HEAD
<BlogCard title="React Compiler : beta et feuille de route" date="21 octobre 2024" url="/blog/2024/10/21/react-compiler-beta-release">
+=======
+<BlogCard title="React Labs: View Transitions, Activity, and more" date="April 23, 2025" url="/blog/2025/04/23/react-labs-view-transitions-activity-and-more">
+
+In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ...
+
+</BlogCard>
+
+<BlogCard title="React Compiler RC" date="April 21, 2025" url="/blog/2025/04/21/react-compiler-rc">
+
+We are releasing the compiler's first Release Candidate (RC) today.
+
+</BlogCard>
+
+<BlogCard title="Sunsetting Create React App" date="February 14, 2025" url="/blog/2025/02/14/sunsetting-create-react-app">
+
+Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ...
+
+</BlogCard>
+
+<BlogCard title="React v19 " date="December 5, 2024" url="/blog/2024/12/05/react-19">
+
+In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
+
+</BlogCard>
+
+<BlogCard title="React Compiler Beta Release" date="October 21, 2024" url="/blog/2024/10/21/react-compiler-beta-release">
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Nous avions annoncé la sortie expérimentale de React Compiler lors de la React Conf 2024. Nous avons beaucoup avancé depuis, et dans cet article nous aimerions partager avec vous la suite de nos travaux sur ce compilateur…
@@ -27,6 +61,7 @@ Dans le guide de migration vers React 19 RC, nous vous donnions des instructions
</BlogCard>
+<<<<<<< HEAD
<BlogCard title="React 19 RC : guide de migration" date="25 avril 2024" url="/blog/2024/04/25/react-19-upgrade-guide">
Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19…
@@ -34,6 +69,9 @@ Les améliorations apportées par React 19 RC nécessitent quelques ruptures de
</BlogCard>
<BlogCard title="React Labs : ce sur quoi nous bossons – février 2024" date="15 février 2024" url="/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024">
+=======
+<BlogCard title="React 19 Upgrade Guide" date="April 25, 2024" url="/blog/2024/04/25/react-19-upgrade-guide">
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Dans les billets React Labs, nous vous parlons de nos projets de recherche et développement actifs. Depuis notre dernier bulletin, nous avons fait des progrès significatifs sur le React Compiler et React 19, et nous aimerions partager ce que nous avons appris.
diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md
index 2e6dca4fb..207679e3f 100644
--- a/src/content/community/acknowledgements.md
+++ b/src/content/community/acknowledgements.md
@@ -36,6 +36,8 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
* [Joe Critchley](https://github.com/joecritch)
* [Jeff Morrison](https://github.com/jeffmo)
* [Luna Ruan](https://github.com/lunaruan)
+* [Luna Wei](https://github.com/lunaleaps)
+* [Noah Lemen](https://github.com/noahlemen)
* [Kathryn Middleton](https://github.com/kmiddleton14)
* [Keyan Zhang](https://github.com/keyz)
* [Marco Salazar](https://github.com/salazarm)
@@ -51,9 +53,10 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
* [Samuel Susla](https://github.com/sammy-SC)
* [Sander Spies](https://github.com/sanderspies)
* [Sasha Aickin](https://github.com/aickin)
-* [Sean Keegan](https://github.com/seanryankeegan)
+* [Sathya Gunasekaran](https://github.com/gsathya)
* [Sophia Shoemaker](https://github.com/mrscobbler)
* [Sunil Pai](https://github.com/threepointone)
+* [Tianyu Yao](https://github.com/)
* [Tim Yung](https://github.com/yungsters)
* [Xuan Huang](https://github.com/huxpro)
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 27c1b7018..0c7b38253 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,14 +10,45 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse
## Conférences à venir {/*upcoming-conferences*/}
-### React Universe Conf 2024 {/*react-universe-conf-2024*/}
-September 5-6, 2024. Wrocław, Poland.
+### CityJS London 2025 {/*cityjs-london*/}
+April 23 - 25, 2025. In-person in London, UK
+
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### App.js Conf 2025 {/*appjs-conf-2025*/}
+May 28 - 30, 2025. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### CityJS Athens 2025 {/*cityjs-athens*/}
+May 27 - 31, 2025. In-person in Athens, Greece
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Norway 2025 {/*react-norway-2025*/}
+June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### React Summit 2025 {/*react-summit-2025*/}
+June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
+
+### React Nexus 2025 {/*react-nexus-2025*/}
+July 03 - 05, 2025. In-person in Bangalore, India
+
+[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
+### React Universe Conf 2025 {/*react-universe-conf-2025*/}
+September 2-4, 2025. Wrocław, Poland.
[Site web](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
-### React Alicante 2024 {/*react-alicante-2024*/}
-September 19-21, 2024. Alicante, Spain.
+### React Conf 2025 {/*react-conf-2025*/}
+October 7-8, 2025. Henderson, Nevada, USA and free livestream
+<<<<<<< HEAD
[Site web](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
@@ -27,12 +58,19 @@ October 04 - 05, 2024. Nairobi, Kenya
### React India 2024 {/*react-india-2024*/}
October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+=======
+[Website](https://conf.react.dev/) - [Twitter](https://x.com/reactjs) - [Bluesky](https://bsky.app/profile/react.dev)
+
+### React India 2025 {/*react-india-2025*/}
+October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - remote day
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
[Site web](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
-### React Brussels 2024 {/*react-brussels-2024*/}
-October 18, 2024. In-person in Brussels, Belgium (hybrid event)
+### React Summit US 2025 {/*react-summit-us-2025*/}
+November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)
+<<<<<<< HEAD
[Site web](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
### reactjsday 2024 {/*reactjsday-2024*/}
@@ -42,30 +80,99 @@ October 25, 2024. In-person in Verona, Italy + online (hybrid event)
### React Advanced London 2024 {/*react-advanced-london-2024*/}
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+=======
+[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit)
+
+### React Advanced London 2025 {/*react-advanced-london-2025*/}
+November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
[Site web](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
-### React Native London Conf 2024 {/*react-native-london-2024*/}
-November 14 & 15, 2024. In-person in London, UK
+<<<<<<< HEAD
[Site web](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+=======
+## Past Conferences {/*past-conferences*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-### React Summit US 2024 {/*react-summit-us-2024*/}
-November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+### React Paris 2025 {/*react-paris-2025*/}
+March 20 - 21, 2025. In-person in Paris, France (hybrid event)
+<<<<<<< HEAD
[Site web](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+=======
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-### React Africa 2024 {/*react-africa-2024*/}
-November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
+### React Native Connection 2025 {/*react-native-connection-2025*/}
+April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.
+<<<<<<< HEAD
[Site web](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
+=======
+[Website](https://reactnativeconnection.io/) - [X](https://x.com/reactnativeconn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### React Day Berlin 2024 {/*react-day-berlin-2024*/}
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
[Site web](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
+<<<<<<< HEAD
## Conférences passées {/*past-conferences*/}
+=======
+### React Africa 2024 {/*react-africa-2024*/}
+November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
+
+[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
+
+### React Summit US 2024 {/*react-summit-us-2024*/}
+November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+
+### React Native London Conf 2024 {/*react-native-london-2024*/}
+November 14 & 15, 2024. In-person in London, UK
+
+[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+
+### React Advanced London 2024 {/*react-advanced-london-2024*/}
+October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+
+### reactjsday 2024 {/*reactjsday-2024*/}
+October 25, 2024. In-person in Verona, Italy + online (hybrid event)
+
+[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
+### React Brussels 2024 {/*react-brussels-2024*/}
+October 18, 2024. In-person in Brussels, Belgium (hybrid event)
+
+[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWimQ0U75woee2zNUIFsiDC3)
+
+### React India 2024 {/*react-india-2024*/}
+October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+
+[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+
+### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
+October 04 - 05, 2024. Nairobi, Kenya
+
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
+
+### React Alicante 2024 {/*react-alicante-2024*/}
+September 19-21, 2024. Alicante, Spain.
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
+
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA
diff --git a/src/content/community/docs-contributors.md b/src/content/community/docs-contributors.md
index b04ac17ee..111b1d46a 100644
--- a/src/content/community/docs-contributors.md
+++ b/src/content/community/docs-contributors.md
@@ -10,6 +10,7 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
## Contenu {/*content*/}
+<<<<<<< HEAD
* [Rachel Nabors](https://twitter.com/RachelNabors) : révisions, rédaction, illustrations
* [Dan Abramov](https://twitter.com/dan_abramov) : rédaction, conception du curriculum
* [Sylwia Vargas](https://twitter.com/SylwiaVargas) : codes d'exemple
@@ -21,6 +22,19 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
* [Matt Carroll](https://twitter.com/mattcarrollcode) : révisions, rédaction
* [Natalia Tepluhina](https://twitter.com/n_tepluhina) : révisions, avis
* [Sebastian Markbåge](https://twitter.com/sebmarkbage) : retours
+=======
+* [Rachel Nabors](https://twitter.com/RachelNabors): editing, writing, illustrating
+* [Dan Abramov](https://bsky.app/profile/danabra.mov): writing, curriculum design
+* [Sylwia Vargas](https://twitter.com/SylwiaVargas): example code
+* [Rick Hanlon](https://twitter.com/rickhanlonii): writing
+* [David McCabe](https://twitter.com/mcc_abe): writing
+* [Sophie Alpert](https://twitter.com/sophiebits): writing
+* [Pete Hunt](https://twitter.com/floydophone): writing
+* [Andrew Clark](https://twitter.com/acdlite): writing
+* [Matt Carroll](https://twitter.com/mattcarrollcode): editing, writing
+* [Natalia Tepluhina](https://twitter.com/n_tepluhina): reviews, advice
+* [Sebastian Markbåge](https://twitter.com/sebmarkbage): feedback
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
## Design {/*design*/}
@@ -31,6 +45,7 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
## Développement {/*development*/}
+<<<<<<< HEAD
* [Jared Palmer](https://twitter.com/jaredpalmer) : développement du site
* [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando) et [Dustin Goodman](https://twitter.com/dustinsgoodman)) : développement du site
* [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor) et [Danilo Woznica](https://twitter.com/danilowoz)) : intégration des bacs à sable
@@ -38,5 +53,14 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
* [Rick Hanlon](https://twitter.com/rickhanlonii) : développement du site
* [Harish Kumar](https://www.strek.in/) : development et maintenance
* [Luna Ruan](https://twitter.com/lunaruan) : améliorations des bacs à sable
+=======
+* [Jared Palmer](https://twitter.com/jaredpalmer): site development
+* [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando), [Dustin Goodman](https://twitter.com/dustinsgoodman)): site development
+* [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor), [Danilo Woznica](https://twitter.com/danilowoz)): sandbox integration
+* [Dan Abramov](https://bsky.app/profile/danabra.mov): site development
+* [Rick Hanlon](https://twitter.com/rickhanlonii): site development
+* [Harish Kumar](https://www.strek.in/): development and maintenance
+* [Luna Ruan](https://twitter.com/lunaruan): sandbox improvements
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Nous aimerions aussi remercier les innombrables testeurs de la première heure et membres de la communautés qui nous ont fourni des retours tout au long de notre travail.
diff --git a/src/content/community/index.md b/src/content/community/index.md
index 68208a7ec..8ca3b6104 100644
--- a/src/content/community/index.md
+++ b/src/content/community/index.md
@@ -29,4 +29,8 @@ Chaque communauté est composée de plusieurs milliers d'utilisateurs de React.
## Actualités {/*news*/}
+<<<<<<< HEAD
Pour les dernières nouvelles sur React, [suivez **@reactjs** sur Twitter](https://twitter.com/reactjs) et le [blog officiel de React](/blog/) sur ce site.
+=======
+For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index bed42f779..536d7d7ee 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -53,7 +53,7 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un
## Canada {/*canada*/}
* [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
-* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
+* [Montreal, QC](https://guild.host/react-montreal/)
* [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
* [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
@@ -62,17 +62,130 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un
## Colombie {/*colombia*/}
* [Medellin](https://www.meetup.com/React-Medellin/)
+<<<<<<< HEAD
## Danemark {/*denmark*/}
* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
## Écosse (R.-U.) {/*scotland-uk*/}
+=======
+## Czechia {/*czechia*/}
+* [Prague](https://guild.host/react-prague/)
+
+## Denmark {/*denmark*/}
+* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
+* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
+
+## England (UK) {/*england-uk*/}
+* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
+* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
+* [React Advanced London](https://guild.host/react-advanced-london)
+* [React Native London](https://guild.host/RNLDN)
+
+## Finland {/*finland*/}
+* [Helsinki](https://www.meetabit.com/communities/react-helsinki)
+
+## France {/*france*/}
+* [Lille](https://www.meetup.com/ReactBeerLille/)
+* [Paris](https://www.meetup.com/ReactJS-Paris/)
+
+## Germany {/*germany*/}
+* [Cologne](https://www.meetup.com/React-Cologne/)
+* [Düsseldorf](https://www.meetup.com/de-DE/ReactJS-Meetup-Dusseldorf/)
+* [Hamburg](https://www.meetup.com/Hamburg-React-js-Meetup/)
+* [Karlsruhe](https://www.meetup.com/react_ka/)
+* [Kiel](https://www.meetup.com/Kiel-React-Native-Meetup/)
+* [Munich](https://www.meetup.com/ReactJS-Meetup-Munich/)
+* [React Berlin](https://guild.host/react-berlin)
+
+## Greece {/*greece*/}
+* [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/)
+* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
+
+## India {/*india*/}
+* [Ahmedabad](https://reactahmedabad.dev/)
+* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
+* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
+* [Chennai](https://www.linkedin.com/company/chennaireact)
+* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
+* [Mumbai](https://reactmumbai.dev)
+* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
+
+## Indonesia {/*indonesia*/}
+* [Indonesia](https://www.meetup.com/reactindonesia/)
+
+## Ireland {/*ireland*/}
+* [Dublin](https://guild.host/reactjs-dublin)
+
+## Israel {/*israel*/}
+* [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
+
+## Italy {/*italy*/}
+* [Milan](https://www.meetup.com/React-JS-Milano/)
+
+## Japan {/*japan*/}
+* [Osaka](https://react-osaka.connpass.com/)
+
+## Kenya {/*kenya*/}
+* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)
+
+## Malaysia {/*malaysia*/}
+* [Kuala Lumpur](https://www.kl-react.com/)
+* [Penang](https://www.facebook.com/groups/reactpenang/)
+
+## Netherlands {/*netherlands*/}
+* [Amsterdam](https://guild.host/react-amsterdam)
+
+## New Zealand {/*new-zealand*/}
+* [Wellington](https://www.meetup.com/React-Wellington/)
+
+## Norway {/*norway*/}
+* [Norway](https://reactjs-norway.webflow.io/)
+* [Oslo](https://www.meetup.com/ReactJS-Oslo-Meetup/)
+
+## Pakistan {/*pakistan*/}
+* [Karachi](https://www.facebook.com/groups/902678696597634/)
+* [Lahore](https://www.facebook.com/groups/ReactjsLahore/)
+
+## Philippines {/*philippines*/}
+* [Manila](https://www.meetup.com/reactjs-developers-manila/)
+* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
+
+## Poland {/*poland*/}
+* [Warsaw](https://www.meetup.com/React-js-Warsaw/)
+* [Wrocław](https://www.meetup.com/ReactJS-Wroclaw/)
+
+## Portugal {/*portugal*/}
+* [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
+
+## Scotland (UK) {/*scotland-uk*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* [Edinburgh](https://www.meetup.com/React-Scotland/)
## Espagne {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
+<<<<<<< HEAD
## États-Unis {/*us*/}
+=======
+## Sri Lanka {/*sri-lanka*/}
+* [Colombo](https://www.javascriptcolombo.com/)
+
+## Sweden {/*sweden*/}
+* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
+* [Stockholm](https://www.meetup.com/Stockholm-ReactJS-Meetup/)
+
+## Switzerland {/*switzerland*/}
+* [Zurich](https://www.meetup.com/Zurich-ReactJS-Meetup/)
+
+## Turkey {/*turkey*/}
+* [Istanbul](https://kommunity.com/reactjs-istanbul)
+
+## Ukraine {/*ukraine*/}
+* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)
+
+## US {/*us*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/)
* [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
* [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/)
@@ -83,6 +196,7 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un
* [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
* [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
+* [Denver, CO - React Denver](https://reactdenver.com/)
* [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
* [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
diff --git a/src/content/community/team.md b/src/content/community/team.md
index 225d089ac..e72dd6b13 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -22,12 +22,25 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Dan a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint. Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie.
</TeamMember>
+<<<<<<< HEAD
<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" threads="elicwhite" title="Manager d’ingénieurs chez Meta">
Eli a commencé la programmation après avoir été suspendu au collège pour piratage. Il travaille sur React et React Native depuis 2017. Il aime manger des sucreries, en particulier les crèmes glacées et la tarte aux pommes. Vous le trouverez généralement en train d'essayer des trucs un peu fous comme le parkour, les simulateurs de chute libre ou la danse aérienne sur rubans de soie.
</TeamMember>
<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Ingénieur chez Meta">
Peut après avoir découvert AutoHotkey, Jack écrivait des scripts pour automatiser tout ce à quoi il pouvait penser. Lorsqu'il a atteint les limites de l'exercice, il s'est plongé dans le développement web et n'a jamais regardé en arrière. Dernièrement, Jack a travaillé sur la plateforme web d'Instagram, avant de migrer vers React. Son langage de programmation préféré est JSX.
+=======
+<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="elicwhite" twitter="Eli_White" threads="elicwhite" title="Engineering Manager at Meta">
+ Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks.
+</TeamMember>
+
+<TeamMember name="Hendrik Liebau" permalink="hendrik-liebau" photo="/images/team/hendrik.jpg" github="unstubbable" bsky="unstubbable.bsky.social" twitter="unstubbable" title="Engineer at Vercel">
+ Hendrik’s journey in tech started in the late 90s when he built his first websites with Netscape Communicator. After earning a diploma in computer science and working at digital agencies, he built a React Server Components bundler and library, paving the way to his role on the Next.js team. Outside of work, he enjoys cycling and tinkering in his workshop.
+</TeamMember>
+
+<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta">
+ Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TeamMember>
<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Manager d’ingénieurs chez Meta">
@@ -38,6 +51,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Joe pensait axer ses études sur les maths et la philosophie, mais s'est retrouvé en informatique après avoir écrit des simulations de physique dans Matlab. Avant React, il travaillait sur Relay, RSocket.js et le langage de programmation Skip. Lorsqu'il n'est pas en train de pondre un système réactif il aime courir, apprendre le japonais, et passer du temps en famille.
</TeamMember>
+<<<<<<< HEAD
<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Ingénieur chez Vercel">
Josh a étudié les Mathématiques et découvert la programmation pendant ses études. Son premier boulot de développeur professionnel consistait à calculer des taux d'assurance dans Microsoft Excel, ce parangon de Programmation Réactive, ce qui explique probablement pourquoi il bosse désormais sur React. Entre les deux Josh a été contributeur, manager voire directeur dans quelques startups. Hors du boulot, il aime se lancer des défis de cuisine.
</TeamMember>
@@ -48,18 +62,43 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
<TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" threads="lunaleaps" title="Ingénieure chez Meta">
Luna a appris les bases de Python à 6 ans grâce à son père. Depuis plus rien ne l'arrête. Luna a bien l'intention d'être une Génération Z, et le chemin du succès passe par la défense de l'environnement, du jardinage urbain et beaucoup de temps précieux passé avec Voo-Doo (voir photo).
+=======
+<TeamMember name="Jordan Brown" permalink="jordan-brown" photo="/images/team/jordan.jpg" github="jbrown215" title="Engineer at Meta">
+ Jordan started coding by building iPhone apps, where he was pushing and popping view controllers before he knew that for-loops were a thing. He enjoys working on technology that developers love, which naturally drew him to React. Outside of work he enjoys reading, kiteboarding, and playing guitar.
+</TeamMember>
+
+<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Engineer at Vercel">
+ Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking.
+</TeamMember>
+
+<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Meta">
+ Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TeamMember>
<TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" threads="mattcarrollcode" title="Developer Advocate chez Meta">
Matt est tombé par hasard dans le code, et depuis il adore créer grâce à des communautés des trucs qu'on ne peut pas créer tout seuls. Avant React, il a travaillé sur YouTube, l'Assistant Google, Fuchsia, Google Cloud AI et Evernote. Lorsqu'il n'est pas en train d'améliorer l'outillage des développeurs il aime la montagne, le jazz, et passer du temps en famille.
</TeamMember>
+<<<<<<< HEAD
<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Ingénieure chez Meta">
Mofei a commencé à programmer dès qu'elle a réalisé que ça pouvait l'aider à tricher aux jeux vidéos. Ses études se sont concentrées sur les systèmes d'exploitation (OS), mais elle aime aujourd'hui triturer React. Hors du boulot, elle aime déboguer des problèmes d'escalade de bloc et planifier ses prochaines randonnées.
</TeamMember>
<TeamMember name="Noah Lemen" permalink="noah-lemen" photo="/images/team/noahlemen.jpg" github="noahlemen" twitter="noahlemen" threads="noahlemen" personal="noahle.men" title="Ingénieur chez Meta">
Noah a commencé à s'intéresser à la programmation d'UI lors de ses études en technologies musicales à NYU. Chez Meta, il a travaillé sur des outils internes, des navigateurs, la performance web, et se concentre actuellement sur React. Quand il n'est pas au boulot, Noah est généralement en train de triturer des synthétiseurs ou de passer du temps avec son chat.
+=======
+<TeamMember name="Mike Vitousek" permalink="mike-vitousek" photo="/images/team/mike.jpg" github="mvitousek" title="Engineer at Meta">
+ Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on Javascript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest.
+</TeamMember>
+
+<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Engineer at Meta">
+ Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
+</TeamMember>
+
+<TeamMember name="Pieter Vanderwerff" permalink="pieter-vanderwerff" photo="/images/team/pieter.jpg" github="pieterv" threads="pietervanderwerff" title="Engineer at Meta">
+ Pieter studied building science but after failing to get a job he made himself a website and things escalated from there. At Meta, he enjoys working on performance, languages and now React. When he's not programming you can find him off-road in the mountains.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TeamMember>
<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" bsky="ricky.fm" title="Ingénieur chez Meta">
@@ -70,12 +109,17 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Ruslan a commencé enfant à programmer des UI en modifiant des gabarits HTML pour ses forums personnalisés de jeux. Sans trop savoir comment, il a fini par spécialiser ses études en informatique. Il aime la musique, les jeux, et les mèmes. Surtout les mèmes.
</TeamMember>
+<<<<<<< HEAD
<TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" threads="gsathya.03" title="Ingénieur chez Meta">
Sathya a détesté le *Dragon Book* durant ses études, et pourtant a fini par consacrer sa carrière aux compilateurs. Lorsqu'il n'est pas en train de compiler des composants React, soit il boit du café soit il mange encore un Dosa.
</TeamMember>
<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Ingénieur chez Vercel">
Sébastien a étudié la psychologie. Il est généralement silencieux. Même lorsqu'il dit quelque chose, ça ne finit par avoir du sens pour le reste d'entre nous que quelques mois plus tard. La véritable pronconciation de son nom de famille est « marc-bau-jai », mais il a fini par tolérer « marc-beige » par pur pragmatisme — une approche qu'il applique aussi à React.
+=======
+<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Engineer at Vercel">
+ Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TeamMember>
<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Ingénieur chez Vercel">
@@ -90,12 +134,17 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Quatre jours après la sortie de React, Sophie réécrivait l'intégralité de son projet d'alors pour s'en servir, ce qui avec le recul lui semble un brin téméraire. Après être devenue la principale contributrice au projet, elle s'est demandée pourquoi elle n'était pas payée par Facebook comme tous les autres et a officiellement rejoint l'équipe pour guider React à travers sa phase adolescente. Même si elle a quitté le poste il y a plusieurs années, on la trouve encore dans les forums de discussion de l'équipe où elle « ajoute de la valeur ».
</TeamMember>
+<<<<<<< HEAD
<TeamMember name="Tianyu Yao" permalink="tianyu-yao" photo="/images/team/tianyu.jpg" github="tyao1" twitter="tianyu0" threads="sophiebits" title="Ingénieur chez Meta">
Tianyu s'est intéressé aux ordinateurs dès l'enfance par amour des jeux vidéos. Il a donc étudié l'informatique et joue encore à des jeux pour enfants comme *League of Legends*. Lorsqu'il n'est pas devant son ordinateur, il aime jouer avec ses deux chatons, randonner et faire du kayak.
</TeamMember>
<TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" threads="yuzhiz" title="Manager d’ingénieurs chez Meta">
Yuzhi a étudié l'informatique à l'école. Elle aimait cette gratification instantanée ressentie en voyant son code prendre vie sans avoir à être physiquement dans un laboratoire. Elle gère aujourd'hui l'organisation React. Avant cela, elle travaillait sur le framework de chargement de données Relay. Dans son temps libre, Yuzhi aime optimiser sa vie au travers du jardinage et de projets d'amélioration de sa maison.
+=======
+<TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" threads="yuzhiz" title="Engineering Manager at Meta">
+ Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TeamMember>
## Contributeurs historiques {/*past-contributors*/}
diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md
index a13f39e22..9037a9a53 100644
--- a/src/content/community/versioning-policy.md
+++ b/src/content/community/versioning-policy.md
@@ -8,7 +8,11 @@ Toutes les versions stables de React sont soumises à un niveau élevé de tests
</Intro>
+<<<<<<< HEAD
Pour une liste des versions antérieures, consultez la page [Versions](/versions).
+=======
+This versioning policy describes our approach to version numbers for packages such as `react` and `react-dom`. For a list of previous releases, see the [Versions](/versions) page.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
## Versions stables {/*stable-releases*/}
@@ -24,7 +28,13 @@ Les livraisons majeures peuvent également intégrer de nouvelles fonctionnalit
Les livraisons mineures sont les plus fréquentes.
+<<<<<<< HEAD
### Ruptures de compatibilité ascendante {/*breaking-changes*/}
+=======
+We know our users continue to use old versions of React in production. If we learn of a security vulnerability in React, we release a backported fix for all major versions that are affected by the vulnerability.
+
+### Breaking changes {/*breaking-changes*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Les ruptures de compatibilité ascendante sont gênantes pour tout le monde, aussi nous essayons de limiter le nombre de livraisons majeures — par exemple, React 15 a été publié en avril 2016, React 16 en septembre 2017 et React 17 en octobre 2020.
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index 8afc2e747..2adc7929b 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -20,9 +20,15 @@ Supposons que vous ayez une application web existante sur `example.com` dévelop
Voici comment nous vous recommandons de procéder :
+<<<<<<< HEAD
1. **Construisez la partie React de votre appli** en utilisant l'un des [frameworks basés sur React](/learn/start-a-new-react-project).
2. **Indiquez `/some-app` comme *chemin de base*** dans la configuration de votre framework (voici comment faire avec [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath) ou [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
3. **Configurez votre serveur ou un proxy** de manière à ce que toutes les requêtes sous `/some-app/` soient traitées par votre application React.
+=======
+1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
+2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
+3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Ça garantit que la partie React de votre application peut [bénéficier de tout un tas de bonnes pratiques](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) intégrées à ces frameworks.
@@ -45,7 +51,11 @@ Un environnement JavaScript modulaire vous permet d'écrire vos composants React
* **Si votre application est déjà divisée en fichiers qui utilisent des déclarations `import`**, essayez d'utiliser la configuration que vous avez déjà. Vérifiez si l'écriture de `<div />` dans votre code JS provoque une erreur de syntaxe. Si tel est le cas, vous devrez peut-être [transformer votre code JavaScript avec Babel](https://babeljs.io/setup), et activer le [préréglage Babel React](https://babeljs.io/docs/babel-preset-react) pour utiliser JSX.
+<<<<<<< HEAD
* **Si votre application n'a pas de configuration existante pour la compilation des modules JavaScript**, mettez-en une en place avec [Vite](https://vitejs.dev/). La communauté Vite propose de [nombreuses intégrations avec des frameworks backend](https://github.com/vitejs/awesome-vite#integrations-with-backends), notament Rails, Django et Laravel. Si votre framework backend ne figure pas dans leur liste, [suivez ce guide](https://vitejs.dev/guide/backend-integration.html) pour intégrer manuellement les builds Vite à votre backend.
+=======
+* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Pour vérifier si votre configuration fonctionne, exécutez cette commande dans le dossier de votre projet :
@@ -57,12 +67,17 @@ Ensuite, ajoutez ces lignes de code en haut de votre fichier JavaScript principa
<Sandpack>
-```html index.html hidden
+```html public/index.html hidden
<!DOCTYPE html>
<html>
<head><title>Mon appli</title></head>
<body>
+<<<<<<< HEAD
<!-- Le contenu actuel de votre page (dans cet exemple, il est remplacé) -->
+=======
+ <!-- Your existing page content (in this example, it gets replaced) -->
+ <div id="root"></div>
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</body>
</html>
```
@@ -84,7 +99,11 @@ Si tout le contenu de votre page a été remplacé par un « Bonjour tout le mo
<Note>
+<<<<<<< HEAD
Intégrer pour la première fois un environnement JavaScript modulaire dans un projet existant pour la première fois peut sembler intimidant, mais ça en vaut la peine ! Si vous êtes bloqué, essayez nos [ressources communautaires](/community) ou discutez sur [le forum Vite](https://chat.vitejs.dev/).
+=======
+Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Note>
@@ -119,7 +138,7 @@ Vous souhaitez probablement plutôt afficher vos composants React à des emplace
<Sandpack>
-```html index.html
+```html public/index.html
<!DOCTYPE html>
<html>
<head><title>Mon appli</title></head>
diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md
new file mode 100644
index 000000000..b5f29e9af
--- /dev/null
+++ b/src/content/learn/build-a-react-app-from-scratch.md
@@ -0,0 +1,143 @@
+---
+title: Build a React app from Scratch
+---
+
+<Intro>
+
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can build a React app from scratch.
+
+</Intro>
+
+<DeepDive>
+
+#### Consider using a framework {/*consider-using-a-framework*/}
+
+Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for.
+
+For example, if in the future your app needs support for server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC), you will have to implement those on your own. Similarly, future React features that require integrating at the framework level will have to be implemented on your own if you want to use them.
+
+Our recommended frameworks also help you build better performing apps. For example, reducing or eliminating waterfalls from network requests makes for a better user experience. This might not be a high priority when you are building a toy project, but if your app gains users you may want to improve its performance.
+
+Going this route also makes it more difficult to get support, since the way you develop routing, data-fetching, and other features will be unique to your situation. You should only choose this option if you are comfortable tackling these problems on your own, or if you’re confident that you will never need these features.
+
+For a list of recommended frameworks, check out [Creating a React App](/learn/creating-a-react-app).
+
+</DeepDive>
+
+
+## Step 1: Install a build tool {/*step-1-install-a-build-tool*/}
+
+The first step is to install a build tool like `vite`, `parcel`, or `rsbuild`. These build tools provide features to package and run source code, provide a development server for local development and a build command to deploy your app to a production server.
+
+### Vite {/*vite*/}
+
+[Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+
+<TerminalBlock>
+{`npm create vite@latest my-app -- --template react`}
+</TerminalBlock>
+
+Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX, Babel/SWC, and other common features. See Vite's [React plugin](https://vite.dev/plugins/#vitejs-plugin-react) or [React SWC plugin](https://vite.dev/plugins/#vitejs-plugin-react-swc) and [React SSR example project](https://vite.dev/guide/ssr.html#example-projects) to get started.
+
+Vite is already being used as a build tool in one of our [recommended frameworks](/learn/creating-a-react-app): [React Router](https://reactrouter.com/start/framework/installation).
+
+### Parcel {/*parcel*/}
+
+[Parcel](https://parceljs.org/) combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production applications.
+
+<TerminalBlock>
+{`npm install --save-dev parcel`}
+</TerminalBlock>
+
+Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box. See [Parcel's React recipe](https://parceljs.org/recipes/react/#getting-started) to get started.
+
+### Rsbuild {/*rsbuild*/}
+
+[Rsbuild](https://rsbuild.dev/) is an Rspack-powered build tool that provides a seamless development experience for React applications. It comes with carefully tuned defaults and performance optimizations ready to use.
+
+<TerminalBlock>
+{`npx create-rsbuild --template react`}
+</TerminalBlock>
+
+Rsbuild includes built-in support for React features like fast refresh, JSX, TypeScript, and styling. See [Rsbuild's React guide](https://rsbuild.dev/guide/framework/react) to get started.
+
+<Note>
+
+#### Metro for React Native {/*react-native*/}
+
+If you're starting from scratch with React Native you'll need to use [Metro](https://metrobundler.dev/), the JavaScript bundler for React Native. Metro supports bundling for platforms like iOS and Android, but lacks many features when compared to the tools here. We recommend starting with Vite, Parcel, or Rsbuild unless your project requires React Native support.
+
+</Note>
+
+## Step 2: Build Common Application Patterns {/*step-2-build-common-application-patterns*/}
+
+The build tools listed above start off with a client-only, single-page app (SPA), but don't include any further solutions for common functionality like routing, data fetching, or styling.
+
+The React ecosystem includes many tools for these problems. We've listed a few that are widely used as a starting point, but feel free to choose other tools if those work better for you.
+
+### Routing {/*routing*/}
+
+Routing determines what content or pages to display when a user visits a particular URL. You need to set up a router to map URLs to different parts of your app. You'll also need to handle nested routes, route parameters, and query parameters. Routers can be configured within your code, or defined based on your component folder and file structures.
+
+Routers are a core part of modern applications, and are usually integrated with data fetching (including prefetching data for a whole page for faster loading), code splitting (to minimize client bundle sizes), and page rendering approaches (to decide how each page gets generated).
+
+We suggest using:
+
+- [React Router](https://reactrouter.com/start/data/custom)
+- [Tanstack Router](https://tanstack.com/router/latest)
+
+
+### Data Fetching {/*data-fetching*/}
+
+Fetching data from a server or other data source is a key part of most applications. Doing this properly requires handling loading states, error states, and caching the fetched data, which can be complex.
+
+Purpose-built data fetching libraries do the hard work of fetching and caching the data for you, letting you focus on what data your app needs and how to display it. These libraries are typically used directly in your components, but can also be integrated into routing loaders for faster pre-fetching and better performance, and in server rendering as well.
+
+Note that fetching data directly in components can lead to slower loading times due to network request waterfalls, so we recommend prefetching data in router loaders or on the server as much as possible! This allows a page's data to be fetched all at once as the page is being displayed.
+
+If you're fetching data from most backends or REST-style APIs, we suggest using:
+
+- [React Query](https://react-query.tanstack.com/)
+- [SWR](https://swr.vercel.app/)
+- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
+
+If you're fetching data from a GraphQL API, we suggest using:
+
+- [Apollo](https://www.apollographql.com/docs/react)
+- [Relay](https://relay.dev/)
+
+
+### Code-splitting {/*code-splitting*/}
+
+Code-splitting is the process of breaking your app into smaller bundles that can be loaded on demand. An app's code size increases with every new feature and additional dependency. Apps can become slow to load because all of the code for the entire app needs to be sent before it can be used. Caching, reducing features/dependencies, and moving some code to run on the server can help mitigate slow loading but are incomplete solutions that can sacrifice functionality if overused.
+
+Similarly, if you rely on the apps using your framework to split the code, you might encounter situations where loading becomes slower than if no code splitting were happening at all. For example, [lazily loading](/reference/react/lazy) a chart delays sending the code needed to render the chart, splitting the chart code from the rest of the app. [Parcel supports code splitting with React.lazy](https://parceljs.org/recipes/react/#code-splitting). However, if the chart loads its data *after* it has been initially rendered you are now waiting twice. This is a waterfall: rather than fetching the data for the chart and sending the code to render it simultaneously, you must wait for each step to complete one after the other.
+
+Splitting code by route, when integrated with bundling and data fetching, can reduce the initial load time of your app and the time it takes for the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)).
+
+For code-splitting instructions, see your build tool docs:
+- [Vite build optimizations](https://vite.dev/guide/features.html#build-optimizations)
+- [Parcel code splitting](https://parceljs.org/features/code-splitting/)
+- [Rsbuild code splitting](https://rsbuild.dev/guide/optimization/code-splitting)
+
+### Improving Application Performance {/*improving-application-performance*/}
+
+Since the build tool you select only support single page apps (SPAs) you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC.
+
+* **Single-page apps (SPA)** load a single HTML page and dynamically updates the page as the user interacts with the app. SPAs are easier to get started with, but they can have slower initial load times. SPAs are the default architecture for most build tools.
+
+* **Streaming Server-side rendering (SSR)** renders a page on the server and sends the fully rendered page to the client. SSR can improve performance, but it can be more complex to set up and maintain than a single-page app. With the addition of streaming, SSR can be very complex to set up and maintain. See [Vite's SSR guide]( https://vite.dev/guide/ssr).
+
+* **Static site generation (SSG)** generates static HTML files for your app at build time. SSG can improve performance, but it can be more complex to set up and maintain than server-side rendering. See [Vite's SSG guide](https://vite.dev/guide/ssr.html#pre-rendering-ssg).
+
+* **React Server Components (RSC)** lets you mix build-time, server-only, and interactive components in a single React tree. RSC can improve performance, but it currently requires deep expertise to set up and maintain. See [Parcel's RSC examples](https://github.com/parcel-bundler/rsc-examples).
+
+Your rendering strategies need to integrate with your router so apps built with your framework can choose the rendering strategy on a per-route level. This will enable different rendering strategies without having to rewrite your whole app. For example, the landing page for your app might benefit from being statically generated (SSG), while a page with a content feed might perform best with server-side rendering.
+
+Using the right rendering strategy for the right routes can decrease the time it takes for the first byte of content to be loaded ([Time to First Byte](https://web.dev/articles/ttfb)), the first piece of content to render ([First Contentful Paint](https://web.dev/articles/fcp)), and the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)).
+
+### And more... {/*and-more*/}
+
+These are just a few examples of the features a new app will need to consider when building from scratch. Many limitations you'll hit can be difficult to solve as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with.
+
+If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box.
diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md
new file mode 100644
index 000000000..df512cca8
--- /dev/null
+++ b/src/content/learn/creating-a-react-app.md
@@ -0,0 +1,113 @@
+---
+title: Creating a React App
+---
+
+<Intro>
+
+If you want to build a new app or website with React, we recommend starting with a framework.
+
+</Intro>
+
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
+
+## Full-stack frameworks {/*full-stack-frameworks*/}
+
+These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.
+
+<Note>
+
+#### Full-stack frameworks do not require a server. {/*react-frameworks-do-not-require-a-server*/}
+
+All the frameworks on this page support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and static-site generation ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). These apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.
+
+This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework's documentation for configuring the rendering strategy.
+
+</Note>
+
+### Next.js (App Router) {/*nextjs-app-router*/}
+
+**[Next.js's App Router](https://nextjs.org/docs) is a React framework that takes full advantage of React's architecture to enable full-stack React apps.**
+
+<TerminalBlock>
+npx create-next-app@latest
+</TerminalBlock>
+
+Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
+
+### React Router (v7) {/*react-router-v7*/}
+
+**[React Router](https://reactrouter.com/start/framework/installation) is the most popular routing library for React and can be paired with Vite to create a full-stack React framework**. It emphasizes standard Web APIs and has several [ready to deploy templates](https://github.com/remix-run/react-router-templates) for various JavaScript runtimes and platforms.
+
+To create a new React Router framework project, run:
+
+<TerminalBlock>
+npx create-react-router@latest
+</TerminalBlock>
+
+React Router is maintained by [Shopify](https://www.shopify.com).
+
+### Expo (for native apps) {/*expo*/}
+
+**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run:
+
+<TerminalBlock>
+npx create-expo-app@latest
+</TerminalBlock>
+
+If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/).
+
+Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
+
+
+## Other frameworks {/*other-frameworks*/}
+
+There are other up-and-coming frameworks that are working towards our full stack React vision:
+
+- [TanStack Start (Beta)](https://tanstack.com/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.
+- [RedwoodJS](https://redwoodjs.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.
+
+<DeepDive>
+
+#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
+
+Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree.
+
+For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components:
+
+```js
+// This component runs *only* on the server (or during the build).
+async function Talks({ confId }) {
+ // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
+ const talks = await db.Talks.findAll({ confId });
+
+ // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
+ const videos = talks.map(talk => talk.video);
+
+ // 3. Pass the data down to the components that will run in the browser.
+ return <SearchableVideoList videos={videos} />;
+}
+```
+
+Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:
+
+```js
+<Suspense fallback={<TalksLoading />}>
+ <Talks confId={conf.id} />
+</Suspense>
+```
+
+Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.
+
+</DeepDive>
+
+## Start From Scratch {/*start-from-scratch*/}
+
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.
+
+Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#full-stack-frameworks) have built-in solutions for these problems.
+
+If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/).
+
+-----
+
+_If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index ac71de39c..41e709aec 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -4,7 +4,11 @@ title: Démarrage rapide
<Intro>
+<<<<<<< HEAD
Bienvenue dans la documentation React ! Dans cette page, vous allez découvrir les 80% de concepts React que vous utiliserez sans doute au quotidien.
+=======
+Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Intro>
diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md
index 6b1f8cf53..010ec36cb 100644
--- a/src/content/learn/installation.md
+++ b/src/content/learn/installation.md
@@ -8,6 +8,7 @@ React a été conçu dès le départ pour une adoption progressive. Vous pouvez
</Intro>
+<<<<<<< HEAD
<YouWillLearn isChapter={true}>
* [Comment commencer un nouveau projet React](/learn/start-a-new-react-project)
@@ -18,6 +19,9 @@ React a été conçu dès le départ pour une adoption progressive. Vous pouvez
</YouWillLearn>
## Essayer React {/*try-react*/}
+=======
+## Try React {/*try-react*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Vous n'avez pas besoin d'installer quoi que ce soit pour jouer avec React. Essayez de modifier ce bac à sable !
@@ -39,6 +43,7 @@ Vous pouvez le modifier directement ou l'ouvrir dans un nouvel onglet en appuyan
La plupart des pages de la documentation de React contiennent des bacs à sable comme celui-ci. Hors de la documentation de React, il existe de nombreux bacs à sable qui prennent en charge React, par exemple [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react) ou encore [CodePen](https://codepen.io/pen?template=QWYVwWN).
+<<<<<<< HEAD
### Essayer React sur votre machine {/*try-react-locally*/}
Pour essayer React localement sur votre ordinateur, [téléchargez cette page HTML](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html). Ouvrez-la dans votre éditeur et dans votre navigateur !
@@ -46,10 +51,34 @@ Pour essayer React localement sur votre ordinateur, [téléchargez cette page HT
## Démarrer un nouveau projet React {/*start-a-new-react-project*/}
Si vous souhaitez construire une appli ou un site entièrement avec React, [créez un nouveau projet React](/learn/start-a-new-react-project).
+=======
+To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser!
+
+## Creating a React App {/*creating-a-react-app*/}
+
+If you want to start a new React app, you can [create a React app](/learn/creating-a-react-app) using a recommended framework.
+
+## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
+
+If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
## Ajouter React à un projet existant {/*add-react-to-an-existing-project*/}
+<<<<<<< HEAD
Si vous souhaitez essayer d'utiliser React dans une appli ou un site existants, [ajoutez React à un projet existant](/learn/add-react-to-an-existing-project).
+=======
+If want to try using React in your existing app or a website, you can [add React to an existing project.](/learn/add-react-to-an-existing-project)
+
+
+<Note>
+
+#### Should I use Create React App? {/*should-i-use-create-react-app*/}
+
+No. Create React App has been deprecated. For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app).
+
+</Note>
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
## Et maintenant ? {/*next-steps*/}
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index d24f89f77..18c01a3a1 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -256,11 +256,11 @@ export default function CatFriends() {
key={cat}
ref={(node) => {
const map = getMap();
- if (node) {
- map.set(cat, node);
- } else {
+ map.set(cat, node);
+
+ return () => {
map.delete(cat);
- }
+ };
}}
>
<img
@@ -312,16 +312,6 @@ li {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- }
-}
-```
-
</Sandpack>
Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient plutôt une [Map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) associant chaque ID d'élément à un nœud DOM. ([Les refs peuvent stocker n'importe quelle valeur !](/learn/referencing-values-with-refs)) La [fonction de rappel `ref`](/reference/react-dom/components/common#ref-callback) sur chaque élément de la liste s'occupe de mettre à jour les correspondances :
@@ -331,6 +321,7 @@ Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient
key={cat.id}
ref={node => {
const map = getMap();
+<<<<<<< HEAD
if (node) {
// Ajoute à la Map
map.set(cat, node);
@@ -353,6 +344,8 @@ This example shows another approach for managing the Map with a `ref` callback c
key={cat.id}
ref={node => {
const map = getMap();
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
// Add to the Map
map.set(cat, node);
@@ -364,23 +357,56 @@ This example shows another approach for managing the Map with a `ref` callback c
>
```
-</Canary>
+This lets you read individual DOM nodes from the Map later.
+
+<Note>
+
+When Strict Mode is enabled, ref callbacks will run twice in development.
+
+Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
+
+</Note>
</DeepDive>
## Accéder aux nœuds DOM d'un autre composant {/*accessing-another-components-dom-nodes*/}
+<<<<<<< HEAD
Quand vous posez une ref sur un composant natif qui produit un élément navigateur tel que `<input />`, React place une référence vers le nœud DOM correspondant (le véritable élément `<input />` du navigateur) dans la propriété `current` de cette ref.
En revanche, si vous essayez d'obtenir une ref vers **votre propre** composant, tel que `<MyInput />`, vous obtiendrez par défaut `null`. Voici un exemple qui illustre ça : voyez comme les clics sur le bouton **ne donnent pas** le focus au champ de saisie :
+=======
+<Pitfall>
+Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
+</Pitfall>
+
+You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
+
+```js {3-4,9}
+import { useRef } from 'react';
+
+function MyInput({ ref }) {
+ return <input ref={ref} />;
+}
+
+function MyForm() {
+ const inputRef = useRef(null);
+ return <MyInput ref={inputRef} />
+}
+```
+
+In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
+
+The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
```js
import { useRef } from 'react';
-function MyInput(props) {
- return <input {...props} />;
+function MyInput({ ref }) {
+ return <input ref={ref} />;
}
export default function MyForm() {
@@ -403,6 +429,7 @@ export default function MyForm() {
</Sandpack>
+<<<<<<< HEAD
Pour vous aider à repérer le problème, React affichera aussi une erreur dans la console :
<ConsoleBlock level="error">
@@ -462,22 +489,32 @@ export default function Form() {
Dans les Design Systems, il est courant pour les composants de bas niveau tels que les boutons, champs, etc. de transmettre leurs refs à leurs nœuds DOM. À l'inverse, les composants de haut niveau tels que les formulaires, listes ou sections de page n'exposent généralement pas leurs nœuds DOM pour éviter d'introduire des dépendances indésirables envers la structure de leur DOM.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<DeepDive>
#### Exposer une partie de votre API grâce à un point d'accès impératif {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
+<<<<<<< HEAD
Dans l'exemple qui précède, `MyInput` expose l'élément DOM original du champ de saisie. Ça permet au composant parent d'en appeler la méthode `focus()`. Hélas, ça permet aussi au composant parent de faire d'autres choses avec, par exemple modifier ses styles CSS. Dans certains cas rares, vous voudrez restreindre les fonctionnalités natives accessibles. Utilisez alors `useImperativeHandle` :
+=======
+In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
```js
+<<<<<<< HEAD
import {
forwardRef,
useRef,
useImperativeHandle
} from 'react';
+=======
+import { useRef, useImperativeHandle } from "react";
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-const MyInput = forwardRef((props, ref) => {
+function MyInput({ ref }) {
const realInputRef = useRef(null);
useImperativeHandle(ref, () => ({
// N'expose que la méthode `focus()`, rien de plus
@@ -485,8 +522,8 @@ const MyInput = forwardRef((props, ref) => {
realInputRef.current.focus();
},
}));
- return <input {...props} ref={realInputRef} />;
-});
+ return <input ref={realInputRef} />;
+};
export default function Form() {
const inputRef = useRef(null);
@@ -498,9 +535,13 @@ export default function Form() {
return (
<>
<MyInput ref={inputRef} />
+<<<<<<< HEAD
<button onClick={handleClick}>
Activer le champ
</button>
+=======
+ <button onClick={handleClick}>Focus the input</button>
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</>
);
}
@@ -508,7 +549,11 @@ export default function Form() {
</Sandpack>
+<<<<<<< HEAD
Ici, `realInputRef` dans `MyInput` référence le nœud DOM effectif du champ de saisie. En revanche, `useImperativeHandle` indique à React de fournir votre propre objet sur-mesure comme valeur de la ref pour le composant parent. Ainsi `inputRef.current` dans le composant `Form` ne verra que la méthode`focus`. Au final, le « point d'accès » de la ref n'est pas le nœud DOM, mais l'objet dédié que vous avez créé dans l'appel à `useImperativeHandle`.
+=======
+Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</DeepDive>
@@ -717,11 +762,20 @@ Ceci étant dit, ça ne signifie pas que l'interdiction est absolue. Il faut ju
<Recap>
+<<<<<<< HEAD
- Les Refs sont un concept générique, mais sont généralement utilisées pour référencer des nœuds DOM.
- Pour indiquer à React de placer une référence à un nœud DOM dans `myRef.current`, utilisez la prop `ref`, comme dans `<div ref={myRef}>`.
- En général, vous utiliserez les refs pour des actions non destructrices telles que la gestion du focus, le défilement ou la mesure des dimensions et positions d'éléments du DOM.
- Un composant n'expose pas, par défaut, ses nœuds DOM. Vous pouvez choisir d'en exposer un en utilisant `forwardRef` et en passant le second argument `ref` de la fonction de rappel au nœud désiré.
- Évitez de modifier les nœuds DOM gérés par React. Si vous devez absolument le faire, limitez-vous aux parties que React n'a aucune raison de mettre à jour.
+=======
+- Refs are a generic concept, but most often you'll use them to hold DOM elements.
+- You instruct React to put a DOM node into `myRef.current` by passing `<div ref={myRef}>`.
+- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
+- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop.
+- Avoid changing DOM nodes managed by React.
+- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Recap>
@@ -1119,7 +1173,11 @@ Faites en sorte qu'un clic sur le bouton « Recherche » donne le focus au cha
<Hint>
+<<<<<<< HEAD
Vous aurez besoin de `forwardRef` pour choisir d'exposer un nœud DOM pour votre propre composant `SearchInput`.
+=======
+You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Hint>
@@ -1204,6 +1262,7 @@ export default function SearchButton({ onClick }) {
```
```js src/SearchInput.js
+<<<<<<< HEAD
import { forwardRef } from 'react';
export default forwardRef(
@@ -1216,6 +1275,16 @@ export default forwardRef(
);
}
);
+=======
+export default function SearchInput({ ref }) {
+ return (
+ <input
+ ref={ref}
+ placeholder="Looking for something?"
+ />
+ );
+}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```css
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md
index 197f0da92..534be7a11 100644
--- a/src/content/learn/passing-data-deeply-with-context.md
+++ b/src/content/learn/passing-data-deeply-with-context.md
@@ -468,15 +468,19 @@ import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
return (
<section className="section">
- <LevelContext.Provider value={level}>
+ <LevelContext value={level}>
{children}
- </LevelContext.Provider>
+ </LevelContext>
</section>
);
}
```
+<<<<<<< HEAD
React le comprend ainsi : « si un composant à l'intérieur de `<Section>` demande `LevelContext`, alors donne-lui ce `level` ». Le composant utilisera la valeur du `<LevelContext.Provider>` le plus proche dans l'arbre au-dessus de lui.
+=======
+This tells React: "if any component inside this `<Section>` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `<LevelContext>` in the UI tree above it.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -514,9 +518,9 @@ import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
return (
<section className="section">
- <LevelContext.Provider value={level}>
+ <LevelContext value={level}>
{children}
- </LevelContext.Provider>
+ </LevelContext>
</section>
);
}
@@ -566,9 +570,15 @@ export const LevelContext = createContext(1);
Le résultat est le même qu'avec le code d'origine, mais vous n'avez plus besoin de transmettre la prop `level` à chaque composant `Heading`. Au lieu de ça, il « détermine » son niveau d'en-tête en interrogeant la `Section` la plus proche :
+<<<<<<< HEAD
1. Vous passez une prop `level` à la `<Section>`.
2. `Section` enrobe ses enfants dans un `<LevelContext.Provider value={level}>`.
3. `Heading` demande la valeur la plus proche de `LevelContext` avec `useContext(LevelContext)`.
+=======
+1. You pass a `level` prop to the `<Section>`.
+2. `Section` wraps its children into `<LevelContext value={level}>`.
+3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
## Utiliser et fournir le contexte depuis le même composant {/*using-and-providing-context-from-the-same-component*/}
@@ -595,9 +605,9 @@ export default function Section({ children }) {
const level = useContext(LevelContext);
return (
<section className="section">
- <LevelContext.Provider value={level + 1}>
+ <LevelContext value={level + 1}>
{children}
- </LevelContext.Provider>
+ </LevelContext>
</section>
);
}
@@ -643,9 +653,9 @@ export default function Section({ children }) {
const level = useContext(LevelContext);
return (
<section className="section">
- <LevelContext.Provider value={level + 1}>
+ <LevelContext value={level + 1}>
{children}
- </LevelContext.Provider>
+ </LevelContext>
</section>
);
}
@@ -776,9 +786,9 @@ export default function Section({ children, isFancy }) {
'section ' +
(isFancy ? 'fancy' : '')
}>
- <LevelContext.Provider value={level + 1}>
+ <LevelContext value={level + 1}>
{children}
- </LevelContext.Provider>
+ </LevelContext>
</section>
);
}
@@ -864,6 +874,7 @@ D'une manière générale, si certaines informations sont nécessaires pour des
<Recap>
+<<<<<<< HEAD
* Le contexte permet à un composant de fournir certaines informations à l'ensemble de l'arbre situé en dessous de lui.
* Pour transmettre un contexte :
1. Créez-le et exportez-le avec `export const MyContext = createContext(defaultValue)`.
@@ -872,6 +883,16 @@ D'une manière générale, si certaines informations sont nécessaires pour des
* Le contexte traverse tous les composants intermédiaires.
* Le contexte vous permet d'écrire des composants qui « s'adaptent à leur environnement ».
* Avant d'utiliser un contexte, essayez de passer par les props ou en mettant du JSX dans les `children`.
+=======
+* Context lets a component provide some information to the entire tree below it.
+* To pass context:
+ 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
+ 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
+ 3. Wrap children into `<MyContext value={...}>` to provide it from a parent.
+* Context passes through any components in the middle.
+* Context lets you write components that "adapt to their surroundings".
+* Before you use context, try passing props or passing JSX as `children`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Recap>
@@ -1022,7 +1043,11 @@ li {
Retirez la prop `imageSize` de tous les composants.
+<<<<<<< HEAD
Créez et exportez `ImageSizeContext` depuis `Context.js`. Ensuite, enrobez la `List` dans `<ImageSizeContext.Provider value={imageSize}>` pour propager la valeur vers le bas, puis `useContext(ImageSizeContext)` pour la lire dans `PlaceImage` :
+=======
+Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `<ImageSizeContext value={imageSize}>` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -1036,7 +1061,7 @@ export default function App() {
const [isLarge, setIsLarge] = useState(false);
const imageSize = isLarge ? 150 : 100;
return (
- <ImageSizeContext.Provider
+ <ImageSizeContext
value={imageSize}
>
<label>
@@ -1051,7 +1076,7 @@ export default function App() {
</label>
<hr />
<List />
- </ImageSizeContext.Provider>
+ </ImageSizeContext>
)
}
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 22e021c4f..5762e512f 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -2011,7 +2011,7 @@ export default function ContactList() {
<label>
<input
type="checkbox"
- value={reverse}
+ checked={reverse}
onChange={e => {
setReverse(e.target.checked)
}}
@@ -2110,7 +2110,7 @@ export default function ContactList() {
<label>
<input
type="checkbox"
- value={reverse}
+ checked={reverse}
onChange={e => {
setReverse(e.target.checked)
}}
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index 7d830d241..c9d4062bf 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -8,12 +8,15 @@ Cette page fournit une introduction à React Compiler et explique comment l'essa
</Intro>
+<<<<<<< HEAD
<Wip>
Cette documentation est un travail en cours. Davantage de documentation est disponible sur le [dépôt du groupe de travail React Compiler](https://github.com/reactwg/react-compiler/discussions) et sera reportée ici lorsqu'elle se stabilisera.
</Wip>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<YouWillLearn>
* Comment commencer à utiliser le compilateur
@@ -23,6 +26,7 @@ Cette documentation est un travail en cours. Davantage de documentation est dis
</YouWillLearn>
<Note>
+<<<<<<< HEAD
React Compiler est un nouveau compilateur actuellement en beta, qui a été ouvert au public pour obtenir des retours rapides de la communauté. Même s'il est utilisé en production dans des sociétés comme Meta, déployer le compilateur en production pour votre appli dépendra de la santé de votre base de code et de la rigueur avec laquelle vous respectez les [Règles de React](/reference/rules).
@@ -38,12 +42,31 @@ Le compilateur est actuellement disponible *via* l'étiquette `beta`, et vous po
<TerminalBlock>
npm install --save-dev babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+=======
+React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to try the compiler and provide feedback.
+
+The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`.
+</Note>
+
+React Compiler is a new compiler that we've open sourced to get feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
+
+eslint-plugin-react-hooks also includes an [ESLint rule](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
+
+The compiler is currently released as `rc`, and is available to try out on React 17+ apps and libraries. To install the RC:
+
+<TerminalBlock>
+{`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TerminalBlock>
Ou si vous utilisez Yarn :
<TerminalBlock>
+<<<<<<< HEAD
yarn add --dev babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+=======
+{`yarn add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TerminalBlock>
Si vous n'utilisez pas encore React 19, merci de consulter [cette section](#using-react-compiler-with-react-17-or-18) pour des instructions complémentaires.
@@ -126,7 +149,11 @@ Du coup, si `expensivelyProcessAReallyLargeArrayOfObjects` était utilisée par
### Devrais-je essayer le compilateur ? {/*should-i-try-out-the-compiler*/}
+<<<<<<< HEAD
Veuillez noter que le compilateur est encore en beta et qu'il reste de nombreuses choses à affiner. Même s'il est déjà utilisé en production dans des sociétés telles que Meta, déployer le compilateur en production pour votre appli dépend de l'état de santé de votre base de code et de la rigueur avec laquelle vous respectez les [Règles de React](/reference/rules).
+=======
+The compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
**Vous n'avez pas à vous précipiter pour utiliser le compilateur dès maintenant. Vous pouvez parfaitement attendre qu'il atteigne sa version stable avant de l'adopter.** Ceci dit, nous apprécions les essais à échelle réduite dans vos applis, qui vous permettent de nous [faire des retours](#reporting-issues) afin de nous aider à améliorer le compilateur.
@@ -134,6 +161,7 @@ Veuillez noter que le compilateur est encore en beta et qu'il reste de nombreuse
En complément de cette documentation, nous vous conseillons de garder un œil sur le [groupe de travail React Compiler](https://github.com/reactwg/react-compiler) pour y trouver davantage d'informations et des discussions autour du compilateur.
+<<<<<<< HEAD
### Installer eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/}
React Compiler alimente également un plugin ESLint. Le plugin ESLint peut être utilisé **indépendamment** du compilateur, ce qui signifie que vous pouvez tirer parti du plugin ESLint même si vous n'utilisez pas le compilateur.
@@ -171,6 +199,17 @@ module.exports = {
},
}
```
+=======
+### Installing eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/}
+
+React Compiler also powers an ESLint plugin. You can try it out by installing eslint-plugin-react-hooks@^6.0.0-rc.1.
+
+<TerminalBlock>
+{`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`}
+</TerminalBlock>
+
+See our [editor setup](/learn/editor-setup#linting) guide for more details.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Le plugin ESLint affichera toute violation des règles de React dans votre éditeur. Lorsqu'il le fait, ça signifie que le compilateur a évité d'optimiser ce composant ou Hook. Ça ne pose aucun problème, et le compilateur peut retomber sur ses pieds et continuer à optimiser d'autres composants dans votre base de code.
@@ -208,7 +247,7 @@ Si vous démarrez un nouveau projet, vous pouvez activer le compilateur sur la b
React Compiler donne ses meilleurs résultats avec React 19 RC. Si vous ne pouvez pas migrer vers cette version, vous pouvez installer le paquet complémentaire `react-compiler-runtime` qui permet au code compilé de tourner sur des versions antérieures à la 19. Gardez toutefois à l'esprit que la version minimale est la 17.
<TerminalBlock>
-npm install react-compiler-runtime@beta
+{`npm install react-compiler-runtime@rc`}
</TerminalBlock>
Vous aurez également besoin d'ajouter la `target` idoine à votre configuration du compilateur, en utilisant la version majeure de React que vous ciblez :
@@ -243,7 +282,11 @@ Comme pour les applis, il n'est pas nécessaire de compiler 100% de vos composan
### Babel {/*usage-with-babel*/}
<TerminalBlock>
+<<<<<<< HEAD
npm install --save-dev babel-plugin-react-compiler@beta
+=======
+{`npm install babel-plugin-react-compiler@rc`}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TerminalBlock>
Le compilateur inclut un plugin Babel que vous pouvez utiliser dans votre chaîne de build pour exécuter le compilateur.
@@ -299,7 +342,11 @@ Merci de consulter la [documentation de Next.js](https://nextjs.org/docs/app/api
Installez `vite-plugin-babel` et ajoutez-lui le plugin Babel du compilateur :
<TerminalBlock>
+<<<<<<< HEAD
npm install --save-dev vite-plugin-babel
+=======
+{`npm install vite-plugin-babel`}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</TerminalBlock>
```js {2,14}
@@ -326,7 +373,11 @@ export default defineConfig({
### Webpack {/*usage-with-webpack*/}
+<<<<<<< HEAD
Un chargeur Webpack maintenu par la communauté est [désormais disponible ici](https://github.com/SukkaW/react-compiler-webpack).
+=======
+A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### Expo {/*usage-with-expo*/}
@@ -362,7 +413,11 @@ React Compiler peut vérifier statiquement la plupart des Règles de React, et
### Comment savoir si mes composants ont été optimisés ? {/*how-do-i-know-my-components-have-been-optimized*/}
+<<<<<<< HEAD
[React Devtools](/learn/react-developer-tools) (v5.0+) prend nativement en charge React Compiler et affichera un badge « Memo ✨ » à côté des composants qui ont été optimisés par le compilateur.
+=======
+[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### Quelque chose ne fonctionne plus après la compilation {/*something-is-not-working-after-compilation*/}
diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md
index f19187126..f1e06d250 100644
--- a/src/content/learn/react-developer-tools.md
+++ b/src/content/learn/react-developer-tools.md
@@ -52,6 +52,7 @@ Pour finir, rafraîchissez votre page dans le navigateur pour l'afficher dans le
+<<<<<<< HEAD
## Mobile natif (React Native) {/*mobile-react-native*/}
Les outils de développement React peuvent également être utilisés pour inspecter les applis construites avec [React Native](https://reactnative.dev/).
@@ -59,11 +60,15 @@ La façon la plus simple d'utiliser les outils de développement React consiste
```bash
# Yarn
yarn global add react-devtools
+=======
+## Mobile (React Native) {/*mobile-react-native*/}
-# Npm
-npm install -g react-devtools
-```
+To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
+
+[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)
+<<<<<<< HEAD
Ouvrez alors les outils de développement depuis le terminal :
```bash
react-devtools
@@ -74,3 +79,6 @@ react-devtools
> Essayez de relancer l'appli si les outils de développement ne se connectent toujours pas au bout de quelques secondes.
[En apprendre plus sur le débogage de React Native](https://reactnative.dev/docs/debugging).
+=======
+> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 01bcbb539..d806f955d 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -1242,7 +1242,11 @@ export default function Timer() {
</Sandpack>
+<<<<<<< HEAD
Au lieu de lire `count` au sein de l'Effet, passez à React la fonction `c => c + 1` (« incrémente ce nombre ! »). React l'appliquera pour le prochain rendu. Et comme vous n'avez plus besoin de lire la valeur de `count` depuis votre Effet, vous pouvez ramener ses dépendances à un tableau vide (`[]`). Ça évite que votre Effet ne recrée l'intervalle à chaque fois.
+=======
+Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Solution>
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index e83b99e31..0a32b8884 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -70,9 +70,15 @@ Essayez de commenter l'appel à `root.render()` pour voir votre composant dispar
Une fois que le composant a fait son rendu initial, vous pouvez déclencher des rendus supplémentaires en mettant à jour son état au moyen d'une [fonction `set`](/reference/react/useState#setstate). Mettre à jour l'état local d'un composant met automatiquement un rendu en file d'attente. (C'est un peu comme le convive d'un restaurant qui commanderait du thé, un dessert et plein d'autres choses après avoir passé sa commande initiale, en fonction de l'état de sa faim et de sa soif.)
<IllustrationBlock sequential>
+<<<<<<< HEAD
<Illustration caption="Une mise à jour d'état…" alt="React est le serveur d’un restaurant, qui sert une UI Card à l'utilisateur, représenté par une convive avec un curseur en guise de tête. La cliente indique alors qu'elle veut une carte rose, pas une carte noire !" src="/images/docs/illustrations/i_rerender1.png" />
<Illustration caption="…déclenche…" alt="React retourne dans la Cuisine des Composants et indique au Chef des Cards qu'il a besoin d'une Card rose." src="/images/docs/illustrations/i_rerender2.png" />
<Illustration caption="…un rendu !" alt="Le Chef des Cards donne une Card rose à React." src="/images/docs/illustrations/i_rerender3.png" />
+=======
+ <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. The patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
+ <Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
+ <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</IllustrationBlock>
## Étape 2 : rendu des composants par React {/*step-2-react-renders-your-components*/}
@@ -84,7 +90,11 @@ Après que vous avez déclenché un rendu, React appelle vos composants pour dé
Ce processus est récursif : si le composant mis à jour renvoie un autre composant, React fera le rendu de *ce* composant-là ensuite, et si ce dernier renvoie à son tour un autre composant, il fera le rendu de *ce* composant-là, et ainsi de suite. Le processus continue jusqu'à ce qu'il ne reste plus de composants imbriqués à traiter, pour que React sache exactement ce qu'il doit afficher à l'écran.
+<<<<<<< HEAD
Dans l'exemple qui suit, React appellera `Gallery()`, puis plusieurs fois `Image()` :
+=======
+In the following example, React will call `Gallery()` and `Image()` several times:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -148,10 +158,17 @@ Le comportement par défaut, qui fait le rendu de tous les composants enveloppé
## Étape 3 : commit dans le DOM par React {/*step-3-react-commits-changes-to-the-dom*/}
+<<<<<<< HEAD
Après avoir fait le rendu de vos composants (c'est-à-dire après avoir appelé leurs fonctions), React devra mettre à jour le DOM.
- **Lors du rendu initial**, React utilisera l'API DOM [`appendChild()`](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild) pour retranscrire à l'écran tous les nœuds DOM qu'il a créés.
- **Lors des rendus ultérieurs**, React s'attachera à effectuer le strict minimum d'opérations nécessaires (qu'il aura déterminées lors de la phase de rendu !) pour mettre le DOM en correspondance avec le résultat du dernier rendu en date.
+=======
+After rendering (calling) your components, React will modify the DOM.
+
+* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
+* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
**React ne modifie les nœuds DOM que s'il y a un écart d'un rendu à l'autre.** Par exemple, voici un composant qui refait son rendu avec des props différentes passées depuis son parent à chaque seconde. Remarquez que vous pouvez ajouter du texte dans l'`<input>`, modifier sa `value`, mais le texte ne disparaît pas quand le composant refait son rendu :
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 6c957cfdd..e427dad98 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -821,7 +821,11 @@ export default function ChatRoom({ roomId }) {
// ...
```
+<<<<<<< HEAD
puis la transmettez à un autre Hook :
+=======
+and passing it as an input to another Hook:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js {6}
export default function ChatRoom({ roomId }) {
@@ -1334,7 +1338,11 @@ export function useOnlineStatus() {
Dans l’exemple ci-dessus, `useOnlineStatus` est implémenté avec le duo [`useState`](/reference/react/useState) et [`useEffect`](/reference/react/useEffect). Cependant, ce n’est pas la meilleure solution possible. Elle ne tient pas compte d’un certain nombre de cas limites. Par exemple, elle suppose que lorsque le composant est monté, `isOnline` est déjà à `true`, mais ça peut être faux si le réseau est d’entrée de jeu hors-ligne. Vous pouvez utiliser l’API du navigateur [`navigator.onLine`](https://developer.mozilla.org/fr/docs/Web/API/Navigator/onLine) pour vérifier ça, mais l’utiliser directement ne marchera pas sur le serveur pour générer le HTML initial. En bref, ce code peut être amélioré.
+<<<<<<< HEAD
Heureusement, React 18 inclut une API dédiée appelée [`useSyncExternalStore`](/reference/react/useSyncExternalStore) qui se charge de tous ces problèmes pour vous. Voici votre Hook personnalisé `useOnlineStatus` réécrit pour en tirer avantage :
+=======
+React includes a dedicated API called [`useSyncExternalStore`](/reference/react/useSyncExternalStore) which takes care of all of these problems for you. Here is your `useOnlineStatus` Hook, rewritten to take advantage of this new API:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -2082,7 +2090,6 @@ export function useCounter(delay) {
<Sandpack>
```js
-import { useState } from 'react';
import { useCounter } from './useCounter.js';
export default function Counter() {
diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md
index bfb00c454..16cbcbbfc 100644
--- a/src/content/learn/separating-events-from-effects.md
+++ b/src/content/learn/separating-events-from-effects.md
@@ -439,7 +439,11 @@ function ChatRoom({ roomId, theme }) {
// ...
```
+<<<<<<< HEAD
Ça résout le problème. Remarquez que vous avez dû *retirer* `onConnected` de la liste des dépendances de votre Effet. **Les Événements d’Effets ne sont pas réactifs et ne doivent pas figurer dans vos dépendances.**
+=======
+This solves the problem. Note that you had to *remove* `theme` from the list of your Effect's dependencies, because it's no longer used in the Effect. You also don't need to *add* `onConnected` to it, because **Effect Events are not reactive and must be omitted from dependencies.**
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Vérifiez que le nouveau comportement fonctionne comme attendu :
@@ -973,6 +977,23 @@ Pour corriger ce code, il suffit de suivre les règles.
<Sandpack>
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+
```js
import { useState, useEffect } from 'react';
@@ -1026,6 +1047,22 @@ Si vous enlevez le commentaire avec la directive de mise en sourdine, React vous
<Sandpack>
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
```js
import { useState, useEffect } from 'react';
diff --git a/src/content/learn/setup.md b/src/content/learn/setup.md
new file mode 100644
index 000000000..2c46ee148
--- /dev/null
+++ b/src/content/learn/setup.md
@@ -0,0 +1,28 @@
+---
+title: Setup
+---
+<Intro>
+
+React integrates with tools like editors, TypeScript, browser extensions, and compilers. This section will help you get your environment set up.
+
+</Intro>
+
+## Editor Setup {/*editor-setup*/}
+
+See our [recommended editors](/learn/editor-setup) and learn how to set them up to work with React.
+
+## Using TypeScript {/*using-typescript*/}
+
+TypeScript is a popular way to add type definitions to JavaScript codebases. [Learn how to integrate TypeScript into your React projects](/learn/typescript).
+
+## React Developer Tools {/*react-developer-tools*/}
+
+React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](learn/react-developer-tools).
+
+## React Compiler {/*react-compiler*/}
+
+React Compiler is a tool that automatically optimizes your React app. [Learn more](/learn/react-compiler).
+
+## Next steps {/*next-steps*/}
+
+Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day.
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 7bfaeaf36..f290dac5d 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -1450,7 +1450,11 @@ Si votre *linter* est [configuré pour React](/learn/editor-setup#linting), vous
#### Retirer l'état superflu {/*remove-unnecessary-state*/}
+<<<<<<< HEAD
Dans cet exemple, cliquer sur le bouton devrait demander à l'utilisateur son nom et le saluer dans une alerte. Vous avez essayé de recourir à un état pour vous souvenir du nom, mais pour une raison ou une autre ça affiche toujours « Bonjour ! ».
+=======
+When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason the first time it shows "Hello, !", and then "Hello, [name]!" with the previous input every time after.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Pour corriger ce code, retirez la variable d'état superflue. (Nous explorerons les [raisons de ce problème](/learn/state-as-a-snapshot) prochainement.)
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 79a2f023f..5db7afbd1 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -297,7 +297,11 @@ export default function Square() {
}
```
+<<<<<<< HEAD
La section _browser_ devrait afficher un carré avec un X à l'intérieur, comme ceci :
+=======
+The _browser_ section should be displaying a square with an X in it like this:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
@@ -1333,7 +1337,11 @@ Récapitulons ce qui se passe techniquement lorsque l'utilisateur clique sur la
2. `handleClick` utilise son argument (`0`) pour mettre à jour le premier élément du tableau `squares`, le faisant passer de `null` à `X`.
3. L'état `squares` du composant `Board` est mis à jour, du coup `Board` et tous ses enfants refont leur rendu. Ça modifie la prop `value` du composant `Square` d'index `0` pour la passer de `null` à `X`.
+<<<<<<< HEAD
Au final l'utilisateur voit que la case supérieure gauche a changé après qu'il a cliqué dessus : elle est passée du vide à un `X`.
+=======
+In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Note>
@@ -1414,7 +1422,11 @@ Mais attendez une minute, il y a un problème : essayez de cliquer plusieurs fo
Le `X` est écrasé par un `O` ! Même si ça pourrait constituer une variante intéressante du jeu, nous allons nous en tenir aux règles conventionnelles.
+<<<<<<< HEAD
Lorsque vous marquez une case avec un `X` ou un `O`, vous ne vérifiez pas d'abord si la case a déjà une valeur `X` ou `O`. Vous pouvez corriger ça en faisant un *retour anticipé*. Vérifiez si la case a déjà un `X` ou un `O`. Si la case est déjà remplie, faites un `return` tôt dans la fonction `handleClick`, avant qu'elle ne tente de mettre à jour l'état du plateau.
+=======
+When you mark a square with an `X` or an `O` you aren't first checking to see if the square already has an `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has an `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js {2,3,4}
function handleClick(i) {
@@ -1564,7 +1576,11 @@ Peu importe que vous définissiez `calculateWinner` avant ou après `Board`. Me
</Note>
+<<<<<<< HEAD
Vous appellerez `calculateWinner(squares)` dans la fonction `handleClick` du composant `Board` pour vérifier si un joueur a gagné. Vous pouvez effectuer cette vérification au même endroit que celle pour une case déjà remplie. Dans les deux cas, nous souhaitons un retour anticipé :
+=======
+You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has an `X` or an `O`. We'd like to return early in both cases:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js {2}
function handleClick(i) {
@@ -2259,7 +2275,11 @@ body {
</Sandpack>
+<<<<<<< HEAD
Lorsque vous itérez sur le tableau `history` au sein de la fonction que vous avez passée à `map`, l'argument `squares` vaut tour à tour chaque élément de `history`, et l'argument `move` vaut tour à tour chaque index de l'historique : `0`, `1`, `2`, etc. (Dans la plupart des cas, vous auriez besoin des données elles-mêmes, mais pour notre liste de coups nous n'avons besoin que des indices.)
+=======
+As you iterate through the `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Pour chaque coup de l'historique de notre partie de tic-tac-toe, vous créez un élément de liste `<li>` qui contient un bouton `<button>`. Le bouton a un gestionnaire `onClick` qui appelle une fonction nommée `jumpTo` (que vous n'avez pas encore écrite).
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 6f761b035..7578595f4 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -49,7 +49,14 @@ Une appli entièrement construite en React n'aura généralement qu'un appel à
* `onRecoverableError` **optionnelle** : fonction de rappel appelée lorsque React retombe automatiquement sur ses pieds suite à une erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. Certaines de ces erreurs peuvent exposer leur cause originelle dans `error.cause`.
* `identifierPrefix` **optionnel** : un préfixe textuel utilisé pour les ID générés par [`useId`](/reference/react/useId). Pratique pour éviter les conflits entre les ID au sein de racines multiples sur une même page.
+<<<<<<< HEAD
#### Valeur renvoyée {/*returns*/}
+=======
+ * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
+ * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
`createRoot` renvoie un objet avec deux méthodes : [`render`](#root-render) et [`unmount`](#root-unmount).
@@ -89,6 +96,15 @@ React affichera `<App />` dans le `root`, et prendra la main sur la gestion du D
* Si vous appelez `render` sur la même racine plusieurs fois, React mettra à jour le DOM si nécessaire pour refléter le dernier JSX que vous lui avez passé. React décidera quelles parties du DOM réutiliser et lesquelles nécessitent une création à froid en [« examinant la correspondance »](/learn/preserving-and-resetting-state) entre l'arbre React et celui du précédent rendu. Appeler `render` à nouveau sur la même racine est similaire à un appel de [fonction `set`](/reference/react/useState#setstate) sur le composant racine : React évite les mises à jour DOM superflues.
+* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/client/flushSync) to ensure the initial render runs fully synchronously.
+
+ ```js
+ const root = createRoot(document.getElementById('root'));
+ root.render(<App />);
+ // 🚩 The HTML will not include the rendered <App /> yet:
+ console.log(document.body.innerHTML);
+ ```
+
---
### `root.unmount()` {/*root-unmount*/}
@@ -141,7 +157,7 @@ En général, vous n'aurez besoin de ce code qu'une fois, au démarrage. Il va
<Sandpack>
-```html index.html
+```html public/index.html
<!DOCTYPE html>
<html>
<head><title>Mon appli</title></head>
@@ -341,10 +357,15 @@ export default function App({counter}) {
Il est toutefois rare d'appeler `render` plusieurs fois. En général, vos composants [mettront plutôt à jour l'état](/reference/react/useState).
+<<<<<<< HEAD
### Afficher un dialogue lors d'erreurs non capturées {/*show-a-dialog-for-uncaught-errors*/}
+=======
+### Error logging in production {/*error-logging-in-production*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-<Canary>
+By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`:
+<<<<<<< HEAD
`onUncaughtError` n'est disponible que dans la dernière version React Canary.
</Canary>
@@ -788,16 +809,22 @@ import { createRoot } from "react-dom/client";
import App from "./App.js";
import {reportCaughtError} from "./reportError";
import "./styles.css";
+=======
+```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack", 15]]
+import { createRoot } from "react-dom/client";
+import { reportCaughtError } from "./reportError";
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
const container = document.getElementById("root");
const root = createRoot(container, {
onCaughtError: (error, errorInfo) => {
- if (error.message !== 'Known error') {
+ if (error.message !== "Known error") {
reportCaughtError({
- error,
+ error,
componentStack: errorInfo.componentStack,
});
}
+<<<<<<< HEAD
}
});
root.render(<App />);
@@ -867,13 +894,15 @@ function Throw({error}) {
"react-dom": "canary",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
},
- "main": "/index.js"
-}
+});
```
-</Sandpack>
+The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
+<<<<<<< HEAD
### Afficher un dialogue lors d'erreurs récupérables {/*displaying-a-dialog-for-recoverable-errors*/}
React est susceptible de refaire le rendu d'un composant afin de tenter de retomber sur ses pieds lorsqu'un rendu lève une erreur. S'il réussit, React affichera en console une erreur récupérable, pour notifier le développeur. Pour remplacer ce comportement, vous pouvez fournir l'option `onRecoverableError` :
@@ -1060,37 +1089,93 @@ export function reportUncaughtError({error, cause, componentStack}) {
export function reportRecoverableError({error, cause, componentStack}) {
reportError({ title: "Erreur récupérable", error, componentStack, dismissable: true });
+=======
+1. The <CodeStep step={2}>error</CodeStep> that was thrown.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+Together with `onUncaughtError` and `onRecoverableError`, you can can implement your own error reporting system:
+
+<Sandpack>
+
+```js src/reportError.js
+function reportError({ type, error, errorInfo }) {
+ // The specific implementation is up to you.
+ // `console.error()` is only used for demonstration purposes.
+ console.error(type, error, "Component Stack: ");
+ console.error("Component Stack: ", errorInfo.componentStack);
+}
+
+export function onCaughtErrorProd(error, errorInfo) {
+ if (error.message !== "Known error") {
+ reportError({ type: "Caught", error, errorInfo });
+ }
+}
+
+export function onUncaughtErrorProd(error, errorInfo) {
+ reportError({ type: "Uncaught", error, errorInfo });
+}
+
+export function onRecoverableErrorProd(error, errorInfo) {
+ reportError({ type: "Recoverable", error, errorInfo });
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
}
```
```js src/index.js active
import { createRoot } from "react-dom/client";
import App from "./App.js";
-import {reportRecoverableError} from "./reportError";
-import "./styles.css";
+import {
+ onCaughtErrorProd,
+ onRecoverableErrorProd,
+ onUncaughtErrorProd,
+} from "./reportError";
const container = document.getElementById("root");
const root = createRoot(container, {
- onRecoverableError: (error, errorInfo) => {
- reportRecoverableError({
- error,
- cause: error.cause,
- componentStack: errorInfo.componentStack,
- });
- }
+ // Keep in mind to remove these options in development to leverage
+ // React's default handlers or implement your own overlay for development.
+ // The handlers are only specfied unconditionally here for demonstration purposes.
+ onCaughtError: onCaughtErrorProd,
+ onRecoverableError: onRecoverableErrorProd,
+ onUncaughtError: onUncaughtErrorProd,
});
root.render(<App />);
```
```js src/App.js
-import { useState } from 'react';
-import { ErrorBoundary } from "react-error-boundary";
+import { Component, useState } from "react";
+
+function Boom() {
+ foo.bar = "baz";
+}
+
+class ErrorBoundary extends Component {
+ state = { hasError: false };
+
+ static getDerivedStateFromError(error) {
+ return { hasError: true };
+ }
+ render() {
+ if (this.state.hasError) {
+ return <h1>Something went wrong.</h1>;
+ }
+ return this.props.children;
+ }
+}
+
+<<<<<<< HEAD
// 🚩 Bug : ne faites jamais ça. Ça va forcer une erreur.
let errorThrown = false;
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function App() {
+ const [triggerUncaughtError, settriggerUncaughtError] = useState(false);
+ const [triggerCaughtError, setTriggerCaughtError] = useState(false);
+
return (
<>
+<<<<<<< HEAD
<ErrorBoundary
fallbackRender={fallbackRender}
>
@@ -1128,12 +1213,33 @@ function Throw({error}) {
},
"main": "/index.js"
}
+=======
+ <button onClick={() => settriggerUncaughtError(true)}>
+ Trigger uncaught error
+ </button>
+ {triggerUncaughtError && <Boom />}
+ <button onClick={() => setTriggerCaughtError(true)}>
+ Trigger caught error
+ </button>
+ {triggerCaughtError && (
+ <ErrorBoundary>
+ <Boom />
+ </ErrorBoundary>
+ )}
+ </>
+ );
+}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
</Sandpack>
+<<<<<<< HEAD
---
+=======
+## Troubleshooting {/*troubleshooting*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
## Dépannage {/*troubleshooting*/}
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index 92e6ec097..a42fae6b8 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -41,10 +41,17 @@ React s'attachera au HTML existant à l'intérieur de `domNode`, et prendra la m
* `options` **optionnelles** : un objet avec des options pour la racine React.
+<<<<<<< HEAD
* <CanaryBadge title="Cette fonctionnalité n’est disponible que sur le canal de version Canary" /> `onCaughtError` **optionelle** : fonction de rappel appelée lorsque React capture une erreur au sein d'un Périmètre d'Erreur. Appelée avec l'`error` capturée par le Périmètre d'Erreur, et un objet `errorInfo` contenant la `componentStack`.
* <CanaryBadge title="Cette fonctionnalité n’est disponible que sur le canal de version Canary" /> `onUncaughtError` **optionnelle** : fonction de rappel appelée lorsqu'une erreur est levée sans être capturée par un Périmètre d'Erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`.
* `onRecoverableError` **optionnel** : fonction de rappel appelée lorsque React retombe automatiquement sur ses pieds suite à une erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. Certaines de ces erreurs peuvent exposer leur cause originelle dans `error.cause`.
* `identifierPrefix` **optionnel** : un préfixe textuel utilisé pour les ID générés par [`useId`](/reference/react/useId). Pratique pour éviter les conflits entre les ID au sein de racines multiples sur une même page.
+=======
+ * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`.
+ * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
+ * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Valeur renvoyée {/*returns*/}
@@ -97,7 +104,11 @@ Une appli entièrement construite avec React n'appellera généralement pas `roo
C'est principalement utile si le nœud DOM de votre racine React (ou un de ses ancêtres) est susceptible d'être retiré du DOM par du code tiers. Imaginez par exemple une gestion d'onglet basée sur jQuery qui retire les onglets inactifs du DOM. Si un onglet est retiré, tout ce qu'il contient (y compris d'éventuelles racines React) sera également retiré du DOM. Dans un tel cas, vous devez dire à React de « cesser » de gérer le contenu de la racine retirée en appelant `root.unmount`. Si vous ne le faisiez pas, les composants au sein de la racine retirée ne pourraient pas être nettoyés et libérer leurs ressources globales, telles que des abonnements.
+<<<<<<< HEAD
Un appel à `root.unmount` démontera tous les composants dans cette racine et « détachera » React du nœud DOM racine, y compris pour la gestion événementielle et les états de l'arbre.
+=======
+Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Paramètres {/*root-unmount-parameters*/}
@@ -267,7 +278,11 @@ export default function App() {
</Sandpack>
+<<<<<<< HEAD
Ça ne fonctionne qu'à un niveau de profondeur, et c'est vraiment une échappatoire. N'en abusez pas. React ne rattrapera le coup que pour les contenus textuels, il risque donc de rester quelques incohérences jusqu'au prochain rendu.
+=======
+This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. React will **not** attempt to patch mismatched text content.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
@@ -371,10 +386,15 @@ export default function App({counter}) {
Il est toutefois rare d'appeler [`root.render`](#root-render) sur une racine hydratée. En général, vos composants [mettront plutôt à jour l'état](/reference/react/useState).
+<<<<<<< HEAD
### Afficher un dialogue lors d'erreurs non capturées {/*show-a-dialog-for-uncaught-errors*/}
+=======
+### Error logging in production {/*error-logging-in-production*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-<Canary>
+By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`:
+<<<<<<< HEAD
`onUncaughtError` n'est disponible que dans la dernière version React Canary.
</Canary>
@@ -821,37 +841,107 @@ import { hydrateRoot } from "react-dom/client";
import App from "./App.js";
import {reportCaughtError} from "./reportError";
import "./styles.css";
+=======
+```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack", 15]]
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import { reportCaughtError } from "./reportError";
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
const container = document.getElementById("root");
const root = hydrateRoot(container, <App />, {
onCaughtError: (error, errorInfo) => {
- if (error.message !== 'Known error') {
+ if (error.message !== "Known error") {
reportCaughtError({
error,
- componentStack: errorInfo.componentStack
+ componentStack: errorInfo.componentStack,
});
}
+ },
+});
+```
+
+The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was thrown.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:
+
+<Sandpack>
+
+```js src/reportError.js
+function reportError({ type, error, errorInfo }) {
+ // The specific implementation is up to you.
+ // `console.error()` is only used for demonstration purposes.
+ console.error(type, error, "Component Stack: ");
+ console.error("Component Stack: ", errorInfo.componentStack);
+}
+
+export function onCaughtErrorProd(error, errorInfo) {
+ if (error.message !== "Known error") {
+ reportError({ type: "Caught", error, errorInfo });
}
+}
+
+export function onUncaughtErrorProd(error, errorInfo) {
+ reportError({ type: "Uncaught", error, errorInfo });
+}
+
+export function onRecoverableErrorProd(error, errorInfo) {
+ reportError({ type: "Recoverable", error, errorInfo });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {
+ onCaughtErrorProd,
+ onRecoverableErrorProd,
+ onUncaughtErrorProd,
+} from "./reportError";
+
+const container = document.getElementById("root");
+hydrateRoot(container, <App />, {
+ // Keep in mind to remove these options in development to leverage
+ // React's default handlers or implement your own overlay for development.
+ // The handlers are only specfied unconditionally here for demonstration purposes.
+ onCaughtError: onCaughtErrorProd,
+ onRecoverableError: onRecoverableErrorProd,
+ onUncaughtError: onUncaughtErrorProd,
});
```
```js src/App.js
-import { useState } from 'react';
-import { ErrorBoundary } from "react-error-boundary";
+import { Component, useState } from "react";
-export default function App() {
- const [error, setError] = useState(null);
-
- function handleUnknown() {
- setError("unknown");
+function Boom() {
+ foo.bar = "baz";
+}
+
+class ErrorBoundary extends Component {
+ state = { hasError: false };
+
+ static getDerivedStateFromError(error) {
+ return { hasError: true };
}
- function handleKnown() {
- setError("known");
+ render() {
+ if (this.state.hasError) {
+ return <h1>Something went wrong.</h1>;
+ }
+ return this.props.children;
}
-
+}
+
+export default function App() {
+ const [triggerUncaughtError, settriggerUncaughtError] = useState(false);
+ const [triggerCaughtError, setTriggerCaughtError] = useState(false);
+
return (
<>
+<<<<<<< HEAD
<ErrorBoundary
fallbackRender={fallbackRender}
onReset={(details) => {
@@ -939,6 +1029,26 @@ Vous pouvez utiliser l'option `onRecoverableError` pour afficher des dialogues d
<Sandpack>
```html index.html hidden
+=======
+ <button onClick={() => settriggerUncaughtError(true)}>
+ Trigger uncaught error
+ </button>
+ {triggerUncaughtError && <Boom />}
+ <button onClick={() => setTriggerCaughtError(true)}>
+ Trigger caught error
+ </button>
+ {triggerCaughtError && (
+ <ErrorBoundary>
+ <Boom />
+ </ErrorBoundary>
+ )}
+ </>
+ );
+}
+```
+
+```html public/index.html hidden
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<!DOCTYPE html>
<html>
<head>
@@ -946,6 +1056,7 @@ Vous pouvez utiliser l'option `onRecoverableError` pour afficher des dialogues d
</head>
<body>
<!--
+<<<<<<< HEAD
Dialogue d'erreur en HTML pur puisqu'une erreur
dans l'appli React pourrait la faire crasher.
-->
@@ -1161,6 +1272,14 @@ function Throw({error}) {
}
```
+=======
+ Purposefully using HTML content that differs from the server-rendered content to trigger recoverable errors.
+-->
+<div id="root">Server content before hydration.</div>
+</body>
+</html>
+```
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Sandpack>
## Dépannage {/*troubleshooting*/}
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index b689fc043..f1bf6d032 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -246,6 +246,7 @@ Ces événements sont déclenchés pour les ressources comme [`<audio>`](https:/
Au lieu d'un objet ref (tel que celui renvoyé par [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), vous pouvez passer une fonction à l'attribut `ref`.
```js
+<<<<<<< HEAD
<div ref={(node) => console.log(node)} />
```
@@ -267,22 +268,52 @@ React appellera aussi votre fonction `ref` à chaque fois que vous passez une fo
```js
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<div ref={(node) => {
- console.log(node);
+ console.log('Attached', node);
return () => {
console.log('Nettoyage', node)
}
}}>
-
```
+<<<<<<< HEAD
#### Limitations {/*caveats*/}
* Quand le Mode Strict est activé, React **appellera une fois de plus votre cycle mise en place + nettoyage, uniquement en développement**, avant la première mise en place réelle. C'est une mise à l'épreuve pour vérifier que votre logique de nettoyage reflète bien votre logique de mise en place, et décommissionne ou défait toute la mise en place effectuée. Si ça entraîne des problèmes, écrivez une fonction de nettoyage.
* Si vous passez une fonction de rappel `ref` *différente*, React appellera la fonction de nettoyage renvoyée par la fonction de rappel *précédente*, si celle-ci en avait renvoyé une. Dans le cas contraire, la fonction de rappel `ref` précédente sera appelée avec un argument `null`. La fonction de rappel *suivante* sera alors appelée avec le nœud DOM.
</Canary>
+=======
+[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
+
+When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your the cleanup function returned from the callback.
+
+React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
+
+#### Parameters {/*ref-callback-parameters*/}
+
+* `node`: A DOM node. React will pass you the DOM node when the ref gets attached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily cleanup and re-create during every re-render of the component.
+
+<Note>
+
+#### React 19 added cleanup functions for `ref` callbacks. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
+
+To support backwards compatibility, if a cleanup function is not returned from the `ref` callback, `node` will be called with `null` when the `ref` is detached. This behavior will be removed in a future version.
+
+</Note>
+
+#### Returns {/*returns*/}
+
+* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. This behavior will be removed in a future version.
+
+#### Caveats {/*caveats*/}
+
+* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
+* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index b0c005471..409877bf2 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -1,14 +1,16 @@
---
title: "<form>"
-canary: true
---
+<<<<<<< HEAD
<Canary>
Les extensions de React à `<form>` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `<form>` fonctionne comme [le composant HTML natif du navigateur](https://react.dev/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
Le [composant natif `<form>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form) vous permet de créer des champs interactifs pour envoyer des informations.
@@ -57,7 +59,11 @@ Pour créer des formulaires interactifs, utilisez le [composant natif `<form>` d
### Gérer l'envoi de formulaire côté client {/*handle-form-submission-on-the-client*/}
+<<<<<<< HEAD
Passez une fonction à la prop `action` du formulaire pour exécuter cette fonction lors de l'envoi du formulaire. Les [`formData`](https://developer.mozilla.org/fr/docs/Web/API/FormData) lui seront passées en argument, afin que vous puissiez accéder aux données envoyées par le formulaire. C'est là une différence avec l'attribut [HTML `action`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form#action), qui n'accepte que des URL.
+=======
+Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -76,20 +82,9 @@ export default function Search() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "18.3.0-canary-6db7f4209-20231021",
- "react-dom": "18.3.0-canary-6db7f4209-20231021",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
-```
-
</Sandpack>
+<<<<<<< HEAD
### Gérer l'envoi de formulaire dans une Action Serveur {/*handle-form-submission-with-a-server-action*/}
Affichez un `<form>` avec un champ de saisie et un bouton d'envoi, puis passez-lui une Action Serveur (une fonction dotée de la directive [`'use server'`](/reference/rsc/use-server)) *via* sa prop `action` pour exécuter cette fonction quand le formulaire sera envoyé.
@@ -97,6 +92,15 @@ Affichez un `<form>` avec un champ de saisie et un bouton d'envoi, puis passez-l
Passer une Action Serveur à `<form action>` permet aux utilisateurs d'envoyer le formulaire même sans JavaScript activé, ou avant que le code JavaScript ne soit chargé et exécuté. C'est bien pratique pour les utilisateurs ne disposant que d'une connexion ou d'un appareil lents, ou qui ont JavaScript désactivé. C'est d'ailleurs un comportement similaire à celui des formulaires dont la prop `action` contient une URL.
Vous pouvez utiliser des champs cachés pour fournir des données à l'action du `<form>`. L'Action Serveur récupèrera ces données de champs cachés au moyen d'une instance de [`FormData`](https://developer.mozilla.org/fr/docs/Web/API/FormData).
+=======
+### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
+
+Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
+
+Passing a Server Function to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
+
+You can use hidden form fields to provide data to the `<form>`'s action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```jsx
import { updateCart } from './lib.js';
@@ -136,7 +140,11 @@ function AddToCart({productId}) {
}
```
+<<<<<<< HEAD
Lorsqu'un `<form>` fait son rendu au sein d'un [Composant Serveur](/reference/rsc/use-client), et qu'en prime une [Action Serveur](/reference/rsc/use-server) est passée à la prop `action` du `<form>`, le formulaire bénéficie d'une [amélioration progressive](https://developer.mozilla.org/fr/docs/Glossary/Progressive_Enhancement).
+=======
+When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### Afficher un état d'attente pendant l'envoi du formulaire {/*display-a-pending-state-during-form-submission*/}
@@ -178,17 +186,6 @@ export async function submitForm(query) {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
-```
</Sandpack>
Pour en apprendre davantage, consultez la [documentation de référence du Hook `useFormStatus`](/reference/react-dom/hooks/useFormStatus).
@@ -245,7 +242,7 @@ export default function App() {
]);
async function sendMessage(formData) {
const sentMessage = await deliverMessage(formData.get("message"));
- setMessages([...messages, { text: sentMessage }]);
+ setMessages((messages) => [...messages, { text: sentMessage }]);
}
return <Thread messages={messages} sendMessage={sendMessage} />;
}
@@ -258,19 +255,6 @@ export async function deliverMessage(message) {
}
```
-
-```json package.json hidden
-{
- "dependencies": {
- "react": "18.3.0-canary-6db7f4209-20231021",
- "react-dom": "18.3.0-canary-6db7f4209-20231021",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
-```
-
</Sandpack>
Pour en apprendre davantage, consultez la [documentation de référence du Hook `useOptimistic`](/reference/react/useOptimistic).
@@ -308,8 +292,8 @@ export default function Search() {
```json package.json hidden
{
"dependencies": {
- "react": "18.3.0-canary-6db7f4209-20231021",
- "react-dom": "18.3.0-canary-6db7f4209-20231021",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
@@ -324,11 +308,19 @@ export default function Search() {
Afin d'afficher un message d'erreur d'envoi de formulaire avant même que le *bundle* JavaScript soit chargé et exécuté (à des fins d'amélioration progressive), plusieurs choses sont nécessaires :
+<<<<<<< HEAD
1. le `<form>` doit figurer dans un [Composant Serveur](/reference/rsc/use-client)
2. la fonction passée à la prop `action` du `<form>` doit être une [Action Serveur](/reference/rsc/use-server)
3. le Hook `useActionState` doit être utilisé pour produire le message d'erreur
`useActionState` accepte deux arguments : une [Action Serveur](/reference/rsc/use-server) et un état initial. `useActionState` renvoie deux valeurs : une variable d'état et une action. L'action ainsi renvoyée par `useActionState` doit être passée à la prop `action` du formulaire. La variable d'état renvoyée par `useActionState` peut être utilisée pour afficher le message d'erreur. La valeur renvoyée par [l'Action Serveur](/reference/rsc/use-server) passée à `useActionState` sera utilisée pour mettre à jour la variable d'état.
+=======
+1. `<form>` be rendered by a [Server Component](/reference/rsc/use-client)
+1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions)
+1. the `useActionState` Hook be used to display the error message
+
+`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -374,18 +366,6 @@ export async function signUpNewUser(newEmail) {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
-```
-
</Sandpack>
Apprenez-en avantage sur la mise à jour de l'état depuis une action de formulaire dans la [documentation de référence du Hook `useFormState`](/reference/react/hooks/useActionState).
@@ -422,16 +402,4 @@ export default function Search() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "18.3.0-canary-6db7f4209-20231021",
- "react-dom": "18.3.0-canary-6db7f4209-20231021",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
-```
-
</Sandpack>
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index dd0ce35b0..e05972e5e 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -32,6 +32,7 @@ Pour afficher un champ de saisie, utilisez le [composant natif `<input>` du navi
`<input>` prend en charge toutes les [props communes aux éléments](/reference/react-dom/components/common#props).
+<<<<<<< HEAD
<Canary>
Les extensions de React à la prop `formAction` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `formAction` est limitée à son fonctionnement [du composant HTML natif du navigateur](/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
@@ -39,6 +40,9 @@ Les extensions de React à la prop `formAction` ne sont actuellement disponibles
</Canary>
[`formAction`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input#formaction) : une chaîne de caractères ou une fonction. Cette prop a priorité sur le `<form action>` pour les champs de `type="submit"` ou `type="image"`. Lorsqu'une URL est passée à `formAction`, le formulaire se comporte comme un formulaire HTML classique. Mais si une fonction est passée à `formAction`, la fonction traitera l'envoi du formulaire. Allez voir [`<form action>`](/reference/react-dom/components/form#props).
+=======
+- [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Un champ de saisie peut devenir un [champ contrôlé](#controlling-an-input-with-a-state-variable) en lui passant une de ces props :
@@ -306,7 +310,11 @@ Donnez un `name` à votre `<input>`, par exemple `<input name="firstName" defaul
<Pitfall>
+<<<<<<< HEAD
Par défaut, *n'importe quel* `<button>` à l'intérieur d'un `<form>` va le soumettre. Cela peut être surprenant ! Si vous avez votre propre composant React `Button`, envisagez de renvoyer [`<button type="button">`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/button) au lieu de `<button>`. Ensuite, pour être explicite, utilisez `<button type="submit">` pour les boutons qui *sont* censés soumettre le formulaire.
+=======
+By default, a `<button>` inside a `<form>` without a `type` attribute will submit it. This can be surprising! If you have your own custom `Button` React component, consider using [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of `<button>` (with no type). Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Pitfall>
diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index b815c1c96..1fea54ac8 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -1,14 +1,16 @@
---
link: "<link>"
-canary: true
---
+<<<<<<< HEAD
<Canary>
Les extensions de React à `<link>` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `<link>` fonctionne comme [le composant HTML natif du navigateur](/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
Le [composant natif `<link>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/link) vous permet d'utiliser des ressources externes telles que des feuilles de styles, ou d'annoter le document avec des métadonnées de type lien.
@@ -160,9 +162,13 @@ export default function SiteMapPage() {
### Contrôler la priorisation des feuilles de styles {/*controlling-stylesheet-precedence*/}
+<<<<<<< HEAD
Les feuilles de styles peuvent entrer en conflit, et lorsque c'est le cas, le navigateur favorise celle listée le plus tard dans le document. React vous permet de contrôler l'ordre de vos feuilles de styles avec la prop `precedence`. Dans cet exemple, deux composants injectent des feuilles de styles, et celle avec la plus forte précédence est injectée plus tard dans le document, même si le composant qui la produit est situé plus tôt.
{/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/}
+=======
+Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<SandpackWithHTMLOutput>
@@ -174,24 +180,35 @@ export default function HomePage() {
<ShowRenderedHTML>
<FirstComponent />
<SecondComponent />
+ <ThirdComponent/>
...
</ShowRenderedHTML>
);
}
function FirstComponent() {
- return <link rel="stylesheet" href="first.css" precedence="high" />;
+ return <link rel="stylesheet" href="first.css" precedence="first" />;
}
function SecondComponent() {
- return <link rel="stylesheet" href="second.css" precedence="low" />;
+ return <link rel="stylesheet" href="second.css" precedence="second" />;
+}
+
+function ThirdComponent() {
+ return <link rel="stylesheet" href="third.css" precedence="first" />;
}
```
</SandpackWithHTMLOutput>
+<<<<<<< HEAD
### Dédoublonnement des feuilles de styles {/*deduplicated-stylesheet-rendering*/}
+=======
+Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher".
+
+### Deduplicated stylesheet rendering {/*deduplicated-stylesheet-rendering*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Si vous injectez la même feuille de styles depuis plusieurs composants, React n'injectera qu'un seul `<link>` dans l'en-tête du document.
diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md
index f0a4e8b30..bde00bf76 100644
--- a/src/content/reference/react-dom/components/meta.md
+++ b/src/content/reference/react-dom/components/meta.md
@@ -1,8 +1,8 @@
---
meta: "<meta>"
-canary: true
---
+<<<<<<< HEAD
<Canary>
Les extensions de React à `<meta>` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `<meta>` fonctionne comme [le composant HTML natif du navigateur](/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
@@ -10,6 +10,8 @@ Les extensions de React à `<meta>` ne sont actuellement disponibles que sur les
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
Le [composant natif `<meta>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/meta) vous permet d'ajouter des métadonnées au document ou à des éléments spécifiques.
diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
index ded58f252..0ca3938eb 100644
--- a/src/content/reference/react-dom/components/script.md
+++ b/src/content/reference/react-dom/components/script.md
@@ -1,14 +1,16 @@
---
script: "<script>"
-canary: true
---
+<<<<<<< HEAD
<Canary>
Les extensions de React à `<script>` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `<script>` fonctionne comme [le composant HTML natif du navigateur](/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
Le [composant natif `<script>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/script) vous permet d'ajouter un script à votre document.
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
index ce1684a1b..266d69f3d 100644
--- a/src/content/reference/react-dom/components/style.md
+++ b/src/content/reference/react-dom/components/style.md
@@ -1,14 +1,16 @@
---
style: "<style>"
-canary: true
---
+<<<<<<< HEAD
<Canary>
Les extensions de React à `<style>` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `<style>` fonctionne comme [le composant HTML natif du navigateur](/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
Le [composant natif `<style>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/style) vous permet d'ajouter des feuilles de styles définies à la volée dans votre document.
@@ -58,8 +60,14 @@ Pour activer ces comportements, fournissez les props `href` et `precedence`. Re
Pour finir, ce comportement a deux limitations :
+<<<<<<< HEAD
* React ignorera les changements à ces props après le rendu de la feuille de styles. (React produira un avertissement en développement si ce cas survient.)
* React est susceptible de laisser la feuille de styles dans le DOM même après le démontage du composant qui l'a produit.
+=======
+* React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
+* React will drop all extraneous props when using the `precedence` prop (beyond `href` and `precedence`).
+* React may leave the style in the DOM even after the component that rendered it has been unmounted.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
@@ -69,7 +77,15 @@ Pour finir, ce comportement a deux limitations :
Si un composant dépend de certains styles CSS pour pouvoir fonctionner correctement, vous pouvez injecter une feuille de styles définie à la volée au sein de ce composant.
+<<<<<<< HEAD
Si vous fournissez les props `href` et `precedence`, votre composant suspendra le temps du chargement de la feuille de styles. (Même pour des feuilles définies à la volée, il peut y avoir un temps de chargement en raison de ressources extérieures référencées par les styles, telles que des fontes ou images.) La prop `href` devrait identifier la feuille de styles de façon unique, car React dédoublonnera les feuilles de styles de même `href`.
+=======
+The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
+If you supply a `precedence` prop, React will reorder inline stylesheets based on the order these values appear in the component tree.
+
+Inline stylesheets will not trigger Suspense boundaries while they're loading.
+Even if they load async resources like fonts or images.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<SandpackWithHTMLOutput>
diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
index 308e3ca21..160b6916c 100644
--- a/src/content/reference/react-dom/components/title.md
+++ b/src/content/reference/react-dom/components/title.md
@@ -1,8 +1,8 @@
---
title: "<title>"
-canary: true
---
+<<<<<<< HEAD
<Canary>
Les extensions de React à `<title>` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `<title>` fonctionne comme [le composant HTML natif du navigateur](/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
@@ -10,6 +10,8 @@ Les extensions de React à `<title>` ne sont actuellement disponibles que sur le
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
Le [composant natif `<title>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/title) vous permet de préciser le titre de votre document.
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
index e869a487f..2930a3d6f 100644
--- a/src/content/reference/react-dom/createPortal.md
+++ b/src/content/reference/react-dom/createPortal.md
@@ -251,7 +251,7 @@ Les portails peuvent vous être utiles si votre racine React n'est qu'une partie
<Sandpack>
-```html index.html
+```html public/index.html
<!DOCTYPE html>
<html>
<head><title>Mon appli</title></head>
diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md
index 870d0b0f3..1f71247e4 100644
--- a/src/content/reference/react-dom/hooks/index.md
+++ b/src/content/reference/react-dom/hooks/index.md
@@ -12,6 +12,7 @@ Le module `react-dom` contient les Hooks qui ne sont pris en charge que dans des
## Hooks de formulaires {/*form-hooks*/}
+<<<<<<< HEAD
<Canary>
Les Hooks de formulaires ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
@@ -21,6 +22,11 @@ Les Hooks de formulaires ne sont actuellement disponibles que sur les canaux de
Les *formulaires* vous permettent de créer des contrôles interactifs pour envoyer des informations. Pour gérer les formulaires dans vos composants, utilisez l'un des Hooks suivants :
* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) vous permet de mettre à jour l'UI sur base de l'état d'un formulaire.
+=======
+*Forms* let you create interactive controls for submitting information. To manage forms in your components, use one of these Hooks:
+
+* [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of a form.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js
function Form({ action }) {
diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
index c9f078ff3..9e3c3e3be 100644
--- a/src/content/reference/react-dom/hooks/useFormStatus.md
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -1,14 +1,16 @@
---
title: useFormStatus
-canary: true
---
+<<<<<<< HEAD
<Canary>
Le Hook `useFormStatus` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
`useFormStatus` est un Hook qui vous fournit des informations d'état sur le dernier envoi de formulaire parent.
@@ -118,6 +120,7 @@ export async function submitForm(query) {
await new Promise((res) => setTimeout(res, 1000));
}
```
+<<<<<<< HEAD
```json package.json hidden
{
@@ -131,6 +134,9 @@ export async function submitForm(query) {
}
```
</Sandpack>
+=======
+</Sandpack>
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Pitfall>
@@ -237,6 +243,7 @@ button {
```
+<<<<<<< HEAD
```json package.json hidden
{
"dependencies": {
@@ -249,6 +256,9 @@ button {
}
```
</Sandpack>
+=======
+</Sandpack>
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index 85b91339c..f14a2da0a 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -41,6 +41,7 @@ Le module `react-dom` fournit deux points d'entrée supplémentaires :
---
+<<<<<<< HEAD
## API dépréciées {/*deprecated-apis*/}
<Deprecated>
@@ -53,3 +54,15 @@ Ces API seront retirées d'une future version majeure de React.
* [`hydrate`](/reference/react-dom/hydrate) monte une arborescence dans le DOM créé à partir du HTML serveur. Elle est remplacée par la plus récente [`hydrateRoot`](/reference/react-dom/client/hydrateRoot).
* [`render`](/reference/react-dom/render) monte une arborescence dans le DOM. Elle est remplacée par [`createRoot`](/reference/react-dom/client/createRoot).
* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode) démonte une arborescence du DOM. Elle est remplacée par [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
+=======
+## Removed APIs {/*removed-apis*/}
+
+These APIs were removed in React 19:
+
+* [`findDOMNode`](https://18.react.dev/reference/react-dom/findDOMNode): see [alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives).
+* [`hydrate`](https://18.react.dev/reference/react-dom/hydrate): use [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead.
+* [`render`](https://18.react.dev/reference/react-dom/render): use [`createRoot`](/reference/react-dom/client/createRoot) instead.
+* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode): use [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) instead.
+* [`renderToNodeStream`](https://18.react.dev/reference/react-dom/server/renderToNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead.
+* [`renderToStaticNodeStream`](https://18.react.dev/reference/react-dom/server/renderToStaticNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
diff --git a/src/content/reference/react-dom/preconnect.md b/src/content/reference/react-dom/preconnect.md
index 2e2ce2305..79ae9da52 100644
--- a/src/content/reference/react-dom/preconnect.md
+++ b/src/content/reference/react-dom/preconnect.md
@@ -1,14 +1,16 @@
---
title: preconnect
-canary: true
---
+<<<<<<< HEAD
<Canary>
La fonction `preconnect` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
`preconnect` vous permet de vous connecter en avance à un serveur depuis lequel vous avez l'intention de charger des ressources.
diff --git a/src/content/reference/react-dom/prefetchDNS.md b/src/content/reference/react-dom/prefetchDNS.md
index da5a59bfc..aaa5f9b95 100644
--- a/src/content/reference/react-dom/prefetchDNS.md
+++ b/src/content/reference/react-dom/prefetchDNS.md
@@ -1,14 +1,16 @@
---
title: prefetchDNS
-canary: true
---
+<<<<<<< HEAD
<Canary>
La fonction `prefetchDNS` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
`prefetchDNS` vous permet de récupérer en avance l'IP d'un serveur depuis lequel vous avez l'intention de charger des ressources.
diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md
index 2d26e82c8..3e7e0cda7 100644
--- a/src/content/reference/react-dom/preinit.md
+++ b/src/content/reference/react-dom/preinit.md
@@ -1,14 +1,16 @@
---
title: preinit
-canary: true
---
+<<<<<<< HEAD
<Canary>
La fonction `preinit` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Note>
[Les frameworks basés sur React](/learn/start-a-new-react-project) s'occupent fréquemment pour vous du chargement des ressources, de sorte que vous n'aurez peut-être pas besoin d'appeler ces API vous-même. Consultez la documentation de votre framework pour en savoir plus à ce sujet.
@@ -51,6 +53,7 @@ La fonction `preinit` suggère au navigateur de commencer à télécharger puis
#### Paramètres {/*parameters*/}
+<<<<<<< HEAD
* `href` : une chaîne de caractères. L'URL de la ressource que vous souhaitez télécharger et évaluer.
* `options` : un objet. Il contient les propriétés suivantes :
* `as` : une chaîne de caractères obligatoire. Le type de la ressource. Les valeurs autorisées sont `script` et `style`.
@@ -59,6 +62,16 @@ La fonction `preinit` suggère au navigateur de commencer à télécharger puis
* `integrity` : une chaîne de caractères. Une empreinte cryptographique de la ressource afin de [vérifier son authenticité](https://developer.mozilla.org/fr/docs/Web/Security/Subresource_Integrity).
* `nonce` : une chaîne de caractères. Un [nonce cryptographique autorisant la ressource](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/nonce) dans le cadre d'une Politique de Sécurité de Contenu (CSP) stricte.
* `fetchPriority` : une chaîne de caractères. Suggère une priorité relative pour le chargement de la ressource. Les valeurs possibles sont `auto` (par défaut), `high` ou `low`.
+=======
+* `href`: a string. The URL of the resource you want to download and execute.
+* `options`: an object. It contains the following properties:
+ * `as`: a required string. The type of resource. Its possible values are `script` and `style`.
+ * `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`.
+ * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
+ * `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
+ * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
+ * `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Valeur renvoyée {/*returns*/}
diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md
index b96f4dbd6..c7222dfd5 100644
--- a/src/content/reference/react-dom/preinitModule.md
+++ b/src/content/reference/react-dom/preinitModule.md
@@ -1,14 +1,16 @@
---
title: preinitModule
-canary: true
---
+<<<<<<< HEAD
<Canary>
La fonction `preinitModule` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Note>
[Les frameworks basés sur React](/learn/start-a-new-react-project) s'occupent fréquemment pour vous du chargement des ressources, de sorte que vous n'aurez peut-être pas besoin d'appeler ces API vous-même. Consultez la documentation de votre framework pour en savoir plus à ce sujet.
diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md
index 804e822b1..6c96faab8 100644
--- a/src/content/reference/react-dom/preload.md
+++ b/src/content/reference/react-dom/preload.md
@@ -1,14 +1,16 @@
---
title: preload
-canary: true
---
+<<<<<<< HEAD
<Canary>
La fonction `preload` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Note>
[Les frameworks basés sur React](/learn/start-a-new-react-project) s'occupent fréquemment pour vous du chargement des ressources, de sorte que vous n'aurez peut-être pas besoin d'appeler ces API vous-même. Consultez la documentation de votre framework pour en savoir plus à ce sujet.
diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md
index 60a7bc706..4155a27e5 100644
--- a/src/content/reference/react-dom/preloadModule.md
+++ b/src/content/reference/react-dom/preloadModule.md
@@ -1,14 +1,16 @@
---
title: preloadModule
-canary: true
---
+<<<<<<< HEAD
<Canary>
La fonction `preloadModule` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Note>
[Les frameworks basés sur React](/learn/start-a-new-react-project) s'occupent fréquemment pour vous du chargement des ressources, de sorte que vous n'aurez peut-être pas besoin d'appeler ces API vous-même. Consultez la documentation de votre framework pour en savoir plus à ce sujet.
diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md
index 526931d44..a70f36e0c 100644
--- a/src/content/reference/react-dom/server/index.md
+++ b/src/content/reference/react-dom/server/index.md
@@ -4,7 +4,11 @@ title: API React DOM côté serveur
<Intro>
+<<<<<<< HEAD
Les API `react-dom/server` vous permettent de produire le HTML de vos composants React côté serveur. Ces API ne sont utilisées que côté serveur, à la racine de votre appli, pour générer le HTML initial. Un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) pourrait les appeler pour vous. La plupart de vos composants n'auront pas besoin de les importer, encore moins de les utiliser.
+=======
+The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Intro>
@@ -14,8 +18,12 @@ Les API `react-dom/server` vous permettent de produire le HTML de vos composants
Ces méthodes sont uniquement disponibles pour les environnements dotés de [flux Node.js](https://nodejs.org/api/stream.html) :
+<<<<<<< HEAD
* [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) fait le rendu d'un arbre React dans un [flux Node.js](https://nodejs.org/api/stream.html) consommable par une *pipeline*.
* [`renderToStaticNodeStream`](/reference/react-dom/server/renderToStaticNodeStream) fait le rendu d'un arbre React non interactif dans un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams).
+=======
+* [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
@@ -27,13 +35,18 @@ Ces méthodes sont uniquement disponibles pour les environnements dotés de [flu
---
+<<<<<<< HEAD
## API côté serveur pour les environnements sans flux {/*server-apis-for-non-streaming-environments*/}
+=======
+## Legacy Server APIs for non-streaming environments {/*legacy-server-apis-for-non-streaming-environments*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Ces méthodes peuvent être utilisés dans les environnements qui ne prennent pas les flux en charge :
* [`renderToString`](/reference/react-dom/server/renderToString) produit le HTML d'un arbre React sous forme d'une chaîne de caractères.
* [`renderToStaticMarkup`](/reference/react-dom/server/renderToStaticMarkup) produit le HTML non interactif d'un arbre React sous forme d'une chaîne de caractères.
+<<<<<<< HEAD
Leurs fonctionnalités sont limitées par rapport aux API à base de flux.
---
@@ -47,3 +60,6 @@ Ces API seront retirées d'une future version majeure de React.
</Deprecated>
* [`renderToNodeStream`](/reference/react-dom/server/renderToNodeStream) fait le rendu d'un arbre React dans un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams) (dépréciée).
+=======
+They have limited functionality compared to the streaming APIs.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md
index f8f5a93ac..650fb2a51 100644
--- a/src/content/reference/react-dom/server/renderToString.md
+++ b/src/content/reference/react-dom/server/renderToString.md
@@ -86,9 +86,15 @@ app.use('/', (request, response) => {
## Alternatives {/*alternatives*/}
+<<<<<<< HEAD
### Migrer de `renderToString` vers une méthode de *streaming* côté serveur {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
`renderToString` renvoie immédiatement un texte, elle ne prend donc en charge ni le *streaming* ni la suspension pour chargement de données.
+=======
+### Migrating from `renderToString` to a streaming render on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
+
+`renderToString` returns a string immediately, so it does not support streaming content as it loads.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Autant que possible nous conseillons d'utiliser plutôt une de ces alternatives plus capables :
@@ -99,7 +105,24 @@ Vous pouvez continuer avec `renderToString` si votre environnement serveur ne pr
---
+<<<<<<< HEAD
### Retirer `renderToString` du code côté client {/*removing-rendertostring-from-the-client-code*/}
+=======
+### Migrating from `renderToString` to a static prerender on the server {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/}
+
+`renderToString` returns a string immediately, so it does not support waiting for data to load for static HTML generation.
+
+We recommend using these fully-featured alternatives:
+
+* If you use Node.js, use [`prerenderToNodeStream`.](/reference/react-dom/static/prerenderToNodeStream)
+* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`prerender`.](/reference/react-dom/static/prerender)
+
+You can continue using `renderToString` if your static site generation environment does not support streams.
+
+---
+
+### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Il arrive que `renderToString` soit utilisée côté client pour convertir un composant en HTML.
@@ -135,6 +158,12 @@ L'appel à [`flushSync`](/reference/react-dom/flushSync) est nécessaire pour qu
`renderToString` ne prend pas pleinement en charge Suspense.
+<<<<<<< HEAD
Si un composant suspend (il est par exemple défini *via* [`lazy`](/reference/react/lazy) ou charge des données), `renderToString` n'attendra pas l'aboutissement du traitement. `renderToString` cherchera plutôt le périmètre [`<Suspense>`](/reference/react/Suspense) parent le plus proche et affichera le HTML de sa prop `fallback`. Le contenu n'apparaîtra pas jusqu'à ce que le code client soit chargé.
+=======
+If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [`<Suspense>`](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads.
+
+To solve this, use one of the [recommended streaming solutions.](#alternatives) For server side rendering, they can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. For static site generation, they can wait for all the content to resolve before generating the static HTML.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Pour résoudre ça, utilisez une de nos [solutions recommandées de *streaming*](#migrating-from-rendertostring-to-a-streaming-method-on-the-server). Elles peuvent *streamer* le contenu par morceaux au fil de l'aboutissement des traitements côté serveur, afin que l'utilisateur puisse bénéficier d'un chargement progressif de la page avant même que le code client ne soit chargé.
diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md
new file mode 100644
index 000000000..988ec85dc
--- /dev/null
+++ b/src/content/reference/react-dom/static/index.md
@@ -0,0 +1,28 @@
+---
+title: Static React DOM APIs
+---
+
+<Intro>
+
+The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
+
+</Intro>
+
+---
+
+## Static APIs for Web Streams {/*static-apis-for-web-streams*/}
+
+These methods are only available in the environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), which includes browsers, Deno, and some modern edge runtimes:
+
+* [`prerender`](/reference/react-dom/static/prerender) renders a React tree to static HTML with a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
+
+
+---
+
+## Static APIs for Node.js Streams {/*static-apis-for-nodejs-streams*/}
+
+These methods are only available in the environments with [Node.js Streams](https://nodejs.org/api/stream.html):
+
+* [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) renders a React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html)
+
+
diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md
new file mode 100644
index 000000000..aac6d96b5
--- /dev/null
+++ b/src/content/reference/react-dom/static/prerender.md
@@ -0,0 +1,323 @@
+---
+title: prerender
+---
+
+<Intro>
+
+`prerender` renders a React tree to a static HTML string using a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API).
+
+```js
+const {prelude} = await prerender(reactNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+<Note>
+
+This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) instead.
+
+</Note>
+
+---
+
+## Reference {/*reference*/}
+
+### `prerender(reactNode, options?)` {/*prerender*/}
+
+Call `prerender` to render your app to static HTML.
+
+```js
+import { prerender } from 'react-dom/static';
+
+async function handler(request) {
+ const {prelude} = await prerender(<App />, {
+ bootstrapScripts: ['/main.js']
+ });
+ return new Response(prelude, {
+ headers: { 'content-type': 'text/html' },
+ });
+}
+```
+
+On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`. It is expected to represent the entire document, so the App component should render the `<html>` tag.
+
+* **optional** `options`: An object with static generation options.
+ * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag.
+ * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all.
+ * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
+ * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
+ * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
+ * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToReadableStream#setting-the-status-code) before the shell is emitted.
+ * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
+ * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
+
+#### Returns {/*returns*/}
+
+`prerender` returns a Promise:
+- If rendering the is successful, the Promise will resolve to an object containing:
+ - `prelude`: a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
+- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)
+
+#### Caveats {/*caveats*/}
+
+`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
+
+
+<Note>
+
+### When should I use `prerender`? {/*when-to-use-prerender*/}
+
+The static `prerender` API is used for static server-side generation (SSG). Unlike `renderToString`, `prerender` waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream).
+
+</Note>
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree to a stream of static HTML {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
+
+Call `prerender` to render your React tree to static HTML into a [Readable Web Stream:](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream):
+
+```js [[1, 4, "<App />"], [2, 5, "['/main.js']"]]
+import { prerender } from 'react-dom/static';
+
+async function handler(request) {
+ const {prelude} = await prerender(<App />, {
+ bootstrapScripts: ['/main.js']
+ });
+ return new Response(prelude, {
+ headers: { 'content-type': 'text/html' },
+ });
+}
+```
+
+Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>bootstrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
+
+For example, it might look like this:
+
+```js [[1, 1, "App"]]
+export default function App() {
+ return (
+ <html>
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet" href="/styles.css"></link>
+ <title>My app</title>
+ </head>
+ <body>
+ <Router />
+ </body>
+ </html>
+ );
+}
+```
+
+React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) and your <CodeStep step={2}>bootstrap `<script>` tags</CodeStep> into the resulting HTML stream:
+
+```html [[2, 5, "/main.js"]]
+<!DOCTYPE html>
+<html>
+ <!-- ... HTML from your components ... -->
+</html>
+<script src="/main.js" async=""></script>
+```
+
+On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
+
+```js [[1, 4, "<App />"]]
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App />);
+```
+
+This will attach event listeners to the static server-generated HTML and make it interactive.
+
+<DeepDive>
+
+#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/}
+
+The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content.
+
+However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop:
+
+```js {1,6}
+export default function App({ assetMap }) {
+ return (
+ <html>
+ <head>
+ <title>My app</title>
+ <link rel="stylesheet" href={assetMap['styles.css']}></link>
+ </head>
+ ...
+ </html>
+ );
+}
+```
+
+On the server, render `<App assetMap={assetMap} />` and pass your `assetMap` with the asset URLs:
+
+```js {1-5,8,9}
+// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
+const assetMap = {
+ 'styles.css': '/styles.123456.css',
+ 'main.js': '/main.123456.js'
+};
+
+async function handler(request) {
+ const {prelude} = await prerender(<App assetMap={assetMap} />, {
+ bootstrapScripts: [assetMap['/main.js']]
+ });
+ return new Response(prelude, {
+ headers: { 'content-type': 'text/html' },
+ });
+}
+```
+
+Since your server is now rendering `<App assetMap={assetMap} />`, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this:
+
+```js {9-10}
+// You'd need to get this JSON from your build tooling.
+const assetMap = {
+ 'styles.css': '/styles.123456.css',
+ 'main.js': '/main.123456.js'
+};
+
+async function handler(request) {
+ const {prelude} = await prerender(<App assetMap={assetMap} />, {
+ // Careful: It's safe to stringify() this because this data isn't user-generated.
+ bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
+ bootstrapScripts: [assetMap['/main.js']],
+ });
+ return new Response(prelude, {
+ headers: { 'content-type': 'text/html' },
+ });
+}
+```
+
+In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
+
+```js {4}
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App assetMap={window.assetMap} />);
+```
+
+Both client and server render `App` with the same `assetMap` prop, so there are no hydration errors.
+
+</DeepDive>
+
+---
+
+### Rendering a React tree to a string of static HTML {/*rendering-a-react-tree-to-a-string-of-static-html*/}
+
+Call `prerender` to render your app to a static HTML string:
+
+```js
+import { prerender } from 'react-dom/static';
+
+async function renderToString() {
+ const {prelude} = await prerender(<App />, {
+ bootstrapScripts: ['/main.js']
+ });
+
+ const reader = prelude.getReader();
+ let content = '';
+ while (true) {
+ const {done, value} = await reader.read();
+ if (done) {
+ return content;
+ }
+ content += Buffer.from(value).toString('utf8');
+ }
+}
+```
+
+This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
+
+---
+
+### Waiting for all data to load {/*waiting-for-all-data-to-load*/}
+
+`prerender` waits for all data to load before finishing the static HTML generation and resolving. For example, consider a profile page that shows a cover, a sidebar with friends and photos, and a list of posts:
+
+```js
+function ProfilePage() {
+ return (
+ <ProfileLayout>
+ <ProfileCover />
+ <Sidebar>
+ <Friends />
+ <Photos />
+ </Sidebar>
+ <Suspense fallback={<PostsGlimmer />}>
+ <Posts />
+ </Suspense>
+ </ProfileLayout>
+ );
+}
+```
+
+Imagine that `<Posts />` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerender` will wait for the suspended content to finish before resolving to the static HTML.
+
+<Note>
+
+**Only Suspense-enabled data sources will activate the Suspense component.** They include:
+
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a Promise with [`use`](/reference/react/use)
+
+Suspense **does not** detect when data is fetched inside an Effect or event handler.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
+
+</Note>
+
+---
+
+### Aborting prerendering {/*aborting-prerendering*/}
+
+You can force the prerender to "give up" after a timeout:
+
+```js {2-5,11}
+async function renderToString() {
+ const controller = new AbortController();
+ setTimeout(() => {
+ controller.abort()
+ }, 10000);
+
+ try {
+ // the prelude will contain all the HTML that was prerendered
+ // before the controller aborted.
+ const {prelude} = await prerender(<App />, {
+ signal: controller.signal,
+ });
+ //...
+```
+
+Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
+
+The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads.
+
+To stream content as it loads, use a streaming server render API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream).
+
\ No newline at end of file
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
new file mode 100644
index 000000000..fb8073ef0
--- /dev/null
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -0,0 +1,323 @@
+---
+title: prerenderToNodeStream
+---
+
+<Intro>
+
+`prerenderToNodeStream` renders a React tree to a static HTML string using a [Node.js Stream.](https://nodejs.org/api/stream.html).
+
+```js
+const {prelude} = await prerenderToNodeStream(reactNode, options?)
+```
+
+</Intro>
+
+<InlineToc />
+
+<Note>
+
+This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`prerender`](/reference/react-dom/static/prerender) instead.
+
+</Note>
+
+---
+
+## Reference {/*reference*/}
+
+### `prerenderToNodeStream(reactNode, options?)` {/*prerender*/}
+
+Call `prerenderToNodeStream` to render your app to static HTML.
+
+```js
+import { prerenderToNodeStream } from 'react-dom/static';
+
+// The route handler syntax depends on your backend framework
+app.use('/', async (request, response) => {
+ const { prelude } = await prerenderToNodeStream(<App />, {
+ bootstrapScripts: ['/main.js'],
+ });
+
+ response.setHeader('Content-Type', 'text/plain');
+ prelude.pipe(response);
+});
+```
+
+On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`. It is expected to represent the entire document, so the App component should render the `<html>` tag.
+
+* **optional** `options`: An object with static generation options.
+ * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag.
+ * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all.
+ * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
+ * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
+ * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
+ * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted.
+ * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
+ * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
+
+#### Returns {/*returns*/}
+
+`prerenderToNodeStream` returns a Promise:
+- If rendering the is successful, the Promise will resolve to an object containing:
+ - `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
+- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)
+
+#### Caveats {/*caveats*/}
+
+`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
+
+<Note>
+
+### When should I use `prerenderToNodeStream`? {/*when-to-use-prerender*/}
+
+The static `prerenderToNodeStream` API is used for static server-side generation (SSG). Unlike `renderToString`, `prerenderToNodeStream` waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream).
+
+</Note>
+
+---
+
+## Usage {/*usage*/}
+
+### Rendering a React tree to a stream of static HTML {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
+
+Call `prerenderToNodeStream` to render your React tree to static HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html):
+
+```js [[1, 5, "<App />"], [2, 6, "['/main.js']"]]
+import { prerenderToNodeStream } from 'react-dom/static';
+
+// The route handler syntax depends on your backend framework
+app.use('/', async (request, response) => {
+ const { prelude } = await prerenderToNodeStream(<App />, {
+ bootstrapScripts: ['/main.js'],
+ });
+
+ response.setHeader('Content-Type', 'text/plain');
+ prelude.pipe(response);
+});
+```
+
+Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>bootstrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
+
+For example, it might look like this:
+
+```js [[1, 1, "App"]]
+export default function App() {
+ return (
+ <html>
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet" href="/styles.css"></link>
+ <title>My app</title>
+ </head>
+ <body>
+ <Router />
+ </body>
+ </html>
+ );
+}
+```
+
+React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) and your <CodeStep step={2}>bootstrap `<script>` tags</CodeStep> into the resulting HTML stream:
+
+```html [[2, 5, "/main.js"]]
+<!DOCTYPE html>
+<html>
+ <!-- ... HTML from your components ... -->
+</html>
+<script src="/main.js" async=""></script>
+```
+
+On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
+
+```js [[1, 4, "<App />"]]
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App />);
+```
+
+This will attach event listeners to the static server-generated HTML and make it interactive.
+
+<DeepDive>
+
+#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/}
+
+The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content.
+
+However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop:
+
+```js {1,6}
+export default function App({ assetMap }) {
+ return (
+ <html>
+ <head>
+ <title>My app</title>
+ <link rel="stylesheet" href={assetMap['styles.css']}></link>
+ </head>
+ ...
+ </html>
+ );
+}
+```
+
+On the server, render `<App assetMap={assetMap} />` and pass your `assetMap` with the asset URLs:
+
+```js {1-5,8,9}
+// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
+const assetMap = {
+ 'styles.css': '/styles.123456.css',
+ 'main.js': '/main.123456.js'
+};
+
+app.use('/', async (request, response) => {
+ const { prelude } = await prerenderToNodeStream(<App />, {
+ bootstrapScripts: [assetMap['/main.js']]
+ });
+
+ response.setHeader('Content-Type', 'text/html');
+ prelude.pipe(response);
+});
+```
+
+Since your server is now rendering `<App assetMap={assetMap} />`, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this:
+
+```js {9-10}
+// You'd need to get this JSON from your build tooling.
+const assetMap = {
+ 'styles.css': '/styles.123456.css',
+ 'main.js': '/main.123456.js'
+};
+
+app.use('/', async (request, response) => {
+ const { prelude } = await prerenderToNodeStream(<App />, {
+ // Careful: It's safe to stringify() this because this data isn't user-generated.
+ bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
+ bootstrapScripts: [assetMap['/main.js']],
+ });
+
+ response.setHeader('Content-Type', 'text/html');
+ prelude.pipe(response);
+});
+```
+
+In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
+
+```js {4}
+import { hydrateRoot } from 'react-dom/client';
+import App from './App.js';
+
+hydrateRoot(document, <App assetMap={window.assetMap} />);
+```
+
+Both client and server render `App` with the same `assetMap` prop, so there are no hydration errors.
+
+</DeepDive>
+
+---
+
+### Rendering a React tree to a string of static HTML {/*rendering-a-react-tree-to-a-string-of-static-html*/}
+
+Call `prerenderToNodeStream` to render your app to a static HTML string:
+
+```js
+import { prerenderToNodeStream } from 'react-dom/static';
+
+async function renderToString() {
+ const {prelude} = await prerenderToNodeStream(<App />, {
+ bootstrapScripts: ['/main.js']
+ });
+
+ return new Promise((resolve, reject) => {
+ let data = '';
+ prelude.on('data', chunk => {
+ data += chunk;
+ });
+ prelude.on('end', () => resolve(data));
+ prelude.on('error', reject);
+ });
+}
+```
+
+This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
+
+---
+
+### Waiting for all data to load {/*waiting-for-all-data-to-load*/}
+
+`prerenderToNodeStream` waits for all data to load before finishing the static HTML generation and resolving. For example, consider a profile page that shows a cover, a sidebar with friends and photos, and a list of posts:
+
+```js
+function ProfilePage() {
+ return (
+ <ProfileLayout>
+ <ProfileCover />
+ <Sidebar>
+ <Friends />
+ <Photos />
+ </Sidebar>
+ <Suspense fallback={<PostsGlimmer />}>
+ <Posts />
+ </Suspense>
+ </ProfileLayout>
+ );
+}
+```
+
+Imagine that `<Posts />` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerenderToNodeStream` will wait for the suspended content to finish before resolving to the static HTML.
+
+<Note>
+
+**Only Suspense-enabled data sources will activate the Suspense component.** They include:
+
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a Promise with [`use`](/reference/react/use)
+
+Suspense **does not** detect when data is fetched inside an Effect or event handler.
+
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
+
+</Note>
+
+---
+
+### Aborting prerendering {/*aborting-prerendering*/}
+
+You can force the prerender to "give up" after a timeout:
+
+```js {2-5,11}
+async function renderToString() {
+ const controller = new AbortController();
+ setTimeout(() => {
+ controller.abort()
+ }, 10000);
+
+ try {
+ // the prelude will contain all the HTML that was prerendered
+ // before the controller aborted.
+ const {prelude} = await prerenderToNodeStream(<App />, {
+ signal: controller.signal,
+ });
+ //...
+```
+
+Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
+
+The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads.
+
+To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream).
+
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
new file mode 100644
index 000000000..8b103938e
--- /dev/null
+++ b/src/content/reference/react/Activity.md
@@ -0,0 +1,1161 @@
+---
+title: <Activity>
+version: experimental
+---
+
+<Experimental>
+
+**This API is experimental and is not available in a stable version of React yet.**
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+- `eslint-plugin-react-hooks@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+</Experimental>
+
+<Intro>
+
+`<Activity>` lets you hide and show part of the UI.
+
+
+```js
+<Activity mode={mode}>
+ <Page />
+</Activity>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<Activity>` {/*activity*/}
+
+Wrap a part of the UI in `<Activity>` to manage its visibility state:
+
+```js
+import {unstable_Activity as Activity} from 'react';
+
+<Activity mode={isVisible ? 'visible' : 'hidden'}>
+ <Page />
+</Activity>
+```
+
+When "hidden", the `children` of `<Activity />` are not visible on the page. If a new `<Activity>` mounts as "hidden" then it pre-renders the content at lower priority without blocking the visible content on the page, but it does not mount by creating Effects. When a "visible" Activity switches to "hidden" it conceptually unmounts by destroying all the Effects, but saves its state. This allows fast switching between "visible" and "hidden" states without recreating the state for a "hidden" Activity.
+
+In the future, "hidden" Activities may automatically destroy state based on resources like memory.
+
+#### Props {/*props*/}
+
+* `children`: The actual UI you intend to render.
+* **optional** `mode`: Either "visible" or "hidden". Defaults to "visible". When "hidden", updates to the children are deferred to lower priority. The component will not create Effects until the Activity is switched to "visible". If a "visible" Activity switches to "hidden", the Effects will be destroyed.
+
+#### Caveats {/*caveats*/}
+
+- While hidden, the `children` of `<Activity>` are hidden on the page.
+- `<Activity>` will unmount all Effects when switching from "visible" to "hidden" without destroying React or DOM state. This means Effects that are expected to run only once on mount will run again when switching from "hidden" to "visible". Conceptually, "hidden" Activities are unmounted, but they are not destroyed either. We recommend using [`<StrictMode>`](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior.
+- When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
+- Parts of the UI wrapped in `<Activity mode="hidden">` are not included in the SSR response.
+- Parts of the UI wrapped in `<Activity mode="visible">` will hydrate at a lower priority than other content.
+
+---
+
+## Usage {/*usage*/}
+
+### Pre-render part of the UI {/*pre-render-part-of-the-ui*/}
+
+You can pre-render part of the UI using `<Activity mode="hidden">`:
+
+```js
+<Activity mode={tab === "posts" ? "visible" : "hidden"}>
+ <PostsTab />
+</Activity>
+```
+
+When an Activity is rendered with `mode="hidden"`, the `children` are not visible on the page, but are rendered at lower priority than the visible content on the page.
+
+When the `mode` later switches to "visible", the pre-rendered children will mount and become visible. This can be used to prepare parts of the UI the user is likely to interact with next to reduce loading times.
+
+In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `PostsTab` component fetches some data using `use`. When you click the “Posts” tab, the `PostsTab` component suspends, causing the button loading state to appear:
+
+<Sandpack>
+
+```js
+import { Suspense, useState } from 'react';
+import TabButton from './TabButton.js';
+import AboutTab from './AboutTab.js';
+import PostsTab from './PostsTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function TabContainer() {
+ const [tab, setTab] = useState('about');
+ return (
+ <Suspense fallback={<h1>🌀 Loading...</h1>}>
+ <TabButton
+ isActive={tab === 'about'}
+ action={() => setTab('about')}
+ >
+ About
+ </TabButton>
+ <TabButton
+ isActive={tab === 'posts'}
+ action={() => setTab('posts')}
+ >
+ Posts
+ </TabButton>
+ <TabButton
+ isActive={tab === 'contact'}
+ action={() => setTab('contact')}
+ >
+ Contact
+ </TabButton>
+ <hr />
+ {tab === 'about' && <AboutTab />}
+ {tab === 'posts' && <PostsTab />}
+ {tab === 'contact' && <ContactTab />}
+ </Suspense>
+ );
+}
+```
+
+
+```js src/TabButton.js active
+import { useTransition } from 'react';
+
+export default function TabButton({ action, children, isActive }) {
+ const [isPending, startTransition] = useTransition();
+ if (isActive) {
+ return <b>{children}</b>
+ }
+ if (isPending) {
+ return <b className="pending">{children}</b>;
+ }
+ return (
+ <button onClick={() => {
+ startTransition(() => {
+ action();
+ });
+ }}>
+ {children}
+ </button>
+ );
+}
+```
+
+```js src/AboutTab.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+export default function AboutTab() {
+ return (
+ <ViewTransition>
+ <p>Welcome to my profile!</p>
+ </ViewTransition>
+ );
+}
+```
+
+```js src/PostsTab.js hidden
+import {use, unstable_ViewTransition as ViewTransition} from 'react';
+import { fetchData } from './data.js';
+
+function PostsTab() {
+ const posts = use(fetchData('/posts'));
+ return (
+ <ViewTransition>
+ <ul className="items">
+ {posts.map(post =>
+ <Post key={post.id} title={post.title} />
+ )}
+ </ul>
+ </ViewTransition>
+ );
+}
+
+function Post({ title }) {
+ return (
+ <li className="item">
+ {title}
+ </li>
+ );
+}
+
+export default PostsTab;
+```
+
+```js src/ContactTab.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+export default function ContactTab() {
+ return (
+ <ViewTransition>
+ <p>
+ Send me a message!
+ </p>
+ <textarea />
+ <p>
+ You can find me online here:
+ </p>
+ <ul>
+ <li>admin@mysite.com</li>
+ <li>+123456789</li>
+ </ul>
+ </ViewTransition>
+ );
+}
+```
+
+
+```js src/data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+ if (!cache.has(url)) {
+ cache.set(url, getData(url));
+ }
+ return cache.get(url);
+}
+
+async function getData(url) {
+ if (url.startsWith('/posts')) {
+ return await getPosts();
+ } else {
+ throw Error('Not implemented');
+ }
+}
+
+async function getPosts() {
+ // Add a fake delay to make waiting noticeable.
+ await new Promise(resolve => {
+ setTimeout(resolve, 1000);
+ });
+ let posts = [];
+ for (let i = 0; i < 10; i++) {
+ posts.push({
+ id: i,
+ title: 'Post #' + (i + 1)
+ });
+ }
+ return posts;
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest",
+ "toastify-js": "1.12.0"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+In this example, the user needs to wait for the posts to load when clicking on the "Posts" tab.
+
+We can reduce the delay for the "Posts" tab by pre-rendering the inactive Tabs with a hidden `<Activity>`:
+
+<Sandpack>
+
+```js
+import { Suspense, useState, unstable_Activity as Activity } from "react";
+import TabButton from "./TabButton.js";
+import AboutTab from "./AboutTab.js";
+import PostsTab from "./PostsTab.js";
+import ContactTab from "./ContactTab.js";
+
+export default function TabContainer() {
+ const [tab, setTab] = useState("about");
+ return (
+ <Suspense fallback={<h1>🌀 Loading...</h1>}>
+ <TabButton isActive={tab === "about"} action={() => setTab("about")}>
+ About
+ </TabButton>
+ <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
+ Posts
+ </TabButton>
+ <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
+ Contact
+ </TabButton>
+ <hr />
+ <Activity mode={tab === "about" ? "visible" : "hidden"}>
+ <AboutTab />
+ </Activity>
+ <Activity mode={tab === "posts" ? "visible" : "hidden"}>
+ <PostsTab />
+ </Activity>
+ <Activity mode={tab === "contact" ? "visible" : "hidden"}>
+ <ContactTab />
+ </Activity>
+ </Suspense>
+ );
+}
+```
+
+
+```js src/TabButton.js active
+import { useTransition } from 'react';
+
+export default function TabButton({ action, children, isActive }) {
+ const [isPending, startTransition] = useTransition();
+ if (isActive) {
+ return <b>{children}</b>
+ }
+ if (isPending) {
+ return <b className="pending">{children}</b>;
+ }
+ return (
+ <button onClick={() => {
+ startTransition(() => {
+ action();
+ });
+ }}>
+ {children}
+ </button>
+ );
+}
+```
+
+```js src/AboutTab.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+export default function AboutTab() {
+ return (
+ <ViewTransition>
+ <p>Welcome to my profile!</p>
+ </ViewTransition>
+ );
+}
+```
+
+```js src/PostsTab.js hidden
+import {use, unstable_ViewTransition as ViewTransition} from 'react';
+import { fetchData } from './data.js';
+
+function PostsTab() {
+ const posts = use(fetchData('/posts'));
+ return (
+ <ViewTransition>
+ <ul className="items">
+ {posts.map(post =>
+ <Post key={post.id} title={post.title} />
+ )}
+ </ul>
+ </ViewTransition>
+ );
+}
+
+function Post({ title }) {
+ return (
+ <li className="item">
+ {title}
+ </li>
+ );
+}
+
+export default PostsTab;
+```
+
+```js src/ContactTab.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+export default function ContactTab() {
+ return (
+ <ViewTransition>
+ <p>
+ Send me a message!
+ </p>
+ <textarea />
+ <p>
+ You can find me online here:
+ </p>
+ <ul>
+ <li>admin@mysite.com</li>
+ <li>+123456789</li>
+ </ul>
+ </ViewTransition>
+ );
+}
+```
+
+
+```js src/data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+ if (!cache.has(url)) {
+ cache.set(url, getData(url));
+ }
+ return cache.get(url);
+}
+
+async function getData(url) {
+ if (url.startsWith('/posts')) {
+ return await getPosts();
+ } else {
+ throw Error('Not implemented');
+ }
+}
+
+async function getPosts() {
+ // Add a fake delay to make waiting noticeable.
+ await new Promise(resolve => {
+ setTimeout(resolve, 1000);
+ });
+ let posts = [];
+ for (let i = 0; i < 10; i++) {
+ posts.push({
+ id: i,
+ title: 'Post #' + (i + 1)
+ });
+ }
+ return posts;
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest",
+ "toastify-js": "1.12.0"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+---
+
+### Keeping state for part of the UI {/*keeping-state-for-part-of-the-ui*/}
+
+
+You can keep state for parts of the UI by switching `<Activity>` from "visible" to "hidden":
+
+```js
+<Activity mode={tab === "posts" ? "visible" : "hidden"}>
+ <PostsTab />
+</Activity>
+```
+
+When an Activity switches from `mode="visible"` to "hidden", the `children` will become hidden on the page, and unmount by destroying all Effects, but will keep their React and DOM state.
+
+When the `mode` later switches to "visible", the saved state will be re-used when mounting the children by creating all the Effects. This can be used to keep state in parts of the UI the user is likely to interact with again to maintain DOM or React state.
+
+In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `ContactTab` includes a `<textarea>` with a draft message to send. If you enter some text and change to a different tab, then when you click the “Contact” tab again, the draft message is lost:
+
+
+<Sandpack>
+
+```js
+import { Suspense, useState } from 'react';
+import TabButton from './TabButton.js';
+import AboutTab from './AboutTab.js';
+import PostsTab from './PostsTab.js';
+import ContactTab from './ContactTab.js';
+
+export default function TabContainer() {
+ const [tab, setTab] = useState('contact');
+ return (
+ <Suspense fallback={<h1>🌀 Loading...</h1>}>
+ <TabButton
+ isActive={tab === 'about'}
+ action={() => setTab('about')}
+ >
+ About
+ </TabButton>
+ <TabButton
+ isActive={tab === 'posts'}
+ action={() => setTab('posts')}
+ >
+ Posts
+ </TabButton>
+ <TabButton
+ isActive={tab === 'contact'}
+ action={() => setTab('contact')}
+ >
+ Contact
+ </TabButton>
+ <hr />
+ {tab === 'about' && <AboutTab />}
+ {tab === 'posts' && <PostsTab />}
+ {tab === 'contact' && <ContactTab />}
+ </Suspense>
+ );
+}
+```
+
+
+```js src/TabButton.js active
+import { useTransition } from 'react';
+
+export default function TabButton({ action, children, isActive }) {
+ const [isPending, startTransition] = useTransition();
+ if (isActive) {
+ return <b>{children}</b>
+ }
+ if (isPending) {
+ return <b className="pending">{children}</b>;
+ }
+ return (
+ <button onClick={() => {
+ startTransition(() => {
+ action();
+ });
+ }}>
+ {children}
+ </button>
+ );
+}
+```
+
+```js src/AboutTab.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+export default function AboutTab() {
+ return (
+ <ViewTransition>
+ <p>Welcome to my profile!</p>
+ </ViewTransition>
+ );
+}
+```
+
+```js src/PostsTab.js hidden
+import {use, unstable_ViewTransition as ViewTransition} from 'react';
+import { fetchData } from './data.js';
+
+function PostsTab() {
+ const posts = use(fetchData('/posts'));
+ return (
+ <ViewTransition>
+ <ul className="items">
+ {posts.map(post =>
+ <Post key={post.id} title={post.title} />
+ )}
+ </ul>
+ </ViewTransition>
+ );
+}
+
+function Post({ title }) {
+ return (
+ <li className="item">
+ {title}
+ </li>
+ );
+}
+
+export default PostsTab;
+```
+
+```js src/ContactTab.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+export default function ContactTab() {
+ return (
+ <ViewTransition>
+ <p>
+ Send me a message!
+ </p>
+ <textarea />
+ <p>
+ You can find me online here:
+ </p>
+ <ul>
+ <li>admin@mysite.com</li>
+ <li>+123456789</li>
+ </ul>
+ </ViewTransition>
+ );
+}
+```
+
+
+```js src/data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+ if (!cache.has(url)) {
+ cache.set(url, getData(url));
+ }
+ return cache.get(url);
+}
+
+async function getData(url) {
+ if (url.startsWith('/posts')) {
+ return await getPosts();
+ } else {
+ throw Error('Not implemented');
+ }
+}
+
+async function getPosts() {
+ // Add a fake delay to make waiting noticeable.
+ await new Promise(resolve => {
+ setTimeout(resolve, 1000);
+ });
+ let posts = [];
+ for (let i = 0; i < 10; i++) {
+ posts.push({
+ id: i,
+ title: 'Post #' + (i + 1)
+ });
+ }
+ return posts;
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest",
+ "toastify-js": "1.12.0"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+This results in losing DOM state the user has input. We can keep the state for the Contact tab by hiding the inactive Tabs with `<Activity>`:
+
+
+<Sandpack>
+
+```js
+import { Suspense, useState, unstable_Activity as Activity } from "react";
+import TabButton from "./TabButton.js";
+import AboutTab from "./AboutTab.js";
+import PostsTab from "./PostsTab.js";
+import ContactTab from "./ContactTab.js";
+
+export default function TabContainer() {
+ const [tab, setTab] = useState("about");
+ return (
+ <Suspense fallback={<h1>🌀 Loading...</h1>}>
+ <TabButton isActive={tab === "about"} action={() => setTab("about")}>
+ About
+ </TabButton>
+ <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
+ Posts
+ </TabButton>
+ <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
+ Contact
+ </TabButton>
+ <hr />
+ <Activity mode={tab === "about" ? "visible" : "hidden"}>
+ <AboutTab />
+ </Activity>
+ <Activity mode={tab === "posts" ? "visible" : "hidden"}>
+ <PostsTab />
+ </Activity>
+ <Activity mode={tab === "contact" ? "visible" : "hidden"}>
+ <ContactTab />
+ </Activity>
+ </Suspense>
+ );
+}
+```
+
+
+```js src/TabButton.js active
+import { useTransition } from 'react';
+
+export default function TabButton({ action, children, isActive }) {
+ const [isPending, startTransition] = useTransition();
+ if (isActive) {
+ return <b>{children}</b>
+ }
+ if (isPending) {
+ return <b className="pending">{children}</b>;
+ }
+ return (
+ <button onClick={() => {
+ startTransition(() => {
+ action();
+ });
+ }}>
+ {children}
+ </button>
+ );
+}
+```
+
+```js src/AboutTab.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+export default function AboutTab() {
+ return (
+ <ViewTransition>
+ <p>Welcome to my profile!</p>
+ </ViewTransition>
+ );
+}
+```
+
+```js src/PostsTab.js hidden
+import {use, unstable_ViewTransition as ViewTransition} from 'react';
+import { fetchData } from './data.js';
+
+function PostsTab() {
+ const posts = use(fetchData('/posts'));
+ return (
+ <ViewTransition>
+ <ul className="items">
+ {posts.map(post =>
+ <Post key={post.id} title={post.title} />
+ )}
+ </ul>
+ </ViewTransition>
+ );
+}
+
+function Post({ title }) {
+ return (
+ <li className="item">
+ {title}
+ </li>
+ );
+}
+
+export default PostsTab;
+```
+
+```js src/ContactTab.js hidden
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+export default function ContactTab() {
+ return (
+ <ViewTransition>
+ <p>
+ Send me a message!
+ </p>
+ <textarea />
+ <p>
+ You can find me online here:
+ </p>
+ <ul>
+ <li>admin@mysite.com</li>
+ <li>+123456789</li>
+ </ul>
+ </ViewTransition>
+ );
+}
+```
+
+
+```js src/data.js hidden
+// Note: the way you would do data fetching depends on
+// the framework that you use together with Suspense.
+// Normally, the caching logic would be inside a framework.
+
+let cache = new Map();
+
+export function fetchData(url) {
+ if (!cache.has(url)) {
+ cache.set(url, getData(url));
+ }
+ return cache.get(url);
+}
+
+async function getData(url) {
+ if (url.startsWith('/posts')) {
+ return await getPosts();
+ } else {
+ throw Error('Not implemented');
+ }
+}
+
+async function getPosts() {
+ // Add a fake delay to make waiting noticeable.
+ await new Promise(resolve => {
+ setTimeout(resolve, 1000);
+ });
+ let posts = [];
+ for (let i = 0; i < 10; i++) {
+ posts.push({
+ id: i,
+ title: 'Post #' + (i + 1)
+ });
+ }
+ return posts;
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest",
+ "toastify-js": "1.12.0"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Effects don't mount when an Activity is hidden {/*effects-dont-mount-when-an-activity-is-hidden*/}
+
+When an `<Activity>` is "hidden", all Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later.
+
+This is a feature of Activity because it means subscriptions won't be subscribed for hidden parts of the UI, reducing the amount of work for hidden content. It also means cleanup, such as pausing a video (which would be expected if you unmounted without Activity) will fire. When an Activity switches to "visible", it will mount by creating the Effects, which will subscribe and play the video.
+
+Consider the following example, where a different video is played for each button:
+
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect } from 'react';
+import './checker.js';
+
+function VideoPlayer({ src, isPlaying }) {
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const videoRef = ref.current;
+ videoRef.play();
+
+ return () => {
+ videoRef.pause();
+ }
+ }, []);
+
+ return <video ref={ref} src={src} muted loop playsInline/>;
+}
+
+export default function App() {
+ const [video, setVideo] = useState(1);
+ return (
+ <>
+ <div>
+ <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
+ <button onClick={() => setVideo(2)}>Elephants Dream</button>
+ </div>
+ {video === 1 &&
+ <VideoPlayer key={1}
+ // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+ src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
+
+ }
+ {video === 2 &&
+ <VideoPlayer key={2}
+ // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
+ src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
+ />
+ }
+ </>
+ );
+}
+```
+
+```js src/checker.js hidden
+let interval = setInterval(() => {
+ const videos = Array.from(document.querySelectorAll('video'));
+ const playing = videos.filter(
+ (v) => !v.paused
+ );
+ if (playing.length > 1) {
+ console.error(`Multiple playing videos: ${playing.length}`);
+ }
+
+}, 50);
+```
+
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+video { width: 300px; margin-top: 10px; }
+```
+
+</Sandpack>
+
+
+Whenever you change videos and come back, the video re-loads from the beginning. To maintain the state, you may try to render both videos, and hide the inactive video in `display: none`. However, this will cause both videos to play at the same time:
+
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect } from 'react';
+import VideoChecker from './checker.js';
+
+function VideoPlayer({ src, isPlaying }) {
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const videoRef = ref.current;
+ videoRef.play();
+
+ return () => {
+ videoRef.pause();
+ }
+ }, []);
+
+ return <video ref={ref} src={src} muted loop playsInline/>;
+}
+
+export default function App() {
+ const [video, setVideo] = useState(1);
+ return (
+ <>
+ <div>
+ <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
+ <button onClick={() => setVideo(2)}>Elephants Dream</button>
+ </div>
+ <div style={{display: video === 1 ? 'block' : 'none'}}>
+ <VideoPlayer
+ // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+ src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
+
+ </div>
+ <div style={{display: video === 2 ? 'block' : 'none'}}>
+ <VideoPlayer
+ // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
+ src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
+ />
+ </div>
+ <VideoChecker />
+ </>
+ );
+}
+```
+
+```js src/checker.js hidden
+import {useRef, useEffect} from 'react';
+
+export default function VideoChecker() {
+ const hasLogged = useRef(false);
+
+ useEffect(() => {
+ let interval = setInterval(() => {
+ if (hasLogged.current === false) {
+
+ const videos = Array.from(document.querySelectorAll('video'));
+ const playing = videos.filter(
+ (v) => !v.paused
+ );
+ if (hasLogged.current === false && playing.length > 1) {
+ hasLogged.current = true;
+ console.error(`Multiple playing videos: ${playing.length}`);
+ }
+ }
+
+ }, 50);
+
+ return () => {
+ hasLogged.current = false;
+ clearInterval(interval);
+ }
+ });
+
+}
+
+```
+
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+video { width: 300px; margin-top: 10px; }
+```
+
+</Sandpack>
+
+This is similar to what would happen if Activity mounted Effects when hidden. Similarly, if Activity didn't unmount Effects when hiding, the videos would continue to play in the background.
+
+Activity solves this by not creating Effects when first rendered as "hidden" and destroying all Effects when switching from "visible" to "hidden":
+
+
+<Sandpack>
+
+```js
+import { useState, useRef, useEffect, unstable_Activity as Activity } from 'react';
+import VideoChecker from './checker.js';
+
+function VideoPlayer({ src, isPlaying }) {
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const videoRef = ref.current;
+ videoRef.play();
+
+ return () => {
+ videoRef.pause();
+ }
+ }, []);
+
+ return <video ref={ref} src={src} muted loop playsInline/>;
+}
+
+export default function App() {
+ const [video, setVideo] = useState(1);
+ return (
+ <>
+ <div>
+ <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
+ <button onClick={() => setVideo(2)}>Elephants Dream</button>
+ </div>
+ <Activity mode={video === 1 ? 'visible' : 'hidden'}>
+ <VideoPlayer
+ // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+ src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
+ </Activity>
+ <Activity mode={video === 2 ? 'visible' : 'hidden'}>
+ <VideoPlayer
+ // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
+ src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
+ />
+ </Activity>
+ <VideoChecker />
+ </>
+ );
+}
+```
+
+```js src/checker.js hidden
+import {useRef, useEffect} from 'react';
+
+export default function VideoChecker() {
+ const hasLogged = useRef(false);
+
+ useEffect(() => {
+ let interval = setInterval(() => {
+ if (hasLogged.current === false) {
+
+ const videos = Array.from(document.querySelectorAll('video'));
+ const playing = videos.filter(
+ (v) => !v.paused
+ );
+ if (hasLogged.current === false && playing.length > 1) {
+ hasLogged.current = true;
+ console.error(`Multiple playing videos: ${playing.length}`);
+ }
+ }
+
+ }, 50);
+
+ return () => {
+ hasLogged.current = false;
+ clearInterval(interval);
+ }
+ });
+
+}
+
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+video { width: 300px; margin-top: 10px; }
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest",
+ "toastify-js": "1.12.0"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+</Sandpack>
+
+For this reason, it's best to think of Activity conceptually as "unmounting" and "remounting" the component, but saving the React or DOM state for later. In practice, this works as expected if you have followed the [You Might Not Need an Effect](learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects.
+
+### My hidden Activity is not rendered in SSR {/*my-hidden-activity-is-not-rendered-in-ssr*/}
+
+When you use `<Activity mode="hidden">` during server-side rendering, the content of the Activity will not be included in the SSR response. This is because the content is not visible on the page and is not needed for the initial render. If you need to include the content in the SSR response, you can use a different approach like [`useDeferredValue`](/reference/react/useDeferredValue) to defer rendering of the content.
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 74a9572c2..2765d3ffa 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -50,7 +50,11 @@ Seule la méthode `render` est requise, les autres méthodes sont optionnelles.
### `context` {/*context*/}
+<<<<<<< HEAD
Le [contexte](/learn/passing-data-deeply-with-context) d'un composant à base de classe est mis à disposition dans `this.context`. Il n'est disponible que si vous précisez *quel* contexte vous souhaitez récupérer en utilisant [`static contextType`](#static-contexttype) (approche plus récente) ou [`static contextTypes`](#static-contexttypes) (approche dépréciée).
+=======
+The [context](/learn/passing-data-deeply-with-context) of a class component is available as `this.context`. It is only available if you specify *which* context you want to receive using [`static contextType`](#static-contexttype).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Un composant à base de classe ne peut lire qu'un contexte à la fois.
@@ -105,6 +109,7 @@ La lecture de `this.props` dans des composants à base de classes est équivalen
---
+<<<<<<< HEAD
### `refs` {/*refs*/}
<Deprecated>
@@ -117,6 +122,8 @@ Vous permet d'accéder à des [refs textuelles historiques](https://legacy.react
---
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### `state` {/*state*/}
L'état d'un composant à base de classe est mis à disposition dans `this.state`. La champ `state` doit être un objet. Ne modifiez pas l'état directement. Si vous souhaitez modifier l'état, appelez `setState` avec un objet d'état en argument.
@@ -494,6 +501,7 @@ Là où les composants à base de classes lisent une source de données extérie
---
+<<<<<<< HEAD
### `getChildContext()` {/*getchildcontext*/}
<Deprecated>
@@ -506,6 +514,8 @@ Vous permet de spécifier les valeurs fournies par le composant pour les [contex
---
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### `getSnapshotBeforeUpdate(prevProps, prevState)` {/*getsnapshotbeforeupdate*/}
Si vous implémentez `getSnapshotBeforeUpdate`, React l'appellera juste avant de mettre à jour le DOM. Ça permet à votre composant de capturer certaines informations issues du DOM (telles que la position de défilement) avant qu'elles risquent d'évoluer. Toute valeur renvoyée par cette méthode de cycle de vie sera passée en paramètre à [`componentDidUpdate`](#componentdidupdate).
@@ -739,9 +749,15 @@ React appelle `shouldComponentUpdate` avant de refaire le rendu lorsque des nouv
#### Paramètres {/*shouldcomponentupdate-parameters*/}
+<<<<<<< HEAD
* `nextProps` : les prochaines props pour le rendu à venir. Comparez `nextProps` à [`this.props`](#props) pour déterminer ce qui a changé.
* `nextState` : le prochain état pour le rendu à venir. Comparez `nextState` à [`this.state`](#state) pour déterminer ce qui a changé.
* `nextContext` : le prochain contexte pour le rendu à venir. Comparez `nextContext` à [`this.context`](#state) pour déterminer ce qui a changé. N'est disponible que si vous avez spécifié [`static contextType`](#static-contexttype) (approche plus récente) ou [`static contextTypes`](#static-contexttypes) (approche dépréciée).
+=======
+- `nextProps`: The next props that the component is about to render with. Compare `nextProps` to [`this.props`](#props) to determine what changed.
+- `nextState`: The next state that the component is about to render with. Compare `nextState` to [`this.state`](#props) to determine what changed.
+- `nextContext`: The next context that the component is about to render with. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Valeur renvoyée {/*shouldcomponentupdate-returns*/}
@@ -815,8 +831,13 @@ Si vous définissez `UNSAFE_componentWillReceiveProps`, React l'appellera lorsqu
#### Paramètres {/*unsafe_componentwillreceiveprops-parameters*/}
+<<<<<<< HEAD
* `nextProps` : les prochaines props que le composant va recevoir de son composant parent. Comparez `nextProps` à [`this.props`](#props) pour déterminer ce qui a changé.
* `nextContext` : le prochain contexte que le composant va recevoir de son plus proche fournisseur de contexte. Comparez `nextContext` à [`this.context`](#state) pour déterminer ce qui a changé. N'est disponible que si vous avez par ailleurs spécifié [`static contextType`](#static-contexttype) (approche plus récente) ou [`static contextTypes`](#static-contexttypes) (approche dépréciée).
+=======
+- `nextProps`: The next props that the component is about to receive from its parent component. Compare `nextProps` to [`this.props`](#props) to determine what changed.
+- `nextContext`: The next context that the component is about to receive from the closest provider. Compare `nextContext` to [`this.context`](#context) to determine what changed. Only available if you specify [`static contextType`](#static-contexttype).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Valeur renvoyée {/*unsafe_componentwillreceiveprops-returns*/}
@@ -880,6 +901,7 @@ Il n'y a pas d'équivalent direct à `UNSAFE_componentWillUpdate` dans les fonct
---
+<<<<<<< HEAD
### `static childContextTypes` {/*static-childcontexttypes*/}
<Deprecated>
@@ -904,6 +926,8 @@ Vous permet de spécifier quel [contexte historique](https://legacy.reactjs.org/
---
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### `static contextType` {/*static-contexttype*/}
Si vous souhaitez lire [`this.context`](#context-instance-field) dans votre composant à base de classe, vous devez spécifier le contexte que vous souhaitez lire. Le contexte que vous spécifiez comme `static contextType` doit être une valeur créée auparavant par[`createContext`](/reference/react/createContext).
@@ -978,6 +1002,7 @@ La définition de `defaultProps` dans les composants à base de classes est équ
---
+<<<<<<< HEAD
### `static propTypes` {/*static-proptypes*/}
Vous pouvez définir `static propTypes` en utilisant le module[`prop-types`](https://www.npmjs.com/package/prop-types) pour déclarer les types des props acceptées par votre composant. Ces types seront vérifiés lors du rendu en développement uniquement.
@@ -1006,6 +1031,8 @@ Nous vous conseillons d'utiliser [TypeScript](/learn/typescript) plutôt que de
---
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
### `static getDerivedStateFromError(error)` {/*static-getderivedstatefromerror*/}
Si vous définissez `static getDerivedStateFromError`, React l'appellera lorsqu'un composant descendant lèvera une erreur pendant le rendu. Ça vous permet d'afficher un message d'erreur plutôt que d'aboutir à une UI vide.
@@ -1351,7 +1378,15 @@ Par défaut, si votre application lève une erreur lors du rendu, React retirera
Pour implémenter un composant de périmètre d'erreur, vous devez fournir [`static getDerivedStateFromError`](#static-getderivedstatefromerror) qui vous permet de mettre à jour votre état en réaction à une erreur afin d'afficher un message à l'utilisateur. Vous pouvez aussi, optionnellement, implémenter [`componentDidCatch`](#componentdidcatch) pour ajouter de la logique supplémentaire, comme par exemple un signalement de l'erreur à un service de supervision.
+<<<<<<< HEAD
```js {7-11,13-20}
+=======
+With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
+
+```js {9-12,14-27}
+import * as React from 'react';
+
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
@@ -1365,12 +1400,26 @@ class ErrorBoundary extends React.Component {
}
componentDidCatch(error, info) {
+<<<<<<< HEAD
// Exemple de "componentStack" :
// in ComponentThatThrows (created by App)
// in ErrorBoundary (created by App)
// in div (created by App)
// in App
logErrorToMyService(error, info.componentStack);
+=======
+ logErrorToMyService(
+ error,
+ // Example "componentStack":
+ // in ComponentThatThrows (created by App)
+ // in ErrorBoundary (created by App)
+ // in div (created by App)
+ // in App
+ info.componentStack,
+ // Warning: `captureOwnerStack` is not available in production.
+ React.captureOwnerStack(),
+ );
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
}
render() {
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index ffeef4bf6..a2855876e 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -42,9 +42,16 @@ root.render(
Les comportements suivants sont activés en développement par le Mode Strict :
+<<<<<<< HEAD
- Vos composants feront [un rendu supplémentaire](#fixing-bugs-found-by-double-rendering-in-development) afin de trouver les bugs causés par des rendus impurs.
- Vos composants [exécuteront les Effets une fois supplémentaire](#fixing-bugs-found-by-re-running-effects-in-development) afin de détecter les bugs causés par l'absence de nettoyage d'Effet.
- Vos composants [seront contrôlés pour l'utilisation d'API dépréciées](#fixing-deprecation-warnings-enabled-by-strict-mode).
+=======
+- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
+- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
+- Your components will [re-run refs callbacks an extra time](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) to find bugs caused by missing ref cleanup.
+- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Props {/*props*/}
@@ -85,9 +92,16 @@ Bien que les vérifications en Mode Strict **ne s'exécutent que durant le déve
Le Mode Strict active les vérifications suivantes en mode de développement :
+<<<<<<< HEAD
- Vos composants feront [un rendu supplémentaire](#fixing-bugs-found-by-double-rendering-in-development) afin de trouver les bugs causés par des rendus impurs.
- Vos composants [exécuteront les Effets une fois supplémentaire](#fixing-bugs-found-by-re-running-effects-in-development) afin de détecter les bugs causés par l'absence de nettoyage d'Effet.
- Vos composants [seront contrôlés pour l'utilisation d'API dépréciées](#fixing-deprecation-warnings-enabled-by-strict-mode).
+=======
+- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
+- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
+- Your components will [re-run ref callbacks an extra time](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) to find bugs caused by missing ref cleanup.
+- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
**Ces vérifications ne sont effectuées qu'en phase de développement et n'ont aucun impact sur votre *build* de production.**
@@ -120,6 +134,12 @@ function App() {
Dans cet exemple, les vérifications du Mode Strict ne s'exécuteront pas sur les composants `Header` et `Footer`. Cependant, elles s'exécuteront sur `Sidebar` et `Content`, ainsi que sur tous les composants qu'ils contiennent, peu importe la profondeur à laquelle ils se trouvent.
+<Note>
+
+When `StrictMode` is enabled for a part of the app, React will only enable behaviors that are possible in production. For example, if `<StrictMode>` is not enabled at the root of the app, it will not [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) on initial mount, since this would cause child effects to double fire without the parent effects, which cannot happen in production.
+
+</Note>
+
---
### Corriger les bugs trouvés par le double rendu en développement {/*fixing-bugs-found-by-double-rendering-in-development*/}
@@ -825,14 +845,433 @@ Sans le Mode Strict, il était facile de passer à côté du fait que l'Effet n
[Apprenez-en davantage sur l'implémentation de fonction de nettoyage des Effets](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development).
---
+### Fixing bugs found by re-running ref callbacks in development {/*fixing-bugs-found-by-re-running-ref-callbacks-in-development*/}
+<<<<<<< HEAD
### Corriger les alertes de dépréciation activées par le Mode Strict {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
+=======
+Strict Mode can also help find bugs in [callbacks refs.](/learn/manipulating-the-dom-with-refs)
+
+Every callback `ref` has some setup code and may have some cleanup code. Normally, React calls setup when the element is *created* (is added to the DOM) and calls cleanup when the element is *removed* (is removed from the DOM).
+
+When Strict Mode is on, React will also run **one extra setup+cleanup cycle in development for every callback `ref`.** This may feel surprising, but it helps reveal subtle bugs that are hard to catch manually.
+
+Consider this example, which allows you to select an animal and then scroll to one of them. Notice when you switch from "Cats" to "Dogs", the console logs show that the number of animals in the list keeps growing, and the "Scroll to" buttons stop working:
+
+<Sandpack>
+
+```js src/index.js
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+// ❌ Not using StrictMode.
+root.render(<App />);
+```
+
+```js src/App.js active
+import { useRef, useState } from "react";
+
+export default function AnimalFriends() {
+ const itemsRef = useRef([]);
+ const [animalList, setAnimalList] = useState(setupAnimalList);
+ const [animal, setAnimal] = useState('cat');
+
+ function scrollToAnimal(index) {
+ const list = itemsRef.current;
+ const {node} = list[index];
+ node.scrollIntoView({
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
+ });
+ }
+
+ const animals = animalList.filter(a => a.type === animal)
+
+ return (
+ <>
+ <nav>
+ <button onClick={() => setAnimal('cat')}>Cats</button>
+ <button onClick={() => setAnimal('dog')}>Dogs</button>
+ </nav>
+ <hr />
+ <nav>
+ <span>Scroll to:</span>{animals.map((animal, index) => (
+ <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+ {index}
+ </button>
+ ))}
+ </nav>
+ <div>
+ <ul>
+ {animals.map((animal) => (
+ <li
+ key={animal.src}
+ ref={(node) => {
+ const list = itemsRef.current;
+ const item = {animal: animal, node};
+ list.push(item);
+ console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
+ if (list.length > 10) {
+ console.log('❌ Too many animals in the list!');
+ }
+ return () => {
+ // 🚩 No cleanup, this is a bug!
+ }
+ }}
+ >
+ <img src={animal.src} />
+ </li>
+ ))}
+
+ </ul>
+ </div>
+ </>
+ );
+}
+
+function setupAnimalList() {
+ const animalList = [];
+ for (let i = 0; i < 10; i++) {
+ animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+ }
+ for (let i = 0; i < 10; i++) {
+ animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+ }
+
+ return animalList;
+}
+
+```
+
+```css
+div {
+ width: 100%;
+ overflow: hidden;
+}
+
+nav {
+ text-align: center;
+}
+
+button {
+ margin: .25rem;
+}
+
+ul,
+li {
+ list-style: none;
+ white-space: nowrap;
+}
+
+li {
+ display: inline;
+ padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+
+**This is a production bug!** Since the ref callback doesn't remove animals from the list in the cleanup, the list of animals keeps growing. This is a memory leak that can cause performance problems in a real app, and breaks the behavior of the app.
+
+The issue is the ref callback doesn't cleanup after itself:
+
+```js {6-8}
+<li
+ ref={node => {
+ const list = itemsRef.current;
+ const item = {animal, node};
+ list.push(item);
+ return () => {
+ // 🚩 No cleanup, this is a bug!
+ }
+ }}
+</li>
+```
+
+Now let's wrap the original (buggy) code in `<StrictMode>`:
+
+<Sandpack>
+
+```js src/index.js
+import { createRoot } from 'react-dom/client';
+import {StrictMode} from 'react';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+// ✅ Using StrictMode.
+root.render(
+ <StrictMode>
+ <App />
+ </StrictMode>
+);
+```
+
+```js src/App.js active
+import { useRef, useState } from "react";
+
+export default function AnimalFriends() {
+ const itemsRef = useRef([]);
+ const [animalList, setAnimalList] = useState(setupAnimalList);
+ const [animal, setAnimal] = useState('cat');
+
+ function scrollToAnimal(index) {
+ const list = itemsRef.current;
+ const {node} = list[index];
+ node.scrollIntoView({
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
+ });
+ }
+
+ const animals = animalList.filter(a => a.type === animal)
+
+ return (
+ <>
+ <nav>
+ <button onClick={() => setAnimal('cat')}>Cats</button>
+ <button onClick={() => setAnimal('dog')}>Dogs</button>
+ </nav>
+ <hr />
+ <nav>
+ <span>Scroll to:</span>{animals.map((animal, index) => (
+ <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+ {index}
+ </button>
+ ))}
+ </nav>
+ <div>
+ <ul>
+ {animals.map((animal) => (
+ <li
+ key={animal.src}
+ ref={(node) => {
+ const list = itemsRef.current;
+ const item = {animal: animal, node}
+ list.push(item);
+ console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
+ if (list.length > 10) {
+ console.log('❌ Too many animals in the list!');
+ }
+ return () => {
+ // 🚩 No cleanup, this is a bug!
+ }
+ }}
+ >
+ <img src={animal.src} />
+ </li>
+ ))}
+
+ </ul>
+ </div>
+ </>
+ );
+}
+
+function setupAnimalList() {
+ const animalList = [];
+ for (let i = 0; i < 10; i++) {
+ animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+ }
+ for (let i = 0; i < 10; i++) {
+ animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+ }
+
+ return animalList;
+}
+
+```
+
+```css
+div {
+ width: 100%;
+ overflow: hidden;
+}
+
+nav {
+ text-align: center;
+}
+
+button {
+ margin: .25rem;
+}
+
+ul,
+li {
+ list-style: none;
+ white-space: nowrap;
+}
+
+li {
+ display: inline;
+ padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+**With Strict Mode, you immediately see that there is a problem**. Strict Mode runs an extra setup+cleanup cycle for every callback ref. This callback ref has no cleanup logic, so it adds refs but doesn't remove them. This is a hint that you're missing a cleanup function.
+
+Strict Mode lets you eagerly find mistakes in callback refs. When you fix your callback by adding a cleanup function in Strict Mode, you *also* fix many possible future production bugs like the "Scroll to" bug from before:
+
+<Sandpack>
+
+```js src/index.js
+import { createRoot } from 'react-dom/client';
+import {StrictMode} from 'react';
+import './styles.css';
+
+import App from './App';
+
+const root = createRoot(document.getElementById("root"));
+// ✅ Using StrictMode.
+root.render(
+ <StrictMode>
+ <App />
+ </StrictMode>
+);
+```
+
+```js src/App.js active
+import { useRef, useState } from "react";
+
+export default function AnimalFriends() {
+ const itemsRef = useRef([]);
+ const [animalList, setAnimalList] = useState(setupAnimalList);
+ const [animal, setAnimal] = useState('cat');
+
+ function scrollToAnimal(index) {
+ const list = itemsRef.current;
+ const {node} = list[index];
+ node.scrollIntoView({
+ behavior: "smooth",
+ block: "nearest",
+ inline: "center",
+ });
+ }
+
+ const animals = animalList.filter(a => a.type === animal)
+
+ return (
+ <>
+ <nav>
+ <button onClick={() => setAnimal('cat')}>Cats</button>
+ <button onClick={() => setAnimal('dog')}>Dogs</button>
+ </nav>
+ <hr />
+ <nav>
+ <span>Scroll to:</span>{animals.map((animal, index) => (
+ <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+ {index}
+ </button>
+ ))}
+ </nav>
+ <div>
+ <ul>
+ {animals.map((animal) => (
+ <li
+ key={animal.src}
+ ref={(node) => {
+ const list = itemsRef.current;
+ const item = {animal, node};
+ list.push({animal: animal, node});
+ console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
+ if (list.length > 10) {
+ console.log('❌ Too many animals in the list!');
+ }
+ return () => {
+ list.splice(list.indexOf(item));
+ console.log(`❌ Removing animal from the map. Total animals: ${itemsRef.current.length}`);
+ }
+ }}
+ >
+ <img src={animal.src} />
+ </li>
+ ))}
+
+ </ul>
+ </div>
+ </>
+ );
+}
+
+function setupAnimalList() {
+ const animalList = [];
+ for (let i = 0; i < 10; i++) {
+ animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+ }
+ for (let i = 0; i < 10; i++) {
+ animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+ }
+
+ return animalList;
+}
+
+```
+
+```css
+div {
+ width: 100%;
+ overflow: hidden;
+}
+
+nav {
+ text-align: center;
+}
+
+button {
+ margin: .25rem;
+}
+
+ul,
+li {
+ list-style: none;
+ white-space: nowrap;
+}
+
+li {
+ display: inline;
+ padding: 0.5rem;
+}
+```
+
+</Sandpack>
+
+Now on inital mount in StrictMode, the ref callbacks are all setup, cleaned up, and setup again:
+
+```
+...
+✅ Adding animal to the map. Total animals: 10
+...
+❌ Removing animal from the map. Total animals: 0
+...
+✅ Adding animal to the map. Total animals: 10
+```
+
+**This is expected.** Strict Mode confirms that the ref callbacks are cleaned up correctly, so the size never grows above the expected amount. After the fix, there are no memory leaks, and all the features work as expected.
+
+Without Strict Mode, it was easy to miss the bug until you clicked around to app to notice broken features. Strict Mode made the bugs appear right away, before you push them to production.
+
+---
+### Fixing deprecation warnings enabled by Strict Mode {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
React alerte si certains composants quelque part à l'intérieur de l'arbre de `<StrictMode>` utilisent l'une de ces API dépréciées :
+<<<<<<< HEAD
* [`findDOMNode`](/reference/react-dom/findDOMNode). [Voir les alternatives](/reference/react-dom/findDOMNode#alternatives).
* Les méthodes de cycle de vie `UNSAFE_` des composants à base de classes, telles que [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [Voir les alternatives](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles).
* Les anciens contextes ([`childContextTypes`](/reference/react/Component#static-childcontexttypes), [`contextTypes`](/reference/react/Component#static-contexttypes) et [`getChildContext`](/reference/react/Component#getchildcontext)). [Voir les alternatives](/reference/react/createContext).
* Les anciennes refs textuelles ([`this.refs`](/reference/react/Component#refs)). [Voir les alternatives](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage).
+=======
+* `UNSAFE_` class lifecycle methods like [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [See alternatives.](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Ces API sont avant tout utilisées dans les anciens [composants à base de classes](/reference/react/Component) et n'apparaissent que rarement dans les applis modernes.
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 875a42044..46dac4f19 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -55,21 +55,6 @@ Dans l'exemple ci-dessous, le composant `Albums` *suspend* pendant qu'il charge
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js hidden
import { useState } from 'react';
import ArtistPage from './ArtistPage.js';
@@ -115,15 +100,19 @@ function Loading() {
}
```
-```js src/Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Albums({ artistId }) {
const albums = use(fetchData(`/${artistId}/albums`));
return (
@@ -136,6 +125,7 @@ export default function Albums({ artistId }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -163,6 +153,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/data.js hidden
@@ -255,9 +247,15 @@ async function getAlbums() {
**Seules les sources de données compatibles Suspense activeront le composant Suspense.** Ces sources de données comprennent :
+<<<<<<< HEAD
- Le chargement de données fourni par des frameworks intégrant Suspense tels que [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) et [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
- Le chargement à la demande du code de composants avec [`lazy`](/reference/react/lazy)
- La lecture de la valeur d'une promesse avec [`use`](/reference/react/use)
+=======
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a cached Promise with [`use`](/reference/react/use)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Suspense **ne détecte pas** le chargement de données depuis un Effet ou un gestionnaire d'événement.
@@ -288,21 +286,6 @@ Dans l'exemple ci-dessous, les composants `Biography` et `Albums` chargent des d
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js hidden
import { useState } from 'react';
import ArtistPage from './ArtistPage.js';
@@ -363,15 +346,19 @@ export default function Panel({ children }) {
}
```
-```js src/Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Biography({ artistId }) {
const bio = use(fetchData(`/${artistId}/bio`));
return (
@@ -380,6 +367,7 @@ export default function Biography({ artistId }) {
</section>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -407,17 +395,23 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Albums({ artistId }) {
const albums = use(fetchData(`/${artistId}/albums`));
return (
@@ -430,6 +424,7 @@ export default function Albums({ artistId }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -457,6 +452,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/data.js hidden
@@ -610,28 +607,20 @@ Avec ce changement, l'affichage de `Biography` n'a plus besoin « d'attendre
La séquence sera :
+<<<<<<< HEAD
1. Si `Biography` n'est pas encore chargé, `BigSpinner` est affiché à la place de l'intégralité du contenu.
2. Une fois que `Biography` est chargé, `BigSpinner` est remplacé par le contenu.
3. Si `Albums` n'est pas encore chargé, `AlbumsGlimmer` est affiché à la place d'`Albums` et de son parent `Panel`.
4. Pour finir, une fois `Albums` chargé, il remplace `AlbumsGlimmer`.
+=======
+1. If `Biography` hasn't loaded yet, `BigSpinner` is shown in place of the entire content area.
+2. Once `Biography` finishes loading, `BigSpinner` is replaced by the content.
+3. If `Albums` hasn't loaded yet, `AlbumsGlimmer` is shown in place of `Albums` and its parent `Panel`.
+4. Finally, once `Albums` finishes loading, it replaces `AlbumsGlimmer`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js hidden
import { useState } from 'react';
import ArtistPage from './ArtistPage.js';
@@ -704,15 +693,19 @@ export default function Panel({ children }) {
}
```
-```js src/Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Biography({ artistId }) {
const bio = use(fetchData(`/${artistId}/bio`));
return (
@@ -721,6 +714,7 @@ export default function Biography({ artistId }) {
</section>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -748,17 +742,23 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Albums({ artistId }) {
const albums = use(fetchData(`/${artistId}/albums`));
return (
@@ -771,6 +771,7 @@ export default function Albums({ artistId }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -798,6 +799,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/data.js hidden
@@ -940,21 +943,6 @@ Dans cet exemple, le composant `SearchResults` suspend pendant le chargement des
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
import { Suspense, useState } from 'react';
import SearchResults from './SearchResults.js';
@@ -975,15 +963,19 @@ export default function App() {
}
```
-```js src/SearchResults.js hidden
+```js src/SearchResults.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function SearchResults({ query }) {
if (query === '') {
return null;
@@ -1002,6 +994,7 @@ export default function SearchResults({ query }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1029,6 +1022,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/data.js hidden
@@ -1166,21 +1161,6 @@ Tapez `"a"` dans l'exemple ci-dessous, attendez les résultats, puis modifiez vo
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
import { Suspense, useState, useDeferredValue } from 'react';
import SearchResults from './SearchResults.js';
@@ -1206,14 +1186,18 @@ export default function App() {
```
```js src/SearchResults.js hidden
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function SearchResults({ query }) {
if (query === '') {
return null;
@@ -1232,6 +1216,7 @@ export default function SearchResults({ query }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1259,6 +1244,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/data.js hidden
@@ -1374,21 +1361,6 @@ Lorsqu'un composant suspend, le périmètre Suspense parent le plus proche bascu
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
import { Suspense, useState } from 'react';
import IndexPage from './IndexPage.js';
@@ -1493,15 +1465,19 @@ function AlbumsGlimmer() {
}
```
-```js src/Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Albums({ artistId }) {
const albums = use(fetchData(`/${artistId}/albums`));
return (
@@ -1514,6 +1490,7 @@ export default function Albums({ artistId }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1541,17 +1518,23 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Biography({ artistId }) {
const bio = use(fetchData(`/${artistId}/bio`));
return (
@@ -1560,6 +1543,7 @@ export default function Biography({ artistId }) {
</section>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1587,9 +1571,11 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Panel.js hidden
+```js src/Panel.js
export default function Panel({ children }) {
return (
<section className="panel">
@@ -1763,21 +1749,6 @@ function Router() {
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
import { Suspense, startTransition, useState } from 'react';
import IndexPage from './IndexPage.js';
@@ -1884,15 +1855,19 @@ function AlbumsGlimmer() {
}
```
-```js src/Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Albums({ artistId }) {
const albums = use(fetchData(`/${artistId}/albums`));
return (
@@ -1905,6 +1880,7 @@ export default function Albums({ artistId }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1932,17 +1908,23 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Biography({ artistId }) {
const bio = use(fetchData(`/${artistId}/bio`));
return (
@@ -1951,6 +1933,7 @@ export default function Biography({ artistId }) {
</section>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1978,9 +1961,11 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Panel.js hidden
+```js src/Panel.js
export default function Panel({ children }) {
return (
<section className="panel">
@@ -2150,21 +2135,6 @@ Dans l'exemple précédent, une fois que vous avez cliqué sur le bouton, aucune
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
import { Suspense, useState, useTransition } from 'react';
import IndexPage from './IndexPage.js';
@@ -2274,15 +2244,19 @@ function AlbumsGlimmer() {
}
```
-```js src/Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Albums({ artistId }) {
const albums = use(fetchData(`/${artistId}/albums`));
return (
@@ -2295,6 +2269,7 @@ export default function Albums({ artistId }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -2322,17 +2297,23 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Biography({ artistId }) {
const bio = use(fetchData(`/${artistId}/bio`));
return (
@@ -2341,6 +2322,7 @@ export default function Biography({ artistId }) {
</section>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -2368,9 +2350,11 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Panel.js hidden
+```js src/Panel.js
export default function Panel({ children }) {
return (
<section className="panel">
diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
new file mode 100644
index 000000000..b0dc7b571
--- /dev/null
+++ b/src/content/reference/react/ViewTransition.md
@@ -0,0 +1,2213 @@
+---
+title: <ViewTransition>
+version: experimental
+---
+
+<Experimental>
+
+**This API is experimental and is not available in a stable version of React yet.**
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+- `eslint-plugin-react-hooks@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+</Experimental>
+
+<Intro>
+
+`<ViewTransition>` lets you animate elements that update inside a Transition.
+
+
+```js
+import {unstable_ViewTransition as ViewTransition} from 'react';
+
+<ViewTransition>
+ <div>...</div>
+</ViewTransition>
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `<ViewTransition>` {/*viewtransition*/}
+
+Wrap elements in `<ViewTransition>` to animate them when they update inside a [Transition](/reference/react/useTransition). React uses the following heuristics to determine if a View Transition activates for an animation:
+
+- `enter`: If a `ViewTransition` itself gets inserted in this Transition, then this will activate.
+- `exit`: If a `ViewTransition` itself gets deleted in this Transition, then this will activate.
+- `update`: If a `ViewTransition` has any DOM mutations inside it that React is doing (such as a prop changing) or if the `ViewTransition` boundary itself changes size or position due to an immediate sibling. If there are nested` ViewTransition` then the mutation applies to them and not the parent.
+- `share`: If a named `ViewTransition` is inside a deleted subtree and another named `ViewTransition` with the same name is part of an inserted subtree in the same Transition, they form a Shared Element Transition, and it animates from the deleted one to the inserted one.
+
+By default, `<ViewTransition>` animates with a smooth cross-fade (the browser default view transition). You can customize the animation by providing a [View Transition Class](#view-transition-class) to the `<ViewTransition>` component. You can customize animations for each kind of trigger (see [Styling View Transitions](#styling-view-transitions)).
+
+<DeepDive>
+
+#### How does `<ViewTransition>` work? {/*how-does-viewtransition-work*/}
+
+Under the hood, React applies `view-transition-name` to inline styles of the nearest DOM node nested inside the `<ViewTransition>` component. If there are multiple sibling DOM nodes like `<ViewTransition><div /><div /></ViewTransition>` then React adds a suffix to the name to make each unique but conceptually they're part of the same one. React doesn't apply these eagerly but only at the time that boundary should participate in an animation.
+
+React automatically calls `startViewTransition` itself behind the scenes so you should never do that yourself. In fact, if you have something else on the page running a ViewTransition React will interrupt it. So it's recommended that you use React itself to coordinate these. If you had other ways of trigger ViewTransitions in the past, we recommend that you migrate to the built-in way.
+
+If there are other React ViewTransitions already running then React will wait for them to finish before starting the next one. However, importantly if there are multiple updates happening while the first one is running, those will all be batched into one. If you start A->B. Then in the meantime you get an update to go to C and then D. When the first A->B animation finishes the next one will animate from B->D.
+
+The `getSnapshotBeforeUpdate` life-cycle will be called before `startViewTransition` and some `view-transition-name` will update at the same time.
+
+Then React calls `startViewTransition`. Inside the `updateCallback`, React will:
+
+- Apply its mutations to the DOM and invoke useInsertionEffects.
+- Wait for fonts to load.
+- Call componentDidMount, componentDidUpdate, useLayoutEffect and refs.
+- Wait for any pending Navigation to finish.
+- Then React will measure any changes to the layout to see which boundaries will need to animate.
+
+After the ready Promise of the `startViewTransition` is resolved, React will then revert the `view-transition-name`. Then React will invoke the `onEnter`, `onExit`, `onUpdate` and `onShare` callbacks to allow for manual programmatic control over the Animations. This will be after the built-in default ones have already been computed.
+
+If a `flushSync` happens to get in the middle of this sequence, then React will skip the Transition since it relies on being able to complete synchronously.
+
+After the finished Promise of the `startViewTransition` is resolved, React will then invoke `useEffect`. This prevents those from interfering with the performance of the Animation. However, this is not a guarantee because if another `setState` happens while the Animation is running it'll still have to invoke the `useEffect` earlier to preserve the sequential guarantees.
+
+</DeepDive>
+
+#### Props {/*props*/}
+
+By default, `<ViewTransition>` animates with a smooth cross-fade. You can customize the animation, or specify a shared element transition, with these props:
+
+* **optional** `enter`: A string or object. The [View Transition Class](#view-transition-class) to apply when enter is activated.
+* **optional** `exit`: A string or object. The [View Transition Class](#view-transition-class) to apply when exit is activated.
+* **optional** `update`: A string or object. The [View Transition Class](#view-transition-class) to apply when an update is activated.
+* **optional** `share`: A string or object. The [View Transition Class](#view-transition-class) to apply when a shared element is activated.
+* **optional** `default`: A string or object. The [View Transition Class](#view-transition-class) used when no other matching activation prop is found.
+* **optional** `name`: A string or object. The name of the View Transition used for shared element transitions. If not provided, React will use a unique name for each View Transition to prevent unexpected animations.
+
+#### Callback {/*events*/}
+
+These callbacks allow you to adjust the animation imperatively using the [animate](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) APIs:
+
+* **optional** `onEnter`: A function. React calls `onEnter` after an "enter" animation.
+* **optional** `onExit`: A function. React calls `onExit` after an "exit" animation.
+* **optional** `onShare`: A function. React calls `onShare` after a "share" animation.
+* **optional** `onUpdate`: A function. React calls `onUpdate` after an "update" animation.
+
+Each callback receives as arguments:
+- `element`: The DOM element that was animated.
+- `types`: The [Transition Types](/reference/react/addTransitionType) included in the animation.
+
+### View Transition Class {/*view-transition-class*/}
+
+The View Transition Class is the CSS class name(s) applied by React during the transition when the ViewTransition activates. It can be a string or an object.
+- `string`: the `class` added on the child elements when activated. If `'none'` is provided, no class will be added.
+- `object`: the class added on the child elements will be the key matching View Transition type added with `addTransitionType`. The object can also specify a `default` to use if no matching type is found.
+
+The value `'none'` can be used to prevent a View Transition from activating for a specific trigger.
+
+### Styling View Transitions {/*styling-view-transitions*/}
+
+<Note>
+
+In many early examples of View Transitions around the web, you'll have seen using a [`view-transition-name`](https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name) and then style it using `::view-transition-...(my-name)` selectors. We don't recommend that for styling. Instead, we normally recommend using a View Transition Class instead.
+
+</Note>
+
+To customize the animation for a `<ViewTransition>` you can provide a View Transition Class to one of the activation props. The View Transition Class is a CSS class name that React applies to the child elements when the ViewTransition activates.
+
+For example, to customize an "enter" animation, provide a class name to the `enter` prop:
+
+
+```js
+<ViewTransition enter="slide-in">
+```
+
+When the `<ViewTransition>` activates an "enter" animation, React will add the class name `slide-in`. Then you can refer to this class using [view transition pseudo selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API#pseudo-elements) to build reusable animations:
+
+```css
+::view-transition-group(.slide-in) {
+
+}
+::view-transition-old(.slide-in) {
+
+}
+::view-transition-new(.slide-in) {
+
+}
+```
+In the future, CSS libraries may add built-in animations using View Transition Classes to make this easier to use.
+
+#### Caveats {/*caveats*/}
+
+- By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [`<Suspense>`](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/link-to-suspense-below).
+- `<ViewTransition>` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `<ViewTransition>` boundaries manually as a result.
+- Many users may prefer not having animations on the page. React doesn't automatically disable animations for this case. We recommend that using the `@media (prefers-reduced-motion)` media query to disable animations or tone them down based on user preference. In the future, CSS libraries may have this built-in to their presets.
+- Currently, `<ViewTransition>` only works in the DOM. We're working on adding support for React Native and other platforms.
+
+---
+
+
+## Usage {/*usage*/}
+
+### Animating an element on enter/exit {/*animating-an-element-on-enter*/}
+
+Enter/Exit Transitions trigger when a `<ViewTransition>` is added or removed by a component in a transition:
+
+```js
+function Child() {
+ return <ViewTransition>Hi</ViewTransition>
+}
+
+function Parent() {
+ const [show, setShow] = useState();
+ if (show) {
+ return <Child />;
+ }
+ return null;
+}
+```
+
+When `setShow` is called, `show` switches to `true` and the `Child` component is rendered. When `setShow` is called inside `startTransition`, and `Child` renders a `ViewTransition` before any other DOM nodes, an `enter` animation is triggered.
+
+When `show` switches back to `false`, an `exit` animation is triggered.
+
+<Sandpack>
+
+```js src/Video.js hidden
+function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ />
+ );
+}
+
+export function Video({ video }) {
+ return (
+ <div className="video">
+ <div
+ className="link"
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js
+import {
+ unstable_ViewTransition as ViewTransition,
+ useState,
+ startTransition
+} from 'react';
+import {Video} from "./Video";
+import videos from "./data"
+
+function Item() {
+ return (
+ <ViewTransition>
+ <Video video={videos[0]}/>
+ </ViewTransition>
+ );
+}
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+ return (
+ <>
+ <button
+ onClick={() => {
+ startTransition(() => {
+ setShowItem((prev) => !prev);
+ });
+ }}
+ >{showItem ? '➖' : '➕'}</button>
+
+ {showItem ? <Item /> : null}
+ </>
+ );
+}
+```
+
+```js src/data.js hidden
+export default [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ }
+]
+```
+
+
+```css
+#root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 200px;
+}
+button {
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f8ff;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+ border: 2px solid #ccc;
+ background-color: #e0e8ff;
+}
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+ margin-top: 1em;
+}
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+.video .info:hover {
+ text-decoration: underline;
+}
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ }
+}
+```
+
+</Sandpack>
+
+<Pitfall>
+
+`<ViewTransition>` only activates if it is placed before any DOM node. If `Child` instead looked like this, no animation would trigger:
+
+```js [3, 5]
+function Component() {
+ return (
+ <div>
+ <ViewTransition>Hi</ViewTransition>
+ </div>
+ );
+}
+```
+
+</Pitfall>
+
+---
+### Animating a shared element {/*animating-a-shared-element*/}
+
+Normally, we don't recommend assigning a name to a `<ViewTransition>` and instead let React assign it an automatic name. The reason you might want to assign a name is to animate between completely different components when one tree unmounts and another tree mounts at the same time. To preserve continuity.
+
+```js
+<ViewTransition name={UNIQUE_NAME}>
+ <Child />
+</ViewTransition>
+```
+
+When one tree unmounts and another mounts, if there's a pair where the same name exists in the unmounting tree and the mounting tree, they trigger the "share" animation on both. It animates from the unmounting side to the mounting side.
+
+Unlike an exit/enter animation this can be deeply inside the deleted/mounted tree. If a `<ViewTransition>` would also be eligible for exit/enter, then the "share" animation takes precedence.
+
+If Transition first unmounts one side and then leads to a `<Suspense>` fallback being shown before eventually the new name being mounted, then no shared element transition happens.
+
+<Sandpack>
+
+```js
+import {
+ unstable_ViewTransition as ViewTransition,
+ useState,
+ startTransition
+} from "react";
+import {Video, Thumbnail, FullscreenVideo} from "./Video";
+import videos from "./data";
+
+export default function Component() {
+ const [fullscreen, setFullscreen] = useState(false);
+ if (fullscreen) {
+ return <FullscreenVideo
+ video={videos[0]}
+ onExit={() => startTransition(() => setFullscreen(false))}
+ />
+ }
+ return <Video
+ video={videos[0]}
+ onClick={() => startTransition(() => setFullscreen(true))}
+ />
+}
+
+```
+
+```js src/Video.js
+import {unstable_ViewTransition as ViewTransition} from "react";
+
+const THUMBNAIL_NAME = "video-thumbnail"
+
+export function Thumbnail({ video, children }) {
+ return (
+ <ViewTransition name={THUMBNAIL_NAME}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ />
+ </ViewTransition>
+ );
+}
+
+export function Video({ video, onClick }) {
+ return (
+ <div className="video">
+ <div className="link" onClick={onClick}>
+ <Thumbnail video={video} />
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export function FullscreenVideo({video, onExit}) {
+ return (
+ <div className="fullscreenLayout">
+ <ViewTransition name={THUMBNAIL_NAME}>
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image} fullscreen`}
+ />
+ <button
+ className="close-button"
+ onClick={onExit}
+ >
+ ✖
+ </button>
+ </ViewTransition>
+ </div>
+ );
+}
+```
+
+
+```js src/data.js hidden
+export default [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ }
+]
+```
+
+
+```css
+#root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: 300px;
+}
+button {
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f8ff;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+ border: 2px solid #ccc;
+ background-color: #e0e8ff;
+}
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+.thumbnail.fullscreen {
+ height: 100%;
+ width: 100%;
+}
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+ margin-top: 1em;
+}
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+.video .info:hover {
+ text-decoration: underline;
+}
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+.fullscreenLayout {
+ position: relative;
+ height: 100%;
+ width: 100%;
+}
+.close-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ color: black;
+}
+@keyframes progress-animation {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
+```
+
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ }
+}
+```
+
+</Sandpack>
+
+
+<Note>
+
+If either the mounted or unmounted side of a pair is outside the viewport, then no pair is formed. This ensures that it doesn't fly in or out of the viewport when something is scrolled. Instead it's treated as a regular enter/exit by itself.
+
+This does not happen if the same Component instance changes position, which triggers an "update". Those animate regardless if one position is outside the viewport.
+
+There's currently a quirk where if a deeply nested unmounted `<ViewTransition>` is inside the viewport but the mounted side is not within the viewport, then the unmounted side animates as its own "exit" animation even if it's deeply nested instead of as part of the parent animation.
+
+</Note>
+
+<Pitfall>
+
+It's important that there's only one thing with the same name mounted at a time in the entire app. Therefore it's important to use unique namespaces for the name to avoid conflicts. To ensure you can do this you might want to add a constant in a separate module that you import.
+
+```js
+export const MY_NAME = "my-globally-unique-name";
+import {MY_NAME} from './shared-name';
+...
+<ViewTransition name={MY_NAME}>
+```
+
+</Pitfall>
+
+
+---
+
+### Animating reorder of items in a list {/*animating-reorder-of-items-in-a-list*/}
+
+
+```js
+items.map(item => <Component key={item.id} item={item} />)
+```
+
+When reordering a list, without updating the content, the "update" animation triggers on each `<ViewTransition>` in the list if they're outside a DOM node. Similar to enter/exit animations.
+
+This means that this will trigger the animation on this `<ViewTransition>`:
+
+```js
+function Component() {
+ return <ViewTransition><div>...</div></ViewTransition>;
+}
+```
+<Sandpack>
+
+```js src/Video.js hidden
+function Thumbnail({ video }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ />
+ );
+}
+
+export function Video({ video }) {
+ return (
+ <div className="video">
+ <div className="link">
+ <Thumbnail video={video}></Thumbnail>
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js
+import {
+ unstable_ViewTransition as ViewTransition,
+ useState,
+ startTransition
+} from "react";
+import {Video} from "./Video";
+import videos from "./data";
+
+export default function Component() {
+ const [orderedVideos, setOrderedVideos] = useState(videos);
+ const reorder = () => {
+ startTransition(() => {
+ setOrderedVideos((prev) => {
+ return [...prev.sort(() => Math.random() - 0.5)];
+ });
+ });
+ };
+ return (
+ <>
+ <button onClick={reorder}>🎲</button>
+ <div className="listContainer">
+ {orderedVideos.map((video, i) => {
+ return (
+ <ViewTransition key={video.title}>
+ <Video video={video} />
+ </ViewTransition>
+ );
+ })}
+ </div>
+ </>
+ );
+}
+
+
+```
+
+```js src/data.js hidden
+export default [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ }
+]
+```
+
+
+```css
+#root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 150px;
+}
+button {
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f8ff;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+ border: 2px solid #ccc;
+ background-color: #e0e8ff;
+}
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+ margin-top: 1em;
+}
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+}
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+.video .info:hover {
+ text-decoration: underline;
+}
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+```
+
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ }
+}
+```
+
+</Sandpack>
+
+However, this wouldn't animate each individual item:
+
+```js
+function Component() {
+ return <div><ViewTransition>...</ViewTransition></div>;
+}
+```
+Instead, any parent `<ViewTransition>` would cross-fade. If there is no parent `<ViewTransition>` then there's no animation in that case.
+
+<Sandpack>
+
+```js src/Video.js hidden
+function Thumbnail({ video }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ />
+ );
+}
+
+export function Video({ video }) {
+ return (
+ <div className="video">
+ <div className="link">
+ <Thumbnail video={video}></Thumbnail>
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js
+import {
+ unstable_ViewTransition as ViewTransition,
+ useState,
+ startTransition
+} from "react";
+import {Video} from "./Video";
+import videos from "./data";
+
+export default function Component() {
+ const [orderedVideos, setOrderedVideos] = useState(videos);
+ const reorder = () => {
+ startTransition(() => {
+ setOrderedVideos((prev) => {
+ return [...prev.sort(() => Math.random() - 0.5)];
+ });
+ });
+ };
+ return (
+ <>
+ <button onClick={reorder}>🎲</button>
+ <ViewTransition>
+ <div className="listContainer">
+ {orderedVideos.map((video, i) => {
+ return <Video video={video} key={video.title} />;
+ })}
+ </div>
+ </ViewTransition>
+ </>
+ );
+}
+
+
+```
+
+```js src/data.js hidden
+export default [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ }
+]
+```
+
+
+```css
+#root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 150px;
+}
+button {
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f8ff;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+ border: 2px solid #ccc;
+ background-color: #e0e8ff;
+}
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+ margin-top: 1em;
+}
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+}
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+.video .info:hover {
+ text-decoration: underline;
+}
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+```
+
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ }
+}
+```
+
+</Sandpack>
+
+This means you might want to avoid wrapper elements in lists where you want to allow the Component to control its own reorder animation:
+
+```
+items.map(item => <div><Component key={item.id} item={item} /></div>)
+```
+
+The above rule also applies if one of the items updates to resize, which then causes the siblings to resize, it'll also animate its sibling `<ViewTransition>` but only if they're immediate siblings.
+
+This means that during an update, which causes a lot of re-layout, it doesn't individually animate every `<ViewTransition>` on the page. That would lead to a lot of noisy animations which distracts from the actual change. Therefore React is more conservative about when an individual animation triggers.
+
+<Pitfall>
+
+It's important to properly use keys to preserve identity when reordering lists. It might seem like you could use "name", shared element transitions, to animate reorders but that would not trigger if one side was outside the viewport. To animate a reorder you often want to show that it went to a position outside the viewport.
+
+</Pitfall>
+
+---
+
+### Animating from Suspense content {/*animating-from-suspense-content*/}
+
+Just like any Transition, React waits for data and new CSS (`<link rel="stylesheet" precedence="...">`) before running the animation. In addition to this, ViewTransitions also wait up to 500ms for new fonts to load before starting the animation to avoid them flickering in later. For the same reason, an image wrapped in ViewTransition will wait for the image to load.
+
+If it's inside a new Suspense boundary instance, then the fallback is shown first. After the Suspense boundary fully loads, it triggers the `<ViewTransition>` to animate the reveal to the content.
+
+Currently, this only happens for client-side Transition. In the future, this will also animate Suspense boundary for streaming SSR when content from the server suspends during the initial load.
+
+There are two ways to animate Suspense boundaries depending on where you place the `<ViewTransition>`:
+
+Update:
+
+```
+<ViewTransition>
+ <Suspense fallback={<A />}>
+ <B />
+ </Suspense>
+</ViewTransition>
+```
+In this scenario when the content goes from A to B, it'll be treated as an "update" and apply that class if appropriate. Both A and B will get the same view-transition-name and therefore they're acting as a cross-fade by default.
+
+<Sandpack>
+
+```js src/Video.js hidden
+function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ />
+ );
+}
+
+export function Video({ video }) {
+ return (
+ <div className="video">
+ <div className="link">
+ <Thumbnail video={video}></Thumbnail>
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export function VideoPlaceholder() {
+ const video = {image: "loading"}
+ return (
+ <div className="video">
+ <div className="link">
+ <Thumbnail video={video}></Thumbnail>
+ <div className="info">
+ <div className="video-title loading" />
+ <div className="video-description loading" />
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js
+import {
+ unstable_ViewTransition as ViewTransition,
+ useState,
+ startTransition,
+ Suspense
+} from 'react';
+import {Video, VideoPlaceholder} from "./Video";
+import {useLazyVideoData} from "./data"
+
+function LazyVideo() {
+ const video = useLazyVideoData();
+ return (
+ <Video video={video}/>
+ );
+}
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+ return (
+ <>
+ <button
+ onClick={() => {
+ startTransition(() => {
+ setShowItem((prev) => !prev);
+ });
+ }}
+ >{showItem ? '➖' : '➕'}</button>
+ {showItem ? (
+ <ViewTransition>
+ <Suspense fallback={<VideoPlaceholder />}>
+ <LazyVideo />
+ </Suspense>
+ </ViewTransition>
+ ) : null}
+ </>
+ );
+}
+```
+
+```js src/data.js hidden
+import {use} from "react";
+
+let cache = null;
+
+function fetchVideo() {
+ if (!cache) {
+ cache = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ });
+ }, 1000);
+ });
+ }
+ return cache;
+}
+
+export function useLazyVideoData() {
+ return use(fetchVideo());
+}
+```
+
+
+```css
+#root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 200px;
+}
+button {
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f8ff;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+ border: 2px solid #ccc;
+ background-color: #e0e8ff;
+}
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.loading {
+ background-image: linear-gradient(90deg, rgba(173, 216, 230, 0.3) 25%, rgba(135, 206, 250, 0.5) 50%, rgba(173, 216, 230, 0.3) 75%);
+ background-size: 200% 100%;
+ animation: shimmer 1.5s infinite;
+}
+@keyframes shimmer {
+ 0% {
+ background-position: -200% 0;
+ }
+ 100% {
+ background-position: 200% 0;
+ }
+}
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+ margin-top: 1em;
+}
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+.video .info:hover {
+ text-decoration: underline;
+}
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+.video-title.loading {
+ height: 20px;
+ width: 80px;
+ border-radius: 0.5rem;
+}
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+ border-radius: 0.5rem;
+}
+.video-description.loading {
+ height: 15px;
+ width: 100px;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ }
+}
+```
+
+</Sandpack>
+
+Enter/Exit:
+
+```
+<Suspense fallback={<ViewTransition><A /></ViewTransition>}>
+ <ViewTransition><B /></ViewTransition>
+</Suspense>
+```
+
+In this scenario, these are two separate ViewTransition instances each with their own `view-transition-name`. This will be treated as an "exit" of the `<A>` and an "enter" of the `<B>`.
+
+You can achieve different effects depending on where you choose to place the `<ViewTransition>` boundary.
+
+---
+### Opting-out of an animation {/*opting-out-of-an-animation*/}
+
+Sometimes you're wrapping a large existing component, like a whole page, and you want to animate some updates, such as changing the theme. However, you don't want it to opt-in all updates inside the whole page to cross-fade when they're updating. Especially if you're incrementally adding more animations.
+
+You can use the class "none" to opt-out of an animation. By wrapping your children in a "none" you can disable animations for updates to them while the parent still triggers.
+
+```js
+<ViewTransition>
+ <div className={theme}>
+ <ViewTransition update="none">
+ {children}
+ </ViewTransition>
+ </div>
+</ViewTransition>
+```
+
+This will only animate if the theme changes and not if only the children update. The children can still opt-in again with their own `<ViewTransition>` but at least it's manual again.
+
+---
+
+### Customizing animations {/*customizing-animations*/}
+
+By default, `<ViewTransition>` includes the default cross-fade from the browser.
+
+To customize animations, you can provide props to the `<ViewTransition>` component to specify which animations to use, based on how the `<ViewTransition>` activates.
+
+For example, we can slow down the default cross fade animation:
+
+```js
+<ViewTransition default="slow-fade">
+ <Video />
+</ViewTransition>
+```
+
+And define slow-fade in CSS using view transition classes:
+
+```css
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+<Sandpack>
+
+```js src/Video.js hidden
+function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ />
+ );
+}
+
+export function Video({ video }) {
+ return (
+ <div className="video">
+ <div
+ className="link"
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js
+import {
+ unstable_ViewTransition as ViewTransition,
+ useState,
+ startTransition
+} from 'react';
+import {Video} from "./Video";
+import videos from "./data"
+
+function Item() {
+ return (
+ <ViewTransition default="slow-fade">
+ <Video video={videos[0]}/>
+ </ViewTransition>
+ );
+}
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+ return (
+ <>
+ <button
+ onClick={() => {
+ startTransition(() => {
+ setShowItem((prev) => !prev);
+ });
+ }}
+ >{showItem ? '➖' : '➕'}</button>
+
+ {showItem ? <Item /> : null}
+ </>
+ );
+}
+```
+
+```js src/data.js hidden
+export default [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ }
+]
+```
+
+
+```css
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+#root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 200px;
+}
+button {
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f8ff;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+ border: 2px solid #ccc;
+ background-color: #e0e8ff;
+}
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+ margin-top: 1em;
+}
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+.video .info:hover {
+ text-decoration: underline;
+}
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ }
+}
+```
+
+</Sandpack>
+
+In addition to setting the `default`, you can also provide configurations for `enter`, `exit`, `update`, and `share` animations.
+
+<Sandpack>
+
+```js src/Video.js hidden
+function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ />
+ );
+}
+
+export function Video({ video }) {
+ return (
+ <div className="video">
+ <div
+ className="link"
+ >
+ <Thumbnail video={video}></Thumbnail>
+
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js
+import {
+ unstable_ViewTransition as ViewTransition,
+ useState,
+ startTransition
+} from 'react';
+import {Video} from "./Video";
+import videos from "./data"
+
+function Item() {
+ return (
+ <ViewTransition enter="slide-in" exit="slide-out">
+ <Video video={videos[0]}/>
+ </ViewTransition>
+ );
+}
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+ return (
+ <>
+ <button
+ onClick={() => {
+ startTransition(() => {
+ setShowItem((prev) => !prev);
+ });
+ }}
+ >{showItem ? '➖' : '➕'}</button>
+
+ {showItem ? <Item /> : null}
+ </>
+ );
+}
+```
+
+```js src/data.js hidden
+export default [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ }
+]
+```
+
+
+```css
+::view-transition-old(.slide-in) {
+ animation-name: slideOutRight;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-new(.slide-in) {
+ animation-name: slideInRight;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-old(.slide-out) {
+ animation-name: slideOutLeft;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-new(.slide-out) {
+ animation-name: slideInLeft;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+@keyframes slideOutLeft {
+ from {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+}
+
+@keyframes slideInLeft {
+ from {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slideOutRight {
+ from {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+#root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 200px;
+}
+button {
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f8ff;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+ border: 2px solid #ccc;
+ background-color: #e0e8ff;
+}
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+ margin-top: 1em;
+}
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+.video .info:hover {
+ text-decoration: underline;
+}
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ }
+}
+```
+
+</Sandpack>
+
+### Customizing animations with types {/*customizing-animations-with-types*/}
+You can use the [`addTransitionType`](/reference/react/addTransitionType) API to add a class name to the child elements when a specific transition type is activated for a specific activation trigger. This allows you to customize the animation for each type of transition.
+
+For example, to customize the animation for all forward and backward navigations:
+
+```js
+<ViewTransition default={{
+ 'navigation-back': 'slide-right',
+ 'navigation-forward': 'slide-left',
+ }}>
+ <div>...</div>
+</ViewTransition>
+
+// in your router:
+startTransition(() => {
+ addTransitionType('navigation-' + navigationType);
+});
+```
+
+When the ViewTransition activates a "navigation-back" animation, React will add the class name "slide-right". When the ViewTransition activates a "navigation-forward" animation, React will add the class name "slide-left".
+
+In the future, routers and other libraries may add support for standard view-transition types and styles.
+
+<Sandpack>
+
+```js src/Video.js hidden
+function Thumbnail({ video, children }) {
+ return (
+ <div
+ aria-hidden="true"
+ tabIndex={-1}
+ className={`thumbnail ${video.image}`}
+ />
+ );
+}
+
+export function Video({ video }) {
+ return (
+ <div className="video">
+ <div
+ className="link"
+ >
+ <Thumbnail video={video}></Thumbnail>
+ <div className="info">
+ <div className="video-title">{video.title}</div>
+ <div className="video-description">{video.description}</div>
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js
+import {
+ unstable_ViewTransition as ViewTransition,
+ unstable_addTransitionType as addTransitionType,
+ useState,
+ startTransition,
+} from "react";
+import {Video} from "./Video";
+import videos from "./data"
+
+function Item() {
+ return (
+ <ViewTransition enter={
+ {
+ "add-video-back": "slide-in-back",
+ "add-video-forward": "slide-in-forward"
+ }
+ }
+ exit={
+ {
+ "remove-video-back": "slide-in-forward",
+ "remove-video-forward": "slide-in-back"
+ }
+ }>
+ <Video video={videos[0]}/>
+ </ViewTransition>
+ );
+}
+
+export default function Component() {
+ const [showItem, setShowItem] = useState(false);
+ return (
+ <>
+ <div className="button-container">
+ <button
+ onClick={() => {
+ startTransition(() => {
+ if (showItem) {
+ addTransitionType("remove-video-back")
+ } else {
+ addTransitionType("add-video-back")
+ }
+ setShowItem((prev) => !prev);
+ });
+ }}
+ >⬅️</button>
+ <button
+ onClick={() => {
+ startTransition(() => {
+ if (showItem) {
+ addTransitionType("remove-video-forward")
+ } else {
+ addTransitionType("add-video-forward")
+ }
+ setShowItem((prev) => !prev);
+ });
+ }}
+ >➡️</button>
+ </div>
+ {showItem ? <Item /> : null}
+ </>
+ );
+}
+```
+
+```js src/data.js hidden
+export default [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ }
+]
+```
+
+
+```css
+::view-transition-old(.slide-in-back) {
+ animation-name: slideOutRight;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-new(.slide-in-back) {
+ animation-name: slideInRight;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-old(.slide-out-back) {
+ animation-name: slideOutLeft;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-new(.slide-out-back) {
+ animation-name: slideInLeft;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-old(.slide-in-forward) {
+ animation-name: slideOutLeft;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-new(.slide-in-forward) {
+ animation-name: slideInLeft;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-old(.slide-out-forward) {
+ animation-name: slideOutRight;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+::view-transition-new(.slide-out-forward) {
+ animation-name: slideInRight;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+}
+
+@keyframes slideOutLeft {
+ from {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+}
+
+@keyframes slideInLeft {
+ from {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slideOutRight {
+ from {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+#root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 200px;
+}
+button {
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f0f8ff;
+ color: white;
+ font-size: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, border 0.3s;
+}
+button:hover {
+ border: 2px solid #ccc;
+ background-color: #e0e8ff;
+}
+.button-container {
+ display: flex;
+}
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+ margin-top: 1em;
+}
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+.video .info:hover {
+ text-decoration: underline;
+}
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ }
+}
+```
+
+</Sandpack>
+
+### Building View Transition enabled routers {/*building-view-transition-enabled-routers*/}
+
+React waits for any pending Navigation to finish to ensure that scroll restoration happens within the animation. If the Navigation is blocked on React, your router must unblock in `useLayoutEffect` since `useEffect` would lead to a deadlock.
+
+If a `startTransition` is started from the legacy popstate event, such as during a "back"-navigation then it must finish synchronously to ensure scroll and form restoration works correctly. This is in conflict with running a View Transition animation. Therefore, React will skip animations from popstate. Therefore animations won't run for the back button. You can fix this by upgrading your router to use the Navigation API.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My `<ViewTransition>` is not activating {/*my-viewtransition-is-not-activating*/}
+
+`<ViewTransition>` only activates if it is placed is before any DOM node:
+
+```js [3, 5]
+function Component() {
+ return (
+ <div>
+ <ViewTransition>Hi</ViewTransition>
+ </div>
+ );
+}
+```
+
+To fix, ensure that the `<ViewTransition>` comes before any other DOM nodes:
+
+```js [3, 5]
+function Component() {
+ return (
+ <ViewTransition>
+ <div>Hi</div>
+ </ViewTransition>
+ );
+}
+```
+
+### I'm getting an error "There are two `<ViewTransition name=%s>` components with the same name mounted at the same time." {/*two-viewtransition-with-same-name*/}
+
+This error occurs when two `<ViewTransition>` components with the same `name` are mounted at the same time:
+
+
+```js [3]
+function Item() {
+ // 🚩 All items will get the same "name".
+ return <ViewTransition name="item">...</ViewTransition>;
+}
+
+function ItemList({items}) {
+ return (
+ <>
+ {item.map(item => <Item key={item.id} />)}
+ </>
+ );
+}
+```
+
+This will cause the View Transition to error. In development, React detects this issue to surface it and logs two errors:
+
+<ConsoleBlockMulti>
+<ConsoleLogLine level="error">
+
+There are two `<ViewTransition name=%s>` components with the same name mounted at the same time. This is not supported and will cause View Transitions to error. Try to use a more unique name e.g. by using a namespace prefix and adding the id of an item to the name.
+{' '}at Item
+{' '}at ItemList
+
+</ConsoleLogLine>
+
+<ConsoleLogLine level="error">
+
+The existing `<ViewTransition name=%s>` duplicate has this stack trace.
+{' '}at Item
+{' '}at ItemList
+
+</ConsoleLogLine>
+</ConsoleBlockMulti>
+
+To fix, ensure that there's only one `<ViewTransition>` with the same name mounted at a time in the entire app by ensuring the `name` is unique, or adding an `id` to the name:
+
+```js [3]
+function Item({id}) {
+ // ✅ All items will get the same "name".
+ return <ViewTransition name={`item-${id}`}>...</ViewTransition>;
+}
+
+function ItemList({items}) {
+ return (
+ <>
+ {item.map(item => <Item key={item.id} item={item} />)}
+ </>
+ );
+}
+```
diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md
index 9d8621287..f8ac9bb04 100644
--- a/src/content/reference/react/act.md
+++ b/src/content/reference/react/act.md
@@ -72,14 +72,24 @@ function Counter() {
}
useEffect(() => {
+<<<<<<< HEAD
document.title = `Vous avez cliqué ${this.state.count} fois`;
+=======
+ document.title = `You clicked ${count} times`;
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
}, [count]);
return (
<div>
+<<<<<<< HEAD
<p>Vous avez cliqué {this.state.count} fois</p>
<button onClick={this.handleClick}>
Cliquez ici
+=======
+ <p>You clicked {count} times</p>
+ <button onClick={handleClick}>
+ Click me
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</button>
</div>
)
diff --git a/src/content/reference/react/addTransitionType.md b/src/content/reference/react/addTransitionType.md
new file mode 100644
index 000000000..f292ea755
--- /dev/null
+++ b/src/content/reference/react/addTransitionType.md
@@ -0,0 +1,182 @@
+---
+title: unstable_addTransitionType
+version: experimental
+---
+
+<Experimental>
+
+**This API is experimental and is not available in a stable version of React yet.**
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+- `eslint-plugin-react-hooks@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+</Experimental>
+
+<Intro>
+
+`unstable_addTransitionType` lets you specify the cause of a transition.
+
+
+```js
+startTransition(() => {
+ unstable_addTransitionType('my-transition-type');
+ setState(newState);
+});
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `addTransitionType` {/*addtransitiontype*/}
+
+#### Parameters {/*parameters*/}
+
+- `type`: The type of transition to add. This can be any string.
+
+#### Returns {/*returns*/}
+
+`startTransition` does not return anything.
+
+#### Caveats {/*caveats*/}
+
+- If multiple transitions are combined, all Transition Types are collected. You can also add more than one type to a Transition.
+- Transition Types are reset after each commit. This means a `<Suspense>` fallback will associate the types after a `startTransition`, but revealing the content does not.
+
+---
+
+## Usage {/*usage*/}
+
+### Adding the cause of a transition {/*adding-the-cause-of-a-transition*/}
+
+Call `addTransitionType` inside of `startTransition` to indicate the cause of a transition:
+
+``` [[1, 6, "unstable_addTransitionType"], [2, 5, "startTransition", [3, 6, "'submit-click'"]]
+import { startTransition, unstable_addTransitionType } from 'react';
+
+function Submit({action) {
+ function handleClick() {
+ startTransition(() => {
+ unstable_addTransitionType('submit-click');
+ action();
+ });
+ }
+
+ return <button onClick={handleClick}>Click me</button>;
+}
+
+```
+
+When you call <CodeStep step={1}>addTransitionType</CodeStep> inside the scope of <CodeStep step={2}>startTransition</CodeStep>, React will associate <CodeStep step={3}>submit-click</CodeStep> as one of the causes for the Transition.
+
+Currently, Transition Types can be used to customize different animations based on what caused the Transition. You have three different ways to choose from for how to use them:
+
+- [Customize animations using browser view transition types](#customize-animations-using-browser-view-transition-types)
+- [Customize animations using `View Transition` Class](#customize-animations-using-view-transition-class)
+- [Customize animations using `ViewTransition` events](#customize-animations-using-viewtransition-events)
+
+In the future, we plan to support more use cases for using the cause of a transition.
+
+---
+### Customize animations using browser view transition types {/*customize-animations-using-browser-view-transition-types*/}
+
+When a [`ViewTransition`](/reference/react/ViewTransition) activates from a transition, React adds all the Transition Types as browser [view transition types](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples) to the element.
+
+This allows you to customize different animations based on CSS scopes:
+
+```js [11]
+function Component() {
+ return (
+ <ViewTransition>
+ <div>Hello</div>
+ </ViewTransition>
+ );
+}
+
+startTransition(() => {
+ unstable_addTransitionType('my-transition-type');
+ setShow(true);
+});
+```
+
+```css
+:root:active-view-transition-type(my-transition-type) {
+ &::view-transition-...(...) {
+ ...
+ }
+}
+```
+
+---
+
+### Customize animations using `View Transition` Class {/*customize-animations-using-view-transition-class*/}
+
+You can customize animations for an activated `ViewTransition` based on type by passing an object to the View Transition Class:
+
+```js
+function Component() {
+ return (
+ <ViewTransition enter={{
+ 'my-transition-type': 'my-transition-class',
+ }}>
+ <div>Hello</div>
+ </ViewTransition>
+ );
+}
+
+// ...
+startTransition(() => {
+ unstable_addTransitionType('my-transition-type');
+ setState(newState);
+});
+```
+
+If multiple types match, then they're joined together. If no types match then the special "default" entry is used instead. If any type has the value "none" then that wins and the ViewTransition is disabled (not assigned a name).
+
+These can be combined with enter/exit/update/layout/share props to match based on kind of trigger and Transition Type.
+
+```js
+<ViewTransition enter={{
+ 'navigation-back': 'enter-right',
+ 'navigation-forward': 'enter-left',
+}}
+exit={{
+ 'navigation-back': 'exit-right',
+ 'navigation-forward': 'exit-left',
+}}>
+```
+
+---
+
+### Customize animations using `ViewTransition` events {/*customize-animations-using-viewtransition-events*/}
+
+You can imperatively customize animations for an activated `ViewTransition` based on type using View Transition events:
+
+```
+<ViewTransition onUpdate={(inst, types) => {
+ if (types.includes('navigation-back')) {
+ ...
+ } else if (types.includes('navigation-forward')) {
+ ...
+ } else {
+ ...
+ }
+}}>
+```
+
+This allows you to pick different imperative Animations based on the cause.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### TODO {/*todo2*/}
diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index bd6c172b5..e8816a403 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -3,6 +3,7 @@ title: cache
canary: true
---
+<<<<<<< HEAD
<Canary>
* `cache` n'est destinée qu'aux [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). Découvrez quels [frameworks](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) prennent en charge les Composants Serveur.
@@ -10,6 +11,13 @@ canary: true
* `cache` n'est disponible que dans les canaux de livraison [Canary](/community/versioning-policy#canary-channel) et [Expérimental](/community/versioning-policy#experimental-channel). Assurez-vous d'en comprendre les limitations avant d'utiliser `cache` en production. Apprenez-en davantage sur les [canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+<RSC>
+
+`cache` is only for use with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
+
+</RSC>
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md
new file mode 100644
index 000000000..6d8cc502d
--- /dev/null
+++ b/src/content/reference/react/captureOwnerStack.md
@@ -0,0 +1,398 @@
+---
+title: captureOwnerStack
+---
+
+<Intro>
+
+`captureOwnerStack` reads the current Owner Stack in development and returns it as a string if available.
+
+```js
+const stack = captureOwnerStack();
+```
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `captureOwnerStack()` {/*captureownerstack*/}
+
+Call `captureOwnerStack` to get the current Owner Stack.
+
+```js {5,5}
+import * as React from 'react';
+
+function Component() {
+ if (process.env.NODE_ENV !== 'production') {
+ const ownerStack = React.captureOwnerStack();
+ console.log(ownerStack);
+ }
+}
+```
+
+#### Parameters {/*parameters*/}
+
+`captureOwnerStack` does not take any parameters.
+
+#### Returns {/*returns*/}
+
+`captureOwnerStack` returns `string | null`.
+
+Owner Stacks are available in
+- Component render
+- Effects (e.g. `useEffect`)
+- React's event handlers (e.g. `<button onClick={...} />`)
+- React error handlers ([React Root options](/reference/react-dom/client/createRoot#parameters) `onCaughtError`, `onRecoverableError`, and `onUncaughtError`)
+
+If no Owner Stack is available, `null` is returned (see [Troubleshooting: The Owner Stack is `null`](#the-owner-stack-is-null)).
+
+#### Caveats {/*caveats*/}
+
+- Owner Stacks are only available in development. `captureOwnerStack` will always return `null` outside of development.
+
+<DeepDive>
+
+#### Owner Stack vs Component Stack {/*owner-stack-vs-component-stack*/}
+
+The Owner Stack is different from the Component Stack available in React error handlers like [`errorInfo.componentStack` in `onUncaughtError`](/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors).
+
+For example, consider the following code:
+
+<Sandpack>
+
+```js src/App.js
+import {Suspense} from 'react';
+
+function SubComponent({disabled}) {
+ if (disabled) {
+ throw new Error('disabled');
+ }
+}
+
+export function Component({label}) {
+ return (
+ <fieldset>
+ <legend>{label}</legend>
+ <SubComponent key={label} disabled={label === 'disabled'} />
+ </fieldset>
+ );
+}
+
+function Navigation() {
+ return null;
+}
+
+export default function App({children}) {
+ return (
+ <Suspense fallback="loading...">
+ <main>
+ <Navigation />
+ {children}
+ </main>
+ </Suspense>
+ );
+}
+```
+
+```js src/index.js
+import {captureOwnerStack} from 'react';
+import {createRoot} from 'react-dom/client';
+import App, {Component} from './App.js';
+import './styles.css';
+
+createRoot(document.createElement('div'), {
+ onUncaughtError: (error, errorInfo) => {
+ // The stacks are logged instead of showing them in the UI directly to
+ // highlight that browsers will apply sourcemaps to the logged stacks.
+ // Note that sourcemapping is only applied in the real browser console not
+ // in the fake one displayed on this page.
+ // Press "fork" to be able to view the sourcemapped stack in a real console.
+ console.log(errorInfo.componentStack);
+ console.log(captureOwnerStack());
+ },
+}).render(
+ <App>
+ <Component label="disabled" />
+ </App>
+);
+```
+
+```html public/index.html hidden
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Document</title>
+ </head>
+ <body>
+ <p>Check the console output.</p>
+ </body>
+</html>
+```
+
+</Sandpack>
+
+`SubComponent` would throw an error.
+The Component Stack of that error would be
+
+```
+at SubComponent
+at fieldset
+at Component
+at main
+at React.Suspense
+at App
+```
+
+However, the Owner Stack would only read
+
+```
+at Component
+```
+
+Neither `App` nor the DOM components (e.g. `fieldset`) are considered Owners in this Stack since they didn't contribute to "creating" the node containing `SubComponent`. `App` and DOM components only forwarded the node. `App` just rendered the `children` node as opposed to `Component` which created a node containing `SubComponent` via `<SubComponent />`.
+
+Neither `Navigation` nor `legend` are in the stack at all since it's only a sibling to a node containing `<SubComponent />`.
+
+`SubComponent` is omitted because it's already part of the callstack.
+
+</DeepDive>
+
+## Usage {/*usage*/}
+
+### Enhance a custom error overlay {/*enhance-a-custom-error-overlay*/}
+
+```js [[1, 5, "console.error"], [4, 7, "captureOwnerStack"]]
+import { captureOwnerStack } from "react";
+import { instrumentedConsoleError } from "./errorOverlay";
+
+const originalConsoleError = console.error;
+console.error = function patchedConsoleError(...args) {
+ originalConsoleError.apply(console, args);
+ const ownerStack = captureOwnerStack();
+ onConsoleError({
+ // Keep in mind that in a real application, console.error can be
+ // called with multiple arguments which you should account for.
+ consoleMessage: args[0],
+ ownerStack,
+ });
+};
+```
+
+If you intercept <CodeStep step={1}>`console.error`</CodeStep> calls to highlight them in an error overlay, you can call <CodeStep step={2}>`captureOwnerStack`</CodeStep> to include the Owner Stack.
+
+<Sandpack>
+
+```css src/styles.css
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: sans-serif;
+ margin: 20px;
+ padding: 0;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: white;
+ padding: 15px;
+ opacity: 0.9;
+ text-wrap: wrap;
+ overflow: scroll;
+}
+
+.text-red {
+ color: red;
+}
+
+.-mb-20 {
+ margin-bottom: -20px;
+}
+
+.mb-0 {
+ margin-bottom: 0;
+}
+
+.mb-10 {
+ margin-bottom: 10px;
+}
+
+pre {
+ text-wrap: wrap;
+}
+
+pre.nowrap {
+ text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;
+}
+```
+
+```html public/index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+ <title>My app</title>
+</head>
+<body>
+<!--
+ Error dialog in raw HTML
+ since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+ <h1 id="error-title" class="text-red">Error</h1>
+ <p>
+ <pre id="error-body"></pre>
+ </p>
+ <h2 class="-mb-20">Owner Stack:</h4>
+ <pre id="error-owner-stack" class="nowrap"></pre>
+ <button
+ id="error-close"
+ class="mb-10"
+ onclick="document.getElementById('error-dialog').classList.add('hidden')"
+ >
+ Close
+ </button>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+
+```
+
+```js src/errorOverlay.js
+
+export function onConsoleError({ consoleMessage, ownerStack }) {
+ const errorDialog = document.getElementById("error-dialog");
+ const errorBody = document.getElementById("error-body");
+ const errorOwnerStack = document.getElementById("error-owner-stack");
+
+ // Display console.error() message
+ errorBody.innerText = consoleMessage;
+
+ // Display owner stack
+ errorOwnerStack.innerText = ownerStack;
+
+ // Show the dialog
+ errorDialog.classList.remove("hidden");
+}
+```
+
+```js src/index.js active
+import { captureOwnerStack } from "react";
+import { createRoot } from "react-dom/client";
+import App from './App';
+import { onConsoleError } from "./errorOverlay";
+import './styles.css';
+
+const originalConsoleError = console.error;
+console.error = function patchedConsoleError(...args) {
+ originalConsoleError.apply(console, args);
+ const ownerStack = captureOwnerStack();
+ onConsoleError({
+ // Keep in mind that in a real application, console.error can be
+ // called with multiple arguments which you should account for.
+ consoleMessage: args[0],
+ ownerStack,
+ });
+};
+
+const container = document.getElementById("root");
+createRoot(container).render(<App />);
+```
+
+```js src/App.js
+function Component() {
+ return <button onClick={() => console.error('Some console error')}>Trigger console.error()</button>;
+}
+
+export default function App() {
+ return <Component />;
+}
+```
+
+</Sandpack>
+
+## Troubleshooting {/*troubleshooting*/}
+
+### The Owner Stack is `null` {/*the-owner-stack-is-null*/}
+
+The call of `captureOwnerStack` happened outside of a React controlled function e.g. in a `setTimeout` callback, after a `fetch` call or in a custom DOM event handler. During render, Effects, React event handlers, and React error handlers (e.g. `hydrateRoot#options.onCaughtError`) Owner Stacks should be available.
+
+In the example below, clicking the button will log an empty Owner Stack because `captureOwnerStack` was called during a custom DOM event handler. The Owner Stack must be captured earlier e.g. by moving the call of `captureOwnerStack` into the Effect body.
+<Sandpack>
+
+```js
+import {captureOwnerStack, useEffect} from 'react';
+
+export default function App() {
+ useEffect(() => {
+ // Should call `captureOwnerStack` here.
+ function handleEvent() {
+ // Calling it in a custom DOM event handler is too late.
+ // The Owner Stack will be `null` at this point.
+ console.log('Owner Stack: ', captureOwnerStack());
+ }
+
+ document.addEventListener('click', handleEvent);
+
+ return () => {
+ document.removeEventListener('click', handleEvent);
+ }
+ })
+
+ return <button>Click me to see that Owner Stacks are not available in custom DOM event handlers</button>;
+}
+```
+
+</Sandpack>
+
+### `captureOwnerStack` is not available {/*captureownerstack-is-not-available*/}
+
+`captureOwnerStack` is only exported in development builds. It will be `undefined` in production builds. If `captureOwnerStack` is used in files that are bundled for production and development, you should conditionally access it from a namespace import.
+
+```js
+// Don't use named imports of `captureOwnerStack` in files that are bundled for development and production.
+import {captureOwnerStack} from 'react';
+// Use a namespace import instead and access `captureOwnerStack` conditionally.
+import * as React from 'react';
+
+if (process.env.NODE_ENV !== 'production') {
+ const ownerStack = React.captureOwnerStack();
+ console.log('Owner Stack', ownerStack);
+}
+```
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
index 29d24ae0b..0ac37a0a8 100644
--- a/src/content/reference/react/createContext.md
+++ b/src/content/reference/react/createContext.md
@@ -84,7 +84,13 @@ function Button() {
);
}
```
+<<<<<<< HEAD
Bien que cette ancienne méthode fonctionne toujours, **privilégiez la lecture d'un contexte à l'aide de [`useContext()`](/reference/react/useContext) dans du nouveau code :**
+=======
+
+Although this older way still works, **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
+
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js
function Button() {
// ✅ Méthode recommandée
diff --git a/src/content/reference/react/createElement.md b/src/content/reference/react/createElement.md
index 227a002b0..45bc637a2 100644
--- a/src/content/reference/react/createElement.md
+++ b/src/content/reference/react/createElement.md
@@ -48,10 +48,17 @@ function Greeting({ name }) {
`createElement` renvoie un objet élément React avec quelques propriétés :
+<<<<<<< HEAD
* `type` : le `type` que vous avez passé.
* `props` : les `props` que vous avez passées, sauf `ref` et `key`. Si le `type` est un composant doté de la propriété historique `type.defaultProps`, alors toute prop manquante ou `undefined` dans `props` prendra sa valeur depuis `type.defaultProps`.
* `ref` : la `ref` que vous avez passée. Considérée `null` si manquante.
* `key` : la `key` que vous avez passée, convertie en chaîne de caractères. Considérée `null` si manquante.
+=======
+* `type`: The `type` you have passed.
+* `props`: The `props` you have passed except for `ref` and `key`.
+* `ref`: The `ref` you have passed. If missing, `null`.
+* `key`: The `key` you have passed, coerced to a string. If missing, `null`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
En général, vous renverrez l'élément depuis votre composant, ou en ferez l'enfant d'un autre élément. Même si vous pourriez lire les propriétés de l'élément, il vaut mieux traiter tout objet élément comme une boîte noire après sa création, et vous contenter de l'afficher.
diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md
index 566c023bf..f6b05eaf3 100644
--- a/src/content/reference/react/experimental_taintObjectReference.md
+++ b/src/content/reference/react/experimental_taintObjectReference.md
@@ -1,8 +1,9 @@
---
title: experimental_taintObjectReference
+version: experimental
---
-<Wip>
+<Experimental>
**Cette API est expérimentale : elle n’a donc pas encore été livrée dans une version stable de React.**
@@ -16,7 +17,7 @@ Les versions expérimentales de React sont susceptibles de contenir des bugs. Ve
Cette API n'est disponible qu'au sein des React Server Components.
-</Wip>
+</Experimental>
<Intro>
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index 2c495e34d..13d76c8c4 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -1,8 +1,9 @@
---
title: experimental_taintUniqueValue
+version: experimental
---
-<Wip>
+<Experimental>
**Cette API est expérimentale : elle n’a donc pas encore été livrée dans une version stable de React.**
@@ -16,7 +17,7 @@ Les versions expérimentales de React sont susceptibles de contenir des bugs. Ve
Cette API n'est disponible qu'au sein des [Composants Serveur](/reference/rsc/use-client).
-</Wip>
+</Experimental>
<Intro>
@@ -189,7 +190,11 @@ experimental_taintUniqueValue(
);
```
+<<<<<<< HEAD
À présent, dès que quiconque essaierait de passer ce mot de passe à un Composant Client, ou enverrait le mot de passe à un Composant Client *via* une *Server Action*, une erreur serait levée avec le message défini lors de l'appel à `taintUniqueValue`.
+=======
+Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Function, an error will be thrown with message you defined when you called `taintUniqueValue`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</DeepDive>
diff --git a/src/content/reference/react/experimental_useEffectEvent.md b/src/content/reference/react/experimental_useEffectEvent.md
index 88beee685..cf91f17de 100644
--- a/src/content/reference/react/experimental_useEffectEvent.md
+++ b/src/content/reference/react/experimental_useEffectEvent.md
@@ -1,8 +1,9 @@
---
title: experimental_useEffectEvent
+version: experimental
---
-<Wip>
+<Experimental>
**Cette API est expérimentale : elle n’a donc pas encore été livrée dans une version stable de React.**
@@ -14,7 +15,7 @@ Vous pouvez l'essayer en mettant à jour vos modules React afin d'utiliser la ve
Les versions expérimentales de React sont susceptibles de contenir des bugs. Veillez donc à ne pas les utiliser en production.
-</Wip>
+</Experimental>
<Intro>
diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md
index c6cdf7671..2aebce984 100644
--- a/src/content/reference/react/forwardRef.md
+++ b/src/content/reference/react/forwardRef.md
@@ -2,6 +2,14 @@
title: forwardRef
---
+<Deprecated>
+
+In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead.
+
+`forwardRef` will deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop).
+
+</Deprecated>
+
<Intro>
`forwardRef` permet à votre composant d'exposer un nœud DOM à son composant parent au travers d'une [ref](/learn/manipulating-the-dom-with-refs).
diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md
index 075b56a4a..47603262a 100644
--- a/src/content/reference/react/legacy.md
+++ b/src/content/reference/react/legacy.md
@@ -12,6 +12,7 @@ Ces API sont exposées par le module `react`, mais sont déconseillées pour l'
## API historiques {/*legacy-apis*/}
+<<<<<<< HEAD
* [`Children`](/reference/react/Children) vous permet de manipuler et transformer les contenus JSX reçus *via* la prop `children`. [Découvrez les alternatives](/reference/react/Children#alternatives).
* [`cloneElement`](/reference/react/cloneElement) vous permet de créer un élément React en vous basant sur un élément existant. [Découvrez les alternatives](/reference/react/cloneElement#alternatives).
* [`Component`](/reference/react/Component) vous permet de définir un composant React sous forme d'une classe JavaScript ES2015+. [Découvrez les alternatives](/reference/react/Component#alternatives).
@@ -19,16 +20,38 @@ Ces API sont exposées par le module `react`, mais sont déconseillées pour l'
* [`createRef`](/reference/react/createRef) crée un objet *ref* pouvant contenir une valeur quelconque. [Découvrez les alternatives](/reference/react/createRef#alternatives).
* [`isValidElement`](/reference/react/isValidElement) vérifie qu'une valeur est un élément React. Généralement utilisé avec [`cloneElement`](/reference/react/cloneElement).
* [`PureComponent`](/reference/react/PureComponent) est similaire à [`Component`](/reference/react/Component), mais évite un nouveau rendu lorsque les props sont identiques. [Découvrez les alternatives](/reference/react/PureComponent#alternatives).
-
+=======
+* [`Children`](/reference/react/Children) lets you manipulate and transform the JSX received as the `children` prop. [See alternatives.](/reference/react/Children#alternatives)
+* [`cloneElement`](/reference/react/cloneElement) lets you create a React element using another element as a starting point. [See alternatives.](/reference/react/cloneElement#alternatives)
+* [`Component`](/reference/react/Component) lets you define a React component as a JavaScript class. [See alternatives.](/reference/react/Component#alternatives)
+* [`createElement`](/reference/react/createElement) lets you create a React element. Typically, you'll use JSX instead.
+* [`createRef`](/reference/react/createRef) creates a ref object which can contain arbitrary value. [See alternatives.](/reference/react/createRef#alternatives)
+* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs)
+* [`isValidElement`](/reference/react/isValidElement) checks whether a value is a React element. Typically used with [`cloneElement`.](/reference/react/cloneElement)
+* [`PureComponent`](/reference/react/PureComponent) is similar to [`Component`,](/reference/react/Component) but it skip re-renders with same props. [See alternatives.](/reference/react/PureComponent#alternatives)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
+<<<<<<< HEAD
## API dépréciées {/*deprecated-apis*/}
+=======
+## Removed APIs {/*removed-apis*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-<Deprecated>
+These APIs were removed in React 19:
+<<<<<<< HEAD
Ces API seront retirées d'une future version majeure de React.
</Deprecated>
* [`createFactory`](/reference/react/createFactory) vous permet de créer une fonction qui produit des éléments React d'un type prédéfini.
+=======
+* [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead.
+* Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead.
+* Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead.
+* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context.Provider`](/reference/react/createContext#provider) instead.
+* Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead.
+* Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md
index f3542bdbc..fd0466c55 100644
--- a/src/content/reference/react/startTransition.md
+++ b/src/content/reference/react/startTransition.md
@@ -4,10 +4,14 @@ title: startTransition
<Intro>
+<<<<<<< HEAD
`startTransition` vous permet de mettre à jour l'état sans bloquer l'UI.
+=======
+`startTransition` lets you render a part of the UI in the background.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js
-startTransition(scope)
+startTransition(action)
```
</Intro>
@@ -18,7 +22,7 @@ startTransition(scope)
## Référence {/*reference*/}
-### `startTransition(scope)` {/*starttransitionscope*/}
+### `startTransition(action)` {/*starttransition*/}
La fonction `startTransition` vous permet de marquer une mise à jour d'état comme étant une Transition.
@@ -41,7 +45,11 @@ function TabContainer() {
#### Paramètres {/*parameters*/}
+<<<<<<< HEAD
* `scope` : une fonction qui met à jour l'état en appelant au moins une [fonction `set`](/reference/react/useState#setstate). React appelle immédiatement `scope` sans argument et marque toutes les mises à jour d'état demandées durant l'exécution synchrone de `scope` comme des Transitions. Elles seront [non bloquantes](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) et [n'afficheront pas d'indicateurs de chargement indésirables](/reference/react/useTransition#preventing-unwanted-loading-indicators).
+=======
+* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Valeur renvoyée {/*returns*/}
@@ -53,13 +61,23 @@ function TabContainer() {
* Vous pouvez enrober une mise à jour dans une Transition uniquement si vous avez accès à la fonction `set` de l'état en question. Si vous souhaitez démarrer une Transition en réaction à une prop ou à la valeur renvoyée par un Hook personnalisé, utilisez plutôt [`useDeferredValue`](/reference/react/useDeferredValue).
+<<<<<<< HEAD
* La fonction que vous passez à `startTransition` doit être synchrone. React exécute cette fonction immédiatement, et marque toutes les mises à jour demandées lors de son exécution comme des Transitions. Si vous essayez de faire des mises à jour d'état plus tard (par exemple avec un timer), elles ne seront pas marquées comme des Transitions.
+=======
+* The function you pass to `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions.
+
+* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* Une mise à jour d'état marquée comme une Transition pourra être interrompue par d'autres mises à jour d'état. Par exemple, si vous mettez à jour un composant de graphe au sein d'une Transition, mais commencez alors une saisie dans un champ texte tandis que le graphe est en train de refaire son rendu, React redémarrera le rendu du composant graphe après avoir traité la mise à jour d'état du champ.
* Les mises à jour en Transition ne peuvent pas être utilisées pour contrôler des champs textuels.
+<<<<<<< HEAD
* Si plusieurs Transitions sont en cours, React les regroupe pour le moment. Cette limitation sera sans doute levée dans une future version.
+=======
+* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index b61e52de8..d2db0bcf6 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -1,14 +1,16 @@
---
title: use
-canary: true
---
+<<<<<<< HEAD
<Canary>
L'API `use` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
`use` est une API React qui vous permet de lire la valeur d'une ressource telle qu'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou un [contexte](/learn/passing-data-deeply-with-context).
@@ -54,9 +56,15 @@ L'API `use` renvoie la valeur lue depuis la ressource, telle que la valeur accom
#### Limitations {/*caveats*/}
+<<<<<<< HEAD
* L'API `use` doit être appelée à l'intérieur d'un composant ou d'un Hook.
* Lorsque vous récupérez des données dans un [Composant Serveur](/reference/rsc/use-server), privilégiez `async` et `await` plutôt que `use`. `async` et `await` reprennent le rendu à partir du point où `await` avait été invoqué, alors que `use` refait un rendu du composant une fois la donnée obtenue.
* Privilégiez la création de promesses dans les [Composants Serveur](/reference/rsc/use-server) et leur passage aux [Composants Client](/reference/rsc/use-client), plutôt que de créer des promesses dans les Composants Client. Les promesses créées dans les Composants Client sont recréées à chaque rendu. Les promesses transmises d'un Composant Serveur à un Component Client ne changent pas d'un rendu à l'autre. [Consultez cet exemple](#streaming-data-from-server-to-client).
+=======
+* The `use` API must be called inside a Component or a Hook.
+* When fetching data in a [Server Component](/reference/rsc/server-components), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
+* Prefer creating Promises in [Server Components](/reference/rsc/server-components) and passing them to [Client Components](/reference/rsc/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
@@ -199,17 +207,6 @@ function Button({ show, children }) {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "18.3.0-canary-9377e1010-20230712",
- "react-dom": "18.3.0-canary-9377e1010-20230712",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
-
</Sandpack>
### Diffuser en continu des données du serveur au client {/*streaming-data-from-server-to-client*/}
@@ -292,9 +289,12 @@ export default function App() {
```
```js src/index.js hidden
+<<<<<<< HEAD
// TODO : remplacer l’import d’une version Canary
// de React par une version stable, dès qu’elle
// intégrera l’API `use`
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
@@ -312,16 +312,6 @@ root.render(
);
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "18.3.0-canary-9377e1010-20230712",
- "react-dom": "18.3.0-canary-9377e1010-20230712",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js"
-}
-```
</Sandpack>
<Note>
@@ -414,9 +404,12 @@ export default function App() {
```
```js src/index.js hidden
+<<<<<<< HEAD
// TODO : remplacer l’import d’une version Canary
// de React par une version stable, dès qu’elle
// intégrera l’API `use`
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
@@ -437,8 +430,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "18.3.0-canary-9377e1010-20230712",
- "react-dom": "18.3.0-canary-9377e1010-20230712",
+ "react": "19.0.0",
+ "react-dom": "19.0.0",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 4229c2f27..995176ccf 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -1,8 +1,8 @@
---
title: useActionState
-canary: true
---
+<<<<<<< HEAD
<Canary>
Le Hook `useActionState` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels). Par ailleurs, vous aurez besoin d'utiliser un framework qui prenne en charge les [Composants Serveur](/reference/rsc/use-client) pour tirer pleinement parti de `useActionState`.
@@ -15,6 +15,8 @@ In earlier React Canary versions, this API was part of React DOM and called `use
</Note>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
`useActionState` est un Hook qui vous permet de mettre à jour l'état sur base du résultat d'une action de formulaire.
@@ -25,6 +27,13 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin
</Intro>
+<Note>
+
+In earlier React Canary versions, this API was part of React DOM and called `useFormState`.
+
+</Note>
+
+
<InlineToc />
---
@@ -57,15 +66,25 @@ function StatefulForm({}) {
L'état de formulaire est déterminé par la valeur renvoyée par l'action lors du dernier envoi en date du formulaire. Si le formulaire n'a pas encore été envoyé, il équivaut à l'état initial que vous avez fourni.
+<<<<<<< HEAD
Lorsque vous l'utilisez dans une Action Serveur, `useActionState` permet d'afficher la réponse du serveur pour l'envoi du formulaire avant même que l'hydratation ne soit terminée.
+=======
+If used with a Server Function, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
[Voir d'autres exemples plus bas](#usage).
#### Paramètres {/*parameters*/}
+<<<<<<< HEAD
* `fn` : la fonction à appeler lorsque le formulaire est envoyé. Lorsque la fonction est appelée, elle reçoit comme premier argument l'état précédent du formulaire (le `initialState` que vous avez fourni pour le premier appel, puis, pour les appels ultérieurs, la valeur précédemment renvoyée), suivi par les arguments normalement acceptés par une fonction d'action de formulaire.
* `initialState` : la valeur initiale que vous souhaitez pour votre état. Il peut s'agir de n'importe quelle valeur sérialisable. Cet argument est ignoré après l'appel initial de l'action.
* `permalink` **optionnel** : une chaîne de caractères contenant l'URL unique de la page que ce formulaire modifie. Conçu pour une utilisation sur des pages à contenu dynamique (telles que des flux) pour permettre une amélioration progressive : si `fn` est une [Action Serveur](/reference/rsc/use-server) et que le formulaire est soumis avant que le *bundle* JavaScript n'ait fini son chargement, le navigateur ira sur l'URL de permalien fournie, plutôt que sur l'URL de la page courante. Ça permet de garantir que le même composant de formulaire sera produit sur la page destinataire (y compris les infos `fn` et `permalink`), afin que React sache comment lui passer l'état. Une fois le formulaire hydraté, ce paramètre n'a plus d'effet.
+=======
+* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
+* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
+* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: feeds) in conjunction with progressive enhancement: if `fn` is a [server function](/reference/rsc/server-functions) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
{/* TODO T164397693: link to serializable values docs once it exists */}
@@ -73,9 +92,15 @@ Lorsque vous l'utilisez dans une Action Serveur, `useActionState` permet d'affic
`useActionState` renvoie un tableau avec exactement trois valeurs :
+<<<<<<< HEAD
1. L'état courant. Lors du rendu initial, il s'agira du `initialState` que vous avez passé. Après que l'action aura été invoquée, il correspondra à la valeur renvoyée par l'action.
2. Une nouvelle action que vous pouvez passer comme prop `action` à votre composant `form`, ou comme prop `formAction` à tout composant `button` au sein du formulaire.
3. Le drapeau `isPending` qui vous indique si une Transition est en cours.
+=======
+1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action.
+2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form. The action can also be called manually within [`startTransition`](/reference/react/startTransition).
+3. The `isPending` flag that tells you whether there is a pending Transition.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Limitations {/*caveats*/}
@@ -107,9 +132,15 @@ function MyComponent() {
`useActionState` renvoie un tableau avec exactement trois valeurs :
+<<<<<<< HEAD
1. <CodeStep step={1}>L'état courant</CodeStep> du formulaire, qui sera au départ <CodeStep step={4}>l'état initial</CodeStep> que vous aurez fourni, puis une fois le formulaire envoyé, aura la valeur de retour de <CodeStep step={3}>l'action</CodeStep> que vous aurez passée.
2. Une <CodeStep step={2}>nouvelle action</CodeStep> que vous pouvez passer comme prop `action` à votre `form`.
3. Un <CodeStep step={1}>état d'attente</CodeStep> que vous pouvez utiliser tandis que l'action est en cours de traitement.
+=======
+1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
+2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop or call manually within `startTransition`.
+3. A <CodeStep step={1}>pending state</CodeStep> that you can utilise while your action is processing.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Lorsque le formulaire sera envoyé, la fonction <CodeStep step={3}>d'action</CodeStep> que vous aurez fournie sera appelée. Sa valeur de retour deviendra le nouvel <CodeStep step={1}>état courant</CodeStep> du formulaire.
@@ -126,7 +157,11 @@ function action(currentState, formData) {
#### Afficher des erreurs de formulaire {/*display-form-errors*/}
+<<<<<<< HEAD
Pour afficher des messages tels qu'un message d'erreur ou une notification renvoyés par une Action Serveur, enrobez l'action dans un appel à `useActionState`.
+=======
+To display messages such as an error message or toast that's returned by a Server Function, wrap the action in a call to `useActionState`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -184,25 +219,17 @@ form button {
margin-right: 12px;
}
```
-
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
-```
</Sandpack>
<Solution />
#### Afficher des données structurées suite à l'envoi d'un formulaire {/*display-structured-information-after-submitting-a-form*/}
+<<<<<<< HEAD
La valeur renvoyée par une Action Serveur peut être n'importe quelle valeur sérialisable. Il peut par exemple s'agir d'un objet avec un booléen indiquant si l'action a réussi, un message d'erreur, ou des informations mises à jour.
+=======
+The return value from a Server Function can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -271,18 +298,6 @@ form button {
margin-right: 12px;
}
```
-
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
-```
</Sandpack>
<Solution />
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index 807d3b7bb..ae179aa2b 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -36,19 +36,28 @@ function SearchPage() {
#### Paramètres {/*parameters*/}
+<<<<<<< HEAD
* `value` : la valeur que vous souhaitez différer. Elle peut être de n'importe quel type.
* <CanaryBadge title="Cette fonctionnalité n’est disponible que sur le canal de version Canary" /> `initialValue` **optionnelle** : une valeur à utiliser lors du rendu initial d'un composant. Si cette option est manquante, `useDeferredValue` ne différera pas lors du rendu initial, faute d'une version précédente de `value` à lui substituer lors du rendu.
+=======
+* `value`: The value you want to defer. It can have any type.
+* **optional** `initialValue`: A value to use during the initial render of a component. If this option is omitted, `useDeferredValue` will not defer during the initial render, because there's no previous version of `value` that it can render instead.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Valeur renvoyée {/*returns*/}
- `currentValue` : durant le rendu initial, la valeur différée renvoyée sera celle que vous avez fournie. Lors des mises à jour, React tentera d'abord un rendu avec l'ancienne valeur (il va donc renvoyer l'ancienne valeur), et ensuite essayer en arrière-plan un rendu avec la nouvelle valeur (il va donc renvoyer la valeur à jour).
+<<<<<<< HEAD
<Canary>
Dans les dernières versions React Canary, `useDeferredValue` renvoie la `initialValue` lors du rendu initial, puis planifie un nouceau rendu en arrière-plan avec la `value` renvoyée.
</Canary>
+=======
+- `currentValue`: During the initial render, the returned deferred value will be the `initialValue`, or the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Limitations {/*caveats*/}
@@ -94,9 +103,15 @@ Lors des mises à jour, la <CodeStep step={2}>valeur différée</CodeStep> sera
Cet exemple part du principe que vous utilisez une source de donnée compatible avec Suspense :
+<<<<<<< HEAD
- Le chargement de données fourni par des frameworks intégrant Suspense tels que [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) et [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
- Le chargement à la demande de composants avec [`lazy`](/reference/react/lazy)
- La lecture de la valeur d'une promesse avec [`use`](/reference/react/use)
+=======
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/getting-started/fetching-data#with-suspense)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a Promise with [`use`](/reference/react/use)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
[Apprenez-en davantage sur Suspense et ses limitations](/reference/react/Suspense).
@@ -107,21 +122,6 @@ Dans cet exemple, le composant `SearchResults` [suspend](/reference/react/Suspen
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
import { Suspense, useState } from 'react';
import SearchResults from './SearchResults.js';
@@ -142,15 +142,19 @@ export default function App() {
}
```
-```js src/SearchResults.js hidden
+```js src/SearchResults.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Remarque : ce composant est écrit en utilisant une API expérimentale
// qui n'est pas encore disponible dans les versions stables de React.
// Si vous souhaitez suivre cet exemple avec une version stable,
// essayez un framework intégrant Suspense, comme Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function SearchResults({ query }) {
if (query === '') {
return null;
@@ -169,6 +173,7 @@ export default function SearchResults({ query }) {
</ul>
);
}
+<<<<<<< HEAD
// Astuce de contournement d'un bug afin d'exécuter la démo.
// TODO: remplacer avec la véritable implémentation quand le bug sera corrigé.
@@ -194,6 +199,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/data.js hidden
@@ -221,7 +228,7 @@ async function getData(url) {
async function getSearchResults(query) {
// Ajoute un faux délai pour que le temps d'attente soit remarqué par l'utilisateur.
await new Promise(resolve => {
- setTimeout(resolve, 500);
+ setTimeout(resolve, 1000);
});
const allAlbums = [{
@@ -321,21 +328,6 @@ Tapez`"a"` dans l'exemple ci-dessous, attendez que les résultats soient chargé
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
import { Suspense, useState, useDeferredValue } from 'react';
import SearchResults from './SearchResults.js';
@@ -357,15 +349,19 @@ export default function App() {
}
```
-```js src/SearchResults.js hidden
+```js src/SearchResults.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Remarque : ce composant est écrit en utilisant une API expérimentale
// qui n'est pas encore disponible dans les versions stables de React.
// Si vous souhaitez suivre cet exemple avec une version stable,
// essayez un framework intégrant Suspense, comme Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function SearchResults({ query }) {
if (query === '') {
return null;
@@ -384,6 +380,7 @@ export default function SearchResults({ query }) {
</ul>
);
}
+<<<<<<< HEAD
// Astuce de contournement d'un bug afin d'exécuter la démo.
// TODO: remplacer avec la véritable implémentation quand le bug sera corrigé.
@@ -409,6 +406,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/data.js hidden
@@ -436,7 +435,7 @@ async function getData(url) {
async function getSearchResults(query) {
// Ajoute un faux délai pour que le temps d'attente soit remarqué par l'utilisateur.
await new Promise(resolve => {
- setTimeout(resolve, 500);
+ setTimeout(resolve, 1000);
});
const allAlbums = [{
@@ -544,21 +543,6 @@ Avec ce changement, dès que vous commencerez à taper, l'ancienne liste de rés
<Sandpack>
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
import { Suspense, useState, useDeferredValue } from 'react';
import SearchResults from './SearchResults.js';
@@ -586,15 +570,19 @@ export default function App() {
}
```
-```js src/SearchResults.js hidden
+```js src/SearchResults.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Remarque : ce composant est écrit en utilisant une API expérimentale
// qui n'est pas encore disponible dans les versions stables de React.
// Si vous souhaitez suivre cet exemple avec une version stable,
// essayez un framework intégrant Suspense, comme Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function SearchResults({ query }) {
if (query === '') {
return null;
@@ -613,6 +601,7 @@ export default function SearchResults({ query }) {
</ul>
);
}
+<<<<<<< HEAD
// Astuce de contournement d'un bug afin d'exécuter la démo.
// TODO: remplacer avec la véritable implémentation quand le bug sera corrigé.
@@ -638,6 +627,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/data.js hidden
@@ -664,7 +655,7 @@ async function getData(url) {
async function getSearchResults(query) {
// Ajoute un faux délai pour que le temps d'attente soit remarqué par l'utilisateur.
await new Promise(resolve => {
- setTimeout(resolve, 500);
+ setTimeout(resolve, 1000);
});
const allAlbums = [{
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index a528a5967..7291f169d 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -23,7 +23,7 @@ useEffect(setup, dependencies?)
Appelez `useEffect` à la racine de votre composant pour déclarer un Effet :
```js
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';
function ChatRoom({ roomId }) {
@@ -79,7 +79,7 @@ Certains composants ont besoin de rester connectés au réseau, ou à des API du
Afin de [connecter votre composant à un système extérieur](/learn/synchronizing-with-effects), appelez `useEffect` au niveau racine de votre fonction composant :
```js [[1, 8, "const connection = createConnection(serverUrl, roomId);"], [1, 9, "connection.connect();"], [2, 11, "connection.disconnect();"], [3, 13, "[serverUrl, roomId]"]]
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';
function ChatRoom({ roomId }) {
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index ceb1f5382..1619b00e6 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -46,6 +46,8 @@ function PasswordField() {
* `useId` ne doit pas être utilisé pour générer des clés dans une liste. [Les clés devraient toujours être basées sur vos données.](/learn/rendering-lists#where-to-get-your-key)
+* `useId` currently cannot be used in [async Server Components](/reference/rsc/server-components#async-components-with-server-components).
+
---
## Utilisation {/*usage*/}
@@ -226,7 +228,7 @@ Si vous affichez plusieurs applications React indépendantes sur une même page,
<Sandpack>
-```html index.html
+```html public/index.html
<!DOCTYPE html>
<html>
<head><title>Mon appli</title></head>
diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md
index 1f13bd0c6..280829a32 100644
--- a/src/content/reference/react/useImperativeHandle.md
+++ b/src/content/reference/react/useImperativeHandle.md
@@ -23,9 +23,9 @@ useImperativeHandle(ref, createHandle, dependencies?)
Appelez `useImperativeHandle` au niveau racine de votre composant pour personnaliser la ref qu'il expose :
```js
-import { forwardRef, useImperativeHandle } from 'react';
+import { useImperativeHandle } from 'react';
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref }) {
useImperativeHandle(ref, () => {
return {
// ... vos méthodes ...
@@ -38,13 +38,27 @@ const MyInput = forwardRef(function MyInput(props, ref) {
#### Paramètres {/*parameters*/}
+<<<<<<< HEAD
* `ref` : la `ref` que vous avez reçue comme second argument depuis la [fonction de rendu de `forwardRef`](/reference/react/forwardRef#render-function).
+=======
+* `ref`: The `ref` you received as a prop to the `MyInput` component.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* `createHandle` : une fonction ne prenant aucun argument, qui renvoie la ref que vous souhaitez effectivement exposer. Cette ref peut être de n'importe quel type. En général, vous renverrez un objet avec les méthodes que vous souhaitez exposer.
* `dependencies` **optionnelles** : la liste des valeurs réactives référencées par le code de `createHandle`. Les valeurs réactives comprennent les props, les variables d'état et toutes les variables et fonctions déclarées localement dans le corps de votre composant. Si votre *linter* est [configuré pour React](/learn/editor-setup#linting), il vérifiera que chaque valeur réactive concernée est bien spécifiée comme dépendance. La liste des dépendances doit avoir un nombre constant d'éléments et utiliser un littéral défini à la volée, du genre `[dep1, dep2, dep3]`. React comparera chaque dépendance à sa valeur précédente au moyen de la comparaison [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si un nouveau rendu résulte d'une modification à une dépendance, ou si vous avez omis cet argument, la fonction `createHandle` sera réexécutée et la référence fraîchement créée sera affectée à la ref.
+<<<<<<< HEAD
#### Valeur renvoyée {/*returns*/}
+=======
+<Note>
+
+Starting with React 19, [`ref` is available as a prop.](/blog/2024/12/05/react-19#ref-as-a-prop) In React 18 and earlier, it was necessary to get the `ref` from [`forwardRef`.](/reference/react/forwardRef)
+
+</Note>
+
+#### Returns {/*returns*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
`useImperativeHandle` renvoie `undefined`.
@@ -54,40 +68,50 @@ const MyInput = forwardRef(function MyInput(props, ref) {
### Fournir une référence personnalisée au composant parent {/*exposing-a-custom-ref-handle-to-the-parent-component*/}
+<<<<<<< HEAD
Par défaut, les composants n'exposent pas leurs nœuds DOM aux composants parents. Par exemple, si vous souhaitez que le composant parent de `MyInput` [ait accès](/learn/manipulating-the-dom-with-refs) au nœud DOM `<input>`, vous devez le permettre explicitement avec [`forwardRef`](/reference/react/forwardRef) :
-
-```js {4}
-import { forwardRef } from 'react';
-
-const MyInput = forwardRef(function MyInput(props, ref) {
- return <input {...props} ref={ref} />;
-});
+=======
+To expose a DOM node to the parent element, pass in the `ref` prop to the node.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
+
+```js {2}
+function MyInput({ ref }) {
+ return <input ref={ref} />;
+};
```
+<<<<<<< HEAD
Dans le code ci-avant, [une ref à `MyInput` recevra le nœud DOM `<input>`](/reference/react/forwardRef#exposing-a-dom-node-to-the-parent-component). Cependant, vous pouvez plutôt exposer une valeur personnalisée. Pour définir vous-même la référence à exposer, appelez `useImperativeHandle` au niveau racine de votre composant :
+=======
+With the code above, [a ref to `MyInput` will receive the `<input>` DOM node.](/learn/manipulating-the-dom-with-refs) However, you can expose a custom value instead. To customize the exposed handle, call `useImperativeHandle` at the top level of your component:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js {4-8}
-import { forwardRef, useImperativeHandle } from 'react';
+import { useImperativeHandle } from 'react';
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref }) {
useImperativeHandle(ref, () => {
return {
// ... vos méthodes ...
};
}, []);
- return <input {...props} />;
-});
+ return <input />;
+};
```
+<<<<<<< HEAD
Remarquez que dans le code ci-avant, la `ref` n'est plus transmise au `<input>`.
+=======
+Note that in the code above, the `ref` is no longer passed to the `<input>`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Supposons par exemple que vous ne souhaitiez pas exposer l'intégralité du nœud DOM `<input>`, mais seulement deux de ses méthodes : `focus` et `scrollIntoView`. Pour y parvenir, conservez le véritable nœud DOM dans une ref distincte, puis utilisez `useImperativeHandle` pour exposer un objet avec seulement les méthodes que vous souhaitez permettre au composant parent d'appeler :
```js {7-14}
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref }) {
const inputRef = useRef(null);
useImperativeHandle(ref, () => {
@@ -101,8 +125,8 @@ const MyInput = forwardRef(function MyInput(props, ref) {
};
}, []);
- return <input {...props} ref={inputRef} />;
-});
+ return <input ref={inputRef} />;
+};
```
Désormais, si le composant parent récupère une ref sur `MyInput`, il ne pourra plus appeler que ses méthodes `focus` et `scrollIntoView`. Il n'aura pas un accès complet au nœud DOM `<input>` sous-jacent.
@@ -134,9 +158,9 @@ export default function Form() {
```
```js src/MyInput.js
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
-const MyInput = forwardRef(function MyInput(props, ref) {
+function MyInput({ ref, ...props }) {
const inputRef = useRef(null);
useImperativeHandle(ref, () => {
@@ -151,7 +175,7 @@ const MyInput = forwardRef(function MyInput(props, ref) {
}, []);
return <input {...props} ref={inputRef} />;
-});
+};
export default MyInput;
```
@@ -195,11 +219,11 @@ export default function Page() {
```
```js src/Post.js
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
import CommentList from './CommentList.js';
import AddComment from './AddComment.js';
-const Post = forwardRef((props, ref) => {
+function Post({ ref }) {
const commentsRef = useRef(null);
const addCommentRef = useRef(null);
@@ -221,16 +245,16 @@ const Post = forwardRef((props, ref) => {
<AddComment ref={addCommentRef} />
</>
);
-});
+};
export default Post;
```
```js src/CommentList.js
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
-const CommentList = forwardRef(function CommentList(props, ref) {
+function CommentList({ ref }) {
const divRef = useRef(null);
useImperativeHandle(ref, () => {
@@ -252,17 +276,23 @@ const CommentList = forwardRef(function CommentList(props, ref) {
{comments}
</div>
);
-});
+}
export default CommentList;
```
```js src/AddComment.js
-import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useRef, useImperativeHandle } from 'react';
+<<<<<<< HEAD
const AddComment = forwardRef(function AddComment(props, ref) {
return <input placeholder="Ajouter un commentaire..." ref={ref} />;
});
+=======
+function AddComment({ ref }) {
+ return <input placeholder="Add comment..." ref={ref} />;
+}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default AddComment;
```
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index 872e7797a..8a6f299e9 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -1104,11 +1104,14 @@ function ChatRoom({ roomId }) {
}, [roomId]); // ✅ Ne change que si `roomId` change
useEffect(() => {
- const options = createOptions();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
+<<<<<<< HEAD
}, [options]); // ✅ Ne change que si `options` change
+=======
+ }, [options]); // ✅ Only changes when options changes
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
// ...
```
diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index 93fd5bfc9..aa89b59f2 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -1,14 +1,16 @@
---
title: useOptimistic
-canary: true
---
+<<<<<<< HEAD
<Canary>
Le Hook `useOptimistic` n'est actuellement disponible que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
</Canary>
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
`useOptimistic` est un Hook React qui vous permet de mettre à jour l'interface utilisateur (UI) de façon optimiste.
@@ -72,39 +74,49 @@ Lorsqu'un utilisateur saisit par exemple un message dans un formulaire puis cliq
```js src/App.js
-import { useOptimistic, useState, useRef } from "react";
+import { useOptimistic, useState, useRef, startTransition } from "react";
import { deliverMessage } from "./actions.js";
-function Thread({ messages, sendMessage }) {
+function Thread({ messages, sendMessageAction }) {
const formRef = useRef();
- async function formAction(formData) {
+ function formAction(formData) {
addOptimisticMessage(formData.get("message"));
formRef.current.reset();
- await sendMessage(formData);
+ startTransition(async () => {
+ await sendMessageAction(formData);
+ });
}
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage) => [
- ...state,
{
text: newMessage,
sending: true
- }
+ },
+ ...state,
]
);
return (
<>
+ <form action={formAction} ref={formRef}>
+ <input type="text" name="message" placeholder="Hello!" />
+ <button type="submit">Send</button>
+ </form>
{optimisticMessages.map((message, index) => (
<div key={index}>
{message.text}
{!!message.sending && <small> (Envoi...)</small>}
</div>
))}
+<<<<<<< HEAD
<form action={formAction} ref={formRef}>
<input type="text" name="message" placeholder="(exemple : Salut !)" />
<button type="submit">Envoyer</button>
</form>
+=======
+
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</>
);
}
@@ -113,11 +125,13 @@ export default function App() {
const [messages, setMessages] = useState([
{ text: "Coucou toi !", sending: false, key: 1 }
]);
- async function sendMessage(formData) {
+ async function sendMessageAction(formData) {
const sentMessage = await deliverMessage(formData.get("message"));
- setMessages((messages) => [...messages, { text: sentMessage }]);
+ startTransition(() => {
+ setMessages((messages) => [{ text: sentMessage }, ...messages]);
+ })
}
- return <Thread messages={messages} sendMessage={sendMessage} />;
+ return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
}
```
@@ -129,16 +143,4 @@ export async function deliverMessage(message) {
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "18.3.0-canary-6db7f4209-20231021",
- "react-dom": "18.3.0-canary-6db7f4209-20231021",
- "react-scripts": "^5.0.0"
- },
- "main": "/index.js",
- "devDependencies": {}
-}
-```
-
</Sandpack>
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index 01c8ca410..020a6ebc0 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -448,16 +448,20 @@ button { display: block; margin-bottom: 20px; }
#### Exposer une ref vers votre composant {/*exposing-a-ref-to-your-own-component*/}
+<<<<<<< HEAD
Il arrive que vous souhaitiez permettre à votre composant parent de manipuler une partie du DOM au sein de votre propre composant. Par exemple, vous pourriez être en train d'écrire un composant `MyInput` et souhaiteriez que le parent puisse activer le champ de saisie qui y figure (et auquel le parent n'a pas accès). Vous pouvez recourir à une combinaison de `useRef` pour référencer le champ et [`forwardRef`](/reference/react/forwardRef) pour l'exposer au composant parent. Consultez un [pas-à-pas détaillé](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes) ici.
+=======
+Sometimes, you may want to let the parent component manipulate the DOM inside of your component. For example, maybe you're writing a `MyInput` component, but you want the parent to be able to focus the input (which the parent has no access to). You can create a `ref` in the parent and pass the `ref` as prop to the child component. Read a [detailed walkthrough](/learn/manipulating-the-dom-with-refs#accessing-another-components-dom-nodes) here.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
```js
-import { forwardRef, useRef } from 'react';
+import { useRef } from 'react';
-const MyInput = forwardRef((props, ref) => {
- return <input {...props} ref={ref} />;
-});
+function MyInput({ ref }) {
+ return <input ref={ref} />;
+};
export default function Form() {
const inputRef = useRef(null);
@@ -554,7 +558,7 @@ return <MyInput ref={inputRef} />;
<ConsoleBlock level="error">
-Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
+TypeError: Cannot read properties of null
</ConsoleBlock>
@@ -575,12 +579,14 @@ export default function MyInput({ value, onChange }) {
}
```
+<<<<<<< HEAD
Enrobez-le alors dans un [`forwardRef`](/reference/react/forwardRef) comme ceci :
+=======
+And then add `ref` to the list of props your component accepts and pass `ref` as a prop to the relevent child [built-in component](/reference/react-dom/components/common) like this:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-```js {3,8}
-import { forwardRef } from 'react';
-
-const MyInput = forwardRef(({ value, onChange }, ref) => {
+```js {1,6}
+function MyInput({ value, onChange, ref }) {
return (
<input
value={value}
@@ -588,7 +594,7 @@ const MyInput = forwardRef(({ value, onChange }, ref) => {
ref={ref}
/>
);
-});
+};
export default MyInput;
```
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index 5779ec97b..4be9bcd25 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -407,14 +407,20 @@ Si les données de votre source sont modifiables, votre fonction `getSnapshot` d
La fonction `subscribe` est définie *au sein* du composant, du coup elle diffère à chaque rendu :
-```js {4-7}
+```js {2-5}
function ChatIndicator() {
+<<<<<<< HEAD
const isOnline = useSyncExternalStore(subscribe, getSnapshot);
// 🚩 Toujours une fonction différente, donc React se réabonne à chaque rendu
+=======
+ // 🚩 Always a different function, so React will resubscribe on every re-render
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
function subscribe() {
// ...
}
+
+ const isOnline = useSyncExternalStore(subscribe, getSnapshot);
// ...
}
@@ -422,28 +428,39 @@ function ChatIndicator() {
React se réabonnera à votre source de données dès que vous passez une fonction `subscribe` différente d'un rendu à l'autre. Si ça nuit aux performances et que vous souhaitez éviter un réabonnement, sortez la fonction `subscribe` du composant :
-```js {6-9}
-function ChatIndicator() {
- const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+```js {1-4}
+// ✅ Always the same function, so React won't need to resubscribe
+function subscribe() {
// ...
}
+<<<<<<< HEAD
// ✅ Toujours la même fonction, donc React ne se réabonne pas
function subscribe() {
+=======
+function ChatIndicator() {
+ const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
// ...
}
```
Vous pouvez aussi enrober `subscribe` dans un appel à [`useCallback`](/reference/react/useCallback) pour ne vous réabonner que lorsqu'une dépendance change :
-```js {4-8}
+```js {2-5}
function ChatIndicator({ userId }) {
+<<<<<<< HEAD
const isOnline = useSyncExternalStore(subscribe, getSnapshot);
// ✅ Même fonction tant que userId ne change pas
+=======
+ // ✅ Same function as long as userId doesn't change
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
const subscribe = useCallback(() => {
// ...
}, [userId]);
+
+ const isOnline = useSyncExternalStore(subscribe, getSnapshot);
// ...
}
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index d3fda79fb..b42f6b6fe 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -4,7 +4,11 @@ title: useTransition
<Intro>
+<<<<<<< HEAD
`useTransition` est un Hook React qui vous permet de mettre à jour l'état sans bloquer l'UI.
+=======
+`useTransition` is a React Hook that lets you render a part of the UI in the background.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js
const [isPending, startTransition] = useTransition()
@@ -41,6 +45,7 @@ function TabContainer() {
`useTransition` renvoie un tableau avec exactement deux éléments :
+<<<<<<< HEAD
1. Le drapeau `isPending` qui vous indique si la Transition est en cours.
2. La [fonction `startTransition`](#starttransition) qui vous permet de marquer une mise à jour d'état comme Transition.
@@ -49,6 +54,16 @@ function TabContainer() {
### La fonction `startTransition` {/*starttransition*/}
La fonction `startTransition` renvoyée par `useTransition` vous permet de marquer une mise à jour d'état comme étant une Transition.
+=======
+1. The `isPending` flag that tells you whether there is a pending Transition.
+2. The [`startTransition` function](#starttransition) that lets you mark updates as a Transition.
+
+---
+
+### `startTransition(action)` {/*starttransition*/}
+
+The `startTransition` function returned by `useTransition` lets you mark an update as a Transition.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js {6,8}
function TabContainer() {
@@ -64,9 +79,44 @@ function TabContainer() {
}
```
+<<<<<<< HEAD
#### Paramètres {/*starttransition-parameters*/}
* `scope` : une fonction qui met à jour l'état en appelant au moins une [fonction `set`](/reference/react/useState#setstate). React appelle immédiatement `scope` sans argument et marque toutes les mises à jour d'état demandées durant l'exécution synchrone de `scope` comme des Transitions. Elles seront [non bloquantes](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) et [n'afficheront pas d'indicateurs de chargement indésirables](/reference/react/useTransition#preventing-unwanted-loading-indicators).
+=======
+<Note>
+#### Functions called in `startTransition` are called "Actions". {/*functions-called-in-starttransition-are-called-actions*/}
+
+The function passed to `startTransition` is called an "Action". By convention, any callback called inside `startTransition` (such as a callback prop) should be named `action` or include the "Action" suffix:
+
+```js {1,9}
+function SubmitButton({ submitAction }) {
+ const [isPending, startTransition] = useTransition();
+
+ return (
+ <button
+ disabled={isPending}
+ onClick={() => {
+ startTransition(async () => {
+ await submitAction();
+ });
+ }}
+ >
+ Submit
+ </button>
+ );
+}
+
+```
+
+</Note>
+
+
+
+#### Parameters {/*starttransition-parameters*/}
+
+* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls that are awaited in the `action` will be included in the Transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators](#preventing-unwanted-loading-indicators).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Valeur renvoyée {/*starttransition-returns*/}
@@ -78,7 +128,13 @@ function TabContainer() {
* Vous pouvez enrober une mise à jour dans une Transition uniquement si vous avez accès à la fonction `set` de l'état en question. Si vous souhaitez démarrer une Transition en réaction à une prop ou à la valeur renvoyée par un Hook personnalisé, utilisez plutôt [`useDeferredValue`](/reference/react/useDeferredValue).
+<<<<<<< HEAD
* La fonction que vous passez à `startTransition` doit être synchrone. React exécute cette fonction immédiatement, et marque toutes les mises à jour demandées lors de son exécution comme des Transitions. Si vous essayez de faire des mises à jour d'état plus tard (par exemple avec un timer), elles ne seront pas marquées comme des Transitions.
+=======
+* The function you pass to `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions.
+
+* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* La fonction `startTransition` a une identité stable, elle ne figure donc généralement pas dans les dépendances des Effets, mais l'inclure n'entraînera pas un déclenchement d'Effet superflu. Si le *linter* vous permet de l'omettre sans erreurs, c'est que cette omission est sans danger. [Apprenez-en davantage sur l'allègement des dépendances d'Effets](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
@@ -86,20 +142,30 @@ function TabContainer() {
* Les mises à jour en Transition ne peuvent pas être utilisées pour contrôler des champs textuels.
+<<<<<<< HEAD
* Si plusieurs Transitions sont en cours, React les regroupe pour le moment. Cette limitation sera sans doute levée dans une future version.
---
+=======
+* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
## Utilisation {/*usage*/}
+<<<<<<< HEAD
### Marquer une mise à jour d'état comme étant une Transition non bloquante {/*marking-a-state-update-as-a-non-blocking-transition*/}
Appelez `useTransition` au niveau racine de votre composant pour marquer des mises à jour d'état comme étant des *Transitions* non bloquantes.
+=======
+### Perform non-blocking updates with Actions {/*perform-non-blocking-updates-with-actions*/}
+
+Call `useTransition` at the top of your component to create Actions, and access the pending state:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js [[1, 4, "isPending"], [2, 4, "startTransition"]]
-import { useState, useTransition } from 'react';
+import {useState, useTransition} from 'react';
-function TabContainer() {
+function CheckoutForm() {
const [isPending, startTransition] = useTransition();
// ...
}
@@ -107,25 +173,39 @@ function TabContainer() {
`useTransition` renvoie un tableau avec exactement deux éléments :
+<<<<<<< HEAD
1. Le <CodeStep step={1}>drapeau `isPending`</CodeStep> qui vous indique si la Transition est en cours.
2. La <CodeStep step={2}>fonction `startTransition`</CodeStep> qui vous permet de marquer une mise à jour d'état comme Transition.
Vous pouvez marquer une mise à jour d'état comme étant une Transition de la façon suivante :
+=======
+1. The <CodeStep step={1}>`isPending` flag</CodeStep> that tells you whether there is a pending Transition.
+2. The <CodeStep step={2}>`startTransition` function</CodeStep> that lets you create an Action.
-```js {6,8}
-function TabContainer() {
+To start a Transition, pass a function to `startTransition` like this:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
+
+```js
+import {useState, useTransition} from 'react';
+import {updateQuantity} from './api';
+
+function CheckoutForm() {
const [isPending, startTransition] = useTransition();
- const [tab, setTab] = useState('about');
+ const [quantity, setQuantity] = useState(1);
- function selectTab(nextTab) {
- startTransition(() => {
- setTab(nextTab);
+ function onSubmit(newQuantity) {
+ startTransition(async function () {
+ const savedQuantity = await updateQuantity(newQuantity);
+ startTransition(() => {
+ setQuantity(savedQuantity);
+ });
});
}
// ...
}
```
+<<<<<<< HEAD
Les Transitions vous permettent de conserver la réactivité des mises à jour d'interface utilisateur, même sur des appareils lents.
Avec une Transition, votre UI reste réactive pendant le rendu. Par exemple, si l'utilisateur clique sur un onglet mais ensuite change d'avis et va sur un autre onglet, il peut le faire sans devoir d'abord attendre que le premier onglet ait fini son rendu.
@@ -137,27 +217,60 @@ Avec une Transition, votre UI reste réactive pendant le rendu. Par exemple, si
Dans cet exemple, l'onglet « Articles » est **artificiellement ralenti** pour que son rendu prenne au moins une seconde.
Cliquez sur « Articles » puis cliquez immédiatement sur « Contact ». Remarquez que ça interrompt le rendu lent d'« Articles ». L'onglet « Contact » est affiché immédiatement. Puisque la mise à jour d'état est marquée comme une Transition, un rendu lent ne gèle pas pour autant l'interface utilisateur.
+=======
+The function passed to `startTransition` is called the "Action". You can update state and (optionally) perform side effects within an Action, and the work will be done in the background without blocking user interactions on the page. A Transition can include multiple Actions, and while a Transition is in progress, your UI stays responsive. For example, if the user clicks a tab but then changes their mind and clicks another tab, the second click will be immediately handled without waiting for the first update to finish.
+
+To give the user feedback about in-progress Transitions, the `isPending` state switches to `true` at the first call to `startTransition`, and stays `true` until all Actions complete and the final state is shown to the user. Transitions ensure side effects in Actions to complete in order to [prevent unwanted loading indicators](#preventing-unwanted-loading-indicators), and you can provide immediate feedback while the Transition is in progress with `useOptimistic`.
+
+<Recipes titleText="The difference between Actions and regular event handling">
+
+#### Updating the quantity in an Action {/*updating-the-quantity-in-an-action*/}
+
+In this example, the `updateQuantity` function simulates a request to the server to update the item's quantity in the cart. This function is *artificially slowed down* so that it takes at least a second to complete the request.
+
+Update the quantity multiple times quickly. Notice that the pending "Total" state is shown while any requests are in progress, and the "Total" updates only after the final request is complete. Because the update is in an Action, the "quantity" can continue to be updated while the request is in progress.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
-```js
-import { useState, useTransition } from 'react';
-import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "beta",
+ "react-dom": "beta"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
-export default function TabContainer() {
+```js src/App.js
+import { useState, useTransition } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+ const [quantity, setQuantity] = useState(1);
const [isPending, startTransition] = useTransition();
- const [tab, setTab] = useState('about');
- function selectTab(nextTab) {
- startTransition(() => {
- setTab(nextTab);
+ const updateQuantityAction = async newQuantity => {
+ // To access the pending state of a transition,
+ // call startTransition again.
+ startTransition(async () => {
+ const savedQuantity = await updateQuantity(newQuantity);
+ startTransition(() => {
+ setQuantity(savedQuantity);
+ });
});
- }
+ };
return (
+<<<<<<< HEAD
<>
<TabButton
isActive={tab === 'about'}
@@ -177,33 +290,44 @@ export default function TabContainer() {
>
Contact
</TabButton>
+=======
+ <div>
+ <h1>Checkout</h1>
+ <Item action={updateQuantityAction}/>
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<hr />
- {tab === 'about' && <AboutTab />}
- {tab === 'posts' && <PostsTab />}
- {tab === 'contact' && <ContactTab />}
- </>
+ <Total quantity={quantity} isPending={isPending} />
+ </div>
);
}
```
-```js src/TabButton.js
-import { useTransition } from 'react';
+```js src/Item.js
+import { startTransition } from "react";
-export default function TabButton({ children, isActive, onClick }) {
- if (isActive) {
- return <b>{children}</b>
+export default function Item({action}) {
+ function handleChange(event) {
+ // To expose an action prop, await the callback in startTransition.
+ startTransition(async () => {
+ await action(event.target.value);
+ })
}
return (
- <button onClick={() => {
- onClick();
- }}>
- {children}
- </button>
+ <div className="item">
+ <span>Eras Tour Tickets</span>
+ <label htmlFor="name">Quantity: </label>
+ <input
+ type="number"
+ onChange={handleChange}
+ defaultValue={1}
+ min={1}
+ />
+ </div>
)
}
-
```
+<<<<<<< HEAD
```js src/AboutTab.js
export default function AboutTab() {
return (
@@ -242,11 +366,27 @@ function SlowPost({ index }) {
Article #{index + 1}
</li>
);
-}
+=======
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD"
+});
-export default PostsTab;
+export default function Total({quantity, isPending}) {
+ return (
+ <div className="total">
+ <span>Total:</span>
+ <span>
+ {isPending ? "🌀 Updating..." : `${intl.format(quantity * 9999)}`}
+ </span>
+ </div>
+ )
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
+}
```
+<<<<<<< HEAD
```js src/ContactTab.js
export default function ContactTab() {
return (
@@ -260,39 +400,88 @@ export default function ContactTab() {
</ul>
</>
);
+=======
+```js src/api.js
+export async function updateQuantity(newQuantity) {
+ return new Promise((resolve, reject) => {
+ // Simulate a slow network request.
+ setTimeout(() => {
+ resolve(newQuantity);
+ }, 2000);
+ });
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
}
```
```css
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
+.item {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+
+.item label {
+ flex: 1;
+ text-align: right;
+}
+
+.item input {
+ margin-left: 4px;
+ width: 60px;
+ padding: 4px;
+}
+
+.total {
+ height: 50px;
+ line-height: 25px;
+ display: flex;
+ align-content: center;
+ justify-content: space-between;
+}
```
</Sandpack>
+This is a basic example to demonstrate how Actions work, but this example does not handle requests completing out of order. When updating the quantity multiple times, it's possible for the previous requests to finish after later requests causing the quantity to update out of order. This is a known limitation that we will fix in the future (see [Troubleshooting](#my-state-updates-in-transitions-are-out-of-order) below).
+
+For common use cases, React provides built-in abstractions such as:
+- [`useActionState`](/reference/react/useActionState)
+- [`<form>` actions](/reference/react-dom/components/form)
+- [Server Functions](/reference/rsc/server-functions)
+
+These solutions handle request ordering for you. When using Transitions to build your own custom hooks or libraries that manage async state transitions, you have greater control over the request ordering, but you must handle it yourself.
+
<Solution />
+<<<<<<< HEAD
#### Changer l'onglet actif sans Transitions {/*updating-the-current-tab-without-a-transition*/}
Dans cet exemple, l'onglet « Articles » est toujours **artificiellement ralenti** pour que son rendu prenne au moins une seconde. Mais contrairement à l'exemple précédent, la mise à jour d'état ne figure **pas dans une Transition**.
Cliquez sur « Articles » puis cliquez immédiatement sur « Contact ». Remarquez que l'appli gèle pendant le rendu de l'onglet lent, et que l'UI ne répond plus. La mise à jour d'état ne figure pas dans une Transition, de sorte que le rendu lent gèle l'interface utilisateur.
+=======
+#### Updating the quantity without an Action {/*updating-the-users-name-without-an-action*/}
-<Sandpack>
+In this example, the `updateQuantity` function also simulates a request to the server to update the item's quantity in the cart. This function is *artificially slowed down* so that it takes at least a second to complete the request.
-```js
-import { useState } from 'react';
-import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+Update the quantity multiple times quickly. Notice that the pending "Total" state is shown while any requests is in progress, but the "Total" updates multiple times for each time the "quantity" was clicked:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-export default function TabContainer() {
- const [tab, setTab] = useState('about');
+<Sandpack>
- function selectTab(nextTab) {
- setTab(nextTab);
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "beta",
+ "react-dom": "beta"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
}
+<<<<<<< HEAD
return (
<>
@@ -320,27 +509,62 @@ export default function TabContainer() {
{tab === 'contact' && <ContactTab />}
</>
);
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
}
```
-```js src/TabButton.js
-import { useTransition } from 'react';
+```js src/App.js
+import { useState } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+ const [quantity, setQuantity] = useState(1);
+ const [isPending, setIsPending] = useState(false);
+
+ const onUpdateQuantity = async newQuantity => {
+ // Manually set the isPending State.
+ setIsPending(true);
+ const savedQuantity = await updateQuantity(newQuantity);
+ setIsPending(false);
+ setQuantity(savedQuantity);
+ };
-export default function TabButton({ children, isActive, onClick }) {
- if (isActive) {
- return <b>{children}</b>
+ return (
+ <div>
+ <h1>Checkout</h1>
+ <Item onUpdateQuantity={onUpdateQuantity}/>
+ <hr />
+ <Total quantity={quantity} isPending={isPending} />
+ </div>
+ );
+}
+
+```
+
+```js src/Item.js
+export default function Item({onUpdateQuantity}) {
+ function handleChange(event) {
+ onUpdateQuantity(event.target.value);
}
return (
- <button onClick={() => {
- onClick();
- }}>
- {children}
- </button>
+ <div className="item">
+ <span>Eras Tour Tickets</span>
+ <label htmlFor="name">Quantity: </label>
+ <input
+ type="number"
+ onChange={handleChange}
+ defaultValue={1}
+ min={1}
+ />
+ </div>
)
}
-
```
+<<<<<<< HEAD
```js src/AboutTab.js
export default function AboutTab() {
return (
@@ -379,11 +603,27 @@ function SlowPost({ index }) {
Article #{index + 1}
</li>
);
-}
+=======
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD"
+});
-export default PostsTab;
+export default function Total({quantity, isPending}) {
+ return (
+ <div className="total">
+ <span>Total:</span>
+ <span>
+ {isPending ? "🌀 Updating..." : `${intl.format(quantity * 9999)}`}
+ </span>
+ </div>
+ )
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
+}
```
+<<<<<<< HEAD
```js src/ContactTab.js
export default function ContactTab() {
return (
@@ -397,36 +637,206 @@ export default function ContactTab() {
</ul>
</>
);
+=======
+```js src/api.js
+export async function updateQuantity(newQuantity) {
+ return new Promise((resolve, reject) => {
+ // Simulate a slow network request.
+ setTimeout(() => {
+ resolve(newQuantity);
+ }, 2000);
+ });
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
}
```
```css
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
+.item {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+
+.item label {
+ flex: 1;
+ text-align: right;
+}
+
+.item input {
+ margin-left: 4px;
+ width: 60px;
+ padding: 4px;
+}
+
+.total {
+ height: 50px;
+ line-height: 25px;
+ display: flex;
+ align-content: center;
+ justify-content: space-between;
+}
```
</Sandpack>
+A common solution to this problem is to prevent the user from making changes while the quantity is updating:
+
+<Sandpack>
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "beta",
+ "react-dom": "beta"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+```js src/App.js
+import { useState, useTransition } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+ const [quantity, setQuantity] = useState(1);
+ const [isPending, setIsPending] = useState(false);
+
+ const onUpdateQuantity = async event => {
+ const newQuantity = event.target.value;
+ // Manually set the isPending state.
+ setIsPending(true);
+ const savedQuantity = await updateQuantity(newQuantity);
+ setIsPending(false);
+ setQuantity(savedQuantity);
+ };
+
+ return (
+ <div>
+ <h1>Checkout</h1>
+ <Item isPending={isPending} onUpdateQuantity={onUpdateQuantity}/>
+ <hr />
+ <Total quantity={quantity} isPending={isPending} />
+ </div>
+ );
+}
+
+```
+
+```js src/Item.js
+export default function Item({isPending, onUpdateQuantity}) {
+ return (
+ <div className="item">
+ <span>Eras Tour Tickets</span>
+ <label htmlFor="name">Quantity: </label>
+ <input
+ type="number"
+ disabled={isPending}
+ onChange={onUpdateQuantity}
+ defaultValue={1}
+ min={1}
+ />
+ </div>
+ )
+}
+```
+
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD"
+});
+
+export default function Total({quantity, isPending}) {
+ return (
+ <div className="total">
+ <span>Total:</span>
+ <span>
+ {isPending ? "🌀 Updating..." : `${intl.format(quantity * 9999)}`}
+ </span>
+ </div>
+ )
+}
+```
+
+```js src/api.js
+export async function updateQuantity(newQuantity) {
+ return new Promise((resolve, reject) => {
+ // Simulate a slow network request.
+ setTimeout(() => {
+ resolve(newQuantity);
+ }, 2000);
+ });
+}
+```
+
+```css
+.item {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+
+.item label {
+ flex: 1;
+ text-align: right;
+}
+
+.item input {
+ margin-left: 4px;
+ width: 60px;
+ padding: 4px;
+}
+
+.total {
+ height: 50px;
+ line-height: 25px;
+ display: flex;
+ align-content: center;
+ justify-content: space-between;
+}
+```
+
+</Sandpack>
+
+This solution makes the app feel slow, because the user must wait each time they update the quantity. It's possible to add more complex handling manually to allow the user to interact with the UI while the quantity is updating, but Actions handle this case with a straight-forward built-in API.
+
<Solution />
</Recipes>
---
+<<<<<<< HEAD
### Mettre à jour le composant parent dans une Transition {/*updating-the-parent-component-in-a-transition*/}
Vous pouvez tout aussi bien mettre à jour l'état du composant parent depuis un appel à `useTransition`. Par exemple, le composant `TabButton` enrobe la logique de son `onClick` avec une Transition :
+=======
+### Exposing `action` prop from components {/*exposing-action-props-from-components*/}
-```js {8-10}
-export default function TabButton({ children, isActive, onClick }) {
+You can expose an `action` prop from a component to allow a parent to call an Action.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
+
+For example, this `TabButton` component wraps its `onClick` logic in an `action` prop:
+
+```js {8-12}
+export default function TabButton({ action, children, isActive }) {
const [isPending, startTransition] = useTransition();
if (isActive) {
return <b>{children}</b>
}
return (
<button onClick={() => {
- startTransition(() => {
- onClick();
+ startTransition(async () => {
+ // await the action that's passed in.
+ // This allows it to be either sync or async.
+ await action();
});
}}>
{children}
@@ -435,7 +845,11 @@ export default function TabButton({ children, isActive, onClick }) {
}
```
+<<<<<<< HEAD
Puisque le composant parent met à jour son état au sein du gestionnaire d'événement `onClick`, cette mise à jour d'état sera marquée comme étant une Transition. C'est pourquoi, comme dans l'exemple précédent, vous pouvez cliquer sur « Articles » puis immédiatement sur « Contact ». Le changement d'onglet est marqué comme étant une Transition : il ne bloque donc pas les interactions utilisateur.
+=======
+Because the parent component updates its state inside the `action`, that state update gets marked as a Transition. This means you can click on "Posts" and then immediately click "Contact" and it does not block user interactions:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -452,19 +866,19 @@ export default function TabContainer() {
<>
<TabButton
isActive={tab === 'about'}
- onClick={() => setTab('about')}
+ action={() => setTab('about')}
>
À propos
</TabButton>
<TabButton
isActive={tab === 'posts'}
- onClick={() => setTab('posts')}
+ action={() => setTab('posts')}
>
Articles (lent)
</TabButton>
<TabButton
isActive={tab === 'contact'}
- onClick={() => setTab('contact')}
+ action={() => setTab('contact')}
>
Contact
</TabButton>
@@ -480,15 +894,20 @@ export default function TabContainer() {
```js src/TabButton.js active
import { useTransition } from 'react';
-export default function TabButton({ children, isActive, onClick }) {
+export default function TabButton({ action, children, isActive }) {
const [isPending, startTransition] = useTransition();
if (isActive) {
return <b>{children}</b>
}
+ if (isPending) {
+ return <b className="pending">{children}</b>;
+ }
return (
- <button onClick={() => {
- startTransition(() => {
- onClick();
+ <button onClick={async () => {
+ startTransition(async () => {
+ // await the action that's passed in.
+ // This allows it to be either sync or async.
+ await action();
});
}}>
{children}
@@ -559,18 +978,31 @@ export default function ContactTab() {
```css
button { margin-right: 10px }
b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
```
</Sandpack>
+<Note>
+
+When exposing an `action` prop from a component, you should `await` it inside the transition.
+
+This allows the `action` callback to be either synchronous or asynchronous without requiring an additional `startTransition` to wrap the `await` in the action.
+
+</Note>
+
---
+<<<<<<< HEAD
### Afficher une indication visuelle pendant la Transition {/*displaying-a-pending-visual-state-during-the-transition*/}
+=======
+### Displaying a pending visual state {/*displaying-a-pending-visual-state*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Vous pouvez utiliser la valeur booléenne `isPending` renvoyée par `useTransition` pour indiquer à l'utilisateur qu'une Transition est en cours. Par exemple, le bouton d'onglet peut avoir un état visuel spécial « en cours » :
```js {4-6}
-function TabButton({ children, isActive, onClick }) {
+function TabButton({ action, children, isActive }) {
const [isPending, startTransition] = useTransition();
// ...
if (isPending) {
@@ -596,19 +1028,19 @@ export default function TabContainer() {
<>
<TabButton
isActive={tab === 'about'}
- onClick={() => setTab('about')}
+ action={() => setTab('about')}
>
À propos
</TabButton>
<TabButton
isActive={tab === 'posts'}
- onClick={() => setTab('posts')}
+ action={() => setTab('posts')}
>
Articles (lent)
</TabButton>
<TabButton
isActive={tab === 'contact'}
- onClick={() => setTab('contact')}
+ action={() => setTab('contact')}
>
Contact
</TabButton>
@@ -624,7 +1056,7 @@ export default function TabContainer() {
```js src/TabButton.js active
import { useTransition } from 'react';
-export default function TabButton({ children, isActive, onClick }) {
+export default function TabButton({ action, children, isActive }) {
const [isPending, startTransition] = useTransition();
if (isActive) {
return <b>{children}</b>
@@ -634,8 +1066,8 @@ export default function TabButton({ children, isActive, onClick }) {
}
return (
<button onClick={() => {
- startTransition(() => {
- onClick();
+ startTransition(async () => {
+ await action();
});
}}>
{children}
@@ -715,7 +1147,11 @@ b { display: inline-block; margin-right: 10px; }
### Empêcher les indicateurs de chargement indésirables {/*preventing-unwanted-loading-indicators*/}
+<<<<<<< HEAD
Dans cet exemple, le composant `PostsTab` charge des données en utilisant une source de données [compatible Suspense](/reference/react/Suspense). Lorsque vous cliquez sur l'onglet « Articles », le composant `PostsTab` *suspend*, entraînant l'affichage du plus proche contenu de secours :
+=======
+In this example, the `PostsTab` component fetches some data using [use](/reference/react/use). When you click the "Posts" tab, the `PostsTab` component *suspends*, causing the closest loading fallback to appear:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -732,19 +1168,19 @@ export default function TabContainer() {
<Suspense fallback={<h1>🌀 Chargement...</h1>}>
<TabButton
isActive={tab === 'about'}
- onClick={() => setTab('about')}
+ action={() => setTab('about')}
>
À propos
</TabButton>
<TabButton
isActive={tab === 'posts'}
- onClick={() => setTab('posts')}
+ action={() => setTab('posts')}
>
Articles
</TabButton>
<TabButton
isActive={tab === 'contact'}
- onClick={() => setTab('contact')}
+ action={() => setTab('contact')}
>
Contact
</TabButton>
@@ -758,13 +1194,13 @@ export default function TabContainer() {
```
```js src/TabButton.js
-export default function TabButton({ children, isActive, onClick }) {
+export default function TabButton({ action, children, isActive }) {
if (isActive) {
return <b>{children}</b>
}
return (
<button onClick={() => {
- onClick();
+ action();
}}>
{children}
</button>
@@ -781,14 +1217,9 @@ export default function AboutTab() {
```
```js src/PostsTab.js hidden
+import {use} from 'react';
import { fetchData } from './data.js';
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
function PostsTab() {
const posts = use(fetchData('/posts'));
return (
@@ -809,6 +1240,7 @@ function Post({ title }) {
}
export default PostsTab;
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -836,6 +1268,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/ContactTab.js hidden
@@ -901,7 +1335,11 @@ b { display: inline-block; margin-right: 10px; }
</Sandpack>
+<<<<<<< HEAD
Masquer le conteneur d'onglets dans son intégralité pour afficher un indicateur de chargement entraîne une expérience utilisateur désagréable. Si vous ajoutez `useTransition` à `TabButton`, vous pouvez plutôt manifester l'attente en cours dans le bouton d'onglet.
+=======
+Hiding the entire tab container to show a loading indicator leads to a jarring user experience. If you add `useTransition` to `TabButton`, you can instead display the pending state in the tab button instead.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Remarquez que cliquer sur « Articles » ne remplace plus l'ensemble du conteneur d'onglets avec un *spinner* :
@@ -920,19 +1358,19 @@ export default function TabContainer() {
<Suspense fallback={<h1>🌀 Chargement...</h1>}>
<TabButton
isActive={tab === 'about'}
- onClick={() => setTab('about')}
+ action={() => setTab('about')}
>
À propos
</TabButton>
<TabButton
isActive={tab === 'posts'}
- onClick={() => setTab('posts')}
+ action={() => setTab('posts')}
>
Articles
</TabButton>
<TabButton
isActive={tab === 'contact'}
- onClick={() => setTab('contact')}
+ action={() => setTab('contact')}
>
Contact
</TabButton>
@@ -948,7 +1386,7 @@ export default function TabContainer() {
```js src/TabButton.js active
import { useTransition } from 'react';
-export default function TabButton({ children, isActive, onClick }) {
+export default function TabButton({ action, children, isActive }) {
const [isPending, startTransition] = useTransition();
if (isActive) {
return <b>{children}</b>
@@ -958,8 +1396,8 @@ export default function TabButton({ children, isActive, onClick }) {
}
return (
<button onClick={() => {
- startTransition(() => {
- onClick();
+ startTransition(async () => {
+ await action();
});
}}>
{children}
@@ -977,14 +1415,9 @@ export default function AboutTab() {
```
```js src/PostsTab.js hidden
+import {use} from 'react';
import { fetchData } from './data.js';
-// Note: this component is written using an experimental API
-// that's not yet available in stable versions of React.
-
-// For a realistic example you can follow today, try a framework
-// that's integrated with Suspense, like Relay or Next.js.
-
function PostsTab() {
const posts = use(fetchData('/posts'));
return (
@@ -1005,6 +1438,7 @@ function Post({ title }) {
}
export default PostsTab;
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1032,6 +1466,8 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
```js src/ContactTab.js hidden
@@ -1101,7 +1537,11 @@ b { display: inline-block; margin-right: 10px; }
<Note>
+<<<<<<< HEAD
Les Transitions « n'attendront » que le temps nécessaire pour éviter de masquer du contenu *déjà révélé* (comme le conteneur d'onglets). Si l'onglet Articles avait un [périmètre `<Suspense>` imbriqué](/reference/react/Suspense#revealing-nested-content-as-it-loads), la Transition « n'attendrait » pas ce dernier.
+=======
+Transitions only "wait" long enough to avoid hiding *already revealed* content (like the tab container). If the Posts tab had a [nested `<Suspense>` boundary,](/reference/react/Suspense#revealing-nested-content-as-it-loads) the Transition would not "wait" for it.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
</Note>
@@ -1124,29 +1564,24 @@ function Router() {
// ...
```
+<<<<<<< HEAD
Nous recommandons ça pour deux raisons :
- [Les Transitions sont interruptibles](#marking-a-state-update-as-a-non-blocking-transition), ce qui permet à l'utilisateur de cliquer pour aller ailleurs sans devoir attendre la fin du rendu de son premier choix.
- [Les Transitions évitent les indicateurs de chargement indésirables](#preventing-unwanted-loading-indicators), ce qui vous évite de produire des « clignotements » désagréables lors de la navigation.
Voici un petit exemple de routeur très simplifié utilisant les Transitions pour ses navigations.
+=======
+This is recommended for three reasons:
-<Sandpack>
+- [Transitions are interruptible,](#marking-a-state-update-as-a-non-blocking-transition) which lets the user click away without waiting for the re-render to complete.
+- [Transitions prevent unwanted loading indicators,](#preventing-unwanted-loading-indicators) which lets the user avoid jarring jumps on navigation.
+- [Transitions wait for all pending actions](#perform-non-blocking-updates-with-actions) which lets the user wait for side effects to complete before the new page is shown.
-```json package.json hidden
-{
- "dependencies": {
- "react": "experimental",
- "react-dom": "experimental"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
+Here is a simplified router example using Transitions for navigations.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
+
+<Sandpack>
```js src/App.js
import { Suspense, useState, useTransition } from 'react';
@@ -1257,15 +1692,19 @@ function AlbumsGlimmer() {
}
```
-```js src/Albums.js hidden
+```js src/Albums.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Albums({ artistId }) {
const albums = use(fetchData(`/${artistId}/albums`));
return (
@@ -1278,6 +1717,7 @@ export default function Albums({ artistId }) {
</ul>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1305,17 +1745,23 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Biography.js hidden
+```js src/Biography.js
+import {use} from 'react';
import { fetchData } from './data.js';
+<<<<<<< HEAD
// Note : ce composant est écrit au moyen d'une API expérimentale
// qui n'est pas encore disponible dans une version stable de React.
// Pour un exemple réaliste que vous pouvez suivre dès aujourd'hui,
// essayez un framework intégrant Suspense, tel que Relay ou Next.js.
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
export default function Biography({ artistId }) {
const bio = use(fetchData(`/${artistId}/bio`));
return (
@@ -1324,6 +1770,7 @@ export default function Biography({ artistId }) {
</section>
);
}
+<<<<<<< HEAD
// Ceci est une solution de contournement pour permettre à la
// démo de fonctionner.
@@ -1351,9 +1798,11 @@ function use(promise) {
throw promise;
}
}
+=======
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```
-```js src/Panel.js hidden
+```js src/Panel.js
export default function Panel({ children }) {
return (
<section className="panel">
@@ -1517,6 +1966,7 @@ Les routeurs [compatibles Suspense](/reference/react/Suspense) sont censés enro
### Afficher une erreur à l'utilisateur avec un périmètre d'erreur {/*displaying-an-error-to-users-with-error-boundary*/}
+<<<<<<< HEAD
<Canary>
Les périmètres d'erreurs pour `useTransition` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
@@ -1524,6 +1974,9 @@ Les périmètres d'erreurs pour `useTransition` ne sont actuellement disponibles
</Canary>
Si une fonction passée à `startTransition` lève une erreur, vous pouvez afficher l'erreur à votre utilisateur au moyen d'un [périmètre d'erreur](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Pour utiliser un périmètre d'erreur, enrobez le composant qui appelle `useTransition` avec ce périmètre. Lorsque la fonction passée à `startTransition` lèvera une erreur, le contenu de secours du périmètre d'erreur sera affiché.
+=======
+If a function passed to `startTransition` throws an error, you can display an error to your user with an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `useTransition` in an error boundary. Once the function passed to `startTransition` errors, the fallback for the error boundary will be displayed.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Sandpack>
@@ -1575,6 +2028,7 @@ export default function App() {
```
```js src/index.js hidden
+<<<<<<< HEAD
// TODO: mettre à jour l'import vers la version stable de React
// une fois que le Hook `use` actuellement Canary y figurera
import React, { StrictMode } from 'react';
@@ -1583,6 +2037,11 @@ import './styles.css';
// TODO: mettre à jour cet exemple pour utiliser l'environnement
// de démo Server Component de Codesandbox quand celui-ci sera disponible
+=======
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
import App from './App';
const root = createRoot(document.getElementById('root'));
@@ -1596,8 +2055,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "canary",
- "react-dom": "canary",
+ "react": "19.0.0-rc-3edc000d-20240926",
+ "react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
@@ -1645,9 +2104,13 @@ startTransition(() => {
});
```
+<<<<<<< HEAD
La fonction que vous passez à `startTransition` doit être synchrone.
Vous ne pouvez pas marquer une mise à jour comme étant une Transition avec ce genre de code :
+=======
+The function you pass to `startTransition` must be synchronous. You can't mark an update as a Transition like this:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js
startTransition(() => {
@@ -1669,12 +2132,24 @@ setTimeout(() => {
}, 1000);
```
+<<<<<<< HEAD
Dans le même esprit, vous ne pouvez pas marquer une mise à jour comme étant une Transition avec du code ressemblant à ça :
+=======
+---
+
+### React doesn't treat my state update after `await` as a Transition {/*react-doesnt-treat-my-state-update-after-await-as-a-transition*/}
+
+When you use `await` inside a `startTransition` function, the state updates that happen after the `await` are not marked as Transitions. You must wrap state updates after each `await` in a `startTransition` call:
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js
startTransition(async () => {
await someAsyncFunction();
+<<<<<<< HEAD
// ❌ L’état est mis à jour *après* l’appel à startTransition
+=======
+ // ❌ Not using startTransition after await
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
setPage('/about');
});
```
@@ -1682,13 +2157,24 @@ startTransition(async () => {
En revanche, ce type de code fonctionne :
```js
+<<<<<<< HEAD
await someAsyncFunction();
startTransition(() => {
// ✅ L’état est mis à jour *pendant* l’appel à startTransition
setPage('/about');
+=======
+startTransition(async () => {
+ await someAsyncFunction();
+ // ✅ Using startTransition *after* await
+ startTransition(() => {
+ setPage('/about');
+ });
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
});
```
+This is a JavaScript limitation due to React losing the scope of the async context. In the future, when [AsyncContext](https://github.com/tc39/proposal-async-context) is available, this limitation will be removed.
+
---
### Je veux appeler `useTransition` ailleurs que dans un composant {/*i-want-to-call-usetransition-from-outside-a-component*/}
@@ -1731,3 +2217,342 @@ function setState() {
}
}
```
+
+### My state updates in Transitions are out of order {/*my-state-updates-in-transitions-are-out-of-order*/}
+
+If you `await` inside `startTransition`, you might see the updates happen out of order.
+
+In this example, the `updateQuantity` function simulates a request to the server to update the item's quantity in the cart. This function *artificially returns the every other request after the previous* to simulate race conditions for network requests.
+
+Try updating the quantity once, then update it quickly multiple times. You might see the incorrect total:
+
+<Sandpack>
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "beta",
+ "react-dom": "beta"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+```js src/App.js
+import { useState, useTransition } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+ const [quantity, setQuantity] = useState(1);
+ const [isPending, startTransition] = useTransition();
+ // Store the actual quantity in separate state to show the mismatch.
+ const [clientQuantity, setClientQuantity] = useState(1);
+
+ const updateQuantityAction = newQuantity => {
+ setClientQuantity(newQuantity);
+
+ // Access the pending state of the transition,
+ // by wrapping in startTransition again.
+ startTransition(async () => {
+ const savedQuantity = await updateQuantity(newQuantity);
+ startTransition(() => {
+ setQuantity(savedQuantity);
+ });
+ });
+ };
+
+ return (
+ <div>
+ <h1>Checkout</h1>
+ <Item action={updateQuantityAction}/>
+ <hr />
+ <Total clientQuantity={clientQuantity} savedQuantity={quantity} isPending={isPending} />
+ </div>
+ );
+}
+
+```
+
+```js src/Item.js
+import {startTransition} from 'react';
+
+export default function Item({action}) {
+ function handleChange(e) {
+ // Update the quantity in an Action.
+ startTransition(async () => {
+ await action(e.target.value);
+ });
+ }
+ return (
+ <div className="item">
+ <span>Eras Tour Tickets</span>
+ <label htmlFor="name">Quantity: </label>
+ <input
+ type="number"
+ onChange={handleChange}
+ defaultValue={1}
+ min={1}
+ />
+ </div>
+ )
+}
+```
+
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD"
+});
+
+export default function Total({ clientQuantity, savedQuantity, isPending }) {
+ return (
+ <div className="total">
+ <span>Total:</span>
+ <div>
+ <div>
+ {isPending
+ ? "🌀 Updating..."
+ : `${intl.format(savedQuantity * 9999)}`}
+ </div>
+ <div className="error">
+ {!isPending &&
+ clientQuantity !== savedQuantity &&
+ `Wrong total, expected: ${intl.format(clientQuantity * 9999)}`}
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js src/api.js
+let firstRequest = true;
+export async function updateQuantity(newName) {
+ return new Promise((resolve, reject) => {
+ if (firstRequest === true) {
+ firstRequest = false;
+ setTimeout(() => {
+ firstRequest = true;
+ resolve(newName);
+ // Simulate every other request being slower
+ }, 1000);
+ } else {
+ setTimeout(() => {
+ resolve(newName);
+ }, 50);
+ }
+ });
+}
+```
+
+```css
+.item {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+
+.item label {
+ flex: 1;
+ text-align: right;
+}
+
+.item input {
+ margin-left: 4px;
+ width: 60px;
+ padding: 4px;
+}
+
+.total {
+ height: 50px;
+ line-height: 25px;
+ display: flex;
+ align-content: center;
+ justify-content: space-between;
+}
+
+.total div {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+
+.error {
+ color: red;
+}
+```
+
+</Sandpack>
+
+
+When clicking multiple times, it's possible for previous requests to finish after later requests. When this happens, React currently has no way to know the intended order. This is because the updates are scheduled asynchronously, and React loses context of the order across the async boundary.
+
+This is expected, because Actions within a Transition do not guarantee execution order. For common use cases, React provides higher-level abstractions like [`useActionState`](/reference/react/useActionState) and [`<form>` actions](/reference/react-dom/components/form) that handle ordering for you. For advanced use cases, you'll need to implement your own queuing and abort logic to handle this.
+
+
+Example of `useActionState` handling execution order:
+
+<Sandpack>
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "beta",
+ "react-dom": "beta"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+```js src/App.js
+import { useState, useActionState } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+ // Store the actual quantity in separate state to show the mismatch.
+ const [clientQuantity, setClientQuantity] = useState(1);
+ const [quantity, updateQuantityAction, isPending] = useActionState(
+ async (prevState, payload) => {
+ setClientQuantity(payload);
+ const savedQuantity = await updateQuantity(payload);
+ return savedQuantity; // Return the new quantity to update the state
+ },
+ 1 // Initial quantity
+ );
+
+ return (
+ <div>
+ <h1>Checkout</h1>
+ <Item action={updateQuantityAction}/>
+ <hr />
+ <Total clientQuantity={clientQuantity} savedQuantity={quantity} isPending={isPending} />
+ </div>
+ );
+}
+
+```
+
+```js src/Item.js
+import {startTransition} from 'react';
+
+export default function Item({action}) {
+ function handleChange(e) {
+ // Update the quantity in an Action.
+ startTransition(() => {
+ action(e.target.value);
+ });
+ }
+ return (
+ <div className="item">
+ <span>Eras Tour Tickets</span>
+ <label htmlFor="name">Quantity: </label>
+ <input
+ type="number"
+ onChange={handleChange}
+ defaultValue={1}
+ min={1}
+ />
+ </div>
+ )
+}
+```
+
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD"
+});
+
+export default function Total({ clientQuantity, savedQuantity, isPending }) {
+ return (
+ <div className="total">
+ <span>Total:</span>
+ <div>
+ <div>
+ {isPending
+ ? "🌀 Updating..."
+ : `${intl.format(savedQuantity * 9999)}`}
+ </div>
+ <div className="error">
+ {!isPending &&
+ clientQuantity !== savedQuantity &&
+ `Wrong total, expected: ${intl.format(clientQuantity * 9999)}`}
+ </div>
+ </div>
+ </div>
+ );
+}
+```
+
+```js src/api.js
+let firstRequest = true;
+export async function updateQuantity(newName) {
+ return new Promise((resolve, reject) => {
+ if (firstRequest === true) {
+ firstRequest = false;
+ setTimeout(() => {
+ firstRequest = true;
+ resolve(newName);
+ // Simulate every other request being slower
+ }, 1000);
+ } else {
+ setTimeout(() => {
+ resolve(newName);
+ }, 50);
+ }
+ });
+}
+```
+
+```css
+.item {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+
+.item label {
+ flex: 1;
+ text-align: right;
+}
+
+.item input {
+ margin-left: 4px;
+ width: 60px;
+ padding: 4px;
+}
+
+.total {
+ height: 50px;
+ line-height: 25px;
+ display: flex;
+ align-content: center;
+ justify-content: space-between;
+}
+
+.total div {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+
+.error {
+ color: red;
+}
+```
+
+</Sandpack>
diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md
index 38943c1fd..183ab4f36 100644
--- a/src/content/reference/rsc/directives.md
+++ b/src/content/reference/rsc/directives.md
@@ -1,13 +1,16 @@
---
-title: "Directives"
-canary: true
+title: Directives
---
-<Canary>
+<RSC>
+<<<<<<< HEAD
Ces directives ne sont utiles que si vous [utilisez les Composants Serveur](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) ou créez une bibliothèque compatible avec eux.
+=======
+Directives are for use in [React Server Components](/reference/rsc/server-components).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-</Canary>
+</RSC>
<Intro>
diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md
index 73b2b6d81..4b7cf36db 100644
--- a/src/content/reference/rsc/server-components.md
+++ b/src/content/reference/rsc/server-components.md
@@ -1,8 +1,18 @@
---
+<<<<<<< HEAD
title: Composants Serveur
canary: true
+=======
+title: Server Components
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
+<RSC>
+
+Server Components are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+
+</RSC>
+
<Intro>
Les Composants Serveur *(React Server Components, ou RSC — NdT)* sont un nouveau type de Composant qui font un rendu anticipé, avant le *bundling*, dans un environnement distinct de votre appli client et d'un serveur SSR.
@@ -17,7 +27,11 @@ Cet environnement séparé est le « serveur » des Composants Serveur. Les Co
#### Comment prendre en charge les Composants Serveur ? {/*how-do-i-build-support-for-server-components*/}
+<<<<<<< HEAD
Même si les Composants Serveur dans React 19 sont stables et ne casseront pas la compatibilité entre les versions majeures, les API sous-jacentes utilisées pour implémenter les Composants Serveur au sein d'un *bundler* ou framework ne suivent pas, elles, le versionnage sémantique et sont susceptibles de casser la compatibilité entre les versions mineures de React 19.x.
+=======
+While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Pour prendre en charge les Composants Serveur dans un *bundler* ou framework, nous vous conseillons de figer React sur une version spécifique, ou d'utiliser une version Canari. Nous allons continuer à collaborer avec les *bundlers* et frameworks pour stabiliser les API utilisées pour implémenter les Composants Serveur à l'avenir.
@@ -191,7 +205,11 @@ Les Composants Serveur ne sont pas envoyés au navigateur, ils ne peuvent donc p
#### Les Composants Serveur n'ont pas de directive. {/*there-is-no-directive-for-server-components*/}
+<<<<<<< HEAD
Une erreur de perception courante veut que les Composants Serveur soient identifié par `"use server"`, mais les Composants Serveur n'ont en fait pas de directive dédiée. La directive `"use server"` est là pour les Actions Serveur.
+=======
+A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Functions.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Pour en savoir plus, lisez la documentation des [directives](/reference/rsc/directives).
@@ -297,4 +315,8 @@ function Comments({commentsPromise}) {
Le contenu `note` constitue une donnée important pour le rendu de la page, de sorte qu'on l'attend côté serveur. Mais les commentaires sont sous le *fold* (la limite basse de la fenêtre initiale de visualisation) et sont donc moins prioritaire, de sorte qu'on se contente de démarrer leur chargement côté serveur, pour n'en attendre l'aboutissement que côté client grâce à l'API `use`. Ça suspendra côté client, sans bloquer le rendu initial du contenu `note`.
+<<<<<<< HEAD
Dans la mesure où les composants asynchrones ne sont pas pris en charge côté client, on attend leur promesse avec `use`.
+=======
+Since async components are not supported on the client, we await the promise with `use`.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
new file mode 100644
index 000000000..770f5a705
--- /dev/null
+++ b/src/content/reference/rsc/server-functions.md
@@ -0,0 +1,222 @@
+---
+title: Server Functions
+---
+
+<RSC>
+
+Server Functions are for use in [React Server Components](/reference/rsc/server-components).
+
+**Note:** Until September 2024, we referred to all Server Functions as "Server Actions". If a Server Function is passed to an action prop or called from inside an action then it is a Server Action, but not all Server Functions are Server Actions. The naming in this documentation has been updated to reflect that Server Functions can be used for multiple purposes.
+
+</RSC>
+
+<Intro>
+
+Server Functions allow Client Components to call async functions executed on the server.
+
+</Intro>
+
+<InlineToc />
+
+<Note>
+
+#### How do I build support for Server Functions? {/*how-do-i-build-support-for-server-functions*/}
+
+While Server Functions in React 19 are stable and will not break between minor versions, the underlying APIs used to implement Server Functions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
+
+To support Server Functions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Functions in the future.
+
+</Note>
+
+When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
+
+Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
+
+## Usage {/*usage*/}
+
+### Creating a Server Function from a Server Component {/*creating-a-server-function-from-a-server-component*/}
+
+Server Components can define Server Functions with the `"use server"` directive:
+
+```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]]
+// Server Component
+import Button from './Button';
+
+function EmptyNote () {
+ async function createNoteAction() {
+ // Server Function
+ 'use server';
+
+ await db.notes.create();
+ }
+
+ return <Button onClick={createNoteAction}/>;
+}
+```
+
+When React renders the `EmptyNote` Server Component, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
+
+```js {5}
+"use client";
+
+export default function Button({onClick}) {
+ console.log(onClick);
+ // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
+ return <button onClick={() => onClick()}>Create Empty Note</button>
+}
+```
+
+For more, see the docs for [`"use server"`](/reference/rsc/use-server).
+
+
+### Importing Server Functions from Client Components {/*importing-server-functions-from-client-components*/}
+
+Client Components can import Server Functions from files that use the `"use server"` directive:
+
+```js [[1, 3, "createNote"]]
+"use server";
+
+export async function createNote() {
+ await db.notes.create();
+}
+
+```
+
+When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNote` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNote` function using the reference provided:
+
+```js [[1, 2, "createNote"], [1, 5, "createNote"], [1, 7, "createNote"]]
+"use client";
+import {createNote} from './actions';
+
+function EmptyNote() {
+ console.log(createNote);
+ // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}
+ <button onClick={() => createNote()} />
+}
+```
+
+For more, see the docs for [`"use server"`](/reference/rsc/use-server).
+
+### Server Functions with Actions {/*server-functions-with-actions*/}
+
+Server Functions can be called from Actions on the client:
+
+```js [[1, 3, "updateName"]]
+"use server";
+
+export async function updateName(name) {
+ if (!name) {
+ return {error: 'Name is required'};
+ }
+ await db.users.updateName(name);
+}
+```
+
+```js [[1, 3, "updateName"], [1, 13, "updateName"], [2, 11, "submitAction"], [2, 23, "submitAction"]]
+"use client";
+
+import {updateName} from './actions';
+
+function UpdateName() {
+ const [name, setName] = useState('');
+ const [error, setError] = useState(null);
+
+ const [isPending, startTransition] = useTransition();
+
+ const submitAction = async () => {
+ startTransition(async () => {
+ const {error} = await updateName(name);
+ if (error) {
+ setError(error);
+ } else {
+ setName('');
+ }
+ })
+ }
+
+ return (
+ <form action={submitAction}>
+ <input type="text" name="name" disabled={isPending}/>
+ {error && <span>Failed: {error}</span>}
+ </form>
+ )
+}
+```
+
+This allows you to access the `isPending` state of the Server Function by wrapping it in an Action on the client.
+
+For more, see the docs for [Calling a Server Function outside of `<form>`](/reference/rsc/use-server#calling-a-server-function-outside-of-form)
+
+### Server Functions with Form Actions {/*using-server-functions-with-form-actions*/}
+
+Server Functions work with the new Form features in React 19.
+
+You can pass a Server Function to a Form to automatically submit the form to the server:
+
+
+```js [[1, 3, "updateName"], [1, 7, "updateName"]]
+"use client";
+
+import {updateName} from './actions';
+
+function UpdateName() {
+ return (
+ <form action={updateName}>
+ <input type="text" name="name" />
+ </form>
+ )
+}
+```
+
+When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
+
+For more, see the docs for [Server Functions in Forms](/reference/rsc/use-server#server-functions-in-forms).
+
+### Server Functions with `useActionState` {/*server-functions-with-use-action-state*/}
+
+You can call Server Functions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
+
+```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
+"use client";
+
+import {updateName} from './actions';
+
+function UpdateName() {
+ const [state, submitAction, isPending] = useActionState(updateName, {error: null});
+
+ return (
+ <form action={submitAction}>
+ <input type="text" name="name" disabled={isPending}/>
+ {state.error && <span>Failed: {state.error}</span>}
+ </form>
+ );
+}
+```
+
+When using `useActionState` with Server Functions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
+
+For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
+
+### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
+
+Server Functions also support progressive enhancement with the third argument of `useActionState`.
+
+```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
+"use client";
+
+import {updateName} from './actions';
+
+function UpdateName() {
+ const [, submitAction] = useActionState(updateName, null, `/name/update`);
+
+ return (
+ <form action={submitAction}>
+ ...
+ </form>
+ );
+}
+```
+
+When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
+
+For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md
index 8298bea29..7b02e2b40 100644
--- a/src/content/reference/rsc/use-client.md
+++ b/src/content/reference/rsc/use-client.md
@@ -1,14 +1,24 @@
---
title: "'use client'"
+<<<<<<< HEAD
titleForTitleTag: "Directive 'use client'"
canary: true
+=======
+titleForTitleTag: "'use client' directive"
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
-<Canary>
+<RSC>
+<<<<<<< HEAD
`'use client'` n'est utile que si vous [utilisez React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) ou créez une bibliothèque compatible avec eux.
</Canary>
+=======
+`'use client'` is for use with [React Server Components](/reference/rsc/server-components).
+
+</RSC>
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
<Intro>
@@ -261,7 +271,30 @@ Par souci de simplicité, nous parlons ici des Composants Serveur, mais les mêm
### Types sérialisables renvoyés par les Composants Serveur {/*serializable-types*/}
+<<<<<<< HEAD
Les types de props sérialisables comprennent :
+=======
+Serializable props include:
+* Primitives
+ * [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
+ * [number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
+ * [bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+ * [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
+ * [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
+ * [null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
+ * [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), only symbols registered in the global Symbol registry via [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for)
+* Iterables containing serializable values
+ * [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
+ * [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+ * [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+ * [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+ * [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+* [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
+* Functions that are [Server Functions](/reference/rsc/server-functions)
+* Client or Server Component elements (JSX)
+* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* Les types primitifs
* [string](https://developer.mozilla.org/fr/docs/Glossary/String)
diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md
index 429ade7d9..fb47303d4 100644
--- a/src/content/reference/rsc/use-server.md
+++ b/src/content/reference/rsc/use-server.md
@@ -1,14 +1,22 @@
---
title: "'use server'"
+<<<<<<< HEAD
titleForTitleTag: "Directive 'use server'"
canary: true
+=======
+titleForTitleTag: "'use server' directive"
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
---
-<Canary>
+<RSC>
+<<<<<<< HEAD
`'use server'` n'est utile que si vous [utilisez React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) ou créez une bibliothèque compatible avec eux.
+=======
+`'use server'` is for use with [using React Server Components](/reference/rsc/server-components).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-</Canary>
+</RSC>
<Intro>
@@ -25,7 +33,11 @@ canary: true
### `'use server'` {/*use-server*/}
+<<<<<<< HEAD
Ajoutez `'use server';` tout en haut d'une fonction asynchrone pour indiquer que cette fonction peut être appelée par du code côté client. Nous appelons ces fonctions des _Actions Serveur_.
+=======
+Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions [_Server Functions_](/reference/rsc/server-functions).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js {2}
async function addToCart(data) {
@@ -34,11 +46,26 @@ async function addToCart(data) {
}
```
+<<<<<<< HEAD
Lorsque vous appelez une Action Serveur côté client, elle fait une requête réseau auprès du serveur en incluant une copie sérialisée des arguments que vous avez passés. Si l'Action Serveur renvoie une valeur, cette valeur sera sérialisée puis renvoyée au client.
Plutôt que de marquer chaque fonction concernée avec `'use server'`, vous pouvez ajouter cette directive tout en haut d'un fichier afin d'en marquer tous les exports comme des Actions Serveur utilisables n'importe où, y compris au travers d'imports par du code client.
#### Limitations {/*caveats*/}
+=======
+When calling a Server Function on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the Server Function returns a value, that value will be serialized and returned to the client.
+
+Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as Server Functions that can be used anywhere, including imported in client code.
+
+#### Caveats {/*caveats*/}
+* `'use server'` must be at the very beginning of their function or module; above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks.
+* `'use server'` can only be used in server-side files. The resulting Server Functions can be passed to Client Components through props. See supported [types for serialization](#serializable-parameters-and-return-values).
+* To import a Server Functions from [client code](/reference/rsc/use-client), the directive must be used on a module level.
+* Because the underlying network calls are always asynchronous, `'use server'` can only be used on async functions.
+* Always treat arguments to Server Functions as untrusted input and authorize any mutations. See [security considerations](#security).
+* Server Functions should be called in a [Transition](/reference/react/useTransition). Server Functions passed to [`<form action>`](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition.
+* Server Functions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Functions typically process one action at a time and do not have a way to cache the return value.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* `'use server'` doit être placé au tout début de la fonction ou du module concerné ; au-dessus notamment de tout code, y compris les imports (mais il peut y avoir des commentaires avant les directives). La directive doit utiliser des apostrophes (`'`) ou guillemets (`"`), mais pas des *backticks* (<code>`</code>).
* `'use server'` ne peut être utilisé qu'au sein de fichiers côté serveur. Les Actions Serveur résultantes peuvent être passées à des Composants Client au moyen des props. Consultez la liste des [types sérialisables](#serializable-parameters-and-return-values).
@@ -48,6 +75,7 @@ Plutôt que de marquer chaque fonction concernée avec `'use server'`, vous pouv
* Les Actions Serveur devraient toujours être appelées au sein d'une [Transition](/reference/react/useTransition). Les Actions Serveur passées à [`<form action>`](/reference/react-dom/components/form#props) ou [`formAction`](/reference/react-dom/components/input#props) seront automatiquement enrobées par une transition.
* Les Actions Serveur sont conçues pour des mutations qui mettent à jour l'état côté serveur ; il est déconseillé de s'en servir pour du simple chargement de données. Dans cet esprit, les frameworks qui implémentent les Actions Serveur traitent généralement une action à la fois et ne permettent pas la mise en cache de leur valeur renvoyée.
+<<<<<<< HEAD
### Considérations sécuritaires {/*security*/}
Les arguments passés aux Actions Serveur sont entièrement contrôlés par le côté client. Pour des raisons de sécurité, traitez-les toujours comme des données non validées, et assurez-vous d'en vérifier la structure et le contenu, et de procéder à leur échappement lorsque c'est nécessaire.
@@ -57,6 +85,15 @@ Par ailleurs, et quelle que soit l'Action Serveur, assurez-vous toujours que l'u
<Wip>
Pour éviter le renvoi de données sensibles par une Action Serveur, nous proposons des API expérimentales empêchant l'envoi vers du code côté client de valeurs et objets uniques « ternis ».
+=======
+Arguments to Server Functions are fully client-controlled. For security, always treat them as untrusted input, and make sure to validate and escape arguments as appropriate.
+
+In any Server Function, make sure to validate that the logged-in user is allowed to perform that action.
+
+<Wip>
+
+To prevent sending sensitive data from a Server Function, there are experimental taint APIs to prevent unique values and objects from being passed to client code.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
Allez jeter un coup d'œil à [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueValue) et [experimental_taintObjectReference](/reference/react/experimental_taintObjectReference).
@@ -64,6 +101,7 @@ Allez jeter un coup d'œil à [experimental_taintUniqueValue](/reference/react/e
### Arguments et valeurs renvoyées sérialisables {/*serializable-parameters-and-return-values*/}
+<<<<<<< HEAD
Lorsque du code côté client appelle l'Action Serveur au travers du réseau, tout argument passé aura besoin d'être sérialisé.
Voici les types pris en charge pour les arguments d'une Action Serveur :
@@ -89,6 +127,39 @@ Voici les types pris en charge pour les arguments d'une Action Serveur :
* Les [promesses](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
En particulier, les types suivants ne sont **pas** pris en charge :
+=======
+Since client code calls the Server Function over the network, any arguments passed will need to be serializable.
+
+Here are supported types for Server Function arguments:
+
+* Primitives
+ * [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
+ * [number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
+ * [bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+ * [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
+ * [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
+ * [null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
+ * [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), only symbols registered in the global Symbol registry via [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for)
+* Iterables containing serializable values
+ * [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
+ * [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+ * [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+ * [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+ * [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+* [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
+* [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instances
+* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties
+* Functions that are Server Functions
+* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+Notably, these are not supported:
+* React elements, or [JSX](/learn/writing-markup-with-jsx)
+* Functions, including component functions or any other function that is not a Server Function
+* [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
+* Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects)
+* Symbols not registered globally, ex. `Symbol('my new symbol')`
+* Events from event handlers
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
* Les éléments React, ainsi que [JSX](/learn/writing-markup-with-jsx)
* Les fonctions, y compris les fonctions composants, et de façon plus générale toute fonction qui ne serait pas une Action Serveur
@@ -102,9 +173,17 @@ Les valeurs renvoyées sérialisables sont les mêmes que pour les [props séria
### Les Actions Serveur dans les formulaires {/*server-actions-in-forms*/}
+<<<<<<< HEAD
Le cas le plus courant d'Actions Serveur consiste à appeler des fonctions côté serveur pour modifier des données. Dans le navigateur, on utilise traditionnellement [l'élément HTML `form`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form) pour permettre à l'utilisateur de demander une mutation de données. Avec les React Server Components, React prend désormais pleinement en charge les Actions Serveur dans les [formulaires](/reference/react-dom/components/form).
Voici un formulaire qui permet à l'utilisateur de réserver un identifiant.
+=======
+### Server Functions in forms {/*server-functions-in-forms*/}
+
+The most common use case of Server Functions will be calling functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for Server Functions as Actions in [forms](/reference/react-dom/components/form).
+
+Here is a form that allows a user to request a username.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js [[1, 3, "formData"]]
// App.js
@@ -125,15 +204,25 @@ export default function App() {
}
```
+<<<<<<< HEAD
Dans cet exemple, `requestUsername` est une Action Serveur passée à un `<form>`. Lorsque l'utilisateur envoie le formulaire, une requête réseau est faite à l'Action Serveur `requestUsername`. Puisque celle-ci est appelée au travers d'un formulaire, React fournit les <CodeStep step={1}>[FormData](https://developer.mozilla.org/fr/docs/Web/API/FormData)</CodeStep> du formulaire comme premier argument à l'Action Serveur.
Grâce au passage d'une Action Serveur comme `action` du formulaire, React peut faire [l'amélioration progressive](https://developer.mozilla.org/fr/docs/Glossary/Progressive_Enhancement) du formulaire. Ça signifie que les formulaires peuvent être envoyés avant même que le *bundle* JavaScript ne soit chargé et exécuté.
+=======
+In this example `requestUsername` is a Server Function passed to a `<form>`. When a user submits this form, there is a network request to the server function `requestUsername`. When calling a Server Function in a form, React will supply the form's <CodeStep step={1}>[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData)</CodeStep> as the first argument to the Server Function.
+
+By passing a Server Function to the form `action`, React can [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) the form. This means that forms can be submitted before the JavaScript bundle is loaded.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
#### Gérer les valeurs renvoyées dans les formulaires {/*handling-return-values*/}
Pour revenir à notre formulaire de réservation d'identifiant, il peut arriver que l'identifiant ne soit plus disponible. `requestUsername` devrait nous indiquer si elle a réussi ou non sa réservation.
+<<<<<<< HEAD
Pour mettre à jour l'UI sur base du résultat d'une Action Serveur, tout en proposant une amélioration progressive, utilisez [`useActionState`](/reference/react/useActionState).
+=======
+To update the UI based on the result of a Server Function while supporting progressive enhancement, use [`useActionState`](/reference/react/useActionState).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js
// requestUsername.js
@@ -173,11 +262,19 @@ function UsernameForm() {
Remarquez que `useActionState`, au même titre que la plupart des Hooks, ne peut être appelé que depuis du <CodeStep step={1}>[code côté client](/reference/rsc/use-client)</CodeStep>.
+<<<<<<< HEAD
### Appeler une Action Serveur hors d'un `<form>` {/*calling-a-server-action-outside-of-form*/}
Les Actions Serveur exposent en pratique des points d'entrée côté serveur, et peuvent être appelées n'importe où dans du code client.
Pour utiliser une Action Serveur hors d'un [formulaire](/reference/react-dom/components/form), appelez l'Action Serveur au sein d'une [Transition](/reference/react/useTransition), ce qui vous permettra non seulement d'afficher un indicateur de chargement, mais aussi de réaliser des [mises à jour optimistes d'état](/reference/react/useOptimistic) et de gérer les éventuelles erreurs. Les formulaires enrobent automatiquement vos Actions Serveur dans une transition.
+=======
+### Calling a Server Function outside of `<form>` {/*calling-a-server-function-outside-of-form*/}
+
+Server Functions are exposed server endpoints and can be called anywhere in client code.
+
+When using a Server Function outside a [form](/reference/react-dom/components/form), call the Server Function in a [Transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap Server Functions in transitions.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
```js {9-12}
import incrementLike from './actions';
@@ -214,4 +311,8 @@ export default async function incrementLike() {
}
```
+<<<<<<< HEAD
Pour obtenir la valeur renvoyée par une Action Serveur, vous aurez besoin d'un `await` sur la promesse renvoyée.
+=======
+To read a Server Function return value, you'll need to `await` the promise returned.
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
diff --git a/src/content/versions.md b/src/content/versions.md
index e023499f5..a0b3197e6 100644
--- a/src/content/versions.md
+++ b/src/content/versions.md
@@ -10,13 +10,18 @@ La documentation React sur [fr.react.dev](https://fr.react.dev) décrit la derni
Nous cherchons à tenir la documentation à jour au niveau des versions majeures, et ne publions pas des versions de la documentation pour chaque version mineure voire corrective. Lorsqu'une nouvelle version majeure est publiée, nous archivons la documentation de la version précédente sur `x.react.dev`. Consultez notre [politique de versions](/community/versioning-policy) pour en apprendre davantage.
+<<<<<<< HEAD
Vous trouverez ci-dessous une archive de nos précédentes versions majeures.
*(NdT : pour le moment, les traductions ne semblent pas être inclues dans cet effort d'archivage.)*
## Versions à venir {/*future-versions*/}
+=======
+You can find an archive of previous major versions below.
+## Latest version: 19.1 {/*latest-version*/}
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
-- [19.react.dev](https://19.react.dev) {/*docs-19*/}
+- [react.dev](https://react.dev) {/*docs-19*/}
## Versions précédentes {/*previous-versions*/}
@@ -37,6 +42,26 @@ Pour les versions antérieures à React 15, allez voir [15.react.dev](https://15
## Changelog {/*changelog*/}
+### React 19 {/*react-19*/}
+
+**Blog Posts**
+- [React v19](/blog/2024/12/05/react-19)
+- [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide)
+- [React Compiler Beta Release](/blog/2024/10/21/react-compiler-beta-release)
+
+**Talks**
+- [React 19 Keynote](https://www.youtube.com/watch?v=lyEKhv8-3n0)
+- [A Roadmap to React 19](https://www.youtube.com/watch?v=R0B2HsSM78s)
+- [What's new in React 19](https://www.youtube.com/watch?v=AJOGzVygGcY)
+- [React for Two Computers](https://www.youtube.com/watch?v=ozI4V_29fj4)
+- [React Compiler Deep Dive](https://www.youtube.com/watch?v=uA_PVyZP7AI)
+- [React Compiler Case Studies](https://www.youtube.com/watch?v=lvhPq5chokM)
+- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=IBBN-s77YSI)
+
+**Releases**
+- [v19.1.0 (March, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1910-march-28-2025)
+- [v19.0.0 (December, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024)
+
### React 18 {/*react-18*/}
**Billets de blog**
diff --git a/src/content/warnings/react-test-renderer.md b/src/content/warnings/react-test-renderer.md
index 5a4c0561a..aa9304530 100644
--- a/src/content/warnings/react-test-renderer.md
+++ b/src/content/warnings/react-test-renderer.md
@@ -10,4 +10,10 @@ L'équipe React vous conseille de migrer vos tests vers [@testing-library/react]
## Nouvel avertissements sur ShallowRenderer() {/*new-shallowrenderer-warning*/}
+<<<<<<< HEAD
Le module react-test-renderer n'exporte plus de moteur de rendu superficiel *via* `react-test-renderer/shallow`. Il s'agissait d'un simple enrobage d'un module précédemment extrait : `react-shallow-renderer`. Vous pouvez donc continuer à utiliser le moteur de rendu superficiel en l'installant directement. Consultez [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer).
+=======
+## new ShallowRenderer() warning {/*new-shallowrenderer-warning*/}
+
+The react-test-renderer package no longer exports a shallow renderer at `react-test-renderer/shallow`. This was simply a repackaging of a previously extracted separate package: `react-shallow-renderer`. Therefore you can continue using the shallow renderer in the same way by installing it directly. See [Github](https://github.com/enzymejs/react-shallow-renderer) / [NPM](https://www.npmjs.com/package/react-shallow-renderer).
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
diff --git a/src/pages/[[...markdownPath]].js b/src/pages/[[...markdownPath]].js
index 63fcfcc81..bef4508df 100644
--- a/src/pages/[[...markdownPath]].js
+++ b/src/pages/[[...markdownPath]].js
@@ -71,31 +71,27 @@ function useActiveSection() {
}
// Deserialize a client React tree from JSON.
-function reviveNodeOnClient(key, val) {
+function reviveNodeOnClient(parentPropertyName, val) {
if (Array.isArray(val) && val[0] == '$r') {
// Assume it's a React element.
- let type = val[1];
+ let Type = val[1];
let key = val[2];
+ if (key == null) {
+ key = parentPropertyName; // Index within a parent.
+ }
let props = val[3];
- if (type === 'wrapper') {
- type = Fragment;
+ if (Type === 'wrapper') {
+ Type = Fragment;
props = {children: props.children};
}
- if (MDXComponents[type]) {
- type = MDXComponents[type];
+ if (Type in MDXComponents) {
+ Type = MDXComponents[Type];
}
- if (!type) {
- console.error('Unknown type: ' + type);
- type = Fragment;
+ if (!Type) {
+ console.error('Unknown type: ' + Type);
+ Type = Fragment;
}
- return {
- $$typeof: Symbol.for('react.element'),
- type: type,
- key: key,
- ref: null,
- props: props,
- _owner: null,
- };
+ return <Type key={key} {...props} />;
} else {
return val;
}
diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx
index 1b27108a1..d07b71b8c 100644
--- a/src/pages/errors/[errorCode].tsx
+++ b/src/pages/errors/[errorCode].tsx
@@ -36,7 +36,7 @@ export default function ErrorDecoderPage({
}}
routeTree={sidebarLearn as RouteItem}
section="unknown">
- <div className="whitespace-pre-line">{parsedContent}</div>
+ <div>{parsedContent}</div>
{/* <MaxWidth>
<P>
We highly recommend using the development build locally when debugging
@@ -53,31 +53,33 @@ export default function ErrorDecoderPage({
}
// Deserialize a client React tree from JSON.
-function reviveNodeOnClient(key: unknown, val: any) {
+function reviveNodeOnClient(parentPropertyName: unknown, val: any) {
if (Array.isArray(val) && val[0] == '$r') {
// Assume it's a React element.
- let type = val[1];
+ let Type = val[1];
let key = val[2];
+ if (key == null) {
+ key = parentPropertyName; // Index within a parent.
+ }
let props = val[3];
- if (type === 'wrapper') {
- type = Fragment;
+ if (Type === 'wrapper') {
+ Type = Fragment;
props = {children: props.children};
}
- if (type in MDXComponents) {
- type = MDXComponents[type as keyof typeof MDXComponents];
+ if (Type in MDXComponents) {
+ Type = MDXComponents[Type as keyof typeof MDXComponents];
}
+<<<<<<< HEAD
if (!type) {
console.error('Type inconnu : ' + type);
type = Fragment;
+=======
+ if (!Type) {
+ console.error('Unknown type: ' + Type);
+ Type = Fragment;
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
}
- return {
- $$typeof: Symbol.for('react.element'),
- type: type,
- key: key,
- ref: null,
- props: props,
- _owner: null,
- };
+ return <Type key={key} {...props} />;
} else {
return val;
}
diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json
index f76643594..315d3f84f 100644
--- a/src/sidebarBlog.json
+++ b/src/sidebarBlog.json
@@ -12,8 +12,41 @@
"skipBreadcrumb": true,
"routes": [
{
+<<<<<<< HEAD
"title": "React Compiler : beta et feuille de route",
"titleForHomepage": "React Compiler : beta et feuille de route",
+=======
+ "title": "React Labs: View Transitions, Activity, and more",
+ "titleForHomepage": "View Transitions and Activity",
+ "icon": "blog",
+ "date": "April 23, 2025",
+ "path": "/blog/2025/04/23/react-labs-view-transitions-activity-and-more"
+ },
+ {
+ "title": "React Compiler RC",
+ "titleForHomepage": "React Compiler RC",
+ "icon": "blog",
+ "date": "April 21, 2025",
+ "path": "/blog/2025/04/21/react-compiler-rc"
+ },
+ {
+ "title": "Sunsetting Create React App",
+ "titleForHomepage": "Sunsetting Create React App",
+ "icon": "blog",
+ "date": "February 14, 2025",
+ "path": "/blog/2025/02/14/sunsetting-create-react-app"
+ },
+ {
+ "title": "React 19",
+ "titleForHomepage": "React 19",
+ "icon": "blog",
+ "date": "December 05, 2024",
+ "path": "/blog/2024/12/05/react-19"
+ },
+ {
+ "title": "React Compiler Beta Release and Roadmap",
+ "titleForHomepage": "React Compiler Beta Release and Roadmap",
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
"icon": "blog",
"date": "21 octobre 2024",
"path": "/blog/2024/10/21/react-compiler-beta-release"
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index ccef4ecf4..ee907f941 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -25,13 +25,28 @@
"path": "/learn/installation",
"routes": [
{
+<<<<<<< HEAD
"title": "Créer un nouveau projet React",
"path": "/learn/start-a-new-react-project"
+=======
+ "title": "Creating a React App",
+ "path": "/learn/creating-a-react-app"
+ },
+ {
+ "title": "Build a React App from Scratch",
+ "path": "/learn/build-a-react-app-from-scratch"
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
},
{
"title": "Ajouter React à un projet existant",
"path": "/learn/add-react-to-an-existing-project"
- },
+ }
+ ]
+ },
+ {
+ "title": "Setup",
+ "path": "/learn/setup",
+ "routes": [
{
"title": "Configuration de l’éditeur",
"path": "/learn/editor-setup"
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index a401c73c0..63bf59987 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -16,8 +16,7 @@
"routes": [
{
"title": "useActionState",
- "path": "/reference/react/useActionState",
- "canary": true
+ "path": "/reference/react/useActionState"
},
{
"title": "useCallback",
@@ -61,8 +60,7 @@
},
{
"title": "useOptimistic",
- "path": "/reference/react/useOptimistic",
- "canary": true
+ "path": "/reference/react/useOptimistic"
},
{
"title": "useReducer",
@@ -105,6 +103,16 @@
{
"title": "<Suspense>",
"path": "/reference/react/Suspense"
+ },
+ {
+ "title": "<Activity>",
+ "path": "/reference/react/Activity",
+ "version": "experimental"
+ },
+ {
+ "title": "<ViewTransition>",
+ "path": "/reference/react/ViewTransition",
+ "version": "experimental"
}
]
},
@@ -118,17 +126,15 @@
},
{
"title": "cache",
- "path": "/reference/react/cache",
- "canary": true
+ "path": "/reference/react/cache"
+ }, {
+ "title": "captureOwnerStack",
+ "path": "/reference/react/captureOwnerStack"
},
{
"title": "createContext",
"path": "/reference/react/createContext"
},
- {
- "title": "forwardRef",
- "path": "/reference/react/forwardRef"
- },
{
"title": "lazy",
"path": "/reference/react/lazy"
@@ -143,18 +149,22 @@
},
{
"title": "use",
- "path": "/reference/react/use",
- "canary": true
+ "path": "/reference/react/use"
},
{
"title": "experimental_taintObjectReference",
"path": "/reference/react/experimental_taintObjectReference",
- "canary": true
+ "version": "experimental"
},
{
"title": "experimental_taintUniqueValue",
"path": "/reference/react/experimental_taintUniqueValue",
- "canary": true
+ "version": "experimental"
+ },
+ {
+ "title": "unstable_addTransitionType",
+ "path": "/reference/react/addTransitionType",
+ "version": "experimental"
}
]
},
@@ -168,8 +178,7 @@
"routes": [
{
"title": "useFormStatus",
- "path": "/reference/react-dom/hooks/useFormStatus",
- "canary": true
+ "path": "/reference/react-dom/hooks/useFormStatus"
}
]
},
@@ -183,8 +192,7 @@
},
{
"title": "<form>",
- "path": "/reference/react-dom/components/form",
- "canary": true
+ "path": "/reference/react-dom/components/form"
},
{
"title": "<input>",
@@ -208,28 +216,23 @@
},
{
"title": "<link>",
- "path": "/reference/react-dom/components/link",
- "canary": true
+ "path": "/reference/react-dom/components/link"
},
{
"title": "<meta>",
- "path": "/reference/react-dom/components/meta",
- "canary": true
+ "path": "/reference/react-dom/components/meta"
},
{
"title": "<script>",
- "path": "/reference/react-dom/components/script",
- "canary": true
+ "path": "/reference/react-dom/components/script"
},
{
"title": "<style>",
- "path": "/reference/react-dom/components/style",
- "canary": true
+ "path": "/reference/react-dom/components/style"
},
{
"title": "<title>",
- "path": "/reference/react-dom/components/title",
- "canary": true
+ "path": "/reference/react-dom/components/title"
}
]
},
@@ -245,51 +248,29 @@
"title": "flushSync",
"path": "/reference/react-dom/flushSync"
},
- {
- "title": "findDOMNode",
- "path": "/reference/react-dom/findDOMNode"
- },
- {
- "title": "hydrate",
- "path": "/reference/react-dom/hydrate"
- },
{
"title": "preconnect",
- "path": "/reference/react-dom/preconnect",
- "canary": true
+ "path": "/reference/react-dom/preconnect"
},
{
"title": "prefetchDNS",
- "path": "/reference/react-dom/prefetchDNS",
- "canary": true
+ "path": "/reference/react-dom/prefetchDNS"
},
{
"title": "preinit",
- "path": "/reference/react-dom/preinit",
- "canary": true
+ "path": "/reference/react-dom/preinit"
},
{
"title": "preinitModule",
- "path": "/reference/react-dom/preinitModule",
- "canary": true
+ "path": "/reference/react-dom/preinitModule"
},
{
"title": "preload",
- "path": "/reference/react-dom/preload",
- "canary": true
+ "path": "/reference/react-dom/preload"
},
{
"title": "preloadModule",
- "path": "/reference/react-dom/preloadModule",
- "canary": true
- },
- {
- "title": "render",
- "path": "/reference/react-dom/render"
- },
- {
- "title": "unmountComponentAtNode",
- "path": "/reference/react-dom/unmountComponentAtNode"
+ "path": "/reference/react-dom/preloadModule"
}
]
},
@@ -311,10 +292,6 @@
"title": "Fonctions côté serveur",
"path": "/reference/react-dom/server",
"routes": [
- {
- "title": "renderToNodeStream",
- "path": "/reference/react-dom/server/renderToNodeStream"
- },
{
"title": "renderToPipeableStream",
"path": "/reference/react-dom/server/renderToPipeableStream"
@@ -327,16 +304,26 @@
"title": "renderToStaticMarkup",
"path": "/reference/react-dom/server/renderToStaticMarkup"
},
- {
- "title": "renderToStaticNodeStream",
- "path": "/reference/react-dom/server/renderToStaticNodeStream"
- },
{
"title": "renderToString",
"path": "/reference/react-dom/server/renderToString"
}
]
},
+ {
+ "title": "Static APIs",
+ "path": "/reference/react-dom/static",
+ "routes": [
+ {
+ "title": "prerender",
+ "path": "/reference/react-dom/static/prerender"
+ },
+ {
+ "title": "prerenderToNodeStream",
+ "path": "/reference/react-dom/static/prerenderToNodeStream"
+ }
+ ]
+ },
{
"hasSectionHeader": true,
"sectionHeader": "Les règles de React"
@@ -364,6 +351,7 @@
"sectionHeader": "React Server Components"
},
{
+<<<<<<< HEAD
"title": "Composants Serveur",
"path": "/reference/rsc/server-components",
"canary": true
@@ -372,21 +360,26 @@
"title": "Actions Serveur",
"path": "/reference/rsc/server-actions",
"canary": true
+=======
+ "title": "Server Components",
+ "path": "/reference/rsc/server-components"
+ },
+ {
+ "title": "Server Functions",
+ "path": "/reference/rsc/server-functions"
+>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
},
{
"title": "Directives",
"path": "/reference/rsc/directives",
- "canary": true,
"routes": [
{
"title": "'use client'",
- "path": "/reference/rsc/use-client",
- "canary": true
+ "path": "/reference/rsc/use-client"
},
{
"title": "'use server'",
- "path": "/reference/rsc/use-server",
- "canary": true
+ "path": "/reference/rsc/use-server"
}
]
},
@@ -414,14 +407,14 @@
"title": "createElement",
"path": "/reference/react/createElement"
},
- {
- "title": "createFactory",
- "path": "/reference/react/createFactory"
- },
{
"title": "createRef",
"path": "/reference/react/createRef"
},
+ {
+ "title": "forwardRef",
+ "path": "/reference/react/forwardRef"
+ },
{
"title": "isValidElement",
"path": "/reference/react/isValidElement"
diff --git a/src/siteConfig.js b/src/siteConfig.js
index e4f1ba047..14e4d592b 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -1,9 +1,8 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
-
exports.siteConfig = {
- version: '18.3.1',
+ version: '19.1',
// --------------------------------------
// Translations should replace these lines:
languageCode: 'fr',
diff --git a/src/styles/index.css b/src/styles/index.css
index 281111092..6b2915be4 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -12,7 +12,17 @@
font-style: normal;
font-weight: 400;
font-display: swap;
- src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
+ src: url('https://react.dev/fonts/Source-Code-Pro-Regular.woff2')
+ format('woff2');
+ }
+
+ @font-face {
+ font-family: 'Source Code Pro';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url('https://react.dev/fonts/Source-Code-Pro-Bold.woff2')
+ format('woff2');
}
/* Latin */
diff --git a/src/types/docsearch-react-modal.d.ts b/src/types/docsearch-react-modal.d.ts
new file mode 100644
index 000000000..568ffed80
--- /dev/null
+++ b/src/types/docsearch-react-modal.d.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+// This module must be declared and because the dynamic import in
+// "src/components/Search.tsx" is not able to resolve the types from
+// the package.
+declare module '@docsearch/react/modal' {
+ // re-exports the types from @docsearch/react/dist/esm/index.d.ts
+ export * from '@docsearch/react/dist/esm/index';
+}
diff --git a/src/utils/compileMDX.ts b/src/utils/compileMDX.ts
index 4c5ee15b7..be770c29a 100644
--- a/src/utils/compileMDX.ts
+++ b/src/utils/compileMDX.ts
@@ -3,7 +3,7 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 9;
+const DISK_CACHE_BREAKER = 10;
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
export default async function compileMDX(
@@ -144,7 +144,10 @@ export default async function compileMDX(
// Serialize a server React tree node to JSON.
function stringifyNodeOnServer(key: unknown, val: any) {
- if (val != null && val.$$typeof === Symbol.for('react.element')) {
+ if (
+ val != null &&
+ val.$$typeof === Symbol.for('react.transitional.element')
+ ) {
// Remove fake MDX props.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {mdxType, originalType, parentName, ...cleanProps} = val.props;
diff --git a/src/utils/forwardRefWithAs.tsx b/src/utils/forwardRefWithAs.tsx
index a0e73370d..8f8282ab1 100644
--- a/src/utils/forwardRefWithAs.tsx
+++ b/src/utils/forwardRefWithAs.tsx
@@ -9,6 +9,7 @@
*/
import * as React from 'react';
+import {ValidationMap} from 'prop-types';
/**
* React.Ref uses the readonly type `React.RefObject` instead of
@@ -69,10 +70,8 @@ export interface ComponentWithAs<ComponentType extends As, ComponentProps> {
): React.ReactElement | null;
displayName?: string;
- propTypes?: React.WeakValidationMap<
- PropsWithAs<ComponentType, ComponentProps>
- >;
- contextTypes?: React.ValidationMap<any>;
+ propTypes?: ValidationMap<React.ReactNode>;
+ contextTypes?: ValidationMap<React.ReactNode>;
defaultProps?: Partial<PropsWithAs<ComponentType, ComponentProps>>;
}
diff --git a/tsconfig.json b/tsconfig.json
index 440b38510..9d72e01bc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,12 +22,18 @@
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": "src",
- "incremental": true
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
},
"include": [
"next-env.d.ts",
"src/**/*.ts",
- "src/**/*.tsx"
+ "src/**/*.tsx",
+ ".next/types/**/*.ts"
],
"exclude": [
"node_modules"
diff --git a/vercel.json b/vercel.json
index de805bbc8..1dc421b85 100644
--- a/vercel.json
+++ b/vercel.json
@@ -81,7 +81,7 @@
},
{
"source": "/link/strict-mode-find-node",
- "destination": "/reference/react-dom/findDOMNode#alternatives",
+ "destination": "https://18.react.dev/reference/react-dom/findDOMNode#alternatives",
"permanent": false
},
{
@@ -164,6 +164,11 @@
"destination": "https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",
"permanent": false
},
+ {
+ "source": "/link/cra",
+ "destination": "/blog/2025/02/14/sunsetting-create-react-app",
+ "permanent": false
+ },
{
"source": "/warnings/version-mismatch",
"destination": "/warnings/invalid-hook-call-warning#mismatching-versions-of-react-and-react-dom",
@@ -184,6 +189,61 @@
"destination": "/reference/rsc/use-server",
"permanent": true
},
+ {
+ "source": "/reference/rsc/server-actions",
+ "destination": "/reference/rsc/server-functions",
+ "permanent": true
+ },
+ {
+ "source": "/reference/react-dom/findDOMNode",
+ "destination": "https://18.react.dev/reference/react-dom/findDOMNode",
+ "permanent": true
+ },
+ {
+ "source": "/reference/react/createFactory",
+ "destination": "https://18.react.dev/reference/react/createFactory",
+ "permanent": true
+ },
+ {
+ "source": "/reference/react-dom/render",
+ "destination": "https://18.react.dev/reference/react-dom/render",
+ "permanent": true
+ },
+ {
+ "source": "/reference/react-dom/hydrate",
+ "destination": "https://18.react.dev/reference/react-dom/hydrate",
+ "permanent": true
+ },
+ {
+ "source": "/reference/react-dom/unmountComponentAtNode",
+ "destination": "https://18.react.dev/reference/react-dom/unmountComponentAtNode",
+ "permanent": true
+ },
+ {
+ "source": "/reference/react-dom/server/renderToStaticNodeStream",
+ "destination": "https://18.react.dev/reference/react-dom/server/renderToStaticNodeStream",
+ "permanent": true
+ },
+ {
+ "source": "/reference/react-dom/server/renderToNodeStream",
+ "destination": "https://18.react.dev/reference/react-dom/server/renderToNodeStream",
+ "permanent": true
+ },
+ {
+ "source": "/learn/start-a-new-react-project",
+ "destination": "/learn/creating-a-react-app",
+ "permanent": true
+ },
+ {
+ "source": "/learn/building-a-react-framework",
+ "destination": "/learn/build-a-react-app-from-scratch",
+ "permanent": true
+ },
+ {
+ "source": "/blog/2024/04/25/react-19",
+ "destination": "/blog/2024/12/05/react-19",
+ "permanent": true
+ },
{
"source": "/feed.xml",
"destination": "/rss.xml",
diff --git a/yarn.lock b/yarn.lock
index 99a633361..a118cbeda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,153 +2,148 @@
# yarn lockfile v1
-"@algolia/autocomplete-core@1.9.3":
- version "1.9.3"
- resolved "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz"
- integrity sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==
+"@algolia/autocomplete-core@1.17.9":
+ version "1.17.9"
+ resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.17.9.tgz#83374c47dc72482aa45d6b953e89377047f0dcdc"
+ integrity sha512-O7BxrpLDPJWWHv/DLA9DRFWs+iY1uOJZkqUwjS5HSZAGcl0hIVCQ97LTLewiZmZ402JYUrun+8NqFP+hCknlbQ==
+ dependencies:
+ "@algolia/autocomplete-plugin-algolia-insights" "1.17.9"
+ "@algolia/autocomplete-shared" "1.17.9"
+
+"@algolia/autocomplete-plugin-algolia-insights@1.17.9":
+ version "1.17.9"
+ resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.9.tgz#74c86024d09d09e8bfa3dd90b844b77d9f9947b6"
+ integrity sha512-u1fEHkCbWF92DBeB/KHeMacsjsoI0wFhjZtlCq2ddZbAehshbZST6Hs0Avkc0s+4UyBGbMDnSuXHLuvRWK5iDQ==
+ dependencies:
+ "@algolia/autocomplete-shared" "1.17.9"
+
+"@algolia/autocomplete-preset-algolia@1.17.9":
+ version "1.17.9"
+ resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.9.tgz#911f3250544eb8ea4096fcfb268f156b085321b5"
+ integrity sha512-Na1OuceSJeg8j7ZWn5ssMu/Ax3amtOwk76u4h5J4eK2Nx2KB5qt0Z4cOapCsxot9VcEN11ADV5aUSlQF4RhGjQ==
+ dependencies:
+ "@algolia/autocomplete-shared" "1.17.9"
+
+"@algolia/autocomplete-shared@1.17.9":
+ version "1.17.9"
+ resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.9.tgz#5f38868f7cb1d54b014b17a10fc4f7e79d427fa8"
+ integrity sha512-iDf05JDQ7I0b7JEA/9IektxN/80a2MZ1ToohfmNS3rfeuQnIKI3IJlIafD0xu4StbtQTghx9T3Maa97ytkXenQ==
+
+"@algolia/client-abtesting@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/client-abtesting/-/client-abtesting-5.20.0.tgz#984472e4ae911285a8e3be2b81c121108f87a179"
+ integrity sha512-YaEoNc1Xf2Yk6oCfXXkZ4+dIPLulCx8Ivqj0OsdkHWnsI3aOJChY5qsfyHhDBNSOhqn2ilgHWxSfyZrjxBcAww==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
+
+"@algolia/client-analytics@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-5.20.0.tgz#25944c8c7bcc06a16ae3b26ddf86d0d18f984349"
+ integrity sha512-CIT9ni0+5sYwqehw+t5cesjho3ugKQjPVy/iPiJvtJX4g8Cdb6je6SPt2uX72cf2ISiXCAX9U3cY0nN0efnRDw==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
+
+"@algolia/client-common@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-5.20.0.tgz#0b6b96c779d30afada68cf36f20f0c280e3f1273"
+ integrity sha512-iSTFT3IU8KNpbAHcBUJw2HUrPnMXeXLyGajmCL7gIzWOsYM4GabZDHXOFx93WGiXMti1dymz8k8R+bfHv1YZmA==
+
+"@algolia/client-insights@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/client-insights/-/client-insights-5.20.0.tgz#37b59043a86423dd283d05909faea06e4eff026b"
+ integrity sha512-w9RIojD45z1csvW1vZmAko82fqE/Dm+Ovsy2ElTsjFDB0HMAiLh2FO86hMHbEXDPz6GhHKgGNmBRiRP8dDPgJg==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
+
+"@algolia/client-personalization@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-5.20.0.tgz#d10da6d798f9a5f6cf239c57b9a850deb29e5683"
+ integrity sha512-p/hftHhrbiHaEcxubYOzqVV4gUqYWLpTwK+nl2xN3eTrSW9SNuFlAvUBFqPXSVBqc6J5XL9dNKn3y8OA1KElSQ==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
+
+"@algolia/client-query-suggestions@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/client-query-suggestions/-/client-query-suggestions-5.20.0.tgz#1d4f1d638f857fad202cee7feecd3ffc270d9c60"
+ integrity sha512-m4aAuis5vZi7P4gTfiEs6YPrk/9hNTESj3gEmGFgfJw3hO2ubdS4jSId1URd6dGdt0ax2QuapXufcrN58hPUcw==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
+
+"@algolia/client-search@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-5.20.0.tgz#4b847bda4bef2eee8ba72ef3ce59be612319e8d0"
+ integrity sha512-KL1zWTzrlN4MSiaK1ea560iCA/UewMbS4ZsLQRPoDTWyrbDKVbztkPwwv764LAqgXk0fvkNZvJ3IelcK7DqhjQ==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
+
+"@algolia/ingestion@1.20.0":
+ version "1.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/ingestion/-/ingestion-1.20.0.tgz#b91849fe4a8efed21c048a0a69ad77934d2fc3fd"
+ integrity sha512-shj2lTdzl9un4XJblrgqg54DoK6JeKFO8K8qInMu4XhE2JuB8De6PUuXAQwiRigZupbI0xq8aM0LKdc9+qiLQA==
dependencies:
- "@algolia/autocomplete-plugin-algolia-insights" "1.9.3"
- "@algolia/autocomplete-shared" "1.9.3"
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
-"@algolia/autocomplete-plugin-algolia-insights@1.9.3":
- version "1.9.3"
- resolved "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz"
- integrity sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==
+"@algolia/monitoring@1.20.0":
+ version "1.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/monitoring/-/monitoring-1.20.0.tgz#5b3a7964b08a91b1c71466bf5adb8a1597e3134b"
+ integrity sha512-aF9blPwOhKtWvkjyyXh9P5peqmhCA1XxLBRgItT+K6pbT0q4hBDQrCid+pQZJYy4HFUKjB/NDDwyzFhj/rwKhw==
dependencies:
- "@algolia/autocomplete-shared" "1.9.3"
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
-"@algolia/autocomplete-preset-algolia@1.9.3":
- version "1.9.3"
- resolved "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz"
- integrity sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==
+"@algolia/recommend@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/recommend/-/recommend-5.20.0.tgz#49f8f8d31f815b107c8ebd1c35220d90b22fd876"
+ integrity sha512-T6B/WPdZR3b89/F9Vvk6QCbt/wrLAtrGoL8z4qPXDFApQ8MuTFWbleN/4rHn6APWO3ps+BUePIEbue2rY5MlRw==
dependencies:
- "@algolia/autocomplete-shared" "1.9.3"
+ "@algolia/client-common" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
-"@algolia/autocomplete-shared@1.9.3":
- version "1.9.3"
- resolved "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz"
- integrity sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==
-
-"@algolia/cache-browser-local-storage@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.24.0.tgz"
- integrity sha512-t63W9BnoXVrGy9iYHBgObNXqYXM3tYXCjDSHeNwnsc324r4o5UiVKUiAB4THQ5z9U5hTj6qUvwg/Ez43ZD85ww==
- dependencies:
- "@algolia/cache-common" "4.24.0"
-
-"@algolia/cache-common@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.24.0.tgz"
- integrity sha512-emi+v+DmVLpMGhp0V9q9h5CdkURsNmFC+cOS6uK9ndeJm9J4TiqSvPYVu+THUP8P/S08rxf5x2P+p3CfID0Y4g==
-
-"@algolia/cache-in-memory@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.24.0.tgz"
- integrity sha512-gDrt2so19jW26jY3/MkFg5mEypFIPbPoXsQGQWAi6TrCPsNOSEYepBMPlucqWigsmEy/prp5ug2jy/N3PVG/8w==
- dependencies:
- "@algolia/cache-common" "4.24.0"
-
-"@algolia/client-account@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.24.0.tgz"
- integrity sha512-adcvyJ3KjPZFDybxlqnf+5KgxJtBjwTPTeyG2aOyoJvx0Y8dUQAEOEVOJ/GBxX0WWNbmaSrhDURMhc+QeevDsA==
- dependencies:
- "@algolia/client-common" "4.24.0"
- "@algolia/client-search" "4.24.0"
- "@algolia/transporter" "4.24.0"
-
-"@algolia/client-analytics@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.24.0.tgz"
- integrity sha512-y8jOZt1OjwWU4N2qr8G4AxXAzaa8DBvyHTWlHzX/7Me1LX8OayfgHexqrsL4vSBcoMmVw2XnVW9MhL+Y2ZDJXg==
- dependencies:
- "@algolia/client-common" "4.24.0"
- "@algolia/client-search" "4.24.0"
- "@algolia/requester-common" "4.24.0"
- "@algolia/transporter" "4.24.0"
-
-"@algolia/client-common@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz"
- integrity sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==
- dependencies:
- "@algolia/requester-common" "4.24.0"
- "@algolia/transporter" "4.24.0"
-
-"@algolia/client-personalization@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.24.0.tgz"
- integrity sha512-l5FRFm/yngztweU0HdUzz1rC4yoWCFo3IF+dVIVTfEPg906eZg5BOd1k0K6rZx5JzyyoP4LdmOikfkfGsKVE9w==
- dependencies:
- "@algolia/client-common" "4.24.0"
- "@algolia/requester-common" "4.24.0"
- "@algolia/transporter" "4.24.0"
-
-"@algolia/client-search@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz"
- integrity sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==
- dependencies:
- "@algolia/client-common" "4.24.0"
- "@algolia/requester-common" "4.24.0"
- "@algolia/transporter" "4.24.0"
-
-"@algolia/logger-common@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.24.0.tgz"
- integrity sha512-LLUNjkahj9KtKYrQhFKCzMx0BY3RnNP4FEtO+sBybCjJ73E8jNdaKJ/Dd8A/VA4imVHP5tADZ8pn5B8Ga/wTMA==
-
-"@algolia/logger-console@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.24.0.tgz"
- integrity sha512-X4C8IoHgHfiUROfoRCV+lzSy+LHMgkoEEU1BbKcsfnV0i0S20zyy0NLww9dwVHUWNfPPxdMU+/wKmLGYf96yTg==
- dependencies:
- "@algolia/logger-common" "4.24.0"
-
-"@algolia/recommend@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.24.0.tgz"
- integrity sha512-P9kcgerfVBpfYHDfVZDvvdJv0lEoCvzNlOy2nykyt5bK8TyieYyiD0lguIJdRZZYGre03WIAFf14pgE+V+IBlw==
- dependencies:
- "@algolia/cache-browser-local-storage" "4.24.0"
- "@algolia/cache-common" "4.24.0"
- "@algolia/cache-in-memory" "4.24.0"
- "@algolia/client-common" "4.24.0"
- "@algolia/client-search" "4.24.0"
- "@algolia/logger-common" "4.24.0"
- "@algolia/logger-console" "4.24.0"
- "@algolia/requester-browser-xhr" "4.24.0"
- "@algolia/requester-common" "4.24.0"
- "@algolia/requester-node-http" "4.24.0"
- "@algolia/transporter" "4.24.0"
-
-"@algolia/requester-browser-xhr@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.24.0.tgz"
- integrity sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA==
- dependencies:
- "@algolia/requester-common" "4.24.0"
-
-"@algolia/requester-common@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.24.0.tgz"
- integrity sha512-k3CXJ2OVnvgE3HMwcojpvY6d9kgKMPRxs/kVohrwF5WMr2fnqojnycZkxPoEg+bXm8fi5BBfFmOqgYztRtHsQA==
-
-"@algolia/requester-node-http@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.24.0.tgz"
- integrity sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw==
- dependencies:
- "@algolia/requester-common" "4.24.0"
-
-"@algolia/transporter@4.24.0":
- version "4.24.0"
- resolved "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.24.0.tgz"
- integrity sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==
- dependencies:
- "@algolia/cache-common" "4.24.0"
- "@algolia/logger-common" "4.24.0"
- "@algolia/requester-common" "4.24.0"
+"@algolia/requester-browser-xhr@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.20.0.tgz#998fd5c1123fbc49b664c484c6b0cd7cefc6a1fa"
+ integrity sha512-t6//lXsq8E85JMenHrI6mhViipUT5riNhEfCcvtRsTV+KIBpC6Od18eK864dmBhoc5MubM0f+sGpKOqJIlBSCg==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
+
+"@algolia/requester-fetch@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/requester-fetch/-/requester-fetch-5.20.0.tgz#fed4f135f22c246ce40cf23c9d6518884be43e5e"
+ integrity sha512-FHxYGqRY+6bgjKsK4aUsTAg6xMs2S21elPe4Y50GB0Y041ihvw41Vlwy2QS6K9ldoftX4JvXodbKTcmuQxywdQ==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
+
+"@algolia/requester-node-http@5.20.0":
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-5.20.0.tgz#920a9488be07c0521951da92f36be61f47c4d0e0"
+ integrity sha512-kmtQClq/w3vtPteDSPvaW9SPZL/xrIgMrxZyAgsFwrJk0vJxqyC5/hwHmrCraDnStnGSADnLpBf4SpZnwnkwWw==
+ dependencies:
+ "@algolia/client-common" "5.20.0"
"@alloc/quick-lru@^5.2.0":
version "5.2.0"
@@ -163,6 +158,14 @@
"@jridgewell/gen-mapping" "^0.1.0"
"@jridgewell/trace-mapping" "^0.3.9"
+"@ampproject/remapping@^2.2.0":
+ version "2.3.0"
+ resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+ integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
+ dependencies:
+ "@jridgewell/gen-mapping" "^0.3.5"
+ "@jridgewell/trace-mapping" "^0.3.24"
+
"@babel/code-frame@7.12.11":
version "7.12.11"
resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz"
@@ -184,11 +187,25 @@
dependencies:
"@babel/highlight" "^7.18.6"
+"@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2":
+ version "7.26.2"
+ resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+ integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+ dependencies:
+ "@babel/helper-validator-identifier" "^7.25.9"
+ js-tokens "^4.0.0"
+ picocolors "^1.0.0"
+
"@babel/compat-data@^7.19.0":
version "7.19.0"
resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.0.tgz"
integrity sha512-y5rqgTTPTmaF5e2nVhOxw+Ur9HDJLsWb6U/KpgUzRZEdPfE6VOubXBKLdbcUTijzRptednSBDQbYZBOSqJxpJw==
+"@babel/compat-data@^7.26.5":
+ version "7.26.5"
+ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.5.tgz#df93ac37f4417854130e21d72c66ff3d4b897fc7"
+ integrity sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==
+
"@babel/core@^7.12.9":
version "7.19.0"
resolved "https://registry.npmjs.org/@babel/core/-/core-7.19.0.tgz"
@@ -210,6 +227,27 @@
json5 "^2.2.1"
semver "^6.3.0"
+"@babel/core@^7.24.4":
+ version "7.26.0"
+ resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
+ integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
+ dependencies:
+ "@ampproject/remapping" "^2.2.0"
+ "@babel/code-frame" "^7.26.0"
+ "@babel/generator" "^7.26.0"
+ "@babel/helper-compilation-targets" "^7.25.9"
+ "@babel/helper-module-transforms" "^7.26.0"
+ "@babel/helpers" "^7.26.0"
+ "@babel/parser" "^7.26.0"
+ "@babel/template" "^7.25.9"
+ "@babel/traverse" "^7.25.9"
+ "@babel/types" "^7.26.0"
+ convert-source-map "^2.0.0"
+ debug "^4.1.0"
+ gensync "^1.0.0-beta.2"
+ json5 "^2.2.3"
+ semver "^6.3.1"
+
"@babel/generator@^7.16.8":
version "7.16.8"
resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz"
@@ -228,6 +266,17 @@
"@jridgewell/gen-mapping" "^0.3.2"
jsesc "^2.5.1"
+"@babel/generator@^7.26.0", "@babel/generator@^7.26.5":
+ version "7.26.5"
+ resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.5.tgz#e44d4ab3176bbcaf78a5725da5f1dc28802a9458"
+ integrity sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==
+ dependencies:
+ "@babel/parser" "^7.26.5"
+ "@babel/types" "^7.26.5"
+ "@jridgewell/gen-mapping" "^0.3.5"
+ "@jridgewell/trace-mapping" "^0.3.25"
+ jsesc "^3.0.2"
+
"@babel/helper-annotate-as-pure@^7.18.6":
version "7.18.6"
resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz"
@@ -235,6 +284,13 @@
dependencies:
"@babel/types" "^7.18.6"
+"@babel/helper-annotate-as-pure@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+ integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
+ dependencies:
+ "@babel/types" "^7.25.9"
+
"@babel/helper-compilation-targets@^7.19.0":
version "7.19.0"
resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.0.tgz"
@@ -245,6 +301,30 @@
browserslist "^4.20.2"
semver "^6.3.0"
+"@babel/helper-compilation-targets@^7.25.9":
+ version "7.26.5"
+ resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8"
+ integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==
+ dependencies:
+ "@babel/compat-data" "^7.26.5"
+ "@babel/helper-validator-option" "^7.25.9"
+ browserslist "^4.24.0"
+ lru-cache "^5.1.1"
+ semver "^6.3.1"
+
+"@babel/helper-create-class-features-plugin@^7.18.6":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83"
+ integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.25.9"
+ "@babel/helper-member-expression-to-functions" "^7.25.9"
+ "@babel/helper-optimise-call-expression" "^7.25.9"
+ "@babel/helper-replace-supers" "^7.25.9"
+ "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+ "@babel/traverse" "^7.25.9"
+ semver "^6.3.1"
+
"@babel/helper-environment-visitor@^7.16.7":
version "7.16.7"
resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz"
@@ -295,6 +375,14 @@
dependencies:
"@babel/types" "^7.18.6"
+"@babel/helper-member-expression-to-functions@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+ integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
+ dependencies:
+ "@babel/traverse" "^7.25.9"
+ "@babel/types" "^7.25.9"
+
"@babel/helper-module-imports@^7.18.6":
version "7.18.6"
resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz"
@@ -302,6 +390,14 @@
dependencies:
"@babel/types" "^7.18.6"
+"@babel/helper-module-imports@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+ integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+ dependencies:
+ "@babel/traverse" "^7.25.9"
+ "@babel/types" "^7.25.9"
+
"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.0":
version "7.19.0"
resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz"
@@ -316,11 +412,36 @@
"@babel/traverse" "^7.19.0"
"@babel/types" "^7.19.0"
+"@babel/helper-module-transforms@^7.26.0":
+ version "7.26.0"
+ resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+ integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+ dependencies:
+ "@babel/helper-module-imports" "^7.25.9"
+ "@babel/helper-validator-identifier" "^7.25.9"
+ "@babel/traverse" "^7.25.9"
+
+"@babel/helper-optimise-call-expression@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+ integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
+ dependencies:
+ "@babel/types" "^7.25.9"
+
"@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0":
version "7.19.0"
resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz"
integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
+"@babel/helper-replace-supers@^7.25.9":
+ version "7.26.5"
+ resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d"
+ integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
+ dependencies:
+ "@babel/helper-member-expression-to-functions" "^7.25.9"
+ "@babel/helper-optimise-call-expression" "^7.25.9"
+ "@babel/traverse" "^7.26.5"
+
"@babel/helper-simple-access@^7.18.6":
version "7.18.6"
resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz"
@@ -328,6 +449,14 @@
dependencies:
"@babel/types" "^7.18.6"
+"@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+ integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
+ dependencies:
+ "@babel/traverse" "^7.25.9"
+ "@babel/types" "^7.25.9"
+
"@babel/helper-split-export-declaration@^7.16.7":
version "7.16.7"
resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz"
@@ -347,6 +476,11 @@
resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz"
integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
+"@babel/helper-string-parser@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+ integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
"@babel/helper-validator-identifier@^7.16.7":
version "7.16.7"
resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz"
@@ -357,11 +491,21 @@
resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz"
integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+"@babel/helper-validator-identifier@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+ integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
"@babel/helper-validator-option@^7.18.6":
version "7.18.6"
resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz"
integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+"@babel/helper-validator-option@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+ integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
"@babel/helpers@^7.19.0":
version "7.19.0"
resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz"
@@ -371,6 +515,14 @@
"@babel/traverse" "^7.19.0"
"@babel/types" "^7.19.0"
+"@babel/helpers@^7.26.0":
+ version "7.26.0"
+ resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
+ integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
+ dependencies:
+ "@babel/template" "^7.25.9"
+ "@babel/types" "^7.26.0"
+
"@babel/highlight@^7.10.4", "@babel/highlight@^7.16.7":
version "7.16.10"
resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz"
@@ -399,6 +551,21 @@
resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz"
integrity sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==
+"@babel/parser@^7.24.4", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.5":
+ version "7.26.5"
+ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.5.tgz#6fec9aebddef25ca57a935c86dbb915ae2da3e1f"
+ integrity sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==
+ dependencies:
+ "@babel/types" "^7.26.5"
+
+"@babel/plugin-proposal-private-methods@^7.18.6":
+ version "7.18.6"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+ integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
+ dependencies:
+ "@babel/helper-create-class-features-plugin" "^7.18.6"
+ "@babel/helper-plugin-utils" "^7.18.6"
+
"@babel/plugin-syntax-jsx@^7.18.6":
version "7.18.6"
resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
@@ -501,6 +668,15 @@
"@babel/parser" "^7.18.10"
"@babel/types" "^7.18.10"
+"@babel/template@^7.25.9":
+ version "7.25.9"
+ resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+ integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+ dependencies:
+ "@babel/code-frame" "^7.25.9"
+ "@babel/parser" "^7.25.9"
+ "@babel/types" "^7.25.9"
+
"@babel/traverse@^7.19.0":
version "7.19.0"
resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.0.tgz"
@@ -517,6 +693,19 @@
debug "^4.1.0"
globals "^11.1.0"
+"@babel/traverse@^7.25.9", "@babel/traverse@^7.26.5":
+ version "7.26.5"
+ resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.5.tgz#6d0be3e772ff786456c1a37538208286f6e79021"
+ integrity sha512-rkOSPOw+AXbgtwUga3U4u8RpoK9FEFWBNAlTpcnkLFjL5CT+oyHNuUUC/xx6XefEJ16r38r8Bc/lfp6rYuHeJQ==
+ dependencies:
+ "@babel/code-frame" "^7.26.2"
+ "@babel/generator" "^7.26.5"
+ "@babel/parser" "^7.26.5"
+ "@babel/template" "^7.25.9"
+ "@babel/types" "^7.26.5"
+ debug "^4.3.1"
+ globals "^11.1.0"
+
"@babel/traverse@^7.7.0":
version "7.16.10"
resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz"
@@ -550,6 +739,14 @@
"@babel/helper-validator-identifier" "^7.18.6"
to-fast-properties "^2.0.0"
+"@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.5":
+ version "7.26.5"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.5.tgz#7a1e1c01d28e26d1fe7f8ec9567b3b92b9d07747"
+ integrity sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==
+ dependencies:
+ "@babel/helper-string-parser" "^7.25.9"
+ "@babel/helper-validator-identifier" "^7.25.9"
+
"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.4.0":
version "6.4.2"
resolved "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.2.tgz"
@@ -652,19 +849,20 @@
strict-event-emitter "^0.4.3"
"@codesandbox/sandpack-client@^2.13.2":
- version "2.13.2"
- resolved "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.13.2.tgz"
- integrity sha512-uAuxQOF7p8y4m7H0ojedDcWRf62xVK7UIYIJoX5LkhcV0SW1BTXcRkVNuR0/MSCSv+Og1dBeV8+Xpye9PX0quA==
+ version "2.19.8"
+ resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.19.8.tgz#45f936179aa8e012f11285ddd830911e6260a0f7"
+ integrity sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==
dependencies:
"@codesandbox/nodebox" "0.1.8"
buffer "^6.0.3"
dequal "^2.0.2"
+ mime-db "^1.52.0"
outvariant "1.4.0"
static-browser-server "1.0.3"
"@codesandbox/sandpack-react@2.13.5":
version "2.13.5"
- resolved "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-2.13.5.tgz"
+ resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.5.tgz#bc4b3fe43b74fdb011f69d3d9a117415110c709e"
integrity sha512-MWzh2P/Asck0JSCKY3y7WecdUBBEqB0NFi4p+ohoZMTYqHWTaYfd7nbPlNmGIE1xcGppSZEqPVDjOpAfeQ0zFw==
dependencies:
"@codemirror/autocomplete" "^6.4.0"
@@ -692,20 +890,27 @@
resolved "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz"
integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
-"@docsearch/css@3.6.1", "@docsearch/css@^3.6.1":
- version "3.6.1"
- resolved "https://registry.npmjs.org/@docsearch/css/-/css-3.6.1.tgz"
- integrity sha512-VtVb5DS+0hRIprU2CO6ZQjK2Zg4QU5HrDM1+ix6rT0umsYvFvatMAnf97NHZlVWDaaLlx7GRfR/7FikANiM2Fg==
+"@docsearch/css@3.8.3", "@docsearch/css@^3.8.3":
+ version "3.8.3"
+ resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.8.3.tgz#12f377cf8c14b687042273f920efdfdb794e9fcf"
+ integrity sha512-1nELpMV40JDLJ6rpVVFX48R1jsBFIQ6RnEQDsLFGmzOjPWTOMlZqUcXcvRx8VmYV/TqnS1l784Ofz+ZEb+wEOQ==
-"@docsearch/react@^3.6.1":
- version "3.6.1"
- resolved "https://registry.npmjs.org/@docsearch/react/-/react-3.6.1.tgz"
- integrity sha512-qXZkEPvybVhSXj0K7U3bXc233tk5e8PfhoZ6MhPOiik/qUQxYC+Dn9DnoS7CxHQQhHfCvTiN0eY9M12oRghEXw==
+"@docsearch/react@^3.8.3":
+ version "3.8.3"
+ resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.8.3.tgz#72f6bcbbda6cd07f23398af641e483c27d16e00a"
+ integrity sha512-6UNrg88K7lJWmuS6zFPL/xgL+n326qXqZ7Ybyy4E8P/6Rcblk3GE8RXxeol4Pd5pFpKMhOhBhzABKKwHtbJCIg==
dependencies:
- "@algolia/autocomplete-core" "1.9.3"
- "@algolia/autocomplete-preset-algolia" "1.9.3"
- "@docsearch/css" "3.6.1"
- algoliasearch "^4.19.1"
+ "@algolia/autocomplete-core" "1.17.9"
+ "@algolia/autocomplete-preset-algolia" "1.17.9"
+ "@docsearch/css" "3.8.3"
+ algoliasearch "^5.14.2"
+
+"@emnapi/runtime@^1.2.0":
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"
+ integrity sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==
+ dependencies:
+ tslib "^2.4.0"
"@eslint/eslintrc@^0.4.3":
version "0.4.3"
@@ -768,6 +973,119 @@
resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@img/sharp-darwin-arm64@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz#ef5b5a07862805f1e8145a377c8ba6e98813ca08"
+ integrity sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==
+ optionalDependencies:
+ "@img/sharp-libvips-darwin-arm64" "1.0.4"
+
+"@img/sharp-darwin-x64@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz#e03d3451cd9e664faa72948cc70a403ea4063d61"
+ integrity sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==
+ optionalDependencies:
+ "@img/sharp-libvips-darwin-x64" "1.0.4"
+
+"@img/sharp-libvips-darwin-arm64@1.0.4":
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz#447c5026700c01a993c7804eb8af5f6e9868c07f"
+ integrity sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==
+
+"@img/sharp-libvips-darwin-x64@1.0.4":
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz#e0456f8f7c623f9dbfbdc77383caa72281d86062"
+ integrity sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==
+
+"@img/sharp-libvips-linux-arm64@1.0.4":
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz#979b1c66c9a91f7ff2893556ef267f90ebe51704"
+ integrity sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==
+
+"@img/sharp-libvips-linux-arm@1.0.5":
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz#99f922d4e15216ec205dcb6891b721bfd2884197"
+ integrity sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==
+
+"@img/sharp-libvips-linux-s390x@1.0.4":
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz#f8a5eb1f374a082f72b3f45e2fb25b8118a8a5ce"
+ integrity sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==
+
+"@img/sharp-libvips-linux-x64@1.0.4":
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz#d4c4619cdd157774906e15770ee119931c7ef5e0"
+ integrity sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.0.4":
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz#166778da0f48dd2bded1fa3033cee6b588f0d5d5"
+ integrity sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==
+
+"@img/sharp-libvips-linuxmusl-x64@1.0.4":
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz#93794e4d7720b077fcad3e02982f2f1c246751ff"
+ integrity sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==
+
+"@img/sharp-linux-arm64@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz#edb0697e7a8279c9fc829a60fc35644c4839bb22"
+ integrity sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==
+ optionalDependencies:
+ "@img/sharp-libvips-linux-arm64" "1.0.4"
+
+"@img/sharp-linux-arm@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz#422c1a352e7b5832842577dc51602bcd5b6f5eff"
+ integrity sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==
+ optionalDependencies:
+ "@img/sharp-libvips-linux-arm" "1.0.5"
+
+"@img/sharp-linux-s390x@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz#f5c077926b48e97e4a04d004dfaf175972059667"
+ integrity sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==
+ optionalDependencies:
+ "@img/sharp-libvips-linux-s390x" "1.0.4"
+
+"@img/sharp-linux-x64@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz#d806e0afd71ae6775cc87f0da8f2d03a7c2209cb"
+ integrity sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==
+ optionalDependencies:
+ "@img/sharp-libvips-linux-x64" "1.0.4"
+
+"@img/sharp-linuxmusl-arm64@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz#252975b915894fb315af5deea174651e208d3d6b"
+ integrity sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==
+ optionalDependencies:
+ "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+
+"@img/sharp-linuxmusl-x64@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz#3f4609ac5d8ef8ec7dadee80b560961a60fd4f48"
+ integrity sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==
+ optionalDependencies:
+ "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+
+"@img/sharp-wasm32@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz#6f44f3283069d935bb5ca5813153572f3e6f61a1"
+ integrity sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==
+ dependencies:
+ "@emnapi/runtime" "^1.2.0"
+
+"@img/sharp-win32-ia32@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz#1a0c839a40c5351e9885628c85f2e5dfd02b52a9"
+ integrity sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==
+
+"@img/sharp-win32-x64@0.33.5":
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz#56f00962ff0c4e0eb93d34a047d29fa995e3e342"
+ integrity sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==
+
"@jridgewell/gen-mapping@^0.1.0":
version "0.1.1"
resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz"
@@ -785,21 +1103,53 @@
"@jridgewell/sourcemap-codec" "^1.4.10"
"@jridgewell/trace-mapping" "^0.3.9"
+"@jridgewell/gen-mapping@^0.3.5":
+ version "0.3.8"
+ resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
+ integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+ dependencies:
+ "@jridgewell/set-array" "^1.2.1"
+ "@jridgewell/sourcemap-codec" "^1.4.10"
+ "@jridgewell/trace-mapping" "^0.3.24"
+
"@jridgewell/resolve-uri@^3.0.3":
version "3.1.0"
resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz"
integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+"@jridgewell/resolve-uri@^3.1.0":
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+ integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
version "1.1.2"
resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+"@jridgewell/set-array@^1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+ integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
"@jridgewell/sourcemap-codec@^1.4.10":
version "1.4.14"
resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+"@jridgewell/sourcemap-codec@^1.4.14":
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+ integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+ version "0.3.25"
+ resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+ integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+ dependencies:
+ "@jridgewell/resolve-uri" "^3.1.0"
+ "@jridgewell/sourcemap-codec" "^1.4.14"
+
"@jridgewell/trace-mapping@^0.3.9":
version "0.3.15"
resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz"
@@ -875,10 +1225,10 @@
unist-util-visit "^4.0.0"
vfile "^5.0.0"
-"@next/env@13.4.1":
- version "13.4.1"
- resolved "https://registry.npmjs.org/@next/env/-/env-13.4.1.tgz"
- integrity sha512-eD6WCBMFjLFooLM19SIhSkWBHtaFrZFfg2Cxnyl3vS3DAdFRfnx5TY2RxlkuKXdIRCC0ySbtK9JXXt8qLCqzZg==
+"@next/env@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/env/-/env-15.1.0.tgz#35b00a5f60ff10dc275182928c325d25c29379ae"
+ integrity sha512-UcCO481cROsqJuszPPXJnb7GGuLq617ve4xuAyyNG4VSSocJNtMU5Fsx+Lp6mlN8c7W58aZLc5y6D/2xNmaK+w==
"@next/eslint-plugin-next@12.0.3":
version "12.0.3"
@@ -887,50 +1237,45 @@
dependencies:
glob "7.1.7"
-"@next/swc-darwin-arm64@13.4.1":
- version "13.4.1"
- resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.1.tgz"
- integrity sha512-eF8ARHtYfnoYtDa6xFHriUKA/Mfj/cCbmKb3NofeKhMccs65G6/loZ15a6wYCCx4rPAd6x4t1WmVYtri7EdeBg==
-
-"@next/swc-darwin-x64@13.4.1":
- version "13.4.1"
- resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.1.tgz#c59fc270005f17e04eb7eab4fd68793d0e3409a4"
- integrity sha512-7cmDgF9tGWTgn5Gw+vP17miJbH4wcraMHDCOHTYWkO/VeKT73dUWG23TNRLfgtCNSPgH4V5B4uLHoZTanx9bAw==
-
-"@next/swc-linux-arm64-gnu@13.4.1":
- version "13.4.1"
- resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.1.tgz#1aef371bcef5d832d7f7e3aec3e68cfb98282393"
- integrity sha512-qwJqmCri2ie8aTtE5gjTSr8S6O8B67KCYgVZhv9gKH44yvc/zXbAY8u23QGULsYOyh1islWE5sWfQNLOj9iryg==
-
-"@next/swc-linux-arm64-musl@13.4.1":
- version "13.4.1"
- resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.1.tgz#2522927cb0af6918405a49f5a1d1687d6847f3ec"
- integrity sha512-qcC54tWNGDv/VVIFkazxhqH1Bnagjfs4enzELVRlUOoJPD2BGJTPI7z08pQPbbgxLtRiu8gl2mXvpB8WlOkMeA==
-
-"@next/swc-linux-x64-gnu@13.4.1":
- version "13.4.1"
- resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.1.tgz#5ec9418a35510048a5ceb79ed300463e1a9b312d"
- integrity sha512-9TeWFlpLsBosZ+tsm/rWBaMwt5It9tPH8m3nawZqFUUrZyGRfGcI67js774vtx0k3rL9qbyY6+3pw9BCVpaYUA==
-
-"@next/swc-linux-x64-musl@13.4.1":
- version "13.4.1"
- resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.1.tgz#3478b9c89b75c1d0e7def9f35a9a77cb15d1a115"
- integrity sha512-sNDGaWmSqTS4QRUzw61wl4mVPeSqNIr1OOjLlQTRuyInxMxtqImRqdvzDvFTlDfdeUMU/DZhWGYoHrXLlZXe6A==
-
-"@next/swc-win32-arm64-msvc@13.4.1":
- version "13.4.1"
- resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.1.tgz#efe53d48ff51d2485eabb910ab7caee78425fc01"
- integrity sha512-+CXZC7u1iXdLRudecoUYbhbsXpglYv8KFYsFxKBPn7kg+bk7eJo738wAA4jXIl8grTF2mPdmO93JOQym+BlYGA==
-
-"@next/swc-win32-ia32-msvc@13.4.1":
- version "13.4.1"
- resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.1.tgz#952cdf1c53df46a90d5151d99310195d2c384e55"
- integrity sha512-vIoXVVc7UYO68VwVMDKwJC2+HqAZQtCYiVlApyKEeIPIQpz2gpufzGxk1z3/gwrJt/kJ5CDZjlhYDCzd3hdz+g==
-
-"@next/swc-win32-x64-msvc@13.4.1":
- version "13.4.1"
- resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.1.tgz#447b7dcee5f5d4824cdff331a4ec34b13d0b449d"
- integrity sha512-n8V5ImLQZibKTu10UUdI3nIeTLkliEXe628qxqW9v8My3BAH2a7H0SaCqkV2OgqFnn8sG1wxKYw9/SNJ632kSA==
+"@next/swc-darwin-arm64@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.0.tgz#30cb89220e719244c9fa7391641e515a078ade46"
+ integrity sha512-ZU8d7xxpX14uIaFC3nsr4L++5ZS/AkWDm1PzPO6gD9xWhFkOj2hzSbSIxoncsnlJXB1CbLOfGVN4Zk9tg83PUw==
+
+"@next/swc-darwin-x64@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.0.tgz#c24c4f5d1016dd161da32049305b0ddddfc80951"
+ integrity sha512-DQ3RiUoW2XC9FcSM4ffpfndq1EsLV0fj0/UY33i7eklW5akPUCo6OX2qkcLXZ3jyPdo4sf2flwAED3AAq3Om2Q==
+
+"@next/swc-linux-arm64-gnu@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.0.tgz#08ed540ecdac74426a624cc7d736dc709244b004"
+ integrity sha512-M+vhTovRS2F//LMx9KtxbkWk627l5Q7AqXWWWrfIzNIaUFiz2/NkOFkxCFyNyGACi5YbA8aekzCLtbDyfF/v5Q==
+
+"@next/swc-linux-arm64-musl@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.0.tgz#dfddbd40087d018266aa92515ec5b3e251efa6dd"
+ integrity sha512-Qn6vOuwaTCx3pNwygpSGtdIu0TfS1KiaYLYXLH5zq1scoTXdwYfdZtwvJTpB1WrLgiQE2Ne2kt8MZok3HlFqmg==
+
+"@next/swc-linux-x64-gnu@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.0.tgz#a7b5373a1b28c0acecbc826a3790139fc0d899e5"
+ integrity sha512-yeNh9ofMqzOZ5yTOk+2rwncBzucc6a1lyqtg8xZv0rH5znyjxHOWsoUtSq4cUTeeBIiXXX51QOOe+VoCjdXJRw==
+
+"@next/swc-linux-x64-musl@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.0.tgz#b82a29903ee2f12d8b64163ddf208ac519869550"
+ integrity sha512-t9IfNkHQs/uKgPoyEtU912MG6a1j7Had37cSUyLTKx9MnUpjj+ZDKw9OyqTI9OwIIv0wmkr1pkZy+3T5pxhJPg==
+
+"@next/swc-win32-arm64-msvc@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.0.tgz#98deae6cb1fccfb6a600e9faa6aa714402a9ab9a"
+ integrity sha512-WEAoHyG14t5sTavZa1c6BnOIEukll9iqFRTavqRVPfYmfegOAd5MaZfXgOGG6kGo1RduyGdTHD4+YZQSdsNZXg==
+
+"@next/swc-win32-x64-msvc@15.1.0":
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.0.tgz#4b04a6a667c41fecdc63db57dd71ca7e84d0946b"
+ integrity sha512-J1YdKuJv9xcixzXR24Dv+4SaDKc2jj31IVUEMdO5xJivMTXuE6MAdIi4qPjSymHuFG8O5wbfWKnhJUcHHpj5CA==
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
@@ -1218,21 +1563,26 @@
integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
"@rushstack/eslint-patch@^1.0.6":
- version "1.1.0"
- resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz"
- integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
+ version "1.10.3"
+ resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz#391d528054f758f81e53210f1a1eebcf1a8b1d20"
+ integrity sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==
"@stitches/core@^1.2.6":
version "1.2.8"
resolved "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz"
integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
-"@swc/helpers@0.5.1":
- version "0.5.1"
- resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz"
- integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
+"@swc/counter@0.1.3":
+ version "0.1.3"
+ resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+ integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/helpers@0.5.15":
+ version "0.5.15"
+ resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+ integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
dependencies:
- tslib "^2.4.0"
+ tslib "^2.8.0"
"@types/acorn@^4.0.0":
version "4.0.6"
@@ -1343,12 +1693,10 @@
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
-"@types/react-dom@^18.0.5":
- version "18.0.5"
- resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz"
- integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
- dependencies:
- "@types/react" "*"
+"@types/react-dom@^19.0.0":
+ version "19.0.2"
+ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.2.tgz#ad21f9a1ee881817995fd3f7fd33659c87e7b1b7"
+ integrity sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==
"@types/react@*":
version "17.0.38"
@@ -1359,13 +1707,11 @@
"@types/scheduler" "*"
csstype "^3.0.2"
-"@types/react@^18.0.9":
- version "18.0.9"
- resolved "https://registry.npmjs.org/@types/react/-/react-18.0.9.tgz"
- integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
+"@types/react@^19.0.0":
+ version "19.0.3"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.3.tgz#7867240defc1a3686f151644ac886a7e8e0868f4"
+ integrity sha512-UavfHguIjnnuq9O67uXfgy/h3SRJbidAYvNjLceB+2RIKVRBzVsh0QO+Pw6BCSQqFS9xwzKfwstXx0m6AbAREA==
dependencies:
- "@types/prop-types" "*"
- "@types/scheduler" "*"
csstype "^3.0.2"
"@types/scheduler@*":
@@ -1503,11 +1849,6 @@
"@typescript-eslint/types" "5.36.2"
eslint-visitor-keys "^3.3.0"
-"@yarnpkg/lockfile@^1.1.0":
- version "1.1.0"
- resolved "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz"
- integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
-
absolute-path@^0.0.0:
version "0.0.0"
resolved "https://registry.npmjs.org/absolute-path/-/absolute-path-0.0.0.tgz"
@@ -1574,26 +1915,24 @@ ajv@^8.0.1:
require-from-string "^2.0.2"
uri-js "^4.2.2"
-algoliasearch@^4.19.1:
- version "4.24.0"
- resolved "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.24.0.tgz"
- integrity sha512-bf0QV/9jVejssFBmz2HQLxUadxk574t4iwjCKp5E7NBzwKkrDEhKPISIIjAU/p6K5qDx3qoeh4+26zWN1jmw3g==
- dependencies:
- "@algolia/cache-browser-local-storage" "4.24.0"
- "@algolia/cache-common" "4.24.0"
- "@algolia/cache-in-memory" "4.24.0"
- "@algolia/client-account" "4.24.0"
- "@algolia/client-analytics" "4.24.0"
- "@algolia/client-common" "4.24.0"
- "@algolia/client-personalization" "4.24.0"
- "@algolia/client-search" "4.24.0"
- "@algolia/logger-common" "4.24.0"
- "@algolia/logger-console" "4.24.0"
- "@algolia/recommend" "4.24.0"
- "@algolia/requester-browser-xhr" "4.24.0"
- "@algolia/requester-common" "4.24.0"
- "@algolia/requester-node-http" "4.24.0"
- "@algolia/transporter" "4.24.0"
+algoliasearch@^5.14.2:
+ version "5.20.0"
+ resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-5.20.0.tgz#15f4eb6428f258d083d1cbc47d04a8d66eecba5f"
+ integrity sha512-groO71Fvi5SWpxjI9Ia+chy0QBwT61mg6yxJV27f5YFf+Mw+STT75K6SHySpP8Co5LsCrtsbCH5dJZSRtkSKaQ==
+ dependencies:
+ "@algolia/client-abtesting" "5.20.0"
+ "@algolia/client-analytics" "5.20.0"
+ "@algolia/client-common" "5.20.0"
+ "@algolia/client-insights" "5.20.0"
+ "@algolia/client-personalization" "5.20.0"
+ "@algolia/client-query-suggestions" "5.20.0"
+ "@algolia/client-search" "5.20.0"
+ "@algolia/ingestion" "1.20.0"
+ "@algolia/monitoring" "1.20.0"
+ "@algolia/recommend" "5.20.0"
+ "@algolia/requester-browser-xhr" "5.20.0"
+ "@algolia/requester-fetch" "5.20.0"
+ "@algolia/requester-node-http" "5.20.0"
anser@^2.1.1:
version "2.1.1"
@@ -1681,6 +2020,21 @@ aria-query@^4.2.2:
"@babel/runtime" "^7.10.2"
"@babel/runtime-corejs3" "^7.10.2"
+aria-query@~5.1.3:
+ version "5.1.3"
+ resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
+ integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+ dependencies:
+ deep-equal "^2.0.5"
+
+array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+ integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+ dependencies:
+ call-bind "^1.0.5"
+ is-array-buffer "^3.0.4"
+
array-flatten@1.1.1:
version "1.1.1"
resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
@@ -1697,6 +2051,18 @@ array-includes@^3.1.3, array-includes@^3.1.4:
get-intrinsic "^1.1.1"
is-string "^1.0.7"
+array-includes@^3.1.6, array-includes@^3.1.7, array-includes@^3.1.8:
+ version "3.1.8"
+ resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+ integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.2"
+ es-object-atoms "^1.0.0"
+ get-intrinsic "^1.2.4"
+ is-string "^1.0.7"
+
array-iterate@^1.0.0:
version "1.1.4"
resolved "https://registry.npmjs.org/array-iterate/-/array-iterate-1.1.4.tgz"
@@ -1707,6 +2073,30 @@ array-union@^2.1.0:
resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+array.prototype.findlast@^1.2.5:
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+ integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.2"
+ es-errors "^1.3.0"
+ es-object-atoms "^1.0.0"
+ es-shim-unscopables "^1.0.2"
+
+array.prototype.findlastindex@^1.2.3:
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+ integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.2"
+ es-errors "^1.3.0"
+ es-object-atoms "^1.0.0"
+ es-shim-unscopables "^1.0.2"
+
array.prototype.flat@^1.2.5:
version "1.2.5"
resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz"
@@ -1716,6 +2106,16 @@ array.prototype.flat@^1.2.5:
define-properties "^1.1.3"
es-abstract "^1.19.0"
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+ version "1.3.2"
+ resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+ integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ es-shim-unscopables "^1.0.0"
+
array.prototype.flatmap@^1.2.5:
version "1.2.5"
resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz"
@@ -1725,11 +2125,61 @@ array.prototype.flatmap@^1.2.5:
define-properties "^1.1.3"
es-abstract "^1.19.0"
+array.prototype.flatmap@^1.3.2:
+ version "1.3.2"
+ resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+ integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ es-shim-unscopables "^1.0.0"
+
+array.prototype.toreversed@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz#b989a6bf35c4c5051e1dc0325151bf8088954eba"
+ integrity sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ es-shim-unscopables "^1.0.0"
+
+array.prototype.tosorted@^1.1.4:
+ version "1.1.4"
+ resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
+ integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.3"
+ es-errors "^1.3.0"
+ es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+ integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+ dependencies:
+ array-buffer-byte-length "^1.0.1"
+ call-bind "^1.0.5"
+ define-properties "^1.2.1"
+ es-abstract "^1.22.3"
+ es-errors "^1.2.1"
+ get-intrinsic "^1.2.3"
+ is-array-buffer "^3.0.4"
+ is-shared-array-buffer "^1.0.2"
+
ast-types-flow@^0.0.7:
version "0.0.7"
resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+ast-types-flow@^0.0.8:
+ version "0.0.8"
+ resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+ integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
astral-regex@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
@@ -1775,16 +2225,35 @@ autoprefixer@^9.6.1:
postcss "^7.0.32"
postcss-value-parser "^4.1.0"
+available-typed-arrays@^1.0.7:
+ version "1.0.7"
+ resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+ integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+ dependencies:
+ possible-typed-array-names "^1.0.0"
+
axe-core@^4.3.5:
version "4.3.5"
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz"
integrity sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==
+axe-core@^4.9.1:
+ version "4.9.1"
+ resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.9.1.tgz#fcd0f4496dad09e0c899b44f6c4bb7848da912ae"
+ integrity sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==
+
axobject-query@^2.2.0:
version "2.2.0"
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+axobject-query@~3.1.1:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
+ integrity sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==
+ dependencies:
+ deep-equal "^2.0.5"
+
babel-eslint@10.x:
version "10.1.0"
resolved "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz"
@@ -1804,6 +2273,13 @@ babel-plugin-dynamic-import-node@^2.3.3:
dependencies:
object.assign "^4.1.0"
+babel-plugin-react-compiler@19.0.0-beta-e552027-20250112:
+ version "19.0.0-beta-e552027-20250112"
+ resolved "https://registry.yarnpkg.com/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.0.0-beta-e552027-20250112.tgz#f06f0436420bd09df5abf37337ecd8fb43b0d847"
+ integrity sha512-pUTT0mAZ4XLewC6bvqVeX015nVRLVultcSQlkzGdC10G6YV6K2h4E7cwGlLAuLKWTj3Z08mTO9uTnPP/opUBsg==
+ dependencies:
+ "@babel/types" "^7.19.0"
+
bail@^1.0.0:
version "1.0.5"
resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz"
@@ -1888,6 +2364,16 @@ browserslist@^4.20.2:
node-releases "^2.0.6"
update-browserslist-db "^1.0.5"
+browserslist@^4.24.0:
+ version "4.24.4"
+ resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b"
+ integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
+ dependencies:
+ caniuse-lite "^1.0.30001688"
+ electron-to-chromium "^1.5.73"
+ node-releases "^2.0.19"
+ update-browserslist-db "^1.1.1"
+
buffer@^6.0.3:
version "6.0.3"
resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
@@ -1916,6 +2402,17 @@ call-bind@^1.0.0, call-bind@^1.0.2:
function-bind "^1.1.1"
get-intrinsic "^1.0.2"
+call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+ version "1.0.7"
+ resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+ integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+ dependencies:
+ es-define-property "^1.0.0"
+ es-errors "^1.3.0"
+ function-bind "^1.1.2"
+ get-intrinsic "^1.2.4"
+ set-function-length "^1.2.1"
+
callsites@^3.0.0:
version "3.1.0"
resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
@@ -1926,20 +2423,15 @@ camelcase-css@^2.0.1:
resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
-caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297:
- version "1.0.30001301"
- resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001301.tgz"
- integrity sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==
-
-caniuse-lite@^1.0.30001370:
- version "1.0.30001390"
- resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz"
- integrity sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==
+caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001579:
+ version "1.0.30001636"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz#b15f52d2bdb95fad32c2f53c0b68032b85188a78"
+ integrity sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==
-caniuse-lite@^1.0.30001406:
- version "1.0.30001410"
- resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001410.tgz"
- integrity sha512-QoblBnuE+rG0lc3Ur9ltP5q47lbguipa/ncNMyyGuqPk44FxbScWAeEO+k5fSQ8WekdAK4mWqNs1rADDAiN5xQ==
+caniuse-lite@^1.0.30001688:
+ version "1.0.30001692"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz#4585729d95e6b95be5b439da6ab55250cd125bf9"
+ integrity sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==
ccount@^1.0.0:
version "1.1.0"
@@ -1951,7 +2443,7 @@ ccount@^2.0.0:
resolved "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz"
integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
-chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.4.1:
version "2.4.2"
resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1962,7 +2454,7 @@ chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
chalk@^4.0.0, chalk@^4.1.0:
version "4.1.2"
- resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+ resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
dependencies:
ansi-styles "^4.1.0"
@@ -2023,11 +2515,6 @@ chokidar@^3.4.0, chokidar@^3.5.3:
optionalDependencies:
fsevents "~2.3.2"
-ci-info@^2.0.0:
- version "2.0.0"
- resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz"
- integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
-
ci-info@^3.2.0:
version "3.3.0"
resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz"
@@ -2100,11 +2587,27 @@ color-name@1.1.3:
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+color-string@^1.9.0:
+ version "1.9.1"
+ resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+ integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+ dependencies:
+ color-name "^1.0.0"
+ simple-swizzle "^0.2.2"
+
+color@^4.2.3:
+ version "4.2.3"
+ resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+ integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+ dependencies:
+ color-convert "^2.0.1"
+ color-string "^1.9.0"
+
colorette@^2.0.16:
version "2.0.16"
resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz"
@@ -2169,6 +2672,11 @@ convert-source-map@^1.7.0:
dependencies:
safe-buffer "~5.1.1"
+convert-source-map@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+ integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
cookie-signature@1.0.6:
version "1.0.6"
resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
@@ -2259,11 +2767,38 @@ d@1, d@^1.0.1:
es5-ext "^0.10.50"
type "^1.0.1"
-damerau-levenshtein@^1.0.7:
+damerau-levenshtein@^1.0.7, damerau-levenshtein@^1.0.8:
version "1.0.8"
resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+data-view-buffer@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+ integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+ dependencies:
+ call-bind "^1.0.6"
+ es-errors "^1.3.0"
+ is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+ integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+ dependencies:
+ call-bind "^1.0.7"
+ es-errors "^1.3.0"
+ is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+ integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+ dependencies:
+ call-bind "^1.0.6"
+ es-errors "^1.3.0"
+ is-data-view "^1.0.1"
+
date-fns@^2.16.1:
version "2.28.0"
resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz"
@@ -2295,13 +2830,20 @@ debug@^4.0.0, debug@^4.3.4:
dependencies:
ms "2.1.2"
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.3:
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.3:
version "4.3.3"
resolved "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz"
integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
dependencies:
ms "2.1.2"
+debug@^4.3.1:
+ version "4.3.5"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e"
+ integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
+ dependencies:
+ ms "2.1.2"
+
decode-named-character-reference@^1.0.0:
version "1.0.2"
resolved "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz"
@@ -2309,11 +2851,44 @@ decode-named-character-reference@^1.0.0:
dependencies:
character-entities "^2.0.0"
+deep-equal@^2.0.5:
+ version "2.2.3"
+ resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1"
+ integrity sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==
+ dependencies:
+ array-buffer-byte-length "^1.0.0"
+ call-bind "^1.0.5"
+ es-get-iterator "^1.1.3"
+ get-intrinsic "^1.2.2"
+ is-arguments "^1.1.1"
+ is-array-buffer "^3.0.2"
+ is-date-object "^1.0.5"
+ is-regex "^1.1.4"
+ is-shared-array-buffer "^1.0.2"
+ isarray "^2.0.5"
+ object-is "^1.1.5"
+ object-keys "^1.1.1"
+ object.assign "^4.1.4"
+ regexp.prototype.flags "^1.5.1"
+ side-channel "^1.0.4"
+ which-boxed-primitive "^1.0.2"
+ which-collection "^1.0.1"
+ which-typed-array "^1.1.13"
+
deep-is@^0.1.3:
version "0.1.4"
resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+ version "1.1.4"
+ resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+ integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+ dependencies:
+ es-define-property "^1.0.0"
+ es-errors "^1.3.0"
+ gopd "^1.0.1"
+
define-properties@^1.1.3:
version "1.1.3"
resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz"
@@ -2329,6 +2904,15 @@ define-properties@^1.1.4:
has-property-descriptors "^1.0.0"
object-keys "^1.1.1"
+define-properties@^1.2.0, define-properties@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+ integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+ dependencies:
+ define-data-property "^1.0.1"
+ has-property-descriptors "^1.0.0"
+ object-keys "^1.1.1"
+
depd@2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz"
@@ -2344,6 +2928,11 @@ destroy@1.2.0:
resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz"
integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+detect-libc@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+ integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
detect-node-es@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
@@ -2415,6 +3004,11 @@ electron-to-chromium@^1.4.202:
resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.241.tgz"
integrity sha512-e7Wsh4ilaioBZ5bMm6+F4V5c11dh56/5Jwz7Hl5Tu1J7cnB+Pqx5qIF2iC7HPpfyQMqGSvvLP5bBAIDd2gAtGw==
+electron-to-chromium@^1.5.73:
+ version "1.5.80"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.80.tgz#ca7a8361d7305f0ec9e203ce4e633cbb8a8ef1b1"
+ integrity sha512-LTrKpW0AqIuHwmlVNV+cjFYTnXtM9K37OGhpe0ZI10ScPSxqVSryZHIY3WnCS5NSYbBODRTZyhRMS2h5FAEqAw==
+
emoji-regex@^8.0.0:
version "8.0.0"
resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -2444,6 +3038,58 @@ error-ex@^1.3.1:
dependencies:
is-arrayish "^0.2.1"
+es-abstract@^1.17.5, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2, es-abstract@^1.23.3:
+ version "1.23.3"
+ resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+ integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
+ dependencies:
+ array-buffer-byte-length "^1.0.1"
+ arraybuffer.prototype.slice "^1.0.3"
+ available-typed-arrays "^1.0.7"
+ call-bind "^1.0.7"
+ data-view-buffer "^1.0.1"
+ data-view-byte-length "^1.0.1"
+ data-view-byte-offset "^1.0.0"
+ es-define-property "^1.0.0"
+ es-errors "^1.3.0"
+ es-object-atoms "^1.0.0"
+ es-set-tostringtag "^2.0.3"
+ es-to-primitive "^1.2.1"
+ function.prototype.name "^1.1.6"
+ get-intrinsic "^1.2.4"
+ get-symbol-description "^1.0.2"
+ globalthis "^1.0.3"
+ gopd "^1.0.1"
+ has-property-descriptors "^1.0.2"
+ has-proto "^1.0.3"
+ has-symbols "^1.0.3"
+ hasown "^2.0.2"
+ internal-slot "^1.0.7"
+ is-array-buffer "^3.0.4"
+ is-callable "^1.2.7"
+ is-data-view "^1.0.1"
+ is-negative-zero "^2.0.3"
+ is-regex "^1.1.4"
+ is-shared-array-buffer "^1.0.3"
+ is-string "^1.0.7"
+ is-typed-array "^1.1.13"
+ is-weakref "^1.0.2"
+ object-inspect "^1.13.1"
+ object-keys "^1.1.1"
+ object.assign "^4.1.5"
+ regexp.prototype.flags "^1.5.2"
+ safe-array-concat "^1.1.2"
+ safe-regex-test "^1.0.3"
+ string.prototype.trim "^1.2.9"
+ string.prototype.trimend "^1.0.8"
+ string.prototype.trimstart "^1.0.8"
+ typed-array-buffer "^1.0.2"
+ typed-array-byte-length "^1.0.1"
+ typed-array-byte-offset "^1.0.2"
+ typed-array-length "^1.0.6"
+ unbox-primitive "^1.0.2"
+ which-typed-array "^1.1.15"
+
es-abstract@^1.19.0, es-abstract@^1.19.1:
version "1.19.1"
resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz"
@@ -2470,6 +3116,76 @@ es-abstract@^1.19.0, es-abstract@^1.19.1:
string.prototype.trimstart "^1.0.4"
unbox-primitive "^1.0.1"
+es-define-property@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+ integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+ dependencies:
+ get-intrinsic "^1.2.4"
+
+es-errors@^1.2.1, es-errors@^1.3.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+ integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-get-iterator@^1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
+ integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
+ dependencies:
+ call-bind "^1.0.2"
+ get-intrinsic "^1.1.3"
+ has-symbols "^1.0.3"
+ is-arguments "^1.1.1"
+ is-map "^2.0.2"
+ is-set "^2.0.2"
+ is-string "^1.0.7"
+ isarray "^2.0.5"
+ stop-iteration-iterator "^1.0.0"
+
+es-iterator-helpers@^1.0.19:
+ version "1.0.19"
+ resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz#117003d0e5fec237b4b5c08aded722e0c6d50ca8"
+ integrity sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.3"
+ es-errors "^1.3.0"
+ es-set-tostringtag "^2.0.3"
+ function-bind "^1.1.2"
+ get-intrinsic "^1.2.4"
+ globalthis "^1.0.3"
+ has-property-descriptors "^1.0.2"
+ has-proto "^1.0.3"
+ has-symbols "^1.0.3"
+ internal-slot "^1.0.7"
+ iterator.prototype "^1.1.2"
+ safe-array-concat "^1.1.2"
+
+es-object-atoms@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+ integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+ dependencies:
+ es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+ integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+ dependencies:
+ get-intrinsic "^1.2.4"
+ has-tostringtag "^1.0.2"
+ hasown "^2.0.1"
+
+es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+ integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+ dependencies:
+ hasown "^2.0.0"
+
es-to-primitive@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
@@ -2510,6 +3226,11 @@ escalade@^3.1.1:
resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+escalade@^3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+ integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
escape-carriage@^1.3.1:
version "1.3.1"
resolved "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz"
@@ -2557,7 +3278,16 @@ eslint-config-react-app@^5.2.1:
dependencies:
confusing-browser-globals "^1.0.9"
-eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
+eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.9:
+ version "0.3.9"
+ resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+ integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+ dependencies:
+ debug "^3.2.7"
+ is-core-module "^2.13.0"
+ resolve "^1.22.4"
+
+eslint-import-resolver-node@^0.3.6:
version "0.3.6"
resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz"
integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
@@ -2566,15 +3296,15 @@ eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
resolve "^1.20.0"
eslint-import-resolver-typescript@^2.4.0:
- version "2.5.0"
- resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.5.0.tgz"
- integrity sha512-qZ6e5CFr+I7K4VVhQu3M/9xGv9/YmwsEXrsm3nimw8vWaVHRDrQRp26BgCypTxBp3vUp4o5aVEJRiy0F2DFddQ==
+ version "2.7.1"
+ resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
+ integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
dependencies:
- debug "^4.3.1"
- glob "^7.1.7"
- is-glob "^4.0.1"
- resolve "^1.20.0"
- tsconfig-paths "^3.9.0"
+ debug "^4.3.4"
+ glob "^7.2.0"
+ is-glob "^4.0.3"
+ resolve "^1.22.0"
+ tsconfig-paths "^3.14.1"
eslint-module-utils@^2.7.2:
version "2.7.2"
@@ -2584,6 +3314,13 @@ eslint-module-utils@^2.7.2:
debug "^3.2.7"
find-up "^2.1.0"
+eslint-module-utils@^2.8.0:
+ version "2.8.1"
+ resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
+ integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
+ dependencies:
+ debug "^3.2.7"
+
eslint-plugin-flowtype@4.x:
version "4.7.0"
resolved "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-4.7.0.tgz"
@@ -2591,7 +3328,7 @@ eslint-plugin-flowtype@4.x:
dependencies:
lodash "^4.17.15"
-eslint-plugin-import@2.x, eslint-plugin-import@^2.22.1:
+eslint-plugin-import@2.x:
version "2.25.4"
resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz"
integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
@@ -2610,7 +3347,30 @@ eslint-plugin-import@2.x, eslint-plugin-import@^2.22.1:
resolve "^1.20.0"
tsconfig-paths "^3.12.0"
-eslint-plugin-jsx-a11y@6.x, eslint-plugin-jsx-a11y@^6.4.1:
+eslint-plugin-import@^2.22.1:
+ version "2.29.1"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
+ integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+ dependencies:
+ array-includes "^3.1.7"
+ array.prototype.findlastindex "^1.2.3"
+ array.prototype.flat "^1.3.2"
+ array.prototype.flatmap "^1.3.2"
+ debug "^3.2.7"
+ doctrine "^2.1.0"
+ eslint-import-resolver-node "^0.3.9"
+ eslint-module-utils "^2.8.0"
+ hasown "^2.0.0"
+ is-core-module "^2.13.1"
+ is-glob "^4.0.3"
+ minimatch "^3.1.2"
+ object.fromentries "^2.0.7"
+ object.groupby "^1.0.1"
+ object.values "^1.1.7"
+ semver "^6.3.1"
+ tsconfig-paths "^3.15.0"
+
+eslint-plugin-jsx-a11y@6.x:
version "6.5.1"
resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz"
integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==
@@ -2628,17 +3388,51 @@ eslint-plugin-jsx-a11y@6.x, eslint-plugin-jsx-a11y@^6.4.1:
language-tags "^1.0.5"
minimatch "^3.0.4"
+eslint-plugin-jsx-a11y@^6.4.1:
+ version "6.9.0"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.9.0.tgz#67ab8ff460d4d3d6a0b4a570e9c1670a0a8245c8"
+ integrity sha512-nOFOCaJG2pYqORjK19lqPqxMO/JpvdCZdPtNdxY3kvom3jTvkAbOvQvD8wuD0G8BYR0IGAGYDlzqWJOh/ybn2g==
+ dependencies:
+ aria-query "~5.1.3"
+ array-includes "^3.1.8"
+ array.prototype.flatmap "^1.3.2"
+ ast-types-flow "^0.0.8"
+ axe-core "^4.9.1"
+ axobject-query "~3.1.1"
+ damerau-levenshtein "^1.0.8"
+ emoji-regex "^9.2.2"
+ es-iterator-helpers "^1.0.19"
+ hasown "^2.0.2"
+ jsx-ast-utils "^3.3.5"
+ language-tags "^1.0.9"
+ minimatch "^3.1.2"
+ object.fromentries "^2.0.8"
+ safe-regex-test "^1.0.3"
+ string.prototype.includes "^2.0.0"
+
+eslint-plugin-react-compiler@^19.0.0-beta-e552027-20250112:
+ version "19.0.0-beta-e552027-20250112"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.0.0-beta-e552027-20250112.tgz#f4ad9cebe47615ebf6097a8084a30d761ee164f4"
+ integrity sha512-VjkIXHouCYyJHgk5HmZ1LH+fAK5CX+ULRX9iNYtwYJ+ljbivFhIT+JJyxNT/USQpCeS2Dt5ahjFeeMv0RRwTww==
+ dependencies:
+ "@babel/core" "^7.24.4"
+ "@babel/parser" "^7.24.4"
+ "@babel/plugin-proposal-private-methods" "^7.18.6"
+ hermes-parser "^0.25.1"
+ zod "^3.22.4"
+ zod-validation-error "^3.0.3"
+
eslint-plugin-react-hooks@^0.0.0-experimental-fabef7a6b-20221215:
version "0.0.0-experimental-fabef7a6b-20221215"
resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-0.0.0-experimental-fabef7a6b-20221215.tgz"
integrity sha512-y1lJAS4gWXyP6kXl2jA9ZJdFFfcMwNjMEZEEXn9LHOWEhnAgKgcqZ/NhNWAphiJLYOZ33kne1hbhDlGCcrdx5g==
eslint-plugin-react-hooks@^4.2.0:
- version "4.3.0"
- resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz"
- integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
+ version "4.6.2"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596"
+ integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
-eslint-plugin-react@7.x, eslint-plugin-react@^7.23.1:
+eslint-plugin-react@7.x:
version "7.28.0"
resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz"
integrity sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==
@@ -2658,6 +3452,30 @@ eslint-plugin-react@7.x, eslint-plugin-react@^7.23.1:
semver "^6.3.0"
string.prototype.matchall "^4.0.6"
+eslint-plugin-react@^7.23.1:
+ version "7.34.3"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.3.tgz#9965f27bd1250a787b5d4cfcc765e5a5d58dcb7b"
+ integrity sha512-aoW4MV891jkUulwDApQbPYTVZmeuSyFrudpbTAQuj5Fv8VL+o6df2xIGpw8B0hPjAaih1/Fb0om9grCdyFYemA==
+ dependencies:
+ array-includes "^3.1.8"
+ array.prototype.findlast "^1.2.5"
+ array.prototype.flatmap "^1.3.2"
+ array.prototype.toreversed "^1.1.2"
+ array.prototype.tosorted "^1.1.4"
+ doctrine "^2.1.0"
+ es-iterator-helpers "^1.0.19"
+ estraverse "^5.3.0"
+ jsx-ast-utils "^2.4.1 || ^3.0.0"
+ minimatch "^3.1.2"
+ object.entries "^1.1.8"
+ object.fromentries "^2.0.8"
+ object.hasown "^1.1.4"
+ object.values "^1.2.0"
+ prop-types "^15.8.1"
+ resolve "^2.0.0-next.5"
+ semver "^6.3.1"
+ string.prototype.matchall "^4.0.11"
+
eslint-scope@^5.1.1:
version "5.1.1"
resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
@@ -2988,13 +3806,6 @@ find-up@^2.1.0:
dependencies:
locate-path "^2.0.0"
-find-yarn-workspace-root@^2.0.0:
- version "2.0.0"
- resolved "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz"
- integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
- dependencies:
- micromatch "^4.0.2"
-
flat-cache@^3.0.4:
version "3.0.4"
resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
@@ -3013,6 +3824,13 @@ flatten@^1.0.2:
resolved "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz"
integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
+for-each@^0.3.3:
+ version "0.3.3"
+ resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+ integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+ dependencies:
+ is-callable "^1.1.3"
+
format@^0.2.0:
version "0.2.2"
resolved "https://registry.npmjs.org/format/-/format-0.2.2.tgz"
@@ -3033,15 +3851,6 @@ fresh@0.5.2:
resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
-fs-extra@^7.0.1:
- version "7.0.1"
- resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz"
- integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
- dependencies:
- graceful-fs "^4.1.2"
- jsonfile "^4.0.0"
- universalify "^0.1.0"
-
fs-extra@^9.0.1:
version "9.1.0"
resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz"
@@ -3067,11 +3876,31 @@ function-bind@^1.1.1:
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+function-bind@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+ integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
+ version "1.1.6"
+ resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+ integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+ dependencies:
+ call-bind "^1.0.2"
+ define-properties "^1.2.0"
+ es-abstract "^1.22.1"
+ functions-have-names "^1.2.3"
+
functional-red-black-tree@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+functions-have-names@^1.2.3:
+ version "1.2.3"
+ resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+ integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
gensync@^1.0.0-beta.2:
version "1.0.0-beta.2"
resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -3086,6 +3915,17 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
has "^1.0.3"
has-symbols "^1.0.1"
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+ integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+ dependencies:
+ es-errors "^1.3.0"
+ function-bind "^1.1.2"
+ has-proto "^1.0.1"
+ has-symbols "^1.0.3"
+ hasown "^2.0.0"
+
get-nonce@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz"
@@ -3104,6 +3944,15 @@ get-symbol-description@^1.0.0:
call-bind "^1.0.2"
get-intrinsic "^1.1.1"
+get-symbol-description@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+ integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+ dependencies:
+ call-bind "^1.0.5"
+ es-errors "^1.3.0"
+ get-intrinsic "^1.2.4"
+
github-slugger@^1.0.0, github-slugger@^1.3.0:
version "1.4.0"
resolved "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz"
@@ -3147,15 +3996,27 @@ glob@7.1.7:
once "^1.3.0"
path-is-absolute "^1.0.0"
-glob@^7.1.3, glob@^7.1.7:
- version "7.2.0"
- resolved "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz"
- integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+glob@^7.1.3:
+ version "7.2.0"
+ resolved "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz"
+ integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+ dependencies:
+ fs.realpath "^1.0.0"
+ inflight "^1.0.4"
+ inherits "2"
+ minimatch "^3.0.4"
+ once "^1.3.0"
+ path-is-absolute "^1.0.0"
+
+glob@^7.2.0:
+ version "7.2.3"
+ resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+ integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
dependencies:
fs.realpath "^1.0.0"
inflight "^1.0.4"
inherits "2"
- minimatch "^3.0.4"
+ minimatch "^3.1.1"
once "^1.3.0"
path-is-absolute "^1.0.0"
@@ -3171,6 +4032,14 @@ globals@^13.6.0, globals@^13.9.0:
dependencies:
type-fest "^0.20.2"
+globalthis@^1.0.3:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+ integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+ dependencies:
+ define-properties "^1.2.1"
+ gopd "^1.0.1"
+
globby@^11.0.1, globby@^11.0.3, globby@^11.1.0:
version "11.1.0"
resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
@@ -3183,7 +4052,14 @@ globby@^11.0.1, globby@^11.0.3, globby@^11.1.0:
merge2 "^1.4.1"
slash "^3.0.0"
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+gopd@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+ integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+ dependencies:
+ get-intrinsic "^1.1.3"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
version "4.2.9"
resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz"
integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
@@ -3210,6 +4086,11 @@ has-bigints@^1.0.1:
resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz"
integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+has-bigints@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+ integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
has-flag@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
@@ -3227,6 +4108,18 @@ has-property-descriptors@^1.0.0:
dependencies:
get-intrinsic "^1.1.1"
+has-property-descriptors@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+ integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+ dependencies:
+ es-define-property "^1.0.0"
+
+has-proto@^1.0.1, has-proto@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+ integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
has-symbols@^1.0.1, has-symbols@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz"
@@ -3244,6 +4137,13 @@ has-tostringtag@^1.0.0:
dependencies:
has-symbols "^1.0.2"
+has-tostringtag@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+ integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+ dependencies:
+ has-symbols "^1.0.3"
+
has@^1.0.3:
version "1.0.3"
resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
@@ -3251,6 +4151,13 @@ has@^1.0.3:
dependencies:
function-bind "^1.1.1"
+hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+ integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+ dependencies:
+ function-bind "^1.1.2"
+
hast-util-is-element@^1.0.0:
version "1.1.0"
resolved "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz"
@@ -3310,6 +4217,18 @@ hast-util-whitespace@^2.0.0:
resolved "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz"
integrity sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==
+hermes-estree@0.25.1:
+ version "0.25.1"
+ resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.25.1.tgz#6aeec17d1983b4eabf69721f3aa3eb705b17f480"
+ integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==
+
+hermes-parser@^0.25.1:
+ version "0.25.1"
+ resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.25.1.tgz#5be0e487b2090886c62bd8a11724cd766d5f54d1"
+ integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==
+ dependencies:
+ hermes-estree "0.25.1"
+
hosted-git-info@^2.1.4:
version "2.8.9"
resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
@@ -3413,6 +4332,15 @@ internal-slot@^1.0.3:
has "^1.0.3"
side-channel "^1.0.4"
+internal-slot@^1.0.4, internal-slot@^1.0.7:
+ version "1.0.7"
+ resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+ integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+ dependencies:
+ es-errors "^1.3.0"
+ hasown "^2.0.0"
+ side-channel "^1.0.4"
+
intersection-observer@^0.10.0:
version "0.10.0"
resolved "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.10.0.tgz"
@@ -3466,11 +4394,39 @@ is-alphanumerical@^2.0.0:
is-alphabetical "^2.0.0"
is-decimal "^2.0.0"
+is-arguments@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
+ integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+ dependencies:
+ call-bind "^1.0.2"
+ has-tostringtag "^1.0.0"
+
+is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+ integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
+ dependencies:
+ call-bind "^1.0.2"
+ get-intrinsic "^1.2.1"
+
is-arrayish@^0.2.1:
version "0.2.1"
resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+is-arrayish@^0.3.1:
+ version "0.3.2"
+ resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+ integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
+is-async-function@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+ integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+ dependencies:
+ has-tostringtag "^1.0.0"
+
is-bigint@^1.0.1:
version "1.0.4"
resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
@@ -3498,18 +4454,16 @@ is-buffer@^2.0.0:
resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz"
integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+is-callable@^1.1.3, is-callable@^1.2.7:
+ version "1.2.7"
+ resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+ integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
is-callable@^1.1.4, is-callable@^1.2.4:
version "1.2.4"
resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz"
integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
-is-ci@^2.0.0:
- version "2.0.0"
- resolved "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz"
- integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
- dependencies:
- ci-info "^2.0.0"
-
is-ci@^3.0.1:
version "3.0.1"
resolved "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz"
@@ -3524,6 +4478,13 @@ is-core-module@^2.11.0:
dependencies:
has "^1.0.3"
+is-core-module@^2.13.0, is-core-module@^2.13.1:
+ version "2.14.0"
+ resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.14.0.tgz#43b8ef9f46a6a08888db67b1ffd4ec9e3dfd59d1"
+ integrity sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==
+ dependencies:
+ hasown "^2.0.2"
+
is-core-module@^2.2.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
version "2.8.1"
resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz"
@@ -3531,7 +4492,14 @@ is-core-module@^2.2.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
dependencies:
has "^1.0.3"
-is-date-object@^1.0.1:
+is-data-view@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+ integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+ dependencies:
+ is-typed-array "^1.1.13"
+
+is-date-object@^1.0.1, is-date-object@^1.0.5:
version "1.0.5"
resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@@ -3548,11 +4516,6 @@ is-decimal@^2.0.0:
resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz"
integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
-is-docker@^2.0.0:
- version "2.2.1"
- resolved "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz"
- integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
-
is-extendable@^0.1.0:
version "0.1.1"
resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz"
@@ -3563,6 +4526,13 @@ is-extglob@^2.1.1:
resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+is-finalizationregistry@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+ integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+ dependencies:
+ call-bind "^1.0.2"
+
is-fullwidth-code-point@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
@@ -3573,6 +4543,13 @@ is-fullwidth-code-point@^4.0.0:
resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz"
integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+is-generator-function@^1.0.10:
+ version "1.0.10"
+ resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+ integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+ dependencies:
+ has-tostringtag "^1.0.0"
+
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
version "4.0.3"
resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
@@ -3590,11 +4567,21 @@ is-hexadecimal@^2.0.0:
resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz"
integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==
+is-map@^2.0.2, is-map@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+ integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
is-negative-zero@^2.0.1:
version "2.0.2"
resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz"
integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+is-negative-zero@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+ integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
is-number-object@^1.0.4:
version "1.0.6"
resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.6.tgz"
@@ -3632,11 +4619,23 @@ is-regex@^1.1.4:
call-bind "^1.0.2"
has-tostringtag "^1.0.0"
+is-set@^2.0.2, is-set@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+ integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
is-shared-array-buffer@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz"
integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
+is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+ integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+ dependencies:
+ call-bind "^1.0.7"
+
is-stream@^2.0.0:
version "2.0.1"
resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
@@ -3656,18 +4655,38 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
dependencies:
has-symbols "^1.0.2"
+is-typed-array@^1.1.13:
+ version "1.1.13"
+ resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+ integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+ dependencies:
+ which-typed-array "^1.1.14"
+
is-url@^1.2.2:
version "1.2.4"
resolved "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz"
integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
-is-weakref@^1.0.1:
+is-weakmap@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+ integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.1, is-weakref@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
dependencies:
call-bind "^1.0.2"
+is-weakset@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.3.tgz#e801519df8c0c43e12ff2834eead84ec9e624007"
+ integrity sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==
+ dependencies:
+ call-bind "^1.0.7"
+ get-intrinsic "^1.2.4"
+
is-whitespace-character@^1.0.0:
version "1.0.4"
resolved "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz"
@@ -3678,18 +4697,27 @@ is-word-character@^1.0.0:
resolved "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz"
integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
-is-wsl@^2.1.1:
- version "2.2.0"
- resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
- integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
- dependencies:
- is-docker "^2.0.0"
+isarray@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+ integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+iterator.prototype@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
+ integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+ dependencies:
+ define-properties "^1.2.1"
+ get-intrinsic "^1.2.1"
+ has-symbols "^1.0.3"
+ reflect.getprototypeof "^1.0.4"
+ set-function-name "^2.0.1"
+
jiti@^1.19.1:
version "1.21.0"
resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz"
@@ -3713,6 +4741,11 @@ jsesc@^2.5.1:
resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+jsesc@^3.0.2:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+ integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
json-parse-better-errors@^1.0.1:
version "1.0.2"
resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz"
@@ -3733,7 +4766,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
-json5@^1.0.1:
+json5@^1.0.1, json5@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz"
integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
@@ -3745,12 +4778,10 @@ json5@^2.2.1:
resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
-jsonfile@^4.0.0:
- version "4.0.0"
- resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz"
- integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
- optionalDependencies:
- graceful-fs "^4.1.6"
+json5@^2.2.3:
+ version "2.2.3"
+ resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+ integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
jsonfile@^6.0.1:
version "6.1.0"
@@ -3769,23 +4800,31 @@ jsonfile@^6.0.1:
array-includes "^3.1.3"
object.assign "^4.1.2"
+jsx-ast-utils@^3.3.5:
+ version "3.3.5"
+ resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+ integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+ dependencies:
+ array-includes "^3.1.6"
+ array.prototype.flat "^1.3.1"
+ object.assign "^4.1.4"
+ object.values "^1.1.6"
+
kind-of@^6.0.0, kind-of@^6.0.2:
version "6.0.3"
resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-klaw-sync@^6.0.0:
- version "6.0.0"
- resolved "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz"
- integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
- dependencies:
- graceful-fs "^4.1.11"
-
kleur@^4.0.3:
version "4.1.5"
resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz"
integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+language-subtag-registry@^0.3.20:
+ version "0.3.23"
+ resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
+ integrity sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==
+
language-subtag-registry@~0.3.2:
version "0.3.21"
resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz"
@@ -3798,6 +4837,13 @@ language-tags@^1.0.5:
dependencies:
language-subtag-registry "~0.3.2"
+language-tags@^1.0.9:
+ version "1.0.9"
+ resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+ integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+ dependencies:
+ language-subtag-registry "^0.3.20"
+
levn@^0.4.1:
version "0.4.1"
resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
@@ -3912,13 +4958,20 @@ longest-streak@^3.0.0:
resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-3.0.1.tgz"
integrity sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
dependencies:
js-tokens "^3.0.0 || ^4.0.0"
+lru-cache@^5.1.1:
+ version "5.1.1"
+ resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+ integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+ dependencies:
+ yallist "^3.0.2"
+
lru-cache@^6.0.0:
version "6.0.0"
resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
@@ -4601,7 +5654,7 @@ micromark@^3.0.0:
micromark-util-types "^1.0.1"
uvu "^0.5.0"
-micromatch@^4.0.2, micromatch@^4.0.4:
+micromatch@^4.0.4:
version "4.0.4"
resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz"
integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
@@ -4658,11 +5711,23 @@ minimatch@^3.0.4:
dependencies:
brace-expansion "^1.1.7"
+minimatch@^3.1.1, minimatch@^3.1.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+ integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+ dependencies:
+ brace-expansion "^1.1.7"
+
minimist@^1.2.0:
version "1.2.7"
resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz"
integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+minimist@^1.2.6:
+ version "1.2.8"
+ resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+ integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
mri@^1.1.0:
version "1.2.0"
resolved "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz"
@@ -4702,11 +5767,6 @@ nanoid@^3.2.0:
resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
-nanoid@^3.3.4:
- version "3.3.4"
- resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
- integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
-
nanoid@^3.3.6:
version "3.3.6"
resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
@@ -4738,28 +5798,28 @@ next-tick@^1.1.0:
resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz"
integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
-next@^13.4.1:
- version "13.4.1"
- resolved "https://registry.npmjs.org/next/-/next-13.4.1.tgz"
- integrity sha512-JBw2kAIyhKDpjhEWvNVoFeIzNp9xNxg8wrthDOtMctfn3EpqGCmW0FSviNyGgOSOSn6zDaX48pmvbdf6X2W9xA==
+next@15.1.0:
+ version "15.1.0"
+ resolved "https://registry.yarnpkg.com/next/-/next-15.1.0.tgz#be847cf67ac94ae23b57f3ea6d10642f3fc1ad69"
+ integrity sha512-QKhzt6Y8rgLNlj30izdMbxAwjHMFANnLwDwZ+WQh5sMhyt4lEBqDK9QpvWHtIM4rINKPoJ8aiRZKg5ULSybVHw==
dependencies:
- "@next/env" "13.4.1"
- "@swc/helpers" "0.5.1"
+ "@next/env" "15.1.0"
+ "@swc/counter" "0.1.3"
+ "@swc/helpers" "0.5.15"
busboy "1.6.0"
- caniuse-lite "^1.0.30001406"
- postcss "8.4.14"
- styled-jsx "5.1.1"
- zod "3.21.4"
+ caniuse-lite "^1.0.30001579"
+ postcss "8.4.31"
+ styled-jsx "5.1.6"
optionalDependencies:
- "@next/swc-darwin-arm64" "13.4.1"
- "@next/swc-darwin-x64" "13.4.1"
- "@next/swc-linux-arm64-gnu" "13.4.1"
- "@next/swc-linux-arm64-musl" "13.4.1"
- "@next/swc-linux-x64-gnu" "13.4.1"
- "@next/swc-linux-x64-musl" "13.4.1"
- "@next/swc-win32-arm64-msvc" "13.4.1"
- "@next/swc-win32-ia32-msvc" "13.4.1"
- "@next/swc-win32-x64-msvc" "13.4.1"
+ "@next/swc-darwin-arm64" "15.1.0"
+ "@next/swc-darwin-x64" "15.1.0"
+ "@next/swc-linux-arm64-gnu" "15.1.0"
+ "@next/swc-linux-arm64-musl" "15.1.0"
+ "@next/swc-linux-x64-gnu" "15.1.0"
+ "@next/swc-linux-x64-musl" "15.1.0"
+ "@next/swc-win32-arm64-msvc" "15.1.0"
+ "@next/swc-win32-x64-msvc" "15.1.0"
+ sharp "^0.33.5"
nice-try@^1.0.4:
version "1.0.5"
@@ -4776,6 +5836,11 @@ node-releases@^2.0.1:
resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz"
integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
+node-releases@^2.0.19:
+ version "2.0.19"
+ resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+ integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
node-releases@^2.0.6:
version "2.0.6"
resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz"
@@ -4843,6 +5908,19 @@ object-inspect@^1.11.0, object-inspect@^1.12.0, object-inspect@^1.9.0:
resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz"
integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
+object-inspect@^1.13.1:
+ version "1.13.2"
+ resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+ integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
+object-is@^1.1.5:
+ version "1.1.6"
+ resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
+ integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+
object-keys@^1.0.12, object-keys@^1.1.1:
version "1.1.1"
resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
@@ -4868,6 +5946,16 @@ object.assign@^4.1.2:
has-symbols "^1.0.1"
object-keys "^1.1.1"
+object.assign@^4.1.4, object.assign@^4.1.5:
+ version "4.1.5"
+ resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+ integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+ dependencies:
+ call-bind "^1.0.5"
+ define-properties "^1.2.1"
+ has-symbols "^1.0.3"
+ object-keys "^1.1.1"
+
object.entries@^1.1.5:
version "1.1.5"
resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz"
@@ -4877,6 +5965,15 @@ object.entries@^1.1.5:
define-properties "^1.1.3"
es-abstract "^1.19.1"
+object.entries@^1.1.8:
+ version "1.1.8"
+ resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+ integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-object-atoms "^1.0.0"
+
object.fromentries@^2.0.5:
version "2.0.5"
resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz"
@@ -4886,6 +5983,25 @@ object.fromentries@^2.0.5:
define-properties "^1.1.3"
es-abstract "^1.19.1"
+object.fromentries@^2.0.7, object.fromentries@^2.0.8:
+ version "2.0.8"
+ resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+ integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.2"
+ es-object-atoms "^1.0.0"
+
+object.groupby@^1.0.1:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+ integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.2"
+
object.hasown@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz"
@@ -4894,6 +6010,15 @@ object.hasown@^1.1.0:
define-properties "^1.1.3"
es-abstract "^1.19.1"
+object.hasown@^1.1.4:
+ version "1.1.4"
+ resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.4.tgz#e270ae377e4c120cdcb7656ce66884a6218283dc"
+ integrity sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==
+ dependencies:
+ define-properties "^1.2.1"
+ es-abstract "^1.23.2"
+ es-object-atoms "^1.0.0"
+
object.values@^1.1.5:
version "1.1.5"
resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz"
@@ -4903,6 +6028,15 @@ object.values@^1.1.5:
define-properties "^1.1.3"
es-abstract "^1.19.1"
+object.values@^1.1.6, object.values@^1.1.7, object.values@^1.2.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
+ integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-object-atoms "^1.0.0"
+
on-finished@2.4.1:
version "2.4.1"
resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz"
@@ -4924,14 +6058,6 @@ onetime@^5.1.0, onetime@^5.1.2:
dependencies:
mimic-fn "^2.1.0"
-open@^7.4.2:
- version "7.4.2"
- resolved "https://registry.npmjs.org/open/-/open-7.4.2.tgz"
- integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
- dependencies:
- is-docker "^2.0.0"
- is-wsl "^2.1.1"
-
opener@^1.5.2:
version "1.5.2"
resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
@@ -4949,11 +6075,6 @@ optionator@^0.9.1:
type-check "^0.4.0"
word-wrap "^1.2.3"
-os-tmpdir@~1.0.2:
- version "1.0.2"
- resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz"
- integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
outvariant@1.4.0, outvariant@^1.3.0:
version "1.4.0"
resolved "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz"
@@ -5050,25 +6171,6 @@ parseurl@~1.3.3:
resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
-patch-package@^6.2.2:
- version "6.4.7"
- resolved "https://registry.npmjs.org/patch-package/-/patch-package-6.4.7.tgz"
- integrity sha512-S0vh/ZEafZ17hbhgqdnpunKDfzHQibQizx9g8yEf5dcVk3KOflOfdufRXQX8CSEkyOQwuM/bNz1GwKvFj54kaQ==
- dependencies:
- "@yarnpkg/lockfile" "^1.1.0"
- chalk "^2.4.2"
- cross-spawn "^6.0.5"
- find-yarn-workspace-root "^2.0.0"
- fs-extra "^7.0.1"
- is-ci "^2.0.0"
- klaw-sync "^6.0.0"
- minimist "^1.2.0"
- open "^7.4.2"
- rimraf "^2.6.3"
- semver "^5.6.0"
- slash "^2.0.0"
- tmp "^0.0.33"
-
path-exists@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz"
@@ -5129,6 +6231,11 @@ picocolors@^1.0.0:
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+picocolors@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+ integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
version "2.3.1"
resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
@@ -5154,6 +6261,11 @@ pirates@^4.0.1:
resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz"
integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+possible-typed-array-names@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+ integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
postcss-attribute-case-insensitive@^4.0.1:
version "4.0.2"
resolved "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz"
@@ -5497,12 +6609,12 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
indexes-of "^1.0.1"
uniq "^1.0.1"
-postcss@8.4.14:
- version "8.4.14"
- resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz"
- integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+postcss@8.4.31:
+ version "8.4.31"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+ integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
dependencies:
- nanoid "^3.3.4"
+ nanoid "^3.3.6"
picocolors "^1.0.0"
source-map-js "^1.0.2"
@@ -5547,7 +6659,7 @@ progress@^2.0.0:
resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-prop-types@^15.7.2:
+prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5622,13 +6734,12 @@ react-devtools-inline@4.4.0:
dependencies:
es6-symbol "^3"
-react-dom@^0.0.0-experimental-16d053d59-20230506:
- version "0.0.0-experimental-16d053d59-20230506"
- resolved "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-experimental-16d053d59-20230506.tgz"
- integrity sha512-I4PIT9ZAdDgpbav9BxfzPv2p5otJz6BEbFEBvFwd1BnQJmtkKKApUU7RYdGKnwY2/r6hdfxPm2pne+NhiyBkzg==
+react-dom@^19.0.0:
+ version "19.0.0"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+ integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
dependencies:
- loose-envify "^1.1.0"
- scheduler "0.0.0-experimental-16d053d59-20230506"
+ scheduler "^0.25.0"
react-is@^16.13.1:
version "16.13.1"
@@ -5668,12 +6779,10 @@ react-style-singleton@^2.2.1:
invariant "^2.2.4"
tslib "^2.0.0"
-react@^0.0.0-experimental-16d053d59-20230506:
- version "0.0.0-experimental-16d053d59-20230506"
- resolved "https://registry.npmjs.org/react/-/react-0.0.0-experimental-16d053d59-20230506.tgz"
- integrity sha512-8PdloFcanNcryJLohpr4rVQfB4oJvsL0Z+TzJ8B66RxauwF95QqUNorGsK1heESrtj4As0oHCmiZkoYzA4uW8w==
- dependencies:
- loose-envify "^1.1.0"
+react@^19.0.0:
+ version "19.0.0"
+ resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+ integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
read-cache@^1.0.0:
version "1.0.0"
@@ -5703,6 +6812,19 @@ reading-time@^1.2.0:
resolved "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz"
integrity sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==
+reflect.getprototypeof@^1.0.4:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
+ integrity sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.1"
+ es-errors "^1.3.0"
+ get-intrinsic "^1.2.4"
+ globalthis "^1.0.3"
+ which-builtin-type "^1.1.3"
+
regenerator-runtime@^0.13.4:
version "0.13.9"
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -5721,6 +6843,16 @@ regexp.prototype.flags@^1.3.1:
call-bind "^1.0.2"
define-properties "^1.1.3"
+regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
+ version "1.5.2"
+ resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+ integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+ dependencies:
+ call-bind "^1.0.6"
+ define-properties "^1.2.1"
+ es-errors "^1.3.0"
+ set-function-name "^2.0.1"
+
regexpp@^3.1.0, regexpp@^3.2.0:
version "3.2.0"
resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
@@ -5907,6 +7039,15 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.20.0:
path-parse "^1.0.7"
supports-preserve-symlinks-flag "^1.0.0"
+resolve@^1.22.0, resolve@^1.22.4:
+ version "1.22.8"
+ resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+ integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+ dependencies:
+ is-core-module "^2.13.0"
+ path-parse "^1.0.7"
+ supports-preserve-symlinks-flag "^1.0.0"
+
resolve@^2.0.0-next.3:
version "2.0.0-next.3"
resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
@@ -5915,6 +7056,15 @@ resolve@^2.0.0-next.3:
is-core-module "^2.2.0"
path-parse "^1.0.6"
+resolve@^2.0.0-next.5:
+ version "2.0.0-next.5"
+ resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+ integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+ dependencies:
+ is-core-module "^2.13.0"
+ path-parse "^1.0.7"
+ supports-preserve-symlinks-flag "^1.0.0"
+
restore-cursor@^3.1.0:
version "3.1.0"
resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz"
@@ -5965,7 +7115,7 @@ rfdc@^1.3.0:
resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz"
integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
-rimraf@^2.5.4, rimraf@^2.6.3:
+rimraf@^2.5.4:
version "2.7.1"
resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -6008,6 +7158,16 @@ sade@^1.7.3:
dependencies:
mri "^1.1.0"
+safe-array-concat@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+ integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+ dependencies:
+ call-bind "^1.0.7"
+ get-intrinsic "^1.2.4"
+ has-symbols "^1.0.3"
+ isarray "^2.0.5"
+
safe-buffer@5.2.1:
version "5.2.1"
resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
@@ -6018,17 +7178,24 @@ safe-buffer@~5.1.1:
resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+safe-regex-test@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+ integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+ dependencies:
+ call-bind "^1.0.6"
+ es-errors "^1.3.0"
+ is-regex "^1.1.4"
+
"safer-buffer@>= 2.1.2 < 3":
version "2.1.2"
resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-scheduler@0.0.0-experimental-16d053d59-20230506:
- version "0.0.0-experimental-16d053d59-20230506"
- resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-experimental-16d053d59-20230506.tgz"
- integrity sha512-gGnyU4CkC/+msd1dOQW9zuquI3GoEziuS42soP0AvbTCvRkeU4qhR/mRRaU+/a7JK/OFeSSudcz7enkrkZdSPA==
- dependencies:
- loose-envify "^1.1.0"
+scheduler@^0.25.0:
+ version "0.25.0"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+ integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
section-matter@^1.0.0:
version "1.0.0"
@@ -6038,7 +7205,7 @@ section-matter@^1.0.0:
extend-shallow "^2.0.1"
kind-of "^6.0.0"
-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.5.0:
version "5.7.1"
resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -6048,13 +7215,23 @@ semver@^6.3.0:
resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-semver@^7.2.1, semver@^7.3.5:
+semver@^6.3.1:
+ version "6.3.1"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+ integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.2.1:
version "7.3.5"
resolved "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz"
integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
dependencies:
lru-cache "^6.0.0"
+semver@^7.3.5:
+ version "7.6.2"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
+ integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
+
semver@^7.3.7:
version "7.3.7"
resolved "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz"
@@ -6062,6 +7239,11 @@ semver@^7.3.7:
dependencies:
lru-cache "^6.0.0"
+semver@^7.6.3:
+ version "7.6.3"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+ integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
send@0.18.0:
version "0.18.0"
resolved "https://registry.npmjs.org/send/-/send-0.18.0.tgz"
@@ -6091,11 +7273,62 @@ serve-static@1.15.0:
parseurl "~1.3.3"
send "0.18.0"
+set-function-length@^1.2.1:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+ integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+ dependencies:
+ define-data-property "^1.1.4"
+ es-errors "^1.3.0"
+ function-bind "^1.1.2"
+ get-intrinsic "^1.2.4"
+ gopd "^1.0.1"
+ has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.1, set-function-name@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+ integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+ dependencies:
+ define-data-property "^1.1.4"
+ es-errors "^1.3.0"
+ functions-have-names "^1.2.3"
+ has-property-descriptors "^1.0.2"
+
setprototypeof@1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+sharp@^0.33.5:
+ version "0.33.5"
+ resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.5.tgz#13e0e4130cc309d6a9497596715240b2ec0c594e"
+ integrity sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==
+ dependencies:
+ color "^4.2.3"
+ detect-libc "^2.0.3"
+ semver "^7.6.3"
+ optionalDependencies:
+ "@img/sharp-darwin-arm64" "0.33.5"
+ "@img/sharp-darwin-x64" "0.33.5"
+ "@img/sharp-libvips-darwin-arm64" "1.0.4"
+ "@img/sharp-libvips-darwin-x64" "1.0.4"
+ "@img/sharp-libvips-linux-arm" "1.0.5"
+ "@img/sharp-libvips-linux-arm64" "1.0.4"
+ "@img/sharp-libvips-linux-s390x" "1.0.4"
+ "@img/sharp-libvips-linux-x64" "1.0.4"
+ "@img/sharp-libvips-linuxmusl-arm64" "1.0.4"
+ "@img/sharp-libvips-linuxmusl-x64" "1.0.4"
+ "@img/sharp-linux-arm" "0.33.5"
+ "@img/sharp-linux-arm64" "0.33.5"
+ "@img/sharp-linux-s390x" "0.33.5"
+ "@img/sharp-linux-x64" "0.33.5"
+ "@img/sharp-linuxmusl-arm64" "0.33.5"
+ "@img/sharp-linuxmusl-x64" "0.33.5"
+ "@img/sharp-wasm32" "0.33.5"
+ "@img/sharp-win32-ia32" "0.33.5"
+ "@img/sharp-win32-x64" "0.33.5"
+
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"
@@ -6134,11 +7367,28 @@ side-channel@^1.0.4:
get-intrinsic "^1.0.2"
object-inspect "^1.9.0"
+side-channel@^1.0.6:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+ integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+ dependencies:
+ call-bind "^1.0.7"
+ es-errors "^1.3.0"
+ get-intrinsic "^1.2.4"
+ object-inspect "^1.13.1"
+
signal-exit@^3.0.2, signal-exit@^3.0.3:
version "3.0.6"
resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz"
integrity sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==
+simple-swizzle@^0.2.2:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+ integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+ dependencies:
+ is-arrayish "^0.3.1"
+
sirv@^1.0.7:
version "1.0.19"
resolved "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz"
@@ -6148,11 +7398,6 @@ sirv@^1.0.7:
mrmime "^1.0.0"
totalist "^1.0.0"
-slash@^2.0.0:
- version "2.0.0"
- resolved "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz"
- integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
-
slash@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
@@ -6265,6 +7510,13 @@ statuses@2.0.1:
resolved "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz"
integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+stop-iteration-iterator@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
+ integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
+ dependencies:
+ internal-slot "^1.0.4"
+
streamsearch@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz"
@@ -6298,6 +7550,32 @@ string-width@^5.0.0:
emoji-regex "^9.2.2"
strip-ansi "^7.0.1"
+string.prototype.includes@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.0.tgz#8986d57aee66d5460c144620a6d873778ad7289f"
+ integrity sha512-E34CkBgyeqNDcrbU76cDjL5JLcVrtSdYq0MEh/B10r17pRP4ciHLwTgnuLV8Ay6cgEMLkcBkFCKyFZ43YldYzg==
+ dependencies:
+ define-properties "^1.1.3"
+ es-abstract "^1.17.5"
+
+string.prototype.matchall@^4.0.11:
+ version "4.0.11"
+ resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
+ integrity sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.2"
+ es-errors "^1.3.0"
+ es-object-atoms "^1.0.0"
+ get-intrinsic "^1.2.4"
+ gopd "^1.0.1"
+ has-symbols "^1.0.3"
+ internal-slot "^1.0.7"
+ regexp.prototype.flags "^1.5.2"
+ set-function-name "^2.0.2"
+ side-channel "^1.0.6"
+
string.prototype.matchall@^4.0.6:
version "4.0.6"
resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz"
@@ -6321,6 +7599,16 @@ string.prototype.padend@^3.0.0:
define-properties "^1.1.3"
es-abstract "^1.19.1"
+string.prototype.trim@^1.2.9:
+ version "1.2.9"
+ resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+ integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-abstract "^1.23.0"
+ es-object-atoms "^1.0.0"
+
string.prototype.trimend@^1.0.4:
version "1.0.4"
resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz"
@@ -6329,6 +7617,15 @@ string.prototype.trimend@^1.0.4:
call-bind "^1.0.2"
define-properties "^1.1.3"
+string.prototype.trimend@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+ integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-object-atoms "^1.0.0"
+
string.prototype.trimstart@^1.0.4:
version "1.0.4"
resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz"
@@ -6337,6 +7634,15 @@ string.prototype.trimstart@^1.0.4:
call-bind "^1.0.2"
define-properties "^1.1.3"
+string.prototype.trimstart@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+ integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+ dependencies:
+ call-bind "^1.0.7"
+ define-properties "^1.2.1"
+ es-object-atoms "^1.0.0"
+
stringify-entities@^3.0.0, stringify-entities@^3.0.1:
version "3.1.0"
resolved "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz"
@@ -6400,10 +7706,10 @@ style-to-object@^0.3.0:
dependencies:
inline-style-parser "0.1.1"
-styled-jsx@5.1.1:
- version "5.1.1"
- resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz"
- integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
+styled-jsx@5.1.6:
+ version "5.1.6"
+ resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.6.tgz#83b90c077e6c6a80f7f5e8781d0f311b2fe41499"
+ integrity sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==
dependencies:
client-only "0.0.1"
@@ -6512,13 +7818,6 @@ tiny-warning@^1.0.3:
resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-tmp@^0.0.33:
- version "0.0.33"
- resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz"
- integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
- dependencies:
- os-tmpdir "~1.0.2"
-
to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -6571,7 +7870,7 @@ ts-interface-checker@^0.1.9:
resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
-tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
+tsconfig-paths@^3.12.0:
version "3.12.0"
resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz"
integrity sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==
@@ -6581,6 +7880,16 @@ tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
minimist "^1.2.0"
strip-bom "^3.0.0"
+tsconfig-paths@^3.14.1, tsconfig-paths@^3.15.0:
+ version "3.15.0"
+ resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+ integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+ dependencies:
+ "@types/json5" "^0.0.29"
+ json5 "^1.0.2"
+ minimist "^1.2.6"
+ strip-bom "^3.0.0"
+
tslib@^1.8.1:
version "1.14.1"
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
@@ -6601,6 +7910,11 @@ tslib@^2.4.0:
resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+tslib@^2.8.0:
+ version "2.8.1"
+ resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+ integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
tsutils@^3.21.0:
version "3.21.0"
resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
@@ -6643,10 +7957,54 @@ type@^2.7.2:
resolved "https://registry.npmjs.org/type/-/type-2.7.2.tgz"
integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
-typescript@^4.0.2:
- version "4.5.5"
- resolved "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz"
- integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+typed-array-buffer@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+ integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+ dependencies:
+ call-bind "^1.0.7"
+ es-errors "^1.3.0"
+ is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+ integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+ dependencies:
+ call-bind "^1.0.7"
+ for-each "^0.3.3"
+ gopd "^1.0.1"
+ has-proto "^1.0.3"
+ is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+ integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+ dependencies:
+ available-typed-arrays "^1.0.7"
+ call-bind "^1.0.7"
+ for-each "^0.3.3"
+ gopd "^1.0.1"
+ has-proto "^1.0.3"
+ is-typed-array "^1.1.13"
+
+typed-array-length@^1.0.6:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+ integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+ dependencies:
+ call-bind "^1.0.7"
+ for-each "^0.3.3"
+ gopd "^1.0.1"
+ has-proto "^1.0.3"
+ is-typed-array "^1.1.13"
+ possible-typed-array-names "^1.0.0"
+
+typescript@^5.7.2:
+ version "5.7.2"
+ resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6"
+ integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==
unbox-primitive@^1.0.1:
version "1.0.1"
@@ -6658,6 +8016,16 @@ unbox-primitive@^1.0.1:
has-symbols "^1.0.2"
which-boxed-primitive "^1.0.2"
+unbox-primitive@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+ integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+ dependencies:
+ call-bind "^1.0.2"
+ has-bigints "^1.0.2"
+ has-symbols "^1.0.3"
+ which-boxed-primitive "^1.0.2"
+
unherit@^1.0.4:
version "1.1.3"
resolved "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz"
@@ -6833,11 +8201,6 @@ unist-util-visit@^4.0.0:
unist-util-is "^5.0.0"
unist-util-visit-parents "^5.0.0"
-universalify@^0.1.0:
- version "0.1.2"
- resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"
- integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
universalify@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"
@@ -6856,6 +8219,14 @@ update-browserslist-db@^1.0.5:
escalade "^3.1.1"
picocolors "^1.0.0"
+update-browserslist-db@^1.1.1:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz#97e9c96ab0ae7bcac08e9ae5151d26e6bc6b5580"
+ integrity sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==
+ dependencies:
+ escalade "^3.2.0"
+ picocolors "^1.1.1"
+
uri-js@^4.2.2:
version "4.4.1"
resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
@@ -6996,6 +8367,45 @@ which-boxed-primitive@^1.0.2:
is-string "^1.0.5"
is-symbol "^1.0.3"
+which-builtin-type@^1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+ integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+ dependencies:
+ function.prototype.name "^1.1.5"
+ has-tostringtag "^1.0.0"
+ is-async-function "^2.0.0"
+ is-date-object "^1.0.5"
+ is-finalizationregistry "^1.0.2"
+ is-generator-function "^1.0.10"
+ is-regex "^1.1.4"
+ is-weakref "^1.0.2"
+ isarray "^2.0.5"
+ which-boxed-primitive "^1.0.2"
+ which-collection "^1.0.1"
+ which-typed-array "^1.1.9"
+
+which-collection@^1.0.1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+ integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+ dependencies:
+ is-map "^2.0.3"
+ is-set "^2.0.3"
+ is-weakmap "^2.0.2"
+ is-weakset "^2.0.3"
+
+which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15, which-typed-array@^1.1.9:
+ version "1.1.15"
+ resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+ integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
+ dependencies:
+ available-typed-arrays "^1.0.7"
+ call-bind "^1.0.7"
+ for-each "^0.3.3"
+ gopd "^1.0.1"
+ has-tostringtag "^1.0.2"
+
which@^1.2.9:
version "1.3.1"
resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz"
@@ -7053,6 +8463,11 @@ xtend@^4.0.0, xtend@^4.0.1:
resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+yallist@^3.0.2:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+ integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
yallist@^4.0.0:
version "4.0.0"
resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
@@ -7068,10 +8483,15 @@ yaml@^2.1.1:
resolved "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz"
integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
-zod@3.21.4:
- version "3.21.4"
- resolved "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz"
- integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
+zod-validation-error@^3.0.3:
+ version "3.4.0"
+ resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.4.0.tgz#3a8a1f55c65579822d7faa190b51336c61bee2a6"
+ integrity sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ==
+
+zod@^3.22.4:
+ version "3.24.1"
+ resolved "https://registry.yarnpkg.com/zod/-/zod-3.24.1.tgz#27445c912738c8ad1e9de1bea0359fa44d9d35ee"
+ integrity sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==
zwitch@^2.0.0:
version "2.0.2"