// counter: mobx implementation

import { observable } from 'mobx';
import { diff, patch } from 'virtual-dom';
import { autorun } from 'mobx';

let mount = function mount(element, view, state) {
  let tree = <noop/>;
  function render() {
    const newTree = view(state);
    const patches = diff(tree, newTree);
    element = patch(element, patches);
    tree = newTree;
  }
  autorun(() => render());
}

const state = { @observable n: 0 };
const onclick = () => state.n++;

const view = (state) => <div>
  <h1>clicked {state.n} times</h1>
  <button onclick={onclick}>click me!</button>
</div>

mount(
  document.querySelector('#app'),
  view, state
);