Allow nested keys in namespaces

README.md

@@ -33,7 +33,8 @@
   - [i18nMiddleware](#i18nmiddleware)
 - [7. Plurals](#7-plurals)
 - [8. Use HTML inside the translation](#8-use-html-inside-the-translation)
-- [9. Demos](#9-demos)
+- [9. Nested translations](#9-nested-translations)
+- [10. Demos](#10-demos)
   - [Static site example](#static-site-example)
   - [With server example](#with-server-example)
 
@@ -529,7 +530,27 @@ Each index of `components` array corresponds with `<index></index>` of the defin
 
 In the `components` array it's not necessary to pass the children of each element. Children will be calculed.
 
-## 9. Demos
+## 9. Nested translations
+
+In the namespace is possible to define nested keys like:
+
+```json
+{
+  "nested-example": {
+    "very-nested": {
+      "nested": "Nested example!"
+    }
+  }
+}
+```
+
+In order to use it, you should use "." as id separator:
+
+```js
+t`namespace:nested-example.very-nested.nested`
+```
+
+## 10. Demos
 
 ### Static site example
 

__tests__/useTranslation.test.js

@@ -19,6 +19,144 @@ const TestEnglish = ({ i18nKey, query, namespaces }) => {
 describe('useTranslation', () => {
   afterEach(cleanup)
 
+  describe('fallbacks', () => {
+    test('should return the key as fallback WITH PROVIDER', () => {
+      const Inner = () => {
+        const { t } = useTranslation()
+        const test = t('ns:template-string')
+        return (
+          <>
+            {test} | {typeof test}
+          </>
+        )
+      }
+
+      const expected = 'ns:template-string | string'
+
+      const { container } = render(
+        <I18nProvider lang="en" namespaces={{}}>
+          <Inner />
+        </I18nProvider>
+      )
+      expect(container.textContent).toBe(expected)
+    })
+
+    test('should return the key as fallback WITHOUT PROVIDER', () => {
+      const Inner = () => {
+        const { t } = useTranslation()
+        const test = t('ns:template-string')
+        return (
+          <>
+            {test} | {typeof test}
+          </>
+        )
+      }
+
+      const expected = 'ns:template-string | string'
+
+      const { container } = render(<Inner />)
+      expect(container.textContent).toBe(expected)
+    })
+
+    test('should return the key as fallback using a template string WITH PROVIDER', () => {
+      const Inner = () => {
+        const { t } = useTranslation()
+        const test = t`ns:template-string`
+        return (
+          <>
+            {test} | {typeof test}
+          </>
+        )
+      }
+
+      const expected = 'ns:template-string | string'
+
+      const { container } = render(
+        <I18nProvider lang="en" namespaces={{}}>
+          <Inner />
+        </I18nProvider>
+      )
+      expect(container.textContent).toBe(expected)
+    })
+
+    test('should return the key as fallback using a template string WITHOUT PROVIDER', () => {
+      const Inner = () => {
+        const { t } = useTranslation()
+        const test = t`ns:template-string`
+        return (
+          <>
+            {test} | {typeof test}
+          </>
+        )
+      }
+
+      const expected = 'ns:template-string | string'
+
+      const { container } = render(<Inner />)
+      expect(container.textContent).toBe(expected)
+    })
+  })
+
+  describe('nested', () => {
+    test('should work with nested keys', () => {
+      const i18nKey = 'ns:grandfather.parent.child'
+      const expected = 'I am the child'
+      const nested = {
+        grandfather: {
+          parent: {
+            child: expected,
+          },
+        },
+      }
+      const { container } = render(
+        <TestEnglish namespaces={{ ns: nested }} i18nKey={i18nKey} />
+      )
+      expect(container.textContent).toContain(expected)
+    })
+
+    test('should work with nested keys + plural', () => {
+      const i18nKey = 'ns:grandfather.parent.child'
+      const expected = 'Plural! 2'
+      const nested = {
+        grandfather: {
+          parent: {
+            child: 'Singular {{count}}',
+            child_plural: 'Plural! {{count}}',
+          },
+        },
+      }
+      const { container } = render(
+        <TestEnglish
+          namespaces={{ ns: nested }}
+          i18nKey={i18nKey}
+          query={{ count: 2 }}
+        />
+      )
+      expect(container.textContent).toContain(expected)
+    })
+
+    test('should work with nested keys + count=1', () => {
+      const i18nKey = 'ns:grandfather.parent.child'
+      const expected = 'One! 1'
+      const nested = {
+        grandfather: {
+          parent: {
+            child: 'Singular {{count}}',
+            child_1: 'One! {{count}}',
+          },
+        },
+      }
+      const { container } = render(
+        <TestEnglish
+          namespaces={{ ns: nested }}
+          i18nKey={i18nKey}
+          query={{ count: 1 }}
+        />
+      )
+      expect(container.textContent).toContain(expected)
+    })
+  })
+
   describe('plurals', () => {
     test('should work with singular | count=1', () => {
       const i18nKey = 'ns:withsingular'
@@ -146,81 +284,5 @@ describe('useTranslation', () => {
       )
       expect(container.textContent).toContain(expected)
     })
-
-    test('should return the key as fallback WITH PROVIDER', () => {
-      const Inner = () => {
-        const { t } = useTranslation()
-        const test = t('ns:template-string')
-        return (
-          <>
-            {test} | {typeof test}
-          </>
-        )
-      }
-
-      const expected = 'ns:template-string | string'
-
-      const { container } = render(
-        <I18nProvider lang="en" namespaces={{}}>
-          <Inner />
-        </I18nProvider>
-      )
-      expect(container.textContent).toBe(expected)
-    })
-
-    test('should return the key as fallback WITHOUT PROVIDER', () => {
-      const Inner = () => {
-        const { t } = useTranslation()
-        const test = t('ns:template-string')
-        return (
-          <>
-            {test} | {typeof test}
-          </>
-        )
-      }
-
-      const expected = 'ns:template-string | string'
-
-      const { container } = render(<Inner />)
-      expect(container.textContent).toBe(expected)
-    })
-
-    test('should return the key as fallback using a template string WITH PROVIDER', () => {
-      const Inner = () => {
-        const { t } = useTranslation()
-        const test = t`ns:template-string`
-        return (
-          <>
-            {test} | {typeof test}
-          </>
-        )
-      }
-
-      const expected = 'ns:template-string | string'
-
-      const { container } = render(
-        <I18nProvider lang="en" namespaces={{}}>
-          <Inner />
-        </I18nProvider>
-      )
-      expect(container.textContent).toBe(expected)
-    })
-
-    test('should return the key as fallback using a template string WITHOUT PROVIDER', () => {
-      const Inner = () => {
-        const { t } = useTranslation()
-        const test = t`ns:template-string`
-        return (
-          <>
-            {test} | {typeof test}
-          </>
-        )
-      }
-
-      const expected = 'ns:template-string | string'
-
-      const { container } = render(<Inner />)
-      expect(container.textContent).toBe(expected)
-    })
   })
 })

examples/static-site/locales/ca/more-examples.json

@@ -6,5 +6,10 @@
   "plural-example_plural": "És en plural perquè el valor és {{count}}",
   "example-with-html": "<0>Aquest és un exempre <1>utilitzant HTML</1> dintre de la traducció</0>",
   "no-functional-example": "Traducció feta des d'un component no funcional",
-  "dynamic-namespaces-link": "Veure un exemple de càrrega dinàmica"
-}
+  "dynamic-namespaces-link": "Veure un exemple de càrrega dinàmica",
+  "nested-example": {
+    "very-nested": {
+      "nested": "Exemple anidat!"
+    }
+  }
+}

examples/static-site/locales/en/more-examples.json

@@ -6,5 +6,10 @@
   "plural-example_plural": "Is in plural because the value is {{count}}",
   "example-with-html": "<0>This is an example <1>using HTML</1> inside the translation</0>",
   "no-functional-example": "Translation done from a no-functional component",
-  "dynamic-namespaces-link": "See an example of dynamic namespace"
-}
+  "dynamic-namespaces-link": "See an example of dynamic namespace",
+  "nested-example": {
+    "very-nested": {
+      "nested": "Nested example!"
+    }
+  }
+}

examples/static-site/locales/es/more-examples.json

@@ -6,5 +6,10 @@
   "plural-example_plural": "Es en plural porque el valor es {{count}}",
   "example-with-html": "<0>Este es un ejemplo <1>usando HTML</1> dentro de la traducción</0>",
   "no-functional-example": "Traducción hecha desde un componente no funcional",
-  "dynamic-namespaces-link": "Ver un ejemplo de carga dinámica"
-}
+  "dynamic-namespaces-link": "Ver un ejemplo de carga dinámica",
+  "nested-example": {
+    "very-nested": {
+      "nested": "¡Ejemplo anidado!"
+    }
+  }
+}

examples/static-site/pages_/more-examples/index.js

@@ -25,8 +25,10 @@ export default function MoreExamples() {
       />
       <NoFunctionalComponent />
       <br />
+      {t`more-examples:nested-example.very-nested.nested`}
+      <br />
       <Link href={`/${lang}/more-examples/dynamic-namespace`}>
-        {t('more-examples:dynamic-namespaces-link')}
+        <a>{t('more-examples:dynamic-namespaces-link')}</a>
       </Link>
       <style jsx>{`
         .red {