Add fragment helper to skooma.js
This commit is contained in:
parent
2c5f430dc6
commit
5795439ae1
2 changed files with 20 additions and 0 deletions
|
@ -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 => 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>
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue