satoru-render 1.0.9 → 1.0.11

package/dist/workers-parent.js

@@ -250,14 +250,18 @@ let LogLevel = /* @__PURE__ */ function(LogLevel) {
 }({});
 //#endregion
 //#region src/core.ts
+const emojiUrl = "https://cdn.jsdelivr.net/npm/@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2";
 const DEFAULT_FONT_MAP = {
 	"sans-serif": "https://fonts.googleapis.com/css2?family=Noto+Sans+JP",
 	serif: "https://fonts.googleapis.com/css2?family=Noto+Serif+JP",
 	monospace: "https://fonts.googleapis.com/css2?family=M+PLUS+1+Code",
 	cursive: "https://fonts.googleapis.com/css2?family=Yuji+Syuku",
 	fantasy: "https://fonts.googleapis.com/css2?family=Reggae+One",
-	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"
+	"Noto Color Emoji": emojiUrl,
+	emoji: emojiUrl,
+	"Noto Emoji": emojiUrl,
+	notocoloremoji: emojiUrl,
+	notoemoji: emojiUrl
 };
 /**
 * Parse unicode-range string into an array of [start, end] codepoint ranges.
@@ -375,20 +379,20 @@ var SatoruBase = class {
 	}
 	async getModule() {
 		if (!this.modPromise) this.modPromise = (async () => {
-			let currentLogLevel = LogLevel.None;
+			let currentLogLevel = 0;
 			let currentUserOnLog;
 			const mod = await this.factory({
 				onLog: (level, message) => {
-					if (currentLogLevel !== LogLevel.None && level <= currentLogLevel && currentUserOnLog) currentUserOnLog(level, message);
+					if (currentLogLevel !== 0 && level <= currentLogLevel && currentUserOnLog) currentUserOnLog(level, message);
 				},
 				print: (text) => {
-					if (currentLogLevel !== LogLevel.None && LogLevel.Info <= currentLogLevel && currentUserOnLog) currentUserOnLog(LogLevel.Info, text);
+					if (currentLogLevel !== 0 && 3 <= currentLogLevel && currentUserOnLog) currentUserOnLog(3, text);
 				},
 				printErr: (text) => {
-					if (currentLogLevel !== LogLevel.None && LogLevel.Error <= currentLogLevel && currentUserOnLog) currentUserOnLog(LogLevel.Error, text);
+					if (currentLogLevel !== 0 && 1 <= currentLogLevel && currentUserOnLog) currentUserOnLog(1, text);
 				}
 			});
-			mod.logLevel = LogLevel.None;
+			mod.logLevel = 0;
 			const originalSetLogLevel = mod.set_log_level;
 			mod.set_log_level = (level) => {
 				currentLogLevel = level;
@@ -455,6 +459,15 @@ var SatoruBase = class {
 	async destroyInstance(inst) {
 		(await this.getModule()).destroy_instance(inst);
 	}
+	async loadFont(name, data) {
+		const mod = await this.getModule();
+		const inst = mod.create_instance();
+		try {
+			mod.load_font(inst, name, data);
+		} finally {
+			mod.destroy_instance(inst);
+		}
+	}
 	async loadFallbackFont(data) {
 		const mod = await this.getModule();
 		const inst = mod.create_instance();
@@ -489,6 +502,13 @@ var SatoruBase = class {
 	}
 	async render(options) {
 		let { format = "svg", value, url, baseUrl } = options;
+		const profileEnabled = options.profile === true;
+		const profile = {};
+		const now = () => typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+		const addProfile = (name, elapsed) => {
+			if (!profileEnabled) return;
+			profile[name] = (profile[name] ?? 0) + elapsed;
+		};
 		if (format === "pdf" && Array.isArray(value) && value.length > 1) {
 			const pagePdfs = [];
 			const SatoruClass = this.constructor;
@@ -521,17 +541,13 @@ var SatoruBase = class {
 		const prevLogLevel = mod.logLevel;
 		const prevOnLog = mod.onLog;
 		const prevFontMap = this.currentFontMap;
-		mod.logLevel = logLevel ?? LogLevel.None;
+		mod.logLevel = logLevel ?? 0;
 		mod.set_log_level(mod.logLevel);
 		mod.onLog = onLog;
 		this.currentFontMap = options.fontMap ?? DEFAULT_FONT_MAP;
 		const instancePtr = mod.create_instance();
 		mod.set_font_map(instancePtr, this.currentFontMap);
 		try {
-			if (fonts) for (const f of fonts) mod.load_font(instancePtr, f.name, f.data);
-			if (options.fallbackFonts) for (const data of options.fallbackFonts) mod.load_fallback_font(instancePtr, data);
-			if (images) for (const img of images) mod.load_image(instancePtr, img.name, img.url, img.width ?? 0, img.height ?? 0);
-			if (css) mod.scan_css(instancePtr, css);
 			const defaultResolver = (r) => this.resolveDefaultResource(r, baseUrl, options.userAgent);
 			const resolver = options.resolveResource ? async (r) => {
 				return await options.resolveResource(r, defaultResolver);
@@ -539,32 +555,34 @@ var SatoruBase = class {
 			const cachedResolver = async (r) => {
 				const cacheKey = `${r.type}:${r.url}:${r.characters ?? ""}`;
 				const cached = this.resourceCache.get(cacheKey);
-				if (cached) return cached;
+				if (cached) {
+					addProfile("resourceCacheHitsCount", 1);
+					return cached;
+				}
+				const resolveStart = now();
 				const result = await resolver(r);
+				addProfile("resolveResources", now() - resolveStart);
 				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;
 			};
+			if (this.currentFontMap["notocoloremoji"]) {
+				const emojiUrl = this.currentFontMap["notocoloremoji"];
+				const res = await cachedResolver({
+					type: "font",
+					url: emojiUrl,
+					name: "notocoloremoji"
+				});
+				if (res && res instanceof Uint8Array) mod.load_font(instancePtr, "notocoloremoji", res);
+				else if (res && "fonts" in res) for (const f of res.fonts) mod.load_font(instancePtr, "notocoloremoji", f.data);
+			}
+			if (fonts) for (const f of fonts) mod.load_font(instancePtr, f.name, f.data);
+			if (options.fallbackFonts) for (const data of options.fallbackFonts) mod.load_fallback_font(instancePtr, data);
+			if (images) for (const img of images) mod.load_image(instancePtr, img.name, img.url, img.width ?? 0, img.height ?? 0);
+			if (css) mod.scan_css(instancePtr, css);
 			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;
@@ -576,14 +594,53 @@ var SatoruBase = class {
 			for (const rawHtml of inputHtmls) {
 				let processedHtml = rawHtml;
 				for (let i = 0; i < 10; i++) {
-					mod.collect_resources(instancePtr, processedHtml, width, height);
-					const json = mod.get_pending_resources(instancePtr);
-					if (!json) break;
-					const pending = JSON.parse(json).filter((r) => {
+					addProfile("collectResourcesCount", 1);
+					const collectStart = now();
+					mod.collect_resources(instancePtr, processedHtml, width, height, options.mediaType === "print" ? 1 : 0);
+					addProfile("collectResources", now() - collectStart);
+					const pendingStart = now();
+					const binary = mod.get_pending_resources(instancePtr);
+					addProfile("getPendingResources", now() - pendingStart);
+					if (!binary) break;
+					const parseStart = now();
+					const view = new DataView(binary.buffer, binary.byteOffset, binary.byteLength);
+					let offset = 0;
+					const count = view.getUint32(offset, true);
+					offset += 4;
+					const resources = [];
+					for (let j = 0; j < count; j++) {
+						const typeInt = view.getUint8(offset++);
+						const redraw_on_ready = view.getUint8(offset++) !== 0;
+						const urlLen = view.getUint32(offset, true);
+						offset += 4;
+						const url = new TextDecoder().decode(new Uint8Array(binary.buffer, binary.byteOffset + offset, urlLen));
+						offset += urlLen;
+						const nameLen = view.getUint32(offset, true);
+						offset += 4;
+						const name = new TextDecoder().decode(new Uint8Array(binary.buffer, binary.byteOffset + offset, nameLen));
+						offset += nameLen;
+						const charsLen = view.getUint32(offset, true);
+						offset += 4;
+						const characters = new TextDecoder().decode(new Uint8Array(binary.buffer, binary.byteOffset + offset, charsLen));
+						offset += charsLen;
+						let type = "font";
+						if (typeInt === 2) type = "image";
+						else if (typeInt === 3) type = "css";
+						resources.push({
+							type,
+							url,
+							name,
+							characters,
+							redraw_on_ready
+						});
+					}
+					const pending = resources.filter((r) => {
 						const key = `${r.type}:${r.url}:${r.characters ?? ""}`;
 						return !resolvedResources.has(key);
 					});
+					addProfile("parsePendingResources", now() - parseStart);
 					if (pending.length === 0) break;
+					const loadStart = now();
 					await Promise.all(pending.map(async (r) => {
 						try {
 							if (r.url.startsWith("data:")) return;
@@ -629,7 +686,9 @@ var SatoruBase = class {
 							console.warn(`Failed to resolve resource: ${r.url}`, e);
 						}
 					}));
+					addProfile("loadPendingResources", now() - loadStart);
 				}
+				const stripStart = now();
 				const resolvedUrls = /* @__PURE__ */ new Set();
 				resolvedResources.forEach((key) => {
 					const parts = key.split(":");
@@ -641,13 +700,29 @@ var SatoruBase = class {
 					processedHtml = processedHtml.replace(linkRegex, "");
 				});
 				processedHtmls.push(processedHtml);
+				addProfile("stripResolvedLinks", now() - stripStart);
 			}
