diff --git a/integration-tests/create-element.test.ts b/integration-tests/create-element.test.ts index be48586..2622341 100644 --- 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 index fb7953b..c252ffd 100644 --- 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 index 1d8ae1b..34c251f 100644 --- 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 = {