vue-class-component - npm Package Compare versions

Comparing version 8.0.0-alpha.2 to 8.0.0-alpha.3

dist/vue-class-component.common.js

 /**
-  * vue-class-component v8.0.0-alpha.2
+  * vue-class-component v8.0.0-alpha.3
   * (c) 2015-present Evan You
@@ -10,2 +10,4 @@ * @license MIT
 
+var vue = require('vue');
+
 function _classCallCheck(instance, Constructor) {
@@ -149,4 +151,8 @@ if (!(instance instanceof Constructor)) {
 
-function isFunction(value) {
-  return typeof value === 'function';
+function defineGetter(obj, key, getter) {
+  Object.defineProperty(obj, key, {
+    get: getter,
+    enumerable: false,
+    configurable: true
+  });
 }
@@ -168,3 +174,3 @@
 function () {
-  function Vue(props) {
+  function Vue(props, ctx) {
     var _this = this;
@@ -174,3 +180,14 @@
 
-    this.$props = props;
+    defineGetter(this, '$props', function () {
+      return props;
+    });
+    defineGetter(this, '$attrs', function () {
+      return ctx.attrs;
+    });
+    defineGetter(this, '$slots', function () {
+      return ctx.slots;
+    });
+    defineGetter(this, '$emit', function () {
+      return ctx.emit;
+    });
     Object.keys(props).forEach(function (key) {
@@ -219,6 +236,4 @@ Object.defineProperty(_this, key, {
         options.mixins = options.mixins ? options.mixins.concat(mixins) : mixins;
-      } // Class name -> component name
+      }
 
-
-      options.name = options.name || Ctor.name;
       options.methods = _objectSpread2({}, options.methods);
@@ -253,18 +268,13 @@ options.computed = _objectSpread2({}, options.computed);
         }
-      }); // Class properties -> reactive data
+      });
 
-      var hookDataOption = options.data;
-
-      options.data = function () {
-        var hookData = isFunction(hookDataOption) ? hookDataOption.call(this, this) : hookDataOption; // should be acquired class property values
-
-        var data = new Ctor(this.$props); // create plain data object
-
+      options.setup = function (props, ctx) {
+        var data = new Ctor(props, ctx);
         var plainData = {};
         Object.keys(data).forEach(function (key) {
-          if (data[key] !== undefined && key !== '$props') {
+          if (data[key] !== undefined) {
             plainData[key] = data[key];
           }
         });
-        return _objectSpread2({}, hookData, {}, plainData);
+        return vue.reactive(plainData);
       };
@@ -331,4 +341,2 @@
 function mixins() {
-  var _a;
-
   for (var _len = arguments.length, Ctors = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -338,2 +346,4 @@ Ctors[_key] = arguments[_key];
 
+  var _a;
+
   return _a =
@@ -344,6 +354,15 @@ /*#__PURE__*/
 
-    function MixedVue() {
+    function MixedVue(props, ctx) {
+      var _this;
+
       _classCallCheck(this, MixedVue);
 
-      return _possibleConstructorReturn(this, _getPrototypeOf(MixedVue).apply(this, arguments));
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(MixedVue).call(this, props, ctx));
+      Ctors.forEach(function (Ctor) {
+        var data = new Ctor(props, ctx);
+        Object.keys(data).forEach(function (key) {
+          _this[key] = data[key];
+        });
+      });
+      return _this;
     }
@@ -350,0 +369,0 @@

dist/vue-class-component.esm.browser.js

 /**
-  * vue-class-component v8.0.0-alpha.2
+  * vue-class-component v8.0.0-alpha.3
   * (c) 2015-present Evan You
   * @license MIT
   */
