satoru-render 0.0.20 → 0.0.21

package/README.md

@@ -135,7 +135,37 @@ const pdf = await render({
 });
 ```
 
-### 2. Multi-page PDF Generation
+### 2. Avoiding CORS Issues with Proxy
+
+If you encounter CORS errors when fetching images or fonts from other domains, you can use a proxy service within the `resolveResource` callback.
+
+```typescript
+const png = await render({
+  value: html,
+  width: 800,
+  format: "png",
+  resolveResource: async (resource, defaultResolver) => {
+    // Intercept external images to avoid CORS issues
+    if (resource.type === "image" && !resource.url.startsWith("data:")) {
+      const proxyUrl = `https://your-proxy-service.com/?url=${encodeURIComponent(resource.url)}`;
+      try {
+        const resp = await fetch(proxyUrl);
+        if (resp.ok) {
+          const buf = await resp.arrayBuffer();
+          return new Uint8Array(buf);
+        }
+      } catch (e) {
+        console.warn(`Failed to fetch via proxy: ${resource.url}`, e);
+      }
+    }
+    
+    // Fallback to default resolver for other resources
+    return defaultResolver(resource);
+  },
+});
+```
+
+### 3. Multi-page PDF Generation
 
 Generate complex documents by passing an array of HTML strings. Each element in the array becomes a new page.
 

package/dist/core.d.ts

@@ -82,4 +82,9 @@ export declare abstract class SatoruBase {
         format?: "svg";
     }): Promise<string>;
     render(options: RenderOptions): Promise<string | Uint8Array>;
+    /**
+     * Combines multiple simple PDF files into one.
+     * This is a minimal implementation specialized for Skia-generated PDFs.
+     */
+    private mergeSimplePDFs;
 }

package/dist/core.js

@@ -1,10 +1,10 @@
 import { LogLevel } from "./log-level.js";
 export const DEFAULT_FONT_MAP = {
-    "sans-serif": "https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-jp/files/noto-sans-jp-japanese-400-normal.woff2",
-    serif: "https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-jp/files/noto-serif-jp-japanese-400-normal.woff2",
-    monospace: "https://cdn.jsdelivr.net/npm/@fontsource/m-plus-1-code/files/m-plus-1-code-japanese-400-normal.woff2",
-    cursive: "https://cdn.jsdelivr.net/npm/@fontsource/yuji-syuku/files/yuji-syuku-japanese-400-normal.woff2",
-    fantasy: "https://cdn.jsdelivr.net/npm/@fontsource/reggae-one/files/reggae-one-japanese-400-normal.woff2",
+    "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",
 };
@@ -161,8 +161,23 @@ export class SatoruBase {
         }
     }
     async render(options) {
+        let { format = "svg", value, url, baseUrl } = options;
+        if (format === "pdf" && Array.isArray(value) && value.length > 1) {
+            const pagePdfs = [];
+            const SatoruClass = this.constructor;
+            for (const html of value) {
+                const engine = await SatoruClass.create();
+                const pagePdf = await engine.render({
+                    ...options,
+                    value: html,
+                    format: "pdf",
+                });
+                pagePdfs.push(pagePdf);
+            }
+            return this.mergeSimplePDFs(pagePdfs);
+        }
         const mod = await this.getModule();
-        let { value, url, width, height = 0, format = "svg", fonts, images, css, baseUrl, 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";
@@ -240,7 +255,9 @@ export class SatoruBase {
                                 const uint8 = data instanceof Uint8Array
                                     ? data
                                     : new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
-                                if (r.type === "image" && typeof createImageBitmap !== "undefined" && typeof OffscreenCanvas !== "undefined") {
+                                if (r.type === "image" &&
+                                    typeof createImageBitmap !== "undefined" &&
+                                    typeof OffscreenCanvas !== "undefined") {
                                     try {
                                         const blob = new Blob([uint8.buffer]);
                                         const bitmap = await createImageBitmap(blob);
@@ -308,4 +325,97 @@ export class SatoruBase {
             this.currentFontMap = prevFontMap;
         }
     }
+    /**
+     * Combines multiple simple PDF files into one.
+     * This is a minimal implementation specialized for Skia-generated PDFs.
+     */
+    mergeSimplePDFs(pdfs) {
+        if (pdfs.length === 0)
+            return new Uint8Array();
+        if (pdfs.length === 1)
+            return pdfs[0];
+        const decoder = new TextDecoder();
+        const encoder = new TextEncoder();
+        let maxObjNum = 0;
+        const allObjects = [];
+        const pageIds = [];
+        for (const pdf of pdfs) {
+            const offset = maxObjNum;
+            const content = decoder.decode(pdf);
+            // Find all objects
+            const objRegex = /(\d+)\s+0\s+obj([\s\S]*?)endobj/g;
+            let match;
+            let currentPdfMax = 0;
+            while ((match = objRegex.exec(content)) !== null) {
+                const oldId = parseInt(match[1], 10);
+                const objBody = match[2];
+                const newId = oldId + offset;
+                if (oldId > currentPdfMax)
+                    currentPdfMax = oldId;
+                // Shift references within the object body: "N 0 R" -> "(N+offset) 0 R"
+                const shiftedBody = objBody.replace(/(\d+)\s+0\s+R/g, (_, id) => {
+                    return `${parseInt(id, 10) + offset} 0 R`;
+                });
+                // Detect if this is a Page object
+                if (shiftedBody.includes("/Type /Page") &&
+                    !shiftedBody.includes("/Type /Pages")) {
+                    pageIds.push(newId);
+                }
+                // We skip Catalog and original Pages root, we'll create new ones
+                if (!shiftedBody.includes("/Type /Catalog") &&
+                    !shiftedBody.includes("/Type /Pages")) {
+                    allObjects.push({
+                        id: newId,
+                        content: encoder.encode(`${newId} 0 obj${shiftedBody}endobj\n`),
+                    });
+                }
+            }
+            maxObjNum += currentPdfMax;
+        }
+        // Create new Catalog and Pages root
+        const catalogId = ++maxObjNum;
+        const pagesRootId = ++maxObjNum;
+        const newPagesRoot = encoder.encode(`${pagesRootId} 0 obj\n<< /Type /Pages /Kids [${pageIds
+            .map((id) => `${id} 0 R`)
+            .join(" ")}] /Count ${pageIds.length} >>\nendobj\n`);
+        const newCatalog = encoder.encode(`${catalogId} 0 obj\n<< /Type /Catalog /Pages ${pagesRootId} 0 R >>\nendobj\n`);
+        allObjects.push({ id: pagesRootId, content: newPagesRoot });
+        allObjects.push({ id: catalogId, content: newCatalog });
+        // Build the final PDF
+        const resultParts = [encoder.encode("%PDF-1.4\n")];
+        const xref = [];
+        let currentOffset = resultParts[0].length;
+        // Sort objects by ID for a clean xref table
+        allObjects.sort((a, b) => a.id - b.id);
+        for (const obj of allObjects) {
+            xref.push({ id: obj.id, offset: currentOffset });
+            resultParts.push(obj.content);
+            currentOffset += obj.content.length;
+        }
+        const startXref = currentOffset;
+        resultParts.push(encoder.encode("xref\n"));
+        resultParts.push(encoder.encode(`0 ${maxObjNum + 1}\n`));
+        resultParts.push(encoder.encode("0000000000 65535 f \n"));
+        const xrefMap = new Map(xref.map((x) => [x.id, x.offset]));
+        for (let i = 1; i <= maxObjNum; i++) {
+            const offset = xrefMap.get(i);
+            if (offset !== undefined) {
+                resultParts.push(encoder.encode(`${offset.toString().padStart(10, "0")} 00000 n \n`));
+            }
+            else {
+                resultParts.push(encoder.encode("0000000000 00001 f \n"));
+            }
+        }
+        resultParts.push(encoder.encode(`trailer\n<< /Size ${maxObjNum + 1} /Root ${catalogId} 0 R >>\n`));
+        resultParts.push(encoder.encode(`startxref\n${startXref}\n%%EOF`));
+        // Combine all parts
+        const totalLength = resultParts.reduce((acc, part) => acc + part.length, 0);
+        const merged = new Uint8Array(totalLength);
+        let pos = 0;
+        for (const part of resultParts) {
+            merged.set(part, pos);
+            pos += part.length;
+        }
+        return merged;
+    }
 }

package/dist/index.js

@@ -77,16 +77,16 @@ export class Satoru extends SatoruBase {
             handlePseudo("::before");
             handlePseudo("::after");
             // Special handling for specific elements
-            if (src instanceof HTMLCanvasElement) {
+            if (typeof HTMLCanvasElement !== "undefined" && src instanceof HTMLCanvasElement) {
                 const img = document.createElement("img");
                 img.src = src.toDataURL();
                 img.setAttribute("style", dest.getAttribute("style") || "");
                 dest.replaceWith(img);
             }
-            else if (src instanceof HTMLImageElement) {
+            else if (typeof HTMLImageElement !== "undefined" && src instanceof HTMLImageElement) {
                 dest.setAttribute("src", absoluteUrl(src.src));
             }
-            else if (src instanceof HTMLInputElement) {
+            else if (typeof HTMLInputElement !== "undefined" && src instanceof HTMLInputElement) {
                 if (src.type === "checkbox" || src.type === "radio") {
                     if (src.checked)
                         dest.setAttribute("checked", "");
@@ -95,10 +95,10 @@ export class Satoru extends SatoruBase {
                     dest.setAttribute("value", src.value);
                 }
             }
-            else if (src instanceof HTMLTextAreaElement) {
+            else if (typeof HTMLTextAreaElement !== "undefined" && src instanceof HTMLTextAreaElement) {
                 dest.innerText = src.value;
             }
-            else if (src instanceof HTMLSelectElement) {
+            else if (typeof HTMLSelectElement !== "undefined" && src instanceof HTMLSelectElement) {
                 // Find the selected option and mark it
                 const index = src.selectedIndex;
                 const clonedSelect = dest;
@@ -149,7 +149,7 @@ export class Satoru extends SatoruBase {
             const processedValues = [];
             let hasElement = false;
             for (const val of values) {
-                if (val instanceof HTMLElement) {
+                if (typeof HTMLElement !== "undefined" && val instanceof HTMLElement) {
                     processedValues.push(this.serializeElement(val));
                     hasElement = true;
                 }