Add fragment helper to skooma.js

This commit is contained in:
Talia 2022-06-22 15:51:03 +02:00
parent 2c5f430dc6
commit 5795439ae1
2 changed files with 20 additions and 0 deletions

View file

@ -245,6 +245,19 @@
</div> </div>
</section> </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> <section>
<h2>The <code>bind</code> helper</h2> <h2>The <code>bind</code> helper</h2>

View file

@ -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 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 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 textFromTemplate = (literals, items) => {
const fragment = new DocumentFragment() const fragment = new DocumentFragment()
for (const key in items) { for (const key in items) {