# unified-state

> glue together components and channels

Latest version **1.0.1** (published 2016-04-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install unified-state
pnpm add unified-state
yarn add unified-state
bun add unified-state
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2016-04-05 |
| First published | 2016-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nlocnila |
| Maintainers | nlocnila |

## Links

- npm: https://www.npmjs.com/package/unified-state
- npm.io page: https://npm.io/package/unified-state

## Dependencies (4)

- [xtend](https://npm.io/package/xtend.md) ^4.0.1
- [observ](https://npm.io/package/observ.md) ^0.2.0
- [dom-delegator](https://npm.io/package/dom-delegator.md) ^13.1.0
- [observ-struct](https://npm.io/package/observ-struct.md) ^6.0.0

## Recent versions

- 1.0.1 (latest) — 2016-04-05
- 1.0.0 — 2016-03-28

## README

# unified-state
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

Glue together components and event handlers

## Motivation

This code is taken from [mercury](https://github.com/Raynos/mercury) which allows you to create a state that binds event handlers (also referred to as `channels` or `handles`) using [dom-delegator](https://github.com/Raynos/dom-delegator). Ideal for instances where you don't want to require the entire mercury package.

## Install

    $ npm install unified-state

## Usage

Here's a modified version of the mercury's trivial example on their `README`

```javascript
'use strict'

var document = require('global/document')
var extend = require('xtend')
var main = require('main-loop')
var observ = require('observ')
var send = require('value-event/event')
var unified = require('unified-state')
var h = require('virtual-dom/h')
var virtualize = require('vdom-virtualize')
var Delegator = require('dom-delegator')

function App () {
  return unified({
    value: observ(0),
    channels: {
      clicks: incrementCounter
    }
  })
}

function incrementCounter (state) {
  state.value.set(state.value() + 1)
}

App.render = function render(state) {
  return h('div.counter', [
    'The state ', h('code', 'clickCount'),
    ' has value: ' + state.value + '.', h('input.button', {
      type: 'button',
      value: 'Click me!',
      'ev-click': send(state.channels.clicks)
    })
  ])
}

var target = document.body.firstChild

var opts = {
  initialTree: virtualize(target),
  target: target
}

Delegator(opts)

var app = App()
var loop = main(app, App.render, extend({
  diff: require('virtual-dom/diff'),
  create: require('virtual-dom/create-element'),
  patch: require('virtual-dom/patch')
}, opts))

app(loop.update)
app.set(app())
```

## API
### unified(obj) -> observ-struct
`obj` refers to a key/value object containing components/values and event-handlers (channels or handles). Returns an object with fixed key/value pairs [observ-struct](https://github.com/Raynos/observ-struct) and an updated dom-delegator instance with bound handlers. See above example.

## License
MIT

---
_Source: https://npm.io/package/unified-state · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._