fix: support appDir

.github/workflows/cypress-canary.yml → .github/workflows/e2e-canary.yml

@@ -6,17 +6,13 @@ on:
     branches:
       - main
     paths:
-      - 'demos/canary/**/*.{js,jsx,ts,tsx}'
-      - 'cypress/integration/canary/**/*.{ts,js}'
+      - 'test/e2e/canary/**/*.{js,jsx,ts,tsx}'
+      - 'demos/canary/**/*'
       - 'src/**/*.{ts,js}'
 jobs:
-  cypress:
-    name: Cypress
+  vitest:
+    name: Vitest
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        containers: [1, 2, 3, 4]
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -35,39 +31,31 @@ jobs:
           token: ${{ steps.get-token.outputs.token }}
           path: ./.github/actions/wait-for-netlify-deploy
 
+      - name: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: 'npm'
+
+      - name: Install npm dependencies
+        run: npm install
+
+      - name: Install Playwright dependencies
+        run: npm run playwright:install
+
       - name: Wait for Netlify Deploy
         id: deploy
         uses: ./.github/actions/wait-for-netlify-deploy
         with:
-          site-name: netlify-plugin-nextjs-demo
+          site-name: next-plugin-canary
           timeout: 300
 
       - name: Deploy successful
         if: ${{ steps.deploy.outputs.origin-url }}
         run: echo ${{ steps.deploy.outputs.origin-url }}
 
-      - name: Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16'
-
-      - run: npm install
-
-      - name: Cypress run
+      - name: Run e2e tests
         if: ${{ steps.deploy.outputs.origin-url }}