-			const result = mod.render(instancePtr, processedHtmls, width, height, {
+			const formatMap = {
 				svg: 0,
 				png: 1,
 				webp: 2,
 				pdf: 3
-			}[format] ?? 0, {
+			};
+			const renderStart = now();
+			const result = processedHtmls.length === 1 ? mod.render_from_state(instancePtr, width, height, formatMap[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,
+				fitPositionX: options.fitPosition?.x ?? .5,
+				fitPositionY: options.fitPosition?.y ?? .5,
+				backgroundColor: this.parseColor(options.backgroundColor),
+				mediaType: options.mediaType === "print" ? 1 : 0
+			}) : mod.render(instancePtr, processedHtmls, width, height, formatMap[format] ?? 0, {
 				svgTextToPaths: options.textToPaths ?? true,
 				outputWidth: options.outputWidth ?? 0,
 				outputHeight: options.outputHeight ?? 0,
@@ -661,12 +736,24 @@ var SatoruBase = class {
 				backgroundColor: this.parseColor(options.backgroundColor),
 				mediaType: options.mediaType === "print" ? 1 : 0
 			});
+			addProfile("wasmRender", now() - renderStart);
 			if (!result) {
+				options.onProfile?.(profile);
 				if (format === "svg") return "";
 				return new Uint8Array();
 			}
-			if (format === "svg") return new TextDecoder().decode(result);
-			return new Uint8Array(result);
+			if (format === "svg") {
+				const decodeStart = now();
+				const svg = new TextDecoder().decode(result);
+				addProfile("decodeResult", now() - decodeStart);
+				options.onProfile?.(profile);
+				return svg;
+			}
+			const copyStart = now();
+			const bytes = new Uint8Array(result);
+			addProfile("copyResult", now() - copyStart);
+			options.onProfile?.(profile);
+			return bytes;
 		} finally {
 			mod.destroy_instance(instancePtr);
 			mod.logLevel = prevLogLevel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "satoru-render",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "High-fidelity HTML/CSS to SVG/PNG/PDF converter running in WebAssembly",
   "type": "module",
   "main": "./dist/index.js",
@@ -123,12 +123,12 @@
     "cloudflare-workers"
   ],
   "devDependencies": {
-    "@types/jsdom": "28.0.1",
+    "@types/jsdom": "28.0.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "rolldown": "1.0.0-rc.11",
-    "typescript": "^5.9.3",
-    "vitest": "^4.1.0"
+    "rolldown": "1.0.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.6"
   },
   "dependencies": {
     "worker-lib": "2.2.0"