first commit

test/integration/app-tree/pages/_app.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import Link from 'next/link'
+import { createContext } from 'react'
+import { flushSync } from 'react-dom'
+import { createRoot } from 'react-dom/client'
+import App, { AppContext } from 'next/app'
+import { renderToString } from 'react-dom/server'
+
+export const DummyContext = createContext(null) as React.Context<string | null>
+
+export default class MyApp extends App<{ html: string }> {
+  static async getInitialProps({ Component, AppTree, ctx }: AppContext) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    let html: string
+    const toRender = <AppTree pageProps={pageProps} another="prop" />
+
+    if (typeof window !== 'undefined') {
+      const el = document.createElement('div')
+      document.querySelector('body')?.appendChild(el)
+      flushSync(() => {
+        createRoot(el).render(toRender)
+      })
+      html = el.innerHTML
+      el.remove()
+    } else {
+      html = renderToString(toRender)
+    }
+
+    return { pageProps, html }
+  }
+
+  render() {
+    const { Component, pageProps, html, router } = this.props
+    const href = router.pathname === '/' ? '/another' : '/'
+    const child =
+      html && router.pathname !== '/hello' ? (
+        <>
+          <div dangerouslySetInnerHTML={{ __html: html }} />
+          <Link href={href} id={href === '/' ? 'home' : 'another'}>
+            to{href}
+          </Link>
+        </>
+      ) : (
+        <Component {...pageProps} />
+      )
+
+    return (
+      <DummyContext.Provider value={'::ctx::'}>{child}</DummyContext.Provider>
+    )
+  }
+}

test/integration/app-tree/pages/another.js

@@ -0,0 +1,12 @@
+import { useRouter } from 'next/router'
+
+const Page = () => {
+  const { pathname } = useRouter()
+  return (
+    <>
+      <h3>page: {pathname}</h3>
+    </>
+  )
+}
+
+export default Page

test/integration/app-tree/pages/hello.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { flushSync } from 'react-dom'
+import { createRoot } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
+import { NextPage } from 'next'
+
+const Page: NextPage<{ html: string }> = ({ html }) =>
+  html ? (
+    <>
+      <p>saved:</p>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  ) : (
+    <p>Hello world</p>
+  )
+
+Page.getInitialProps = async ({ AppTree }) => {
+  let html: string
+
+  const toRender = <AppTree pageProps={{}} />
+
+  if (typeof window !== 'undefined') {
+    const el = document.createElement('div')
+    document.querySelector('body')?.appendChild(el)
+    flushSync(() => {
+      createRoot(el).render(toRender)
+    })
+    html = el.innerHTML
+    el.remove()
+  } else {
+    html = renderToString(toRender)
+  }
+
+  return { html }
+}
+
+export default Page

test/integration/app-tree/pages/index.js

@@ -0,0 +1,17 @@
+import { useContext } from 'react'
+import { DummyContext } from './_app'
+import { useRouter } from 'next/router'
+
+const Page = () => {
+  const { pathname } = useRouter()
+  const ctx = useContext(DummyContext)
+  if (ctx == null) throw new Error('context consumes failed')
+
+  return (
+    <>
+      <h3>page: {pathname}</h3>
+    </>
+  )
+}
+
+export default Page

test/integration/app-tree/test/index.test.ts

@@ -0,0 +1,78 @@
+/* eslint-env jest */
+
+import path from 'path'
+import webdriver from 'next-webdriver'
+import {
+  nextBuild,
+  nextStart,
+  findPort,
+  launchApp,
+  killApp,
+  renderViaHTTP,
+  waitFor,
+} from 'next-test-utils'
+
+const appDir = path.join(__dirname, '..')
+let appPort
+let app
+
+const runTests = () => {
+  it('should provide router context in AppTree on SSR', async () => {
+    let html = await renderViaHTTP(appPort, '/')
+    expect(html).toMatch(/page:.*?\//)
+
+    html = await renderViaHTTP(appPort, '/another')
+    expect(html).toMatch(/page:.*?\/another/)
+  })
+
+  it('should provide router context in AppTree on CSR', async () => {
+    // [TODO] currently turbopack-generated output takes long time between
+    // navigation, we'll optimize it in the future
+    const waitTime = process.env.TURBOPACK_BUILD ? 5000 : 500
+
+    const browser = await webdriver(appPort, '/')
+    let html = await browser.eval(`document.documentElement.innerHTML`)
+    expect(html).toMatch(/page:.*?\//)
+
+    browser.elementByCss('#another').click()
+    await waitFor(waitTime)
+    html = await browser.eval(`document.documentElement.innerHTML`)
+    expect(html).toMatch(/page:.*?\//)
+
+    browser.elementByCss('#home').click()
+    await waitFor(waitTime)
+    html = await browser.eval(`document.documentElement.innerHTML`)
+    expect(html).toMatch(/page:.*?\/another/)
+  })
+
+  it('should pass AppTree to NextPageContext', async () => {
+    const html = await renderViaHTTP(appPort, '/hello')
+    expect(html).toMatch(/saved:.*?Hello world/)
+  })
+}
+
+describe('AppTree', () => {
+  ;(process.env.TURBOPACK_BUILD ? describe.skip : describe)(
+    'development mode',
+    () => {
+      beforeAll(async () => {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+      })
+      afterAll(() => killApp(app))
+      runTests()
+    }
+  )
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      beforeAll(async () => {
+        await nextBuild(appDir)
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+      afterAll(() => killApp(app))
+      runTests()
+    }
+  )
+})

test/integration/app-tree/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
+}