@automattic/jetpack-critical-css-gen 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -5,22 +5,34 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.0] - 2024-10-07
+## [1.0.2] - 2024-11-04
+### Added
+- Enable test coverage. [#39961]
 
-### Security
+### Changed
+- Updated package dependencies. [#39733]
+
+## [1.0.1] - 2024-10-10
+### Changed
+- Updated package dependencies. [#39670]
 
+### Fixed
+- Add missing build folder to package. [#39723]
+
+## [1.0.0] - 2024-10-07
+### Security
 - Security: Fix XSS vulnerability. [#39507]
 
 ### Added
-
 - Add /playwright entry point for BrowserInterfacePlaywright. [#39509]
 
 ### Changed
-
 - Change default entry point of package to include BrowserInterfaceIframe instead of BrowserInterfacePlaywright. [#39509]
 
 ## 0.1.0 - 2024-09-24
 ### Added
 - Initial version. [#38429]
 
+[1.0.2]: https://github.com/Automattic/jetpack-critical-css-gen/compare/v1.0.1...v1.0.2
+[1.0.1]: https://github.com/Automattic/jetpack-critical-css-gen/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/Automattic/jetpack-critical-css-gen/compare/v0.1.0...v1.0.0

package/build/browser-interface-iframe.d.ts

@@ -0,0 +1,31 @@
+import { BrowserInterface, BrowserRunnable } from './browser-interface.js';
+import { UrlError } from './errors.js';
+import { Viewport } from './types.js';
+type VerifyMethod = (rawUrl: string, contentWindow: Window, contentDocument: Document) => boolean;
+type BrowserInterfaceIframeOptions = {
+    requestGetParameters?: {
+        [key: string]: string;
+    };
+    loadTimeout?: number;
+    verifyPage: VerifyMethod;
+    allowScripts?: boolean;
+};
+export declare class BrowserInterfaceIframe extends BrowserInterface {
+    private requestGetParameters;
+    private loadTimeout;
+    private verifyPage;
+    private currentUrl;
+    private currentSize;
+    private wrapperDiv;
+    private iframe;
+    constructor({ requestGetParameters, loadTimeout, verifyPage, allowScripts, }: BrowserInterfaceIframeOptions);
+    cleanup(): Promise<void>;
+    fetch(url: string, options: RequestInit, _role: 'css' | 'html'): Promise<Response>;
+    runInPage<ReturnType>(pageUrl: string, viewport: Viewport | null, method: BrowserRunnable<ReturnType>, ...args: unknown[]): Promise<ReturnType>;
+    addGetParameters(rawUrl: string): string;
+    diagnoseUrlError(url: string): Promise<UrlError | null>;
+    sameOrigin(url: string): boolean;
+    loadPage(rawUrl: string): Promise<void>;
+    resize({ width, height }: Viewport): Promise<unknown>;
+}
+export {};

package/build/browser-interface-iframe.js

@@ -0,0 +1,130 @@
+import { BrowserInterface } from './browser-interface.js';
+import { CrossDomainError, HttpError, LoadTimeoutError, RedirectError, UrlVerifyError, UnknownError, XFrameDenyError, } from './errors.js';
+const defaultLoadTimeout = 60 * 1000;
+export class BrowserInterfaceIframe extends BrowserInterface {
+    constructor({ requestGetParameters, loadTimeout, verifyPage, allowScripts, }) {
+        super();
+        this.requestGetParameters = requestGetParameters || {};
+        this.loadTimeout = loadTimeout || defaultLoadTimeout;
+        this.verifyPage = verifyPage;
+        // Default 'allowScripts' to true if not specified.
+        allowScripts = allowScripts !== false;
+        this.currentUrl = null;
+        this.currentSize = { width: null, height: null };
+        // Create a wrapper div to keep the iframe invisible.
+        this.wrapperDiv = document.createElement('div');
+        this.wrapperDiv.setAttribute('style', 'position:fixed; z-index: -1000; opacity: 0; top: 50px;');
+        document.body.append(this.wrapperDiv);
+        // Create iframe itself.
+        this.iframe = document.createElement('iframe');
+        this.iframe.setAttribute('style', 'max-width: none; max-height: none; border: 0px;');
+        this.iframe.setAttribute('aria-hidden', 'true');
+        this.iframe.setAttribute('sandbox', 'allow-same-origin ' + (allowScripts ? 'allow-scripts' : ''));
+        this.wrapperDiv.append(this.iframe);
+    }
+    async cleanup() {
+        this.iframe.remove();
+        this.wrapperDiv.remove();
+    }
+    async fetch(url, options, _role) {
+        return window.fetch(url, options);
+    }
+    async runInPage(pageUrl, viewport, method, ...args) {
+        await this.loadPage(pageUrl);
+        if (viewport) {
+            await this.resize(viewport);
+        }
+        // The inner window in the iframe is separate from the main window object.
+        // Pass the iframe window object to the evaluating method.
+        return method({ innerWindow: this.iframe.contentWindow, args });
+    }
+    addGetParameters(rawUrl) {
+        const urlObject = new URL(rawUrl);
+        for (const key of Object.keys(this.requestGetParameters)) {
+            urlObject.searchParams.append(key, this.requestGetParameters[key]);
+        }
+        return urlObject.toString();
+    }
+    async diagnoseUrlError(url) {
+        try {
+            const response = await this.fetch(url, { redirect: 'manual' }, 'html');
+            const headers = response.headers;
+            if (headers.get('x-frame-options') === 'DENY') {
+                return new XFrameDenyError({ url });
+            }
+            if (response.type === 'opaqueredirect') {
+                return new RedirectError({
+                    url,
+                    redirectUrl: response.url,
+                });
+            }
+            if (response.status === 200) {
+                return null;
+            }
+            return new HttpError({ url, code: response.status });
+        }
+        catch (err) {
+            return new UnknownError({ url, message: err.message });
+        }
+    }
+    sameOrigin(url) {
+        return new URL(url).origin === window.location.origin;
+    }
+    async loadPage(rawUrl) {
+        if (rawUrl === this.currentUrl) {
+            return;
+        }
+        const fullUrl = this.addGetParameters(rawUrl);
+        return new Promise((resolve, rawReject) => {
+            // Track all URL errors.
+            const reject = err => {
+                this.trackUrlError(rawUrl, err);
+                rawReject(err);
+            };
+            // Catch cross-domain errors before they occur.
+            if (!this.sameOrigin(fullUrl)) {
+                reject(new CrossDomainError({ url: fullUrl }));
+                return;
+            }
+            // Set a timeout.
+            const timeoutId = setTimeout(() => {
+                this.iframe.onload = null;
+                reject(new LoadTimeoutError({ url: fullUrl }));
+            }, this.loadTimeout);
+            // Catch load event.
+            this.iframe.onload = async () => {
+                try {
+                    this.iframe.onload = null;
+                    clearTimeout(timeoutId);
+                    // Verify the inner document is readable.
+                    if (!this.iframe.contentDocument || !this.iframe.contentWindow) {
+                        throw ((await this.diagnoseUrlError(fullUrl)) || new CrossDomainError({ url: fullUrl }));
+                    }
+                    if (!this.verifyPage(rawUrl, this.iframe.contentWindow, this.iframe.contentDocument)) {
+                        // Diagnose and throw an appropriate error.
+                        throw ((await this.diagnoseUrlError(fullUrl)) || new UrlVerifyError({ url: fullUrl }));
+                    }
+                    this.currentUrl = rawUrl;
+                    resolve();
+                }
+                catch (err) {
+                    reject(err);
+                }
+            };
+            this.iframe.src = fullUrl;
+        });
+    }
+    async resize({ width, height }) {
+        if (this.currentSize.width === width && this.currentSize.height === height) {
+            return;
+        }
+        return new Promise(resolve => {
+            // Set iframe size.
+            this.iframe.width = width.toString();
+            this.iframe.height = height.toString();
+            // Bounce to browser main loop to allow resize to complete.
+            setTimeout(resolve, 1);
+        });
+    }
+}
+//# sourceMappingURL=browser-interface-iframe.js.map

package/build/browser-interface-iframe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-interface-iframe.js","sourceRoot":"","sources":["../src/browser-interface-iframe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAmB,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EACN,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,YAAY,EACZ,eAAe,GAEf,MAAM,aAAa,CAAC;AAGrB,MAAM,kBAAkB,GAAG,EAAE,GAAG,IAAI,CAAC;AAWrC,MAAM,OAAO,sBAAuB,SAAQ,gBAAgB;IAW3D,YAAa,EACZ,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,YAAY,GACmB;QAC/B,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,oBAAoB,GAAG,oBAAoB,IAAI,EAAE,CAAC;QACvD,IAAI,CAAC,WAAW,GAAG,WAAW,IAAI,kBAAkB,CAAC;QACrD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAE7B,mDAAmD;QACnD,YAAY,GAAG,YAAY,KAAK,KAAK,CAAC;QAEtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,WAAW,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;QAEjD,qDAAqD;QACrD,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAE,KAAK,CAAE,CAAC;QAClD,IAAI,CAAC,UAAU,CAAC,YAAY,CAC3B,OAAO,EACP,wDAAwD,CACxD,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAE,IAAI,CAAC,UAAU,CAAE,CAAC;QAExC,wBAAwB;QACxB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAE,QAAQ,CAAE,CAAC;QACjD,IAAI,CAAC,MAAM,CAAC,YAAY,CAAE,OAAO,EAAE,iDAAiD,CAAE,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,YAAY,CAAE,aAAa,EAAE,MAAM,CAAE,CAAC;QAClD,IAAI,CAAC,MAAM,CAAC,YAAY,CACvB,SAAS,EACT,oBAAoB,GAAG,CAAE,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAE,CAC9D,CAAC;QACF,IAAI,CAAC,UAAU,CAAC,MAAM,CAAE,IAAI,CAAC,MAAM,CAAE,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,OAAO;QACZ,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,KAAK,CAAE,GAAW,EAAE,OAAoB,EAAE,KAAqB;QACpE,OAAO,MAAM,CAAC,KAAK,CAAE,GAAG,EAAE,OAAO,CAAE,CAAC;IACrC,CAAC;IAED,KAAK,CAAC,SAAS,CACd,OAAe,EACf,QAAyB,EACzB,MAAqC,EACrC,GAAG,IAAe;QAElB,MAAM,IAAI,CAAC,QAAQ,CAAE,OAAO,CAAE,CAAC;QAE/B,IAAK,QAAQ,EAAG;YACf,MAAM,IAAI,CAAC,MAAM,CAAE,QAAQ,CAAE,CAAC;SAC9B;QAED,0EAA0E;QAC1E,0DAA0D;QAC1D,OAAO,MAAM,CAAE,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,IAAI,EAAE,CAAE,CAAC;IACnE,CAAC;IAED,gBAAgB,CAAE,MAAc;QAC/B,MAAM,SAAS,GAAG,IAAI,GAAG,CAAE,MAAM,CAAE,CAAC;QACpC,KAAM,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAE,IAAI,CAAC,oBAAoB,CAAE,EAAG;YAC7D,SAAS,CAAC,YAAY,CAAC,MAAM,CAAE,GAAG,EAAE,IAAI,CAAC,oBAAoB,CAAE,GAAG,CAAE,CAAE,CAAC;SACvE;QAED,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC;IAC7B,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAE,GAAW;QAClC,IAAI;YACH,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,CAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,MAAM,CAAE,CAAC;YACzE,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;YAEjC,IAAK,OAAO,CAAC,GAAG,CAAE,iBAAiB,CAAE,KAAK,MAAM,EAAG;gBAClD,OAAO,IAAI,eAAe,CAAE,EAAE,GAAG,EAAE,CAAE,CAAC;aACtC;YAED,IAAK,QAAQ,CAAC,IAAI,KAAK,gBAAgB,EAAG;gBACzC,OAAO,IAAI,aAAa,CAAE;oBACzB,GAAG;oBACH,WAAW,EAAE,QAAQ,CAAC,GAAG;iBACzB,CAAE,CAAC;aACJ;YAED,IAAK,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAG;gBAC9B,OAAO,IAAI,CAAC;aACZ;YAED,OAAO,IAAI,SAAS,CAAE,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAE,CAAC;SACvD;QAAC,OAAQ,GAAG,EAAG;YACf,OAAO,IAAI,YAAY,CAAE,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,CAAE,CAAC;SACzD;IACF,CAAC;IAED,UAAU,CAAE,GAAW;QACtB,OAAO,IAAI,GAAG,CAAE,GAAG,CAAE,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;IACzD,CAAC;IAED,KAAK,CAAC,QAAQ,CAAE,MAAc;QAC7B,IAAK,MAAM,KAAK,IAAI,CAAC,UAAU,EAAG;YACjC,OAAO;SACP;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAE,MAAM,CAAE,CAAC;QAEhD,OAAO,IAAI,OAAO,CAAE,CAAE,OAAO,EAAE,SAAS,EAAG,EAAE;YAC5C,wBAAwB;YACxB,MAAM,MAAM,GAAG,GAAG,CAAC,EAAE;gBACpB,IAAI,CAAC,aAAa,CAAE,MAAM,EAAE,GAAG,CAAE,CAAC;gBAClC,SAAS,CAAE,GAAG,CAAE,CAAC;YAClB,CAAC,CAAC;YAEF,+CAA+C;YAC/C,IAAK,CAAE,IAAI,CAAC,UAAU,CAAE,OAAO,CAAE,EAAG;gBACnC,MAAM,CAAE,IAAI,gBAAgB,CAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAE,CAAE,CAAC;gBACnD,OAAO;aACP;YAED,iBAAiB;YACjB,MAAM,SAAS,GAAG,UAAU,CAAE,GAAG,EAAE;gBAClC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;gBAC1B,MAAM,CAAE,IAAI,gBAAgB,CAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAE,CAAE,CAAC;YACpD,CAAC,EAAE,IAAI,CAAC,WAAW,CAAE,CAAC;YAEtB,oBAAoB;YACpB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,IAAI,EAAE;gBAC/B,IAAI;oBACH,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;oBAC1B,YAAY,CAAE,SAAS,CAAE,CAAC;oBAE1B,yCAAyC;oBACzC,IAAK,CAAE,IAAI,CAAC,MAAM,CAAC,eAAe,IAAI,CAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAG;wBACnE,MAAM,CACL,CAAE,MAAM,IAAI,CAAC,gBAAgB,CAAE,OAAO,CAAE,CAAE,IAAI,IAAI,gBAAgB,CAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAE,CACtF,CAAC;qBACF;oBAED,IACC,CAAE,IAAI,CAAC,UAAU,CAAE,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAE,EAClF;wBACD,2CAA2C;wBAC3C,MAAM,CACL,CAAE,MAAM,IAAI,CAAC,gBAAgB,CAAE,OAAO,CAAE,CAAE,IAAI,IAAI,cAAc,CAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAE,CACpF,CAAC;qBACF;oBAED,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;oBACzB,OAAO,EAAE,CAAC;iBACV;gBAAC,OAAQ,GAAG,EAAG;oBACf,MAAM,CAAE,GAAG,CAAE,CAAC;iBACd;YACF,CAAC,CAAC;YAEF,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,OAAO,CAAC;QAC3B,CAAC,CAAE,CAAC;IACL,CAAC;IAED,KAAK,CAAC,MAAM,CAAE,EAAE,KAAK,EAAE,MAAM,EAAY;QACxC,IAAK,IAAI,CAAC,WAAW,CAAC,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,MAAM,EAAG;YAC7E,OAAO;SACP;QAED,OAAO,IAAI,OAAO,CAAE,OAAO,CAAC,EAAE;YAC7B,mBAAmB;YACnB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;YACrC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;YAEvC,2DAA2D;YAC3D,UAAU,CAAE,OAAO,EAAE,CAAC,CAAE,CAAC;QAC1B,CAAC,CAAE,CAAC;IACL,CAAC;CACD"}

package/build/browser-interface-playwright.d.ts

@@ -0,0 +1,53 @@
+import { BrowserContext, Page } from 'playwright-core';
+import { BrowserInterface, BrowserRunnable, FetchOptions } from './browser-interface.js';
+import { Viewport } from './types.js';
+export type Tab = {
+    page: Page;
+    statusCode: number | null;
+};
+export type TabsByUrl = {
+    [url: string]: Tab;
+};
+export declare class BrowserInterfacePlaywright extends BrowserInterface {
+    private context;
+    private urls;
+    private tabs;
+    /**
+     * Creates a new BrowserInterfacePlaywright instance.
+     *
+     * @param {BrowserContext} context - The playwright browser context to work with.
+     * @param {string[]}       urls    - Array of urls to evaluate. The reason we are taking this as an argument is because we want to load all of them in parallel.
+     */
+    constructor(context: BrowserContext, urls: string[]);
+    private getTabs;
+    /**
+     * Open an array of urls in a new browser context.
+     *
+     * Take a browser instance and an array of urls to open in new tabs.
+     *
+     * @param {BrowserContext} context - Browser context to use.
+     * @param {string[]}       urls    - Array of urls to open.
+     * @return {Promise< TabsByUrl >} Promise resolving to the browser context.
+     */
+    private openUrls;
+    /**
+     * Open url in a new tab in a given browserContext.
+     *
+     * @param {BrowserContext} browserContext - Browser context to use.
+     * @param {string}         url            - Url to open.
+     * @return {Promise<Page>} Promise resolving to the page instance.
+     */
+    private newTab;
+    runInPage<ReturnType>(pageUrl: string, viewport: Viewport | null, method: BrowserRunnable<ReturnType>, ...args: unknown[]): Promise<ReturnType>;
+    /**
+     * Replacement for browser.fetch, uses node's fetch to simulate the same
+     * interface.
+     *
+     * @param {string} url     - URL to fetch.
+     * @param {object} options - Fetch options.
+     * @param {string} _role   - 'css' or 'html' indicating what kind of thing is being fetched.
+     * @return {Promise<Response>} A promise that resolves to the fetch response.
+     */
+    fetch(url: string, options: FetchOptions, _role: 'css' | 'html'): Promise<Response>;
+    private isOkStatus;
+}

package/build/browser-interface-playwright.js

@@ -0,0 +1,94 @@
+import { BrowserInterface } from './browser-interface.js';
+import { HttpError } from './errors.js';
+import { objectPromiseAll } from './object-promise-all.js';
+const PAGE_GOTO_TIMEOUT_MS = 5 * 60 * 1000;
+export class BrowserInterfacePlaywright extends BrowserInterface {
+    /**
+     * Creates a new BrowserInterfacePlaywright instance.
+     *
+     * @param {BrowserContext} context - The playwright browser context to work with.
+     * @param {string[]}       urls    - Array of urls to evaluate. The reason we are taking this as an argument is because we want to load all of them in parallel.
+     */
+    constructor(context, urls) {
+        super();
+        this.context = context;
+        this.urls = urls;
+    }
+    async getTabs() {
+        if (typeof this.tabs === 'undefined') {
+            await this.openUrls(this.context, this.urls);
+        }
+        return this.tabs;
+    }
+    /**
+     * Open an array of urls in a new browser context.
+     *
+     * Take a browser instance and an array of urls to open in new tabs.
+     *
+     * @param {BrowserContext} context - Browser context to use.
+     * @param {string[]}       urls    - Array of urls to open.
+     * @return {Promise< TabsByUrl >} Promise resolving to the browser context.
+     */
+    async openUrls(context, urls) {
+        this.tabs = await objectPromiseAll(urls.reduce((set, url) => {
+            set[url] = this.newTab(context, url);
+            return set;
+        }, {}));
+    }
+    /**
+     * Open url in a new tab in a given browserContext.
+     *
+     * @param {BrowserContext} browserContext - Browser context to use.
+     * @param {string}         url            - Url to open.
+     * @return {Promise<Page>} Promise resolving to the page instance.
+     */
+    async newTab(browserContext, url) {
+        const tab = {
+            page: await browserContext.newPage(),
+            statusCode: null,
+        };
+        tab.page.on('response', async (response) => {
+            if (response.url() === url) {
+                tab.statusCode = response.status();
+            }
+        });
+        await tab.page.goto(url, { timeout: PAGE_GOTO_TIMEOUT_MS });
+        return tab;
+    }
+    async runInPage(pageUrl, viewport, method, ...args) {
+        const tabs = await this.getTabs();
+        const tab = tabs[pageUrl];
+        if (!tab || !tab.page) {
+            throw new Error(`Playwright interface does not include URL ${pageUrl}`);
+        }
+        // Bail early if the page returned a non-200 status code.
+        if (!tab.statusCode || !this.isOkStatus(tab.statusCode)) {
+            const error = new HttpError({ url: pageUrl, code: tab.statusCode });
+            this.trackUrlError(pageUrl, error);
+            throw error;
+        }
+        if (viewport) {
+            await tab.page.setViewportSize(viewport);
+        }
+        // The inner window in Playwright is the directly accessible main window object.
+        // The evaluating method does not need a separate window object.
+        // Call inner method within the Playwright context.
+        return tab.page.evaluate(method, { innerWindow: null, args });
+    }
+    /**
+     * Replacement for browser.fetch, uses node's fetch to simulate the same
+     * interface.
+     *
+     * @param {string} url     - URL to fetch.
+     * @param {object} options - Fetch options.
+     * @param {string} _role   - 'css' or 'html' indicating what kind of thing is being fetched.
+     * @return {Promise<Response>} A promise that resolves to the fetch response.
+     */
+    async fetch(url, options, _role) {
+        return fetch(url, options);
+    }
+    isOkStatus(statusCode) {
+        return statusCode >= 200 && statusCode < 300;
+    }
+}
+//# sourceMappingURL=browser-interface-playwright.js.map

package/build/browser-interface-playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-interface-playwright.js","sourceRoot":"","sources":["../src/browser-interface-playwright.ts"],"names":[],"mappings":"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"}

package/build/browser-interface.d.ts

@@ -0,0 +1,77 @@
+import type { Viewport } from './types.js';
+export type BrowserRunnable<ReturnType> = (arg: unknown) => ReturnType;
+export interface FetchOptions {
+    method?: 'POST' | 'GET';
+}
+export interface FetchResponse {
+    ok: boolean;
+    status: number;
+    text: () => Promise<string>;
+}
+export declare class BrowserInterface {
+    private urlErrors;
+    constructor();
+    trackUrlError(url: string, error: Error): void;
+    filterValidUrls(urls: string[]): string[];
+    runInPage<ReturnType>(_pageUrl: string, _viewport: Viewport | null, _method: BrowserRunnable<ReturnType>, ..._args: unknown[]): Promise<ReturnType>;
+    /**
+     * Context-specific wrapper for fetch; uses window.fetch in browsers, or a
+     * node library when using Puppeteer.
+     *
+     * @param {string}         _url     - The URL to fetch
+     * @param {FetchOptions}   _options - Fetch options
+     * @param {'css' | 'html'} _role    - Role of the fetch operation
+     */
+    fetch(_url: string, _options: FetchOptions, _role: 'css' | 'html'): Promise<FetchResponse>;
+    cleanup(): Promise<void>;
+    getCssIncludes(pageUrl: string): Promise<{
+        [url: string]: {
+            media: string;
+        };
+    }>;
+    static innerGetCssIncludes({ innerWindow }: {
+        innerWindow: any;
+    }): any;
+    getInternalStyles(pageUrl: string): Promise<string>;
+    /**
+     * Get all internal styles as a combined string from the window.
+     *
+     * @param {object} wrappedArgs             - Object containing the inner window.
+     * @param {Window} wrappedArgs.innerWindow - Window inside the browser interface.
+     * @return {string} Combined internal styles as a string.
+     */
+    static innerGetInternalStyles({ innerWindow }: {
+        innerWindow: any;
+    }): string;
+    /**
+     * Given a set of CSS selectors (as object keys), along with "simplified" versions
+     * for easy querySelector calling (values), return an array of selectors which match
+     * _any_ element on the page.
+     *
+     * @param {object}   wrappedArgs             - Object containing the inner window and arguments.
+     * @param {Window}   wrappedArgs.innerWindow - Window inside the browser interface.
+     * @param {Object[]} wrappedArgs.args        - Array of arguments.
+     *                                           {Object} wrappedArgs.args[selectors] - Map containing selectors (object keys), and simplified versions for easy matching (values).
+     * @return {string[]} Array of selectors matching above-the-fold elements.
+     */
+    static innerFindMatchingSelectors({ innerWindow, args: [selectors] }: {
+        innerWindow: any;
+        args: [any];
+    }): string[];
+    /**
+     * Given a set of CSS selectors (as object keys), along with "simplified" versions
+     * for easy querySelector calling (values), return an array of selectors which match
+     * any above-the-fold element on the page.
+     *
+     * @param {object}   wrappedArgs             - Object containing the inner window and arguments.
+     * @param {Window}   wrappedArgs.innerWindow - Window inside the browser interface.
+     * @param {Object[]} wrappedArgs.args        - Array of arguments.
+     *                                           {Object} wrappedArgs.args[selectors] - Map containing selectors (object keys), and simplified versions for easy matching (values).
+     *                                           {string[]} wrappedArgs.args[pageSelectors] - String array containing selectors that appear anywhere on this page (as returned by innerFindMatchingSelectors) - should be a subset of keys in selectors.
+     * @return {string[]} Array of selectors matching above-the-fold elements.
+     */
+    static innerFindAboveFoldSelectors({ innerWindow, args: [selectors, pageSelectors], }: {
+        innerWindow: any;
+        args: [any, any];
+    }): string[];
+}

package/build/browser-interface.js

@@ -0,0 +1,124 @@
+export class BrowserInterface {
+    constructor() {
+        this.urlErrors = {};
+    }
+    trackUrlError(url, error) {
+        this.urlErrors[url] = error;
+    }
+    filterValidUrls(urls) {
+        return urls.filter(url => !this.urlErrors[url]);
+    }
+    async runInPage(_pageUrl, _viewport, _method, ..._args) {
+        throw new Error('Undefined interface method: BrowserInterface.runInPage()');
+    }
+    /**
+     * Context-specific wrapper for fetch; uses window.fetch in browsers, or a
+     * node library when using Puppeteer.
+     *
+     * @param {string}         _url     - The URL to fetch
+     * @param {FetchOptions}   _options - Fetch options
+     * @param {'css' | 'html'} _role    - Role of the fetch operation
+     */
+    async fetch(_url, _options, _role) {
+        throw new Error('Undefined interface method: BrowserInterface.fetch()');
+    }
+    async cleanup() {
+        // No-op.
+    }
+    async getCssIncludes(pageUrl) {
+        return await this.runInPage(pageUrl, null, BrowserInterface.innerGetCssIncludes);
+    }
+    static innerGetCssIncludes({ innerWindow }) {
+        innerWindow = null === innerWindow ? window : innerWindow;
+        return [...innerWindow.document.getElementsByTagName('link')]
+            .filter(link => link.rel === 'stylesheet')
+            .reduce((set, link) => {
+            set[link.href] = {
+                media: link.media || null,
+            };
+            return set;
+        }, {});
+    }
+    async getInternalStyles(pageUrl) {
+        return await this.runInPage(pageUrl, null, BrowserInterface.innerGetInternalStyles);
+    }
+    /**
+     * Get all internal styles as a combined string from the window.
+     *
+     * @param {object} wrappedArgs             - Object containing the inner window.
+     * @param {Window} wrappedArgs.innerWindow - Window inside the browser interface.
+     * @return {string} Combined internal styles as a string.
+     */
+    static innerGetInternalStyles({ innerWindow }) {
+        innerWindow = null === innerWindow ? window : innerWindow;
+        const styleElements = Array.from(innerWindow.document.getElementsByTagName('style'));
+        return styleElements.reduce((styles, style) => {
+            styles += style.innerText;
+            return styles;
+        }, '');
+    }
+    /**
+     * Given a set of CSS selectors (as object keys), along with "simplified" versions
+     * for easy querySelector calling (values), return an array of selectors which match
+     * _any_ element on the page.
+     *
+     * @param {object}   wrappedArgs             - Object containing the inner window and arguments.
+     * @param {Window}   wrappedArgs.innerWindow - Window inside the browser interface.
+     * @param {Object[]} wrappedArgs.args        - Array of arguments.
+     *                                           {Object} wrappedArgs.args[selectors] - Map containing selectors (object keys), and simplified versions for easy matching (values).
+     * @return {string[]} Array of selectors matching above-the-fold elements.
+     */
+    static innerFindMatchingSelectors({ innerWindow, args: [selectors] }) {
+        innerWindow = null === innerWindow ? window : innerWindow;
+        return Object.keys(selectors).filter(selector => {
+            try {
+                return !!innerWindow.document.querySelector(selectors[selector]);
+            }
+            catch (err) {
+                // Ignore invalid selectors.
+                return false;
+            }
+        });
+    }
+    /**
+     * Given a set of CSS selectors (as object keys), along with "simplified" versions
+     * for easy querySelector calling (values), return an array of selectors which match
+     * any above-the-fold element on the page.
+     *
+     * @param {object}   wrappedArgs             - Object containing the inner window and arguments.
+     * @param {Window}   wrappedArgs.innerWindow - Window inside the browser interface.
+     * @param {Object[]} wrappedArgs.args        - Array of arguments.
+     *                                           {Object} wrappedArgs.args[selectors] - Map containing selectors (object keys), and simplified versions for easy matching (values).
+     *                                           {string[]} wrappedArgs.args[pageSelectors] - String array containing selectors that appear anywhere on this page (as returned by innerFindMatchingSelectors) - should be a subset of keys in selectors.
+     * @return {string[]} Array of selectors matching above-the-fold elements.
+     */
+    static innerFindAboveFoldSelectors({ innerWindow, args: [selectors, pageSelectors], }) {
+        /**
+         * Inner helper function used inside browser / iframe to check if the given
+         * element is "above the fold".
+         *
+         * @param {HTMLElement} element - Element to check.
+         */
+        innerWindow = null === innerWindow ? window : innerWindow;
+        const isAboveFold = element => {
+            const originalClearStyle = element.style.clear || '';
+            element.style.clear = 'none';
+            const rect = element.getBoundingClientRect();
+            element.style.clear = originalClearStyle;
+            return rect.top < innerWindow.innerHeight;
+        };
+        return pageSelectors.filter(s => {
+            if ('*' === selectors[s]) {
+                return true;
+            }
+            const matches = innerWindow.document.querySelectorAll(selectors[s]);
+            for (const match of matches) {
+                if (isAboveFold(match)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+}
+//# sourceMappingURL=browser-interface.js.map

package/build/browser-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-interface.js","sourceRoot":"","sources":["../src/browser-interface.ts"],"names":[],"mappings":"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"}

package/build/browser.d.ts

@@ -0,0 +1,5 @@
+export { BrowserInterfaceIframe } from './browser-interface-iframe.js';
+export { BrowserInterface } from './browser-interface.js';
+export { generateCriticalCSS } from './generate-critical-css.js';
+export * from './errors.js';
+export declare const version = "0.0.11";

package/build/browser.js

@@ -0,0 +1,6 @@
+export { BrowserInterfaceIframe } from './browser-interface-iframe.js';
+export { BrowserInterface } from './browser-interface.js';
+export { generateCriticalCSS } from './generate-critical-css.js';
+export * from './errors.js';
+export const version = '0.0.11';
+//# sourceMappingURL=browser.js.map

package/build/browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.js","sourceRoot":"","sources":["../src/browser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,cAAc,aAAa,CAAC;AAE5B,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC"}