patches for the vercel og library and routes

Author: james-elicx

examples/api/app/og/route.tsx

@@ -0,0 +1,65 @@
+import { ImageResponse } from "next/og";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            backgroundColor: "black",
+            backgroundSize: "150px 150px",
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            textAlign: "center",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            flexWrap: "nowrap",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              justifyItems: "center",
+            }}
+          >
+            <img
+              alt="Vercel"
+              height={200}
+              src="data:image/svg+xml,%3Csvg width='116' height='100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.5 0L115 100H0L57.5 0z' /%3E%3C/svg%3E"
+              style={{ margin: "0 30px" }}
+              width={232}
+            />
+          </div>
+          <div
+            style={{
+              fontSize: 60,
+              fontStyle: "normal",
+              letterSpacing: "-0.025em",
+              color: "white",
+              marginTop: 30,
+              padding: "0 120px",
+              lineHeight: 1.4,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            'next/og'
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      }
+    );
+  } catch (e: any) {
+    return new Response("Failed to generate the image", {
+      status: 500,
+    });
+  }
+}

examples/api/e2e/base.spec.ts

@@ -42,3 +42,9 @@ test("returns correct information about the request from a route handler", async
   const expectedURL = expect.stringMatching(/https?:\/\/localhost:(?!3000)\d+\/api\/request/);
   await expect(res.json()).resolves.toEqual({ nextUrl: expectedURL, url: expectedURL });
 });
+
+test("generates an og image successfully", async ({ page }) => {
+  const res = await page.request.get("/og");
+  expect(res.status()).toEqual(200);
+  expect(res.headers()["content-type"]).toEqual("image/png");
+});

packages/cloudflare/src/cli/build/bundle-server.ts

