Make FastBoot compatible

[chadian]

Support FastBoot so that this addon:

• Doesn't break when rendering in a fastboot
• Allows some fastboot fallback so users can choose what should be rendered

[lolmaus]

Hey @chadian, do you have suggestions how this could be theoretically possible, given that FastBoot render does not know viewport dimensions?

I wish browsers sent viewport size in HTTP headers, but that's not the case.

The only idea I have is to have inline JS in the HTML that would execute eagerly and redirect to the same page but with extra query params indicating viewport size. But this may cause a delay defeating the purpose.

[chadian]

Hey @lolmaus, as a first take I was thinking that a reserved fastboot breakpoint key being included automatically.

So for css it would look like:

.my-component[fill-up-fastboot] {
  font-size: 50px;
}

and then in hbs you would also have access like:

<FillUp
  @breakpoints={{hash
    small=(fill-up-between 0 800)
    medium=(fill-up-between 800 1200)
    large=(fill-up-gte 1200)
  }}
as |F|>
  {{#if F.breakpoints.fastboot}}
    👋Here's some basic useful information, until I can re-render.
  {{/if}}
</FillUp>

This way you're opting in for what gets rendered in fastboot environment with some minimally useful information or a loading spinner.

I'm curious about your idea though. If you did know the global viewport dimensions how would you know the the size of the local components? Is there a use-case where supplementary details wouldn't suffice until the app has had a chance to render?