obvious-vue - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/index.es.js

@@ -48,12 +48,12 @@ function _defineProperty(obj, key, value) {
   busIsRequired: function busIsRequired() {
-    return '[obvious-vue] the bus must be provided when using ObviousVue';
+    return '[obvious-vue] $bus must be provided on the root Vue instance';
   },
-  obviousIsNotFunction: function obviousIsNotFunction() {
-    return '[obvious-vue] the option obvious must be a function';
+  socketIsRequired: function socketIsRequired() {
+    return '[obvious-vue] $socket must be provided on the root Vue instance';
   },
   stateIsRequired: function stateIsRequired(dataName) {
-    return "[obvious-vue] state is required in obvious.data.".concat(dataName);
+    return "[obvious-vue] state is required in obviousData.".concat(dataName);
   },
   wrongObDataType: function wrongObDataType(dataName, type) {
-    return "[obvious-vue] obvious.data.".concat(dataName, " should be a string or a object, but got ").concat(type);
+    return "[obvious-vue] obviousData.".concat(dataName, " should be a string or a object, but got ").concat(type);
   }
@@ -68,4 +68,5 @@ };
   UNICAST: 'Unicast'
-};
-var formatObData = function formatObData(obData) {
+}; // --------------------------- state ---------------------------- //
+
+var formatObviousData = function formatObviousData(obData) {
   var result = {};
@@ -95,56 +96,7 @@
 
-var formatEvents = function formatEvents(events, context) {
-  var result = {};
-
-  var _loop = function _loop() {
-    var key = _Object$keys2[_i2];
-    var value = events[key];
-
-    if (typeof value === 'function') {
-      var _context$$options$obv;
-
-      var socket = (_context$$options$obv = context.$options.obvious.socket) !== null && _context$$options$obv !== void 0 ? _context$$options$obv : context.$socket;
-      result[key] = {
-        socket: socket,
-        handler: function handler() {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-
-          var result = value.call.apply(value, [context].concat(args));
-          return result;
-        }
-      };
-    } else {
-      var _ref, _value$socket;
-
-      var _socket = (_ref = (_value$socket = value.socket) !== null && _value$socket !== void 0 ? _value$socket : context.$options.obvious.socket) !== null && _ref !== void 0 ? _ref : context.$socket;
-
-      result[key] = {
-        socket: _socket,
-        handler: function handler() {
-          var _value$handler;
-
-          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-            args[_key2] = arguments[_key2];
-          }
-
-          return (_value$handler = value.handler).call.apply(_value$handler, [context].concat(args));
-        }
-      };
-    }
-  };
-
-  for (var _i2 = 0, _Object$keys2 = Object.keys(events); _i2 < _Object$keys2.length; _i2++) {
-    _loop();
-  }
-
-  return result;
-};
-
-var initNewData = function initNewData(originalData) {
+var initNewData = function initNewData(originalData, context) {
   var newData = {};
 
   if (typeof originalData === 'function') {
-    newData = _objectSpread({}, originalData());
+    newData = _objectSpread({}, originalData.call(context));
   } else if (isObject(originalData)) {
@@ -211,13 +163,100 @@ newData = _objectSpread({}, originalData);
   });
+}; // --------------------------- Events ---------------------------- //
+
+
+var formatEvent = function formatEvent(event, context) {
+  var _context$$options$soc;
+
+  var result = {};
+  var defaultSocket = (_context$$options$soc = context.$options.socket) !== null && _context$$options$soc !== void 0 ? _context$$options$soc : context.$socket;
+
+  if (typeof event === 'function') {
+    result = {
+      socket: defaultSocket,
+      handler: function handler() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return event.call.apply(event, [context].concat(args));
+      }
+    };
+  } else if (isObject(event) && typeof event.handler === 'function') {
+    var _event$socket;
+
+    result = {
+      socket: (_event$socket = event.socket) !== null && _event$socket !== void 0 ? _event$socket : defaultSocket,
+      handler: function handler() {
+        var _event$handler;
+
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+
+        return (_event$handler = event.handler).call.apply(_event$handler, [context].concat(args));
+      }
+    };
+  }
+
+  return result;
 };
 
