@transclusion/component
v1.0.5
Published
Elm-inspired component library for JavaScript.
Downloads
5
Readme
@transclusion/component
Elm-inspired component library for JavaScript.
yarn add @transclusion/component --dev
Features
- No side-effects. Build components using pure functions.
- Typed. Built using Flow.
Getting started
import {run} from '@transclusion/component'
const app = {
init (params = {}) {
return {
count: params.count || 0
}
},
update (model, msg) {
switch (msg.type) {
case 'DECR': return Object.assign({}, model, {count: model.count - 1})
case 'INCR': return Object.assign({}, model, {count: model.count + 1})
default: return model
}
},
view (model, dispatch) {
const element = document.createElement('div')
const countElement = document.createElement('span')
const decrButtonElement = document.createElement('button')
const incrButtonElement = document.createElement('button')
countElement.innerHTML = String(model.count)
decrButtonElement.innerHTML = '-'
decrButtonElement.addEventListener('click', () => {
dispatch({type: 'DECR'})
})
incrButtonElement.innerHTML = '+'
incrButtonElement.addEventListener('click', () => {
dispatch({type: 'INCR'})
})
element.appendChild(countElement)
element.appendChild(decrButtonElement)
element.appendChild(incrButtonElement)
return element
}
}
const morphDOMElement = (oldElement, newElement) => {
oldElement.parentNode.replaceChild(newElement, oldElement)
return newElement
}
run({
element: document.querySelector('.app'),
component: app,
morph: morphDOMElement
})