Merge pull request #1 from darrenlucas/load-translations

Allow loading translation messages from mo file for current locale

Author: darrenlucas

README.md

@@ -23,7 +23,7 @@ object to child components.  Wrap your component in a Localizer as follows:
     import App from "app"
 
     render(
-        <Localizer locale="cy">
+        <Localizer locale="cy" localeDir="./locale">
             <App />
         </Localizer>
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-g11n",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Globalization for react components using gettext",
   "main": "./lib/index.js",
   "files": [

src/localizer.js

@@ -4,10 +4,10 @@ import translatorFactory from './translator-factory';
 class Localizer extends Component {
 
   getChildContext() {
-    const { locale } = this.props;
+    const { locale, localeDir } = this.props;
     return {
       locale: locale,
-      translator: translatorFactory(locale)
+      translator: translatorFactory(locale, { localeDir: localeDir })
     };
   }
 
@@ -20,6 +20,11 @@ class Localizer extends Component {
 Localizer.propTypes = {
   children: PropTypes.node,
   locale: PropTypes.string.isRequired,
+  localeDir: PropTypes.string
+};
+
+Localizer.defaultProps = {
+  localeDir: 'locale'
 };
 
 Localizer.childContextTypes = {

src/translator-factory.js

@@ -1,16 +1,21 @@
+import path from 'path';
 import fs from 'fs';
 import gettextParser from 'gettext-parser';
 import Translator from './translator';
 
-const translatorFactory = (locale) => {
+const translatorFactory = (locale, { localeDir = './locale' } = {}) => {
 
-  // TODO: Translation file loading
-  // Always load from localeDir/<locale>/LC_MESSAGES/messages.mo
-  //const filePath = path.resolve(localeDir, locale, 'LC_MESSAGES', 'messages.mo');
-  //const moFile = fs.readFileSync(moFile, 'utf-8');
-  //const { translations } = moFile;
+  var translations = {};
 
-  const translator = new Translator(locale);
+  // TODO: Currently only a domain of 'messages' is supported
+  const filePath = path.resolve(localeDir, locale, 'LC_MESSAGES', 'messages.mo');
+
+  if (fs.existsSync(filePath)) {
+    const moFile = fs.readFileSync(filePath);
+    var { translations } = gettextParser.mo.parse(moFile, 'utf-8');
+  }
+
+  const translator = new Translator(locale, translations);
 
   return translator;
 

test/fixtures/locale/README.md

@@ -0,0 +1,12 @@
+Test Locales
+============
+
+This directory contains locales used for unit testing.
+
+To update locales from the pot file run the following:
+
+    msgmerge --update fr/LC_MESSAGES/messages.po messages.pot
+
+To compile .mo files:
+
+    msgfmt fr/LC_MESSAGES/messages.po -o fr/LC_MESSAGES/messages.mo

test/fixtures/locale/fr/LC_MESSAGES/messages.mo

@@ -0,0 +1,16 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: react-g 11n\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2017-01-15 20:51+0000\n"
+"PO-Revision-Date: 2017-01-27 14:35+0000\n"
+"Last-Translator: Darren Lucas <[email protected]>\n"
+"Language-Team: French\n"
+"Language: fr\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+
+msgid "hello"
+msgstr "bonjour"

test/fixtures/locale/fr/LC_MESSAGES/messages.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: PACKAGE VERSION\n"
+"Language-Team: LANGUAGE <[email protected]>\n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"POT-Creation-Date: 2017-01-15 20:51+0000\n"
+
+msgid "hello"
+msgstr ""

test/fixtures/locale/messages.pot

@@ -24,3 +24,26 @@ test('Localizer', () => {
   );
 
 });
+
+test('Localizer with localeDir', () => {
+
+  class DummyComponent extends Component {
+    render() {
+      expect(this.context.locale).toBe('fr');
+      expect(this.context.translator.translate('hello')).toBe('bonjour');
+      return null
+    }
+  }
+
+  DummyComponent.contextTypes = {
+    locale: PropTypes.string,
+    translator: PropTypes.object
+  };
+
+  renderer.create(
+    <Localizer locale='fr' localeDir='./test/fixtures/locale'>
+      <DummyComponent />
+    </Localizer>
+  );
+
+});

test/localizer.test.js

@@ -0,0 +1,15 @@
+import translatorFactory from '../src/translator-factory';
+
+const options = {
+  localeDir: './test/fixtures/locale'
+}
+
+test('translatorFactory', () => {
+  const translator = translatorFactory('fr', options);
+  expect(translator.translate('hello')).toBe('bonjour');
+});
+
+test('translatorFactory with missing locale', () => {
+  const translator = translatorFactory('es', options);
+  expect(translator.translate('hello')).toBe('hello');
+});