Superfine + class = SuperfineApp ref: https://qiita.com/tom-u/items/a2d7602d02320d1625d8

counter.js

// import * as superfine from 'https://unpkg.com/superfine?module'
// const { h } = superfine;
//
// const view = count =>
//   h('div', {}, [
//     h('h1', {}, count),
//     h('button', { onclick: () => render(count - 1) }, '-'),
//     h('button', { onclick: () => render(count + 1) }, '+')
//   ])
//
// const mount = (view, container, node) => state => {
//   node = superfine.patch(node, view(state), container)
// }
//
// const render = mount(view, document.body)
//
// render(0)

import * as superfine from 'https://unpkg.com/superfine?module'
const { h } = superfine;

class SuperfineApp {
  constructor(container, state, view) {
    this.container = container;
    this.state = state;
    this.view = view;
    this.mount().render();
  }

  mount() {
    let node;
    this.render = () => {
      node = superfine.patch(node, this.view(this), this.container);
      return this;
    }
    return this;
  }
}

// new SuperfineApp(document.body, 0, app =>
//   h('div', {}, [
//     h('h1', {}, app.state),
//     h('button', { onclick: () => { app.state--; app.render() } }, '-'),
//     h('button', { onclick: () => { app.state++; app.render() } }, '+'),
//   ])
// );

class CounterApp extends SuperfineApp {
  add(by=1) {
    this.state += by;
    return this.render();
  }
  sub(by=1) {
    this.state -= by;
    return this.render();
  }
}

new CounterApp(document.body, 0, app =>
  h('div', {}, [
    h('h1', {}, app.state),
    h('button', { onclick: () => app.sub() }, '-'),
    h('button', { onclick: () => app.add() }, '+'),
  ])
);

superfineapp.js

class SuperfineApp {
  constructor(container, state, view) {
    this.state = state;
    let node;
    this.render = () => {
      node = patch(node, view(this), container);
      return this;
    };
  }
}