debug ts code

demo/.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug TS",
+            "program": "${workspaceFolder}/${relativeFile}",
+            "preLaunchTask": "Doric Build",
+            "sourceMaps": true,
+            "serverReadyAction": {
+                "pattern": "listening on port ([0-9]+)",
+                "uriFormat": "http://localhost:%s",
+                "action": "openExternally"
+            },
+            "outFiles": [
+                "${workspaceFolder}/bundle/**/*.js"
+            ]
+        }
+    ]
+}

demo/.vscode/tasks.json

@@ -0,0 +1,28 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Doric Build",
+            "type": "shell",
+            "command": "doric build",
+            "group": "build",
+            "problemMatcher": []
+        },
+        {
+            "label": "Doric Clean",
+            "type": "shell",
+            "command": "doric clean",
+            "group": "build",
+            "problemMatcher": []
+        },
+        {
+            "label": "Doric Dev",
+            "type": "shell",
+            "command": "doric dev",
+            "group": "build",
+            "problemMatcher": []
+        }
+    ]
+}

demo/debug/Counter.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var doric = require('doric');
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+class CounterView extends doric.ViewHolder {
+    constructor() {
+        super(...arguments);
+        this.number = new doric.Text;
+        this.counter = new doric.Text;
+    }
+    build(root) {
+        const vlayout = new doric.VLayout;
+        vlayout.width = 200;
+        vlayout.height = 200;
+        vlayout.gravity = new doric.Gravity().center();
+        this.number.textSize = 40;
+        this.number.layoutConfig = {
+            alignment: new doric.Gravity().center()
+        };
+        this.counter = new doric.Text;
+        this.counter.text = "点击计数";
+        this.counter.border = {
+            width: 1,
+            color: doric.Color.parse('#000000'),
+        };
+        this.counter.textSize = 20;
+        this.counter.corners = 5;
+        vlayout.space = 20;
+        vlayout.layoutConfig = {
+            alignment: new doric.Gravity().center()
+        };
+        vlayout.border = {
+            width: 1,
+            color: doric.Color.parse("#000000"),
+        };
+        this.counter.shadow = {
+            color: doric.Color.parse("#00ff00"),
+            opacity: 0.5,
+            radius: 20,
+            offsetX: 10,
+            offsetY: 10,
+        };
+        vlayout.shadow = {
+            color: doric.Color.parse("#ffff00"),
+            opacity: 0.5,
+            radius: 20,
+            offsetX: 10,
+            offsetY: 10,
+        };
+        vlayout.corners = 20;
+        vlayout.addChild(this.number);
+        vlayout.addChild(this.counter);
+        // root.bgColor = Color.parse('#00ff00')
+        vlayout.bgColor = doric.Color.parse('#ff00ff');
+        root.addChild(vlayout);
+        const iv = new doric.Image;
+        // iv.width = iv.height = 100
+        iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png";
+        //iv.bgColor = Color.parse('#00ff00')
+        root.addChild(iv);
+    }
+    setNumber(n) {
+        this.number.text = n.toString();
+    }
+    setCounter(v) {
+        this.counter.onClick = v;
+    }
+}
+class CounterVM extends doric.ViewModel {
+    binding(v, model) {
+        v.setNumber(model.count);
+        v.setCounter(() => {
+            this.getModel().count++;
+        });
+    }
+}
+let MyPage = class MyPage extends doric.VMPanel {
+    getVMClass() {
+        return CounterVM;
+    }
+    getModel() {
+        return {
+            count: 0,
+            add: function () {
+                this.count++;
+            },
+        };
+    }
+    getViewHolder() {
+        return new CounterView;
+    }
+    log() {
+        doric.log("Hello.HEGO");
+        doric.logw("Hello.HEGO");
+        doric.loge("Hello.HEGO");
+        context.modal.toast('This is a toast.').then((r) => {
+            doric.loge(r);
+        });
+    }
+};
+__decorate([
+    doric.NativeCall,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], MyPage.prototype, "log", null);
+MyPage = __decorate([
+    Entry
+], MyPage);
+//# sourceMappingURL=Counter.js.map

demo/debug/Snake.js

