New major version which is directly using Vue-Property-Decorator

nuxt-community · Jan 25, 2019 · d6f8886 · d6f8886
1 parent 70a3e6d
commit d6f8886
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 258 deletions.
diff --git a/lib/nuxt-property-decorator.d.ts b/lib/nuxt-property-decorator.d.ts
@@ -1,46 +1,10 @@
-import Vue, { PropOptions, WatchOptions } from 'vue';
+import Vue from 'vue';
+import { /*Component,*/ Emit, Inject, Model, Prop, Provide, Watch } from "vue-property-decorator";
 import Component, { mixins } from 'vue-class-component';
 import 'reflect-metadata';
 export declare type Constructor = {
     new (...args: any[]): any;
 };
-/**
- * decorator of an inject
- * @param key key
- * @return PropertyDecorator
- */
-export declare function Inject(key?: string | symbol): PropertyDecorator;
-/**
- * decorator of a provide
- * @param key key
- * @return PropertyDecorator | void
- */
-export declare function Provide(key?: string | symbol): PropertyDecorator;
-/**
- * decorator of model
- * @param  event event name
- * @return PropertyDecorator
- */
-export declare function Model(event?: string, options?: (PropOptions | Constructor[] | Constructor)): PropertyDecorator;
-/**
- * decorator of a prop
- * @param  options the options for the prop
- * @return PropertyDecorator | void
- */
-export declare function Prop(options?: (PropOptions | Constructor[] | Constructor)): PropertyDecorator;
-/**
- * decorator of a watch function
- * @param  path the path or the expression to observe
- * @param  WatchOption
- * @return MethodDecorator
- */
-export declare function Watch(path: string, options?: WatchOptions): MethodDecorator;
-/**
- * decorator of an event-emitter function
- * @param  event The name of the event
- * @return MethodDecorator
- */
-export declare function Emit(event?: string): MethodDecorator;
 /**
  * decorator of $off
  * @param event The name of the event
@@ -66,4 +30,4 @@ export declare function Once(event?: string): MethodDecorator;
  */
 export declare function NextTick(method: string): MethodDecorator;
 import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
