Setting up Internationalization

In previous versions translations are baked into the core module but from this version onwards it is removed from core build to reduce overhead as it is an optional feature. But this doesn't mean that setting up translations will end up in loops. Follow the below steps to easily set it up.

1. add i18n folder to your src folder (you can name it as per your standards)

src
 |- i18n
      |-en.ts
      |-fr.ts

2. add translation files to i18n folder

//en.ts
const locale_en = {
  'user': {
    'name': 'My name is {name}'
  }
}
export default locale_en;

//fr.ts
const locale_fr = {
  'user': {
    'name': 'je m`appelle {name}'
  }
}
export default locale_fr;

3. install vanilla-i18n package using npm i -S vanilla-i18n.

4. this package did not contain types. for that:

• create vanilla-i18n folder to @types folder located at project root.

<rootDir>
  |-@types
  |   |-vanilla-i18n
  |          |-index.d.ts 
  |-src

• create index.d.ts file to above folder and add below snippet:

  /// <reference types="node" />
  declare module 'vanilla-i18n' {
    export function setDefaultLanguage(language: string): void;
    export function setTranslate(obj: any, language: string): void;
  }

5. after above setup, add the below service file to your project

<rootDir>
  |-src
     |-index.ts
     |-translationService.ts

//translationService.ts
import { setDefaultLanguage, setTranslate } from 'vanilla-i18n';
import { Injectable } from './decorators';

@Injectable()
export class TranslationService {
  private _defaultLanguage = '';

  setTranslate(lang: string, i18n: Record<string, any>) {
    setTranslate(i18n, lang);
  }

  setDefaultLanguage(language: string) {
    this._defaultLanguage = language;
    setDefaultLanguage(language);
    const event = new CustomEvent('onLanguageChange');
    window.dispatchEvent(event);
  }

  getCurrentLanguage() {
    return this._defaultLanguage;
  }
}

6. import translation files in root component and pass them to translation service

//index.ts or your root component file
import { Component } from '@plumejs/core';
import { TranslationService } from './translationService.ts'
import locale_en from '<folder-i18n>/en';
import locale_fr from '<folder-i18n>/fr';

@Component({
  selector: 'app-root'
})
class AppComponent {
  constructor(translations: TranslationService) {
    translations.setTranslate('en', locale_en);
    translations.setTranslate('fr', locale_fr);
    translations.setDefaultLanguage('en');
  }
}

7. now translations setup is done for english and french languages.

8. To pass html from translations, no need to follow special ways:

// previously
<div>${{ html: 'html-translation'.translate() }}</div>

// with new version just like normal translation
<div>${ 'html-translation'.translate() }</div>

Warning

using translations via innerHTML will not work. <div innerHTML=${ 'html-translation'.translate() }></div> won't work properly.

For normal text translations:

<div>${ 'text-translation'.translate() }</div>