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>