@vvfx/sdk 0.2.8 → 0.2.10

package/dist/html-overlay/html-capture-runtime.js

@@ -0,0 +1,282 @@
+const CAPTURE_TIMEOUT = 5000;
+const MOTION_PROPERTIES = /^(animation|transition)(?:-|$)/i;
+const RUNTIME_SELECTOR = [
+    '[data-hm-stream-runtime]',
+    '[data-vvfx-card-html-auto-height]',
+    '[data-vvfx-card-html-anchor-navigation-guard]',
+    'script',
+    'noscript',
+    'template',
+].join(',');
+export function captureViewportSize(logicalSize, _displayedBounds) {
+    return {
+        width: Math.max(1, logicalSize.width),
+        height: Math.max(1, logicalSize.height),
+    };
+}
+export function serializeComputedCaptureStyle(style) {
+    const declarations = [];
+    for (const property of style) {
+        if (MOTION_PROPERTIES.test(property)) {
+            continue;
+        }
+        const value = style.getPropertyValue(property);
+        if (!value) {
+            continue;
+        }
+        const priority = style.getPropertyPriority(property);
+        declarations.push(`${property}:${value}${priority ? `!${priority}` : ''}`);
+    }
+    declarations.push('animation:none!important', 'transition:none!important');
+    return declarations.join(';');
+}
+export async function createHTMLCaptureReplica(ownerDocument, html, logicalSize) {
+    const size = captureViewportSize(logicalSize);
+    const iframe = ownerDocument.createElement('iframe');
+    Object.assign(iframe.style, {
+        position: 'fixed',
+        left: '-100000px',
+        top: '0',
+        width: `${size.width}px`,
+        height: `${size.height}px`,
+        border: '0',
+        pointerEvents: 'none',
+        opacity: '1',
+        zIndex: '-1',
+    });
+    iframe.srcdoc = html;
+    const loaded = waitForNextLoad(iframe);
+    ownerDocument.body.appendChild(iframe);
+    await withCaptureTimeout(loaded);
+    const sourceDocument = iframe.contentDocument;
+    if (!sourceDocument?.documentElement || !sourceDocument.body) {
+        iframe.remove();
+        return undefined;
+    }
+    const replica = await createHTMLCaptureReplicaFromDocument(ownerDocument, sourceDocument, size);
+    if (!replica) {
+        iframe.remove();
+        return undefined;
+    }
+    return {
+        target: replica.target,
+        cleanup: () => {
+            replica.cleanup();
+            iframe.remove();
+        },
+    };
+}
+export async function createHTMLCaptureReplicaFromDocument(ownerDocument, sourceDocument, logicalSize) {
+    if (!sourceDocument.documentElement || !sourceDocument.body || !sourceDocument.defaultView) {
+        return undefined;
+    }
+    await withCaptureTimeout(waitForCaptureReady(sourceDocument));
+    const target = createComputedCaptureTarget(ownerDocument, sourceDocument, captureViewportSize(logicalSize));
+    return {
+        target,
+        cleanup: () => {
+            target.remove();
+        },
+    };
+}
+function createComputedCaptureTarget(ownerDocument, sourceDocument, size) {
+    const sourceWindow = sourceDocument.defaultView;
+    if (!sourceWindow) {
+        throw new Error('HTML capture replica has no window');
+    }
+    const frame = ownerDocument.createElement('div');
+    frame.setAttribute('data-vvfx-html-capture-replica', 'true');
+    frame.style.cssText = serializeComputedCaptureStyle(sourceWindow.getComputedStyle(sourceDocument.documentElement));
+    Object.assign(frame.style, {
+        position: 'fixed',
+        left: '-100000px',
+        top: '0',
+        width: `${size.width}px`,
+        height: `${size.height}px`,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        opacity: '1',
+        zIndex: '-1',
+        transform: 'none',
+    });
+    appendDocumentFontSurface(frame, sourceDocument, ownerDocument);
+    const sourceBody = sourceDocument.body;
+    const bodyClone = sourceBody.cloneNode(true);
+    bodyClone.querySelectorAll(RUNTIME_SELECTOR).forEach(node => {
+        node.remove();
+    });
+    if (bodyClone.matches(RUNTIME_SELECTOR)) {
+        bodyClone.replaceChildren();
+    }
+    frame.appendChild(bodyClone);
+    ownerDocument.body.appendChild(frame);
+    const sources = [sourceBody, ...Array.from(sourceBody.querySelectorAll('*'))]
+        .filter(isStylableElement)
+        .filter(node => !node.matches(RUNTIME_SELECTOR) && !node.closest(RUNTIME_SELECTOR));
+    const clones = [bodyClone, ...Array.from(bodyClone.querySelectorAll('*'))]
+        .filter(isStylableElement)
+        .filter(node => !node.matches(RUNTIME_SELECTOR) && !node.closest(RUNTIME_SELECTOR));
+    const pseudoRules = [];
+    sources.forEach((source, index) => {
+        const clone = clones[index];
+        if (!clone) {
+            return;
+        }
+        clone.style.cssText = serializeComputedCaptureStyle(sourceWindow.getComputedStyle(source));
+        freezeViewportPosition(source, clone, sourceWindow);
+        preserveLiveElementState(source, clone, ownerDocument);
+        appendPseudoRule(source, clone, sourceWindow, pseudoRules, index);
+    });
+    if (pseudoRules.length) {
+        const style = ownerDocument.createElement('style');
+        style.setAttribute('data-vvfx-html-capture-pseudo', 'true');
+        style.textContent = pseudoRules.join('\n');
+        frame.prepend(style);
+    }
+    return frame;
+}
+function appendDocumentFontSurface(frame, sourceDocument, ownerDocument) {
+    const fontRules = [];
+    const SourceCSSFontFaceRule = sourceDocument.defaultView?.CSSFontFaceRule;
+    Array.from(sourceDocument.styleSheets).forEach(sheet => {
+        try {
+            Array.from(sheet.cssRules).forEach(rule => {
+                if (SourceCSSFontFaceRule && rule instanceof SourceCSSFontFaceRule) {
+                    fontRules.push(rule.cssText);
+                }
+            });
+        }
+        catch {
+            // Cross-origin font stylesheets are already loaded in the replica but cannot be read.
+        }
+    });
+    if (!fontRules.length) {
+        return;
+    }
+    const style = ownerDocument.createElement('style');
+    style.setAttribute('data-vvfx-html-capture-fonts', 'true');
+    style.textContent = fontRules.join('\n');
+    frame.appendChild(style);
+}
+function isStylableElement(element) {
+    return 'style' in element;
+}
+function freezeViewportPosition(source, clone, sourceWindow) {
+    if (sourceWindow.getComputedStyle(source).position !== 'fixed') {
+        return;
+    }
+    const rect = source.getBoundingClientRect();
+    Object.assign(clone.style, {
+        position: 'absolute',
+        left: `${rect.left}px`,
+        top: `${rect.top}px`,
+        right: 'auto',
+        bottom: 'auto',
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+    });
+}
+function preserveLiveElementState(source, clone, ownerDocument) {
+    if (source instanceof source.ownerDocument.defaultView.HTMLImageElement && clone instanceof ownerDocument.defaultView.HTMLImageElement) {
+        clone.src = source.currentSrc || source.src;
+    }
+    if (source instanceof source.ownerDocument.defaultView.HTMLInputElement && clone instanceof ownerDocument.defaultView.HTMLInputElement) {
+        clone.value = source.value;
+        clone.checked = source.checked;
+    }
+    if (source instanceof source.ownerDocument.defaultView.HTMLTextAreaElement && clone instanceof ownerDocument.defaultView.HTMLTextAreaElement) {
+        clone.value = source.value;
+        clone.textContent = source.value;
+    }
+    if (source instanceof source.ownerDocument.defaultView.HTMLCanvasElement && clone instanceof ownerDocument.defaultView.HTMLCanvasElement) {
+        clone.width = source.width;
+        clone.height = source.height;
+        try {
+            clone.getContext('2d')?.drawImage(source, 0, 0);
+        }
+        catch {
+            // Tainted canvases remain empty; snapdom cannot legally read them either.
+        }
+    }
+}
+function appendPseudoRule(source, clone, sourceWindow, rules, index) {
+    const attribute = `capture-${index}`;
+    clone.setAttribute('data-vvfx-capture-node', attribute);
+    ['::before', '::after'].forEach(pseudo => {
+        const style = sourceWindow.getComputedStyle(source, pseudo);
+        if (!style.content || style.content === 'none' || style.content === 'normal') {
+            return;
+        }
+        rules.push(`[data-vvfx-capture-node="${attribute}"]${pseudo}{${serializeComputedCaptureStyle(style)}}`);
+    });
+}
+async function waitForCaptureReady(document) {
+    await document.fonts?.ready;
+    await Promise.all(Array.from(document.images).map(async (image) => {
+        try {
+            if (!image.complete) {
+                await new Promise(resolve => {
+                    image.addEventListener('load', () => {
+                        resolve();
+                    }, { once: true });
+                    image.addEventListener('error', () => {
+                        resolve();
+                    }, { once: true });
+                });
+            }
+            await image.decode?.();
+        }
+        catch {
+            // snapdom applies its own image placeholder policy after readiness.
+        }
+    }));
+    await waitForStableLayout(document);
+}
+async function waitForStableLayout(document) {
+    const view = document.defaultView;
+    if (!view) {
+        return;
+    }
+    const startedAt = performance.now();
+    let previous = '';
+    let stableFrames = 0;
+    while (performance.now() - startedAt < CAPTURE_TIMEOUT && stableFrames < 3) {
+        await new Promise(resolve => view.requestAnimationFrame(() => {
+            resolve();
+        }));
+        const current = [
+            document.documentElement.scrollWidth,
+            document.documentElement.scrollHeight,
+            document.body?.scrollWidth ?? 0,
+            document.body?.scrollHeight ?? 0,
+            document.styleSheets.length,
+            document.querySelectorAll('style').length,
+        ].join(':');
+        stableFrames = current === previous ? stableFrames + 1 : 0;
+        previous = current;
+    }
+}
+function waitForNextLoad(iframe) {
+    return new Promise(resolve => {
+        iframe.addEventListener('load', () => {
+            resolve();
+        }, { once: true });
+        iframe.addEventListener('error', () => {
+            resolve();
+        }, { once: true });
+    });
+}
+function withCaptureTimeout(promise) {
+    return new Promise(resolve => {
+        const timer = globalThis.setTimeout(() => {
+            resolve(undefined);
+        }, CAPTURE_TIMEOUT);
+        promise.then(value => {
+            globalThis.clearTimeout(timer);
+            resolve(value);
+        }, () => {
+            globalThis.clearTimeout(timer);
+            resolve(undefined);
+        });
+    });
+}

