Merge pull request #1685 from docsifyjs/classes

convert Docsify and mixins to ES classes

Author: trusktr

src/core/Docsify.js

@@ -1,21 +1,38 @@
-import { initMixin } from './init';
-import { routerMixin } from './router';
-import { renderMixin } from './render';
-import { fetchMixin } from './fetch';
-import { eventMixin } from './event';
-import initGlobalAPI from './global-api';
+import { Router } from './router/index.js';
+import { Render } from './render/index.js';
+import { Fetch } from './fetch/index.js';
+import { Events } from './event/index.js';
+import initGlobalAPI from './global-api.js';
 
-export function Docsify() {
-  this._init();
-}
+import config from './config.js';
+import { isFn } from './util/core';
+import { Lifecycle } from './init/lifecycle';
+
+/** @typedef {new (...args: any[]) => any} Constructor */
+
+// eslint-disable-next-line new-cap
+export class Docsify extends Fetch(Events(Render(Router(Lifecycle(Object))))) {
+  constructor() {
+    super();
 
-const proto = Docsify.prototype;
+    this.config = config(this);
 
-initMixin(proto);
-routerMixin(proto);
-renderMixin(proto);
-fetchMixin(proto);
-eventMixin(proto);
+    this.initLifecycle(); // Init hooks
+    this.initPlugin(); // Install plugins
+    this.callHook('init');
+    this.initRouter(); // Add router
+    this.initRender(); // Render base DOM
+    this.initEvent(); // Bind events
+    this.initFetch(); // Fetch data
+    this.callHook('mounted');
+  }
+
+  initPlugin() {
+    []
+      .concat(this.config.plugins)
+      .forEach(fn => isFn(fn) && fn(this._lifecycle, this));
+  }
+}
 
 /**
  * Global API

src/core/config.js

@@ -2,6 +2,7 @@ import { merge, hyphenate, isPrimitive, hasOwn } from './util/core';
 
 const currentScript = document.currentScript;
 
+/** @param {import('./Docsify').Docsify} vm */
 export default function(vm) {
   const config = merge(
     {

src/core/event/index.js

@@ -3,39 +3,47 @@ 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;
+/** @typedef {import('../Docsify').Constructor} Constructor */
 
-    (() => {
-      // Rely on the browser's scroll auto-restoration when going back or forward
-      if (source === 'history') {
-        return;
-      }
-      // Scroll to ID if specified
-      if (this.route.query.id) {
-        scrollIntoView(this.route.path, this.route.query.id);
-      }
-      // Scroll to top if a link was clicked and auto2top is enabled
-      if (source === 'navigate') {
-        auto2top && scroll2Top(auto2top);
+/**
+ * @template {!Constructor} T
+ * @param {T} Base - The class to extend
+ */
+export function Events(Base) {
+  return class Events 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;
+        }
+        // Scroll to ID if specified
+        if (this.route.query.id) {
+          scrollIntoView(this.route.path, this.route.query.id);
+        }
+        // Scroll to top if a link was clicked and auto2top is enabled
+        if (source === 'navigate') {
+          auto2top && scroll2Top(auto2top);
+        }
+      })();
+
+      if (this.config.loadNavbar) {
+        sidebar.getAndActive(this.router, 'nav');
       }
-    })();
+    }
 
-    if (this.config.loadNavbar) {
-      sidebar.getAndActive(this.router, 'nav');
+    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');
+      }
     }
   };
 }
-
-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');
-  }
-}