clide v8.0.10

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:

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.