js:pass the es5 runtime

doric-js/bundle/doric-lib.js

@@ -770,7 +770,7 @@ class Panel {
         }, undefined);
     }
     nativeRender(model) {
-        this.context.shader.render(model);
+        this.context.callNative("shader", "render", model);
     }
     hookBeforeNativeCall() {
         if (Environment.platform !== 'web') {

doric-js/bundle/doric-vm.js

@@ -2229,7 +2229,7 @@ class Panel {
         }, undefined);
     }
     nativeRender(model) {
-        this.context.shader.render(model);
+        this.context.callNative("shader", "render", model);
     }
     hookBeforeNativeCall() {
         if (Environment.platform !== 'web') {

doric-js/index.d.ts

@@ -9,7 +9,6 @@ declare module 'doric' {
     export * from 'doric/lib/src/native/index.native';
     export * from "doric/lib/src/util/index.util";
     export * from "doric/lib/src/pattern/index.pattern";
-    export * from 'doric/lib/src/ui/view';
 }
 
 declare module 'doric/lib/src/runtime/global' {

doric-js/index.es5.ts

@@ -1,21 +0,0 @@
-/*
- * 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.
- */
-export * from './src/runtime/global'
-export * from './src/ui/index.ui.es5'
-export * from "./src/widget/index.widget"
-export * from './src/native/index.native'
-export * from "./src/util/index.util"
-export * from "./src/pattern/index.pattern"

doric-js/lib/src/ui/animation.d.ts

@@ -82,32 +82,43 @@ export declare class ScaleAnimation extends Animation {
     private scaleXChangeable;
     private scaleYChangeable;
     constructor();
-    fromScaleX: number;
+    set fromScaleX(v: number);
-    toScaleX: number;
+    get fromScaleX(): number;
-    fromScaleY: number;
+    set toScaleX(v: number);
-    toScaleY: number;
+    get toScaleX(): number;
+    set fromScaleY(v: number);
+    get fromScaleY(): number;
+    set toScaleY(v: number);
+    get toScaleY(): number;
 }
 export declare class TranslationAnimation extends Animation {
     private translationXChangeable;
     private translationYChangeable;
     constructor();
-    fromTranslationX: number;
+    set fromTranslationX(v: number);
-    toTranslationX: number;
+    get fromTranslationX(): number;
-    fromTranslationY: number;
+    set toTranslationX(v: number);
-    toTranslationY: number;
+    get toTranslationX(): number;
+    set fromTranslationY(v: number);
+    get fromTranslationY(): number;
+    set toTranslationY(v: number);
+    get toTranslationY(): number;
 }
 export declare class RotationAnimation extends Animation {
     private rotationChaneable;
     constructor();
-    fromRotation: number;
+    set fromRotation(v: number);
-    toRotation: number;
+    get fromRotation(): number;
+    set toRotation(v: number);
+    get toRotation(): number;
 }
 export declare class AnimationSet implements IAnimation {
     private animations;
     _duration: number;
     delay?: number;
     addAnimation(anim: IAnimation): void;
-    duration: number;
+    get duration(): number;
+    set duration(v: number);
     toModel(): {
         animations: Model;
         delay: number | undefined;

doric-js/lib/src/ui/panel.js

@@ -139,7 +139,7 @@ export class Panel {
         }, undefined);
     }
     nativeRender(model) {
-        this.context.shader.render(model);
+        this.context.callNative("shader", "render", model);
     }
     hookBeforeNativeCall() {
         if (Environment.platform !== 'web') {

doric-js/lib/src/ui/view.d.ts

@@ -104,15 +104,21 @@ export declare abstract class View implements Modeling, IView {
     private id2Callback;
     constructor();
     /** Anchor start*/
-    left: number;
+    get left(): number;
-    right: number;
+    set left(v: number);
-    top: number;
+    get right(): number;
-    bottom: number;
+    set right(v: number);
-    centerX: number;
+    get top(): number;
-    centerY: number;
+    set top(v: number);
+    get bottom(): number;
+    set bottom(v: number);
+    get centerX(): number;
+    get centerY(): number;
+    set centerX(v: number);
+    set centerY(v: number);
     /** Anchor end*/
     private __dirty_props__;
-    readonly dirtyProps: {
+    get dirtyProps(): {
         [index: string]: Model;
     };
     nativeViewModel: NativeViewModel;

doric-js/package.json

@@ -6,7 +6,7 @@
   "types": "index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc -p tsconfig.es5.json && tsc -d -p . && rollup -c && dts-bundle --configJson dts-bundle.json",
+    "build": "tsc -p tsconfig.es5.json && mv -f lib-es5/src/ui/view.es5.js lib-es5/src/ui/view.js && tsc -d -p . && rollup -c && dts-bundle --configJson dts-bundle.json",
     "dev": "tsc -w -p . & rollup -c -w",
     "clean": "rm -rf lib && rm -rf lib-es5 &&  rm -rf bundle",
     "prepublish": "npm run build"
@@ -40,4 +40,4 @@
     "@rollup/plugin-buble": "^0.21.0",
     "@rollup/plugin-commonjs": "^11.0.1"
   }
-}
+}

doric-js/rollup.config.js

@@ -49,41 +49,41 @@ export default [
         }
     },
 
-    // {
+    {
-    //     input: "lib-es5/index.runtime.es5.js",
+        input: "lib-es5/index.runtime.es5.js",
-    //     output: {
+        output: {
-    //         name: "doric",
+            name: "doric",
-    //         format: "iife",
+            format: "iife",
-    //         file: "bundle/doric-sandbox.es5.js",
+            file: "bundle/doric-sandbox.es5.js",
-    //     },
+        },
-    //     plugins: [
+        plugins: [
-    //         resolve({ mainFields: ["jsnext"] }),
+            resolve({ mainFields: ["jsnext"] }),
-    //         commonjs(),
+            commonjs(),
-    //         buble({
+            buble({
-    //             transforms: { dangerousForOf: true }
+                transforms: { dangerousForOf: true }
-    //         }),
+            }),
-    //     ],
+        ],
-    //     onwarn: function (warning) {
+        onwarn: function (warning) {
-    //         if (warning.code === 'THIS_IS_UNDEFINED') { return; }
+            if (warning.code === 'THIS_IS_UNDEFINED') { return; }
-    //         console.warn(warning.message);
+            console.warn(warning.message);
-    //     }
+        }
-    // },
+    },
-    // {
+    {
-    //     input: "lib-es5/index.es5.js",
+        input: "lib-es5/index.js",
-    //     output: {
+        output: {
-    //         format: "cjs",
+            format: "cjs",
-    //         file: "bundle/doric-lib.es5.js",
+            file: "bundle/doric-lib.es5.js",
-    //     },
+        },
-    //     plugins: [
+        plugins: [
-    //         resolve({ mainFields: ["jsnext"] }),
+            resolve({ mainFields: ["jsnext"] }),
-    //         buble({
+            buble({
-    //             transforms: { dangerousForOf: true }
+                transforms: { dangerousForOf: true }
-    //         }),
+            }),
-    //     ],
+        ],
-    //     external: ['reflect-metadata'],
+        external: ['reflect-metadata'],
-    //     onwarn: function (warning) {
+        onwarn: function (warning) {
-    //         if (warning.code === 'THIS_IS_UNDEFINED') { return; }
+            if (warning.code === 'THIS_IS_UNDEFINED') { return; }
-    //         console.warn(warning.message);
+            console.warn(warning.message);
-    //     }
+        }
-    // },
+    },
 ]

doric-js/src/runtime/sandbox.es5.ts

@@ -132,33 +132,6 @@ export class Context {
 
     constructor(id: string) {
         this.id = id
-        return new Proxy(this, {
-            get: (target, p: any) => {
-                if (Reflect.has(target, p)) {
-                    return Reflect.get(target, p)
-                } else {
-                    const namespace = p
-                    return new Proxy({}, {
-                        get: (target, p: any) => {
-                            if (Reflect.has(target, p)) {
-                                return Reflect.get(target, p)
-                            } else {
-                                const context = this
-                                return function () {
-                                    const args = []
-                                    args.push(namespace)
-                                    args.push(p)
-                                    for (let arg of arguments) {
-                                        args.push(arg)
-                                    }
-                                    return Reflect.apply(context.callNative, context, args)
-                                }
-                            }
-                        }
-                    })
-                }
-            }
-        })
     }
     callNative(namespace: string, method: string, args?: any): Promise<any> {
         const callbackId = uniqueId('callback')

doric-js/src/ui/index.ui.es5.ts

@@ -1,18 +0,0 @@
-/*
- * 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.
- */
-export * from './view.es5'
-export * from './panel'
-export * from './animation'

doric-js/src/ui/panel.ts

@@ -43,7 +43,7 @@ export abstract class Panel {
 
     private __data__?: object
     private __root__ = new Root
-    private headviews: Map<string,  Map<string, View>> = new Map
+    private headviews: Map<string, Map<string, View>> = new Map
 
     addHeadView(type: string, v: View) {
         let map = this.headviews.get(type)
@@ -157,7 +157,7 @@ export abstract class Panel {
     }
 
     private nativeRender(model: Model) {
-        this.context.shader.render(model)
+        (this.context as any).callNative("shader", "render", model)
     }
 
     private hookBeforeNativeCall() {

doric-js/src/ui/view.es5.ts

@@ -21,8 +21,19 @@ import { BridgeContext } from "../runtime/global";
 import { LayoutConfig } from '../util/layoutconfig'
 import { IAnimation } from "./animation";
 
-export function Property(target: Object, propKey: string) {
+export function Property(target: View, propKey: string) {
-    Reflect.defineMetadata(propKey, true, target)
+    Object.defineProperty(target, propKey, {
+        get: function () {
+            return Reflect.get(this, `__prop__${propKey}`, this)
+        },
+        set: function (v) {
+            const oldV = Reflect.get(this, `__prop__${propKey}`, this)
+            Reflect.set(this, `__prop__${propKey}`, v, this)
+            if (oldV !== v) {
+                Reflect.apply(this.onPropertyChanged, this, [propKey, oldV, v])
+            }
+        },
+    })
 }
 
 export interface IView {
@@ -79,6 +90,8 @@ export type NativeViewModel = {
 }
 
 export abstract class View implements Modeling, IView {
+    private __dirty_props__!: { [index: string]: Model | undefined }
+
     @Property
     width: number = 0
 
@@ -128,9 +141,11 @@ export abstract class View implements Modeling, IView {
 
     superview?: Superview
 
-    callbacks: Map<String, Function> = new Map
+    callbacks!: Map<String, Function>
-
     private callback2Id(f: Function) {
+        if (this.callbacks === undefined) {
+            this.callbacks = new Map
+        }
         const id = uniqueId('Function')
         this.callbacks.set(id, f)
         return id
@@ -144,21 +159,6 @@ export abstract class View implements Modeling, IView {
         return f
     }
 
-    constructor() {
-        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
-            }
-        })
-    }
     /** Anchor start*/
     get left() {
         return this.x
@@ -207,7 +207,6 @@ export abstract class View implements Modeling, IView {
     }
     /** Anchor end*/
 
-    private __dirty_props__: { [index: string]: Model | undefined } = {}
 
     get dirtyProps() {
         return this.__dirty_props__
@@ -225,6 +224,9 @@ export abstract class View implements Modeling, IView {
         } else {
             newV = obj2Model(newV)
         }
+        if (this.__dirty_props__ === undefined) {
+            this.__dirty_props__ = {}
+        }
         this.__dirty_props__[propKey] = newV
     }
 
@@ -388,14 +390,7 @@ export abstract class Superview extends View {
 
 export abstract class Group extends Superview {
 
-    readonly children: View[] = new Proxy([], {
+    readonly children: View[] = []
-        set: (target, index, value) => {
-            const ret = Reflect.set(target, index, value)
-            // Let getDirty return true
-            this.dirtyProps.children = this.children.map(e => e.viewId)
-            return ret
-        }
-    })
 
     allSubviews() {
         return this.children
@@ -403,6 +398,7 @@ export abstract class Group extends Superview {
 
     addChild(view: View) {
         this.children.push(view)
+        this.dirtyProps.children = this.children.map(e => e.viewId)
     }
 }