react-i18nify - npm Package Compare versions

Comparing version 1.6.3 to 1.7.0

build/lib/Base.js

@@ -31,4 +31,4 @@ 'use strict';
   _createClass(Base, [{
-    key: 'componentWillMount',
-    value: function componentWillMount() {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
       Base.instances.push(this);
@@ -35,0 +35,0 @@ }

build/lib/I18n.js

@@ -53,3 +53,3 @@ 'use strict';
   setLocale: function setLocale(locale) {
-    var rerenderComponents = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
+    var rerenderComponents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
@@ -62,3 +62,3 @@ this._locale = locale;
   setTranslations: function setTranslations(translations) {
-    var rerenderComponents = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
+    var rerenderComponents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
@@ -97,3 +97,3 @@ this._translations = translations;
   t: function t(key) {
-    var replacements = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+    var replacements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -121,3 +121,3 @@ return this._translate(key, replacements);
   _translate: function _translate(key) {
-    var replacements = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+    var replacements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -134,3 +134,3 @@ var translation = '';
   _localize: function _localize(value) {
-    var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -154,3 +154,3 @@ if (options.dateFormat) {
   _fetchTranslation: function _fetchTranslation(translations, key) {
-    var count = arguments.length <= 2 || arguments[2] === undefined ? null : arguments[2];
+    var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
 
@@ -157,0 +157,0 @@ var _index = key.indexOf('.');

build/lib/Localize.js

@@ -26,2 +26,3 @@ 'use strict';
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint no-underscore-dangle: "off" */
+/* eslint react/no-danger: "off" */
 
@@ -43,6 +44,10 @@ var Localize = function (_BaseComponent) {
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Localize.__proto__ || Object.getPrototypeOf(Localize)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
+      var localization = _I18n2.default._localize(_this.props.value, _this.props.dateFormat ? { dateFormat: _this.props.dateFormat } : _this.props.options);
+      if (_this.props.dangerousHTML) {
+        return _react2.default.createElement('span', { style: _this.props.style, dangerouslySetInnerHTML: { __html: localization } });
+      }
       return _react2.default.createElement(
         'span',
-        null,
-        _I18n2.default._localize(_this.props.value, _this.props.dateFormat ? { dateFormat: _this.props.dateFormat } : _this.props.options)
+        { style: _this.props.style },
+        localization
       );
@@ -58,4 +63,9 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
   options: _react2.default.PropTypes.object,
-  dateFormat: _react2.default.PropTypes.string
+  dateFormat: _react2.default.PropTypes.string,
+  dangerousHTML: _react2.default.PropTypes.bool,
+  /**
+   * Optional styling
+   */
+  style: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]))
 };
 exports.default = Localize;

build/lib/Translate.js

@@ -28,2 +28,3 @@ 'use strict';
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint no-underscore-dangle: "off" */
+/* eslint react/no-danger: "off" */
 
@@ -49,6 +50,10 @@ var Translate = function (_BaseComponent) {
     }, _this.render = function () {
+      var translation = _I18n2.default._translate(_this.props.value, _this.otherProps());
+      if (_this.props.dangerousHTML) {
+        return _react2.default.createElement('span', { style: _this.props.style, dangerouslySetInnerHTML: { __html: translation } });
+      }
       return _react2.default.createElement(
         'span',
-        null,
-        _I18n2.default._translate(_this.props.value, _this.otherProps())
+        { style: _this.props.style },
+        translation
       );
@@ -62,4 +67,9 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
 Translate.propTypes = {
-  value: _react2.default.PropTypes.string.isRequired
+  value: _react2.default.PropTypes.string.isRequired,
+  dangerousHTML: _react2.default.PropTypes.bool,
+  /**
+   * Optional styling
+   */
+  style: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]))
 };
 exports.default = Translate;

example.js

@@ -1,8 +0,14 @@
-var React = require('react');
-var ReactDOM = require('react-dom/server');
+const React = require('react');
+const ReactDOM = require('react-dom/server');
 
-var I18n = require('react-i18nify').I18n;
-var Translate = require('react-i18nify').Translate;
-var Localize = require('react-i18nify').Localize;
+let ReactI18nfiy = null;
 
+try {
+  ReactI18nfiy = require('react-i18nify'); //
+} catch (e) {
+  ReactI18nfiy = require('./build/index.js');
+}
+
+const { I18n, Translate, Localize } = ReactI18nfiy;
+
 I18n.setTranslations({
@@ -19,3 +25,4 @@ en: {
     export_0: 'Nothing to export',
-    export_1: 'Export %{count} item'
+    export_1: 'Export %{count} item',
+    two_lines: 'Line 1<br />Line 2'
   },
@@ -32,3 +39,4 @@ nl: {
     export_0: 'Niks te exporteren',
-    export_1: 'Exporteer %{count} ding'
+    export_1: 'Exporteer %{count} ding',
+    two_lines: 'Regel 1<br />Regel 2'
   }
@@ -53,2 +61,4 @@ });
       <br />
+      <Translate value="application.title" style={{ fontWeight: 'bold', fontSize: '14px' }} />
+      <br />
       <Translate value="application.hello" name="Aad" />
@@ -63,2 +73,4 @@ <br />
       <Translate value="export" count={2} />
+      <br />
+      <Translate value="two_lines" dangerousHTML />
     </div>
@@ -68,2 +80,2 @@ );
 
-ReactDOM.renderToString(<AwesomeComponent/>);
+console.log(ReactDOM.renderToString(<AwesomeComponent />));

gulpfile.js

@@ -12,3 +12,3 @@ const gulp = require('gulp');
   gulp.src(source)
-    .pipe(babel({ presets: ['es2015', 'react', 'stage-1'] }))
+    .pipe(babel())
     .pipe(gulp.dest('build/'))
@@ -15,0 +15,0 @@ ));

package.json

 {
   "name": "react-i18nify",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "Simple i18n translation and localization components and helpers for React applications.",
@@ -33,2 +33,3 @@ "main": "./build/index.js",
   "devDependencies": {
+    "babel-core": "^6.20.0",
     "babel-preset-es2015": "^6.9.0",
@@ -39,4 +40,5 @@ "babel-preset-react": "^6.5.0",
     "gulp-babel": "^6.1.2",
-    "gulp-dev-tasks": "^1.0.23"
+    "gulp-dev-tasks": "^1.0.23",
+    "react-dom": "^15.4.1"
   }
 }

README.md

@@ -66,5 +66,6 @@ # react-i18nify
       },
-      export: 'Export %{count} items'
+      export: 'Export %{count} items',
       export_0: 'Nothing to export',
       export_1: 'Export %{count} item',
+      two_lines: 'Line 1<br />Line 2'
     },
