mnfst 0.5.78 → 0.5.80

package/lib/manifest.export.js

@@ -26,7 +26,7 @@
  *
  * Supported formats: pdf (default), png, jpeg, webp, csv, json.
  *
- * Library dependencies (modern-screenshot, jsPDF) are loaded lazily on first
+ * Library dependencies (html2canvas-pro, 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.
@@ -52,7 +52,7 @@ function initializeExportPlugin() {
                 urlTriggerFired = true;
                 const fmt = isKnownFormat(paramValue) ? paramValue : format;
                 setTimeout(() => {
-                    runExport(fmt, opts, opts.filename || defaultFilename(fmt))
+                    runExport(fmt, opts, resolveFilename(el, opts, fmt))
                         .catch((err) => emitError(fmt, err));
                 }, Number(opts.delay) > 0 ? Number(opts.delay) : 0);
             }
@@ -87,7 +87,7 @@ function initializeExportPlugin() {
         if (isAnchor && href && href.startsWith('#')) {
             const onClick = async (e) => {
                 if (e && typeof e.preventDefault === 'function') e.preventDefault();
-                const filename = opts.filename || defaultFilename(format);
+                const filename = resolveFilename(el, opts, format);
                 try {
                     await runExport(format, { ...opts, target: href }, filename);
                 } catch (err) {
@@ -102,7 +102,7 @@ function initializeExportPlugin() {
         // ----- Default: click anywhere else triggers export -----
         const onClick = async (e) => {
             if (e && typeof e.preventDefault === 'function') e.preventDefault();
-            const filename = opts.filename || defaultFilename(format);
+            const filename = resolveFilename(el, opts, format);
             try {
                 await runExport(format, opts, filename);
             } catch (err) {
@@ -150,6 +150,24 @@ function initializeExportPlugin() {
         return `export-${ts}.${ext}`;
     }
 
+    // Filename resolution precedence (highest first):
+    //   1. opts.filename from the directive's object expression
+    //   2. the standard HTML `download` attribute on an anchor host
+    //   3. a `data-filename` attribute on any host element
+    //   4. a timestamped default based on the format
+    function resolveFilename(el, opts, format) {
+        if (opts && opts.filename) return String(opts.filename);
+        if (el && el.tagName === 'A') {
+            const dl = el.getAttribute('download');
+            if (dl) return dl;
+        }
+        if (el && typeof el.getAttribute === 'function') {
+            const df = el.getAttribute('data-filename');
+            if (df) return df;
+        }
+        return defaultFilename(format);
+    }
+
     // Transparent 1×1 PNG, used as a fallback when an inline image fails to fetch.
     // Without it, a single CORS or 404 image would reject the entire snapshot.
     const TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=';
@@ -208,21 +226,28 @@ function initializeExportPlugin() {
     }
 
     function snapshotOptions(opts) {
-        // 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'));
+        // ignoreElements callback for html2canvas-pro — exclude opt-out elements.
+        // (Inverse of modern-screenshot's `filter`: return true to SKIP this node.)
+        const ignoreElements = (node) => {
+            return !!(node && node.nodeType === 1
+                && node.hasAttribute && node.hasAttribute('data-no-export'));
         };
         const out = {
             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,
-            },
+            ignoreElements,
+            useCORS: true,
+            allowTaint: false,
+            // Bound how long we wait per cross-origin image. Failed fetches
+            // produce a missing image rather than rejecting the whole snapshot.
+            imageTimeout: 5000,
+            logging: false,
+            // Pin the capture origin to (0, 0) so the snapshot starts at the
+            // document top regardless of the user's current scroll position.
+            // Without this, html2canvas defaults scrollY to window.pageYOffset,
+            // which clips the snapshot to "below the current scroll" — anything
+            // above the fold renders as blank white space.
+            scrollX: 0,
+            scrollY: 0,
         };
         if (opts.backgroundColor) out.backgroundColor = opts.backgroundColor;
         if (opts.width) out.width = Number(opts.width);
@@ -230,61 +255,54 @@ function initializeExportPlugin() {
         return out;
     }
 
-    // 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) {
+    // Await all <img> loads inside the target so freshly-mounted images don't
+    // appear blank in the snapshot. Bounded by a timeout — a single slow image
+    // shouldn't stall the export indefinitely.
+    async function waitForImages(target, timeoutMs = 5000) {
+        if (!target || typeof target.querySelectorAll !== 'function') return;
+        const imgs = Array.from(target.querySelectorAll('img'));
+        const pending = imgs.filter((img) => !img.complete || img.naturalWidth === 0);
+        if (pending.length === 0) return;
+        await Promise.race([
+            Promise.all(pending.map((img) => new Promise((resolve) => {
+                img.addEventListener('load', resolve, { once: true });
+                img.addEventListener('error', resolve, { once: true });
+            }))),
+            new Promise((resolve) => setTimeout(resolve, timeoutMs)),
+        ]);
+    }
+
+    // html2canvas-pro paints directly to canvas via computed styles, so the
+    // SVG-foreignObject failure modes (oversized SVGs, @layer/oklch parsing
+    // issues) don't apply. The fallback path is retained for the rare case
+    // where the library throws (e.g. tainted canvas on cross-origin images).
+    async function snapshotToCanvas(lib, target, so) {
         try {
-            return await lib[fn](target, so);
+            return await lib(target, so);
         } catch (err) {
-            if (err && err.message) throw err; // a real Error — don't mask it
-            const safer = {
-                ...so,
-                scale: Math.min(so.scale || 2, 1),
-                font: false,
-            };
-            return await lib[fn](target, safer);
+            // Retry once with allowTaint enabled and a lower scale — preserves
+            // the snapshot even when an image fails cross-origin policy.
+            const safer = { ...so, allowTaint: true, useCORS: false, scale: Math.min(so.scale || 2, 1) };
+            return await lib(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 loadSnapshotLib();
         const target = resolveTarget(opts);
-        const so = applySafeDimensions(target, snapshotOptions(opts));
-        let dataUrl;
-        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, 'domToJpeg', target, so);
-        } else if (ext === 'webp') {
-            so.quality = Number(opts.quality) > 0 && Number(opts.quality) <= 1
-                ? Number(opts.quality)
-                : 0.95;
-            dataUrl = await snapshotWithFallback(lib, 'domToWebp', target, so);
+        const so = snapshotOptions(opts);
+        if ((ext === 'jpeg' || ext === 'webp') && !so.backgroundColor) {
+            so.backgroundColor = effectivePageBackground();
         }
+        await waitForImages(target);
+        const canvas = await snapshotToCanvas(lib, target, so);
+        const quality = Number(opts.quality) > 0 && Number(opts.quality) <= 1
+            ? Number(opts.quality)
+            : 0.95;
+        let dataUrl;
+        if (ext === 'png') dataUrl = canvas.toDataURL('image/png');
+        else if (ext === 'jpeg') dataUrl = canvas.toDataURL('image/jpeg', quality);
+        else if (ext === 'webp') dataUrl = canvas.toDataURL('image/webp', quality);
         triggerDownload(dataUrl, filename);
     }
 
@@ -293,17 +311,18 @@ function initializeExportPlugin() {
     // 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.
+    // continue to use html2canvas-pro + jsPDF.
     async function exportPdf(opts, filename) {
         if (!opts.target) {
             return printToPdf(filename);
         }
         const [imgLib, jsPDFCtor] = await Promise.all([loadSnapshotLib(), loadJsPDF()]);
         const target = resolveTarget(opts);
-        const so = applySafeDimensions(target, snapshotOptions(opts));
+        const so = snapshotOptions(opts);
         if (!so.backgroundColor) so.backgroundColor = effectivePageBackground();
-        const dataUrl = await snapshotWithFallback(imgLib, 'domToPng', target, so);
+        await waitForImages(target);
+        const canvas = await snapshotToCanvas(imgLib, target, so);
+        const dataUrl = canvas.toDataURL('image/png');
         const img = await loadImage(dataUrl);
         const orientation = img.width > img.height ? 'landscape' : 'portrait';
         const pdf = new jsPDFCtor({ orientation, unit: 'pt', format: opts.pageSize || 'a4' });
@@ -429,21 +448,22 @@ function initializeExportPlugin() {
 
     // Lazy library loaders — cached promises.
 
-    // 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.
-    // It ships ESM-only, so we load via dynamic import() rather than a script
-    // tag. jsDelivr serves the ESM bundle directly.
+    // html2canvas-pro paints directly to a canvas by walking computed styles,
+    // rather than cloning the DOM into an SVG foreignObject. That means it has
+    // no failure modes around @layer rules, oklch() colors, url(data:...) in
+    // cross-origin stylesheets, or oversized SVG decoding — the cases that
+    // sank both html-to-image and modern-screenshot on real-world pages.
+    // ESM-only, so we load via dynamic import() from jsDelivr.
     let snapshotLibPromise = null;
     function loadSnapshotLib() {
         if (snapshotLibPromise) return snapshotLibPromise;
-        snapshotLibPromise = import('https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.mjs')
+        snapshotLibPromise = import('https://cdn.jsdelivr.net/npm/html2canvas-pro@2/dist/html2canvas-pro.esm.js')
             .then((mod) => {
-                if (!mod || typeof mod.domToPng !== 'function') {
-                    throw new Error('modern-screenshot failed to load (missing expected exports)');
+                const fn = mod.default || mod.html2canvas;
+                if (typeof fn !== 'function') {
+                    throw new Error('html2canvas-pro failed to load (missing default export)');
                 }
-                return mod;
+                return fn;
             })
             .catch((err) => {
                 snapshotLibPromise = null; // allow retry on next call

package/package.json

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