refactor(v2): toggle data-theme with vanilla js instead of react helm…

…et (#2127) * refactor(v2): toggle data-theme with vanilla js instead of react helmet * use document documentElement
facebook · Dec 16, 2019 · 33622c5 · 33622c5
1 parent ee00ecf
commit 33622c5
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 116 deletions.
diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js
@@ -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);
   }
 
   function getPreferredTheme() {

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -7,7 +7,6 @@
 
 import React, {useCallback, useState} from 'react';
 import Link from '@docusaurus/Link';
-import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
@@ -68,122 +67,116 @@ function Navbar() {
 
   const logoUrl = useBaseUrl(logo.src);
   return (
-    <>
-      <Head>
-        {/* TODO: Do not assume that it is in english language */}
-        <html lang="en" data-theme={theme} />
-      </Head>
-      <nav
-        ref={navbarRef}
-        className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
-          'navbar-sidebar--show': sidebarShown,
-          [styles.navbarHideable]: hideOnScroll,
-          [styles.navbarHidden]: !isNavbarVisible,
-        })}>
-        <div className="navbar__inner">
-          <div className="navbar__items">
-            <div
-              aria-label="Navigation bar toggle"
-              className="navbar__toggle"
-              role="button"
-              tabIndex={0}
-              onClick={showSidebar}
-              onKeyDown={showSidebar}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="30"
-                height="30"
-                viewBox="0 0 30 30"
-                role="img"
-                focusable="false">
-                <title>Menu</title>
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeMiterlimit="10"
-                  strokeWidth="2"
-                  d="M4 7h22M4 15h22M4 23h22"
-                />
-              </svg>
-            </div>
-            <Link className="navbar__brand" to={baseUrl}>
-              {logo != null && (
-                <img className="navbar__logo" src={logoUrl} alt={logo.alt} />
-              )}
-              {title != null && (
-                <strong
-                  className={isSearchBarExpanded ? styles.hideLogoText : ''}>
-                  {title}
-                </strong>
-              )}
-            </Link>
-            {links
-              .filter(linkItem => linkItem.position !== 'right')
-              .map((linkItem, i) => (
-                <NavLink {...linkItem} key={i} />
-              ))}
-          </div>
-          <div className="navbar__items navbar__items--right">
-            {links
-              .filter(linkItem => linkItem.position === 'right')
-              .map((linkItem, i) => (
-                <NavLink {...linkItem} key={i} />
-              ))}
-            {!disableDarkMode && (
-              <Toggle
-                className={styles.displayOnlyInLargeViewport}
-                aria-label="Dark mode toggle"
-                checked={theme === 'dark'}
-                onChange={onToggleChange}
+    <nav
+      ref={navbarRef}
+      className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
+        'navbar-sidebar--show': sidebarShown,
+        [styles.navbarHideable]: hideOnScroll,
+        [styles.navbarHidden]: !isNavbarVisible,
+      })}>
+      <div className="navbar__inner">
+        <div className="navbar__items">
+          <div
+            aria-label="Navigation bar toggle"
+            className="navbar__toggle"
+            role="button"
+            tabIndex={0}
+            onClick={showSidebar}
+            onKeyDown={showSidebar}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              role="img"
+              focusable="false">
+              <title>Menu</title>
+              <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeMiterlimit="10"
+                strokeWidth="2"
+                d="M4 7h22M4 15h22M4 23h22"
               />
+            </svg>
+          </div>
+          <Link className="navbar__brand" to={baseUrl}>
+            {logo != null && (
+              <img className="navbar__logo" src={logoUrl} alt={logo.alt} />
+            )}
+            {title != null && (
+              <strong
+                className={isSearchBarExpanded ? styles.hideLogoText : ''}>
+                {title}
+              </strong>
             )}
