Merge branch 'canary' into update/chokidar

Author: kodiakhq[bot]

.github/workflows/build_test_deploy.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
-      - run: node run-tests.js --timings --write-timings -g 1/4
+      - run: node run-tests.js --timings --write-timings -g 1/1
       - uses: actions/cache@v2
         id: cache-build
         with:
@@ -47,8 +47,25 @@ jobs:
           key: ${{ github.sha }}
       - run: ./check-pre-compiled.sh
 
-  testAll:
-    name: Test All
+  testUnit:
+    name: Test Unit
+    runs-on: ubuntu-latest
+    needs: build
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_JOB: 1
+      HEADLESS: true
+    steps:
+      - uses: actions/cache@v2
+        id: restore-build
+        with:
+          path: ./*
+          key: ${{ github.sha }}
+
+      - run: node run-tests.js --timings --type unit -g 1/1
+
+  testIntegration:
+    name: Test Integration
     runs-on: ubuntu-latest
     needs: build
     env:
@@ -116,7 +133,7 @@ jobs:
   testsPass:
     name: thank you, next
     runs-on: ubuntu-latest
-    needs: [lint, checkPrecompiled, testAll, testYarnPnP]
+    needs: [lint, checkPrecompiled, testIntegration, testUnit, testYarnPnP]
     steps:
       - run: exit 0
 

azure-pipelines.yml

@@ -14,9 +14,6 @@ stages:
           - script: dir
           - script: dir $(System.DefaultWorkingDirectory)
           - script: echo $(Build.SourceVersion)
-          - powershell: Set-MpPreference -ExclusionPath $(System.DefaultWorkingDirectory)
-          - powershell: Set-MpPreference -ExclusionPath $(Pipeline.Workspace)/.yarn
-          - powershell: Set-MpPreference -DisableIntrusionPreventionSystem $true -DisableIOAVProtection $true -DisableRealtimeMonitoring $true -DisableScriptScanning $true -EnableControlledFolderAccess Disabled -EnableNetworkProtection AuditMode -Force -MAPSReporting Disabled -SubmitSamplesConsent NeverSend
           - powershell: Get-MpComputerStatus
           - task: NodeTool@0
             inputs:
@@ -33,19 +30,17 @@ stages:
               yarn install --frozen-lockfile --check-files
             displayName: 'Install dependencies'
           - script: |
-              node run-tests.js --timings --write-timings --azure -g 1/4
+              node run-tests.js --timings --write-timings --azure -g 1/1
             displayName: 'Fetch test timing data'
+
   - stage: Test
     dependsOn: Build
     jobs:
-      - job: test_ie11
+      - job: test_ie11_production
         pool:
           vmImage: 'windows-2019'
         steps:
           - checkout: none
-          - powershell: Set-MpPreference -ExclusionPath $(System.DefaultWorkingDirectory)
-          - powershell: Set-MpPreference -ExclusionPath $(Pipeline.Workspace)/.yarn
-          - powershell: Set-MpPreference -DisableIntrusionPreventionSystem $true -DisableIOAVProtection $true -DisableRealtimeMonitoring $true -DisableScriptScanning $true -EnableControlledFolderAccess Disabled -EnableNetworkProtection AuditMode -Force -MAPSReporting Disabled -SubmitSamplesConsent NeverSend
           - task: NodeTool@0
             inputs:
               versionSpec: $(node_version)
@@ -60,7 +55,31 @@ stages:
           - script: |
               yarn testie --forceExit test/integration/production/
             displayName: 'Run tests'
-      - job: test_chrome
+
+      - job: test_unit
+        pool:
+          vmImage: 'windows-2019'
+        steps:
+          - checkout: none
+          - script: |
+              wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
+            displayName: 'List Chrome version'
+          - task: NodeTool@0
+            inputs:
+              versionSpec: $(node_version)
+            displayName: 'Install Node.js'
+          - task: Cache@2
+            inputs:
+              # use deterministic cache key that is specific
+              # to this test run
+              key: $(Build.SourceVersion)
+              path: $(System.DefaultWorkingDirectory)
+            displayName: Cache Build
+          - script: |
+              node run-tests.js -g 1/1 --timings --azure --type unit
+            displayName: 'Run tests'
+
+      - job: test_chrome_integration
         pool:
           vmImage: 'windows-2019'
         strategy:
@@ -75,9 +94,6 @@ stages:
               group: 4/4
         steps:
           - checkout: none
-          - powershell: Set-MpPreference -ExclusionPath $(System.DefaultWorkingDirectory)
-          - powershell: Set-MpPreference -ExclusionPath $(Pipeline.Workspace)/.yarn
-          - powershell: Set-MpPreference -DisableIntrusionPreventionSystem $true -DisableIOAVProtection $true -DisableRealtimeMonitoring $true -DisableScriptScanning $true -EnableControlledFolderAccess Disabled -EnableNetworkProtection AuditMode -Force -MAPSReporting Disabled -SubmitSamplesConsent NeverSend
           - script: |
               wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
             displayName: 'List Chrome version'

errors/next-head-count-missing.md

@@ -6,8 +6,6 @@ You have a custom `pages/_document.js` that doesn't have the components required
 
 #### Possible Ways to Fix It
 
-Upgrade Next.js to 9.5.4 or later, which does not require `next-head-count`.
-
-If you can't upgrade right now, ensure that your `_document.js` is importing and rendering all of the [required components](https://nextjs.org/docs/advanced-features/custom-document).
+Ensure that your `_document.js` is importing and rendering all of the [required components](https://nextjs.org/docs/advanced-features/custom-document).
 
 In this case you are most likely not rendering the `<Head>` component imported from `next/document`.

examples/cms-contentful/pages/index.js

@@ -36,7 +36,7 @@ export default function Index({ preview, allPosts }) {
 }
 
 export async function getStaticProps({ preview = false }) {
-  const allPosts = await getAllPostsForHome(preview)
+  const allPosts = (await getAllPostsForHome(preview)) ?? []
   return {
     props: { preview, allPosts },
   }

examples/image-component/components/view-source.js

@@ -1,26 +1,26 @@
 import { svg, arm } from './view-source.module.css'
 
 const ViewSource = ({ pathname }) => (
-  <a
-    title="View Source"
-    href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="80"
+    height="80"
+    viewBox="0 0 250 250"
+    fill="#151513"
+    className={svg}
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="80"
-      height="80"
-      viewBox="0 0 250 250"
-      fill="#151513"
-      className={svg}
+    <a
+      title="View Source"
+      href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
     >
       <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
       <path
         className={arm}
         d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
       />
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
-    </svg>
-  </a>
+    </a>
+  </svg>
 )
 
 export default ViewSource

examples/with-gsap/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.prettierrc
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-gsap/App.scss

@@ -0,0 +1,65 @@
+@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Poppins:300,400&display=swap');
+
+.header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 100px;
+  a {
+    margin: 0 28px;
+    text-decoration: none;
+    color: #181818;
+    font-size: 12px;
+    font-weight: 600;
+    font-family: 'Poppins';
+  }
+}
+
+.container {
+  position: relative;
+  width: 1280px;
+  min-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  .page {
+    position: absolute;
+    .inner {
+      display: flex;
+      justify-content: center;
+      h1 {
+        font-family: 'Bebas Neue';
+        font-size: 52px;
+        letter-spacing: 0.1rem;
+        .line-wrap {
+          overflow: hidden;
+          height: 66px;
+        }
+      }
+      p {
+        font-family: 'Poppins';
+        margin-top: 200px;
+        width: 340px;
+        font-weight: 300;
+        line-height: 24px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.page-enter {
+  opacity: 0;
+}
+.page-enter-active {
+  opacity: 1;
+  transition: opacity 400ms;
+  transition-delay: 600ms;
+}
+.page-exit {
+  opacity: 1;
+}
+.page-exit-active {
+  opacity: 0;
+  transition: opacity 400ms;
+}

examples/with-gsap/README.md

@@ -0,0 +1,21 @@
+# Example app with GSAP
+
+This example features how to use [GSAP](https://greensock.com/gsap/) as the animation library within a Next.js app.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-gsap)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-gsap with-gsap-app
+# or
+yarn create next-app --example with-gsap with-gsap-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-gsap/components/Content.js

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+
+const Content = () => {
+  let line1 = useRef(null)
+  useEffect(() => {
+    gsap.from([line1], 0.6, {
+      delay: 0.9,
+      ease: 'power3.out',
+      y: 24,
+      stagger: {
+        amount: 0.15,
+      },
+    })
+  }, [line1])
+
+  return (
+    <p ref={(el) => (line1 = el)} className="line">
+      A Simple example using{' '}
+      <a
+        href="https://greensock.com/gsap/"
+        style={{ fontWeight: 'bold', textDecoration: 'none' }}
+      >
+        GSAP
+      </a>{' '}
+      &{' '}
+      <a
+        href="https://www.npmjs.com/package/react-transition-group"
+        style={{ fontWeight: 'bold', textDecoration: 'none' }}
+      >
+        react-transition-group
+      </a>
+    </p>
+  )
+}
+
+export default Content

examples/with-gsap/components/Home.js

@@ -0,0 +1,19 @@
+import Title from './Title'
+import Content from './Content'
+
+const Home = () => {
+  return (
+    <div className="inner">
+      <Title lineContent="With-GSAP" lineContent2="Using NEXT" />
+      <div>
+        <div className="other">
+          {/* Does project report used question death, out more rhetoric unpleasing
+          what compared both of sentinels. */}
+          <Content />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home

examples/with-gsap/components/Title.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+
+const Title = ({ lineContent, lineContent2 }) => {
+  let line1 = useRef(null)
+  let line2 = useRef(null)
+  useEffect(() => {
+    gsap.from([line1, line2], 0.8, {
+      delay: 0.8,
+      ease: 'power3.out',
+      y: 64,
+      stagger: {
+        amount: 0.15,
+      },
+    })
+  }, [line1, line2])
+  return (
+    <h1 className="page-title">
+      <div className="line-wrap">
+        <div ref={(el) => (line1 = el)} className="line">
+          {lineContent}
+        </div>
+      </div>
+      <div className="line-wrap">
+        <div ref={(el) => (line2 = el)} className="line">
+          {lineContent2}
+        </div>
+      </div>
+    </h1>
+  )
+}
+
+export default Title