@informaticon/base-i18n

lib.npm.base.i18n

I18n client library, published to npm as @information/base-i18n.

Prerequisites

Your project is already prepared to use npm packages, and you already have a bundler like Webpack, Rollup, or something similar set up. If you are unsure on how to set that up in a Play! project, check out the internal Using Webpack with Play! Framework guide.

Your project should use lib.play.base.i18n with version >=v1.3.0.

Usage

Install the package via npm

npm i @informaticon/base-i18n -D

Add svelte as dependency to your project (if not already added).

npm i svelte -D

Import the I18nMessages in your Loader and init the store in the DOMContentLoaded Event to make sure, that all messages will be loaded before you use it in JavaScript.

import { I18nMessages } from "@informaticon/base-i18n";

export class Loader {
    constructor() {
        document.addEventListener("DOMContentLoaded", this.ready);
    }

    protected async ready() {
        await I18nMessages.init();
    }
}

With the get function you can load the texts in Typescript.

import { I18nMessages } from "@informaticon/base-i18n";

// if no message for the key is found the key will be returned as message
let message = I18nMessages.get("IAM_APPLICATION_SVC_WEB_TICKET_TITLE");

// you can load a message with params (if you use more arguments than found in the Message there will be no error)
let message2 = I18nMessages.get("IAM_PERMISSIONS_COUNT_DYNAMIC", "2", "3", "2");

In Svelte you can subscribe directly to the store function. So if a message changes the displayed text will automatically be updated, too.

<script>
    import {getI18nMessage} from "@informaticon/base-i18n";

    export let msgKey = "";
    export let args = [];
</script>

{$getI18nMessage(msgKey, ...args)}

As an alternative you can use the I18nMessage.svelte component. Internally it uses a svelte store, so if a message changes the text will automatically be updated, too.

<script>
    import I18nMessage from "@informaticon/base-i18n/I18nMessage.svelte";
</script>

<I18nMessage msgKey={"IAM_APPLICATION_SVC_WEB_TICKET_TITLE"} />

If you want this feature in typescript also it is possible to subscribe to the store function. But be aware to unsubscribe from the store to prevent memory leaks!

import {getI18nMessage} from "@informaticon/base-i18n";

let getFunction;

const unsubscribe = getI18nMessage.subscribe(value => {
    getFunction = value;
});
console.log(getFunction("IAM_APPLICATION_SVC_WEB_TICKET_TITLE"));
document.addEventListener("pagehide", unsubscribe)

Contribution

Commands

package the project

npm run package

only code in created package folder must be published to npm

Test

💡 you have to use lib.play.base.i18n >=v1.3.0 in your test project

ToDo: maybe use npm link and not the files in the test project?

1. Package this project with npm run package so your changes are compiled
2. Import the local build in your test project

// for development purposes, don't commit this
import {I18nMessages} from '../../../../Projekte/lib/lib.npm.base.i18n/package/I18nMessages';

3. When you are done, make sure that you change the imports back to the ones you'd use in production

// in production
import { I18nMessages } from "@informaticon/base-i18n/I18nMessages";

test with npm link

2. cd to package and run npm link
3. start the test project
4. call npm link @inforamticon/base-i18n in your test project (important: do this after start, because with for eg. webpack plugin the npm i will be called on start)