stateful-widget.js

function StatefulRender(createState, renderState) {
    function Widget(item) {
        if (!(this instanceof Widget)) {
            return new Widget()
        }
        
        this.key = item.id
    }

    Widget.prototype.name = "MyWidgetName"
    Widget.prototype.init = init
    Widget.prototype.update = update
    Widget.prototype.destroy = destroy

    return Widget

    function init() {
        var elem = this.elem = document.createElement("li")
        var state = this.state = createState()

        renderState(state, elem)
        return elem
    }

    function update(left, right) {
        var state = right.state = left.state
        var elem = right.elem = left.elem

        renderState(state, elem)
    }

    function destroy() {
        this.elem = null
        this.state = null
    }
}

var NumberWidget = StatefulRender(
    function createState() { return { count: 0 } },
    function renderState(state, elem) {
        state.count++
        elem.textContent = "rendered " + state.count + " times"
    }
)

module.exports = render

function render(list) {
    return h("ul", list.map(NumberWidget)
}