From 7b80d2f3249253c00a9e91ae14a79a72b491f49b Mon Sep 17 00:00:00 2001 From: "M. George Hansen" Date: Tue, 2 Jun 2020 16:39:44 -0700 Subject: [PATCH] feat: support rendering array elements --- src/component.ts | 1 + src/render.ts | 3 +++ src/utils.ts | 24 +++++++++++------------- test/test-suites/rendering.tsx | 21 ++++++++++++++++++++- 4 files changed, 35 insertions(+), 14 deletions(-) diff --git a/src/component.ts b/src/component.ts index d32fbc2..c45834e 100644 --- a/src/component.ts +++ b/src/component.ts @@ -26,6 +26,7 @@ export interface HTMLElement { * All valid types of elements that can be rendered to HTML. */ export type Element = + | Element[] | HTMLElement | string | number diff --git a/src/render.ts b/src/render.ts index 888f4c3..ef0917f 100644 --- a/src/render.ts +++ b/src/render.ts @@ -28,6 +28,9 @@ const renderElement = (elem: Element): string => { if (typeof elem === "string") { return escapeHtml(elem); } + if (Array.isArray(elem)) { + return elem.map((e) => renderElement(e)).join(""); + } let output = ""; output += startTag(elem); diff --git a/src/utils.ts b/src/utils.ts index 453c2bf..4c5fbdf 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -51,18 +51,6 @@ export const purgeModuleAndDepsFromCache = (modName: string): void => { export type Flattenable = Array>; -const flatDeepRec = (arr: Flattenable, d: number): T[] => { - if (d <= 0) { - return arr.slice() as T[]; - } - - let acc = [] as T[]; - for (const val of arr) { - acc = acc.concat(Array.isArray(val) ? flatDeepRec(arr, d - 1) : val); - } - return acc; -}; - /** * Flatten an arbitrarily-deeply nested array into a flat array. * @@ -70,4 +58,14 @@ const flatDeepRec = (arr: Flattenable, d: number): T[] => { * * @return Flattened array. */ -export const flatDeep = (arr: Flattenable): T[] => flatDeepRec(arr, 1); +export const flatDeep = (arr: Flattenable): T[] => { + const flattenedArr: T[] = []; + for (const val of arr) { + if (Array.isArray(val)) { + flattenedArr.push(...flatDeep(val)); + } else { + flattenedArr.push(val); + } + } + return flattenedArr; +}; diff --git a/test/test-suites/rendering.tsx b/test/test-suites/rendering.tsx index fe7dc2d..4e32416 100644 --- a/test/test-suites/rendering.tsx +++ b/test/test-suites/rendering.tsx @@ -3,7 +3,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { createElement } from "../../dist"; +import { Component, createElement } from "../../dist"; import { renderPage } from "../../dist/render"; import { testSuite } from "../lib"; @@ -67,4 +67,23 @@ testSuite("renderPage", ({ test, expect }) => { const html = renderPage(There are {nLights} lights!); expect(html).toEqual("There are 3 lights!"); }); + + test("renders spliced arrays", () => { + const Light: Component<{ lightN: number }> = ({ lightN }) => ( +
{lightN}
+ ); + const lights = [1, 2, 3]; + const html = renderPage( + + There are{" "} + {lights.map((lightN) => ( + + ))}{" "} + lights! + + ); + expect(html).toEqual( + "There are
1
2
3
lights!" + ); + }); });