feat(v2): useThemeContext

facebook · Dec 21, 2019 · f708ed8 · f708ed8
1 parent 69cbf5c
commit f708ed8
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 66 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -12,8 +12,8 @@ import defaultTheme from 'prism-react-renderer/themes/palenight';
 import Clipboard from 'clipboard';
 import rangeParser from 'parse-numeric-range';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useTheme from '@theme/hooks/useTheme';
-import useEventBus from '@theme/hooks/useEventBus';
+import useThemeContext from '@theme/hooks/useThemeContext';
+
 import styles from './styles.module.css';
 
 const highlightLinesRangeRegex = /{([\d,-]+)}/;
@@ -28,25 +28,15 @@ export default ({children, className: languageClassName, metastring}) => {
   const target = useRef(null);
   const button = useRef(null);
   let highlightLines = [];
-  const [theme] = useTheme();
-  const lightThemePrism = prism.theme || defaultTheme;
-  const [prismTheme, setPrismTheme] = useState(lightThemePrism);
-  const changePrismTheme = newTheme =>
-    prism.darkTheme && newTheme === 'dark'
-      ? setPrismTheme(prism.darkTheme)
-      : setPrismTheme(lightThemePrism);
+  const {theme} = useThemeContext();
+  const prismTheme =
+    theme === 'dark' ? prism.darkTheme : prism.theme || defaultTheme;
 
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
     highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
   }
 
-  useEventBus('docusaurus-change-theme', ({newTheme}) =>
-    changePrismTheme(newTheme),
-  );
-
-  useEffect(() => changePrismTheme(theme), [theme]);
-
   useEffect(() => {
     let clipboard;
 

diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.js b/packages/docusaurus-theme-classic/src/theme/Layout/index.js
@@ -9,6 +9,8 @@ import React from 'react';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import ThemeProvider from '@theme/ThemeProvider';
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 
@@ -37,8 +39,9 @@ function Layout(props) {
   const metaImage = image || defaultImage;
   const metaImageUrl = siteUrl + useBaseUrl(metaImage);
   const faviconUrl = useBaseUrl(favicon);
+
   return (
-    <>
+    <ThemeProvider>
       <Head>
         {/* TODO: Do not assume that it is in english language */}
         <html lang="en" />
@@ -66,7 +69,7 @@ function Layout(props) {
       <Navbar />
       <div className="main-wrapper">{children}</div>
       {!noFooter && <Footer />}
-    </>
+    </ThemeProvider>
   );
 }
 

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -15,9 +15,8 @@ import Toggle from '@theme/Toggle';
 
 import classnames from 'classnames';
 
-import useTheme from '@theme/hooks/useTheme';
+import useThemeContext from '@theme/hooks/useThemeContext';
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
-import {dispatch} from '@theme/hooks/useEventBus';
 
 import styles from './styles.module.css';
 
@@ -48,10 +47,11 @@ function Navbar() {
   const {baseUrl, themeConfig = {}} = siteConfig;
   const {navbar = {}, disableDarkMode = false} = themeConfig;
   const {title, logo = {}, links = [], hideOnScroll = false} = navbar;
+
   const [sidebarShown, setSidebarShown] = useState(false);
   const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
-  const [theme, setTheme] = useTheme();
 
+  const {theme, setTheme} = useThemeContext();
   const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
 
   const showSidebar = useCallback(() => {
@@ -67,7 +67,6 @@ function Navbar() {
     e => {
       const newTheme = e.target.checked ? 'dark' : '';
       setTheme(newTheme);
-      dispatch('docusaurus-change-theme', {newTheme});
     },
     [setTheme],
   );

diff --git a/packages/docusaurus-theme-classic/src/theme/ThemeContext.js b/packages/docusaurus-theme-classic/src/theme/ThemeContext.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+const ThemeContext = React.createContext({
+  theme: null,
+  setTheme: () => {},
+});
+
+export default ThemeContext;
diff --git a/packages/docusaurus-theme-classic/src/theme/ThemeProvider/index.js b/packages/docusaurus-theme-classic/src/theme/ThemeProvider/index.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import useTheme from '@theme/hooks/useTheme';
+import ThemeContext from '@theme/ThemeContext';
+
+function ThemeProvider(props) {
+  const [theme, setTheme] = useTheme();
+
+  return (
+    <ThemeContext.Provider value={{theme, setTheme}}>
+      {props.children}
+    </ThemeContext.Provider>
+  );
+}
+
+export default ThemeProvider;
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useEventBus.js b/packages/docusaurus-theme-classic/src/theme/hooks/useEventBus.js
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js b/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
@@ -4,7 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import * as React from 'react';
+
+import React from 'react';
 
 const useTheme = () => {
   const [theme, setTheme] = React.useState(

diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useThemeContext.js b/packages/docusaurus-theme-classic/src/theme/hooks/useThemeContext.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useContext} from 'react';
+
+import ThemeContext from '@theme/ThemeContext';
+
+function useThemeContext() {
+  return useContext(ThemeContext);
+}
+
+export default useThemeContext;
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -12,9 +12,9 @@ import defaultTheme from 'prism-react-renderer/themes/palenight';
 import Clipboard from 'clipboard';
 import rangeParser from 'parse-numeric-range';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useTheme from '@theme/hooks/useTheme';
-import useEventBus from '@theme/hooks/useEventBus';
+import useThemeContext from '@theme/hooks/useThemeContext';
 import Playground from '@theme/Playground';
+
 import styles from './styles.module.css';
 
 const highlightLinesRangeRegex = /{([\d,-]+)}/;
@@ -35,25 +35,15 @@ export default ({
   const target = useRef(null);
   const button = useRef(null);
   let highlightLines = [];
-  const [theme] = useTheme();
-  const lightThemePrism = prism.theme || defaultTheme;
-  const [prismTheme, setPrismTheme] = useState(lightThemePrism);
-  const changePrismTheme = newTheme =>
-    prism.darkTheme && newTheme === 'dark'
-      ? setPrismTheme(prism.darkTheme)
-      : setPrismTheme(lightThemePrism);
+  const {theme} = useThemeContext();
+  const prismTheme =
+    theme === 'dark' ? prism.darkTheme : prism.theme || defaultTheme;
 
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
     highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
   }
 
-  useEventBus('docusaurus-change-theme', ({newTheme}) =>
-    changePrismTheme(newTheme),
-  );
-
-  useEffect(() => changePrismTheme(theme), [theme]);
-
   useEffect(() => {
     let clipboard;