Merge pull request #485 from reactjs/sync-5e9d673c

Sync with reactjs.org @ 5e9d673

Author: koba04

.circleci/config.yml

@@ -19,7 +19,7 @@ jobs:
           node-version: "14.x"
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1.6.0
+        uses: bahmutov/npm-install@v1.7.10
         with:
           working-directory: 'beta'
 

.github/workflows/analyze.yml

@@ -1,6 +1,9 @@
-name: Beta Site Lint
+name: Beta Site Lint / Heading ID check
 
 on:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
   pull_request:
     types: [opened, synchronize, reopened]
 
@@ -18,7 +21,7 @@ jobs:
           node-version: 12.x
 
       - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1.6.0
+        uses: bahmutov/npm-install@v1.7.10
         with:
           working-directory: 'beta'
 

.github/workflows/beta_site_lint.yml

@@ -1,6 +1,9 @@
-name: Build
+name: Lint / Flow check
 
 on:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
   pull_request:
     types: [opened, synchronize, reopened]
 
@@ -18,7 +21,7 @@ jobs:
           node-version: 12.x
 
       - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1.6.0
+        uses: bahmutov/npm-install@v1.7.10
 
       - name: Lint codebase
         run: yarn ci-check

.github/workflows/nodejs.yml

@@ -55,7 +55,7 @@ The documentation is divided into several sections with a different tone and pur
 1. `git push my-fork-name the-name-of-my-branch`
 1. Go to the [ja.reactjs.org repo](https://github.com/reactjs/ja.reactjs.org) and you should see recently pushed branches.
 1. Follow GitHub's instructions.
-1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change.
+1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
 
 ## Translation
 

README.md

@@ -1,2 +0,0 @@
-NEXT_PUBLIC_HJ_SITE_ID = 2411683
-NEXT_PUBLIC_HJ_SITE_V = 6

beta/.env.development

@@ -1,2 +1 @@
-NEXT_PUBLIC_HJ_SITE_ID = 2411651
-NEXT_PUBLIC_HJ_SITE_V = 6
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'

beta/.env.production

@@ -1,10 +1,13 @@
 {
   "root": true,
-  "extends": "next",
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "no-unused-vars": "warn"
+  },
   "env": {
     "node": true,
     "commonjs": true,
     "browser": true,
     "es6": true
   }
-}
+}

beta/.eslintrc

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+tsconfig.tsbuildinfo
 
 # debug
 npm-debug.log*

beta/.gitignore

@@ -2,7 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 cd beta
-# yarn generate-ids
-# git add -u src/pages/**/*.md
-yarn prettier
-yarn lint:fix
+yarn lint-staged

beta/.husky/pre-commit

@@ -3,5 +3,19 @@
   "singleQuote": true,
   "bracketSameLine": true,
   "trailingComma": "es5",
-  "printWidth": 80
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css"
+      }
+    },
+    {
+      "files": "*.md",
+      "options": {
+        "parser": "mdx"
+      }
+    }
+  ]
 }

beta/.prettierrc

@@ -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/reference)** 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)** 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/CONTRIBUTING.md

@@ -56,7 +56,7 @@ The documentation is divided into several sections with a different tone and pur
 1. `git push my-fork-name the-name-of-my-branch`
 1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
 1. Follow GitHub's instructions.
-1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change.
+1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
 
 ## Translation
 

beta/README.md

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

beta/next-env.d.ts

