mi-intl
v0.9.0
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)
define('mi-message', MiIntlMessage)
// 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)
})
this.update()
}
update() {
this.ref.value = this.#context.get().lng
}
}
)/index.html
<html>
<body>
<mi-intl-provider
version="1.0.0"
supported-lngs="en,en-US,es"
locales-path="/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