@lightdash/cli 3.150.0 → 3.151.0

package/dist/vendor/template/references/pdf-downloads.md

@@ -6,6 +6,8 @@ Every PDF or printable report app includes a visible Download PDF button — the
 
 PDF downloads are image-based: they preserve the visible report exactly, but the exported text is not selectable/searchable. Keep `window.print()` only as a secondary Print action if useful; the Download PDF button should save a file directly.
 
+Capture pages as JPEG (`toJpeg`, quality 0.92, white background), never PNG — a PNG page is ~10MB and a multi-page report blows past email attachment limits; JPEG keeps a 5-page report around 1-2MB with no visible quality loss on reports.
+
 Rules:
 
 - Render each PDF page or section in a stable DOM container, e.g. `.pdf-page`, with fixed printable dimensions or aspect ratio.
@@ -13,13 +15,15 @@ Rules:
 - Track `isExportingPdf`, disable the button while report data is loading or PDF generation is running, and show a spinner or "Exporting..." label until the promise settles.
 - Use chart value labels in PDF reports because exported pages cannot be hovered.
 - Avoid capturing scroll containers with hidden content. Capture page-sized elements that already contain the full content intended for export.
+- Register the same builder for scheduled deliveries with `registerPdfExport` from `@/lib/pdfExport` — see below. Without it, scheduled PDF deliveries of this app fail.
 
 ```tsx
 import { Button } from '@/components/ui/button';
-import { toPng } from 'html-to-image';
+import { registerPdfExport } from '@/lib/pdfExport';
+import { toJpeg } from 'html-to-image';
 import { jsPDF } from 'jspdf';
 import { Download, Loader2 } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 async function imageLoaded(src: string) {
     const image = new Image();
@@ -31,10 +35,7 @@ async function imageLoaded(src: string) {
     return image;
 }
 
-async function downloadPdfFromPages(
-    pages: HTMLElement[],
-    filename = 'report.pdf',
-) {
+async function buildPdfFromPages(pages: HTMLElement[]) {
     const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
     const pageWidth = pdf.internal.pageSize.getWidth();
     const pageHeight = pdf.internal.pageSize.getHeight();
@@ -42,9 +43,10 @@ async function downloadPdfFromPages(
     for (let index = 0; index < pages.length; index += 1) {
         if (index > 0) pdf.addPage();
 
-        const dataUrl = await toPng(pages[index], {
+        const dataUrl = await toJpeg(pages[index], {
             cacheBust: true,
             pixelRatio: 2,
+            quality: 0.92,
             backgroundColor: '#ffffff',
         });
         const image = await imageLoaded(dataUrl);
@@ -52,9 +54,22 @@ async function downloadPdfFromPages(
         const width = image.width * scale;
         const height = image.height * scale;
 
-        pdf.addImage(dataUrl, 'PNG', (pageWidth - width) / 2, 0, width, height);
+        pdf.addImage(dataUrl, 'JPEG', (pageWidth - width) / 2, 0, width, height);
     }
 
+    return pdf;
+}
+
+function reportPages(root: HTMLElement) {
+    const pages = Array.from(root.querySelectorAll<HTMLElement>('.pdf-page'));
+    return pages.length > 0 ? pages : [root];
+}
+
+async function downloadPdfFromPages(
+    pages: HTMLElement[],
+    filename = 'report.pdf',
+) {
+    const pdf = await buildPdfFromPages(pages);
     pdf.save(filename.endsWith('.pdf') ? filename : `${filename}.pdf`);
 }
 
@@ -62,15 +77,22 @@ export function PdfReport() {
     const reportRef = useRef<HTMLDivElement | null>(null);
     const [isExportingPdf, setIsExportingPdf] = useState(false);
 
+    // Scheduled deliveries reuse the exact builder behind the button; the
+    // host requests the Blob once the app has rendered with its data.
+    useEffect(() => {
+        registerPdfExport(async () => {
+            if (!reportRef.current) throw new Error('Report not mounted');
+            const pdf = await buildPdfFromPages(reportPages(reportRef.current));
+            return pdf.output('blob');
+        });
+    }, []);
+
     async function exportPdf() {
         if (!reportRef.current) return;
         setIsExportingPdf(true);
         try {
-            const pages = Array.from(
-                reportRef.current.querySelectorAll<HTMLElement>('.pdf-page'),
-            );
             await downloadPdfFromPages(
-                pages.length > 0 ? pages : [reportRef.current],
+                reportPages(reportRef.current),
                 'executive-report.pdf',
             );
         } finally {

package/dist/vendor/template/skill.md

@@ -522,7 +522,9 @@ When the user asks for "Open in Google Sheets" (or any Sheets destination), read
 
 A PDF or printable report app always includes a visible **Download PDF** button — the export action is part of the report shape, not an optional extra, and `window.print()` is only ever a secondary Print action. This applies whenever the app is report-shaped, whatever the request's wording: the PDF Report starter template, a "printable" / "document" / "report to share" ask, or an app that already renders `.pdf-page` sections. On edit turns, keep the existing Download PDF button working — an edit that removes it is a regression.
 
-Before wiring the button, read `/app/references/pdf-downloads.md` — it has the required `html-to-image` + `jspdf` pattern and page-capture rules.
+Every app with a Download PDF button also registers the same builder for scheduled deliveries via `registerPdfExport` from `@/lib/pdfExport` (builder resolves to `pdf.output('blob')`). The button and the registration always ship together — an app with one but not the other is incomplete, on first generation and after every edit.
+
+Before wiring the button, read `/app/references/pdf-downloads.md` — it has the required `html-to-image` + `jspdf` pattern, page-capture rules, and the `registerPdfExport` wiring.
 
 ### Underlying data
 

package/dist/vendor/template/src/lib/pdfExport.js

@@ -0,0 +1,61 @@
+/**
+ * Lets the host (scheduled deliveries, headless renders) request the same
+ * PDF the app's Download PDF button produces. The app registers a builder
+ * that resolves to a Blob; the host asks for it over the sandbox bridge.
+ *
+ * Mirrors the screenshot handshake in `screenshotHandler.js`: availability
+ * is announced so the parent knows the app is report-shaped, and only the
+ * finished Blob crosses the sandbox boundary — never HTML. The announce
+ * happens on register (not boot) because only apps with a PDF report have
+ * anything to export; hosts must therefore listen before the app mounts.
+ */
+
+const REQUEST_TYPE = 'lightdash:sdk:pdf-export-request';
+const RESPONSE_TYPE = 'lightdash:sdk:pdf-export-response';
+const AVAILABLE_TYPE = 'lightdash:sdk:pdf-export-available';
+
+let exporter = null;
+
+/**
+ * Register the app's PDF builder. Call once on app mount with a function
+ * that builds the report PDF from the current DOM and resolves to a Blob
+ * (`pdf.output('blob')`) — the same builder the Download PDF button uses,
+ * minus the `.save()`. Re-registering replaces the previous builder.
+ */
+export function registerPdfExport(buildPdfBlob) {
+    exporter = typeof buildPdfBlob === 'function' ? buildPdfBlob : null;
+    if (exporter && typeof window !== 'undefined') {
+        window.parent.postMessage({ type: AVAILABLE_TYPE }, '*');
+    }
+}
+
+export function initPdfExportHandler() {
+    if (typeof window === 'undefined') return;
+
+    window.addEventListener('message', async (event) => {
+        const { data } = event;
+        if (data?.type !== REQUEST_TYPE) return;
+
+        const { id } = data;
+        try {
+            if (!exporter) {
+                throw new Error('This app has no PDF export registered');
+            }
+            const blob = await exporter();
+            if (!(blob instanceof Blob)) {
+                throw new Error('PDF exporter must resolve to a Blob');
+            }
+            window.parent.postMessage({ type: RESPONSE_TYPE, id, blob }, '*');
+        } catch (err) {
+            window.parent.postMessage(
+                {
+                    type: RESPONSE_TYPE,
+                    id,
+                    error:
+                        err instanceof Error ? err.message : 'PDF export failed',
+                },
+                '*',
+            );
+        }
+    });
+}

package/dist/vendor/template/src/main.jsx

@@ -19,6 +19,7 @@ import { ErrorBoundary } from '@/lib/ErrorBoundary';
 import './index.css';
 import './chart-overrides.css';
 import App from './App';
+import { initPdfExportHandler } from '@/lib/pdfExport';
 import initScreenshotHandler from './screenshotHandler';
 
 const queryClient = new QueryClient({
@@ -33,6 +34,7 @@ const queryClient = new QueryClient({
 const lightdash = createClient();
 
 initScreenshotHandler();
+initPdfExportHandler();
 
 // A chart type renders in a frame the size of its tile; a page app grows.
 // Only a chart type receives a viz context, so mark the document for index.css.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightdash/cli",
-  "version": "3.150.0",
+  "version": "3.151.0",
   "description": "Lightdash CLI tool",
   "license": "MIT",
   "repository": {
@@ -22,8 +22,8 @@
     "@actions/core": "1.11.1",
     "@aws-sdk/credential-providers": "3.995.0",
     "@casl/ability": "6.8.0",
-    "@lightdash/common": "3.150.0",
-    "@lightdash/warehouses": "3.150.0",
+    "@lightdash/common": "3.151.0",
+    "@lightdash/warehouses": "3.151.0",
     "@sidvind/better-ajv-errors": "7.0.0",
     "@types/columnify": "1.5.1",
     "ajv": "8.18.0",