fix: do not fire onRouteUpdate on hash change; new onRouteDidUpdate l…

…ifecycle
facebook · Feb 23, 2022 · 890d3ce · 890d3ce
1 parent ddad971
commit 890d3ce
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 14 deletions.
diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts
@@ -451,9 +451,13 @@ export interface TOCItem {
 export type RouteChunksTree = {[x: string | number]: string | RouteChunksTree};
 
 export type ClientModule = {
-  onRouteUpdate?: (args: {
+  onRouteUpdate: (args: {
     previousLocation: Location | null;
     location: Location;
   }) => void;
-  onRouteUpdateDelayed?: (args: {location: Location}) => void;
+  onRouteDidUpdate: (args: {
+    previousLocation: Location | null;
+    location: Location;
+  }) => void;
+  onRouteUpdateDelayed: (args: {location: Location}) => void;
 };
diff --git a/packages/docusaurus/src/client/PendingNavigation.tsx b/packages/docusaurus/src/client/PendingNavigation.tsx
@@ -63,12 +63,12 @@ class PendingNavigation extends React.Component<Props, State> {
       // 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;
+          if (this.previousLocation?.pathname !== nextLocation.pathname) {
+            clientLifecyclesDispatcher.onRouteUpdate({
+              previousLocation: this.previousLocation,
+              location: nextLocation,
+            });
+          }
           this.setState({nextRouteHasLoaded: true}, this.stopProgressBar);
           const {hash} = nextLocation;
           if (!hash) {
@@ -94,6 +94,15 @@ class PendingNavigation extends React.Component<Props, State> {
     return true;
   }
 
+  componentDidUpdate() {
+    if (this.previousLocation?.pathname !== this.props.location.pathname) {
+      clientLifecyclesDispatcher.onRouteDidUpdate({
+        previousLocation: this.previousLocation,
+        location: this.props.location,
+      });
+    }
+  }
+
   private clearProgressBarTimeout() {
     if (this.progressBarTimeout) {
       clearTimeout(this.progressBarTimeout);

diff --git a/packages/docusaurus/src/client/client-lifecycles-dispatcher.ts b/packages/docusaurus/src/client/client-lifecycles-dispatcher.ts
@@ -26,6 +26,9 @@ const clientLifecyclesDispatchers: Required<ClientModule> = {
   onRouteUpdate(...args) {
     dispatchLifecycleAction('onRouteUpdate', args);
   },
+  onRouteDidUpdate(...args) {
+    dispatchLifecycleAction('onRouteDidUpdate', args);
+  },
   onRouteUpdateDelayed(...args) {
     dispatchLifecycleAction('onRouteUpdateDelayed', args);
   },

diff --git a/website/_dogfooding/clientModuleExample.ts b/website/_dogfooding/clientModuleExample.ts
@@ -6,12 +6,33 @@
  */
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import type {Location} from 'history';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function onRouteUpdate({location}: {location: Location}): void {
-  // console.log('onRouteUpdate', {location});
+export function onRouteUpdate({
+  location,
+  previousLocation,
+}: {
+  location: Location;
+  previousLocation: Location;
+}): void {
+  if (ExecutionEnvironment.canUseDOM) {
+    console.log(`onRouteUpdate (Fired before DOM repaints)
+Previous location: ${previousLocation.pathname}
+Current location: ${location.pathname}
+Current heading: ${document.getElementsByTagName('h1')[0]?.innerText}`);
+  }
 }
-
-if (ExecutionEnvironment.canUseDOM) {
-  // console.log('client module example log');
+export function onRouteDidUpdate({
+  location,
+  previousLocation,
+}: {
+  location: Location;
+  previousLocation: Location;
+}): void {
+  if (ExecutionEnvironment.canUseDOM) {
+    console.log(`onRouteDidUpdate (Fired after DOM repaints)
+Previous location: ${previousLocation.pathname}
+Current location: ${location.pathname}
+Current heading: ${document.getElementsByTagName('h1')[0]?.innerText}`);
+  }
 }