feat:complete the implement of JSX

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) {
-                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}`
+                    `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>) {