Bot releases are visible (Hide)
Published by dntzhang 9 months ago
Published by dntzhang 9 months ago
function ChildComponent(props) {
return (
<span>{props.msg}</span>
)
}
class ParentComponent extends Component {
render() {
return (
<div>
<ChildComponent msg="omi" />
</div>
)
}
}
Published by dntzhang 9 months ago
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>
</>
)
}
}
Published by dntzhang 10 months ago
import { Button } from './button'
class MyApp extends Component {
render() {
return (
<Button>test</Button>
)
}
}
Published by dntzhang 11 months ago
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')
Published by dntzhang 12 months ago
<my-el onInstalled={e => console.log('installed')}><my-el>
Published by dntzhang 12 months ago
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)
Published by dntzhang 12 months ago
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>
)
}
}