reedsy-method-from-data-this

ruojianll · ruojianll · commit ec111ae557f2 · 2023-08-02T00:50:40.000+08:00
diff --git a/changelog/v3.0.1.md b/changelog/v3.0.1.md
@@ -1,3 +1,9 @@
+# Feature
+
 1. Use class constructor name as default component name.
 
-2. `Ref` decorator accepts `key` paramater. (doc updated)
+2. `Ref` decorator accepts `key` paramater.
+
+# Document Update
+
+'@Ref', which accepts `key` paramater.
diff --git a/src/component.ts b/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) {
diff --git a/src/index.ts b/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'
@@ -44,11 +45,10 @@ export const Base = class {
                 (this as any)[key] = methods[key].bind(vueInstance)
             })
         }
-        console.log('pp',this)
     }
 
 } as VueCons
 
 export const Vue = Base
 
-export { toNative } from './component'
+export { toNative } from './component'
diff --git a/src/option/emit.ts b/src/option/emit.ts
@@ -1,9 +1,9 @@
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
-import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
+import { obtainSlot, optionNullableMemberDecorator } from '../utils'
 export type EmitConfig = null | string
 
-export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, key?: string) {
+export const decorator = optionNullableMemberDecorator(function (proto: any, name: string, key?: string) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('emit');
     map.set(name, typeof key === 'undefined' ? null : key)
diff --git a/src/option/inject.ts b/src/option/inject.ts
@@ -1,14 +1,14 @@
 import type { InjectionKey } from 'vue'
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
-import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
-import { compatibleMemberDecorator } from '../deco3/utils'
+import { obtainSlot, optionNullableMemberDecorator } from '../utils'
+
 export interface InjectConfig {
     from?: string | symbol | Symbol | InjectionKey<any>
     default?: any
 }
 
-export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, option?: InjectConfig) {
+export const decorator = optionNullableMemberDecorator(function (proto: any, name: string, option?: InjectConfig) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('inject')
     const opt = Object.assign({}, option ?? {})
diff --git a/src/option/methodsAndHooks.ts b/src/option/methodsAndHooks.ts
@@ -1,6 +1,6 @@
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
-import { obtainSlot, toComponentReverse, excludeNames, getValidNames, optoinNullableMemberDecorator } from '../utils'
+import { obtainSlot, toComponentReverse, excludeNames, getValidNames, optionNullableMemberDecorator } from '../utils'
 
 export const HookNames = [
     "beforeCreate",
@@ -23,7 +23,7 @@ export const HookNames = [
 ] as const
 
 export type HookConfig = null
-export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string) {
+export const decorator = optionNullableMemberDecorator(function (proto: any, name: string) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('hooks');
     map.set(name, null)
diff --git a/src/option/props.ts b/src/option/props.ts
@@ -1,15 +1,15 @@
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
-import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
-import { compatibleMemberDecorator } from '../deco3/utils'
+import { obtainSlot, optionNullableMemberDecorator } from '../utils'
+
 export interface PropsConfig {
     type?: any
     required?: boolean
     default?: any
     validator?(value: any): boolean;
 }
 
-export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, option?: PropsConfig) {
+export const decorator = optionNullableMemberDecorator(function (proto: any, name: string, option?: PropsConfig) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('props')
     const opt = Object.assign({}, option ?? {})
diff --git a/src/option/provide.ts b/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]
+    })
+}
diff --git a/src/option/ref.ts b/src/option/ref.ts
@@ -1,10 +1,10 @@
 import type { Cons } from '../component'
 import { type OptionBuilder, applyAccessors } from '../optionBuilder'
-import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
+import { obtainSlot, optionNullableMemberDecorator } from '../utils'
 
 export type RefConfig = null | string
 
-export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, key?: string) {
+export const decorator = optionNullableMemberDecorator(function (proto: any, name: string, key?: string) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('ref')
     map.set(name, typeof key === 'undefined' ? null : key)
diff --git a/src/option/vanilla.ts b/src/option/vanilla.ts
@@ -1,6 +1,6 @@
-import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
-import { compatibleMemberDecorator } from '../deco3/utils'
-export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string) {
+import { obtainSlot, optionNullableMemberDecorator } from '../utils'
+
+export const decorator = optionNullableMemberDecorator(function (proto: any, name: string) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('vanilla')
     map.set(name, true)
diff --git a/src/option/vmodel.ts b/src/option/vmodel.ts
@@ -1,13 +1,13 @@
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
-import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
+import { obtainSlot, optionNullableMemberDecorator } from '../utils'
 import { decorator as PropsDecorator, type PropsConfig } from './props'
-import { compatibleMemberDecorator } from '../deco3/utils'
+
 export type VModelConfig = PropsConfig & {
     name?: string
 }
 
-export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, option?: VModelConfig) {
+export const decorator = optionNullableMemberDecorator(function (proto: any, name: string, option?: VModelConfig) {
     option ??= {}
     const slot = obtainSlot(proto)
     let vmodelName = 'modelValue'
diff --git a/src/optionBuilder.ts b/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[]
diff --git a/src/utils.ts b/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>
@@ -152,7 +154,7 @@ export function getValidNames(obj: any, filter: (des: PropertyDescriptor, name:
     return Object.keys(descriptors).filter(name => filter(descriptors[name], name))
 }
 
-export function optoinNullableMemberDecorator<T>(handler: { (proto: any, name: string, option?: T): any }) {
+export function optionNullableMemberDecorator<T>(handler: { (proto: any, name: string, option?: T): any }) {
     function decorator(option?: T): any
     function decorator(proto: BaseTypeIdentify, name: any): any
     function decorator(value: any, ctx: ClassMemberDecoratorContext): any //deco stage 3
@@ -171,3 +173,8 @@ export function optoinNullableMemberDecorator<T>(handler: { (proto: any, name: s
 
     return decorator
 }
+
+export function getProviderFunction(provide: any): () => {} {
+    if (typeof provide === 'function') return provide
+    return function () { return provide || {} }
+}
diff --git a/test/component.ts b/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])
         }
diff --git a/test/feature/hooks.ts b/test/feature/hooks.ts
@@ -28,4 +28,4 @@ describe('feature hooks',
         })
     }
 )
-export default {}
+export default {}
diff --git a/test/option/accessor.ts b/test/option/accessor.ts
@@ -4,7 +4,7 @@ import { expect } from 'chai';
 import 'mocha';
 import { Component, Base, Vanilla, toNative } from '../../dist'
 
-@Component
+@Component({template: '<div/>'})
 class Comp extends Base {
 
     @Vanilla
diff --git a/test/option/data.ts b/test/option/data.ts
@@ -4,13 +4,15 @@ import 'mocha';
 import { Component, Base, Prop, toNative } from '../../dist'
 import { mount } from '@vue/test-utils'
 
-@Component
-class DataComp extends Base {
+
+@Component({ template: '<div/>' })
+class Comp extends Base {
     data = 'data value'
 
     @Prop
     prop!: string
-    fieldInitProp = this.prop
+
+    fieldInitProp = this.prop //not work
 
     methods = [this.method];
 
@@ -24,7 +26,7 @@ class DataComp extends Base {
     }
 }
 
-const CompContext = toNative(DataComp) as any
+const CompContext = toNative(Comp) as any
 
 describe('option data',
     () => {
@@ -37,10 +39,7 @@ describe('option data',
 
             expect('function').to.equal(typeof CompContext?.data)
             expect('data value').to.equal(vm.data)
-            // expect('data value').to.equal(CompContext.data().mb)
-            // expect(5).to.equal(Object.keys(CompContext.data()).length)
-      
-
+            expect(5).to.equal(Object.keys(CompContext.data()).length)
         })
 
         it('binds methods to the component context', () => {
@@ -52,7 +51,8 @@ describe('option data',
             expect('prop test').to.equal(vm.methods[0]())
             expect('prop test').to.equal(vm.options.handler())
             expect('prop test').to.equal(vm.wrapped())
-            expect('prop test').to.equal(vm.fieldInitProp)
+            // expect('prop test').to.equal(vm.fieldInitProp)
+
 
         })
     }
diff --git a/test/option/provide.ts b/test/option/provide.ts
diff --git a/test/test.ts b/test/test.ts
