Merge branch 'main' of https://github.com/reactjs/react.dev into sync…

…-fcd00068

.env.development

@@ -1 +0,0 @@
-SANDPACK_BARE_COMPONENTS=true 

.env.production

@@ -1,2 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
-SANDPACK_BARE_COMPONENTS=true 
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'

.eslintrc

@@ -5,7 +5,8 @@
   "plugins": ["@typescript-eslint"],
   "rules": {
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "warn"
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+    "react-hooks/exhaustive-deps": "error"
   },
   "env": {
     "node": true,

.github/workflows/analyze.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: '20.x'
 
       - name: Install dependencies
         uses: bahmutov/[email protected]
@@ -38,7 +38,7 @@ jobs:
       # Here's the first place where next-bundle-analysis' own script is used
       # This step pulls the raw bundle stats for the current bundle
       - name: Analyze bundle
-        run: npx -p nextjs-bundle-analysis report
+        run: npx -p nextjs-bundle-analysis@0.5.0 report
 
       - name: Upload bundle
         uses: actions/upload-artifact@v2

.github/workflows/analyze_comment.yml

@@ -47,26 +47,9 @@ jobs:
           pr_number=$(cat pr_number/pr_number)
           echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
 
-      - name: Find Comment
-        uses: peter-evans/find-comment@v1
-        if: success()
-        id: fc
-        with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE -->"
-
-      - name: Create Comment
-        uses: peter-evans/[email protected]
-        if: success() && steps.fc.outputs.comment-id == 0
-        with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-
-      - name: Update Comment
-        uses: peter-evans/[email protected]
-        if: success() && steps.fc.outputs.comment-id != 0
+      - name: Comment
+        uses: marocchino/sticky-pull-request-comment@v2
         with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          edit-mode: replace
+          header: next-bundle-analysis
+          number: ${{ steps.get-comment-body.outputs.pr-number }}
+          message: ${{ steps.get-comment-body.outputs.body }}

.github/workflows/site_lint.yml

@@ -11,17 +11,17 @@ jobs:
   lint:
     runs-on: ubuntu-latest
 
-    name: Lint on node 12.x and ubuntu-latest
+    name: Lint on node 20.x and ubuntu-latest
 
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 12.x
+          node-version: 20.x
 
       - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1.7.10
+        uses: bahmutov/npm-install@v1.8.32
 
       - name: Lint codebase
         run: yarn ci-check

next.config.js

@@ -9,14 +9,12 @@ const nextConfig = {
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   reactStrictMode: true,
   experimental: {
-    plugins: true,
+    // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed
+    appDir: false,
     scrollRestoration: true,
     legacyBrowsers: false,
-    browsersListForSwc: true,
-  },
-  env: {
-    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
   },
+  env: {},
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
       const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -35,10 +33,6 @@ const nextConfig = {
 
     const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
     config.plugins.push(
-      new NormalModuleReplacementPlugin(
-        /^@stitches\/core$/,
-        require.resolve('./src/utils/emptyShim.js')
-      ),
       new NormalModuleReplacementPlugin(
         /^raf$/,
         require.resolve('./src/utils/rafShim.js')

package.json

@@ -22,22 +22,21 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.15.5",
+    "@codesandbox/sandpack-react": "2.6.0",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
-    "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
-    "next": "12.3.2-canary.7",
+    "next": "^13.4.1",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
-    "react": "0.0.0-experimental-cb5084d1c-20220924",
-    "react-collapsed": "npm:@gaearon/[email protected]",
-    "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
+    "react": "^0.0.0-experimental-16d053d59-20230506",
+    "react-collapsed": "4.0.4",
+    "react-dom": "^0.0.0-experimental-16d053d59-20230506",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"
   },
@@ -92,13 +91,13 @@
     "retext": "^7.0.1",
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
-    "tailwindcss": "^3.0.22",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "engines": {
-    "node": ">=12.x"
+    "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
   },
   "nextBundleAnalysis": {
     "budget": null,

patches/next+13.4.1.patch

@@ -0,0 +1,22 @@
+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)=>{

src/components/Breadcrumbs.tsx

@@ -15,12 +15,12 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
           !crumb.skipBreadcrumb && (
             <div className="flex mb-3 mt-0.5 items-center" key={i}>
               <Fragment key={crumb.path}>
-                <Link href={crumb.path}>
-                  <a className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
-                    {crumb.title}
-                  </a>
+                <Link
+                  href={crumb.path}
+                  className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase me-1 hover:underline">
+                  {crumb.title}
                 </Link>
-                <span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
+                <span className="inline-block me-1 text-link dark:text-link-dark text-lg rtl:rotate-180">
                   <svg
                     width="20"
                     height="20"

src/components/ButtonLink.tsx

@@ -21,7 +21,7 @@ function ButtonLink({
   label,
   target = '_self',
   ...props
-}: JSX.IntrinsicElements['a'] & ButtonLinkProps) {
+}: React.AnchorHTMLAttributes<HTMLAnchorElement> & ButtonLinkProps) {
   const classes = cn(
     className,
     'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',
@@ -34,10 +34,13 @@ function ButtonLink({
     }
   );
   return (
-    <NextLink href={href as string}>
-      <a className={classes} {...props} aria-label={label} target={target}>
-        {children}
-      </a>
+    <NextLink
+      href={href as string}
+      className={classes}
+      {...props}
+      aria-label={label}
+      target={target}>
+      {children}
     </NextLink>
   );
 }

src/components/DocsFooter.tsx

@@ -66,25 +66,24 @@ function FooterLink({
   type: 'Previous' | 'Next';
 }) {
   return (
-    <NextLink href={href}>
-      <a
-        className={cn(
-          'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
-          {
-            'flex-row-reverse justify-self-end text-right': type === 'Next',
-          }
-        )}>
-        <IconNavArrow
-          className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
-          displayDirection={type === 'Previous' ? 'left' : 'right'}
-        />
-        <span>
-          <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
-            {type}
-          </span>
-          <span className="block text-lg group-hover:underline">{title}</span>
+    <NextLink
+      href={href}
+      className={cn(
+        'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
+        {
+          'flex-row-reverse justify-self-end text-end': type === 'Next',
+        }
+      )}>
+      <IconNavArrow
+        className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
+        displayDirection={type === 'Previous' ? 'start' : 'end'}
+      />
+      <span>
+        <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
+          {type}
         </span>
-      </a>
+        <span className="block text-lg group-hover:underline">{title}</span>
+      </span>
     </NextLink>
   );
 }

src/components/Icon/IconArrow.tsx

@@ -7,7 +7,12 @@ import cn from 'classnames';
 
 export const IconArrow = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'left' | 'right' | 'up' | 'down';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
   }
 >(function IconArrow({displayDirection, className, ...rest}) {
   return (
@@ -20,6 +25,7 @@ export const IconArrow = memo<
       {...rest}
       className={cn(className, {
         'rotate-180': displayDirection === 'right',
+        'rotate-180 rtl:rotate-0': displayDirection === 'end',
       })}>
       <path fill="none" d="M0 0h24v24H0z" />
       <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />

src/components/Icon/IconArrowSmall.tsx

@@ -7,11 +7,17 @@ import cn from 'classnames';
 
 export const IconArrowSmall = memo<
   JSX.IntrinsicElements['svg'] & {
-    displayDirection: 'left' | 'right' | 'up' | 'down';
+    /**
+     * The direction the arrow should point.
+     * `start` and `end` are relative to the current locale.
+     * for example, in LTR, `start` is left and `end` is right.
+     */
+    displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
   }
 >(function IconArrowSmall({displayDirection, className, ...rest}) {
   const classes = cn(className, {
     'rotate-180': displayDirection === 'left',
+    'rotate-180 rtl:rotate-0': displayDirection === 'start',
     'rotate-90': displayDirection === 'down',
   });
   return (