Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A WebComponent Framework
JavaScript CSS HTML

README.md

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.

Demo Page

See the demo page.

Site structure

www-root/
 +- css/
 |  +- base.css
 |  `- bootstrap.min.css
 +- js/
 |  +- libs/
 |  |  +- bootstrap.min.css
 |  |  +- handlebars.js
 |  |  `- jquery-1.8.1.min.js
 |  `- will/
 |     +- components/
 |     |  +- jqueryui/
 |     |  |  `- slider.js [2]
 |     |  +- modal.js [4]
 |     |  `- popMessage.js [3]
 |     +- config.js [1]
 |     `- will.min.js
 `- index.html

Links

  1. www-root/js/will/config.js
  2. www-root/js/will/components/jqueryui/slider.js
  3. www-root/js/will/components/popMessage.js
  4. www-root/js/will/components/modal.js

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)
        "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
        };
    }
);

Modes

DEV mode

In this mode, 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

PROD mode

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

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

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!

Something went wrong with that request. Please try again.