bondo

Bondo

This is just a little glue between Custom Elements and Virtual-DOM.

Usage

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

register({
  render() {
    h('hello-component', [
      h('h1', 'Hello ' + this.getAttribute('you') || 'World'),
      h('input', {
        onkeyup: ev => this.setAttribute('you', ev.target.value)
      })
    ])
  }
});

Then use it like you would any other HTML element.

<hello-component you="Jesse"></hello-component>

Whenever the element's attributes change the render function gets called again and the element's DOM gets patched with changes.

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

Todo

• Provide hooks into the CustomElement lifecycle events
• [] 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
• [] Get a better name, vdom-elements, Ponents, Ponies, maybe see if substack will give me "Pony"

Credits

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

License

Artistic License 2.0, see LICENSE.md for details.