@hugov/inhtml
v1.0.0
Published
small and simple in-html templates, factories and dynamic lists
Downloads
28
Maintainers
Readme
inHTML
small and simple in-html templates, factories and dynamic lists
• Features • Limitations • API • License
<table><tbody></tbody></table>
<template>
<tr id=row>
<td id=cell></td>
<td><a id=label></a></td>
</tr>
</template>
<script type=module>
import {cast, list} from '@hugov/inhtml'
const makeRow = cast('template', ({row, cell, label},v,k) => {
label.textContent = v.ms
cell.textContent = v.id
row.update = v => label.textContent = v.ms
return row
})
const tbody = list($('tbody'), makeRow)
const data = [ {id:'1', ms:'one'} ]
tbody.update(data)
data.push( {id:'2', ms:'two'} )
tbody.update(data)
</script>
Features
- template inside html markup
- no new html constructs.
id
attributes inside the template are stripped and passed on as reference to the decorator function - template can be a
<template>
element or any other node - template is cloned, never modified, id attributes are used as references
- multiple dynamic lists within the same parent
Limitations
- strictly DOM element creation and manipulations (no router, no store)
- browsers only
API
cast( source, decorator ) => nodeFactory
- source: node or selector
- decorator: (ids, ...args) => node|void, ids are striped from the clone's :id attribute
- nodeFactory: (,,,args) => decorated clone
list( parent, childFactory, options) => parent
- adds parent.update(value, key) method to the parent
Helper functions and utils
- tag
text
=>text
- $(selector, parent=document) | $
selector
:querySelector
shortcut - $$(selector, parent=document) | $$
selector
:querySelectorAll
shortcut - html(markup) | html
markup
=> DocumentFragment - load(path) => DocumentFragment
- frame(lambda, {context}) => sandboxed AsyncFunction
- worker(code) => Worker