wasm-html-to-image 1.0.10 → 1.0.12

package/dist/core-orchestrate.d.ts

@@ -42,6 +42,7 @@ export interface Orchestration {
     onLog: HtmlToImageOptions["onLog"];
     diagnostics: boolean;
     onDiagnostics: HtmlToImageOptions["onDiagnostics"];
+    onLayout: HtmlToImageOptions["onLayout"];
     resolveResource: ResolveResourceHook | undefined;
     mediaType: "screen" | "print";
     textToPaths: boolean | undefined;

package/dist/core-orchestrate.js

@@ -34,7 +34,7 @@ export function defaultSpeed(format) {
 }
 /** Build per-call orchestration state (log gate, timings, diag, resolve ctx). */
 export function createOrchestration(module, options) {
-    const { format = "png", quality = 85, speed: speedOption, width, height, crop, fit, value, url, baseUrl, fontMap, userAgent, fallbackFonts, logLevel = LogLevel.None, onLog, diagnostics = false, onDiagnostics, resolveResource, mediaType = "screen", textToPaths, css, fonts: preloadFonts, limits = {}, pdfTitle, pdfAuthor, pdfSubject, pdfKeywords, pdfCreator, pdfProducer, pdfMargin, pdfHeader, pdfFooter, } = options;
+    const { format = "png", quality = 85, speed: speedOption, width, height, crop, fit, value, url, baseUrl, fontMap, userAgent, fallbackFonts, logLevel = LogLevel.None, onLog, diagnostics = false, onDiagnostics, onLayout, resolveResource, mediaType = "screen", textToPaths, css, fonts: preloadFonts, limits = {}, pdfTitle, pdfAuthor, pdfSubject, pdfKeywords, pdfCreator, pdfProducer, pdfMargin, pdfHeader, pdfFooter, } = options;
     // `animation` accepts a boolean (image input: keep frames) or, for HTML
     // input, an object requesting keyframe sampling. The object form turns on
     // the boolean flag for the encode stage and enables the frame path.
@@ -167,6 +167,7 @@ export function createOrchestration(module, options) {
         onLog,
         diagnostics,
         onDiagnostics,
+        onLayout,
         resolveResource,
         mediaType,
         textToPaths,
@@ -407,6 +408,10 @@ export async function tryRunHtmlInstance(module, htmls, satoruOpts, defaultFontM
         await resolveHtmlResources(module, sInst, htmls, width, height, baseUrl, fontMap ?? defaultFontMap, userAgent ?? DEFAULT_USER_AGENT, fallbackFonts, resolveCtx);
         addTime("resolveResources", now() - resolveStart);
         emitLog(LogLevel.Info, "resources resolved");
+        if (orch.onLayout && typeof module.satoru_layout_json === "function") {
+            const page = Array.isArray(htmls) ? htmls[0] : htmls;
+            orch.onLayout(JSON.parse(module.satoru_layout_json(sInst, page, width, height ?? 0, orch.mediaTypeInt)));
+        }
         if (format === "svg" || format === "pdf") {
             const renderStart = now();
             const out = (await renderBinding(sInst, htmls, width, height ?? 0, fmtInt, satoruOpts));

package/dist/core-resources.js

@@ -108,7 +108,8 @@ async function fetchResourceBytesInner(url, baseUrl, userAgent, timeoutMs, confi
     const headers = userAgent && isNodeRuntime() ? { "User-Agent": userAgent } : undefined;
     // Abort hung connections so one stalled server cannot outlive `timeoutMs`.
     const signal = timeoutMs !== undefined
-        ? AbortSignal.timeout(Math.max(1, timeoutMs))
+        ? // Node >= 24 requires an integer delay; the remaining budget is fractional.
+            AbortSignal.timeout(Math.max(1, Math.ceil(timeoutMs)))
         : undefined;
     const fetchBytes = async (target) => {
         // Servers may vary the body by User-Agent (e.g. woff2 vs ttf CSS).
@@ -440,7 +441,17 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
         // later sheet must not land before (and so lose to) a large earlier one. They are
         // buffered here and injected in discovery order once the whole round has settled.
         const loadedCss = [];
-        await mapWithLimit(pending, FETCH_CONCURRENCY, async (r) => {
+        // When maxResourceCount cuts a round short, what is dropped should be the least harmful: a missing
+        // image leaves a hole, a missing font turns the whole text into tofu. Stylesheets go first (they
+        // cascade by document order and may reveal more), then fonts, then images; discovery order is
+        // kept within each kind.
+        const rank = (t) => (t === "css" ? 0 : t === "font" ? 1 : 2);
+        const ordered = pending
+            .map((r, i) => ({ r, i }))
+            .sort((a, b) => rank(a.r.type) - rank(b.r.type) || a.i - b.i)
+            .map((e) => e.r);
+        let fontsSkippedByCount = 0;
+        await mapWithLimit(ordered, FETCH_CONCURRENCY, async (r) => {
             const diag = ctx.diag;
             const entry = diag
                 ? {
@@ -482,6 +493,8 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
                 if (ctx.limits.maxResourceCount !== undefined &&
                     ctx.usage.resourceCount >= ctx.limits.maxResourceCount) {
                     const message = `Maximum resource count (${ctx.limits.maxResourceCount}) exceeded`;
+                    if (r.type === "font")
+                        fontsSkippedByCount++;
                     skipWithError(DIAGNOSTIC_CODES.LIMIT_RESOURCE_COUNT, message);
                     return;
                 }
@@ -538,6 +551,17 @@ export async function resolveHtmlResources(module, satoruInst, htmls, width, hei
                 diag?.warnings.push(d);
             }
         });
+        if (fontsSkippedByCount > 0) {
+            // Text in those fonts renders as tofu: say what to change instead of leaving a silent bad image.
+            const message = `${fontsSkippedByCount} font file(s) were not loaded because maxResourceCount ` +
+                `(${ctx.limits.maxResourceCount}) was reached; text using them may render as missing glyphs. ` +
+                "Raise limits.maxResourceCount (a Google Fonts stylesheet alone can reference over a hundred files).";
+            ctx.diag?.warnings.push({
+                code: DIAGNOSTIC_CODES.LIMIT_RESOURCE_COUNT,
+                message,
+            });
+            ctx.emitLog(LogLevel.Warning, message);
+        }
         loadedCss.sort((a, b) => a.index - b.index);
         for (const css of loadedCss) {
             const text = new TextDecoder().decode(css.bytes);

package/dist/core.d.ts

@@ -60,6 +60,21 @@ export interface RenderOptions {
  * - Image input: render stage is skipped; `width`/`height`/`crop`/`fit`
  *   are applied as output resize on the encode stage.
  */
+/** One element's border box from `onLayout` (page coordinates, CSS px). */
+export interface LayoutBox {
+    /** Path of element-child indexes from the root, e.g. "0.1.3". */
+    p: string;
+    /** Lower-case tag name. */
+    t: string;
+    /** `id` attribute ("" when absent). */
+    i: string;
+    /** `class` attribute, truncated ("" when absent). */
+    c: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
 export interface HtmlToImageOptions extends RenderOptions {
     /** Encode quality 0-100 (encode stage only, default 85; ignored for svg/pdf). */
     quality?: number;
@@ -127,6 +142,13 @@ export interface HtmlToImageOptions extends RenderOptions {
     diagnostics?: boolean;
     /** Receives the diagnostics report when `diagnostics` is enabled. */
     onDiagnostics?: (report: RenderDiagnostics) => void;
+    /**
+     * Debug aid for comparing against a reference browser: receives every laid-out element's border
+     * box in page coordinates (HTML input only; `html-to-image` instance pipeline). `p` is the
+     * element's path among element children of the shadow-flattened tree ("0.1.3"), so a browser
+     * walk produces the same keys. Inline boxes are omitted except replaced ones (img, svg, ...).
+     */
+    onLayout?: (boxes: LayoutBox[]) => void;
     /**
      * Override hook for resource resolution, applied to every fetch path
      * (discovery fetches, fallback-font URLs, HTML `url` fetch). Return