Support CSSStyleSheet injection

v6.19.5

feat(omi): support CSSStyleSheet injection

Using adoptedStyleSheets to static css

v6.19.4

chore: tab to 2 space

Remove dead code

v6.19.3

publish(omi): remove dead code & fix omi.d.ts

Update omi.d.ts

Fix onclick, onblur lint errors.

Fix light dom diff error when component exec update method

v6.19.1

publish(omi): v6.19.1, fix diff error when using ligth dom

Fix prevProps losing

v6.19.0

publish(omi): v6.19.0, fix prevProps losing

Light DOM Supported in Functional Style Define

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

Light DOM Supported

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

Support options.ignoreAttrs

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.

forceUpdate and UpdateProps

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