WillJS

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

Introduction

This utility aims to facilitate the use of WebComponents and JavaScript libraries loaded on the page, ensuring its loading only during the actual need to use.

Features

• Triggers a component's calling, with inclusion of JS-libs on demand.
• Manages the CSS dependencies of components and its import order.
• Smart algorithm to import libs only once.
• Works in the "convention over configuration" mode when loading components.

Public API

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

Demo Page

See the demo page.

Configuration

will.configure(function (config) {
    config.queryString = "_=useThisForCaching";

    config.addDomain(
        "local",                                       // default domain
        "/javascripts/will/",                          // default component domain (repository)
        "js");                                         // load as script (js, default)

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

Components

The components are automatically loaded and stored on WillJS's registry.

// {host}/javascripts/will/doSomething.js
will.define(
    "doSomething"       /* Component Name */

  , [                   /* Dependencies, CSSs and JSs */
        "/stylesheets/base1.css"
      , "/javascripts/lib1.js"
      , "/javascripts/lib2.js"
    ]

  , function (will) {   /* Factory */
        // do something before return the component
        return function (param1, param2) {
            var will = this;
            // do something the user requests to
        };
    }
);

Loading components

The components are fetched by your entire path location. Example:

will.call("doSomething")();
  // => /javascripts/will/components/doSomething.js
will.call("local:root.doSomething")();
  // => same as above
will.call("mypack.doSomething")();
  // => /javascripts/will/components/mypack/doSomething.js
will.call("local:mypack.doSomething")();
  // => same as above

Advanced component structure folder (v1.8.x)

will.configure(function (config) {
  config.addDomain("ext", will.dir("../ext/components/{name}/{version}"), "js");
});
will.call("ext:thirdPartyComponent")();
  // => /javascripts/ext/components/thirdPartyComponent/latest/thirdPartyComponent.js
will.call("ext:thirdPartyComponent", "latest")();
  // => same as above
will.call("ext:thirdPartyComponent", "1.5.3")();
  // => /javascripts/ext/components/thirdPartyComponent/1.5.3/thirdPartyComponent.js

Customized WillJS

will.as("myWill").configure(function (config) {
    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.