satoru-render 1.0.10 → 1.0.12

package/dist/core.d.ts

@@ -2,8 +2,10 @@ import { LogLevel } from "./log-level.js";
 export interface SatoruModule {
     create_instance: () => any;
     destroy_instance: (inst: any) => void;
-    collect_resources: (inst: any, html: string, width: number, height: number) => void;
-    get_pending_resources: (inst: any) => string;
+    collect_resources: (inst: any, html: string, width: number, height: number, mediaType: number) => void;
+    get_collect_profile: (inst: any) => string;
+    set_collect_profile_enabled: (inst: any, enabled: boolean) => void;
+    get_pending_resources: (inst: any) => Uint8Array | null;
     add_resource: (inst: any, url: string, type: number, data: Uint8Array) => void;
     scan_css: (inst: any, css: string) => void;
     load_font: (inst: any, name: string, data: Uint8Array) => void;
@@ -87,6 +89,10 @@ export interface RenderOptions {
     onLog?: (level: LogLevel, message: string) => void;
     /** Media type for CSS @media queries (default: "screen") */
     mediaType?: "screen" | "print";
+    /** Collect coarse render timings for diagnostics */
+    profile?: boolean;
+    /** Receives coarse render timings when profile is enabled */
+    onProfile?: (profile: Record<string, number>) => void;
 }
 export declare const DEFAULT_FONT_MAP: Record<string, string>;
 export declare function resolveGoogleFonts(resource: RequiredResource, userAgent?: string): Promise<ResolvedFontResult | Uint8Array | null>;

package/dist/core.js

@@ -312,6 +312,16 @@ export class SatoruBase {
     }
     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;
@@ -360,6 +370,7 @@ export class SatoruBase {
         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
@@ -370,9 +381,13 @@ export class SatoruBase {
             const cachedResolver = async (r) => {
                 const cacheKey = `${r.type}:${r.url}:${r.characters ?? ""}`;
                 const cached = this.resourceCache.get(cacheKey);
-                if (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);
@@ -418,33 +433,6 @@ export class SatoruBase {
                 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 canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
-                            const ctx = canvas.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) {
-                            // fall through
-                        }
-                        let typeInt = 1; // Font
-                        if (r.type === "image")
-                            typeInt = 2;
-                        if (r.type === "css")
-                            typeInt = 3;
-                        mod.add_resource(instancePtr, r.url, typeInt, uint8);
-                    })();
-                }
                 let typeInt = 1; // Font
                 if (r.type === "image")
                     typeInt = 2;
@@ -454,21 +442,89 @@ export class SatoruBase {
             };
             const inputHtmls = Array.isArray(value) ? value : [value];
             const processedHtmls = [];
+            const utf8Decoder = new TextDecoder();
+            const utf8Encoder = new TextEncoder();
             const resolvedResources = 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)
+                    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 resources = JSON.parse(json);
+                    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:")) {
@@ -476,6 +532,9 @@ export class SatoruBase {
                             }
                             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;
@@ -502,7 +561,7 @@ export class SatoruBase {
                                     ? 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;
@@ -530,7 +589,7 @@ export class SatoruBase {
                                                 return match;
                                             }
                                         });
-                                        finalUint8 = new TextEncoder().encode(rewrittenCss);
+                                        finalUint8 = utf8Encoder.encode(rewrittenCss);
                                     }
                                 }
                                 await loadResourceData(r, finalUint8);
@@ -540,7 +599,9 @@ export class SatoruBase {
                             console.warn(`Failed to resolve resource: ${r.url}`, e);
                         }
                     }));
+                    addProfile("loadPendingResources", now() - loadStart);
                 }
+                const stripStart = now();
                 const resolvedUrls = new Set();
                 resolvedResources.forEach((key) => {
                     const parts = key.split(":");
@@ -554,6 +615,7 @@ export class SatoruBase {
                     processedHtml = processedHtml.replace(linkRegex, "");
                 });
                 processedHtmls.push(processedHtml);
+                addProfile("stripResolvedLinks", now() - stripStart);
             }
             const formatMap = {
                 svg: 0,
@@ -561,29 +623,55 @@ export class SatoruBase {
                 webp: 2,
                 pdf: 3,
             };
-            const result = mod.render(instancePtr, processedHtmls, 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 ?? 0.5,
-                fitPositionY: options.fitPosition?.y ?? 0.5,
-                backgroundColor: this.parseColor(options.backgroundColor),
-                mediaType: options.mediaType === "print" ? 1 : 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 ?? 0.5,
+                    fitPositionY: options.fitPosition?.y ?? 0.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,
+                    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 ?? 0.5,
+                    fitPositionY: options.fitPosition?.y ?? 0.5,
+                    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);
+                const decodeStart = now();
+                const svg = utf8Decoder.decode(result);
+                addProfile("decodeResult", now() - decodeStart);
+                options.onProfile?.(profile);
+                return svg;
             }
-            return new Uint8Array(result);
+            const copyStart = now();
+            const bytes = new Uint8Array(result);
+            addProfile("copyResult", now() - copyStart);
+            options.onProfile?.(profile);
+            return bytes;
         }
         finally {
             mod.destroy_instance(instancePtr);