tabris-component

Low-level simple component (declarative rendering) for Tabris.js

Features

• Declarative syntax
• Easier to use
• A lot of Lifecycle methods
• shouldComponentUpdate compatible
• would be best who familiar with JSX and React, Preact, Inferno, etc...

Implemented feature

• Events
• Childrens
• Components
• Function components
• Uses literal object, instead of another widget (huge boost performance)

To-Do

• Immutable data (this may reduce performance)
• key attribute
• Linked state (rare-case, anyway good...)

Usage

import {ui, TextView, Composite} from 'tabris'
import { Component, render, h } from 'tabris-component'
/* jsx h */
 
class MyApp extends Component {
  constructor (props) {
    super(props)
    this.state = {click: 0}
    this._onClick = () => {
      this.setState({click: this.state.click + 1})
    }
  }
  componentDidMount () {
    this.timer = setInterval(() => {
      this.setState({click: this.state.click + 1})
    }, 1)
    this.composite.on('tap', () => clearInterval(this.timer))
  }
  render () {
    return <Composite left={0} top={0} width={300} height={500} ref={(composite) => { this.composite = composite }} ><TextView on-tap={this._onClick} text={`Hello ${this.state.click}`} font='24px'/></Composite>
  }
}
 
let comp = new Composite({left: 0, top: 0, width: 300, height: 500})
comp.appendTo(ui.contentView)
 
render(<MyApp name='World' />, comp)

License

MIT