omi-i18n v0.0.1

Introduction

This is a i18n implementation to be used with omi.js and is based on i18next internationalization framework.

Getting started

Source can be loaded via npm or downloaded from this repo.

# npm package
$ npm install omi-i18n

Translating content:

## using t function

For translating basic content you can use the t function as:

import { t } from "omi-i18n";

<h1 class="app-title">{t("welcome")}</h1>;

For details using it see i18next translation essentials

## using i18n-text

Read more at the section web components.

Web Components

i18n-provider

It's the most outer element and is responsible to initialize the i18next instance.

Further it will trigger an update on parent and children on successful initialization (when ready to use t function).

import { tag, WeElement } from "omi";
import { t } from "omi-i18n";

const catalog = {
  welcome: "Welcome to {{name}} using omi-i18n"
};

@tag("my-app")
class MyApp extends WeElement {
  render(props, data) {
    return (
      <i18n-provider locale="en" catalog={catalog}>
        <p slot="loading">
          <spinner-element />
        </p>
        <h1 class="app-title">{t("welcome", { name: data.name })}</h1>
      </i18n-provider>
    );
  }
}

props

i18n-text

i18n text allows you to set translations in an element like:

// via i18n-provider provided catalog
const catalog = {
	"welcome": "Welcome to {{name}} using omi-i18n",
	"getStarted": "To get started, edit <code>src/elements/*/*.*</code> and save to reload."
}

<i18n-text key="welcome" options={{ name: 'omi v4' }} />
// output <span>Welcome to omi v4 using omi-i18n

<i18n-text ele="p" class="app-intro" key="getStarted" sethtml /*css={this.css}*/ />
// output <p class="app-intro">To get started, edit <code>src/elements/*/*.*</code> and save to reload.</p>

props