react-localize - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

build/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.LocalizationConnector = exports.LocalizationWrapper = exports.Text = undefined;
+exports.localizationConnector = exports.LocalizationWrapper = exports.Text = undefined;
 
@@ -13,5 +13,5 @@ var _Localization = require('./Localization');
 
-var _Text = require('./Text');
+var _LocalizationConnector = require('./LocalizationConnector');
 
-var _Text2 = _interopRequireDefault(_Text);
+var _LocalizationConnector2 = _interopRequireDefault(_LocalizationConnector);
 
@@ -22,5 +22,5 @@ var _LocalizationWrapper = require('./LocalizationWrapper');
 
-var _LocalizationConnector = require('./LocalizationConnector');
+var _Text = require('./Text');
 
-var _LocalizationConnector2 = _interopRequireDefault(_LocalizationConnector);
+var _Text2 = _interopRequireDefault(_Text);
 
@@ -32,2 +32,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 exports.LocalizationWrapper = _LocalizationWrapper2.default;
-exports.LocalizationConnector = _LocalizationConnector2.default;
+exports.localizationConnector = _LocalizationConnector2.default;

build/Localization.js

@@ -7,6 +7,4 @@ 'use strict';
 
-var _localizeFormatter = require('./util/localize-formatter');
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _localizeFormatter2 = _interopRequireDefault(_localizeFormatter);
-
 var _lodash = require('lodash.get');
@@ -20,4 +18,15 @@
 
+var _localizeFormatter = require('./util/localize-formatter');
+
+var _localizeFormatter2 = _interopRequireDefault(_localizeFormatter);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+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; }
+
+var element = _react.PropTypes.element;
 var bool = _react.PropTypes.bool;
@@ -28,54 +37,69 @@ var func = _react.PropTypes.func;
 
+var Localization = function (_React$Component) {
+  _inherits(Localization, _React$Component);
 
-var Localization = _react2.default.createClass({
-  displayName: 'Localization',
+  function Localization(props, context) {
+    _classCallCheck(this, Localization);
 
-  propTypes: {
-    messages: objectOf(string).isRequired,
-    localize: func,
-    _localizeDebug: bool,
-    xLocale: bool
-  },
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Localization).call(this, props, context));
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      messages: {},
-      localize: _localizeFormatter2.default,
-      _localizeDebug: false,
-      xLocale: false
-    };
-  },
+    _this.localize = _this.localize.bind(_this);
+    return _this;
+  }
 
+  _createClass(Localization, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      return {
+        _localizeDebug: this.props.debug,
+        localize: this.localize
+      };
+    }
+  }, {
+    key: 'localize',
+    value: function localize(key, values) {
+      values = values || [];
+      var _props = this.props;
+      var messages = _props.messages;
+      var xLocale = _props.xLocale;
 
-  childContextTypes: {
-    localize: func,
-    _localizeDebug: bool
-  },
 
-  getChildContext: function getChildContext() {
-    return {
-      localize: this.localize,
-      _localizeDebug: this.props.debug
-    };
-  },
-  localize: function localize(key, values) {
-    values = values || [];
-    var _props = this.props;
-    var messages = _props.messages;
-    var xLocale = _props.xLocale;
+      if (xLocale) {
+        return 'XXXXXX';
+      }
 
-
-    if (xLocale) {
-      return 'XXXXXX';
+      var message = (0, _lodash2.default)(messages, key, null);
+      return this.props.localize(message, key, values);
     }
+  }, {
+    key: 'render',
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
 
-    var message = (0, _lodash2.default)(messages, key, null);
-    return this.props.localize(message, key, values);
-  },
-  render: function render() {
-    return this.props.children;
-  }
-});
+  return Localization;
+}(_react2.default.Component);
 
