vite-translations

A Vite plugin compiling translation files and offering utility functions to get translation texts.

Install

npm i -D @pitininja/vite-translations

Usage

Setup the Vite plugin :

// vite.config.ts
import { defineConfig } from 'vite';
import translations from '@pitininja/vite-translations';

export default defineConfig({
    plugins: [
        translations({
            dir: './src/lang' // Directory containing translation files (required)
        })
    ]
});

Use the client in source code :

import { locales, getTranslation } from '@pitininja/vite-translations-client';

const MyComponent = () => (
    <div>
        <h1>{getTranslation('en', 'page.title', 'ucfirst')}</h1>
        <p>{getTranslation('en', 'page.anotherSection.tic', 'raw', {
            someVariable: 'toe'
        })}</p>
        <p>Available locales : {locales.join(', ')}</p>
    </div>
);

Will result in :

<div>
    <h1>My title</h1>
    <p>tac toe</p>
    <p>Available locales : en, fr</p>
</div>

Translation files

Translation files can be JSON, Typescript or Javascript files. They must contain objects. Objects can be nested at will. Typescript and Javascript files must default export the main objet.

All translation files found in the provided directory are compiled into a single translation object with flattened keys so it's more performant to process.

Translation files must be named <locale>.[json|ts|js]. E.g. en.json or fr.ts.

There can be multiple nested translation files, they will all be merged together.

Example

Let's say we have these translation files :

src/lang/en.json

{
    "app": {
        "name": "my app"
    }
}

src/lang/home/en.ts

export default {
    page: {
        home: {
            title: 'home page',
            welcome: 'welcome {user} !'
        }
    }
};

src/lang/profile/en.js

module.exports = {
    page: {
        profile: {
            title: 'profile page',
            form: {
                username: 'your name',
                password: 'your password'
            }
        }
    }
};

These translation files would be compiles as :

{
    "app.name": "my app",
    "page.home.title": "home page",
    "page.home.welcome": "welcome {username} !",
    "page.profile.title": "profile page",
    "page.profile.form.username": "your name",
    "page.profile.form.password": "your password"
}

Therefore to display the welcome home text we would use :

getTranslation('en', 'page.home.welcome', 'ucfirst', {
    username: 'Mary'
})

Locales

Below is the list of valid locales :

