structured-render 0.0.1 → 0.0.3

package/dist/elements/vir-markdown.element.js

@@ -55,7 +55,9 @@ export const VirMarkdown = defineElement()({
                         class=${contentDivClass}
                         ${onDomCreated((element) => {
                 if (element instanceof HTMLElement) {
-                    updateState({ renderedElement: element });
+                    updateState({
+                        renderedElement: element,
+                    });
                 }
             })}
                     >

package/dist/render/browser-rendering.js

@@ -4,10 +4,9 @@ import DOMPurify from 'dompurify';
 import { convertTemplateToString, html } from 'element-vir';
 import { marked } from 'marked';
 import { importHtml2Pdf } from './html-to-pdf.js';
-import { contentDivClass } from './render-markdown-styles.js';
+import { baseContentResetStyles, contentDivClass } from './render-markdown-styles.js';
 import { renderStructuredMarkdown } from './render-markdown.js';
 import { defaultRenderMarkdownOptions, } from './render-types.js';
-const globalStyleId = 'structured-rendering-style-id';
 // cspell:disable
 /**
  * Output method types for jsPDF. Extracted from:
@@ -116,48 +115,141 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
         throw new Error(`${renderInNode.name} cannot run outside of a browser.`);
     }
     const options = mergeDefinedProperties(defaultRenderMarkdownOptions, userOptions);
-    const htmlToPdf = await importHtml2Pdf();
+    const [htmlToPdf] = await Promise.all([
+        importHtml2Pdf(),
+        preloadHtml2Canvas(),
+    ]);
     const dirtyHtml = await marked.parse(renderStructuredMarkdown(structuredRenderData, options));
-    const styleElement = assertWrap.instanceOf(globalThis.document.head.querySelector(`#${globalStyleId}`) ||
-        globalThis.document.createElement('style'), HTMLStyleElement);
-    styleElement.id = globalStyleId;
-    if (!styleElement.isConnected) {
-        globalThis.document.head.append(styleElement);
-    }
-    styleElement.textContent = String(options.styles);
     const htmlString = convertTemplateToString(html `
         <div class=${contentDivClass}>${DOMPurify.sanitize(dirtyHtml)}</div>
     `);
-    const instance = htmlToPdf().set(createHtml2PdfOptions(fileName)).from(htmlString);
-    try {
-        if (outputType.pdf) {
-            if (outputType.pdf === OutputPdfType.Download) {
-                return await instance.save(fileName);
-            }
-            else {
-                return await instance.outputPdf(outputType.pdf, {
-                    filename: fileName,
-                });
-            }
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    /**
+     * Render in a clean iframe context so html2canvas only clones the minimal iframe document
+     * instead of the entire host page DOM (which is extremely slow on complex pages).
+     */
+    const html2PdfOptions = createHtml2PdfOptions(fileName);
+    const canvas = await renderHtmlToCanvas(htmlString, String(options.styles), html2PdfOptions);
+    const instance = htmlToPdf().set(html2PdfOptions).from(canvas);
+    if (outputType.pdf) {
+        if (outputType.pdf === OutputPdfType.Download) {
+            return await instance.save(fileName);
         }
-        else if (outputType.image) {
-            if (outputType.image === OutputImageType.Download) {
-                return await instance.toImg().save(fileName);
-            }
-            else {
-                return await instance.outputImg(outputType.image);
-            }
+        else {
+            return await instance.outputPdf(outputType.pdf, {
+                filename: fileName,
+            });
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    }
+    else if (outputType.image) {
+        if (outputType.image === OutputImageType.Download) {
+            return await instance.toImg().save(fileName);
         }
         else {
-            assert.tsType(outputType).equals();
-            throw new Error(`Invalid output type: ${stringify(outputType)}`);
+            return await instance.outputImg(outputType.image);
         }
     }
+    else {
+        assert.tsType(outputType).equals();
+        throw new Error(`Invalid output type: ${stringify(outputType)}`);
+    }
+}
+/**
+ * Render HTML content to a canvas using a clean, minimal iframe. This avoids the massive
+ * performance penalty from html2canvas cloning the entire host page document (including all custom
+ * elements, shadow DOM, and styles) just to render a small content div.
+ */
+async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
+    const marginArray = normalizeMargin(html2PdfOptions.margin);
+    /** A4 page width in mm. */
+    const pageWidthMm = 210;
+    const innerWidthMm = pageWidthMm - marginArray[1] - marginArray[3];
+    const iframe = globalThis.document.createElement('iframe');
+    iframe.style.position = 'fixed';
+    iframe.style.left = '-10000px';
+    iframe.style.top = '0';
+    iframe.style.width = `${innerWidthMm}mm`;
+    iframe.style.height = '0';
+    iframe.style.border = 'none';
+    iframe.setAttribute('aria-hidden', 'true');
+    iframe.srcdoc = [
+        '<!DOCTYPE html><html><head><style>',
+        baseContentResetStyles,
+        stylesString,
+        '</style></head><body style="margin:0;padding:0;">',
+        htmlString,
+        '</body></html>',
+    ].join('');
+    globalThis.document.body.append(iframe);
+    try {
+        await new Promise((resolve) => {
+            iframe.addEventListener('load', () => {
+                resolve();
+            }, {
+                once: true,
+            });
+        });
+        const iframeDoc = assertWrap.isDefined(iframe.contentDocument);
+        await iframeDoc.fonts.ready;
+        /**
+         * Elements from the iframe exist in a different window context, so `instanceof HTMLElement`
+         * (from the parent window) fails. Use assertWrap.isDefined since we control the HTML
+         * written to the iframe and know the first child is always an element.
+         */
+        const contentElement = assertWrap.isDefined(iframeDoc.body.firstElementChild);
+        return await importHtml2Canvas()(contentElement, {
+            ...html2PdfOptions.html2canvas,
+        });
+    }
     finally {
-        styleElement.remove();
+        iframe.remove();
+    }
+}
+let cachedHtml2Canvas;
+function importHtml2Canvas() {
+    if (!cachedHtml2Canvas) {
+        throw new Error('html2canvas has not been loaded yet. Call preloadHtml2Canvas() first.');
+    }
+    return cachedHtml2Canvas;
+}
+async function preloadHtml2Canvas() {
+    if (!cachedHtml2Canvas) {
+        // @ts-expect-error: html2canvas is a CJS module that doesn't properly resolve under node16 module resolution.
+        cachedHtml2Canvas = (await import('html2canvas')).default;
     }
 }
+function normalizeMargin(margin) {
+    if (margin == undefined) {
+        return [
+            0,
+            0,
+            0,
+            0,
+        ];
+    }
+    if (typeof margin === 'number') {
+        return [
+            margin,
+            margin,
+            margin,
+            margin,
+        ];
+    }
+    if (margin.length === 2) {
+        return [
+            margin[0],
+            margin[1],
+            margin[0],
+            margin[1],
+        ];
+    }
+    return [
+        margin[0],
+        margin[1],
+        margin[2],
+        margin[3],
+    ];
+}
 /**
  * Internal common Node.js structure render renderer.
  *
@@ -187,12 +279,20 @@ export async function renderInNode(structuredRenderData, { saveLocationPath, out
     const browser = await chromium.launch();
     try {
         const page = await browser.newPage();
-        await page.setContent(baseHtmlString, { waitUntil: 'networkidle' });
-        await page.addScriptTag({ content: html2pdfScript });
-        await page.addScriptTag({ content: domPurifyScript });
+        await page.setContent(baseHtmlString, {
+            waitUntil: 'networkidle',
+        });
+        await page.addScriptTag({
+            content: html2pdfScript,
+        });
+        await page.addScriptTag({
+            content: domPurifyScript,
+        });
         const html2pdfOptions = createHtml2PdfOptions(basename(saveLocationPath));
         if (outputType.image) {
-            html2pdfOptions.image = { type: 'png' };
+            html2pdfOptions.image = {
+                type: 'png',
+            };
         }
         const pdfBase64 = await page.evaluate(async ({ html2pdfOptions, outputType, dirtyMarkdown, wrapperClass, outputImageType, outputPdfType, }) => {
             const cleanHtml = DOMPurify.sanitize(dirtyMarkdown);
@@ -223,7 +323,9 @@ export async function renderInNode(structuredRenderData, { saveLocationPath, out
             outputPdfType: OutputPdfType.DataUriString,
         });
         const base64Data = pdfBase64.split(',')[1];
-        await mkdir(dirname(saveLocationPath), { recursive: true });
+        await mkdir(dirname(saveLocationPath), {
+            recursive: true,
+        });
         await writeFile(saveLocationPath, Buffer.from(base64Data, 'base64'));
     }
     finally {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "structured-render",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "A library for safely rendering arbitrary data generated from any source.",
     "keywords": [
         "render",
@@ -39,22 +39,23 @@
         "test:web": "virmator test web"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.65.0",
-        "@augment-vir/common": "^31.65.0",
-        "@augment-vir/web": "^31.65.0",
+        "@augment-vir/assert": "^31.67.0",
+        "@augment-vir/common": "^31.67.0",
+        "@augment-vir/web": "^31.67.0",
         "@electrovir/color": "^1.7.8",
         "dompurify": "^3.3.1",
-        "element-vir": "^26.14.3",
+        "element-vir": "^26.14.4",
+        "html2canvas": "^1.4.1",
         "html2pdf.js": "^0.14.0",
         "lit-css-vars": "^3.5.0",
         "marked": "^17.0.3",
         "object-shape-tester": "^6.11.0",
         "theme-vir": "^28.22.0",
         "type-fest": "^5.4.4",
-        "vira": "^29.6.1"
+        "vira": "^29.7.2"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.65.0",
+        "@augment-vir/test": "^31.67.0",
         "@virmator/test": "^14.7.2",
         "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",