[Question] Interpolation: reference other keys?

[sheiman-pavlo]

Is there a way we can reference other keys in dictionary files? An example below:

locales/en/common.json

{
  "one": "one",
  "you": "you're the $t(common:one)"
}

components/a-component.tsx

const { t } = useTranslation();
console.log(t`common:you`) // output: "you're the one"

Here is a similar feature in i18next, which I'm migrating from right now: https://www.i18next.com/translation-function/nesting

[aralroca]

Sorry but this feature is not implemented yet 😕 Please feel free to PR if you need it 🤗

How i18next manage this with other namespaces?

{
  "one": "one",
  "you": "you're the $t(anothernamespace:one)"
}

for now I see difficult to use the namespace here, you could only use namespaces that the page has loaded and not load them async. Maybe for a first iteration it would be fine without specifying the namespace, and just use them for the namespace itself.

{
  "one": "one",
  "you": "you're the $t(one)"
}

What do you think about this? Thanks!

[talyh]

Echoing this request, as noted in https://github.com/vinissimus/next-translate/discussions/873

[talyh]

@aralroca , about not referencing the namespace

For our use case, it'd likely yield little value to have composition without the namespace. Because the common / isolated words would likely exist in common or another generic file, while the longer terms leveraging those words are more page specific.

When you say:

I see difficult to use the namespace here, you could only use namespaces that the page has loaded and not load them async

As I don't fully understand the internals of the library, I'm not sure if the suggestion below helps as a potential path forward, but could this be solved with an assumption that the dev will load the namespace?

Taking the example here, say that we have this config

// common.json
{
  "one": "one",
}

// page.json
{
  // not going into whether {{}} or ${t()} for now, though I'd prefer for {{}} for readability
  "you": "you're the {{common:one}}"
}

// i18n.js
const i18n = {
  "*": ['common'],
  "/my-page": ["page.json"]
}

then the string translates to "you're the one" as expected. If the dev didn't configure common so it'd be available for the page, it'd render as "you're the {{common:one}}"

Does this simplify the loading concern?