satoru-render 1.0.10 → 1.0.12

package/dist/workers-parent.js

@@ -379,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;
@@ -502,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;
@@ -534,12 +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);
+		mod.set_collect_profile_enabled(instancePtr, profileEnabled);
 		try {
 			const defaultResolver = (r) => this.resolveDefaultResource(r, baseUrl, options.userAgent);
 			const resolver = options.resolveResource ? async (r) => {
@@ -548,8 +556,13 @@ 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);
@@ -571,23 +584,6 @@ var SatoruBase = class {
 			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;
@@ -595,23 +591,88 @@ var SatoruBase = class {
 			};
 			const inputHtmls = Array.isArray(value) ? value : [value];
 			const processedHtmls = [];
+			const utf8Decoder = new TextDecoder();
+			const utf8Encoder = new TextEncoder();
 			const resolvedResources = /* @__PURE__ */ new Set();
 			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);
+					const collectElapsed = now() - collectStart;
+					addProfile("collectResources", collectElapsed);
+					addProfile(`collectResourcesRound${i + 1}`, collectElapsed);
+					if (profileEnabled) try {
+						const collectProfile = JSON.parse(mod.get_collect_profile(instancePtr));
+						for (const [key, value] of Object.entries(collectProfile)) {
+							addProfile(key, value);
+							addProfile(`${key}Round${i + 1}`, value);
+						}
+					} catch {}
+					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 = utf8Decoder.decode(new Uint8Array(binary.buffer, binary.byteOffset + offset, urlLen));
+						offset += urlLen;
+						const nameLen = view.getUint32(offset, true);
+						offset += 4;
+						const name = utf8Decoder.decode(new Uint8Array(binary.buffer, binary.byteOffset + offset, nameLen));
+						offset += nameLen;
+						const charsLen = view.getUint32(offset, true);
+						offset += 4;
+						const characters = utf8Decoder.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 ?? ""}`;
+						if (r.type === "font" && resolvedResources.has(`font:${r.url}:`)) return false;
 						return !resolvedResources.has(key);
 					});
+					addProfile("pendingResourcesCount", pending.length);
+					addProfile(`pendingResourcesRound${i + 1}Count`, pending.length);
+					for (const r of pending) if (r.type === "font") {
+						addProfile("pendingFontResourcesCount", 1);
+						addProfile(`pendingFontResourcesRound${i + 1}Count`, 1);
+					} else if (r.type === "css") {
+						addProfile("pendingCssResourcesCount", 1);
+						addProfile(`pendingCssResourcesRound${i + 1}Count`, 1);
+					} else if (r.type === "image") {
+						addProfile("pendingImageResourcesCount", 1);
+						addProfile(`pendingImageResourcesRound${i + 1}Count`, 1);
+					}
+					addProfile("parsePendingResources", now() - parseStart);
 					if (pending.length === 0) break;
+					addProfile("pendingResourceRoundsCount", 1);
+					const loadStart = now();
 					await Promise.all(pending.map(async (r) => {
 						try {
 							if (r.url.startsWith("data:")) return;
 							const key = `${r.type}:${r.url}:${r.characters ?? ""}`;
 							resolvedResources.add(key);
+							if (r.type === "font") resolvedResources.add(`font:${r.url}:`);
 							const data = await cachedResolver({ ...r });
 							if (!data) return;
 							if (typeof data === "object" && "css" in data && "fonts" in data) {
@@ -627,7 +688,7 @@ var SatoruBase = class {
 							if (data instanceof Uint8Array || ArrayBuffer.isView(data)) {
 								let finalUint8 = data instanceof Uint8Array ? data : new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
 								if (r.type === "css") {
-									const cssText = new TextDecoder().decode(finalUint8);
+									const cssText = utf8Decoder.decode(finalUint8);
 									const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(r.url) || r.url.startsWith("data:");
 									let cssBaseUrl = r.url;
 									if (!isAbsolute && baseUrl) try {
@@ -643,7 +704,7 @@ var SatoruBase = class {
 												return match;
 											}
 										});
-										finalUint8 = new TextEncoder().encode(rewrittenCss);
+										finalUint8 = utf8Encoder.encode(rewrittenCss);
 									}
 								}
 								await loadResourceData(r, finalUint8);
@@ -652,7 +713,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(":");
@@ -664,13 +727,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,
@@ -684,12 +763,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 = utf8Decoder.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.10",
+  "version": "1.0.12",
   "description": "High-fidelity HTML/CSS to SVG/PNG/PDF converter running in WebAssembly",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,10 +8,6 @@
   "bin": {
     "satoru-render": "./dist/cli.js"
   },
-  "scripts": {
-    "build": "tsc -b && rolldown -c rolldown.config.js",
-    "deploy": "npm publish"
-  },
   "exports": {
     ".": {
       "workerd": {
@@ -123,12 +119,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"
@@ -164,5 +160,9 @@
     "@unocss/preset-wind4": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "tsc -b && rolldown -c rolldown.config.js",
+    "deploy": "npm publish"
   }
-}
+}