diff --git a/index.d.ts b/index.d.ts index 7aa0e07..2760674 100644 --- a/index.d.ts +++ b/index.d.ts @@ -132,6 +132,7 @@ interface PakertajaStatic { escape: (input: string) => string; + fragment: (...args: Array) => DocumentFragment; append: ( root: Element, ...args: Array diff --git a/src/pakertaja.js b/src/pakertaja.js index 44fd1e7..35adb7a 100644 --- a/src/pakertaja.js +++ b/src/pakertaja.js @@ -15,7 +15,11 @@ const entityMapping = { * Tests whether given value is HTML element. */ function isElement (value) { - return typeof value === 'object' && value != null && value.nodeType === 1; + return value != null && typeof value === 'object' && ( + value.nodeType === 1 || + value.nodeType === 3 || + value.nodeType === 11 + ); } /** @@ -59,6 +63,8 @@ function Pakertaja () { const node = ( arguments[0] === 'text' ? document.createTextNode('') + : (arguments[0] === 'fragment' || arguments[0] === Pakertaja.fragment) + ? document.createDocumentFragment() : document.createElement(arguments[0]) ); @@ -101,24 +107,26 @@ function Pakertaja () { Pakertaja.escape = input => String(input).replace(/[&<>"'/]/g, s => entityMapping[s]); -Pakertaja.append = (root, ...children) => { +Pakertaja.fragment = (...children) => { const fragment = document.createDocumentFragment(); children.forEach((child) => fragment.appendChild( - isElement(child) ? child : document.createTextNode(toStringWithCallback(root, child)) + isElement(child) + ? child + : document.createTextNode(toStringWithCallback(fragment, child)) )); - root.appendChild(fragment); + + return fragment; +}; + +Pakertaja.append = (root, ...children) => { + root.appendChild(Pakertaja.fragment(...children)); return root; }; Pakertaja.prepend = (root, ...children) => { - const fragment = document.createDocumentFragment(); - - children.forEach((child) => fragment.appendChild( - isElement(child) ? child : document.createTextNode(toStringWithCallback(root, child)) - )); - root.insertBefore(fragment, root.firstChild); + root.insertBefore(Pakertaja.fragment(...children), root.firstChild); return root; }; diff --git a/src/pakertaja.test.mjs b/src/pakertaja.test.mjs index 5662233..7196de0 100644 --- a/src/pakertaja.test.mjs +++ b/src/pakertaja.test.mjs @@ -16,7 +16,7 @@ describe("Pakertaja", () => { expect(element).not.toBeUndefined(); expect(element).toHaveProperty("childNodes"); expect(element).toHaveProperty("style"); - expect(element).toHaveProperty("nodeType", 1); + expect(element).toHaveProperty("nodeType", Node.ELEMENT_NODE); expect(element).toHaveProperty("tagName", tagName.toUpperCase()); expect(element.childNodes).toHaveLength(0); @@ -27,10 +27,19 @@ describe("Pakertaja", () => { it("should be able to create text nodes", () => { const node = p("text", "Test."); - expect(node).toHaveProperty("nodeType", 3); + expect(node).toHaveProperty("nodeType", Node.TEXT_NODE); expect(node).toHaveProperty("textContent", "Test."); }); + it.each(["fragment", p.fragment])( + "should be able to create document fragment nodes", + (tagName) => { + const node = p(tagName); + + expect(node).toHaveProperty("nodeType", Node.DOCUMENT_FRAGMENT_NODE); + } + ); + it("should have shortcut function for creating text nodes", () => { const node = p.text("Test.");