fix(puppeteer): Wait until networkidle2 for better dev server support (#63)

Switches to networkidle2 during Puppeteer navigation, preventing
timeouts when requesting pages that are served from development
environments like webpack-dev-server (which holds open event-
source sockets for HMR).

The networkidle2 event is fired when there are no more than 2 network
connections for at least 500 ms. If the page you're requesting has 2 or
fewer resources that stall for longer than 500ms and doesn't complete
loading, you can switch back to networkidle0 using the new
`--puppeteer-wait-until` option.

Author: toolmantim

README.md

@@ -211,6 +211,18 @@ $ html-sketchapp --puppeteer-args="--no-sandbox --disable-setuid-sandbox" --file
 
 *Note: Because Puppeteer args are prefixed with hyphens, you **must** use an equals sign and quotes when providing this option via the command line (as seen above).*
 
+### Puppeteer `waitUntil`
+
+By default, Puppeteer is configured to consider the page loaded when there are no more than 2 network connections for at least 500ms (`networkidle2`). This is so that html-sketchapp-cli can handle development environments with long-lived connections.
+
+If the page you're requesting has 2 or fewer resources that stall for longer than 500ms and doesn't complete loading, you can switch back to `networkidle0` via the `puppeteer-wait-until` argument:
+
+```bash
+$ html-sketchapp --puppeteer-wait-until networkidle0 --file sketch.html --out-dir dist
+```
+
+For the full list of available options for `waitUntil`, view the [Puppeteer `page.goto()` API documentation](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options).
+
 ### Chromium executable
 
 If you'd like to override the Chromium used by Puppeteer, you can provide a path to the executable with the `puppeteer-executable-path` option.

bin/cli.js

@@ -75,6 +75,12 @@ require('yargs')
     'puppeteer-executable-path': {
       type: 'string',
       describe: 'Path to a Chromium executable to use instead of the one downloaded by Puppeteer.'
+    },
+    'puppeteer-wait-until': {
+      type: 'string',
+      describe: 'The Puppeteer navigation event to use before considering the page loaded.',
+      default: 'networkidle2',
+      choices: ['load', 'domcontentloaded', 'networkidle0', 'networkidle2']
     }
   }, async argv => {
     try {
@@ -106,7 +112,7 @@ require('yargs')
             page.on('console', msg => console.log('PAGE LOG:', msg.text()));
           }
 
-          await page.goto(symbolsUrl, { waitUntil: 'networkidle0' });
+          await page.goto(symbolsUrl, { waitUntil: argv.puppeteerWaitUntil });
 
           const bundle = await rollup({
             input: path.resolve(__dirname, '../script/generateAlmostSketch.js'),