Adds support for synchronously updated tags (Closes #291) #297
Conversation
Codecov Report
@@ 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
Continue to review full report at Codecov.
|
d0943b0
to
0f1cbdb
it("executes synchronously when defer={true} and async otherwise", done => { | ||
ReactDOM.render( | ||
<Helmet> | ||
<script defer={false}> |
doctyper
Jun 22, 2017
Collaborator
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}>
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
Jun 22, 2017
Collaborator
Option 2 would be to keep this syntax, but strip out invalid defer
attributes before we write to the DOM.
Option 2 would be to keep this syntax, but strip out invalid defer
attributes before we write to the DOM.
jaysoo
Jun 22, 2017
•
Author
Contributor
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.
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.
… sync or deferred. Default is defer={true}. Closes #291
@doctyper Update the PR so that <div>
<Helmet defer={false}>
{/* sync tags... */}
</Helmet>
<Helmet>
{/* async tags... */}
</Helmet>
</div> |
Great PR, thanks! |
Hey! Do you have any plans to merge it? |
@cwelch5 could you please publish new npm version with merged changes? |
delete window.__spy__; | ||
}); | ||
|
||
it("executes synchronously when defer={true} and async otherwise", done => { |
skvale
Apr 1, 2020
shouldn't this be executes synchronously when defer={false}
instead?
shouldn't this be executes synchronously when defer={false}
instead?
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 onHelmet
.Two new tests have been added to both declarative and original API. They both test that updates can happen before
requestIdleCallback
and during.