Omnipotent [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][depstat-image]][depstat-url] [![Gitter][gitter-image]][gitter-url]

Omnipotent is a library combining Omniscient.js and immstruct, for providing opinionated helpers and tools for easier use.

Install omnipotent through npm

$ npm install --save omnipotent

Omniscient

> Omniscient is all about making composable UIs in a functional manner. Having pure, referentially transparent components that gives a simpler static mental model, much like the static HTML - but bringing the views in a more powerful context in a programming language. Views will still be declarative and expressive, but without having to work with clunky and weird DSLs/template engines.

Read more about Omniscient.js in the repository README or our homepage.

Decorators

Decorators are modifiers for functions or components. Without modifying the original target, it extends and creates a new entity which has additional features or different behavior. Read more about decorators in Reginald Braithwaite book Allongé.

observer(structure : ImmstructStructure, fields : string|Array, component : Component)

The observer decorator is a very useful one if you need horizontal data dependencies. If you require one of your components to get injected data automatically and update everytime that data changes.

Include

Require the decorator by doing:

var observer = require('omnipotent/decorator/observer');
// or
var observer = require('omnipotent').decorator.observer;

Usage

var structure = immstruct({ hero { name: 'Natalia Romanova' } });

var Title = component('View', ({hero}) =&gt; <h1>{name.deref()}</h1>);

var ObservedTitle = observer(structure, {
  hero: ['hero', 'name'] // key path in structure
}, Title);

render(ObservedTitle({}));

// Update structure and component
structure.cursor('hero').set('name', 'Black Widow');

// Also for things like async fetch
fetch('./hero.json')
  .then(r =&gt; r.json())
  .then(d =&gt; structure.cursor().set('hero', Immutable.Map(d));

ignore(fields : string|Array, component : Component)

The ignore decorator is used to create components which ignore change on certain property names on props passed to a component.

Include

Require the decorator by doing:

var ignore = require('omnipotent/decorator/ignore');
// or
var ignore = require('omnipotent').decorator.ignore;

Usage

var struct = immstruct({
  hero: 'Natasha Romanoff',
  ignorable: 'Cain Marko'
});

var Title = component('View', ({hero, ignore}) =>
  <h1>{hero.deref()} vs. {ignore.deref()}</h1>);

var IgnoredTitle = ignore('ignorable', Title);

function render() {
  React.render(
    IgnoredTitle({ hero: struct.cursor('hero'), ignore: struct.cursor('ignorable') }),
    document.getElementById('content')
  );
}

render();
struct.on('swap', render);

// Will update
struct.cursor().set('hero', 'Natalia Romanova');
// Will not update
struct.cursor().set('ignorable', 'Juggernaut');
// Will update
struct.cursor().set('hero', 'Black Widow');

Other Helpers

Other helpers are non-catogarized helpers that you can use to ease your development with Omniscient.js and immstruct.

Component Factory with JSX as default

Many use JSX as default with Omniscient.js. You can create your own module using withDefaults on Omniscient with jsx: true, but then you'd have to use relative paths or scoped paths in your application. For easier use, you can use omnipotents jsx-defaulted helper.

Include

var component = require('omnipotent/helper/jsx-component');
// or
var component = require('omnipotent').jsxComponent;

Usage

var component = require('omnipotent/helper/jsx-component');
var View = component(() =&gt; <h1>Hello!</h1>);
React.render(