basic support for ref, computed and class inherite

Author: ruojianll

readme.md

@@ -5,15 +5,40 @@ This repo is not released yet. Welcome to suggest and contribute. Message me on
 # What now
 
 ```typescript
-import { Component ,Base} from "ThisRepo";
+import { Component, Ref, Base } from "ThisRepo";
+
+//super class
+class Sup extends Base {
+  //reactivity super property
+  supProp = "supProp";
+  //super method
+  supMethod() {}
+  //super getter
+  get supGetter() {
+    return "supFoo";
+  }
+}
+
+//component class
 @Component
-export default class MyComponent extends Base{
-  prop = "p";//a property
-  meth() {//a method
-    this.$forceUpdate()//call vue api
+export default class Comp extends Sup {
+  //create a ref
+  @Ref
+  ref!: HTMLDivElement;
+  //reactivity property
+  prop = "prop";
+  //getter
+  get getter() {
+    return "foo";
   }
-  mounted(){//vue lifecycle hook
-    console.log('foo')
+  //method
+  method() {
+    //call vue api
+    this.$forceUpdate();
+  }
+  mounted() {
+    //vue lifecycle
+    console.log(this.ref, this.getter, this.prop, this.supProp, this.supGetter);
   }
 }
 ```
@@ -23,18 +48,31 @@ is equal to
 ```typescript
 import { defineComponent} from "vue";
 export default defineComponent({
-    data(){
-        return {
-            prop:'p'
-        }
+  data() {
+    return {
+      supProp: "supProp",
+      prop: "prop",
+    };
+  },
+  methods: {
+    supMethod() {},
+    method() {
+      this.$forceUpdate();
+    },
+  },
+  computed: {
+    supGetter() {
+      return "supGetter";
+    },
+    getter() {
+      return "getter";
     },
-    methods:{
-        meth(){
-            this.$forceUpdate()
-        }
+    ref() {
+      this.$refs["ref"];
     },
-    mounted() {
-        console.log('foo')
-    }
-})
+  },
+  mounted() {
+    console.log(this.ref, this.getter, this.prop, this.supProp, this.supGetter);
+  },
+});
 ```

src/component.ts

@@ -1,60 +1,30 @@
 import { defineComponent } from 'vue';
