For our project I'm building a number of React apps in a monorepo. We have a package that centralizes our i18n logic. It holds a number of date functions and it contains json files with general translations for English, German and French.
One of our requirements is that component specific tanslations reside in a 'labels' folder located in the component folder (which are not located in the 'intl' package). The idea behind this is to include a build step that takes the component translations of a specific appliation and the general translations and merge them. The result of the merge can then be used for the 'messages' prop of the IntlProvider that wraps the application. We want this workflow so that we can have some general translations that we can share between applications, but also override these whenever the context of a specific application requires a different translation.
We want to keep our translations with their respective components to make sure that they are as standalone as possible. It will also make for en easier testing workfow.
The monorepo structure kan be visualized (simplified) as:
monorepo
│ .git
│ .gitignore
│ package.json
│
└───intl
│ │ package.json
│ │
│ └───labels
│ │ │ de.json
│ │ │ en.json
│ │ │ fr.json
│ │
│ └───functions
│ │ function1.js
│ │ function2.js
│ │ ...
│
└───application1
│ │ package.json
│ │
│ └───components
│ │ │
│ │ └───Home
│ │ │ Home.js
│ │ │
│ │ └───labels
│ │ │ de.json
│ │ │ en.json
│ │ │ fr.json
│ │
│ └───build
│ └───labels
│ │ de.json
│ │ en.json
│ │ fr.json
│
│ ...
The general outcome should be that application1 > build > labels > en.json holds all the translations from intl > labels > en.json and application1 > components > Home > labels > en.json (plus all the specific translations for any other components). Ideally if a component has an id that also exists in intl > labels > en.json the label from the component should override the label from intl.
We're planning on using react-intl for i18n, but the documentation isn't much help (for our very specific use case). I was wondering if anyone has a similar workflow and experience on how to achieve this in react-intl.
