satoru-render 0.0.25 → 1.0.1

package/dist/workers-parent.js

@@ -259,6 +259,59 @@ const DEFAULT_FONT_MAP = {
 	emoji: "https://cdn.jsdelivr.net/npm/@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2",
 	"Noto Color Emoji": "https://cdn.jsdelivr.net/npm/@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2"
 };
+/**
+* Parse unicode-range string into an array of [start, end] codepoint ranges.
+* e.g. "U+0000-00FF, U+0131" → [[0x0000, 0x00FF], [0x0131, 0x0131]]
+*/
+function parseUnicodeRanges(rangeStr) {
+	const ranges = [];
+	for (const part of rangeStr.split(",")) {
+		const m = part.trim().match(/U\+([0-9A-Fa-f?]+)(?:-([0-9A-Fa-f]+))?/);
+		if (!m) continue;
+		if (m[1].includes("?")) {
+			const lo = parseInt(m[1].replace(/\?/g, "0"), 16);
+			const hi = parseInt(m[1].replace(/\?/g, "F"), 16);
+			ranges.push([lo, hi]);
+		} else {
+			const start = parseInt(m[1], 16);
+			const end = m[2] ? parseInt(m[2], 16) : start;
+			ranges.push([start, end]);
+		}
+	}
+	return ranges;
+}
+/**
+* Check if any character's codepoint falls within the given unicode ranges.
+*/
+function hasMatchingCodepoint(ranges, characters) {
+	for (let i = 0; i < characters.length; i++) {
+		const cp = characters.codePointAt(i);
+		if (cp > 65535) i++;
+		for (const [start, end] of ranges) if (cp >= start && cp <= end) return true;
+	}
+	return false;
+}
+/**
+* Parse @font-face blocks from CSS text, extracting src url and unicode-range.
+*/
+function parseFontFaceBlocks(cssText) {
+	const blocks = [];
+	const blockRegex = /@font-face\s*\{([^}]+)\}/g;
+	let blockMatch;
+	while ((blockMatch = blockRegex.exec(cssText)) !== null) {
+		const body = blockMatch[1];
+		const srcMatch = body.match(/src:\s*url\(([^)]+)\)/);
+		const rangeMatch = body.match(/unicode-range:\s*([^;]+)/);
+		if (srcMatch) {
+			const url = srcMatch[1].replace(/['"]/g, "").trim();
+			blocks.push({
+				url,
+				unicodeRange: rangeMatch ? rangeMatch[1].trim() : null
+			});
+		}
+	}
+	return blocks;
+}
 async function resolveGoogleFonts(resource, userAgent) {
 	if (!resource.url.startsWith("provider:google-fonts")) return null;
 	const urlObj = new URL(resource.url);
@@ -279,8 +332,35 @@ async function resolveGoogleFonts(resource, userAgent) {
 	try {
 		const resp = await fetch(googleFontUrl, { headers });
 		if (!resp.ok) return null;
-		const buf = await resp.arrayBuffer();
-		return new Uint8Array(buf);
+		const cssText = await resp.text();
+		const cssBuf = new TextEncoder().encode(cssText);
+		const blocks = parseFontFaceBlocks(cssText);
+		if (blocks.length === 0) return cssBuf;
+		let filteredBlocks = blocks;
+		if (text && text.length > 0) filteredBlocks = blocks.filter((block) => {
+			if (!block.unicodeRange) return true;
+			return hasMatchingCodepoint(parseUnicodeRanges(block.unicodeRange), text);
+		});
+		if (filteredBlocks.length === 0) return cssBuf;
+		const fontResults = await Promise.all(filteredBlocks.map(async (block) => {
+			try {
+				const fontResp = await fetch(block.url, { headers });
+				if (!fontResp.ok) return null;
+				const buf = await fontResp.arrayBuffer();
+				return {
+					url: block.url,
+					data: new Uint8Array(buf)
+				};
+			} catch {
+				return null;
+			}
+		}));
+		const fonts = [];
+		for (const f of fontResults) if (f !== null) fonts.push(f);
+		return {
+			css: cssBuf,
+			fonts
+		};
 	} catch {
 		return null;
 	}
@@ -289,6 +369,7 @@ var SatoruBase = class {
 	factory;
 	modPromise;
 	currentFontMap = DEFAULT_FONT_MAP;
+	resourceCache = /* @__PURE__ */ new Map();
 	constructor(factory) {
 		this.factory = factory;
 	}
@@ -350,7 +431,16 @@ var SatoruBase = class {
 			webp: 2,
 			pdf: 3
 		}[options.format ?? "svg"] ?? 0;
-		const result = mod.render_from_state(inst, options.width, options.height ?? 0, format, options.textToPaths ?? true);
+		const result = mod.render_from_state(inst, options.width, options.height ?? 0, format, {
+			svgTextToPaths: options.textToPaths ?? true,
+			outputWidth: options.outputWidth ?? 0,
+			outputHeight: options.outputHeight ?? 0,
+			fitType: options.fit === "cover" ? 1 : options.fit === "fill" ? 2 : 0,
+			cropX: options.crop?.x ?? 0,
+			cropY: options.crop?.y ?? 0,
+			cropWidth: options.crop?.width ?? 0,
+			cropHeight: options.crop?.height ?? 0
+		});
 		if (!result) {
 			if (options.format === "svg") return "";
 			return new Uint8Array();
@@ -419,6 +509,40 @@ var SatoruBase = class {
 			const resolver = options.resolveResource ? async (r) => {
 				return await options.resolveResource(r, defaultResolver);
 			} : defaultResolver;
+			const cachedResolver = async (r) => {
+				const cacheKey = `${r.type}:${r.url}:${r.characters ?? ""}`;
+				const cached = this.resourceCache.get(cacheKey);
+				if (cached) return cached;
+				const result = await resolver(r);
+				if (result) {
+					if (result instanceof Uint8Array) this.resourceCache.set(cacheKey, result);
+					else if ("css" in result && "fonts" in result) this.resourceCache.set(cacheKey, result);
+				}
+				return result;
+			};
+			const loadResourceData = (r, uint8) => {
+				if (r.type === "image" && typeof createImageBitmap !== "undefined" && typeof OffscreenCanvas !== "undefined") return (async () => {
+					try {
+						const blob = new Blob([uint8.buffer]);
+						const bitmap = await createImageBitmap(blob);
+						const ctx = new OffscreenCanvas(bitmap.width, bitmap.height).getContext("2d");
+						if (ctx) {
+							ctx.drawImage(bitmap, 0, 0);
+							const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+							mod.load_image_pixels(instancePtr, r.url, bitmap.width, bitmap.height, new Uint8Array(imageData.data.buffer), r.url);
+							return;
+						}
+					} catch (e) {}
+					let typeInt = 1;
+					if (r.type === "image") typeInt = 2;
+					if (r.type === "css") typeInt = 3;
+					mod.add_resource(instancePtr, r.url, typeInt, uint8);
+				})();
+				let typeInt = 1;
+				if (r.type === "image") typeInt = 2;
+				if (r.type === "css") typeInt = 3;
+				mod.add_resource(instancePtr, r.url, typeInt, uint8);
+			};
 			const inputHtmls = Array.isArray(value) ? value : [value];
 			const processedHtmls = [];
 			const resolvedResources = /* @__PURE__ */ new Set();
@@ -438,25 +562,19 @@ var SatoruBase = class {
 							if (r.url.startsWith("data:")) return;
 							const key = `${r.type}:${r.url}:${r.characters ?? ""}`;
 							resolvedResources.add(key);
-							const data = await resolver({ ...r });
-							if (data && (data instanceof Uint8Array || ArrayBuffer.isView(data))) {
-								const uint8 = data instanceof Uint8Array ? data : new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
-								if (r.type === "image" && typeof createImageBitmap !== "undefined" && typeof OffscreenCanvas !== "undefined") try {
-									const blob = new Blob([uint8.buffer]);
-									const bitmap = await createImageBitmap(blob);
-									const ctx = new OffscreenCanvas(bitmap.width, bitmap.height).getContext("2d");
-									if (ctx) {
-										ctx.drawImage(bitmap, 0, 0);
-										const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
-										mod.load_image_pixels(instancePtr, r.url, bitmap.width, bitmap.height, new Uint8Array(imageData.data.buffer), r.url);
-										return;
-									}
-								} catch (e) {}
-								let typeInt = 1;
-								if (r.type === "image") typeInt = 2;
-								if (r.type === "css") typeInt = 3;
-								mod.add_resource(instancePtr, r.url, typeInt, uint8);
+							const data = await cachedResolver({ ...r });
+							if (!data) return;
+							if (typeof data === "object" && "css" in data && "fonts" in data) {
+								const fontResult = data;
+								mod.add_resource(instancePtr, r.url, 1, fontResult.css);
+								for (const font of fontResult.fonts) {
+									const fontKey = `font:${font.url}:`;
+									resolvedResources.add(fontKey);
+									mod.add_resource(instancePtr, font.url, 1, font.data);
+								}
+								return;
 							}
+							if (data instanceof Uint8Array || ArrayBuffer.isView(data)) await loadResourceData(r, data instanceof Uint8Array ? data : new Uint8Array(data.buffer, data.byteOffset, data.byteLength));
 						} catch (e) {
 							console.warn(`Failed to resolve resource: ${r.url}`, e);
 						}
@@ -479,7 +597,16 @@ var SatoruBase = class {
 				png: 1,
 				webp: 2,
 				pdf: 3
-			}[format] ?? 0, options.textToPaths ?? true);
+			}[format] ?? 0, {
+				svgTextToPaths: options.textToPaths ?? true,
+				outputWidth: options.outputWidth ?? 0,
+				outputHeight: options.outputHeight ?? 0,
+				fitType: options.fit === "cover" ? 1 : options.fit === "fill" ? 2 : 0,
+				cropX: options.crop?.x ?? 0,
+				cropY: options.crop?.y ?? 0,
+				cropWidth: options.crop?.width ?? 0,
+				cropHeight: options.crop?.height ?? 0
+			});
 			if (!result) {
 				if (format === "svg") return "";
 				return new Uint8Array();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "satoru-render",
-  "version": "0.0.25",
+  "version": "1.0.1",
   "description": "High-fidelity HTML/CSS to SVG/PNG/PDF converter running in WebAssembly",
   "type": "module",
   "main": "./dist/index.js",