usage.js

var fold = require("reducers/fold")
var Stream = require("stream-reduce/stream")

var Person = require("./person-widget")

// Pass in state as either object
var p = Person({
    name: "some name"
    , imageUri: "http://placekitten.com/50/50"
})

// or as some kind of reducible representation of person over time
var p = Person(reducibleState)

document.body.appendChild(p.view)

// handle changes coming from UI
fold(p.ignores, function (event) {
    // do stuff with events
})

// or fuck reducible and handle as stream
var stream = Stream(p.replies)

stream.on("data", function (event) {
    
})

widget.js

var events = require("dom-reduce/event")
var map = require("reducers/map")
var merge = require("reducers/merge")
var html = require("unpack-html")
var extend = require("xtend")

var template = '\
    <li class="person">\
        <img class="person-image" data-marker="image"></img>\
        <div class="person-details">\
            <span data-marker="name"></span>\
            <button data-marker="message"> Message </button>\
            <button data-marker="ignore"> Ignore </button>\
        </div>\
    </li>'

module.exports = Person

/*
    A widget takes stateful representation of input that
        needs to be rendered.

    It returns (DOM-agnostic) state changes produced by DOM and
        a DOMElement as view / element property.
*/
function Person(person) {
    var elements = unpack(template)

    // bind data to DOM. Every time person changes update the
    // entire view.
    fold(person, function (person) {
        elements.name.textContent = person.name
        elements.image.src = person.imageUri
    })

    // convert message clicks into reply events with correct
    // state context
    var replies = map(events(elements.message, "click"), function () {
        return {
            type: "reply"
            , id: person.id
            , name: person.name
        }
    })

    // convert ignore clicks into ignore events with correct
    // state context
    var ignores = map(events(elements.ignore, "click"), function () {
        return {
            type: "ignore"
            , id: person.id
            , name: person.name
        }
    })

    // return Reducible containing state events for this widget
    // and return view
    return {
        replies: replies
        , ignores: ignores
        , view: elements.root
    }
}