intlify/vue-i18n

te function returns false although fallback exists

valoricDe opened this issue · 5 comments

Reporting a bug?

te function returns false for de-AT locale although t function is able to fallback to language de.

Expected behavior

I think it is problematic that the behaviour of t and te is different.
I propose:
if you provide no locale to te function it should be true if t function resolves to a fallback (eg. de-AT -> de)
if you provide a locale it should only return true if the message exists in the given locale ignoring fallbacks

Reproduction

https://stackblitz.com/edit/vitejs-vite-tr2dcd?file=src%2FApp.vue

System Info

System:
    OS: macOS 14.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 95.63 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.112
    Edge: 113.0.1774.35
    Safari: 17.2

Screenshot

Bildschirmfoto 2024-03-13 um 12 09 34

Additional context

No response

Validations

Thank you for your feeback!

As the reason provide te, simply because we want to detect if a message exists for the current local, or for the locale specified in the parameters.

The t function has a fallback cost.
To avoid that cost, and to avoid missing translations, this API is provided.

I think we agree that there are different UseCases.
In our case by using te we want to know if a translation exists and if there is a translation fallback. We are fine with having the additional cost (as it is inevitable in our case). If the key not exists we try another key.

Our own fallback translationExists function looks like this now:

function translateOrEmpty(i18n, key) {
  const translation = i18n.t(key);
  if (translation === key) return '';
  return translation;
}

But it raises an error for missing transations in our test cases.

We could also create our own fallback schema for te but it seems weird recreating the logik of t.

What are your thoughts on this?

Expected behavior
I think it is problematic that the behaviour of t and te is different.

Would something like this be what you're looking for?

function hasTranslationOrFallback(i18n, key) {
  return i18n.te(key) || i18n.te(key, i18n.fallbackLocale.value)
}

As far as I know you can define multiple fallback levels (de-DE-BR -> de-AT -> de -> en). So it would need to be iterative.
Edit: https://vue-i18n.intlify.dev/guide/essentials/fallback.html#explicit-fallback-with-decision-maps

Thinking about it. I actually don't care about the te function. Because in my eyes it is more efficient to directly try to translate and check if I got the key returned than first checking if it exists and then translate it (-> 2x resolving).

So I silenced the warnings I get in the jest tests. If you agree we can close this ticket