copernicium

A unidirectional frontend framework, based on github.com/Raynos/mercury, with the following features:

• Observable app state
• Reactive rendering using a virtual DOM
• Event dispatching via channels

Used correctly, you can implement an app with a unidirectional loop:

initial state ---> render view ---> dispatch events
                      ^                    |
                      |                    |
                      +--- update state <--+

Usage

Here's a minimal app that contains an on/off button that you can toggle by pressing it:

var cn = require('copernicium');

cn(
	// Root - node the app will be rendered inside
	document.body,
	// State - an observable, immutable model
	cn.state({
		isOn: cn.value(false),
		// Channels - can receive events & data from the DOM
		channels: {
			toggle: function (state) {
				state.isOn.set(!state.isOn());
			}
		}
	}),
	// Render function - creates a virtual DOM used to patch the real DOM
	function (state) {
		return cn.h('button', {
			// Delegated UI events that are sent to channels
			'ev-click': cn.send.click(state.channels.toggle, {})
		}, state.isOn ? 'ON' : 'OFF');
	}
);

Example Apps

To try the any of the examples (including the minimal app above) in the examples/ directory:

$ cd examples/<dirname>
$ npm install
$ npm start