html2canvas-pro 2.1.0 → 2.2.0

package/src/core/context.ts

@@ -1,31 +0,0 @@
-import { Logger } from './logger';
-import { Cache, ResourceOptions } from './cache-storage';
-import { Bounds } from '../css/layout/bounds';
-import { OriginChecker } from './origin-checker';
-import { Html2CanvasConfig } from '../config';
-
-export type ContextOptions = {
-    logging: boolean;
-    cache?: Cache;
-} & ResourceOptions;
-
-export class Context {
-    private readonly instanceName = `#${Context.instanceCount++}`;
-    readonly logger: Logger;
-    readonly cache: Cache;
-    readonly originChecker: OriginChecker;
-    readonly config: Html2CanvasConfig;
-
-    private static instanceCount = 1;
-
-    constructor(
-        options: ContextOptions,
-        public windowBounds: Bounds,
-        config: Html2CanvasConfig
-    ) {
-        this.config = config;
-        this.logger = new Logger({ id: this.instanceName, enabled: options.logging });
-        this.originChecker = new OriginChecker(config.window);
-        this.cache = options.cache ?? config.cache ?? new Cache(this, options);
-    }
-}

package/src/core/debugger.ts

@@ -1,32 +0,0 @@
-const elementDebuggerAttribute = 'data-html2canvas-debug';
-export const enum DebuggerType {
-    NONE,
-    ALL,
-    CLONE,
-    PARSE,
-    RENDER
-}
-
-const getElementDebugType = (element: Element): DebuggerType => {
-    if (typeof element.getAttribute !== 'function') {
-        return DebuggerType.NONE;
-    }
-    const attribute = element.getAttribute(elementDebuggerAttribute);
-    switch (attribute) {
-        case 'all':
-            return DebuggerType.ALL;
-        case 'clone':
-            return DebuggerType.CLONE;
-        case 'parse':
-            return DebuggerType.PARSE;
-        case 'render':
-            return DebuggerType.RENDER;
-        default:
-            return DebuggerType.NONE;
-    }
-};
-
-export const isDebugging = (element: Element, type: Omit<DebuggerType, DebuggerType.NONE>): boolean => {
-    const elementType = getElementDebugType(element);
-    return elementType === DebuggerType.ALL || type === elementType;
-};

package/src/core/features.ts