-            <SearchBar
-              handleSearchBarToggle={setIsSearchBarExpanded}
-              isSearchBarExpanded={isSearchBarExpanded}
+          </Link>
+          {links
+            .filter(linkItem => linkItem.position !== 'right')
+            .map((linkItem, i) => (
+              <NavLink {...linkItem} key={i} />
+            ))}
+        </div>
+        <div className="navbar__items navbar__items--right">
+          {links
+            .filter(linkItem => linkItem.position === 'right')
+            .map((linkItem, i) => (
+              <NavLink {...linkItem} key={i} />
+            ))}
+          {!disableDarkMode && (
+            <Toggle
+              className={styles.displayOnlyInLargeViewport}
+              aria-label="Dark mode toggle"
+              checked={theme === 'dark'}
+              onChange={onToggleChange}
             />
-          </div>
+          )}
+          <SearchBar
+            handleSearchBarToggle={setIsSearchBarExpanded}
+            isSearchBarExpanded={isSearchBarExpanded}
+          />
         </div>
-        <div
-          role="presentation"
-          className="navbar-sidebar__backdrop"
-          onClick={() => {
-            setSidebarShown(false);
-          }}
-        />
-        <div className="navbar-sidebar">
-          <div className="navbar-sidebar__brand">
-            <Link className="navbar__brand" onClick={hideSidebar} to={baseUrl}>
-              {logo != null && (
-                <img className="navbar__logo" src={logoUrl} alt={logo.alt} />
-              )}
-              {title != null && <strong>{title}</strong>}
-            </Link>
-            {!disableDarkMode && sidebarShown && (
-              <Toggle
-                aria-label="Dark mode toggle in sidebar"
-                checked={theme === 'dark'}
-                onChange={onToggleChange}
-              />
+      </div>
+      <div
+        role="presentation"
+        className="navbar-sidebar__backdrop"
+        onClick={() => {
+          setSidebarShown(false);
+        }}
+      />
+      <div className="navbar-sidebar">
+        <div className="navbar-sidebar__brand">
+          <Link className="navbar__brand" onClick={hideSidebar} to={baseUrl}>
+            {logo != null && (
+              <img className="navbar__logo" src={logoUrl} alt={logo.alt} />
             )}
-          </div>
-          <div className="navbar-sidebar__items">
-            <div className="menu">
-              <ul className="menu__list">
-                {links.map((linkItem, i) => (
-                  <li className="menu__list-item" key={i}>
-                    <NavLink
-                      className="menu__link"
-                      {...linkItem}
-                      onClick={hideSidebar}
-                    />
-                  </li>
-                ))}
-              </ul>
-            </div>
+            {title != null && <strong>{title}</strong>}
+          </Link>
+          {!disableDarkMode && sidebarShown && (
+            <Toggle
+              aria-label="Dark mode toggle in sidebar"
+              checked={theme === 'dark'}
+              onChange={onToggleChange}
+            />
+          )}
+        </div>
+        <div className="navbar-sidebar__items">
+          <div className="menu">
+            <ul className="menu__list">
+              {links.map((linkItem, i) => (
+                <li className="menu__list-item" key={i}>
+                  <NavLink
+                    className="menu__link"
+                    {...linkItem}
+                    onClick={hideSidebar}
+                  />
+                </li>
+              ))}
+            </ul>
           </div>
         </div>
-      </nav>
-    </>
+      </div>
+    </nav>
   );
 }
 

diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js b/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
@@ -9,9 +9,14 @@ import * as React from 'react';
 const useTheme = () => {
   const [theme, setTheme] = React.useState(
     typeof document !== 'undefined'
-      ? document.querySelector('html').getAttribute('data-theme')
+      ? document.documentElement.getAttribute('data-theme')
       : '',
   );
+
+  React.useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
   React.useEffect(() => {
     try {
       const localStorageTheme = localStorage.getItem('theme');

diff --git a/packages/docusaurus/src/client/exports/Link.js b/packages/docusaurus/src/client/exports/Link.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {NavLink} from 'react-router-dom';
 
 const internalRegex = /^\/(?!\/)/;
@@ -14,7 +14,7 @@ function Link(props) {
   const {to, href} = props;
   const targetLink = to || href;
   const isInternal = internalRegex.test(targetLink);
-  let preloaded = false;
+  const preloaded = useRef(false);
 
   const IOSupported =
     typeof window !== 'undefined' && 'IntersectionObserver' in window;
@@ -48,9 +48,9 @@ function Link(props) {
   };
 
   const onMouseEnter = () => {
-    if (!preloaded) {
+    if (!preloaded.current) {
       window.docusaurus.preload(targetLink);
-      preloaded = true;
+      preloaded.current = true;
     }
   };