lighterhui
hui + lighterhtml
Last updated a year ago by bret .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install lighterhui 
SYNC missed versions from official npm registry.

lighterhui

Build Status

lighterhtml + hui

npm install lighterhui

Usage

const { Component, html } = require('lighterhui')

class AnotherComp extends Component {
  constructor (msg) {
    super()
    this.msg = msg
    this.value = 0

    this.someElement = html`<div>yo</div>`

    this.handleClick = this.handleClick.bind(this)
  }

  createElement () {
    const { msg } = this

    // Make sure to always use `this.html` inside the createElement function
    // That is the function bound to the component element
    return this.html`<div>
      ${msg}
      <button onclick="${this.handleClick}">Clicked ${this.value}</button>
      ${this.someElement}
    </div>`
  }

  handleClick () {
    this.value++
    this.update()
  }

  onload () {
    console.log(`${this.msg} loaded`)
  }

  onunload () {
    console.log(`${this.msg} unloaded`)
  }
}

Or you can use the shorthand if you are not subclassing

const view = new Component({
  createElement () {
    return this.html`<div>someDomElement</div>`
  },
  onload () {
    console.log('component loaded')
  },
  onunload () {
    console.log('component unloaded')
  },
  render () {
    console.log('override the default morph render method')
    console.log('call this.createElement() to morph at a any time.')
  }
})

API

const { Component } = require('lighterhui')

Base component with manual rendering and hooks for load, unload and automatic event life cycle. Default render

const { html, svg, hook, render } = require('lighterhui')

The exports from lighterhtml. You can use these however you would use those.

Install

npm install lighterhui

Why?

The nanostack had a lot of good ideas, but there was some unsolved issues and sharp edges.

Lighterhtml provides the ability to write stateful DOM components while avoiding many of those issues (like morph algorithm oditiies, and proxy nodes and other weird hacks).

Hui also solved a lot of issues nanocomponent had, especially regarding nested updates. Putting the two together should provide the best of both words!

License

MIT

Current Tags

  • 1.0.0                                ...           latest (a year ago)

1 Versions

  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 0
Dependencies (10)
Dev Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |