Add the experimental e2e app (#614)

* add experimental e2e app

* ignore typescript errors for now

* lint fix

* review fix

Author: conico974

examples/common/apps.ts

@@ -11,6 +11,7 @@ const apps = [
   "app-pages-router",
   "app-router",
   "pages-router",
+  "experimental",
   // overrides
   "d1-tag-next",
   "memory-queue",

examples/e2e/experimental/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/e2e/experimental/README.md

@@ -0,0 +1,3 @@
+# Experimental
+
+This project is meant to test experimental features that are only available on canary builds of Next.js.

examples/e2e/experimental/e2e/nodeMiddleware.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from "@playwright/test";
+
+// See https://github.com/opennextjs/opennextjs-cloudflare/issues/617
+test.describe("Node Middleware", () => {
+  test.skip("Node middleware should add headers", async ({ request }) => {
+    const resp = await request.get("/");
+    expect(resp.status()).toEqual(200);
+    const headers = resp.headers();
+    expect(headers["x-middleware-test"]).toEqual("1");
+    expect(headers["x-random-node"]).toBeDefined();
+  });
+
+  test.skip("Node middleware should return json", async ({ request }) => {
+    const resp = await request.get("/api/hello");
+    expect(resp.status()).toEqual(200);
+    const json = await resp.json();
+    expect(json).toEqual({ name: "World" });
+  });
+
+  test.skip("Node middleware should redirect", async ({ page }) => {
+    await page.goto("/redirect");
+    await page.waitForURL("/");
+    const el = page.getByText("Incremental PPR");
+    await expect(el).toBeVisible();
+  });
+
+  test.skip("Node middleware should rewrite", async ({ page }) => {
+    await page.goto("/rewrite");
+    const el = page.getByText("Incremental PPR");
+    await expect(el).toBeVisible();
+  });
+});

examples/e2e/experimental/e2e/playwright.config.ts

@@ -0,0 +1,4 @@
+import { configurePlaywright } from "../../../common/config-e2e";
+
+// We need to disable parallel execution for the experimental app, otherwise it breaks the SSR test
+export default configurePlaywright("experimental", { parallel: false });

examples/e2e/experimental/e2e/ppr.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("PPR", () => {
+  test("PPR should show loading first", async ({ page }) => {
+    await page.goto("/");
+    await page.getByRole("link", { name: "Incremental PPR" }).click();
+    await page.waitForURL("/ppr");
+    const loading = page.getByText("Loading...");
+    await expect(loading).toBeVisible();
+    const el = page.getByText("Dynamic Component");
+    await expect(el).toBeVisible();
+  });
+
+  test("PPR rsc prefetch request should be cached", async ({ request }) => {
+    const resp = await request.get("/ppr", {
+      headers: { rsc: "1", "next-router-prefetch": "1" },
+    });
+    expect(resp.status()).toEqual(200);
+    const headers = resp.headers();
+    expect(headers["x-nextjs-postponed"]).toEqual("1");
+    expect(headers["x-nextjs-cache"]).toEqual("HIT");
+    expect(headers["cache-control"]).toEqual("s-maxage=31536000");
+  });
+});

examples/e2e/experimental/e2e/use-cache.test.ts

@@ -0,0 +1,85 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Composable Cache", () => {
+  test("cached component should work in ssr", async ({ page }) => {
+    await page.goto("/use-cache/ssr");
+    let fullyCachedElt = page.getByTestId("fullyCached");
+    let isrElt = page.getByTestId("isr");
+    await expect(fullyCachedElt).toBeVisible();
+    await expect(isrElt).toBeVisible();
+
+    const initialFullyCachedText = await fullyCachedElt.textContent();
+    const initialIsrText = await isrElt.textContent();
+
+    let isrText = initialIsrText;
+    do {
+      await page.reload();
+      fullyCachedElt = page.getByTestId("fullyCached");
+      isrElt = page.getByTestId("isr");
+      await expect(fullyCachedElt).toBeVisible();
+      await expect(isrElt).toBeVisible();
+      isrText = await isrElt.textContent();
+      await page.waitForTimeout(1000);
+    } while (isrText === initialIsrText);
+    const fullyCachedText = await fullyCachedElt.textContent();
+    expect(fullyCachedText).toEqual(initialFullyCachedText);
+  });
+
+  test("revalidateTag should work for fullyCached component", async ({ page, request }) => {
+    await page.goto("/use-cache/ssr");
+    const fullyCachedElt = page.getByTestId("fullyCached");
+    await expect(fullyCachedElt).toBeVisible();
+
+    const initialFullyCachedText = await fullyCachedElt.textContent();
+
+    const resp = await request.get("/api/revalidate");
+    expect(resp.status()).toEqual(200);
+    expect(await resp.text()).toEqual("DONE");
+
+    await page.reload();
+    await expect(fullyCachedElt).toBeVisible();
+    const newFullyCachedText = await fullyCachedElt.textContent();
+    expect(newFullyCachedText).not.toEqual(initialFullyCachedText);
+  });
+
+  test("cached component should work in isr", async ({ page }) => {
+    await page.goto("/use-cache/isr");
+
+    let fullyCachedElt = page.getByTestId("fullyCached");
+    let isrElt = page.getByTestId("isr");
+
+    await expect(fullyCachedElt).toBeVisible();
+    await expect(isrElt).toBeVisible();
+
+    let initialFullyCachedText = await fullyCachedElt.textContent();
+    let initialIsrText = await isrElt.textContent();
+
+    // We have to force reload until ISR has triggered at least once, otherwise the test will be flakey
+
+    let isrText = initialIsrText;
+
+    while (isrText === initialIsrText) {
+      await page.reload();
+      isrElt = page.getByTestId("isr");
+      fullyCachedElt = page.getByTestId("fullyCached");
+      await expect(isrElt).toBeVisible();
+      isrText = await isrElt.textContent();
+      await expect(fullyCachedElt).toBeVisible();
+      initialFullyCachedText = await fullyCachedElt.textContent();
+      await page.waitForTimeout(1000);
+    }
+    initialIsrText = isrText;
+
+    do {
+      await page.reload();
+      fullyCachedElt = page.getByTestId("fullyCached");
+      isrElt = page.getByTestId("isr");
+      await expect(fullyCachedElt).toBeVisible();
+      await expect(isrElt).toBeVisible();
+      isrText = await isrElt.textContent();
+      await page.waitForTimeout(1000);
+    } while (isrText === initialIsrText);
+    const fullyCachedText = await fullyCachedElt.textContent();
+    expect(fullyCachedText).toEqual(initialFullyCachedText);
+  });
+});