+Localization.propTypes = {
+  children: element,
+  debug: bool,
+  localize: func,
+  messages: objectOf(string).isRequired,
+  xLocale: bool
+};
+
+Localization.defaultProps = {
+  debug: false,
+  localize: _localizeFormatter2.default,
+  messages: {},
+  xLocale: false
+};
+
+Localization.childContextTypes = {
+  _localizeDebug: bool,
+  localize: func
+};
+
 exports.default = Localization;
 module.exports = exports['default'];

build/LocalizationConnector.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -16,35 +16,33 @@ var _react = require('react');
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+exports.default = function (ComposedComponent) {
+  var LocalizeConnected = function LocalizeConnected(props, context) {
+    var localize = context.localize;
+    var _localizeDebug = context._localizeDebug;
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-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; }
+    var connectedLocalizer = localize;
+    if (typeof localize !== 'function') {
+      if (_localizeDebug) {
+        console.warn('Attempted to connect ' + ComposedComponent.displayName + ' to react-localize, but no valid\n          localize method was found on context. Did you render this in a <Localization/> conext?');
+      }
 
-exports.default = function (ComposedComponent) {
-  var ConnectLocalization = function (_Component) {
-    _inherits(ConnectLocalization, _Component);
-
-    function ConnectLocalization(props) {
-      _classCallCheck(this, ConnectLocalization);
-
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(ConnectLocalization).call(this, props));
+      connectedLocalizer = function connectedLocalizer(key) {
+        if (_localizeDebug) console.warn('Unable to localize ' + key + ', not connected to react-localize');
+        return key;
+      };
     }
 
-    _createClass(ConnectLocalization, [{
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(ComposedComponent, this.props);
-      }
-    }]);
+    return _react2.default.createElement(ComposedComponent, _extends({}, props, {
+      localize: connectedLocalizer
+    }));
+  };
 
-    return ConnectLocalization;
-  }(_react.Component);
-
-  ConnectLocalization.displayName = 'ConnectLocalization';
-  ConnectLocalization.contextTypes = {
+  LocalizeConnected.displayName = 'ReactLocalized(' + ComposedComponent.name + ')';
+  LocalizeConnected.contextTypes = {
     localize: _react.PropTypes.func
   };
-  return ConnectLocalization;
+
+  return LocalizeConnected;
 };
 
 module.exports = exports['default'];

build/LocalizationWrapper.js

@@ -38,6 +38,6 @@ 'use strict';
 
-    function ConfigureLocalization(props) {
+    function ConfigureLocalization() {
       _classCallCheck(this, ConfigureLocalization);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(ConfigureLocalization).call(this, props));
+      return _possibleConstructorReturn(this, Object.getPrototypeOf(ConfigureLocalization).apply(this, arguments));
     }
@@ -53,2 +53,7 @@
     }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(ComposedComponent, this.props);
+      }
+    }], [{
       key: 'localize',
@@ -61,9 +66,5 @@ value: function localize(key, values) {
         }
+
         return (0, _localizeFormatter2.default)(message, key, values);
       }
-    }, {
-      key: 'render',
-      value: function render() {
-        return _react2.default.createElement(ComposedComponent, this.props);
-      }
     }]);
@@ -74,6 +75,5 @@
 
-  ConfigureLocalization.displayName = 'Wrapped' + ComposedComponent.displayName;
-  ConfigureLocalization.childContextTypes = _extends({}, ComposedComponent.childContextTypes, {
-    localize: _react.PropTypes.func
-  });
+  ConfigureLocalization.displayName = 'Wrapped' + (ComposedComponent.displayName || ComposedComponent.name || 'Component');
+  ConfigureLocalization.childContextTypes = _extends({}, ComposedComponent.childContextTypes, { localize: _react.PropTypes.func });
+
   return ConfigureLocalization;
@@ -80,0 +80,0 @@ };

build/Text.js

@@ -15,6 +15,7 @@ 'use strict';
 
-var array = _react.PropTypes.array;
+var arrayOf = _react.PropTypes.arrayOf;
 var bool = _react.PropTypes.bool;
 var func = _react.PropTypes.func;
 var string = _react.PropTypes.string;
