i18n-locales-load

@resourge/i18n-locales-load is a tool to help create and load translations into the the project without the messy JSON's.

Features

- Build with typescript.
- Plugin to support Vite.js.
- Only the translation files are built into the production code.
- 100% javascript.
- Same variable for the translation "key" and to use with "t(...)".
- Prevents missing translations.
- Prevents having a different "keys" on the JSON and on the "t(...)".
- Built into "version" to making sure "production" will always have the newest version.
- Caches translations into localStorage.
- Loads translation on demand (only on production).

Installation

Install using Yarn:

``sh
yarn add @resourge/i18n-locales-load
`

or NPM:

`sh
npm install @resourge/i18n-locales-load --save
`

Setup

$3

`Typescript
import { i18nLocalesLoad } from '@resourge/i18n-locales-load/i18nLocalesLoad'
import { defineConfig } from 'vite';

export default defineConfig({
...,
plugins: [
...
i18nLocalesLoad({
// File where the translations will be created.
translationFilePath: './src/assets/translations/Translations.ts'
})
]
})
`

$3

`Typescript
import { i18nLocalesBackend } from '@resourge/i18n-locales-load/i18nLocalesBackend';
import i18n from 'i18next';

i18n
...
.use(i18nLocalesBackend)
.init(...)

export default i18n;

`


$3

`Typescript
import { Translations, gender, plural } from '@resourge/i18n-locales-load'

export const TRANSLATIONS = Translations(['en', 'pt'], {
HELLO: {// KEY becomes => HELLO
en: 'Hello',
pt: 'Olá'
},
RIMURU: {
TEMPEST: {// KEY becomes => RIMURU.TEMPEST
en: 'Rimuru Tempest',
pt: 'Rimuru Tempest'
},
IS_BEST: {// KEY becomes => RIMURU.IS_BEST
en: 'Is the best',
pt: 'É o melhor'
},
GENDER: gender({// KEY becomes => RIMURU.GENDER
female: {
en: 'Rimuru Female',
pt: 'Rimuru Femenino'
},
male: {
en: 'Rimuru Male',
pt: 'Rimuru Masculino'
}
}),
PLURAL: plural({ // KEY becomes => RIMURU.PLURAL
one: {
en: 'one Rimuru', // On translation file KEY becomes => RIMURU.PLURAL_one
pt: 'um Rimuru' // On translation file KEY becomes => RIMURU.PLURAL_one
},
other: {
en: 'other Rimuru', // On translation file KEY becomes => RIMURU.PLURAL_other
pt: 'outro Rimuru' // On translation file KEY becomes => RIMURU.PLURAL_other
}
})
}
})
`

Usage

After the setup you are free to use it as you see fit.

_Note: './src/assets/translations/Translations' needs to be the same as translationFilePath from the vite config_


$3

export default Component;
`

$3

t(TRANSLATIONS.HELLO)
``

Webpack

I plan in the future to add a plugin for webpack.

License

MIT Licensed.