Best way to not have to duplicate a namespace?

[thedaviddias]

Hello,

We have a project which has one JSON file per page:

├── login.json
├── account.json
└── register.json

We use a third-party to handle the translation (phrase.com) which kind of flat all the keys to be unique (we can't have 2 keys with the same name, even in different files)

Which means that we have to add a namespace in each of these files:

Login has:

{
  "login": {
    "meta": {
      "description": null,
      "title": "Title of the page"
    }
  }
}

Problem is, when we call const { t } = useTranslation('login'), we also need to duplicate the login namespace when calling a key: t('login.meta.title').

@aralroca, do you see any possible way to keep each key unique, even they are in separated file and not have that kind of redundancy to call the "login" twice?

[aralroca]

Maybe you can solve it with the loadLocaleFrom on the configuration to return the content of the namespace.

i18n.json

module.exports = {
   // ...rest of config
  "loadLocaleFrom": (lang, ns) =>
    import(`./locales/${lang}/${ns}.json`)
      // Return the inner namespace
      .then((m) => m.default[ns]),
}

Then you can use:

const { t } = useTranslation('login')
t('meta.title')

or

const { t } = useTranslation()
t('login:meta.title')