rdfw v0.0.7

rdfw

A lightweight framework with hyperscript and redux like API.

This project should be considered unstable, use it at your own risk

APIs

• h(name: string, children: Array): VNode
• h(name: string, props: Object = {}, children: Array = []): VNode
• render(tree: VNode): Node
• render(tree: Array): Array
• patch(origin: VNode, target: VNode, node: Node): void
• combineReducers(reducers: Object): Object
• bindActions(dispatch: any, actions: Object): Object
• createStore(reducer: Function, initialState: Object = {}): Store
• Store.dispatch(action: Object): void
• Store.subscribe(subscriber: Function): void
• Store.getState(): Object
• bootstrap(App: Function, store: Store, env: any): Node

Usage

Bootstrap your app

import { bootstrap, createStore } from 'rdfw'

import App from './components/App'
import rootReducer from './reducers'

const store = createStore(rootReducer)

document.body.appendChild(
  bootstrap(App, store, store.dispatch.bind(store))
)

Create a component

import { h } from 'rdfw'
import { update } from '../actions/AppActions'

export default function App(state, dispatch) {
  return (
    h('div', [
      h('span', ['Hello ', state.world]),
      h('input', {
        oninput(event) {
          update(dispatch, event.target.value)
        }
      })
    ])
  )
}

Add an action

export function update(dispatch, value) {
  dispatch({ type: 'App.update', value })
}

And a reducer

export default combineReducers({
  world(state = 'world', action) {
    switch (action.type) {
      case 'App.update':
        return action.value
      default:
        return state
    }
  }
})

Some limitations

The diff algorithm I used in the framework is so naive that we have to respect some limitations when working with it:

• Direct children of an element must be fixed size
• Children in arrays must have a unique key
• Type of elements should never change
• Only string and number values will be shown as text node

Some valid usages

h('element', [
  branch1 && h('child-one'),
  branch2 && h('child-two')
])

h('element', [
  dynamicStringArray.map(str =>
    h('dynamic-children', { key: str }, [str])
  )
])

h('element', [
  /regular-expression/ + ''
])

And some invalid

h('element', dynamicArray.map(v =>
  h('dynamic-children')
))

h('element', [
  [
    'no-key',
    h('no-key')
  ],
  [
    [h('key-conflict', { key: 'key' })],
    [h('key-conflict', { key: 'key' })]
  ]
])

h('element', [
  branch ? h('child-one') : h('child-two')
])

h('element', [
  /regular-expression/
])

Breaking any of these rules may leads to unknown behaviour :P

Browser compatibility

The default build of rdfw is only tested on the latest version of chrome. It require browser support for some latest ES6 features, like arrow functions and iterators. If you want to use it on browser that does not supports ES6, you can require the package with babel-loader and rebuild it with your own configurations. Happy hacking ;)