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@6'

// Alternatively, import the ExtensionBuilder function
// import { ExtensionBuilder } from 'https://cdn.skypack.dev/ficusjs@6/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)

withI18nReactive(i18n)

Use the withI18nReactive extension function.

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

const builder = ExtensionBuilder
  .newInstance()
  .withI18nReactive(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@6/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>`
      }
    })
)