Added Bun runtime template

.gitignore

@@ -1,21 +1,8 @@
-.env
-!.env.example
 .DS_Store
-.react-router
-build
-node_modules
-*.tsbuildinfo
+/node_modules/
 
-# Cloudflare specific
-.mf
-.wrangler
-
-# Netlify specific
-.netlify
-
-# Vercel specific
-.vercel
-/test-results/
-/playwright-report/
+# Tests
 /blob-report/
+/playwright-report/
 /playwright/.cache/
+/test-results/

.tests/cloudflare-d1.spec.ts

@@ -1,41 +1,32 @@
-import { execFile } from "node:child_process";
-import * as path from "node:path";
+import { expect, Page } from "@playwright/test";
+import { matchLine, testTemplate, urlRegex } from "./utils.js";
 
-import { test, expect } from "@playwright/test";
+const test = testTemplate("cloudflare-d1");
 
-import { startVite } from "./utils.js";
-
-let vite: Awaited<ReturnType<typeof startVite>>;
-test.beforeAll(async () => {
-  const cp = execFile("pnpm", ["db:migrate"], {
-    cwd: path.resolve(process.cwd(), "cloudflare-d1"),
-  });
-  await new Promise((resolve) => cp.on("exit", resolve));
-  if (cp.exitCode !== 0) {
-    throw new Error("Failed to run db:migrate");
-  }
-
-  vite = await startVite("cloudflare-d1");
+test("typecheck", async ({ $ }) => {
+  await $(`pnpm typecheck`);
 });
-test.afterAll(async () => {
-  await vite?.cleanup();
+
+test("dev", async ({ page, port, $ }) => {
+  await $(`pnpm db:migrate`);
+  const dev = $(`pnpm dev --port ${port}`);
+  const url = await matchLine(dev.stdout, urlRegex.viteDev);
+  await workflow({ page, url });
 });
 
-test("loads home page", async ({ page }) => {
-  await page.goto(new URL("/", vite.baseURL).href);
+test("build + start", async ({ page, port, $ }) => {
+  await $(`pnpm build`);
+  const start = $(`pnpm start --port ${port}`);
+  const url = await matchLine(start.stdout, urlRegex.wrangler);
+  await workflow({ page, url });
+});
 
+async function workflow({ page, url }: { page: Page; url: string }) {
+  await page.goto(url);
   await expect(page).toHaveTitle(/New React Router App/);
 
-  await page
-    .getByRole("link", {
-      name: "React Router Docs",
-    })
-    .waitFor();
-  await page
-    .getByRole("link", {
-      name: "Join Discord",
-    })
-    .waitFor();
+  await page.getByRole("link", { name: "React Router Docs" }).waitFor();
+  await page.getByRole("link", { name: "Join Discord" }).waitFor();
 
   const randomText = Math.random().toString(36).substring(7);
   await page.getByRole("textbox", { name: "Name" }).fill(randomText);
@@ -45,6 +36,6 @@ test("loads home page", async ({ page }) => {
   await page.getByRole("button", { name: "Sign Guest Book" }).click();
   await page.getByText(randomText).waitFor();
 
-  await page.goto(new URL("/", vite.baseURL).href);
+  await page.goto(url);
   await page.getByText(randomText).waitFor();
-});
+}

.tests/cloudflare.spec.ts

@@ -1,28 +1,29 @@
-import { test, expect } from "@playwright/test";
+import { expect, Page } from "@playwright/test";
 
-import { startVite } from "./utils.js";
+import { matchLine, testTemplate, urlRegex } from "./utils";
 
-let vite: Awaited<ReturnType<typeof startVite>>;
-test.beforeAll(async () => {
-  vite = await startVite("cloudflare");
+const test = testTemplate("cloudflare");
+
+test("typecheck", async ({ $ }) => {
+  await $(`pnpm typecheck`);
 });
-test.afterAll(async () => {
-  await vite?.cleanup();
+
+test("dev", async ({ page, port, $ }) => {
+  const dev = $(`pnpm dev --port ${port}`);
+  const url = await matchLine(dev.stdout, urlRegex.viteDev);
+  await workflow({ page, url });
 });
 
-test("loads home page", async ({ page }) => {
-  await page.goto(new URL("/", vite.baseURL).href);
+test("build + start", async ({ page, port, $ }) => {
+  await $(`pnpm build`);
+  const start = $(`pnpm start --port ${port}`);
+  const url = await matchLine(start.stdout, urlRegex.wrangler);
+  await workflow({ page, url });
+});
 
+async function workflow({ page, url }: { page: Page; url: string }) {
+  await page.goto(url);
   await expect(page).toHaveTitle(/New React Router App/);
-
-  await page
-    .getByRole("link", {
-      name: "React Router Docs",
-    })
-    .waitFor();
-  await page
-    .getByRole("link", {
-      name: "Join Discord",
-    })
-    .waitFor();
-});
+  await page.getByRole("link", { name: "React Router Docs" }).waitFor();
+  await page.getByRole("link", { name: "Join Discord" }).waitFor();
+}

.tests/default.spec.ts

@@ -1,28 +1,29 @@
-import { test, expect } from "@playwright/test";
+import { expect, Page } from "@playwright/test";
 
-import { startVite } from "./utils.js";
+import { matchLine, testTemplate, urlRegex } from "./utils";
 
-let vite: Awaited<ReturnType<typeof startVite>>;
-test.beforeAll(async () => {
-  vite = await startVite("default");
+const test = testTemplate("default");
+
+test("typecheck", async ({ $ }) => {
+  await $(`pnpm typecheck`);
 });
-test.afterAll(async () => {
-  await vite?.cleanup();
+
+test("dev", async ({ page, port, $ }) => {
+  const dev = $(`pnpm dev --port ${port}`);
+  const url = await matchLine(dev.stdout, urlRegex.viteDev);
+  await workflow({ page, url });
 });
 
-test("loads home page", async ({ page }) => {
-  await page.goto(new URL("/", vite.baseURL).href);
+test("build + start", async ({ page, port, $ }) => {
+  await $(`pnpm build`);
+  const start = $(`pnpm start`, { env: { PORT: String(port) } });
+  const url = await matchLine(start.stdout, urlRegex.reactRouterServe);
+  await workflow({ page, url });
+});
 
+async function workflow({ page, url }: { page: Page; url: string }) {
+  await page.goto(url);
   await expect(page).toHaveTitle(/New React Router App/);
-
-  await page
-    .getByRole("link", {
-      name: "React Router Docs",
-    })
-    .waitFor();
-  await page
-    .getByRole("link", {
-      name: "Join Discord",
-    })
-    .waitFor();
-});
+  await page.getByRole("link", { name: "React Router Docs" }).waitFor();
+  await page.getByRole("link", { name: "Join Discord" }).waitFor();
+}

.tests/netlify.spec.ts

@@ -1,28 +1,33 @@
-import { test, expect } from "@playwright/test";
+import { expect, Page } from "@playwright/test";
 
-import { startCustom } from "./utils.js";
+import { matchLine, testTemplate, urlRegex } from "./utils";
 
-let vite: Awaited<ReturnType<typeof startCustom>>;
-test.beforeAll(async () => {
-  vite = await startCustom("netlify");
+const test = testTemplate("netlify");
+
+test("typecheck", async ({ $ }) => {
+  await $(`pnpm typecheck`);
 });
-test.afterAll(async () => {
-  await vite?.cleanup();
+
+test("dev", async ({ page, port, $ }) => {
+  const dev = $(`pnpm dev`, { env: { PORT: String(port) } });
+  const url = await matchLine(dev.stdout, urlRegex.custom);
+  await workflow({ page, url });
 });
 
-test("loads home page", async ({ page }) => {
-  await page.goto(new URL("/", vite.baseURL).href);
+test("build + start", async ({ page, edit, port, $ }) => {
+  await edit("netlify.toml", (txt) =>
+    txt
+      .replaceAll("[dev]", "[dev]\nautoLaunch = false")
+      .replaceAll("npm run", "pnpm")
+  );
+  const start = $(`pnpm start --port ${port}`);
+  const url = await matchLine(start.stdout, urlRegex.netlify);
+  await workflow({ page, url });
+});
 
+async function workflow({ page, url }: { page: Page; url: string }) {
+  await page.goto(url);
   await expect(page).toHaveTitle(/New React Router App/);
-
-  await page
-    .getByRole("link", {
-      name: "React Router Docs",
-    })
-    .waitFor();
-  await page
-    .getByRole("link", {
-      name: "Join Discord",
-    })
-    .waitFor();
-});
+  await page.getByRole("link", { name: "React Router Docs" }).waitFor();
+  await page.getByRole("link", { name: "Join Discord" }).waitFor();
+}

.tests/node-custom-server.spec.ts

@@ -1,28 +1,29 @@
-import { test, expect } from "@playwright/test";
+import { expect, Page } from "@playwright/test";
 
-import { startCustom } from "./utils.js";
+import { matchLine, testTemplate, urlRegex } from "./utils";
 
-let vite: Awaited<ReturnType<typeof startCustom>>;
-test.beforeAll(async () => {
-  vite = await startCustom("node-custom-server");
+const test = testTemplate("node-custom-server");
+
+test("typecheck", async ({ $ }) => {
+  await $(`pnpm typecheck`);
 });
-test.afterAll(async () => {
-  await vite?.cleanup();
+
+test("dev", async ({ page, port, $ }) => {
+  const dev = $(`pnpm dev`, { env: { PORT: String(port) } });
+  const url = await matchLine(dev.stdout, urlRegex.custom);
+  await workflow({ page, url });
 });
 
-test("loads home page", async ({ page }) => {
-  await page.goto(new URL("/", vite.baseURL).href);
+test("build + start", async ({ page, port, $ }) => {
+  await $(`pnpm build`);
+  const start = $(`pnpm start`, { env: { PORT: String(port) } });
+  const url = await matchLine(start.stdout, urlRegex.custom);
+  await workflow({ page, url });
+});
 
+async function workflow({ page, url }: { page: Page; url: string }) {
+  await page.goto(url);
   await expect(page).toHaveTitle(/New React Router App/);
-
-  await page
-    .getByRole("link", {
-      name: "React Router Docs",
-    })
-    .waitFor();
-  await page
-    .getByRole("link", {
-      name: "Join Discord",
-    })
-    .waitFor();
-});
+  await page.getByRole("link", { name: "React Router Docs" }).waitFor();
+  await page.getByRole("link", { name: "Join Discord" }).waitFor();
+}

.tests/node-postgres.spec.ts

@@ -1,50 +1,7 @@
-import { execFile } from "node:child_process";
-import * as path from "node:path";
+import { testTemplate } from "./utils";
 
-import { test, expect } from "@playwright/test";
+const test = testTemplate("node-postgres");
 
-import { startCustom } from "./utils.js";
-
-let vite: Awaited<ReturnType<typeof startCustom>>;
-test.beforeAll(async () => {
-  const cp = execFile("pnpm", ["db:migrate"], {
-    cwd: path.resolve(process.cwd(), "node-postgres"),
-  });
-  await new Promise((resolve) => cp.on("exit", resolve));
-  if (cp.exitCode !== 0) {
-    throw new Error("Failed to run db:migrate");
-  }
-
-  vite = await startCustom("node-postgres");
-});
-test.afterAll(async () => {
-  await vite?.cleanup();
-});
-
-test("loads home page", async ({ page }) => {
-  await page.goto(new URL("/", vite.baseURL).href);
-
-  await expect(page).toHaveTitle(/New React Router App/);
-
-  await page
-    .getByRole("link", {
-      name: "React Router Docs",
-    })
-    .waitFor();
-  await page
-    .getByRole("link", {
-      name: "Join Discord",
-    })
-    .waitFor();
-
-  const randomText = Math.random().toString(36).substring(7);
-  await page.getByRole("textbox", { name: "Name" }).fill(randomText);
-  await page
-    .getByRole("textbox", { name: "Email" })
-    .fill(`email${randomText}@example.com`);
-  await page.getByRole("button", { name: "Sign Guest Book" }).click();
-  await page.getByText(randomText).waitFor();
-
-  await page.goto(new URL("/", vite.baseURL).href);
-  await page.getByText(randomText).waitFor();
+test("typecheck", async ({ $ }) => {
+  await $(`pnpm typecheck`);
 });