Locales

Internationalization (i18n) is an area that appears to be simple but it is actually very complex, and often involves a lot of content.

• Front-end internationalization
• Internationalization of server
• Internationalized resource file management
• Collaboration between projects, developers and translators

Moreover, internationalization implementations are often tied to specific technology stacks.

This internationalization setup is only for the React technology stack and does not involve server-side internationalization.

Front-end internationalization steps

The core steps of internationalization are as follows.

1. Import the correct dayjs locale file.
2. Create and import a messages file, containing key-value translation pairs, and stored under the /locales dir.
3. Pass the configs, messages and locale to the App initialization.

For example:

import 'dayjs/locale/en';
import App from '@transact-open-ux/workspaces/dist/App';
import configs from './configs/development';
import messages from './locales/en';

const root = document.getElementById('root');

export default async function init() {
  if (process.env.NODE_ENV === 'development') {
    const { default: fixtures } = await import('./fixtures/development');
    const { default: makeServer } = await import('@transact-open-ux/workspaces/dist/Server');
    // start server
    makeServer({
      fixtures,
    });
  }
  // start only the cleint if production
  App(root, configs, messages, 'en');
}

init();

info

Workspaces uses the dayjs library for date translations. It requires some unique local data when doing internationalization, mainly for relative time translation, such as "yesterday", "today", "tomorrow", "X minutes ago", or "X months ago". That's why it is important to import the correct locale at the beginning of the file.

Internationalized resource file management

The steps above consider how to internationalize after the introduction of messages files. Next, let's talk about the management of internationalization resource files.

Currently, we manage internationalization resource files in the src/locales folder. For example:

src/locales

.
├── en.ts
├── es.ts
└── pt.ts

Each of the *.ts files is a resource file, returning an object containing key-value pairs where the key is our translation id and the value is the the specific language translation. For example:

en.ts

export default {
  Home: 'Home',
  All: 'All',
  Apply: 'Apply',
  Process: 'Process',
  Helpdesk: 'Helpdesk',
  ...
}

note

Workspaces currently supports a single locale per JM form. Multiple locales can be setup by deploying different forms to JM.