@transclusion/component v1.0.5

@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
})