Skip to main content

Internationalization

For internationalization we are using i18nInternationalizationPlugin from common-stack (@common-stack/rollup-vite-utils)

Usage And Implementation

Each package has to define its own localization files inside folder cdm-locales . The directory would look something like this

cdm-locales/en/translations.json

where translations.json is the namespace. Once defined, the vite plugin will combine all the localization files and will generate files in frontend-server/public/cdm-locales folder having all the localization files data for each namespace combined, make sure to use the rollup copy plugin in rollup config of each package so that cdm-locales folder of that package is copied as it is to lib.

import { copy } from '@web/rollup-plugin-copy';

copy({ patterns: '**/cdm-locales/**/*', rootDir: './src' })

-> Declare plugin in frontend-server vite.config.js

import { i18nInternationalizationPlugin } from '@common-stack/rollup-vite-utils'

i18nInternationalizationPlugin({folderName: 'cdm-locales',
    packages: ['@adminide-stack/*-browser','@adminide-stack/*-ant'],
    namespaceResolution:  'basename',
}),

-> Add cdm-locales folder inside each package where internationalization is required.

-> Add respective en, es or any other local translations. The folder structure would look like this cdm-locales/en/translations.json cdm-locales/en/common.json cdm-locales/es/translations.json

-> Using hook useTranslation we can use the localization in our components const {t} = useTranslation()

t('profile.name', {defaultValue: 'Hello world'})

Namespaces​

Namespaces are cool way to divide you translation into multiple files. Lets say for instance you want to provide a separate translation file for errors and validation you could add a separate namespace for it. By default we are using common name space that's why our translation files are named common.json if you want to add another namespace, you can add another file in cdm-locales folder of respective project for each locale like this cdm-locales/en/validation.json.

-> To switch to above namespace you can declate useTranslation like this const {t} = useTranslation('validation'). Then all the translation would be taken from translation.json namespace file

-> Inorder to load the translation file of particular namespace for particular route during SSR you can export handle function similar to loaders and action like this

export let handle = { i18n: "validation", };

Examples​

  • Directory

    cdm-locales

  • Copy Plugin

    vite-plugin-config

  • Plugin Config

    vite-plugin-config

About i18nInternationalizationPlugin​

We are using i18nInternationalizationPlugin from common-stack (@common-stack/rollup-vite-utils). The purpose of this plugin is to combine the localization files across different packages present inside the node_modules, we can pass the glob pattern to packages key that this plugin accepts and it will automatically match all packages inside the node_modules matching that pattern and will look into lib directory of those packages. If it finds the cdm-locales or a folder defined by folderName key, it will fetch the locales files from that folder and will merge the files of different packages into one and will generates files in frontend-server/public/cdm-locales which holds all the localization data of each namespace combined, which is then served as resources to i18next.

i18nInternationalizationPlugin({folderName: 'cdm-locales', packages: ['@adminide-stack/*-browser','@adminide-stack/*-ant'], namespaceResolution: 'basename', }),