aboutsummaryrefslogtreecommitdiff
path: root/README.md
diff options
context:
space:
mode:
authorJoris2023-02-07 18:38:44 +0100
committerJoris2023-02-07 18:38:44 +0100
commitd0431c7f81e20dfb77a6fe154292d6b06f433984 (patch)
tree51689a11757be4eeb7f131e6dd78f4f71f4c006f /README.md
parent76268b9f5a1b7fcb43c614387ee78106abfc6fb2 (diff)
downloadrx-d0431c7f81e20dfb77a6fe154292d6b06f433984.tar.gz
rx-d0431c7f81e20dfb77a6fe154292d6b06f433984.tar.bz2
rx-d0431c7f81e20dfb77a6fe154292d6b06f433984.zip
Init version
Diffstat (limited to 'README.md')
-rw-r--r--README.md85
1 files changed, 85 insertions, 0 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f878b62
--- /dev/null
+++ b/README.md
@@ -0,0 +1,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