vtree-kup

vtree-kup provides CoffeeKup-like DSL for building virtual-dom tree.

Installation

$ npm install vtree-kup

Usage

Basic

vtreeKup = require 'vtree-kup'

render = (counter) -> vtreeKup (k) ->
  k.h1 'Counter'
  k.p counter.value
  k.button { onclick: -> counter.increment() }, 'Increment'

Selectors

A string is used to specify classes and an id for the element if it is the first argument and valid as a selector.

k.h1 '.title#counter-title', 'Counter'

Inline elements

k.div 'This is an', (-> k.span '.is-important' 'important'), 'element'

Insert virtual-dom nodes

k.h1 'Counter'
# #$add accepts both an array and a node
k.$add new VNode('p', {}, [new VText(String(counter.value))])
k.button { onclick: -> counter.increment() }, 'Increment'

Todo

• Add new tags (for custom elements)
• Namespace support (SVG, MathML)
• Browser tests