Add support for document fragments

RauliL · Jan 10, 2025 · 06011cc · 06011cc
1 parent 75e9f93
commit 06011cc
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -132,6 +132,7 @@ interface PakertajaStatic {
 
   escape: (input: string) => string;
 
+  fragment: (...args: Array<Element | StringOrCallback>) => DocumentFragment;
   append: (
     root: Element,
     ...args: Array<Element | StringOrCallback>

diff --git 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
@@ -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.");