<commit_before># Bondo

This is just a little glue between [Custom Elements](https://w3c.github.io/webcomponents/spec/custom/) and [Virtual-DOM](https://github.com/Matt-Esch/virtual-dom) using [Mutation Observers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to trigger DOM patches.

## Usage

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

function view(el, actions) {
  return h('main', [
    h('h1#helloSeven', 'Hello ' + el.getAttribute('you') || 'World'),
    h('input#inputSeven', {
      'ev-keyup': actions.myEventHandler.bind(el)
    })
  ]);
}
bondo('my-widget', view, {
  myEventHandler: function (ev) {
    this.setAttribute('you', ev.target.value);
  }
});
```

Then use it as a standard Custom Element.

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

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. 

```js
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](https://github.com/jessehattabaugh/bondo/blob/master/test/test.js)! Is it useful for building applications? I don't know, [you tell me](https://github.com/jessehattabaugh/bondo/issues)!

## 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

- [<NAME> - virtual-dom](https://github.com/Matt-Esch/virtual-dom)
- [Raynos (<NAME>) - dom-delegator](https://github.com/Raynos/dom-delegator)
- [<NAME> - document.registerElement polyfill](https://github.com/WebReflection/document-register-element)
- [<NAME> - MutationObserver polyfill](https://github.com/megawac/MutationObserver.js)

## License

Artistic License 2.0, see [LICENSE.md](http://github.com/jessehattabaugh/bondo/blob/master/LICENSE.md) for details.

[![NPM](https://nodei.co/npm/bondo.png)](https://www.npmjs.com/package/bondo)
<commit_msg>updating syntax highlighting in Readme<commit_after># Bondo

This is just a little glue between [Custom Elements](https://w3c.github.io/webcomponents/spec/custom/) and [Virtual-DOM](https://github.com/Matt-Esch/virtual-dom) using [Mutation Observers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to trigger DOM patches.

## Usage

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

function view(el, actions) {
  return h('main', [
    h('h1#helloSeven', 'Hello ' + el.getAttribute('you') || 'World'),
    h('input#inputSeven', {
      'ev-keyup': actions.myEventHandler.bind(el)
    })
  ]);
}
bondo('my-widget', view, {
  myEventHandler: function (ev) {
    this.setAttribute('you', ev.target.value);
  }
});
```

Then use it as a standard Custom Element.

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

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. 

```js
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](https://github.com/jessehattabaugh/bondo/blob/master/test/test.js)! Is it useful for building applications? I don't know, [you tell me](https://github.com/jessehattabaugh/bondo/issues)!

## 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

- [<NAME> - virtual-dom](https://github.com/Matt-Esch/virtual-dom)
- [Raynos (<NAME>) - dom-delegator](https://github.com/Raynos/dom-delegator)
- [<NAME> - document.registerElement polyfill](https://github.com/WebReflection/document-register-element)
- [<NAME> - MutationObserver polyfill](https://github.com/megawac/MutationObserver.js)

## License

Artistic License 2.0, see [LICENSE.md](http://github.com/jessehattabaugh/bondo/blob/master/LICENSE.md) for details.

[![NPM](https://nodei.co/npm/bondo.png)](https://www.npmjs.com/package/bondo)

{'fraction_non_alphanumeric': 0.14327855035819637, 'fraction_numerical': 0.002317741255794353, 'mean_word_length': 4.450057405281286, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 22, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1233526', 'n_tokens_mistral': 1543, 'n_tokens_neox': 1475, 'n_words': 434}