@lingui/react - npm Package Compare versions

Comparing version 3.0.0-3 to 3.0.0-4

cjs/react.development.js

@@ -7,94 +7,72 @@ 'use strict';
 
-var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
-var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
-var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
-var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
-var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
-var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
+var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
 var React = require('react');
-var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
-var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread'));
-var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-var hoistStatics = _interopDefault(require('hoist-non-react-statics'));
 var core = require('@lingui/core');
 
-var _React$createContext = React.createContext({
-  i18n: {},
-  defaultRender: null
-}),
-    I18nContextProvider = _React$createContext.Provider,
-    I18n = _React$createContext.Consumer;
-var I18nProvider =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(I18nProvider, _React$Component);
+var LinguiContext = React.createContext(null);
+function useLingui() {
+  var context = React.useContext(LinguiContext);
 
-  function I18nProvider(props) {
-    var _this;
+  if (context == null) {
+    {
+      throw new Error("useLingui hook was used without I18nProvider.");
+    }
 
-    _classCallCheck(this, I18nProvider);
+    return null; // return {}
+  }
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(I18nProvider).call(this, props));
-
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "unsubscribe", void 0);
-
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setContext", function () {
-      var set = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var state = {
-        context: {
-          i18n: _this.props.i18n,
-          defaultRender: _this.props.defaultRender
-        }
-      };
-      if (set) _this.setState(state);
-      return state;
-    });
-
-    _this.state = _this.setContext(false);
-    return _this;
-  }
+  var i18n = context.i18n,
+      defaultRender = context.defaultRender;
+  return {
+    i18n: i18n,
+    defaultRender: defaultRender
+  };
+}
+var I18nProvider = function I18nProvider(props) {
+  var _React$useState = React.useState(refreshContext(true)),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      context = _React$useState2[0],
+      setContext = _React$useState2[1];
   /**
+   * Subscribe for locale/message changes
+   *
    * I18n object from `@lingui/core` is the single source of truth for all i18n related
    * data (active locale, catalogs). When new messages are loaded or locale is changed
-   * we need to trigger re-rendering of I18nContextConsumers.
+   * we need to trigger re-rendering of LinguiContext.Consumers.
    */
 
 
-  _createClass(I18nProvider, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.unsubscribe = this.props.i18n.didActivate(this.setContext);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unsubscribe();
-    }
-    /**
-     * We can't pass `i18n` object directly through context, because even when locale
-     * or messages are changed, i18n object is still the same. Context provider compares
-     * reference identity and suggested workaround is create a wrapper object every time
-     * we need to trigger re-render. See https://reactjs.org/docs/context.html#caveats.
-     *
-     * Due to this effect we also pass `defaultRender` in the same context, instead
-     * of creating a separate Provider/Consumer pair.
-     *
-     * When `set` is false, `setState` isn't called and new state is returned. This is
-     * used in constructor when we can't call `setState`
-     */
+  React.useEffect(function () {
+    var unsubscribe = props.i18n.didActivate(function () {
+      return refreshContext();
+    });
+    return function () {
+      return unsubscribe();
+    };
+  }, []);
+  /**
+   * We can't pass `i18n` object directly through context, because even when locale
+   * or messages are changed, i18n object is still the same. Context provider compares
+   * reference identity and suggested workaround is create a wrapper object every time
+   * we need to trigger re-render. See https://reactjs.org/docs/context.html#caveats.
+   *
+   * Due to this effect we also pass `defaultRender` in the same context, instead
+   * of creating a separate Provider/Consumer pair.
+   */
 
-  }, {
-    key: "render",
-    value: function render() {
-      var context = this.state.context;
-      return React.createElement(I18nContextProvider, {
-        value: context
-      }, context.i18n.locale && this.props.children);
-    }
-  }]);
+  function refreshContext() {
+    var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var newContext = {
+      i18n: props.i18n,
+      defaultRender: props.defaultRender
+    };
+    if (initial) return newContext;
+    setContext(newContext);
+  }
 
-  return I18nProvider;
-}(React.Component);
+  return React.createElement(LinguiContext.Provider, {
+    value: context
+  }, context.i18n.locale && props.children);
+};
 
@@ -112,5 +90,3 @@ var tagRe = /<(\d+)>(.*)<\/\1>|<(\d+)\/>/;
 function formatElements(value) {
-  var elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  // TODO: warn if there're any unprocessed elements
-  // TODO: warn if element at `index` doesn't exist
+  var elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var parts = value.replace(nlRe, "").split(tagRe); // no inline elements, return
@@ -137,3 +113,2 @@
       }, // format children for pair tags
