@erickmerchant/framework

@erickmerchant/framework

This scoped package is my personal framework.

I wrote it to understand how modern javascript frameworks do things. It's greatly inspired by React and Redux, etc, obviously. Also hyperx, which demonstrated that you can use tagged template strings instead of JSX, was a huge inspiration.

I also wrote it because I don't really like any of the options out there. I wouldn't necessarily use it for anything serious, but intend to use it for any personal stuff I do.

It is meant to be used with browserify.

An Example

This example uses diffhtml, but you should be able to use an alternative that provides something with the same functionality of its innerHTML (see diff).

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

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

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

function store (state = 0, action) {
  if (action === 'increment') state = state + 1
  if (action === 'decrement') state = state - 1

  return state
}

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

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

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

API Reference

Framework Code

framework

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

• target: a DOM element. The place to render your application
• store: see store
• component: see component
• diff: see 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(callback)

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

• callback: see next callback

init

init(callback)

• callback: see init callback

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: see state
• dispatch: see dispatch
• next: see 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

next callback

callback({target, dispatch})

• target: the target passed to framework
• dispatch: see dispatch

init callback

callback({target, dispatch})

• target: the target passed to framework
• dispatch: see dispatch

Related Projects

• @erickmerchant/state-container

  A state container to use as a store

• @erickmerchant/router

  A router to use as a component

• A TodoMVC example

  The source code can be found here