✨ Add @Provide() decorator

This change adds a `@Provide()` decorator, which mirrors the existing
`@Inject()` decorator.

Author: alecgibson

src/component.ts

@@ -1,5 +1,5 @@
 import { defineComponent, type ComponentCustomOptions } from 'vue';
-import { obtainSlot, getSuperSlot } from './utils'
+import { obtainSlot, getSuperSlot, getProviderFunction } from './utils'
 import { build as optionSetup } from './option/setup'
 import { build as optionComputed } from './option/computed'
 import { build as optionData } from './option/data'
@@ -8,6 +8,7 @@ import { build as optionRef } from './option/ref'
 import { build as optionWatch } from './option/watch'
 import { build as optionProps } from './option/props'
 import { build as optionInject } from './option/inject'
+import { build as optionProvide } from './option/provide'
 import { build as optionEmit } from './option/emit'
 import { build as optionVModel } from './option/vmodel'
 import { build as optionAccessor } from './option/accessor'
@@ -45,6 +46,10 @@ function ComponentOption(cons: Cons, extend?: any) {
         watch: optionBuilder.watch,
         props: optionBuilder.props,
         inject: optionBuilder.inject,
+        provide() {
+            optionProvide(cons, optionBuilder, this)
+            return optionBuilder.provide ?? {}
+        },
         ...optionBuilder.hooks,
         extends: extend
     }
