omi

Fix onclick, onblur lint errors.

define('my-ele', _ => {
  return <span>Hello Light Dom</span>
}, {
  isLightDom: true
})

import { define, WeElement } from 'omi'

define('my-component', class extends WeElement {
  static propTypes = {
    first: String,
    last: String
  }

  static isLightDom = true

  render(props) {
   return <div>
     Hello, World! I'm {props.first}, {props.last}
    </div>
  }
})

When using OMI to render the whole application, you don't need to get prop through getAttribute, you can set options.ignoreAttrs to true to improve performance.

Before v6.17.3

Ignore attributes in html mode and update:

this.update(true)

For example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.

onMaskClick = ()=> {
  //change props
  this.props.show = false
  //prevent parent component from updating diff without results
  this.prevProps.show = false
  //update self and ignore attributes in html mode
  this.update(true)
  //trigger events, which can be used to change external state variables to maintain consistency, but external components need not be updated
  this.fire('close')
}

Now

Ignore attributes in html mode and update:

this.forceUpdate()

For example, click on the mask of the pop-up layer to close the pop-up, pass it to the parent component in the react, let the parent component update, while Omi advocates self-update, so that the diff area is smaller.

onMaskClick = ()=> {
  this.updateProps({
    show: false
  })
  
  this.fire('close')
}

import { define, h } from '../../src/omi'

define('my-component', _ => {
  return h('svg', null,
    h(h.f, null,
      h("circle", {
        cx: "18",
        cy: "4.54",
        r: "2"
      }),
      h("path", {
        d: "M15 17h-2c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3v-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5zm3-3.5h-1.86l1.67-3.67C18.42 8.5 17.44 7 15.96 7h-5.2c-.81 0-1.54.47-1.87 1.2L8.22 10l1.92.53.65-1.53H13l-1.83 4.1c-.6 1.33.39 2.9 1.85 2.9H18v5h2v-5.5c0-1.1-.9-2-2-2z"
      })))
})

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

const store = {
  data: {
    count: 1
  }
}

store.sub = () => {
  store.data.count--
}

store.add = () => {
  store.data.count++
}

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

define('my-app', _ => (
  <div>
    <my-counter use={['count']} ></my-counter>
  </div>
))

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

You can implement computed props through compute, such as:

define('my-counter', _ => (
  <div>
    <button onClick={_.store.sub}>-</button>
    <span>{_.store.data.count}</span>
    <button onClick={_.store.add}>+</button>
    <div>Double: {_.computed.doubleCount}</div>
  </div>
), {
    use: ['count'],
    compute: {
      doubleCount() {
        return this.count * 2
      }
    }
  })

• Support custom methods

define('my-component', _ => (
  ...
  ...
), {
   
    //here!!
    myMethodA() { },
    myMethodB() { }

  })

• Fix event binding testing of custom elements everywhere project, bind lower case events when they belong to built-in events

• Fix error in recycling store’s components when uninstall

• Fragment supported

Babel config:

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "pragma": "Omi.h",
        "pragmaFrag": "Omi.h.f"
      }
    ]
  ]
}

• Fix render array error
• More unit testing

• Romove dead code of define method