Files
cloudflare__vinext/playwright.config.ts
T
James Anderson 7fdcdd3c69 feat(og): add @next/og / @vercel/og support with Cloudflare Workers compatibility (#356)
* feat(og): add @next/og support with Cloudflare Workers compatibility

- Add vinext:og-font-fix transform plugin that patches @vercel/og/dist/index.edge.js
  at Vite transform time: inlines the fallback font as base64 (avoids fetch() with
  import.meta.url which breaks in workerd) and defers WASM init to first use (avoids
  WebAssembly.instantiate() being blocked in Node.js module runner)
- Add @vercel/og to optimizeDeps.exclude so Vite's esbuild pre-bundler doesn't cache
  the module before the transform hook runs
- Add vinext:og-assets build plugin that copies font/WASM assets to RSC output dir
- Add /app/api/og route to app-router-cloudflare example and app-basic fixture
- Add shared Playwright e2e spec (tests/e2e/og-image.spec.ts) asserting PNG validity,
  correct 1200x630 dimensions, param-driven content, and determinism
- Register og-image.spec.ts in app-router, cloudflare-workers, and cloudflare-dev
  Playwright projects (18 tests total, all passing)

* refactor(og): generalize fetch+import.meta.url asset inlining, drop WASM lazy-init patch

Replace the @vercel/og-specific vinext:og-font-fix plugin with a general
vinext:og-inline-fetch-assets plugin that:

- Matches ANY fetch(new URL('./asset', import.meta.url)).then(res => res.arrayBuffer())
  pattern, not just the hardcoded noto-sans filename
- Resolves each asset relative to the module's on-disk path (via the transform id)
  and inlines it as base64 — works for any font version or additional assets
- Applies to any library using this pattern, not just @vercel/og

Also removes the WASM lazy-init patch: now that @vercel/og is in optimizeDeps.exclude,
the module runs through workerd (not the Node.js pre-bundler cache) where
WebAssembly.instantiate() works fine. The lazy-init workaround was only needed
when the pre-bundler cache bypassed the transform hook.

The og-assets build plugin is updated to only copy resvg.wasm (not the font,
which is now inlined and will no longer appear in the bundle by filename).

* fix(og): inline readFileSync assets from @vercel/og node build

The production RSC bundle resolves @vercel/og under the 'import' export
condition, getting dist/index.node.js instead of dist/index.edge.js.
The node build loads font and WASM via fs.readFileSync(fileURLToPath(
new URL('./file', import.meta.url))), which breaks after bundling because
import.meta.url points to the bundle output file, not the dist/ dir.

Extend vinext:og-inline-fetch-assets with a second regex pattern that
matches readFileSync(fileURLToPath(new URL(...))) and replaces it with
Buffer.from('<base64>', 'base64'), inlining both noto-sans font and
resvg.wasm at transform time. This eliminates the ENOENT errors seen
in the production build CI tests.

* refactor(og): address code review feedback

- Remove Fix 1 (font inlining) from vinext:og-font-patch — it was dead
  code since vinext:og-inline-fetch-assets (earlier in the plugin array)
  already handles the same fetch(new URL(...)) pattern generically. Only
  Fix 2 (yoga WASM extraction) remains in og-font-patch.

- Use split().join() instead of String.replace() in both Pattern 1 and
  Pattern 2 loops of og-inline-fetch-assets. String.replace(string, ...)
  only replaces the first occurrence; split().join() replaces all of them,
  which matters for libraries that may use the same pattern multiple times.

* refactor(og): use replaceAll instead of split().join()
2026-03-08 20:50:10 +00:00

154 lines
4.7 KiB
TypeScript

import { defineConfig } from "@playwright/test";
/**
* Each project maps to a single webServer. When PLAYWRIGHT_PROJECT is set
* (e.g. in CI matrix jobs), only that project and its server are configured,
* so each CI runner only starts the one server it needs.
*/
const projectServers = {
"pages-router": {
testDir: "./tests/e2e/pages-router",
use: { baseURL: "http://localhost:4173" },
server: {
command:
"npx tsc -p ../../../packages/vinext/tsconfig.json && npx vite --port 4173",
cwd: "./tests/fixtures/pages-basic",
port: 4173,
reuseExistingServer: !process.env.CI,
timeout: 30_000,
},
},
"app-router": {
testDir: "./tests/e2e",
testMatch: [
"**/app-router/**/*.spec.ts",
"**/og-image.spec.ts",
],
use: { baseURL: "http://localhost:4174" },
server: {
command: "npx vite --port 4174",
cwd: "./tests/fixtures/app-basic",
port: 4174,
reuseExistingServer: !process.env.CI,
timeout: 30_000,
},
},
"cloudflare-pages-router": {
testDir: "./tests/e2e",
testMatch: [
"**/cloudflare-pages-router/**/*.spec.ts",
"**/pages-router/instrumentation-startup.spec.ts",
],
use: { baseURL: "http://localhost:4177" },
server: {
command: "npx vite build && npx wrangler dev --port 4177",
cwd: "./examples/pages-router-cloudflare",
port: 4177,
reuseExistingServer: !process.env.CI,
timeout: 30_000,
},
},
"pages-router-prod": {
testDir: "./tests/e2e/pages-router-prod",
server: {
// Use node to invoke the CLI directly — npx vinext may not be on PATH
// in fixture subdirectories since vinext is a workspace dependency.
command:
"npx tsc -p ../../../packages/vinext/tsconfig.json && node ../../../packages/vinext/dist/cli.js build && node ../../../packages/vinext/dist/cli.js start --port 4175",
cwd: "./tests/fixtures/pages-basic",
port: 4175,
reuseExistingServer: !process.env.CI,
timeout: 60_000,
},
},
"cloudflare-workers": {
testDir: "./tests/e2e",
testMatch: [
"**/cloudflare-workers/**/*.spec.ts",
"**/app-router/instrumentation.spec.ts",
"**/og-image.spec.ts",
],
use: { baseURL: "http://localhost:4176" },
server: {
// Build app-router-cloudflare with Vite, then serve with wrangler dev (miniflare)
command:
"npx vite build && npx wrangler dev --config dist/server/wrangler.json --port 4176",
cwd: "./examples/app-router-cloudflare",
port: 4176,
reuseExistingServer: !process.env.CI,
timeout: 60_000,
},
},
"cloudflare-dev": {
testDir: "./tests/e2e",
testMatch: [
"**/cloudflare-dev/**/*.spec.ts",
"**/app-router/instrumentation.spec.ts",
"**/og-image.spec.ts",
],
use: { baseURL: "http://localhost:4178" },
server: {
// Run vite dev (not wrangler) against the cloudflare example so that
// configureServer() is exercised with @cloudflare/vite-plugin loaded.
command: "npx vite --port 4178",
cwd: "./examples/app-router-cloudflare",
port: 4178,
reuseExistingServer: !process.env.CI,
timeout: 30_000,
},
},
"cloudflare-pages-router-dev": {
testDir: "./tests/e2e",
testMatch: [
"**/cloudflare-pages-router-dev/**/*.spec.ts",
"**/pages-router/instrumentation-startup.spec.ts",
],
use: { baseURL: "http://localhost:4179" },
server: {
command: "npx vite --port 4179",
cwd: "./examples/pages-router-cloudflare",
port: 4179,
reuseExistingServer: !process.env.CI,
timeout: 30_000,
},
},
};
type ProjectName = keyof typeof projectServers;
const selected = process.env.PLAYWRIGHT_PROJECT;
if (selected && !(selected in projectServers)) {
throw new Error(
`Unknown PLAYWRIGHT_PROJECT: "${selected}". ` +
`Valid: ${Object.keys(projectServers).join(", ")}`,
);
}
const activeProjects: ProjectName[] = selected
? [selected as ProjectName]
: (Object.keys(projectServers) as ProjectName[]);
export default defineConfig({
testDir: "./tests/e2e",
timeout: 30_000,
retries: 1,
// GitHub reporter adds inline failure annotations in PR diffs.
reporter: process.env.CI ? [["list"], ["github"]] : [["list"]],
use: {
headless: true,
// Use chromium only — fast and sufficient for our tests
browserName: "chromium",
},
projects: activeProjects.map((name) => {
const p = projectServers[name];
return {
name,
testDir: p.testDir,
...("testMatch" in p ? { testMatch: p.testMatch } : {}),
...("use" in p ? { use: p.use } : {}),
};
}),
webServer: activeProjects.map((name) => projectServers[name].server),
});