Merge pull request #8 from eugene-manuilov/release/0.3.2

Release/0.3.2

.gitignore

@@ -2,4 +2,6 @@
 /node_modules/
 /lib/
 /dist/
-/npm-debug.log
+/npm-debug.log
+/examples/poedit/node_modules/
+/examples/poedit/**/*.mo

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## v0.3.2 (2017-08-04)
+
+**Implemented enhancements:**
+
+- Added a sample application which shows how to use Poedit and React/React-Router conjunction to make translatable applications.
+- Added ability to import Textdomain component directly.
+
 ## v0.3.1 (2017-06-28)
 
 **Fixed issues:**

README.md

@@ -1,4 +1,4 @@
-# react-gettext 0.3.1
+# react-gettext 0.3.2
 
 [![Build Status](https://travis-ci.org/eugene-manuilov/react-gettext.svg?branch=master)](https://travis-ci.org/eugene-manuilov/react-gettext)
 
@@ -100,6 +100,8 @@ After doing it you can start using `gettext`, `ngettext`, `xgettext` and `nxgett
 + };
 ```
 
+See an [example](https://github.com/eugene-manuilov/react-gettext/tree/master/examples) application to get better understanding how to use it.
+
 ## Documentation
 
 ### withGettext(translations, pluralForms)
@@ -158,6 +160,8 @@ const HOC = withGettext()(App);
 ReactDOM.render(<HOC translations={getTranslations} plural={getPluralForms}>...</HOC>, ...);
 ```
 
+One more alternative is to not create HOC, but use Textdomain component directly. You can import it using `import { Textdomain } from 'react-gettext'` and use it as a regular component which will provide context functions to translate your messages. Just don't forget to pass `translations` and `plural` props to this component when you render it.
+
 
 ### gettext(message)
 

__tests__/hoc.js

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import faker from 'faker';
 
-import withGettext from '../lib/index';
+import withGettext, { Textdomain } from '../lib/index';
 
 describe('Higher-order-component', () => {
 	class baseComponent extends Component {
@@ -41,3 +41,9 @@ describe('Higher-order-component', () => {
 		expect(instance.getPluralForm(5)).toBe(2);
 	});
 });
+
+describe('Textdomain', () => {
+	test('named export', () => {
+		expect(typeof Textdomain).toBe('function');
+	});
+});

examples/poedit/.eslintrc

@@ -0,0 +1,15 @@
+{
+	"extends": "airbnb",
+	"rules": {
+		"import/no-dynamic-require": 0,
+		"global-require": 0,
+		"max-len": 0,
+		"no-tabs": 0,
+		"indent": [2, "tab", { "SwitchCase": 1 }],
+		"react/jsx-indent": [2, "tab"],
+		"react/jsx-filename-extension": 0
+	},
+	"globals": {
+		"document": false
+	}
+}

examples/poedit/README.md

@@ -0,0 +1,19 @@
+# Poedit example
+
+This example uses POT, PO and MO files generated by Poedit to collect and translate static copies in the React components. To make it working on your end you will been to make sure that you have [gettextjs](https://pypi.python.org/pypi/gettextjs) (python package) installed on your computer. To do it you will need to run following command:
+
+```
+pip3 install gettextjs
+```
+
+## Start example
+
+To launch this example on your computer, you will need to install all dependencies by running `npm i` in the example root folder and then start local dev server by running `npm start` command. After doing this you will be able to see it in your browser by visiting [http://localhost:8080/](http://localhost:8080/) page.
+
+## Translations workflow with Poedit
+
+Whenever you make a change in your static copy inside of your React components, you will need to update your po files and translations in it. You can find all po files in the `languages/LC_MESSAGES` directory. Use [Poedit](https://poedit.net/) application to work with po files on your computer.
+
+Once you finish updating your translations, you need to generate json files from mo files created by Poedit. To do it you will need to run `gettextjs --json ./ ./src/` command and it will convert all mo files into json files. Restart your local dev server and your translations will appear in your browser.
+
+There are two commands in the package.json file which you can use to generate mo files from po files and to generate json files from mo files. It is `gettext:compile` and `gettext:convert` which you can run using npm: `npm run gettext:compile` and `npm run gettext:convert`.

examples/poedit/languages/LC_MESSAGES/_.pot

@@ -0,0 +1,40 @@
+# smartling.placeholder_format_custom = %s
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"POT-Creation-Date: 2017-08-03 14:52+0300\n"
+"PO-Revision-Date: 2017-03-22 20:58+0200\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Poedit 2.0.1\n"
+"X-Poedit-Basepath: ../../src\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"X-Poedit-KeywordsList: gettext;ngettext:1,2;xgettext:1,2c;nxgettext:1,2,4c\n"
+"X-Poedit-SourceCharset: UTF-8\n"
+"X-Poedit-SearchPath-0: components\n"
+
+#: components/Page.js:37
+msgid "I watched the storm, so beautiful yet terrific."
+msgstr ""
+
+#: components/Page.js:40
+msgctxt "A sample text from Google Fonts service"
+msgid "Almost before we knew it, we had left the ground."
+msgstr ""
+
+#: components/Page.js:45
+msgid "hour"
+msgid_plural "hours"
+msgstr[0] ""
+msgstr[1] ""
+
+#: components/Page.js:51
+msgctxt "Number of hours"
+msgid "minute"
+msgid_plural "minutes"
+msgstr[0] ""
+msgstr[1] ""

examples/poedit/languages/LC_MESSAGES/de.po

@@ -0,0 +1,40 @@
+# smartling.placeholder_format_custom = %s
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"POT-Creation-Date: 2017-08-03 14:53+0300\n"
+"PO-Revision-Date: 2017-08-03 14:58+0300\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Language: de\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Poedit 2.0.1\n"
+"X-Poedit-Basepath: ../../src\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"X-Poedit-KeywordsList: gettext;ngettext:1,2;xgettext:1,2c;nxgettext:1,2,4c\n"
+"X-Poedit-SourceCharset: UTF-8\n"
+"X-Poedit-SearchPath-0: components\n"
+
+#: components/Page.js:37
+msgid "I watched the storm, so beautiful yet terrific."
+msgstr "Ich sah den Sturm so schön und doch schrecklich an."
+
+#: components/Page.js:40
+msgctxt "A sample text from Google Fonts service"
+msgid "Almost before we knew it, we had left the ground."
+msgstr "Fast bevor wir es wussten, hatten wir den Boden verlassen."
+
+#: components/Page.js:45
+msgid "hour"
+msgid_plural "hours"
+msgstr[0] "stunde"
+msgstr[1] "stunden"
+
+#: components/Page.js:51
+msgctxt "Number of hours"
+msgid "minute"
+msgid_plural "minutes"
+msgstr[0] "minute"
+msgstr[1] "minuten"

examples/poedit/languages/LC_MESSAGES/fr.po

@@ -0,0 +1,40 @@
+# smartling.placeholder_format_custom = %s
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"POT-Creation-Date: 2017-08-03 14:54+0300\n"
+"PO-Revision-Date: 2017-08-03 14:59+0300\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Language: fr\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Poedit 2.0.1\n"
+"X-Poedit-Basepath: ../../src\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+"X-Poedit-KeywordsList: gettext;ngettext:1,2;xgettext:1,2c;nxgettext:1,2,4c\n"
+"X-Poedit-SourceCharset: UTF-8\n"
+"X-Poedit-SearchPath-0: components\n"
+
+#: components/Page.js:37
+msgid "I watched the storm, so beautiful yet terrific."
+msgstr "J'ai regardé la tempête, si belle mais formidable."
+
+#: components/Page.js:40
+msgctxt "A sample text from Google Fonts service"
+msgid "Almost before we knew it, we had left the ground."
+msgstr "Presque avant nous le savions, nous avions quitté le sol."
+
+#: components/Page.js:45
+msgid "hour"
+msgid_plural "hours"
+msgstr[0] "heure"
+msgstr[1] "heures"
+
+#: components/Page.js:51
+msgctxt "Number of hours"
+msgid "minute"
+msgid_plural "minutes"
+msgstr[0] "minute"
+msgstr[1] "minutes"