-import { obtainSlot } from './utils';
-
-const LifecycleNames = [
-    "beforeCreate",
-    "created",
-    "beforeMount",
-    "mounted",
-    "beforeUpdate",
-    "updated",
-    "activated",
-    "deactivated",
-    "beforeDestroy",
-    "beforeUnmount",
-    "destroyed",
-    "unmounted",
-    "renderTracked",
-    "renderTriggered",
-    "errorCaptured"
-]
-
-
-function makeObject(names: string[], obj: any) {
-    return names.reduce<Record<string, any>>((pv, cv) => {
-        pv[cv] = obj[cv]
-        return pv
-    }, {})
+import { build as optionComputed } from './option/computed'
+import { build as optionData } from './option/data'
+import { build as optionMethodsAndLifecycle } from './option/methodsAndLifecycle'
+import { build as optionRef } from './option/ref'
+export interface OptionBuilder {
+    data?: Record<string, any>
+    methods?: Record<string, Function>
+    lifecycle?: Record<string, Function>
+    computed?: Record<string, any>
 }
-export function Component(cons: { new(): any, prototype: any }) {
-    const slot = obtainSlot(cons.prototype)
-    const sample = new cons
-    const proto = cons.prototype
-    const LifecycleFunctions:Record<string,Function>={}
-    const methodNames = Object.getOwnPropertyNames(proto).filter(name => {
-        if (name === 'constructor') {
-            return false
-        }
-        if (typeof proto[name] === 'function') {
-            if(LifecycleNames.includes(name)){
-                LifecycleFunctions[name]=proto[name]
-                return false
-            }
-
-            return true
-        }
-    })
-
-    const dataNames = Object.getOwnPropertyNames(sample)
-
-    const def = defineComponent({
+export interface Cons { new(): any, prototype: any }
+export function Component(cons: Cons) {
+    const optionBuilder: OptionBuilder = {}
+    optionComputed(cons,optionBuilder)
+    optionMethodsAndLifecycle(cons, optionBuilder)
+    optionRef(cons, optionBuilder)
+    const raw = {
         data() {
-            return makeObject(dataNames, sample)
+            const optionBuilder: OptionBuilder = {}
+            optionData(cons, optionBuilder)
+            return optionBuilder.data ?? {}
         },
-        methods: makeObject(methodNames, proto),
-        ...LifecycleFunctions
-    })
+        methods: optionBuilder.methods,
+        computed: optionBuilder.computed,
+        ...optionBuilder.lifecycle
+    }
+    const def = defineComponent(raw)
     return def as any
-
-
 }

src/index.ts

@@ -1,5 +1,6 @@
 
 export { Component } from './component'
+export { decorator as Ref } from './option/ref'
 import {
     ComponentInternalInstance,
     ComponentPublicInstance,
@@ -50,7 +51,7 @@ export class Base {
     beforeCreate?(): void;
     created?(): void;
     beforeMount?(): void;
-    mounted?():void;
+    mounted?(): void;
     beforeUpdate?(): void;
     updated?(): void;
     activated?(): void;

src/option/computed.ts

@@ -0,0 +1,18 @@
+import { makeObject } from '../utils'
+import { Cons, OptionBuilder } from '../component'
+import { obtainSlot, excludeNames, toBaseReverse, getValidNames } from '../utils'
+export function build(cons: Cons, optionBuilder: OptionBuilder) {
+    optionBuilder.computed ??= {}
+    const slot = obtainSlot(cons.prototype)
+    const set: Set<string> = new Set
+    slot.names.set('computed', set)
+    const protoArr = toBaseReverse(cons.prototype)
+    protoArr.forEach(proto => {
+        getValidNames(proto, (des) => {
+            return typeof des.get === 'function'
+        }).forEach(name => {
+            set.add(name)
+            optionBuilder.computed![name] = Object.getOwnPropertyDescriptor(proto, name)!.get!
+        })
+    })
+}

src/option/data.ts

@@ -0,0 +1,15 @@
+import { makeObject } from '../utils'
+import { Cons, OptionBuilder } from '../component'
+import { obtainSlot, excludeNames, getValidNames } from '../utils'
+export function build(cons: Cons, optionBuilder: OptionBuilder) {
+    optionBuilder.data ??= {}
+    const sample = new cons
+
+    let names = getValidNames(sample, (des) => {
+        return !!des.enumerable
+    })
+
+    const slot = obtainSlot(cons.prototype)
+    names = excludeNames(names, slot)
+    Object.assign(optionBuilder.data, makeObject(names, sample))
+}

src/option/methodsAndLifecycle.ts

@@ -0,0 +1,53 @@
+import { makeObject, obtainSlot } from '../utils'
+import { Cons, OptionBuilder } from '../component'
+import { toBaseReverse, excludeNames, getValidNames } from '../utils'
+const LifecycleNames = [
+    "beforeCreate",
+    "created",
+    "beforeMount",
+    "mounted",
+    "beforeUpdate",
+    "updated",
+    "activated",
+    "deactivated",
+    "beforeDestroy",
+    "beforeUnmount",
+    "destroyed",
+    "unmounted",
+    "renderTracked",
+    "renderTriggered",
+    "errorCaptured"
+]
+
+export function build(cons: Cons, optionBuilder: OptionBuilder) {
+    const slot = obtainSlot(cons.prototype)
+    const protoArr = toBaseReverse(cons.prototype).reverse()
+    optionBuilder.lifecycle ??= {}
+    optionBuilder.methods ??= {}
+    const LifecycleFunctions: Record<string, Function> = {}
+    const MethodFunctions: Record<string, Function> = {}
+    protoArr.forEach(proto => {
+        excludeNames(getValidNames(proto, (des, name) => {
+            if (name === 'constructor') {
+                return false
+            }
+            if (typeof des.value === 'function') {
+                return true
+            }
+            return false
+        }), slot).forEach(name => {
+            if (LifecycleNames.includes(name)) {
+                LifecycleFunctions[name] = proto[name]
+            }
+            else {
+                MethodFunctions[name] = proto[name]
+            }
+        })
+
+
+    })
+
+    Object.assign(optionBuilder.methods, MethodFunctions)
+    Object.assign(optionBuilder.lifecycle, LifecycleFunctions)
+
+}

src/option/ref.ts

@@ -0,0 +1,20 @@
+import { Cons, OptionBuilder } from '../component'
+import { obtainSlot } from '../utils'
+export function decorator(cons: any, name: string) {
+    const slot = obtainSlot(cons)
+    const set: Set<string> = new Set
+    slot.names.set('ref', set)
+    set.add(name)
+}
+
+export function build(cons: Cons, optionBuilder: OptionBuilder) {
+    optionBuilder.computed ??= {}
+    const slot = obtainSlot(cons.prototype)
+    const names = slot.names.get('ref')!
+    names.forEach(name => {
+        optionBuilder.computed![name] = function (this: any) {
+            return this.$refs[name]
+        }
+    })
+
+}

src/utils.ts

@@ -1,13 +1,19 @@
+import { Base } from './index'
 const SlotSymbol = Symbol('vue-facing-decorator-slot')
 class Slot {
-    
+    names: Map<string, Set<string>> = new Map
 }
 
 export function makeSlot(obj: any): Slot {
     if (obj[SlotSymbol]) {
         throw ''
     }
-    return obj[SlotSymbol] = new Slot
+    const slot = new Slot
+    Object.defineProperty(obj, SlotSymbol, {
+        enumerable: false,
+        value: slot
+    })
+    return slot
 }
 export function getSlot(obj: any): Slot | undefined {
     return obj[SlotSymbol]
@@ -21,4 +27,37 @@ export function obtainSlot(obj: any): Slot {
     return makeSlot(obj)
 
 
+}
+
+export function makeObject(names: string[], obj: any) {
+    return names.reduce<Record<string, any>>((pv, cv) => {
+        pv[cv] = obj[cv]
+        return pv
+    }, {})
+}
+
+export function toBaseReverse(obj: any) {
+    const arr: any[] = []
+    let curr = obj
+    while (curr.constructor !== Base) {
+        arr.push(curr)
+        curr = Object.getPrototypeOf(curr)
+    }
+    return arr
+}
+
+export function excludeNames(names: string[], slot: Slot) {
+    return names.filter(name => {
+        for (const set of slot.names.values()) {
+            if (set.has(name)) {
+                return false
+            }
+        }
+        return true
+    })
+}
+
+export function getValidNames(obj: any, filter: (des: PropertyDescriptor,name:string) => boolean) {
+    const descriptors = Object.getOwnPropertyDescriptors(obj)
+    return Object.keys(descriptors).filter(name => filter(descriptors[name],name))
 }