tsx:support array in children

doric-demo/src/TSXDemo.tsx

@@ -21,7 +21,7 @@ function createFragment() {
 @Entry
 class Counter extends Panel {
   build(root: Group) {
-    const fragmnets = createFragment();
+    const fragments = createFragment();
     const ref = makeRef<Text>();
     let count = 0;
     <VLayout
@@ -42,7 +42,13 @@ class Counter extends Panel {
           ref.current.text = `${count}`;
         }}
       />
-      {fragmnets}
+      {fragments}
+      {[0, 1, 2, 3].map((i) => (
+        <>
+          <Text text={`Index ${i}`} />
+          <Text text={`Subtitle ${i}`} textSize={10} />
+        </>
+      ))}
     </VLayout>;
   }
 }

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

@@ -2699,6 +2699,20 @@ 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;
 
@@ -2714,12 +2728,7 @@ exports.jsx = void 0;
         if (children && children.length > 0) {
             if (e instanceof Group) {
                 children.forEach(function (child) {
-                    if (child instanceof Fragment) {
+                    addElement(e, child);
-                        child.children.forEach(function (c) { return e.addChild(c); });
-                    }
-                    else {
-                        e.addChild(child);
-                    }
                 });
             }
             else {

doric-js/bundle/doric-lib.js

@@ -2062,6 +2062,20 @@ 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();
         e.layoutConfig = layoutConfig().fit();
@@ -2071,12 +2085,7 @@ exports.jsx = void 0;
         if (children && children.length > 0) {
             if (e instanceof Group) {
                 children.forEach((child) => {
-                    if (child instanceof Fragment) {
+                    addElement(e, child);
-                        child.children.forEach(c => e.addChild(c));
-                    }
-                    else {
-                        e.addChild(child);
-                    }
                 });
             }
             else {

doric-js/bundle/doric-vm.js

@@ -3586,6 +3586,20 @@ 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();
         e.layoutConfig = layoutConfig().fit();
@@ -3595,12 +3609,7 @@ exports.jsx = void 0;
         if (children && children.length > 0) {
             if (e instanceof Group) {
                 children.forEach((child) => {
-                    if (child instanceof Fragment) {
+                    addElement(e, child);
-                        child.children.forEach(c => e.addChild(c));
-                    }
-                    else {
-                        e.addChild(child);
-                    }
                 });
             }
             else {

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

@@ -1,7 +1,21 @@
-import { Group } from "../ui/view";
+import { Group, View } 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();
         e.layoutConfig = layoutConfig().fit();
@@ -11,12 +25,7 @@ export var jsx;
         if (children && children.length > 0) {
             if (e instanceof Group) {
                 children.forEach((child) => {
-                    if (child instanceof Fragment) {
+                    addElement(e, child);
-                        child.children.forEach(c => e.addChild(c));
-                    }
-                    else {
-                        e.addChild(child);
-                    }
                 });
             }
             else {

doric-js/src/util/jsx.ts

@@ -3,6 +3,20 @@ import { layoutConfig } from "./layoutconfig";
 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,
@@ -16,11 +30,7 @@ export namespace jsx {
         if (children && children.length > 0) {
             if (e instanceof Group) {
                 children.forEach((child) => {
-                    if (child instanceof Fragment) {
+                    addElement(e, child)
-                        child.children.forEach(c => e.addChild(c))
-                    } else {
-                        e.addChild(child)
-                    }
                 });
             } else {
                 throw new Error(

doric-web/dist/index.js

@@ -3640,6 +3640,20 @@ 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();
         e.layoutConfig = layoutConfig().fit();
@@ -3649,12 +3663,7 @@ exports.jsx = void 0;
         if (children && children.length > 0) {
             if (e instanceof Group) {
                 children.forEach((child) => {
-                    if (child instanceof Fragment) {
+                    addElement(e, child);
-                        child.children.forEach(c => e.addChild(c));
-                    }
-                    else {
-                        e.addChild(child);
-                    }
                 });
             }
             else {