@@ -1,222 +0,0 @@
-import { fromCodePoint, toCodePoints } from 'css-line-break';
-
-const testRangeBounds = (document: Document) => {
-    const TEST_HEIGHT = 123;
-
-    if (document.createRange) {
-        const range = document.createRange();
-        if (range.getBoundingClientRect) {
-            const testElement = document.createElement('boundtest');
-            testElement.style.height = `${TEST_HEIGHT}px`;
-            testElement.style.display = 'block';
-            document.body.appendChild(testElement);
-
-            range.selectNode(testElement);
-            const rangeBounds = range.getBoundingClientRect();
-            const rangeHeight = Math.round(rangeBounds.height);
-            document.body.removeChild(testElement);
-            if (rangeHeight === TEST_HEIGHT) {
-                return true;
-            }
-        }
-    }
-
-    return false;
-};
-
-const testIOSLineBreak = (document: Document) => {
-    const testElement = document.createElement('boundtest');
-    testElement.style.width = '50px';
-    testElement.style.display = 'block';
-    testElement.style.fontSize = '12px';
-    testElement.style.letterSpacing = '0px';
-    testElement.style.wordSpacing = '0px';
-    document.body.appendChild(testElement);
-    const range = document.createRange();
-
-    testElement.innerHTML = typeof ''.repeat === 'function' ? '👨'.repeat(10) : '';
-
-    const node = testElement.firstChild as Text;
-
-    const textList = toCodePoints(node.data).map((i) => fromCodePoint(i));
-    let offset = 0;
-    let prev: DOMRect = {} as DOMRect;
-
-    // ios 13 does not handle range getBoundingClientRect line changes correctly #2177
-    const supports = textList.every((text, i) => {
-        range.setStart(node, offset);
-        range.setEnd(node, offset + text.length);
-        const rect = range.getBoundingClientRect();
-
-        offset += text.length;
-        const boundAhead = rect.x > prev.x || rect.y > prev.y;
-
-        prev = rect;
-        if (i === 0) {
-            return true;
-        }
-
-        return boundAhead;
-    });
-
-    document.body.removeChild(testElement);
-    return supports;
-};
-
-const testCORS = (): boolean => typeof new Image().crossOrigin !== 'undefined';
-
-const testResponseType = (): boolean => typeof new XMLHttpRequest().responseType === 'string';
-
-const testSVG = (document: Document): boolean => {
-    const img = new Image();
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        return false;
-    }
-
-    img.src = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;
-
-    try {
-        ctx.drawImage(img, 0, 0);
-        canvas.toDataURL();
-    } catch (e) {
-        return false;
-    }
-    return true;
-};
-
-const isGreenPixel = (data: Uint8ClampedArray): boolean =>
-    data[0] === 0 && data[1] === 255 && data[2] === 0 && data[3] === 255;
-
-const testForeignObject = (document: Document): Promise<boolean> => {
-    const canvas = document.createElement('canvas');
-    const size = 100;
-    canvas.width = size;
-    canvas.height = size;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        return Promise.reject(false);
-    }
-    ctx.fillStyle = 'rgb(0, 255, 0)';
-    ctx.fillRect(0, 0, size, size);
-
-    const img = new Image();
-    const greenImageSrc = canvas.toDataURL();
-    img.src = greenImageSrc;
-    const svg = createForeignObjectSVG(size, size, 0, 0, img);
-    ctx.fillStyle = 'red';
-    ctx.fillRect(0, 0, size, size);
-
-    return loadSerializedSVG(svg)
-        .then((img: HTMLImageElement) => {
-            ctx.drawImage(img, 0, 0);
-            const data = ctx.getImageData(0, 0, size, size).data;
-            ctx.fillStyle = 'red';
-            ctx.fillRect(0, 0, size, size);
-
-            const node = document.createElement('div');
-            node.style.backgroundImage = `url(${greenImageSrc})`;
-            node.style.height = `${size}px`;
-            // Firefox 55 does not render inline <img /> tags
-            return isGreenPixel(data)
-                ? loadSerializedSVG(createForeignObjectSVG(size, size, 0, 0, node))
-                : Promise.reject(false);
-        })
-        .then((img: HTMLImageElement) => {
-            ctx.drawImage(img, 0, 0);
-            // Edge does not render background-images
-            return isGreenPixel(ctx.getImageData(0, 0, size, size).data);
-        })
-        .catch(() => false);
-};
-
-export const createForeignObjectSVG = (
-    width: number,
-    height: number,
-    x: number,
-    y: number,
-    node: Node
-): SVGForeignObjectElement => {
-    const xmlns = 'http://www.w3.org/2000/svg';
-    const svg = document.createElementNS(xmlns, 'svg');
-    const foreignObject = document.createElementNS(xmlns, 'foreignObject');
-    svg.setAttributeNS(null, 'width', width.toString());
-    svg.setAttributeNS(null, 'height', height.toString());
-
-    foreignObject.setAttributeNS(null, 'width', '100%');
-    foreignObject.setAttributeNS(null, 'height', '100%');
-    foreignObject.setAttributeNS(null, 'x', x.toString());
-    foreignObject.setAttributeNS(null, 'y', y.toString());
-    foreignObject.setAttributeNS(null, 'externalResourcesRequired', 'true');
-    svg.appendChild(foreignObject);
-
-    foreignObject.appendChild(node);
-
-    return svg;
-};
-
-export const loadSerializedSVG = (svg: Node): Promise<HTMLImageElement> => {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve(img);
-        img.onerror = reject;
-
-        img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
-    });
-};
-
-export const FEATURES = {
-    get SUPPORT_RANGE_BOUNDS(): boolean {
-        'use strict';
-        const value = testRangeBounds(document);
-        Object.defineProperty(FEATURES, 'SUPPORT_RANGE_BOUNDS', { value });
-        return value;
-    },
-    get SUPPORT_WORD_BREAKING(): boolean {
-        'use strict';
-        const value = FEATURES.SUPPORT_RANGE_BOUNDS && testIOSLineBreak(document);
-        Object.defineProperty(FEATURES, 'SUPPORT_WORD_BREAKING', { value });
-        return value;
-    },
-    get SUPPORT_SVG_DRAWING(): boolean {
-        'use strict';
-        const value = testSVG(document);
-        Object.defineProperty(FEATURES, 'SUPPORT_SVG_DRAWING', { value });
-        return value;
-    },
-    get SUPPORT_FOREIGNOBJECT_DRAWING(): Promise<boolean> {
-        'use strict';
-        const value =
-            typeof Array.from === 'function' && typeof window.fetch === 'function'
-                ? testForeignObject(document)
-                : Promise.resolve(false);
-        Object.defineProperty(FEATURES, 'SUPPORT_FOREIGNOBJECT_DRAWING', { value });
-        return value;
-    },
-    get SUPPORT_CORS_IMAGES(): boolean {
-        'use strict';
-        const value = testCORS();
-        Object.defineProperty(FEATURES, 'SUPPORT_CORS_IMAGES', { value });
-        return value;
-    },
-    get SUPPORT_RESPONSE_TYPE(): boolean {
-        'use strict';
-        const value = testResponseType();
-        Object.defineProperty(FEATURES, 'SUPPORT_RESPONSE_TYPE', { value });
-        return value;
-    },
-    get SUPPORT_CORS_XHR(): boolean {
-        'use strict';
-        const value = 'withCredentials' in new XMLHttpRequest();
-        Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', { value });
-        return value;
-    },
-    get SUPPORT_NATIVE_TEXT_SEGMENTATION(): boolean {
-        'use strict';
-
-        const value = !!(typeof Intl !== 'undefined' && (Intl as any).Segmenter);
-        Object.defineProperty(FEATURES, 'SUPPORT_NATIVE_TEXT_SEGMENTATION', { value });
-        return value;
-    }
-};

