docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ eb0ae24

Author: QC-L

.github/workflows/analyze.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/beta_site_lint.yml

@@ -1,6 +1,9 @@
 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/nodejs.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

beta/.husky/pre-commit

@@ -2,6 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 cd beta
-yarn lint-heading-ids
-yarn prettier
-yarn lint:fix
+yarn lint-staged

beta/.prettierrc

@@ -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/package.json

@@ -9,11 +9,11 @@
     "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",
-    "lint-heading-ids":"node scripts/headingIdLinter.js",
+    "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",
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "0.13.6-experimental.0",
+    "@codesandbox/sandpack-react": "0.13.9-experimental.6",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
@@ -32,7 +32,7 @@
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "^12.0.5",
+    "next": "^12.0.9",
     "parse-numeric-range": "^1.2.0",
     "react": "experimental",
     "react-collapsed": "3.1.0",
@@ -67,13 +67,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-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",
@@ -96,5 +97,9 @@
     "budget": null,
     "budgetPercentIncreaseRed": 10,
     "showDetails": true
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx,css}": "yarn prettier",
+    "*.md": "yarn fix-headings"
   }
 }

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

@@ -2,7 +2,8 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {MDXProvider} from '@mdx-js/react';
+// @ts-ignore
+import {MDXContext} from '@mdx-js/react';
 import recentPostsRouteTree from 'blogIndexRecent.json';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {ExternalLink} from 'components/ExternalLink';
@@ -87,7 +88,9 @@ function LayoutPost({meta, children}: LayoutPostProps) {
             </span>
           </p>
 
-          <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+          <MDXContext.Provider value={MDXComponents}>
+            {children}
+          </MDXContext.Provider>
           <DocsPageFooter
             route={route}
             nextRoute={nextRoute}

beta/src/components/Layout/LayoutPost.tsx

@@ -3,7 +3,8 @@
  */
 
 import * as React from 'react';
-import {MDXProvider} from '@mdx-js/react';
+// @ts-ignore
+import {MDXContext} from '@mdx-js/react';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {MDXComponents} from 'components/MDX/MDXComponents';
 import {Seo} from 'components/Seo';
@@ -49,9 +50,9 @@ export function MarkdownPage<
       }
       if (child.props.mdxType === 'Recipes') {
         return {
-          url: '#recipes',
+          url: '#' + (child.props.titleId ?? 'examples'),
           depth: 0,
-          text: 'Recipes',
+          text: child.props.titleText ?? 'Examples',
         };
       }
       if (child.props.mdxType === 'Recap') {
@@ -135,9 +136,9 @@ export function MarkdownPage<
         )}
         <div className="px-5 sm:px-12">
           <div className="max-w-7xl mx-auto">
-            <MDXProvider components={MDXComponents}>
+            <MDXContext.Provider value={MDXComponents}>
               {finalChildren}
-            </MDXProvider>
+            </MDXContext.Provider>
           </div>
           <DocsPageFooter
             route={route}

beta/src/components/Layout/MarkdownPage.tsx

@@ -14,6 +14,8 @@ import {IconArrowSmall} from '../../Icon/IconArrowSmall';
 interface ChallengesProps {
   children: React.ReactElement[];
   isRecipes?: boolean;
+  titleText?: string;
+  titleId?: string;
 }
 
 export interface ChallengeContents {
@@ -66,7 +68,12 @@ const parseChallengeContents = (
   return contents;
 };
 
-export function Challenges({children, isRecipes}: ChallengesProps) {
+export function Challenges({
+  children,
+  isRecipes,
+  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleId = isRecipes ? 'examples' : 'challenges',
+}: ChallengesProps) {
   const challenges = parseChallengeContents(children);
   const scrollAnchorRef = React.useRef<HTMLDivElement>(null);
 
@@ -112,12 +119,12 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
         )}>
         <div ref={scrollAnchorRef} className="py-2 px-5 sm:px-8 pb-0 md:pb-0">
           <H2
-            id={isRecipes ? 'recipes' : 'challenges'}
+            id={titleId}
             className={cn(
               'text-3xl mb-2 leading-10 relative',
               isRecipes ? 'text-purple-50 dark:text-purple-30' : 'text-link'
             )}>
-            {isRecipes ? 'Try out some recipes' : 'Try out some challenges'}
+            {titleText}
           </H2>
           {challenges.length > 1 && (
             <Navigation
@@ -132,8 +139,8 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
           <div key={activeChallenge}>
             <h3 className="text-xl text-primary dark:text-primary-dark mb-2">
               <div className="font-bold block md:inline">
-                {isRecipes ? 'Recipe' : 'Challenge'} {currentChallenge.order} of{' '}
-                {challenges.length}
+                {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order}{' '}
+                of {challenges.length}
                 <span className="text-primary dark:text-primary-dark">: </span>
               </div>
               {currentChallenge.name}
@@ -179,7 +186,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
                   setShowSolution(false);
                 }}
                 active>
-                Next {isRecipes ? 'Recipe' : 'Challenge'}
+                Next {isRecipes ? 'Example' : 'Challenge'}
                 <IconArrowSmall
                   displayDirection="right"
                   className="block ml-1.5"

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

@@ -135,8 +135,15 @@ function MathI({children}: {children: any}) {
   );
 }
 
