Add onChange hook

Author: PhantasWeng

dist/index.esm.js

@@ -10,29 +10,40 @@ function getChannel(channels, channelName) {
   return channels[target];
 }
 
+const hooks = [];
+function addHookFunction(func) {
+  hooks.push(func);
+}
+function onChange(...params) {
+  hooks.forEach(func => func(...params));
+}
 function join(channelName, options) {
   const {
     isPrivate
   } = options;
   console.debug('[Echo] joinChannel -', isPrivate ? 'private-' + channelName : channelName);
   isPrivate ? this.private(channelName) : this.channel(channelName);
+  onChange();
 }
 function leave(channelName) {
   const targetChannel = getChannel(this.connector.channels, channelName);
   console.debug('[Echo] leaveChannel -', targetChannel.name);
   this.leave(channelName);
+  onChange();
 }
 function subscribe(channelName, eventName, callback) {
   const targetChannel = getChannel(this.connector.channels, channelName);
   targetChannel.listen(eventName, res => {
     if (callback) callback(res);
   });
   console.debug('[Echo] subscribeEvent -', targetChannel.name, eventName);
+  onChange();
 }
 function unsubscribe(channelName, eventName) {
   const targetChannel = getChannel(this.connector.channels, channelName);
   targetChannel.stopListening(eventName);
   console.debug('[Echo] unsubscribeEvent -', targetChannel.name, eventName);
+  onChange();
 }
 function getChannels() {
   return this.connector.channels;
@@ -74,6 +85,7 @@ const Plugin = {
     Vue.prototype.$echo = Echo = { ...laravelEcho
     };
     Object.setPrototypeOf(Echo, {
+      onChange: addHookFunction,
       join: join.bind(laravelEcho),
       leave: leave.bind(laravelEcho),
       subscribe: subscribe.bind(laravelEcho),

dist/index.js

@@ -15,29 +15,40 @@ var vueEcho = (function (exports, LaravelEcho) {
     return channels[target];
   }
 
+  const hooks = [];
+  function addHookFunction(func) {
+    hooks.push(func);
+  }
+  function onChange(...params) {
+    hooks.forEach(func => func(...params));
+  }
   function join(channelName, options) {
     const {
       isPrivate
     } = options;
     console.debug('[Echo] joinChannel -', isPrivate ? 'private-' + channelName : channelName);
     isPrivate ? this.private(channelName) : this.channel(channelName);
+    onChange();
   }
   function leave(channelName) {
     const targetChannel = getChannel(this.connector.channels, channelName);
     console.debug('[Echo] leaveChannel -', targetChannel.name);
     this.leave(channelName);
+    onChange();
   }
   function subscribe(channelName, eventName, callback) {
     const targetChannel = getChannel(this.connector.channels, channelName);
     targetChannel.listen(eventName, res => {
       if (callback) callback(res);
     });
     console.debug('[Echo] subscribeEvent -', targetChannel.name, eventName);
+    onChange();
   }
   function unsubscribe(channelName, eventName) {
     const targetChannel = getChannel(this.connector.channels, channelName);
     targetChannel.stopListening(eventName);
     console.debug('[Echo] unsubscribeEvent -', targetChannel.name, eventName);
+    onChange();
   }
   function getChannels() {
     return this.connector.channels;
@@ -79,6 +90,7 @@ var vueEcho = (function (exports, LaravelEcho) {
       Vue.prototype.$echo = exports.Echo = { ...laravelEcho
       };
       Object.setPrototypeOf(exports.Echo, {
+        onChange: addHookFunction,
         join: join.bind(laravelEcho),
         leave: leave.bind(laravelEcho),
         subscribe: subscribe.bind(laravelEcho),

dist/index.ssr.js

@@ -18,29 +18,40 @@ function getChannel(channels, channelName) {
   return channels[target];
 }
 
+const hooks = [];
+function addHookFunction(func) {
+  hooks.push(func);
+}
+function onChange(...params) {
+  hooks.forEach(func => func(...params));
+}
 function join(channelName, options) {
   const {
     isPrivate
   } = options;
   console.debug('[Echo] joinChannel -', isPrivate ? 'private-' + channelName : channelName);
   isPrivate ? this.private(channelName) : this.channel(channelName);
+  onChange();
 }
 function leave(channelName) {
   const targetChannel = getChannel(this.connector.channels, channelName);
   console.debug('[Echo] leaveChannel -', targetChannel.name);
   this.leave(channelName);
+  onChange();
 }
 function subscribe(channelName, eventName, callback) {
   const targetChannel = getChannel(this.connector.channels, channelName);
   targetChannel.listen(eventName, res => {
     if (callback) callback(res);
   });
   console.debug('[Echo] subscribeEvent -', targetChannel.name, eventName);
+  onChange();
 }
 function unsubscribe(channelName, eventName) {
   const targetChannel = getChannel(this.connector.channels, channelName);
   targetChannel.stopListening(eventName);
   console.debug('[Echo] unsubscribeEvent -', targetChannel.name, eventName);
+  onChange();
 }
 function getChannels() {
   return this.connector.channels;
@@ -82,6 +93,7 @@ const Plugin = {
     Vue.prototype.$echo = exports.Echo = { ...laravelEcho
     };
     Object.setPrototypeOf(exports.Echo, {
+      onChange: addHookFunction,
       join: join.bind(laravelEcho),
       leave: leave.bind(laravelEcho),
       subscribe: subscribe.bind(laravelEcho),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phantasweng/vue-echo",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "main": "dist/index.esm.js",
   "description": "Vue Laravel Echo - Simply import Laravel Echo to Vue instance",
   "scripts": {

src/index.js

@@ -1,6 +1,6 @@
 import LaravelEcho from 'laravel-echo'
 import { getChannel } from './helper'
-import { join, leave, subscribe, unsubscribe, getChannels, getEvents } from './methods'
+import { addHookFunction, join, leave, subscribe, unsubscribe, getChannels, getEvents } from './methods'
 window.Pusher = require('pusher-js')
 
 const defaultOptions = {
@@ -24,6 +24,7 @@ const Plugin = {
       ...laravelEcho
     }
     Object.setPrototypeOf(Echo, {
+      onChange: addHookFunction,
       join: join.bind(laravelEcho),
       leave: leave.bind(laravelEcho),
       subscribe: subscribe.bind(laravelEcho),

src/methods.js

@@ -1,15 +1,27 @@
 import { getChannel } from './helper'
 
+const hooks = []
+
+export function addHookFunction (func) {
+  hooks.push(func)
+}
+
+export function onChange (...params) {
+  hooks.forEach(func => func(...params))
+}
+
 export function join (channelName, options) {
   const { isPrivate } = options
   console.debug('[Echo] joinChannel -', isPrivate ? 'private-' + channelName : channelName)
   isPrivate ? this.private(channelName) : this.channel(channelName)
+  onChange()
 }
 
 export function leave (channelName) {
   const targetChannel = getChannel(this.connector.channels, channelName)
   console.debug('[Echo] leaveChannel -', targetChannel.name)
   this.leave(channelName)
+  onChange()
 }
 
 export function subscribe (channelName, eventName, callback) {
@@ -19,13 +31,15 @@ export function subscribe (channelName, eventName, callback) {
   })
 
   console.debug('[Echo] subscribeEvent -', targetChannel.name, eventName)
+  onChange()
 }
 
 export function unsubscribe (channelName, eventName) {
   const targetChannel = getChannel(this.connector.channels, channelName)
   targetChannel.stopListening(eventName)
 
   console.debug('[Echo] unsubscribeEvent -', targetChannel.name, eventName)
+  onChange()
 }
 
 export function getChannels () {