thunk-update-next.js

var render = require('virtual-dom/render');
var diff = require('virtual-dom/diff');
var enqueue = require('virtual-dom/enqueue');
var patch = require('virtual-dom/patch');

module.exports = partial;

/*
type Widget := {
  init: () => DOMElement,
  update: (previous: Widget) => DOMElement,
  destroy: () => void
}
*/

function partial(fn) {
    var args = [].slice.call(arguments, 1);

    return new Thunk(fn, args);
}

function Thunk(fn, args) {
    this.fn = fn;
    this.args = args;
    this.elm = null;
    this.tree = null;
    this.patches = null;
}

var type = Thunk.prototype.type = 'thunk@version';

Thunk.prototype.init = function () {
    this.tree = this.fn.apply(null, this.args);
    this.elem = render(tree);
    return this.elem;
};

Thunk.prototype.update = function (next) {
    // prev is not a Thunk. However prev is always a Widget
    if (next.type !== type) {
        return next.init();
    }

    next.elem = this.elem;

    if (next.fn === this.fn &&
        next.args.length === this.args.length &&
        next.args.every(function (arg, index) {
            return this[index] === arg;
        }, this)
    ) {
        next.tree = this.tree;
        return null;
    }

    next.tree = next.fn.apply(null, next.args);
    next.patches = diff(leftTree, rightTree);

    // use an `enqueue` function from virtual-dom.
    // this is the global queue to apply patches in a raf loop
    enqueue(function () {
        var next = this;
        patch(next.elem, next.patches);
        next.patches = null;
    }, next);

    // it is very important that you call `left.update(right)`
    // and then call `right.update(right2)` and then
    // `right2.update(right3)`
    // if you call `left.update(right)` `left.update(right2)`
    // `left.update(right3)` this will completely break
};

thunk-update-prev.js

var render = require('virtual-dom/render');
var diff = require('virtual-dom/diff');
var enqueue = require('virtual-dom/enqueue');
var patch = require('virtual-dom/patch');

module.exports = partial;

/*
type Widget := {
  init: () => DOMElement,
  update: (previous: Widget) => DOMElement,
  destroy: () => void
}
*/

function partial(fn) {
    var args = [].slice.call(arguments, 1);

    return new Thunk(fn, args);
}

function Thunk(fn, args) {
    this.fn = fn;
    this.args = args;
    this.elm = null;
    this.tree = null;
    this.patches = null;
}

var type = Thunk.prototype.type = 'thunk@version';

Thunk.prototype.init = function () {
    this.tree = this.fn.apply(null, this.args);
    this.elem = render(tree);
    return this.elem;
};

Thunk.prototype.update = function (prev) {
    // prev is not a Thunk. However prev is always a Widget
    if (prev.type !== type) {
        return this.init();
    }

    this.elem = prev.elem;

    if (prev.fn === this.fn &&
        prev.args.length === this.args.length &&
        prev.args.every(function (arg, index) {
            return this[index] === arg;
        }, this)
    ) {
        this.tree = prev.tree;
        return null;
    }

    this.tree = this.fn.apply(null, this.args);
    this.patches = diff(leftTree, rightTree);

    // use an `enqueue` function from virtual-dom.
    // this is the global queue to apply patches in a raf loop
    enqueue(function () {
        patch(this.elem, this.patches);
    }, this);
};