a

Author: ruojianll

docs/en/_sidebar.md

@@ -6,7 +6,7 @@
     - [Method](/en/class-component/method/method.md)
     - [Lifecycle hooks](/en/class-component/lifecycle-hook/lifecycle-hook.md)
     - [Component property](/en/class-component/component-property/component-property.md)
-    - [Getter](/en/class-component/getter/getter.md)
+    - [Accessor](/en/class-component/accessor/accessor.md)
     - [Event](/en/class-component/event/event.md)
     - [Reference](/en/class-component/reference/reference.md)
     - [Watcher](/en/class-component/watcher/watcher.md)

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

@@ -0,0 +1,23 @@
+## Usage
+
+Property getters will be tranformed into `{computed:{get:Foo}}`.
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## Writable
+
+Property setters will be tranformed into `{computed:{set:Foo}}`.
+
+[](./code-writable.ts ':include :type=code typescript')
+
+## Vanilla getter
+
+We can define a ES vanilla getter by `@Vanilla`.
+
+[](./code-vanilla-getter.ts ':include :type=code typescript')
+
+## Vanilla setter
+
+We can define a ES vanilla setter by `@Vanilla`.
+
+[](./code-vanilla-setter.ts ':include :type=code typescript')

docs/en/class-component/getter/code-usage.ts renamed to docs/en/class-component/accessor/code-usage.ts

