Release 0.2.6

Author: seeden

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-translate-maker",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Universal internationalization (i18n) open source library for React",
   "main": "dist/index.js",
   "keywords": [
@@ -46,8 +46,10 @@
   },
   "homepage": "https://github.com/CherryProjects/react-translate-maker",
   "dependencies": {
+    "lodash": "^4.14.1",
     "translate-maker": "^0.4.5",
-    "react-provide-props": "^2.0.3"
+    "react-provide-props": "^2.0.3",
+    "react-addons-test-utils": "^15.3.0"
   },
   "devDependencies": {
     "babel-cli": "^6.8.0",

src/LocaleProvider.jsx

@@ -37,8 +37,6 @@ export default class LocaleProvider extends Component {
       translate,
       locale: translate.getLocale(),
     };
-
-    this.t = this.t.bind(this);
   }
 
   componentDidMount() {
@@ -64,7 +62,7 @@ export default class LocaleProvider extends Component {
     }
   }
 
-  t(path, attrs, defaultValue) {
+  t = (path, attrs, defaultValue) => {
     return this.get(path, attrs, defaultValue);
   }
 

src/Translate.jsx

@@ -1,5 +1,28 @@
 import React, { Component, PropTypes } from 'react';
+import { renderToStaticMarkup } from 'react/lib/ReactDOMServer';
 import LocaleProvider from './LocaleProvider';
+import forEach from 'lodash/forEach';
+import { isElement } from 'react-addons-test-utils';
+
+export function prepareProps(props, localeProvider) {
+  const newProps = {};
+  let changed = false;
+
+  forEach(props, (value, key) => {
+    const isReactElement = isElement(value);
+    if (!isReactElement) {
+      newProps[key] = value;
+      return;
+    }
+
+    changed = true;
+    newProps[key] = renderToStaticMarkup(
+      <LocaleProvider {...localeProvider.props} children={value} />
+    );
+  });
+
+  return changed ? newProps : props;
+}
 
 export default class Translate extends Component {
   static contextTypes = {
@@ -36,13 +59,19 @@ export default class Translate extends Component {
     return `${parentPath}.${path}`;
   }
 
+
+
   render() {
     const { tagName, params, defaultValue, className, props = {} } = this.props;
 
     const path = this.getPath();
 
-    const translate = this.context.translate;
-    const text = translate.get(path, params || this.props, defaultValue);
+    const { translate } = this.context;
+
+    const currentProps = params || this.props;
+    const updatedProps = prepareProps(currentProps, translate);
+    const isChanged = currentProps !== updatedProps;
+    const text = translate.get(path, updatedProps, defaultValue);
 
     if (className && !props.className) {
       props.className = className;

src/TranslateHTML.jsx

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import LocaleProvider from './LocaleProvider';
+import { prepareProps } from './Translate';
 
 export default class TranslateHTML extends Component {
   static contextTypes = {
@@ -41,9 +42,12 @@ export default class TranslateHTML extends Component {
     const { tagName, params, defaultValue, props = {}, children, className } = this.props;
 
     const path = this.getPath();
+    const { translate } = this.context;
 
-    const translate = this.context.translate;
-    const text = translate.get(path, params || this.props, defaultValue);
+    const currentProps = params || this.props;
+    const updatedProps = prepareProps(currentProps, translate);
+    const isChanged = currentProps !== updatedProps;
+    const text = translate.get(path, updatedProps, defaultValue);
 
     const elementProps = {
       className,

tests/test.jsx

@@ -340,4 +340,39 @@ describe('Translate', () => {
     const content = findDOMNode(node).querySelector('div');
     findDOMNode(node).innerHTML.should.equal('Testovacia odpoved');
   });
+
+  it('should be able to other components as props', () => {
+    const adapter = {
+      sk_SK: {
+        test: 'Testovacia odpoved {$link}',
+      },
+    };
+
+    const node = renderJSX(
+      <LocaleProvider locale="sk_SK" adapter={adapter}>
+        <TranslateHTML path="test" link={<a>Asdf</a>} />
+      </LocaleProvider>
+    );
+
+    const content = findDOMNode(node).querySelector('div');
+    findDOMNode(node).innerHTML.should.equal('Testovacia odpoved <a>Asdf</a>');
+  });
+
+  it('should be able to other components as props with Translate', () => {
+    const adapter = {
+      sk_SK: {
+        test: 'Testovacia odpoved {$link}',
+        inner: '123',
+      },
+    };
+
+    const node = renderJSX(
+      <LocaleProvider locale="sk_SK" adapter={adapter}>
+        <TranslateHTML path="test" link={<a>Asdf <Translate path="inner" /></a>} />
+      </LocaleProvider>
+    );
+
+    const content = findDOMNode(node).querySelector('div');
+    findDOMNode(node).innerHTML.should.equal('Testovacia odpoved <a>Asdf <span>123</span></a>');
+  });
 });