node package manager


Omnipotent NPM version Build Status Dependency Status Gitter

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 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 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<string>, 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.


Require the decorator by doing:

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


var structure = immstruct({ hero { name: 'Natalia Romanova' } });
var Title = component('View', ({hero}) => <h1>{name.deref()}</h1>);
var ObservedTitle = observer(structure, {
  hero: ['hero', 'name'] // key path in structure
}, Title);
// Update structure and component
structure.cursor('hero').set('name', 'Black Widow');
// Also for things like async fetch
  .then(r => r.json())
  .then(d => structure.cursor().set('hero', Immutable.Map(d));

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

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


Require the decorator by doing:

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


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() {
    IgnoredTitle({ hero: struct.cursor('hero'), ignore: struct.cursor('ignorable') }),
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.


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


var component = require('omnipotent/helper/jsx-component');
var View = component(() => <h1>Hello!</h1>);
React.render(<View />, document.getElementById('content'));


MIT License