Rx

Less than 10 kb 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

import { h, mount } from 'rx'

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

Attributes

import { h, mount } from 'rx'

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

State

Counter with - and + buttons:

import { h, withState, mount } from 'rx'

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

Subscriptions

Chronometer updating every second:

import { h, withState, mount } from 'rx'

mount(
  withState(0, value => {
    const interval = window.setInterval(() => value.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