custom-elements-everywhere Update dependency omi to v7

Update dependency omi to v7

Open renovate[bot] opened this issue 1 year ago • 0 comments

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
omi (source)	`6.25.23` -> `7.7.5`

Release Notes

Tencent/omi (omi)

https://github.com/Tencent/omi/commit/e3d8ad78ac3fbb5d4147c1789999caee138585ce

`v7.6.0`

Compare Source

`v7.5.10`

Compare Source

`v7.5.9`

Compare Source

`v7.5.8`

Compare Source

`v7.5.7`

Compare Source

`v7.5.6`

Compare Source

`v7.5.5`

Compare Source

`v7.5.4`

Compare Source

`v7.5.3`

Compare Source

`v7.5.2`

Compare Source

`v7.5.1`

Compare Source

`v7.5.0`: Function component is supported! 🎉

Compare Source

function ChildComponent(props) {
  return (
    <span>{props.msg}</span>
  )
}

class ParentComponent extends Component {
  render() {
    return (
      <div>
        <ChildComponent msg="omi" />
      </div>
    )
  }
}

`v7.4.6`

Compare Source

`v7.4.5`: More concise static props definitions for cross framework use🎉

Compare Source

import { tag, Component, h, bind } from 'omi'

@&#8203;tag('my-counter')
class MyCounter extends Component {
  static props = {
    count: {
      type: Number,
      default: 0,
      changed(newValue, oldValue) {
        this.state.count = newValue
        this.update()
      }
    }
  }

  state = {
    count: null
  }

  install() {
    this.state.count = this.props.count
  }

  @&#8203;bind
  sub() {
    this.state.count--
    this.update()
    this.fire('change', this.state.count)
  }

  @&#8203;bind
  add() {
    this.state.count++
    this.update()
    this.fire('change', this.state.count)
  }

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

`v7.4.4`

Compare Source

`v7.4.3`

Compare Source

`v7.4.2`

Compare Source

`v7.4.1`: Using constructor as tag name

Compare Source

import { Button } from './button' 

class MyApp extends Component {
  render() {
    return (
      <Button>test</Button>
    )
  }
}

`v7.4.0`

Compare Source

`v7.3.10`

Compare Source

`v7.3.9`: Lazy definition

Compare Source

If we are writing a component library and need to use tree shaking capabilities,

import { WeButton } from 'ui-lib'

It could lead to definition failure if Button is not used, as it would be tree-shaken away. Therefore, we need to use Button, for example,

WeButton.define('we-button')

`v7.3.8`

Compare Source

`v7.3.7`

Compare Source

`v7.3.6`

Compare Source

`v7.3.5`

Compare Source

`v7.3.4`

Compare Source

`v7.3.3`

Compare Source

`v7.3.2`

Compare Source

`v7.3.1`

Compare Source

`v7.3.0`: Support for injecting lifecycle into props🎉

Compare Source

<my-el onInstalled={e => console.log('installed')}><my-el>

`v7.2.1`: Directive 🎉

Compare Source

For Example:

import { registerDirective } from 'omi'
import autoAnimate from '@&#8203;formkit/auto-animate'

registerDirective('auto-animate', autoAnimate)

Using Directive:

import { render, signal, tag, Component, h } from 'omi'

const show = signal(false)

@&#8203;tag('my-app')
export class MyApp extends Component {
  render() {
    return (
      <>
        <buttton onClick={() => show.value = !show.value}>Toggle show</buttton>
        <div o-auto-animate >
          {show.value && <h2>Hello o-auto-animate!</h2>}
        </div>
      </>

    )
  }
}

render(<my-app />, document.body)

`v7.2.0`: Preventing tree shaking

Compare Source

import { Button } from './button' // tree shaking
import './button' // will not tree shaking

class MyApp extends Component {
  render() {
    return (
      <o-button>test</o-buttom>
    )
  }
}

import { Button } from './button' 

class MyApp extends Component {
  render() {
    return (
      {/* will not tree shaking*/ }
      <Button.tagName>test</Button.tagName>
    )
  }
}

`v7.1.14`

Compare Source

`v7.1.13`

Compare Source

`v7.1.12`

Compare Source

`v7.1.11`

Compare Source

`v7.1.10`

Compare Source

`v7.1.9`

Compare Source

`v7.1.8`

Compare Source

`v7.1.7`

Compare Source

`v7.1.6`

Compare Source

`v7.1.5`

Compare Source

`v7.1.4`: CSS Prop Supported 🎉 !

Compare Source

Usage

@&#8203;tag('counter-demo')
class CounterDemo extends Component {
  static css = 'span { color: red; }'

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

@&#8203;tag('my-app')
class MyApp extends Component {

  cssProp: string = ''

  installed(): void {
    setInterval(() => {
      this.cssProp = `span{ font-size: ${Math.floor(Math.random() * 120)}px }`
      this.update()
    }, 500)

  }
  render() {
    return (
      <counter-demo css={this.cssProp || 'span{ color: green !important}'} />
    )
  }
}

企业微信截图_3f6d7888-2bac-4371-abe1-8552a1838538