package/src/core/logger.ts

@@ -1,64 +0,0 @@
-export interface LoggerOptions {
-    id: string;
-    enabled: boolean;
-}
-
-export class Logger {
-    static instances: { [key: string]: Logger } = {};
-
-    private readonly id: string;
-    private readonly enabled: boolean;
-    private readonly start: number;
-
-    constructor({ id, enabled }: LoggerOptions) {
-        this.id = id;
-        this.enabled = enabled;
-        this.start = Date.now();
-    }
-
-    debug(...args: unknown[]): void {
-        if (this.enabled) {
-            // eslint-disable-next-line no-console
-            if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
-                // eslint-disable-next-line no-console
-                console.debug(this.id, `${this.getTime()}ms`, ...args);
-            } else {
-                this.info(...args);
-            }
-        }
-    }
-
-    getTime(): number {
-        return Date.now() - this.start;
-    }
-
-    info(...args: unknown[]): void {
-        if (this.enabled) {
-            // eslint-disable-next-line no-console
-            if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
-                // eslint-disable-next-line no-console
-                console.info(this.id, `${this.getTime()}ms`, ...args);
-            }
-        }
-    }
-
-    warn(...args: unknown[]): void {
-        if (this.enabled) {
-            if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
-                console.warn(this.id, `${this.getTime()}ms`, ...args);
-            } else {
-                this.info(...args);
-            }
-        }
-    }
-
-    error(...args: unknown[]): void {
-        if (this.enabled) {
-            if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
-                console.error(this.id, `${this.getTime()}ms`, ...args);
-            } else {
-                this.info(...args);
-            }
-        }
-    }
-}

