More control over prerenderer: Build.scrape()

[harrysolovay]

I'm submitting a:
[x] feature request
[x] bug report

Current behavior:
The prerenderer scrapes immediately after the first render. This is problematic if you have a component adjust to another component, as it is not possible to determine a component's sibling's computed properties before its parent's first render (see #1933). This is especially problematic when working with CSS-in-JS, as most CSS-in-JS libraries wait for the first render, as they must have access to the DOM to inject stylesheets. Given that awaiting the first render is unavoidable for CSS-in-JS libs, any prerendered site using CSS-in-JS will look different than its development counterpart (because scraping happens before styles are injected). Below is a proposed solution to this problem (would close #1933 along with #1925):

Proposal:
Allow users to mark the point at which a given page is ready to be scraped during prerenders. Here's a flimsy example of how this might look:

import { Build } from "@stencil/core";

// ...
componentDidLoad() {
  setTimeout(() => {
    Build.scrape();
  }, 1000);
}
// ...

Part of me thinks this would be a valid replacement for the --prerender flag, which is too general. It would be fantastic if users could have more fine-tuned control over the prerendering process. On another note, Build.scrape could take in additional arguments relating to hydration behavior (lower priority). Hopefully this aligns with architectural constraints, as I believe it's critical to the consistency of Stencil's prerendering. Not to mention, I'm in great need of this for a current project ;)

[manucorporat]

This is tricky problem no matter what, one approach is to skip some code in server sidee by using Build.isBrowser build conditional. Might require small adjustments in some components.