Redux + jQuery + Cheerio = predictable client-side state + server-side testability

While Requerio was named with Cheerio in mind, Cheerio is optional and can be replaced by jQuery on the server via JSDOM, or any other DOM emulator.

Install:

npm install requerio redux cheerio

- or -

npm install requerio redux jquery jsdom

Declare $:

const cheerio = require('cheerio');
const html = fs.readFileSync('./index.html', 'utf8');
const $ = global.$ = cheerio.load(html);

- or -

const {JSDOM} = require('jsdom');
const html = fs.readFileSync('./index.html'), 'utf8');
const {window} = new JSDOM(html);
global.window = window;
global.document = window.document;
const $ = global.$ = require('jquery');

- or -

<script src="jquery.min.js"></script>

Declare Redux:

const Redux = global.Redux = require('redux');

- or -

<script src="redux.min.js"></script>

Declare Requerio:

const Requerio = require('requerio');

- or -

<script src="requerio.min.js"></script>

Declare $organisms:

At declaration, organisms are just empty namespaces.

const $organisms = {
  '#yoda': null,
  '.midi-chlorian': null
};

Instantiate requerio:

const requerio = new Requerio($, Redux, $organisms);

Initialize requerio:

requerio.init();

Use:

// During initialization, the null `$organisms['#yoda']` underwent
// inception into Requerio organism `requerio.$orgs['#yoda']`. This
// organism has properties, methods, and state. It is home to the
// `.midi-chlorian` organisms. (A productive biome would want them to
// be symbionts and not parasites!) To demonstrate that `#yoda` is
// alive and stateful, let's dispatch a `css` action to give it a
// `color:green` css property.
requerio.$orgs['#yoda'].dispatchAction('css', {color: 'green'});

// This action will turn the organism's text green in the browser.
// We can observe its state after dispatching the action.
const mainState = requerio.$orgs['#main'].getState();

// In Node, we can test to ensure the action updated the state correctly.
assert.equal(mainState.css.color, 'green');

Why Requerio?

API docs

Methods supported:

• addClass
• after
• append
• attr
• before
• css
• data
• detach
• empty
• height
• html
• prepend
• prop
• remove
• removeClass
• removeData
• scrollLeft
• scrollTop
• setActiveOrganism
• setBoundingClientRect
• text
• toggleClass
• val
• width
• blur
• focus

See also the code examples.