feat:complete the implement of JSX

doric-demo/src/TSXDemo.tsx

@@ -4,9 +4,12 @@ import {
   Panel,
   Gravity,
   Group,
-  LayoutSpec,
+  layoutConfig,
   Text,
   makeRef,
+  Stack,
+  Color,
+  modal,
 } from "doric";
 
 function createFragment() {
@@ -27,27 +30,24 @@ class Counter extends Panel {
     <VLayout
       space={20}
       gravity={Gravity.Center}
-      layoutConfig={{
+      layoutConfig={layoutConfig().fit().configAlignment(Gravity.Center)}
-        widthSpec: LayoutSpec.MOST,
-        heightSpec: LayoutSpec.MOST,
-      }}
       parent={root}
     >
-      <Text text={`${count}`} textSize={40} ref={ref} />
+      <Text textSize={40} ref={ref}>
+        {`${count}`}
+      </Text>
       <Text
-        text="Click to count"
         textSize={20}
+        text="Click to count"
         onClick={() => {
           count++;
           ref.current.text = `${count}`;
         }}
-      />
+      ></Text>
+      {fragments}
       {fragments}
       {[0, 1, 2, 3].map((i) => (
-        <>
+        <Text text={`Index ${i}`} />
-          <Text text={`Index ${i}`} />
-          <Text text={`Subtitle ${i}`} textSize={10} />
-        </>
       ))}
     </VLayout>;
   }

doric-js/bundle/doric-lib.es5.js

@@ -700,6 +700,25 @@ var Group = /** @class */ (function (_super) {
         this.children.push(view);
         this.dirtyProps.children = this.children.map(function (e) { return e.viewId; });
     };
+    Group.prototype.addInnerElement = function (e) {
+        var _this = this;
+        if (e instanceof Array) {
+            e.forEach(function (e) { return _this.addInnerElement(e); });
+        }
+        else if (e instanceof View) {
+            this.addChild(e);
+        }
+        else {
+            loge("Not allowed to add " + typeof e);
+        }
+    };
+    Object.defineProperty(Group.prototype, "innerElement", {
+        set: function (e) {
+            this.addInnerElement(e);
+        },
+        enumerable: false,
+        configurable: true
+    });
     return Group;
 }(Superview));
 
