omi

• Multi-store injection supported
• static use has been removed, please use use

• Fix usingSelf error

• Remove observe, tick and nextTick from omi
• Remove this.data from instance of component

Add useSelf to store system, update self only, exclude children components, for example:

define('my-app', class extends WeElement {
  useSelf() {
    return ['msg']
  }

  render() {
    return (
      <div>
        <span onClick={this.store.random}>{this.store.data.msg}</span>
        <my-counter />
      </div>
    )
  }
})

render(
  <my-app />,
  'body',
  new class Store {
    data = {
      msg: 'aaa',
      count: 0
    }
    sub = () => {
      this.data.count--
    }
    add = () => {
      this.data.count++
    }
    random = () => {
      this.data.msg = Math.random()
    }
  }()
)

• Add updateSelf method to the instance of component

• Fix JSONProxy error of omi.d.ts

• Fix receiveProps when define with functional api
• Export JSONProxy
• Support use, propTypes and defaultProps options with functional api

• Fix error using define the functional way with 2 args

Add the fourth parameter to define method, can configure CSS and lifecycle functions.

import { render, define } from 'omi'

class Store {
  data = {
    count: 1
  }
  sub = () => {
    this.data.count--
  }
  add = () => {
    this.data.count++
  }
}

define('my-counter', ['count'], _ => (
  <div>
    <button onClick={_.store.sub}>-</button>
    <span>{_.store.data.count}</span>
    <button onClick={_.store.add}>+</button>
  </div>
), {
    css: `span { color: red; }`,
    installed() {
      console.log('installed')
    }
  })

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

New functional styel API:

import { define, render } from 'omi'

class Store {
  data = {
    count: 1
  }
  sub = () => {
    this.data.count--
  }
  add = () => {
    this.data.count++
  }
}

define('my-counter', ['count'], _ => (
  <div>
    <button onClick={_.store.sub}>-</button>
    <span>{_.store.data.count}</span>
    <button onClick={_.store.add}>+</button>
  </div>
))

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

The second parameter of define is optional.

• Optimizing the extend performance

• Add bind and unbind methods
• Fix extend error after component update

Add

• Support extend, get and set methods

Demos

• https://codepen.io/omijs/pen/aeLYjx
• https://codepen.io/omijs/pen/eqGMQQ

• Made fire method of element case sensitive

• Fix prevProps value lost property

New syntax, prop supports reading prop from data center - Omi.$

Example

Define element:

import { define, WeElement } from 'omi'

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

  render(props) {
    return (
      <div>name: {props.user.name}, age: {props.user.age}</div>
    )
  }
})

Using Element in others framework or pure js:

<script>
  Omi.$.user = { name: 'dntzhang', age: 18 }
</script>
<my-ele user=":user" ></my-ele>

Also supports path:

<other-ele age=":user.age" ></other-ele>

• Remove dead code

• Modify initUse to use
• Modify use to using

• Fix input value error

• Change this._host to this.rootNode, you can access the root node of the shadow dom based on this property.