Merge branch 'main' of https://github.com/reactjs/reactjs.org into sy…

…nc-196edb30

.github/labeler.yml

@@ -0,0 +1,2 @@
+beta:
+- beta/**/*

.github/workflows/analyze.yml

@@ -0,0 +1,96 @@
+name: Analyze Bundle
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  workflow_dispatch:
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14.x"
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1.6.0
+        with:
+          working-directory: 'beta'
+
+      - name: Restore next build
+        uses: actions/cache@v2
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          path: beta/.next/cache
+          # change this if you prefer a more strict cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Build next.js app
+        # change this if your site requires a custom build command
+        run: ./node_modules/.bin/next build
+        working-directory: beta
+
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
+      - name: Analyze bundle
+        run: npx -p nextjs-bundle-analysis report
+        working-directory: beta
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v2
+        with:
+          path: beta/.next/analyze/__bundle_analysis.json
+          name: bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: bundle_analysis_upload.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          name: bundle_analysis.json
+          path: beta/.next/analyze/base/bundle
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+        working-directory: beta
+
+      - name: Upload analysis comment
+        uses: actions/upload-artifact@v2
+        with:
+          name: analysis_comment.txt
+          path: beta/.next/analyze/__bundle_analysis_comment.txt
+
+      - name: Save PR number
+        run: echo ${{ github.event.number }} > ./pr_number
+
+      - name: Upload PR number
+        uses: actions/upload-artifact@v2
+        with:
+          name: pr_number
+          path: ./pr_number
+
+      # The actual commenting happens in the other action, matching the guidance in
+      # https://securitylab.github.com/research/github-actions-preventing-pwn-requests/

.github/workflows/analyze_comment.yml

@@ -0,0 +1,72 @@
+name: Analyze Bundle (Comment)
+
+on:
+  workflow_run:
+    workflows: ["Analyze Bundle"]
+    types:
+      - completed
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: >
+      ${{ github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: analyze.yml
+          run_id: ${{ github.event.workflow_run.id }}
+          name: analysis_comment.txt
+          path: analysis_comment.txt
+
+      - name: Download PR number
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: analyze.yml
+          run_id: ${{ github.event.workflow_run.id }}
+          name: pr_number
+          path: pr_number
+
+      - name: Get comment body
+        id: get-comment-body
+        if: success()
+        run: |
+          pr_number=$(cat pr_number/pr_number)
+          body=$(cat analysis_comment.txt/__bundle_analysis_comment.txt)
+          body="## Size Changes
+          <details>
+
+          ${body}
+          
+          </details>"
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo ::set-output name=body::$body
+          echo ::set-output name=pr-number::$pr_number
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        if: success()
+        id: fc
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body-includes: "<!-- __NEXTJS_BUNDLE -->"
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/label.yml

@@ -0,0 +1,22 @@
+# This workflow will triage pull requests and apply a label based on the
+# paths that are modified in the pull request.
+#
+# To use this workflow, you will need to set up a .github/labeler.yml
+# file with configuration.  For more information, see:
+# https://github.com/actions/labeler
+
+name: Labeler
+on: [pull_request_target]
+
+jobs:
+  label:
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+    - uses: actions/labeler@v2
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/nodejs.yml

@@ -18,7 +18,7 @@ jobs:
           node-version: 12.x
 
       - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1
+        uses: bahmutov/npm-install@v1.6.0
 
       - name: Lint codebase
         run: yarn ci-check

beta/package.json

@@ -89,5 +89,10 @@
   },
   "engines": {
     "node": ">=12.x"
+  },
+  "nextBundleAnalysis": {
+    "budget": null,
+    "budgetPercentIncreaseRed": 10,
+    "showDetails": true
   }
-}
+}

beta/src/components/Layout/Page.tsx