+var any = _react.PropTypes.any;
 
@@ -53,3 +54,3 @@
   message: string.isRequired,
-  values: array
+  values: arrayOf(any)
 };
@@ -56,0 +57,0 @@

build/util/localize-formatter.js

@@ -7,2 +7,10 @@ 'use strict';
 
+var _util = require('util');
+
+var _util2 = _interopRequireDefault(_util);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 exports.default = function (message, key, values) {
@@ -16,14 +24,2 @@ if (message) {
 
-var _lodash = require('lodash.get');
-
-var _lodash2 = _interopRequireDefault(_lodash);
-
-var _util = require('util');
-
-var _util2 = _interopRequireDefault(_util);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 module.exports = exports['default'];

CHANGELOG.md

@@ -7,2 +7,14 @@ # Change Log
 
+## 2.0.0 2017-02-14
+### Added
+- Support for `.eslintrc`, code clean up to get `src/` directory passing new rules
+- Connected components can now log warnings out when `_localizeDebug` is set, and will
+always be passed a safe to invoke function regardless of a missing context function.
+
+### Changed
+- Localization Connector now behaves more like redux `connect()` in that it passes
+`localize()` as a prop to components now, removing the need for components to access
+context.
+- Project now uses `save-exact` for installed dependencies
+
 ## 1.1.1 2016-08-02
@@ -9,0 +21,0 @@ ### Fixed

package.json

 {
   "name": "react-localize",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "A simple context wrapper and text localization component for localizing strings",
@@ -9,5 +9,6 @@ "main": "build/index.js",
     "githooks": "gulp githooks",
-    "precommit": "npm run test",
+    "precommit": "npm run lint && npm run test",
     "prepublish": "in-publish && npm t && npm run build || not-in-publish",
-    "test": "gulp test"
+    "test": "gulp test",
+    "lint": "eslint src/*.jsx"
   },
@@ -30,3 +31,3 @@ "repository": {
     "in-publish": "2.0.0",
-    "lodash.get": "^4.0.0",
+    "lodash.get": "4.0.0",
     "util": "0.10.3"
@@ -40,12 +41,17 @@ },
     "babel-register": "6.7.2",
-    "chai": "^3.5.0",
+    "chai": "3.5.0",
+    "eslint": "3.6.1",
+    "eslint-config-airbnb": "12.0.0",
+    "eslint-plugin-import": "1.16.0",
+    "eslint-plugin-jsx-a11y": "2.2.2",
+    "eslint-plugin-react": "6.3.0",
     "gulp": "git://github.com/gulpjs/gulp.git#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
     "gulp-babel": "6.1.2",
-    "gulp-mocha": "^2.2.0",
+    "gulp-mocha": "2.2.0",
     "gulp-symlink": "2.1.4",
-    "gulp-util": "^3.0.7",
-    "mocha": "^2.5.3",
-    "react": "^0.14.6 || 15.x",
-    "react-dom": "^0.14.6 || 15.x"
+    "gulp-util": "3.0.7",
+    "mocha": "2.5.3",
+    "react": "0.14.6 || 15.x",
+    "react-dom": "0.14.6 || 15.x"
   }
 }

README.md

@@ -65,24 +65,20 @@ # react-localize
 
-### LocalizationWrapper
-If you need to do non-JSX localization and you just want the string back, you must wire your component up to context in order to pick up the formatter function. We provide an HOC wrapper to help with this, like so:
+### localizationConnector
+This connector behaves similarly to [connect()](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) in that it will take a `context.localize()` function provided by `<Localization/>` and then pass it as a prop to the component you're intending to use.
 
 ```js
-import { LocalizationWrapper } from 'react-localize';
+import { localizationConnector } from 'react-localize';
 
-const MyComponent = React.createClass({
-  // stuff
-  render() {
-    return <input placeholder={this.context.localize('foo')} />;
-  }
+const MyComponent = props => {
+  const {label, localize} = this.props;
+  return <p>
+    <label>{label}</label>
+    <input placeholder={localize('foo')} />;
+  </p>
+};
 
-});
-
-export default LocalizationWrapper(MyComponent);
-
+export default localizationConnector(MyComponent);
 ```
 
