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'

withEventBus(eventBus, {
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()