How to translate language switcher?

[mrtnzlml]

Hello! 👋 I have a specific problem and I am looking for some advice.

I have a language switcher in my application and I'd like to translate it in the "resulting" language (not in the language of the current page but in the language of the country we are switching to).

For example, we are on MX page which is in Spanish and I'd like to have there this button (which is in english):

Similarly, when we are on US page which is in English, I'd like to have there this Spanish button:

It's because when a user lands on a page, I'd like to help them switch the language using a text they know. My questions are:

• Is it achievable via FBT? How?
• If not, what would be the best strategy here?

Thanks! 🙂

[jrwats]

You essentially want to "fetch" the appropriate translation for your given instance based on the locale itself.

fbt is really optimized for one language/locale on the entire page and pulls the locale from the one set globally on IntlViewerContext. Today, you could override getTranslatedInput with the initialization function (init).

https://github.com/facebook/fbt/blob/master/runtime/nonfb/fbtInit.js#L39

[jrwats]

A potentially nice feature to add to the runtime and Babel parser would be to enable a locale overrides at the callsite.

  prompts = [
    ...
    <fbt desc="..." locale="es_ES">Switch to Spanish</fbt>,
    <fbt desc="..." locale="de_DE">Switch to German</fbt>,
    ...
  ];

is a lot easier to reason about than updating getTranslatedInput to do what you want.
I opened #204 for that.

[mrtnzlml]

@jrwats That would be very nice! I am still struggling to understand how should this (or your previous suggestion) work with the loading of translation files though. I have them separated into locales so I'd have to load all of the files just to translate Switch to XYZ from each of the file? 🤔 (normally I'd load only Spanish locale file for the whole page for example)

[jrwats]

I have them separated into locales so I'd have to load all of the files just to translate Switch to XYZ from each of the file? 🤔 (normally I'd load only Spanish locale file for the whole page for example)

Yeah you will have to do something special for these particular strings needed in all locales and include their entries in each dictionary. At runtime, you should be able to call FbtTranslations.registerTranslations with a dictionary that has your desired language populated, but also bundled with it, your language switcher strings for other locales.

{
  "de_DE": {
    "<hash1>": "Some string",
    "....": "...",
    "<hashN>": "Some other string"
  },
  "es_ES": {
    "<switch_hash>": "Cambiar a Español"
  },
  "fr_FR": {
    "<switch_hash>": "passer au français"
  }
}

To build these, you'll either have to "roll your own" script OR submit a PR to update translate.js with this functionality (which I'll happily review).

For quickly rolling your own, you could even conceivably do it after having built your per-locale dictionaries. If you know your set of "shared strings" hashes, this could be a fairly straightforward jq script

Here's a sample bash script that'd take newline-delimited "shared hashes" in from STDIN and update your built translation files by amending them with extra entries pulled from sibling build files:

#!/bin/bash

folder='src/translatedFbts'
hashes="$(jq -Rs 'split("\n") | map(select(. == "" | not) | {(.): 1}) | add')"
shared="$(
  find "$folder" -iname '*.json' -print0 | 
    xargs -0 -L1 jq -c --argjson hs "$hashes" \
      '.[keys[0]] |= with_entries(select(.key | in($hs))' |
    jq -s '. | add'
)"

dest='src/merged'
mkdir -p "$dest"
for f in "$folder"/*.json; do
  jq --argjson sh "$shared" '. * $sh' "$f" > "$dest/${f##*/}"
done

If you saved the above as merge_shared.sh in the demo-app folder, you could run echo 'xxC4a' | ./merge_shared.sh, for example, and these merged dictionaries would be built in src/merged. You'd then want to update your paths accordingly.