i18n-svelte

A lightweight but powered svelte internationalization plugin for svelte based on frenchkiss js.

i18n-svelte is a lightweight but powerful plugin for localizing your svelte application what uses svelte's built in stores and frenchkiss.js

🚀 Install

Install with yarn:

$ yarn add i18n-svelte

Or install using npm:

$ npm i i18n-svelte

🔨 Usage

// in main.js
import { init } from "i18n-svelte";
const messages = {
  "en-US": {
    hello: "hello, world!",
    greet: "hello, {name}!",
  },
  ru: {
    hello: "Привет, Мир!",
    greet: "Привет, {name}!",
  },
  ne: {
    hello: "नमस्कार संसार!",
    greet: "नमस्कार, {name}!",
  },
};

// must initialize before using t function
init({ fallback: "en-US", locale: navigator.language, messages });
const app = new App({ target: document.body });

export default app;

  <script>
    import { t } from "i18n-svelte";
  </script>

  <p>{$t("hello")}</p>
  <p>{$t("greet", { name: "John Doe" })}</p>
  <!-- OR -->
  <p>{$_("greet", { name: "John Doe" })}</p>

⚙️ Api

init

Inorder to use $t, the plugin must be initialized using init function. It sets the fallback locale, initial locale and messages. It also accepts boolean logs to enable/disable logs.

properties

| property | required | default | description | | -------- | -------- | --------- | ---------------------------------------------------------------------------------------- | | fallback | ✔ | undefined | set fallback language if translation for current locale couldn't be loaded. | | locale | | undefined | set current locale, must be string and if not passed,fallback is used as current locale. | | logs | | false | to enable/disable logging for errors, warnings and locale change. | | messages | ✔ | {} | set of translation messages. |

t

This is used inside svelte components to get the translated message for given key. It is also exported at _ so alias $_ can also be used. If no translation is found, it returns the key itself. Inorder to use this, the plugin must be initialized with init method with the options mentioned above.

<script>
  import { t } from "i18n-svelte";
</script>

<p>{$t("hello")}</p>
<p>{$t("greet", { name: "John Doe" })}</p>

locale

This is the svelte store that holds the current locale and can be used to get current locale or to set new locale

<script>
  import { locale } from "i18n-svelte";
  locale.set("ne"); // sets locale to ne and updates all messages
  console.log($locale); // prints current locale. i.e ne
</script>

Examples

See the examples directory to get started.

Todos

• [ ] add function to lazy load translations
• [ ] get 100% test coverage

License

MIT