rspnd component

mad simple component library.

install

npm i rspnd-component

usage

Simplest working example

var  Component = require('rspnd-component')
var render = Component({
  template: template
})
function template (state) {
  var title = state.title
  return `<h1>${title}</h1>`
}
document.body.appendChild(render({title: 'Initial render'}))
render({title: 'Updated'})

Component

var Component = require('rspnd-component')
var MySubComponent = require('my-sub-component')

module.exports = function MyComponent (store) {
  var state = store()
  var subscribe = store.subscribe
  var dispatch = store.dispatch
  var navigate = store.navigate
  var render = Component({template: template})
  var subComponentRender = MySubComponent()
  var unsubscribe

  function load () {
    unsubscribe = subscribe(render)
  }

  function unload () {
    unsubscribe(render)
  }

  function template (state) {
    return `
      <div
        onload="${load}"
        onunload="${unload}"
      >
        ${subComponentRender(state)}
      </div>
    `
  }

}

SubComponent

var Component = require('rspnd-component')

module.exports = function MySubComponent () {
  var render = Component({
    template: template,
    shouldUpdate: shouldUpdate
  })
  var selected = false
  var localState

  function toggle () {
    selected = !selected
    localState = Object.assign({}, state)
    localState.selected = selected
    render(localState)
  }

  function click (e) {
    e && e.preventDefault && e.preventDefault()
    toggle()
  }

  function getClasses () {
    return selected ? 'selected' : ''
  }

  function template (state) {
    var title = state.title || ''
    return `
      <button
        class=${getClasses()}
        onclick="${click}"
      >
        ${title}
      </button>
    `
  }

  function shouldUpdate (oldState, newState) {
    return oldState.title !== newState.title ||
      oldState.selected !== newState.selected
  }

  return render
}

works great with redeux

@dam ❤️'s you