UVDOM compilation demo

The same view is converted into React, Mithril and mercury with two different styles applied (Bootstrap and Pure)

Source code

// button: object -> string -> UVDOM (a view without styling, the output of my library)
function button(style) {
  return function (caption) {
    return {
      tag: 'button',
      attrs: {className: style},
      children: caption
    };
  };
}

// boostrap: string -> object (Bootstrap 3 style)
function bootstrap(type) {
  var style = {btn: true};
  style['btn-' + type] = true;
  return style;
}

// boostrap: string -> object (Pure css style)
function pure(type) {
  var style = {'pure-button': true};
  style['pure-button-' + type] = true;
  return style;
}

// bootstrapButton: string -> string -> VDOM
var bootstrapButton = compose(button, bootstrap);
// pureButton: string -> string -> VDOM
var pureButton = compose(button, pure);

var TYPE = 'primary';
var CAPTION = 'Primary button';
var bsButton = bootstrapButton(TYPE)(CAPTION);
var prButton = pureButton(TYPE)(CAPTION);

// React
React.render(toReact(bsButton), document.getElementById('bootstrap-react'));
React.render(toReact(prButton), document.getElementById('pure-react'));

// Mithril
m.render(document.getElementById('bootstrap-mithril'), toMithril(bsButton));
m.render(document.getElementById('pure-mithril'), toMithril(prButton));

// mercury
document.getElementById('bootstrap-mercury').appendChild(createElement(toMercury(bsButton)));
document.getElementById('pure-mercury').appendChild(createElement(toMercury(prButton)));