package/dist/html-overlay/html-viewport-style.js

@@ -0,0 +1,10 @@
+export function withCardHTMLViewportStyle(html) {
+    const viewportStyle = '<style data-vvfx-html-viewport>html,body{width:100%;height:100%;margin:0;}*,*::before,*::after{box-sizing:border-box;}</style>';
+    if (/<head(?:\s[^>]*)?>/i.test(html)) {
+        return html.replace(/<head(\s[^>]*)?>/i, match => `${match}${viewportStyle}`);
+    }
+    if (/<html(?:\s[^>]*)?>/i.test(html)) {
+        return html.replace(/<html(\s[^>]*)?>/i, match => `${match}<head>${viewportStyle}</head>`);
+    }
+    return `<!doctype html><html><head>${viewportStyle}</head><body>${html}</body></html>`;
+}

package/dist/html-overlay/index.js

@@ -0,0 +1 @@
+export { HTMLOverlayManager } from './manager';

package/dist/html-overlay/manager.d.ts

@@ -137,6 +137,7 @@ export declare class HTMLOverlayManager {
     private isAutoHeightStreamActive;
     private getAutoHeightAnchor;
     private getAutoHeightItemHeight;
+    private getAutoHeightLimit;
     private isAutoHeightEnabled;
     private isAutoScaleEnabled;
 }