Update dependency omi to v7

[renovate]

This PR contains the following updates:

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

---

Release Notes

Tencent/omi (omi)

v7.7.3

Compare Source

v7.7.2

Compare Source

v7.7.1

Compare Source

v7.7.0

Compare Source

v7.6.18

Compare Source

v7.6.17

Compare Source

v7.6.16

Compare Source

v7.6.15

Compare Source

v7.6.14

Compare Source

v7.6.13

Compare Source

v7.6.12

Compare Source

v7.6.11

Compare Source

v7.6.10

Compare Source

v7.6.9

Compare Source

v7.6.8

Compare Source

v7.6.7

Compare Source

v7.6.6

Compare Source

v7.6.5

Compare Source

v7.6.4

Compare Source

v7.6.3

Compare Source

v7.6.2

Compare Source

v7.6.1: Using v1.0.2 of reactive-signal

Compare Source

Tencent/omi@e3d8ad7

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'

@​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
  }

  @​bind
  sub() {
    this.state.count--
    this.update()
    this.fire('change', this.state.count)
  }

  @​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:

Register AutoAnimate Directive:

import { registerDirective } from 'omi'
import autoAnimate from '@​formkit/auto-animate'

registerDirective('auto-animate', autoAnimate)

Using Directive:

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

const show = signal(false)

@​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

@​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}'} />
    )
  }
}

v7.1.3

Compare Source

v7.1.2: OMI 7.1.2 🎉

Compare Source

v7.1.1

Compare Source

v7.1.0: OMI 7.1 🎉

Compare Source

• Support bind decorator to automatically bind this
• Support CSS tag function to generate shared styles

v7.0.0

Compare Source

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.