vue-class-component - npm Package Compare versions

Comparing version 4.3.1 to 4.4.0

lib/component.d.ts

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

lib/component.js

@@ -1,5 +0,4 @@
-"use strict";
-var Vue = require('vue');
-var data_1 = require('./data');
-var internalHooks = [
+import * as Vue from 'vue';
+import { collectDataFromConstructor } from './data';
+export var $internalHooks = [
     'data',
@@ -18,4 +17,4 @@ 'beforeCreate',
 ];
-exports.$decoratorQueue = [];
-function componentFactory(Component, options) {
+export var $decoratorQueue = [];
+export function componentFactory(Component, options) {
     if (options === void 0) { options = {}; }
@@ -28,3 +27,3 @@ options.name = options.name || Component._componentTag;
         }
-        if (internalHooks.indexOf(key) > -1) {
+        if ($internalHooks.indexOf(key) > -1) {
             options[key] = proto[key];
@@ -46,7 +45,7 @@ return;
         data: function () {
-            return data_1.collectDataFromConstructor(this, Component);
+            return collectDataFromConstructor(this, Component);
         }
     });
-    exports.$decoratorQueue.forEach(function (fn) { return fn(options); });
-    exports.$decoratorQueue = [];
+    $decoratorQueue.forEach(function (fn) { return fn(options); });
+    $decoratorQueue = [];
     var superProto = Object.getPrototypeOf(Component.prototype);
@@ -58,2 +57,1 @@ var Super = superProto instanceof Vue
 }
-exports.componentFactory = componentFactory;

lib/data.js

@@ -1,3 +0,4 @@
-"use strict";
-function collectDataFromConstructor(vm, Component) {
+import * as Vue from 'vue';
+import { warn } from './util';
+export function collectDataFromConstructor(vm, Component) {
     Component.prototype._init = function () {
@@ -19,4 +20,9 @@ var _this = this;
     });
+    if (process.env.NODE_ENV !== 'production') {
+        if (!(Component.prototype instanceof Vue) && Object.keys(plainData).length > 0) {
+            warn('Component class must inherit Vue or its descendant class ' +
+                'when class property is used.');
+        }
+    }
     return plainData;
 }
-exports.collectDataFromConstructor = collectDataFromConstructor;

lib/index.d.ts

 import * as Vue from 'vue';
 import { VueClass } from './declarations';
 export { createDecorator } from './util';
-export default function Component<U extends Vue>(options: Vue.ComponentOptions<U>): <V extends VueClass>(target: V) => V;
-export default function Component<V extends VueClass>(target: V): V;
+declare function Component<U extends Vue>(options: Vue.ComponentOptions<U>): <V extends VueClass>(target: V) => V;
+declare function Component<V extends VueClass>(target: V): V;
+declare namespace Component {
+    function registerHooks(keys: string[]): void;
+}
+export default Component;

lib/index.js

@@ -1,14 +0,17 @@
-"use strict";
-var component_1 = require('./component');
-var util_1 = require('./util');
-exports.createDecorator = util_1.createDecorator;
+import { componentFactory, $internalHooks } from './component';
+export { createDecorator } from './util';
 function Component(options) {
     if (typeof options === 'function') {
-        return component_1.componentFactory(options);
+        return componentFactory(options);
     }
     return function (Component) {
-        return component_1.componentFactory(Component, options);
+        return componentFactory(Component, options);
     };
 }
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Component;
+(function (Component) {
+    function registerHooks(keys) {
+        $internalHooks.push.apply($internalHooks, keys);
+    }
+    Component.registerHooks = registerHooks;
+})(Component || (Component = {}));
+export default Component;

lib/util.d.ts

@@ -5,1 +5,2 @@ import * as Vue from 'vue';
 export declare function createDecorator(factory: (options: Vue.ComponentOptions<Vue>, key: string, index: number) => void): (target: Vue, key: string, index: number) => void;
+export declare function warn(message: string): void;

lib/util.js

@@ -1,5 +0,4 @@
-"use strict";
-var component_1 = require('./component');
-exports.noop = function () { };
-function createDecorator(factory) {
+import { $decoratorQueue } from './component';
+export var noop = function () { };
+export function createDecorator(factory) {
     return function (_, key, index) {
@@ -9,5 +8,9 @@ if (typeof index !== 'number') {
         }
-        component_1.$decoratorQueue.push(function (options) { return factory(options, key, index); });
+        $decoratorQueue.push(function (options) { return factory(options, key, index); });
     };
 }
-exports.createDecorator = createDecorator;
+export function warn(message) {
+    if (typeof console !== 'undefined') {
+        console.warn('[vue-class-component] ' + message);
+    }
+}

package.json

 {
   "name": "vue-class-component",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "ES201X/TypeScript class decorator for Vue components",
-  "main": "lib/index.js",
+  "main": "dist/vue-class-component.common.js",
   "typings": "lib/index.d.ts",
   "files": [
-    "lib",
-    "tsconfig.json"
+    "dist",
+    "lib"
   ],
   "scripts": {
-    "build": "tsc -p .",
-    "clean": "rm -rf lib",
+    "build": "npm run build:ts && npm run build:main",
+    "build:ts": "tsc -p .",
+    "build:main": "node build/build.js",
+    "clean": "rimraf ./lib",
     "example": "npm run build && webpack --config example/webpack.config.js",
     "dev": "webpack --config example/webpack.config.js --watch",
-    "test": "npm run build && webpack --config test/webpack.config.js && mocha test/test.build.js",
-    "prepublish": "npm run clean && npm run build"
+    "test": "npm run build && webpack --config test/webpack.config.js && mocha test/test.build.js"
   },
@@ -44,9 +45,14 @@ "repository": {
     "chai": "^3.5.0",
+    "chai-spies": "^0.7.1",
     "mocha": "^3.1.2",
     "node-libs-browser": "^1.0.0",
+    "rimraf": "^2.5.4",
+    "rollup": "^0.37.0",
+    "rollup-plugin-replace": "^1.1.1",
     "ts-loader": "^0.9.5",
     "typescript": "^2.0.6",
-    "vue": "^2.0.3",
-    "webpack": "^2.1.0-beta.25"
+    "uglify-js": "^2.7.5",
+    "vue": "^2.1.6",
+    "webpack": "^2.1.0-beta.27"
   }
 }

README.md

@@ -23,3 +23,8 @@ # vue-class-component
 
+### Example
+
+Following is the example written in Babel. If you are looking for TypeScript version, [it's in the example directory](example/example.ts).
+
 ``` js
+import Vue from 'vue'
 import Component from 'vue-class-component'
@@ -42,3 +47,3 @@
 })
-class App {
+class App extends Vue {
   // initial data
@@ -103,2 +108,55 @@ msg = 123
 
+### Adding Custom Hooks
+
+If you use some Vue plugins like Vue Router, you may want class components to resolve hooks that they provides. For that case, `Component.registerHooks` allows you to register such hooks:
+
+```js
+// class-component-hooks.js
+import Component from 'vue-class-component'
+
+// Register the router hooks with thier names
+Component.registerHooks([
+  'beforeRouteEnter',
+  'beforeRouteLeave'
+])
+```
+
+```js
+// MyComp.js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+class MyComp extends Vue {
+  // The class component now treats beforeRouteEnter
+  // and beforeRouteLeave as Vue Router hooks
+  beforeRouteEnter () {
+    console.log('beforeRouteEnter')
+  }
+
+  beforeRouteLeave () {
+    console.log('beforeRouteLeave')
+  }
+}
+```
+
+Note that you have to register the hooks before component definition.
+
+```js
+// main.js
+
+// Make sure to register before importing any components
+import './class-component-hooks'
+
+import Vue from 'vue'
+import MyComp from './MyComp'
+
+new Vue({
+  el: '#app',
+  components: {
+    MyComp
+  }
+})
+```
+
 ### Build the Example
@@ -105,0 +163,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

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

21404

increased by100.04%

Number of package files

16

increased by14.29%

Lines of code

375

increased by155.1%

Number of lines in readme file

168

increased by52.73%

Worsened metrics

Dev dependency count

19

increased by35.71%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes