mi-intl
v0.6.7
Published
i18n for mi-element
Readme
mi-intl
Formats strings using ICU Message Syntax for mi-element.
Table of contents
Usage
In your project:
npm i mi-intl mi-element/app.js
import { define, MiElement } from 'mi-element'
import { MiIntlProvider, MiIntlMessage, IntlConsumer } from 'mi-intl'
// define tag for intl-provider
define('mi-intl-provider', MiIntlProvider)
// connects to MiIntlProvider using IntlConsumer
define(
'mi-message',
class extends MiIntlMessage {
static get attributes() {
return { label: String, value: String }
}
update() {
// this.t() is provided by MiIntlMessage
this.renderRoot.textContent = this.t(this.label, { value: this.value })
}
}
)
// define lang selector
define(
'mi-language-selector',
class extends MiElement {
#context
static template = `<slot></slot>`
render() {
// connect to intl-provider
this.#context = new IntlConsumer(this)
this.ref = this.renderRoot.querySelector('select')
this.ref.addEventListener('change', (ev) => {
this.#context.get().changeLanguage(ev.target.value).catch(console.error)
})
}
update() {
this.ref.value = this.#context.get().lng
}
}
)/index.html
<html>
<body>
<mi-intl-provider
version="1.0.0"
supportedLngs="en,en-US,es"
localesPath="/locales/{lng}/{ns}.json?version={version}"
>
<mi-language-selector>
<select>
<option value="en">🇬🇧</option>
<option value="en-US">🇺🇸</option>
<option value="es">🇪🇸</option>
</select>
</mi-language-selector>
<mi-message label="Hello {value}!" value="world">
<mi-message label="lift">
</mi-intl-provider>
<script type="module" src="/app.js"></script>
</body>
</html>/locales/en/translations.json
{
"lift": "lift",
"Hello {value}!": "Hello {value}!"
}/locales/en-US/translations.json
{
"lift": "elevator",
"Hello {value}!": "Hello {value}!"
}/locales/es/translations.json
{
"lift": "ascensor",
"Hello {value}!": "¡Hola {value}!"
}Check folder ./example for a more advanced example.
Run with npm run example
License
MIT licensed