-export { Vue, Component, mixins, State, Getter, Action, Mutation, namespace };
+export { Vue, Component, Emit, Inject, Model, Prop, Provide, Watch, mixins, State, Getter, Action, Mutation, namespace };
diff --git a/lib/nuxt-property-decorator.umd.js b/lib/nuxt-property-decorator.umd.js
@@ -1,8 +1,8 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('vue-class-component'), require('reflect-metadata'), require('vuex-class')) :
-	typeof define === 'function' && define.amd ? define(['exports', 'vue', 'vue-class-component', 'reflect-metadata', 'vuex-class'], factory) :
-	(factory((global.NuxtPropertyDecorator = {}),global.Vue,global.VueClassComponent,null,global.vuexClass));
-}(this, (function (exports,vue,Component,reflectMetadata,vuexClass) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('vue-property-decorator'), require('vue-class-component'), require('reflect-metadata'), require('vuex-class')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'vue', 'vue-property-decorator', 'vue-class-component', 'reflect-metadata', 'vuex-class'], factory) :
+	(factory((global.NuxtPropertyDecorator = {}),global.Vue,global.vuePropertyDecorator,global.VueClassComponent,null,global.vuexClass));
+}(this, (function (exports,vue,vuePropertyDecorator,Component,reflectMetadata,vuexClass) { 'use strict';
 
 vue = vue && vue.hasOwnProperty('default') ? vue['default'] : vue;
 var Component__default = 'default' in Component ? Component['default'] : Component;
@@ -22,113 +22,9 @@ Component__default.registerHooks([
 ]);
 // const Component = require('nuxt-class-component');
 // const { createDecorator } = require('nuxt-class-component');
-/**
- * decorator of an inject
- * @param key key
- * @return PropertyDecorator
- */
-function Inject(key) {
-    return Component.createDecorator(function (componentOptions, k) {
-        if (typeof componentOptions.inject === 'undefined') {
-            componentOptions.inject = {};
-        }
-        if (!Array.isArray(componentOptions.inject)) {
-            componentOptions.inject[k] = key || k;
-        }
-    });
-}
-/**
- * decorator of a provide
- * @param key key
- * @return PropertyDecorator | void
- */
-function Provide(key) {
-    return Component.createDecorator(function (componentOptions, k) {
-        var provide = componentOptions.provide;
-        if (typeof provide !== 'function' || !provide.managed) {
-            var original_1 = componentOptions.provide;
-            provide = componentOptions.provide = function () {
-                var rv = Object.create((typeof original_1 === 'function' ? original_1.call(this) : original_1) || null);
-                for (var i in provide.managed)
-                    rv[provide.managed[i]] = this[i];
-                return rv;
-            };
-            provide.managed = {};
-        }
-        provide.managed[k] = key || k;
-    });
-}
-/**
- * decorator of model
- * @param  event event name
- * @return PropertyDecorator
- */
-function Model(event, options) {
-    if (options === void 0) { options = {}; }
-    return function (target, key) {
-        if (!Array.isArray(options) && typeof options.type === 'undefined') {
-            options.type = Reflect.getMetadata('design:type', target, key);
-        }
-        Component.createDecorator(function (componentOptions, k) {
-            (componentOptions.props || (componentOptions.props = {}))[k] = options;
-            componentOptions.model = { prop: k, event: event || k };
-        })(target, key);
-    };
-}
-/**
- * decorator of a prop
- * @param  options the options for the prop
- * @return PropertyDecorator | void
- */
-function Prop(options) {
-    if (options === void 0) { options = {}; }
-    return function (target, key) {
-        if (!Array.isArray(options) && typeof options.type === 'undefined') {
-            options.type = Reflect.getMetadata('design:type', target, key);
-        }
-        Component.createDecorator(function (componentOptions, k) {
-            (componentOptions.props || (componentOptions.props = {}))[k] = options;
-        })(target, key);
-    };
-}
-/**
- * decorator of a watch function
- * @param  path the path or the expression to observe
- * @param  WatchOption
- * @return MethodDecorator
- */
-function Watch(path, options) {
-    if (options === void 0) { options = {}; }
-    var _a = options.deep, deep = _a === void 0 ? false : _a, _b = options.immediate, immediate = _b === void 0 ? false : _b;
-    return Component.createDecorator(function (componentOptions, handler) {
-        if (typeof componentOptions.watch !== 'object') {
-            componentOptions.watch = Object.create(null);
-        }
-        componentOptions.watch[path] = { handler: handler, deep: deep, immediate: immediate };
-    });
-}
 // Code copied from Vue/src/shared/util.js
 var hyphenateRE = /\B([A-Z])/g;
 var hyphenate = function (str) { return str.replace(hyphenateRE, '-$1').toLowerCase(); };
-/**
- * decorator of an event-emitter function
- * @param  event The name of the event
- * @return MethodDecorator
- */
-function Emit(event) {
-    return function (target, key, descriptor) {
-        key = hyphenate(key);
-        var original = descriptor.value;
-        descriptor.value = function emitter() {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            if (false !== original.apply(this, args))
-                this.$emit.apply(this, [event || key].concat(args));
-        };
-    };
-}
 /**
  * decorator of $off
  * @param event The name of the event
@@ -226,18 +122,18 @@ function NextTick(method) {
     };
 }
 
-exports.Inject = Inject;
-exports.Provide = Provide;
-exports.Model = Model;
-exports.Prop = Prop;
-exports.Watch = Watch;
-exports.Emit = Emit;
 exports.Off = Off;
 exports.On = On;
 exports.Once = Once;
 exports.NextTick = NextTick;
 exports.Vue = vue;
 exports.Component = Component__default;
+exports.Emit = vuePropertyDecorator.Emit;
+exports.Inject = vuePropertyDecorator.Inject;
+exports.Model = vuePropertyDecorator.Model;
+exports.Prop = vuePropertyDecorator.Prop;
+exports.Provide = vuePropertyDecorator.Provide;
+exports.Watch = vuePropertyDecorator.Watch;
 exports.mixins = Component.mixins;
 exports.State = vuexClass.State;
 exports.Getter = vuexClass.Getter;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-property-decorator",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "Property decorators for Nuxt",
   "main": "lib/nuxt-property-decorator.umd.js",
   "keywords": [
@@ -35,6 +35,7 @@
   "dependencies": {
     "reflect-metadata": "^0.1.12",
     "vue-class-component": "6.3.2",
+    "vue-property-decorator": "^7.3.0",
     "vuex-class": "^0.3.1"
   },
   "devDependencies": {

diff --git a/src/nuxt-property-decorator.ts b/src/nuxt-property-decorator.ts
@@ -1,7 +1,8 @@
 'use strict'
 
 import Vue, { PropOptions, WatchOptions } from 'vue'
-import Component, { mixins, createDecorator } from 'vue-class-component';
+import { /*Component,*/ Emit, Inject, Model, Prop, Provide, Watch /*, Vue, Mixins */  } from "vue-property-decorator"
+import Component, { createDecorator, mixins } from 'vue-class-component'
 
 Component.registerHooks([
   'beforeRouteEnter',
@@ -25,112 +26,10 @@ export type Constructor = {
   new (...args: any[]): any
 }
 
-/**
- * decorator of an inject
- * @param key key
- * @return PropertyDecorator
- */
-export function Inject(key?: string | symbol): PropertyDecorator {
-  return createDecorator((componentOptions: any, k: any) => {
-    if (typeof componentOptions.inject === 'undefined') {
-      componentOptions.inject = {}
-    }
-    if (!Array.isArray(componentOptions.inject)) {
-      componentOptions.inject[k] = key || k
-    }
-  })
-}
-
-/**
- * decorator of a provide
- * @param key key
- * @return PropertyDecorator | void
- */
-export function Provide(key?: string | symbol): PropertyDecorator {
-  return createDecorator((componentOptions: any, k: any) => {
-    let provide: any = componentOptions.provide
-    if (typeof provide !== 'function' || !provide.managed) {
-      const original = componentOptions.provide
-      provide = componentOptions.provide = function (this: any) {
-        let rv = Object.create((typeof original === 'function' ? original.call(this) : original) || null)
-        for (let i in provide.managed) rv[provide.managed[i]] = this[i]
-        return rv
-      }
-      provide.managed = {}
-    }
-    provide.managed[k] = key || k
-  })
-}
-
-/**
- * decorator of model
- * @param  event event name
- * @return PropertyDecorator
- */
-export function Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}): PropertyDecorator {
-  return function (target: Vue, key: string) {
-    if (!Array.isArray(options) && typeof (options as PropOptions).type === 'undefined') {
-      (options as PropOptions).type = Reflect.getMetadata('design:type', target, key)
-    }
-    createDecorator((componentOptions: any, k: any) => {
-      (componentOptions.props || (componentOptions.props = {}) as any)[k] = options
-    	componentOptions.model = { prop: k, event: event || k }
-    })(target, key)
-  }
-}
-
-/**
- * decorator of a prop
- * @param  options the options for the prop
- * @return PropertyDecorator | void
- */
-export function Prop(options: (PropOptions | Constructor[] | Constructor) = {}): PropertyDecorator {
-  return function (target: Vue, key: string) {
-    if (!Array.isArray(options) && typeof (options as PropOptions).type === 'undefined') {
-      (options as PropOptions).type = Reflect.getMetadata('design:type', target, key)
-    }
-    createDecorator((componentOptions: any, k: any) => {
-      (componentOptions.props || (componentOptions.props = {}) as any)[k] = options
-    })(target, key)
-  }
-}
-
-/**
- * decorator of a watch function
- * @param  path the path or the expression to observe
- * @param  WatchOption
- * @return MethodDecorator
- */
-export function Watch(path: string, options: WatchOptions = {}): MethodDecorator {
-  const { deep = false, immediate = false } = options
-
-  return createDecorator((componentOptions: any, handler: any) => {
-    if (typeof componentOptions.watch !== 'object') {
-      componentOptions.watch = Object.create(null)
-    }
-    (componentOptions.watch as any)[path] = { handler, deep, immediate }
-  })
-}
-
 // Code copied from Vue/src/shared/util.js
 const hyphenateRE = /\B([A-Z])/g
 const hyphenate = (str: string) => str.replace(hyphenateRE, '-$1').toLowerCase()
 
-/**
- * decorator of an event-emitter function
- * @param  event The name of the event
- * @return MethodDecorator
- */
-export function Emit(event?: string): MethodDecorator {
-  return function (target: Vue, key: string, descriptor: any) {
-		key = hyphenate(key);
-		var original = descriptor.value;
-		descriptor.value = function emitter(...args: any[]) {
-			if(false!== original.apply(this, args))
-				this.$emit(event || key, ...args);
-		}
-	}
-}
 
 /**
  * decorator of $off
@@ -222,4 +121,4 @@ export function NextTick(method: string): MethodDecorator {
 }
 
 import { State, Getter, Action, Mutation, namespace } from 'vuex-class'
-export { Vue, Component, mixins, State, Getter, Action, Mutation, namespace }
+export { Vue, Component, Emit, Inject, Model, Prop, Provide, Watch, mixins, State, Getter, Action, Mutation, namespace }