/willjs

A great way to load assets on-demand, and a awesome way to develop components for webpages.

Primary LanguageJavaScriptOtherNOASSERTION

WillJS

A simple way to invoke on-demand behaviors into your website pages.

Public API

will.call("componentName")(param1, param2);            // invokes a component
will.use("/jquery.js", "/jquery-ui.js")();             // loads required assets if not present yet.

Configuration

will.configure(function (config) {
    config.mode = will.modes.DEV;                      // default mode
    config.queryString = "_=useThisForCaching";

    config.addDomain(
        "local",                                       // default domain
        "/javascripts/will/",                          // default component domain (repository)
        false);                                        // load by ajax (json/jsonp, default)

    config.addDomain(
        "remote",                                      // another domain sample
        "/javascripts/will-scripts/",                  // components repository
        true,                                          // load as script (js)
        will.modes.PROD);                              // mode (optional, null: use default)

    config.defaultPackage = "root";                    // default package
});

Components

The components are automatically loaded by AJAX and stored on Will's registry.

// {host}/javascripts/will/doSomething.json
{
    getResponder: function (will) {
        // do something before return the component
        return function (param1, param2) {
            var will = this;
            // do something the user requests to
        };
    },
    rescue: function () {/* fallback */},              // error loading assets
    assets: [                                          // required assets (optional)
        "/stylesheets/base1.css",
        "/javascripts/lib1.js",
        "/javascripts/lib2.js"
    ]
}

Adding components directly

If you prefere to load components as script, you need to perform the instruction below:

will.addComponent("doSomething", {
    getResponder: function (will) {
        // do something before return the component
        return function (param1, param2) {
            var will = this;
            // do something the user requests to
        };
    },
    rescue: function () {/* fallback */},              // error loading assets
    assets: [                                          // required assets (optional)
        "/stylesheets/base1.css",
        "/javascripts/lib1.js",
        "/javascripts/lib2.js"
    ]
});

Modes

DEV mode

In this mode, the components are fetched by your entire path location. Example:

will.call("doSomething")();                             // /javascripts/will/doSomething.json
will.call("local:root.doSomething")();                  // same as above
will.call("mypack.doSomething")();                      // /javascripts/will/mypack/doSomething.json
will.call("local:mypack.doSomething")();                // same as above

PROD mode

In this mode, the components are fetched by your package location. Example:

will.call("doSomething")();                             // /javascripts/will/root.json
will.call("local:root.doSomething")();                  // same as above
will.call("mypack.doSomething")();                      // /javascripts/will/mypack.json
will.call("local:mypack.doSomething")();                // same as above

When grouping components inside a package, the JSON components file must be like below:

// {host}/javascripts/will/root.json
{
    doSomething: {
        getResponder: function (will) {
            // do something before return the component
            return function (param1, param2) {
                var will = this;
                // do something the user requests to
            };
        },
        rescue: function () {/* fallback */},           // error loading assets
        assets: [                                       // required assets (optional)
            "/stylesheets/base1.css",
            "/javascripts/lib1.js",
            "/javascripts/lib2.js"
        ]
    },
    otherComponent: { /* and so on... */ }
}

Customized WillJS

will.as("myWill").configure(function (config) {
    config.mode = will.modes.DEV;                       // default mode
    config.defaultPackage = "root";                     // default package
});
// Public API
myWill.call("componentName")(param1, param2);           // invokes a component
myWill.use("/jquery.js", "/jquery-ui.js")();            // loads required assets if not present yet.

Enjoy in moderation!