Implement new client-side router

package.json

@@ -128,7 +128,7 @@
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jest": "24.3.5",
     "eslint-plugin-react": "7.23.2",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react-hooks": "4.5.0",
     "event-stream": "4.0.1",
     "execa": "2.0.3",
     "express": "4.17.0",

packages/next/build/webpack/loaders/next-app-loader.ts

@@ -1,63 +1,93 @@
-import path from 'path'
 import type webpack from 'webpack5'
 import { NODE_RESOLVE_OPTIONS } from '../../webpack-config'
 import { getModuleBuildInfo } from './get-module-build-info'
 
-function pathToUrlPath(pathname: string) {
-  let urlPath = pathname.replace(/^private-next-app-dir/, '')
-
-  // For `app/layout.js`
-  if (urlPath === '') {
-    urlPath = '/'
-  }
-
-  return urlPath
-}
-
-async function resolvePathsByPage({
-  name,
+async function createTreeCodeFromPath({
   pagePath,
   resolve,
+  removeExt,
 }: {
-  name: 'layout' | 'loading'
   pagePath: string
   resolve: (pathname: string) => Promise<string | undefined>
+  removeExt: (pathToRemoveExtensions: string) => string
 }) {
-  const paths = new Map<string, string | undefined>()
-  const parts = pagePath.split('/')
+  let tree: undefined | string
+  const splittedPath = pagePath.split('/')
+  const appDirPrefix = splittedPath[0]
+
+  const segments = ['', ...splittedPath.slice(1)]
   const isNewRootLayout =
-    parts[1]?.length > 2 && parts[1]?.startsWith('(') && parts[1]?.endsWith(')')
+    segments[0]?.length > 2 &&
+    segments[0]?.startsWith('(') &&
+    segments[0]?.endsWith(')')
+
+  let isCustomRootLayout = false
 
-  for (let i = parts.length; i >= 0; i--) {
-    const pathWithoutSlashLayout = parts.slice(0, i).join('/')
+  // segment.length - 1 because arrays start at 0 and we're decrementing
+  for (let i = segments.length - 1; i >= 0; i--) {
+    const segment = removeExt(segments[i])
+    const segmentPath = segments.slice(0, i + 1).join('/')
 
-    if (!pathWithoutSlashLayout) {
+    // First item in the list is the page which can't have layouts by itself
+    if (i === segments.length - 1) {
+      // Use '' for segment as it's the page. There can't be a segment called '' so this is the safest way to add it.
+      tree = `['', {}, {page: () => require('${pagePath}')}]`
       continue
     }
-    const layoutPath = `${pathWithoutSlashLayout}/${name}`
-    let resolvedLayoutPath = await resolve(layoutPath)
-    let urlPath = pathToUrlPath(pathWithoutSlashLayout)
+
+    // For segmentPath === '' avoid double `/`
+    const layoutPath = `${appDirPrefix}${segmentPath}/layout`
+    // For segmentPath === '' avoid double `/`
+    const loadingPath = `${appDirPrefix}${segmentPath}/loading`
+
+    const resolvedLayoutPath = await resolve(layoutPath)
+    const resolvedLoadingPath = await resolve(loadingPath)
 
     // if we are in a new root app/(root) and a custom root layout was
     // not provided or a root layout app/layout is not present, we use
     // a default root layout to provide the html/body tags
-    const isCustomRootLayout = name === 'layout' && isNewRootLayout && i === 2
-
-    if (
-      name === 'layout' &&
-      (isCustomRootLayout || i === 1) &&
-      !resolvedLayoutPath
-    ) {
-      resolvedLayoutPath = await resolve('next/dist/lib/app-layout')
-    }
-    paths.set(urlPath, resolvedLayoutPath)
+    isCustomRootLayout = isNewRootLayout && i === 1
+
+    // Existing tree are the children of the current segment
+    const children = tree
+
+    tree = `['${segment}', {
+      ${
+        // When there are no children the current index is the page component
+        children ? `children: ${children},` : ''
+      }
+    }, {
+      ${
+        resolvedLayoutPath
+          ? `layout: () => require('${resolvedLayoutPath}'),`
+          : ''
+      }
+      ${
+        resolvedLoadingPath
+          ? `loading: () => require('${resolvedLoadingPath}'),`
+          : ''
+      }
+    }]`
 
     // if we're in a new root layout don't add the top-level app/layout
     if (isCustomRootLayout) {
       break
     }
   }
-  return paths
+
+  return `const tree = ${tree};`
+}
+
+function createAbsolutePath(appDir: string, pathToTurnAbsolute: string) {
+  return pathToTurnAbsolute.replace(/^private-next-app-dir/, appDir)
+}
+
+function removeExtensions(
+  extensions: string[],
+  pathToRemoveExtensions: string
+) {
+  const regex = new RegExp(`(${extensions.join('|')})$`.replace(/\./g, '\\.'))
+  return pathToRemoveExtensions.replace(regex, '')
 }
 
 const nextAppLoader: webpack.LoaderDefinitionFunction<{
@@ -71,7 +101,7 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
   const buildInfo = getModuleBuildInfo((this as any)._module)
   buildInfo.route = {
     page: name.replace(/^app/, ''),
-    absolutePagePath: appDir + pagePath.replace(/^private-next-app-dir/, ''),
+    absolutePagePath: createAbsolutePath(appDir, pagePath),
   }
 
   const extensions = pageExtensions.map((extension) => `.${extension}`)
@@ -81,89 +111,40 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
   }
   const resolve = this.getResolve(resolveOptions)
 
-  const loadingPaths = await resolvePathsByPage({
-    name: 'loading',
-    pagePath: pagePath,
-    resolve: async (pathname) => {
-      try {
-        return await resolve(this.rootContext, pathname)
-      } catch (err: any) {
-        if (err.message.includes("Can't resolve")) {
-          return undefined
-        }
-        throw err
-      }
-    },
-  })
-
-  const loadingComponentsCode = []
-  for (const [loadingPath, resolvedLoadingPath] of loadingPaths) {
-    if (resolvedLoadingPath) {
-      this.addDependency(resolvedLoadingPath)
-      // use require so that we can bust the require cache
-      const codeLine = `'${loadingPath}': () => require('${resolvedLoadingPath}')`
-      loadingComponentsCode.push(codeLine)
-    } else {
+  const resolver = async (pathname: string) => {
+    try {
+      const resolved = await resolve(this.rootContext, pathname)
+      this.addDependency(resolved)
+      return resolved
+    } catch (err: any) {
+      const absolutePath = createAbsolutePath(appDir, pathname)
       for (const ext of extensions) {
-        this.addMissingDependency(
-          path.join(appDir, loadingPath, `layout${ext}`)
-        )
-      }
-    }
-  }
-
-  const layoutPaths = await resolvePathsByPage({
-    name: 'layout',
-    pagePath: pagePath,
-    resolve: async (pathname) => {
-      try {
-        return await resolve(this.rootContext, pathname)
-      } catch (err: any) {
-        if (err.message.includes("Can't resolve")) {
-          return undefined
-        }
-        throw err
+        const absolutePathWithExtension = `${absolutePath}${ext}`
+        this.addMissingDependency(absolutePathWithExtension)
       }
-    },
-  })
-
-  const componentsCode = []
-  for (const [layoutPath, resolvedLayoutPath] of layoutPaths) {
-    if (resolvedLayoutPath) {
-      this.addDependency(resolvedLayoutPath)
-      // use require so that we can bust the require cache
-      const codeLine = `'${layoutPath}': () => require('${resolvedLayoutPath}')`
-      componentsCode.push(codeLine)
-    } else {
-      for (const ext of extensions) {
-        this.addMissingDependency(path.join(appDir, layoutPath, `layout${ext}`))
+      if (err.message.includes("Can't resolve")) {
+        return undefined
       }
+      throw err
     }
   }
 
-  // Add page itself to the list of components
-  componentsCode.push(
-    `'${pathToUrlPath(pagePath).replace(
-      new RegExp(`(${extensions.join('|')})$`),
-      ''
-      // use require so that we can bust the require cache
-    )}': () => require('${pagePath}')`
-  )
+  const treeCode = await createTreeCodeFromPath({
+    pagePath,
+    resolve: resolver,
+    removeExt: (p) => removeExtensions(extensions, p),
+  })
 
   const result = `
-    export const components = {
-        ${componentsCode.join(',\n')}
-    };
-
-    export const loadingComponents = {
-      ${loadingComponentsCode.join(',\n')}
-    };
+    export ${treeCode}
 
     export const AppRouter = require('next/dist/client/components/app-router.client.js').default
     export const LayoutRouter = require('next/dist/client/components/layout-router.client.js').default
+    export const hooksClientContext = require('next/dist/client/components/hooks-client-context.js')
 
     export const __next_app_webpack_require__ = __webpack_require__
   `
+
   return result
 }
 

packages/next/client/app-index.tsx

@@ -10,13 +10,6 @@ import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-we
 
 export const version = process.env.__NEXT_VERSION
 
-// History replace has to happen on bootup to ensure `state` is always populated in popstate event
-window.history.replaceState(
-  { url: window.location.toString() },
-  '',
-  window.location.toString()
-)
-
 const appElement: HTMLElement | Document | null = document
 
 let reactRoot: any = null