Allow unrestricted plain-text keys alongside nested namespaces

[addiebarron]

🚀 Feature Proposal

Allow for using plain-text keys (including any character, including key separators) when passing strings into t, while keeping nesting via key separator characters enabled for the namespace passed into useTranslation. This could be controlled by an optional config setting. See example & motivation below.

Motivation

In order to keep translating simple and low-overhead for our developers, we'd like to be able to pass any plain english string as a key to the t function without restriction. This allows us to pass along maximum context to our translation vendor as well. We'd also like to take advantage of nested namespaces, so we can have a clean file structure with a single JSON file for each top-level namespace (e.g. client), and nested keys generally corresponding to our component tree. At the moment, I think we can only achieve this by using a keySeparator that is unlikely to appear in plain english (we're using \) which makes our namespace definitions less readable & intuitive. It would be great to be able to be able to use plain-text keys while still allowing for nested namespaces with the most common separators ("." and ":") in this way.

Example

JSX:

// client/components/SomeComponent.jsx
function SomeComponent() {  
  const { t } = useTranslation("client.components.SomeComponent")
  
  return (
    <div>
      {t("This is the text to be translated. It includes periods.")}
    </div>
  )
}

Generated JSON:

// locales/en/client.json
{
  "components": {
    "SomeComponent": {
      "This is the text to be translated. It includes periods.": "This is the text to be translated. It includes periods."
    }
  }
}

[Laityned]

This is not related to the parser but to the react-i18next useTranslation hook. This hook already namespaces combined with keyprefixes so that the code could remain clean