talio

talio is a small framework that is just like mercury, but simpler and with a different state manager.

Examples

A simple "hello world" (see it in JSFiddle).

var tl = require('talio')
  , h  = require('talio/node_modules/virtual-dom/h')
 
var State = talio.StateFactory({
  user: null,
  askingForName: false
})
 
var vrenderMain = function (state, channels) {
  return h('div', {}, [
    h('h1', {
      style: {
        display: state.user ? 'none' : 'initial' ,
      },
      'ev-click': talio.sendClick(channels.askForName)
    }, [
      'What is your name? ',
      h('small', {}, '(click to answer) ')
    ]),
    h('form', {
      style: {
        display: !state.user && state.askingForName ? 'initial' : 'none' ,
      },
      'ev-submit': talio.sendSubmit(channels.updateName)
    }, [
      h('input', {
        autofocus: true,
        name: 'username'
      })
    ]),
    h('h1', {
      style: {
        display: state.user ? 'initial' : 'none' ,
      },
      className: 'hello'
    }, 'Hello, ' + state.user + '!')
  ])
}
 
var handlers = {
  askForName: function (State) {
    State.change({
      'user': null,
      'askingForName': true
    })
  },
  updateName: function (State, formdata) {
    State.change('user', formdata.username)
  }
}
 
talio.run(document.body, vrenderMain, handlers, State)