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.