feat: support @vercel/og (server wasm asset + font asset) (edge)

[hi-ogawa]

It's somehow working on dev, but build looks broken (as expected).

---

Hmm, they probably rely on Next.js specific build-time import.meta.url asset feature, so it's going to be hard (cf. #510).
Probably coming up with some ad-hoc transform to support index.edge.js is a best bet, namely:

• plugin for xxx.wasm?module
• plugin for new URL("xxx.ttf", import.meta.url)

//
// @vercel/og/dist/index.node.js
//
var fontData = fs.readFileSync(fileURLToPath(join(import.meta.url, "../noto-sans-v27-latin-regular.ttf")));
var yoga_wasm = fs.readFileSync(fileURLToPath(join(import.meta.url, "../yoga.wasm")));
var resvg_wasm = fs.readFileSync(fileURLToPath(join(import.meta.url, "../resvg.wasm")));
var initializedResvg = initWasm(resvg_wasm);
var initializedYoga = initYoga(yoga_wasm).then((yoga2) => Rl(yoga2));

//
// @vercel/og/dist/index.edge.js
//
import resvg_wasm from "./resvg.wasm?module";
import yoga_wasm from "./yoga.wasm?module";

var initializedResvg = initWasm(resvg_wasm);
var initializedYoga = initYoga(yoga_wasm).then((yoga2) => Rl(yoga2));
var fallbackFont = fetch(new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url)).then((res) => res.arrayBuffer());

For actual cloudflare deployment, we need to figure out "server assets" to upload wasm:

• https://developers.cloudflare.com/pages/functions/module-support/#webassembly-modules

For final bundling, we would probably need something like this:

• fix: copy .eot, .otf, .ttf, .woff, and woff2 font files when bundling sveltejs/kit#12439
• https://esbuild.github.io/content-types/#copy

Actually this part should be fixed first.

todo

• dev
• node build
• edge build
• test

[hi-ogawa]

• feat: support @vercel/og (server wasm asset + font asset) (edge) #547 👈
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @hi-ogawa and the rest of your teammates on Graphite