react-simple-i18n - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

lib/create-i18n.js

@@ -11,6 +11,2 @@ "use strict";
 
-var langData;
-var currentLang;
-var listenHandlers = [];
-
 var getNestedValue = function getNestedValue(data, keyArr) {
@@ -35,2 +31,4 @@ var currentIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var currentLang;
+  var listenHandlers = [];
 
@@ -46,3 +44,3 @@ if (data === null || _typeof(data) !== 'object') {
   var lang = options.lang;
-  langData = data;
+  var langData = data;
   currentLang = lang || (data.enUS ? 'enUS' : null);
@@ -94,3 +92,3 @@
     listenHandlers.forEach(function (func) {
-      func();
+      func({});
     });
@@ -97,0 +95,0 @@ }

lib/index.js

@@ -24,2 +24,8 @@ "use strict";
 });
+Object.defineProperty(exports, "useI18n", {
+  enumerable: true,
+  get: function get() {
+    return _useI18n["default"];
+  }
+});
 
@@ -32,2 +38,4 @@ var _provider = _interopRequireDefault(require("./provider"));
 
+var _useI18n = _interopRequireDefault(require("./use-i18n"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

lib/with-i18n.js

@@ -14,4 +14,6 @@ "use strict";
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -29,6 +31,6 @@
 
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -38,48 +40,59 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function withI18n(WrappedComp) {
-  return (
-    /*#__PURE__*/
-    function (_Component) {
-      _inherits(I18nComponent, _Component);
+  var _temp;
 
-      function I18nComponent() {
-        _classCallCheck(this, I18nComponent);
+  return _temp =
+  /*#__PURE__*/
+  function (_Component) {
+    _inherits(I18nComponent, _Component);
 
-        return _possibleConstructorReturn(this, _getPrototypeOf(I18nComponent).apply(this, arguments));
+    function I18nComponent() {
+      var _getPrototypeOf2;
+
+      var _this;
+
+      _classCallCheck(this, I18nComponent);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
 
-      _createClass(I18nComponent, [{
-        key: "componentDidMount",
-        value: function componentDidMount() {
-          var _this = this;
+      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(I18nComponent)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-          this.updateHandler = function () {
-            _this.forceUpdate();
-          };
+      _defineProperty(_assertThisInitialized(_this), "updateHandler", function () {
+        _this.forceUpdate();
+      });
 
-          this.i18n.listen(this.updateHandler);
-        }
-      }, {
-        key: "componentWillUnmount",
-        value: function componentWillUnmount() {
-          this.i18n.unlisten(this.updateHandler);
-        }
-      }, {
-        key: "render",
-        value: function render() {
-          var _this2 = this;
+      return _this;
+    }
 
-          return _react["default"].createElement(_context["default"].Consumer, null, function (i18n) {
-            _this2.i18n = i18n;
-            return _react["default"].createElement(WrappedComp, _extends({}, _this2.props, {
-              t: i18n.t,
-              i18n: i18n
-            }));
-          });
-        }
-      }]);
+    _createClass(I18nComponent, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.i18n.listen(this.updateHandler);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.i18n.unlisten(this.updateHandler);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this2 = this;
 
-      return I18nComponent;
-    }(_react.Component)
-  );
+        return _react["default"].createElement(_context["default"].Consumer, null, function (i18n) {
+          _this2.i18n = i18n;
+          return _react["default"].createElement(WrappedComp, _extends({}, _this2.props, {
+            t: i18n.t,
+            i18n: i18n
+          }));
+        });
+      }
+    }]);
+
+    return I18nComponent;
+  }(_react.Component), _temp;
 }

package.json

 {
   "name": "react-simple-i18n",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "React i18n solution with context API",
@@ -15,3 +15,5 @@ "main": "lib/index.js",
     ],
-    "setupTestFrameworkScriptFile": "./jest-setup.js",
+    "setupFilesAfterEnv": [
+      "./jest-setup.js"
+    ],
     "verbose": true,
@@ -38,20 +40,21 @@ "testURL": "http://localhost/"
   "devDependencies": {
-    "@babel/cli": "^7.5.0",
-    "@babel/core": "^7.5.4",
-    "@babel/preset-env": "^7.5.4",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/cli": "^7.7.7",
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/preset-env": "^7.7.7",
+    "@babel/preset-react": "^7.7.4",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^8.2.6",
-    "babel-jest": "^24.8.0",
-    "cross-env": "^5.2.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-react": "^7.14.2",
-    "jest": "^24.8.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "cross-env": "^5.2.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.17.0",
+    "jest": "^24.9.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "regenerator-runtime": "^0.12.1"
   }
 }

README.md

 # React Simple I18n
 
-- React i18n solution with context API, support React 16.3.0+
+- React i18n solution with context API, support React 16.3.0+ (16.8.0+ if use hooks)
 - Lightweight, simple usage, easy to configure
