Not-deku NPM | npm.io

not-deku

Render interfaces using pure functions and virtual DOM

not-deku allows you to compose DOM structures with reuseable Components in a functional way. It is a drop-in replacement for Deku, which takes much inspiration from React and other functional-style view libraries.

This is an implementation of Deku in ~200 lines using virtual-dom. The full Deku v2 API is implemented, plus a little more.

Components

Components are mere objects (not classes!) that at least implement a render() function.

/** @jsx element */
import { dom, element } from 'not-deku'

const App = {
  render () {
    return <div>
      Hello there, <button label={'Press me'}></button>
    </div>
  }
}

const Button = {
  render ({ props }) {
    return <button>{ label }</button>
  }
}

// Render the app tree
render = dom.createRenderer(document.body)
render(<App />)

Components can have the following functions:

function render(model) => Element
function onCreate(model)
function onUpdate(model)
function onRemove(model)
function initialState(model)

// Where model is:
{ props, state, setState, context, dispatch, path }

// ...initialState, state, and setState are non-standard
// additions on top of the Deku v2 API.

The following things are implemented:

import { dom, element, string } from 'not-deku'

// dom:
dom.createRenderer(domElement: DOMNode, dispatch: ?any) => Function
render(element: Element, context: ?any) => void

// string:
string.render(element, context: ?any) => string

// element:
// (best used with JSX)
element(tag: string|Component, attrs: ?Object, ...children: Array<Element>) => Element

Usage

See Deku's documentation. not-deku takes the same API as deku (as of v2.0.0-rc6). You can use this while deku v2.0.0 is in development.

Extra features

These features are not part of deku, but are implemented here to prototype API additions to deku:

not-deku implements setState and state, which gets passed onto render() and other component lifecycle hooks. This was a feature of deku v1 which was removed in v2.
Conversely, Components can also have an initialState function.