@docusaurus/core 2.0.0-beta.ff31de0ff → 2.0.0-rc.1

package/lib/client/exports/ComponentCreator.js

@@ -6,72 +6,105 @@
  */
 import React from 'react';
 import Loadable from 'react-loadable';
-import Loading from '@theme/Loading';
 import routesChunkNames from '@generated/routesChunkNames';
 import registry from '@generated/registry';
+import Loading from '@theme/Loading';
 import flat from '../flat';
-function ComponentCreator(path, hash) {
+import { RouteContextProvider } from '../routeContext';
+export default function ComponentCreator(path, hash) {
     // 404 page
     if (path === '*') {
         return Loadable({
             loading: Loading,
             loader: () => import('@theme/NotFound'),
+            modules: ['@theme/NotFound'],
+            webpack: () => [require.resolveWeak('@theme/NotFound')],
+            render(loaded, props) {
+                const NotFound = loaded.default;
+                return (<RouteContextProvider 
+                // Do we want a better name than native-default?
+                value={{ plugin: { name: 'native', id: 'default' } }}>
+            <NotFound {...props}/>
+          </RouteContextProvider>);
+            },
         });
     }
-    const chunkNamesKey = `${path}-${hash}`;
-    const chunkNames = routesChunkNames[chunkNamesKey];
-    const optsModules = [];
+    const chunkNames = routesChunkNames[`${path}-${hash}`];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const loader = {};
+    const modules = [];
     const optsWebpack = [];
-    const optsLoader = {};
-    /* Prepare opts data that react-loadable needs
-    https://github.com/jamiebuilds/react-loadable#declaring-which-modules-are-being-loaded
-    Example:
-    - optsLoader:
-      {
-        component: () => import('./Pages.js'),
-        content.foo: () => import('./doc1.md'),
-      }
-    - optsModules: ['./Pages.js', './doc1.md']
-    - optsWebpack: [require.resolveWeak('./Pages.js'), require.resolveWeak('./doc1.md')]
-    */
+    // A map from prop names to chunk names.
+    // e.g. Suppose the plugin added this as route:
+    //   { __comp: "...", prop: { foo: "..." }, items: ["...", "..."] }
+    // It will become:
+    //   { __comp: "...", "prop.foo": "...", "items.0": "...", "items.1": ... }
+    // Loadable.Map will _map_ over `loader` and load each key.
     const flatChunkNames = flat(chunkNames);
-    Object.keys(flatChunkNames).forEach((key) => {
-        const chunkRegistry = registry[flatChunkNames[key]];
+    Object.entries(flatChunkNames).forEach(([keyPath, chunkName]) => {
+        const chunkRegistry = registry[chunkName];
         if (chunkRegistry) {
-            /* eslint-disable prefer-destructuring */
-            optsLoader[key] = chunkRegistry[0];
-            optsModules.push(chunkRegistry[1]);
+            // eslint-disable-next-line prefer-destructuring
+            loader[keyPath] = chunkRegistry[0];
+            modules.push(chunkRegistry[1]);
             optsWebpack.push(chunkRegistry[2]);
-            /* eslint-enable prefer-destructuring */
         }
     });
     return Loadable.Map({
         loading: Loading,
-        loader: optsLoader,
-        modules: optsModules,
+        loader,
+        modules,
         webpack: () => optsWebpack,
-        render: (loaded, props) => {
-            // Clone the original object since we don't want to alter the original.
+        render(loaded, props) {
+            // `loaded` will be a map from key path (as returned from the flattened
+            // chunk names) to the modules loaded from the loaders. We now have to
+            // restore the chunk names' previous shape from this flat record.
+            // We do so by taking advantage of the existing `chunkNames` and replacing
+            // each chunk name with its loaded module, so we don't create another
+            // object from scratch.
             const loadedModules = JSON.parse(JSON.stringify(chunkNames));
-            Object.keys(loaded).forEach((key) => {
-                let val = loadedModules;
-                const keyPath = key.split('.');
-                for (let i = 0; i < keyPath.length - 1; i += 1) {
-                    val = val[keyPath[i]];
+            Object.entries(loaded).forEach(([keyPath, loadedModule]) => {
+                // JSON modules are also loaded as `{ default: ... }` (`import()`
+                // semantics) but we just want to pass the actual value to props.
+                const chunk = loadedModule.default;
+                // One loaded chunk can only be one of two things: a module (props) or a
+                // component. Modules are always JSON, so `default` always exists. This
+                // could only happen with a user-defined component.
+                if (!chunk) {
+                    throw new Error(`The page component at ${path} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);
                 }
-                val[keyPath[keyPath.length - 1]] = loaded[key].default;
-                const nonDefaultKeys = Object.keys(loaded[key]).filter((k) => k !== 'default');
-                if (nonDefaultKeys && nonDefaultKeys.length) {
-                    nonDefaultKeys.forEach((nonDefaultKey) => {
-                        val[keyPath[keyPath.length - 1]][nonDefaultKey] =
-                            loaded[key][nonDefaultKey];
+                // A module can be a primitive, for example, if the user stored a string
+                // as a prop. However, there seems to be a bug with swc-loader's CJS
+                // logic, in that it would load a JSON module with content "foo" as
+                // `{ default: "foo", 0: "f", 1: "o", 2: "o" }`. Just to be safe, we
+                // first make sure that the chunk is non-primitive.
+                if (typeof chunk === 'object' || typeof chunk === 'function') {
+                    Object.keys(loadedModule)
+                        .filter((k) => k !== 'default')
+                        .forEach((nonDefaultKey) => {
+                        chunk[nonDefaultKey] =
+                            loadedModule[nonDefaultKey];
                     });
                 }
+                // We now have this chunk prepared. Go down the key path and replace the
+                // chunk name with the actual chunk.
+                let val = loadedModules;
+                const keyPaths = keyPath.split('.');
+                keyPaths.slice(0, -1).forEach((k) => {
+                    val = val[k];
+                });
+                val[keyPaths[keyPaths.length - 1]] = chunk;
             });
-            const Component = loadedModules.component;
-            delete loadedModules.component;
-            return React.createElement(Component, Object.assign({}, loadedModules, props));
+            /* eslint-disable no-underscore-dangle */
+            const Component = loadedModules.__comp;
+            delete loadedModules.__comp;
+            const routeContext = loadedModules.__context;
+            delete loadedModules.__context;
+            /* eslint-enable no-underscore-dangle */
+            // Is there any way to put this RouteContextProvider upper in the tree?
+            return (<RouteContextProvider value={routeContext}>
+          <Component {...loadedModules} {...props}/>
+        </RouteContextProvider>);
         },
     });
 }
-export default ComponentCreator;

package/lib/client/exports/ErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+/// <reference types="@docusaurus/module-type-aliases" />
+import React, { type ReactNode } from 'react';
+import type { Props } from '@docusaurus/ErrorBoundary';
+declare type State = {
+    error: Error | null;
+};
+export default class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props);
+    componentDidCatch(error: Error): void;
+    render(): ReactNode;
+}
+export {};

package/lib/client/exports/ErrorBoundary.js

@@ -0,0 +1,37 @@
+/**
+ * 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 from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import ThemeError from '@theme/Error';
+// eslint-disable-next-line react/function-component-definition
+const DefaultFallback = (params) => (<ThemeError {...params}/>);
+export default class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    componentDidCatch(error) {
+        // Catch errors in any components below and re-render with error message
+        if (ExecutionEnvironment.canUseDOM) {
+            this.setState({ error });
+        }
+    }
+    render() {
+        const { children } = this.props;
+        const { error } = this.state;
+        if (error) {
+            const fallbackParams = {
+                error,
+                tryAgain: () => this.setState({ error: null }),
+            };
+            const fallback = this.props.fallback ?? DefaultFallback;
+            return fallback(fallbackParams);
+        }
+        // See https://github.com/facebook/docusaurus/issues/6337#issuecomment-1012913647
+        return children ?? null;
+    }
+}

package/lib/client/exports/ExecutionEnvironment.js

@@ -4,16 +4,15 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const canUseDOM = !!(typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement);
+const canUseDOM = typeof window !== 'undefined' &&
+    'document' in window &&
+    'createElement' in window.document;
 const ExecutionEnvironment = {
     canUseDOM,
-    canUseEventListeners: 
-    // @ts-expect-error: window.attachEvent is IE specific.
-    // See https://github.com/Microsoft/TypeScript/issues/3953#issuecomment-123396830
-    canUseDOM && !!(window.addEventListener || window.attachEvent),
+    // window.attachEvent is IE-specific; it's very likely Docusaurus won't work
+    // on IE anyway.
+    canUseEventListeners: canUseDOM && ('addEventListener' in window || 'attachEvent' in window),
     canUseIntersectionObserver: canUseDOM && 'IntersectionObserver' in window,
-    canUseViewport: canUseDOM && !!window.screen,
+    canUseViewport: canUseDOM && 'screen' in window,
 };
 export default ExecutionEnvironment;

package/lib/client/exports/Head.d.ts

@@ -6,6 +6,5 @@
  */
 /// <reference types="@docusaurus/module-type-aliases" />
 /// <reference types="react" />
-import type { HeadProps } from '@docusaurus/Head';
-declare function Head(props: HeadProps): JSX.Element;
-export default Head;
+import type { Props } from '@docusaurus/Head';
+export default function Head(props: Props): JSX.Element;

package/lib/client/exports/Head.js

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { Helmet } from 'react-helmet';
-function Head(props) {
-    return React.createElement(Helmet, Object.assign({}, props));
+import { Helmet } from 'react-helmet-async';
+export default function Head(props) {
+    return <Helmet {...props}/>;
 }
-export default Head;

package/lib/client/exports/Interpolate.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="@docusaurus/module-type-aliases" />
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { InterpolateProps, InterpolateValues } from '@docusaurus/Interpolate';
 export declare function interpolate<Str extends string>(text: Str, values?: InterpolateValues<Str, string | number>): string;
 export declare function interpolate<Str extends string, Value extends ReactNode>(text: Str, values?: InterpolateValues<Str, Value>): ReactNode;
-export default function Interpolate<Str extends string>({ children, values, }: InterpolateProps<Str>): ReactNode;
+export default function Interpolate<Str extends string>({ children, values, }: InterpolateProps<Str>): JSX.Element;

package/lib/client/exports/Interpolate.js

@@ -4,59 +4,30 @@
  * 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';
-/*
-Minimal implementation of a React interpolate component.
-We don't ship a markdown parser nor a feature-complete i18n library on purpose.
-More details here: https://github.com/facebook/docusaurus/pull/4295
-*/
-const ValueRegexp = /{\w+}/g;
-const ValueFoundMarker = '{}'; // does not care much
+import React, { isValidElement } from 'react';
 export function interpolate(text, values) {
-    const elements = [];
-    const processedText = text.replace(ValueRegexp, (match) => {
-        // remove {{ and }} around the placeholder
-        const key = match.substr(1, match.length - 2);
-        const value = values === null || values === void 0 ? void 0 : values[key];
-        if (typeof value !== 'undefined') {
-            const element = React.isValidElement(value)
-                ? value
-                : // For non-React elements: basic primitive->string conversion
-                    String(value);
-            elements.push(element);
-            return ValueFoundMarker;
-        }
-        else {
-            return match; // no match? add warning?
+    // eslint-disable-next-line prefer-named-capture-group
+    const segments = text.split(/(\{\w+\})/).map((seg, index) => {
+        // Odd indices (1, 3, 5...) of the segments are (potentially) interpolatable
+        if (index % 2 === 1) {
+            const value = values?.[seg.slice(1, -1)];
+            if (value !== undefined) {
+                return value;
+            }
+            // No match: add warning? There's no way to "escape" interpolation though
         }
+        return seg;
     });
-    // No interpolation to be done: just return the text
-    if (elements.length === 0) {
-        return text;
-    }
-    // Basic string interpolation: returns interpolated string
-    else if (elements.every((el) => typeof el === 'string')) {
-        return processedText
-            .split(ValueFoundMarker)
-            .reduce((str, value, index) => {
-            var _a;
-            return str.concat(value).concat((_a = elements[index]) !== null && _a !== void 0 ? _a : '');
-        }, '');
-    }
-    // JSX interpolation: returns ReactNode
-    else {
-        return processedText
-            .split(ValueFoundMarker)
-            .reduce((array, value, index) => {
-            return [
-                ...array,
-                React.createElement(React.Fragment, { key: index },
-                    value,
-                    elements[index]),
-            ];
-        }, []);
+    if (segments.some((seg) => isValidElement(seg))) {
+        return segments
+            .map((seg, index) => isValidElement(seg) ? React.cloneElement(seg, { key: index }) : seg)
+            .filter((seg) => seg !== '');
     }
+    return segments.join('');
 }
 export default function Interpolate({ children, values, }) {
-    return interpolate(children, values);
+    if (typeof children !== 'string') {
+        throw new Error(`The Docusaurus <Interpolate> component only accept simple string values. Received: ${isValidElement(children) ? 'React element' : typeof children}`);
+    }
+    return <>{interpolate(children, values)}</>;
 }

package/lib/client/exports/Link.d.ts

@@ -5,13 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="@docusaurus/module-type-aliases" />
-/// <reference types="react" />
-import type { LinkProps } from '@docusaurus/Link';
-import type docusaurus from '../docusaurus';
-declare global {
-    interface Window {
-        docusaurus: typeof docusaurus;
-    }
-}
-declare function Link({ isNavLink, to, href, activeClassName, isActive, 'data-noBrokenLinkCheck': noBrokenLinkCheck, autoAddBaseUrl, ...props }: LinkProps): JSX.Element;
-export default Link;
+import React from 'react';
+import type { Props } from '@docusaurus/Link';
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "location" | "children" | "replace" | "slot" | "style" | "title" | "component" | "exact" | "sensitive" | "strict" | "type" | "key" | "id" | "lang" | "dir" | "property" | "rel" | "href" | "isNavLink" | "className" | "to" | "innerRef" | "download" | "hrefLang" | "media" | "ping" | "target" | "referrerPolicy" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "activeClassName" | "activeStyle" | "isActive" | "data-noBrokenLinkCheck" | "autoAddBaseUrl"> & React.RefAttributes<HTMLAnchorElement>>;
+export default _default;

package/lib/client/exports/Link.js

@@ -4,8 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, } from 'react';
 import { NavLink, Link as RRLink } from 'react-router-dom';
+import { applyTrailingSlash } from '@docusaurus/utils-common';
+import useDocusaurusContext from './useDocusaurusContext';
 import isInternalUrl from './isInternalUrl';
 import ExecutionEnvironment from './ExecutionEnvironment';
 import { useLinksCollector } from '../LinksCollector';
@@ -16,10 +18,12 @@ import { useBaseUrlUtils } from './useBaseUrl';
 // this is because useBaseUrl() actually transforms relative links
 // like "introduction" to "/baseUrl/introduction" => bad behavior to fix
 const shouldAddBaseUrlAutomatically = (to) => to.startsWith('/');
-function Link({ isNavLink, to, href, activeClassName, isActive, 'data-noBrokenLinkCheck': noBrokenLinkCheck, autoAddBaseUrl = true, ...props }) {
-    var _a;
+function Link({ isNavLink, to, href, activeClassName, isActive, 'data-noBrokenLinkCheck': noBrokenLinkCheck, autoAddBaseUrl = true, ...props }, forwardedRef) {
+    const { siteConfig: { trailingSlash, baseUrl }, } = useDocusaurusContext();
     const { withBaseUrl } = useBaseUrlUtils();
     const linksCollector = useLinksCollector();
+    const innerRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => innerRef.current);
     // IMPORTANT: using to or href should not change anything
     // For example, MDX links will ALWAYS give us the href props
     // Using one prop or the other should not be used to distinguish
@@ -37,41 +41,40 @@ function Link({ isNavLink, to, href, activeClassName, isActive, 'data-noBrokenLi
     // see https://github.com/facebook/docusaurus/issues/3309
     // note: we want baseUrl to be appended (see issue for details)
     // TODO read routes and automatically detect internal/external links?
-    const targetLinkWithoutPathnameProtocol = targetLinkUnprefixed === null || targetLinkUnprefixed === void 0 ? void 0 : targetLinkUnprefixed.replace('pathname://', '');
+    const targetLinkWithoutPathnameProtocol = targetLinkUnprefixed?.replace('pathname://', '');
     // TODO we should use ReactRouter basename feature instead!
     // Automatically apply base url in links that start with /
-    const targetLink = typeof targetLinkWithoutPathnameProtocol !== 'undefined'
+    let targetLink = typeof targetLinkWithoutPathnameProtocol !== 'undefined'
         ? maybeAddBaseUrl(targetLinkWithoutPathnameProtocol)
         : undefined;
+    if (targetLink && isInternal) {
+        targetLink = applyTrailingSlash(targetLink, { trailingSlash, baseUrl });
+    }
     const preloaded = useRef(false);
-    const LinkComponent = isNavLink ? NavLink : RRLink;
+    const LinkComponent = (isNavLink ? NavLink : RRLink);
     const IOSupported = ExecutionEnvironment.canUseIntersectionObserver;
-    let io;
-    const handleIntersection = (el, cb) => {
-        io = new window.IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (el === entry.target) {
-                    // If element is in viewport, stop listening/observing and run callback.
-                    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-                    if (entry.isIntersecting || entry.intersectionRatio > 0) {
-                        io.unobserve(el);
-                        io.disconnect();
-                        cb();
+    const ioRef = useRef();
+    const handleRef = (el) => {
+        innerRef.current = el;
+        if (IOSupported && el && isInternal) {
+            // If IO supported and element reference found, set up Observer.
+            ioRef.current = new window.IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (el === entry.target) {
+                        // If element is in viewport, stop observing and run callback.
+                        // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+                        if (entry.isIntersecting || entry.intersectionRatio > 0) {
+                            ioRef.current.unobserve(el);
+                            ioRef.current.disconnect();
+                            if (targetLink != null) {
+                                window.docusaurus.prefetch(targetLink);
+                            }
+                        }
                     }
-                }
-            });
-        });
-        // Add element to the observer.
-        io.observe(el);
-    };
-    const handleRef = (ref) => {
-        if (IOSupported && ref && isInternal) {
-            // If IO supported and element reference found, setup Observer functionality.
-            handleIntersection(ref, () => {
-                if (targetLink != null) {
-                    window.docusaurus.prefetch(targetLink);
-                }
+                });
             });
+            // Add element to the observer.
+            ioRef.current.observe(el);
         }
     };
     const onMouseEnter = () => {
@@ -89,19 +92,22 @@ function Link({ isNavLink, to, href, activeClassName, isActive, 'data-noBrokenLi
         }
         // When unmounting, stop intersection observer from watching.
         return () => {
-            if (IOSupported && io) {
-                io.disconnect();
+            if (IOSupported && ioRef.current) {
+                ioRef.current.disconnect();
             }
         };
-    }, [targetLink, IOSupported, isInternal]);
-    const isAnchorLink = (_a = targetLink === null || targetLink === void 0 ? void 0 : targetLink.startsWith('#')) !== null && _a !== void 0 ? _a : false;
+    }, [ioRef, targetLink, IOSupported, isInternal]);
+    const isAnchorLink = targetLink?.startsWith('#') ?? false;
     const isRegularHtmlLink = !targetLink || !isInternal || isAnchorLink;
-    if (targetLink && isInternal && !isAnchorLink && !noBrokenLinkCheck) {
+    if (!isRegularHtmlLink && !noBrokenLinkCheck) {
         linksCollector.collectLink(targetLink);
     }
     return isRegularHtmlLink ? (
     // eslint-disable-next-line jsx-a11y/anchor-has-content
-    React.createElement("a", Object.assign({ href: targetLink }, (targetLinkUnprefixed &&
-        !isInternal && { target: '_blank', rel: 'noopener noreferrer' }), props))) : (React.createElement(LinkComponent, Object.assign({}, props, { onMouseEnter: onMouseEnter, innerRef: handleRef, to: targetLink || '' }, (isNavLink && { isActive, activeClassName }))));
+    <a ref={innerRef} href={targetLink} {...(targetLinkUnprefixed &&
+        !isInternal && { target: '_blank', rel: 'noopener noreferrer' })} {...props}/>) : (<LinkComponent {...props} onMouseEnter={onMouseEnter} innerRef={handleRef} to={targetLink} 
+    // Avoid "React does not recognize the `activeClassName` prop on a DOM
+    // element"
+    {...(isNavLink && { isActive, activeClassName })}/>);
 }
-export default Link;
+export default React.forwardRef(Link);

package/lib/client/exports/Translate.d.ts

@@ -6,7 +6,7 @@
  */
 /// <reference types="@docusaurus/module-type-aliases" />
 /// <reference types="react" />
-import { InterpolateValues } from '@docusaurus/Interpolate';
+import { type InterpolateValues } from '@docusaurus/Interpolate';
 import type { TranslateParam, TranslateProps } from '@docusaurus/Translate';
 export declare function translate<Str extends string>({ message, id }: TranslateParam<Str>, values?: InterpolateValues<Str, string | number>): string;
 export default function Translate<Str extends string>({ children, id, values, }: TranslateProps<Str>): JSX.Element;

package/lib/client/exports/Translate.js

@@ -5,25 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Interpolate, { interpolate, } from '@docusaurus/Interpolate';
+import { interpolate } from '@docusaurus/Interpolate';
 // Can't read it from context, due to exposing imperative API
 import codeTranslations from '@generated/codeTranslations';
 function getLocalizedMessage({ id, message, }) {
-    var _a;
-    return (_a = codeTranslations[id !== null && id !== void 0 ? id : message]) !== null && _a !== void 0 ? _a : message;
+    if (typeof id === 'undefined' && typeof message === 'undefined') {
+        throw new Error('Docusaurus translation declarations must have at least a translation id or a default translation message');
+    }
+    return codeTranslations[(id ?? message)] ?? message ?? id;
 }
 // Imperative translation API is useful for some edge-cases:
 // - translating page titles (meta)
 // - translating string props (input placeholders, image alt, aria labels...)
 export function translate({ message, id }, values) {
-    var _a;
-    const localizedMessage = (_a = getLocalizedMessage({ message, id })) !== null && _a !== void 0 ? _a : message;
+    const localizedMessage = getLocalizedMessage({ message, id });
     return interpolate(localizedMessage, values);
 }
 // Maybe we'll want to improve this component with additional features
-// Like toggling a translation mode that adds a little translation button near the text?
+// Like toggling a translation mode that adds a little translation button near
+// the text?
 export default function Translate({ children, id, values, }) {
-    var _a;
-    const localizedMessage = (_a = getLocalizedMessage({ message: children, id })) !== null && _a !== void 0 ? _a : children;
-    return React.createElement(Interpolate, { values: values }, localizedMessage);
+    if (children && typeof children !== 'string') {
+        console.warn('Illegal <Translate> children', children);
+        throw new Error('The Docusaurus <Translate> component only accept simple string values');
+    }
+    const localizedMessage = getLocalizedMessage({ message: children, id });
+    return <>{interpolate(localizedMessage, values)}</>;
 }

package/lib/client/exports/constants.js

@@ -4,15 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
-// eslint-disable-next-line no-restricted-imports
-export {
-  // constants were only available on node
-  // this makes some useful constants available to frontend/themes too
-  // import {DEFAULT_PLUGIN_ID} '@docusaurus/constants'
-  DEFAULT_PLUGIN_ID,
-} from '../../constants';
- */
-// Not duplicating the constants seems to produce
-// weird TS compilation side-effects
+// Constants used on the client-side: duplicated from server-side code
 export const DEFAULT_PLUGIN_ID = 'default';

package/lib/client/exports/isInternalUrl.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 export function hasProtocol(url) {
-    return /^(\w*:|\/\/)/.test(url) === true;
+    return /^(?:\w*:|\/\/)/.test(url);
 }
 export default function isInternalUrl(url) {
     return typeof url !== 'undefined' && !hasProtocol(url);

package/lib/client/exports/renderRoutes.d.ts

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { renderRoutes } from 'react-router-config';
-export default renderRoutes;
+export { renderRoutes as default } from 'react-router-config';

package/lib/client/exports/renderRoutes.js

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { renderRoutes } from 'react-router-config';
-export default renderRoutes;
+export { renderRoutes as default } from 'react-router-config';

package/lib/client/exports/router.d.ts

@@ -4,4 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export * from 'react-router-dom';
+export { useHistory, useLocation, Redirect, matchPath } from 'react-router-dom';

package/lib/client/exports/router.js

@@ -4,4 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export * from 'react-router-dom';
+export { useHistory, useLocation, Redirect, matchPath } from 'react-router-dom';