Merge remote-tracking branch 'upstream/canary' into blurry-placeholder

vercel · Apr 16, 2021 · c74a188 · c74a188
2 parents 274f8d0 + fe0583e
commit c74a188
Show file tree

Hide file tree

Showing 129 changed files with 4,050 additions and 779 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -16,4 +16,5 @@ packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
 test/integration/async-modules/**
-test-timings.json
+test-timings.json
+packages/next/lib/regexr/**/*
diff --git a/.github/actions/next-stats-action/src/add-comment.js b/.github/actions/next-stats-action/src/add-comment.js
@@ -83,7 +83,7 @@ module.exports = async function addComment(
         else if (!isGzipItem && !groupKey.match(gzipIgnoreRegex)) return
 
         if (
-          itemKey !== 'buildDuration' ||
+          !itemKey.startsWith('buildDuration') ||
           (isBenchmark && itemKey.match(/req\/sec/))
         ) {
           if (typeof mainItemVal === 'number') mainRepoTotal += mainItemVal

diff --git a/.github/actions/next-stats-action/src/run/index.js b/.github/actions/next-stats-action/src/run/index.js
@@ -26,6 +26,7 @@ async function runConfigs(
       let curStats = {
         General: {
           buildDuration: null,
+          buildDurationCached: null,
           nodeModulesSize: null,
         },
       }
@@ -55,20 +56,25 @@ async function runConfigs(
         )
       }
 
-      const buildStart = new Date().getTime()
+      const buildStart = Date.now()
       await exec(`cd ${statsAppDir} && ${statsConfig.appBuildCommand}`, false, {
         env: yarnEnvValues,
       })
-      curStats.General.buildDuration = new Date().getTime() - buildStart
+      curStats.General.buildDuration = Date.now() - buildStart
 
       // apply renames to get deterministic output names
       for (const rename of config.renames) {
         const results = await glob(rename.srcGlob, { cwd: statsAppDir })
-        if (results.length === 0 || results[0] === rename.dest) continue
-        await fs.move(
-          path.join(statsAppDir, results[0]),
-          path.join(statsAppDir, rename.dest)
-        )
+        for (const result of results) {
+          let dest = rename.removeHash
+            ? result.replace(/(\.|-)[0-9a-f]{20}(\.|-)/g, '$1HASH$2')
+            : rename.dest
+          if (result === dest) continue
+          await fs.move(
+            path.join(statsAppDir, result),
+            path.join(statsAppDir, dest)
+          )
+        }
       }
 
       const collectedStats = await collectStats(config, statsConfig)
@@ -80,19 +86,17 @@ async function runConfigs(
       const applyRenames = (renames, stats) => {
         if (renames) {
           for (const rename of renames) {
+            let { cur, prev } = rename
+            cur = path.basename(cur)
+            prev = path.basename(prev)
+
             Object.keys(stats).forEach((group) => {
-              Object.keys(stats[group]).forEach((item) => {
-                let { cur, prev } = rename
-                cur = path.basename(cur)
-                prev = path.basename(prev)
-
-                if (cur === item) {
-                  stats[group][prev] = stats[group][item]
-                  stats[group][prev + ' gzip'] = stats[group][item + ' gzip']
-                  delete stats[group][item]
-                  delete stats[group][item + ' gzip']
-                }
-              })
+              if (stats[group][cur]) {
+                stats[group][prev] = stats[group][cur]
+                stats[group][prev + ' gzip'] = stats[group][cur + ' gzip']
+                delete stats[group][cur]
+                delete stats[group][cur + ' gzip']
+              }
             })
           }
         }
@@ -146,6 +150,12 @@ async function runConfigs(
         /* eslint-disable-next-line */
         mainRepoStats = curStats
       }
+
+      const secondBuildStart = Date.now()
+      await exec(`cd ${statsAppDir} && ${statsConfig.appBuildCommand}`, false, {
+        env: yarnEnvValues,
+      })
+      curStats.General.buildDurationCached = Date.now() - secondBuildStart
     }
 
     logger(`Finished running: ${config.title}`)

diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -126,7 +126,7 @@ jobs:
       - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
-      - run: yarn add -W --dev spectron@7.0.0 electron@5.0.0
+      - run: cd test/integration/with-electron/app && yarn
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: xvfb-run node run-tests.js test/integration/with-electron/test/index.test.js

diff --git a/.github/workflows/test_react_experimental.yml b/.github/workflows/test_react_experimental.yml
@@ -0,0 +1,55 @@
+on:
+  schedule:
+    # * is a special character in YAML so you have to quote this string
+    - cron: '0 0,12 * * *'
+
+name: Test react@experimental
+
+jobs:
+  # build:
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v2
+
+  #     - run: yarn install --frozen-lockfile --check-files
+  #       env:
+  #         NEXT_TELEMETRY_DISABLED: 1
+
+  #     - run: yarn upgrade react@next react-dom@next -W --dev
+
+  #     - uses: actions/cache@v2
+  #       id: cache-build
+  #       with:
+  #         path: ./*
+  #         key: ${{ github.sha }}
+
+  testAll:
+    name: Test All
+    runs-on: ubuntu-latest
+    # needs: build
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_PRIVATE_REACT_MODE: concurrent
+      HEADLESS: true
+      NEXT_PRIVATE_SKIP_SIZE_TESTS: true
+    strategy:
+      fail-fast: false
+      matrix:
+        group: [1, 2, 3, 4, 5, 6]
+    steps:
+      # - uses: actions/cache@v2
+      #   id: restore-build
+      #   with:
+      #     path: ./*
+      #     key: ${{ github.sha }}
+
+      - uses: actions/checkout@v2
+
+      - run: yarn install --frozen-lockfile --check-files
+
+      - run: yarn upgrade react@experimental react-dom@experimental -W --dev
+
+      # TODO: remove after we fix watchpack watching too much
+      - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
+      - run: node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3
diff --git a/.github/workflows/test_react_next.yml b/.github/workflows/test_react_next.yml
@@ -30,6 +30,7 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
       HEADLESS: true
+      NEXT_PRIVATE_SKIP_SIZE_TESTS: true
     strategy:
       fail-fast: false
       matrix:

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
@@ -69,7 +69,7 @@ stages:
   - stage: Test
     dependsOn: Build
     jobs:
-      - job: test_ie11_production
+      - job: test_ie11
         pool:
           vmImage: 'windows-2019'
         steps:
@@ -86,7 +86,7 @@ stages:
               path: $(System.DefaultWorkingDirectory)
             displayName: Cache Build
           - script: |
-              yarn testie --forceExit test/integration/production/
+              yarn testie --forceExit test/integration/production/ test/integration/css-client-nav/
             displayName: 'Run tests'
 
       - job: test_unit

diff --git a/docs/advanced-features/custom-app.md b/docs/advanced-features/custom-app.md
@@ -44,6 +44,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 - If your app is running and you just added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
 - Adding a custom `getInitialProps` in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) in pages without [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation).
+- When you add `getInitialProps` in your custom app, you must `import App from "next/app"`, call `App.getInitialProps(appContext)` inside `getInitialProps` and merge the returned object into the return value.
 - `App` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).
 
 ### TypeScript

diff --git a/docs/advanced-features/preview-mode.md b/docs/advanced-features/preview-mode.md
@@ -9,19 +9,19 @@ description: Next.js has the preview mode for statically generated pages. You ca
 <details open>
   <summary><b>Examples</b></summary>
   <ul>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress">WordPress Example</a> (<a href="https://next-blog-wordpress.now.sh">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-datocms">DatoCMS Example</a> (<a href="https://next-blog-datocms.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape">TakeShape Example</a> (<a href="https://next-blog-takeshape.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-sanity">Sanity Example</a> (<a href="https://next-blog-sanity.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prismic">Prismic Example</a> (<a href="https://next-blog-prismic.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-contentful">Contentful Example</a> (<a href="https://next-blog-contentful.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-strapi">Strapi Example</a> (<a href="https://next-blog-strapi.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prepr">Prepr Example</a> (<a href="https://next-blog-prepr.now.sh/">Demo</a>)</li>    
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms">Agility CMS Example</a> (<a href="https://next-blog-agilitycms.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic">Cosmic Example</a> (<a href="https://next-blog-cosmic.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms">ButterCMS Example</a> (<a href="https://next-blog-buttercms.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok">Storyblok Example</a> (<a href="https://next-blog-storyblok.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms">GraphCMS Example</a> (<a href="https://next-blog-graphcms.now.sh/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress">WordPress Example</a> (<a href="https://next-blog-wordpress.vercel.app">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-datocms">DatoCMS Example</a> (<a href="https://next-blog-datocms.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape">TakeShape Example</a> (<a href="https://next-blog-takeshape.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-sanity">Sanity Example</a> (<a href="https://next-blog-sanity.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prismic">Prismic Example</a> (<a href="https://next-blog-prismic.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-contentful">Contentful Example</a> (<a href="https://next-blog-contentful.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-strapi">Strapi Example</a> (<a href="https://next-blog-strapi.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prepr">Prepr Example</a> (<a href="https://next-blog-prepr.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms">Agility CMS Example</a> (<a href="https://next-blog-agilitycms.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic">Cosmic Example</a> (<a href="https://next-blog-cosmic.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms">ButterCMS Example</a> (<a href="https://next-blog-buttercms.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok">Storyblok Example</a> (<a href="https://next-blog-storyblok.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms">GraphCMS Example</a> (<a href="https://next-blog-graphcms.vercel.app/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-kontent">Kontent Example</a> (<a href="https://next-blog-kontent.vercel.app//">Demo</a>)</li>
   </ul>
 </details>

diff --git a/docs/api-reference/next.config.js/headers.md b/docs/api-reference/next.config.js/headers.md
@@ -195,6 +195,9 @@ module.exports = {
           {
             type: 'query',
             key: 'page',
+            // the page value will not be available in the
+            // header key/values since value is provided and
+            // doesn't use a named capture group e.g. (?<page>home)
             value: 'home',
           },
           {

diff --git a/docs/api-reference/next.config.js/redirects.md b/docs/api-reference/next.config.js/redirects.md
@@ -135,6 +135,9 @@ module.exports = {
           {
             type: 'query',
             key: 'page',
+            // the page value will not be available in the
+            // destination since value is provided and doesn't
+            // use a named capture group e.g. (?<page>home)
             value: 'home',
           },
           {

diff --git a/docs/api-reference/next.config.js/rewrites.md b/docs/api-reference/next.config.js/rewrites.md
@@ -214,6 +214,9 @@ module.exports = {
           {
             type: 'query',
             key: 'page',
+            // the page value will not be available in the
+            // destination since value is provided and doesn't
+            // use a named capture group e.g. (?<page>home)
             value: 'home',
           },
           {
@@ -222,7 +225,7 @@ module.exports = {
             value: 'true',
           },
         ],
-        destination: '/:path*/:page',
+        destination: '/:path*/home',
       },
       // if the header `x-authorized` is present and
       // contains a matching value, this rewrite will be applied

diff --git a/docs/api-reference/next/router.md b/docs/api-reference/next/router.md
@@ -405,7 +405,7 @@ function Page({ router }) {
 export default withRouter(Page)
 ```
 
-### Typescript
+### TypeScript
 
 To use class components with `withRouter`, the component needs to accept a router prop:
 

diff --git a/docs/basic-features/built-in-css-support.md b/docs/basic-features/built-in-css-support.md
@@ -72,6 +72,7 @@ For importing CSS required by a third party component, you can do so in your com
 // components/ExampleDialog.js
 import { useState } from 'react'
 import { Dialog } from '@reach/dialog'
+import VisuallyHidden from '@reach/visually-hidden'
 import '@reach/dialog/styles.css'
 
 function ExampleDialog(props) {