Version 2

README.md

@@ -1,11 +1,5 @@
 # @connectedcars/react-i18n
 
-Work in progress.
-
-## Todo
-- [ ] fuzzy translations
-- [ ] improve documentation
-
 ## Installation
 
 `npm install @connectedcars/react-i18n`
@@ -28,6 +22,42 @@ Translate text containing a variable:
 
 `t('This {word} is in a translated sentence.', { word: 'Variable'})`
 
+Translate plurals (`n` is injected into the data object, but can be overwritten):
+
+`tn(count, '{n} time', '{n} times')`
+
+Multiple lines are also supported using template strings (however, **DO NOT** use `${}` variables!):
+
+```
+t(`Foo
+   bar
+   baz`)
+```
+
+*Please note, however, that these translations will not be rendered on multiple lines in HTML!*
+
+Translate with React:
+
+```
+// Use `tnx` for plurals with JSX!
+tx(`
+  <p>Hello, <strong>{name}</strong><p>
+  <p>Today is {day}</p>
+`, {
+  p: content => <p>{content}</p>,
+  strong: content => <strong>{content}</strong>,
+  name: 'John Doe',
+  day: 'Monday'
+})
+```
+
+*Please note, by default translations are in strict mode which means an error will be thrown on undefined types*
+*Please note, it is possible to add a whitelist/default by setting `jsxWhitelist` on the `I18nPovider`.*
+
+You can also add a context to your translations:
+
+`t('Hello', null, 'context here')`
+
 ## Import and Export
 
 First you need to set up the import and export scripts in your `package.json`
@@ -41,6 +71,7 @@ First you need to set up the import and export scripts in your `package.json`
 
 ...
 ```
+
 Then you can run the following commands:
 * `npm run export` creates a POT file with the extracted translations in `./locales/template.pot`
 * `npm run import` creates a json file containing your all your translations in `./src/translations.json`
@@ -50,4 +81,111 @@ Then you can run the following commands:
 To get output for CI, add the following script:
 ```
   "ci-translation": "i18n-translation-status"
-```
+```
+
+## Example
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {
+  I18nStore,
+  I18nProvider,
+  I18nContext,
+  I18nConsumer,
+  useTranslate,
+  withTranslate,
+} from '@connectedcars/react-i18n'
+import './index.css'
+
+const translations = {
+  "da": {
+    "": {
+      "content-type": "text/plain; charset=UTF-8",
+      "project-id-version": "",
+      "pot-creation-date": "",
+      "po-revision-date": "",
+      "language-team": "",
+      "mime-version": "1.0",
+      "content-transfer-encoding": "8bit",
+      "x-generator": "Poedit 2.0.6",
+      "last-translator": "",
+      "plural-forms": "nplurals=2; plural=(n != 1);",
+      "language": "da"
+    },
+    "Hello {name}": [
+      null,
+      "Hej {name}"
+    ],
+    "Set language to <lang />": [
+      null,
+      "Skift sprog til <lang />"
+    ]
+  }
+}
+
+const store = new I18nStore({
+  translations,
+  locale: 'da',
+})
+
+class ExampleA extends React.Component {
+  static contextType = I18nContext
+
+  render() {
+    return <div>{this.context.t('Hello {name}', { name: 'World' })}</div>
+  }
+}
+
+class ExampleB extends React.Component {
+  render() {
+    return (
+      <I18nConsumer>
+        {i18n => {
+          return <div>{i18n.t('Hello {name}', { name: 'World' })}</div>
+        }}
+      </I18nConsumer>
+    )
+  }
+}
+
+const ExampleC = withTranslate(props => {
+  return <div>{props.t('Hello {name}', { name: 'World' })}</div>
+})
+
+const ExampleD: React.FC = props => {
+  const { tx } = useTranslate()
+
+  return (
+    <div>
+      {tx('<strong>Hello</strong> there <link>test</link>', {
+        strong: content => <strong>{content}</strong>,
+        link: content => <a href="https://example.com">{content}</a>
+      })}
+    </div>
+  )
+}
+
+const ToggleLocale: React.FC = () => {
+  const { tx, setLocale, locale } = useTranslate()
+  const swapLocale = locale === 'da' ? 'en' : 'da'
+
+  return (
+    <button onClick={() => setLocale(swapLocale)}>
+      {tx('Set language to <lang />', {
+        lang: (content, attr) => <strong>{swapLocale}</strong>,
+      })}
+    </button>
+  )
+}
+
+ReactDOM.render(
+  <I18nProvider store={store}>
+    <ExampleA />
+    <ExampleB />
+    <ExampleC />
+    <ExampleD />
+    <ToggleLocale />
+  </I18nProvider>,
+  document.getElementById('root')
+)
+```

bin/export.js

@@ -1,31 +1,57 @@
 #!/usr/bin/env node
-const { GettextExtractor, JsExtractors, HtmlExtractors } = require('gettext-extractor')
+const { GettextExtractor, JsExtractors } = require('gettext-extractor')
 
 let extractor = new GettextExtractor()
 
+const content = {
+  trimWhiteSpace: true,
+  preserveIndentation: false
+}
+
 extractor
   .createJsParser([
-    JsExtractors.callExpression(['t', 'props.t', '[this].context.t'], {
+    JsExtractors.callExpression(['t', '[this].props.t', '[this].context.t'], {
+      arguments: {
+        text: 0,
+        // data
+        context: 2,
+      },
+      content,
+    }),
+
+    JsExtractors.callExpression(['tn', '[this].props.tn', '[this].context.tn'], {
+      arguments: {
+        // count
+        text: 1,
+        textPlural: 2,
+        // data
+        context: 4,
+      },
+      content,
+    }),
+
+    JsExtractors.callExpression(['tx', '[this].props.tx', '[this].context.tx'], {
       arguments: {
         text: 0,
         // data
-        context: 2
-      }
+        context: 2,
+      },
+      content,
     }),
 
-    JsExtractors.callExpression(['tn', 'props.tn', '[this].context.tn'], {
+    JsExtractors.callExpression(['tnx', '[this].props.tnx', '[this].context.tnx'], {
       arguments: {
         // count
         text: 1,
         textPlural: 2,
         // data
-        context: 4
-      }
+        context: 4,
+      },
+      content,
     })
   ])
   .parseFilesGlob('./src/**/*.@(ts|js|tsx|jsx)')
 
 extractor.savePotFile('./locales/template.pot')
 
 extractor.printStats()
-