feat: simplify

apps/dashboard/next.config.js

@@ -31,12 +31,6 @@ const nextConfig = {
       },
     ]
   },
-  experimental: {
-    outputFileTracingIncludes: {
-      '/api/og/*': ['./src/app/api/og/resvg.wasm'],
-      '/api/og/template/*': ['./src/app/api/og/resvg.wasm'],
-    }
-  }
 }
 
 module.exports = nextConfig

apps/dashboard/src/app/api/og/[key]/route.ts

@@ -1,5 +1,4 @@
 import { kv } from "@vercel/kv";
-import { initWasm } from "@resvg/resvg-wasm";
 import type { NextRequest } from "next/server";
 import type { OGElement } from "../../../../lib/types";
 import {
@@ -8,14 +7,6 @@ import {
   exportToSvg,
 } from "../../../../lib/export";
 import { loadFonts } from "../../../../lib/fonts";
-import fs from "node:fs";
-import path from "node:path";
-import url from "node:url";
-
-const resvg = fs.readFileSync(
-  url.fileURLToPath(path.join(import.meta.url, '../../resvg.wasm'))
-)
-const initWasmPromise = initWasm(resvg);
 
 export async function GET(
   request: NextRequest,
@@ -33,7 +24,6 @@ export async function GET(
   );
 
   const reactElements = elementsToReactElements(ogElements, dynamicTexts);
-  await initWasmPromise;
   const fonts = await loadFonts(ogElements);
   const svg = await exportToSvg(reactElements, fonts);
   const png = await exportToPng(svg);

apps/dashboard/src/app/api/og/template/[name]/route.ts

@@ -1,19 +1,10 @@
-import { initWasm } from "@resvg/resvg-wasm";
 import {
   elementsToReactElements,
   exportToPng,
   exportToSvg,
 } from "../../../../../lib/export";
 import { TEMPLATES } from "../../../../../lib/templates";
 import { loadFonts } from "../../../../../lib/fonts";
-import fs from "node:fs";
-import path from "node:path";
-import url from "node:url";
-
-const resvg = fs.readFileSync(
-  url.fileURLToPath(path.join(import.meta.url, '../../../resvg.wasm'))
-)
-const initWasmPromise = initWasm(resvg);
 
 export async function GET(
   _: Request,
@@ -30,7 +21,6 @@ export async function GET(
 
   const ogElements = template.elements;
   const reactElements = elementsToReactElements(ogElements);
-  await initWasmPromise;
   const fonts = await loadFonts(ogElements);
   const svg = await exportToSvg(reactElements, fonts);
   const png = await exportToPng(svg);

apps/dashboard/src/lib/export.ts

@@ -6,6 +6,24 @@ import type { OGElement } from "./types";
 import { loadFonts } from "./fonts";
 import { createElementStyle, createImgElementStyle } from "./elements";
 
+let initWasmPromise: Promise<void> | undefined;
+
+// eslint-disable-next-line turbo/no-undeclared-env-vars -- it's always true for tests
+if (process.env.VITEST_POOL_ID) {
+  initWasmPromise = initWasm(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access -- it actually works fine in tests
+    require("node:fs/promises").readFile(
+      "node_modules/@resvg/resvg-wasm/index_bg.wasm",
+    ),
+  );
+} {
+  initWasmPromise = initWasm(
+    fetch("https://unpkg.com/@resvg/[email protected]/index_bg.wasm", {
+      cache: "no-store",
+    })
+  );
+}
+
 export interface ReactElements {
   type: OGElement["tag"] | "img";
   props: {
@@ -111,17 +129,10 @@ export async function exportToSvg(
 }
 
 /**
- * Export an SVG string to a PNG Uint8Array, using the provided font buffers.
+ * Export an SVG string to a PNG Uint8Array.
  */
 export async function exportToPng(svg: string): Promise<Uint8Array> {
-  if (process.env.VITEST_POOL_ID) {
-    await initWasm(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access -- it actually works fine in tests
-      require("node:fs/promises").readFile(
-        "node_modules/@resvg/resvg-wasm/index_bg.wasm",
-      ),
-    );
-  }
+  await initWasmPromise;
 
   const resvgJS = new Resvg(svg);
   const pngData = resvgJS.render();