Virtual DOM based, template engine agnostic UI library.

var component = hyperd(document.getElementById('count'), function() {
  return '<div id="count">Counter: ' + this.data.count + '</div>';
});

component.data.count = 0;

setInterval(function() {
  component.data.count++;
}, 1000);

Differently from any other Virtual DOM based libraries, your UI is defined as just a html string on this library, which allows you to use along with your favorite template engines in a flexible manner.

$ npm install hyperd

<script src="node_modules/hyperd/hyperd.js"></script>

$ bower install hyperd

• Virtual DOM diffing
• Template engine agnostic
• Auto-redrawing
• Building reusable components
• Small API

• Counter (source)
• Counter Component (source)
• TodoMVC (source)

• node HTMLElement Node to attach
• render Function Called upon redrawing, must return a html string.
• Return: hyperd.Component

A short circuit to create a component instance.

The base component class.

• proto Object protoype object
• Return: Function A new component constructor

Creates a new component class.

var MyComponent = hyperd.Component.extend({
  render: function() {
    return '<div>hi</div>';
  }
});

• props Object properties

In classes that extends hyperd.Component, make sure to call the super constructor so that the all settings can be initialized.

hyperd.Component.extend({
  constructor: function(props) {
    hyperd.Component.apply(this, arguments);
    ...
  }
});

The properties of the component.

var component = new MyComponent({ foo: "hi" });
console.log(component.props.foo); // "hi"

The state data of the component. Mutating data triggers UI updates.

The node element which the component is attached to.

Definitions of child components. You can use defined components like a custom element on render().

var Child = hyperd.Component.extend({
  render: function() {
    return '<div>' + this.props.foo + '</div>';
  }
});

hyperd.Component.extend({
  components: { child: Child },
  render: function() {
    return  '<div><child foo="hi"></div>'
  }
});

• node HTMLElement
• Return: this

Attaches the component to a DOM node.

new MyComponent().attachTo(document.getElementById('foo'));

• Return: String A html string to render.

Note: implement this function, but do NOT call it directly.

Required to implement. This method is called automatically and asynchronously when you update component.data.

Teardown and delete all properties and event bindings including descendant components.

• event String The event type to be triggered.
• Return: this

Trigger a DOM event for component.node with the supplied arguments.

component.emit('edit', arg);

• event String The event type.
• listener Function
• Return: this

Add a listener for the specified event.

component.on('render', function() { ... });

• event String The event type.
• selector String CSS selector.
• listener Function The listener always take an event object as the first argument.
• Return: this

Add a listener for the delegated event. The listener is called only for descendants that match the selector. You can use this to listen an event of a child component too.

hyperd.Component.extend({
  constructor: function() {
    hyperd.Component.apply(this, arguments);
    this.on('click', 'button', function(event) {
      console.log('clicked!');
    });
  }
  render: function() {
    return  '<div><button type="button">Click me!</button></div>'
  }
});

Remove a listener for the specified event.

Remove a listener for the delegated event.

Remove all listeners, or those of the specified event or the delegated event.

Called upon after the component is attached to a node.

Called upon after the component is rerendered.

Called upon after the component is destroyed.

The same as component.onAttach.

component.on('attach', function() { ... });

The same as component.onRender.

The same as component.onDestroy.

The identifier used to differentiate a node for Virtual DOM diffing. Used to reconcile an element will be reordered or destroyed.

hyperd.Component.extend({
  render: function() {
    var items = ['foo', 'bar', 'baz'];
    return '<ul>' + items.map(function(item) {
      return '<li data-hkey="' + item + '">' + item + '</li>';
    }).join('') + '</ul>';
  }
});

MIT