feat(v2): implement client lifecycles dispatcher (#1591)

* WIP feat(v2): implement client lifecycles dispatcher

* misc(v2): remove testing files

packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css

@@ -10,12 +10,6 @@
   max-width: 45em;
 }
 
-@media (min-width: 997px) {
-  .docItemContainer {
-    padding-left: 2rem;
-  }
-}
-
 .tableOfContents {
   display: inherit;
   max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));

packages/docusaurus/src/client/App.js

@@ -13,7 +13,7 @@ import renderRoutes from '@docusaurus/renderRoutes';
 import DocusaurusContext from '@docusaurus/context';
 import PendingNavigation from './PendingNavigation';
 
-import '@generated/client-modules';
+import './client-lifecycles-dispatcher';
 
 function App() {
   return (

packages/docusaurus/src/client/PendingNavigation.js

@@ -8,7 +8,10 @@
 import React from 'react';
 import {Route, withRouter} from 'react-router-dom';
 import nprogress from 'nprogress';
+
+import clientLifecyclesDispatcher from './client-lifecycles-dispatcher';
 import preload from './preload';
+
 import 'nprogress/nprogress.css';
 
 nprogress.configure({showSpinner: false});
@@ -44,11 +47,10 @@ class PendingNavigation extends React.Component {
       // Load data while the old screen remains.
       preload(routes, nextProps.location.pathname)
         .then(() => {
-          // TODO: Implement browser lifecycle.
+          clientLifecyclesDispatcher.onRouteUpdate({
-          // onRouteUpdate({
+            previousLocation: this.previousLocation,
-          //   previousLocation: this.previousLocation,
+            location: nextProps.location,
-          //   location: nextProps.location,
+          });
-          // });
           // Route has loaded, we can reset previousLocation.
           this.previousLocation = null;
           this.setState(
@@ -89,8 +91,9 @@ class PendingNavigation extends React.Component {
   startProgressBar(delay) {
     this.clearProgressBarTimeout();
     this.progressBarTimeout = setTimeout(() => {
-      // TODO: Implement browser lifecycle.
+      clientLifecyclesDispatcher.onRouteUpdateDelayed({
-      // onRouteUpdateDelayed()
+        location: this.props.location,
+      });
       nprogress.start();
     }, delay);
   }

packages/docusaurus/src/client/client-lifecycles-dispatcher.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import clientModules from '@generated/client-modules';
+
+function dispatchLifecycleAction(lifecycleAction, ...args) {
+  clientModules.forEach(clientModule => {
+    const mod = clientModule.__esModule ? clientModule.default : clientModule;
+    if (mod[lifecycleAction]) {
+      mod[lifecycleAction](...args);
+    }
+  });
+}
+
+function createLifecyclesDispatcher() {
+  // TODO: Not sure whether it's better to declare an explicit object
+  // with all the lifecycles. It's better for typing but quite verbose.
+  // On the other hand, there's some runtime cost generating this object
+  // on initial load.
+  return ['onRouteUpdate', 'onRouteUpdateDelayed'].reduce(
+    (lifecycles, lifecycleAction) => {
+      // eslint-disable-next-line no-param-reassign
+      lifecycles[lifecycleAction] = function(...args) {
+        dispatchLifecycleAction(lifecycleAction, ...args);
+      };
+      return lifecycles;
+    },
+    {},
+  );
+}
+
+export default createLifecyclesDispatcher();