allow numbers as children in components

Bloomca · Jun 3, 2024 · 9538ea1 · 9538ea1
1 parent b3e2335
commit 9538ea1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/integration-tests/create-element.test.ts b/integration-tests/create-element.test.ts
@@ -244,4 +244,24 @@ describe("createElement", () => {
 
     expect(await screen.findByText("parent component")).toBeVisible();
   });
+
+  test("support numbers as a children element", async () => {
+    function App() {
+      return createElement("div", {
+        children: [
+          createElement("h1", { children: ["parent component"] }),
+          createElement("div", {
+            "data-testid": "container",
+            children: ["text ", 5],
+          }),
+        ],
+      });
+    }
+    cleanup = attachComponent({
+      htmlElement: document.body,
+      component: createElement(App),
+    });
+
+    expect(screen.getByTestId("container").textContent).toBe("text 5");
+  });
 });
diff --git a/src/create-element/parse-children.ts b/src/create-element/parse-children.ts
@@ -31,6 +31,9 @@ function parseChildren({
       if (typeof childComponent === "string") {
         const text = document.createTextNode(childComponent);
         htmlElement.append(text);
+      } else if (typeof childComponent === "number") {
+        const text = document.createTextNode(String(childComponent));
+        htmlElement.append(text);
       } else if (
         typeof childComponent === "object" &&
         childComponent &&

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -51,7 +51,12 @@ export type VelesComponent = {
 };
 
 // all supported child options
-type velesChild = string | VelesElement | VelesComponent | VelesStringElement;
+type velesChild =
+  | string
+  | number
+  | VelesElement
+  | VelesComponent
+  | VelesStringElement;
 export type VelesChildren = velesChild | velesChild[] | undefined | null;
 
 export type VelesElementProps = {