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 { createCustomElement, 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@4/uhtml'

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

createCustomElement(
  'my-component',
  withEventBus(eventBus, {
    renderer,
    buttonClicked () {
      this.eventBus.publish('increment', undefined)
    },
    render () {
      return html`<button type="button" onclick=${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)
  }
}