example.js

var Widget = require("modular-widget")

var template = '\
    <div>\
        <div class="bar" data-unpack="bar"></div>\
    </div>'

var css = '\
    .bar {\
        -webkit-transition: width ease-in 1s;\
        transition: width ease-in 1s;\
        height: 5px;\
        margin: 2px;\
        background: "orange";\
    }'

/*
    var barChart = require("./my-component")

    var chart = barChart({ apple: 20, oranges: 30 })
    document.body.appendChild(chart.view)
*/
module.exports = Widget(template, css, implementation)

function implementation(elements, data) {
    var root = elements.root
    var template = elements.bar

    root.removeChild(template)

    Object.keys(data).forEach(function (key) {
        var elem = template.cloneNode(true)
        elem.style.width = data[key]

        root.appendChild(elem)
    })
}

widget.js

var html = require("unpack-html")
var append = require("insert/append")

var slice = Array.prototype.slice

var head = document.head

module.exports = Widget

/* A widget consists of a few re-usable pieces. At the core
    it's a combination of a HTML template, a CSS piece and a
    javascript implementation.

    A widget is a function that returns some value with a
        view property that is a DOMElement. It's expected to
        have ownership over that DOMElement and it's children.

    It's the responsibility of the widget instantiator to put
        the view property somewhere in the DOM tree.

    When you instantiate the widget function it will create
        a style for the CSS and inject it into the head.

    When you call the widget it will generate a new hash
        of elements from the template using `unpack-html`.

    The `elements` hash is the first parameter, the rest of the
        parameters passed to it are just curried on.

    If the resulting widget doesn't have a view property then
        a view property will be created and set to the root
        property of the elements hash.
*/
function Widget(template, css, impl) {
    if (typeof css === "function") {
        impl = css
        css = null
    }

    if (css) {
        var style = Style(css)

        append(head, style)
    }

    return widget

    function widget() {
        var elements = html(template)
        var args = slice.call(arguments)
        args.unshift(elements)

        var value = impl.apply(null, args) || {}
        if (!value.view) {
            value.view = elements.root
        }

        return value
    }
}

function Style(str) {
    var elem = document.createElement("style")
    elem.type = "text/css"
    elem.textContent = str
    return elem
}