vue-property-decorator - npm Package Compare versions

Comparing version 9.1.2 to 10.0.0-rc.0

lib/decorators/Emit.d.ts

@@ -1,7 +0,6 @@
-import Vue from 'vue';
+import { VueDecorator } from 'vue-class-component';
 /**
- * decorator of an event-emitter function
+ * Decorator of an event-emitter function
  * @param  event The name of the event
- * @return MethodDecorator
  */
-export declare function Emit(event?: string): (_target: Vue, propertyKey: string, descriptor: any) => void;
+export declare function Emit(event?: string): VueDecorator;

lib/decorators/Emit.js

@@ -1,37 +0,26 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
+import { createDecorator } from 'vue-class-component';
 // Code copied from Vue/src/shared/util.js
-var hyphenateRE = /\B([A-Z])/g;
-var hyphenate = function (str) { return str.replace(hyphenateRE, '-$1').toLowerCase(); };
+const hyphenateRE = /\B([A-Z])/g;
+const hyphenate = (str) => str.replace(hyphenateRE, '-$1').toLowerCase();
 /**
- * decorator of an event-emitter function
+ * Decorator of an event-emitter function
  * @param  event The name of the event
- * @return MethodDecorator
  */
 export function Emit(event) {
-    return function (_target, propertyKey, descriptor) {
-        var key = hyphenate(propertyKey);
-        var original = descriptor.value;
-        descriptor.value = function emitter() {
-            var _this = this;
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            var emit = function (returnValue) {
-                var emitName = event || key;
+    return createDecorator((componentOptions, propertyKey) => {
+        const emitName = event || hyphenate(propertyKey);
+        componentOptions.emits || (componentOptions.emits = []);
+        componentOptions.emits.push(emitName);
+        const original = componentOptions.methods[propertyKey];
+        componentOptions.methods[propertyKey] = function emitter(...args) {
+            const emit = (returnValue) => {
                 if (returnValue === undefined) {
                     if (args.length === 0) {
-                        _this.$emit(emitName);
+                        this.$emit(emitName);
                     }
                     else if (args.length === 1) {
-                        _this.$emit(emitName, args[0]);
+                        this.$emit(emitName, args[0]);
                     }
                     else {
-                        _this.$emit.apply(_this, __spreadArrays([emitName], args));
+                        this.$emit(emitName, ...args);
                     }
@@ -41,6 +30,6 @@ }
                     args.unshift(returnValue);
-                    _this.$emit.apply(_this, __spreadArrays([emitName], args));
+                    this.$emit(emitName, ...args);
                 }
             };
-            var returnValue = original.apply(this, args);
+            const returnValue = original.apply(this, args);
             if (isPromise(returnValue)) {
@@ -54,3 +43,3 @@ returnValue.then(emit);
         };
-    };
+    });
 }
@@ -57,0 +46,0 @@ function isPromise(obj) {

lib/decorators/Inject.d.ts

@@ -1,11 +0,11 @@
-import { InjectKey } from 'vue/types/options';
+import { InjectionKey } from 'vue';
+import { VueDecorator } from 'vue-class-component';
 export declare type InjectOptions = {
-    from?: InjectKey;
+    from?: string | InjectionKey<any>;
     default?: any;
 };
 /**
- * decorator of an inject
- * @param from key
- * @return PropertyDecorator
+ * Decorator for inject options
+ * @param options the options for the injected value
  */
-export declare function Inject(options?: InjectOptions | InjectKey): import("vue-class-component").VueDecorator;
+export declare function Inject(options?: InjectOptions): VueDecorator;

lib/decorators/Inject.js

@@ -0,16 +1,16 @@
+import { inject } from 'vue';
 import { createDecorator } from 'vue-class-component';
 /**
- * decorator of an inject
- * @param from key
- * @return PropertyDecorator
+ * Decorator for inject options
+ * @param options the options for the injected value
  */
-export function Inject(options) {
-    return createDecorator(function (componentOptions, key) {
-        if (typeof componentOptions.inject === 'undefined') {
-            componentOptions.inject = {};
-        }
-        if (!Array.isArray(componentOptions.inject)) {
-            componentOptions.inject[key] = options || key;
-        }
+export function Inject(options = Object.create(null)) {
+    return createDecorator((componentOptions, key) => {
+        const originalSetup = componentOptions.setup;
+        componentOptions.setup = (props, ctx) => {
+            const result = originalSetup === null || originalSetup === void 0 ? void 0 : originalSetup(props, ctx);
+            const injectedValue = inject(options.from || key, options.default);
+            return Object.assign(Object.assign({}, result), { [key]: injectedValue });
+        };
     });
 }

lib/decorators/Model.d.ts

@@ -1,9 +0,9 @@
-import Vue, { PropOptions } from 'vue';
-import { Constructor } from 'vue/types/options';
+import { PropOptions, VueDecorator } from 'vue-class-component';
+declare type Constructor = (new () => any) | SymbolConstructor;
 /**
- * decorator of model
- * @param  event event name
- * @param options options
- * @return PropertyDecorator
+ * Decorator for v-model
+ * @param propName e.g. `modelValue`
+ * @param propOptions the options for the prop
  */
-export declare function Model(event?: string, options?: PropOptions | Constructor[] | Constructor): (target: Vue, key: string) => void;
+export declare function Model(propName: string, propOptions?: Constructor | Constructor[] | PropOptions): VueDecorator;
+export {};

lib/decorators/Model.js

@@ -1,19 +0,24 @@
-import { createDecorator } from 'vue-class-component';
-import { applyMetadata } from '../helpers/metadata';
+import { createDecorator, } from 'vue-class-component';
 /**
- * decorator of model
- * @param  event event name
- * @param options options
- * @return PropertyDecorator
+ * Decorator for v-model
+ * @param propName e.g. `modelValue`
+ * @param propOptions the options for the prop
  */
-export function Model(event, options) {
-    if (options === void 0) { options = {}; }
-    return function (target, key) {
-        applyMetadata(options, target, key);
-        createDecorator(function (componentOptions, k) {
-            ;
-            (componentOptions.props || (componentOptions.props = {}))[k] = options;
-            componentOptions.model = { prop: k, event: event || k };
-        })(target, key);
-    };
+export function Model(propName, propOptions) {
+    return createDecorator((componentOptions, key) => {
+        const eventName = `update:${propName}`;
+        componentOptions.props || (componentOptions.props = Object.create(null));
+        componentOptions.props[propName] = propOptions;
+        componentOptions.emits || (componentOptions.emits = []);
+        componentOptions.emits.push(eventName);
+        componentOptions.computed || (componentOptions.computed = Object.create(null));
+        componentOptions.computed[key] = {
+            get() {
+                return this[propName];
+            },
+            set(newValue) {
+                this.$emit(eventName, newValue);
+            },
+        };
+    });
 }

lib/decorators/Prop.d.ts

@@ -1,8 +0,8 @@
-import Vue, { PropOptions } from 'vue';
-import { Constructor } from 'vue/types/options';
+import { PropOptions, VueDecorator } from 'vue-class-component';
+declare type Constructor = (new () => any) | SymbolConstructor;
 /**
- * decorator of a prop
- * @param  options the options for the prop
- * @return PropertyDecorator | void
+ * Decorator for prop options
+ * @param propOptions the options for the prop
  */
-export declare function Prop(options?: PropOptions | Constructor[] | Constructor): (target: Vue, key: string) => void;
+export declare function Prop(propOptions?: Constructor | Constructor[] | PropOptions): VueDecorator;
+export {};

lib/decorators/Prop.js

 import { createDecorator } from 'vue-class-component';
-import { applyMetadata } from '../helpers/metadata';
 /**
- * decorator of a prop
- * @param  options the options for the prop
- * @return PropertyDecorator | void
+ * Decorator for prop options
+ * @param propOptions the options for the prop
  */
-export function Prop(options) {
-    if (options === void 0) { options = {}; }
-    return function (target, key) {
-        applyMetadata(options, target, key);
-        createDecorator(function (componentOptions, k) {
-            ;
-            (componentOptions.props || (componentOptions.props = {}))[k] = options;
-        })(target, key);
-    };
+export function Prop(propOptions) {
+    return createDecorator((componentOptions, key) => {
+        componentOptions.props || (componentOptions.props = Object.create(null));
+        componentOptions.props[key] = propOptions;
+    });
 }

lib/decorators/Provide.d.ts

@@ -0,6 +1,6 @@
+import { VueDecorator } from 'vue-class-component';
 /**
- * decorator of a provide
- * @param key key
- * @return PropertyDecorator | void
+ * Decorator for provide options
+ * @param to to
  */
-export declare function Provide(key?: string | symbol): import("vue-class-component").VueDecorator;
+export declare function Provide(to?: string): VueDecorator;

lib/decorators/Provide.js

@@ -0,17 +1,17 @@
+import { computed } from 'vue';
 import { createDecorator } from 'vue-class-component';
-import { inheritInjected, needToProduceProvide, produceProvide, } from '../helpers/provideInject';
 /**
- * decorator of a provide
- * @param key key
- * @return PropertyDecorator | void
+ * Decorator for provide options
+ * @param to to
  */
-export function Provide(key) {
-    return createDecorator(function (componentOptions, k) {
-        var provide = componentOptions.provide;
-        inheritInjected(componentOptions);
-        if (needToProduceProvide(provide)) {
-            provide = componentOptions.provide = produceProvide(provide);
-        }
-        provide.managed[k] = key || k;
+export function Provide(to) {
+    return createDecorator((componentOptions, key) => {
+        const originalProvide = componentOptions.provide;
+        componentOptions.provide = function () {
+            const providedValue = typeof originalProvide === 'function'
+                ? originalProvide.call(this)
+                : originalProvide;
+            return Object.assign(Object.assign({}, providedValue), { [to || key]: computed(() => this[key]) });
+        };
     });
 }

lib/decorators/Ref.d.ts

@@ -0,1 +1,2 @@
+import { VueDecorator } from 'vue-class-component';
 /**
@@ -5,2 +6,2 @@ * decorator of a ref prop
  */
-export declare function Ref(refKey?: string): import("vue-class-component").VueDecorator;
+export declare function Ref(refKey?: string): VueDecorator;

lib/decorators/Ref.js

@@ -7,7 +7,7 @@ import { createDecorator } from 'vue-class-component';
 export function Ref(refKey) {
-    return createDecorator(function (options, key) {
-        options.computed = options.computed || {};
-        options.computed[key] = {
+    return createDecorator((componentOptions, key) => {
+        componentOptions.computed || (componentOptions.computed = Object.create(null));
+        componentOptions.computed[key] = {
             cache: false,
-            get: function () {
+            get() {
                 return this.$refs[refKey || key];
@@ -14,0 +14,0 @@ },

lib/decorators/Watch.d.ts

 import { WatchOptions } from 'vue';
+import { VueDecorator } from 'vue-class-component';
 /**
- * decorator of a watch function
- * @param  path the path or the expression to observe
- * @param  WatchOption
- * @return MethodDecorator
+ * Decorator for watch options
+ * @param path the path or the expression to observe
+ * @param watchOptions
  */
-export declare function Watch(path: string, options?: WatchOptions): import("vue-class-component").VueDecorator;
+export declare function Watch(path: string, watchOptions?: WatchOptions): VueDecorator;

lib/decorators/Watch.js

 import { createDecorator } from 'vue-class-component';
 /**
- * decorator of a watch function
- * @param  path the path or the expression to observe
- * @param  WatchOption
- * @return MethodDecorator
+ * Decorator for watch options
+ * @param path the path or the expression to observe
+ * @param watchOptions
  */
-export 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 createDecorator(function (componentOptions, handler) {
-        if (typeof componentOptions.watch !== 'object') {
-            componentOptions.watch = Object.create(null);
-        }
-        var watch = componentOptions.watch;
+export function Watch(path, watchOptions) {
+    return createDecorator((componentOptions, handler) => {
+        componentOptions.watch || (componentOptions.watch = Object.create(null));
+        const watch = componentOptions.watch;
         if (typeof watch[path] === 'object' && !Array.isArray(watch[path])) {
@@ -22,4 +17,4 @@ watch[path] = [watch[path]];
         }
-        watch[path].push({ handler: handler, deep: deep, immediate: immediate });
+        watch[path].push(Object.assign({ handler }, watchOptions));
     });
 }

lib/index.d.ts

@@ -1,16 +0,9 @@
-/** vue-property-decorator verson 9.1.2 MIT LICENSE copyright 2020 kaorun343 */
-import Vue from 'vue';
-import Component, { mixins } from 'vue-class-component';
-export { Component, Vue, mixins as Mixins };
+/** vue-property-decorator MIT LICENSE copyright 2020 kaorun343 */
+export { mixins, Options, Vue } from 'vue-class-component';
 export { Emit } from './decorators/Emit';
 export { Inject } from './decorators/Inject';
-export { InjectReactive } from './decorators/InjectReactive';
 export { Model } from './decorators/Model';
-export { ModelSync } from './decorators/ModelSync';
 export { Prop } from './decorators/Prop';
-export { PropSync } from './decorators/PropSync';
 export { Provide } from './decorators/Provide';
-export { ProvideReactive } from './decorators/ProvideReactive';
 export { Ref } from './decorators/Ref';
-export { VModel } from './decorators/VModel';
 export { Watch } from './decorators/Watch';

lib/index.js

@@ -1,17 +0,9 @@
-/** vue-property-decorator verson 9.1.2 MIT LICENSE copyright 2020 kaorun343 */
-/// <reference types='reflect-metadata'/>
-import Vue from 'vue';
-import Component, { mixins } from 'vue-class-component';
-export { Component, Vue, mixins as Mixins };
+/** vue-property-decorator MIT LICENSE copyright 2020 kaorun343 */
+export { mixins, Options, Vue } from 'vue-class-component';
 export { Emit } from './decorators/Emit';
 export { Inject } from './decorators/Inject';
-export { InjectReactive } from './decorators/InjectReactive';
 export { Model } from './decorators/Model';
-export { ModelSync } from './decorators/ModelSync';
 export { Prop } from './decorators/Prop';
-export { PropSync } from './decorators/PropSync';
 export { Provide } from './decorators/Provide';
-export { ProvideReactive } from './decorators/ProvideReactive';
 export { Ref } from './decorators/Ref';
-export { VModel } from './decorators/VModel';
 export { Watch } from './decorators/Watch';

lib/index.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('vue-class-component')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'vue', 'vue-class-component'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VuePropertyDecorator = {}, global.Vue, global.VueClassComponent));
-}(this, (function (exports, vue, vueClassComponent) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue-class-component'), require('vue')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'vue-class-component', 'vue'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VuePropertyDecorator = {}, global.VueClassComponent, global.Vue));
+}(this, (function (exports, vueClassComponent, vue) { 'use strict';
 
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-    var vue__default = /*#__PURE__*/_interopDefaultLegacy(vue);
-    var vueClassComponent__default = /*#__PURE__*/_interopDefaultLegacy(vueClassComponent);
-
-    var __spreadArrays = (undefined && undefined.__spreadArrays) || function () {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    };
     // Code copied from Vue/src/shared/util.js
-    var hyphenateRE = /\B([A-Z])/g;
-    var hyphenate = function (str) { return str.replace(hyphenateRE, '-$1').toLowerCase(); };
+    const hyphenateRE = /\B([A-Z])/g;
+    const hyphenate = (str) => str.replace(hyphenateRE, '-$1').toLowerCase();
     /**
-     * decorator of an event-emitter function
+     * Decorator of an event-emitter function
      * @param  event The name of the event
-     * @return MethodDecorator
      */
     function Emit(event) {
-        return function (_target, propertyKey, descriptor) {
-            var key = hyphenate(propertyKey);
-            var original = descriptor.value;
-            descriptor.value = function emitter() {
-                var _this = this;
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                var emit = function (returnValue) {
-                    var emitName = event || key;
+        return vueClassComponent.createDecorator((componentOptions, propertyKey) => {
+            const emitName = event || hyphenate(propertyKey);
+            componentOptions.emits || (componentOptions.emits = []);
+            componentOptions.emits.push(emitName);
+            const original = componentOptions.methods[propertyKey];
+            componentOptions.methods[propertyKey] = function emitter(...args) {
+                const emit = (returnValue) => {
                     if (returnValue === undefined) {
                         if (args.length === 0) {
-                            _this.$emit(emitName);
+                            this.$emit(emitName);
                         }
                         else if (args.length === 1) {
-                            _this.$emit(emitName, args[0]);
+                            this.$emit(emitName, args[0]);
                         }
                         else {
-                            _this.$emit.apply(_this, __spreadArrays([emitName], args));
+                            this.$emit(emitName, ...args);
                         }
@@ -52,6 +35,6 @@ }
                         args.unshift(returnValue);
-                        _this.$emit.apply(_this, __spreadArrays([emitName], args));
+                        this.$emit(emitName, ...args);
                     }
                 };
-                var returnValue = original.apply(this, args);
+                const returnValue = original.apply(this, args);
                 if (isPromise(returnValue)) {
@@ -65,3 +48,3 @@ returnValue.then(emit);
             };
-        };
+        });
     }
@@ -73,198 +56,48 @@ function isPromise(obj) {
     /**
-     * decorator of an inject
-     * @param from key
-     * @return PropertyDecorator
+     * Decorator for inject options
+     * @param options the options for the injected value
      */
-    function Inject(options) {
-        return vueClassComponent.createDecorator(function (componentOptions, key) {
-            if (typeof componentOptions.inject === 'undefined') {
-                componentOptions.inject = {};
-            }
-            if (!Array.isArray(componentOptions.inject)) {
-                componentOptions.inject[key] = options || key;
-            }
+    function Inject(options = Object.create(null)) {
+        return vueClassComponent.createDecorator((componentOptions, key) => {
+            const originalSetup = componentOptions.setup;
+            componentOptions.setup = (props, ctx) => {
+                const result = originalSetup === null || originalSetup === void 0 ? void 0 : originalSetup(props, ctx);
+                const injectedValue = vue.inject(options.from || key, options.default);
+                return Object.assign(Object.assign({}, result), { [key]: injectedValue });
+            };
         });
     }
 
-    function needToProduceProvide(original) {
-        return (typeof original !== 'function' ||
-            (!original.managed && !original.managedReactive));
-    }
-    function produceProvide(original) {
-        var provide = function () {
-            var _this = this;
-            var rv = typeof original === 'function' ? original.call(this) : original;
-            rv = Object.create(rv || null);
-            // set reactive services (propagates previous services if necessary)
-            rv[reactiveInjectKey] = Object.create(this[reactiveInjectKey] || {});
-            for (var i in provide.managed) {
-                rv[provide.managed[i]] = this[i];
-            }
-            var _loop_1 = function (i) {
-                rv[provide.managedReactive[i]] = this_1[i]; // Duplicates the behavior of `@Provide`
-                Object.defineProperty(rv[reactiveInjectKey], provide.managedReactive[i], {
-                    enumerable: true,
-                    configurable: true,
-                    get: function () { return _this[i]; },
-                });
-            };
-            var this_1 = this;
-            for (var i in provide.managedReactive) {
-                _loop_1(i);
-            }
-            return rv;
-        };
-        provide.managed = {};
-        provide.managedReactive = {};
-        return provide;
-    }
-    /** Used for keying reactive provide/inject properties */
-    var reactiveInjectKey = '__reactiveInject__';
-    function inheritInjected(componentOptions) {
-        // inject parent reactive services (if any)
-        if (!Array.isArray(componentOptions.inject)) {
-            componentOptions.inject = componentOptions.inject || {};
-            componentOptions.inject[reactiveInjectKey] = {
-                from: reactiveInjectKey,
-                default: {},
-            };
-        }
-    }
-
     /**
-     * decorator of a reactive inject
-     * @param from key
-     * @return PropertyDecorator
+     * Decorator for v-model
+     * @param propName e.g. `modelValue`
+     * @param propOptions the options for the prop
      */
-    function InjectReactive(options) {
-        return vueClassComponent.createDecorator(function (componentOptions, key) {
-            if (typeof componentOptions.inject === 'undefined') {
-                componentOptions.inject = {};
-            }
-            if (!Array.isArray(componentOptions.inject)) {
-                var fromKey_1 = !!options ? options.from || options : key;
-                var defaultVal_1 = (!!options && options.default) || undefined;
-                if (!componentOptions.computed)
-                    componentOptions.computed = {};
-                componentOptions.computed[key] = function () {
-                    var obj = this[reactiveInjectKey];
-                    return obj ? obj[fromKey_1] : defaultVal_1;
-                };
-                componentOptions.inject[reactiveInjectKey] = reactiveInjectKey;
-            }
+    function Model(propName, propOptions) {
+        return vueClassComponent.createDecorator((componentOptions, key) => {
+            const eventName = `update:${propName}`;
+            componentOptions.props || (componentOptions.props = Object.create(null));
+            componentOptions.props[propName] = propOptions;
+            componentOptions.emits || (componentOptions.emits = []);
+            componentOptions.emits.push(eventName);
+            componentOptions.computed || (componentOptions.computed = Object.create(null));
+            componentOptions.computed[key] = {
+                get() {
+                    return this[propName];
+                },
+                set(newValue) {
+                    this.$emit(eventName, newValue);
+                },
+            };
         });
     }
 
-    /** @see {@link https://github.com/vuejs/vue-class-component/blob/master/src/reflect.ts} */
-    var reflectMetadataIsSupported = typeof Reflect !== 'undefined' && typeof Reflect.getMetadata !== 'undefined';
-    function applyMetadata(options, target, key) {
-        if (reflectMetadataIsSupported) {
-            if (!Array.isArray(options) &&
-                typeof options !== 'function' &&
-                !options.hasOwnProperty('type') &&
-                typeof options.type === 'undefined') {
-                var type = Reflect.getMetadata('design:type', target, key);
-                if (type !== Object) {
-                    options.type = type;
-                }
-            }
-        }
-    }
-
     /**
-     * decorator of model
-     * @param  event event name
-     * @param options options
-     * @return PropertyDecorator
+     * Decorator for prop options
+     * @param propOptions the options for the prop
      */
-    function Model(event, options) {
-        if (options === void 0) { options = {}; }
-        return function (target, key) {
-            applyMetadata(options, target, key);
-            vueClassComponent.createDecorator(function (componentOptions, k) {
-                (componentOptions.props || (componentOptions.props = {}))[k] = options;
-                componentOptions.model = { prop: k, event: event || k };
-            })(target, key);
-        };
-    }
-
-    /**
-     * decorator of synced model and prop
-     * @param propName the name to interface with from outside, must be different from decorated property
-     * @param  event event name
-     * @param options options
-     * @return PropertyDecorator
-     */
-    function ModelSync(propName, event, options) {
-        if (options === void 0) { options = {}; }
-        return function (target, key) {
-            applyMetadata(options, target, key);
-            vueClassComponent.createDecorator(function (componentOptions, k) {
-                (componentOptions.props || (componentOptions.props = {}))[propName] = options;
-                componentOptions.model = { prop: propName, event: event || k };
-                (componentOptions.computed || (componentOptions.computed = {}))[k] = {
-                    get: function () {
-                        return this[propName];
-                    },
-                    set: function (value) {
-                        // @ts-ignore
-                        this.$emit(event, value);
-                    },
-                };
-            })(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) {
-            applyMetadata(options, target, key);
-            vueClassComponent.createDecorator(function (componentOptions, k) {
-                (componentOptions.props || (componentOptions.props = {}))[k] = options;
-            })(target, key);
-        };
-    }
-
-    /**
-     * decorator of a synced prop
-     * @param propName the name to interface with from outside, must be different from decorated property
-     * @param options the options for the synced prop
-     * @return PropertyDecorator | void
-     */
-    function PropSync(propName, options) {
-        if (options === void 0) { options = {}; }
-        return function (target, key) {
-            applyMetadata(options, target, key);
-            vueClassComponent.createDecorator(function (componentOptions, k) {
-                (componentOptions.props || (componentOptions.props = {}))[propName] = options;
-                (componentOptions.computed || (componentOptions.computed = {}))[k] = {
-                    get: function () {
-                        return this[propName];
-                    },
-                    set: function (value) {
-                        this.$emit("update:" + propName, value);
-                    },
-                };
-            })(target, key);
-        };
-    }
-
-    /**
-     * decorator of a provide
-     * @param key key
-     * @return PropertyDecorator | void
-     */
-    function Provide(key) {
-        return vueClassComponent.createDecorator(function (componentOptions, k) {
-            var provide = componentOptions.provide;
-            inheritInjected(componentOptions);
-            if (needToProduceProvide(provide)) {
-                provide = componentOptions.provide = produceProvide(provide);
-            }
-            provide.managed[k] = key || k;
+    function Prop(propOptions) {
+        return vueClassComponent.createDecorator((componentOptions, key) => {
+            componentOptions.props || (componentOptions.props = Object.create(null));
+            componentOptions.props[key] = propOptions;
         });
@@ -274,14 +107,14 @@ }
     /**
-     * decorator of a reactive provide
-     * @param key key
-     * @return PropertyDecorator | void
+     * Decorator for provide options
+     * @param to to
      */
-    function ProvideReactive(key) {
-        return vueClassComponent.createDecorator(function (componentOptions, k) {
-            var provide = componentOptions.provide;
-            inheritInjected(componentOptions);
-            if (needToProduceProvide(provide)) {
-                provide = componentOptions.provide = produceProvide(provide);
-            }
-            provide.managedReactive[k] = key || k;
+    function Provide(to) {
+        return vueClassComponent.createDecorator((componentOptions, key) => {
+            const originalProvide = componentOptions.provide;
+            componentOptions.provide = function () {
+                const providedValue = typeof originalProvide === 'function'
+                    ? originalProvide.call(this)
+                    : originalProvide;
+                return Object.assign(Object.assign({}, providedValue), { [to || key]: vue.computed(() => this[key]) });
+            };
         });
@@ -295,7 +128,7 @@ }
     function Ref(refKey) {
-        return vueClassComponent.createDecorator(function (options, key) {
-            options.computed = options.computed || {};
-            options.computed[key] = {
+        return vueClassComponent.createDecorator((componentOptions, key) => {
+            componentOptions.computed || (componentOptions.computed = Object.create(null));
+            componentOptions.computed[key] = {
                 cache: false,
-                get: function () {
+                get() {
                     return this.$refs[refKey || key];
@@ -308,35 +141,10 @@ },
     /**
-     * decorator for capturings v-model binding to component
-     * @param options the options for the prop
+     * Decorator for watch options
+     * @param path the path or the expression to observe
+     * @param watchOptions
      */
-    function VModel(options) {
-        if (options === void 0) { options = {}; }
-        var valueKey = 'value';
-        return vueClassComponent.createDecorator(function (componentOptions, key) {
-            (componentOptions.props || (componentOptions.props = {}))[valueKey] = options;
-            (componentOptions.computed || (componentOptions.computed = {}))[key] = {
-                get: function () {
-                    return this[valueKey];
-                },
-                set: function (value) {
-                    this.$emit('input', value);
-                },
-            };
-        });
-    }
-
-    /**
-     * 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 vueClassComponent.createDecorator(function (componentOptions, handler) {
-            if (typeof componentOptions.watch !== 'object') {
-                componentOptions.watch = Object.create(null);
-            }
-            var watch = componentOptions.watch;
+    function Watch(path, watchOptions) {
+        return vueClassComponent.createDecorator((componentOptions, handler) => {
+            componentOptions.watch || (componentOptions.watch = Object.create(null));
+            const watch = componentOptions.watch;
             if (typeof watch[path] === 'object' && !Array.isArray(watch[path])) {
@@ -348,19 +156,19 @@ watch[path] = [watch[path]];
             }
-            watch[path].push({ handler: handler, deep: deep, immediate: immediate });
+            watch[path].push(Object.assign({ handler }, watchOptions));
         });
     }
 
-    Object.defineProperty(exports, 'Vue', {
+    Object.defineProperty(exports, 'Options', {
         enumerable: true,
         get: function () {
-            return vue__default['default'];
+            return vueClassComponent.Options;
         }
     });
-    Object.defineProperty(exports, 'Component', {
+    Object.defineProperty(exports, 'Vue', {
         enumerable: true,
         get: function () {
-            return vueClassComponent__default['default'];
+            return vueClassComponent.Vue;
         }
     });
-    Object.defineProperty(exports, 'Mixins', {
+    Object.defineProperty(exports, 'mixins', {
         enumerable: true,
@@ -373,11 +181,6 @@ get: function () {
     exports.Inject = Inject;
-    exports.InjectReactive = InjectReactive;
     exports.Model = Model;
-    exports.ModelSync = ModelSync;
     exports.Prop = Prop;
-    exports.PropSync = PropSync;
     exports.Provide = Provide;
-    exports.ProvideReactive = ProvideReactive;
     exports.Ref = Ref;
-    exports.VModel = VModel;
     exports.Watch = Watch;
@@ -384,0 +187,0 @@

package.json

 {
   "name": "vue-property-decorator",
-  "version": "9.1.2",
+  "version": "10.0.0-rc.0",
   "description": "property decorators for Vue Component",
@@ -27,9 +27,9 @@ "main": "lib/index.umd.js",
     "@types/node": "^14.14.9",
+    "@vue/test-utils": "^2.0.0-rc.1",
     "jest": "^26.6.3",
-    "reflect-metadata": "^0.1.13",
     "rollup": "^2.33.3",
     "ts-jest": "^26.4.4",
     "typescript": "^4.1.2",
-    "vue": "^2.6.10",
-    "vue-class-component": "^7.2.3"
+    "vue": "^3.0.6",
+    "vue-class-component": "^8.0.0-rc.1"
   },
@@ -36,0 +36,0 @@ "typings": "./lib/index.d.ts",

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Worsened metrics

Total package byte prevSize

28924

decreased by-40.88%

Number of package files

21

decreased by-46.15%

Lines of code

393

decreased by-56.77%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes