frumpy v0.0.2

Frumpy wraps event handling around the evolving state of an application. It makes no assumptions about event provenance or how the application itself will be used--only that the application will need to update its state in response to certain stimuli.

Frumpy applications consist of a list of a mapping from event names to handling procedures.

Handlers are tuples pairing a String label with a collection of one or more callback routines. When an event is attached to the dispatcher using Frumpy::as, each routine is invoked with an immutable copy of the application's state and any additional arguments supplied by the originating event. Handlers may either return undefined (no changes to the model) or a new JavaScript object representing an updated application state. They may be chained: if multiple handlers are attached to an event, each subsequent handler will receive the transformed state returned by the previous handler in the chain.

Initial state is a POJO containing the initial state of the program.

// An event-handling routine
function onClick (model, evt) {
  evt.preventDefault();
  return Frumpy.extend({}, model, {
    clicks: model.clicks + 1
  });
}

// Another routine; no update to state
function refresh (model) {
  document.querySelector('.counter').innerHTML = model.clicks;
}

// An initial state
var model0 = { clicks: 0};

var f = new Frumpy(model0, [
  // An event handler
  [ 'click', [ onClick, refresh ] ]
];

Finally, an event can be bound to the Frumpy application by using Frumpy::as:

document.addEventListener('click', f.as('click'));

Arguments

Type	Name	Description
Object	model	the initial state of the application model
Array	handlers	a list of handlers for named events

Example

var app = new Frumpy({ foo: 'bar' }, [
  [ 'fizz', [onFizz, logFizz] ],
  [ 'buzz', [onBuzz, logBuzz] ]
]);

window.setInterval(app.as('fizz'), 300);
window.setInterval(app.as('buzz'), 500);

Returns an event listener bound to any matching handlers in the current Frumpy instance.

Arguments

Type	Name	Description
String	name	the name of the event

Example

var f = new Frumpy({ foo: 'bar' }, [
  [ 'model:change', [save] ],
  [ 'ajax:load',    [unbind, onLoad] ]
  [ 'ajax:error',   [unbind, onError] ]
]);

function save (model) {
  var request = new XMLHttpRequest();

  request.open('POST', '/states', true);
  request.setRequestHeader('Content-type', 'application/json');

  request.addEventListener('load',  f.as('ajax:load'));
  request.addEventListener('error', f.as('ajax:error'));

  request.send(JSON.stringify(model));
}

function unbind (model, evt) {
  var request = evt.target;
  request.removeEventListener('load');
  request.removeEventListener('error');
}

function onLoad (model, evt) {
  var request = evt.target;
  if (request.status >= 200 && request.status < 300) {
    console.log('A success!', req.responseText);
  }
  else {
    console.log('An error', req.status);
  }
}

function onError () {
  console.error('Failed opening connection');
}

Schedule an event on the dispatcher to be triggered at next tick

Arguments

Type	Name	Description
String	name	the name of the event
args...	-	any additional arguments to forward to the event handling routines

Example

var f = new Frumpy({ foo: 'bar' }, [
  [ 'fizz', [fizz] ]
];

function fizz (model, arg) {
  console.log('fizz', arg);
}

f.trigger('fizz', 3); // "fizz 3"

Return a slice of an array

Alias for Array.prototype.slice

Arguments

Type	Name	Description
Array	arr
Number	start	starting index
Number	end	final index

Retrieve the first item in an Array

Arguments

Type	Name	Description
Array	arr

Retrieve the last item in an Array

Arguments

Type	Name	Description
Array	arr

Retrieve all but the first item in an Array

Arguments

Type	Name	Description
Array	arr

Extend an object.

Arguments

Type	Name	Description
Object	obj	the base object to extend
Object, ...	objs...	additional objects to tack on the end

Copy an object.

Arguments

Type	Name	Description
Object	obj	the base object to copy
Object, ...	objs...	additional objects whose attributes should extend the copied `obj`

Partially apply a function

Arguments

Type	Name	Description
Function	f
args...	-	arguments to apply

History

Arguments

Type	Name	Description
Object	app	a Frumpy application

Example

Frumpy.history(app);

Touch

Arguments

Type	Name	Description
Object	app	a Frumpy application

Example

Frumpy.touch(app, document);

Bind events from an XHR object to a Frumpy application

Arguments

Type	Name	Description
Object	app	the Frumpy application to subscribe to XHR events

Example

var app = new Frumpy(state0, [
  [ 'xhr:load',  [onXhrLoad] ],
  [ 'xhr:error', [onXhrError] ]
]);

function onXhrLoad (model, req) {
  console.log(req.status);
}

function onXhrError (model, xhr) {
  console.log('failed establishing connection');
}

var xhr = Frumpy.xhr(app);
xhr.open('post', '/items');
xhr.send({ foo: 'bar' });