Merge pull request #313 from reactjs/sync-6d965422

Sync with reactjs.org @ 6d96542

Author: bugtender

.nvmrc

@@ -1 +1 @@
-12.16.1
+12.22.0

README.md

@@ -8,7 +8,7 @@ This repo contains the source code and documentation powering [reactjs.org](http
 
 1. Git
 1. Node: any 12.x version starting with v12.0.0 or greater
-1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
+1. Yarn v1: 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 [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine
 

beta/.gitignore

@@ -33,3 +33,8 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# external fonts
+public/fonts/Optimistic_Display_W_Lt.woff2
+public/fonts/Optimistic_Display_W_Md.woff2
+public/fonts/Optimistic_Display_W_Bd.woff2

beta/next.config.js

@@ -6,25 +6,30 @@ const path = require('path');
 const {remarkPlugins} = require('./plugins/markdownToHtml');
 const redirects = require('./src/redirects.json');
 
-module.exports = {
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   experimental: {
     plugins: true,
-    // TODO: this doesn't work because https://github.com/vercel/next.js/issues/30714
-    concurrentFeatures: false,
     scrollRestoration: true,
+    legacyBrowsers: false,
+    browsersListForSwc: true,
   },
   async redirects() {
     return redirects.redirects;
   },
-  rewrites() {
-    return [
-      {
-        source: '/feed.xml',
-        destination: '/_next/static/feed.xml',
-      },
-    ];
-  },
+  // TODO: this causes extra router.replace() on every page.
+  // Let's disable until we figure out what's going on.
+  // rewrites() {
+  //   return [
+  //     {
+  //       source: '/feed.xml',
+  //       destination: '/_next/static/feed.xml',
+  //     },
+  //   ];
+  // },
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
       const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -38,6 +43,27 @@ module.exports = {
       );
     }
 
+    // Don't bundle the shim unnecessarily.
+    config.resolve.alias['use-sync-external-store/shim'] = 'react';
+
+    const {IgnorePlugin} = require('webpack');
+    config.plugins.push(
+      new IgnorePlugin({
+        checkResource(resource, context) {
+          if (
+            /\/eslint\/lib\/rules$/.test(context) &&
+            /\.\/[\w-]+(\.js)?$/.test(resource)
+          ) {
+            // Skips imports of built-in rules that ESLint
+            // tries to carry into the bundle by default.
+            // We only want the engine and the React rules.
+            return true;
+          }
+          return false;
+        },
+      })
+    );
+
     // Add our custom markdown loader in order to support frontmatter
     // and layout
     config.module.rules.push({
@@ -57,3 +83,5 @@ module.exports = {
     return config;
   },
 };
+
+module.exports = nextConfig;

beta/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "analyze": "ANALYZE=true next build",
     "dev": "next",
-    "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js",
+    "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js && node ./scripts/downloadFonts.js",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "v0.14.3-experimental.1",
+    "@codesandbox/sandpack-react": "v0.19.8-experimental.4",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
@@ -33,23 +33,24 @@
     "debounce": "^1.2.1",
     "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
-    "next": "^12.0.10",
+    "next": "12.1.7-canary.11",
     "parse-numeric-range": "^1.2.0",
-    "react": "experimental",
+    "react": "0.0.0-experimental-82c64e1a4-20220520",
     "react-collapsed": "3.1.0",
-    "react-dom": "experimental",
+    "react-dom": "0.0.0-experimental-82c64e1a4-20220520",
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {
     "@mdx-js/loader": "^1.6.16",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
+    "@types/debounce": "^1.2.1",
     "@types/github-slugger": "^1.3.0",
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
     "asyncro": "^3.0.0",

beta/patches/@codesandbox+sandpack-react+0.14.3-experimental.1.patch renamed to beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-index 4acfc3a..d00e57d 100644
+index ced9bd3..7e5e366 100644
 --- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
 +++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
 @@ -566,17 +566,16 @@ var REACT_TEMPLATE = {

beta/scripts/downloadFonts.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+const {execSync} = require('child_process');
+
+// So that we don't need to check them into the repo.
+// Serving them from the same domain is better for perf so do this on deploy.
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2 --output public/fonts/Optimistic_Display_W_Lt.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2 --output public/fonts/Optimistic_Display_W_Md.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2'
+);

beta/src/components/Layout/Feedback.tsx

@@ -4,8 +4,7 @@
 
 import * as React from 'react';
 import {useRouter} from 'next/router';
-// @ts-ignore
-import galite from 'ga-lite';
+import {ga} from '../../utils/analytics';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
   const {pathname} = useRouter();
@@ -48,7 +47,7 @@ const thumbsDownIcon = (
 function sendGAEvent(isPositive: boolean) {
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
-  galite(
+  ga(
     'send',
     'event',
     'button',

beta/src/components/Layout/Nav/MobileNav.tsx

@@ -57,7 +57,10 @@ export function MobileNav() {
           API
         </TabButton>
       </div>
-      <SidebarRouteTree routeTree={tree as RouteItem} isMobile={true} />
+      {/* No fallback UI so need to be careful not to suspend directly inside. */}
+      <React.Suspense fallback={null}>
+        <SidebarRouteTree routeTree={tree as RouteItem} isMobile={true} />
+      </React.Suspense>
     </>
   );
 }

beta/src/components/Layout/Page.tsx

@@ -26,14 +26,17 @@ export function Page({routeTree, children}: PageProps) {
               <Sidebar />
             </div>
 
-            <div className="flex flex-1 w-full h-full self-stretch">
-              <div className="w-full min-w-0">
-                <main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
-                  {children}
-                  <Footer />
-                </main>
+            {/* No fallback UI so need to be careful not to suspend directly inside. */}
+            <React.Suspense fallback={null}>
+              <div className="flex flex-1 w-full h-full self-stretch">
+                <div className="w-full min-w-0">
+                  <main className="flex flex-1 self-stretch mt-16 sm:mt-10 flex-col items-end justify-around">
+                    {children}
+                    <Footer />
+                  </main>
+                </div>
               </div>
-            </div>
+            </React.Suspense>
           </div>
         </SidebarContext.Provider>
       </MenuProvider>

beta/src/components/Layout/Sidebar/Sidebar.tsx

@@ -42,7 +42,10 @@ export function Sidebar() {
         {isMobileSidebar ? (
           <MobileNav />
         ) : (
-          <SidebarRouteTree routeTree={routeTree} />
+          /* No fallback UI so need to be careful not to suspend directly inside. */
+          <React.Suspense fallback={null}>
+            <SidebarRouteTree routeTree={routeTree} />
+          </React.Suspense>
         )}
       </nav>
       <div className="sticky bottom-0 hidden lg:block">

beta/src/components/Layout/Sidebar/SidebarLink.tsx

@@ -21,6 +21,7 @@ interface SidebarLinkProps {
   isExpanded?: boolean;
   isBreadcrumb?: boolean;
   hideArrow?: boolean;
+  isPending: boolean;
 }
 
 export function SidebarLink({
@@ -32,6 +33,7 @@ export function SidebarLink({
   isExpanded,
   isBreadcrumb,
   hideArrow,
+  isPending,
 }: SidebarLinkProps) {
   const ref = React.useRef<HTMLAnchorElement>(null);
   const isMobile = useIsMobile();
@@ -67,8 +69,11 @@ export function SidebarLink({
               !selected && !heading,
             '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-60 bg-gray-3 dark:hover:bg-gray-60 hover:bg-gray-3':
+              isPending,
           }
         )}>
+        {/* This here needs to be refactored ofc */}
         {title}
         {isExpanded != null && !heading && !hideArrow && (
           <span

beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -11,6 +11,7 @@ import {useRouteMeta} from '../useRouteMeta';
 import {SidebarLink} from './SidebarLink';
 import useCollapse from 'react-collapsed';
 import {useLayoutEffect} from 'react';
+import usePendingRoute from 'hooks/usePendingRoute';
 
 interface SidebarRouteTreeProps {
   isMobile?: boolean;
@@ -77,8 +78,9 @@ export function SidebarRouteTree({
 }: SidebarRouteTreeProps) {
   const {breadcrumbs} = useRouteMeta(routeTree);
   const {pathname} = useRouter();
-  const slug = pathname;
+  const pendingRoute = usePendingRoute();
 
+  const slug = pathname;
   const currentRoutes = routeTree.routes as RouteItem[];
   const expandedPath = currentRoutes.reduce(
     (acc: string | undefined, curr: RouteItem) => {
@@ -121,6 +123,7 @@ export function SidebarRouteTree({
               <SidebarLink
                 key={`${title}-${path}-${level}-link`}
                 href={pagePath}
+                isPending={pendingRoute === pagePath}
                 selected={selected}
                 level={level}
                 title={title}
@@ -143,6 +146,7 @@ export function SidebarRouteTree({
         return (
           <li key={`${title}-${path}-${level}-link`}>
             <SidebarLink
+              isPending={pendingRoute === pagePath}
               href={pagePath}
               selected={selected}
               level={level}

beta/src/components/Layout/Toc.tsx

@@ -28,7 +28,7 @@ export function Toc({
       <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
         On this page
       </h2>
-      <div className="toc h-full overflow-y-auto pl-4">
+      <div className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]">
         <ul className="space-y-2 pb-16">
           {headings &&
             headings.length > 0 &&
@@ -65,17 +65,6 @@ export function Toc({
             })}
         </ul>
       </div>
-      <style jsx global>{`
-        .toc {
-          /** Screen - nav - toc offset */
-          max-height: calc(100vh - 7.5rem);
-        }
-        .toc-link > code {
-          overflow-wrap: break-word;
-          white-space: pre-wrap;
-          font-size: 90%;
-        }
-      `}</style>
     </nav>
   );
 }

beta/src/components/Layout/useMediaQuery.tsx

@@ -7,7 +7,7 @@ import {useState, useCallback, useEffect} from 'react';
 const useMediaQuery = (width: number) => {
   const [targetReached, setTargetReached] = useState(false);
 
-  const updateTarget = useCallback((e) => {
+  const updateTarget = useCallback((e: MediaQueryListEvent) => {
     if (e.matches) {
       setTargetReached(true);
     } else {

beta/src/components/Layout/useTocHighlight.tsx

@@ -9,7 +9,7 @@ const TOP_OFFSET = 75;
 
 export function getHeaderAnchors(): HTMLAnchorElement[] {
   return Array.prototype.filter.call(
-    document.getElementsByClassName(siteConfig.headerIdConfig.className),
+    document.getElementsByClassName('mdx-header-anchor'),
     function (testElement) {
       return (
         testElement.parentNode.nodeName === 'H1' ||

beta/src/components/MDX/Challenges/Navigation.tsx

@@ -6,7 +6,7 @@ import React, {createRef} from 'react';
 import cn from 'classnames';
 import {IconChevron} from 'components/Icon/IconChevron';
 import {ChallengeContents} from './Challenges';
-const debounce = require('debounce');
+import {debounce} from 'debounce';
 
 export function Navigation({
   challenges,
@@ -122,7 +122,7 @@ export function Navigation({
           onClick={handleScrollRight}
           aria-label="Scroll right"
           className={cn(
-            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-r-lg',
+            'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-r',
             {
               'text-primary dark:text-primary-dark': canScrollRight,
               'text-gray-30': !canScrollRight,