Skip to content
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

Merged
merged 2 commits into from
Dec 16, 2019

Conversation

endiliey
Copy link
Contributor

@endiliey endiliey commented Dec 15, 2019

Motivation

Refactoring on Navbar

  • Remove docusaurus/Head from it.
  • Toggle data-theme is done in the hook instead

Refactoring on Link

  • Use useRef so that boolean persist

use document.documentElement instead of queryselector('html). Its faster according to benchmark i run https://jsperf.com/documentelevsquery/1

document element

Supported 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
no diff

@endiliey endiliey added the pr: polish This PR adds a very minor behavior improvement that users will enjoy. label Dec 15, 2019
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Dec 15, 2019
<>
<Head>
{/* TODO: Do not assume that it is in english language */}
<html lang="en" data-theme={theme} />
Copy link
Contributor Author

@endiliey endiliey Dec 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If previously
image

Now
image

@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Dec 15, 2019

Deploy preview for docusaurus-2 ready!

Built with commit eb937aa

https://deploy-preview-2127--docusaurus-2.netlify.com

@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Dec 15, 2019

Deploy preview for docusaurus-preview ready!

Built with commit eb937aa

https://deploy-preview-2127--docusaurus-preview.netlify.com

Copy link
Contributor

@yangshun yangshun left a 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);
Copy link
Contributor

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.

Copy link
Contributor

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

Copy link
Contributor

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;
Copy link
Contributor

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 :|

@yangshun yangshun merged commit 33622c5 into master Dec 16, 2019
@yangshun yangshun deleted the endi/refactor branch December 16, 2019 01:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: polish This PR adds a very minor behavior improvement that users will enjoy.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants