fix Vue 2.x compatibility #1

Steffan · Steffan · commit 278484e44c74 · 2017-06-21T14:36:23.000+02:00
diff --git a/build/build.js b/build/build.js
@@ -22,8 +22,9 @@ rollup.rollup({
   }).code, bundle);
 })
 .then(function (bundle) {
+  var code = fs.readFileSync('dist/vue-event-manager.js', 'utf8');
   return write('dist/vue-event-manager.min.js',
-    banner + '\n' + uglify.minify('dist/vue-event-manager.js').code,
+    banner + '\n' + uglify.minify(code).code,
   bundle);
 })
 .then(function (bundle) {
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Event Manager</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
+        <script src="../dist/vue-event-manager.js"></script>
+    </head>
+    <body>
+
+        <div id="app" class="container">
+
+            <h1>Event Manager</h1>
+
+            <pre>{{ eventLog | json }}</pre>
+
+            <button class="btn btn-primary" type="button" @click="triggerTest">Trigger 'test' event</button>
+
+        </div>
+
+        <script>
+
+            new Vue({
+
+                el: '#app',
+
+                data: function() {
+                    return {
+                        eventLog: []
+                    }
+                },
+
+                created: function() {
+                    this.pushLog('created hook executed');
+                },
+
+                events: {
+
+                    test: function() {
+                        this.pushLog('\'test\' event executed');
+                    }
+
+                },
+
+                filters: {
+
+                    json: function (val) {
+                        return JSON.stringify(val, null, 2);
+                    }
+
+                },
+
+                methods: {
+
+                    pushLog: function(msg) {
+                        this.eventLog.push((new Date).getTime() + ': ' + msg);
+                    },
+
+                    triggerTest: function() {
+                        this.$trigger('test');
+                    }
+
+                }
+
+            });
+
+        </script>
+
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -27,11 +27,11 @@
   "devDependencies": {
     "buble": "^0.15.2",
     "buble-loader": "^0.4.1",
-    "jest": "^19.0.2",
+    "jest": "^20.0.4",
     "replace-in-file": "^2.5.0",
-    "rollup": "^0.41.6",
+    "rollup": "^0.43.0",
     "rollup-plugin-buble": "^0.15.0",
-    "uglify-js": "^2.8.22",
-    "vue": "^2.2.6"
+    "uglify-js": "^3.0.18",
+    "vue": "^2.3.4"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -12,38 +12,35 @@ function plugin(Vue) {
     }
 
     var Events = new EventManager();
+    var version = Number(Vue.version.split('.')[0]);
 
-    Vue.mixin({
+    function initEvents() {
 
-        init() {
+        var {events} = this.$options, _events = [];
 
-            var { events } = this.$options, _events = [];
+        if (events) {
 
-            if (events) {
+            forEach(events, (listeners, event) => {
+                forEach(isArray(listeners) ? listeners : [listeners], listener => {
 
-                forEach(events, (listeners, event) => {
-                    forEach(isArray(listeners) ? listeners : [listeners], listener => {
+                    var priority = 0;
 
-                        var priority = 0;
+                    if (isObject(listener)) {
+                        priority = listener.priority;
+                        listener = listener.handler;
+                    }
 
-                        if (isObject(listener)) {
-                            priority = listener.priority;
-                            listener = listener.handler;
-                        }
-
-                        _events.push(Events.on(event, listener.bind(this), priority));
-                    });
+                    _events.push(Events.on(event, listener.bind(this), priority));
                 });
+            });
 
-                this.$on('hook:beforeDestroy', () => _events.forEach(off => off()));
-            }
-
+            this.$on('hook:beforeDestroy', () => _events.forEach(off => off()));
         }
-
-    });
+    }
 
     Vue.prototype.$events = Events;
     Vue.prototype.$trigger = Events.trigger.bind(Events);
+    Vue.mixin(version < 2 ? {init: initEvents} : {beforeCreate: initEvents});
 }
 
 if (typeof window !== 'undefined' && window.Vue) {
diff --git a/yarn.lock b/yarn.lock
