structured-render 0.0.4 → 0.0.5

package/dist/elements/vir-structured-render.element.d.ts

@@ -10,8 +10,24 @@ import { type RenderHtmlOptions, type RenderInput } from '../render/render-types
 export declare const VirStructuredRender: import("element-vir").DeclarativeElementDefinition<"vir-structured-render", {
     data: Readonly<RenderInput>;
     options?: Readonly<PartialWithUndefined<RenderHtmlOptions & {
-        isTableSize: boolean;
+        /**
+         * If `true`, smaller, tablet-compatible styles are used.
+         *
+         * @default false
+         */
+        isTabletSize: boolean;
+        /**
+         * If `true`, smaller, phone-compatible styles are used.
+         *
+         * @default false
+         */
         isPhoneSize: boolean;
+        /**
+         * If `true`, all sections will automatically be expanded at first.
+         *
+         * @default false
+         */
+        expandAllSections: boolean;
     }>> | undefined;
 }, {
     currentlyExpanded: Record<string, boolean>;

package/dist/elements/vir-structured-render.element.js

@@ -29,7 +29,7 @@ export const VirStructuredRender = defineElement()({
     },
     hostClasses: {
         'vir-structured-render-phone-size': ({ inputs }) => !!inputs.options?.isPhoneSize,
-        'vir-structured-render-tablet-size': ({ inputs }) => !!inputs.options?.isTableSize,
+        'vir-structured-render-tablet-size': ({ inputs }) => !!inputs.options?.isTabletSize,
     },
     styles: ({ cssVars, hostClasses }) => css `
         :host {

package/dist/render/browser-rendering.js

@@ -73,44 +73,6 @@ export var OutputImageType;
     OutputImageType["Download"] = "download";
 })(OutputImageType || (OutputImageType = {}));
 // cspell:enable
-/**
- * Triggers a file download from a Blob without opening the content in the browser.
- *
- * Firefox's content handler auto-opens downloaded PDFs in a new tab when it detects the `.pdf`
- * extension on a blob URL download. To prevent this, Firefox uses a `data:` URI with an
- * `application/octet-stream` MIME type. Data URIs don't carry a URL path, so Firefox can't perform
- * extension-based content-type sniffing and won't match the download against its PDF handler.
- *
- * Other browsers use a standard blob URL + anchor download approach.
- */
-async function triggerBlobDownload(blob, downloadFileName) {
-    const anchor = globalThis.document.createElement('a');
-    anchor.download = downloadFileName;
-    anchor.style.display = 'none';
-    if (navigator.userAgent.toLowerCase().includes('firefox')) {
-        const dataUrl = await new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => {
-                resolve(String(reader.result).replace(/^data:[^;]*;/, 'data:application/octet-stream;'));
-            };
-            reader.onerror = () => {
-                reject(new Error('Failed to read blob for download.'));
-            };
-            reader.readAsDataURL(blob);
-        });
-        anchor.href = dataUrl;
-    }
-    else {
-        const downloadBlob = new Blob([blob], { type: 'application/octet-stream' });
-        anchor.href = URL.createObjectURL(downloadBlob);
-        globalThis.setTimeout(() => {
-            URL.revokeObjectURL(anchor.href);
-        }, 40_000);
-    }
-    globalThis.document.body.append(anchor);
-    anchor.click();
-    anchor.remove();
-}
 function createHtml2PdfOptions(fileName) {
     return {
         margin: [
@@ -161,44 +123,35 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
     const htmlString = convertTemplateToString(html `
         <div class=${contentDivClass}>${DOMPurify.sanitize(dirtyHtml)}</div>
     `);
+    /**
+     * 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) {
-        /**
-         * For PDFs, create a hidden container in the main document (not an iframe) so html2pdf can
-         * inspect the DOM for page break positions while also having access to the styles. Passing
-         * a canvas loses page break info (tables get sliced). Passing an iframe element loses
-         * styles (html2pdf clones elements into the main document, dropping iframe styles).
-         */
-        const { wrapper, contentElement } = createIsolatedContentDiv(htmlString, String(options.styles), html2PdfOptions);
-        try {
-            const instance = htmlToPdf().set(html2PdfOptions).from(contentElement);
-            if (outputType.pdf === OutputPdfType.Download) {
-                const pdfBlob = (await instance.outputPdf(OutputPdfType.Blob));
-                const pdfFileName = fileName.endsWith('.pdf')
-                    ? fileName
-                    : `${fileName}.pdf`;
-                await triggerBlobDownload(pdfBlob, pdfFileName);
-                return;
-            }
-            else {
-                return await instance.outputPdf(outputType.pdf, {
-                    filename: fileName,
-                });
-            }
+        if (outputType.pdf === OutputPdfType.Download) {
+            const pdfBlob = (await instance.outputPdf(OutputPdfType.Blob));
+            const blobUrl = URL.createObjectURL(pdfBlob);
+            const anchor = globalThis.document.createElement('a');
+            anchor.href = blobUrl;
+            anchor.download = fileName.endsWith('.pdf') ? fileName : `${fileName}.pdf`;
+            anchor.style.display = 'none';
+            globalThis.document.body.append(anchor);
+            anchor.click();
+            anchor.remove();
+            URL.revokeObjectURL(blobUrl);
+            return;
         }
-        finally {
-            wrapper.remove();
+        else {
+            return await instance.outputPdf(outputType.pdf, {
+                filename: fileName,
+            });
         }
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     }
     else if (outputType.image) {
-        /**
-         * For images, render to a canvas 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). No page break logic is needed for images.
-         */
-        const canvas = await renderHtmlToCanvas(htmlString, String(options.styles), html2PdfOptions);
-        const instance = htmlToPdf().set(html2PdfOptions).from(canvas);
         if (outputType.image === OutputImageType.Download) {
             return await instance.toImg().save(fileName);
         }
@@ -212,45 +165,11 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
     }
 }
 /**
- * Create a hidden container div in the main document with styles and content. Unlike an iframe, the
- * styles live in the same document context so html2pdf.js can see them when it clones the element.
- * This allows html2pdf to both render styles correctly AND inspect the DOM for page break positions.
- *
- * The caller is responsible for removing the returned wrapper when done.
- */
-function createIsolatedContentDiv(htmlString, stylesString, html2PdfOptions) {
-    const marginArray = normalizeMargin(html2PdfOptions.margin);
-    /** A4 page width in mm. */
-    const pageWidthMm = 210;
-    const innerWidthMm = pageWidthMm - marginArray[1] - marginArray[3];
-    const wrapper = globalThis.document.createElement('div');
-    wrapper.style.position = 'fixed';
-    wrapper.style.left = '-10000px';
-    wrapper.style.top = '0';
-    wrapper.style.width = `${innerWidthMm}mm`;
-    wrapper.style.overflow = 'hidden';
-    wrapper.setAttribute('aria-hidden', 'true');
-    const styleElement = globalThis.document.createElement('style');
-    styleElement.textContent = [
-        baseContentResetStyles,
-        stylesString,
-    ].join('\n');
-    wrapper.append(styleElement);
-    const contentContainer = globalThis.document.createElement('div');
-    contentContainer.innerHTML = htmlString;
-    wrapper.append(contentContainer);
-    globalThis.document.body.append(wrapper);
-    const contentElement = assertWrap.isDefined(contentContainer.firstElementChild);
-    return { wrapper, contentElement };
-}
-/**
- * Create an isolated iframe containing the rendered HTML content and styles. The iframe provides a
- * minimal document context so that html2canvas / html2pdf only need to process a small DOM tree
- * instead of the entire host page.
- *
- * The caller is responsible for removing the iframe when done.
+ * 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 createIsolatedContentIframe(htmlString, stylesString, html2PdfOptions) {
+async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
     const marginArray = normalizeMargin(html2PdfOptions.margin);
     /** A4 page width in mm. */
     const pageWidthMm = 210;
@@ -272,31 +191,22 @@ async function createIsolatedContentIframe(htmlString, stylesString, html2PdfOpt
         '</body></html>',
     ].join('');
     globalThis.document.body.append(iframe);
-    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 { iframe, contentElement };
-}
-/**
- * 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 { iframe, contentElement } = await createIsolatedContentIframe(htmlString, stylesString, html2PdfOptions);
     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,
         });

package/dist/render/render-html.js

@@ -371,25 +371,48 @@ function structuredRenderToHtmlArray(data, options, keyChain) {
         const sectionTitle = ('sectionTitle' in data && keyChain.length > 0 && data.sectionTitle) || undefined;
         const sectionTemplate = htmlRenderers[data.type](data, options, keyChain);
         const sources = ('sources' in data && data.sources) || undefined;
+        const sectionContent = html `
+            <div
+                class=${classMap({
+            'section-wrapper': true,
+            'top-section-wrapper': keyChain.length === 0,
+            [structuredRenderSectionHtmlNames[data.type]]: true,
+        })}
+                ${testId(structuredRenderSectionHtmlTestId)}
+                ${testId(structuredRenderSectionHtmlNames[data.type])}
+            >
+                ${createSourceWrapper(sectionTemplate, options, keyChain, sources)}
+            </div>
+        `;
+        if (sectionTitle) {
+            const sectionKeyChain = [
+                ...keyChain,
+                'section-collapsible',
+            ];
+            const sectionKey = makeChainKey(sectionKeyChain);
+            const isSectionExpanded = !!options.currentlyExpanded[sectionKey];
+            return [
+                html `
+                    <${ViraCollapsibleWrapper.assign({
+                    expanded: isSectionExpanded,
+                })}
+                        class="section-collapsible-wrapper"
+                        ${listen(ViraCollapsibleWrapper.events.expandChange, (event) => {
+                    const eventTarget = extractEventTarget(event, HTMLElement);
+                    eventTarget.dispatchEvent(new SourceExpansionEvent({
+                        expanded: event.detail,
+                        key: sectionKey,
+                    }));
+                })}
+                    >
+                        <h3 slot=${ViraCollapsibleWrapper.slotNames.header}>${sectionTitle}</h3>
+                        ${sectionContent}
+                    </${ViraCollapsibleWrapper}>
+                `,
+            ];
+        }
         return [
-            sectionTitle
-                ? html `
-                      <h3>${sectionTitle}</h3>
-                  `
-                : undefined,
-            html `
-                <div
-                    class=${classMap({
-                'section-wrapper': true,
-                'top-section-wrapper': keyChain.length === 0,
-                [structuredRenderSectionHtmlNames[data.type]]: true,
-            })}
-                    ${testId(structuredRenderSectionHtmlTestId)}
-                    ${testId(structuredRenderSectionHtmlNames[data.type])}
-                >
-                    ${createSourceWrapper(sectionTemplate, options, keyChain, sources)}
-                </div>
-            `,
+            sectionContent,
         ];
     }
     else if ('sections' in data) {

package/dist/render/render-pdf.js

@@ -106,8 +106,12 @@ export async function printPdf(renderInput, params) {
             }
             contentWindow.addEventListener('afterprint', () => {
                 resolveOnce();
-            }, { once: true });
-            globalThis.window.addEventListener('focus', focusFallback, { once: true });
+            }, {
+                once: true,
+            });
+            globalThis.window.addEventListener('focus', focusFallback, {
+                once: true,
+            });
             contentWindow.print();
         };
     });

package/dist/ui/elements/vir-app.element.d.ts

@@ -0,0 +1 @@
+export declare const VirApp: import("element-vir").DeclarativeElementDefinition<"vir-app", {}, {}, {}, "vir-app-", "vir-app-", readonly [], readonly []>;

package/dist/ui/elements/vir-app.element.js

@@ -0,0 +1,9 @@
+import { defineElement, html } from 'element-vir';
+export const VirApp = defineElement()({
+    tagName: 'vir-app',
+    render() {
+        return html `
+            Vir App goes here!
+        `;
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "structured-render",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "A library for safely rendering arbitrary data generated from any source.",
     "keywords": [
         "render",
@@ -52,7 +52,7 @@
         "object-shape-tester": "^6.11.0",
         "theme-vir": "^28.22.0",
         "type-fest": "^5.4.4",
-        "vira": "^29.7.2"
+        "vira": "^29.8.0"
     },
     "devDependencies": {
         "@augment-vir/test": "^31.67.0",