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

package/src/utils/jsUtils.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// A replacement of lodash in client code
+
+/**
+ * Gets the duplicate values in an array.
+ * @param arr The array.
+ * @param comparator Compares two values and returns `true` if they are equal (duplicated).
+ * @returns Value of the elements `v` that have a preceding element `u` where `comparator(u, v) === true`. Values within the returned array are not guaranteed to be unique.
+ */
+export function duplicates<T>(
+  arr: readonly T[],
+  comparator: (a: T, b: T) => boolean = (a, b) => a === b,
+): T[] {
+  return arr.filter(
+    (v, vIndex) => arr.findIndex((u) => comparator(u, v)) !== vIndex,
+  );
+}
+
+/**
+ * Remove duplicate array items (similar to _.uniq)
+ * @param arr The array.
+ * @returns An array with duplicate elements removed by reference comparison.
+ */
+export function uniq<T>(arr: T[]): T[] {
+  // Note: had problems with [...new Set()]: https://github.com/facebook/docusaurus/issues/4972#issuecomment-863895061
+  return Array.from(new Set(arr));
+}

package/src/utils/mobileSecondaryMenu.tsx

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {
+  useState,
+  ReactNode,
+  useContext,
+  createContext,
+  useEffect,
+  ComponentType,
+  useMemo,
+} from 'react';
+
+/*
+The idea behind all this is that a specific component must be able to fill a placeholder in the generic layout
+The doc page should be able to fill the secondary menu of the main mobile navbar.
+This permits to reduce coupling between the main layout and the specific page.
+
+This kind of feature is often called portal/teleport/gateway... various unmaintained React libs exist
+Most up-to-date one: https://github.com/gregberge/react-teleporter
+Not sure any of those is safe regarding concurrent mode.
+ */
+
+type ExtraProps = {
+  toggleSidebar: () => void;
+};
+
+export type MobileSecondaryMenuComponent<Props> = ComponentType<
+  Props & ExtraProps
+>;
+
+type State = {
+  component: MobileSecondaryMenuComponent<unknown>;
+  props: unknown;
+} | null;
+
+function useContextValue() {
+  return useState<State>(null);
+}
+
+type ContextValue = ReturnType<typeof useContextValue>;
+
+const Context = createContext<ContextValue | null>(null);
+
+export function MobileSecondaryMenuProvider({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <Context.Provider value={useContextValue()}>{children}</Context.Provider>
+  );
+}
+
+function useMobileSecondaryMenuContext(): ContextValue {
+  const value = useContext(Context);
+  if (value === null) {
+    throw new Error(
+      'MobileSecondaryMenuProvider was not used correctly, context value is null',
+    );
+  }
+  return value;
+}
+
+export function useMobileSecondaryMenuRenderer(): (
+  extraProps: ExtraProps,
+) => ReactNode | undefined {
+  const [state] = useMobileSecondaryMenuContext();
+  if (state) {
+    const Comp = state.component;
+    return function render(extraProps) {
+      return <Comp {...state.props} {...extraProps} />;
+    };
+  }
+  return () => undefined;
+}
+
+function useShallowMemoizedObject<O extends Record<string, unknown>>(obj: O) {
+  return useMemo(
+    () => obj,
+    // Is this safe?
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...Object.keys(obj), ...Object.values(obj)],
+  );
+}
+
+// Fill the secondary menu placeholder with some real content
+export function MobileSecondaryMenuFiller<
+  Props extends Record<string, unknown>,
+>({
+  component,
+  props,
+}: {
+  component: MobileSecondaryMenuComponent<Props & ExtraProps>;
+  props: Props;
+}): JSX.Element | null {
+  const [, setState] = useMobileSecondaryMenuContext();
+
+  // To avoid useless context re-renders, props are memoized shallowly
+  const memoizedProps = useShallowMemoizedObject(props);
+
+  useEffect(() => {
+    // @ts-expect-error: context is not 100% typesafe but it's ok
+    setState({component, props: memoizedProps});
+  }, [setState, component, memoizedProps]);
+
+  useEffect(() => () => setState(null), [setState]);
+
+  return null;
+}

package/src/utils/pathUtils.ts

@@ -10,8 +10,7 @@ export const isSamePath = (
   path1: string | undefined,
   path2: string | undefined,
 ): boolean => {
-  const normalize = (pathname: string | undefined) => {
-    return !pathname || pathname?.endsWith('/') ? pathname : `${pathname}/`;
-  };
+  const normalize = (pathname: string | undefined) =>
+    !pathname || pathname?.endsWith('/') ? pathname : `${pathname}/`;
   return normalize(path1) === normalize(path2);
 };

package/src/utils/reactUtils.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useCallback, useEffect, useLayoutEffect, useRef} from 'react';
+
+// This hook is like useLayoutEffect, but without the SSR warning
+// It seems hacky but it's used in many React libs (Redux, Formik...)
+// Also mentioned here: https://github.com/facebook/react/issues/16956
+// It is useful when you need to update a ref as soon as possible after a React render (before useEffect)
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+// Permits to transform an unstable callback (like an arrow function provided as props)
+// to a "stable" callback that is safe to use in a useEffect dependency array
+// Useful to avoid React stale closure problems + avoid useless effect re-executions
+//
+// Workaround until the React team recommends a good solution, see https://github.com/facebook/react/issues/16956
+// This generally works has some potential drawbacks, such as https://github.com/facebook/react/issues/16956#issuecomment-536636418
+export function useDynamicCallback<T extends (...args: never[]) => unknown>(
+  callback: T,
+): T {
+  const ref = useRef<T>(callback);
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = callback;
+  }, [callback]);
+
+  // @ts-expect-error: TODO, not sure how to fix this TS error
+  return useCallback<T>((...args) => ref.current(...args), []);
+}

package/src/utils/regexpUtils.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Utility to convert an optional string into a Regex case sensitive and global
+ */
+export function isRegexpStringMatch(
+  regexAsString?: string,
+  valueToTest?: string,
+): boolean {
+  if (
+    typeof regexAsString === 'undefined' ||
+    typeof valueToTest === 'undefined'
+  ) {
+    return false;
+  }
+
+  return new RegExp(regexAsString, 'gi').test(valueToTest);
+}

package/src/utils/scrollUtils.tsx

