Feature Request: Enforce to view string in specific language

[elron]

Need:

A new argument forceLanguageTag to the i() function.

i(id: Message['id'], params: any, options: { forceLanguageTag: LanguageTag })
i("my-message", {}, { forceLanguageTag: "en" })

Use case 1 - showing language menu:

en.json - { 'languageName': 'English' }
he.json - { 'languageName': 'עברית' }
es.json - { 'languageName': 'Español' }

Would result better readable code

{#each languages as lang}
   <button on:click={() => switchLanguage(lang)}>
      {i('languageName', {}, { forceLanguageTag: lang })}
   </button>
{/each}

and avoid using un-sexy find-and-replaces like this:

<select name="lang" bind:value={lang}>
   {#each languages as lang}
      <option value={lang}>{lang.replace('he', 'עברית').replace('en', 'English')}</option>
   {/each}
</select>

Use case 2 - when no translation is available.

Why it is important?

I have a notice shown in hebrew "The page is not translated to hebrew yet, showing the english content" (see attached image), and then it shows the english content. If I was to "switch" the user from languge 'he' to 'en' automatically when he visits the post, then the rest of the site would turn english (header, logo, navigation, reading direction, everything) and that would lead to bad user experience, the user may become confused as he does not understand why the language has switched without expecting it. I believe people should feel at home when they visit a website, and a local language is the best way. If I dramatically change the language, they do not expect that and that leads to bad user experience.

Three expected behaviors:

1. Enforced language code ('en')

i('readingTime', {minutes: 3}, { forceLanguageTag: 'en' })

2. Driven by referenceLanguage

i('readingTime', {'minutes': 3}, referenceLanguage)

3. Custom variable

i('readingTime', {'minutes': 3}, originalPostLanguageCode)

[samuelstroschein]

Thanks @elron! :)

We are likely opening a discussion about the API of the SDK. I'll keep the proposal in mind/if many people upvote it we will do it anyways.

[elron]

Thanks!
Until the feature is implemented, I've used this hacky quickfix:

{#if forcedLocale === 'he'}
    {minutes} דקות קריאה
{:else}
    {minutes} minutes to read
{/if}

[ivanhofer]

Use case 1:
For this specific use case you should use the Intl.displayNames API, that is already available to all browsers: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames

Use case 2:
Part1: We have planned to have fallbacks if some parts of your application aren't translated yet.

Part 2: To render a specific messaage in any possible language we will probably need to first implement bundle optimizations or else a user would need to load every possible message in all languages, which is far from ideal.

[elron]

Use case 1:
Thanks! Inspired by you, I've created a helper function to solve use case 1:

export function getLanguageName(tag: string) {
  let languageNames = new Intl.DisplayNames([tag], { type: 'language' });
  return languageNames.of(tag);
}

This is the navigation code:

<select name="lang" bind:value={lang}>
    {#each languages as lang}
        <option value={lang}>{getLanguageName(lang)}</option>
    {/each}
</select>

languages = ['en', 'he'] would result English עברית

Use case 2:
I understand the bundle optimization logic, it makes sense to load only what the user needs to see. Looking forward to it! (but for now I'll be using a quickfix, so no rush).