Mithril Components using a Module Loader

component.js

var m = require("mithril");

module.exports = function Component(ctrl) {
    var foo = ctrl.Component.foo = m.prop(5);
    
    ctrl.Component.clicked = function() {
        ctrl.Component.foo(++foo);    
    };
    
    return function ComponentView() {
        return m("div", {
            onclick : ctrl.Component.clicked
        }, ctrl.Component.foo());
    };
};

input.js

var m = require("mithril");

module.exports = function Input(ctrl) {
    return function InputView(type, value) {
        return m("input", {
           type : type,
           value : value
        });
    };
};

many.js

var m = require("mithril");

module.exports = function Many(ctrl) {
    var selfCtrl = {
        bloop : m.prop("You take my self, you take my self control"),
        clicked : function() {
            selfCtrl.bloop("You got me livin' only for the night");
        }
    };
    
    // If you wanted access to it on the ctrl.many namespace
    ctrl.many = ctrl.many || [];
    ctrl.many.push(selfCtrl);
    
    return function ManyView() {
        return m("div", {
            // you take, you take my selfCtrl
            onclick : selfCtrl.clicked
        }, selfCtrl.bloop());       
    };
};

module.js

var m = require("mithril"),
    ctrl = {},
    ComponentView = require("./component")(ctrl),
    InputView = require("./input")(ctrl),
    PassView = require("./passthrough")(ctrl),
    Many = require("./many"),
    many1 = Many(ctrl),
    many2 = Many(ctrl);

module.exports = {
    // Ideally I could just do controller : ctrl, 
    controller : function() {
        ctrl.areYou = m.prop("I'm a pass view");
        ctrl.sureYouAre = function() {
            ctrl.areYou("No you're not");
        };
       
        return ctrl;
    },
    view : function(ctrl) {
        return m("div", [
            m("h1", "Testing"),
            ComponentView(),
            InputView("text", "Some text here"),
            PassView({
                onclick : ctrl.sureYouAre
            }, ctrl.areYou()),
            // these are different
            many1(),
            many2()
        ]);
    }
};

passthrough.js

var m = require("mithril");

module.exports = function Pass(ctrl) {
    return function PassView(params, value) {
        // Do a bunch of complicated styling, event handling, and/or billions of children
        return m("div", params, value);
    };
};