not-deku

Render interfaces using pure functions and virtual DOM, kinda

'not-deku' has been renamed to 'decca'. https://www.npmjs.com/package/decca
Last updated 5 years ago by rstacruz .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install not-deku 
SYNC missed versions from official npm registry.

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.

Status

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

not-deku © 2015+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz

Current Tags

  • 0.1.0                                ...           latest (5 years ago)

16 Versions

  • 0.1.0 [deprecated]           ...           5 years ago
  • 0.0.15                                ...           5 years ago
  • 0.0.14                                ...           5 years ago
  • 0.0.13                                ...           5 years ago
  • 0.0.12                                ...           5 years ago
  • 0.0.11                                ...           5 years ago
  • 0.0.10                                ...           5 years ago
  • 0.0.9                                ...           5 years ago
  • 0.0.8                                ...           5 years ago
  • 0.0.7                                ...           5 years ago
  • 0.0.6                                ...           5 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dependents (2)

Copyright 2014 - 2017 © taobao.org |