feat: support rendering array elements

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

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);

src/utils.ts

@@ -51,18 +51,6 @@ export const purgeModuleAndDepsFromCache = (modName: string): void => {
 
 export type Flattenable<T> = Array<T | Flattenable<T>>;
 
-const flatDeepRec = <T>(arr: Flattenable<T>, 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 = <T>(arr: Flattenable<T>, d: number): T[] => {
  *
  * @return Flattened array.
  */
-export const flatDeep = <T>(arr: Flattenable<T>): T[] => flatDeepRec(arr, 1);
+export const flatDeep = <T>(arr: Flattenable<T>): T[] => {
+    const flattenedArr: T[] = [];
+    for (const val of arr) {
+        if (Array.isArray(val)) {
+            flattenedArr.push(...flatDeep(val));
+        } else {
+            flattenedArr.push(val);
+        }
+    }
+    return flattenedArr;
+};