mnfst 0.5.74 → 0.5.77

package/lib/manifest.export.js

@@ -26,7 +26,7 @@
  *
  * Supported formats: pdf (default), png, jpeg, webp, csv, json.
  *
- * Library dependencies (html-to-image, jsPDF) are loaded lazily on first
+ * Library dependencies (modern-screenshot, jsPDF) are loaded lazily on first
  * use from jsDelivr; pages that never export pay nothing.
  *
  * Elements with `data-no-export` are excluded from visual snapshots.
@@ -151,12 +151,12 @@ function initializeExportPlugin() {
     }
 
     // Transparent 1×1 PNG, used as a fallback when an inline image fails to fetch.
-    // html-to-image would otherwise reject the whole snapshot on a single CORS or 404.
+    // Without it, a single CORS or 404 image would reject the entire snapshot.
     const TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=';
 
-    // html-to-image rejects with the raw `image.onerror` Event when the assembled
-    // SVG fails to decode (oversized clones, malformed inline assets, etc.).
-    // Translate those into something readable before logging.
+    // The snapshot library rejects with the raw `image.onerror` Event when the
+    // assembled SVG fails to decode (oversized clones, malformed inline assets,
+    // etc.). Translate those into something readable before logging.
     function describeExportError(err) {
         if (err && err.message) return err;
         if (err && typeof Event !== 'undefined' && err instanceof Event) {
@@ -208,66 +208,102 @@ function initializeExportPlugin() {
     }
 
     function snapshotOptions(opts) {
-        // Filter callback for html-to-image — exclude opt-out elements.
+        // Filter callback for modern-screenshot — exclude opt-out elements.
         const filter = (node) => {
             if (!node || node.nodeType !== 1) return true;
             return !(node.hasAttribute && node.hasAttribute('data-no-export'));
         };
         const out = {
-            pixelRatio: Number(opts.resolution) > 0 ? Number(opts.resolution) : 2,
-            cacheBust: true,
-            // A single cross-origin image without CORS headers would otherwise
-            // reject the whole snapshot. Substitute a transparent pixel so the
-            // export still produces a usable file.
-            imagePlaceholder: TRANSPARENT_PIXEL,
-            filter
+            scale: Number(opts.resolution) > 0 ? Number(opts.resolution) : 2,
+            filter,
+            fetch: {
+                // Cross-origin assets without CORS headers fall back to this
+                // transparent pixel instead of rejecting the entire snapshot.
+                placeholderImage: TRANSPARENT_PIXEL,
+                // Always bypass the cache so we get fresh, CORS-correct copies.
+                bypassingCache: true,
+            },
         };
         if (opts.backgroundColor) out.backgroundColor = opts.backgroundColor;
-        if (opts.width) out.canvasWidth = Number(opts.width);
-        if (opts.height) out.canvasHeight = Number(opts.height);
+        if (opts.width) out.width = Number(opts.width);
+        if (opts.height) out.height = Number(opts.height);
         return out;
     }
 
-    // Run an html-to-image call once. If it rejects with a raw Event (the SVG
-    // failed to decode — usually a font or oversized clone issue), retry once
-    // with safer options before propagating the error. Most real-world failures
-    // recover on the second attempt.
+    // Run a modern-screenshot call once. If it rejects with a raw Event (the
+    // assembled SVG failed to decode), retry once with safer options before
+    // propagating. Most real-world failures recover on the second attempt.
     async function snapshotWithFallback(lib, fn, target, so) {
         try {
             return await lib[fn](target, so);
         } catch (err) {
             if (err && err.message) throw err; // a real Error — don't mask it
-            const safer = { ...so, skipFonts: true, pixelRatio: Math.min(so.pixelRatio || 2, 1) };
+            const safer = {
+                ...so,
+                scale: Math.min(so.scale || 2, 1),
+                font: { skip: true },
+            };
             return await lib[fn](target, safer);
         }
     }
 
+    // Chromium and Safari reject SVG-image decoding past roughly 16,000px on
+    // either axis. A long article at pixelRatio: 2 easily exceeds that. When
+    // the target is the whole body we cap dimensions so the assembled SVG
+    // stays decodable; explicit targets keep their natural size.
+    const SAFE_MAX_DIMENSION = 14000;
+
+    function applySafeDimensions(target, so) {
+        const isWholeBody = target === document.body || target === document.documentElement;
+        if (!isWholeBody) return so;
+        const rect = target.getBoundingClientRect();
+        const width = Math.max(rect.width, target.scrollWidth || 0);
+        const height = Math.max(rect.height, target.scrollHeight || 0);
+        const ratio = so.pixelRatio || 2;
+        const limit = SAFE_MAX_DIMENSION / ratio;
+        const out = { ...so };
+        if (width > limit) out.canvasWidth = Math.floor(limit);
+        if (height > limit) out.canvasHeight = Math.floor(limit);
+        return out;
+    }
+
     async function exportImage(opts, filename, ext) {
-        const lib = await loadHtmlToImage();
+        const lib = await loadSnapshotLib();
         const target = resolveTarget(opts);
-        const so = snapshotOptions(opts);
+        const so = applySafeDimensions(target, snapshotOptions(opts));
         let dataUrl;
-        if (ext === 'png') dataUrl = await snapshotWithFallback(lib, 'toPng', target, so);
+        if (ext === 'png') dataUrl = await snapshotWithFallback(lib, 'domToPng', target, so);
         else if (ext === 'jpeg') {
             if (!so.backgroundColor) so.backgroundColor = effectivePageBackground();
             so.quality = Number(opts.quality) > 0 && Number(opts.quality) <= 1
                 ? Number(opts.quality)
                 : 0.95;
-            dataUrl = await snapshotWithFallback(lib, 'toJpeg', target, so);
+            dataUrl = await snapshotWithFallback(lib, 'domToJpeg', target, so);
         } else if (ext === 'webp') {
-            const webpOpts = { ...so, type: 'image/webp', quality: opts.quality || 0.95 };
-            const blob = await snapshotWithFallback(lib, 'toBlob', target, webpOpts);
-            dataUrl = URL.createObjectURL(blob);
+            so.quality = Number(opts.quality) > 0 && Number(opts.quality) <= 1
+                ? Number(opts.quality)
+                : 0.95;
+            dataUrl = await snapshotWithFallback(lib, 'domToWebp', target, so);
         }
         triggerDownload(dataUrl, filename);
     }
 
+    // Whole-page PDF: route through the browser's native print pipeline.
+    // It handles multi-page layout, page breaks, vector text, and the page's
+    // own @media print CSS — far more reliable than rasterizing a long page
+    // and embedding it as a single image. The user sees the print dialog and
+    // picks "Save as PDF" (or any installed PDF printer). Element-scoped PDFs
+    // continue to use modern-screenshot + jsPDF, which is well-behaved at small
+    // target sizes.
     async function exportPdf(opts, filename) {
-        const [imgLib, jsPDFCtor] = await Promise.all([loadHtmlToImage(), loadJsPDF()]);
+        if (!opts.target) {
+            return printToPdf(filename);
+        }
+        const [imgLib, jsPDFCtor] = await Promise.all([loadSnapshotLib(), loadJsPDF()]);
         const target = resolveTarget(opts);
-        const so = snapshotOptions(opts);
+        const so = applySafeDimensions(target, snapshotOptions(opts));
         if (!so.backgroundColor) so.backgroundColor = effectivePageBackground();
-        const dataUrl = await snapshotWithFallback(imgLib, 'toPng', target, so);
+        const dataUrl = await snapshotWithFallback(imgLib, 'domToPng', target, so);
         const img = await loadImage(dataUrl);
         const orientation = img.width > img.height ? 'landscape' : 'portrait';
         const pdf = new jsPDFCtor({ orientation, unit: 'pt', format: opts.pageSize || 'a4' });
@@ -282,6 +318,20 @@ function initializeExportPlugin() {
         pdf.save(filename);
     }
 
+    function printToPdf(filename) {
+        // The browser's "Save as PDF" dialog seeds its default filename from
+        // document.title. Swap it briefly so the suggested name matches the
+        // user's intent, then restore after the dialog closes.
+        const original = document.title;
+        const cleaned = String(filename || '').replace(/\.pdf$/i, '') || original;
+        document.title = cleaned;
+        try { window.print(); }
+        finally {
+            // Wait one frame so the print dialog reads the swapped title first.
+            setTimeout(() => { document.title = original; }, 0);
+        }
+    }
+
     function effectivePageBackground() {
         let el = document.body;
         while (el && el !== document.documentElement.parentElement) {
@@ -379,15 +429,20 @@ function initializeExportPlugin() {
 
     // Lazy library loaders — cached promises.
 
-    let htmlToImagePromise = null;
-    function loadHtmlToImage() {
-        if (htmlToImagePromise) return htmlToImagePromise;
-        htmlToImagePromise = loadScript('https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.min.js')
+    // modern-screenshot is an actively maintained TypeScript rewrite of
+    // html-to-image with proper CSS AST parsing. It handles @layer rules,
+    // CSS custom properties, modern color functions, and url(data:...) values
+    // inside cross-origin stylesheets — all of which html-to-image mishandles.
+    let snapshotLibPromise = null;
+    function loadSnapshotLib() {
+        if (snapshotLibPromise) return snapshotLibPromise;
+        snapshotLibPromise = loadScript('https://cdn.jsdelivr.net/npm/modern-screenshot/dist/index.iife.min.js')
             .then(() => {
-                if (!window.htmlToImage) throw new Error('html-to-image failed to load');
-                return window.htmlToImage;
+                const lib = window.modernScreenshot;
+                if (!lib) throw new Error('modern-screenshot failed to load');
+                return lib;
             });
-        return htmlToImagePromise;
+        return snapshotLibPromise;
     }
 
     let jsPDFPromise = null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.74",
+    "version": "0.5.77",
     "private": false,
     "workspaces": [
         "templates/starter",