More awesome HyperApp

[infinnie]

define.require(["jquery", "vendors/app", "vendors/h", "pages/login", "providers/company"],
    function ($, app, h, LoginPage, fetchCompany) {
    "use strict";
    /*@jsx h*/
    $(function () {
        app({
            state: {
                currentPage: null
            },
            view: function (state, actions) {
                return state.currentPage ? state.currentPage(state, actions) : "";
            }, root: $("#app").get(0),
            actions: {
                logIn: function (state, actions) {
                    console.log("Navigating");
                    return $.when(define.requirePromise(["pages/some"]), fetchCompany()).then(function (arr, result) {
                        var SomePage= arr[0];
                        return {
                            currentPage: function (state, actions) {
                                return <SomePage logOut={actions.logOut} company={state.pageData.company} />
                            },
                            pageData: { company: result.company }
                        };
                    });
                }, inputToggle: function (state, actions, update) {
                    var ret = {};
                    ret[update.control] = $.extend({}, state.pageData[update.control], { focus: update.value });
                    return {
                        pageData: $.extend({}, state.pageData, ret)
                    };
                }, inputChange: function (state, actions, update) {
                    var ret = {};
                    ret[update.control] = $.extend({}, state.pageData[update.control], { value: update.value });
                    return {
                        pageData: $.extend({}, state.pageData, ret)
                    };
                }, logOut: function () {
                    var d = $.Deferred();
                    setTimeout(function () {
                        d.resolve({
                            currentPage: function (state, actions) {
                                return <LoginPage submit={function () {
                                                    actions.logIn && actions.logIn();
                                                    return false;
                                                }} usernameCtrl={state.pageData.username}
                                                  passwordCtrl={state.pageData.password}
                                                  inputToggle={actions.inputToggle}
                                                  inputChange={actions.inputChange
                                } />
                            },
                            pageData: {
                                username: {
                                    ctrl: "username",
                                    focus: false,
                                    value: ""
                                },
                                password: {
                                    ctrl: "password",
                                    focus: false,
                                    value: ""
                                }
                            }
                        });
                    }, 1);
                    return d.promise();
                }
            }, events: {
                resolve: function (state, actions, result) {
                    return function (update) {
                        $.when(result).then(update);
                        return result;
                    };
                }, load: function (state, actions, result) {
                    actions.logOut();
                }, render: function () {
                    console.log("Rendering...");
                }
            }
        });
    });
});

[jorgebucaran]

@infinnie What is this magic? 😄

[infinnie]

Imagine that for every component change (say, in an SPA) one wanted to get both the component (here define.requirePromise()) and the initializing data for that component (say, fetchCompany()) asynchronously. It would be hard for him or her to ensure that the app renders only once for every component change (I know that it is asynchronous, but…).

Including a function that can return the updated component itself along with the initializing data in the return value of an action, and calling the function in view() when it gets rendered, would solve the problem.