-      // unpaired tags might have children if it's a component passed as a variable
       children ? formatElements(children, elements) : element.props.children));
@@ -188,142 +163,87 @@ if (after) tree.push(after);
 
-var Trans$$1 =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(Trans$$1, _React$Component);
+function Trans(props) {
+  var _useLingui = useLingui(),
+      i18n = _useLingui.i18n,
+      defaultRender = _useLingui.defaultRender;
 
-  function Trans$$1() {
-    _classCallCheck(this, Trans$$1);
+  var _props$render = props.render,
+      render = _props$render === void 0 ? defaultRender : _props$render,
+      id = props.id,
+      message = props.message,
+      formats = props.formats;
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Trans$$1).apply(this, arguments));
-  }
+  var values = _objectSpread({}, props.values);
 
-  _createClass(Trans$$1, [{
-    key: "getTranslation",
-    value: function getTranslation(i18n) {
-      var _this$props = this.props,
-          _this$props$id = _this$props.id,
-          id = _this$props$id === void 0 ? "" : _this$props$id,
-          defaults = _this$props.defaults,
-          formats = _this$props.formats;
+  var components = _objectSpread({}, props.components);
 
-      var values = _objectSpread({}, this.props.values);
+  if (values) {
+    /*
+      Related discussion: https://github.com/lingui/js-lingui/issues/183
+           Values *might* contain React elements with static content.
+      They're replaced with <INDEX /> placeholders and added to `components`.
+           Example:
+      Translation: Hello {name}
+      Values: { name: <strong>Jane</strong> }
+           It'll become "Hello <0 />" with components=[<strong>Jane</strong>]
+      */
+    Object.keys(values).forEach(function (key) {
+      var value = values[key];
+      if (!React.isValidElement(value)) return;
+      var index = Object.keys(components).length;
+      components[index] = value;
+      values[key] = "<".concat(index, "/>");
+    });
+  }
 
-      var components = this.props.components ? _toConsumableArray(this.props.components) : [];
+  var _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, {
+    message: message,
+    formats: formats
+  }) : id; // i18n provider isn't loaded at all
 
-      if (values) {
-        /*
-        Related discussion: https://github.com/lingui/js-lingui/issues/183
-         Values *might* contain React elements with static content.
-        They're replaced with <INDEX /> placeholders and added to `components`.
-         Example:
-        Translation: Hello {name}
-        Values: { name: <strong>Jane</strong> }
-         It'll become "Hello <0 />" with components=[<strong>Jane</strong>]
-        */
-        Object.keys(values).forEach(function (key) {
-          var value = values[key];
-          if (!React.isValidElement(value)) return;
-          var index = components.push(value) - 1; // push returns new length of array
 
-          values[key] = "<".concat(index, "/>");
-        });
-      }
+  var translation = _translation ? formatElements(_translation, components) : null;
 
-      var translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, {
-        defaults: defaults,
-        formats: formats
-      }) : id; // i18n provider isn't loaded at all
+  if (render === null || render === undefined) {
+    return translation;
+  } else if (typeof render === "string") {
+    // Built-in element: h1, p
+    return React.createElement(render, {}, translation);
+  } else if (typeof render === "function") {
+    // Function: (props) => <a title={props.translation}>x</a>
+    return render({
+      id: id,
+      translation: translation,
+      message: message
+    });
+  } // Element: <p className="lear' />
 
-      if (!translation) return null;
-      return formatElements(translation, components);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this = this;
 
-      return React.createElement(I18n, null, function (_ref) {
-        var i18n = _ref.i18n,
-            defaultRender = _ref.defaultRender;
-
-        var translation = _this.getTranslation(i18n);
-
-        var _this$props2 = _this.props,
-            _this$props2$render = _this$props2.render,
-            render = _this$props2$render === void 0 ? defaultRender : _this$props2$render,
-            id = _this$props2.id,
-            defaults = _this$props2.defaults;
-
-        if (render === null || render === undefined) {
-          return translation;
-        } else if (typeof render === "string") {
-          // Built-in element: h1, p
-          return React.createElement(render, {}, translation);
-        } else if (typeof render === "function") {
-          // Function: (props) => <a title={props.translation}>x</a>
-          return render({
-            id: id,
-            translation: translation,
-            defaults: defaults
-          });
-        } // Element: <p className="lear' />
-
-
-        return React.cloneElement(render, {}, translation);
-      });
-    }
-  }]);
-
-  return Trans$$1;
-}(React.Component);
-
-// Flow is missing definition for forwardRef.
-
-function makeWithI18n() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$withHash = _ref.withHash,
-      withHash = _ref$withHash === void 0 ? false : _ref$withHash;
-
-  return function withI18n$$1(WrappedComponent) {
-    var WithI18n = React.forwardRef(function (props, ref) {
-      return React.createElement(I18n, null, function (_ref2) {
-        var i18n = _ref2.i18n;
-        return React.createElement(WrappedComponent, _extends({}, props, {
-          ref: ref,
-          i18n: i18n,
-          i18nHash: withHash ? i18n.locale : undefined
-        }));
-      });
-    });
-    return hoistStatics(WithI18n, WrappedComponent);
-  };
+  return React.cloneElement(render, {}, translation);
 }
+Trans.defaultProps = {
+  values: {},
+  components: {}
+};
 
-var withI18n$$1 = makeWithI18n();
-var withI18nForPure$$1 = makeWithI18n({
-  withHash: true
-});
-
 function createFormat(formatFunction) {
+  // @ts-ignore: React types doens't support string as a component return type
   return function (_ref) {
     var value = _ref.value,
         format = _ref.format;
-    return React.createElement(I18n, null, function (_ref2) {
-      var i18n = _ref2.i18n;
-      var formatter = formatFunction(i18n.locales || i18n.locale, format);
-      return formatter(value);
-    });
+
+    var _useLingui = useLingui(),
+        i18n = _useLingui.i18n;
+
+    var formatter = formatFunction(i18n.locales || i18n.locale, format);
+    return formatter(value);
   };
 }
 
-var DateFormat = createFormat(core.date);
-var NumberFormat = createFormat(core.number);
+var DateFormat = createFormat(core.formats.date);
+var NumberFormat = createFormat(core.formats.number);
 
-exports.setupI18n = core.setupI18n;
-exports.withI18n = withI18n$$1;
-exports.withI18nForPure = withI18nForPure$$1;
+exports.DateFormat = DateFormat;
 exports.I18nProvider = I18nProvider;
-exports.I18n = I18n;
-exports.Trans = Trans$$1;
-exports.DateFormat = DateFormat;
 exports.NumberFormat = NumberFormat;
+exports.Trans = Trans;
+exports.useLingui = useLingui;

cjs/react.production.min.js

