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