Sync with react.dev @ 55986965

.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

.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,15 +16,15 @@ 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 }}
           name: analysis_comment.txt
           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 }}

.github/workflows/discord_notify.yml

@@ -2,11 +2,22 @@ name: Discord Notify
 
 on:
   pull_request_target:
-    types: [ labeled ]
+    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: ${{ github.event.label.name == 'React Core Team' }}
+    if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
+    needs: check_maintainer
     runs-on: ubuntu-latest
     steps:
       - name: Discord Webhook Action
@@ -18,4 +29,4 @@ jobs:
           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 }}
+          embed-url: ${{ github.event.pull_request.html_url }}

.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']
+            });

.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

package.json

@@ -24,8 +24,8 @@
   },
   "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",

src/components/Layout/HomeContent.js

@@ -514,11 +514,13 @@ export function HomeContent() {
 
           <div className="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80">
             <div className="uwu-visible flex justify-center">
-              <img
+              <Image
                 alt="logo by @sawaratsuki1004"
                 title="logo by @sawaratsuki1004"
                 className="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32"
                 src="/images/uwu.png"
+                width={100}
+                height={100}
               />
             </div>
             <Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
@@ -805,10 +807,12 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
                 ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
                 : 'group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]'
             )}>
-            <img
+            <Image
               loading={isLazy ? 'lazy' : 'eager'}
               src={src}
               alt={alt}
+              width={100}
+              height={100}
               className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
             />
           </div>
@@ -1565,7 +1569,7 @@ function Cover({background, children}) {
       <div className="absolute inset-0 px-4 py-2 flex items-end bg-gradient-to-t from-black/40 via-black/0">
         {children}
       </div>
-      <img
+      <Image
         src={background}
         width={500}
         height={263}
@@ -1642,11 +1646,13 @@ function Thumbnail({video}) {
         <>
           <div className="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center">
             {image.speakers.map((src, i) => (
-              <img
+              <Image
                 key={i}
                 className="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full"
                 src={src}
                 alt=""
+                width={100}
+                height={100}
               />
             ))}
           </div>

src/components/Layout/Page.tsx

@@ -8,7 +8,7 @@ import {useRouter} from 'next/router';
 import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
-// import SocialBanner from '../SocialBanner';
+import SocialBanner from '../SocialBanner';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
 import PageHeading from 'components/PageHeading';
@@ -137,7 +137,7 @@ export function Page({
           />
         </Head>
       )}
-      {/*<SocialBanner />*/}
+      <SocialBanner />
       <TopNav
         section={section}
         routeTree={routeTree}

src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -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.
         }
       ),
     })

src/components/MDX/ErrorDecoder.tsx

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

src/components/MDX/MDXComponents.tsx

@@ -6,6 +6,7 @@ import {Children, useContext, useMemo} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import type {HTMLAttributes} from 'react';
+import Image from 'next/image';
 
 import CodeBlock from './CodeBlock';
 import {CodeDiagram} from './CodeDiagram';
@@ -285,9 +286,11 @@ function Illustration({
   return (
     <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
-        <img
+        <Image
           src={src}
           alt={alt}
+          width={700}
+          height={300}
           style={{maxHeight: 300}}
           className="rounded-lg"
         />
@@ -321,11 +324,12 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img
+        <Image
           className="text-primary"
           src={info.src}
           alt={info.alt}
-          height={info.height}
+          width={700}
+          height={info.height || 300}
         />
       </div>
       {info.caption ? (
@@ -455,9 +459,17 @@ function YouTubeIframe(props: any) {
   );
 }
 
-function Image(props: any) {
+function CustomImage(props: any) {
   const {alt, ...rest} = props;
-  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
+  return (
+    <Image
+      alt={alt}
+      className="max-w-[calc(min(700px,100%))]"
+      width={700}
+      height={400}
+      {...rest}
+    />
+  );
 }
 
 export const MDXComponents = {
@@ -474,7 +486,7 @@ export const MDXComponents = {
   h5: H5,
   hr: Divider,
   a: Link,
-  img: Image,
+  img: CustomImage,
   BlogCard,
   code: InlineCode,
   pre: CodeBlock,

src/components/MDX/Sandpack/template.ts

@@ -28,8 +28,8 @@ root.render(
           eject: 'react-scripts eject',
         },
         dependencies: {
-          react: '19.0.0-rc-3edc000d-20240926',
-          'react-dom': '19.0.0-rc-3edc000d-20240926',
+          react: '^19.1.0',
+          'react-dom': '^19.1.0',
           'react-scripts': '^5.0.0',
         },
       },

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';

src/components/SocialBanner.tsx

@@ -7,7 +7,7 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Únete a la React Conf del 15 al 16 de mayo.';
+const bannerText = 'Únete a la React Conf del 7 al 8 de Octubre.';
 const bannerLink = 'https://conf.react.dev/';
 const bannerLinkText = 'Más información.';