vue-class-component - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

dist/vue-class-component.common.js

 /**
-  * vue-class-component v5.0.1
+  * vue-class-component v5.0.2
   * (c) 2015-2017 Evan You
@@ -15,7 +15,11 @@ * @license MIT
 function createDecorator(factory) {
-    return function (_, key, index) {
+    return function (target, key, index) {
+        var Ctor = target.constructor;
+        if (!Ctor.__decorators__) {
+            Ctor.__decorators__ = [];
+        }
         if (typeof index !== 'number') {
             index = undefined;
         }
-        $decoratorQueue.push(function (options) { return factory(options, key, index); });
+        Ctor.__decorators__.push(function (options) { return factory(options, key, index); });
     };
@@ -79,3 +83,2 @@ }
 ];
-var $decoratorQueue = [];
 function componentFactory(Component, options) {
@@ -109,4 +112,6 @@ if (options === void 0) { options = {}; }
     });
-    $decoratorQueue.forEach(function (fn) { return fn(options); });
-    $decoratorQueue = [];
+    var decorators = Component.__decorators__;
+    if (decorators) {
+        decorators.forEach(function (fn) { return fn(options); });
+    }
     var superProto = Object.getPrototypeOf(Component.prototype);
@@ -113,0 +118,0 @@ var Super = superProto instanceof Vue

dist/vue-class-component.js

 /**
-  * vue-class-component v5.0.1
+  * vue-class-component v5.0.2
   * (c) 2015-2017 Evan You
@@ -12,10 +12,14 @@ * @license MIT
 
-Vue = 'default' in Vue ? Vue['default'] : Vue;
+Vue = Vue && 'default' in Vue ? Vue['default'] : Vue;
 
 function createDecorator(factory) {
-    return function (_, key, index) {
+    return function (target, key, index) {
+        var Ctor = target.constructor;
+        if (!Ctor.__decorators__) {
+            Ctor.__decorators__ = [];
+        }
         if (typeof index !== 'number') {
             index = undefined;
         }
-        $decoratorQueue.push(function (options) { return factory(options, key, index); });
+        Ctor.__decorators__.push(function (options) { return factory(options, key, index); });
     };
@@ -79,3 +83,2 @@ }
 ];
-var $decoratorQueue = [];
 function componentFactory(Component, options) {
@@ -109,4 +112,6 @@ if (options === void 0) { options = {}; }
     });
-    $decoratorQueue.forEach(function (fn) { return fn(options); });
-    $decoratorQueue = [];
+    var decorators = Component.__decorators__;
+    if (decorators) {
+        decorators.forEach(function (fn) { return fn(options); });
+    }
     var superProto = Object.getPrototypeOf(Component.prototype);
@@ -113,0 +118,0 @@ var Super = superProto instanceof Vue

dist/vue-class-component.min.js

 /**
-  * vue-class-component v5.0.1
+  * vue-class-component v5.0.2
   * (c) 2015-2017 Evan You
   * @license MIT
   */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t(e.VueClassComponent=e.VueClassComponent||{},e.Vue)}(this,function(e,t){"use strict";function n(e){return function(t,n,o){"number"!=typeof o&&(o=void 0),f.push(function(t){return e(t,n,o)})}}function o(e,t){t.prototype._init=function(){var t=this,n=Object.getOwnPropertyNames(e);if(e.$options.props)for(var o in e.$options.props)e.hasOwnProperty(o)||n.push(o);n.forEach(function(n){"_"!==n.charAt(0)&&Object.defineProperty(t,n,{get:function(){return e[n]},set:function(t){return e[n]=t}})})};var n=new t,o={};return Object.keys(n).forEach(function(e){void 0!==n[e]&&(o[e]=n[e])}),o}function r(e,n){void 0===n&&(n={}),n.name=n.name||e._componentTag||e.name;var r=e.prototype;Object.getOwnPropertyNames(r).forEach(function(e){if("constructor"!==e){if(i.indexOf(e)>-1)return void(n[e]=r[e]);var t=Object.getOwnPropertyDescriptor(r,e);"function"==typeof t.value?(n.methods||(n.methods={}))[e]=t.value:(t.get||t.set)&&((n.computed||(n.computed={}))[e]={get:t.get,set:t.set})}}),(n.mixins||(n.mixins=[])).push({data:function(){return o(this,e)}}),f.forEach(function(e){return e(n)}),f=[];var u=Object.getPrototypeOf(e.prototype);return(u instanceof t?u.constructor:t).extend(n)}function u(e){return"function"==typeof e?r(e):function(t){return r(t,e)}}t="default"in t?t.default:t;var i=["data","beforeCreate","created","beforeMount","mounted","beforeDestroy","destroyed","beforeUpdate","updated","activated","deactivated","render"],f=[];!function(e){function t(e){i.push.apply(i,e)}e.registerHooks=t}(u||(u={}));var c=u;e.default=c,e.createDecorator=n,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.VueClassComponent=e.VueClassComponent||{},e.Vue)}(this,function(e,t){"use strict";function o(e,t){t.prototype._init=function(){var t=this,o=Object.getOwnPropertyNames(e);if(e.$options.props)for(var n in e.$options.props)e.hasOwnProperty(n)||o.push(n);o.forEach(function(o){"_"!==o.charAt(0)&&Object.defineProperty(t,o,{get:function(){return e[o]},set:function(t){return e[o]=t}})})};var o=new t,n={};return Object.keys(o).forEach(function(e){void 0!==o[e]&&(n[e]=o[e])}),n}function n(e,n){void 0===n&&(n={}),n.name=n.name||e._componentTag||e.name;var r=e.prototype;Object.getOwnPropertyNames(r).forEach(function(e){if("constructor"!==e)if(u.indexOf(e)>-1)n[e]=r[e];else{var t=Object.getOwnPropertyDescriptor(r,e);"function"==typeof t.value?(n.methods||(n.methods={}))[e]=t.value:(t.get||t.set)&&((n.computed||(n.computed={}))[e]={get:t.get,set:t.set})}}),(n.mixins||(n.mixins=[])).push({data:function(){return o(this,e)}});var c=e.__decorators__;c&&c.forEach(function(e){return e(n)});var i=Object.getPrototypeOf(e.prototype);return(i instanceof t?i.constructor:t).extend(n)}function r(e){return"function"==typeof e?n(e):function(t){return n(t,e)}}t=t&&"default"in t?t.default:t;var u=["data","beforeCreate","created","beforeMount","mounted","beforeDestroy","destroyed","beforeUpdate","updated","activated","deactivated","render"];!function(e){e.registerHooks=function(e){u.push.apply(u,e)}}(r||(r={}));var c=r;e.default=c,e.createDecorator=function(e){return function(t,o,n){var r=t.constructor;r.__decorators__||(r.__decorators__=[]),"number"!=typeof n&&(n=void 0),r.__decorators__.push(function(t){return e(t,o,n)})}},Object.defineProperty(e,"__esModule",{value:!0})});