-This is just a convenience HOC for delcaring `contextTypes` on your component, which you're welcome to do if you don't like this pattern.
-
-
-### LocalizationConnector
+### LocalizationWrapper
 There's also an HOC wrapper to quickly provide childContextTypes for a given component. Let's redo the first example above using this pattern:
@@ -89,0 +85,0 @@

src/index.js

 import Localization from './Localization';
-import { default as Text } from './Text';
+import localizationConnector from './LocalizationConnector';
 import LocalizationWrapper from './LocalizationWrapper';
-import LocalizationConnector from './LocalizationConnector';
+import Text from './Text';
 
 export default Localization;
-export { Text, LocalizationWrapper, LocalizationConnector };
+export { Text, LocalizationWrapper, localizationConnector };

src/Localization.jsx

@@ -1,34 +0,19 @@
-import defaultLocalizer from './util/localize-formatter';
 import get from 'lodash.get';
 import React, { PropTypes } from 'react';
-const { bool, func, objectOf, string } = PropTypes;
+import defaultLocalizer from './util/localize-formatter';
 
-const Localization = React.createClass({
-  propTypes: {
-    messages: objectOf(string).isRequired,
-    localize: func,
-    _localizeDebug: bool,
-    xLocale: bool
-  },
+const { element, bool, func, objectOf, string } = PropTypes;
 
-  getDefaultProps() {
-    return {
-      messages: {},
-      localize: defaultLocalizer,
-      _localizeDebug: false,
-      xLocale: false
-    };
-  },
+class Localization extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.localize = this.localize.bind(this);
+  }
 
-  childContextTypes: {
-    localize: func,
-    _localizeDebug: bool
-  },
-
   getChildContext() {
     return {
-      localize: this.localize,
-      _localizeDebug: this.props.debug
+      _localizeDebug: this.props.debug,
+      localize: this.localize
     };
-  },
+  }
 
@@ -45,3 +30,3 @@ localize(key, values) {
     return this.props.localize(message, key, values);
-  },
+  }
 
@@ -51,4 +36,24 @@ render() {
   }
-});
+}
 
+Localization.propTypes = {
+  children: element,
+  debug: bool,
+  localize: func,
+  messages: objectOf(string).isRequired,
+  xLocale: bool
+};
+
+Localization.defaultProps = {
+  debug: false,
+  localize: defaultLocalizer,
+  messages: {},
+  xLocale: false
+};
+
+Localization.childContextTypes = {
+  _localizeDebug: bool,
+  localize: func
+};
+
 export default Localization;

src/Text.jsx

@@ -16,4 +16,5 @@ /*
 import React, { PropTypes } from 'react';
-const { array, bool, func, string } = PropTypes;
 
+const { arrayOf, bool, func, string, any } = PropTypes;
+
 const Text = (props, context) => {
@@ -40,3 +41,3 @@ const { message, values, ...rest } = props;
   message: string.isRequired,
-  values: array
+  values: arrayOf(any)
 };
@@ -43,0 +44,0 @@

src/util/localize-formatter.js

@@ -1,5 +0,4 @@
-import get from 'lodash.get';
 import util from 'util';
 
-export default function(message, key, values) {
+export default (message, key, values) => {
   if (message) {
@@ -10,2 +9,2 @@ return util.format(message, ...values);
   return key;
-}
+};

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

Total package byte prevSize

36857

increased by13.68%

Number of package files

29

increased by7.41%

Lines of code

671

increased by10.18%

Worsened metrics

Dev dependency count

16

increased by45.45%

Number of lines in readme file

131

decreased by-2.96%

Dependency changes

• + Addedlodash.get@4.0.0(transitive)

• - Removedlodash.get@4.4.2(transitive)

• Updatedlodash.get@4.0.0