clide
v8.0.10
Published
A thin layer over snabbdom.
Downloads
42
Readme
Clide
Clide is a simple render loop for snabbdom.
Installation
npm install clide
Usage
Example: A Simple Counter
import { init, h } from 'clide'
import sbEvents from 'snabbdom/modules/eventlisteners'
init([ sbEvents ])(counter)
function counter (lens) {
const { count = 0 } = lens()
return h('button', {
on: {
click: () => lens({ count: count + 1 })
}
}, count)
}
Example: Two Counters
import { init, h } from 'clide'
import sbEvents from 'snabbdom/modules/eventlisteners'
init([ sbEvents ])(app)
function app (lens) {
return h('div', [
counter(lens('one')),
counter(lens('two'))
])
}
function counter (lens) {
const { count = 0 } = lens()
return h('button', {
on: {
click: () => lens({ count: count + 1 })
}
}, count)
}
Example: Many Counters
import { init, h } from 'clide'
import sbEvents from 'snabbdom/modules/eventlisteners'
init([ sbEvents ])(app)
function app (lens) {
const { counters = [] } = lens()
return h('div', [
h('div', counters.map((_, idx) =>
counter(lens('counters', idx)))),
h('button', {
on: {
click: () => lens({ counters: counters.concat([ {} ]) })
}
}, '+')
])
}
function counter (lens) {
const { count = 0 } = lens()
return h('button', {
on: {
click: () => lens({ count: count + 1 })
}
}, count)
}
API
init(modules)
The init
function takes an optional array of extra snabbdom modules to load
and returns the render
function. See the snabbdom init
docs for more details about
loading extra snabbdom modules.
render(view, options)
The render
function is returned by init
. This function should be called with a
view
function, and optionally an options object. The options object
may contain the following properties:
| Property | Default | Description |
| --- | --- | --- |
| state | {}
| The initial state that should be returned by lens()
. |
| root | document.body
| The DOM node to attach the view function to. |
view(lens)
The view
function is written by the developer, and should expect one argument:
a lens
from stateful-lens. This
function must return a snabbdom virtual
dom node. Updating the lens
in this function will trigger a re-render. See the
stateful-lens docs for more
information.