-
-
Notifications
You must be signed in to change notification settings - Fork 8.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor(v2): toggle data-theme with vanilla js instead of react helmet #2127
Conversation
<> | ||
<Head> | ||
{/* TODO: Do not assume that it is in english language */} | ||
<html lang="en" data-theme={theme} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Deploy preview for docusaurus-2 ready! Built with commit eb937aa |
Deploy preview for docusaurus-preview ready! Built with commit eb937aa |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome, good work!
@@ -12,7 +12,7 @@ const path = require('path'); | |||
const storageKey = 'theme'; | |||
const noFlash = `(function() { | |||
function setDataThemeAttribute(theme) { | |||
document.querySelector('html').setAttribute('data-theme', theme); | |||
document.documentElement.setAttribute('data-theme', theme); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For sure this is faster, it's direct access. But fewer people have heard about this lol. It's fine since it's internal.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i think it is fine because relevant people can simply google and learn what this is
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes I agree it's fine :)
@@ -14,7 +14,7 @@ function Link(props) { | |||
const {to, href} = props; | |||
const targetLink = to || href; | |||
const isInternal = internalRegex.test(targetLink); | |||
let preloaded = false; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whoa this is such a bad bug, wonder how we didn't catch it earlier :|
Motivation
Refactoring on
Navbar
Refactoring on
Link
useRef
so that boolean persistuse
document.documentElement
instead ofqueryselector('html
). Its faster according to benchmark i run https://jsperf.com/documentelevsquery/1Supported in all browsers https://developer.mozilla.org/en-US/docs/Web/API/document/documentElement
Have you read the Contributing Guidelines on pull requests?
yes
Test Plan
There shouldn't be difference in expected behavior ?
Toggling fine