Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Allow to use multiple translation functions with different namespaces and keyPrefixes #1083

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

wilhelmhb
Copy link

@wilhelmhb wilhelmhb commented Oct 26, 2024

Why am I submitting this PR

Using multiple translation functions is currently a pain point for me.

Does it fix an existing ticket?

Yes #494
Also provides a workaround for #973
Should also fix #737

Checklist

  • only relevant code is changed (make a diff before you submit the PR)
  • tests are included and pass: yarn test (see details here)
  • documentation is changed or added (not relevant IMHO)

@Bladieblah
Copy link

Merge pls!

@karellm
Copy link
Member

karellm commented Dec 26, 2024

Can you please provide more context about this change? Keep in mind I maintain this project but haven't used it myself in years so I'm not aware of all the new use cases and syntax changes.

@wilhelmhb
Copy link
Author

@karellm
As precised in #494, we sometimes want to fetch translations from different namespaces in one component.
For example, I have two common namespaces:

  • common, with translations for "yes", "no", "continue", "cancel", etc
  • units with translations regarding units: "per year", etc
    Then I have (usually) one namespace/keyprefix for the current component.

Thus my components can start with something like:

const { t: tCommon } = useTranslation("common");
const { t: tUnits } = useTranslation("units");
const { t } = useTranslation("componentNamespace");

i18next supports this syntax without a hitch. However, if I have the following code in my component:

<span>{t("myField")}{value}{tUnits("perYear")}</span>
<button>{tCommon("confirm")}</button>

both "perYear" and "confirm" are either:

  • added to the namespace myComponent if tCommon and tUnit are in the list of custom functions for extracting translations, which is pretty inconvenient.
    OR
  • ignored otherwise

I'm currently resorting to having my routing component (which do not need translations) with an unused translation function t defined + comments for each and every translation string in both the common and units namespaces to be extracted from.

Currently, the extractor keeps track of the last defined translation function, and adds detected translations in a file to the corresponding namespace and keyprefix.

With the changes, it keeps track of which translation function was defined which default arguments for namespace and keyprefix, and adds translations to the corresponding namespace and keyprefix accordingly.

I can provide you with a minimum working example if you so wish ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The keyPrefix argument is ignored in JavascriptLexer, and not in JsxLexer
3 participants