@@ -33,7 +33,8 @@ export async function bundleServer(buildOpts: BuildOptions): Promise<void> {
   console.log(`\x1b[35m⚙️ Bundling the OpenNext server...\n\x1b[0m`);
 
   patches.patchWranglerDeps(buildOpts);
-  patches.updateWebpackChunksFile(buildOpts);
+  await patches.updateWebpackChunksFile(buildOpts);
+  await patches.patchVercelOgLibrary(buildOpts);
 
   const outputPath = path.join(outputDir, "server-functions", "default");
   const packagePath = getPackagePath(buildOpts);

packages/cloudflare/src/cli/build/patches/ast/util.ts

@@ -1,3 +1,5 @@
+import { readFileSync } from "node:fs";
+
 import { type Edit, Lang, type NapiConfig, parse, type SgNode } from "@ast-grep/napi";
 import yaml from "yaml";
 
@@ -53,6 +55,17 @@ export function applyRule(rule: string | RuleConfig, root: SgNode, { once = fals
   return { edits, matches };
 }
 
+/**
+ * Parse a file and obtain its root.
+ *
+ * @param path The file path
+ * @param lang The language to parse. Defaults to TypeScript.
+ * @returns The root for the file.
+ */
+export function parseFile(path: string, lang = Lang.TypeScript) {
+  return parse(lang, readFileSync(path, { encoding: "utf-8" })).root();
+}
+
 /**
  * Patches the code from by applying the rule.
  *

packages/cloudflare/src/cli/build/patches/investigated/index.ts

@@ -1,4 +1,5 @@
 export * from "./copy-package-cli-files.js";
 export * from "./patch-cache.js";
 export * from "./patch-require.js";
+export * from "./patch-vercel-og-library.js";
 export * from "./update-webpack-chunks-file/index.js";

packages/cloudflare/src/cli/build/patches/investigated/patch-vercel-og-library.spec.ts

@@ -0,0 +1,69 @@
+import { mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+
+import { BuildOptions } from "@opennextjs/aws/build/helper.js";
+import mockFs from "mock-fs";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+
+import { patchVercelOgLibrary } from "./patch-vercel-og-library";
+
+const nodeModulesVercelOgDir = "node_modules/.pnpm/[email protected]/node_modules/next/dist/compiled/@vercel/og";
+const nextServerOgNftPath = "examples/api/.next/server/app/og/route.js.nft.json";
+const openNextFunctionDir = "examples/api/.open-next/server-functions/default/examples/api";
+const openNextOgRoutePath = path.join(openNextFunctionDir, ".next/server/app/og/route.js");
+const openNextVercelOgDir = path.join(openNextFunctionDir, "node_modules/next/dist/compiled/@vercel/og");
+
+const buildOpts = {
+  appBuildOutputPath: "examples/api",
+  monorepoRoot: "",
+  outputDir: "examples/api/.open-next",
+} as BuildOptions;
+
+describe("patchVercelOgLibrary", () => {
+  beforeAll(() => {
+    mockFs();
+
+    mkdirSync(nodeModulesVercelOgDir, { recursive: true });
+    mkdirSync(path.dirname(nextServerOgNftPath), { recursive: true });
+    mkdirSync(path.dirname(openNextOgRoutePath), { recursive: true });
+    mkdirSync(openNextVercelOgDir, { recursive: true });
+
+    writeFileSync(
+      nextServerOgNftPath,
+      JSON.stringify({ version: 1, files: [`../../../../../../${nodeModulesVercelOgDir}/index.node.js`] })
+    );
+    writeFileSync(
+      path.join(nodeModulesVercelOgDir, "index.edge.js"),
+      `var fallbackFont = fetch(new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url)).then((res) => res.arrayBuffer());`
+    );
+    writeFileSync(openNextOgRoutePath, `e.exports=import("next/dist/compiled/@vercel/og/index.node.js")`);
+    writeFileSync(path.join(openNextVercelOgDir, "index.node.js"), "");
+    writeFileSync(path.join(openNextVercelOgDir, "noto-sans-v27-latin-regular.ttf"), "");
+  });
+
+  afterAll(() => mockFs.restore());
+
+  it("should patch the open-next files correctly", () => {
+    patchVercelOgLibrary(buildOpts);
+
+    expect(readdirSync(openNextVercelOgDir)).toMatchInlineSnapshot(`
+      [
+        "index.edge.js",
+        "noto-sans-v27-latin-regular.ttf.bin",
+      ]
+    `);
+
+    expect(readFileSync(path.join(openNextVercelOgDir, "index.edge.js"), { encoding: "utf-8" }))
+      .toMatchInlineSnapshot(`
+      "async function getFallbackFont() {
+        return (await import("./noto-sans-v27-latin-regular.ttf.bin")).default
+      }
+
+      var fallbackFont = getFallbackFont()"
+    `);
+
+    expect(readFileSync(openNextOgRoutePath, { encoding: "utf-8" })).toMatchInlineSnapshot(
+      `"e.exports=import("next/dist/compiled/@vercel/og/index.edge.js")"`
+    );
+  });
+});

packages/cloudflare/src/cli/build/patches/investigated/patch-vercel-og-library.ts

@@ -0,0 +1,50 @@
+import { copyFileSync, existsSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
+import path from "node:path";
+
+import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
+import { getPackagePath } from "@opennextjs/aws/build/helper.js";
+import { globSync } from "glob";
+
+import { parseFile } from "../ast/util.js";
+import { patchVercelOgFallbackFont, patchVercelOgImport } from "../ast/vercel-og.js";
+
+type TraceInfo = { version: number; files: string[] };
+
+export function patchVercelOgLibrary(buildOpts: BuildOptions) {
+  const { appBuildOutputPath, outputDir } = buildOpts;
+
+  const packagePath = path.join(outputDir, "server-functions/default", getPackagePath(buildOpts));
+
+  for (const traceInfoPath of globSync(path.join(appBuildOutputPath, ".next/server/**/*.nft.json"))) {
+    const traceInfo: TraceInfo = JSON.parse(readFileSync(traceInfoPath, { encoding: "utf8" }));
+    const tracedNodePath = traceInfo.files.find((p) => p.endsWith("@vercel/og/index.node.js"));
+
+    if (!tracedNodePath) continue;
+
+    const outputDir = path.join(packagePath, "node_modules/next/dist/compiled/@vercel/og");
+    const outputEdgePath = path.join(outputDir, "index.edge.js");
+
+    if (!existsSync(outputEdgePath)) {
+      const tracedEdgePath = path.join(
+        path.dirname(traceInfoPath),
+        tracedNodePath.replace("index.node.js", "index.edge.js")
+      );
+
+      copyFileSync(tracedEdgePath, outputEdgePath);
+      rmSync(outputEdgePath.replace("index.edge.js", "index.node.js"));
+
+      const node = parseFile(outputEdgePath);
+      const { edits, matches } = patchVercelOgFallbackFont(node);
+      writeFileSync(outputEdgePath, node.commitEdits(edits));
+
+      const fontFileName = matches[0]!.getMatch("PATH")!.text();
+      renameSync(path.join(outputDir, fontFileName), path.join(outputDir, `${fontFileName}.bin`));
+    }
+
+    const routeFilePath = traceInfoPath.replace(appBuildOutputPath, packagePath).replace(".nft.json", "");
+
+    const node = parseFile(routeFilePath);
+    const { edits } = patchVercelOgImport(node);
+    writeFileSync(routeFilePath, node.commitEdits(edits));
+  }
+}