From 1372ce16cbd65dc829370207c8418341d3932fc7 Mon Sep 17 00:00:00 2001 From: "M. George Hansen" Date: Tue, 2 Jun 2020 15:38:39 -0700 Subject: [PATCH] fix: support number elements in jsx templates --- src/component.ts | 8 +++++++- src/render.ts | 3 +++ test/test-suites/rendering.tsx | 6 ++++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/component.ts b/src/component.ts index 7e579b8..d32fbc2 100644 --- a/src/component.ts +++ b/src/component.ts @@ -25,7 +25,13 @@ export interface HTMLElement { /** * All valid types of elements that can be rendered to HTML. */ -export type Element = HTMLElement | string | boolean | undefined | null; +export type Element = + | HTMLElement + | string + | number + | boolean + | undefined + | null; /** * Custom HTMLElement factory that can be parameterized by props. diff --git a/src/render.ts b/src/render.ts index fdad43a..888f4c3 100644 --- a/src/render.ts +++ b/src/render.ts @@ -22,6 +22,9 @@ const renderElement = (elem: Element): string => { if (elem == null || typeof elem === "boolean") { return ""; } + if (typeof elem === "number") { + return elem.toString(); + } if (typeof elem === "string") { return escapeHtml(elem); } diff --git a/test/test-suites/rendering.tsx b/test/test-suites/rendering.tsx index 8ab63af..fe7dc2d 100644 --- a/test/test-suites/rendering.tsx +++ b/test/test-suites/rendering.tsx @@ -61,4 +61,10 @@ testSuite("renderPage", ({ test, expect }) => { "There are three lights!" ); }); + + test("renders spliced number nodes", () => { + const nLights = 3; + const html = renderPage(There are {nLights} lights!); + expect(html).toEqual("There are 3 lights!"); + }); });