From 5795439ae149a69a4710fd194eff11f71c585ffd Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Wed, 22 Jun 2022 15:51:03 +0200
Subject: [PATCH] Add fragment helper to skooma.js

---
 page/skooma.html | 13 +++++++++++++
 skooma.js        |  7 +++++++
 2 files changed, 20 insertions(+)

diff --git a/page/skooma.html b/page/skooma.html
index 03a59fc..b5d1840 100644
--- a/page/skooma.html
+++ b/page/skooma.html
@@ -245,6 +245,19 @@
 	</div>
 </section>
 
+<section>
+	<h2>The <code>fragment</code> helper</h2>
+
+	<p>
+		This helper simply collects its arguments into a document fragment.
+		One may think of it as <code>Array.from</code>, except it collects HTML elements into a fragment instead.
+	</p>
+	<code-block>
+		const list = ["b", "i", "u"].map(name =&gt; html.[name](name))
+		return text`Some ${fragment(...list)} other text`
+	</code-block>
+</section>
+
 <section>
 	<h2>The <code>bind</code> helper</h2>
 
diff --git a/skooma.js b/skooma.js
index 2abea39..f20c0e7 100644
--- a/skooma.js
+++ b/skooma.js
@@ -113,6 +113,13 @@ export const handle = fn => event => { event.preventDefault(); return fn(event)
 export const html = nameSpacedProxy({nameFilter: name => name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()})
 export const svg = nameSpacedProxy({xmlns: "http://www.w3.org/2000/svg"})
 
+export const fragment = (...elements) => {
+	const fragment = new DocumentFragment()
+	for (element of elements)
+		fragment.append(element)
+	return fragment
+}
+
 const textFromTemplate = (literals, items) => {
 	const fragment = new DocumentFragment()
 	for (const key in items) {