No CF support yet version

examples/cf-page-build/package.json

@@ -11,22 +11,18 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
+		"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
 		"@ethercorps/sveltekit-og": "link:../../package",
-		"@playwright/test": "^1.31.2",
+		"@playwright/test": "^1.34.3",
 		"@sveltejs/adapter-cloudflare": "^2.3.0",
-		"@sveltejs/adapter-static": "^2.0.2",
+		"@sveltejs/kit": "^1.20.2",
-		"@sveltejs/kit": "^1.12.0",
+		"eslint": "^8.42.0",
-		"eslint": "^8.36.0",
+		"eslint-config-prettier": "^8.8.0",
-		"eslint-config-prettier": "^8.7.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.4",
+		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.9.0",
+		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^3.57.0",
+		"svelte": "^3.59.1",
-		"vite": "^4.2.0"
+		"vite": "^4.3.9"
 	},
-	"type": "module",
+	"type": "module"
-	"dependencies": {
-		"@resvg/resvg-wasm": "^2.4.1",
-		"satori": "^0.10.1"
-	}
 }

examples/cf-page-build/vite.config.js

@@ -1,7 +1,13 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
 
 const config = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	optimizeDeps: {
+		esbuildOptions:{
+			plugins: [NodeModulesPolyfillPlugin()]
+		}
+	}
 };
 
 export default config;

examples/cf-workers-build/package.json

@@ -11,23 +11,20 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
+		"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
 		"@ethercorps/sveltekit-og": "link:../../package",
 		"@playwright/test": "^1.34.3",
 		"@sveltejs/adapter-cloudflare-workers": "^1.1.2",
+		"@sveltejs/adapter-static": "^2.0.2",
 		"@sveltejs/kit": "^1.20.2",
 		"eslint": "^8.42.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^3.59.1",
-		"vite": "^4.3.9",
-		"vite-plugin-node-polyfills": "^0.8.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"@resvg/resvg-wasm": "^2.4.1",
 		"rollup-plugin-node-polyfills": "^0.2.1",
-		"satori": "^0.10.1"
+		"svelte": "^3.59.1",
-	}
+		"vite": "^4.3.9"
+	},
+	"type": "module"
 }

examples/cf-workers-build/wrangler.toml

@@ -1,4 +1,4 @@
-name = "test-sveltekit-og"
+name = "test-sk-og"
 account_id = "394fea48b28fa3f0d4751e6a12240570"
 
 main = "./.cloudflare/worker.js"
@@ -6,8 +6,8 @@ site.bucket = "./.cloudflare/public"
 
 build.command = "pnpm run build"
 
-node_compat = true
-compatibility_flags = [ "nodejs_compat" ]
-
 compatibility_date = "2023-06-05"
+compatibility_flags = [ "nodejs_compat" ]
+node_compat = true
+
 workers_dev = true

examples/node-build/package.json

@@ -12,7 +12,7 @@
 	},
 	"devDependencies": {
 		"@ethercorps/sveltekit-og": "link:../../package",
-		"@playwright/test": "^1.34.3",
+		"@playwright/test": "^1.35.0",
 		"@sveltejs/adapter-node": "^1.2.4",
 		"@sveltejs/kit": "^1.20.2",
 		"eslint": "^8.42.0",
@@ -23,9 +23,5 @@
 		"svelte": "^3.59.1",
 		"vite": "^4.3.9"
 	},
-	"type": "module",
+	"type": "module"
-	"dependencies": {
-		"@resvg/resvg-wasm": "^2.4.1",
-		"satori": "^0.10.1"
-	}
 }

examples/vercel-build/package.json

@@ -23,9 +23,5 @@
 		"svelte": "^3.59.1",
 		"vite": "^4.3.9"
 	},
-	"type": "module",
+	"type": "module"
-	"dependencies": {
-		"@resvg/resvg-wasm": "^2.4.1",
-		"satori": "^0.10.1"
-	}
 }

package.json

@@ -31,19 +31,19 @@
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"prismjs": "^1.29.0",
-		"svelte": "^3.59.1",
 		"svelte-check": "^2.10.3",
 		"svelte-preprocess": "^4.10.7",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.5.3",
 		"typescript": "^4.9.5",
-		"vite": "^4.3.9"
+		"vite": "^4.3.9",
+		"svelte": "^3.59.1"
+
 	},
 	"type": "module",
 	"dependencies": {
-		"@resvg/resvg-wasm": "^2.4.1",
+		"svg2png-wasm": "^1.4.0",
-		"satori": "^0.10.1",
+		"satori": "^0.10.1"
-		"svelte": "^3.59.1"
 	},
 	"keywords": [
 		"open graph image",

src/lib/index.ts

@@ -1,16 +1,18 @@
 import satori, { type SatoriOptions } from 'satori';
 import type { SvelteComponent } from 'svelte';
 import toReactElement from './toReactElement';
-import {Resvg as wasmSvg, initWasm, type ResvgRenderOptions} from "@resvg/resvg-wasm"
+import { svg2png, initialize, type ConvertOptions } from 'svg2png-wasm';
+
+let initialized = false;
 
 const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
 const fontData: ArrayBuffer = await fontFile.arrayBuffer();
 
-let initialized = false;
+const indexWasmRes = await fetch('https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm');
-const initReSvg = async () => {
+const svg2PngWasmBuffer = await indexWasmRes.arrayBuffer();
-	const indexWasmRes = await fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm');
+
-	const buffer = await indexWasmRes.arrayBuffer();
+const initSvgToPng = async () => {
-	await initWasm(buffer);
+	await initialize(svg2PngWasmBuffer).catch((e) => console.log(e));
 	initialized = true;
 };
 
@@ -30,21 +32,23 @@ const ImageResponse = async (htmlTemplate: string, optionsByUser: ImageResponseO
 		]
 	});
 
-	const reSvgOptions = {
-		fitTo: {
-			mode: 'width',
-			value: options.width
-		}
-	} as ResvgRenderOptions;
-
 	if (!initialized) {
-		await initReSvg();
+		await initSvgToPng();
 		initialized = true
 	}
-	const reSvgInit = new wasmSvg(svg, reSvgOptions);
-	const pngBuffer = reSvgInit.render().asPng();
 
-	return new Response(pngBuffer, {
+	const defaultConfig: ConvertOptions = {
+		width: options.width, // optional
+		height: options.height, // optional
+	};
+
+	if (Object.hasOwn(options, 'backgroundColor')) {
+		defaultConfig.backgroundColor = options.backgroundColor
+	}
+
+	const png = await svg2png(svg, defaultConfig);
+
+	return new Response(png, {
 		headers: {
 			'Content-Type': 'image/png',
 			'cache-control': 'public, immutable, no-transform, max-age=31536000',
@@ -81,6 +85,7 @@ type ImageOptions = {
 	height?: number;
 	debug?: boolean;
 	fonts?: SatoriOptions['fonts'];
+	backgroundColor?: string;
 	graphemeImages?: Record<string, string>;
 	loadAdditionalAsset?: (
 		languageCode: string,
@@ -88,6 +93,6 @@ type ImageOptions = {
 	) => Promise<SatoriOptions['fonts'] | string | undefined>;
 };
 
-type ImageResponseType = typeof ImageResponse;
+export type ImageResponseType = typeof ImageResponse;
 
-export { componentToImageResponse, ImageResponse, toReactElement, type ImageResponseType };
+export { componentToImageResponse, ImageResponse, toReactElement };