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
85
|
# 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
|