-    - Lib size: 9.17KB
-    - Minified: 4.76KB (with [compression-webpack-plugin](https://github.com/webpack-contrib/compression-webpack-plugin))
-    - Gzipped: 1.63KB
+    - Lib size: 13.02KB
+    - Minified: 6.48KB (with [compression-webpack-plugin](https://github.com/webpack-contrib/compression-webpack-plugin))
+    - Gzipped: 2.13KB
 - 100% test coverage, reliable
@@ -12,7 +12,4 @@
 
+Define languages data first
 ```jsx
-import React, { Component } from 'react'
-import { render } from 'react-dom'
-import { createI18n, I18nProvider, withI18n } from 'react-simple-i18n'
-
 const langData = {
@@ -34,3 +31,35 @@ enUS: {
 }
+```
 
+Choice A: Use React hook
+```jsx
+import React, { Component } from 'react'
+import { createI18n, I18nProvider, useI18n } from 'react-simple-i18n'
+
+const Demo = () => {
+  const { t, i18n } = useI18n()
+
+  return (
+    <div>
+      <p>{t('projects')}</p>
+      <p>{t('cars', 'BMW', 'TOYOTA')}</p>
+      <p>{t('nav.home')}</p>
+      <button onClick={() => i18n.setLang('enUS')}>English</button>
+      <button onClick={() => i18n.setLang('zhCN')}>中文</button>
+    </div>
+  )
+}
+
+const App = () => (
+  <I18nProvider i18n={createI18n(langData, { lang: 'enUS' })}>
+    <Demo />
+  </I18nProvider>
+)
+```
+
+Choice B: Use traditional HOC
+```jsx
+import React, { Component } from 'react'
+import { createI18n, I18nProvider, withI18n } from 'react-simple-i18n'
+
 class Demo extends Component {
@@ -66,4 +95,2 @@ handleSetEnglish = () => {
 )
-
-render(<App />, document.getElementById('app-root'))
 ```
@@ -102,3 +129,3 @@
 
-Makes `i18n` available to `withI18n` HOC
+Makes `i18n` available to `withI18n` HOC and `useI18n` hook
 
@@ -115,4 +142,8 @@ #### Props
 
+### useI18n()
+
+A React hook that returns an object with `t` and `i18n`.
+
 # License
 
 MIT

src/create-i18n.js

@@ -1,5 +0,1 @@
-let langData
-let currentLang
-let listenHandlers = []
-
 export const getNestedValue = (data, keyArr, currentIndex = 0) => {
@@ -18,2 +14,5 @@ if (currentIndex === keyArr.length) {
 export default function createI18n(data = {}, options = {}) {
+  let currentLang
+  let listenHandlers = []
+
   if (data === null || typeof data !== 'object') {
@@ -28,3 +27,4 @@ throw new Error('React Simple I18n: Language data should be an object')
   const { lang } = options
-  langData = data
+  const langData = data
+
   currentLang = lang || (data.enUS ? 'enUS' : null)
@@ -69,3 +69,3 @@
     listenHandlers.forEach((func) => {
-      func()
+      func({})
     })
@@ -72,0 +72,0 @@ }

src/index.js

 export { default as I18nProvider } from './provider'
 export { default as createI18n } from './create-i18n'
 export { default as withI18n } from './with-i18n'
+export { default as useI18n } from './use-i18n'

src/with-i18n.js

@@ -6,6 +6,7 @@ import React, { Component } from 'react'
   return class I18nComponent extends Component {
+    updateHandler = () => {
+      this.forceUpdate()
+    }
+
     componentDidMount() {
-      this.updateHandler = () => {
-        this.forceUpdate()
-      }
       this.i18n.listen(this.updateHandler)
@@ -12,0 +13,0 @@ }

src/with-i18n.test.js

@@ -5,16 +5,7 @@ import React from 'react'
 
-// TODO after this issue get fixed: https://github.com/airbnb/enzyme/issues/1620
-// jest.mock('./context', () => {
-//   const createI18n = require('./create-i18n').default
-//   const { testLangData } = require('./create-i18n.test')
-//   const context = require('react').createContext(createI18n(testLangData))
-//   return context
-// })
-
 jest.mock('./context', () => {
   const createI18n = require('./create-i18n').default
   const { testLangData } = require('./create-i18n.test')
-  return {
-    Consumer: (props) => props.children(createI18n(testLangData)),
-  }
+  const context = require('react').createContext(createI18n(testLangData))
+  return context
 })
@@ -21,0 +12,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 15 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

588208

increased by2114.39%

Number of package files

60

increased by172.73%

Lines of code

2605

increased by372.78%

Number of lines in readme file

145

increased by27.19%

Worsened metrics

Dev dependency count

18

increased by5.88%

Number of low supply chain risk alerts

50

increased byInfinity%

Number of medium supply chain risk alerts

3

increased byInfinity%

No dependency changes