view build flow

js-framework/demo.ts

@@ -1,4 +1,4 @@
-import { Text, Alignment, Color, VLayout, Registor, Panel, log, logw, loge } from "./index"
+import { Text, Alignment, Color, VLayout, Link, Panel, log, logw, loge } from "./index"
 
 const v = new Text
 v.width = 20
@@ -30,7 +30,7 @@ setTimeout(() => {
     clearInterval(timerId)
 }, 5000)
 
-@Registor(context)
+@Link(context)
 export class MyPage extends Panel {
     build() {
         return layout

js-framework/package-lock.json

@@ -1,8 +1,7 @@
 {
-  "name": "hego-js-framework",
+  "name": "doric-js-framework",
   "version": "0.1.0",
   "lockfileVersion": 1,
-  "requires": true,
   "dependencies": {
     "@types/estree": {
       "version": "0.0.39",

js-framework/src/ui/panel.ts

@@ -1,6 +1,8 @@
-import { View } from "./view";
+import { } from './../runtime/global';
+import { View, Stack, Group } from "./view";
+import { log } from 'util';
 
-export function Registor(context: any) {
+export function Link(context: any) {
     return <T extends { new(...args: any[]): {} }>(constructor: T) => {
         const ret = class extends constructor {
             context = context
@@ -10,41 +12,91 @@ export function Registor(context: any) {
     }
 }
 
+export function NativeCall(target: Panel, propertyKey: string, descriptor: PropertyDescriptor) {
+    const originVal = descriptor.value
+    descriptor.value = function () {
+        const args = []
+        for (let index in arguments) {
+            args.push(arguments[index]);
+        }
+        Reflect.apply(Reflect.get(target, '__hookBeforeNativeCall__'), this, [])
+        const ret = Reflect.apply(originVal, this, args)
+        Reflect.apply(Reflect.get(target, '__hookAfterNativeCall__'), this, [])
+        return ret
+    }
+    return descriptor
+}
+
+type Frame = { width: number, height: number }
 
 export abstract class Panel {
+
     onCreate() { }
     onDestory() { }
     onShow() { }
     onHidden() { }
 
-    abstract build(): View
+    abstract build(rootView: Group): void
 
+    private __data__: any
+    private __rootView__: Group = new Stack
 
-    /**
-     * Native Call
-     */
+    getRootView() {
+        return this.__rootView__
+    }
+    getInitData() {
+        return this.__data__
+    }
+
+    @NativeCall
+    private __init__(frame: Frame, data: any) {
+        this.__data__ = data
+        this.__rootView__.width = frame.width
+        this.__rootView__.height = frame.height
+        this.build(this.__rootView__)
+    }
+
+    @NativeCall
     private __onCreate__() {
-        Reflect.defineMetadata(Symbol.for("context"), context, Reflect.getPrototypeOf(context))
         this.onCreate()
     }
 
+    @NativeCall
     private __onDestory__() {
         this.onDestory()
     }
 
+    @NativeCall
     private __onShow__() {
         this.onShow()
     }
 
+    @NativeCall
     private __onHidden__(): void {
         this.onHidden()
     }
 
-    private __build__(): View {
-        return this.build()
+    @NativeCall
+    private __build__() {
+        this.build(this.__rootView__)
     }
 
+    @NativeCall
     private __responedCallback__(viewId: string, callbackId: string) {
 
     }
+
+    private __hookBeforeNativeCall__() {
+        log('__hookBeforeNativeCall__')
+    }
+
+    private __hookAfterNativeCall__() {
+        log('__hookAfterNativeCall__')
+        if (this.__rootView__.isDirty()) {
+            const model = this.__rootView__.toModel()
+            log('needRefresh:' + JSON.stringify(model))
+            this.__rootView__.clean()
+        }
+    }
+
 }

js-framework/src/ui/view.ts

@@ -125,7 +125,9 @@ export abstract class View implements Modeling {
             }
         }
     }
-
+    isDirty() {
+        return Reflect.ownKeys(this.__dirty_props__).length === 0
+    }
     responseCallback(id: string) {
         const f = this.id2Callback(id)
         if (f instanceof Function) {