@erickmerchant/framework

@erickmerchant/framework

This scoped package is my personal framework. I use it on a number of small projects.

An Example

This example uses bel with nanomorph, but you should be able to use diffHTML and possibly other solutions.

const framework = require('@erickmerchant/framework')
const html = require('bel')
const diff = require('nanomorph')
const target = document.querySelector('main')

framework({target, store, component, diff})()

function store (commit) {
  commit(() => 0)

  return function (action) {
    switch (action) {
      case 'increment':
        commit((state) => state + 1)
        break

      case 'decrement':
        commit((state) => state - 1)
        break
    }
  }
}

function component ({state, dispatch}) {
  return html`<main>
    <output>${state}</output>
    <br>
    <button onclick=${() => dispatch('decrement')}>--</button>
    <button onclick=${() => dispatch('increment')}>++</button>
  </main>`
}

API Reference

Framework Code

framework

framework({target, store, component, diff, raf})

The function exported by this module.

• target: a DOM element. The place to render your application
• store
• component
• diff
• raf: optional. A replacement for window.requestAnimationFrame. It defaults to window.requestAnimationFrame

Returns a function. See init

state

This is what is passed to commit. It can be anything from simply a number like in the example, but a plain object makes sense in most cases.

commit

commit((current) => next)

It's passed a callback that receives the current state and should return the new state.

• current: the current state
• next: the next state

dispatch

dispatch(...arguments)

Initializes a change in state and causes a render. If the length of arguments is 0, the agent is not called, but a render is triggered.

• arguments: all get passed to the agent

next

next((target) => { ... })

A convenient helper to pass a callback to process.nextTick. Can be used to manipulate the page in some way after a render. For example scrolling to a specific element or focusing an input element.

• target: the target passed to framework

init

init((dispatch) => { ... })

Call init to do some initial work that may require dispatch.

• dispatch

Application Code

store

store(commit)

It should return the agent.

• commit

agent

agent(...arguments)

Anything returned will be ignored

• arguments: all the arguments passed to dispatch

component

component({state, dispatch, next})

• state
• dispatch
• next

Should return the element to pass to diff

diff

diff(target, element)

• target: the target passed to framework
• element: the new element returned from the component

Related Projects

• @erickmerchant/router

  A module to do routing inside your components.

• A TodoMVC example

  The source code can be found here