phomo v0.1.1

Phomo

Another JavaScript framework for your FOMO.

Warning: Do not use this library except for fun. It doesn't belong anywhere near a production environment. Seriously.

API

h

The h function allows us to create vDOM nodes.

const h = tag => (props = {}) => (...children) => ({
  tag,
  props,
  children,
  key: props.key
})

It can be used like so to make vDOM:

const view = actions => state => (
  h('div')({ class: state.className })(
    h('h1')()('Hello from Phomo'),
    h('p')()('A tiny UI library for funsies!')
  )
)

App

The app function generates our application and binds our actions in order to update the app.

It takes four arguments entry, view, actions and state.

An entry is the DOM node where we insert our application.

A view is a curried function that receives actions and state and returns the derived virtual DOM.

The actions object contains methods to update our application state with. These actions must follow a specific signature, like so:

const actions = {
  handleClick: value => state => ({ foo: state.foo + value })
  // return some partial state object to be merged into the app state
}

The state object is a plain JavaScript object used to supply values to our application. Thus, a view receives these two objects like so:

const state = {
  foo: true
}

const actions = {
  toggleFoo: () => state => ({ foo: !state.foo })
}

const view = actions => state => (
  h('div')()(
    h('p')()(`The value of foo is: ${state.foo}`),
    h('button')({ onclick: () => actions.toggleFoo() })('Toggle')
  )
)

Thus, app takes these arguments and an entry to generate our application, and re-renders the application with every action.