Bondo

This is just a little glue between Custom Elements and Virtual-DOM using Mutation Observers to trigger DOM patches.

Usage

let bondo = require('bondo');
let h = bondo.h;

bondo('my-widget', function (el, actions) {
  return h('main', [
    h('h1', 'Hello ' + el.getAttribute('you') || 'World'),
    h('input', {
      onkeyup: ev => el.setAttribute('you', ev.target.value)
    })
  ]);
});

Then use it as a standard Custom Element.

<my-widget you="Jesse"></my-widget>

Whenever the element's attributes change the view function gets called again and the existing innerDom gets patched with changes.

The first argument passed to the view function is the actual DOM element so it's attributes can be used when rendering the VDOM. The element's attributes will be observed and any changes will automatically trigger an update of the VDOM.

Subsequent arguments to the view function are any arguments passed to bondo() following the view function. These are optional.

bondo('example-widget', function view(el, model, intents, actions, whatever) {
  // inject as many things as you need to render your vdom
}, actions, intents, model, whatever)

It's simple, it works, there're tests! Is it useful for building applications? I don't know, you tell me!

Todo

• Test if nesting works
• Create a TodoMVC app
• Think of a way to prerender on the server
• Try to pass in complex values
• Maybe do something with the existing children instead of throwing them away

Credits

• Matt Esch - virtual-dom
• Raynos (Jake Verbaten) - dom-delegator
• Andrea Giammarchi - document.registerElement polyfill
• Graeme Yeates - MutationObserver polyfill

License

Artistic License 2.0, see LICENSE.md for details.