-var listenEvents = function listenEvents(type, events) {
-  Object.keys(events).forEach(function (eventName) {
-    var _events$eventName = events[eventName],
-        handler = _events$eventName.handler,
-        socket = _events$eventName.socket;
+var formatBroadcast = function formatBroadcast(broadcast, context) {
+  var result = {};
+
+  for (var _i2 = 0, _Object$keys2 = Object.keys(broadcast); _i2 < _Object$keys2.length; _i2++) {
+    var key = _Object$keys2[_i2];
+
+    if (Array.isArray(broadcast[key])) {
+      result[key] = broadcast[key].map(function (event) {
+        return formatEvent(event, context);
+      });
+    } else if (typeof broadcast[key] === 'function' || isObject(broadcast[key])) {
+      result[key] = [formatEvent(broadcast[key], context)];
+    }
+  }
+
+  return result;
+};
+
+var formatUnicast = function formatUnicast(unicast, context) {
+  var result = {};
+
+  for (var _i3 = 0, _Object$keys3 = Object.keys(unicast); _i3 < _Object$keys3.length; _i3++) {
+    var key = _Object$keys3[_i3];
+    result[key] = formatEvent(unicast[key], context);
+  }
+
+  return result;
+};
+
+var listenEvent = function listenEvent(type, eventName, option) {
+  var handler = option.handler,
+      socket = option.socket;
+
+  if (socket && typeof handler === 'function') {
     socket["on".concat(type)](eventName, handler);
-  });
+  }
 };
 
+var listenBroadcast = function listenBroadcast(events) {
+  if (isObject(events)) {
+    Object.keys(events).forEach(function (eventName) {
+      var listenerOptions = events[eventName];
+      listenerOptions.forEach(function (option) {
+        listenEvent(EVENT_TYPE.BROADCAST, eventName, option);
+      });
+    });
+  }
+};
+
+var listenUnicast = function listenUnicast(events) {
+  if (isObject(events)) {
+    Object.keys(events).forEach(function (eventName) {
+      var option = events[eventName];
+      listenEvent(EVENT_TYPE.UNICAST, eventName, option);
+    });
+  }
+};
+
 var mixin = {
@@ -227,40 +266,42 @@ beforeCreate: function beforeCreate() {
 
-    this.$obStateWatcher = {};
-    var _this$$options = this.$options,
-        originalData = _this$$options.data,
-        originalWatch = _this$$options.watch,
-        _obvious = _this$$options.obvious;
+    this.$socket = this.$root.$options.$socket;
+    this.$bus = this.$root.$options.$bus;
 
-    if (_obvious && typeof _obvious !== 'function') {
-      throw new Error(Errors.obviousIsNotFunction());
+    if (!this.$bus) {
+      throw new Error(Errors.busIsRequired());
     }
 
-    var obvious = _obvious && _obvious.call(this);
+    if (!this.$socket) {
+      throw new Error(Errors.socketIsRequired());
+    }
 
-    if (isObject(obvious)) {
-      var dataOption = initNewData(originalData);
+    var _this$$options = this.$options,
+        obviousData = _this$$options.obviousData,
+        broadcast = _this$$options.broadcast,
+        unicast = _this$$options.unicast,
+        componentSocket = _this$$options.socket;
+
+    if (isObject(obviousData)) {
+      this.$obStateWatcher = {};
+      var _this$$options2 = this.$options,
+          originalData = _this$$options2.data,
+          originalWatch = _this$$options2.watch;
+      var dataOption = initNewData(originalData, this);
       var watchOption = originalWatch ? _objectSpread({}, originalWatch) : {};
-      var componentSocket = obvious.socket,
-          originalObData = obvious.data,
-          broadcast = obvious.broadcast,
-          unicast = obvious.unicast; // inject data and watch
+      var obData = formatObviousData(obviousData);
+      Object.keys(obData).forEach(function (dataName) {
+        var _ref;
 
-      if (isObject(originalObData)) {
-        var obData = formatObData(originalObData);
-        Object.keys(obData).forEach(function (dataName) {
-          var _ref2;
+        var _obData$dataName = obData[dataName],
+            state = _obData$dataName.state,
+            stateSocket = _obData$dataName.socket;
+        var socket = (_ref = stateSocket !== null && stateSocket !== void 0 ? stateSocket : componentSocket) !== null && _ref !== void 0 ? _ref : _this.$socket;
+        injectObData(dataOption, dataName, socket, state);
+        injectObDataWatcher(watchOption, dataName, socket, state, _this);
+        injectStateWatcher(dataName, socket, state, _this);
 
-          var _obData$dataName = obData[dataName],
-              state = _obData$dataName.state,
-              stateSocket = _obData$dataName.socket;
-          var socket = (_ref2 = stateSocket !== null && stateSocket !== void 0 ? stateSocket : componentSocket) !== null && _ref2 !== void 0 ? _ref2 : _this.$socket;
-          injectObData(dataOption, dataName, socket, state);
-          injectObDataWatcher(watchOption, dataName, socket, state, _this);
-          injectStateWatcher(dataName, socket, state, _this);
-        });
-
         if (isObject(originalData)) {
-          this.$options.data = dataOption;
+          _this.$options.data = dataOption;
         } else {
-          this.$options.data = function () {
+          _this.$options.data = function () {
             return dataOption;
@@ -270,16 +311,14 @@ };
 
-        this.$options.watch = watchOption;
-      } // listen broadcast
+        _this.$options.watch = watchOption;
+      });
+    }
 
+    if (isObject(broadcast)) {
+      this.$broadcastEvents = formatBroadcast(broadcast, this);
+      listenBroadcast(this.$broadcastEvents);
+    }
 
-      if (isObject(broadcast)) {
-        this.$broadcastEvents = formatEvents(broadcast, this);
-        listenEvents(EVENT_TYPE.BROADCAST, this.$broadcastEvents);
-      } // listen unicast
-
-
-      if (isObject(unicast)) {
-        this.$unicastEvents = formatEvents(unicast, this);
-        listenEvents(EVENT_TYPE.UNICAST, this.$unicastEvents);
-      }
+    if (isObject(unicast)) {
+      this.$unicastEvents = formatUnicast(unicast, this);
+      listenUnicast(this.$unicastEvents);
     }
@@ -299,6 +338,11 @@ },
     isObject(this.$broadcastEvents) && Object.keys(this.$broadcastEvents).forEach(function (eventName) {
-      var _this2$$broadcastEven = _this2.$broadcastEvents[eventName],
-          socket = _this2$$broadcastEven.socket,
-          handler = _this2$$broadcastEven.handler;
-      socket.offBroadcast(eventName, handler);
+      var watchers = _this2.$broadcastEvents[eventName];
+      watchers.forEach(function (option) {
+        var handler = option.handler,
+            socket = option.socket;
+
+        if (socket && typeof handler === 'function') {
+          socket.offBroadcast(eventName, handler);
+        }
+      });
     }); // clear unicast event handler
@@ -310,3 +354,6 @@
           handler = _this2$$unicastEvents.handler;
-      socket.offUnicast(eventName, handler);
+
+      if (socket && typeof handler === 'function') {
+        socket.offUnicast(eventName, handler);
+      }
     });
@@ -319,2 +366,23 @@ this.$obStateWatcher = null;
 
+var broadcastMerge = function broadcastMerge(parentVal, childVal, vm) {
+  if (!childVal) {
+    return parentVal;
+  }
+
+  if (!parentVal) {
+    return childVal;
+  }
+
+  var result = parentVal;
+  Object.keys(childVal).forEach(function (eventName) {
+    if (!result[eventName]) {
+      result[eventName] = childVal[eventName];
+    } else {
+      var unflatedHandlers = [result[eventName], childVal[eventName]];
+      result[eventName] = unflatedHandlers.flat();
+    }
+  });
+  return result;
+};
+
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -396,88 +464,9 @@
 
-var formatEvents$1 = function formatEvents(events, parentSocket, defaultSocket) {
-  var result = {};
-
-  if (isObject(events)) {
-    for (var _i = 0, _Object$keys = Object.keys(events); _i < _Object$keys.length; _i++) {
-      var key = _Object$keys[_i];
-      var value = events[key];
-
-      if (typeof value === 'function') {
-        var socket = parentSocket !== null && parentSocket !== void 0 ? parentSocket : defaultSocket;
-        result[key] = {
-          socket: socket,
-          handler: value
-        };
-      } else {
-        var _ref, _value$socket;
-
-        var _socket = (_ref = (_value$socket = value.socket) !== null && _value$socket !== void 0 ? _value$socket : parentSocket) !== null && _ref !== void 0 ? _ref : defaultSocket;
-
-        result[key] = {
-          socket: _socket,
-          handler: value.handler
-        };
-      }
-    }
-  }
-
-  return result;
-};
-
-var obviousMegrge = function obviousMegrge(merge, defaultSocket, that) {
-  return function (parentVal, childVal, vm) {
-    // vm is undefined: is it a bug ? https://github.com/vuejs/vue/issues/9623
-    if (parentVal && !childVal) {
-      return parentVal;
-    }
-
-    if (!parentVal && childVal) {
-      return childVal;
-    }
-
-    if (parentVal && childVal) {
-      if (typeof parentVal !== 'function' || typeof childVal !== 'function') {
-        throw new Error(Errors.obviousIsNotFunction());
-      }
-
-      var parentOption = parentVal.call(vm || that);
-      var childOption = childVal.call(vm || that); // format data
-
-      var formatedParentData = formatObData(parentOption.data);
-      Object.keys(formatedParentData).forEach(function (dataName) {
-        var _ref2, _dataItem$socket;
-
-        var dataItem = formatedParentData[dataName];
-        dataItem.socket = (_ref2 = (_dataItem$socket = dataItem.socket) !== null && _dataItem$socket !== void 0 ? _dataItem$socket : parentOption.socket) !== null && _ref2 !== void 0 ? _ref2 : defaultSocket;
-      }); // format broadcast
-
-      var formatedParentBroadcast = formatEvents$1(parentOption.broadcast, parentOption.socket, defaultSocket); // format unicast
-
-      var formatedParentUnicast = formatEvents$1(parentOption.unicast, parentOption.socket, defaultSocket);
-      var result = {
-        socket: childOption.socket,
-        data: merge(formatedParentData, childOption.data),
-        broadcast: merge(formatedParentBroadcast, childOption.broadcast),
-        unicast: merge(formatedParentUnicast, childOption.unicast)
-      };
-      return function () {
-        return result;
-      };
-    }
-  };
-};
-
 var index = {
-  install: function install(Vue, option) {
-    var bus = option.bus;
-
-    if (!bus) {
-      throw new Error(Errors.busIsRequired());
-    }
-
-    var defaultSocket = bus.createSocket();
-    Vue.prototype.$bus = bus;
-    Vue.prototype.$socket = defaultSocket;
-    var merge = Vue.config.optionMergeStrategies.methods;
-    Vue.config.optionMergeStrategies.obvious = obviousMegrge(merge, defaultSocket, Vue.prototype);
+  install: function install(Vue) {
+    var normalMerge = Vue.config.optionMergeStrategies.methods;
+    Vue.config.optionMergeStrategies.socket = normalMerge;
+    Vue.config.optionMergeStrategies.obviousData = normalMerge;
+    Vue.config.optionMergeStrategies.unicast = normalMerge;
+    Vue.config.optionMergeStrategies.broadcast = broadcastMerge;
     Vue.mixin(mixin);
@@ -484,0 +473,0 @@ Vue.component('obvious-app', ObviousApp);

dist/index.umd.js

@@ -54,12 +54,12 @@ (function (global, factory) {
     busIsRequired: function busIsRequired() {
-      return '[obvious-vue] the bus must be provided when using ObviousVue';
+      return '[obvious-vue] $bus must be provided on the root Vue instance';
     },
-    obviousIsNotFunction: function obviousIsNotFunction() {
-      return '[obvious-vue] the option obvious must be a function';
+    socketIsRequired: function socketIsRequired() {
+      return '[obvious-vue] $socket must be provided on the root Vue instance';
     },
     stateIsRequired: function stateIsRequired(dataName) {
-      return "[obvious-vue] state is required in obvious.data.".concat(dataName);
+      return "[obvious-vue] state is required in obviousData.".concat(dataName);
     },
     wrongObDataType: function wrongObDataType(dataName, type) {
-      return "[obvious-vue] obvious.data.".concat(dataName, " should be a string or a object, but got ").concat(type);
+      return "[obvious-vue] obviousData.".concat(dataName, " should be a string or a object, but got ").concat(type);
     }
@@ -74,4 +74,5 @@ };
     UNICAST: 'Unicast'
-  };
-  var formatObData = function formatObData(obData) {
+  }; // --------------------------- state ---------------------------- //
+
+  var formatObviousData = function formatObviousData(obData) {
     var result = {};
@@ -101,56 +102,7 @@
 
-  var formatEvents = function formatEvents(events, context) {
-    var result = {};
-
-    var _loop = function _loop() {
-      var key = _Object$keys2[_i2];
-      var value = events[key];
-
-      if (typeof value === 'function') {
-        var _context$$options$obv;
-
-        var socket = (_context$$options$obv = context.$options.obvious.socket) !== null && _context$$options$obv !== void 0 ? _context$$options$obv : context.$socket;
-        result[key] = {
-          socket: socket,
-          handler: function handler() {
-            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-              args[_key] = arguments[_key];
-            }
-
-            var result = value.call.apply(value, [context].concat(args));
-            return result;
-          }
-        };
-      } else {
-        var _ref, _value$socket;
-
-        var _socket = (_ref = (_value$socket = value.socket) !== null && _value$socket !== void 0 ? _value$socket : context.$options.obvious.socket) !== null && _ref !== void 0 ? _ref : context.$socket;
-
-        result[key] = {
-          socket: _socket,
-          handler: function handler() {
-            var _value$handler;
-
-            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-              args[_key2] = arguments[_key2];
-            }
-
-            return (_value$handler = value.handler).call.apply(_value$handler, [context].concat(args));
-          }
-        };
-      }
-    };
-
-    for (var _i2 = 0, _Object$keys2 = Object.keys(events); _i2 < _Object$keys2.length; _i2++) {
-      _loop();
-    }
-
-    return result;
-  };
-
-  var initNewData = function initNewData(originalData) {
+  var initNewData = function initNewData(originalData, context) {
     var newData = {};
 
     if (typeof originalData === 'function') {
-      newData = _objectSpread({}, originalData());
+      newData = _objectSpread({}, originalData.call(context));
     } else if (isObject(originalData)) {
@@ -217,13 +169,100 @@ newData = _objectSpread({}, originalData);
     });
+  }; // --------------------------- Events ---------------------------- //
+
+
+  var formatEvent = function formatEvent(event, context) {
+    var _context$$options$soc;
+
+    var result = {};
+    var defaultSocket = (_context$$options$soc = context.$options.socket) !== null && _context$$options$soc !== void 0 ? _context$$options$soc : context.$socket;
+
+    if (typeof event === 'function') {
+      result = {
+        socket: defaultSocket,
+        handler: function handler() {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          return event.call.apply(event, [context].concat(args));
+        }
+      };
+    } else if (isObject(event) && typeof event.handler === 'function') {
+      var _event$socket;
+
+      result = {
+        socket: (_event$socket = event.socket) !== null && _event$socket !== void 0 ? _event$socket : defaultSocket,
+        handler: function handler() {
+          var _event$handler;
+
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+
+          return (_event$handler = event.handler).call.apply(_event$handler, [context].concat(args));
+        }
+      };
+    }
+
+    return result;
   };
 
-  var listenEvents = function listenEvents(type, events) {
-    Object.keys(events).forEach(function (eventName) {
-      var _events$eventName = events[eventName],
-          handler = _events$eventName.handler,
-          socket = _events$eventName.socket;
+  var formatBroadcast = function formatBroadcast(broadcast, context) {
+    var result = {};
+
+    for (var _i2 = 0, _Object$keys2 = Object.keys(broadcast); _i2 < _Object$keys2.length; _i2++) {
+      var key = _Object$keys2[_i2];
+
+      if (Array.isArray(broadcast[key])) {
+        result[key] = broadcast[key].map(function (event) {
+          return formatEvent(event, context);
+        });
+      } else if (typeof broadcast[key] === 'function' || isObject(broadcast[key])) {
+        result[key] = [formatEvent(broadcast[key], context)];
+      }
+    }
+
+    return result;
+  };
+
+  var formatUnicast = function formatUnicast(unicast, context) {
+    var result = {};
+
+    for (var _i3 = 0, _Object$keys3 = Object.keys(unicast); _i3 < _Object$keys3.length; _i3++) {
+      var key = _Object$keys3[_i3];
+      result[key] = formatEvent(unicast[key], context);
+    }
+
+    return result;
+  };
+
+  var listenEvent = function listenEvent(type, eventName, option) {
+    var handler = option.handler,
+        socket = option.socket;
+
+    if (socket && typeof handler === 'function') {
       socket["on".concat(type)](eventName, handler);
-    });
+    }
   };
 
+  var listenBroadcast = function listenBroadcast(events) {
+    if (isObject(events)) {
+      Object.keys(events).forEach(function (eventName) {
+        var listenerOptions = events[eventName];
+        listenerOptions.forEach(function (option) {
+          listenEvent(EVENT_TYPE.BROADCAST, eventName, option);
+        });
+      });
+    }
+  };
+
+  var listenUnicast = function listenUnicast(events) {
+    if (isObject(events)) {
+      Object.keys(events).forEach(function (eventName) {
+        var option = events[eventName];
+        listenEvent(EVENT_TYPE.UNICAST, eventName, option);
+      });
+    }
+  };
+
   var mixin = {
@@ -233,40 +272,42 @@ beforeCreate: function beforeCreate() {
 
-      this.$obStateWatcher = {};
-      var _this$$options = this.$options,
-          originalData = _this$$options.data,
-          originalWatch = _this$$options.watch,
-          _obvious = _this$$options.obvious;
+      this.$socket = this.$root.$options.$socket;
+      this.$bus = this.$root.$options.$bus;
 
-      if (_obvious && typeof _obvious !== 'function') {
-        throw new Error(Errors.obviousIsNotFunction());
+      if (!this.$bus) {
+        throw new Error(Errors.busIsRequired());
       }
 
-      var obvious = _obvious && _obvious.call(this);
+      if (!this.$socket) {
+        throw new Error(Errors.socketIsRequired());
+      }
 
-      if (isObject(obvious)) {
-        var dataOption = initNewData(originalData);
+      var _this$$options = this.$options,
+          obviousData = _this$$options.obviousData,
+          broadcast = _this$$options.broadcast,
+          unicast = _this$$options.unicast,
+          componentSocket = _this$$options.socket;
+
+      if (isObject(obviousData)) {
+        this.$obStateWatcher = {};
+        var _this$$options2 = this.$options,
+            originalData = _this$$options2.data,
+            originalWatch = _this$$options2.watch;
+        var dataOption = initNewData(originalData, this);
         var watchOption = originalWatch ? _objectSpread({}, originalWatch) : {};
-        var componentSocket = obvious.socket,
-            originalObData = obvious.data,
-            broadcast = obvious.broadcast,
-            unicast = obvious.unicast; // inject data and watch
+        var obData = formatObviousData(obviousData);
+        Object.keys(obData).forEach(function (dataName) {
+          var _ref;
 
-        if (isObject(originalObData)) {
-          var obData = formatObData(originalObData);
-          Object.keys(obData).forEach(function (dataName) {
-            var _ref2;
+          var _obData$dataName = obData[dataName],
+              state = _obData$dataName.state,
+              stateSocket = _obData$dataName.socket;
+          var socket = (_ref = stateSocket !== null && stateSocket !== void 0 ? stateSocket : componentSocket) !== null && _ref !== void 0 ? _ref : _this.$socket;
+          injectObData(dataOption, dataName, socket, state);
+          injectObDataWatcher(watchOption, dataName, socket, state, _this);
+          injectStateWatcher(dataName, socket, state, _this);
 
-            var _obData$dataName = obData[dataName],
-                state = _obData$dataName.state,
-                stateSocket = _obData$dataName.socket;
-            var socket = (_ref2 = stateSocket !== null && stateSocket !== void 0 ? stateSocket : componentSocket) !== null && _ref2 !== void 0 ? _ref2 : _this.$socket;
-            injectObData(dataOption, dataName, socket, state);
-            injectObDataWatcher(watchOption, dataName, socket, state, _this);
-            injectStateWatcher(dataName, socket, state, _this);
-          });
-
           if (isObject(originalData)) {
-            this.$options.data = dataOption;
+            _this.$options.data = dataOption;
           } else {
-            this.$options.data = function () {
+            _this.$options.data = function () {
               return dataOption;
@@ -276,16 +317,14 @@ };
 
-          this.$options.watch = watchOption;
-        } // listen broadcast
+          _this.$options.watch = watchOption;
+        });
+      }
 
+      if (isObject(broadcast)) {
+        this.$broadcastEvents = formatBroadcast(broadcast, this);
+        listenBroadcast(this.$broadcastEvents);
+      }
 
-        if (isObject(broadcast)) {
-          this.$broadcastEvents = formatEvents(broadcast, this);
-          listenEvents(EVENT_TYPE.BROADCAST, this.$broadcastEvents);
-        } // listen unicast
-
-
-        if (isObject(unicast)) {
-          this.$unicastEvents = formatEvents(unicast, this);
-          listenEvents(EVENT_TYPE.UNICAST, this.$unicastEvents);
-        }
+      if (isObject(unicast)) {
+        this.$unicastEvents = formatUnicast(unicast, this);
+        listenUnicast(this.$unicastEvents);
       }
@@ -305,6 +344,11 @@ },
       isObject(this.$broadcastEvents) && Object.keys(this.$broadcastEvents).forEach(function (eventName) {
-        var _this2$$broadcastEven = _this2.$broadcastEvents[eventName],
-            socket = _this2$$broadcastEven.socket,
-            handler = _this2$$broadcastEven.handler;
-        socket.offBroadcast(eventName, handler);
+        var watchers = _this2.$broadcastEvents[eventName];
+        watchers.forEach(function (option) {
+          var handler = option.handler,
+              socket = option.socket;
+
+          if (socket && typeof handler === 'function') {
+            socket.offBroadcast(eventName, handler);
+          }
+        });
       }); // clear unicast event handler
@@ -316,3 +360,6 @@
             handler = _this2$$unicastEvents.handler;
-        socket.offUnicast(eventName, handler);
+
+        if (socket && typeof handler === 'function') {
+          socket.offUnicast(eventName, handler);
+        }
       });
@@ -325,2 +372,23 @@ this.$obStateWatcher = null;
 
+  var broadcastMerge = function broadcastMerge(parentVal, childVal, vm) {
+    if (!childVal) {
+      return parentVal;
+    }
+
+    if (!parentVal) {
+      return childVal;
+    }
+
+    var result = parentVal;
+    Object.keys(childVal).forEach(function (eventName) {
+      if (!result[eventName]) {
+        result[eventName] = childVal[eventName];
+      } else {
+        var unflatedHandlers = [result[eventName], childVal[eventName]];
+        result[eventName] = unflatedHandlers.flat();
+      }
+    });
+    return result;
+  };
+
   function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -402,88 +470,9 @@
 
-  var formatEvents$1 = function formatEvents(events, parentSocket, defaultSocket) {
-    var result = {};
-
-    if (isObject(events)) {
-      for (var _i = 0, _Object$keys = Object.keys(events); _i < _Object$keys.length; _i++) {
-        var key = _Object$keys[_i];
-        var value = events[key];
-
-        if (typeof value === 'function') {
-          var socket = parentSocket !== null && parentSocket !== void 0 ? parentSocket : defaultSocket;
-          result[key] = {
-            socket: socket,
-            handler: value
-          };
-        } else {
-          var _ref, _value$socket;
-
-          var _socket = (_ref = (_value$socket = value.socket) !== null && _value$socket !== void 0 ? _value$socket : parentSocket) !== null && _ref !== void 0 ? _ref : defaultSocket;
-
-          result[key] = {
-            socket: _socket,
-            handler: value.handler
-          };
-        }
-      }
-    }
-
-    return result;
-  };
-
-  var obviousMegrge = function obviousMegrge(merge, defaultSocket, that) {
-    return function (parentVal, childVal, vm) {
-      // vm is undefined: is it a bug ? https://github.com/vuejs/vue/issues/9623
-      if (parentVal && !childVal) {
-        return parentVal;
-      }
-
-      if (!parentVal && childVal) {
-        return childVal;
-      }
-
-      if (parentVal && childVal) {
-        if (typeof parentVal !== 'function' || typeof childVal !== 'function') {
-          throw new Error(Errors.obviousIsNotFunction());
-        }
-
-        var parentOption = parentVal.call(vm || that);
-        var childOption = childVal.call(vm || that); // format data
-
-        var formatedParentData = formatObData(parentOption.data);
-        Object.keys(formatedParentData).forEach(function (dataName) {
-          var _ref2, _dataItem$socket;
-
-          var dataItem = formatedParentData[dataName];
-          dataItem.socket = (_ref2 = (_dataItem$socket = dataItem.socket) !== null && _dataItem$socket !== void 0 ? _dataItem$socket : parentOption.socket) !== null && _ref2 !== void 0 ? _ref2 : defaultSocket;
-        }); // format broadcast
-
-        var formatedParentBroadcast = formatEvents$1(parentOption.broadcast, parentOption.socket, defaultSocket); // format unicast
-
-        var formatedParentUnicast = formatEvents$1(parentOption.unicast, parentOption.socket, defaultSocket);
-        var result = {
-          socket: childOption.socket,
-          data: merge(formatedParentData, childOption.data),
-          broadcast: merge(formatedParentBroadcast, childOption.broadcast),
-          unicast: merge(formatedParentUnicast, childOption.unicast)
-        };
-        return function () {
-          return result;
-        };
-      }
-    };
-  };
-
   var index = {
-    install: function install(Vue, option) {
-      var bus = option.bus;
-
-      if (!bus) {
-        throw new Error(Errors.busIsRequired());
-      }
-
-      var defaultSocket = bus.createSocket();
-      Vue.prototype.$bus = bus;
-      Vue.prototype.$socket = defaultSocket;
-      var merge = Vue.config.optionMergeStrategies.methods;
-      Vue.config.optionMergeStrategies.obvious = obviousMegrge(merge, defaultSocket, Vue.prototype);
+    install: function install(Vue) {
+      var normalMerge = Vue.config.optionMergeStrategies.methods;
+      Vue.config.optionMergeStrategies.socket = normalMerge;
+      Vue.config.optionMergeStrategies.obviousData = normalMerge;
+      Vue.config.optionMergeStrategies.unicast = normalMerge;
+      Vue.config.optionMergeStrategies.broadcast = broadcastMerge;
       Vue.mixin(mixin);
@@ -490,0 +479,0 @@ Vue.component('obvious-app', ObviousApp);

package.json

 {
   "name": "obvious-vue",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "a library to help using obvious in vue2.x application",
@@ -28,3 +28,3 @@ "main": "./dist/index.umd.js",
     "hooks": {
-      "pre-commit": "npm run lint && npm run build && git add ."
+      "pre-commit": "npm run lint && npm run build && git add ./dist"
     }
@@ -31,0 +31,0 @@ },

README.md

 # obvious-vue
-[![Coverage Status](https://coveralls.io/repos/github/ObviousJs/obvious-vue/badge.svg?branch=main)](https://coveralls.io/github/ObviousJs/obvious-vue?branch=main) [![release](https://img.shields.io/github/release/ObviousJs/obvious-vue.svg)](https://github.com/ObviousJs/obvious-vue/releases) [![lastCommit](https://img.shields.io/github/last-commit/ObviousJs/obvious-vue)](https://github.com/ObviousJs/obvious-vue/commits/master)
+[![Coverage Status](https://coveralls.io/repos/github/ObviousJs/obvious-vue/badge.svg?branch=main)](https://coveralls.io/github/ObviousJs/obvious-vue?branch=main) [![release](https://img.shields.io/github/release/ObviousJs/obvious-vue.svg)](https://github.com/ObviousJs/obvious-vue/releases) [![lastCommit](https://img.shields.io/github/last-commit/ObviousJs/obvious-vue)](https://github.com/ObviousJs/obvious-vue/commits/master) [![](https://img.shields.io/badge/document-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-brightgreen)](https://github.com/ObviousJs/obvious-vue/blob/main/README.zh.md)
 
-在Vue应用中使用[obvious](https://github.com/ObviousJs/obvious-core)的第三方库
+The official library to help you use [obvious](https://github.com/ObviousJs/obvious-core) in Vue application
 
-## 安装
+## Install
+npm:
 ```
 npm install vue obvious-vue
 ```
+umd:
+```
+<script src="https://unpkg.com/obvious-vue@{version}/dist/index.umd.js"></script>
+```
 
@@ -15,18 +20,52 @@ ```js
 
+Vue.use(ObviousVue)
+```
 
-Vue.use(ObviousVue, {
-  bus: window.__Bus__.host
+## Usage
+You should provide the $bus and $socket on the root, and they will be injected into all the child components and will be available on them as `this.$bus` and `this.$socket`
+
+```js
+const $bus = window.__Bus__.host
+const $socket = $bus.createSocekt()
+
+const app = new Vue({
+  $bus,
+  $socket
 })
+
+app.$mount(document.getElementById('root'))
 ```
+### state
+You can declare the obviousData option to perform the two-way binding for Vue data and obvious state
 
-## 使用
-### bus和socket
-安装了ObviousVue后，vue.prototype中添加了$bus和$socket两个属性，$bus是在安装插件时传入的bus实例，$socket则是由$bus创建的。可以在组件内通过this.$bus和this.$socket调用obvious的API
+```vue
+<template>
+  <div :style="{color: theme}">{{ userName }}</div>
+</template>
 
-### obvious option
-安装了ObviousVue后，组件声明支持配置obvious属性
+<script>
+const anotherBus = window.__Bus__.anotherBus
+const anotherSocket = anotherBus.createSocket()
+
+export default {
+  name: 'SubComponent',
+
+  obviousData: {
+    userName: 'user.name', // Two-way binding for this.userName and this.$socket.getState('user.name')
+    theme: { // Two-way binding for this.theme and anotherSocket.getState('themeColor')
+      state: 'themeColor',
+      socket: anotherSocket
+    }
+  }
+}
+</script>
+```
+
+### broadcast and unicast
+You can declare the broadcast and unicast option to register some broadcast and unicast events for obvious
+
 ```vue
 <template>
-  <div :style="{background: theme}">
-    <span>用户名：</span>{{ userName }}
+  <ul ref="container">
+    <li v-for="item of list">{{ item }}</li>
   </div>
@@ -36,28 +75,100 @@ </template>
 <script>
-const bus = window._Bus_.local
-const localSocket = bus.createSocket()
+const anotherSocket = window.__Bus__.anotherBus.createSocket()
 
 export default {
-  obvious() {
+  data: {
+    list: []
+  },
+
+  broadcast: {
+    addItem(item) { // this.$socket.onBroadcast('addItem', handler)
+      this.list.push(item)
+    },
+    addItemByAnotherSocket: { // anotherSocket.onBroadcast('addItemByAnotherSocket', handler)
+      handler(item) {
+        this.list.push(item)
+      },
+      socket: anotherSocket
+    },
+    deleteItem(index) {
+      this.list.splice(index, 1)
+    },
+  },
+
+  unicast: {
+    getItem(index) {// this.$socket.onUnicast('getItem', handler)
+      return this.list[index]
+    },
+    getItemByAnotherSocket:{// anotherSocket.onUnicast('getItem', handler)
+      handler(index) {
+        return this.list[index]
+      },
+      socket: anotherSocket
+    }
+  }
+}
+</script>
+```
+
+### set the default socket
+The default socket to handle all states and events is this.$socket, you can change it by declare the socket option
+
+```vue
+<script>
+const anotherSocket = window.__Bus__.anotherBus.createSocket()
+export default {
+  socket,
+
+  obviousData: {
+    name: 'name' // Two-way binding for this.name and anotherSocket.getState('name')
+  },
+  broadcast: {
+    changeName(value) { // anotherSocket.onBroadcast('changeName', handler)
+      this.name = value
+    },
+    getName() { // anotherSocket.onUnicast('getName', handler)
+      return this.name
+    }
+  }
+}
+</script>
+```
+
+### activate obvious app
+after using ObviousVue, there will be a global component named obvious-app to help you easily activate an obvious app, the app will be bootstrapped when the component is mounted and will be reactivated once the props activate-config is changed, and when the component is destroyed, the app will be destroyed too 
+
+```js
+const bus = window.__Bus__.host
+
+bus.createApp('react-app')
+  .bootstrap(async (config) => {
+    ReactDOM.render(<App />, config.mountPoint)
+  })
+  .activate(async (config) => {
+    console.log(config.message)
+  })
+  .destroy(async (config) => {
+    console.log(config.message)
+    ReactDOM.unmountComponentAtNode(config.mountPoint)
+  })
+```
+
+```vue
+<template>
+  <obvious-app 
+    name="react-app" 
+    :activate-config="activateConfig"
+    :destroy-config="destroyConfig"
+  />
+</template>
+
+<script>
+export default {
+  data() {
     return {
-      data: {
-        userName: 'user.name' // this.userName与this.$socket.getState('user.name')双向绑定
-        theme: {
-          state: 'theme', // this.theme与localSocket.getState('theme')双向绑定 
-          socket: localSocket
-        }
+      activateConfig: {
+        message: 'I was activated by a vue app'
       },
-      // 在组件生命周期内监听广播和单播事件
-      broadcast: {
-        event1() {
-          // doSomething
-        }
-      },
-      unicast: {
-        event2: {
-          handler() {
-            // doSomething
-          },
-          socket: localSocket
-        }
+      destroyConfig: {
+        message: 'I was destroyed by a vue app'
       }
@@ -69,8 +180,29 @@ }
 ```
-obvious属性必须是一个函数，为了能在函数内通过this访问Vue实例，请不要使用箭头函数，obvious的返回值是一个对象，可以包含以下属性：
+all the props and events of obvious-app are below
 
-- data: 声明组件data和状态的绑定关系，data中的每个键是Vue实例的数据名，值是obvious的状态名，值也可以是一个对象，通过state属性声明状态名，socket属性单独指定操作该状态的socket
-- broadcast: 监听广播事件，broadcast中的每个键是事件名，值是事件回调函数。如果要单独指定监听事件的socket，则值可以是一个对象，在handler属性中声明回调函数，socket属性中声明监听该事件的socket
-- unicast: 监听单播事件，用法同broadcast
-- socket: 操作obvious中声明的状态和事件的socket，如果不传，则使用默认的this.$socket。socket的声明优先级是状态或事件中特定声明的socket > obvious选项中声明的socket > 默认的this.$socket
+props:
 
+|name|required|default|description|
+|----|----|-------|-----------|
+|bus|false|this.$bus|the bus to activate the target app|
+|name|true| - |the name of the app to activate|
+|activate-config|false|{}| the config argument of activating|
+|destroy-config|false|{}| the config argument of destroying|
+
+events:
+
+|name|description|
+|----|-----------|
+|activated|emitted after the app is activated|
+|destroyed|emitted after the app is destroyed|
+|error|emmited when an error is throwed during activating or destroying|
+
+## License
+obvious-vue is MIT licensed
+
+
+
+
+
+
+

src/component/obvious-app.js

@@ -23,3 +23,3 @@ export default {
 
-  data () {
+  data() {
     return {
@@ -31,7 +31,7 @@ _bus_: null
   watch: {
-    bus (value) {
+    bus(value) {
       this._bus_ = value
     },
     activateConfig: {
-      handler (value) {
+      handler(value) {
         this._bus_.activateApp(this.name, {
@@ -46,7 +46,7 @@ ...value,
 
-  created () {
+  created() {
     this._bus_ = this.bus ?? this.$bus
   },
 
-  mounted () {
+  mounted() {
     this._bus_.activateApp(this.name, {
@@ -62,3 +62,3 @@ ...this.activateConfig,
 
-  beforeDestroy () {
+  beforeDestroy() {
     this._bus_.destroyApp(this.name, {
@@ -74,3 +74,3 @@ ...this.destroyConfig,
 
-  render (h) {
+  render(h) {
     return h('div', {
@@ -77,0 +77,0 @@ ref: 'mountPoint'

src/index.js

 import mixin from './lib/mixin'
+import broadcastMerge from './lib/broadcastMergeStrategy'
 import ObviousApp from './component/obvious-app'
-import mergeStrategy from './lib/mergeStrategy'
-import { Errors } from './lib/util'
 
 export default {
-  install (Vue, option) {
-    const { bus } = option
-    if (!bus) {
-      throw new Error(Errors.busIsRequired())
-    }
-    const defaultSocket = bus.createSocket()
-
-    Vue.prototype.$bus = bus
-    Vue.prototype.$socket = defaultSocket
-
-    const merge = Vue.config.optionMergeStrategies.methods
-
-    Vue.config.optionMergeStrategies.obvious = mergeStrategy(merge, defaultSocket, Vue.prototype)
-
+  install(Vue) {
+    const normalMerge = Vue.config.optionMergeStrategies.methods
+    Vue.config.optionMergeStrategies.socket = normalMerge
+    Vue.config.optionMergeStrategies.obviousData = normalMerge
+    Vue.config.optionMergeStrategies.unicast = normalMerge
+    Vue.config.optionMergeStrategies.broadcast = broadcastMerge
     Vue.mixin(mixin)
@@ -22,0 +13,0 @@ Vue.component('obvious-app', ObviousApp)

src/lib/mixin.js

@@ -8,3 +8,4 @@ import { Errors, isObject } from './util'
 
-export const formatObData = (obData) => {
+// --------------------------- state ---------------------------- //
+const formatObviousData = (obData) => {
   const result = {}
@@ -30,33 +31,7 @@ for (const key of Object.keys(obData)) {
 
-const formatEvents = (events, context) => {
-  const result = {}
-  for (const key of Object.keys(events)) {
-    const value = events[key]
-    if (typeof value === 'function') {
-      const socket = context.$options.obvious.socket ?? context.$socket
-      result[key] = {
-        socket,
-        handler: (...args) => {
-          const result = value.call(context, ...args)
-          return result
-        }
-      }
-    } else {
-      const socket = value.socket ?? context.$options.obvious.socket ?? context.$socket
-      result[key] = {
-        socket,
-        handler: (...args) => {
-          return value.handler.call(context, ...args)
-        }
-      }
-    }
-  }
-  return result
-}
-
-const initNewData = (originalData) => {
+const initNewData = (originalData, context) => {
   let newData = {}
   if (typeof originalData === 'function') {
     newData = {
-      ...originalData()
+      ...originalData.call(context)
     }
@@ -121,41 +96,98 @@ } else if (isObject(originalData)) {
 
-const listenEvents = (type, events) => {
-  Object.keys(events).forEach((eventName) => {
-    const { handler, socket } = events[eventName]
+// --------------------------- Events ---------------------------- //
+const formatEvent = (event, context) => {
+  let result = {}
+  const defaultSocket = context.$options.socket ?? context.$socket
+  if (typeof event === 'function') {
+    result = {
+      socket: defaultSocket,
+      handler: (...args) => {
+        return event.call(context, ...args)
+      }
+    }
+  } else if (isObject(event) && typeof event.handler === 'function') {
+    result = {
+      socket: event.socket ?? defaultSocket,
+      handler: (...args) => {
+        return event.handler.call(context, ...args)
+      }
+    }
+  }
+  return result
+}
+
+const formatBroadcast = (broadcast, context) => {
+  const result = {}
+  for (const key of Object.keys(broadcast)) {
+    if (Array.isArray(broadcast[key])) {
+      result[key] = broadcast[key].map((event) => formatEvent(event, context))
+    } else if (typeof broadcast[key] === 'function' || isObject(broadcast[key])) {
+      result[key] = [formatEvent(broadcast[key], context)]
+    }
+  }
+  return result
+}
+
+const formatUnicast = (unicast, context) => {
+  const result = {}
+  for (const key of Object.keys(unicast)) {
+    result[key] = formatEvent(unicast[key], context)
+  }
+  return result
+}
+
+const listenEvent = (type, eventName, option) => {
+  const { handler, socket } = option
+  if (socket && typeof handler === 'function') {
     socket[`on${type}`](eventName, handler)
-  })
+  }
 }
 
+const listenBroadcast = (events) => {
+  if (isObject(events)) {
+    Object.keys(events).forEach((eventName) => {
+      const listenerOptions = events[eventName]
+      listenerOptions.forEach((option) => {
+        listenEvent(EVENT_TYPE.BROADCAST, eventName, option)
+      })
+    })
+  }
+}
+
+const listenUnicast = (events) => {
+  if (isObject(events)) {
+    Object.keys(events).forEach((eventName) => {
+      const option = events[eventName]
+      listenEvent(EVENT_TYPE.UNICAST, eventName, option)
+    })
+  }
+}
+
 export default {
-  beforeCreate () {
-    this.$obStateWatcher = {}
-    const { data: originalData, watch: originalWatch, obvious: _obvious } = this.$options
-    if (_obvious && typeof _obvious !== 'function') {
-      throw new Error(Errors.obviousIsNotFunction())
+  beforeCreate() {
+    this.$socket = this.$root.$options.$socket
+    this.$bus = this.$root.$options.$bus
+    if (!this.$bus) {
+      throw new Error(Errors.busIsRequired())
     }
-    const obvious = _obvious && _obvious.call(this)
-    if (isObject(obvious)) {
-      const dataOption = initNewData(originalData)
+    if (!this.$socket) {
+      throw new Error(Errors.socketIsRequired())
+    }
+    const { obviousData, broadcast, unicast, socket: componentSocket } = this.$options
+    if (isObject(obviousData)) {
+      this.$obStateWatcher = {}
+      const { data: originalData, watch: originalWatch } = this.$options
+      const dataOption = initNewData(originalData, this)
       const watchOption = originalWatch ? { ...originalWatch } : {}
-      const {
-        socket: componentSocket,
-        data: originalObData,
-        broadcast,
-        unicast
-      } = obvious
-
-      // inject data and watch
-      if (isObject(originalObData)) {
-        const obData = formatObData(originalObData)
-        Object.keys(obData).forEach((dataName) => {
-          const { state, socket: stateSocket } = obData[dataName]
-          const socket = stateSocket ?? componentSocket ?? this.$socket
-          injectObData(dataOption, dataName, socket, state)
-          injectObDataWatcher(watchOption, dataName, socket, state, this)
-          injectStateWatcher(dataName, socket, state, this)
-        })
+      const obData = formatObviousData(obviousData)
+      Object.keys(obData).forEach((dataName) => {
+        const { state, socket: stateSocket } = obData[dataName]
+        const socket = stateSocket ?? componentSocket ?? this.$socket
+        injectObData(dataOption, dataName, socket, state)
+        injectObDataWatcher(watchOption, dataName, socket, state, this)
+        injectStateWatcher(dataName, socket, state, this)
         if (isObject(originalData)) {
           this.$options.data = dataOption
         } else {
-          this.$options.data = function () {
+          this.$options.data = function() {
             return dataOption
@@ -165,19 +197,16 @@ }
         this.$options.watch = watchOption
-      }
+      })
+    }
+    if (isObject(broadcast)) {
+      this.$broadcastEvents = formatBroadcast(broadcast, this)
+      listenBroadcast(this.$broadcastEvents)
+    }
 
-      // listen broadcast
-      if (isObject(broadcast)) {
-        this.$broadcastEvents = formatEvents(broadcast, this)
-        listenEvents(EVENT_TYPE.BROADCAST, this.$broadcastEvents)
-      }
-
-      // listen unicast
-      if (isObject(unicast)) {
-        this.$unicastEvents = formatEvents(unicast, this)
-        listenEvents(EVENT_TYPE.UNICAST, this.$unicastEvents)
-      }
+    if (isObject(unicast)) {
+      this.$unicastEvents = formatUnicast(unicast, this)
+      listenUnicast(this.$unicastEvents)
     }
   },
 
-  beforeDestroy () {
+  beforeDestroy() {
     // clear obvious state watcher
@@ -190,4 +219,9 @@ isObject(this.$obStateWatcher) && Object.keys(this.$obStateWatcher).forEach((stateName) => {
     isObject(this.$broadcastEvents) && Object.keys(this.$broadcastEvents).forEach((eventName) => {
-      const { socket, handler } = this.$broadcastEvents[eventName]
-      socket.offBroadcast(eventName, handler)
+      const watchers = this.$broadcastEvents[eventName]
+      watchers.forEach((option) => {
+        const { handler, socket } = option
+        if (socket && typeof handler === 'function') {
+          socket.offBroadcast(eventName, handler)
+        }
+      })
     })
@@ -197,3 +231,5 @@ // clear unicast event handler
       const { socket, handler } = this.$unicastEvents[eventName]
-      socket.offUnicast(eventName, handler)
+      if (socket && typeof handler === 'function') {
+        socket.offUnicast(eventName, handler)
+      }
     })
@@ -200,0 +236,0 @@ this.$obStateWatcher = null

src/lib/util.js

@@ -6,6 +6,6 @@ export const isObject = (object) => {
 export const Errors = {
-  busIsRequired: () => '[obvious-vue] the bus must be provided when using ObviousVue',
-  obviousIsNotFunction: () => '[obvious-vue] the option obvious must be a function',
-  stateIsRequired: (dataName) => `[obvious-vue] state is required in obvious.data.${dataName}`,
-  wrongObDataType: (dataName, type) => `[obvious-vue] obvious.data.${dataName} should be a string or a object, but got ${type}`
+  busIsRequired: () => '[obvious-vue] $bus must be provided on the root Vue instance',
+  socketIsRequired: () => '[obvious-vue] $socket must be provided on the root Vue instance',
+  stateIsRequired: (dataName) => `[obvious-vue] state is required in obviousData.${dataName}`,
+  wrongObDataType: (dataName, type) => `[obvious-vue] obviousData.${dataName} should be a string or a object, but got ${type}`
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of lines in readme file

206

increased by178.38%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

1

decreased by-80%

Worsened metrics

Total package byte prevSize

228759

decreased by-84.81%

Number of package files

30

decreased by-52.38%

Lines of code

1800

decreased by-94.6%

No dependency changes