@provide and docs

Author: ruojianll

changelog/v3.0.1.md

@@ -2,8 +2,12 @@
 
 1. Use class constructor name as default component name.
 
-2. `Ref` decorator accepts `key` paramater.
+2. `@Ref` decorator accepts `key` paramater.
+
+3. New `@Provide` decorator
 
 # Document Update
 
-'@Ref', which accepts `key` paramater.
+1. `@Ref`, which accepts `key` paramater.
+
+2. New `@Provide` decorator

docs/en/_sidebar.md

@@ -10,6 +10,7 @@
     - [Event](/en/class-component/event/event.md)
     - [Reference](/en/class-component/reference/reference.md)
     - [Watcher](/en/class-component/watcher/watcher.md)
+    - [Provide](/en/class-component/provide/provide.md)
     - [Injection](/en/class-component/injection/injection.md)
     - [Model](/en/class-component/model/model.md)
     - [Setup](/en/class-component/setup/setup.md)

docs/en/class-component/provide/code-usage-base.ts

@@ -0,0 +1,13 @@
+import { Component, Vue, Provide, toNative } from 'vue-facing-decorator'
+
+@Component
+class MyComponent extends Vue {
+    @Provide
+    p1 = 'foo'
+
+    @Provide('alias')
+    p2 = 'bar'
+}
+
+
+export default toNative(MyComponent)

docs/en/class-component/provide/provide.md

@@ -0,0 +1,5 @@
+## Usage
+
+This is the vue `Provide` concept.
+
+[](./code-usage-base.ts ':include :type=code typescript')

docs/zh-cn/_sidebar.md

@@ -11,6 +11,7 @@
     - [引用](/zh-cn/class-component/reference/reference.md)
     - [监视器](/zh-cn/class-component/watcher/watcher.md)
     - [注入](/zh-cn/class-component/injection/injection.md)
+    - [提供](/zh-cn/class-component/provide/provide.md)
     - [Model](/zh-cn/class-component/model/model.md)
     - [Composition 组件](/zh-cn/class-component/setup/setup.md)
 - 继承

docs/zh-cn/class-component/provide/provide.md

@@ -0,0 +1,5 @@
+## 用法
+
+和Vue的`Provide`概念相同。
+
+[](../../../en/class-component/provide/code-usage-base.ts ':include :type=code typescript')

src/option/data.ts

@@ -9,6 +9,10 @@ export function build(cons: Cons, optionBuilder: OptionBuilder, vueInstance: any
         return !!des.enumerable
     })
     const slot = obtainSlot(cons.prototype)
-    names = excludeNames(names, slot)
+    names = excludeNames(names, slot,(mapName) => {
+        //include these names:
+        //provide, user may access field directly
+        return !['provide'].includes(mapName)
+    })
     Object.assign(optionBuilder.data, makeObject(names, sample))
 }

src/option/methodsAndHooks.ts

@@ -56,7 +56,7 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
             //watch, user may call watch method directly
             //hooks, user may call hook method directly
             //emits, user may have a method name which is same as one of event names
-            return !['watch', 'hooks', 'emits'].includes(mapName)
+            return !['watch', 'hooks', 'emits', 'provide'].includes(mapName)
         });
         names.forEach(name => {
             if (HookNames.includes(name as any) || map.has(name)) {
@@ -72,7 +72,7 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
     })
 
     Object.assign(optionBuilder.methods, MethodFunctions)
-    const beforeCreateCallbacks = [...optionBuilder.beforeCreateCallbacks??[]]
+    const beforeCreateCallbacks = [...optionBuilder.beforeCreateCallbacks ?? []]
     if (beforeCreateCallbacks && beforeCreateCallbacks.length > 0) {
         const oldBeforeCreateCallback = HookFunctions['beforeCreate']
         HookFunctions['beforeCreate'] = function () {

test/option/provide.ts

@@ -1,8 +1,8 @@
 
 import { expect } from 'chai';
 import 'mocha';
-import { Component, Provide, Base, Inject } from '../../dist'
-import {VueWrapper, mount} from '@vue/test-utils';
+import { Component, Provide, Base, Inject, toNative } from '../../dist'
+import { VueWrapper, mount } from '@vue/test-utils';
 
 describe('decorator Provide',
     () => {
@@ -23,7 +23,7 @@ describe('decorator Provide',
             readonly _internalName = 123
         }
 
-        @Component({template: '<span />'})
+        @Component({ template: '<span />' })
         class Child extends Base {
             @Inject
             readonly fromClassDecorator!: string
@@ -84,7 +84,7 @@ describe('decorator Provide',
                 readonly ambiguous = 'property'
             }
 
-            @Component({template: '<span />'})
+            @Component({ template: '<span />' })
             class Child extends Base {
                 @Inject
                 readonly ambiguous!: string
@@ -105,5 +105,34 @@ describe('decorator Provide',
 
             expect(child.vm.ambiguous).to.equal('class')
         })
+
+        it('preserve feild', () => {
+            @Component({
+                template: '<div><slot/></div>',
+            })
+            class Comp extends Base {
+                @Provide
+                readonly vp = 'foo'
+                v!: string
+
+                @Provide
+                fp() { }
+                f!: Function
+                mounted() {
+
+                    this.v = this.vp
+                    this.f = this.fp
+
+                }
+
+
+            }
+
+
+            const component = mount(toNative(Comp) as any)
+
+            expect(component.vm.v).to.equal('foo')
+            expect(typeof component.vm.f).to.equal('function')
+        })
     }
 )