@@ -0,0 +1,281 @@
+'use strict';
+
+var doric = require('doric');
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Direction;
+(function (Direction) {
+    Direction[Direction["left"] = 0] = "left";
+    Direction[Direction["right"] = 1] = "right";
+    Direction[Direction["up"] = 2] = "up";
+    Direction[Direction["down"] = 3] = "down";
+})(Direction || (Direction = {}));
+var State;
+(function (State) {
+    State[State["idel"] = 0] = "idel";
+    State[State["run"] = 1] = "run";
+    State[State["fail"] = 2] = "fail";
+})(State || (State = {}));
+class SnakeModel {
+    constructor(w, h) {
+        this.state = State.idel;
+        this.direction = Direction.right;
+        this.food = { x: -1, y: -1 };
+        this.head = {
+            x: 0,
+            y: 0,
+        };
+        this.width = w;
+        this.height = h;
+    }
+    refreshFood() {
+        this.food.x = Math.floor(Math.random() * (this.width - 1));
+        this.food.y = Math.floor(Math.random() * (this.height - 1));
+    }
+    get tail() {
+        let node = this.head;
+        while (node.next !== undefined) {
+            node = node.next;
+        }
+        return node;
+    }
+    get score() {
+        let node = this.head;
+        let n = 0;
+        while (node.next !== undefined) {
+            n++;
+            node = node.next;
+        }
+        return n;
+    }
+    forward(node) {
+        switch (this.direction) {
+            case Direction.left:
+                node.x -= 1;
+                break;
+            case Direction.right:
+                node.x += 1;
+                break;
+            case Direction.up:
+                node.y -= 1;
+                break;
+            case Direction.down:
+                node.y += 1;
+                break;
+        }
+    }
+    step() {
+        if (this.state !== State.run) {
+            return;
+        }
+        let tail = this.tail;
+        while (tail.prev != undefined) {
+            tail.x = tail.prev.x;
+            tail.y = tail.prev.y;
+            tail = tail.prev;
+        }
+        this.forward(this.head);
+        if (this.head.x < 0 || this.head.x >= this.width
+            || this.head.y < 0 || this.head.y >= this.height) {
+            //If out of bound
+            doric.loge('out of bound');
+            this.state = State.fail;
+        }
+        else if (this.head.x == this.food.x && this.head.y == this.food.y) {
+            //If eat food
+            let head = { x: this.food.x, y: this.food.y };
+            doric.log('eat food', head);
+            this.forward(head);
+            this.head.prev = head;
+            head.next = this.head;
+            this.head = head;
+            this.refreshFood();
+        }
+        if (this.crashAtSelf()) {
+            //If crash at self
+            doric.loge('crash at self');
+            this.state = State.fail;
+        }
+    }
+    crashAtSelf() {
+        let cur = this.head.next;
+        while (cur !== undefined) {
+            if (cur.x == this.head.x && cur.y == this.head.y) {
+                return true;
+            }
+            cur = cur.next;
+        }
+        return false;
+    }
+    reset() {
+        this.direction = Direction.right;
+        this.state = State.run;
+        this.head.x = 0;
+        this.head.y = 0;
+        this.head.next = undefined;
+        this.refreshFood();
+    }
+}
+class SnakeView extends doric.ViewHolder {
+    constructor() {
+        super(...arguments);
+        this.panel = new doric.Stack;
+        this.start = new doric.Text;
+    }
+    build(root) {
+        root.bgColor = doric.Color.parse('#000000');
+        const vlayout = new doric.VLayout;
+        const title = new doric.Text;
+        title.text = "Snake";
+        title.textSize = 20;
+        title.textColor = doric.Color.parse("#ffffff");
+        title.layoutConfig = {
+            alignment: new doric.Gravity().centerX(),
+            margin: {
+                top: 20
+            },
+        };
+        vlayout.space = 20;
+        vlayout.layoutConfig = {
+            alignment: new doric.Gravity().centerX().top()
+        };
+        this.panel.bgColor = doric.Color.parse('#00ff00');
+        vlayout.addChild(title);
+        vlayout.addChild(this.panel);
+        root.addChild(vlayout);
+        const hlayout = new doric.HLayout;
+        this.start.text = "Start";
+        this.start.textSize = 30;
+        this.start.textColor = doric.Color.parse("#ffffff");
+        hlayout.addChild(this.start);
+        vlayout.addChild(hlayout);
+        this.up = this.buildController("↑");
+        this.down = this.buildController("↓");
+        this.left = this.buildController("←");
+        this.right = this.buildController("→");
+        const controlArea = new doric.VLayout;
+        controlArea.gravity = new doric.Gravity().centerX();
+        controlArea.space = 10;
+        controlArea.layoutConfig = {
+            alignment: new doric.Gravity().centerX()
+        };
+        const line1 = new doric.HLayout;
+        const line2 = new doric.HLayout;
+        line2.space = 10;
+        line1.addChild(this.up);
+        line2.addChild(this.left);
+        line2.addChild(this.down);
+        line2.addChild(this.right);
+        controlArea.addChild(line1);
+        controlArea.addChild(line2);
+        vlayout.addChild(controlArea);
+    }
+    buildController(text) {
+        const ret = new doric.Text;
+        ret.width = ret.height = 50;
+        ret.bgColor = doric.Color.parse('#ffff00');
+        ret.text = text;
+        ret.textSize = 30;
+        ret.textAlignment = new doric.Gravity().center();
+        return ret;
+    }
+}
+class SnakeVM extends doric.ViewModel {
+    constructor() {
+        super(...arguments);
+        this.start = () => {
+            if (this.timerId !== undefined) {
+                clearInterval(this.timerId);
+            }
+            this.getModel().reset();
+            this.timerId = setInterval(() => {
+                this.getModel().step();
+            }, 500);
+        };
+        this.stop = () => {
+            if (this.timerId !== undefined) {
+                clearInterval(this.timerId);
+                this.timerId = undefined;
+            }
+        };
+        this.left = () => {
+            this.getModel().direction = Direction.left;
+        };
+        this.right = () => {
+            this.getModel().direction = Direction.right;
+        };
+        this.up = () => {
+            this.getModel().direction = Direction.up;
+        };
+        this.down = () => {
+            this.getModel().direction = Direction.down;
+        };
+    }
+    binding(v, model) {
+        if (model.state === State.fail) {
+            doric.loge('Game Over');
+            this.stop();
+        }
+        v.start.onClick = this.start;
+        v.panel.width = model.width * 10;
+        v.panel.height = model.height * 10;
+        let node = model.head;
+        let nodes = [];
+        while (node != undefined) {
+            nodes.push(node);
+            node = node.next;
+        }
+        nodes.push(model.food);
+        nodes.forEach((e, index) => {
+            let item = v.panel.children[index];
+            if (item === undefined) {
+                item = new doric.Stack;
+                item.width = item.height = 10;
+                v.panel.addChild(item);
+            }
+            if (index === nodes.length - 1) {
+                item.bgColor = doric.Color.parse('#ffff00');
+            }
+            else {
+                item.bgColor = doric.Color.parse('#ff0000');
+            }
+            item.x = e.x * 10;
+            item.y = e.y * 10;
+        });
+        if (nodes.length < v.panel.children.length) {
+            v.panel.children.length = nodes.length;
+        }
+        if (v.left) {
+            v.left.onClick = this.left;
+        }
+        if (v.right) {
+            v.right.onClick = this.right;
+        }
+        if (v.up) {
+            v.up.onClick = this.up;
+        }
+        if (v.down) {
+            v.down.onClick = this.down;
+        }
+    }
+}
+let SnakePanel = class SnakePanel extends doric.VMPanel {
+    getVMClass() {
+        return SnakeVM;
+    }
+    getModel() {
+        return new SnakeModel(35, 35);
+    }
+    getViewHolder() {
+        return new SnakeView;
+    }
+};
+SnakePanel = __decorate([
+    Entry
+], SnakePanel);
+//# sourceMappingURL=Snake.js.map

