Feat configurable out dir test pipeline

.github/workflows/ci.yml

@@ -61,7 +61,11 @@ jobs:
       - run: pnpm -C packages/react-server/examples/prerender test-e2e-preview
       - run: pnpm -C packages/react-server/examples/prerender cf-build
       - run: pnpm -C packages/react-server/examples/prerender vc-build
-
+      - run: pnpm -C packages/react-server/examples/custom-out-dir test-e2e
+      - run: pnpm -C packages/react-server/examples/custom-out-dir build
+      - run: pnpm -C packages/react-server/examples/custom-out-dir test-e2e-preview
+      - run: pnpm -C packages/react-server/examples/custom-out-dir cf-test-e2e-preview
+
   test-react-server-package:
     runs-on: ubuntu-latest
     steps:

packages/react-server-next/src/vite/adapters/cloudflare/build.ts

@@ -3,23 +3,23 @@ import { cp, mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import type { PrerenderManifest } from "@hiogawa/react-server/plugin";
 
-export async function build() {
-  const buildDir = join(process.cwd(), "dist");
-  const outDir = join(process.cwd(), "dist/cloudflare");
+export async function build({ outDir }: { outDir: string }) {
+  const buildDir = join(process.cwd(), outDir);
+  const adapterOutDir = join(process.cwd(), outDir, "cloudflare");
 
   // clean
-  await rm(outDir, { recursive: true, force: true });
-  await mkdir(outDir, { recursive: true });
+  await rm(adapterOutDir, { recursive: true, force: true });
+  await mkdir(adapterOutDir, { recursive: true });
 
   // assets
-  await cp(join(buildDir, "client"), outDir, {
+  await cp(join(buildDir, "client"), adapterOutDir, {
     recursive: true,
   });
 
   // worker routes
   // https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file
   await writeFile(
-    join(outDir, "_routes.json"),
+    join(adapterOutDir, "_routes.json"),
     JSON.stringify(
       {
         version: 1,
@@ -39,7 +39,7 @@ export async function build() {
   // headers
   // https://developers.cloudflare.com/pages/configuration/headers/
   await writeFile(
-    join(outDir, "_headers"),
+    join(adapterOutDir, "_headers"),
     `\
 /favicon.ico
   Cache-Control: public, max-age=3600, s-maxage=3600
@@ -53,7 +53,7 @@ export async function build() {
   const esbuild = await import("esbuild");
   const result = await esbuild.build({
     entryPoints: [join(buildDir, "server/index.js")],
-    outfile: join(outDir, "_worker.js"),
+    outfile: join(adapterOutDir, "_worker.js"),
     bundle: true,
     minify: true,
     metafile: true,

packages/react-server-next/src/vite/adapters/index.ts

@@ -4,6 +4,7 @@ export type AdapterType = "node" | "vercel" | "vercel-edge" | "cloudflare";
 
 export function adapterPlugin(options: {
   adapter?: AdapterType;
+  outDir: string;
 }): Plugin[] {
   const adapter = options.adapter ?? autoSelectAdapter();
   if (adapter === "node") {
@@ -31,15 +32,15 @@ export function adapterPlugin(options: {
         console.log(`▶▶▶ ADAPTER: ${adapter}`);
         if (adapter === "cloudflare") {
           const { build } = await import("./cloudflare/build");
-          await build();
+          await build({ outDir: options.outDir });
         }
         if (adapter === "vercel") {
           const { build } = await import("./vercel/build");
-          await build({ runtime: "node" });
+          await build({ runtime: "node", outDir: options.outDir });
         }
         if (adapter === "vercel-edge") {
           const { build } = await import("./vercel/build");
-          await build({ runtime: "edge" });
+          await build({ runtime: "edge", outDir: options.outDir });
         }
       },
     },

packages/react-server-next/src/vite/adapters/vercel/build.ts

@@ -38,13 +38,19 @@ const vcConfig = {
 
 type VercelRuntime = "node" | "edge";
 
-export async function build({ runtime }: { runtime: VercelRuntime }) {
-  const buildDir = join(process.cwd(), "dist");
-  const outDir = join(process.cwd(), ".vercel/output");
+export async function build({
+  runtime,
+  outDir,
+}: {
+  runtime: VercelRuntime;
+  outDir: string;
+}) {
+  const buildDir = join(process.cwd(), outDir);
+  const adapterOutDir = join(process.cwd(), ".vercel/output");
 
   // clean
-  await rm(outDir, { recursive: true, force: true });
-  await mkdir(outDir, { recursive: true });
+  await rm(adapterOutDir, { recursive: true, force: true });
+  await mkdir(adapterOutDir, { recursive: true });
 
   // overrides for ssg html
   // https://vercel.com/docs/build-output-api/v3/configuration#overrides
@@ -69,28 +75,28 @@ export async function build({ runtime }: { runtime: VercelRuntime }) {
 
   // config
   await writeFile(
-    join(outDir, "config.json"),
+    join(adapterOutDir, "config.json"),
     JSON.stringify(configJson, null, 2),
   );
 
   // static
-  await mkdir(join(outDir, "static"), { recursive: true });
-  await cp(join(buildDir, "client"), join(outDir, "static"), {
+  await mkdir(join(adapterOutDir, "static"), { recursive: true });
+  await cp(join(buildDir, "client"), join(adapterOutDir, "static"), {
     recursive: true,
   });
 
   // function config
-  await mkdir(join(outDir, "functions/index.func"), { recursive: true });
+  await mkdir(join(adapterOutDir, "functions/index.func"), { recursive: true });
   await writeFile(
-    join(outDir, "functions/index.func/.vc-config.json"),
+    join(adapterOutDir, "functions/index.func/.vc-config.json"),
     JSON.stringify(vcConfig[runtime], null, 2),
   );
 
   // bundle function
   const esbuild = await import("esbuild");
   const result = await esbuild.build({
     entryPoints: [join(buildDir, "server/index.js")],
-    outfile: join(outDir, "functions/index.func/index.mjs"),
+    outfile: join(adapterOutDir, "functions/index.func/index.mjs"),
     metafile: true,
     bundle: true,
     minify: true,

packages/react-server-next/src/vite/index.ts

@@ -20,6 +20,7 @@ export type ReactServerNextPluginOptions = {
 export default function vitePluginReactServerNext(
   options?: ReactServerPluginOptions & ReactServerNextPluginOptions,
 ): PluginOption {
+  const outDir = options?.outDir ?? "dist";
   return [
     react(),
     nextJsxPlugin(),
@@ -32,9 +33,9 @@ export default function vitePluginReactServerNext(
     vitePluginLogger(),
     vitePluginSsrMiddleware({
       entry: "next/vite/entry-ssr",
-      preview: path.resolve("./dist/server/index.js"),
+      preview: path.resolve(outDir, "server", "index.js"),
     }),
-    adapterPlugin({ adapter: options?.adapter }),
+    adapterPlugin({ adapter: options?.adapter, outDir }),
     appFaviconPlugin(),
     {
       name: "next-exclude-optimize",

packages/react-server/examples/custom-out-dir/.gitignore

@@ -0,0 +1,4 @@
+custom-out-dir/
+.vercel/
+.wrangler/
+dist-*/

packages/react-server/examples/custom-out-dir/app/page.tsx

@@ -0,0 +1,11 @@
+function page() {
+  const outDir = import.meta.env.VITE_E2E_OUT_DIR;
+  return (
+    <div>
+      <h1>Hello from custom out dir!</h1>
+      {outDir && <pre>{outDir}</pre>}
+    </div>
+  );
+}
+
+export default page;

packages/react-server/examples/custom-out-dir/e2e/basic.test.ts

@@ -0,0 +1,23 @@
+import fs from "node:fs";
+import { expect, test } from "@playwright/test";
+test("custom outDir app can be visited", async ({ page }) => {
+  const res = await page.goto("/");
+  expect(res?.status()).toBe(200);
+  expect(await page.textContent("h1")).toBe("Hello from custom out dir!");
+  if (process.env.VITE_E2E_OUT_DIR) {
+    expect(await page.textContent("pre")).toBe(process.env.VITE_E2E_OUT_DIR);
+  }
+});
+
+test("custom outDir is created", async () => {
+  test.skip(
+    !process.env.E2E_PREVIEW && !process.env.E2E_CF,
+    "outDir is not available in preview",
+  );
+  const outDir = process.env.VITE_E2E_OUT_DIR || "custom-out-dir";
+  expect(fs.existsSync(outDir)).toBe(true);
+});
+
+test("default outDir is not created", async () => {
+  expect(fs.existsSync("dist")).toBe(false);
+});

packages/react-server/examples/custom-out-dir/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@hiogawa/react-server-example-custom-out-dir",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "start": "next start",
+    "build": "next build",
+    "cf-build": "CF_PAGES=1 pnpm build",
+    "cf-preview": "wrangler pages dev ./dist-cf/cloudflare --compatibility-date=2024-01-01 --compatibility-flags=nodejs_compat",
+    "vc-build": "VERCEL=1 pnpm build",
+    "test-e2e": "playwright test",
+    "test-e2e-preview": "E2E_PREVIEW=1 playwright test",
+    "cf-test-e2e-preview": "VITE_E2E_OUT_DIR=dist-cf pnpm cf-build && VITE_E2E_OUT_DIR=dist-cf E2E_CF=1 pnpm test-e2e"
+  },
+  "dependencies": {
+    "@hiogawa/react-server": "workspace:*",
+    "next": "link:../../../react-server-next",
+    "react": "rc",
+    "react-dom": "rc",
+    "react-server-dom-webpack": "rc"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.1",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "vite": "latest"
+  }
+}

packages/react-server/examples/custom-out-dir/playwright.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const port = Number(process.env.E2E_PORT || 6174);
+const isCloudflarePages = Boolean(process.env.CF_PAGES);
+const isPreview = Boolean(process.env.E2E_PREVIEW);
+const command = isPreview
+  ? `pnpm start --port ${port} --strict-port`
+  : `pnpm dev --port ${port} --strict-port`;
+
+const cfPreview = `pnpm run cf-preview --port ${port}`;
+
+export default defineConfig({
+  testDir: "e2e",
+  use: {
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        viewport: null,
+        deviceScaleFactor: undefined,
+      },
+    },
+  ],
+  webServer: {
+    command: isCloudflarePages ? cfPreview : command,
+    port,
+  },
+  grepInvert: isPreview ? /@dev/ : /@build/,
+  forbidOnly: !!process.env["CI"],
+  retries: process.env["CI"] ? 2 : 0,
+  reporter: "list",
+});

packages/react-server/examples/custom-out-dir/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["next", "vitest/globals"],
+    "jsx": "react-jsx"
+  }
+}

packages/react-server/examples/custom-out-dir/vite.config.ts

@@ -0,0 +1,10 @@
+import next from "next/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    next({
+      outDir: process.env.VITE_E2E_OUT_DIR || "custom-out-dir",
+    }),
+  ],
+});

packages/react-server/src/entry/ssr.tsx

@@ -81,7 +81,7 @@ export async function importReactServer(): Promise<typeof import("./server")> {
   if (import.meta.env.DEV) {
     return $__global.dev.reactServer.ssrLoadModule(ENTRY_SERVER_WRAPPER) as any;
   } else {
-    return import("/dist/rsc/index.js" as string);
+    return import("virtual:import-react-server");
   }
 }
 

packages/react-server/src/features/assets/plugin.ts

@@ -65,7 +65,7 @@ export function vitePluginServerAssets({
         // TODO: (refactor) use RouteManifest?
         const manifest: Manifest = JSON.parse(
           await fs.promises.readFile(
-            "dist/client/.vite/manifest.json",
+            path.join(manager.outDir, "client", ".vite", "manifest.json"),
             "utf-8",
           ),
         );
@@ -138,8 +138,8 @@ export function vitePluginServerAssets({
         if (manager.buildType === "browser") {
           for (const file of manager.serverAssets) {
             await fs.promises.cp(
-              path.join("dist/rsc", file),
-              path.join("dist/client", file),
+              path.join(manager.outDir, "rsc", file),
+              path.join(manager.outDir, "client", file),
             );
           }
         }
@@ -150,7 +150,9 @@ export function vitePluginServerAssets({
 
 export function serverAssertsPluginServer({
   manager,
-}: { manager: PluginStateManager }): Plugin[] {
+}: {
+  manager: PluginStateManager;
+}): Plugin[] {
   // 0. track server assets during server build (this plugin)
   // 1. copy all server assets to browser build (copy-build plugin)
   // 2. out of those, inject links automatically (ssr-assets virtual plugin)

packages/react-server/src/features/next/plugin.ts

@@ -1,4 +1,5 @@
 import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
 import type { Rollup } from "vite";
 
 // ensure `.js` extension even if project root is cjs
@@ -8,7 +9,7 @@ export const OUTPUT_SERVER_JS_EXT = {
   chunkFileNames: "assets/[name]-[hash].js",
 } satisfies Rollup.OutputOptions;
 
-export async function createServerPackageJson() {
-  await mkdir("dist", { recursive: true });
-  await writeFile("dist/package.json", `{ "type": "module" }`);
+export async function createServerPackageJson(outDir: string) {
+  await mkdir(outDir, { recursive: true });
+  await writeFile(path.join(outDir, "package.json"), `{ "type": "module" }`);
 }