aboutsummaryrefslogtreecommitdiff
path: root/README.md
blob: 41303b00a9c553f78924deabd6d63a204c738538 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
# 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

```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, 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:

```typescript
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