@@ -79,5 +80,6 @@ nl: {
       },
-      export: 'Exporteer %{count} dingen'
+      export: 'Exporteer %{count} dingen',
       export_0: 'Niks te exporteren',
       export_1: 'Exporteer %{count} ding',
+      two_lines: 'Regel 1<br />Regel 2'
     }
@@ -110,2 +112,4 @@ };
           // => returns '<span>Toffe app met i18n!</span>' for locale 'nl'
+        <Translate value="application.title" style={{ fontWeight: 'bold', fontSize: '14px' }} />
+        // => returns '<span style="font-weight:bold;font-size:14px;">Toffe app met i18n!</span>' for locale 'nl'
         <Translate value="application.hello" name="Aad"/>
@@ -121,2 +125,4 @@ // => returns '<span>Hallo, Aad!</span>' for locale 'nl'
           // => returns '<span>Exporteer 2 dingen</span> for locale 'nl'
+        <Translate value="two_lines" dangerousHTML />
+          // => returns '<span>Regel 1<br />Regel 2</span>'
       </div>
@@ -123,0 +129,0 @@ );

src/lib/Localize.jsx

 /* eslint no-underscore-dangle: "off" */
+/* eslint react/no-danger: "off" */
 
@@ -16,14 +17,26 @@ import React from 'react';
     dateFormat: React.PropTypes.string,
+    dangerousHTML: React.PropTypes.bool,
+    /**
+     * Optional styling
+     */
+    style: React.PropTypes.objectOf(
+      React.PropTypes.oneOfType([
+        React.PropTypes.number,
+        React.PropTypes.string,
+      ])
+    ),
   };
 
-  render = () => (
-    <span>
-      {I18n._localize(
-        this.props.value,
-        this.props.dateFormat
-          ? { dateFormat: this.props.dateFormat }
-          : this.props.options
-      )}
-    </span>
-  );
+  render = () => {
+    const localization = I18n._localize(
+      this.props.value,
+      this.props.dateFormat
+        ? { dateFormat: this.props.dateFormat }
+        : this.props.options
+    );
+    if (this.props.dangerousHTML) {
+      return <span style={this.props.style} dangerouslySetInnerHTML={{ __html: localization }} />;
+    }
+    return <span style={this.props.style}>{localization}</span>;
+  }
 }

src/lib/Translate.jsx

 /* eslint no-underscore-dangle: "off" */
+/* eslint react/no-danger: "off" */
 
@@ -8,5 +9,14 @@ import React from 'react';
 export default class Translate extends BaseComponent {
-
   static propTypes = {
     value: React.PropTypes.string.isRequired,
+    dangerousHTML: React.PropTypes.bool,
+    /**
+     * Optional styling
+     */
+    style: React.PropTypes.objectOf(
+      React.PropTypes.oneOfType([
+        React.PropTypes.number,
+        React.PropTypes.string,
+      ])
+    ),
   };
@@ -20,7 +30,9 @@
 
-  render = () => (
-    <span>
-      {I18n._translate(this.props.value, this.otherProps())}
-    </span>
-  );
+  render = () => {
+    const translation = I18n._translate(this.props.value, this.otherProps());
+    if (this.props.dangerousHTML) {
+      return <span style={this.props.style} dangerouslySetInnerHTML={{ __html: translation }} />;
+    }
+    return <span style={this.props.style}>{translation}</span>;
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

652

increased by9.76%

Number of lines in readme file

164

increased by3.8%

Worsened metrics

Total package byte prevSize

32820

decreased by-48.68%

Dev dependency count

8

increased by33.33%

Number of package files

21

decreased by-27.59%

No dependency changes