faster HiddenFromSSR implementation

This commit is contained in:
Nolan Lawson 2018-03-18 18:37:19 -07:00
parent 536fa97060
commit add39a7334
3 changed files with 67 additions and 57 deletions

13
package-lock.json generated
View file

@ -8131,20 +8131,15 @@
}
},
"ajv": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.2.1.tgz",
"integrity": "sha1-KKarxJOiq+D7TIUHrK7bQ/pVBnE=",
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.3.0.tgz",
"integrity": "sha1-FlCkERTvAFdMrBC4Ay2PTBSBLac=",
"requires": {
"fast-deep-equal": "1.0.0",
"fast-json-stable-stringify": "2.0.0",
"json-schema-traverse": "0.3.1"
}
},
"ajv-keywords": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.1.0.tgz",
"integrity": "sha1-rCsnk5xUPpXSwG5/f1wnvkqlQ74="
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@ -8341,7 +8336,7 @@
"requires": {
"acorn": "5.3.0",
"acorn-dynamic-import": "2.0.2",
"ajv": "6.2.1",
"ajv": "6.3.0",
"ajv-keywords": "3.1.0",
"async": "2.6.0",
"enhanced-resolve": "3.4.1",

View file

@ -1,13 +1,22 @@
<div class="{{hidden ? 'hidden' : ''}}">
<!-- toggled in 2xx.html based on whether the user is logged in or not -->
<div class="hidden-from-ssr {{shown ? 'shown' : ''}}">
<slot></slot>
</div>
<style>
.hidden-from-ssr {
opacity: 0;
}
.hidden-from-ssr.shown {
opacity: 1;
}
</style>
<script>
export default {
data: () => ({
hidden: true
}),
oncreate () {
this.set({hidden: !process.browser})
}
this.set({ shown: true })
},
data: () => ({
shown: false
})
}
</script>

View file

@ -21,8 +21,8 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
<noscript>
<style>
.hidden {
opacity: 1;
.hidden-from-ssr {
opacity: 1 !important;
}
</style>
</noscript>
@ -63,6 +63,12 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
}
}
}
if (!localStorage.store_currentInstance) {
// if not logged in, show all these "hidden-from-ssr" elements
let style = document.createElement('style')
style.textContent = '.hidden-from-ssr { opacity: 1 !important; }'
document.head.appendChild(style)
}
</script>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<!-- auto-generated w/ build-svg.js -->