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