add parallel route and tests

example/.sst/outputs.json

@@ -1 +1,3 @@
-{}
+{
+  "frank-example-Site": {}
+}

packages/app-dir/app/page.tsx

@@ -30,6 +30,9 @@ export default function Home() {
         <Nav href={"/api"} title='API'>
           Calls an API endpoint defined in app/api/hello/route and middleware
         </Nav>
+        <Nav href={"/parallel"} title='Parallel'>
+          Parallel routing
+        </Nav>
       </main>
     </>
   )

packages/app-dir/app/parallel/@a/a-page/page.tsx

@@ -0,0 +1,3 @@
+export default function APage() {
+  return <div>A Page</div>
+}

packages/app-dir/app/parallel/@a/page.tsx

@@ -0,0 +1,9 @@
+import Link from "next/link";
+
+export default function A() {
+  return <div className="border p-4">
+    <h1>Parallel Route A</h1>
+    <Link href="/parallel/a-page">Go to a-page</Link>
+
+  </div>
+}

packages/app-dir/app/parallel/@b/b-page/page.tsx

@@ -0,0 +1,3 @@
+export default function BPage() {
+  return <div>B Page</div>
+}

packages/app-dir/app/parallel/@b/page.tsx

@@ -0,0 +1,9 @@
+import Link from "next/link";
+
+export default function B() {
+  return <div className="border p-4">
+    <h1>Parallel Route B</h1>
+
+    <Link href="/parallel/b-page">Go to b-page</Link>
+  </div>
+}

packages/app-dir/app/parallel/layout.tsx

@@ -0,0 +1,29 @@
+'use client'
+import { ReactNode, useState } from "react";
+
+export default function Layout({ a, b, children }: { children: ReactNode, a: ReactNode, b: ReactNode }) {
+  const [routeA, setRouteA] = useState(false)
+  const [routeB, setRouteB] = useState(false)
+
+  return <div>
+
+    <div className="flex flex-col mb-10">
+      <label htmlFor="a">
+        Enable A
+        <input name="a" type="checkbox" checked={routeA} onChange={(e) => {
+          setRouteA(e.target.checked)
+        }} />
+      </label>
+      <label htmlFor="b">
+        Enable B
+        <input name="b" type="checkbox" checked={routeB} onChange={(e) => {
+          setRouteB(e.target.checked)
+        }} />
+      </label>
+    </div>
+
+    {routeA && a}
+    {routeB && b}
+    {/* {children} */}
+  </div>
+}

packages/app-dir/app/parallel/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}

packages/core/api/index.ts

