lawnmower

This is a simple virtual DOM library that is intended for embedded use in framework-agnostic web UI components.

While the JSX is supported, unlike React, lawnmower deals with element attributes rather than their properties and is not in any way compatible with React.

Simple Example

ECMAScript5 Syntax

// Simple digital clock renderer
var el = lawnmower.el;
function fillZero(number) {
    if (number < 10) {
        return '0' + String(number);
    } else {
        return String(number);
    }
}
function renderTime() {
    var date = new Date();
    return el('div', null,
        el('h1', null, 'Clock'),
        el('div', null,
            fillZero(date.getHours()),
            ':',
            fillZero(date.getMinutes()),
            ':',
            fillZero(date.getSeconds())
        )
    );
}
var tree = lawnmower.render(renderTime());
document.body.appendChild(tree.ref);
setInterval(function () {
    tree = lawnmower.update(renderTime(), tree);
}, 1000);

JSX

// Simple digital clock renderer
/** @jsx lawnmower.el */
function fillZero(number) {
    if (number < 10) {
        return '0' + String(number);
    } else {
        return String(number);
    }
}
function renderTime() {
    var date = new Date();
    return <div>
        <h1>Clock</h1>
        <div>
            {fillZero(date.getHours())}
            ':'
            {fillZero(date.getMinutes())}
            ':'
            {fillZero(date.getSeconds())}
        </div>
    </div>;
}
var tree = lawnmower.render(renderTime());
document.body.appendChild(tree.ref);
setInterval(function () {
    tree = lawnmower.update(renderTime(), tree);
}, 1000);