fix(jsx): handle children better

2 files changed, 36 insertions, 22 deletions

diff --git a/gjs/src/astalify.ts b/gjs/src/astalify.ts
index f932e5e..3cf662d 100644
--- a/gjs/src/astalify.ts
+++ b/gjs/src/astalify.ts
@@ -55,6 +55,9 @@ function ctor(self: any, config: any, ...children: Gtk.Widget[]) {
     const { setup, child, ...props } = config
     props.visible ??= true
 
+    const pchildren = props.children
+    delete props.children
+
     const bindings = Object.keys(props).reduce((acc: any, prop) => {
         if (props[prop] instanceof Binding) {
             const bind = [prop, props[prop]]
@@ -97,9 +100,15 @@ function ctor(self: any, config: any, ...children: Gtk.Widget[]) {
     for (const [signal, callback] of onHandlers)
         self.connect(signal, callback)
 
-    if (self instanceof Gtk.Container && children) {
-        for (const child of children)
-            self.add(child)
+    if (self instanceof Gtk.Container) {
+        if (pchildren) {
+            for (const child of pchildren)
+                self.add(child)
+        }
+        if (children) {
+            for (const child of children)
+                self.add(child)
+        }
     }
 
     for (const [prop, bind] of bindings) {
diff --git a/gjs/src/jsx/jsx-runtime.ts b/gjs/src/jsx/jsx-runtime.ts
index 9495da9..3d9cc49 100644
--- a/gjs/src/jsx/jsx-runtime.ts
+++ b/gjs/src/jsx/jsx-runtime.ts
@@ -1,5 +1,13 @@
 import { Gtk } from "../imports.js"
 import * as Widget from "../widgets.js"
+import Binding from "../binding.js"
+
+function w(e: any) {
+    if (e instanceof Gtk.Widget || e instanceof Binding)
+        return e
+
+    return Widget.Label({ label: String(e) })
+}
 
 export function jsx(
     ctor: keyof typeof ctors | typeof Gtk.Widget,
@@ -10,30 +18,27 @@ export function jsx(
     if (!Array.isArray(children))
         children = [children]
 
-    if (children.length === 1) {
-        props.child = children[0]
-        delete props.children
-    }
-
-    children = children.map((v: any) => {
-        if (v instanceof Gtk.Widget)
-            return v
-
-        return Widget.Label({ label: String(v) })
-    })
-
-    if (ctor === Widget.CenterBox) {
+    if (ctor === "centerbox") {
         if (children[0])
-            props.startWidget = children[0]
+            props.startWidget = w(children[0])
         if (children[1])
-            props.centerWidget = children[1]
+            props.centerWidget = w(children[1])
         if (children[2])
-            props.endWidget = children[2]
+            props.endWidget = w(children[2])
     }
 
-    if (ctor === Widget.Label) {
-        if (children[0])
-            props.label = children[0]
+    else if (ctor === "label" && children[0]) {
+        props.label = children[0]
+        delete props.children
+    }
+
+    else if (children.length === 1) {
+        props.child = w(children[0])
+        delete props.children
+    }
+
+    else {
+        props.children = children.map(w)
     }
 
     return typeof ctor === "string"