chore: update

base/component.js

@@ -9,10 +9,13 @@ import publish from '@/utils/observer/emit'
 import subscribe from '@/utils/observer/on'
 import unsubscribe from '@/utils/observer/off'
 
+import Plugins from './plugins'
+
 class Component {
   constructor(options) {
-    this.attrs = {}
     this.name = 'component'
+    this.attrs = {}
+    this.plugins = new Plugins()
 
     if (options) {
       this.initialize(options)

base/plugins.js

@@ -1,16 +1,30 @@
 class Plugins {
   constructor() {
     this.plugins = []
+    this.instances = []
 
     return this
   }
 
-  getPlugin(name) {
-    return this.plugins.find((plugin) => plugin.name === name)
+  /**
+   * @find
+   * @param {String} name
+   * @param  {String} type
+   * @return {Object}
+   */
+  find(name, type = 'plugin') {
+    const elements = type === 'plugin' ? this.plugins : this.instances
+    return elements.find((element) => element.name === name)
   }
 
-  isExists(name) {
-    return !!this.getPlugin(name)
+  exists(name, type = 'plugin') {
+    return !!this.find(name, type)
+  }
+
+  use(plugin, options) {
+    this.add(plugin).load(plugin?.name, options)
+
+    return this
   }
 
   add(plugin) {
@@ -20,7 +34,7 @@ class Plugins {
       throw new Error('Plugin name required')
     }
 
-    if (this.isExists(name)) {
+    if (this.exists(name)) {
       return this
     }
 
@@ -31,7 +45,7 @@ class Plugins {
 
   remove(name) {
     const plugins = this.plugins
-    const plugin = this.getPlugin(name)
+    const plugin = this.find(name)
 
     if (plugin) {
       plugins.splice(plugins.indexOf(plugin), 1)
@@ -40,8 +54,42 @@ class Plugins {
     return this
   }
 
+  load(name, options) {
+    const plugin = this.find(name)
+    let instance = this.find(name, 'instance')
+
+    if (!plugin || instance) {
+      return this
+    }
+
+    instance = new plugin(options)
+
+    this.instances.push(instance)
+
+    return this
+  }
+
+  unload(name) {
+    const instances = this.instances
+    const instance = this.find(name, 'instance')
+
+    if (!instance) {
+      return this
+    }
+
+    instance.destroy()
+    instances.splice(instances.indexOf(instance), 1)
+
+    return this
+  }
+
   clear() {
-    this.plugins = []
+    const plugins = this.plugins.map((plugin) => plugin.name)
+
+    plugins.forEach((name) => {
+      this.unload(name)
+      this.remove(name)
+    })
 
     return this
   }

outline.js

@@ -1,22 +1,22 @@
-import later from './utils/lang/later'
-import cloneDeep from './utils/lang/cloneDeep'
+import later from '@/utils/lang/later'
+import cloneDeep from '@/utils/lang/cloneDeep'
 
-import isFunction from './utils/types/isFunction'
-import isString from './utils/types/isString'
-import isElement from './utils/types/isElement'
+import isFunction from '@/utils/types/isFunction'
+import isString from '@/utils/types/isString'
+import isElement from '@/utils/types/isElement'
 
-import addClass from './utils/dom/addClass'
-import scrollTo from './utils/dom/scrollTo'
-import getScrollElement from './utils/dom/getScrollElement'
+import addClass from '@/utils/dom/addClass'
+import scrollTo from '@/utils/dom/scrollTo'
+import getScrollElement from '@/utils/dom/getScrollElement'
 
-import getChapters from './chapters/getChapters'
+import getChapters from '@/chapters/getChapters'
 
-import Component from './base/component'
-import Anchors from './anchors/anchors'
-import Drawer from './drawer/drawer'
-import Navigator from './navigator/navigator'
-import Reader from './reader/reader'
-import Toolbar from './toolbar/toolbar'
+import Component from '@/base/component'
+import Anchors from '@/anchors/anchors'
+import Drawer from '@/drawer/drawer'
+import Navigator from '@/navigator/navigator'
+import Reader from '@/reader/reader'
+import Toolbar from '@/toolbar/toolbar'
 
 class Outline extends Component {
   constructor(options) {
@@ -37,13 +37,6 @@ class Outline extends Component {
     this.attrs = cloneDeep(options)
     this.$article = null
     this.$scrollElement = null
-    this.buttons = []
-
-    this.anchors = null
-    this.drawer = null
-    this.navigator = null
-    this.reader = null
-    this.toolbar = null
 
     return this
   }
@@ -135,7 +128,6 @@ class Outline extends Component {
     }
 
     addClass(this.$article, 'outline-article')
-
     this.reader = new Reader(option)
 
     return this
@@ -343,7 +335,6 @@ class Outline extends Component {
       buttons.push(...tools)
     }
     buttons.push(DOWN)
-    this.buttons = [...buttons]
 
     this.toolbar = new Toolbar({
       placement,
@@ -370,10 +361,7 @@ class Outline extends Component {
   }
 
   addButton(button) {
-    const buttons = this.buttons
-
-    buttons.splice(-1, 0, button)
-    this.$emit('toolbar:add:button', buttons)
+    this.$emit('toolbar:add:button', button)
 
     return this
   }