Add array argument support

index.d.ts

@@ -553,11 +553,12 @@ type DetailsAttributes = Attributes & {
 };
 
 type PakertajaArgument<A extends Attributes = Attributes> =
-  | Element
+  | Node
   | string
   | A
   | null
-  | undefined;
+  | undefined
+  | Array<Node | boolean | null | undefined>;
 
 interface PakertajaStatic {
   (tagName: "html", ...args: PakertajaArgument[]): HTMLHtmlElement;

package.json

@@ -1,9 +1,9 @@
 {
   "name": "pakertaja",
   "description": "Tiny JavaScript library for building HTML elements",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Rauli Laine",
-  "homepage": "https://github.com/RauliL/pakertaja",
+  "homepage": "https://rauli.dev/pakertaja",
   "license": "MIT",
   "repository": {
     "type": "git",

src/pakertaja.js

@@ -42,9 +42,9 @@ function applyStyleProperties (node, properties) {
   if (typeof properties === 'string') {
     node.setAttribute('style', properties);
   } else if (properties != null) {
-    Object.keys(properties).forEach(key => {
+    for (const key of Object.keys(properties)) {
       node.style[key] = toStringWithCallback(node, properties[key]);
-    });
+    }
   }
 }
 
@@ -53,9 +53,21 @@ function applyDataProperties (node, properties) {
     properties = properties.call(node);
   }
   if (properties != null) {
-    Object.keys(properties).forEach(key => {
+    for (const key of Object.keys(properties)) {
       node.dataset[key] = toStringWithCallback(node, properties[key]);
-    });
+    }
+  }
+}
+
+function process (root, arg) {
+  if (isElement(arg)) {
+    root.appendChild(arg);
+  } else if (Array.isArray(arg)) {
+    for (const child of arg) {
+      process(root, child);
+    }
+  } else if (arg != null && arg !== false) {
+    root.appendChild(document.createTextNode(toStringWithCallback(root, arg)));
   }
 }
 
@@ -75,8 +87,12 @@ function Pakertaja () {
       node.textContent = arg;
     } else if (isElement(arg)) {
       node.appendChild(arg);
+    } else if (Array.isArray(arg)) {
+      for (const child of arg) {
+        process(node, child);
+      }
     } else if (arg != null) {
-      Object.keys(arg).forEach((key) => {
+      for (const key of Object.keys(arg)) {
         const value = arg[key];
 
         if (key === 'text') {
@@ -93,12 +109,12 @@ function Pakertaja () {
           });
         } else if (value === true) {
           node.setAttribute(key, key);
-        } else if (value === false) {
+        } else if (value === false || value == null) {
           node.removeAttribute(key);
         } else {
           node.setAttribute(key, toStringWithCallback(node, value));
         }
-      });
+      }
     }
   }
 
@@ -110,11 +126,9 @@ Pakertaja.escape = input => String(input).replace(/[&<>"'/]/g, s => entityMappin
 Pakertaja.fragment = (...children) => {
   const fragment = document.createDocumentFragment();
 
-  children.forEach((child) => fragment.appendChild(
-    isElement(child)
-      ? child
-      : document.createTextNode(toStringWithCallback(fragment, child))
-  ));
+  for (const child of children) {
+    process(fragment, child);
+  }
 
   return fragment;
 };

src/pakertaja.test.mjs

@@ -43,10 +43,23 @@ describe("Pakertaja", () => {
     }
   );
 
+  it("should allow array of nodes for creation of fragment nodes", () => {
+    const node = p.fragment([
+      p.p("First"),
+      null,
+      p.p("Second"),
+      undefined,
+      p.p("Third"),
+      false,
+    ]);
+
+    expect(node.textContent).toBe("FirstSecondThird");
+  });
+
   it("should have shortcut function for creating text nodes", () => {
     const node = p.text("Test.");
 
-    expect(node).toHaveProperty("nodeType", 3);
+    expect(node).toHaveProperty("nodeType", Node.TEXT_NODE);
     expect(node).toHaveProperty("textContent", "Test.");
   });
 
@@ -168,6 +181,20 @@ describe("Pakertaja", () => {
     expect(onClick).toBeCalled();
   });
 
+  it("should append child nodes from an array", () => {
+    const element = p("div", [
+      p.p("First"),
+      p.p("Second"),
+      null,
+      false,
+      undefined,
+      [],
+      p.p("Third"),
+    ]);
+
+    expect(element.textContent).toBe("FirstSecondThird");
+  });
+
   it("should be able to create child nodes", () => {
     const element = p("div", p("div"), p("a"), p("div"));