demo/debug/doric-lib.js

@@ -0,0 +1,754 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ *  Store color as format AARRGGBB or RRGGBB
+ */
+class Color {
+    constructor(v) {
+        this._value = 0;
+        this._value = v;
+    }
+    static parse(str) {
+        if (!str.startsWith("#")) {
+            throw new Error(`Parse color error with ${str}`);
+        }
+        const val = parseInt(str.substr(1), 16);
+        if (str.length === 7) {
+            return new Color(val | 0xff000000);
+        }
+        else if (str.length === 9) {
+            return new Color(val);
+        }
+        else {
+            throw new Error(`Parse color error with ${str}`);
+        }
+    }
+    static safeParse(str, defVal = Color.TRANSPARENT) {
+        let color = defVal;
+        try {
+            color = Color.parse(str);
+        }
+        catch (e) {
+        }
+        finally {
+            return color;
+        }
+    }
+    toModel() {
+        return this._value;
+    }
+}
+Color.TRANSPARENT = new Color(0);
+(function (GradientOrientation) {
+    /** draw the gradient from the top to the bottom */
+    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
+    /** draw the gradient from the top-right to the bottom-left */
+    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
+    /** draw the gradient from the right to the left */
+    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
+    /** draw the gradient from the bottom-right to the top-left */
+    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
+    /** draw the gradient from the bottom to the top */
+    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
+    /** draw the gradient from the bottom-left to the top-right */
+    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
+    /** draw the gradient from the left to the right */
+    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
+    /** draw the gradient from the top-left to the bottom-right */
+    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
+})(exports.GradientOrientation || (exports.GradientOrientation = {}));
+
+function obj2Model(obj) {
+    if (obj instanceof Array) {
+        return obj.map(e => obj2Model(e));
+    }
+    else if (obj instanceof Object) {
+        if (Reflect.has(obj, 'toModel') && Reflect.get(obj, 'toModel') instanceof Function) {
+            obj = Reflect.apply(Reflect.get(obj, 'toModel'), obj, []);
+            return obj;
+        }
+        else {
+            for (let key in obj) {
+                const val = Reflect.get(obj, key);
+                Reflect.set(obj, key, obj2Model(val));
+            }
+            return obj;
+        }
+    }
+    else {
+        return obj;
+    }
+}
+class Mutable {
+    constructor(v) {
+        this.binders = new Set;
+        this.get = () => {
+            return this.val;
+        };
+        this.set = (v) => {
+            this.val = v;
+            this.binders.forEach(e => {
+                Reflect.apply(e, undefined, [this.val]);
+            });
+        };
+        this.val = v;
+    }
+    bind(binder) {
+        this.binders.add(binder);
+        Reflect.apply(binder, undefined, [this.val]);
+    }
+    static of(v) {
+        return new Mutable(v);
+    }
+}
+
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+let __uniqueId__ = 0;
+function uniqueId(prefix) {
+    return `__${prefix}_${__uniqueId__++}__`;
+}
+
+const SPECIFIED = 1;
+const START = 1 << 1;
+const END = 1 << 2;
+const SHIFT_X = 0;
+const SHIFT_Y = 4;
+const LEFT = (START | SPECIFIED) << SHIFT_X;
+const RIGHT = (END | SPECIFIED) << SHIFT_X;
+const TOP = (START | SPECIFIED) << SHIFT_Y;
+const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
+const CENTER_X = SPECIFIED << SHIFT_X;
+const CENTER_Y = SPECIFIED << SHIFT_Y;
+const CENTER = CENTER_X | CENTER_Y;
+class Gravity {
+    constructor() {
+        this.val = 0;
+    }
+    left() {
+        this.val |= LEFT;
+        return this;
+    }
+    right() {
+        this.val |= RIGHT;
+        return this;
+    }
+    top() {
+        this.val |= TOP;
+        return this;
+    }
+    bottom() {
+        this.val |= BOTTOM;
+        return this;
+    }
+    center() {
+        this.val |= CENTER;
+        return this;
+    }
+    centerX() {
+        this.val |= CENTER_X;
+        return this;
+    }
+    centerY() {
+        this.val |= CENTER_Y;
+        return this;
+    }
+    toModel() {
+        return this.val;
+    }
+}
+
+function toString(message) {
+    if (message instanceof Function) {
+        return message.toString();
+    }
+    else if (message instanceof Object) {
+        try {
+            return JSON.stringify(message);
+        }
+        catch (e) {
+            return message.toString();
+        }
+    }
+    else if (message === undefined) {
+        return "undefined";
+    }
+    else {
+        return message.toString();
+    }
+}
+function log(...args) {
+    let out = "";
+    for (let i = 0; i < arguments.length; i++) {
+        if (i > 0) {
+            out += ',';
+        }
+        out += toString(arguments[i]);
+    }
+    nativeLog('d', out);
+}
+function loge(...message) {
+    let out = "";
+    for (let i = 0; i < arguments.length; i++) {
+        if (i > 0) {
+            out += ',';
+        }
+        out += toString(arguments[i]);
+    }
+    nativeLog('e', out);
+}
+function logw(...message) {
+    let out = "";
+    for (let i = 0; i < arguments.length; i++) {
+        if (i > 0) {
+            out += ',';
+        }
+        out += toString(arguments[i]);
+    }
+    nativeLog('w', out);
+}
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+const MATCH_PARENT = -1;
+const WRAP_CONTENT = -2;
+function Property(target, propKey) {
+    Reflect.defineMetadata(propKey, true, target);
+}
+class View {
+    constructor() {
+        this.width = WRAP_CONTENT;
+        this.height = WRAP_CONTENT;
+        this.x = 0;
+        this.y = 0;
+        this.viewId = uniqueId('ViewId');
+        this.callbacks = new Map;
+        /** Anchor end*/
+        this.__dirty_props__ = {};
+        this.nativeViewModel = {
+            id: this.viewId,
+            type: this.constructor.name,
+            props: this.__dirty_props__,
+        };
+        return new Proxy(this, {
+            get: (target, p, receiver) => {
+                return Reflect.get(target, p, receiver);
+            },
+            set: (target, p, v, receiver) => {
+                const oldV = Reflect.get(target, p, receiver);
+                const ret = Reflect.set(target, p, v, receiver);
+                if (Reflect.getMetadata(p, target) && oldV !== v) {
+                    receiver.onPropertyChanged(p.toString(), oldV, v);
+                }
+                return ret;
+            }
+        });
+    }
+    callback2Id(f) {
+        const id = uniqueId('Function');
+        this.callbacks.set(id, f);
+        return id;
+    }
+    id2Callback(id) {
+        const f = this.callbacks.get(id);
+        return f;
+    }
+    /** Anchor start*/
+    get left() {
+        return this.x;
+    }
+    set left(v) {
+        this.x = v;
+    }
+    get right() {
+        return this.x + this.width;
+    }
+    set right(v) {
+        this.x = v - this.width;
+    }
+    get top() {
+        return this.y;
+    }
+    set top(v) {
+        this.y = v;
+    }
+    get bottom() {
+        return this.y + this.height;
+    }
+    set bottom(v) {
+        this.y = v - this.height;
+    }
+    get centerX() {
+        return this.x + this.width / 2;
+    }
+    get centerY() {
+        return this.y + this.height / 2;
+    }
+    set centerX(v) {
+        this.x = v - this.width / 2;
+    }
+    set centerY(v) {
+        this.y = v - this.height / 2;
+    }
+    onPropertyChanged(propKey, oldV, newV) {
+        if (newV instanceof Function) {
+            newV = this.callback2Id(newV);
+        }
+        else {
+            newV = obj2Model(newV);
+        }
+        this.__dirty_props__[propKey] = newV;
+        if (this.parent instanceof Group) {
+            this.parent.onChildPropertyChanged(this);
+        }
+    }
+    clean() {
+        for (const key in this.__dirty_props__) {
+            if (Reflect.has(this.__dirty_props__, key)) {
+                Reflect.deleteProperty(this.__dirty_props__, key);
+            }
+        }
+    }
+    isDirty() {
+        return Reflect.ownKeys(this.__dirty_props__).length !== 0;
+    }
+    responseCallback(id, ...args) {
+        const f = this.id2Callback(id);
+        if (f instanceof Function) {
+            const argumentsList = [];
+            for (let i = 1; i < arguments.length; i++) {
+                argumentsList.push(arguments[i]);
+            }
+            Reflect.apply(f, this, argumentsList);
+        }
+        else {
+            loge(`Cannot find callback:${id} for ${JSON.stringify(this.toModel())}`);
+        }
+    }
+    toModel() {
+        return this.nativeViewModel;
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], View.prototype, "width", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], View.prototype, "height", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], View.prototype, "x", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], View.prototype, "y", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "bgColor", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "corners", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "border", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "shadow", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], View.prototype, "alpha", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], View.prototype, "hidden", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "viewId", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "padding", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "layoutConfig", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], View.prototype, "onClick", void 0);
+class Group extends View {
+    constructor() {
+        super(...arguments);
+        this.children = new Proxy([], {
+            set: (target, index, value) => {
+                if (index === 'length') {
+                    this.getDirtyChildrenModel().length = value;
+                }
+                else if (typeof index === 'string'
+                    && parseInt(index) >= 0
+                    && value instanceof View) {
+                    value.parent = this;
+                    const childrenModel = this.getDirtyChildrenModel();
+                    childrenModel[parseInt(index)] = value.nativeViewModel;
+                }
+                if (this.parent) {
+                    this.parent.onChildPropertyChanged(this);
+                }
+                return Reflect.set(target, index, value);
+            }
+        });
+    }
+    addChild(view) {
+        this.children.push(view);
+    }
+    clean() {
+        this.children.forEach(e => { e.clean(); });
+        super.clean();
+    }
+    getDirtyChildrenModel() {
+        if (this.__dirty_props__.children === undefined) {
+            this.__dirty_props__.children = [];
+        }
+        return this.__dirty_props__.children;
+    }
+    toModel() {
+        if (this.__dirty_props__.children != undefined) {
+            this.__dirty_props__.children.length = this.children.length;
+        }
+        return super.toModel();
+    }
+    onChildPropertyChanged(child) {
+        this.getDirtyChildrenModel()[this.children.indexOf(child)] = child.nativeViewModel;
+        this.getDirtyChildrenModel().length = this.children.length;
+        if (this.parent) {
+            this.parent.onChildPropertyChanged(this);
+        }
+    }
+    isDirty() {
+        return super.isDirty();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Array)
+], Group.prototype, "children", void 0);
+class Stack extends Group {
+}
+__decorate([
+    Property,
+    __metadata("design:type", Gravity)
+], Stack.prototype, "gravity", void 0);
+class Root extends Stack {
+}
+class LinearLayout extends Group {
+}
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], LinearLayout.prototype, "space", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Gravity)
+], LinearLayout.prototype, "gravity", void 0);
+class VLayout extends LinearLayout {
+}
+class HLayout extends LinearLayout {
+}
+class Text extends View {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Text.prototype, "text", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Text.prototype, "textColor", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], Text.prototype, "textSize", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], Text.prototype, "maxLines", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Gravity)
+], Text.prototype, "textAlignment", void 0);
+class Image extends View {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Image.prototype, "imageUrl", void 0);
+class List extends View {
+}
+class Slide extends View {
+}
+function stack() {
+}
+function vlayout(providers, config) {
+    const vlayout = new VLayout;
+    vlayout.width = config.width;
+    vlayout.height = config.height;
+    if (config.space !== undefined) {
+        vlayout.space = config.space;
+    }
+    providers.forEach(e => {
+        vlayout.addChild(e());
+    });
+    return vlayout;
+}
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+function NativeCall(target, propertyKey, descriptor) {
+    const originVal = descriptor.value;
+    descriptor.value = function () {
+        const ret = Reflect.apply(originVal, this, arguments);
+        return ret;
+    };
+    return descriptor;
+}
+class Panel {
+    constructor() {
+        this.__root__ = new Root;
+    }
+    onCreate() { }
+    onDestroy() { }
+    onShow() { }
+    onHidden() { }
+    getRootView() {
+        return this.__root__;
+    }
+    getInitData() {
+        return this.__data__;
+    }
+    __init__(frame, data) {
+        this.__data__ = data;
+        this.__root__.width = frame.width;
+        this.__root__.height = frame.height;
+        this.build(this.__root__);
+    }
+    __onCreate__() {
+        this.onCreate();
+    }
+    __onDestroy__() {
+        this.onDestroy();
+    }
+    __onShow__() {
+        this.onShow();
+    }
+    __onHidden__() {
+        this.onHidden();
+    }
+    __build__() {
+        this.build(this.__root__);
+    }
+    __response__(viewIds, callbackId) {
+        const v = this.retrospectView(viewIds);
+        if (v === undefined) {
+            loge(`Cannot find view for ${viewIds}`);
+        }
+        const argumentsList = [callbackId];
+        for (let i = 2; i < arguments.length; i++) {
+            argumentsList.push(arguments[i]);
+        }
+        Reflect.apply(v.responseCallback, v, argumentsList);
+    }
+    retrospectView(ids) {
+        return ids.reduce((acc, cur) => {
+            if (acc instanceof Group) {
+                return acc.children.filter(e => e.viewId === cur)[0];
+            }
+            return acc;
+        }, this.__root__);
+    }
+    nativeRender(model) {
+        if (this.context) {
+            this.context.shader.render(model);
+        }
+    }
+    hookBeforeNativeCall() {
+    }
+    hookAfterNativeCall() {
+        if (this.__root__.isDirty()) {
+            const model = this.__root__.toModel();
+            this.nativeRender(model);
+            this.__root__.clean();
+        }
+    }
+}
+__decorate$1([
+    NativeCall,
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", [Object, Object]),
+    __metadata$1("design:returntype", void 0)
+], Panel.prototype, "__init__", null);
+__decorate$1([
+    NativeCall,
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", []),
+    __metadata$1("design:returntype", void 0)
+], Panel.prototype, "__onCreate__", null);
+__decorate$1([
+    NativeCall,
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", []),
+    __metadata$1("design:returntype", void 0)
+], Panel.prototype, "__onDestroy__", null);
+__decorate$1([
+    NativeCall,
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", []),
+    __metadata$1("design:returntype", void 0)
+], Panel.prototype, "__onShow__", null);
+__decorate$1([
+    NativeCall,
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", []),
+    __metadata$1("design:returntype", void 0)
+], Panel.prototype, "__onHidden__", null);
+__decorate$1([
+    NativeCall,
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", []),
+    __metadata$1("design:returntype", void 0)
+], Panel.prototype, "__build__", null);
+__decorate$1([
+    NativeCall,
+    __metadata$1("design:type", Function),
+    __metadata$1("design:paramtypes", [Array, String]),
+    __metadata$1("design:returntype", void 0)
+], Panel.prototype, "__response__", null);
+
+function listen(obj, listener) {
+    return new Proxy(obj, {
+        get: (target, prop, receiver) => {
+            const ret = Reflect.get(target, prop, receiver);
+            if (ret instanceof Function) {
+                return Reflect.get(target, prop, receiver);
+            }
+            else if (ret instanceof Object) {
+                return listen(ret, listener);
+            }
+            else {
+                return ret;
+            }
+        },
+        set: (target, prop, value, receiver) => {
+            const ret = Reflect.set(target, prop, value, receiver);
+            Reflect.apply(listener, undefined, []);
+            return ret;
+        },
+    });
+}
+class ViewHolder {
+}
+class VMPanel extends Panel {
+    getVM() {
+        return this.vm;
+    }
+    build(root) {
+        this.vm = new (this.getVMClass())(this.getModel(), this.getViewHolder());
+        this.vm.build(root);
+    }
+}
+class ViewModel {
+    constructor(obj, v) {
+        this.listeners = [];
+        this.model = listen(obj, () => {
+            this.listeners.forEach(e => {
+                Reflect.apply(e, this.model, [this.model]);
+            });
+        });
+        this.viewHolder = v;
+    }
+    build(root) {
+        this.viewHolder.build(root);
+        this.bind((data) => {
+            this.binding(this.viewHolder, data);
+        });
+    }
+    getModel() {
+        return this.model;
+    }
+    bind(f) {
+        Reflect.apply(f, this.model, [this.model]);
+        this.listeners.push(f);
+    }
+}
+
+exports.BOTTOM = BOTTOM;
+exports.CENTER = CENTER;
+exports.CENTER_X = CENTER_X;
+exports.CENTER_Y = CENTER_Y;
+exports.Color = Color;
+exports.Gravity = Gravity;
+exports.Group = Group;
+exports.HLayout = HLayout;
+exports.Image = Image;
+exports.LEFT = LEFT;
+exports.List = List;
+exports.MATCH_PARENT = MATCH_PARENT;
+exports.Mutable = Mutable;
+exports.NativeCall = NativeCall;
+exports.Panel = Panel;
+exports.Property = Property;
+exports.RIGHT = RIGHT;
+exports.Root = Root;
+exports.Slide = Slide;
+exports.Stack = Stack;
+exports.TOP = TOP;
+exports.Text = Text;
+exports.VLayout = VLayout;
+exports.VMPanel = VMPanel;
+exports.View = View;
+exports.ViewHolder = ViewHolder;
+exports.ViewModel = ViewModel;
+exports.WRAP_CONTENT = WRAP_CONTENT;
+exports.log = log;
+exports.loge = loge;
+exports.logw = logw;
+exports.obj2Model = obj2Model;
+exports.stack = stack;
+exports.vlayout = vlayout;