@@ -11,17 +11,12 @@ module.exports = {
   experimental: {
     plugins: true,
     // TODO: this doesn't work because https://github.com/vercel/next.js/issues/30714
-    // concurrentFeatures: true,
+    concurrentFeatures: false,
     scrollRestoration: true,
   },
   async redirects() {
     return redirects.redirects;
   },
-  env: {
-    // @todo Remove when https://github.com/vercel/next.js/pull/16529 lands
-    GA_TRACKING_ID: 'XXXX',
-    NEXT_PUBLIC_GA_TRACKING_ID: 'XXX',
-  },
   rewrites() {
     return [
       {
@@ -32,7 +27,7 @@ module.exports = {
   },
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
-      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+      const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
       config.plugins.push(
         new BundleAnalyzerPlugin({
           analyzerMode: 'static',

beta/next.config.js

@@ -6,37 +6,38 @@
   "scripts": {
     "analyze": "ANALYZE=true next build",
     "dev": "next",
-    "build": "next build && node ./scripts/generateRSS.js",
+    "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
-    "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"",
-    "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx}\"",
+    "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
+    "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
     "prettier": "yarn format:source",
     "prettier:diff": "yarn nit:source",
-    "generate-ids": "node scripts/generateHeadingIDs.js src/pages/",
-    "ci-check": "npm-run-all prettier:diff --parallel lint tsc",
+    "lint-heading-ids": "node scripts/headingIdLinter.js",
+    "fix-headings": "node scripts/headingIdLinter.js --fix",
+    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
     "tsc": "tsc --noEmit",
     "start": "next start",
-    "postinstall": "is-ci || (cd .. && husky install beta/.husky)",
+    "postinstall": "patch-package && (is-ci || (cd .. && husky install beta/.husky))",
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.1.20",
+    "@codesandbox/sandpack-react": "v0.14.3-experimental.1",
     "@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",
-    "@next/plugin-google-analytics": "^10.0.6",
     "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.3-canary.2",
+    "next": "^12.0.10",
     "parse-numeric-range": "^1.2.0",
-    "react": "18.0.0-alpha-930c9e7ee-20211015",
+    "react": "experimental",
     "react-collapsed": "3.1.0",
-    "react-dom": "18.0.0-alpha-930c9e7ee-20211015",
+    "react-dom": "experimental",
     "scroll-into-view-if-needed": "^2.2.25"
   },
   "devDependencies": {
@@ -52,7 +53,7 @@
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
     "asyncro": "^3.0.0",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
     "eslint": "7.x",
     "eslint-config-next": "12.0.3",
@@ -67,13 +68,14 @@
     "gray-matter": "^4.0.2",
     "husky": "^7.0.4",
     "is-ci": "^3.0.1",
+    "lint-staged": ">=10",
     "mdast-util-to-string": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.2.2",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.1",
+    "prettier": "^2.5.1",
     "reading-time": "^1.2.0",
     "remark": "^12.0.1",
     "remark-external-links": "^7.0.0",
@@ -84,7 +86,7 @@
     "retext": "^7.0.1",
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
-    "tailwindcss": "^2.2.7",
+    "tailwindcss": "^3.0.22",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"
@@ -96,5 +98,9 @@
     "budget": null,
     "budgetPercentIncreaseRed": 10,
     "showDetails": true
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx,css}": "yarn prettier",
+    "src/**/*.md": "yarn fix-headings"
   }
 }

beta/package.json

@@ -23,7 +23,7 @@ module.exports = async function (src) {
   const layoutMap = {
     blog: 'Post',
     learn: 'Learn',
-    reference: 'API',
+    apis: 'API',
   };
   const layout = layoutMap[pageParentDir] || 'Home';
   const code =

beta/patches/@next+plugin-google-analytics+9.5.2.patch

@@ -32,32 +32,26 @@ module.exports = ({
     visit(tree, 'heading', (node) => {
       const children = node.children;
       let tail = children[children.length - 1];
-
-      // A bit weird: this is to support MDX 2 comments in expressions,
-      // while we’re still on MDX 1, which doesn’t support them.
-      if (!tail || tail.type !== 'text' || tail.value !== '/}') {
-        return;
+      // Generate slugs on the fly (even if not specified in markdown)
+      // so that it's possible to copy anchor links in newly written content.
+      let id = slugs.slug(toString(node), maintainCase);
+      // However, for committed docs, we'll extract slug from the headers.
+      if (tail && tail.type === 'text' && tail.value === '/}') {
+        tail = children[children.length - 2];
+        if (tail && tail.type === 'emphasis') {
+          // Use custom ID instead.
+          id = toString(tail);
+          // Until we're on MDX 2, we need to "cut off" the comment syntax.
+          tail = children[children.length - 3];
+          if (tail && tail.type === 'text' && tail.value.endsWith('{/')) {
+            // Remove the emphasis and trailing `/}`
+            children.splice(children.length - 2, 2);
+            // Remove the `{/`
+            tail.value = tail.value.replace(/[ \t]*\{\/$/, '');
+          }
+        }
       }
 
-      tail = children[children.length - 2];
-
-      if (!tail && tail.type !== 'emphasis') {
-        return;
-      }
-
-      const id = toString(tail);
-
-      tail = children[children.length - 3];
-
-      if (!tail || tail.type !== 'text' || !tail.value.endsWith('{/')) {
-        return;
-      }
-
-      // Remove the emphasis and trailing `/}`
-      children.splice(children.length - 2, 2);
-      // Remove the `{/`
-      tail.value = tail.value.replace(/[ \t]*\{\/$/, '');
-
       const data = patch(node, 'data', {});
 
       patch(data, 'id', id);