mnfst 0.5.73 → 0.5.75

package/lib/manifest.export.js

@@ -150,11 +150,33 @@ function initializeExportPlugin() {
         return `export-${ts}.${ext}`;
     }
 
+    // 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.
+    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.
+    function describeExportError(err) {
+        if (err && err.message) return err;
+        if (err && typeof Event !== 'undefined' && err instanceof Event) {
+            const tag = err.target && err.target.tagName ? err.target.tagName.toLowerCase() : 'image';
+            return new Error(
+                `failed to render ${tag} during export. ` +
+                `Common causes: cross-origin images without CORS headers, ` +
+                `an oversized target element, or a no-target snapshot of a complex page. ` +
+                `Pass a "target" option to scope the snapshot.`
+            );
+        }
+        return new Error(String(err));
+    }
+
     function emitError(format, err) {
-        console.error('[x-export] export failed:', err);
+        const e = describeExportError(err);
+        console.error('[x-export] export failed:', e.message);
         try {
             window.dispatchEvent(new CustomEvent('manifest:export-error', {
-                detail: { format, error: String(err && err.message || err) }
+                detail: { format, error: e.message }
             }));
         } catch { /* ignore */ }
     }
@@ -194,6 +216,10 @@ function initializeExportPlugin() {
         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
         };
         if (opts.backgroundColor) out.backgroundColor = opts.backgroundColor;
@@ -202,31 +228,76 @@ function initializeExportPlugin() {
         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.
+    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) };
+            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 target = resolveTarget(opts);
-        const so = snapshotOptions(opts);
+        const so = applySafeDimensions(target, snapshotOptions(opts));
         let dataUrl;
-        if (ext === 'png') dataUrl = await lib.toPng(target, so);
+        if (ext === 'png') dataUrl = await snapshotWithFallback(lib, 'toPng', 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 lib.toJpeg(target, so);
+            dataUrl = await snapshotWithFallback(lib, 'toJpeg', target, so);
         } else if (ext === 'webp') {
-            const blob = await lib.toBlob(target, { ...so, type: 'image/webp', quality: opts.quality || 0.95 });
+            const webpOpts = { ...so, type: 'image/webp', quality: opts.quality || 0.95 };
+            const blob = await snapshotWithFallback(lib, 'toBlob', target, webpOpts);
             dataUrl = URL.createObjectURL(blob);
         }
         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 html-to-image + jsPDF, which is well-behaved at small
+    // target sizes.
     async function exportPdf(opts, filename) {
+        if (!opts.target) {
+            return printToPdf(filename);
+        }
         const [imgLib, jsPDFCtor] = await Promise.all([loadHtmlToImage(), loadJsPDF()]);
         const target = resolveTarget(opts);
-        const so = snapshotOptions(opts);
+        const so = applySafeDimensions(target, snapshotOptions(opts));
         if (!so.backgroundColor) so.backgroundColor = effectivePageBackground();
-        const dataUrl = await imgLib.toPng(target, so);
+        const dataUrl = await snapshotWithFallback(imgLib, 'toPng', 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' });
@@ -241,6 +312,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) {

package/package.json

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