@@ -1887,6 +1906,13 @@ var Text = /** @class */ (function (_super) {
     function Text() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    Object.defineProperty(Text.prototype, "innerElement", {
+        set: function (e) {
+            this.text = e;
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate$a([
         Property,
         __metadata$a("design:type", String)
@@ -2500,6 +2526,13 @@ var Scroller = /** @class */ (function (_super) {
     Scroller.prototype.scrollBy = function (context, offset, animated) {
         return this.nativeChannel(context, "scrollBy")({ offset: offset, animated: animated });
     };
+    Object.defineProperty(Scroller.prototype, "innerElement", {
+        set: function (e) {
+            this.content = e;
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate$6([
         Property,
         __metadata$6("design:type", Object)
@@ -2576,6 +2609,19 @@ var Refreshable = /** @class */ (function (_super) {
         this.dirtyProps.header = (this.header || {}).viewId;
         return _super.prototype.toModel.call(this);
     };
+    Object.defineProperty(Refreshable.prototype, "innerElement", {
+        set: function (e) {
+            if (e instanceof View) {
+                this.content = e;
+            }
+            else {
+                this.header = e[0];
+                this.content = e[1];
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     __decorate$5([
         Property,
         __metadata$5("design:type", Function)
@@ -2699,20 +2745,6 @@ var __extends$7 = (undefined && undefined.__extends) || (function () {
 })();
 exports.jsx = void 0;
 (function (jsx) {
-    function addElement(group, v) {
-        if (v instanceof Array) {
-            v.forEach(function (e) { return addElement(group, e); });
-        }
-        else if (v instanceof Fragment) {
-            v.children.forEach(function (e) { return 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) {
         var arguments$1 = arguments;
 
@@ -2721,18 +2753,22 @@ exports.jsx = void 0;
             children[_i - 2] = arguments$1[_i];
         }
         var 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) {
+            if (children.length === 1) {
-                children.forEach(function (child) {
+                children = children[0];
-                    addElement(e, child);
+            }
-                });
+            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/bundle/doric-lib.js

@@ -561,6 +561,20 @@ 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);
+    }
 }
 
 const SPECIFIED = 1;
@@ -1399,6 +1413,9 @@ exports.TruncateAt = void 0;
     TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
 })(exports.TruncateAt || (exports.TruncateAt = {}));
 class Text extends View {
+    set innerElement(e) {
+        this.text = e;
+    }
 }
 __decorate$a([
     Property,
@@ -1900,6 +1917,9 @@ class Scroller extends Superview {
     scrollBy(context, offset, animated) {
         return this.nativeChannel(context, "scrollBy")({ offset, animated });
     }
+    set innerElement(e) {
+        this.content = e;
+    }
 }
 __decorate$6([
     Property,
@@ -1956,6 +1976,15 @@ 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$5([
     Property,
@@ -2062,34 +2091,24 @@ exports.Display = void 0;
 
 exports.jsx = void 0;
 (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) {
+            if (children.length === 1) {
-                children.forEach((child) => {
+                children = children[0];
-                    addElement(e, child);
+            }
-                });
+            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/bundle/doric-vm.js

@@ -2085,6 +2085,20 @@ 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);
+    }
 }
 
 const SPECIFIED = 1;
@@ -2923,6 +2937,9 @@ exports.TruncateAt = void 0;
     TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
 })(exports.TruncateAt || (exports.TruncateAt = {}));
 class Text extends View {
+    set innerElement(e) {
+        this.text = e;
+    }
 }
 __decorate$a([
     Property,
@@ -3424,6 +3441,9 @@ class Scroller extends Superview {
     scrollBy(context, offset, animated) {
         return this.nativeChannel(context, "scrollBy")({ offset, animated });
     }
+    set innerElement(e) {
+        this.content = e;
+    }
 }
 __decorate$6([
     Property,
@@ -3480,6 +3500,15 @@ 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$5([
     Property,
@@ -3586,34 +3615,24 @@ exports.Display = void 0;
 
 exports.jsx = void 0;
 (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) {
+            if (children.length === 1) {
-                children.forEach((child) => {
+                children = children[0];
-                    addElement(e, child);
+            }
-                });
+            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/index.d.ts

@@ -323,12 +323,15 @@ declare module 'doric/lib/src/ui/view' {
             clean(): void;
             toModel(): NativeViewModel;
     }
-    export abstract class Group extends Superview {
+    export type ViewArray = View[];
+    export type ViewFragment = View | ViewArray;
+    export abstract class Group extends Superview implements JSX.ElementChildrenAttribute {
             readonly children: View[];
             allSubviews(): View[];
             addChild(view: View): void;
             removeChild(view: View): void;
             removeAllChildren(): void;
+            set innerElement(e: View | ViewFragment | ViewFragment[] | undefined | null);
     }
 }
 
@@ -508,7 +511,7 @@ declare module 'doric/lib/src/widget/text' {
         Start = 2,
         Clip = 3
     }
-    export class Text extends View {
+    export class Text extends View implements JSX.ElementChildrenAttribute {
         text?: string;
         textColor?: Color | GradientColor;
         textSize?: number;
@@ -523,6 +526,7 @@ declare module 'doric/lib/src/widget/text' {
         underline?: boolean;
         htmlText?: string;
         truncateAt?: TruncateAt;
+        set innerElement(e: string);
     }
     export function text(config: Partial<Text>): Text;
 }
@@ -682,7 +686,7 @@ declare module 'doric/lib/src/widget/scroller' {
     import { Superview, View, NativeViewModel } from 'doric/lib/src/ui/view';
     import { BridgeContext } from 'doric/lib/src/runtime/global';
     export function scroller(content: View, config?: Partial<Scroller>): Scroller;
-    export class Scroller extends Superview {
+    export class Scroller extends Superview implements JSX.ElementChildrenAttribute {
         content: View;
         contentOffset?: {
             x: number;
@@ -711,13 +715,14 @@ declare module 'doric/lib/src/widget/scroller' {
             x: number;
             y: number;
         }, animated?: boolean): Promise<any>;
+        set innerElement(e: View);
     }
 }
 
 declare module 'doric/lib/src/widget/refreshable' {
     import { View, Superview, NativeViewModel } from "doric/lib/src/ui/view";
     import { BridgeContext } from "doric/lib/src/runtime/global";
-    export class Refreshable extends Superview {
+    export class Refreshable extends Superview implements JSX.ElementChildrenAttribute {
         content: View;
         header?: View;
         onRefresh?: () => void;
@@ -727,6 +732,7 @@ declare module 'doric/lib/src/widget/refreshable' {
         isRefreshable(context: BridgeContext): Promise<boolean>;
         isRefreshing(context: BridgeContext): Promise<boolean>;
         toModel(): NativeViewModel;
+        set innerElement(e: View | [View, View]);
     }
     export function refreshable(config: Partial<Refreshable>): Refreshable;
     export interface IPullable {
@@ -1402,13 +1408,13 @@ declare module 'doric/lib/src/util/jsx' {
     import { Group, View } from "doric/lib/src/ui/view";
     import { ClassType } from "doric/lib/src/util/types";
     export 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 {
         }
     }
     global {
         namespace JSX {
-            interface IntrinsicElements {
+            interface Element extends View {
             }
             interface ElementClass extends View {
             }
@@ -1416,7 +1422,9 @@ declare module 'doric/lib/src/util/jsx' {
                 props: {};
             }
             interface ElementChildrenAttribute {
-                children: View[];
+                innerElement: any;
+            }
+            interface IntrinsicElements {
             }
         }
     }

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) {
+            if (children.length === 1) {
-                children.forEach((child) => {
+                children = children[0];
-                    addElement(e, child);
+            }
-                });
+            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,

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

@@ -465,6 +465,9 @@ export abstract class Superview extends View {
         return super.toModel()
     }
 }
+export type ViewArray = View[]
+
+export type ViewFragment = View | ViewArray
 
 export abstract class Group extends Superview {
 
@@ -478,5 +481,19 @@ export abstract class Group extends Superview {
         this.children.push(view)
         this.dirtyProps.children = this.children.map(e => e.viewId)
     }
+
+    private addInnerElement(e: View | ViewFragment | ViewFragment[] | undefined | null) {
+        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: View | ViewFragment | ViewFragment[] | undefined | null) {
+        this.addInnerElement(e)
+    }
 }
 

doric-js/src/ui/view.ts

@@ -491,7 +491,11 @@ export abstract class Superview extends View {
     }
 }
 
-export abstract class Group extends Superview {
+export type ViewArray = View[]
+
+export type ViewFragment = View | ViewArray
+
+export abstract class Group extends Superview implements JSX.ElementChildrenAttribute {
 
     readonly children: View[] = new Proxy([], {
         set: (target, index, value) => {
@@ -519,5 +523,18 @@ export abstract class Group extends Superview {
     removeAllChildren() {
         this.children.length = 0
     }
+
+    private addInnerElement(e: View | ViewFragment | ViewFragment[] | undefined | null) {
+        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: View | ViewFragment | ViewFragment[] | undefined | null) {
+        this.addInnerElement(e)
+    }
 }
 

doric-js/src/util/jsx.ts

@@ -1,40 +1,31 @@
 import { Group, View } from "../ui/view";
 import { layoutConfig } from "./layoutconfig";
+import { loge } from "./log";
 import { ClassType } from "./types";
 
 export namespace jsx {
-    function addElement(group: Group, v: any) {
-        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`
-            );
-        }
-    }
-
     export function createElement<T extends View>(
         constructor: ClassType<T>,
         config: Partial<T> | null,
-        ...children: View[]
+        ...children: any[]
     ) {
         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) {
+            if (children.length === 1) {
-                children.forEach((child) => {
+                children = children[0]
-                    addElement(e, child)
+            }
-                });
+            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}`
+                    `Do not support ${constructor.name} for ${children}`
                 );
             }
         }
@@ -45,13 +36,14 @@ export namespace jsx {
 
 declare global {
     namespace JSX {
-        interface IntrinsicElements { }
+        interface Element extends View { }
         interface ElementClass extends View { }
         interface ElementAttributesProperty {
             props: {};
         }
         interface ElementChildrenAttribute {
-            children: View[];
+            innerElement: any;
         }
+        interface IntrinsicElements { }
     }
 }

doric-js/src/widget/refreshable.ts

@@ -4,7 +4,7 @@ import { Scroller } from "./scroller";
 import { BridgeContext } from "../runtime/global";
 import { layoutConfig } from "../util/layoutconfig";
 
-export class Refreshable extends Superview {
+export class Refreshable extends Superview implements JSX.ElementChildrenAttribute {
 
     content!: View
 
@@ -42,6 +42,15 @@ export class Refreshable extends Superview {
         this.dirtyProps.header = ((this.header || {}) as any).viewId
         return super.toModel()
     }
+
+    set innerElement(e: View | [View, View]) {
+        if (e instanceof View) {
+            this.content = e
+        } else {
+            this.header = e[0]
+            this.content = e[1]
+        }
+    }
 }
 
 export function refreshable(config: Partial<Refreshable>) {

doric-js/src/widget/scroller.ts

@@ -28,7 +28,7 @@ export function scroller(content: View, config?: Partial<Scroller>) {
 }
 
 
-export class Scroller extends Superview {
+export class Scroller extends Superview implements JSX.ElementChildrenAttribute {
     content!: View
 
     @Property
@@ -64,4 +64,8 @@ export class Scroller extends Superview {
     scrollBy(context: BridgeContext, offset: { x: number, y: number }, animated?: boolean) {
         return this.nativeChannel(context, "scrollBy")({ offset, animated })
     }
+
+    set innerElement(e: View) {
+        this.content = e
+    }
 }

doric-js/src/widget/text.ts

@@ -25,7 +25,7 @@ export enum TruncateAt {
     Clip = 3,
 }
 
-export class Text extends View {
+export class Text extends View implements JSX.ElementChildrenAttribute {
     @Property
     text?: string
 
@@ -67,6 +67,10 @@ export class Text extends View {
 
     @Property
     truncateAt?: TruncateAt
+
+    set innerElement(e: string) {
+        this.text = e
+    }
 }
 
 export function text(config: Partial<Text>) {

doric-web/dist/index.js

@@ -2139,6 +2139,20 @@ 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);
+    }
 }
 
 const SPECIFIED = 1;
@@ -2977,6 +2991,9 @@ exports.TruncateAt = void 0;
     TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
 })(exports.TruncateAt || (exports.TruncateAt = {}));
 class Text extends View {
+    set innerElement(e) {
+        this.text = e;
+    }
 }
 __decorate$a([
     Property,
@@ -3478,6 +3495,9 @@ class Scroller extends Superview {
     scrollBy(context, offset, animated) {
         return this.nativeChannel(context, "scrollBy")({ offset, animated });
     }
+    set innerElement(e) {
+        this.content = e;
+    }
 }
 __decorate$6([
     Property,
@@ -3534,6 +3554,15 @@ 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$5([
     Property,
@@ -3640,34 +3669,24 @@ exports.Display = void 0;
 
 exports.jsx = void 0;
 (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) {
+            if (children.length === 1) {
-                children.forEach((child) => {
+                children = children[0];
-                    addElement(e, child);
+            }
-                });
+            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;