satoru-render 1.0.9 → 1.0.11

package/dist/core.d.ts

@@ -2,8 +2,8 @@ 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_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 +87,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>;
@@ -123,6 +127,7 @@ export declare abstract class SatoruBase {
         mediaType?: "screen" | "print";
     }): Promise<string | Uint8Array>;
     destroyInstance(inst: any): Promise<void>;
+    loadFont(name: string, data: Uint8Array): Promise<void>;
     loadFallbackFont(data: Uint8Array): Promise<void>;
     protected parseColor(color?: string): number;
     protected abstract resolveDefaultResource(resource: RequiredResource, baseUrl?: string, userAgent?: string): Promise<Uint8Array | ResolvedFontResult | null>;

package/dist/core.js

@@ -1,12 +1,16 @@
 import { LogLevel } from "./log-level.js";
+const emojiUrl = "https://cdn.jsdelivr.net/npm/@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2";
 export 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.
@@ -256,6 +260,16 @@ export class SatoruBase {
         const mod = await this.getModule();
         mod.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();
@@ -298,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;
@@ -323,7 +347,7 @@ export class SatoruBase {
             }
         }
         let mod = await this.getModule();
-        const { width, height = 0, fonts, images, css, logLevel, onLog, } = options;
+        const { width, height = 0, fonts, images, css, logLevel, onLog } = options;
         if (!options.userAgent) {
             options.userAgent =
                 "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36";
@@ -347,24 +371,6 @@ export class SatoruBase {
         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) => {
@@ -374,48 +380,58 @@ 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);
                     }
-                    else if ("css" in result &&
-                        "fonts" in 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 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);
-                    })();
+            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) => {
                 let typeInt = 1; // Font
                 if (r.type === "image")
                     typeInt = 2;
@@ -429,17 +445,51 @@ export class SatoruBase {
             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);
+                    addProfile("collectResources", now() - collectStart);
+                    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 = 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:")) {
@@ -468,27 +518,29 @@ export class SatoruBase {
                                 return;
                             }
                             // Handle regular Uint8Array / ArrayBufferView
-                            if (data instanceof Uint8Array ||
-                                ArrayBuffer.isView(data)) {
+                            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 isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(r.url) || r.url.startsWith("data:");
+                                    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(r.url) ||
+                                        r.url.startsWith("data:");
                                     let cssBaseUrl = r.url;
                                     if (!isAbsolute && baseUrl) {
                                         try {
                                             const base = /^[a-z][a-z0-9+.-]*:\/\//i.test(baseUrl)
                                                 ? baseUrl
-                                                : new URL(`file:///${baseUrl.replace(/\\/g, "/")}`).href;
+                                                : new URL(`file:///${baseUrl.replace(/\\/g, "/")}`)
+                                                    .href;
                                             cssBaseUrl = new URL(r.url, base).href;
                                         }
                                         catch (e) { }
                                     }
                                     if (cssBaseUrl) {
                                         const rewrittenCss = cssText.replace(/url\(['"]?([^'")]+)['"]?\)/g, (match, urlParam) => {
-                                            if (urlParam.startsWith("data:") || /^[a-z][a-z0-9+.-]*:/i.test(urlParam)) {
+                                            if (urlParam.startsWith("data:") ||
+                                                /^[a-z][a-z0-9+.-]*:/i.test(urlParam)) {
                                                 return match;
                                             }
                                             try {
@@ -509,7 +561,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(":");
@@ -523,6 +577,7 @@ export class SatoruBase {
                     processedHtml = processedHtml.replace(linkRegex, "");
                 });
                 processedHtmls.push(processedHtml);
+                addProfile("stripResolvedLinks", now() - stripStart);
             }
             const formatMap = {
                 svg: 0,
@@ -530,29 +585,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 = new TextDecoder().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);