mnfst 0.5.75 → 0.5.78

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,36 +208,41 @@ 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: false,
+            };
             return await lib[fn](target, safer);
         }
     }
@@ -263,21 +268,22 @@ function initializeExportPlugin() {
     }
 
     async function exportImage(opts, filename, ext) {
-        const lib = await loadHtmlToImage();
+        const lib = await loadSnapshotLib();
         const target = resolveTarget(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);
     }
@@ -287,17 +293,17 @@ 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 html-to-image + jsPDF, which is well-behaved at small
+    // continue to use modern-screenshot + 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 [imgLib, jsPDFCtor] = await Promise.all([loadSnapshotLib(), loadJsPDF()]);
         const target = resolveTarget(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' });
@@ -423,15 +429,27 @@ 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')
-            .then(() => {
-                if (!window.htmlToImage) throw new Error('html-to-image failed to load');
-                return window.htmlToImage;
+    // 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.
+    let snapshotLibPromise = null;
+    function loadSnapshotLib() {
+        if (snapshotLibPromise) return snapshotLibPromise;
+        snapshotLibPromise = import('https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.mjs')
+            .then((mod) => {
+                if (!mod || typeof mod.domToPng !== 'function') {
+                    throw new Error('modern-screenshot failed to load (missing expected exports)');
+                }
+                return mod;
+            })
+            .catch((err) => {
+                snapshotLibPromise = null; // allow retry on next call
+                throw err;
             });
-        return htmlToImagePromise;
+        return snapshotLibPromise;
     }
 
     let jsPDFPromise = null;

package/package.json

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