# Rx

3.4kb unzipped DOM binding library which:

- composes updatable values, `Rx`, with `map` and `flatMap`,
- re-render DOM portions under `Rx` values.

Limitations:

- whenever a DOM portion relies on a `Rx`, and the `Rx` value is updated, the
  complete portions is removed and re-created, no matter if the DOM portion is
  almost equal to the portion it replaced,
- no serious performance tests, I only noticed that it was faster than
  `monadic-html` to create and update lots of rows, and slower than
  Vanilla JS.

## Usage

### Hello world

```typescript
import { h, mount } from 'rx'

mount(h('div', 'Hello World!'))
```

### Attributes

```typescript
import { h, mount } from 'rx'

mount(h('button', 
  { className: 'g-Button',
    color: 'green',
    onclick: () => console.log('Clicked!')
  },
  'Click!'))
```

### State

Counter with `-` and `+` buttons:

```typescript
import { h, withVar, mount } from 'rx'

mount(
  withVar(0, (value, update) => [
    value,
    h('button', { onclick: () => update(n => n - 1) }, '-'),
    h('button', { onclick: () => update(n => n + 1) }, '+')]))
```

### Subscriptions

Chronometer updating every second:

```typescript
import { h, withVar, mount } from 'rx'

mount(
  withVar(0, (value, update) => {
    const interval = window.setInterval(() => update(n => n + 1), 1000)
    return h('div',
      { onunmount: () => clearInterval(interval) }, 
      value
    )
  }))
```

`onunmount` is a special attribute to keep track of the component lifecycle.
`onmount` is available as well. Those functions can take the `element` as an
argument.

## Ideas

- API: 
  - Rx debounce, filter,
  - Routeur with sub-page support.
- Optimization: store intermediate rx instead of recomputing each time for multiple subscribers?

## Inspiration

- https://github.com/OlivierBlanvillain/monadic-html
- https://www.solidjs.com