refactor: avoid dynamic requires in lib/ folder

[aslushnikov]

This patch removes all dynamic requires in Puppeteer. This should
make it much simpler to bundle puppeteer/puppeteer-core packages.

We used dynamic requires in a few places in lib/:

• BrowserFetcher was choosing between http and https based on some
  runtime value. This was easy to fix with explicit require.
• BrowserFetcher and Launcher needed to know project root to store
  chromium revisions and to read package name and chromium revision from
  package.json. (projectRoot value would be different in node6).
  Instead of doing a backwards logic to infer these
  variables, we now pass them directly from //index.js.

With this patch, I was able to bundle Puppeteer using browserify and
the following config in package.json:

  "browser": {
    "./lib/BrowserFetcher.js": false,
    "ws": "./lib/BrowserWebSocket",
    "fs": false,
    "child_process": false,
    "rimraf": false,
    "readline": false
  }

(where lib/BrowserWebSocket.js is a courtesy of @Janpot from
#2374)

And command:

$ browserify -r puppeteer:./index.js > ppweb.js

References #2119

[Janpot]

@aslushnikov Just want to mention that ws supports both browser EventTarget and node EventEmitter interfaces simultaneously. With minimal refactoring, I think it can be made so the BrowserWebSocket replacement isn't even necessary.

Edit:
nice work btw, 👍

Edit2:
Here you can see ws is already browserifyable, puppeteer is just calling it in a way that is only compatible in node.

Edit3:
this should do it
https://github.com/GoogleChrome/puppeteer/blob/3d7ae2a2591a55e4f94c67d62a22f7103698cba5/lib/Connection.js#L32

new WebSocket(url, null, { perMessageDeflate: false });
ws.addEventListener('open', () => resolve(new Connection(url, ws, delay)));
ws.addEventListener('error', ({ error }) => reject(error));

https://github.com/GoogleChrome/puppeteer/blob/3d7ae2a2591a55e4f94c67d62a22f7103698cba5/lib/Connection.js#L62

this._transport.addEventListener('message', ({ data }) => this._onMessage(data));
this._transport.addEventListener('close', this._onClose.bind(this));

https://github.com/GoogleChrome/puppeteer/blob/3d7ae2a2591a55e4f94c67d62a22f7103698cba5/lib/Connection.js#L138

this._transport.addEventListener('error', () => {});

package.json:

  "browser": {
    "./lib/BrowserFetcher.js": false,
    "fs": false,
    "child_process": false,
    "rimraf": false,
    "readline": false
  }

[aslushnikov]

Here you can see ws is already browserifyable, puppeteer is just calling it in a way that is only compatible in node.

@Janpot Ah, how do I call it the right way?

[Janpot]

add a second null parameter to the constructor, but keep passing the options in the third one
refactor the .on to .addEventListener (the signature is a little different)
I edited my previous answer.

[Janpot]

🤔 Or second parameter has to be empty array: d68b4f6#diff-0c1fe9dd78cc7f29823c09b251c8aae0R32
sorry, I'm doing this from memory in between work 🙂

[aslushnikov]

@Janpot ah, unfortunately we have a Pipe transport that doesn't support addEventListener. I'll play with this separately.

[Janpot]

Ah yes, indeed, that makes sense. I guess in that case you could probably go the other way around.

const WebSocket = require('ws');
const EventEmitter = require('events');

class WebSocketTransport extends EventEmitter {
  constructor(url) {
    super();
    this._ws = new WebSocket(url, [], { perMessageDeflate: false });
    this._ws.addEventListener('open', event => this.emit('open'));
    this._ws.addEventListener('close', event => this.emit('close'));
    this._ws.addEventListener('error', event => this.emit('error', event.error));
    this._ws.addEventListener('message', event => this.emit('message', event.data));
  }
   send(message) {
    this._ws.send(message);
  }
   close() {
    this._ws.close();
  }
}

// ...

  static async createForWebSocket(url, delay = 0) {
    return new Promise((resolve, reject) => {
      const ws = new WebSocketTransport(url);
      ws.on('open', () => resolve(new Connection(url, ws, delay)));
      ws.on('error', reject);
    });
  }