README

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.

Acknowledgements

Obviously taken blatant inspiration from Deku by the amazing Anthony Short and friends.

NB: This package is made as a proof-of-concept. While it's fully functional, it's not likely to be supported in the future.

Thanks

ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz

not-dekudeprecated

Usage no npm install needed!