-        id: cypress
-        uses: cypress-io/github-action@v2
-        with:
-          browser: chrome
-          headless: true
-          record: true
-          parallel: true
-          config-file: cypress/config/canary.json
-          group: 'Next Runtime - Demo Canary'
-          spec: cypress/integration/canary/*
+        run: npm run test:e2e
         env:
-          DEBUG: '@cypress/github-action'
-          CYPRESS_baseUrl: ${{ steps.deploy.outputs.origin-url }}
-          CYPRESS_NETLIFY_CONTEXT: ${{ steps.deploy.outputs.context }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_RECORD_KEY: ${{ secrets.CANARY_CYPRESS_RECORD_KEY }}
+          SITE_URL: ${{ steps.deploy.outputs.origin-url }}

demos/canary/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

demos/canary/README.md

@@ -1,28 +1,2 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+Based on [Next.js app dir e2e tests](https://github.com/vercel/next.js/blob/canary/test/e2e/app-dir/app).
+[License](https://github.com/vercel/next.js/blob/canary/license.md).

demos/canary/app/(newroot)/dashboard/another/page.js

@@ -0,0 +1,7 @@
+export default function AnotherPage(props) {
+  return (
+    <>
+      <p>hello from newroot/dashboard/another</p>
+    </>
+  )
+}

demos/canary/app/(newroot)/dashboard/project/[projectId]/page.js

@@ -0,0 +1,19 @@
+import { experimental_use as use } from 'react'
+
+function getData({ params }) {
+  return {
+    now: Date.now(),
+    params,
+  }
+}
+
+export default function Page(props) {
+  const data = use(getData(props))
+
+  return (
+    <>
+      <p>/dashboard/project/[projectId]</p>
+      <p id="props">{JSON.stringify(data)}</p>
+    </>
+  )
+}

demos/canary/app/(newroot)/layout.js

@@ -0,0 +1,20 @@
+import { experimental_use as use } from 'react'
+
+async function getData() {
+  return {
+    world: 'world',
+  }
+}
+
+export default function Root({ children }) {
+  const { world } = use(getData())
+
+  return (
+    <html className="this-is-another-document-html">
+      <head>
+        <title>{`hello ${world}`}</title>
+      </head>
+      <body className="this-is-another-document-body">{children}</body>
+    </html>
+  )
+}

demos/canary/app/(rootonly)/dashboard/changelog/page.js

@@ -0,0 +1,7 @@
+export default function ChangelogPage(props) {
+  return (
+    <>
+      <p>hello from app/dashboard/changelog</p>
+    </>
+  )
+}

demos/canary/app/(rootonly)/dashboard/hello/page.js

@@ -0,0 +1,7 @@
+export default function HelloPage(props) {
+  return (
+    <>
+      <p>hello from app/dashboard/rootonly/hello</p>
+    </>
+  )
+}

demos/canary/app/catch-all/[...slug]/components/widget.js

@@ -0,0 +1,2 @@
+// components under catch-all should not throw errors
+export default () => <p id="widget">widget</p>

demos/canary/app/catch-all/[...slug]/page.js

@@ -0,0 +1,12 @@
+import Widget from './components/widget'
+
+export default function Page({ params }) {
+  return (
+    <>
+      <h1 id="text" data-params={params.slug.join('/') ?? ''}>
+        hello from /catch-all/{params.slug.join('/')}
+      </h1>
+      <Widget />
+    </>
+  )
+}

demos/canary/app/client-component-route/page.js

@@ -0,0 +1,20 @@
+'client'
+
+import { useState, useEffect } from 'react'
+
+import style from './style.module.css'
+import './style.css'
+
+export default function ClientComponentRoute() {
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    setCount(1)
+  }, [count])
+  return (
+    <>
+      <p className={style.red}>
+        hello from app/client-component-route. <b>count: {count}</b>
+      </p>
+    </>
+  )
+}

demos/canary/app/client-component-route/style.css

@@ -0,0 +1,3 @@
+b {
+  color: blue;
+}

demos/canary/app/client-component-route/style.module.css

@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}

demos/canary/app/client-nested/layout.js

@@ -0,0 +1,20 @@
+'client'
+
+import { useState, useEffect } from 'react'
+
+import styles from './style.module.css'
+import './style.css'
+
+export default function ClientNestedLayout({ children }) {
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    setCount(1)
+  }, [])
+  return (
+    <>
+      <h1 className={styles.red}>Client Nested. Count: {count}</h1>
+      <button onClick={() => setCount(count + 1)}>{count}</button>
+      {children}
+    </>
+  )
+}

demos/canary/app/client-nested/page.js

@@ -0,0 +1,7 @@
+export default function ClientPage() {
+  return (
+    <>
+      <p>hello from app/client-nested</p>
+    </>
+  )
+}

demos/canary/app/client-nested/style.css

@@ -0,0 +1,3 @@
+button {
+  color: red;
+}

demos/canary/app/client-nested/style.module.css

@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}

demos/canary/app/client-with-errors/get-server-side-props/page.js

@@ -0,0 +1,7 @@
+'client'
+
+// export function getServerSideProps() { { props: {} } }
+
+export default function Page() {
+  return 'client-gssp'
+}

demos/canary/app/client-with-errors/get-static-props/page.js

@@ -0,0 +1,7 @@
+'client'
+
+// export function getStaticProps() { return { props: {} }}
+
+export default function Page() {
+  return 'client-gsp'
+}

demos/canary/app/css/css-client/client-foo.css

@@ -0,0 +1,3 @@
+.foo {
+  color: blue;
+}

demos/canary/app/css/css-client/client-layout.css

@@ -0,0 +1,3 @@
+body {
+  background: cyan;
+}

demos/canary/app/css/css-client/client-page.css

@@ -0,0 +1,6 @@
+h1 {
+  color: red !important;
+}
+h1::after {
+  content: ' (from css-client!!!!)';
+}

demos/canary/app/css/css-client/foo.js

@@ -0,0 +1,5 @@
+import './client-foo.css'
+
+export default function Foo() {
+  return <b className="foo">foo</b>
+}

demos/canary/app/css/css-client/layout.js

@@ -0,0 +1,14 @@
+'client'
+
+import './client-layout.css'
+
+import Foo from './foo'
+
+export default function ServerLayout({ children }) {
+  return (
+    <>
+      {children}
+      <Foo />
+    </>
+  )
+}

demos/canary/app/css/css-client/page.js

@@ -0,0 +1,7 @@
+'client'
+
+import './client-page.css'
+
+export default function Page() {
+  return <h1>Page!!!</h1>
+}

demos/canary/app/css/css-nested/layout.js

@@ -0,0 +1,14 @@
+'client'
+
+import './style.css'
+import styles from './style.module.css'
+
+export default function ClientLayout({ children }) {
+  return (
+    <>
+      <div className={styles['client-css']}>Client Layout: CSS Modules</div>
+      <div className="client-css">Client Layout: Global CSS</div>
+      {children}
+    </>
+  )
+}