-function YouWillLearn({children}: {children: any}) {
-  return <SimpleCallout title="You will learn">{children}</SimpleCallout>;
+function YouWillLearn({
+  children,
+  isChapter,
+}: {
+  children: any;
+  isChapter?: boolean;
+}) {
+  let title = isChapter ? 'In this chapter' : 'You will learn';
+  return <SimpleCallout title={title}>{children}</SimpleCallout>;
 }
 
 // TODO: typing.

beta/src/components/MDX/MDXComponents.tsx

@@ -74,7 +74,7 @@ ${css}
     <button
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
       onClick={downloadHTML}
-      title="Refresh Sandpack"
+      title="Download Sandbox"
       type="button">
       <IconArrowSmall
         displayDirection="down"

beta/src/components/MDX/Sandpack/DownloadButton.tsx

@@ -46,6 +46,7 @@ export function Preview({
     errorScreenRegisteredRef,
     openInCSBRegisteredRef,
     loadingScreenRegisteredRef,
+    status,
   } = sandpack;
 
   if (
@@ -67,30 +68,38 @@ export function Preview({
   errorScreenRegisteredRef.current = true;
   loadingScreenRegisteredRef.current = true;
 
-  React.useEffect(() => {
+  React.useEffect(function createBundler() {
     const iframeElement = iframeRef.current!;
     registerBundler(iframeElement, clientId.current);
 
-    const unsub = listen((message: any) => {
-      if (message.type === 'resize') {
-        setComputedAutoHeight(message.height);
-      } else if (message.type === 'start') {
-        if (message.firstLoad) {
-          setIsReady(false);
-        }
-      } else if (message.type === 'test') {
-        // Does it make sense that we're listening to "test" event?
-        // Not really. Does it cause less flicker than "done"? Yes.
-        setIsReady(true);
-      }
-    }, clientId.current);
-
     return () => {
-      unsub();
       unregisterBundler(clientId.current);
     };
   }, []);
 
+  React.useEffect(
+    function bundlerListener() {
+      const unsubscribe = listen((message: any) => {
+        if (message.type === 'resize') {
+          setComputedAutoHeight(message.height);
+        } else if (message.type === 'start') {
+          if (message.firstLoad) {
+            setIsReady(false);
+          }
+        } else if (message.type === 'done') {
+          setIsReady(true);
+        }
+      }, clientId.current);
+
+      return () => {
+        setIsReady(false);
+        setComputedAutoHeight(null);
+        unsubscribe();
+      };
+    },
+    [status === 'idle']
+  );
+
   const viewportStyle = computeViewportSize('auto', 'portrait');
   const overrideStyle = error
     ? {
@@ -175,7 +184,10 @@ export function Preview({
             <Error error={error} />
           </div>
         )}
-        <LoadingOverlay clientId={clientId.current} />
+        <LoadingOverlay
+          clientId={clientId.current}
+          loading={!isReady && iframeComputedHeight === null}
+        />
       </div>
     </div>
   );

beta/src/components/MDX/Sandpack/Preview.tsx

@@ -127,7 +127,9 @@ function Sandpack(props: SandpackProps) {
       <SandpackProvider
         template="react"
         customSetup={{...setup, files: files}}
-        autorun={autorun}>
+        autorun={autorun}
+        initMode="user-visible"
+        initModeObserverOptions={{rootMargin: '1400px 0px'}}>
         <CustomPreset
           isSingleFile={isSingleFile}
           showDevTools={showDevTools}