package/src/core/origin-checker.ts

@@ -1,57 +0,0 @@
-/**
- * Origin Checker
- *
- * Provides origin checking functionality without global static state.
- * Each instance maintains its own anchor element and origin reference.
- *
- * Replaces the static methods in CacheStorage with instance-based approach.
- */
-export class OriginChecker {
-    private readonly link: HTMLAnchorElement;
-    private readonly origin: string;
-
-    constructor(window: Window) {
-        if (!window || !window.document) {
-            throw new Error('Valid window object required for OriginChecker');
-        }
-
-        if (!window.location || !window.location.href) {
-            throw new Error('Window object must have valid location');
-        }
-
-        this.link = window.document.createElement('a');
-        this.origin = this.getOrigin(window.location.href);
-    }
-
-    /**
-     * Get the origin (protocol + hostname + port) of a URL
-     *
-     * @param url - URL to parse
-     * @returns Origin string (e.g., "https://example.com:8080")
-     */
-    getOrigin(url: string): string {
-        this.link.href = url;
-        // IE9 hack: accessing href twice to ensure it's properly parsed
-        this.link.href = this.link.href;
-        return this.link.protocol + this.link.hostname + this.link.port;
-    }
-
-    /**
-     * Check if a URL is from the same origin as the context
-     *
-     * @param src - URL to check
-     * @returns true if same origin, false otherwise
-     */
-    isSameOrigin(src: string): boolean {
-        return this.getOrigin(src) === this.origin;
-    }
-
-    /**
-     * Get the current context origin
-     *
-     * @returns The origin of the context window
-     */
-    getContextOrigin(): string {
-        return this.origin;
-    }
-}

package/src/core/performance-monitor.ts

