Migration from unified i18n package to independant - Talend/ui GitHub Wiki

Since we begin to use changeset for independent releases, the i18n workflow doesn't fit anymore because

• we use one i18n package for all TUI.
• the translation version follows the package version. So with different versions per package, we can't match a translation version anymore.

In PR #3462, we separated the i18n workflow for each package in talend/ui that needs translation.

For further updates on translation, applications' code needs to be adapted.

Package.json

Locales packages need to be updated, as we don't have 1 package for tui now, but 4 packages.

> yarn remove @talend/locales-tui
> yarn add @talend/locales-tui-components @talend/locales-tui-containers @talend/locales-tui-forms @talend/locales-tui-datagrid

Feel free to remove the packages you don't need.

Synchronous i18n configuration

import i18n from 'i18next';

import merge from 'lodash/merge';

-import { namespaces as tuiNamespaces } from '@talend/locales-tui/namespaces';
+import { namespaces as tuiComponentsNamespaces } from '@talend/locales-tui-components/namespaces';
+import { namespaces as tuiContainersNamespaces } from '@talend/locales-tui-containers/namespaces';
+import { namespaces as tuiFormsNamespaces } from '@talend/locales-tui-forms/namespaces';
+import { namespaces as tuiDatagridNamespaces } from '@talend/locales-tui-datagrid/namespaces';

-import { locales as tuiLocales } from '@talend/locales-tui/locales';
+import { locales as tuiComponentsLocales } from '@talend/locales-tui-components/locales';
+import { locales as tuiContainersLocales } from '@talend/locales-tui-containers/locales';
+import { locales as tuiFormsLocales } from '@talend/locales-tui-forms/locales';
+import { locales as tuiDatagridLocales } from '@talend/locales-tui-datagrid/locales';

i18n
	.init({
		ns: [
-			...tuiNamespaces,
+			...tuiComponentsNamespaces,
+			...tuiContainersNamespaces,
+			...tuiFormsNamespaces,
+			...tuiDatagridNamespaces,
			...myProjectNamespaces
		],
		resources: merge(
-			tuiLocales,
+			tuiComponentsLocales,
+			tuiContainersLocales,
+			tuiFormsLocales,
+			tuiDatagridLocales,
			myProjectLocales
		),
	});

export default i18n;

Asynchronous i18n configuration

Webpack.conf.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
	plugins: [
		new CopyWebpackPlugin([
-			{ from: 'node_modules/@talend/locales-tui/locales', to: 'assets/locales' },
+			{ from: 'node_modules/@talend/locales-tui-components/locales', to: 'assets/locales' },
+			{ from: 'node_modules/@talend/locales-tui-containers/locales', to: 'assets/locales' },
+			{ from: 'node_modules/@talend/locales-tui-forms/locales', to: 'assets/locales' },
+			{ from: 'node_modules/@talend/locales-tui-datagrid/locales', to: 'assets/locales' },
		]),
	]
}

i18n.js

import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';

-import { namespaces as tuiNamespaces } from '@talend/locales-tui/namespaces';
+import { namespaces as tuiComponentsNamespaces } from '@talend/locales-tui-components/namespaces';
+import { namespaces as tuiContainersNamespaces } from '@talend/locales-tui-containers/namespaces';
+import { namespaces as tuiFormsNamespaces } from '@talend/locales-tui-forms/namespaces';
+import { namespaces as tuiDatagridNamespaces } from '@talend/locales-tui-datagrid/namespaces';

i18n
	.use(XHR)
	.init({
		ns: [
-			...tuiNamespaces,
+			...tuiComponentsNamespaces,
+			...tuiContainersNamespaces,
+			...tuiFormsNamespaces,
+			...tuiDatagridNamespaces,
			...myProjectNamespaces
		],
		backend: {
			loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
		},
	});

export default i18n;