@docusaurus/core 2.0.0-beta.15d451942 → 2.0.0-beta.18

package/lib/client/LinksCollector.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useContext, createContext } from 'react';
+import React, { useContext } from 'react';
 export const createStatefulLinksCollector = () => {
     // Set to dedup, as it's not useful to collect multiple times the same link
     const allLinks = new Set();
@@ -12,20 +12,16 @@ export const createStatefulLinksCollector = () => {
         collectLink: (link) => {
             allLinks.add(link);
         },
-        getCollectedLinks: () => {
-            return [...allLinks];
-        },
+        getCollectedLinks: () => [...allLinks],
     };
 };
-const Context = createContext({
+const Context = React.createContext({
     collectLink: () => {
         // noop by default for client
         // we only use the broken links checker server-side
     },
 });
-export const useLinksCollector = () => {
-    return useContext(Context);
-};
-export const ProvideLinksCollector = ({ children, linksCollector, }) => {
-    return React.createElement(Context.Provider, { value: linksCollector }, children);
-};
+export const useLinksCollector = () => useContext(Context);
+export function LinksCollectorProvider({ children, linksCollector, }) {
+    return <Context.Provider value={linksCollector}>{children}</Context.Provider>;
+}

package/lib/client/PendingNavigation.d.ts

@@ -4,6 +4,29 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference types="node" />
+import React from 'react';
+import { type RouteComponentProps } from 'react-router-dom';
+import type { RouteConfig } from 'react-router-config';
+import type { Location } from 'history';
 import './nprogress.css';
-declare const _default: any;
+interface Props extends RouteComponentProps {
+    readonly routes: RouteConfig[];
+    readonly delay: number;
+    readonly location: Location;
+}
+interface State {
+    nextRouteHasLoaded: boolean;
+}
+declare class PendingNavigation extends React.Component<Props, State> {
+    previousLocation: Location | null;
+    progressBarTimeout: NodeJS.Timeout | null;
+    constructor(props: Props);
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
+    private clearProgressBarTimeout;
+    private startProgressBar;
+    private stopProgressBar;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<Pick<Props, "routes" | "delay">, any> & import("react-router").WithRouterStatics<typeof PendingNavigation>;
 export default _default;

package/lib/client/PendingNavigation.js

@@ -26,9 +26,9 @@ class PendingNavigation extends React.Component {
     // is done loading.
     shouldComponentUpdate(nextProps, nextState) {
         const routeDidChange = nextProps.location !== this.props.location;
-        const { routes, delay = 1000 } = this.props;
-        // If `routeDidChange` is true, means the router is trying to navigate to a new
-        // route. We will preload the new route.
+        const { routes, delay } = this.props;
+        // If `routeDidChange` is true, means the router is trying to navigate to a
+        // new route. We will preload the new route.
         if (routeDidChange) {
             const nextLocation = normalizeLocation(nextProps.location);
             this.startProgressBar(delay);
@@ -46,9 +46,7 @@ class PendingNavigation extends React.Component {
                 });
                 // Route has loaded, we can reset previousLocation.
                 this.previousLocation = null;
-                this.setState({
-                    nextRouteHasLoaded: true,
-                }, this.stopProgressBar);
+                this.setState({ nextRouteHasLoaded: true }, this.stopProgressBar);
                 const { hash } = nextLocation;
                 if (!hash) {
                     window.scrollTo(0, 0);
@@ -92,7 +90,7 @@ class PendingNavigation extends React.Component {
     }
     render() {
         const { children, location } = this.props;
-        return (React.createElement(Route, { location: normalizeLocation(location), render: () => children }));
+        return (<Route location={normalizeLocation(location)} render={() => children}/>);
     }
 }
 export default withRouter(PendingNavigation);

package/lib/{webpack/sharedModuleAliases.d.ts → client/SiteMetadataDefaults.d.ts}

@@ -4,7 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const SharedModuleAliases: {
-    'react-loadable': string;
-};
-export default SharedModuleAliases;
+/// <reference types="react" />
+export default function SiteMetadataDefaults(): JSX.Element;

package/lib/client/SiteMetadataDefaults.js

@@ -0,0 +1,19 @@
+/**
+ * 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 Head from '@docusaurus/Head';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+export default function SiteMetadataDefaults() {
+    const { siteConfig: { favicon, tagline, title }, i18n: { currentLocale, localeConfigs }, } = useDocusaurusContext();
+    const faviconUrl = useBaseUrl(favicon);
+    const { htmlLang, direction: htmlDir } = localeConfigs[currentLocale];
+    return (<Head defaultTitle={`${title}${tagline ? ` · ${tagline}` : ''}`}>
+      <html lang={htmlLang} dir={htmlDir}/>
+      {favicon && <link rel="icon" href={faviconUrl}/>}
+    </Head>);
+}

package/lib/client/baseUrlIssueBanner/BaseUrlIssueBanner.d.ts

@@ -6,4 +6,17 @@
  */
 /// <reference types="react" />
 import './styles.module.css';
+declare global {
+    interface Window {
+        __DOCUSAURUS_INSERT_BASEURL_BANNER: boolean;
+    }
+}
+/**
+ * We want to help the users with a bad baseUrl configuration (very common
+ * error) Help message is inlined, and hidden if JS or CSS is able to load
+ * Note: it might create false positives (ie network failures): not a big deal
+ * Note: we only inline this for the homepage to avoid polluting all the site's
+ * pages
+ * @see https://github.com/facebook/docusaurus/pull/3621
+ */
 export default function BaseUrlIssueBanner(): JSX.Element | null;

package/lib/client/baseUrlIssueBanner/BaseUrlIssueBanner.js

@@ -67,21 +67,26 @@ function BaseUrlIssueBannerEnabled() {
     useLayoutEffect(() => {
         window[InsertBannerWindowAttribute] = false;
     }, []);
-    return (React.createElement(React.Fragment, null,
-        !ExecutionEnvironment.canUseDOM && (React.createElement(Head, null,
-            React.createElement("script", null, createInlineScript(baseUrl)))),
-        React.createElement("div", { id: BannerContainerId })));
+    return (<>
+      {!ExecutionEnvironment.canUseDOM && (<Head>
+          <script>{createInlineScript(baseUrl)}</script>
+        </Head>)}
+      <div id={BannerContainerId}/>
+    </>);
 }
-// We want to help the users with a bad baseUrl configuration (very common error)
-// Help message is inlined, and hidden if JS or CSS is able to load
-// Note: it might create false positives (ie network failures): not a big deal
-// Note: we only inline this for the homepage to avoid polluting all the site's pages
-// See https://github.com/facebook/docusaurus/pull/3621
+/**
+ * We want to help the users with a bad baseUrl configuration (very common
+ * error) Help message is inlined, and hidden if JS or CSS is able to load
+ * Note: it might create false positives (ie network failures): not a big deal
+ * Note: we only inline this for the homepage to avoid polluting all the site's
+ * pages
+ * @see https://github.com/facebook/docusaurus/pull/3621
+ */
 export default function BaseUrlIssueBanner() {
     const { siteConfig: { baseUrl, baseUrlIssueBanner }, } = useDocusaurusContext();
     const { pathname } = useLocation();
     // returns true for the homepage during SRR
     const isHomePage = pathname === baseUrl;
     const enabled = baseUrlIssueBanner && isHomePage;
-    return enabled ? React.createElement(BaseUrlIssueBannerEnabled, null) : null;
+    return enabled ? <BaseUrlIssueBannerEnabled /> : null;
 }

package/lib/client/browserContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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, { type ReactNode } from 'react';
+export declare const Context: React.Context<boolean>;
+export declare function BrowserContextProvider({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/client/browserContext.js

@@ -0,0 +1,22 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+// Encapsulate the logic to avoid React hydration problems
+// See https://www.joshwcomeau.com/react/the-perils-of-rehydration/
+// On first client-side render, we need to render exactly as the server rendered
+// isBrowser is set to true only after a successful hydration
+// Note, isBrowser is not part of useDocusaurusContext() for perf reasons
+// Using useDocusaurusContext() (much more common need) should not trigger
+// re-rendering after a successful hydration
+export const Context = React.createContext(false);
+export function BrowserContextProvider({ children, }) {
+    const [isBrowser, setIsBrowser] = useState(false);
+    useEffect(() => {
+        setIsBrowser(true);
+    }, []);
+    return <Context.Provider value={isBrowser}>{children}</Context.Provider>;
+}

package/lib/client/client-lifecycles-dispatcher.d.ts

@@ -4,9 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-interface Dispatchers {
-    onRouteUpdate: (...args: any) => void;
-    onRouteUpdateDelayed: (...args: any) => void;
-}
-declare const clientLifecyclesDispatchers: Dispatchers;
+import type { ClientModule } from '@docusaurus/types';
+declare const clientLifecyclesDispatchers: Required<ClientModule>;
 export default clientLifecyclesDispatchers;

package/lib/client/client-lifecycles-dispatcher.js

@@ -4,24 +4,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-// too dynamic
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import clientModules from '@generated/client-modules';
-function dispatchLifecycleAction(lifecycleAction, ...args) {
+function dispatchLifecycleAction(lifecycleAction, args) {
     clientModules.forEach((clientModule) => {
-        var _a, _b;
-        const lifecycleFunction = (_b = (_a = clientModule === null || clientModule === void 0 ? void 0 : clientModule.default) === null || _a === void 0 ? void 0 : _a[lifecycleAction]) !== null && _b !== void 0 ? _b : clientModule[lifecycleAction];
-        if (lifecycleFunction) {
-            lifecycleFunction(...args);
-        }
+        const lifecycleFunction = (clientModule?.default?.[lifecycleAction] ??
+            clientModule[lifecycleAction]);
+        lifecycleFunction?.(...args);
     });
 }
 const clientLifecyclesDispatchers = {
     onRouteUpdate(...args) {
-        dispatchLifecycleAction('onRouteUpdate', ...args);
+        dispatchLifecycleAction('onRouteUpdate', args);
     },
     onRouteUpdateDelayed(...args) {
-        dispatchLifecycleAction('onRouteUpdateDelayed', ...args);
+        dispatchLifecycleAction('onRouteUpdateDelayed', args);
     },
 };
 export default clientLifecyclesDispatchers;

package/lib/client/clientEntry.js

@@ -5,23 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { hydrate, render } from 'react-dom';
+import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
 import routes from '@generated/routes';
 import ExecutionEnvironment from './exports/ExecutionEnvironment';
 import App from './App';
 import preload from './preload';
 import docusaurus from './docusaurus';
-// Client-side render (e.g: running in browser) to become single-page application (SPA).
+// Client-side render (e.g: running in browser) to become single-page
+// application (SPA).
 if (ExecutionEnvironment.canUseDOM) {
     window.docusaurus = docusaurus;
-    // For production, attempt to hydrate existing markup for performant first-load experience.
+    // For production, attempt to hydrate existing markup for performant
+    // first-load experience.
     // For development, there is no existing markup so we had to render it.
-    // Note that we also preload async component to avoid first-load loading screen.
-    const renderMethod = process.env.NODE_ENV === 'production' ? hydrate : render;
+    // We also preload async component to avoid first-load loading screen.
+    const renderMethod = process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render;
     preload(routes, window.location.pathname).then(() => {
-        renderMethod(React.createElement(BrowserRouter, null,
-            React.createElement(App, null)), document.getElementById('__docusaurus'));
+        renderMethod(<HelmetProvider>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </HelmetProvider>, document.getElementById('__docusaurus'));
     });
     // Webpack Hot Module Replacement API
     if (module.hot) {

package/lib/client/docusaurus.d.ts

@@ -1,3 +1,9 @@
+/**
+ * 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.
+ */
 declare global {
     const __webpack_require__: {
         gca: (name: string) => string;

package/lib/client/docusaurus.js

@@ -12,31 +12,20 @@ import preloadHelper from './preload';
 import flat from './flat';
 const fetched = {};
 const loaded = {};
-const isSlowConnection = () => {
-    // If user is on slow or constrained connection.
-    if (`connection` in navigator) {
-        if ((navigator.connection.effectiveType || ``).indexOf(`2g`) !== -1 &&
-            navigator.connection.saveData) {
-            return true;
-        }
-    }
-    return false;
-};
+// If user is on slow or constrained connection.
+const isSlowConnection = () => navigator.connection?.effectiveType.includes('2g') &&
+    navigator.connection?.saveData;
 const canPrefetch = (routePath) => !isSlowConnection() && !loaded[routePath] && !fetched[routePath];
 const canPreload = (routePath) => !isSlowConnection() && !loaded[routePath];
-const flatten = (arrays) => Array.prototype.concat.apply([], arrays);
 // Remove the last part containing the route hash
 // input: /blog/2018/12/14/Happy-First-Birthday-Slash-fe9
 // output: /blog/2018/12/14/Happy-First-Birthday-Slash
-const removeRouteNameHash = (str) => str.replace(/(-[^-]+)$/, '');
-const getChunkNamesToLoad = (path) => {
-    return flatten(Object.entries(routesChunkNames)
-        .filter(([routeNameWithHash]) => removeRouteNameHash(routeNameWithHash) === path)
-        .map(([, routeChunks]) => {
-        // flat() is useful for nested chunk names, it's not like array.flat()
-        return Object.values(flat(routeChunks));
-    }));
-};
+const removeRouteNameHash = (str) => str.replace(/-[^-]+$/, '');
+const getChunkNamesToLoad = (path) => Object.entries(routesChunkNames)
+    .filter(([routeNameWithHash]) => removeRouteNameHash(routeNameWithHash) === path)
+    .flatMap(([, routeChunks]) => 
+// flat() is useful for nested chunk names, it's not like array.flat()
+Object.values(flat(routeChunks)));
 const docusaurus = {
     prefetch: (routePath) => {
         if (!canPrefetch(routePath)) {
@@ -46,14 +35,16 @@ const docusaurus = {
         fetched[routePath] = true;
         // Find all webpack chunk names needed.
         const matches = matchRoutes(routes, routePath);
-        const chunkNamesNeeded = flatten(matches.map((match) => getChunkNamesToLoad(match.route.path)));
+        const chunkNamesNeeded = matches.flatMap((match) => getChunkNamesToLoad(match.route.path));
         // Prefetch all webpack chunk assets file needed.
         chunkNamesNeeded.forEach((chunkName) => {
-            // "__webpack_require__.gca" is a custom function provided by ChunkAssetPlugin.
-            // Pass it the chunkName or chunkId you want to load and it will return the URL for that chunk.
-            // eslint-disable-next-line no-undef
+            // "__webpack_require__.gca" is a custom function provided by
+            // ChunkAssetPlugin. Pass it the chunkName or chunkId you want to load and
+            // it will return the URL for that chunk.
+            // eslint-disable-next-line camelcase
             const chunkAsset = __webpack_require__.gca(chunkName);
-            // In some cases, webpack might decide to optimize further & hence the chunk assets are merged to another chunk/previous chunk.
+            // In some cases, webpack might decide to optimize further & hence the
+            // chunk assets are merged to another chunk/previous chunk.
             // Hence, we can safely filter it out/don't need to load it.
             if (chunkAsset && !/undefined/.test(chunkAsset)) {
                 prefetchHelper(chunkAsset);

package/lib/client/docusaurusContext.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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, { type ReactNode } from 'react';
+import type { DocusaurusContext } from '@docusaurus/types';
+export declare const Context: React.Context<DocusaurusContext>;
+export declare function DocusaurusContextProvider({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/client/docusaurusContext.js

@@ -0,0 +1,25 @@
+/**
+ * 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 siteConfig from '@generated/docusaurus.config';
+import globalData from '@generated/globalData';
+import i18n from '@generated/i18n';
+import codeTranslations from '@generated/codeTranslations';
+import siteMetadata from '@generated/site-metadata';
+// Static value on purpose: don't make it dynamic!
+// Using context is still useful for testability reasons.
+const contextValue = {
+    siteConfig,
+    siteMetadata,
+    globalData,
+    i18n,
+    codeTranslations,
+};
+export const Context = React.createContext(contextValue);
+export function DocusaurusContextProvider({ children, }) {
+    return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+}

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

@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-declare function BrowserOnly({ children, fallback, }: {
-    children?: () => JSX.Element;
+export default function BrowserOnly({ children, fallback, }: {
+    children: () => JSX.Element;
     fallback?: JSX.Element;
 }): JSX.Element | null;
-export default BrowserOnly;

package/lib/client/exports/BrowserOnly.js

@@ -4,12 +4,19 @@
  * 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 './ExecutionEnvironment';
-function BrowserOnly({ children, fallback, }) {
-    if (!ExecutionEnvironment.canUseDOM || children == null) {
-        return fallback || null;
+import React, { isValidElement } from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+// Similar comp to the one described here:
+// https://www.joshwcomeau.com/react/the-perils-of-rehydration/#abstractions
+export default function BrowserOnly({ children, fallback, }) {
+    const isBrowser = useIsBrowser();
+    if (isBrowser) {
+        if (typeof children !== 'function' &&
+            process.env.NODE_ENV === 'development') {
+            throw new Error(`Docusaurus error: The children of <BrowserOnly> must be a "render function", e.g. <BrowserOnly>{() => <span>{window.location.href}</span>}</BrowserOnly>.
+Current type: ${isValidElement(children) ? 'React element' : typeof children}`);
+        }
+        return <>{children()}</>;
     }
-    return React.createElement(React.Fragment, null, children());
+    return fallback ?? null;
 }
-export default BrowserOnly;

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

@@ -5,5 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Loadable from 'react-loadable';
-declare function ComponentCreator(path: string, hash: string): ReturnType<typeof Loadable>;
-export default ComponentCreator;
+export default function ComponentCreator(path: string, hash: string): ReturnType<typeof Loadable>;

package/lib/client/exports/ComponentCreator.js

@@ -10,18 +10,27 @@ import Loading from '@theme/Loading';
 import routesChunkNames from '@generated/routesChunkNames';
 import registry from '@generated/registry';
 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'),
+            loader: async () => {
+                const NotFound = (await import('@theme/NotFound')).default;
+                return (props) => (
+                // Is there a better API for this?
+                <RouteContextProvider value={{ plugin: { name: 'native', id: 'default' } }}>
+            <NotFound {...props}/>
+          </RouteContextProvider>);
+            },
         });
     }
     const chunkNamesKey = `${path}-${hash}`;
     const chunkNames = routesChunkNames[chunkNamesKey];
     const optsModules = [];
     const optsWebpack = [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const optsLoader = {};
     /* Prepare opts data that react-loadable needs
     https://github.com/jamiebuilds/react-loadable#declaring-which-modules-are-being-loaded
@@ -32,17 +41,19 @@ function ComponentCreator(path, hash) {
         content.foo: () => import('./doc1.md'),
       }
     - optsModules: ['./Pages.js', './doc1.md']
-    - optsWebpack: [require.resolveWeak('./Pages.js'), require.resolveWeak('./doc1.md')]
+    - optsWebpack: [
+        require.resolveWeak('./Pages.js'),
+        require.resolveWeak('./doc1.md'),
+      ]
     */
     const flatChunkNames = flat(chunkNames);
-    Object.keys(flatChunkNames).forEach((key) => {
-        const chunkRegistry = registry[flatChunkNames[key]];
+    Object.entries(flatChunkNames).forEach(([key, chunkName]) => {
+        const chunkRegistry = registry[chunkName];
         if (chunkRegistry) {
-            /* eslint-disable prefer-destructuring */
+            // eslint-disable-next-line prefer-destructuring
             optsLoader[key] = chunkRegistry[0];
             optsModules.push(chunkRegistry[1]);
             optsWebpack.push(chunkRegistry[2]);
-            /* eslint-enable prefer-destructuring */
         }
     });
     return Loadable.Map({
@@ -54,24 +65,34 @@ function ComponentCreator(path, hash) {
             // Clone the original object since we don't want to alter the original.
             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]];
+                const newComp = loaded[key].default;
+                if (!newComp) {
+                    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];
+                if (typeof newComp === 'object' || typeof newComp === 'function') {
+                    Object.keys(loaded[key])
+                        .filter((k) => k !== 'default')
+                        .forEach((nonDefaultKey) => {
+                        newComp[nonDefaultKey] = loaded[key][nonDefaultKey];
                     });
                 }
+                let val = loadedModules;
+                const keyPath = key.split('.');
+                keyPath.slice(0, -1).forEach((k) => {
+                    val = val[k];
+                });
+                val[keyPath[keyPath.length - 1]] = newComp;
             });
             const Component = loadedModules.component;
             delete loadedModules.component;
-            return React.createElement(Component, Object.assign({}, loadedModules, props));
+            /* eslint-disable no-underscore-dangle */
+            const routeContextModule = loadedModules.__routeContextModule;
+            delete loadedModules.__routeContextModule;
+            /* eslint-enable no-underscore-dangle */
+            // Is there any way to put this RouteContextProvider upper in the tree?
+            return (<RouteContextProvider value={routeContextModule}>
+          <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';
+interface 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,35 @@
+/**
+ * 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 DefaultFallback from '@theme/Error';
+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 fallback = this.props.fallback ?? DefaultFallback;
+            return fallback({
+                error,
+                tryAgain: () => this.setState({ error: null }),
+            });
+        }
+        return (children ??
+            // See https://github.com/facebook/docusaurus/issues/6337#issuecomment-1012913647
+            null);
+    }
+}

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;