How to NOT delete existing translations with "react-intl-translations-manager"?

Question

I use React-Intl in my app and it works great, but to be easier to manage new keys to translate I started using "react-intl-translations-manager".

My problem is that some of my translations are used through a notification system and the babel extractor don't recognize them because it's outside of his scan scope.

So when I run "react-intl-translations-manager" it deletes all the keys relatives to notifications and other non-scanned translations.

Here is my question: is there any method to "say" to "react-intl-translations-manager" that it's forbidden to delete those keys ?

I tried multiple solutions including whitelists and other but nothing is working.

Here is my translationRunner.js (the configuration file)

const manageTranslations = require('react-intl-translations-manager').default;

 manageTranslations({
    messagesDirectory: 'src/messages/',
    translationsDirectory: 'src/locales/',
    languages: ['en_GB', 'fr_FR']
 });

score 4 · Accepted Answer · answered Jul 24 '19 at 20:11

There are two ways to do this. One is to use hooks and another way is to override the module where deletion of the actual code happens.

To do the same we can override the getLanguageReport module from react-intl-translations-manager/dist/getLanguageReport

getLanguageReport = require('react-intl-translations-manager/dist/getLanguageReport');
getLanguageReport.original = getLanguageReport.default
getLanguageReport.default = function(defaultMessages, languageMessages, languageWhitelist) {
    data = getLanguageReport.original(defaultMessages, languageMessages, languageWhitelist)
    // this whitelist ids can be read through a config file as well
    whitelisted_id = ['helloworld2', 'helloworld']
    deleted = data.deleted;
    re_add = []
    for (var i=0; i < deleted.length; ) {
        if (whitelisted_id.indexOf(deleted[i].key)>=0) {
            // we are removing a record so lets not increment i
            removed_element = deleted.splice(i,1)[0];
            data.fileOutput[removed_element.key] = removed_element.message;
        } else {
            i++;
        }
    }
    return data;
}
 const manageTranslations = require('react-intl-translations-manager').default;


manageTranslations({
    messagesDirectory: 'build/messages/src/extracted/',
    translationsDirectory: 'src/translations/locales/',
    languages: ['de'] // Any translation --- don't include the default language
}
);

This method works fine and will keep the helloworld2 message even if it is not there in new code.

Hooks approach

In this we use the hook reportLanguage and override it to change the data

const manageTranslations = require('react-intl-translations-manager').default;
const writeFileSync = require('fs').writeFileSync
const stringify = require('react-intl-translations-manager/dist/stringify').default;

stringifyOpts = {
    sortKeys: true,
    space: 2,
    trailingNewline: false,
  };

manageTranslations({
    messagesDirectory: 'build/messages/src/extracted/',
    translationsDirectory: 'src/translations/locales/',
    languages: ['de'], // Any translation --- don't include the default language
    overrideCoreMethods: {
        reportLanguage: function(langResults) {
            data = langResults.report;
            // this whitelist ids can be read through a config file as well
            whitelisted_id = ['helloworld2', 'helloworld']
            deleted = data.deleted;
            re_add = []
            for (var i=0; i < deleted.length; ) {
                if (whitelisted_id.indexOf(deleted[i].key)>=0) {
                    // we are removing a record so lets not increment i
                    removed_element = deleted.splice(i,1)[0];
                    data.fileOutput[removed_element.key] = removed_element.message;
                } else {
                    i++;
                }
            }
            // original definition of reportLanguage from manageTranslations.js
            // unfortunately the original core method is not exposed for us to re-use
            // so we need to copy the code again
            if (
                !langResults.report.noTranslationFile &&
                !langResults.report.noWhitelistFile
              ) {
                // printers.printLanguageReport(langResults);

                writeFileSync(
                  langResults.languageFilepath,
                  stringify(langResults.report.fileOutput, stringifyOpts)
                );
                writeFileSync(
                  langResults.whitelistFilepath,
                  stringify(langResults.report.whitelistOutput, stringifyOpts)
                );
              } else {
                if (langResults.report.noTranslationFile) {
                  printers.printNoLanguageFile(langResults);
                  writeFileSync(
                    langResults,
                    stringify(langResults.report.fileOutput, stringifyOpts)
                  );
                }

                if (langResults.report.noWhitelistFile) {
                  printers.printNoLanguageWhitelistFile(langResults);
                  writeFileSync(
                    langResults.whitelistFilepath,
                    stringify([], stringifyOpts)
                  );
                }
            }     
        }
    }
});

How to NOT delete existing translations with "react-intl-translations-manager"?

1 Answers1