Sync with react.dev @ b22cbc3 (#1126)

This PR was automatically generated.

Merge changes from
[react.dev](https://github.com/reactjs/react.dev/commits/main) at
b22cbc3

The following files have conflicts and may need new translations:

 * [x] [package.json](/reactjs/react.dev/commits/main/package.json)
* [ ]
[src/content/blog/2020/12/21/data-fetching-with-react-server-components.md](/reactjs/react.dev/commits/main/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md)
* [ ]
[src/content/blog/2021/06/08/the-plan-for-react-18.md](/reactjs/react.dev/commits/main/src/content/blog/2021/06/08/the-plan-for-react-18.md)
* [ ]
[src/content/blog/2021/12/17/react-conf-2021-recap.md](/reactjs/react.dev/commits/main/src/content/blog/2021/12/17/react-conf-2021-recap.md)
* [ ]
[src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md](/reactjs/react.dev/commits/main/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md)
* [ ]
[src/content/blog/2023/03/16/introducing-react-dev.md](/reactjs/react.dev/commits/main/src/content/blog/2023/03/16/introducing-react-dev.md)
* [ ]
[src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md](/reactjs/react.dev/commits/main/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md)
* [ ]
[src/content/blog/2023/05/03/react-canaries.md](/reactjs/react.dev/commits/main/src/content/blog/2023/05/03/react-canaries.md)
* [ ]
[src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md](/reactjs/react.dev/commits/main/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md)
* [ ]
[src/content/community/docs-contributors.md](/reactjs/react.dev/commits/main/src/content/community/docs-contributors.md)
* [ ]
[src/content/learn/add-react-to-an-existing-project.md](/reactjs/react.dev/commits/main/src/content/learn/add-react-to-an-existing-project.md)
 * [x] [yarn.lock](/reactjs/react.dev/commits/main/yarn.lock)

Please fix the conflicts by pushing new commits to this pull request,
either by editing the files directly on GitHub or by checking out this
branch.

## DO NOT SQUASH MERGE THIS PULL REQUEST!

Doing so will "erase" the commits from main and cause them to show up as
conflicts the next time we merge.

Author: lumirlumir

.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,

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.

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}) => {

package.json

@@ -1,6 +1,5 @@
 {
   "private": true,
-  "packageManager": "[email protected]",
   "license": "CC",
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -17,7 +16,7 @@
     "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss lint-editorconfig",
     "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",
     "cache-reset": "rm -rf node_modules/.cache && rm -rf .next && yarn cache clean",
@@ -37,12 +36,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"
   },
@@ -58,21 +57,23 @@
     "@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",
-    "editorconfig-checker": "^6.0.0",
+    "editorconfig-checker": "^6.0.1",
+    "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",
     "eslint-plugin-flowtype": "4.x",
     "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",
@@ -84,7 +85,6 @@
     "metro-cache": "0.72.2",
     "mocha": "^10.6.0",
     "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",
@@ -104,7 +104,7 @@
     "textlint-filter-rule-comments": "^1.2.2",
     "textlint-rule-allowed-uris": "^1.0.7",
     "textlint-tester": "^14.0.4",
-    "typescript": "^4.0.2",
+    "typescript": "^5.7.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"
   },
@@ -115,5 +115,6 @@
     "budget": null,
     "budgetPercentIncreaseRed": 10,
     "showDetails": true
-  }
+  },
+  "packageManager": "[email protected]"
 }

patches/next+13.4.1.patch

@@ -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}

patches/next-remote-watch+1.0.0.patch

@@ -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.

src/components/ExternalLink.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.

src/components/Icon/IconArrow.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"