From d6f88867bcdc4e623111869849b204296d0f4f68 Mon Sep 17 00:00:00 2001 From: Huseyn Guliyev Date: Fri, 25 Jan 2019 19:23:49 +0000 Subject: [PATCH] New major version which is directly using Vue-Property-Decorator --- lib/nuxt-property-decorator.d.ts | 42 +--------- lib/nuxt-property-decorator.umd.js | 124 +++-------------------------- package.json | 3 +- src/nuxt-property-decorator.ts | 107 +------------------------ 4 files changed, 18 insertions(+), 258 deletions(-) diff --git a/lib/nuxt-property-decorator.d.ts b/lib/nuxt-property-decorator.d.ts index a3a6670..4bb2af2 100644 --- 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 index d2fa5af..d8ff0bd 100644 --- 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 index dc24551..40a1059 100644 --- 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 index 14f35fb..feb4062 100644 --- 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 }