Skip to content

Latest commit

 

History

History
108 lines (66 loc) · 3.21 KB

README.md

File metadata and controls

108 lines (66 loc) · 3.21 KB
Raw

callbag-html

An html markup library for callbag

Example

const { div, span, br } = require('callbag-html')
const { pipe, map, interval } = require('callbag-basics')

// A callbag stream of an HTMLElement
const clock =
  pipe(
    interval(1000),
    map(() => span(`The time is ${new Date().toString()}`))
  )

document.body.appendChild(
  div([
    span('The time is:'), // Can accept ordinary markup
    br(), // Variadic functions for clean looking markup
    clock // Accepts callbag streams of elements!!
  ])
)

API

The API is very similar to r-dom's, except that it can accept callbag streams for seamless interop and it returns real HTMLElements

This doc assumes the library was imported as const h = require('callbag-html'). The function is variadic:

h[tagName]([innerText])

Returns an HTMLElement

  • tagName String - An HTMLElement tag name
  • innerText String - The innerText of the element

h[tagName]([children])

Returns an HTMLElement

  • tagName String - An HTMLElement tag name
  • children Array[HTMLElement|Stream[HTMLElement]] - An array where each element can be an HTMLElement or a callbag stream of an HTMLElement

h[tagName]([children$])

Returns an HTMLElement

  • tagName String - An HTMLElement tag name
  • children$ Stream[Array[HTMLElement|Stream[HTMLElement]]] - A callbag stream of an array where each element can be an HTMLElement or a callbag stream of an HTMLElement

h[tagName]([properties], [innerText])

Returns an HTMLElement

  • tagName String - An HTMLElement tag name
  • properties Object - An object with property/value pairs
  • innerText String - The innerText of the element

h[tagName]([properties], [children])

Returns an HTMLElement

  • tagName String - An HTMLElement tag name
  • properties Object - An object with property/value pairs
  • children Array[HTMLElement|Stream[HTMLElement]] - An array where each element can be an HTMLElement or a callbag stream of an HTMLElement

h[tagName]([properties], [children$])

Returns an HTMLElement

  • tagName String - An HTMLElement tag name
  • properties Object - An object with property/value pairs
  • children$ Stream[Array[HTMLElement|Stream[HTMLElement]]] - A callbag stream of an array where each element can be an HTMLElement or a callbag stream of an HTMLElement

Argument Examples

  • properties

    • { id: 'foo', style: { fontSize: '12px' }, className: 'bar', classSet: { toggled: true } }

  • children

    • [span('foo'), span('bar'), span('baz')]
    • [pipe(interval(1000), map(n => span(n))), span('!')]
    • pipe(interval(500), map(n => [span('N = '), strong(n)]))

Tests

Run npm run watch to generate the test bundle, served by default on localhost:1234

License

See LICENSE