@@ -18,7 +18,7 @@ export function Page({routeTree, children}: PageProps) {
     <MenuProvider>
       <SidebarContext.Provider value={routeTree}>
         <div className="h-auto lg:h-screen flex flex-row">
-          <div className="h-auto lg:h-full overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-0 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
+          <div className="no-bg-scrollbar h-auto lg:h-full lg:overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-0 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
             <Nav />
             <Sidebar />
           </div>

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

@@ -77,14 +77,14 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
         role="navigation"
         ref={menuRef}
         style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-        className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-16 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
+        className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
         {isMobileSidebar ? (
           <MobileNav />
         ) : (
           <SidebarRouteTree routeTree={routeTree} />
         )}
       </nav>
-      <div className="px-5 py-3 sticky bottom-0 lg:px-5 w-full hidden md:flex items-center bg-gradient-to-t from-wash dark:from-wash-dark">
+      <div className="px-5 py-3 sticky bottom-0 lg:px-5 w-full hidden lg:flex items-center bg-gradient-to-t from-wash dark:from-wash-dark">
         <Button
           className="w-full text-center justify-center"
           onClick={handleFeedback}>

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

@@ -3,12 +3,15 @@
  */
 
 import React from 'react';
+// @ts-ignore
+import {flushSync} from 'react-dom';
 import {
   useSandpack,
   useActiveCode,
   SandpackCodeEditor,
   SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
+import scrollIntoView from 'scroll-into-view-if-needed';
 
 import {IconChevron} from 'components/Icon/IconChevron';
 import {NavigationBar} from './NavigationBar';
@@ -23,6 +26,7 @@ export function CustomPreset({
   onReset: () => void;
 }) {
   const lineCountRef = React.useRef<{[key: string]: number}>({});
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const {sandpack} = useSandpack();
   const {code} = useActiveCode();
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -43,7 +47,9 @@ export function CustomPreset({
 
   return (
     <>
-      <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
+      <div
+        className="shadow-lg dark:shadow-lg-dark rounded-lg"
+        ref={containerRef}>
         <NavigationBar showDownload={isSingleFile} onReset={onReset} />
         <SandpackThemeProvider theme={CustomTheme}>
           <div
@@ -75,7 +81,19 @@ export function CustomPreset({
               <button
                 translate="yes"
                 className="flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
-                onClick={() => setIsExpanded((prevExpanded) => !prevExpanded)}>
+                onClick={() => {
+                  const nextIsExpanded = !isExpanded;
+                  flushSync(() => {
+                    setIsExpanded(nextIsExpanded);
+                  });
+                  if (!nextIsExpanded && containerRef.current !== null) {
+                    scrollIntoView(containerRef.current, {
+                      scrollMode: 'if-needed',
+                      block: 'nearest',
+                      inline: 'nearest',
+                    });
+                  }
+                }}>
                 <span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
                   <IconChevron
                     className="inline mr-1.5 text-xl"

beta/src/components/Search.tsx

@@ -42,7 +42,6 @@ const options = {
   appId: siteConfig.algolia.appId,
   apiKey: siteConfig.algolia.apiKey,
   indexName: siteConfig.algolia.indexName,
-  rednerModal: true,
 };
 let DocSearchModal: any = null;
 export const Search: React.FC<SearchProps> = ({
@@ -120,6 +119,7 @@ export const Search: React.FC<SearchProps> = ({
         createPortal(
           <DocSearchModal
             {...options}
+            initialScrollY={window.scrollY}
             searchParameters={searchParameters}
             onClose={onClose}
             navigator={{

beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md

@@ -481,7 +481,7 @@ To check that your fix worked, try changing the value of `imageSize` to `'b'`. T
 You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
 
 1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.pictureSize + '.jpg'` produces the correct URL string
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
 3. `}` closes the JavaScript expression
 
 <Sandpack>

beta/src/styles/index.css

@@ -105,6 +105,55 @@
     from { opacity: 0.5; }
     to   { opacity: 1; }
   }
+
+  /*
+   * Hopefully when scrollbar-color lands everywhere,
+   * (and not just in FF), we'll be able to keep just this.
+   */
+  html .no-bg-scrollbar {
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+  }
+  html.dark .no-bg-scrollbar {
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  }
+  /*
+   * Until then, we have ... this.
+   * If you're changing this, make sure you've tested:
+   * - Different browsers (Chrome, Safari, FF)
+   * - Dark and light modes
+   * - System scrollbar settings ("always on" vs "when scrolling")
+   * - Switching between modes should never jump width
+   * - When you interact with a sidebar, it should always be visible
+   * - For each combination, test overflowing and non-overflowing sidebar
+   * I've spent hours picking these so I expect no less diligence from you.
+   */
+  html .no-bg-scrollbar::-webkit-scrollbar,
+  html .no-bg-scrollbar::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  html .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
+  html .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
+  html .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
+  html .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border: 4px solid transparent;
+    background-clip: content-box;
+    border-radius: 10px;
+  }
+  html .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
+  html .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
+    background-color: rgba(0, 0, 0, 0.35) !important;
+  }
+  html.dark .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
+  html.dark .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
+  html.dark .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
+  html.dark .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
+  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
+    background-color: rgba(255, 255, 255, 0.35) !important;
+  }
 }
 
 #_hj_feedback_container > div > button:not([aria-label="Close"]) {

beta/src/styles/sandpack.css

@@ -144,6 +144,10 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
   overflow: auto !important;
   padding: 18px 0 !important;
 }
+.sp-cm.sp-pristine .cm-gutters {
+  background-color: var(--sp-colors-bg-default);
+  z-index: 1;
+}
 .sp-layout {
   overflow: initial !important;
   border: 0px solid transparent !important;