merging all conflicts

.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/ur.reactjs.org) on your local machine
 
@@ -67,4 +67,4 @@ If your language does not have a translation and you would like to create one, p
 - `yarn reset` to clear the local cache
 
 ## License
-Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file.
+Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](LICENSE-DOCS.md) file.

beta/.env.development

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

beta/.env.production

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

beta/.eslintrc

@@ -1,8 +1,11 @@
 {
   "root": true,
   "extends": "next/core-web-vitals",
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
   "rules": {
-    "no-unused-vars": "warn"
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn"
   },
   "env": {
     "node": true,

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/.prettierignore

@@ -1,2 +1 @@
-src/pages/docs/**/*.md
-src/pages/blog/**/*.md
+src/content/**/*.md

beta/CONTRIBUTING.md

@@ -20,7 +20,7 @@ The documentation is divided into sections to cater to different learning styles
 
 **[Learn React](https://beta.reactjs.org/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.
 
-**[API Reference](https://reactjs.org/apis)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
+**[API Reference](https://reactjs.org/apis/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
 
 **Try to follow your own instructions.**
 

beta/README.md

@@ -1,6 +1,6 @@
 # reactjs.org
 
-This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/).
+This repo contains the source code and documentation powering [beta.reactjs.org](https://beta.reactjs.org/).
 
 
 ## Getting started

beta/next.config.js

@@ -2,29 +2,36 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-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'],
+  reactStrictMode: true,
   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,
+  },
+  env: {
+    SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
   },
   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,22 +45,41 @@ module.exports = {
       );
     }
 
-    // Add our custom markdown loader in order to support frontmatter
-    // and layout
-    config.module.rules.push({
-      test: /.mdx?$/, // load both .md and .mdx files
-      use: [
-        options.defaultLoaders.babel,
-        {
-          loader: '@mdx-js/loader',
-          options: {
-            remarkPlugins,
-          },
+    // Don't bundle the shim unnecessarily.
+    config.resolve.alias['use-sync-external-store/shim'] = 'react';
+
+    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')
+      ),
+      new NormalModuleReplacementPlugin(
+        /^process$/,
+        require.resolve('./src/utils/processShim.js')
+      ),
+      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;
         },
-        path.join(__dirname, './plugins/md-layout-loader'),
-      ],
-    });
+      })
+    );
 
     return config;
   },
 };
+
+module.exports = nextConfig;

beta/package.json

@@ -5,8 +5,8 @@
   "license": "CC",
   "scripts": {
     "analyze": "ANALYZE=true next build",
-    "dev": "next",
-    "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js",
+    "dev": "next-remote-watch ./src/content",
+    "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,36 +22,41 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "v0.14.3-experimental.1",
+    "@codesandbox/sandpack-react": "1.15.5",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
-    "@headlessui/react": "^1.3.0",
-    "@mdx-js/react": "^1.6.16",
+    "@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.0.10",
+    "next": "12.3.2-canary.7",
+    "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
-    "react": "experimental",
-    "react-collapsed": "3.1.0",
-    "react-dom": "experimental",
-    "scroll-into-view-if-needed": "^2.2.25"
+    "react": "0.0.0-experimental-cb5084d1c-20220924",
+    "react-collapsed": "npm:@gaearon/[email protected]",
+    "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
+    "remark-frontmatter": "^4.0.1",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
-    "@mdx-js/loader": "^1.6.16",
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@mdx-js/mdx": "^2.1.3",
     "@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",
-    "@typescript-eslint/eslint-plugin": "2.x",
-    "@typescript-eslint/parser": "2.x",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "asyncro": "^3.0.0",
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
@@ -62,14 +67,15 @@
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "2.x",
+    "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
     "gray-matter": "^4.0.2",
     "husky": "^7.0.4",
     "is-ci": "^3.0.1",
     "lint-staged": ">=10",
     "mdast-util-to-string": "^1.1.0",
+    "metro-cache": "0.72.2",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.2.2",
     "postcss": "^8.4.5",

beta/patches/@codemirror+lang-javascript+0.19.6.patch

@@ -0,0 +1,30 @@
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.cjs b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+index 4475e4f..e1255c9 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.cjs
++++ b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+@@ -135,7 +135,9 @@ const javascriptLanguage = language.LRLanguage.define({
+                 JSXText: highlight.tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": highlight.tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": highlight.tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": highlight.tags.standard(highlight.tags.tagName)
+             })
+         ]
+     }),
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.js b/node_modules/@codemirror/lang-javascript/dist/index.js
+index d089f6b..db09ea6 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.js
++++ b/node_modules/@codemirror/lang-javascript/dist/index.js
+@@ -131,7 +131,9 @@ const javascriptLanguage = /*@__PURE__*/LRLanguage.define({
+                 JSXText: tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": tags.standard(tags.tagName),
+             })
+         ]
+     }),

beta/patches/next+12.3.2-canary.7.patch

@@ -0,0 +1,22 @@
+diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js
+index 3a141de..72a8749 100644
+--- a/node_modules/next/dist/server/render.js
++++ b/node_modules/next/dist/server/render.js
+@@ -752,9 +752,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) {
+             // Enabling react concurrent rendering mode: __NEXT_REACT_ROOT = true
+             const renderShell = async (EnhancedApp, EnhancedComponent)=>{
+                 const content = renderContent(EnhancedApp, EnhancedComponent);
+-                return await (0, _nodeWebStreamsHelper).renderToInitialStream({
+-                    ReactDOMServer,
+-                    element: content
++                return new Promise((resolve, reject) => {
++                    (0, _nodeWebStreamsHelper).renderToInitialStream({
++                        ReactDOMServer,
++                        element: content,
++                        streamOptions: {
++                            onError: reject
++                        }
++                    }).then(resolve, reject);
+                 });
+             };
+             const createBodyResult = (initialStream, suffix)=>{

beta/patches/next-remote-watch+1.0.0.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch
+index c055b66..a2f749c 100755
+--- a/node_modules/next-remote-watch/bin/next-remote-watch
++++ b/node_modules/next-remote-watch/bin/next-remote-watch
+@@ -66,7 +66,10 @@ app.prepare().then(() => {
+             }
+           }
+
+-          app.server.hotReloader.send('reloadPage')
++          app.server.hotReloader.send({
++            event: 'serverOnlyChanges',
++            pages: ['/[[...markdownPath]]']
++          });
+         }
+       )
+   }