examples/e2e/experimental/next.config.ts

@@ -0,0 +1,23 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  cleanDistDir: true,
+  output: "standalone",
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    // Ignore type errors during build for now, we'll need to figure this out later
+    ignoreBuildErrors: true,
+  },
+  experimental: {
+    ppr: "incremental",
+    // Node middleware is not supported yet in cloudflare
+    // See https://github.com/opennextjs/opennextjs-cloudflare/issues/617
+    // nodeMiddleware: true,
+    dynamicIO: true,
+  },
+};
+
+export default nextConfig;

examples/e2e/experimental/open-next.config.ts

@@ -0,0 +1,17 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";
+import shardedTagCache from "@opennextjs/cloudflare/overrides/tag-cache/do-sharded-tag-cache";
+import doQueue from "@opennextjs/cloudflare/overrides/queue/do-queue";
+
+export default defineCloudflareConfig({
+  incrementalCache: r2IncrementalCache,
+  // With such a configuration, we could have up to 12 * (8 + 2) = 120 Durable Objects instances
+  tagCache: shardedTagCache({
+    baseShardSize: 12,
+    shardReplication: {
+      numberOfSoftReplicas: 8,
+      numberOfHardReplicas: 2,
+    },
+  }),
+  queue: doQueue,
+});

examples/e2e/experimental/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "experimental",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack --port 3004",
+    "build": "next build",
+    "start": "next start --port 3004",
+    "lint": "next lint",
+    "clean": "rm -rf .turbo node_modules .next .open-next",
+    "build:worker": "pnpm opennextjs-cloudflare build",
+    "preview:worker": "pnpm opennextjs-cloudflare preview",
+    "preview": "pnpm build:worker && pnpm preview:worker",
+    "e2e": "playwright test -c e2e/playwright.config.ts"
+  },
+  "dependencies": {
+    "@opennextjs/cloudflare": "workspace:*",
+    "next": "15.4.0-canary.14",
+    "react": "catalog:e2e",
+    "react-dom": "catalog:e2e"
+  },
+  "devDependencies": {
+    "@playwright/test": "catalog:",
+    "@types/node": "catalog:e2e",
+    "@types/react": "catalog:e2e",
+    "@types/react-dom": "catalog:e2e",
+    "typescript": "catalog:default",
+    "wrangler": "catalog:"
+  }
+}