@@ -1,241 +0,0 @@
-import { Context } from './context';
-
-/**
- * Performance Metric
- *
- * Represents a single performance measurement
- */
-export interface PerformanceMetric {
-    name: string;
-    startTime: number;
-    endTime?: number;
-    duration?: number;
-    metadata?: Record<string, any>;
-}
-
-/**
- * Performance Summary
- *
- * Aggregated performance data
- */
-export interface PerformanceSummary {
-    totalDuration: number;
-    metrics: PerformanceMetric[];
-    breakdown: Array<{
-        name: string;
-        duration: number;
-        percentage: string;
-    }>;
-}
-
-/**
- * Performance Monitor
- *
- * Tracks performance metrics throughout the rendering pipeline.
- * Provides insights into where time is spent during rendering.
- *
- * Usage:
- * ```typescript
- * const monitor = new PerformanceMonitor(context);
- *
- * monitor.start('clone');
- * await cloneDocument();
- * monitor.end('clone');
- *
- * const summary = monitor.getSummary();
- * ```
- */
-export class PerformanceMonitor {
-    private readonly activeMetrics: Map<string, PerformanceMetric> = new Map();
-    private readonly completedMetrics: PerformanceMetric[] = [];
-    private readonly enabled: boolean;
-    private readonly getTime: () => number;
-
-    constructor(
-        private readonly context: Context | null,
-        enabled: boolean = true
-    ) {
-        this.enabled = enabled;
-
-        // Fallback for environments without performance.now()
-        this.getTime =
-            typeof performance !== 'undefined' && typeof performance.now === 'function'
-                ? () => performance.now()
-                : () => Date.now();
-    }
-
-    /**
-     * Start measuring a performance metric
-     *
-     * @param name - Unique name for this metric
-     * @param metadata - Optional metadata to attach
-     */
-    start(name: string, metadata?: Record<string, any>): void {
-        if (!this.enabled) {
-            return;
-        }
-
-        if (this.activeMetrics.has(name)) {
-            this.context?.logger.warn(`Performance metric '${name}' already started. Overwriting.`);
-        }
-
-        this.activeMetrics.set(name, {
-            name,
-            startTime: this.getTime(),
-            metadata
-        });
-    }
-
-    /**
-     * End measuring a performance metric
-     *
-     * @param name - Name of the metric to end
-     * @returns The completed metric, or undefined if not found
-     */
-    end(name: string): PerformanceMetric | undefined {
-        if (!this.enabled) {
-            return undefined;
-        }
-
-        const metric = this.activeMetrics.get(name);
-
-        if (!metric) {
-            this.context?.logger.warn(`Performance metric '${name}' not found. Was start() called?`);
-            return undefined;
-        }
-
-        metric.endTime = this.getTime();
-        metric.duration = metric.endTime - metric.startTime;
-
-        this.completedMetrics.push(metric);
-        this.activeMetrics.delete(name);
-
-        this.context?.logger.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
-
-        return metric;
-    }
-
-    /**
-     * Measure a synchronous function
-     *
-     * @param name - Name for this measurement
-     * @param fn - Function to measure
-     * @param metadata - Optional metadata
-     * @returns The function's return value
-     */
-    measure<T>(name: string, fn: () => T, metadata?: Record<string, any>): T {
-        this.start(name, metadata);
-        try {
-            const result = fn();
-            this.end(name);
-            return result;
-        } catch (error) {
-            this.end(name);
-            throw error;
-        }
-    }
-
-    /**
-     * Measure an asynchronous function
-     *
-     * @param name - Name for this measurement
-     * @param fn - Async function to measure
-     * @param metadata - Optional metadata
-     * @returns Promise resolving to the function's return value
-     */
-    async measureAsync<T>(name: string, fn: () => Promise<T>, metadata?: Record<string, any>): Promise<T> {
-        this.start(name, metadata);
-        try {
-            const result = await fn();
-            this.end(name);
-            return result;
-        } catch (error) {
-            this.end(name);
-            throw error;
-        }
-    }
-
-    /**
-     * Get all completed metrics
-     *
-     * @returns Array of completed performance metrics
-     */
-    getMetrics(): PerformanceMetric[] {
-        return [...this.completedMetrics];
-    }
-
-    /**
-     * Get a specific metric by name
-     *
-     * @param name - Metric name
-     * @returns The metric, or undefined if not found
-     */
-    getMetric(name: string): PerformanceMetric | undefined {
-        return this.completedMetrics.find((m) => m.name === name);
-    }
-
-    /**
-     * Get performance summary
-     *
-     * @returns Aggregated performance data
-     */
-    getSummary(): PerformanceSummary {
-        const totalDuration = this.completedMetrics.reduce((sum, metric) => sum + (metric.duration || 0), 0);
-
-        const breakdown = this.completedMetrics.map((metric) => ({
-            name: metric.name,
-            duration: metric.duration || 0,
-            percentage: totalDuration > 0 ? (((metric.duration || 0) / totalDuration) * 100).toFixed(1) + '%' : '0%'
-        }));
-
-        return {
-            totalDuration,
-            metrics: this.getMetrics(),
-            breakdown
-        };
-    }
-
-    /**
-     * Log performance summary to console
-     */
-    logSummary(): void {
-        if (!this.enabled || this.completedMetrics.length === 0 || !this.context) {
-            return;
-        }
-
-        const summary = this.getSummary();
-
-        this.context.logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
-
-        summary.breakdown
-            .sort((a, b) => b.duration - a.duration)
-            .forEach((item) => {
-                this.context!.logger.info(
-                    `  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`
-                );
-            });
-    }
-
-    /**
-     * Clear all metrics
-     */
-    clear(): void {
-        this.activeMetrics.clear();
-        this.completedMetrics.splice(0);
-    }
-
-    /**
-     * Check if monitoring is enabled
-     */
-    isEnabled(): boolean {
-        return this.enabled;
-    }
-
-    /**
-     * Get active (uncompleted) metrics
-     * Useful for debugging leaked measurements
-     */
-    getActiveMetrics(): string[] {
-        return Array.from(this.activeMetrics.keys());
-    }
-}