diff --git a/index.d.ts b/index.d.ts index ed2696e..bbff36f 100644 --- a/index.d.ts +++ b/index.d.ts @@ -553,11 +553,12 @@ type DetailsAttributes = Attributes & { }; type PakertajaArgument = - | Element + | Node | string | A | null - | undefined; + | undefined + | Array; interface PakertajaStatic { (tagName: "html", ...args: PakertajaArgument[]): HTMLHtmlElement; diff --git a/package.json b/package.json index 2ce3513..1cfe2ef 100644 --- a/package.json +++ b/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", diff --git a/src/pakertaja.js b/src/pakertaja.js index ea44556..875eceb 100644 --- a/src/pakertaja.js +++ b/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; }; diff --git a/src/pakertaja.test.mjs b/src/pakertaja.test.mjs index d545b6e..30e601c 100644 --- a/src/pakertaja.test.mjs +++ b/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"));