omi

Usage

@tag('counter-demo')
class CounterDemo extends Component {
  static css = 'span { color: red; }'

  render() {
    return (
      <>
        <button onClick={sub}>-</button>
        <span>{count.value}</span>
        <button onClick={add}>+</button>
      </>
    )
  }
}

@tag('my-app')
class MyApp extends Component {

  cssProp: string = ''

  installed(): void {
    setInterval(() => {
      this.cssProp = `span{ font-size: ${Math.floor(Math.random() * 120)}px }`
      this.update()
    }, 500)

  }
  render() {
    return (
      <counter-demo css={this.cssProp || 'span{ color: green !important}'} />
    )
  }
}

• Support bind decorator to automatically bind this
• Support CSS tag function to generate shared styles

import { define, WeElement, h } from 'omi'

define('my-counter', class extends WeElement {
  render() {
    return (
      <h.f>
        <span>{this.count}</span>
        {/* auto ignoreAttrs obj*/}
        <my-child obj={{ name: 'omi' }}></my-child>
      </h.f>
    )
  }
})


define('my-child', class extends WeElement {
  static propTypes = {
    obj: Object
  }

  render(props) {
    return (
      <h.f>
        <span>name:{this.props.obj.name}</span>
      </h.f>
    )
  }
})

import { tag, WeElement, h, render } from 'omi'

@tag('hello-omi')
class HelloOmi extends WeElement {
  propTypes: [String, Array],

  render(props) {
    return (
       ...
       ...
    )
  }
}

let count = 0
render(({ update }) => {
  return (
    <>
      {count}
      <button onClick={(evt) => {
        count++
        update()
      }}
      >+</button>
    </>
  )
})