feat:complete the implement of JSX

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

@@ -153,10 +153,14 @@ export declare abstract class Superview extends View {
     clean(): void;
     toModel(): NativeViewModel;
 }
-export declare abstract class Group extends Superview {
+export declare type ViewArray = View[];
+export declare type ViewFragment = View | ViewArray;
+export declare abstract class Group extends Superview implements JSX.ElementChildrenAttribute {
     readonly children: View[];
     allSubviews(): View[];
     addChild(view: View): void;
     removeChild(view: View): void;
     removeAllChildren(): void;
+    private addInnerElement;
+    set innerElement(e: View | ViewFragment | ViewFragment[] | undefined | null);
 }

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

@@ -443,4 +443,18 @@ export class Group extends Superview {
     removeAllChildren() {
         this.children.length = 0;
     }
+    addInnerElement(e) {
+        if (e instanceof Array) {
+            e.forEach(e => this.addInnerElement(e));
+        }
+        else if (e instanceof View) {
+            this.addChild(e);
+        }
+        else {
+            loge(`Not allowed to add ${typeof e}`);
+        }
+    }
+    set innerElement(e) {
+        this.addInnerElement(e);
+    }
 }

doric-js/lib/src/util/jsx.d.ts

@@ -1,13 +1,13 @@
 import { Group, View } from "../ui/view";
 import { ClassType } from "./types";
 export declare namespace jsx {
-    function createElement<T extends View>(constructor: ClassType<T>, config: Partial<T> | null, ...children: View[]): T;
+    function createElement<T extends View>(constructor: ClassType<T>, config: Partial<T> | null, ...children: any[]): any[] | T;
     class Fragment extends Group {
     }
 }
 declare global {
     namespace JSX {
-        interface IntrinsicElements {
+        interface Element extends View {
         }
         interface ElementClass extends View {
         }
@@ -15,7 +15,9 @@ declare global {
             props: {};
         }
         interface ElementChildrenAttribute {
-            children: View[];
+            innerElement: any;
+        }
+        interface IntrinsicElements {
         }
     }
 }

doric-js/lib/src/util/jsx.js

@@ -1,35 +1,25 @@
-import { Group, View } from "../ui/view";
+import { Group } from "../ui/view";
 import { layoutConfig } from "./layoutconfig";
 export var jsx;
 (function (jsx) {
-    function addElement(group, v) {
-        if (v instanceof Array) {
-            v.forEach(e => addElement(group, e));
-        }
-        else if (v instanceof Fragment) {
-            v.children.forEach(e => addElement(group, e));
-        }
-        else if (v instanceof View) {
-            group.addChild(v);
-        }
-        else {
-            throw new Error(`Can only use view as child`);
-        }
-    }
     function createElement(constructor, config, ...children) {
         const e = new constructor();
+        if (e instanceof Fragment) {
+            return children;
+        }
         e.layoutConfig = layoutConfig().fit();
         if (config) {
             e.apply(config);
         }
         if (children && children.length > 0) {
-            if (e instanceof Group) {
-                children.forEach((child) => {
-                    addElement(e, child);
-                });
+            if (children.length === 1) {
+                children = children[0];
+            }
+            if (Reflect.has(e, "innerElement")) {
+                Reflect.set(e, "innerElement", children, e);
             }
             else {
-                throw new Error(`Can only add child to group view, do not support ${constructor.name}`);
+                throw new Error(`Do not support ${constructor.name} for ${children}`);
             }
         }
         return e;

doric-js/lib/src/widget/refreshable.d.ts

@@ -1,6 +1,6 @@
 import { View, Superview, NativeViewModel } from "../ui/view";
 import { BridgeContext } from "../runtime/global";
-export declare class Refreshable extends Superview {
+export declare class Refreshable extends Superview implements JSX.ElementChildrenAttribute {
     content: View;
     header?: View;
     onRefresh?: () => void;
@@ -10,6 +10,7 @@ export declare class Refreshable extends Superview {
     isRefreshable(context: BridgeContext): Promise<boolean>;
     isRefreshing(context: BridgeContext): Promise<boolean>;
     toModel(): NativeViewModel;
+    set innerElement(e: View | [View, View]);
 }
 export declare function refreshable(config: Partial<Refreshable>): Refreshable;
 export interface IPullable {

doric-js/lib/src/widget/refreshable.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { Property, Superview } from "../ui/view";
+import { View, Property, Superview } from "../ui/view";
 import { layoutConfig } from "../util/layoutconfig";
 export class Refreshable extends Superview {
     allSubviews() {
@@ -34,6 +34,15 @@ export class Refreshable extends Superview {
         this.dirtyProps.header = (this.header || {}).viewId;
         return super.toModel();
     }
+    set innerElement(e) {
+        if (e instanceof View) {
+            this.content = e;
+        }
+        else {
+            this.header = e[0];
+            this.content = e[1];
+        }
+    }
 }
 __decorate([
     Property,

doric-js/lib/src/widget/scroller.d.ts

@@ -1,7 +1,7 @@
 import { Superview, View, NativeViewModel } from '../ui/view';
 import { BridgeContext } from '../runtime/global';
 export declare function scroller(content: View, config?: Partial<Scroller>): Scroller;
-export declare class Scroller extends Superview {
+export declare class Scroller extends Superview implements JSX.ElementChildrenAttribute {
     content: View;
     contentOffset?: {
         x: number;
@@ -30,4 +30,5 @@ export declare class Scroller extends Superview {
         x: number;
         y: number;
     }, animated?: boolean): Promise<any>;
+    set innerElement(e: View);
 }

doric-js/lib/src/widget/scroller.js

@@ -47,6 +47,9 @@ export class Scroller extends Superview {
     scrollBy(context, offset, animated) {
         return this.nativeChannel(context, "scrollBy")({ offset, animated });
     }
+    set innerElement(e) {
+        this.content = e;
+    }
 }
 __decorate([
     Property,

doric-js/lib/src/widget/text.d.ts

@@ -7,7 +7,7 @@ export declare enum TruncateAt {
     Start = 2,
     Clip = 3
 }
-export declare class Text extends View {
+export declare class Text extends View implements JSX.ElementChildrenAttribute {
     text?: string;
     textColor?: Color | GradientColor;
     textSize?: number;
@@ -22,5 +22,6 @@ export declare class Text extends View {
     underline?: boolean;
     htmlText?: string;
     truncateAt?: TruncateAt;
+    set innerElement(e: string);
 }
 export declare function text(config: Partial<Text>): Text;

doric-js/lib/src/widget/text.js

@@ -33,6 +33,9 @@ export var TruncateAt;
     TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
 })(TruncateAt || (TruncateAt = {}));
 export class Text extends View {
+    set innerElement(e) {
+        this.text = e;
+    }
 }
 __decorate([
     Property,