@@ -5,7 +5,7 @@ import { Component, Vue } from 'vue-facing-decorator'
 Vue options API
 {
     computed:{
-        getter(){
+        get(){
             return 'value'
         }
     }

docs/en/class-component/accessor/code-vanilla-getter.ts

@@ -0,0 +1,10 @@
+
+import { Component, Vue, Vanilla } from 'vue-facing-decorator'
+
+@Component
+export default class MyComponent extends Vue {
+    @Vanilla
+    get getter() {
+        return 'value'
+    }
+}

docs/en/class-component/accessor/code-vanilla-setter.ts

@@ -0,0 +1,11 @@
+
+import { Component, Vue, Vanilla } from 'vue-facing-decorator'
+
+@Component
+export default class MyComponent extends Vue {
+    foo = ''
+    @Vanilla
+    set setter(bar: string) {
+        this.foo = bar
+    }
+}

docs/en/class-component/accessor/code-writable.ts

@@ -0,0 +1,21 @@
+
+import { Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    computed:{
+        set(){
+            return 'value'
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    foo = ''
+    set setter(bar: string) {
+        this.foo = bar
+    }
+}

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

@@ -6,7 +6,7 @@
     - [方法](/zh-cn/class-component/method/method.md)
     - [生命周期钩子](/zh-cn/class-component/lifecycle-hook/lifecycle-hook.md)
     - [组件属性](/zh-cn/class-component/component-property/component-property.md)
-    - [访问器](/zh-cn/class-component/getter/getter.md)
+    - [存取器](/zh-cn/class-component/accessor/accessor.md)
     - [事件](/zh-cn/class-component/event/event.md)
     - [引用](/zh-cn/class-component/reference/reference.md)
     - [监视器](/zh-cn/class-component/watcher/watcher.md)

docs/zh-cn/_sidebar.md

@@ -0,0 +1,23 @@
+## 用法
+
+类中的访问器会被转换到vue `{computed:{get:Foo}}`中。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## 可写的
+
+类中的设置器会被转换到vue `{computed:{set:Foo}}`中。
+
+[](./code-writable.ts ':include :type=code typescript')
+
+## 原生访问器
+
+使用`@Vanilla`定义ES原生访问器。
+
+[](./code-vanilla-getter.ts ':include :type=code typescript')
+
+## 原生设置器
+
+使用`@Vanilla`定义原生设置器。
+
+[](./code-vanilla-setter.ts ':include :type=code typescript')

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

@@ -5,7 +5,7 @@ import { Component, Vue } from 'vue-facing-decorator'
 Vue options API
 {
     computed:{
-        getter(){
+        get(){
             return 'value'
         }
     }

docs/zh-cn/class-component/getter/code-usage.ts renamed to docs/zh-cn/class-component/accessor/code-usage.ts

@@ -0,0 +1,10 @@
+
+import { Component, Vue, Vanilla } from 'vue-facing-decorator'
+
+@Component
+export default class MyComponent extends Vue {
+    @Vanilla
+    get getter() {
+        return 'value'
+    }
+}

docs/zh-cn/class-component/accessor/code-vanilla-getter.ts

@@ -0,0 +1,11 @@
+
+import { Component, Vue, Vanilla } from 'vue-facing-decorator'
+
+@Component
+export default class MyComponent extends Vue {
+    foo = ''
+    @Vanilla
+    set setter(bar: string) {
+        this.foo = bar
+    }
+}

docs/zh-cn/class-component/accessor/code-vanilla-setter.ts

@@ -0,0 +1,21 @@
+
+import { Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    computed:{
+        set(){
+            return 'value'
+        }
+    }
+}
+*/
+
+@Component
+export default class MyComponent extends Vue {
+    foo = ''
+    set setter(bar: string) {
+        this.foo = bar
+    }
+}

docs/zh-cn/class-component/accessor/code-writable.ts

@@ -1,6 +1,6 @@
 {
   "name": "vue-facing-decorator",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Vue typescript class and decorator based component.",
   "main": "dist/index.js",
   "keywords": [

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

@@ -9,31 +9,21 @@ import { build as optionProps, PropsConfig } from './option/props'
 import { build as optionInject, InjectConfig } from './option/inject'
 import { build as optionEmit } from './option/emit'
 import { build as optionVModel, VModelConfig } from './option/vmodel'
-export interface OptionBuilder {
-    name?: string
-    data?: Record<string, any>
-    methods?: Record<string, Function>
-    lifecycle?: Record<string, Function>
-    computed?: Record<string, any>
-    watch?: Record<string, WatchConfig>
-    props?: Record<string, PropsConfig>
-    inject?: Record<string, InjectConfig>
-    beforeCreateCallbacks?:Function[]
+import { build as optionAccessor } from './option/accessor'
+import { OptionBuilder } from './optionBuilder'
 
-}
 export interface Cons { new(): any, prototype: any }
 function ComponentOption(cons: Cons, extend?: any) {
     const optionBuilder: OptionBuilder = {}
-    optionVModel(cons,optionBuilder)
+    optionVModel(cons, optionBuilder)
     optionComputed(cons, optionBuilder)//after VModel
     optionWatch(cons, optionBuilder)
     optionProps(cons, optionBuilder)
     optionInject(cons, optionBuilder)
     optionEmit(cons, optionBuilder)
     optionRef(cons, optionBuilder)//after Computed
-    optionMethodsAndLifecycle(cons, optionBuilder)//after Ref
-    
-
+    optionMethodsAndLifecycle(cons, optionBuilder)//after Ref Computed
+    optionAccessor(cons, optionBuilder)
     const raw = {
         data() {
             const optionBuilder: OptionBuilder = {}

package.json

@@ -6,6 +6,7 @@ export { decorator as Prop } from './option/props'
 export { decorator as Inject } from './option/inject'
 export { decorator as Emit } from './option/emit'
 export { decorator as VModel, decorator as Model } from './option/vmodel'
+export { decorator as Vanilla } from './option/vanilla'
 import type {
     ComponentPublicInstance
 } from 'vue'

src/component.ts

@@ -0,0 +1,28 @@
+import { Cons } from '../component'
+import { OptionBuilder,applyAccessors} from '../optionBuilder'
+import { toComponentReverse, obtainSlot } from '../utils'
+
+export function build(cons: Cons, optionBuilder: OptionBuilder) {
+    const slot = obtainSlot(cons.prototype)
+    let vanillaMap = slot.obtainMap('vanilla')
+    const protoArr = toComponentReverse(cons.prototype)
+    const map: Map<string, { get: (() => any) | undefined, set: ((v: any) => any) | undefined }> = new Map
+ 
+    applyAccessors(optionBuilder,(ctx:any)=>{
+        protoArr.forEach(proto => {
+            const deses = Object.getOwnPropertyDescriptors(proto)
+            for (const name in deses) {
+                const des = deses[name]
+                if (des && vanillaMap.has(name)) {
+                    if (typeof des.get === 'function' || typeof des.set === 'function') {
+                        map.set(name, {
+                            set: typeof des.set === 'function' ? des.set.bind(ctx) : undefined,
+                            get: typeof des.get === 'function' ? des.get.bind(ctx) : undefined,
+                        })
+                    }
+                }
+            }
+        })
+        return map
+    })
+}

src/index.ts

@@ -1,17 +1,25 @@
 import { makeObject } from '../utils'
-import { Cons, OptionBuilder } from '../component'
+
+import { Cons } from '../component'
 import { obtainSlot, toComponentReverse, getValidNames } from '../utils'
+import { OptionBuilder } from '../optionBuilder'
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
     optionBuilder.computed ??= {}
     const slot = obtainSlot(cons.prototype)
     let map = slot.obtainMap<Map<string, any>>('computed')
+    let vanillaMap = slot.obtainMap<Map<string, any>>('vanilla')
     const protoArr = toComponentReverse(cons.prototype)
     protoArr.forEach(proto => {
-        getValidNames(proto, (des) => {
-            return typeof des.get === 'function'
+        getValidNames(proto, (des, name) => {
+            return (typeof des.get === 'function' || typeof des.set === 'function') && !vanillaMap.has(name)
         }).forEach(name => {
+
             map.set(name, true)
-            optionBuilder.computed![name] = Object.getOwnPropertyDescriptor(proto, name)!.get!
+            const des = Object.getOwnPropertyDescriptor(proto, name)!
+            optionBuilder.computed![name] = {
+                get: typeof des.get === 'function' ? des.get : undefined,
+                set: typeof des.set === 'function' ? des.set : undefined
+            }
         })
     })
 }

src/option/accessor.ts

@@ -1,5 +1,6 @@
 import { makeObject } from '../utils'
-import { Cons, OptionBuilder } from '../component'
+import { Cons } from '../component'
+import { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, excludeNames, getValidNames } from '../utils'
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
     optionBuilder.data ??= {}

src/option/computed.ts

@@ -1,4 +1,5 @@
-import { Cons, OptionBuilder } from '../component'
+import { Cons } from '../component'
+import { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
 export type EmitConfig = null | string
 export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, key?: string) {

src/option/data.ts

@@ -1,5 +1,6 @@
 
-import { Cons, OptionBuilder } from '../component'
+import { Cons } from '../component'
+import { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
 export interface InjectConfig {
     from?: string | Symbol

src/option/emit.ts

@@ -1,5 +1,6 @@
 import { makeObject, obtainSlot } from '../utils'
-import { Cons, OptionBuilder } from '../component'
+import { Cons } from '../component'
+import { OptionBuilder } from '../optionBuilder'
 import { toComponentReverse, excludeNames, getValidNames } from '../utils'
 export const LifecycleNames = [
     "beforeCreate",

src/option/inject.ts

@@ -1,4 +1,5 @@
-import { Cons, OptionBuilder } from '../component'
+import { Cons } from '../component'
+import { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
 export interface PropsConfig {
     type?: any

src/option/methodsAndLifecycle.ts

@@ -1,4 +1,5 @@
-import { Cons, OptionBuilder } from '../component'
+import { Cons } from '../component'
+import { OptionBuilder, applyAccessors } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
 
 export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, option?: {}) {
@@ -12,19 +13,17 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
     const slot = obtainSlot(cons.prototype)
     const names = slot.obtainMap<Map<string, any>>('ref')!
     if (names) {
-        optionBuilder.beforeCreateCallbacks??=[]
-        optionBuilder.beforeCreateCallbacks.push(function(this:any){
-            const ctx = this
+        applyAccessors(optionBuilder, (ctx: any) => {
+            const data: Map<string, { get: () => any, set: undefined }> = new Map
             names.forEach((value, name) => {
-
-                Object.defineProperty(this,name,{
-                    get(this:any){
+                data.set(name, {
+                    get: function (this: any) {
                         return ctx.$refs[name]
-                    }
+                    },
+                    set: undefined
                 })
-            
             })
+            return data
         })
-
     }
 }

src/option/props.ts

@@ -0,0 +1,7 @@
+import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
+
+export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, option?: {}) {
+    const slot = obtainSlot(proto)
+    let map = slot.obtainMap<Map<string, any>>('vanilla')
+    map.set(name, true)
+})

src/option/ref.ts

@@ -1,4 +1,5 @@
-import { Cons, OptionBuilder } from '../component'
+import { Cons } from '../component'
+import { OptionBuilder } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
 import { decorator as PropsDecorator, PropsConfig } from './props'
 export type VModelConfig = PropsConfig & {