@@ -32,6 +32,8 @@ export async function getSongs() {
 
 export async function getSong(album: string, title: string) {
   return data.songs.find(
-    (song) => song.album === decodeURIComponent(album) && song.title === decodeURIComponent(title)
+    (song) =>
+      song.album === decodeURIComponent(album) &&
+      song.title === decodeURIComponent(title)
   );
 }

packages/core/sst-env.d.ts

@@ -0,0 +1 @@
+/// <reference path="../../example/.sst/types/index.ts" />

packages/open-next/src/build.ts

@@ -42,7 +42,6 @@ export async function build(opts: BuildOptions = {}) {
   // Initialize options
   options = normalizeOptions(opts);
 
-  console.log("~~hi");
   // Pre-build validation
   checkRunningInsideNextjsApp();
   printNextjsVersion();
@@ -131,7 +130,8 @@ function setStandaloneBuildMode(monorepoRoot: string) {
 function buildNextjsApp(packager: "npm" | "yarn" | "pnpm") {
   const { appPath } = options;
   const command =
-    options.buildCommand ?? (packager === "npm" ? "npm run build" : `${packager} build`);
+    options.buildCommand ??
+    (packager === "npm" ? "npm run build" : `${packager} build`);
   cp.execSync(command, {
     stdio: "inherit",
     cwd: appPath,
@@ -155,7 +155,10 @@ function printNextjsVersion() {
   const { appPath } = options;
   cp.spawnSync(
     "node",
-    ["-e", `"console.info('Next.js v' + require('next/package.json').version)"`],
+    [
+      "-e",
+      `"console.info('Next.js v' + require('next/package.json').version)"`,
+    ],
     {
       stdio: "inherit",
       cwd: appPath,
@@ -248,7 +251,9 @@ function createImageOptimizationBundle() {
   //       "@aws-sdk/client-s3" package which is not a dependency in user's
   //       Next.js app.
   esbuildSync({
-    entryPoints: [path.join(__dirname, "adapters", "image-optimization-adapter.js")],
+    entryPoints: [
+      path.join(__dirname, "adapters", "image-optimization-adapter.js"),
+    ],
     external: ["sharp", "next"],
     outfile: path.join(outputPath, "index.mjs"),
   });
@@ -301,10 +306,17 @@ function createStaticAssets() {
   // - .next/BUILD_ID => _next/BUILD_ID
   // - .next/static   => _next/static
   // - public/*       => *
-  fs.copyFileSync(path.join(appPath, ".next/BUILD_ID"), path.join(outputPath, "BUILD_ID"));
-  fs.cpSync(path.join(appPath, ".next/static"), path.join(outputPath, "_next", "static"), {
-    recursive: true,
-  });
+  fs.copyFileSync(
+    path.join(appPath, ".next/BUILD_ID"),
+    path.join(outputPath, "BUILD_ID")
+  );
+  fs.cpSync(
+    path.join(appPath, ".next/static"),
+    path.join(outputPath, "_next", "static"),
+    {
+      recursive: true,
+    }
+  );
   if (fs.existsSync(appPublicPath)) {
     fs.cpSync(appPublicPath, outputPath, { recursive: true });
   }
@@ -478,7 +490,10 @@ function addPublicFilesList(outputPath: string, packagePath: string) {
   // Save the list
   const outputOpenNextPath = path.join(outputPath, packagePath, ".open-next");
   fs.mkdirSync(outputOpenNextPath, { recursive: true });
-  fs.writeFileSync(path.join(outputOpenNextPath, "public-files.json"), JSON.stringify(acc));
+  fs.writeFileSync(
+    path.join(outputOpenNextPath, "public-files.json"),
+    JSON.stringify(acc)
+  );
 }
 
 function removeCachedPages(outputPath: string, packagePath: string) {
@@ -532,14 +547,20 @@ function esbuildSync(esbuildOptions: ESBuildOptions) {
     // "process.env.OPEN_NEXT_DEBUG" determines if the logger writes to console.log
     define: {
       ...esbuildOptions.define,
-      "process.env.OPEN_NEXT_DEBUG": process.env.OPEN_NEXT_DEBUG ? "true" : "false",
+      "process.env.OPEN_NEXT_DEBUG": process.env.OPEN_NEXT_DEBUG
+        ? "true"
+        : "false",
       "process.env.OPEN_NEXT_VERSION": `"${openNextVersion}"`,
     },
   });
 
   if (result.errors.length > 0) {
     result.errors.forEach((error) => console.error(error));
-    throw new Error(`There was a problem bundling ${(esbuildOptions.entryPoints as string[])[0]}.`);
+    throw new Error(
+      `There was a problem bundling ${
+        (esbuildOptions.entryPoints as string[])[0]
+      }.`
+    );
   }
 }
 
@@ -571,7 +592,10 @@ function getHtmlPages(dotNextPath: string) {
   //   'csr.html',
   //   'image-html-tag.html',
   // ])
-  const manifestPath = path.join(dotNextPath, ".next/server/pages-manifest.json");
+  const manifestPath = path.join(
+    dotNextPath,
+    ".next/server/pages-manifest.json"
+  );
   const manifest = fs.readFileSync(manifestPath, "utf-8");
   return Object.entries(JSON.parse(manifest))
     .filter(([_, value]) => (value as string).endsWith(".html"))
@@ -583,7 +607,9 @@ function getHtmlPages(dotNextPath: string) {
 }
 
 function getBuildId(dotNextPath: string) {
-  return fs.readFileSync(path.join(dotNextPath, ".next/BUILD_ID"), "utf-8").trim();
+  return fs
+    .readFileSync(path.join(dotNextPath, ".next/BUILD_ID"), "utf-8")
+    .trim();
 }
 
 function getOpenNextVersion() {

packages/tests-e2e/package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "e2e:dev": "playwright test",
-    "e2e:test": "playwright test",
+    "e2e:dev": "playwright test --retries=5",
+    "e2e:test": "playwright test --retries=5",
     "clean": "rm -rf .turbo && rm -rf node_modules"
   },
   "dependencies": {

packages/tests-e2e/tests/appDirOnly/parallel.test.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/test";
+
+test("Parallel routes", async ({ page }) => {
+  await page.goto("/");
+  await page.getByRole("link", { name: "Parallel" }).click();
+
+  await page.waitForURL(`/parallel`);
+
+  // Neither are selected, so A/B shouldn't be rendered
+  let routeA = page.getByText("Parallel Route A");
+  let routeB = page.getByText("Parallel Route B");
+  await expect(routeA).not.toBeVisible();
+  await expect(routeB).not.toBeVisible();
+
+  // Enable A, which should be visible but not B
+  await page.locator('input[name="a"]').check();
+  routeA = page.getByText("Parallel Route A");
+  await expect(routeA).toBeVisible();
+  await expect(routeB).not.toBeVisible();
+
+  // Enable B, both should be visible
+  await page.locator('input[name="b"]').check();
+  routeB = page.getByText("Parallel Route B");
+  await expect(routeA).toBeVisible();
+  await expect(routeB).toBeVisible();
+
+  // Click on A, should go to a-page
+  await page.getByText("Go to a-page").click();
+  await page.waitForURL("/parallel/a-page");
+
+  // Should render contents of a-page
+  routeA = page.getByText("A Page");
+  await expect(routeA).toBeVisible();
+
+  // Click on B, should go to b-page
+  await page.getByText("Go to b-page").click();
+  await page.waitForURL("/parallel/b-page");
+
+  // Should render contents of b-page
+  routeB = page.getByText("B Page");
+  await expect(routeB).toBeVisible();
+});