• aa (Afar)
• ab (Abkhazian)
• ae (Avestan)
• af (Afrikaans)
• ak (Akan)
• am (Amharic)
• an (Aragonese)
• ar (Arabic)
• as (Assamese)
• av (Avaric)
• ay (Aymara)
• az (Azerbaijani)
• ba (Bashkir)
• be (Belarusian)
• bg (Bulgarian)
• bh (Bihari languages)
• bi (Bislama)
• bm (Bambara)
• bn (Bengali)
• bo (Tibetan)
• br (Breton)
• bs (Bosnian)
• ca (Catalan, Valencian)
• ce (Chechen)
• ch (Chamorro)
• co (Corsican)
• cr (Cree)
• cs (Czech)
• cu (Church Slavic, Old Slavonic, Church Slavonic, Old Bulgarian, Old Church Slavonic)
• cv (Chuvash)
• cy (Welsh)
• da (Danish)
• de (German)
• dv (Divehi, Dhivehi, Maldivian)
• dz (Dzongkha)
• ee (Ewe)
• el (Greek, Modern (1453-))
• en (English)
• eo (Esperanto)
• es (Spanish, Castilian)
• et (Estonian)
• eu (Basque)
• fa (Persian)
• ff (Fulah)
• fi (Finnish)
• fj (Fijian)
• fo (Faroese)
• fr (French)
• fy (Western Frisian)
• ga (Irish)
• gd (Gaelic, Scomttish Gaelic)
• gl (Galician)
• gn (Guarani)
• gu (Gujarati)
• gv (Manx)
• ha (Hausa)
• he (Hebrew)
• hi (Hindi)
• ho (Hiri Motu)
• hr (Croatian)
• ht (Haitian, Haitian Creole)
• hu (Hungarian)
• hy (Armenian)
• hz (Herero)
• ia (Interlingua (International Auxiliary Language Association))
• id (Indonesian)
• ie (Interlingue, Occidental)
• ig (Igbo)
• ii (Sichuan Yi, Nuosu)
• ik (Inupiaq)
• io (Ido)
• is (Icelandic)
• it (Italian)
• iu (Inuktitut)
• ja (Japanese)
• jv (Javanese)
• ka (Georgian)
• kg (Kongo)
• ki (Kikuyu, Gikuyu)
• kj (Kuanyama, Kwanyama)
• kk (Kazakh)
• kl (Kalaallisut, Greenlandic)
• km (Central Khmer)
• kn (Kannada)
• ko (Korean)
• kr (Kanuri)
• ks (Kashmiri)
• ku (Kurdish)
• kv (Komi)
• kw (Cornish)
• ky (Kirghiz, Kyrgyz)
• la (Latin)
• lb (Luxembourgish, Letzeburgesch)
• lg (Ganda)
• li (Limburgan, Limburger, Limburgish)
• ln (Lingala)
• lo (Lao)
• lt (Lithuanian)
• lu (Luba-Katanga)
• lv (Latvian)
• mg (Malagasy)
• mh (Marshallese)
• mi (Maori)
• mk (Macedonian)
• ml (Malayalam)
• mn (Mongolian)
• mr (Marathi)
• ms (Malay)
• mt (Maltese)
• my (Burmese)
• na (Nauru)
• nb (Bokmål, Norwegian, Norwegian Bokmål)
• nd (Ndebele, North, North Ndebele)
• ne (Nepali)
• ng (Ndonga)
• nl (Dutch, Flemish)
• nn (Norwegian Nynorsk, Nynorsk, Norwegian)
• no (Norwegian)
• nr (Ndebele, South, South Ndebele)
• nv (Navajo, Navaho)
• ny (Chichewa, Chewa, Nyanja)
• oc (Occitan (post 1500))
• oj (Ojibwa)
• om (Oromo)
• or (Oriya)
• os (Ossetian, Ossetic)
• pa (Panjabi, Punjabi)
• pi (Pali)
• pl (Polish)
• ps (Pushto, Pashto)
• pt (Portuguese)
• qu (Quechua)
• rm (Romansh)
• rn (Rundi)
• ro (Romanian, Moldavian, Moldovan)
• ru (Russian)
• rw (Kinyarwanda)
• sa (Sanskrit)
• sc (Sardinian)
• sd (Sindhi)
• se (Northern Sami)
• sg (Sango)
• si (Sinhala, Sinhalese)
• sk (Slovak)
• sl (Slovenian)
• sm (Samoan)
• sn (Shona)
• so (Somali)
• sq (Albanian)
• sr (Serbian)
• ss (Swati)
• st (Sotho, Southern)
• su (Sundanese)
• sv (Swedish)
• sw (Swahili)
• ta (Tamil)
• te (Telugu)
• tg (Tajik)
• th (Thai)
• ti (Tigrinya)
• tk (Turkmen)
• tl (Tagalog)
• tn (Tswana)
• to (Tonga (Tonga Islands))
• tr (Turkish)
• ts (Tsonga)
• tt (Tatar)
• tw (Twi)
• ty (Tahitian)
• ug (Uighur, Uyghur)
• uk (Ukrainian)
• ur (Urdu)
• uz (Uzbek)
• ve (Venda)
• vi (Vietnamese)
• vo (Volapük)
• wa (Walloon)
• wo (Wolof)
• xh (Xhosa)
• yi (Yiddish)
• yo (Yoruba)
• za (Zhuang, Chuang)
• zh (Chinese)
• zu (Zulu)