@erickmerchant/framework

@erickmerchant/framework

This scoped package is my personal framework. I wrote it to understand how modern javascript frameworks do things. It's meant to be used with browserify.

An Example

This example uses yo-yo (which uses hyperx), but you should be able to use diffHTML and possibly other solutions.

const framework = require('@erickmerchant/framework')
const html = require('yo-yo')
const diff = html.update
const target = document.querySelector('main')

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

function init ({dispatch}) {
  dispatch('increment')
}

function store (state = 0, action) {
  switch (action) {
    case 'increment': return state + 1
    case 'decrement': return state - 1
  }

  return state
}

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

  function decrement () {
    dispatch('decrement')
  }

  function increment () {
    dispatch('increment')
  }
}

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 returned from the store. It can be anything from simply a number like in the example, to a complex object.

dispatch

dispatch(...arguments)

Initializes a change in state and causes a render

• arguments: all get passed to the store

next

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

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

• target: the target passed to framework
• dispatch

init

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

• target: the target passed to framework
• dispatch

Application Code

store

store(state, ...arguments)

Called initially with zero arguments, it should return the default/initial state.

• state: the previous thing returned from calling store
• 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/combine-stores

  A module to create a store from other stores where each is responsible for one property in the state.

• @erickmerchant/router

  A module to do routing inside your components.

• A TodoMVC example

  The source code can be found here