@docusaurus/theme-common 2.0.0-beta.15 → 2.0.0-beta.16

package/src/utils/useLocationChange.ts

@@ -7,7 +7,7 @@
 
 import {useEffect} from 'react';
 import {useLocation} from '@docusaurus/router';
-import type {Location} from '@docusaurus/history';
+import type {Location} from 'history';
 import {usePrevious} from './usePrevious';
 import {useDynamicCallback} from './reactUtils';
 
@@ -25,6 +25,10 @@ export function useLocationChange(onLocationChange: OnLocationChange): void {
   const onLocationChangeDynamic = useDynamicCallback(onLocationChange);
 
   useEffect(() => {
+    if (!previousLocation) {
+      return;
+    }
+
     if (location !== previousLocation) {
       onLocationChangeDynamic({
         location,

package/src/utils/usePluralForm.ts

@@ -49,27 +49,33 @@ function createLocalePluralForms(locale: string): LocalePluralForms {
   };
 }
 
-// Poor man's PluralSelector implementation, using an english fallback.
-// We want a lightweight, future-proof and good-enough solution.
-// We don't want a perfect and heavy solution.
-//
-// Docusaurus classic theme has only 2 deeply nested labels requiring complex plural rules
-// We don't want to use Intl + PluralRules polyfills + full ICU syntax (react-intl) just for that.
-//
-// Notes:
-// - 2021: 92+% Browsers support Intl.PluralRules, and support will increase in the future
-// - NodeJS >= 13 has full ICU support by default
-// - In case of "mismatch" between SSR and Browser ICU support, React keeps working!
+/**
+ * Poor man's PluralSelector implementation, using an english fallback. We want
+ * a lightweight, future-proof and good-enough solution. We don't want a perfect
+ * and heavy solution.
+ *
+ * Docusaurus classic theme has only 2 deeply nested labels requiring complex
+ * plural rules. We don't want to use Intl + PluralRules polyfills + full ICU
+ * syntax (react-intl) just for that.
+ *
+ * Notes:
+ * - 2021: 92+% Browsers support Intl.PluralRules, and support will increase in
+ * the future
+ * - NodeJS >= 13 has full ICU support by default
+ * - In case of "mismatch" between SSR and Browser ICU support, React keeps
+ * working!
+ */
 function useLocalePluralForms(): LocalePluralForms {
   const {
     i18n: {currentLocale},
   } = useDocusaurusContext();
   return useMemo(() => {
-    // @ts-expect-error checking Intl.PluralRules in case browser doesn't have it (e.g Safari 12-)
+    // @ts-expect-error checking Intl.PluralRules in case browser doesn't
+    // have it (e.g Safari 12-)
     if (Intl.PluralRules) {
       try {
         return createLocalePluralForms(currentLocale);
-      } catch (e) {
+      } catch {
         console.error(`Failed to use Intl.PluralRules for locale "${currentLocale}".
 Docusaurus will fallback to a default/fallback (English) Intl.PluralRules implementation.
 `);
@@ -94,17 +100,17 @@ function selectPluralMessage(
 
   if (parts.length === 1) {
     return parts[0];
-  } else {
-    if (parts.length > localePluralForms.pluralForms.length) {
-      console.error(
-        `For locale=${localePluralForms.locale}, a maximum of ${localePluralForms.pluralForms.length} plural forms are expected (${localePluralForms.pluralForms}), but the message contains ${parts.length} plural forms: ${pluralMessages} `,
-      );
-    }
-    const pluralForm = localePluralForms.select(count);
-    const pluralFormIndex = localePluralForms.pluralForms.indexOf(pluralForm);
-    // In case of not enough plural form messages, we take the last one (other) instead of returning undefined
-    return parts[Math.min(pluralFormIndex, parts.length - 1)];
   }
+  if (parts.length > localePluralForms.pluralForms.length) {
+    console.error(
+      `For locale=${localePluralForms.locale}, a maximum of ${localePluralForms.pluralForms.length} plural forms are expected (${localePluralForms.pluralForms}), but the message contains ${parts.length} plural forms: ${pluralMessages} `,
+    );
+  }
+  const pluralForm = localePluralForms.select(count);
+  const pluralFormIndex = localePluralForms.pluralForms.indexOf(pluralForm);
+  // In case of not enough plural form messages, we take the last one (other)
+  // instead of returning undefined
+  return parts[Math.min(pluralFormIndex, parts.length - 1)];
 }
 
 export function usePluralForm(): {

package/src/utils/useTOCHighlight.ts

@@ -13,7 +13,8 @@ TODO make the hardcoded theme-classic classnames configurable
 (or add them to ThemeClassNames?)
  */
 
-// If the anchor has no height and is just a "marker" in the dom; we'll use the parent (normally the link text) rect boundaries instead
+// If the anchor has no height and is just a "marker" in the dom; we'll use the
+// parent (normally the link text) rect boundaries instead
 function getVisibleBoundingClientRect(element: HTMLElement): DOMRect {
   const rect = element.getBoundingClientRect();
   const hasNoHeight = rect.top === rect.bottom;
@@ -23,8 +24,10 @@ function getVisibleBoundingClientRect(element: HTMLElement): DOMRect {
   return rect;
 }
 
-// Considering we divide viewport into 2 zones of each 50vh
-// This returns true if an element is in the first zone (ie, appear in viewport, near the top)
+/**
+ * Considering we divide viewport into 2 zones of each 50vh, this returns true
+ * if an element is in the first zone (ie, appear in viewport, near the top)
+ */
 function isInViewportTopHalf(boundingRect: DOMRect) {
   return boundingRect.top > 0 && boundingRect.bottom < window.innerHeight / 2;
 }
@@ -54,9 +57,10 @@ function getActiveAnchor(
     anchorTopOffset: number;
   },
 ): Element | null {
-  // Naming is hard
-  // The "nextVisibleAnchor" is the first anchor that appear under the viewport top boundary
-  // Note: it does not mean this anchor is visible yet, but if user continues scrolling down, it will be the first to become visible
+  // Naming is hard: The "nextVisibleAnchor" is the first anchor that appear
+  // under the viewport top boundary. It does not mean this anchor is visible
+  // yet, but if user continues scrolling down, it will be the first to become
+  // visible
   const nextVisibleAnchor = anchors.find((anchor) => {
     const boundingRect = getVisibleBoundingClientRect(anchor);
     return boundingRect.top >= anchorTopOffset;
@@ -64,23 +68,22 @@ function getActiveAnchor(
 
   if (nextVisibleAnchor) {
     const boundingRect = getVisibleBoundingClientRect(nextVisibleAnchor);
-    // If anchor is in the top half of the viewport: it is the one we consider "active"
-    // (unless it's too close to the top and and soon to be scrolled outside viewport)
+    // If anchor is in the top half of the viewport: it is the one we consider
+    // "active" (unless it's too close to the top and and soon to be scrolled
+    // outside viewport)
     if (isInViewportTopHalf(boundingRect)) {
       return nextVisibleAnchor;
     }
-    // If anchor is in the bottom half of the viewport, or under the viewport, we consider the active anchor is the previous one
-    // This is because the main text appearing in the user screen mostly belong to the previous anchor
-    else {
-      // Returns null for the first anchor, see https://github.com/facebook/docusaurus/issues/5318
-      return anchors[anchors.indexOf(nextVisibleAnchor) - 1] ?? null;
-    }
+    // If anchor is in the bottom half of the viewport, or under the viewport,
+    // we consider the active anchor is the previous one. This is because the
+    // main text appearing in the user screen mostly belong to the previous
+    // anchor. Returns null for the first anchor, see
+    // https://github.com/facebook/docusaurus/issues/5318
+    return anchors[anchors.indexOf(nextVisibleAnchor) - 1] ?? null;
   }
   // no anchor under viewport top? (ie we are at the bottom of the page)
   // => highlight the last anchor found
-  else {
-    return anchors[anchors.length - 1];
-  }
+  return anchors[anchors.length - 1];
 }
 
 function getLinkAnchorValue(link: HTMLAnchorElement): string {
@@ -119,7 +122,9 @@ export type TOCHighlightConfig = {
   maxHeadingLevel: number;
 };
 
-function useTOCHighlight(config: TOCHighlightConfig | undefined): void {
+export default function useTOCHighlight(
+  config: TOCHighlightConfig | undefined,
+): void {
   const lastActiveLinkRef = useRef<HTMLAnchorElement | undefined>(undefined);
 
   const anchorTopOffsetRef = useAnchorTopOffsetRef();
@@ -144,7 +149,7 @@ function useTOCHighlight(config: TOCHighlightConfig | undefined): void {
         }
         link.classList.add(linkActiveClassName);
         lastActiveLinkRef.current = link;
-        link.scrollIntoView({block: 'nearest'});
+        // link.scrollIntoView({block: 'nearest'});
       } else {
         link.classList.remove(linkActiveClassName);
       }
@@ -176,5 +181,3 @@ function useTOCHighlight(config: TOCHighlightConfig | undefined): void {
     };
   }, [config, anchorTopOffsetRef]);
 }
-
-export default useTOCHighlight;