Adds support for synchronously updated tags (Closes #291)

[jaysoo]

This PR is to address the issue with FOUC as outlined in #291.

The code changes involve splitting the updates into two groups: deferred (default), and sync. The sync behaviour is opt-in using the new defer={false} prop on Helmet.

<div>
  <Helmet defer={false}>
    {/* These updates will be sync during the render cycle.
      * By including <style> tags here, you can avoid FOUC
      * of the rendering element as outlined in #291. 
      */}
  </Helmet>
  <Helmet>
    {/* These updates will be async during the render cycle. */}
  </Helmet>
</div>

Two new tests have been added to both declarative and original API. They both test that updates can happen before requestIdleCallback and during.

[CLAassistant]

All committers have signed the CLA.

[codecov]

Codecov Report

Merging #297 into master will increase coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #297      +/-   ##
==========================================
+ Coverage   98.94%   98.96%   +0.02%     
==========================================
  Files           3        3              
  Lines         285      291       +6     
==========================================
+ Hits          282      288       +6     
  Misses          3        3

Impacted Files	Coverage Δ
src/HelmetConstants.js	100% <ø> (ø)	⬆️
src/Helmet.js	100% <ø> (ø)	⬆️
src/HelmetUtils.js	98.65% <100%> (+0.03%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c947ede...b22e2f4. Read the comment docs.

[doctyper]

defer is (I believe) specific to the <script> tag. So this solution wouldn't work for style or any other tag. Perhaps it makes more sense to bubble up the attribute to the <Helmet> wrapper? That would give devs the flexibility to sync-render the entire Helmet instance, rather than the individual tag.

<Helmet defer={false}>

[doctyper]

Option 2 would be to keep this syntax, but strip out invalid defer attributes before we write to the DOM.

[jaysoo]

Good point. Maybe it should just go to <Helmet>, then the user can decide whether to separate tags into the defer <Helmet> or not. Would make the API easier to support as well.

I'll redo the PR today.

[jaysoo]

@doctyper Update the PR so that defer is on Helmet, not individual tags. Tags can be grouped using:

<div>
  <Helmet defer={false}>
    {/* sync tags... */}
  </Helmet>
  <Helmet>
    {/* async tags... */}
  </Helmet>
</div>

[cwelch5]

Great PR, thanks!

[arestov]

Hey! Do you have any plans to merge it?

[arestov]

@doctyper @cwelch5 Do you have any plans to merge it?

[arestov]

@cwelch5 could you please publish new npm version with merged changes? 🙏

[Shangyunliang]

Great! but when i use link tag. it dose work. css will be load at first. but not work so well.
do you have any suggestions?

[skvale]

shouldn't this be executes synchronously when defer={false} instead?