diff --git a/apps/dashboard/next.config.js b/apps/dashboard/next.config.js index 8bea70d..bd5e75d 100644 --- a/apps/dashboard/next.config.js +++ b/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 diff --git a/apps/dashboard/src/app/api/og/[key]/route.ts b/apps/dashboard/src/app/api/og/[key]/route.ts index 76200d5..d1b6253 100644 --- a/apps/dashboard/src/app/api/og/[key]/route.ts +++ b/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); diff --git a/apps/dashboard/src/app/api/og/template/[name]/route.ts b/apps/dashboard/src/app/api/og/template/[name]/route.ts index f9e2b5f..55e5ac6 100644 --- a/apps/dashboard/src/app/api/og/template/[name]/route.ts +++ b/apps/dashboard/src/app/api/og/template/[name]/route.ts @@ -1,4 +1,3 @@ -import { initWasm } from "@resvg/resvg-wasm"; import { elementsToReactElements, exportToPng, @@ -6,14 +5,6 @@ import { } 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); diff --git a/apps/dashboard/src/lib/export.ts b/apps/dashboard/src/lib/export.ts index 34685c8..1a3b921 100644 --- a/apps/dashboard/src/lib/export.ts +++ b/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 | 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/resvg-wasm@2.4.0/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 { - 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(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f1fe49..f6578a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -821,6 +821,7 @@ packages: '@humanwhocodes/config-array@0.11.13': resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==} engines: {node: '>=10.10.0'} + deprecated: Use @eslint/config-array instead '@humanwhocodes/module-importer@1.0.1': resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} @@ -828,6 +829,7 @@ packages: '@humanwhocodes/object-schema@2.0.1': resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==} + deprecated: Use @eslint/object-schema instead '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} @@ -3100,6 +3102,7 @@ packages: glob@7.1.7: resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==} + deprecated: Glob versions prior to v9 are no longer supported glob@8.1.0: resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} @@ -4061,6 +4064,7 @@ packages: rimraf@3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rollup@4.9.1: