Create or update DOM elements by mapping query selectors to hypertext, plain text, attributes, classes, properties, other elements or lists.
This libary is based on substack's excellent hyperglue, it adds some additional mapping mechanisms and diff-based list support that integrates naturally with custom-elements.
Look ma, no virtual DOMs
importhbfrom'hyperbind/index.js'// compile htmlvardiv=hb('<div>')document.body.appendChild(div)console.log(document.body.outerHTML)// => <body><div></div></body>// hypertexthb(div,{$html: '<h1>hi</h1>'})console.log(div.outerHTML)// => <div><h1>hi</h1></div>// plain texthb(div,{$text: 'cool'})// shorthand: hb(div, 'cool')console.log(div.outerHTML)// => <div>cool</div>// attributeshb(div,{$attr: {'my-attr': 42// or null to remove}})console.log(div.outerHTML)// => <div my-attr="42"><h1>hi</h1></div>// classeshb(div,{$class: {'my-class': true// or falsy to remove}})console.log(div.outerHTML)// => <div my-attr="42" class="my-class"><h1>hi</h1></div>// propertiesdocument.body.innerHTML='<input value=initial>'hb(document.body,{input: {$prop: {value: 'updated'}}})console.log(document.querySelector('input').value)// => updated// elementshb(document.body,document.createElement('ul'))console.log(document.body.outerHTML)// => <body><ul></ul></body>hb(document.body,{ul: null})console.log(document.body.outerHTML)// => <body></body>// lists of primitiveshb(document.body,{ul: {$list: {items: ['foo','bar'],empty: 'No items',// optional placeholder for when there are no itemscreateElement: ()=>document.createElement('li')}}})console.log(document.body.outerHTML)// => <body><ul><li>foo</li><li>bar</li></ul></body>// lists of objectshb(document.body,{ul: {$list: {key: 'id',items: [{id: 0,data: 'foo'},{id: 1,data: 'bar'}],empty: {$html: `<b>No items</b>`// empty option is a recursive hyperbind},createElement: (item,i)=>{varli=document.createElement('li')li.textContent=`item #${i}: ${item.data}`returnli}}}})console.log(document.body.outerHTML)// => <body><ul><li>item #0: foo</li><li>item #1: bar</li></ul></body>// lists of objects (custom-element style)document.body.innerHTML=''classRowextendsHTMLElement{constructor(item,i){super()this.textContent=item.data}}customElements.define('x-row',Row)hb(document.body,{$list: {key: 'id',items: [{id: 0,data: 'foo'},{id: 1,data: 'bar'}],createElement: Row}})console.log(document.body.outerHTML)// => <body><x-row>foo</x-row><x-row>bar</x-row></body>$ npm run example
$ npm run test
MIT