@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {useDynamicCallback} from './reactUtils';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+/**
+ * We need a way to update the scroll position while ignoring scroll events
+ * without affecting Navbar/BackToTop visibility
+ *
+ * This API permits to temporarily disable/ignore scroll events
+ * Motivated by https://github.com/facebook/docusaurus/pull/5618
+ */
+type ScrollController = {
+  /**
+   * A boolean ref tracking whether scroll events are enabled
+   */
+  scrollEventsEnabledRef: React.MutableRefObject<boolean>;
+  /**
+   * Enables scroll events in `useScrollPosition`
+   */
+  enableScrollEvents: () => void;
+  /**
+   * Disables scroll events in `useScrollPosition`
+   */
+  disableScrollEvents: () => void;
+};
+
+function useScrollControllerContextValue(): ScrollController {
+  const scrollEventsEnabledRef = useRef(true);
+
+  return useMemo(
+    () => ({
+      scrollEventsEnabledRef,
+      enableScrollEvents: () => {
+        scrollEventsEnabledRef.current = true;
+      },
+      disableScrollEvents: () => {
+        scrollEventsEnabledRef.current = false;
+      },
+    }),
+    [],
+  );
+}
+
+const ScrollMonitorContext = createContext<ScrollController | undefined>(
+  undefined,
+);
+
+export function ScrollControllerProvider({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <ScrollMonitorContext.Provider value={useScrollControllerContextValue()}>
+      {children}
+    </ScrollMonitorContext.Provider>
+  );
+}
+
+export function useScrollController(): ScrollController {
+  const context = useContext(ScrollMonitorContext);
+  if (context == null) {
+    throw new Error(
+      '"useScrollController" is used but no context provider was found in the React tree.',
+    );
+  }
+  return context;
+}
+
+const getScrollPosition = (): ScrollPosition | null =>
+  ExecutionEnvironment.canUseDOM
+    ? {
+        scrollX: window.pageXOffset,
+        scrollY: window.pageYOffset,
+      }
+    : null;
+
+type ScrollPosition = {scrollX: number; scrollY: number};
+
+export function useScrollPosition(
+  effect: (
+    position: ScrollPosition,
+    lastPosition: ScrollPosition | null,
+  ) => void,
+  deps: unknown[] = [],
+): void {
+  const {scrollEventsEnabledRef} = useScrollController();
+  const lastPositionRef = useRef<ScrollPosition | null>(getScrollPosition());
+
+  const dynamicEffect = useDynamicCallback(effect);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!scrollEventsEnabledRef.current) {
+        return;
+      }
+      const currentPosition = getScrollPosition()!;
+
+      if (dynamicEffect) {
+        dynamicEffect(currentPosition, lastPositionRef.current);
+      }
+
+      lastPositionRef.current = currentPosition;
+    };
+
+    const opts: AddEventListenerOptions & EventListenerOptions = {
+      passive: true,
+    };
+
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, opts);
+
+    return () => window.removeEventListener('scroll', handleScroll, opts);
+  }, [
+    dynamicEffect,
+    scrollEventsEnabledRef,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ...deps,
+  ]);
+}
+
+type UseScrollPositionSaver = {
+  /**
+   * Measure the top of an element, and store the details
+   */
+  save: (elem: HTMLElement) => void;
+  /**
+   * Restore the page position to keep the stored element's position from
+   * the top of the viewport, and remove the stored details
+   */
+  restore: () => {restored: boolean};
+};
+
+function useScrollPositionSaver(): UseScrollPositionSaver {
+  const lastElementRef = useRef<{elem: HTMLElement | null; top: number}>({
+    elem: null,
+    top: 0,
+  });
+
+  const save = useCallback((elem: HTMLElement) => {
+    lastElementRef.current = {
+      elem,
+      top: elem.getBoundingClientRect().top,
+    };
+  }, []);
+
+  const restore = useCallback(() => {
+    const {
+      current: {elem, top},
+    } = lastElementRef;
+    if (!elem) {
+      return {restored: false};
+    }
+    const newTop = elem.getBoundingClientRect().top;
+    const heightDiff = newTop - top;
+    if (heightDiff) {
+      window.scrollBy({left: 0, top: heightDiff});
+    }
+    lastElementRef.current = {elem: null, top: 0};
+
+    return {restored: heightDiff !== 0};
+  }, []);
+
+  return useMemo(() => ({save, restore}), [restore, save]);
+}
+
+type UseScrollPositionBlockerReturn = {
+  blockElementScrollPositionUntilNextRender: (el: HTMLElement) => void;
+};
+
+/**
+ * This hook permits to "block" the scroll position of a dom element
+ * The idea is that we should be able to update DOM content above this element
+ * but the screen position of this element should not change
+ *
+ * Feature motivated by the Tabs groups:
+ * clicking on a tab may affect tabs of the same group upper in the tree
+ * Yet to avoid a bad UX, the clicked tab must remain under the user mouse!
+ * See GIF here: https://github.com/facebook/docusaurus/pull/5618
+ */
+export function useScrollPositionBlocker(): UseScrollPositionBlockerReturn {
+  const scrollController = useScrollController();
+  const scrollPositionSaver = useScrollPositionSaver();
+
+  const nextLayoutEffectCallbackRef = useRef<(() => void) | undefined>(
+    undefined,
+  );
+
+  const blockElementScrollPositionUntilNextRender = useCallback(
+    (el: HTMLElement) => {
+      scrollPositionSaver.save(el);
+      scrollController.disableScrollEvents();
+      nextLayoutEffectCallbackRef.current = () => {
+        const {restored} = scrollPositionSaver.restore();
+        nextLayoutEffectCallbackRef.current = undefined;
+
+        // Restoring the former scroll position will trigger a scroll event
+        // We need to wait for next scroll event to happen
+        // before enabling again the scrollController events
+        if (restored) {
+          const handleScrollRestoreEvent = () => {
+            scrollController.enableScrollEvents();
+            window.removeEventListener('scroll', handleScrollRestoreEvent);
+          };
+          window.addEventListener('scroll', handleScrollRestoreEvent);
+        } else {
+          scrollController.enableScrollEvents();
+        }
+      };
+    },
+    [scrollController, scrollPositionSaver],
+  );
+
+  useLayoutEffect(() => {
+    nextLayoutEffectCallbackRef.current?.();
+  });
+
+  return {
+    blockElementScrollPositionUntilNextRender,
+  };
+}

package/src/utils/storageUtils.ts

@@ -27,7 +27,7 @@ function getBrowserStorage(
     try {
       return window[storageType];
     } catch (e) {
-      logOnceBrowserStorageNotAvailableWarning(e);
+      logOnceBrowserStorageNotAvailableWarning(e as Error);
       return null;
     }
   }
@@ -79,6 +79,10 @@ Please only call storage APIs in effects and event handlers.`);
 
 /**
  * Creates an object for accessing a particular key in localStorage.
+ * The API is fail-safe, and usage of browser storage should be considered unreliable
+ * Local storage might simply be unavailable (iframe + browser security) or operations might fail individually
+ * Please assume that using this API can be a NO-OP
+ * See also https://github.com/facebook/docusaurus/issues/6036
  */
 export const createStorageSlot = (
   key: string,
@@ -92,9 +96,28 @@ export const createStorageSlot = (
     return NoopStorageSlot;
   }
   return {
-    get: () => browserStorage.getItem(key),
-    set: (value) => browserStorage.setItem(key, value),
-    del: () => browserStorage.removeItem(key),
+    get: () => {
+      try {
+        return browserStorage.getItem(key);
+      } catch (e) {
+        console.error(`Docusaurus storage error, can't get key=${key}`, e);
+        return null;
+      }
+    },
+    set: (value) => {
+      try {
+        browserStorage.setItem(key, value);
+      } catch (e) {
+        console.error(`Docusaurus storage error, can't set ${key}=${value}`, e);
+      }
+    },
+    del: () => {
+      try {
+        browserStorage.removeItem(key);
+      } catch (e) {
+        console.error(`Docusaurus storage error, can't delete key=${key}`, e);
+      }
+    },
   };
 };
 

package/src/utils/tagsUtils.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {translate} from '@docusaurus/Translate';
+
+export const translateTagsPageTitle = (): string =>
+  translate({
+    id: 'theme.tags.tagsPageTitle',
+    message: 'Tags',
+    description: 'The title of the tag list page',
+  });
+
+type TagsListItem = Readonly<{name: string; permalink: string; count: number}>; // TODO remove duplicated type :s
+
+export type TagLetterEntry = Readonly<{letter: string; tags: TagsListItem[]}>;
+
+function getTagLetter(tag: string): string {
+  return tag[0].toUpperCase();
+}
+
+export function listTagsByLetters(
+  tags: readonly TagsListItem[],
+): TagLetterEntry[] {
+  // Group by letters
+  const groups: Record<string, TagsListItem[]> = {};
+  Object.values(tags).forEach((tag) => {
+    const letter = getTagLetter(tag.name);
+    groups[letter] = groups[letter] ?? [];
+    groups[letter].push(tag);
+  });
+
+  return (
+    Object.entries(groups)
+      // Sort letters
+      .sort(([letter1], [letter2]) => letter1.localeCompare(letter2))
+      .map(([letter, letterTags]) => {
+        // Sort tags inside a letter
+        const sortedTags = letterTags.sort((tag1, tag2) =>
+          tag1.name.localeCompare(tag2.name),
+        );
+        return {letter, tags: sortedTags};
+      })
+  );
+}

