@docusaurus/theme-common 2.0.0-beta.1 → 2.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/copyUntypedFiles.js +20 -0
- package/lib/.tsbuildinfo +1 -1
- package/lib/components/Collapsible/index.d.ts +35 -0
- package/lib/components/Collapsible/index.js +139 -0
- package/lib/components/Details/index.d.ts +12 -0
- package/lib/components/Details/index.js +64 -0
- package/lib/components/Details/styles.module.css +58 -0
- package/lib/index.d.ts +24 -4
- package/lib/index.js +18 -3
- package/lib/utils/ThemeClassNames.d.ts +36 -12
- package/lib/utils/ThemeClassNames.js +36 -3
- package/lib/utils/announcementBarUtils.d.ts +17 -0
- package/lib/utils/announcementBarUtils.js +69 -0
- package/lib/utils/codeBlockUtils.d.ts +10 -0
- package/lib/utils/codeBlockUtils.js +119 -0
- package/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.d.ts +2 -2
- package/lib/utils/docsPreferredVersion/DocsPreferredVersionProvider.js +2 -2
- package/lib/utils/docsPreferredVersion/DocsPreferredVersionStorage.js +1 -3
- package/lib/utils/docsPreferredVersion/useDocsPreferredVersion.d.ts +11 -3
- package/lib/utils/docsPreferredVersion/useDocsPreferredVersion.js +1 -2
- package/lib/utils/docsUtils.d.ts +20 -0
- package/lib/utils/docsUtils.js +106 -0
- package/lib/utils/generalUtils.d.ts +6 -0
- package/lib/utils/generalUtils.js +2 -2
- package/lib/utils/historyUtils.d.ts +11 -0
- package/lib/utils/historyUtils.js +39 -0
- package/lib/utils/jsUtils.d.ts +19 -0
- package/lib/utils/jsUtils.js +25 -0
- package/lib/utils/mobileSecondaryMenu.d.ts +20 -0
- package/lib/utils/mobileSecondaryMenu.js +49 -0
- package/lib/utils/pathUtils.js +1 -3
- package/lib/utils/reactUtils.d.ts +9 -0
- package/lib/utils/reactUtils.js +26 -0
- package/lib/utils/regexpUtils.d.ts +10 -0
- package/lib/utils/regexpUtils.js +16 -0
- package/lib/utils/scrollUtils.d.ts +52 -0
- package/lib/utils/scrollUtils.js +135 -0
- package/lib/utils/storageUtils.d.ts +4 -0
- package/lib/utils/storageUtils.js +29 -3
- package/lib/utils/tagsUtils.d.ts +18 -0
- package/lib/utils/tagsUtils.js +33 -0
- package/lib/utils/tocUtils.d.ts +15 -0
- package/lib/utils/tocUtils.js +34 -0
- package/lib/utils/useContextualSearchFilters.d.ts +11 -0
- package/lib/utils/useContextualSearchFilters.js +36 -0
- package/lib/utils/{useChangeRoute.d.ts → useLocalPathname.d.ts} +1 -1
- package/lib/utils/useLocalPathname.js +16 -0
- package/lib/utils/useLocationChange.d.ts +14 -0
- package/lib/utils/useLocationChange.js +23 -0
- package/lib/utils/usePluralForm.js +1 -3
- package/{src/utils/docsUtils.ts → lib/utils/usePrevious.d.ts} +1 -5
- package/lib/utils/usePrevious.js +15 -0
- package/lib/utils/useTOCHighlight.d.ts +14 -0
- package/lib/utils/useTOCHighlight.js +124 -0
- package/lib/utils/useThemeConfig.d.ts +21 -3
- package/package.json +18 -12
- package/src/components/Collapsible/index.tsx +242 -0
- package/src/components/Details/index.tsx +94 -0
- package/src/components/Details/styles.module.css +58 -0
- package/src/index.ts +73 -3
- package/src/types.d.ts +0 -2
- package/src/utils/ThemeClassNames.ts +42 -4
- package/src/utils/__tests__/codeBlockUtils.test.ts +2 -2
- package/src/utils/__tests__/docsUtils.test.tsx +331 -0
- package/src/utils/__tests__/jsUtils.test.ts +33 -0
- package/src/utils/__tests__/tagUtils.test.ts +66 -0
- package/src/utils/__tests__/tocUtils.test.ts +197 -0
- package/src/utils/announcementBarUtils.tsx +120 -0
- package/src/utils/codeBlockUtils.ts +151 -0
- package/src/utils/docsPreferredVersion/DocsPreferredVersionProvider.tsx +7 -6
- package/src/utils/docsPreferredVersion/DocsPreferredVersionStorage.ts +2 -3
- package/src/utils/docsPreferredVersion/useDocsPreferredVersion.ts +14 -14
- package/src/utils/docsUtils.tsx +185 -0
- package/src/utils/generalUtils.ts +3 -2
- package/src/utils/historyUtils.ts +50 -0
- package/src/utils/jsUtils.ts +33 -0
- package/src/utils/mobileSecondaryMenu.tsx +114 -0
- package/src/utils/pathUtils.ts +2 -3
- package/src/utils/reactUtils.tsx +34 -0
- package/src/utils/regexpUtils.ts +23 -0
- package/src/utils/scrollUtils.tsx +237 -0
- package/src/utils/storageUtils.ts +27 -4
- package/src/utils/tagsUtils.ts +48 -0
- package/src/utils/tocUtils.ts +55 -0
- package/src/utils/useAlternatePageUtils.ts +9 -1
- package/src/utils/useContextualSearchFilters.ts +50 -0
- package/src/utils/useLocalPathname.ts +20 -0
- package/src/utils/useLocationChange.ts +35 -0
- package/src/utils/usePluralForm.ts +5 -4
- package/src/utils/usePrevious.ts +19 -0
- package/src/utils/useTOCHighlight.ts +179 -0
- package/src/utils/useThemeConfig.ts +20 -3
- package/lib/utils/useChangeRoute.js +0 -18
- package/src/utils/useChangeRoute.ts +0 -21
package/lib/utils/docsUtils.js
CHANGED
|
@@ -4,6 +4,112 @@
|
|
|
4
4
|
* This source code is licensed under the MIT license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
+
import React, { createContext, useContext } from 'react';
|
|
7
8
|
import { useAllDocsData } from '@theme/hooks/useDocs';
|
|
9
|
+
import { isSamePath } from './pathUtils';
|
|
10
|
+
import { useLocation } from '@docusaurus/router';
|
|
8
11
|
// TODO not ideal, see also "useDocs"
|
|
9
12
|
export const isDocsPluginEnabled = !!useAllDocsData;
|
|
13
|
+
// Using a Symbol because null is a valid context value (a doc can have no sidebar)
|
|
14
|
+
// Inspired by https://github.com/jamiebuilds/unstated-next/blob/master/src/unstated-next.tsx
|
|
15
|
+
const EmptyContextValue = Symbol('EmptyContext');
|
|
16
|
+
const DocsVersionContext = createContext(EmptyContextValue);
|
|
17
|
+
export function DocsVersionProvider({ children, version, }) {
|
|
18
|
+
return (React.createElement(DocsVersionContext.Provider, { value: version }, children));
|
|
19
|
+
}
|
|
20
|
+
export function useDocsVersion() {
|
|
21
|
+
const version = useContext(DocsVersionContext);
|
|
22
|
+
if (version === EmptyContextValue) {
|
|
23
|
+
throw new Error('This hook requires usage of <DocsVersionProvider>');
|
|
24
|
+
}
|
|
25
|
+
return version;
|
|
26
|
+
}
|
|
27
|
+
export function useDocById(id) {
|
|
28
|
+
const version = useDocsVersion();
|
|
29
|
+
if (!id) {
|
|
30
|
+
return undefined;
|
|
31
|
+
}
|
|
32
|
+
const doc = version.docs[id];
|
|
33
|
+
if (!doc) {
|
|
34
|
+
throw new Error(`no version doc found by id=${id}`);
|
|
35
|
+
}
|
|
36
|
+
return doc;
|
|
37
|
+
}
|
|
38
|
+
const DocsSidebarContext = createContext(EmptyContextValue);
|
|
39
|
+
export function DocsSidebarProvider({ children, sidebar, }) {
|
|
40
|
+
return (React.createElement(DocsSidebarContext.Provider, { value: sidebar }, children));
|
|
41
|
+
}
|
|
42
|
+
export function useDocsSidebar() {
|
|
43
|
+
const sidebar = useContext(DocsSidebarContext);
|
|
44
|
+
if (sidebar === EmptyContextValue) {
|
|
45
|
+
throw new Error('This hook requires usage of <DocsSidebarProvider>');
|
|
46
|
+
}
|
|
47
|
+
return sidebar;
|
|
48
|
+
}
|
|
49
|
+
// Use the components props and the sidebar in context
|
|
50
|
+
// to get back the related sidebar category that we want to render
|
|
51
|
+
export function findSidebarCategory(sidebar, predicate) {
|
|
52
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
53
|
+
for (const item of sidebar) {
|
|
54
|
+
if (item.type === 'category') {
|
|
55
|
+
if (predicate(item)) {
|
|
56
|
+
return item;
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
const subItem = findSidebarCategory(item.items, predicate);
|
|
60
|
+
if (subItem) {
|
|
61
|
+
return subItem;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return undefined;
|
|
67
|
+
}
|
|
68
|
+
// If a category card has no link => link to the first subItem having a link
|
|
69
|
+
export function findFirstCategoryLink(item) {
|
|
70
|
+
if (item.href) {
|
|
71
|
+
return item.href;
|
|
72
|
+
}
|
|
73
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
74
|
+
for (const subItem of item.items) {
|
|
75
|
+
if (subItem.type === 'link') {
|
|
76
|
+
return subItem.href;
|
|
77
|
+
}
|
|
78
|
+
if (subItem.type === 'category') {
|
|
79
|
+
const categoryLink = findFirstCategoryLink(subItem);
|
|
80
|
+
if (categoryLink) {
|
|
81
|
+
return categoryLink;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
throw new Error(`Unexpected category item type for ${JSON.stringify(subItem)}`);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return undefined;
|
|
89
|
+
}
|
|
90
|
+
export function useCurrentSidebarCategory() {
|
|
91
|
+
const { pathname } = useLocation();
|
|
92
|
+
const sidebar = useDocsSidebar();
|
|
93
|
+
if (!sidebar) {
|
|
94
|
+
throw new Error('Unexpected: cant find current sidebar in context');
|
|
95
|
+
}
|
|
96
|
+
const category = findSidebarCategory(sidebar, (item) => isSamePath(item.href, pathname));
|
|
97
|
+
if (!category) {
|
|
98
|
+
throw new Error(`Unexpected: sidebar category could not be found for pathname='${pathname}'.
|
|
99
|
+
Hook useCurrentSidebarCategory() should only be used on Category pages`);
|
|
100
|
+
}
|
|
101
|
+
return category;
|
|
102
|
+
}
|
|
103
|
+
function containsActiveSidebarItem(items, activePath) {
|
|
104
|
+
return items.some((subItem) => isActiveSidebarItem(subItem, activePath));
|
|
105
|
+
}
|
|
106
|
+
export function isActiveSidebarItem(item, activePath) {
|
|
107
|
+
const isActive = (testedPath) => typeof testedPath !== 'undefined' && isSamePath(testedPath, activePath);
|
|
108
|
+
if (item.type === 'link') {
|
|
109
|
+
return isActive(item.href);
|
|
110
|
+
}
|
|
111
|
+
if (item.type === 'category') {
|
|
112
|
+
return (isActive(item.href) || containsActiveSidebarItem(item.items, activePath));
|
|
113
|
+
}
|
|
114
|
+
return false;
|
|
115
|
+
}
|
|
@@ -1 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
1
7
|
export declare const useTitleFormatter: (title?: string | undefined) => string;
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
|
8
8
|
export const useTitleFormatter = (title) => {
|
|
9
|
-
const { siteConfig
|
|
10
|
-
const { title: siteTitle, titleDelimiter
|
|
9
|
+
const { siteConfig } = useDocusaurusContext();
|
|
10
|
+
const { title: siteTitle, titleDelimiter } = siteConfig;
|
|
11
11
|
return title && title.trim().length
|
|
12
12
|
? `${title.trim()} ${titleDelimiter} ${siteTitle}`
|
|
13
13
|
: siteTitle;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import type { Location, Action } from '@docusaurus/history';
|
|
8
|
+
declare type HistoryBlockHandler = (location: Location, action: Action) => void | false;
|
|
9
|
+
export declare function useHistoryActionHandler(handler: HistoryBlockHandler): void;
|
|
10
|
+
export declare function useHistoryPopHandler(handler: HistoryBlockHandler): void;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { useEffect, useRef } from 'react';
|
|
8
|
+
import { useHistory } from '@docusaurus/router';
|
|
9
|
+
/*
|
|
10
|
+
Permits to register a handler that will be called on history actions (pop,push,replace)
|
|
11
|
+
If the handler returns false, the navigation transition will be blocked/cancelled
|
|
12
|
+
*/
|
|
13
|
+
export function useHistoryActionHandler(handler) {
|
|
14
|
+
const { block } = useHistory();
|
|
15
|
+
// Avoid stale closure issues without triggering useless re-renders
|
|
16
|
+
const lastHandlerRef = useRef(handler);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
lastHandlerRef.current = handler;
|
|
19
|
+
}, [handler]);
|
|
20
|
+
useEffect(() =>
|
|
21
|
+
// See https://github.com/remix-run/history/blob/main/docs/blocking-transitions.md
|
|
22
|
+
block((location, action) => lastHandlerRef.current(location, action)), [block, lastHandlerRef]);
|
|
23
|
+
}
|
|
24
|
+
/*
|
|
25
|
+
Permits to register a handler that will be called on history pop navigation (backward/forward)
|
|
26
|
+
If the handler returns false, the backward/forward transition will be blocked
|
|
27
|
+
|
|
28
|
+
Unfortunately there's no good way to detect the "direction" (backward/forward) of the POP event.
|
|
29
|
+
*/
|
|
30
|
+
export function useHistoryPopHandler(handler) {
|
|
31
|
+
useHistoryActionHandler((location, action) => {
|
|
32
|
+
if (action === 'POP') {
|
|
33
|
+
// Eventually block navigation if handler returns false
|
|
34
|
+
return handler(location, action);
|
|
35
|
+
}
|
|
36
|
+
// Don't block other navigation actions
|
|
37
|
+
return undefined;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Gets the duplicate values in an array.
|
|
9
|
+
* @param arr The array.
|
|
10
|
+
* @param comparator Compares two values and returns `true` if they are equal (duplicated).
|
|
11
|
+
* @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.
|
|
12
|
+
*/
|
|
13
|
+
export declare function duplicates<T>(arr: readonly T[], comparator?: (a: T, b: T) => boolean): T[];
|
|
14
|
+
/**
|
|
15
|
+
* Remove duplicate array items (similar to _.uniq)
|
|
16
|
+
* @param arr The array.
|
|
17
|
+
* @returns An array with duplicate elements removed by reference comparison.
|
|
18
|
+
*/
|
|
19
|
+
export declare function uniq<T>(arr: T[]): T[];
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
// A replacement of lodash in client code
|
|
8
|
+
/**
|
|
9
|
+
* Gets the duplicate values in an array.
|
|
10
|
+
* @param arr The array.
|
|
11
|
+
* @param comparator Compares two values and returns `true` if they are equal (duplicated).
|
|
12
|
+
* @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.
|
|
13
|
+
*/
|
|
14
|
+
export function duplicates(arr, comparator = (a, b) => a === b) {
|
|
15
|
+
return arr.filter((v, vIndex) => arr.findIndex((u) => comparator(u, v)) !== vIndex);
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Remove duplicate array items (similar to _.uniq)
|
|
19
|
+
* @param arr The array.
|
|
20
|
+
* @returns An array with duplicate elements removed by reference comparison.
|
|
21
|
+
*/
|
|
22
|
+
export function uniq(arr) {
|
|
23
|
+
// Note: had problems with [...new Set()]: https://github.com/facebook/docusaurus/issues/4972#issuecomment-863895061
|
|
24
|
+
return Array.from(new Set(arr));
|
|
25
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactNode, ComponentType } from 'react';
|
|
8
|
+
declare type ExtraProps = {
|
|
9
|
+
toggleSidebar: () => void;
|
|
10
|
+
};
|
|
11
|
+
export declare type MobileSecondaryMenuComponent<Props> = ComponentType<Props & ExtraProps>;
|
|
12
|
+
export declare function MobileSecondaryMenuProvider({ children, }: {
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
}): JSX.Element;
|
|
15
|
+
export declare function useMobileSecondaryMenuRenderer(): (extraProps: ExtraProps) => ReactNode | undefined;
|
|
16
|
+
export declare function MobileSecondaryMenuFiller<Props extends Record<string, unknown>>({ component, props, }: {
|
|
17
|
+
component: MobileSecondaryMenuComponent<Props & ExtraProps>;
|
|
18
|
+
props: Props;
|
|
19
|
+
}): JSX.Element | null;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { useState, useContext, createContext, useEffect, useMemo, } from 'react';
|
|
8
|
+
function useContextValue() {
|
|
9
|
+
return useState(null);
|
|
10
|
+
}
|
|
11
|
+
const Context = createContext(null);
|
|
12
|
+
export function MobileSecondaryMenuProvider({ children, }) {
|
|
13
|
+
return (React.createElement(Context.Provider, { value: useContextValue() }, children));
|
|
14
|
+
}
|
|
15
|
+
function useMobileSecondaryMenuContext() {
|
|
16
|
+
const value = useContext(Context);
|
|
17
|
+
if (value === null) {
|
|
18
|
+
throw new Error('MobileSecondaryMenuProvider was not used correctly, context value is null');
|
|
19
|
+
}
|
|
20
|
+
return value;
|
|
21
|
+
}
|
|
22
|
+
export function useMobileSecondaryMenuRenderer() {
|
|
23
|
+
const [state] = useMobileSecondaryMenuContext();
|
|
24
|
+
if (state) {
|
|
25
|
+
const Comp = state.component;
|
|
26
|
+
return function render(extraProps) {
|
|
27
|
+
return React.createElement(Comp, { ...state.props, ...extraProps });
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
return () => undefined;
|
|
31
|
+
}
|
|
32
|
+
function useShallowMemoizedObject(obj) {
|
|
33
|
+
return useMemo(() => obj,
|
|
34
|
+
// Is this safe?
|
|
35
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
36
|
+
[...Object.keys(obj), ...Object.values(obj)]);
|
|
37
|
+
}
|
|
38
|
+
// Fill the secondary menu placeholder with some real content
|
|
39
|
+
export function MobileSecondaryMenuFiller({ component, props, }) {
|
|
40
|
+
const [, setState] = useMobileSecondaryMenuContext();
|
|
41
|
+
// To avoid useless context re-renders, props are memoized shallowly
|
|
42
|
+
const memoizedProps = useShallowMemoizedObject(props);
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
// @ts-expect-error: context is not 100% typesafe but it's ok
|
|
45
|
+
setState({ component, props: memoizedProps });
|
|
46
|
+
}, [setState, component, memoizedProps]);
|
|
47
|
+
useEffect(() => () => setState(null), [setState]);
|
|
48
|
+
return null;
|
|
49
|
+
}
|
package/lib/utils/pathUtils.js
CHANGED
|
@@ -6,8 +6,6 @@
|
|
|
6
6
|
*/
|
|
7
7
|
// Compare the 2 paths, ignoring trailing /
|
|
8
8
|
export const isSamePath = (path1, path2) => {
|
|
9
|
-
const normalize = (pathname) => {
|
|
10
|
-
return !pathname || (pathname === null || pathname === void 0 ? void 0 : pathname.endsWith('/')) ? pathname : `${pathname}/`;
|
|
11
|
-
};
|
|
9
|
+
const normalize = (pathname) => !pathname || (pathname === null || pathname === void 0 ? void 0 : pathname.endsWith('/')) ? pathname : `${pathname}/`;
|
|
12
10
|
return normalize(path1) === normalize(path2);
|
|
13
11
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { useEffect } from 'react';
|
|
8
|
+
export declare const useIsomorphicLayoutEffect: typeof useEffect;
|
|
9
|
+
export declare function useDynamicCallback<T extends (...args: never[]) => unknown>(callback: T): T;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
|
|
8
|
+
// This hook is like useLayoutEffect, but without the SSR warning
|
|
9
|
+
// It seems hacky but it's used in many React libs (Redux, Formik...)
|
|
10
|
+
// Also mentioned here: https://github.com/facebook/react/issues/16956
|
|
11
|
+
// It is useful when you need to update a ref as soon as possible after a React render (before useEffect)
|
|
12
|
+
export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
13
|
+
// Permits to transform an unstable callback (like an arrow function provided as props)
|
|
14
|
+
// to a "stable" callback that is safe to use in a useEffect dependency array
|
|
15
|
+
// Useful to avoid React stale closure problems + avoid useless effect re-executions
|
|
16
|
+
//
|
|
17
|
+
// Workaround until the React team recommends a good solution, see https://github.com/facebook/react/issues/16956
|
|
18
|
+
// This generally works has some potential drawbacks, such as https://github.com/facebook/react/issues/16956#issuecomment-536636418
|
|
19
|
+
export function useDynamicCallback(callback) {
|
|
20
|
+
const ref = useRef(callback);
|
|
21
|
+
useIsomorphicLayoutEffect(() => {
|
|
22
|
+
ref.current = callback;
|
|
23
|
+
}, [callback]);
|
|
24
|
+
// @ts-expect-error: TODO, not sure how to fix this TS error
|
|
25
|
+
return useCallback((...args) => ref.current(...args), []);
|
|
26
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Utility to convert an optional string into a Regex case sensitive and global
|
|
9
|
+
*/
|
|
10
|
+
export declare function isRegexpStringMatch(regexAsString?: string, valueToTest?: string): boolean;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Utility to convert an optional string into a Regex case sensitive and global
|
|
9
|
+
*/
|
|
10
|
+
export function isRegexpStringMatch(regexAsString, valueToTest) {
|
|
11
|
+
if (typeof regexAsString === 'undefined' ||
|
|
12
|
+
typeof valueToTest === 'undefined') {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
return new RegExp(regexAsString, 'gi').test(valueToTest);
|
|
16
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { ReactNode } from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* We need a way to update the scroll position while ignoring scroll events
|
|
10
|
+
* without affecting Navbar/BackToTop visibility
|
|
11
|
+
*
|
|
12
|
+
* This API permits to temporarily disable/ignore scroll events
|
|
13
|
+
* Motivated by https://github.com/facebook/docusaurus/pull/5618
|
|
14
|
+
*/
|
|
15
|
+
declare type ScrollController = {
|
|
16
|
+
/**
|
|
17
|
+
* A boolean ref tracking whether scroll events are enabled
|
|
18
|
+
*/
|
|
19
|
+
scrollEventsEnabledRef: React.MutableRefObject<boolean>;
|
|
20
|
+
/**
|
|
21
|
+
* Enables scroll events in `useScrollPosition`
|
|
22
|
+
*/
|
|
23
|
+
enableScrollEvents: () => void;
|
|
24
|
+
/**
|
|
25
|
+
* Disables scroll events in `useScrollPosition`
|
|
26
|
+
*/
|
|
27
|
+
disableScrollEvents: () => void;
|
|
28
|
+
};
|
|
29
|
+
export declare function ScrollControllerProvider({ children, }: {
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
}): JSX.Element;
|
|
32
|
+
export declare function useScrollController(): ScrollController;
|
|
33
|
+
declare type ScrollPosition = {
|
|
34
|
+
scrollX: number;
|
|
35
|
+
scrollY: number;
|
|
36
|
+
};
|
|
37
|
+
export declare function useScrollPosition(effect: (position: ScrollPosition, lastPosition: ScrollPosition | null) => void, deps?: unknown[]): void;
|
|
38
|
+
declare type UseScrollPositionBlockerReturn = {
|
|
39
|
+
blockElementScrollPositionUntilNextRender: (el: HTMLElement) => void;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* This hook permits to "block" the scroll position of a dom element
|
|
43
|
+
* The idea is that we should be able to update DOM content above this element
|
|
44
|
+
* but the screen position of this element should not change
|
|
45
|
+
*
|
|
46
|
+
* Feature motivated by the Tabs groups:
|
|
47
|
+
* clicking on a tab may affect tabs of the same group upper in the tree
|
|
48
|
+
* Yet to avoid a bad UX, the clicked tab must remain under the user mouse!
|
|
49
|
+
* See GIF here: https://github.com/facebook/docusaurus/pull/5618
|
|
50
|
+
*/
|
|
51
|
+
export declare function useScrollPositionBlocker(): UseScrollPositionBlockerReturn;
|
|
52
|
+
export {};
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, } from 'react';
|
|
8
|
+
import { useDynamicCallback } from './reactUtils';
|
|
9
|
+
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
|
|
10
|
+
function useScrollControllerContextValue() {
|
|
11
|
+
const scrollEventsEnabledRef = useRef(true);
|
|
12
|
+
return useMemo(() => ({
|
|
13
|
+
scrollEventsEnabledRef,
|
|
14
|
+
enableScrollEvents: () => {
|
|
15
|
+
scrollEventsEnabledRef.current = true;
|
|
16
|
+
},
|
|
17
|
+
disableScrollEvents: () => {
|
|
18
|
+
scrollEventsEnabledRef.current = false;
|
|
19
|
+
},
|
|
20
|
+
}), []);
|
|
21
|
+
}
|
|
22
|
+
const ScrollMonitorContext = createContext(undefined);
|
|
23
|
+
export function ScrollControllerProvider({ children, }) {
|
|
24
|
+
return (React.createElement(ScrollMonitorContext.Provider, { value: useScrollControllerContextValue() }, children));
|
|
25
|
+
}
|
|
26
|
+
export function useScrollController() {
|
|
27
|
+
const context = useContext(ScrollMonitorContext);
|
|
28
|
+
if (context == null) {
|
|
29
|
+
throw new Error('"useScrollController" is used but no context provider was found in the React tree.');
|
|
30
|
+
}
|
|
31
|
+
return context;
|
|
32
|
+
}
|
|
33
|
+
const getScrollPosition = () => ExecutionEnvironment.canUseDOM
|
|
34
|
+
? {
|
|
35
|
+
scrollX: window.pageXOffset,
|
|
36
|
+
scrollY: window.pageYOffset,
|
|
37
|
+
}
|
|
38
|
+
: null;
|
|
39
|
+
export function useScrollPosition(effect, deps = []) {
|
|
40
|
+
const { scrollEventsEnabledRef } = useScrollController();
|
|
41
|
+
const lastPositionRef = useRef(getScrollPosition());
|
|
42
|
+
const dynamicEffect = useDynamicCallback(effect);
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
const handleScroll = () => {
|
|
45
|
+
if (!scrollEventsEnabledRef.current) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const currentPosition = getScrollPosition();
|
|
49
|
+
if (dynamicEffect) {
|
|
50
|
+
dynamicEffect(currentPosition, lastPositionRef.current);
|
|
51
|
+
}
|
|
52
|
+
lastPositionRef.current = currentPosition;
|
|
53
|
+
};
|
|
54
|
+
const opts = {
|
|
55
|
+
passive: true,
|
|
56
|
+
};
|
|
57
|
+
handleScroll();
|
|
58
|
+
window.addEventListener('scroll', handleScroll, opts);
|
|
59
|
+
return () => window.removeEventListener('scroll', handleScroll, opts);
|
|
60
|
+
}, [
|
|
61
|
+
dynamicEffect,
|
|
62
|
+
scrollEventsEnabledRef,
|
|
63
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
|
+
...deps,
|
|
65
|
+
]);
|
|
66
|
+
}
|
|
67
|
+
function useScrollPositionSaver() {
|
|
68
|
+
const lastElementRef = useRef({
|
|
69
|
+
elem: null,
|
|
70
|
+
top: 0,
|
|
71
|
+
});
|
|
72
|
+
const save = useCallback((elem) => {
|
|
73
|
+
lastElementRef.current = {
|
|
74
|
+
elem,
|
|
75
|
+
top: elem.getBoundingClientRect().top,
|
|
76
|
+
};
|
|
77
|
+
}, []);
|
|
78
|
+
const restore = useCallback(() => {
|
|
79
|
+
const { current: { elem, top }, } = lastElementRef;
|
|
80
|
+
if (!elem) {
|
|
81
|
+
return { restored: false };
|
|
82
|
+
}
|
|
83
|
+
const newTop = elem.getBoundingClientRect().top;
|
|
84
|
+
const heightDiff = newTop - top;
|
|
85
|
+
if (heightDiff) {
|
|
86
|
+
window.scrollBy({ left: 0, top: heightDiff });
|
|
87
|
+
}
|
|
88
|
+
lastElementRef.current = { elem: null, top: 0 };
|
|
89
|
+
return { restored: heightDiff !== 0 };
|
|
90
|
+
}, []);
|
|
91
|
+
return useMemo(() => ({ save, restore }), [restore, save]);
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* This hook permits to "block" the scroll position of a dom element
|
|
95
|
+
* The idea is that we should be able to update DOM content above this element
|
|
96
|
+
* but the screen position of this element should not change
|
|
97
|
+
*
|
|
98
|
+
* Feature motivated by the Tabs groups:
|
|
99
|
+
* clicking on a tab may affect tabs of the same group upper in the tree
|
|
100
|
+
* Yet to avoid a bad UX, the clicked tab must remain under the user mouse!
|
|
101
|
+
* See GIF here: https://github.com/facebook/docusaurus/pull/5618
|
|
102
|
+
*/
|
|
103
|
+
export function useScrollPositionBlocker() {
|
|
104
|
+
const scrollController = useScrollController();
|
|
105
|
+
const scrollPositionSaver = useScrollPositionSaver();
|
|
106
|
+
const nextLayoutEffectCallbackRef = useRef(undefined);
|
|
107
|
+
const blockElementScrollPositionUntilNextRender = useCallback((el) => {
|
|
108
|
+
scrollPositionSaver.save(el);
|
|
109
|
+
scrollController.disableScrollEvents();
|
|
110
|
+
nextLayoutEffectCallbackRef.current = () => {
|
|
111
|
+
const { restored } = scrollPositionSaver.restore();
|
|
112
|
+
nextLayoutEffectCallbackRef.current = undefined;
|
|
113
|
+
// Restoring the former scroll position will trigger a scroll event
|
|
114
|
+
// We need to wait for next scroll event to happen
|
|
115
|
+
// before enabling again the scrollController events
|
|
116
|
+
if (restored) {
|
|
117
|
+
const handleScrollRestoreEvent = () => {
|
|
118
|
+
scrollController.enableScrollEvents();
|
|
119
|
+
window.removeEventListener('scroll', handleScrollRestoreEvent);
|
|
120
|
+
};
|
|
121
|
+
window.addEventListener('scroll', handleScrollRestoreEvent);
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
scrollController.enableScrollEvents();
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
}, [scrollController, scrollPositionSaver]);
|
|
128
|
+
useLayoutEffect(() => {
|
|
129
|
+
var _a;
|
|
130
|
+
(_a = nextLayoutEffectCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(nextLayoutEffectCallbackRef);
|
|
131
|
+
});
|
|
132
|
+
return {
|
|
133
|
+
blockElementScrollPositionUntilNextRender,
|
|
134
|
+
};
|
|
135
|
+
}
|
|
@@ -13,6 +13,10 @@ export interface StorageSlot {
|
|
|
13
13
|
}
|
|
14
14
|
/**
|
|
15
15
|
* Creates an object for accessing a particular key in localStorage.
|
|
16
|
+
* The API is fail-safe, and usage of browser storage should be considered unreliable
|
|
17
|
+
* Local storage might simply be unavailable (iframe + browser security) or operations might fail individually
|
|
18
|
+
* Please assume that using this API can be a NO-OP
|
|
19
|
+
* See also https://github.com/facebook/docusaurus/issues/6036
|
|
16
20
|
*/
|
|
17
21
|
export declare const createStorageSlot: (key: string, options?: {
|
|
18
22
|
persistence?: "localStorage" | "none" | "sessionStorage" | undefined;
|
|
@@ -57,6 +57,10 @@ Please only call storage APIs in effects and event handlers.`);
|
|
|
57
57
|
}
|
|
58
58
|
/**
|
|
59
59
|
* Creates an object for accessing a particular key in localStorage.
|
|
60
|
+
* The API is fail-safe, and usage of browser storage should be considered unreliable
|
|
61
|
+
* Local storage might simply be unavailable (iframe + browser security) or operations might fail individually
|
|
62
|
+
* Please assume that using this API can be a NO-OP
|
|
63
|
+
* See also https://github.com/facebook/docusaurus/issues/6036
|
|
60
64
|
*/
|
|
61
65
|
export const createStorageSlot = (key, options) => {
|
|
62
66
|
if (typeof window === 'undefined') {
|
|
@@ -67,9 +71,31 @@ export const createStorageSlot = (key, options) => {
|
|
|
67
71
|
return NoopStorageSlot;
|
|
68
72
|
}
|
|
69
73
|
return {
|
|
70
|
-
get: () =>
|
|
71
|
-
|
|
72
|
-
|
|
74
|
+
get: () => {
|
|
75
|
+
try {
|
|
76
|
+
return browserStorage.getItem(key);
|
|
77
|
+
}
|
|
78
|
+
catch (e) {
|
|
79
|
+
console.error(`Docusaurus storage error, can't get key=${key}`, e);
|
|
80
|
+
return null;
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
set: (value) => {
|
|
84
|
+
try {
|
|
85
|
+
browserStorage.setItem(key, value);
|
|
86
|
+
}
|
|
87
|
+
catch (e) {
|
|
88
|
+
console.error(`Docusaurus storage error, can't set ${key}=${value}`, e);
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
del: () => {
|
|
92
|
+
try {
|
|
93
|
+
browserStorage.removeItem(key);
|
|
94
|
+
}
|
|
95
|
+
catch (e) {
|
|
96
|
+
console.error(`Docusaurus storage error, can't delete key=${key}`, e);
|
|
97
|
+
}
|
|
98
|
+
},
|
|
73
99
|
};
|
|
74
100
|
};
|
|
75
101
|
/**
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export declare const translateTagsPageTitle: () => string;
|
|
8
|
+
declare type TagsListItem = Readonly<{
|
|
9
|
+
name: string;
|
|
10
|
+
permalink: string;
|
|
11
|
+
count: number;
|
|
12
|
+
}>;
|
|
13
|
+
export declare type TagLetterEntry = Readonly<{
|
|
14
|
+
letter: string;
|
|
15
|
+
tags: TagsListItem[];
|
|
16
|
+
}>;
|
|
17
|
+
export declare function listTagsByLetters(tags: readonly TagsListItem[]): TagLetterEntry[];
|
|
18
|
+
export {};
|