Hyperscript for jQuery

jqh.js

// hyperscript for jQuery
// create nested HTML elements with a DSL
// used to create reusable, interactive HTML components
//
// based on the many implentations out there like
// https://github.com/dominictarr/hyperscript
// https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript
// and Elm https://github.com/evancz/elm-html
var $h = function(element, properties, content) {
  var $component = $('<' + element + '>');
  var props = props || properties || [];
  props.forEach(function(prop) {
    $component.attr(prop);
  });
  if (typeof content === 'object') {
    $component.append(content);
  } else {
    $component.text(content);
  }
  return $component;
};

e.g.

var state = { counter: 1 };
var $component = function(state) {
  return $h('div'
    , [{class: 'container'}]
    , $h('p', [], 'The counter is: ' + state.counter)
  );
}
$('#app').replaceWith($component);