omi

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

• [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.

• [Fix] Fix did not update problem

• [Fix] Solve the problem of not executing update

• [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')

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

• [Fix] fix array splice proxy problem

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

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>
    )
  }
})

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

• [Add] native tap event support

import { render, WeElement, define } from "omi"

define("my-app", class extends WeElement {
  onTap = () => {
    console.log('tap')
  }

  render() {
    return (
      <div onTap={this.onTap}>Tap Me!</div>
    )
  }
})

render(<my-app />, "body");

• [Update] change the args of render method

before:

render(props, data) {
    //data === this.store.data when using store system
    return (
      <h1 onClick={this.onClick}>Hello, {data.name}!</h1>
    )
  }

after:

render(props, data, store) {
    return (
      <h1 onClick={this.onClick}>Hello, {store.data.name}!</h1>
    )
  }

• [Fix] render array

Example >

• [Fix] Repairing multiple data changing leads to recursive render

noSlot

For writing OMI plugins, noSlot is very useful. He will not insert redundant DOM into HTML and you can get the vdom in the plugin by props.children.

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

define('fancy-tabs', class extends WeElement {
  static noSlot = true

  render() {
    return [
      <div id="tabs">
        <slot id="tabsSlot" name="title" />
      </div>,
      <div id="panels">
        <slot id="panelsSlot" />
      </div>,
      <div>Show me only when noSlot is true!</div>
    ]
  }
})

define('my-app', class extends WeElement {
  render() {
    return (
      <div>
        <fancy-tabs>
          <button slot="title">Title</button>
          <button slot="title" selected>
            Title 2
          </button>
          <button slot="title">Title 3</button>
          <section>content panel 1</section>
          <section>content panel 2</section>
          <section>content panel 3</section>
        </fancy-tabs>
      </div>
    )
  }
})

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

• WeElement and Component are the same.
• Supports defaultProps

define('my-first-element', class extends WeElement {
  static defaultProps = {
		name: 'Omi',
		myAge: 18
	}

  render(props) {
    return (
      <h1>Hello, {props.name}! Age {props.myAge}</h1>
    )
  }
})

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

https://github.com/Tencent/omi/blob/master/packages/omi/src/observe.js#L14-L20

It should be noted that if observe is used, do not set the value of data in some of the following functions: some complex objects such as obj or arr:

• render
• beforeRender
• beforeUpdate
• afterUpdate

Because data settings will simply compare the value before and after, complex objects will not be deep contrast, the contrast value will trigger different update, update will trigger the above function, infinite recursion.

But you set the property of data as a simple value type（string, number, bool ...）in those functions.

import { define, render } from 'omi'

define('my-counter', function() {
  const [count, setCount] = this.useData(0)

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
})

render(<my-counter />, 'body')