@docusaurus/theme-classic 2.0.0-beta.1 → 2.0.0-beta.10

package/lib/theme/hooks/useTabGroupChoice.js

@@ -25,14 +25,12 @@ const useTabGroupChoice = () => {
   (0, _react.useEffect)(() => {
     try {
       const localStorageChoices = {};
-
-      for (const storageKey of (0, _themeCommon.listStorageKeys)()) {
+      (0, _themeCommon.listStorageKeys)().forEach(storageKey => {
         if (storageKey.startsWith(TAB_CHOICE_PREFIX)) {
           const groupId = storageKey.substring(TAB_CHOICE_PREFIX.length);
           localStorageChoices[groupId] = (0, _themeCommon.createStorageSlot)(storageKey).get();
         }
-      }
-
+      });
       setChoices(localStorageChoices);
     } catch (err) {
       console.error(err);

package/lib/theme/hooks/useTheme.js

@@ -26,9 +26,7 @@ const themes = {
 };
 
 // Ensure to always return a valid theme even if input is invalid
-const coerceToTheme = theme => {
-  return theme === themes.dark ? themes.dark : themes.light;
-};
+const coerceToTheme = theme => theme === themes.dark ? themes.dark : themes.light;
 
 const getInitialTheme = defaultMode => {
   if (!_ExecutionEnvironment.default.canUseDOM) {
@@ -76,7 +74,7 @@ const useTheme = () => {
     } catch (err) {
       console.error(err);
     }
-  }, [setTheme]);
+  }, [disableSwitch, setTheme]);
   (0, _react.useEffect)(() => {
     if (disableSwitch && !respectPrefersColorScheme) {
       return;
@@ -87,7 +85,7 @@ const useTheme = () => {
     }) => {
       setTheme(matches ? themes.dark : themes.light);
     });
-  }, []);
+  }, [disableSwitch, respectPrefersColorScheme]);
   return {
     isDarkTheme: theme === themes.dark,
     setLightTheme,

package/lib/theme/hooks/useWindowSize.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.windowSizes = void 0;
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -17,36 +17,49 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const desktopThresholdWidth = 996;
 const windowSizes = {
   desktop: 'desktop',
-  mobile: 'mobile'
+  mobile: 'mobile',
+  // This "ssr" value is very important to handle hydration FOUC / layout shifts
+  // You have to handle server-rendering explicitly on the call-site
+  // On the server, you may need to render BOTH the mobile/desktop elements (and hide one of them with mediaquery)
+  // We don't return "undefined" on purpose, to make it more explicit
+  ssr: 'ssr'
 };
-exports.windowSizes = windowSizes;
+const DesktopThresholdWidth = 996;
 
-function useWindowSize() {
-  const isClient = _ExecutionEnvironment.default.canUseDOM;
+function getWindowSize() {
+  if (!_ExecutionEnvironment.default.canUseDOM) {
+    return windowSizes.ssr;
+  }
 
-  function getSize() {
-    if (!isClient) {
-      return undefined;
-    }
+  return window.innerWidth > DesktopThresholdWidth ? windowSizes.desktop : windowSizes.mobile;
+} // Simulate the SSR window size in dev, so that potential hydration FOUC/layout shift problems can be seen in dev too!
 
-    return window.innerWidth > desktopThresholdWidth ? windowSizes.desktop : windowSizes.mobile;
-  }
 
-  const [windowSize, setWindowSize] = (0, _react.useState)(getSize);
-  (0, _react.useEffect)(() => {
-    if (!isClient) {
-      return undefined;
+const DevSimulateSSR = process.env.NODE_ENV === 'development' && true; // This hook returns an enum value on purpose!
+// We don't want it to return the actual width value, for resize perf reasons
+// We only want to re-render once a breakpoint is crossed
+
+function useWindowSize() {
+  const [windowSize, setWindowSize] = (0, _react.useState)(() => {
+    if (DevSimulateSSR) {
+      return 'ssr';
     }
 
-    function handleResize() {
-      setWindowSize(getSize());
+    return getWindowSize();
+  });
+  (0, _react.useEffect)(() => {
+    function updateWindowSize() {
+      setWindowSize(getWindowSize());
     }
 
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    const timeout = DevSimulateSSR ? window.setTimeout(updateWindowSize, 1000) : undefined;
+    window.addEventListener('resize', updateWindowSize);
+    return () => {
+      window.removeEventListener('resize', updateWindowSize);
+      clearTimeout(timeout);
+    };
   }, []);
   return windowSize;
 }

package/lib/theme/prism-include-languages.js

@@ -21,11 +21,12 @@ const prismIncludeLanguages = PrismObject => {
   if (_ExecutionEnvironment.default.canUseDOM) {
     const {
       themeConfig: {
-        prism: {
-          additionalLanguages = []
-        } = {}
+        prism = {}
       }
     } = _docusaurus.default;
+    const {
+      additionalLanguages = []
+    } = prism;
     window.Prism = PrismObject;
     additionalLanguages.forEach(lang => {
       require(`prismjs/components/prism-${lang}`); // eslint-disable-line