Package Exports

omio

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (omio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

English | 简体中文

Omio

Omi for old browsers(IE8+ and mobile browsers)

Use immediately

$ npm i omi-cli -g             
$ omi init-o my-app   
$ cd my-app           
$ npm start                     
$ npm run build

Differences to omi

Omio has the same grammar as omi, but there are also some differences:

Omio supports staticCss, omi does not support it.

What's the difference between the css and the staticCss method? For example：

render() {
  return (
    <div>
      <my-ele name={this.name}></my-ele>
      <my-ele name={this.name}></my-ele>
      <my-ele name={this.name}></my-ele>
    </div>
  )
}

The css method will render three times to html head element, the staticCss will render one times only ! When you update the component css method will rerender, but the staticCss will not rerender.

Omio does not support slot, please use props.children instead like react
Omio does not support store path updating

Use in omi project

npm i omio

Webpack Alias

If you want to use omio under existing omi projects, no code changes are required through the following configuration:

module.exports = {
  //...
  resolve: {
    alias: {
      omi: 'omio'
    }
  }
};

Supports IE8

import { render, WeElement, define } from '../../src/omi'

define('my-counter', class extends WeElement {
  //commented out for ie8
  //static observe = true

  data = {
    count: 1
  }

  sub = () => {
    this.data.count--
    //no observe, so call this.update for ie8
    this.update()
  }

  add = () => {
    this.data.count++
    //no observe, so call this.update for ie8
    this.update()
  }

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

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

If you only need to be compatible with IE9 and IE9+，you can use static observe = true.

omio