Finish PuppeteerRenderer

[JoshTheDerf]

Uses Google Chrome's puppeteer to render page instead of PhantomJS. This currently intended as the default renderer for v3.

The current version is functional, but not fully tested.

• Test on Linux
• Test on macOS
• Test on Windows

I don't have easy access to a functional Windows or macOS dev environment at the moment, so if anyone could test on those platforms, that would be great.

[boris-graeff]

Tested on Linux :
First try with default renderer => body is empty, no generated HTML.
But it works fine with renderAfterTime option. :)

Thanks for you work, I can remove Intl polyfill !

[JoshTheDerf]

Yeah, you'll need to set one of the available "renderAfter..." options before it will render anything. Otherwise it just dumps the HTML to a file before the JS executes.

[stereobooster]

 await page.goto(pageUrl, { waitUntil: "networkidle" });

will solve all problems

(or networkidle0/networkidle2 in case of puppeteer 0.13+)

[JoshTheDerf]

@stereobooster Ah, thanks for the tip! I'll have to take a look sometime.

[stereobooster]

This is just a beginning of a journey:

• you also need to make sure state of the form elements saved <input type="radio"> checked state not saved stereobooster/react-snap#84
• CSS-in-JS solutions work issue with CSSStyleSheet.insertRule() stereobooster/react-snap#76
• remove blob: URLs from HTML, because they don't make sense in generated HTML
• make sure to use page.content() to get DOCTYPE Preserve DOCTYPE stereobooster/react-snap#32

[JoshTheDerf]

@stereobooster Duly noted. Your project looks great, by the way. I'm not finding time to work on this yet, so it might be a while before I have anything useful over here.

[JoshTheDerf]

@stereobooster It would appear that networkidle is not the target we want here. Otherwise, if unnecessary external resources are being fetched repeatedly per-page, the render time would be significantly longer than needed. However, I suppose we could default to networkidle0 if no other renderAfter options are set.

[stereobooster]

Otherwise, if unnecessary external resources are being fetched repeatedly per-page

    await page.setRequestInterception(true)
    page.on('request', request => {
      if (/* third party request*/) {
        // don't need to download those
        request.abort()
      }
    })

[stereobooster]

As of "Async snapshots" (term taken from geelen/react-snapshot#30). I believe there are two good approaches here:

networkidle

This is what react-snap uses. This technique is proved to be powerful enough to work in many cases without additional configuration. This is built-in puppeteer functionality - consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.

renderComplete

This idea was taken from Rendertron. The first call to renderComplete will disable default mechanism e.g. networkidle and prerenderer will start to wait for the second signal. It will be up to the user to implement when to call this function. Related: react#1739, react-transmit

[JoshTheDerf]

Hmm, interesting.