# observable

> A function as representation of a trackable mutable value.

Latest version **2.1.4** (published 2015-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install observable
pnpm add observable
yarn add observable
bun add observable
```

## 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 | 2.1.4 |
| Published | 2015-08-03 |
| First published | 2012-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 112 |
| Author | Dominic Tarr |
| Maintainers | raynos, dominictarr |

## Links

- npm: https://www.npmjs.com/package/observable
- Repository: https://github.com/dominictarr/observable
- Issues: https://github.com/dominictarr/observable/issues
- npm.io page: https://npm.io/package/observable

## Recent versions

- 2.1.4 (latest) — 2015-08-03
- 2.1.3 — 2013-11-12
- 2.1.2 — 2013-09-28
- 2.1.1 — 2013-06-08
- 2.1.0 — 2013-05-22
- 2.0.1 — 2013-04-22
- 2.0.0 — 2013-04-21
- 1.4.2 — 2013-04-06
- 1.4.1 — 2013-02-26
- 1.4.0 — 2013-02-23
- 1.3.1 — 2013-02-20
- 1.3.0 — 2013-02-19
- 1.2.0 — 2013-02-17
- 1.1.1 — 2013-02-05
- 1.1.0 — 2013-01-29
- … 5 more at https://npm.io/package/observable/versions

## README

# observable

A function as representation of a trackable mutable value.

[![testling badge](https://ci.testling.com/dominictarr/observable.png)](https://ci.testling.com/dominictarr/observable)


[Interactive Demo](http://dominictarr.github.com/observable)

It's basically just a `function` that can be called in 3 ways,
If an observable is called with no arguments `f()`, it returns the current value.
If it is called with an argument `f(value)`, it set that as the value.

``` js
var o = require('observable')
var v = o()

//set the value
v(Math.random())

//get the value
v()
```

If an observable is called with another function, it _calls_ that function with the new value, 
whenever the value changes.

```
v(function(v){
  console.log('Was changed to', v)
})
```

And to stop being notifed of these changes, call the function that was returned

```
var stop = v(function(v){
  console.log('Was changed to', v)
})
// then some time later
stop()
```

## value

``` js
var o = require('observable')
var v = o()

v(0)

setInterval(function () {
  v(v() + 1)
}, 500)

v
```

How is this demo updating in real-time like that?
It's because `observable` is integrated into 
[hyperscript](https://github.com/dominictarr/hyperscript)!

## input, & transform

observe a input field, and transform it into different string.
this transformation is a one way observable.

``` js
var o = require('observable')
var h = require('hyperscript')
var yourName
  
h('div', 
  h('h3', 'hello, what is your name?',
    yourName = h('input', {placeholder: 'enter name'})
  ),
  h('h2', o.transform(o.input(yourName), function (v) {
    return v ? 'Happy Birthday ' + v.toUpperCase() + ' !!!': ''
  }), {style: {'font-family': 'Comic Sans MS'}})
)
```

Oh, wow! wasn't that easy! and we did a lot of things there!

* made hyper text that updated in realtime
* read from an input as you typed
* transformed user input

And there is many other cool things we can do to!

# not

Invert a boolean `observable`

``` js
var o = require('observable')
var h = require('hyperscript')
var _i, i
h('div',
  _i = h('input', {type: 'checkbox'}),
  'checked:', i = o.input(_i, 'checked', 'change'),
  ' !checked:', o.not(i)
)
```

Hmm, I wonder if we could couple two things interms of each other?

``` js
var o = require('observable')
var h = require('hyperscript')
var _i = h('input', {type: 'checkbox'})
var _j = h('input', {type: 'checkbox'})
var i = o.input(_i, 'checked', 'change')
var j = o.input(_j, 'checked', 'change')

//just make i != j & j != i
i(Math.random() < 0.5)

o.bind2(o.not(i), j)

h('div', _i, _j)
```

## compute

Compute a value from others, like a computed value in SQL.

``` js
var o = require('observable')
var h = require('hyperscript')
var i, j
h('div', 
  i = h('input', {placeholder: 'first name'}),
  j = h('input', {placeholder: 'last name'}),
  h('h1', 'Greetings, ',
    o.compute([o.input(i), o.input(j)], function (f, l) {
      return f + ' ' + l + (f && l ? ' !' : '')
    })
  )
)
```

## hover & focus

``` js
var h = require('hyperscript')
var o = require('observable')

h('div', 
  strong = h('strong', {
      contentEditable: true,
      style:{display: 'inline-block'}
    }, 
    "editable thing"
  ),
  h('ul', 
    h('li', 'focus: ', o.focus(strong)), 
    h('li', 'hover: ', o.hover(strong))
  )
)
```

## signal 

Like observable except only update listeners when the value actually changes.

``` js
var s = require('observable').signal
```

## License

MIT

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