Composition about hover HOT 1 CLOSED

While looking at a way to simplify the TodoMVC example application, I came up with a slight addition to Hoverboard.compose that'll make this much more powerful.

What if you could pass any number of "translate" functions to Hoverboard.compose after the first argument, and have them translate or map the state automatically?

For example, in TodoMVC, I have a TodoStore for all the todos, and then I created an ActiveStore and CompletedStore which contain only the active/completed todos. Here's how I currently have to achieve this:

// create a simple store definition that allows setting a single list property
var ListStore = {
    list: function (state, list) {
        return { list: list };
    }
};

// create stores to contain the active and completed todos
var ActiveStore = Hoverboard(ListStore);
var CompletedStore = Hoverboard(ListStore);

TodoStore.getState(function (state) {
    var all = state.list;

    // when the TodoStore changes, set the lists in these two stores with filtered lists
    ActiveStore.list(_.filter(all, { completed: false }));
    CompletedStore.list(_.filter(all, { completed: true }));
});

Unfortunately, the new Hoverboard.compose does nothing to make this easier. So what if we could just do this instead?

// create stores to contain the active and completed todos
var ActiveStore = Hoverboard.compose(TodoStore, function (state) {
    return {
        list: _.filter(state.list, { completed: false })
    };
});

var CompletedStore = Hoverboard.compose(TodoStore, function (state) {
    return {
        list: _.filter(state.list, { completed: true })
    };
});

This would be incredibly powerful, especially combined with the rest of Hoverboard.compose's functionality. It'd create a reactive approach to Flux, so you could have data flow from any number of sources, and be mapped and translated into the shape you need.

Another great thing, it'll only need a couple extra lines of code added to Hoverboard.compose.

from hover.