package/src/utils/tocUtils.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useMemo} from 'react';
+import {TOCItem} from '@docusaurus/types';
+
+type FilterTOCParam = {
+  toc: readonly TOCItem[];
+  minHeadingLevel: number;
+  maxHeadingLevel: number;
+};
+
+export function filterTOC({
+  toc,
+  minHeadingLevel,
+  maxHeadingLevel,
+}: FilterTOCParam): TOCItem[] {
+  function isValid(item: TOCItem) {
+    return item.level >= minHeadingLevel && item.level <= maxHeadingLevel;
+  }
+
+  return toc.flatMap((item) => {
+    const filteredChildren = filterTOC({
+      toc: item.children,
+      minHeadingLevel,
+      maxHeadingLevel,
+    });
+    if (isValid(item)) {
+      return [
+        {
+          ...item,
+          children: filteredChildren,
+        },
+      ];
+    } else {
+      return filteredChildren;
+    }
+  });
+}
+
+// Memoize potentially expensive filtering logic
+export function useTOCFilter({
+  toc,
+  minHeadingLevel,
+  maxHeadingLevel,
+}: FilterTOCParam): readonly TOCItem[] {
+  return useMemo(
+    () => filterTOC({toc, minHeadingLevel, maxHeadingLevel}),
+    [toc, minHeadingLevel, maxHeadingLevel],
+  );
+}

package/src/utils/useAlternatePageUtils.ts

@@ -11,7 +11,15 @@ import {useLocation} from '@docusaurus/router';
 // Permits to obtain the url of the current page in another locale
 // Useful to generate hreflang meta headers etc...
 // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
-export function useAlternatePageUtils() {
+export function useAlternatePageUtils(): {
+  createUrl: ({
+    locale,
+    fullyQualified,
+  }: {
+    locale: string;
+    fullyQualified: boolean;
+  }) => string;
+} {
   const {
     siteConfig: {baseUrl, url},
     i18n: {defaultLocale, currentLocale},

package/src/utils/useContextualSearchFilters.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useAllDocsData, useActivePluginAndVersion} from '@theme/hooks/useDocs';
+import {useDocsPreferredVersionByPluginId} from './docsPreferredVersion/useDocsPreferredVersion';
+import {docVersionSearchTag, DEFAULT_SEARCH_TAG} from './searchUtils';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export type useContextualSearchFiltersReturns = {
+  locale: string;
+  tags: string[];
+};
+
+// We may want to support multiple search engines, don't couple that to Algolia/DocSearch
+// Maybe users will want to use its own search engine solution
+export function useContextualSearchFilters(): useContextualSearchFiltersReturns {
+  const {i18n} = useDocusaurusContext();
+  const allDocsData = useAllDocsData();
+  const activePluginAndVersion = useActivePluginAndVersion();
+  const docsPreferredVersionByPluginId = useDocsPreferredVersionByPluginId();
+
+  function getDocPluginTags(pluginId: string) {
+    const activeVersion =
+      activePluginAndVersion?.activePlugin?.pluginId === pluginId
+        ? activePluginAndVersion.activeVersion
+        : undefined;
+
+    const preferredVersion = docsPreferredVersionByPluginId[pluginId];
+
+    const latestVersion = allDocsData[pluginId].versions.find((v) => v.isLast)!;
+
+    const version = activeVersion ?? preferredVersion ?? latestVersion;
+
+    return docVersionSearchTag(pluginId, version.name);
+  }
+
+  const tags = [
+    DEFAULT_SEARCH_TAG,
+    ...Object.keys(allDocsData).map(getDocPluginTags),
+  ];
+
+  return {
+    locale: i18n.currentLocale,
+    tags,
+  };
+}

package/src/utils/useLocalPathname.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useLocation} from '@docusaurus/router';
+
+// Get the pathname of current route, without the optional site baseUrl
+// - /docs/myDoc => /docs/myDoc
+// - /baseUrl/docs/myDoc => /docs/myDoc
+export function useLocalPathname(): string {
+  const {
+    siteConfig: {baseUrl},
+  } = useDocusaurusContext();
+  const {pathname} = useLocation();
+  return pathname.replace(baseUrl, '/');
+}