feat:complete the implement of JSX

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;