Merge pull request #23 from allevo/fix/allow-array-of-children

Allow array of children

packages/seqflow-js/src/index.ts

@@ -525,7 +525,17 @@ function startComponent<T extends { children?: ChildenType[]; key?: string }>(
 				return;
 			}
 			this._el.innerHTML = "";
-			this._el.appendChild(html as Node);
+			if (Array.isArray(html)) {
+				for (const h of html) {
+					if (typeof h === "string") {
+						this._el.appendChild(document.createTextNode(h));
+						continue;
+					}
+					this._el.appendChild(h as Node);
+				}
+			} else {
+				this._el.appendChild(html as Node);
+			}
 		},
 	};
 
@@ -733,12 +743,12 @@ function createDomains(
 	};
 }
 
-type ChildenType = Element | Element[];
+type ChildenType = HTMLElement | HTMLElement[];
 
 declare global {
 	namespace JSX {
 		// The return type of <button />
-		type Element = HTMLElement;
+		type Element = HTMLElement | HTMLElement[];
 
 		export type ARG<T = object> = T & {
 			children?: ChildenType;

packages/seqflow-js/tests/render.test.tsx

@@ -219,3 +219,29 @@ test("getChild", async () => {
 		'<div key="key1">key1</div><div key="key2"><div key="key3">key3</div></div>',
 	);
 });
+
+test("render children", async () => {
+	async function Foo(
+		this: SeqflowFunctionContext,
+		{ children }: JSX.ARG<object>,
+	) {
+		// biome-ignore lint/style/noNonNullAssertion: it is a test
+		this.renderSync(children!);
+	}
+	async function App(this: SeqflowFunctionContext) {
+		this.renderSync(
+			<Foo>
+				<button type="button">increment</button>
+			</Foo>,
+		);
+	}
+	start(document.body, App, undefined, {
+		log: console,
+	});
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	expect(document.body.innerHTML).toBe(
+		'<div><button type="button">increment</button></div>',
+	);
+});