@@ -73,7 +78,7 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     const option = ComponentOption(cons, extend)
     const slot = obtainSlot(cons.prototype)
     Object.keys(arg).reduce<Record<string, any>>((option, name: string) => {
-        if (['options', 'modifier', 'emits', 'setup'].includes(name)) {
+        if (['options', 'modifier', 'emits', 'setup', 'provide'].includes(name)) {
             return option
         }
         option[name] = arg[name as keyof ComponentOption]
@@ -113,6 +118,13 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
         option.setup = setup
     }
 
+    //merge provide function
+    const oldProvider = getProviderFunction(option.provide)
+    const newProvider = getProviderFunction(arg.provide)
+    option.provide = function() {
+        return Object.assign({}, oldProvider.call(this), newProvider.call(this))
+    }
+
     //custom decorator
     const map = slot.getMap('customDecorator')
     if (map && map.size > 0) {

src/index.ts

@@ -3,6 +3,7 @@ export { decorator as Setup } from './option/setup'
 export { decorator as Ref } from './option/ref'
 export { decorator as Watch } from './option/watch'
 export { decorator as Prop } from './option/props'
+export { decorator as Provide } from './option/provide'
 export { decorator as Inject } from './option/inject'
 export { decorator as Emit } from './option/emit'
 export { decorator as VModel, decorator as Model } from './option/vmodel'

src/option/provide.ts

@@ -0,0 +1,23 @@
+import type { Cons } from '../component';
+import type { OptionBuilder } from '../optionBuilder'
+import { obtainSlot, optionNullableMemberDecorator } from '../utils'
+
+export type ProvideConfig = null | string
+
+export const decorator = optionNullableMemberDecorator(function (proto: any, name: string, key?: ProvideConfig) {
+    const slot = obtainSlot(proto)
+    const map = slot.obtainMap('provide')
+    map.set(name, typeof key === 'undefined' ? null : key)
+})
+
+export function build(cons: Cons, optionBuilder: OptionBuilder, vueInstance: any) {
+    optionBuilder.provide ??= {}
+    const sample = new cons(optionBuilder, vueInstance) as any
+    const slot = obtainSlot(cons.prototype)
+    const names = slot.obtainMap('provide')
+    if (!names) return null
+    names.forEach((value, name) => {
+        const key = value === null ? name : value
+        optionBuilder.provide![key] = sample[name]
+    })
+}

src/optionBuilder.ts

@@ -11,6 +11,7 @@ export interface OptionBuilder {
     computed?: Record<string, any>
     watch?: Record<string, WatchConfig | WatchConfig[]>
     props?: Record<string, PropsConfig>
+    provide?: Record<string, any>
     inject?: Record<string, InjectConfig>
     setup?: OptionSetupFunction
     beforeCreateCallbacks?: Function[]

src/utils.ts

@@ -9,13 +9,15 @@ import type { WatchConfig } from "./option/watch";
 import type { SetupConfig } from './option/setup'
 import type { Record as CustomDecoratorRecord } from './custom/custom'
 import type { RefConfig } from './option/ref';
+import type { ProvideConfig } from './option/provide';
 import { compatibleMemberDecorator } from './deco3/utils';
 
 const SlotSymbol = Symbol('vue-facing-decorator-slot')
 
 export type SlotMapTypes = {
     vanilla: Map<string, boolean>
     computed: Map<string, boolean>
+    provide: Map<string, ProvideConfig>
     inject: Map<string, InjectConfig>
     emit: Map<string, EmitConfig>
     emits: Map<string, boolean>
@@ -171,3 +173,8 @@ export function optionNullableMemberDecorator<T>(handler: { (proto: any, name: s
 
     return decorator
 }
+
+export function getProviderFunction(provide: any): () => {} {
+    if (typeof provide === 'function') return provide
+    return function () { return provide || {} }
+}

test/component.ts

@@ -15,7 +15,7 @@ const FullOptionOpt = {
   name: 'FullOption',
   emits: ['emits1', 'emits2'],
   provide: function () {
-    return 'provided'
+    return {provided: 'provided'}
   },
   components: {
     empty: Empty
@@ -100,6 +100,9 @@ describe('Component',
             const r = await pro
             expect('setupVA').to.equal(r.setupA)
             break
+        case 'provide':
+            expect(opt()).to.eql({provided: 'provided'})
+            break
           default:
             expect(opt).to.equal(FullOptionContext[key])
         }

test/option/provide.ts

@@ -0,0 +1,109 @@
+
+import { expect } from 'chai';
+import 'mocha';
+import { Component, Provide, Base, Inject } from '../../dist'
+import {VueWrapper, mount} from '@vue/test-utils';
+
+describe('decorator Provide',
+    () => {
+        @Component({
+            template: '<div><slot/></div>',
+            provide: {
+                fromClassDecorator: 'provided from class decorator'
+            },
+        })
+        class Parent extends Base {
+            @Provide
+            readonly foo = 'provided foo'
+
+            @Provide
+            readonly foo2 = this.foo
+
+            @Provide('overridden')
+            readonly _internalName = 123
+        }
+
+        @Component({template: '<span />'})
+        class Child extends Base {
+            @Inject
+            readonly fromClassDecorator!: string
+
+            @Inject
+            readonly foo!: string
+
+            @Inject
+            readonly foo2!: string
+
+            @Inject
+            readonly overridden!: number
+        }
+
+        let child: VueWrapper<Child>;
+
+        beforeEach(() => {
+            const component = mount({
+                template: `
+                    <Parent>
+                        <Child />
+                    </Parent>
+                `,
+                components: {
+                    Parent,
+                    Child,
+                }
+            })
+            child = component.findComponent(Child)
+        })
+
+        it('@Component decorator', () => {
+            expect(child.vm.fromClassDecorator).to.equal('provided from class decorator')
+        })
+
+        it('default key', () => {
+            expect(child.vm.foo).to.equal('provided foo')
+        })
+
+        it('accessing this', () => {
+            expect(child.vm.foo2).to.equal('provided foo')
+        })
+
+        it('custom key', () => {
+            expect(child.vm).to.not.have.property('_internalName')
+            expect(child.vm.overridden).to.equal(123)
+        })
+
+        it('prioritises the class decorator', () => {
+            @Component({
+                template: '<div><slot/></div>',
+                provide: {
+                    ambiguous: 'class'
+                },
+            })
+            class Parent extends Base {
+                @Provide
+                readonly ambiguous = 'property'
+            }
+
+            @Component({template: '<span />'})
+            class Child extends Base {
+                @Inject
+                readonly ambiguous!: string
+            }
+
+            const component = mount({
+                template: `
+                    <Parent>
+                        <Child />
+                    </Parent>
+                `,
+                components: {
+                    Parent,
+                    Child,
+                }
+            })
+            const child = component.findComponent(Child)
+
+            expect(child.vm.ambiguous).to.equal('class')
+        })
+    }
+)

test/test.ts

@@ -11,6 +11,7 @@ import './option/ref'
 import './option/props'
 import './option/watch'
 import './option/inject'
+import './option/provide'
 import './option/vmodel'
 import './option/accessor'
 import './feature/hooks'