@@ -1,10 +0,1 @@
-'use strict';Object.defineProperty(exports,"__esModule",{value:!0});function f(d){return d&&"object"===typeof d&&"default"in d?d["default"]:d}
-var g=f(require("@babel/runtime/helpers/classCallCheck")),k=f(require("@babel/runtime/helpers/createClass")),l=f(require("@babel/runtime/helpers/possibleConstructorReturn")),m=f(require("@babel/runtime/helpers/getPrototypeOf")),q=f(require("@babel/runtime/helpers/inherits")),r=f(require("@babel/runtime/helpers/assertThisInitialized")),t=f(require("@babel/runtime/helpers/defineProperty")),u=require("react"),v=f(require("@babel/runtime/helpers/slicedToArray")),w=f(require("@babel/runtime/helpers/toConsumableArray")),
-x=f(require("@babel/runtime/helpers/objectSpread")),y=f(require("@babel/runtime/helpers/extends")),z=f(require("hoist-non-react-statics")),B=require("@lingui/core"),H=u.createContext({i18n:{},defaultRender:null}),I=H.Provider,J=H.Consumer,K=function(d){function a(h){g(this,a);var b=l(this,m(a).call(this,h));t(r(r(b)),"unsubscribe",void 0);t(r(r(b)),"setContext",function(){var c={context:{i18n:b.props.i18n,defaultRender:b.props.defaultRender}};(0<arguments.length&&void 0!==arguments[0]?arguments[0]:
-1)&&b.setState(c);return c});b.state=b.setContext(!1);return b}q(a,d);k(a,[{key:"componentDidMount",value:function(){this.unsubscribe=this.props.i18n.didActivate(this.setContext)}},{key:"componentWillUnmount",value:function(){this.unsubscribe()}},{key:"render",value:function(){var a=this.state.context;return u.createElement(I,{value:a},a.i18n.locale&&this.props.children)}}]);return a}(u.Component),L=/<(\d+)>(.*)<\/\1>|<(\d+)\/>/,M=/(?:\r\n|\r|\n)/g;
-function N(d){var a=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],h=d.replace(M,"").split(L);if(1===h.length)return d;var b=[],c=h.shift();c&&b.push(c);c=!0;var A=!1,e=void 0;try{for(var n=O(h)[Symbol.iterator](),C;!(c=(C=n.next()).done);c=!0){var p=v(C.value,3),D=p[0],E=p[1],F=p[2],G=a[D];b.push(u.cloneElement(G,{key:D},E?N(E,a):G.props.children));F&&b.push(F)}}catch(R){A=!0,e=R}finally{try{c||null==n.return||n.return()}finally{if(A)throw e;}}return b}
-function O(d){if(!d.length)return[];var a=d.slice(0,4);a=v(a,4);var h=a[1],b=a[2],c=a[3];return[[parseInt(a[0]||b),h||"",c]].concat(O(d.slice(4,d.length)))}
-var P=function(d){function a(){g(this,a);return l(this,m(a).apply(this,arguments))}q(a,d);k(a,[{key:"getTranslation",value:function(a){var b=this.props,c=b.id;c=void 0===c?"":c;var d=b.defaults;b=b.formats;var e=x({},this.props.values),h=this.props.components?w(this.props.components):[];e&&Object.keys(e).forEach(function(a){var c=e[a];u.isValidElement(c)&&(c=h.push(c)-1,e[a]="<".concat(c,"/>"))});return(a=a&&"function"===typeof a._?a._(c,e,{defaults:d,formats:b}):c)?N(a,h):null}},{key:"render",value:function(){var a=
-this;return u.createElement(J,null,function(b){var c=b.defaultRender;b=a.getTranslation(b.i18n);var d=a.props,e=d.render;c=void 0===e?c:e;e=d.id;d=d.defaults;return null===c||void 0===c?b:"string"===typeof c?u.createElement(c,{},b):"function"===typeof c?c({id:e,translation:b,defaults:d}):u.cloneElement(c,{},b)})}}]);return a}(u.Component);
-function Q(){var d=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).withHash,a=void 0===d?!1:d;return function(d){var b=u.forwardRef(function(c,b){return u.createElement(J,null,function(e){e=e.i18n;return u.createElement(d,y({},c,{ref:b,i18n:e,i18nHash:a?e.locale:void 0}))})});return z(b,d)}}var S=Q(),T=Q({withHash:!0});function U(d){return function(a){var h=a.value,b=a.format;return u.createElement(J,null,function(a){a=a.i18n;return d(a.locales||a.locale,b)(h)})}}var V=U(B.date),W=U(B.number);
-exports.setupI18n=B.setupI18n;exports.withI18n=S;exports.withI18nForPure=T;exports.I18nProvider=K;exports.I18n=J;exports.Trans=P;exports.DateFormat=V;exports.NumberFormat=W;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("@babel/runtime/helpers/slicedToArray")),t=require("react"),n=e(require("@babel/runtime/helpers/objectSpread")),a=require("@lingui/core"),u=t.createContext(null);function i(){var e=t.useContext(u);if(null==e)return null;var r=e.i18n,n=e.defaultRender;return{i18n:r,defaultRender:n}}var o=/<(\d+)>(.*)<\/\1>|<(\d+)\/>/,l=/(?:\r\n|\r|\n)/g;function c(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=e.replace(l,"").split(o);if(1===a.length)return e;var u=[],i=a.shift();i&&u.push(i);var s=!0,f=!1,d=void 0;try{for(var v,p=function e(t){if(!t.length)return[];var n=t.slice(0,4),a=r(n,4),u=a[0],i=a[1],o=a[2],l=a[3];return[[parseInt(u||o),i||"",l]].concat(e(t.slice(4,t.length)))}(a)[Symbol.iterator]();!(s=(v=p.next()).done);s=!0){var m=r(v.value,3),h=m[0],y=m[1],g=m[2],b=n[h];u.push(t.cloneElement(b,{key:h},y?c(y,n):b.props.children)),g&&u.push(g)}}catch(e){f=!0,d=e}finally{try{s||null==p.return||p.return()}finally{if(f)throw d}}return u}function s(e){var r=i(),a=r.i18n,u=r.defaultRender,o=e.render,l=void 0===o?u:o,s=e.id,f=e.message,d=e.formats,v=n({},e.values),p=n({},e.components);v&&Object.keys(v).forEach(function(e){var r=v[e];if(t.isValidElement(r)){var n=Object.keys(p).length;p[n]=r,v[e]="<".concat(n,"/>")}});var m=a&&"function"==typeof a._?a._(s,v,{message:f,formats:d}):s,h=m?c(m,p):null;return null==l?h:"string"==typeof l?t.createElement(l,{},h):"function"==typeof l?l({id:s,translation:h,message:f}):t.cloneElement(l,{},h)}function f(e){return function(r){var t=r.value,n=r.format,a=i(),u=a.i18n,o=e(u.locales||u.locale,n);return o(t)}}s.defaultProps={values:{},components:{}};var d=f(a.formats.date),v=f(a.formats.number);exports.DateFormat=d,exports.I18nProvider=function(e){var n=t.useState(l(!0)),a=r(n,2),i=a[0],o=a[1];function l(){var r=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t={i18n:e.i18n,defaultRender:e.defaultRender};if(r)return t;o(t)}return t.useEffect(function(){var r=e.i18n.didActivate(function(){return l()});return function(){return r()}},[]),t.createElement(u.Provider,{value:i},i.i18n.locale&&e.children)},exports.NumberFormat=v,exports.Trans=s,exports.useLingui=i;

package.json

 {
   "name": "@lingui/react",
-  "version": "3.0.0-3",
+  "version": "3.0.0-4",
   "description": "React components for translations",
@@ -35,15 +35,11 @@ "main": "index.js",
     "index.js",
-    "dev.js",
-    "*.js.flow",
     "cjs/"
   ],
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0"
+    "react": "^16.8.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@lingui/core": "3.0.0-3",
-    "hoist-non-react-statics": "3.0.1",
-    "prop-types": "^15.6.2"
+    "@lingui/core": "3.0.0-4"
   }
 }

README.md

@@ -1,10 +0,10 @@
-[![License][Badge-License]][License]
-[![Version][Badge-Version]][Package]
-[![Downloads][Badge-Downloads]][Package]
+[![License][badge-license]][license]
+[![Version][badge-version]][package]
+[![Downloads][badge-downloads]][package]
 
-# @lingui/react 
+# @lingui/react
 
 > React components for internationalization
 
-`@lingui/react` is part of [LinguiJS][LinguiJS]. See the [documentation][Documentation] for all information, tutorials and examples.
+`@lingui/react` is part of [LinguiJS][linguijs]. See the [documentation][documentation] for all information, tutorials and examples.
 
@@ -20,16 +20,16 @@ ## Installation
 
-See the [tutorial][Tutorial] or [reference][Reference] documenation.
+See the [tutorial][tutorial] or [reference][reference] documenation.
 
 ## License
 
-[MIT][License]
+[MIT][license]
 
-[License]: https://github.com/lingui/js-lingui/blob/master/LICENSE
-[LinguiJS]: https://github.com/lingui/js-lingui
-[Documentation]: https://lingui.js.org/
-[Tutorial]: https://lingui.js.org/tutorials/react.html
-[Reference]: https://lingui.js.org/ref/react.html
-[Package]: https://www.npmjs.com/package/@lingui/react
-[Badge-Downloads]: https://img.shields.io/npm/dw/@lingui/react.svg
-[Badge-Version]: https://img.shields.io/npm/v/@lingui/react.svg 
-[Badge-License]: https://img.shields.io/npm/l/@lingui/react.svg
+[license]: https://github.com/lingui/js-lingui/blob/master/LICENSE
+[linguijs]: https://github.com/lingui/js-lingui
+[documentation]: https://lingui.js.org/
+[tutorial]: https://lingui.js.org/tutorials/react.html
+[reference]: https://lingui.js.org/ref/react.html
+[package]: https://www.npmjs.com/package/@lingui/react
+[badge-downloads]: https://img.shields.io/npm/dw/@lingui/react.svg
+[badge-version]: https://img.shields.io/npm/v/@lingui/react.svg
+[badge-license]: https://img.shields.io/npm/l/@lingui/react.svg

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

Improved metrics

Dependency count

3

decreased by-40%

Number of package files

16

increased by23.08%

Worsened metrics

Total package byte prevSize

17496

decreased by-36.16%

Lines of code

286

decreased by-4.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@lingui/core@3.0.0-4(transitive)

• - Removedhoist-non-react-statics@3.0.1

• - Removedprop-types@^15.6.2

• - Removed@lingui/core@3.0.0-3(transitive)

• - Removedhoist-non-react-statics@3.0.1(transitive)

• Updated@lingui/core@3.0.0-4