Frontend : If you !(love(Mithril)) then what else ?

const o = sinuous.o  // observable :-)
const html = sinuous.html
const map = sinuous.map
const merge = mergerino  //enhanced Object.assign

// Here we observe an array, I have tried to observe the
// object directely with no success
// So we have to "map" on state to retrieve the object
// Look at the App function below
let state = o([
  {
     nom: "Albert",
     age: 58,
     points: 100
  }
]);

// Little helper
state.merge = function (patch) {
  //not very friendly but handy
  //'this' refers to 'state'
  let current = this()[0] 
  let newstate =  merge(current, patch)
  state([newstate])
}

// mergerino accepts functions for updating properties
// very handy
let actions  = {
  incPoints : () => state.merge({
    points : p => p + 1
  }),
  incAge : () =>  state.merge({
    age: (a) => a + 1
  })
}

// The view is a function of the state.
// All the actions are centralized in a unique object
function view(s) {
  return  html`
    <div>
      Hello <strong>${s.nom}</strong>, 
      you are <strong>${s.age}</strong> years old and have
      <strong>${s.points}</strong> points
    </div>
    <p>
      <button onclick=${actions.incPoints}>Inc Points</button>
      <button onclick=${actions.incAge}>Inc Age</button>
    </p>
    `
}

const App = function () {
  return html`${map(state, view)}`
}

document.querySelector('.app')
        .append(App());