withEventBus function #

The withEventBus function extends a component and makes working with an event bus easier in component methods.

// import it with all other features
import { createComponent, withEventBus } from 'https://cdn.skypack.dev/ficusjs@3'

// alternatively, import the function directly
// import { withEventBus } from 'https://cdn.skypack.dev/ficusjs@3/with-event-bus'

// import the renderer and html tagged template literal from the uhtml renderer
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/uhtml'

// import an event bus from a local file
import { eventBus } from './event-bus.js'

createComponent(
'my-component',
withEventBus(eventBus, {
renderer,
buttonClicked () {
this.eventBus.publish('increment', undefined)
},
render () {
return html`<button type="button" @click=${this.buttonClicked}>Increment</button>`
}
})
)

The withEventBus function provides a this.eventBus property within the component.
It handles automatic event bus subscription based on the component lifecycle hooks.

setEventBus method #

The setEventBus method can be called when an instance needs to be set after the component has initialised.
The method accepts an eventBus argument which is a single event instance.

{
someMethod () {
const eventBus = getEventBus()
this.setEventBus(eventBus)
}
}