Tiny, efficient DOM components
JavaScript CoffeeScript Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.npmignore
.travis.yml
Makefile
README.md
package.json
sprig.js
sprig.min.js

README.md

Sprig

Build Status

Getting started

Download uncompressed (~ 6,5KB) or minified (~ 4KB)

Sprig has no dependencies but can be used with jquery by setting Sprig.$ to an instance of jquery like this:

Sprig.$ = window.jQuery

Now component instances will have an $el reference which is component.el as wrapped by $().

Usage examples

Hello world

Register the hello-world component by calling the Sprig.define() method. It takes one parameter a componentId and returns a component definition. The component definition can then be configured with an init function, which will be called every time a matching component is detected in the DOM.

Sprig.define('hello-world').init(function(component) {
  component.el.innerHTML = "Hello World!";
});

Inserting a hello-world component to the body:

document.body.innerHTML = '<div data-sprig-component="hello-world"></div>';
Sprig.scan(document.body); // Will look for and initialize any uninitialized components found in the document body.

Will result in:

Hello World

Nesting

Components inserting other components just works:

Sprig.define('parent').init(function(component) {
  component.el.innerHTML = 'I am the parent. This is my child: <div data-sprig-component="child"></div>';
});

Sprig.define('child').init(function(component) {
  component.el.innerHTML = 'I am the child.';
});

Inserting a parent component to the body:

document.body.innerHTML = '<div data-sprig-component="parent"></div>';
Sprig.load(document.body);

... will result in:

I am the parent. This is my child:
I am the child.

Passing data

For convenience, all the HTML5 data-* attributes defined on the element are attached to the component's param property.

Note: For browsers that supports HTML5 data-* attributes, this is a reference to the elements' dataset property

Sprig.define('hello-planet').init(function(component) {
  el.innerHTML = 'Hello '+(component.params.planet || 'mysterious planet');
});

Inserting this hello-planet component to the body:

// planet component with no params
document.body.innerHTML = '<div data-sprig-component="hello-planet"></div>';

// planet component with planet set to moon
var moon = document.createElement("div");
moon.setAttribute("data-sprig-component", "hello-planet");
moon.setAttribute("data-planet", "moon");
document.body.appendChild(moon);
Sprig.scan(document.body);

... will result in:

Hello mysterious planet
Hello moon

Asynchronous components

A common scenario is the need to request data from the server and wait for the server to return it before displaying it. If you are inserting child-components into the component element asynchronously, you will have to call component.scan() in order to have Sprig looking for newly arrived and uninitalized components.

Sprig.define('some-async-component').init(function(component) {
  setTimeout(function(planet) {
    // now we got our planet
    var planet = {name: 'Pluto'}
    component.el.innerHTML = '<div data-sprig-component="hello-planet" data-planet="'+planet.name+'"></div>';
    component.scan();
  }, 1000);
  component.el.innerHTML = "Simulating requesting data from server...";
});