Using Object for plugin definition, bug fixes

.eslintrc.js

@@ -5,10 +5,13 @@ module.exports = {
     node: true
   },
 
+  plugins: ['babel'],
+
   extends: [
+    'plugin:babel',
     'plugin:vue/essential',
     'eslint:recommended',
-    '@vue/prettier',
+    '@vue/prettier'
   ],
 
   parserOptions: {
@@ -17,18 +20,19 @@ module.exports = {
 
   rules: {
     'no-console': 'off',
-    'no-debugger': 'off'
+    'no-debugger': 'off',
+    'babel/camelcase': 1
   },
 
   overrides: [
     {
       files: [
-        '**/*.spec.{j,t}s?(x)',
-      //  '**/tests/unit/**/*.spec.{j,t}s?(x)'
+        '**/*.spec.{j,t}s?(x)'
+        //  '**/tests/unit/**/*.spec.{j,t}s?(x)'
       ],
       env: {
         jest: true
       }
     }
-  ],
+  ]
 }

babel.config.js

@@ -3,6 +3,9 @@ module.exports = function(babel) {
 
   return {
     presets: ['@babel/preset-env'],
-    plugins: ['@babel/plugin-proposal-object-rest-spread']
+    plugins: [
+      '@babel/plugin-proposal-object-rest-spread',
+      '@babel/plugin-proposal-optional-chaining'
+    ]
   }
 }

demo/src/App.vue

@@ -132,7 +132,7 @@ export default {
         text: 'You can add an arbitrary number of buttons.',
         buttons: [
           {
-            title: 'Cancel 💩',
+            title: 'Cancel',
             handler: () => {
               this.$modal.hide('dialog')
             }
@@ -141,13 +141,13 @@ export default {
             title: 'Like',
             default: true,
             handler: () => {
-              alert('LIKE LIKE LIKE')
+              alert('Like action')
             }
           },
           {
             title: 'Repost',
             handler: () => {
-              alert('REPOST REPOST REPOST')
+              alert('Repost action')
             }
           }
         ]
@@ -174,7 +174,6 @@ export default {
     },
 
     showDynamicComponentModal() {
-      console.log('Showing one more')
       this.$modal.show(DemoCustomComponent, {
         text: 'This text is passed as a property'
       })

package.json

@@ -51,6 +51,7 @@
     "babel-loader": "^8.0.4",
     "css-loader": "^1.0.1",
     "eslint": "^6.7.2",
+    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
     "file-loader": "^0.9.0",
@@ -69,15 +70,16 @@
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "2.6.11",
     "vue-test-utils": "^1.0.0-beta.11",
+    "vuepress": "^1.5.2",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
-    "webpack-merge": "^4.2.2",
-    "vuepress": "^1.5.2"
+    "webpack-merge": "^4.2.2"
   },
   "peerDependencies": {
     "vue": "2.6.11"
   },
   "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.10.3",
     "resize-observer-polyfill": "^1.5.1"
   }
 }

src/Plugin.js

@@ -2,41 +2,42 @@ import Modal from './components/Modal.vue'
 import Dialog from './components/Dialog.vue'
 import PluginCore from './PluginCore'
 
-class Plugin extends PluginCore {
-  constructor() {
-    super()
+const Plugin = {
+  install(Vue, options = {}) {
+    const plugin = new PluginCore(Vue, options)
 
-    this.install = this.install.bind(this)
-  }
+    Object.defineProperty(Vue.prototype, '$modal', {
+      get: function() {
+        /**
+         * The "this" scope is the scope of the component that calls this.$modal
+         */
+        const caller = this
+        /**
+         * The this.$modal can be called only from inside the vue components so this check is not really needed...
+         */
+        if (caller instanceof Vue) {
+          const root = caller.$root
 
-  install(Vue, options = {}) {
-    super.install(Vue, options)
+          if (!plugin.root) {
+            plugin.setDynamicModalContainer(root)
+          }
+        }
+
+        return plugin
+      }
+    })
 
-    Vue.prototype.$modal = this
     /**
      * Sets custom component name (if provided)
      */
-    Vue.component(this.context.componentName, Modal)
+    Vue.component(plugin.context.componentName, Modal)
+
     /**
      * Registration of <Dialog/> component
      */
     if (options.dialog) {
       Vue.component('VDialog', Dialog)
     }
-    /**
-     * Registration of <ModalsContainer/> component
-     */
-    if (options.dynamic) {
-      const plugin = this
-
-      Vue.mixin({
-        beforeMount() {
-          if (!plugin.root) {
-            plugin.setDynamicModalContainer(this.$root)
-          }
-        }
-      })
-    }
   }
 }
 

src/PluginCore.js

@@ -1,13 +1,9 @@
-import {
-  DYNAMIC_MODAL_DISABLED_ERROR,
-  UNSUPPORTED_ARGUMENT_ERROR,
-  HIDE_ALL_RESTRICTION_ERROR
-} from './utils/errors'
+import { UNSUPPORTED_ARGUMENT_ERROR } from './utils/errors'
 import { createDivInBody } from './utils'
 import ModalsContainer from './components/ModalsContainer.vue'
 
 class PluginCore {
-  install(Vue, options = {}) {
+  constructor(Vue, options = {}) {
     this.options = options
     this.Vue = Vue
     this.root = null
@@ -17,7 +13,7 @@ class PluginCore {
     this.showDynamicModal = this.showDynamicModal.bind(this)
     this.setDynamicModalContainer = this.setDynamicModalContainer.bind(this)
     this.show = this.show.bind(this)
-    this.hide = this.hideAll.bind(this)
+    this.hide = this.hide.bind(this)
     this.hideAll = this.hideAll.bind(this)
     this.toggle = this.toggle.bind(this)
   }
@@ -33,45 +29,42 @@ class PluginCore {
   showStaticModal(modal, params) {
     this.subscription.$emit('toggle', modal, true, params)
   }
-
-  setDynamicModalContainer(root) {
-    this.root = root
+  /**
+   * Creates a container for modals in the root Vue component.
+   *
+   * @param {Vue} parent
+   */
+  setDynamicModalContainer(parent) {
+    this.root = parent
 
     const element = createDivInBody()
 
     new this.Vue({
-      parent: this.root,
+      parent,
       render: h => h(ModalsContainer)
     }).$mount(element)
   }
 
   showDynamicModal(modal, props, params, events) {
-    const { options, root } = this
-
-    const container = root && root._modalContainer
-    const dynamicDefaults = options.dynamicDefaults || {}
+    const container = this.root?.__modalContainer
+    const dynamicDefaults = this.options.dynamicDefaults || {}
 
-    if (container) {
-      container.add(modal, props, { ...dynamicDefaults, ...params }, events)
-    }
+    container?.add(modal, props, { ...dynamicDefaults, ...params }, events)
   }
 
   show(modal, ...args) {
     switch (typeof modal) {
-      case 'string': {
-        return this.showStaticModal(modal, ...args)
-      }
+      case 'string':
+        this.showStaticModal(modal, ...args)
+        break
 
       case 'object':
-      case 'function': {
-        return this.options.dynamic
-          ? this.showDynamicModal(modal, ...args)
-          : console.warn(DYNAMIC_MODAL_DISABLED_ERROR)
-      }
+      case 'function':
+        this.showDynamicModal(modal, ...args)
+        break
 
-      default: {
+      default:
         console.warn(UNSUPPORTED_ARGUMENT_ERROR, modal)
-      }
     }
   }
 
@@ -80,11 +73,7 @@ class PluginCore {
   }
 
   hideAll() {
-    if (this.options.dynamic) {
-      this.subscription.$emit('hide-all')
-    } else {
-      console.warn(HIDE_ALL_RESTRICTION_ERROR)
-    }
+    this.subscription.$emit('hide-all')
   }
 
   toggle(name, params) {