Sync with react.dev @ 3364c93f

.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/npm-install@v1.7.10

.github/workflows/site_lint.yml

@@ -11,14 +11,14 @@ 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
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 20.x
 
       - name: Install deps and build (with cache)
         uses: bahmutov/npm-install@v1.7.10

next.config.js

@@ -9,10 +9,10 @@ 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,

package.json

@@ -32,12 +32,12 @@
     "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": "^0.0.0-experimental-16d053d59-20230506",
     "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1",
-    "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
+    "react-dom": "^0.0.0-experimental-16d053d59-20230506",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"
   },
@@ -98,7 +98,7 @@
     "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,10 +15,10 @@ 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 mr-1 hover:underline">
+                  {crumb.title}
                 </Link>
                 <span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
                   <svg

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-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>
-      </a>
+        <span className="block text-lg group-hover:underline">{title}</span>
+      </span>
     </NextLink>
   );
 }

src/components/Layout/Footer.tsx

@@ -388,8 +388,8 @@ function FooterLink({
 
   return (
     <div>
-      <NextLink href={href}>
-        <a className={classes}>{children}</a>
+      <NextLink href={href} className={classes}>
+        {children}
       </NextLink>
     </div>
   );

src/components/Layout/HomeContent.js

@@ -1186,21 +1186,22 @@ async function Talks({ confId }) {
 
 function useNestedScrollLock(ref) {
   useEffect(() => {
+    let node = ref.current;
     let isLocked = false;
     let lastScroll = performance.now();
 
     function handleScroll() {
       if (!isLocked) {
         isLocked = true;
-        ref.current.style.pointerEvents = 'none';
+        node.style.pointerEvents = 'none';
       }
       lastScroll = performance.now();
     }
 
     function updateLock() {
       if (isLocked && performance.now() - lastScroll > 150) {
         isLocked = false;
-        ref.current.style.pointerEvents = '';
+        node.style.pointerEvents = '';
       }
     }
 
@@ -1274,7 +1275,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
     <div className="mx-auto max-w-3xl shadow-nav dark:shadow-nav-dark relative overflow-hidden w-full dark:border-opacity-10 rounded-2xl">
       <div className="w-full h-14 rounded-t-2xl shadow-outer-border backdrop-filter overflow-hidden backdrop-blur-lg backdrop-saturate-200 bg-white bg-opacity-90 z-10 absolute top-0 px-3 gap-2 flex flex-row items-center">
         <div className="select-none h-8 relative bg-gray-30/20 text-sm text-tertiary text-center rounded-full w-full flex-row flex space-between items-center">
-          <div className="h-4 w-6" />
+          {hasRefresh && <div className="h-4 w-6" />}
           <div className="w-full leading-snug flex flex-row items-center justify-center">
             <svg
               className="text-tertiary mr-1 opacity-60"

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -49,44 +49,43 @@ export function SidebarLink({
     target = '_blank';
   }
   return (
-    <Link href={href}>
-      <a
-        ref={ref}
-        title={title}
-        target={target}
-        aria-current={selected ? 'page' : undefined}
-        className={cn(
-          'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
-          {
-            'text-sm pl-6': level > 0,
-            'pl-5': level < 2,
-            'text-base font-bold': level === 0,
-            'text-primary dark:text-primary-dark': level === 0 && !selected,
-            'text-base text-secondary dark:text-secondary-dark':
-              level > 0 && !selected,
-            'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
-              selected,
-            'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
-              isPending,
-          }
-        )}>
-        {/* This here needs to be refactored ofc */}
+    <Link
+      href={href}
+      ref={ref}
+      title={title}
+      target={target}
+      aria-current={selected ? 'page' : undefined}
+      className={cn(
+        'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+        {
+          'text-sm pl-6': level > 0,
+          'pl-5': level < 2,
+          'text-base font-bold': level === 0,
+          'text-primary dark:text-primary-dark': level === 0 && !selected,
+          'text-base text-secondary dark:text-secondary-dark':
+            level > 0 && !selected,
+          'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
+            selected,
+          'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
+            isPending,
+        }
+      )}>
+      {/* This here needs to be refactored ofc */}
+      <span
+        className={cn({
+          'text-gray-400 dark:text-gray-500': wip,
+        })}>
+        {title}
+      </span>
+      {isExpanded != null && !hideArrow && (
         <span
-          className={cn({
-            'text-gray-400 dark:text-gray-500': wip,
+          className={cn('pr-1', {
+            'text-link dark:text-link-dark': isExpanded,
+            'text-tertiary dark:text-tertiary-dark': !isExpanded,
           })}>
-          {title}
+          <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
         </span>
-        {isExpanded != null && !hideArrow && (
-          <span
-            className={cn('pr-1', {
-              'text-link dark:text-link-dark': isExpanded,
-              'text-tertiary dark:text-tertiary-dark': !isExpanded,
-            })}>
-            <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
-          </span>
-        )}
-      </a>
+      )}
     </Link>
   );
 }

src/components/Layout/TopNav/TopNav.tsx

@@ -90,15 +90,17 @@ const githubIcon = (
   </svg>
 );
 
-function Link({href, children, ...props}: JSX.IntrinsicElements['a']) {
+function Link({
+  href,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   return (
-    <NextLink href={`${href}`}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-      <a
-        className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
-        {...props}>
-        {children}
-      </a>
+    <NextLink
+      href={`${href}`}
+      className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
+      {...props}>
+      {children}
     </NextLink>
   );
 }
@@ -247,16 +249,15 @@ export default function TopNav({
                 {isOpen ? <IconClose /> : <IconHamburger />}
               </button>
               <div className="3xl:flex-1 flex align-center">
-                <NextLink href="/">
-                  <a
-                    className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
-                    <Logo
-                      className={cn(
-                        'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
-                      )}
-                    />
-                    <span className="sr-only 3xl:not-sr-only">React</span>
-                  </a>
+                <NextLink
+                  href="/"
+                  className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
+                  <Logo
+                    className={cn(
+                      'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
+                    )}
+                  />
+                  <span className="sr-only 3xl:not-sr-only">React</span>
                 </NextLink>
               </div>
             </div>