Workflow clarification

[apuntovanini]

Hi!
I checked on previous discussions and didn't find / understand the solution, I'll try to rephrase the question and see if you could help.
We have a main application in which

1. we extract translations with formatjs extract 'app/packs/*/**/*.ts*' --format crowdin --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'
2. sync them with crowdin via github action.
3. then crowdin sends us a PR with translations
4. we compile formatjs compile-folder ./lang ./app/packs/locale --format crowdin with another gh action
5. we commit
6. we enjoy consuming the messages with IntlProvider

How much I loved this when I got it working :D

Now, we also have a design system on another repo (https://github.com/uidu-org/guidu), and some of these components include some strings we want to translate.
We're of course thinking about the same approach.
For each package that has some supportedLanguages

1. we extract strings with formatjs

const formatjs = require('@formatjs/cli');
const globby = require('globby');

const getPackages = require('@manypkg/get-packages');
const path = require('path');

async function extractTranslation() {
  const { packages, root } = await getPackages.getPackages();
  packages.map(async (pkg) => {
    const { packageJson, dir } = pkg;
    const relativePath = path.relative(root.dir, dir);
    const PATTERN = `${relativePath}/src/**/*.ts*`;
    const files = await globby(PATTERN);
    if (
      packageJson.supportedLocales &&
      packageJson.supportedLocales.length > 0
    ) {
      packageJson.supportedLocales.map(async (locale) => {
        await formatjs.extractAndWrite(files, {
          outFile: `${relativePath}/lang/${locale}.json`,
          idInterpolationPattern: '[sha512:contenthash:base64:6]',
        });
      });
    }
  });
}

extractTranslation();

2. sync them with crowdin
3. get the translated strings back

Now the question: what should we do with this json files? Should we commit this or compile them as well on a github action to distribute only the translated messages?
The question relates to the main application, for which I read in the docs that we should run formatjs compile "node_modules/**/lang/en.json" --ast --out-file lang/en.json.

But I don't understand when this should be done, and if it conflicts with the main application locale compilation script formatjs compile-folder ./lang ./app/packs/locale --format crowdin

Hope I was clear enough! (I know I wasn't, sorry, it's unclear to me)

[longlho]

If I understand your question correctly, you should distribute lang files along with packages, so the consuming application can bundle them together. The compilation of those lang files can happen during bundling, or during child package distribution, as long as during bootstrapping the correct messages are passed in.

With regards to the command, I think you can run formatjs compile "node_modules/**/lang/en.json" "./lang/en.json" --ast --out-file lang/en.json and repeat for all of your supported locales.

[apuntovanini]

If I run this command, say, for the en locale it seems that results from node_modules and ./lang are not concatenated, I just see the first one I put in the list

formatjs compile "node_modules/**/lang/en.json" "./lang/en.json" --ast --out-file lang/en.json compiles node_modules only
formatjs compile "./lang/en.json" "node_modules/**/lang/en.json" --ast --out-file lang/en.json compiles lang/en only

May this be related to some escaping?
package.json

"scripts": {
"lang:compile:modules": "formatjs compile 'node_modules/@uidu/data-fields/lang/en.json' './lang/en.json' --out-file ./app/packs/locale/en.json --format crowdin",
}

[longlho]

oh 4.7.0 should have support for that

[apuntovanini]

Indeed it does! Amazing! Thanks a lot!

[apuntovanini]

Thank you very much @longlho!
If I understood correctly, npm packages should distribute extracted lang files in the form of (for instance)

lang/en.json

"6xsuuc": {
    "defaultMessage": "Sort A {icon} Z"
  },

lang/it.json

"6xsuuc": {
    "defaultMessage": "Ordina A {icon} Z"
  },

etc. Not the already compiled ones, am I right?
Then, the consuming application should run the command you suggest on bundling phase. Do multiple formatjs compile runs with the same out-file overwrite the existing keys or is it done incrementally? Thanks again

[longlho]

I think either compiled or verbatim is fine. In terms of conflicting keys, it'd just overwrite. If you need something more sophisticated you'd probably have to separate out compilation and merging where merging is done yourself based on your own conflict logic.

[apuntovanini]

Ok, makes sense, thanks a lot for the guidance, I'll try to implement it and (if needed), share the outcomes in a short wiki!
Thanks a lot!