v4.1.5

• [Fix] Solve the problem of having children attribute but not updating it

v4.1.4

• [Fix] Solving Recursive update problem

Before this version, it will lead to infinite recursion by this way:

beforeRender() {
  this.data.a = { b: 1 }
}

or

render() {
  this.data.b = Math.random()
  ...
}

It's fixed now! It's not infinite recursion.

v4.1.3

• [Fix] Fix did not update problem

v4.1.2

• [Fix] Solve the problem of not executing update

v4.1.1

• [Add] supports tick and nextTick

If observe is used, the view does not change immediately after the data changes. If you want to get the real changed dom, you can use tick or nextTick.

import { render, WeElement, define, tick, nextTick } from 'omi'

define('todo-list', class extends WeElement {
  render(props) {
    return (
      <ul>
        {props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    )
  }
})

define('todo-app', class extends WeElement {
  static observe = true

  static get data() {
    return { items: [], text: '' }
  }
  install() {
    tick(() => {
      console.log('tick')
    })

    tick(() => {
      console.log('tick2')
    })
  }

  beforeRender() {
    nextTick(() => {
      console.log('nextTick')
    })

    // don't using tick in beforeRender or beforeUpdate or render or afterUpdate
    // tick(() => {
    //   console.log(Math.random())
    // })
  }

  installed() {
    console.log('installed')
  }

  render() {
    console.log('render')
    return (
      <div>
        <h3>TODO</h3>
        <todo-list items={this.data.items} />
        <form onSubmit={this.handleSubmit}>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.data.text}
          />
          <button>Add #{this.data.items.length + 1}</button>
        </form>
      </div>
    )
  }

  handleChange = e => {
    this.data.text = e.target.value
  }

  handleSubmit = e => {
    e.preventDefault()
    if (!this.data.text.trim().length) {
      return
    }
    this.data.items.push({
      text: this.data.text,
      id: Date.now()
    })
    this.data.text = ''
  }
})

render(<todo-app />, 'body')

v4.0.29

• [Update] Add the return value of the render method.

v4.0.28

• [Fix] fix array splice proxy problem

v4.0.27

• [Fix] fix render array, when updated, only one child left.

Enhanced CSS, rpx unit support base on 750 screen width

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

define('my-ele', class extends WeElement {

  static css = rpx(`div { font-size: 375rpx }`)

  render() {
    return (
      <div>my ele</div>
    )
  }
})

v4.0.25

• [Fix] fix this.host empty problem when calling this.update