demo/src/Counter.ts

@@ -1,6 +1,5 @@
 import { vlayout, Image, ViewHolder, VMPanel, ViewModel, Gravity, NativeCall, Text, Color, log, logw, loge, Group, LayoutSpec, } from "doric"
 
-
 interface CountModel {
     count: number
 }
@@ -97,6 +96,7 @@ class CounterVM extends ViewModel<CountModel, CounterView> {
 
 @Entry
 class MyPage extends VMPanel<CountModel, CounterView>{
+<<<<<<< HEAD
 
 
     getViewHolderClass() {
@@ -104,6 +104,9 @@ class MyPage extends VMPanel<CountModel, CounterView>{
     }
 
     getViewModelClass() {
+=======
+    getVMClass() {
+>>>>>>> debug ts code
         return CounterVM
     }
 

js-framework/index.debug.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as doric from './src/runtime/sandbox'
+let global = new Function('return this')()
+global.doric = doric
+const contextId = "DoricDebug"
+global.context = doric.jsObtainContext(contextId)
+global.Entry = doric.jsObtainEntry(contextId)
+console.log('Start Server')
+
+global.injectGlobal = (objName: string, obj: string) => {
+    Reflect.set(global, objName, JSON.parse(obj))
+}
+
+global.sendToNative = () => {
+
+}
+global.receiveFromNative = (funcName, ) => {
+
+}
+export * from './index'

js-framework/package.json

@@ -2,7 +2,7 @@
   "name": "doric",
   "version": "0.1.0",
   "description": "The JS Framework of Doric",
-  "main": "build/index.js",
+  "main": "bundle/doric-vm.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc -p .&& rollup -c",

js-framework/rollup.config.js

@@ -25,4 +25,14 @@ export default [
         ],
         external: ['reflect-metadata']
     },
+    {
+        input: "build/index.debug.js",
+        output: {
+            format: "cjs",
+            file: "bundle/doric-vm.js",
+        },
+        plugins: [
+            resolve({ jsnext: true, main: true }),
+        ]
+    },
 ]

js-framework/src/runtime/sandbox.ts

@@ -21,17 +21,17 @@ import "reflect-metadata"
  * ``` TypeScript
  * // load script in global scope
  * Reflect.apply(
- * function(hego,context,Entry,require){
+ * function(doric,context,Entry,require){
  *  //Script content
  *  REG()
- * },hego.jsObtainContext(id),[
+ * },doric.jsObtainContext(id),[
  * undefined,
- * hego.jsObtainContext(id),
+ * doric.jsObtainContext(id),
- * hego.jsObtainEntry(id),
+ * doric.jsObtainEntry(id),
- * hego.__require__,
+ * doric.__require__,
  * ])
  * // load module in global scope
- * Reflect.apply(hego.jsRegisterModule,this,[
+ * Reflect.apply(doric.jsRegisterModule,this,[
  *  moduleName,
  *  Reflect.apply(function(__module){
  *           (function(module,exports,require){

remote/.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}/index.ts",
+            "preLaunchTask": "tsc: build - tsconfig.json",
+        },
+        {
+            "type": "node",
+            "request": "attach",
+            "name": "Attach",
+            "port": 9229
+        }
+    ]
+}

remote/index.js

@@ -8,13 +8,14 @@ var context = vm.createContext(sandbox)
 wss.on('connection', function connection(ws) {
   ws.on('message', function incoming(message) {
     let messageObject = JSON.parse(message)
-    switch(messageObject.cmd) {
+    switch (messageObject.cmd) {
       case "loadJS":
         let result = vm.runInContext(messageObject.script, sandbox)
-        ws.send(JSON.stringify({cmd: 'loadJS', result: String(result)}))
+        ws.send(JSON.stringify({ cmd: 'loadJS', result: String(result) }))
         break
       case "evaluateJS":
         break
     }
   })
 })
+