Fix Provide/ProvideReactive compatibility (kaorun343#249)

oguimbal · Sep 24, 2019 · eedebf4 · eedebf4
1 parent 56d8db4
commit eedebf4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/src/vue-property-decorator.ts b/src/vue-property-decorator.ts
@@ -64,7 +64,7 @@ export function Provide(key?: string | symbol) {
   return createDecorator((componentOptions, k) => {
     let provide: any = componentOptions.provide
     if (typeof provide !== 'function' || !provide.managed) {
-      const original = componentOptions.provide
+      const original: any = componentOptions.provide
       provide = componentOptions.provide = function(this: any) {
         let rv = Object.create(
           (typeof original === 'function' ? original.call(this) : original) ||
@@ -87,26 +87,26 @@ export function Provide(key?: string | symbol) {
 export function ProvideReactive(key?: string | symbol) {
   return createDecorator((componentOptions, k) => {
     let provide: any = componentOptions.provide
-    if (typeof provide !== 'function' || !provide.managed) {
-      const original = componentOptions.provide
+    if (typeof provide !== 'function' || !provide.managedReactive) {
+      const original: any = componentOptions.provide
       provide = componentOptions.provide = function(this: any) {
         let rv = Object.create(
           (typeof original === 'function' ? original.call(this) : original) ||
             null,
         )
         rv[reactiveInjectKey] = {}
-        for (let i in provide.managed) {
-          rv[provide.managed[i]] = this[i] // Duplicates the behavior of `@Provide`
-          Object.defineProperty(rv[reactiveInjectKey], provide.managed[i], {
+        for (let i in provide.managedReactive) {
+          rv[provide.managedReactive[i]] = this[i] // Duplicates the behavior of `@Provide`
+          Object.defineProperty(rv[reactiveInjectKey], provide.managedReactive[i], {
             enumerable: true,
             get: () => this[i],
           })
         }
         return rv
       }
-      provide.managed = {}
+      provide.managedReactive = {}
     }
-    provide.managed[k] = key || k
+    provide.managedReactive[k] = key || k
   })
 }
 

diff --git a/tests/ProvideReactive.spec.ts b/tests/ProvideReactive.spec.ts
@@ -2,7 +2,8 @@ import Vue from 'vue'
 import {
   Component,
   ProvideReactive,
-  InjectReactive
+  InjectReactive,
+  Provide
 } from '../src/vue-property-decorator'
 
 describe(ProvideReactive, () => {
@@ -39,6 +40,27 @@ describe(ProvideReactive, () => {
     })
   })
 
+
+  describe('is compatible with @Provide()', () => {
+    @Component
+    class ParentComponent extends Vue {
+      @Provide('first') first = 'whatever'
+      @ProvideReactive() one = 'one'
+    }
+    @Component
+    class ChildComponent extends Vue {
+      @InjectReactive() one!: string
+    }
+
+    const parent = new ParentComponent()
+    const component = new ChildComponent({ parent })
+
+    test('provides value', () => {
+      expect(component.one).toBe('one')
+    })
+  })
+
+
   describe('when key is given', () => {
     const key = 'KEY'
     const value = 'VALUE'