lib/component.d.ts

@@ -1,5 +0,4 @@
-import Vue, { ComponentOptions } from 'vue';
+import { ComponentOptions } from 'vue';
 import { VueClass } from './declarations';
 export declare const $internalHooks: string[];
-export declare let $decoratorQueue: ((options: ComponentOptions<Vue>) => void)[];
 export declare function componentFactory(Component: VueClass, options?: ComponentOptions<any>): VueClass;

lib/component.js

@@ -17,3 +17,2 @@ import Vue from 'vue';
 ];
-export var $decoratorQueue = [];
 export function componentFactory(Component, options) {
@@ -47,4 +46,6 @@ if (options === void 0) { options = {}; }
     });
-    $decoratorQueue.forEach(function (fn) { return fn(options); });
-    $decoratorQueue = [];
+    var decorators = Component.__decorators__;
+    if (decorators) {
+        decorators.forEach(function (fn) { return fn(options); });
+    }
     var superProto = Object.getPrototypeOf(Component.prototype);
@@ -51,0 +52,0 @@ var Super = superProto instanceof Vue

lib/declarations.d.ts

@@ -5,1 +5,4 @@ import Vue from 'vue';
 } & typeof Vue;
+export declare type DecoratedClass = VueClass & {
+    __decorators__?: ((options: Vue.ComponentOptions<Vue>) => void)[];
+};

lib/util.js

@@ -1,9 +0,12 @@
-import { $decoratorQueue } from './component';
 export var noop = function () { };
 export function createDecorator(factory) {
-    return function (_, key, index) {
+    return function (target, key, index) {
+        var Ctor = target.constructor;
+        if (!Ctor.__decorators__) {
+            Ctor.__decorators__ = [];
+        }
         if (typeof index !== 'number') {
             index = undefined;
         }
-        $decoratorQueue.push(function (options) { return factory(options, key, index); });
+        Ctor.__decorators__.push(function (options) { return factory(options, key, index); });
     };
@@ -10,0 +13,0 @@ }

package.json

 {
   "name": "vue-class-component",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "ES201X/TypeScript class decorator for Vue components",
@@ -18,2 +18,3 @@ "main": "dist/vue-class-component.common.js",
     "dev": "webpack --config example/webpack.config.js --watch",
+    "dev:test": "node build/dev-test.js",
     "test": "npm run build && webpack --config test/webpack.config.js && mocha test/test.build.js"
@@ -38,25 +39,24 @@ },
   "devDependencies": {
-    "@types/chai": "^3.4.35",
-    "@types/mocha": "^2.2.40",
-    "babel-core": "^6.24.0",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-transform-class-properties": "^6.23.0",
+    "@types/chai": "^4.0.1",
+    "@types/mocha": "^2.2.41",
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.24.0",
-    "chai": "^3.5.0",
-    "chai-spies": "^0.7.1",
-    "css-loader": "^0.27.3",
-    "mocha": "^3.2.0",
-    "node-libs-browser": "^2.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "chai": "^4.0.2",
+    "css-loader": "^0.28.4",
+    "mocha": "^3.4.2",
     "rimraf": "^2.6.1",
-    "rollup": "^0.41.6",
+    "rollup": "^0.43.0",
     "rollup-plugin-replace": "^1.1.1",
-    "ts-loader": "^2.0.3",
-    "typescript": "^2.2.2",
-    "uglify-js": "^2.8.16",
-    "vue": "^2.2.6",
-    "vue-loader": "^11.3.3",
-    "vue-template-compiler": "^2.2.6",
-    "webpack": "^2.3.2"
+    "testdouble": "^3.2.1",
+    "ts-loader": "^2.2.1",
+    "typescript": "^2.4.1",
+    "uglify-js": "^3.0.22",
+    "vue": "^2.3.4",
+    "vue-loader": "^13.0.0",
+    "vue-template-compiler": "^2.3.4",
+    "webpack": "^3.0.0"
   }
 }

README.md

@@ -5,2 +5,4 @@ # vue-class-component
 
+[![npm](https://img.shields.io/npm/v/vue-class-component.svg)](https://www.npmjs.com/package/vue-class-component)
+
 ### Usage
@@ -167,4 +169,6 @@
 
-For example, if you define an arrow function as a class property and access `this` in it, it will not work. This is because `this` is just a proxy object to Vue instance when initializing class properties:
+#### `this` value in property
 
+If you define an arrow function as a class property and access `this` in it, it will not work. This is because `this` is just a proxy object to Vue instance when initializing class properties:
+
 ```js
@@ -197,2 +201,24 @@ @Component
 
+#### `undefined` will not be reactive
+
+To take consistency between the decorator behavior of Babel and TypeScript, vue-class-component does not make a property reactive if it has `undefined` as initial value. You should use `null` as initial value or use `data` hook to initialize `undefined` property instead.
+
+```js
+@Component
+class MyComp extends Vue {
+  // Will not be reactive
+  foo = undefined
+
+  // Will be reactive
+  bar = null
+
+  data () {
+    return {
+      // Will be reactive
+      baz: undefined
+    }
+  }
+}
+```
+
 ### Build the Example
@@ -199,0 +225,0 @@

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

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

24965

increased by5.03%

Dev dependency count

21

decreased by-4.55%

Lines of code

423

increased by3.93%

Number of lines in readme file

230

increased by12.75%

No dependency changes