@docusaurus/core 0.0.0-4849 → 0.0.0-4852

package/lib/client/App.js

@@ -6,7 +6,9 @@
  */
 import React from 'react';
 import routes from '@generated/routes';
-import renderRoutes from './exports/renderRoutes';
+import { useLocation } from '@docusaurus/router';
+import normalizeLocation from './normalizeLocation';
+import renderRoutes from '@docusaurus/renderRoutes';
 import { BrowserContextProvider } from './browserContext';
 import { DocusaurusContextProvider } from './docusaurusContext';
 import PendingNavigation from './PendingNavigation';
@@ -19,6 +21,8 @@ import './clientLifecyclesDispatcher';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
 import Error from '@theme/Error';
 export default function App() {
+    const routeElement = renderRoutes(routes);
+    const location = useLocation();
     return (<ErrorBoundary fallback={Error}>
       <DocusaurusContextProvider>
         <BrowserContextProvider>
@@ -26,8 +30,8 @@ export default function App() {
             <SiteMetadataDefaults />
             <SiteMetadata />
             <BaseUrlIssueBanner />
-            <PendingNavigation routes={routes} delay={1000}>
-              {renderRoutes(routes)}
+            <PendingNavigation location={normalizeLocation(location)} delay={200}>
+              {routeElement}
             </PendingNavigation>
           </Root>
         </BrowserContextProvider>

package/lib/client/PendingNavigation.d.ts

@@ -5,12 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 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 type Props = RouteComponentProps & {
-    readonly routes: RouteConfig[];
+declare type Props = {
     readonly delay: number;
     readonly location: Location;
     readonly children: JSX.Element;
@@ -28,5 +25,4 @@ declare class PendingNavigation extends React.Component<Props, State> {
     private stopProgressBar;
     render(): JSX.Element;
 }
-declare const _default: React.ComponentClass<Pick<Props, "children" | "routes" | "delay">, any> & import("react-router").WithRouterStatics<typeof PendingNavigation>;
-export default _default;
+export default PendingNavigation;

package/lib/client/PendingNavigation.js

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { Route, withRouter } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import nprogress from 'nprogress';
 import clientLifecyclesDispatcher from './clientLifecyclesDispatcher';
 import preload from './preload';
-import normalizeLocation from './normalizeLocation';
 import './nprogress.css';
 nprogress.configure({ showSpinner: false });
 class PendingNavigation extends React.Component {
@@ -25,64 +24,53 @@ class PendingNavigation extends React.Component {
     // Intercept location update and still show current route until next route
     // is done loading.
     shouldComponentUpdate(nextProps, nextState) {
-        const routeDidChange = nextProps.location !== this.props.location;
-        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);
-            // Save the location first.
-            this.previousLocation = normalizeLocation(this.props.location);
-            this.setState({
-                nextRouteHasLoaded: false,
-            });
-            // Load data while the old screen remains.
-            preload(routes, nextLocation.pathname)
-                .then(() => {
-                clientLifecyclesDispatcher.onRouteUpdate({
-                    previousLocation: this.previousLocation,
-                    location: nextLocation,
-                });
-                // Route has loaded, we can reset previousLocation.
-                this.previousLocation = null;
-                this.setState({ nextRouteHasLoaded: true }, this.stopProgressBar);
-                const { hash } = nextLocation;
-                if (!hash) {
-                    window.scrollTo(0, 0);
-                }
-                else {
-                    const id = decodeURIComponent(hash.substring(1));
-                    const element = document.getElementById(id);
-                    if (element) {
-                        element.scrollIntoView();
-                    }
-                }
-            })
-                .catch((e) => console.warn(e));
-            return false;
-        }
-        // There's a pending route transition. Don't update until it's done.
-        if (!nextState.nextRouteHasLoaded) {
-            return false;
+        if (nextProps.location === this.props.location) {
+            // `nextRouteHasLoaded` is false means there's a pending route transition.
+            // Don't update until it's done.
+            return nextState.nextRouteHasLoaded;
         }
-        // Route has loaded, we can update now.
-        return true;
+        // props.location being different means the router is trying to navigate to
+        // a new route. We will preload the new route.
+        const nextLocation = nextProps.location;
+        // Save the location first.
+        this.previousLocation = this.props.location;
+        this.setState({ nextRouteHasLoaded: false });
+        this.startProgressBar();
+        // Load data while the old screen remains.
+        preload(nextLocation.pathname)
+            .then(() => {
+            clientLifecyclesDispatcher.onRouteUpdate({
+                previousLocation: this.previousLocation,
+                location: nextLocation,
+            });
+            this.setState({ nextRouteHasLoaded: true }, this.stopProgressBar);
+            const { hash } = nextLocation;
+            if (!hash) {
+                window.scrollTo(0, 0);
+            }
+            else {
+                const id = decodeURIComponent(hash.substring(1));
+                const element = document.getElementById(id);
+                element?.scrollIntoView();
+            }
+        })
+            .catch((e) => console.warn(e));
+        return false;
     }
     clearProgressBarTimeout() {
         if (this.progressBarTimeout) {
-            clearTimeout(this.progressBarTimeout);
+            window.clearTimeout(this.progressBarTimeout);
             this.progressBarTimeout = null;
         }
     }
-    startProgressBar(delay) {
+    startProgressBar() {
         this.clearProgressBarTimeout();
-        this.progressBarTimeout = setTimeout(() => {
+        this.progressBarTimeout = window.setTimeout(() => {
             clientLifecyclesDispatcher.onRouteUpdateDelayed({
-                location: normalizeLocation(this.props.location),
+                location: this.props.location,
             });
             nprogress.start();
-        }, delay);
+        }, this.props.delay);
     }
     stopProgressBar() {
         this.clearProgressBarTimeout();
@@ -90,7 +78,9 @@ class PendingNavigation extends React.Component {
     }
     render() {
         const { children, location } = this.props;
-        return (<Route location={normalizeLocation(location)} render={() => children}/>);
+        // Use a controlled <Route> to trick all descendants into rendering the old
+        // location.
+        return <Route location={location} render={() => children}/>;
     }
 }
-export default withRouter(PendingNavigation);
+export default PendingNavigation;

package/lib/client/clientEntry.js

@@ -8,7 +8,6 @@ import React from 'react';
 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';
@@ -22,7 +21,7 @@ if (ExecutionEnvironment.canUseDOM) {
     // For development, there is no existing markup so we had to render it.
     // 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(() => {
+    preload(window.location.pathname).then(() => {
         renderMethod(
         // @ts-expect-error: https://github.com/staylor/react-helmet-async/pull/165
         <HelmetProvider>

package/lib/client/docusaurus.js

@@ -55,7 +55,7 @@ const docusaurus = {
             return false;
         }
         loaded[routePath] = true;
-        preloadHelper(routes, routePath);
+        preloadHelper(routePath);
         return true;
     },
 };

package/lib/client/preload.d.ts

@@ -4,14 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { type RouteConfig } from 'react-router-config';
 /**
  * Helper function to make sure all async components for that particular route
  * is preloaded before rendering. This is especially useful to avoid loading
  * screens.
  *
- * @param routes react-router-config
  * @param pathname the route pathname, example: /docs/installation
  * @returns Promise object represents whether pathname has been preloaded
  */
-export default function preload(routes: RouteConfig[], pathname: string): Promise<void[]>;
+export default function preload(pathname: string): Promise<void[]>;

package/lib/client/preload.js

@@ -4,17 +4,17 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import routes from '@generated/routes';
 import { matchRoutes } from 'react-router-config';
 /**
  * Helper function to make sure all async components for that particular route
  * is preloaded before rendering. This is especially useful to avoid loading
  * screens.
  *
- * @param routes react-router-config
  * @param pathname the route pathname, example: /docs/installation
  * @returns Promise object represents whether pathname has been preloaded
  */
-export default function preload(routes, pathname) {
+export default function preload(pathname) {
     const matches = matchRoutes(routes, pathname);
     return Promise.all(
     // @ts-expect-error: ComponentCreator injected this method.

package/lib/client/serverEntry.js

@@ -14,7 +14,6 @@ import Loadable from 'react-loadable';
 import { minify } from 'html-minifier-terser';
 import path from 'path';
 import fs from 'fs-extra';
-import routes from '@generated/routes';
 import preload from './preload';
 import App from './App';
 import { createStatefulLinksCollector, LinksCollectorProvider, } from './LinksCollector';
@@ -49,7 +48,7 @@ It might also require to wrap your client code in code=${'useEffect'} hook and/o
 async function doRender(locals) {
     const { routesLocation, headTags, preBodyTags, postBodyTags, onLinksCollected, baseUrl, ssrTemplate, noIndex, } = locals;
     const location = routesLocation[locals.path];
-    await preload(routes, location);
+    await preload(location);
     const modules = new Set();
     const routerContext = {};
     const helmetContext = {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@docusaurus/core",
   "description": "Easy to Maintain Open Source Documentation Websites",
-  "version": "0.0.0-4849",
+  "version": "0.0.0-4852",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -41,13 +41,13 @@
     "@babel/runtime": "^7.17.9",
     "@babel/runtime-corejs3": "^7.17.9",
     "@babel/traverse": "^7.17.9",
-    "@docusaurus/cssnano-preset": "0.0.0-4849",
-    "@docusaurus/logger": "0.0.0-4849",
-    "@docusaurus/mdx-loader": "0.0.0-4849",
+    "@docusaurus/cssnano-preset": "0.0.0-4852",
+    "@docusaurus/logger": "0.0.0-4852",
+    "@docusaurus/mdx-loader": "0.0.0-4852",
     "@docusaurus/react-loadable": "5.5.2",
-    "@docusaurus/utils": "0.0.0-4849",
-    "@docusaurus/utils-common": "0.0.0-4849",
-    "@docusaurus/utils-validation": "0.0.0-4849",
+    "@docusaurus/utils": "0.0.0-4852",
+    "@docusaurus/utils-common": "0.0.0-4852",
+    "@docusaurus/utils-validation": "0.0.0-4852",
     "@slorber/static-site-generator-webpack-plugin": "^4.0.4",
     "@svgr/webpack": "^6.2.1",
     "autoprefixer": "^10.4.4",
@@ -105,8 +105,8 @@
     "webpackbar": "^5.0.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4849",
-    "@docusaurus/types": "0.0.0-4849",
+    "@docusaurus/module-type-aliases": "0.0.0-4852",
+    "@docusaurus/types": "0.0.0-4852",
     "@types/detect-port": "^1.3.2",
     "@types/nprogress": "^0.2.0",
     "@types/react-dom": "^18.0.0",
@@ -127,5 +127,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "a8b33f240c15ed993eed5f6741ec57272d76b3ae"
+  "gitHead": "14db4ee31858d0f3c97b1ebe3fef5cf31f937169"
 }