i18n-render

tiny i18n solution for tiny projects.

Design

The i18n-render's structure is key -> translation dictionary. While the translation dict is locale -> text.

In short, i18n-render take a key to get the translation dict, then get translated text with locale.

Source Configuration

const source = {
  example1: {
    en: 'I can eat glass and it doesn\'t hurt me.',
    fr: 'Je peux manger du verre, ça ne me fait pas mal.',
    de: 'Ich kann Glas essen, ohne mir zu schaden.',
    'zh-CN': '我能吞下玻璃而不伤身体。',
    'zh-HK': '我能吞下玻璃而不傷身體。',
    jp: '私はガラスを食べられます。それは私を傷つけません。',
  },
  example_image: {
    en: 'https://source-image.path/en.jpg',
    fr: 'https://source-image.path/fr.jpg',
    de: 'https://source-image.path/de.jpg',
    'zh-CN': 'https://source-image.path/zh-CN.jpg',
    'zh-HK': 'https://source-image.path/zh-HK.jpg',
    jp: 'https://source-image.path/jp.jpg',
  },
};

// or
const source = {
  example1: {
    'en-US': 'I can eat glass and it doesn\'t hurt me.',
    'fr-FR': 'Je peux manger du verre, ça ne me fait pas mal.',
    'de-DE': 'Ich kann Glas essen, ohne mir zu schaden.',
    'zh-CN': '我能吞下玻璃而不伤身体。',
    'zh-HK': '我能吞下玻璃而不傷身體。',
    'jp-JP': '私はガラスを食べられます。それは私を傷つけません。',
  },
};

Usage

<body>
  <p ir="example1">这是一段默认的中文</p>
  <img src="https://default-image.path" alt="" ir-src="example_image">
  <img src="" alt="" ir-srcset="example_image_srcset">
</body>

// import I18nRender from 'i18n-render';

const i18n = new I18nRender({
  source,
  pageTextLocale: 'zh',
});
document.addEventListener('DOMContentLoaded', () => {
  i18n.render();
});

API

class I18nRender constructor

parameter	value	description
source	`Object<string, string>`	Translation dictionaries for various languages
locale	`string`	Set locale directly instead of auto detect
pageTextLocale	`string`	If your page already has text in a certain language, setting this parameter can prevent the re-rendering of this language, and you do not need to provide translation of this language.
fullLangTag	`boolean`	I18n-render uses a short locale tag by default, such as `en`, `fr`, `de`, `jp`. However, languages can distinguish regions, such as `zh-CN` and `zh-HK`, which need two different translation versions. In this case, `fullLangTag: true` can be set, and the configuration items of the language will become complete modes, such as `en-US` and `zh-CN`

getLocale() => string

Get current locale of i18n-render.

setLocale()

Change to another locale manualy.

locale string the target locale
persist boolean$1,false store locale to localStorage, next time i18n-render will init with this locale
rerender boolean$2,true re-render page text after change locale

getText() => string

Get the i18n text of the target text with key

key string the key of text in translation dict
locale string$3 the locale want to use, default to current locale of i18n-render
fallback string$4 this fallback text will be used if the target statement does not have a translation dictionary configured or if there is no corresponding language setting.