convert Docsify to an ES class to start modernizing the code base

build/build.js

@@ -1,5 +1,5 @@
 const rollup = require('rollup')
-const buble = require('rollup-plugin-buble')
+const buble = require('@rollup/plugin-buble')
 const commonjs = require('rollup-plugin-commonjs')
 const nodeResolve = require('rollup-plugin-node-resolve')
 const { uglify } = require('rollup-plugin-uglify')

build/ssr.js

@@ -1,5 +1,5 @@
 var rollup = require('rollup')
-var buble = require('rollup-plugin-buble')
+var buble = require('@rollup/plugin-buble')
 var async = require('rollup-plugin-async')
 var replace = require('rollup-plugin-replace')
 

package.json

@@ -67,6 +67,7 @@
     "tweezer.js": "^1.4.0"
   },
   "devDependencies": {
+    "@rollup/plugin-buble": "^0.21.3",
     "autoprefixer-stylus": "^1.0.0",
     "babel-eslint": "^10.0.3",
     "chai": "^4.2.0",
@@ -93,7 +94,6 @@
     "rimraf": "^3.0.0",
     "rollup": "^1.23.1",
     "rollup-plugin-async": "^1.2.0",
-    "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",

src/core/Docsify.js

@@ -1,23 +1,19 @@
+import { multiple } from './util/multiple';
 import { initMixin } from './init';
+import { lifecycleMixin } from './lifecycle';
+import { pluginMixin } from './plugin';
 import { routerMixin } from './router';
 import { renderMixin } from './render';
 import { fetchMixin } from './fetch';
 import { eventMixin } from './event';
-import initGlobalAPI from './global-api';
 
-export function Docsify() {
-  this._init();
-}
-
-const proto = Docsify.prototype;
-
-initMixin(proto);
-routerMixin(proto);
-renderMixin(proto);
-fetchMixin(proto);
-eventMixin(proto);
-
-/**
- * Global API
- */
-initGlobalAPI();
+/** This class contains all the magic. */
+export class Docsify extends multiple(
+  initMixin,
+  lifecycleMixin,
+  pluginMixin,
+  routerMixin,
+  renderMixin,
+  fetchMixin,
+  eventMixin
+) {}

src/core/event/index.js

@@ -3,11 +3,19 @@ import { body, on } from '../util/dom';
 import * as sidebar from './sidebar';
 import { scrollIntoView, scroll2Top } from './scroll';
 
-export function eventMixin(proto) {
-  proto.$resetEvents = function(source) {
-    const { auto2top } = this.config;
+/**
+ * This class wires up some UI events using the `sidebar` utility. On each
+ * route change it re-initializes the events because the sidebar is re-rendered
+ * each time we go to a new page.
+ */
+// TODO @trusktr, this should not need to re-initialize events, and the sidebar
+// should not be re-rendered each time we navigate to a new page unless there is
+// a new sidebar.md file for that page.
+export function eventMixin(Base = class {}) {
+  return class extends Base {
+    $resetEvents(source) {
+      const { auto2top } = this.config;
 
-    (() => {
       // Rely on the browser's scroll auto-restoration when going back or forward
       if (source === 'history') {
         return;
@@ -20,22 +28,22 @@ export function eventMixin(proto) {
       if (source === 'navigate') {
         auto2top && scroll2Top(auto2top);
       }
-    })();
 
-    if (this.config.loadNavbar) {
-      sidebar.getAndActive(this.router, 'nav');
+      if (this.config.loadNavbar) {
+        sidebar.getAndActive(this.router, 'nav');
+      }
     }
-  };
-}
 
-export function initEvent(vm) {
-  // Bind toggle button
-  sidebar.btn('button.sidebar-toggle', vm.router);
-  sidebar.collapse('.sidebar', vm.router);
-  // Bind sticky effect
-  if (vm.config.coverpage) {
-    !isMobile && on('scroll', sidebar.sticky);
-  } else {
-    body.classList.add('sticky');
-  }
+    initEvent() {
+      // Bind toggle button
+      sidebar.btn('button.sidebar-toggle', this.router);
+      sidebar.collapse('.sidebar', this.router);
+      // Bind sticky effect
+      if (this.config.coverpage) {
+        !isMobile && on('scroll', sidebar.sticky);
+      } else {
+        body.classList.add('sticky');
+      }
+    }
+  };
 }