1.2.3 • Published 1 year ago
@resourge/i18n-locales-load v1.2.3
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:
yarn add @resourge/i18n-locales-load
or NPM:
npm install @resourge/i18n-locales-load --save
Setup
Vite config
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'
})
]
})
i18n
import { i18nLocalesBackend } from '@resourge/i18n-locales-load/i18nLocalesBackend';
import i18n from 'i18next';
i18n
...
.use(i18nLocalesBackend)
.init(...)
export default i18n;
Translations File
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
React
import React from 'react';
import { useTranslation } from 'react-i18next';
import { TRANSLATIONS } from './src/assets/translations/Translations';
const Component = () => {
const { t } = useTranslation();
return (
<div>
{ t(TRANSLATIONS.HELLO) }
{ t(TRANSLATIONS.RIMURU.TEMPEST) }
{ t(TRANSLATIONS.RIMURU.IS_BEST) }
{ t(TRANSLATIONS.RIMURU.PLURAL, { count: 1 }) } // one Rimuru
{ t(TRANSLATIONS.RIMURU.PLURAL, { count: 2 }) } // other Rimuru
</div>
);
};
export default Component;
Javascript / Other packages
import { t } from 'i18next';
t(TRANSLATIONS.HELLO)
Webpack
I plan in the future to add a plugin for webpack.
License
MIT Licensed.