withI18n function #

The withI18n function extends a component and makes working with internationalization (i18n) easier in components.

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

// alternatively, import the function directly
// import { withI18n } from 'https://cdn.skypack.dev/ficusjs@3/with-i18n'

// 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 I18n instance from a local file
import { i18n } from './i18n.js'

createCustomElement(
  'my-component',
  withI18n(i18n, {
    renderer,
    buttonClicked () {
      // handle event
    },
    render () {
      return html`<button type="button" onclick=${this.buttonClicked}>${this.i18n.t('buttons.increment')}</button>`
    }
  })
)

The withI18n function provides a this.i18n property within the component.
The following methods are available within the component on this..i18n.

t(key, templateData, options) #

The t() method retrieves the translation message for the current locale.
The following arguments can be passed to the t() method.

ArgumentTypeRequiredDescription
keystringYesThe key for the specific message. This can be a nested key like buttons.increment
templateDataobjectThe optional data for message interpolation. The keys must match the message value. For example; the message Greeting requires a templateData object containing { name: 'FicuJS' }
optionsobjectAn optional set of options for the message translation

getLocale() #

The getLocale() method gets the current locale of the i18n instance.

setI18n method #

The setI18n() method can be called when an instance needs to be set after the component has initialised.
The method accepts an i18n argument which is a single I18n instance.

{
  someMethod () {
    const i18n = getI18n()
    this.setI18n(i18n)
  }
}