Extension builder #

Working with multiple component extensions can be made easier by using the ExtensionBuilder class.

// import it with all other features
import { createCustomElement, ExtensionBuilder } from 'https://cdn.skypack.dev/ficusjs@5'

// Alternatively, import the ExtensionBuilder function
// import { ExtensionBuilder } from 'https://cdn.skypack.dev/ficusjs@5/extension-builder'

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

import { store } from './store.mjs'
import { i18n } from './i18n.mjs'

createCustomElement(
  'example-button',
  ExtensionBuilder
    .newInstance()
    .withStore(store)
    .withI18n(i18n)
    .create({
      clear () {
        this.store.clear()
      },
      render () {
        return html`<button type="button" onclick=${this.clear}>${this.i18n.t('buttons.clear')}</button>`
      }
    })
)

The ExtensionBuilder class uses the builder pattern to make it easier to use more than one component extension.

Methods #

The methods of the ExtensionBuilder can be chained.

newInstance() #

Create a new instance of the ExtensionBuilder class.

const builder = ExtensionBuilder.newInstance()

withBreakpointRender(breakpointConfig) #

Use the withBreakpointRender extension function.

const breakpointConfig = {
  reactive: false,
  breakpoints: {
    992: { method: 'renderTablet' },
    768: { method: 'renderMobile' },
    1200: { method: 'renderDesktop' }
  }
}

const builder = ExtensionBuilder
  .newInstance()
  .withBreakpointRender(breakpointConfig)

withEventBus(eventBus) #

Use the withEventBus extension function.

import { eventBus } from './event-bus.mjs'

const builder = ExtensionBuilder
  .newInstance()
  .withEventBus(eventBus)

withI18n(i18n) #

Use the withI18n extension function.

import { i18n } from './i18n.mjs'

const builder = ExtensionBuilder
  .newInstance()
  .withI18n(i18n)

withLazyRender() #

Use the withLazyRender extension function.

const builder = ExtensionBuilder
  .newInstance()
  .withLazyRender()

withStyles() #

Use the withStyles extension function.

const builder = ExtensionBuilder
  .newInstance()
  .withStyles()

withLocalState() #

Use the withLocalState extension function.

const builder = ExtensionBuilder
  .newInstance()
  .withLocalState()

withStore(store) #

Use the withStore extension function.

import { store } from './store.mjs'

const builder = ExtensionBuilder
  .newInstance()
  .withStore(store)

withWorkerStore(worker) #

Use the withWorkerStore extension function.

import { worker } from './worker-store.mjs'

const builder = ExtensionBuilder
  .newInstance()
  .withWorkerStore(worker)

withXStateService(service) #

Use the withXStateService extension function.

import { getXStateService } from 'https://cdn.skypack.dev/ficusjs@5/xstate-service'

const service = getXStateService('toggle.service')

const builder = ExtensionBuilder
  .newInstance()
  .withXStateService(service)

create(options) #

Create component options with added extensions. This method wraps all extensions with supplied component options.

createCustomElement(
  'example-button',
  ExtensionBuilder
    .newInstance()
    .withStore(store)
    .withI18n(i18n)
    .create({
      clear () {
        this.store.clear()
      },
      render () {
        return html`<button type="button" onclick=${this.clear}>${this.i18n.t('buttons.clear')}</button>`
      }
    })
)