source/index.js

import {packageOf} from '@tech_query/node-toolkit';

import {resolve} from 'url';

import WebServer from 'koapache';

import {watch} from 'chokidar';

import {toString} from 'qrcode';

import promisify from 'promisify-node';

const QRCode = promisify( toString );



const { env } = process, config = (packageOf('./test') || '').meta;

const NPM_command = env.npm_lifecycle_script;

var server, browser, page;


/**
 * Wrapper of `Puppeteer` class
 */
export default  class PuppeteerBrowser {
    /**
     * @protected
     *
     * @param {string} [root] - Root path of the static site
     *
     * @return {Object} Server information
     */
    static async getServer(root) {

        return  server || (
            server = await (new WebServer(root || '.')).workerHost()
        );
    }

    /**
     * @type {string}
     */
    static get browserName() {

        return  (env.npm_config_PUPPETEER_BROWSER || 'chrome').trim();
    }

    /**
     * @type {string}
     */
    static get moduleName() {

        return  'puppeteer' + (map => {

            for (let name in map)
                if (name === this.browserName)  return map[name];

            return '';
        })({
            chrome:   '',
            firefox:  '-fx',
            IE:       '-ie'
        });
    }

    /**
     * @param {Object} [options] - https://pptr.dev/#?product=Puppeteer&version=v1.5.0&show=api-puppeteerlaunchoptions
     *
     * @return {Browser}
     */
    static async launch(options) {

        const Puppeteer = (await import( this.moduleName )).default;

        return  await Puppeteer.launch( options );
    }

    /**
     * @return {string} https://pptr.dev/#?product=Puppeteer&version=v1.5.0&show=api-puppeteerexecutablepath
     */
    static executablePath() {

        return  env['npm_config_' + this.browserName];
    }

    /**
     * @protected
     *
     * @param {boolean} [visible] - Browser visibility
     *                              (Visible mode will run slowly for seeing clearly)
     * @return {Browser}
     */
    static async getBrowser(visible) {

        if ( browser )  return browser;

        visible = (visible != null)  ?
            visible  :  NPM_command.includes('--inspect');

        browser = await this.launch({
            executablePath:  this.executablePath(),
            headless:        ! visible,
            slowMo:          visible ? 100 : 0
        });

        return  browser.on('disconnected',  () => browser = page = null);
    }

    /**
     * After files changed, the page will be focused & reloaded
     *
     * @param {string}   path     - Directory to watch recursively
     * @param {function} onChange - Call on files changed
     *
     * @return {FSWatcher}
     */
    static watch(path, onChange) {

        var listen;

        async function refresh() {

            await onChange();

            if ( page ) {

                await page.bringToFront();

                await page.reload();

                console.info(`[ Reload ]  ${page.url()}`);
            }

            listen = false;
        }

        return  watch( path ).on('change',  () => {

            if (! listen) {

                listen = true;

                process.nextTick( refresh );
            }
        });
    }

    /**
     * @param {?string}  root         - Root path to start Web server, default to be `process.cwd()`
     * @param {?string}  path         - Path to open Web page
     * @param {function} [fileChange] - Do something between files changed & page reload
     *                                  (Browser will be visible)
     * @return {Page} Resolve after `DOMContentLoaded` event fired
     */
    static async getPage(root, path, fileChange) {

        if ( page )  return page;

        path = path || '.';

        fileChange = (fileChange instanceof Function)  ?  fileChange  :  null;

        const server = path.indexOf('http')  &&  await this.getServer( root );

        const URI = resolve(`http://${server.address}:${server.port}/`, path);

        if ( fileChange )  console.info(await QRCode( URI ));

        page = await (await this.getBrowser( fileChange )).newPage();

        await page.on('close',  () => page = null).goto(server ? URI : path,  {
            waitUntil:  'domcontentloaded'
        });

        if ( fileChange )
            this.watch(config.directories.lib || root,  fileChange);

        return page;
    }
}