A rendering loop for diffable UIs

main-loop is an optimization module for a virtual DOM system. Normally you would re-create the virtual tree every time your state changes. This is not optimum, with main-loop you will only update your virtual tree at most once per request animation frame.

main-loop basically gives you batching of your virtual DOM changes, which means if you change your model multiple times it will be rendered once asynchronously on the next request animation frame.

var mainLoop = require("main-loop")
var h = require("virtual-dom/h")

var initState = { fruits: ["apple", "banana"], name: "Steve" }

function render(state) {
    return h("div", [
        h("div", [
            h("span", "hello "),
            h("span.name", state.name)
        ]),
        h("ul", state.fruits.map(renderFruit))
    ])

    function renderFruit(fruitName) {
        return h("li", [
            h("span", fruitName)
        ])
    }
}

// set up a loop
var loop = mainLoop(initState, render, {
    create: require("virtual-dom/create-element"),
    diff: require("virtual-dom/diff"),
    patch: require("virtual-dom/patch")
})
document.body.appendChild(loop.target)

// update the loop with the new application state
loop.update({
    fruits: ["apple", "banana", "cherry"],
    name: "Steve"
})
loop.update({
    fruits: ["apple", "banana", "cherry"],
    name: "Stevie"
})

Create a loop object with some initial state, a render function, and some options. Your function render (state) {} receives the current state as its argument and must return a virtual-dom object.

You must supply: opts.diff, opts.patch, and opts.create. These can be obtained directly from require("virtual-dom").

Optionally supply an opts.target and opts.initialTree.

The main-loop root DOM element. Insert this element to the page.

Update the page state, automatically re-rendering the page as necessary.

Read the current main-loop state. To modify the loop state, use loop.update().

npm install main-loop

• Raynos