@hugov/inhtml

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

• tagtext => text
• $(selector, parent=document) | $selector : querySelector shortcut
• $$(selector, parent=document) | $$selector : querySelectorAll shortcut
• html(markup) | htmlmarkup => DocumentFragment
• load(path) => DocumentFragment
• frame(lambda, {context}) => sandboxed AsyncFunction
• worker(code) => Worker

License

MIT © Hugo Villeneuve