mirror of
https://github.com/cloudflare/vinext.git
synced 2026-09-14 19:04:59 +08:00
7fdcdd3c69
* 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()
154 lines
4.7 KiB
TypeScript
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),
|
|
});
|