add view idenitify

js-framework/index.ts

@@ -1,12 +1,11 @@
 import { Text, Alignment, VLayout, Gravity } from "./src/ui/view";
 import { Color } from "./src/util/color";
-import { Page, Registor } from "./src/ui/page";
+import { Panel, Registor } from "./src/ui/panel";
 
 export * from "./src/ui/view"
-export * from "./src/ui/page"
+export * from "./src/ui/panel"
 export * from "./src/util/color"
 
-
 const v = new Text
 v.width = 20
 v.height = 30
@@ -20,10 +19,11 @@ console.log(v.toModel())
 
 const layout = new VLayout
 layout.space = 10
+console.log(layout.viewId)
 console.log(layout.toModel())
 
-@Registor
-class MyPage extends Page {
+// @Registor
+class MyPage extends Panel {
     build(): import("./src/ui/view").View {
         throw new Error("Method not implemented.");
     }

js-framework/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "tsc -p .&& node ./build/index.js",
+    "dev": "tsc -p .&& rollup -c && node ./bundle/bundle.js",
     "build": "tsc -p . && rollup -c "
   },
   "repository": {
@@ -25,4 +25,4 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "tslib": "^1.10.0"
   }
-}
+}

js-framework/rollup.config.js

@@ -14,7 +14,7 @@ export default [
         sourceMap: true,
         plugins: [
             resolve({ jsnext: true, main: true }),
-            // commonjs()
+            commonjs()
         ]
     },
     {

js-framework/src/mock/driver.ts

@@ -1,12 +1,12 @@
-import { Page } from '../ui/page'
+import { Panel } from '../ui/panel'
 import { View } from '../ui/view'
 
 export interface Driver {
     /**
      * Create and destory page
      */
-    createPage(): Page
-    destoryPage(): Page
+    createPage(): Panel
+    destoryPage(): Panel
 
     /**
      * Page lifecycle
@@ -20,4 +20,9 @@ export interface Driver {
      * Page render
      */
     dispatchBuild(): View
+}
+
+export interface Responser {
+    constructor(): void
+    respond(action: string, extra: any): void
 }

js-framework/src/ui/panel.ts

@@ -10,11 +10,11 @@ export function Registor<T extends { new(...args: any[]): {} }>(constructor: T)
 }
 
 
-export abstract class Page {
-    onCreate(): void { }
-    onDestory(): void { }
-    onShow(): void { }
-    onHidden(): void { }
+export abstract class Panel {
+    onCreate() { }
+    onDestory() { }
+    onShow() { }
+    onHidden() { }
 
     abstract build(): View
 
@@ -22,15 +22,16 @@ export abstract class Page {
     /**
      * Native Call
      */
-    private __onCreate__(): void {
+    private __onCreate__() {
+        Reflect.defineMetadata(Symbol.for("context"), context, Reflect.getPrototypeOf(context))
         this.onCreate()
     }
 
-    private __onDestory__(): void {
+    private __onDestory__() {
         this.onDestory()
     }
 
-    private __onShow__(): void {
+    private __onShow__() {
         this.onShow()
     }
 
@@ -41,4 +42,8 @@ export abstract class Page {
     private __build__(): View {
         return this.build()
     }
+
+    private __responed__(viewId: string, action: string, args: any) {
+
+    }
 }

js-framework/src/ui/view.ts

@@ -1,6 +1,7 @@
 import { Color, GradientColor } from "../util/color"
 import { Modeling, Model } from "../util/types";
 import "reflect-metadata"
+import { uniqueId } from "../util/uniqueId";
 
 export function Property(target: Object, propKey: string) {
     Reflect.defineMetadata(propKey, true, target)
@@ -33,6 +34,13 @@ export abstract class View implements Modeling {
 
     @Property
     alpha?: number
+
+    @Property
+    hidden?: boolean
+
+    @Property
+    viewId = uniqueId('ViewId')
+
     constructor() {
         return new Proxy(this, {
             get: (target, p) => {
@@ -92,7 +100,11 @@ export abstract class View implements Modeling {
     }
 
     toModel() {
-        return this.__dirty_props__ || {}
+        return {
+            id: this.viewId,
+            type: this.constructor.name,
+            props: this.__dirty_props__,
+        }
     }
 
     @Property