+import { reactive } from 'vue';
+
 function _defineProperty(obj, key, value) {
@@ -55,4 +57,8 @@ if (key in obj) {
 
-function isFunction(value) {
-  return typeof value === 'function';
+function defineGetter(obj, key, getter) {
+  Object.defineProperty(obj, key, {
+    get: getter,
+    enumerable: false,
+    configurable: true
+  });
 }
@@ -72,4 +78,7 @@
 class Vue {
-  constructor(props) {
-    this.$props = props;
+  constructor(props, ctx) {
+    defineGetter(this, '$props', () => props);
+    defineGetter(this, '$attrs', () => ctx.attrs);
+    defineGetter(this, '$slots', () => ctx.slots);
+    defineGetter(this, '$emit', () => ctx.emit);
     Object.keys(props).forEach(key => {
@@ -109,6 +118,4 @@ Object.defineProperty(this, key, {
       options.mixins = options.mixins ? options.mixins.concat(mixins) : mixins;
-    } // Class name -> component name
+    }
 
-
-    options.name = options.name || Ctor.name;
     options.methods = _objectSpread2({}, options.methods);
@@ -143,18 +150,13 @@ options.computed = _objectSpread2({}, options.computed);
       }
-    }); // Class properties -> reactive data
+    });
 
-    var hookDataOption = options.data;
-
-    options.data = function () {
-      var hookData = isFunction(hookDataOption) ? hookDataOption.call(this, this) : hookDataOption; // should be acquired class property values
-
-      var data = new Ctor(this.$props); // create plain data object
-
+    options.setup = function (props, ctx) {
+      var data = new Ctor(props, ctx);
       var plainData = {};
       Object.keys(data).forEach(key => {
-        if (data[key] !== undefined && key !== '$props') {
+        if (data[key] !== undefined) {
           plainData[key] = data[key];
         }
       });
-      return _objectSpread2({}, hookData, {}, plainData);
+      return reactive(plainData);
     };
@@ -219,4 +221,2 @@
 function mixins() {
-  var _a;
-
   for (var _len = arguments.length, Ctors = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -226,5 +226,18 @@ Ctors[_key] = arguments[_key];
 
-  return _a = class MixedVue extends Vue {}, _a.__vccMixins = Ctors.map(Ctor => Ctor.__vccOpts), _a;
+  var _a;
+
+  return _a = class MixedVue extends Vue {
+    constructor(props, ctx) {
+      super(props, ctx);
+      Ctors.forEach(Ctor => {
+        var data = new Ctor(props, ctx);
+        Object.keys(data).forEach(key => {
+          this[key] = data[key];
+        });
+      });
+    }
+
+  }, _a.__vccMixins = Ctors.map(Ctor => Ctor.__vccOpts), _a;
 }
 
 export { Options, Vue, createDecorator, mixins };

dist/vue-class-component.esm.browser.min.js

 /**
-  * vue-class-component v8.0.0-alpha.2
+  * vue-class-component v8.0.0-alpha.3
   * (c) 2015-present Evan You
   * @license MIT
   */
-function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,c)}return r}function _objectSpread2(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach(function(t){_defineProperty(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function isFunction(e){return"function"==typeof e}function getSuperOptions(e){var t=Object.getPrototypeOf(e.prototype);if(t)return t.constructor.__vccOpts}class Vue{constructor(e){this.$props=e,Object.keys(e).forEach(t=>{Object.defineProperty(this,t,{enumerable:!1,configurable:!0,writable:!0,value:e[t]})})}static get __vccOpts(){if(this===Vue)return{};var e=this.hasOwnProperty("__vccCache")&&this.__vccCache;if(e)return e;var t=this,r=this.__vccCache=this.hasOwnProperty("__vccBase")?_objectSpread2({},this.__vccBase):{};r.extends=getSuperOptions(t);var c=this.hasOwnProperty("__vccMixins")&&this.__vccMixins;c&&(r.mixins=r.mixins?r.mixins.concat(c):c),r.name=r.name||t.name,r.methods=_objectSpread2({},r.methods),r.computed=_objectSpread2({},r.computed);var o=t.prototype;Object.getOwnPropertyNames(o).forEach(e=>{if("constructor"!==e)if(t.__vccHooks.indexOf(e)>-1)r[e]=o[e];else{var c=Object.getOwnPropertyDescriptor(o,e);"function"!=typeof c.value?(c.get||c.set)&&(r.computed[e]={get:c.get,set:c.set}):r.methods[e]=c.value}});var n=r.data;r.data=function(){var e=isFunction(n)?n.call(this,this):n,r=new t(this.$props),c={};return Object.keys(r).forEach(e=>{void 0!==r[e]&&"$props"!==e&&(c[e]=r[e])}),_objectSpread2({},e,{},c)};var s=this.hasOwnProperty("__vccDecorators")&&this.__vccDecorators;return s&&s.forEach(e=>e(r)),t.render&&(r.render=t.render),t.__file&&(r.__file=t.__file),t.__cssModules&&(r.__cssModules=t.__cssModules),t.__scopeId&&(r.__scopeId=t.__scopeId),r}static registerHooks(e){this.__vccHooks.push(...e)}}function Options(e){return t=>(t.__vccBase=e,t)}function createDecorator(e){return(t,r,c)=>{var o="function"==typeof t?t:t.constructor;o.__vccDecorators||(o.__vccDecorators=[]),"number"!=typeof c&&(c=void 0),o.__vccDecorators.push(t=>e(t,r,c))}}function mixins(){for(var e,t=arguments.length,r=new Array(t),c=0;c<t;c++)r[c]=arguments[c];return(e=class extends Vue{}).__vccMixins=r.map(e=>e.__vccOpts),e}Vue.__vccHooks=["data","beforeCreate","created","beforeMount","mounted","beforeUnmount","unmounted","beforeUpdate","updated","activated","deactivated","render","errorCaptured","serverPrefetch"];export{Options,Vue,createDecorator,mixins};
+import{reactive}from"vue";function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,c)}return r}function _objectSpread2(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach(function(t){_defineProperty(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function defineGetter(e,t,r){Object.defineProperty(e,t,{get:r,enumerable:!1,configurable:!0})}function getSuperOptions(e){var t=Object.getPrototypeOf(e.prototype);if(t)return t.constructor.__vccOpts}class Vue{constructor(e,t){defineGetter(this,"$props",()=>e),defineGetter(this,"$attrs",()=>t.attrs),defineGetter(this,"$slots",()=>t.slots),defineGetter(this,"$emit",()=>t.emit),Object.keys(e).forEach(t=>{Object.defineProperty(this,t,{enumerable:!1,configurable:!0,writable:!0,value:e[t]})})}static get __vccOpts(){if(this===Vue)return{};var e=this.hasOwnProperty("__vccCache")&&this.__vccCache;if(e)return e;var t=this,r=this.__vccCache=this.hasOwnProperty("__vccBase")?_objectSpread2({},this.__vccBase):{};r.extends=getSuperOptions(t);var c=this.hasOwnProperty("__vccMixins")&&this.__vccMixins;c&&(r.mixins=r.mixins?r.mixins.concat(c):c),r.methods=_objectSpread2({},r.methods),r.computed=_objectSpread2({},r.computed);var o=t.prototype;Object.getOwnPropertyNames(o).forEach(e=>{if("constructor"!==e)if(t.__vccHooks.indexOf(e)>-1)r[e]=o[e];else{var c=Object.getOwnPropertyDescriptor(o,e);"function"!=typeof c.value?(c.get||c.set)&&(r.computed[e]={get:c.get,set:c.set}):r.methods[e]=c.value}}),r.setup=function(e,r){var c=new t(e,r),o={};return Object.keys(c).forEach(e=>{void 0!==c[e]&&(o[e]=c[e])}),reactive(o)};var n=this.hasOwnProperty("__vccDecorators")&&this.__vccDecorators;return n&&n.forEach(e=>e(r)),t.render&&(r.render=t.render),t.__file&&(r.__file=t.__file),t.__cssModules&&(r.__cssModules=t.__cssModules),t.__scopeId&&(r.__scopeId=t.__scopeId),r}static registerHooks(e){this.__vccHooks.push(...e)}}function Options(e){return t=>(t.__vccBase=e,t)}function createDecorator(e){return(t,r,c)=>{var o="function"==typeof t?t:t.constructor;o.__vccDecorators||(o.__vccDecorators=[]),"number"!=typeof c&&(c=void 0),o.__vccDecorators.push(t=>e(t,r,c))}}function mixins(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];var c;return(c=class extends Vue{constructor(e,r){super(e,r),t.forEach(t=>{var c=new t(e,r);Object.keys(c).forEach(e=>{this[e]=c[e]})})}}).__vccMixins=t.map(e=>e.__vccOpts),c}Vue.__vccHooks=["data","beforeCreate","created","beforeMount","mounted","beforeUnmount","unmounted","beforeUpdate","updated","activated","deactivated","render","errorCaptured","serverPrefetch"];export{Options,Vue,createDecorator,mixins};

dist/vue-class-component.esm.js

 /**
-  * vue-class-component v8.0.0-alpha.2
+  * vue-class-component v8.0.0-alpha.3
   * (c) 2015-present Evan You
   * @license MIT
   */
+import { reactive } from 'vue';
+
 function _classCallCheck(instance, Constructor) {
@@ -144,4 +146,8 @@ if (!(instance instanceof Constructor)) {
 
-function isFunction(value) {
-  return typeof value === 'function';
+function defineGetter(obj, key, getter) {
+  Object.defineProperty(obj, key, {
+    get: getter,
+    enumerable: false,
+    configurable: true
+  });
 }
@@ -163,3 +169,3 @@
 function () {
-  function Vue(props) {
+  function Vue(props, ctx) {
     var _this = this;
@@ -169,3 +175,14 @@
 
-    this.$props = props;
+    defineGetter(this, '$props', function () {
+      return props;
+    });
+    defineGetter(this, '$attrs', function () {
+      return ctx.attrs;
+    });
+    defineGetter(this, '$slots', function () {
+      return ctx.slots;
+    });
+    defineGetter(this, '$emit', function () {
+      return ctx.emit;
+    });
     Object.keys(props).forEach(function (key) {
@@ -214,6 +231,4 @@ Object.defineProperty(_this, key, {
         options.mixins = options.mixins ? options.mixins.concat(mixins) : mixins;
-      } // Class name -> component name
+      }
 
-
-      options.name = options.name || Ctor.name;
       options.methods = _objectSpread2({}, options.methods);
@@ -248,18 +263,13 @@ options.computed = _objectSpread2({}, options.computed);
         }
-      }); // Class properties -> reactive data
+      });
 
-      var hookDataOption = options.data;
-
-      options.data = function () {
-        var hookData = isFunction(hookDataOption) ? hookDataOption.call(this, this) : hookDataOption; // should be acquired class property values
-
-        var data = new Ctor(this.$props); // create plain data object
-
+      options.setup = function (props, ctx) {
+        var data = new Ctor(props, ctx);
         var plainData = {};
         Object.keys(data).forEach(function (key) {
-          if (data[key] !== undefined && key !== '$props') {
+          if (data[key] !== undefined) {
             plainData[key] = data[key];
           }
         });
-        return _objectSpread2({}, hookData, {}, plainData);
+        return reactive(plainData);
       };
@@ -326,4 +336,2 @@
 function mixins() {
-  var _a;
-
   for (var _len = arguments.length, Ctors = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -333,2 +341,4 @@ Ctors[_key] = arguments[_key];
 
+  var _a;
+
   return _a =
@@ -339,6 +349,15 @@ /*#__PURE__*/
 
-    function MixedVue() {
+    function MixedVue(props, ctx) {
+      var _this;
+
       _classCallCheck(this, MixedVue);
 
-      return _possibleConstructorReturn(this, _getPrototypeOf(MixedVue).apply(this, arguments));
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(MixedVue).call(this, props, ctx));
+      Ctors.forEach(function (Ctor) {
+        var data = new Ctor(props, ctx);
+        Object.keys(data).forEach(function (key) {
+          _this[key] = data[key];
+        });
+      });
+      return _this;
     }
@@ -345,0 +364,0 @@

dist/vue-class-component.js

 /**
-  * vue-class-component v8.0.0-alpha.2
+  * vue-class-component v8.0.0-alpha.3
   * (c) 2015-present Evan You
@@ -7,6 +7,6 @@ * @license MIT
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = global || self, factory(global.VueClassComponent = {}));
-}(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+  (global = global || self, factory(global.VueClassComponent = {}, global.Vue));
+}(this, (function (exports, vue) { 'use strict';
 
@@ -151,4 +151,8 @@ function _classCallCheck(instance, Constructor) {
 
-  function isFunction(value) {
-    return typeof value === 'function';
+  function defineGetter(obj, key, getter) {
+    Object.defineProperty(obj, key, {
+      get: getter,
+      enumerable: false,
+      configurable: true
+    });
   }
@@ -170,3 +174,3 @@
   function () {
-    function Vue(props) {
+    function Vue(props, ctx) {
       var _this = this;
@@ -176,3 +180,14 @@
 
-      this.$props = props;
+      defineGetter(this, '$props', function () {
+        return props;
+      });
+      defineGetter(this, '$attrs', function () {
+        return ctx.attrs;
+      });
+      defineGetter(this, '$slots', function () {
+        return ctx.slots;
+      });
+      defineGetter(this, '$emit', function () {
+        return ctx.emit;
+      });
       Object.keys(props).forEach(function (key) {
@@ -221,6 +236,4 @@ Object.defineProperty(_this, key, {
           options.mixins = options.mixins ? options.mixins.concat(mixins) : mixins;
-        } // Class name -> component name
+        }
 
-
-        options.name = options.name || Ctor.name;
         options.methods = _objectSpread2({}, options.methods);
@@ -255,18 +268,13 @@ options.computed = _objectSpread2({}, options.computed);
           }
-        }); // Class properties -> reactive data
+        });
 
-        var hookDataOption = options.data;
-
-        options.data = function () {
-          var hookData = isFunction(hookDataOption) ? hookDataOption.call(this, this) : hookDataOption; // should be acquired class property values
-
-          var data = new Ctor(this.$props); // create plain data object
-
+        options.setup = function (props, ctx) {
+          var data = new Ctor(props, ctx);
           var plainData = {};
           Object.keys(data).forEach(function (key) {
-            if (data[key] !== undefined && key !== '$props') {
+            if (data[key] !== undefined) {
               plainData[key] = data[key];
             }
           });
-          return _objectSpread2({}, hookData, {}, plainData);
+          return vue.reactive(plainData);
         };
@@ -333,4 +341,2 @@
   function mixins() {
-    var _a;
-
     for (var _len = arguments.length, Ctors = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -340,2 +346,4 @@ Ctors[_key] = arguments[_key];
 
+    var _a;
+
     return _a =
@@ -346,6 +354,15 @@ /*#__PURE__*/
 
-      function MixedVue() {
+      function MixedVue(props, ctx) {
+        var _this;
+
         _classCallCheck(this, MixedVue);
 
-        return _possibleConstructorReturn(this, _getPrototypeOf(MixedVue).apply(this, arguments));
+        _this = _possibleConstructorReturn(this, _getPrototypeOf(MixedVue).call(this, props, ctx));
+        Ctors.forEach(function (Ctor) {
+          var data = new Ctor(props, ctx);
+          Object.keys(data).forEach(function (key) {
+            _this[key] = data[key];
+          });
+        });
+        return _this;
       }
@@ -352,0 +369,0 @@

dist/vue-class-component.min.js

 /**
-  * vue-class-component v8.0.0-alpha.2
+  * vue-class-component v8.0.0-alpha.3
   * (c) 2015-present Evan You
   * @license MIT
   */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).VueClassComponent={})}(this,function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var f=function(){function e(r){var n=this;t(this,e),this.$props=r,Object.keys(r).forEach(function(e){Object.defineProperty(n,e,{enumerable:!1,configurable:!0,writable:!0,value:r[e]})})}var n,o,i;return n=e,i=[{key:"registerHooks",value:function(e){var t;(t=this.__vccHooks).push.apply(t,a(e))}},{key:"__vccOpts",get:function(){if(this===e)return{};var t=this.hasOwnProperty("__vccCache")&&this.__vccCache;if(t)return t;var r=this,n=this.__vccCache=this.hasOwnProperty("__vccBase")?c({},this.__vccBase):{};n.extends=function(e){var t=Object.getPrototypeOf(e.prototype);if(t)return t.constructor.__vccOpts}(r);var o=this.hasOwnProperty("__vccMixins")&&this.__vccMixins;o&&(n.mixins=n.mixins?n.mixins.concat(o):o),n.name=n.name||r.name,n.methods=c({},n.methods),n.computed=c({},n.computed);var i=r.prototype;Object.getOwnPropertyNames(i).forEach(function(e){if("constructor"!==e)if(r.__vccHooks.indexOf(e)>-1)n[e]=i[e];else{var t=Object.getOwnPropertyDescriptor(i,e);"function"!=typeof t.value?(t.get||t.set)&&(n.computed[e]={get:t.get,set:t.set}):n.methods[e]=t.value}});var u=n.data;n.data=function(){var e="function"==typeof u?u.call(this,this):u,t=new r(this.$props),n={};return Object.keys(t).forEach(function(e){void 0!==t[e]&&"$props"!==e&&(n[e]=t[e])}),c({},e,{},n)};var s=this.hasOwnProperty("__vccDecorators")&&this.__vccDecorators;return s&&s.forEach(function(e){return e(n)}),r.render&&(n.render=r.render),r.__file&&(n.__file=r.__file),r.__cssModules&&(n.__cssModules=r.__cssModules),r.__scopeId&&(n.__scopeId=r.__scopeId),n}}],(o=null)&&r(n.prototype,o),i&&r(n,i),e}();f.__vccHooks=["data","beforeCreate","created","beforeMount","mounted","beforeUnmount","unmounted","beforeUpdate","updated","activated","deactivated","render","errorCaptured","serverPrefetch"],e.Options=function(e){return function(t){return t.__vccBase=e,t}},e.Vue=f,e.createDecorator=function(e){return function(t,r,n){var o="function"==typeof t?t:t.constructor;o.__vccDecorators||(o.__vccDecorators=[]),"number"!=typeof n&&(n=void 0),o.__vccDecorators.push(function(t){return e(t,r,n)})}},e.mixins=function(){for(var e,r=arguments.length,n=new Array(r),o=0;o<r;o++)n[o]=arguments[o];return(e=function(e){function r(){return t(this,r),s(this,i(r).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}(r,f),r}()).__vccMixins=n.map(function(e){return e.__vccOpts}),e},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).VueClassComponent={},e.Vue)}(this,function(e,t){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach(function(t){o(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function f(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function a(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(e,t,r){Object.defineProperty(e,t,{get:r,enumerable:!1,configurable:!0})}var _=function(){function e(t,n){var o=this;r(this,e),p(this,"$props",function(){return t}),p(this,"$attrs",function(){return n.attrs}),p(this,"$slots",function(){return n.slots}),p(this,"$emit",function(){return n.emit}),Object.keys(t).forEach(function(e){Object.defineProperty(o,e,{enumerable:!1,configurable:!0,writable:!0,value:t[e]})})}var o,c,u;return o=e,u=[{key:"registerHooks",value:function(e){var t;(t=this.__vccHooks).push.apply(t,a(e))}},{key:"__vccOpts",get:function(){if(this===e)return{};var r=this.hasOwnProperty("__vccCache")&&this.__vccCache;if(r)return r;var n=this,o=this.__vccCache=this.hasOwnProperty("__vccBase")?i({},this.__vccBase):{};o.extends=function(e){var t=Object.getPrototypeOf(e.prototype);if(t)return t.constructor.__vccOpts}(n);var c=this.hasOwnProperty("__vccMixins")&&this.__vccMixins;c&&(o.mixins=o.mixins?o.mixins.concat(c):c),o.methods=i({},o.methods),o.computed=i({},o.computed);var u=n.prototype;Object.getOwnPropertyNames(u).forEach(function(e){if("constructor"!==e)if(n.__vccHooks.indexOf(e)>-1)o[e]=u[e];else{var t=Object.getOwnPropertyDescriptor(u,e);"function"!=typeof t.value?(t.get||t.set)&&(o.computed[e]={get:t.get,set:t.set}):o.methods[e]=t.value}}),o.setup=function(e,r){var o=new n(e,r),c={};return Object.keys(o).forEach(function(e){void 0!==o[e]&&(c[e]=o[e])}),t.reactive(c)};var s=this.hasOwnProperty("__vccDecorators")&&this.__vccDecorators;return s&&s.forEach(function(e){return e(o)}),n.render&&(o.render=n.render),n.__file&&(o.__file=n.__file),n.__cssModules&&(o.__cssModules=n.__cssModules),n.__scopeId&&(o.__scopeId=n.__scopeId),o}}],(c=null)&&n(o.prototype,c),u&&n(o,u),e}();_.__vccHooks=["data","beforeCreate","created","beforeMount","mounted","beforeUnmount","unmounted","beforeUpdate","updated","activated","deactivated","render","errorCaptured","serverPrefetch"],e.Options=function(e){return function(t){return t.__vccBase=e,t}},e.Vue=_,e.createDecorator=function(e){return function(t,r,n){var o="function"==typeof t?t:t.constructor;o.__vccDecorators||(o.__vccDecorators=[]),"number"!=typeof n&&(n=void 0),o.__vccDecorators.push(function(t){return e(t,r,n)})}},e.mixins=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var o;return(o=function(e){function n(e,o){var c;return r(this,n),c=f(this,u(n).call(this,e,o)),t.forEach(function(t){var r=new t(e,o);Object.keys(r).forEach(function(e){c[e]=r[e]})}),c}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)}(n,_),n}()).__vccMixins=t.map(function(e){return e.__vccOpts}),o},Object.defineProperty(e,"__esModule",{value:!0})});

lib/helpers.js

@@ -25,2 +25,11 @@ import { Vue } from './vue';
     return _a = class MixedVue extends Vue {
+            constructor(props, ctx) {
+                super(props, ctx);
+                Ctors.forEach(Ctor => {
+                    const data = new Ctor(props, ctx);
+                    Object.keys(data).forEach(key => {
+                        this[key] = data[key];
+                    });
+                });
+            }
         },
@@ -27,0 +36,0 @@ _a.__vccMixins = Ctors.map(Ctor => Ctor.__vccOpts),

lib/vue.d.ts

@@ -1,2 +0,2 @@
-import { ComponentPublicInstance, ComponentOptions, VNode } from 'vue';
+import { ComponentPublicInstance, ComponentOptions, VNode, SetupContext } from 'vue';
 interface ClassComponentHooks {
@@ -27,8 +27,5 @@ }
     $data: ComponentPublicInstance['$data'];
-    $attrs: ComponentPublicInstance['$attrs'];
     $refs: ComponentPublicInstance['$refs'];
-    $slots: ComponentPublicInstance['$slots'];
     $root: ComponentPublicInstance['$root'];
     $parent: ComponentPublicInstance['$parent'];
-    $emit: ComponentPublicInstance['$emit'];
     $el: ComponentPublicInstance['$el'];
@@ -40,2 +37,5 @@ $options: ComponentPublicInstance['$options'];
     $props: Props;
+    $emit: (event: string, ...args: any[]) => void;
+    $attrs: ComponentPublicInstance['$attrs'];
+    $slots: ComponentPublicInstance['$slots'];
     data?(): object;
@@ -59,4 +59,4 @@ beforeCreate?(): void;
     static __scopeId?: string;
-    constructor(props: Props);
+    constructor(props: Props, ctx: SetupContext);
 }
 export {};

lib/vue.js

@@ -1,3 +0,8 @@
-function isFunction(value) {
-    return typeof value === 'function';
+import { reactive } from 'vue';
+function defineGetter(obj, key, getter) {
+    Object.defineProperty(obj, key, {
+        get: getter,
+        enumerable: false,
+        configurable: true
+    });
 }
@@ -13,4 +18,7 @@ function getSuperOptions(Ctor) {
 export class Vue {
-    constructor(props) {
-        this.$props = props;
+    constructor(props, ctx) {
+        defineGetter(this, '$props', () => props);
+        defineGetter(this, '$attrs', () => ctx.attrs);
+        defineGetter(this, '$slots', () => ctx.slots);
+        defineGetter(this, '$emit', () => ctx.emit);
         Object.keys(props).forEach(key => {
@@ -47,4 +55,2 @@ Object.defineProperty(this, key, {
         }
-        // Class name -> component name
-        options.name = options.name || Ctor.name;
         options.methods = { ...options.methods };
@@ -77,21 +83,11 @@ options.computed = { ...options.computed };
         });
-        // Class properties -> reactive data
-        const hookDataOption = options.data;
-        options.data = function () {
-            const hookData = isFunction(hookDataOption)
-                ? hookDataOption.call(this, this)
-                : hookDataOption;
-            // should be acquired class property values
-            const data = new Ctor(this.$props);
-            // create plain data object
+        options.setup = function (props, ctx) {
+            const data = new Ctor(props, ctx);
             const plainData = {};
             Object.keys(data).forEach(key => {
-                if (data[key] !== undefined && key !== '$props') {
+                if (data[key] !== undefined) {
                     plainData[key] = data[key];
                 }
             });
-            return {
-                ...hookData,
-                ...plainData
-            };
+            return reactive(plainData);
         };
@@ -98,0 +94,0 @@ const decorators = this.hasOwnProperty('__vccDecorators') && this.__vccDecorators;

package.json

 {
   "name": "vue-class-component",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "ES201X/TypeScript class decorator for Vue components",
@@ -58,3 +58,3 @@ "main": "dist/vue-class-component.common.js",
     "@typescript-eslint/parser": "^2.15.0",
-    "@vue/compiler-sfc": "^3.0.0-alpha.12",
+    "@vue/compiler-sfc": "^3.0.0-beta.4",
     "babel-jest": "^25.1.0",
@@ -75,3 +75,3 @@ "babel-loader": "^8.0.6",
     "uglify-es": "^3.3.9",
-    "vue": "^3.0.0-alpha.12",
+    "vue": "^3.0.0-beta.4",
     "vue-loader": "^16.0.0-alpha.3",
@@ -78,0 +78,0 @@ "webpack": "^4.41.5",

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Improved metrics

Total package byte prevSize

55552

increased by3.15%

Lines of code

1337

increased by6.53%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes