https://github.com/colingourlay/copernicium

A unidirectional frontend framework, based on https://github.com/Raynos/mercury. Expect this to change a lot before the dust settles (mainly opinions on how components should play together)
https://github.com/colingourlay/copernicium

Last synced: 2 months ago
JSON representation

A unidirectional frontend framework, based on https://github.com/Raynos/mercury. Expect this to change a lot before the dust settles (mainly opinions on how components should play together)

• Host: GitHub
• URL: https://github.com/colingourlay/copernicium
• Owner: colingourlay
• Created: 2015-03-17T03:39:46.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-03-24T00:16:38.000Z (about 10 years ago)
• Last Synced: 2025-01-28T13:27:14.317Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 125 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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:

```js

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:

`$ npm run example `

To get a listing of available examples:

`$ npm run example`