@lingui/react - npm Package Compare versions

Comparing version 3.17.0 to 3.17.1

build/cjs/index.js

 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 
-var LinguiContext = /*#__PURE__*/React.createContext(null);
+const LinguiContext = /*#__PURE__*/React.createContext(null);
 function useLingui() {
-  var context = React.useContext(LinguiContext);
-
+  const context = React.useContext(LinguiContext);
   if (process.env.NODE_ENV !== "production") {
@@ -17,8 +14,7 @@ if (context == null) {
   }
-
   return context;
 }
 function withI18n(o) {
-  return function (WrappedComponent) {
-    return function (props) {
+  return WrappedComponent => {
+    return props => {
       if (process.env.NODE_ENV !== "production") {
@@ -29,6 +25,5 @@ if (typeof o === "function" || /*#__PURE__*/React.isValidElement(o)) {
       }
-
-      var _useLingui = useLingui(),
-          i18n = _useLingui.i18n;
-
+      const {
+        i18n
+      } = useLingui();
       return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
@@ -40,9 +35,9 @@ i18n: i18n
 }
-var I18nProvider = function I18nProvider(_ref) {
-  var i18n = _ref.i18n,
-      defaultComponent = _ref.defaultComponent,
-      _ref$forceRenderOnLoc = _ref.forceRenderOnLocaleChange,
-      forceRenderOnLocaleChange = _ref$forceRenderOnLoc === void 0 ? true : _ref$forceRenderOnLoc,
-      children = _ref.children;
-
+const I18nProvider = _ref => {
+  let {
+    i18n,
+    defaultComponent,
+    forceRenderOnLocaleChange = true,
+    children
+  } = _ref;
   /**
@@ -59,21 +54,12 @@ * We can't pass `i18n` object directly through context, because even when locale
    */
-  var makeContext = function makeContext() {
-    return {
-      i18n: i18n,
-      defaultComponent: defaultComponent
-    };
+  const makeContext = () => ({
+    i18n,
+    defaultComponent
+  });
+  const getRenderKey = () => {
+    return forceRenderOnLocaleChange ? i18n.locale || "default" : "default";
   };
+  const [context, setContext] = React.useState(makeContext()),
+    [renderKey, setRenderKey] = React.useState(getRenderKey());
 
-  var getRenderKey = function getRenderKey() {
-    return forceRenderOnLocaleChange ? i18n.locale || 'default' : 'default';
-  };
-
-  var _React$useState = React.useState(makeContext()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      context = _React$useState2[0],
-      setContext = _React$useState2[1],
-      _React$useState3 = React.useState(getRenderKey()),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      renderKey = _React$useState4[0],
-      setRenderKey = _React$useState4[1];
   /**
@@ -91,23 +77,16 @@ * Subscribe for locale/message changes
    */
-
-
-  React.useEffect(function () {
-    var unsubscribe = i18n.on("change", function () {
+  React.useEffect(() => {
+    const unsubscribe = i18n.on("change", () => {
       setContext(makeContext());
       setRenderKey(getRenderKey());
     });
-
-    if (renderKey === 'default') {
+    if (renderKey === "default") {
       setRenderKey(getRenderKey());
     }
-
-    if (forceRenderOnLocaleChange && renderKey === 'default') {
+    if (forceRenderOnLocaleChange && renderKey === "default") {
       console.log("I18nProvider did not render. A call to i18n.activate still needs to happen or forceRenderOnLocaleChange must be set to false.");
     }
-
-    return function () {
-      return unsubscribe();
-    };
+    return () => unsubscribe();
   }, []);
-  if (forceRenderOnLocaleChange && renderKey === 'default') return null;
+  if (forceRenderOnLocaleChange && renderKey === "default") return null;
   return /*#__PURE__*/React.createElement(LinguiContext.Provider, {
@@ -119,13 +98,9 @@ value: context,
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+// match <tag>paired</tag> and <tag/> unpaired tags
+const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/;
+const nlRe = /(?:\r\n|\r|\n)/g;
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-var tagRe = /<(\d+)>(.*?)<\/\1>|<(\d+)\/>/;
-var nlRe = /(?:\r\n|\r|\n)/g; // For HTML, certain tags should omit their close tag. We keep a whitelist for
+// For HTML, certain tags should omit their close tag. We keep a whitelist for
 // those special-case tags.
-
-var voidElementTags = {
+const voidElementTags = {
   area: true,
@@ -148,58 +123,43 @@ base: true,
 };
+
 /**
  * `formatElements` - parse string and return tree of react elements
  *
- * `value` is string to be formatted with <0>Paired<0/> or <0/> (unpaired)
+ * `value` is string to be formatted with <tag>Paired<tag/> or <tag/> (unpaired)
  * placeholders. `elements` is a array of react elements which indexes
  * correspond to element indexes in formatted string
  */
-
 function formatElements(value) {
-  var elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var uniqueId = makeCounter(0, '$lingui$');
-  var parts = value.replace(nlRe, "").split(tagRe); // no inline elements, return
+  let elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const uniqueId = makeCounter(0, "$lingui$");
+  const parts = value.replace(nlRe, "").split(tagRe);
 
+  // no inline elements, return
   if (parts.length === 1) return value;
-  var tree = [];
-  var before = parts.shift();
+  const tree = [];
+  const before = parts.shift();
   if (before) tree.push(before);
-
-  var _iterator = _createForOfIteratorHelper(getElements(parts)),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var _step$value = _slicedToArray(_step.value, 3),
-          index = _step$value[0],
-          children = _step$value[1],
-          after = _step$value[2];
-
-      var element = elements[index];
-
-      if (!element || voidElementTags[element.type] && children) {
-        if (!element) {
-          console.error("Can use element at index '".concat(index, "' as it is not declared in the original translation"));
-        } else {
-          console.error("".concat(element.type, " is a void element tag therefore it must have no children"));
-        } // ignore problematic element but push its children and elements after it
-
-
-        element = /*#__PURE__*/React.createElement(React.Fragment);
+  for (const [index, children, after] of getElements(parts)) {
+    let element = elements[index];
+    if (!element || voidElementTags[element.type] && children) {
+      if (!element) {
+        console.error(`Can use element at index '${index}' as it is not declared in the original translation`);
+      } else {
+        console.error(`${element.type} is a void element tag therefore it must have no children`);
       }
 
-      tree.push( /*#__PURE__*/React.cloneElement(element, {
-        key: uniqueId()
-      }, // 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));
-      if (after) tree.push(after);
+      // ignore problematic element but push its children and elements after it
+      element = /*#__PURE__*/React.createElement(React.Fragment);
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
+    tree.push( /*#__PURE__*/React.cloneElement(element, {
+      key: uniqueId()
+    },
+    // 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));
+    if (after) tree.push(after);
   }
-
   return tree;
 }
+
 /*
@@ -219,43 +179,31 @@ * `getElements` - return array of element indexes and element childrens
  */
-
-
 function getElements(parts) {
   if (!parts.length) return [];
-
-  var _parts$slice = parts.slice(0, 4),
-      _parts$slice2 = _slicedToArray(_parts$slice, 4),
-      paired = _parts$slice2[0],
-      children = _parts$slice2[1],
-      unpaired = _parts$slice2[2],
-      after = _parts$slice2[3];
-
-  return [[parseInt(paired || unpaired), children || "", after]].concat(getElements(parts.slice(4, parts.length)));
+  const [paired, children, unpaired, after] = parts.slice(0, 4);
+  return [[paired || unpaired, children || "", after]].concat(getElements(parts.slice(4, parts.length)));
 }
-
-var makeCounter = function makeCounter() {
-  var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  return function () {
-    return "".concat(prefix, "_").concat(count++);
-  };
+const makeCounter = function () {
+  let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  return () => `${prefix}_${count++}`;
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function Trans(props) {
-  var _useLingui = useLingui(),
-      i18n = _useLingui.i18n,
-      defaultComponent = _useLingui.defaultComponent;
-
-  var render = props.render,
-      component = props.component,
-      id = props.id,
-      message = props.message,
-      formats = props.formats;
-
-  var values = _objectSpread({}, props.values);
-
-  var components = _objectSpread({}, props.components);
-
+  const {
+    i18n,
+    defaultComponent
+  } = useLingui();
+  const {
+    render,
+    component,
+    id,
+    message,
+    formats
+  } = props;
+  const values = {
+    ...props.values
+  };
+  const components = {
+    ...props.components
+  };
   if (values) {
@@ -271,19 +219,17 @@ /*
       */
-    Object.keys(values).forEach(function (key) {
-      var value = values[key];
+
+    Object.keys(values).forEach(key => {
+      const value = values[key];
       if (! /*#__PURE__*/React.isValidElement(value)) return;
-      var index = Object.keys(components).length;
+      const index = Object.keys(components).length;
       components[index] = value;
-      values[key] = "<".concat(index, "/>");
+      values[key] = `<${index}/>`;
     });
   }
-
-  var _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, {
-    message: message,
-    formats: formats
+  const _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, {
+    message,
+    formats
   }) : id; // i18n provider isn't loaded at all
 
-
-  var translation = _translation ? formatElements(_translation, components) : null;
-
+  const translation = _translation ? formatElements(_translation, components) : null;
   if (render === null || component === null) {
@@ -294,31 +240,31 @@ // Although `string` is a valid react element, types only allow `Element`
   }
-
-  var FallbackComponent = defaultComponent || React.Fragment;
-  var i18nProps = {
-    id: id,
-    message: message,
-    translation: translation,
+  const FallbackComponent = defaultComponent || React.Fragment;
+  const i18nProps = {
+    id,
+    message,
+    translation,
     isTranslated: id !== translation && message !== translation
-  }; // Validation of `render` and `component` props
+  };
 
+  // Validation of `render` and `component` props
   if (render && component) {
     console.error("You can't use both `component` and `render` prop at the same time. `component` is ignored.");
   } else if (render && typeof render !== "function") {
-    console.error("Invalid value supplied to prop `render`. It must be a function, provided ".concat(render));
+    console.error(`Invalid value supplied to prop \`render\`. It must be a function, provided ${render}`);
   } else if (component && typeof component !== "function") {
     // Apparently, both function components and class components are functions
     // See https://stackoverflow.com/a/41658173/1535540
-    console.error("Invalid value supplied to prop `component`. It must be a React component, provided ".concat(component));
+    console.error(`Invalid value supplied to prop \`component\`. It must be a React component, provided ${component}`);
     return /*#__PURE__*/React.createElement(FallbackComponent, i18nProps, translation);
-  } // Rendering using a render prop
+  }
 
-
+  // Rendering using a render prop
   if (typeof render === "function") {
     // Component: render={(props) => <a title={props.translation}>x</a>}
     return render(i18nProps);
-  } // `component` prop has a higher precedence over `defaultComponent`
+  }
 
-
-  var Component = component || FallbackComponent;
-  var DefaultComponent = defaultComponent;
+  // `component` prop has a higher precedence over `defaultComponent`
+  const Component = component || FallbackComponent;
+  const DefaultComponent = defaultComponent;
   return DefaultComponent && !component ? /*#__PURE__*/React.createElement(DefaultComponent, i18nProps, translation) : /*#__PURE__*/React.createElement(Component, null, translation);
@@ -325,0 +271,0 @@ }

build/esm/index.js

@@ -1,10 +0,7 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _extends from '@babel/runtime/helpers/extends';
 import React from 'react';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 
-var LinguiContext = /*#__PURE__*/React.createContext(null);
+const LinguiContext = /*#__PURE__*/React.createContext(null);
 function useLingui() {
-  var context = React.useContext(LinguiContext);
-
+  const context = React.useContext(LinguiContext);
   if (process.env.NODE_ENV !== "production") {
@@ -15,8 +12,7 @@ if (context == null) {
   }
-
   return context;
 }
 function withI18n(o) {
-  return function (WrappedComponent) {
-    return function (props) {
+  return WrappedComponent => {
+    return props => {
       if (process.env.NODE_ENV !== "production") {
@@ -27,6 +23,5 @@ if (typeof o === "function" || /*#__PURE__*/React.isValidElement(o)) {
       }
-
-      var _useLingui = useLingui(),
-          i18n = _useLingui.i18n;
-
+      const {
+        i18n
+      } = useLingui();
       return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
@@ -38,9 +33,9 @@ i18n: i18n
 }
-var I18nProvider = function I18nProvider(_ref) {
-  var i18n = _ref.i18n,
-      defaultComponent = _ref.defaultComponent,
-      _ref$forceRenderOnLoc = _ref.forceRenderOnLocaleChange,
-      forceRenderOnLocaleChange = _ref$forceRenderOnLoc === void 0 ? true : _ref$forceRenderOnLoc,
-      children = _ref.children;
-
+const I18nProvider = _ref => {
+  let {
+    i18n,
+    defaultComponent,
+    forceRenderOnLocaleChange = true,
+    children
+  } = _ref;
   /**
@@ -57,21 +52,12 @@ * We can't pass `i18n` object directly through context, because even when locale
    */
-  var makeContext = function makeContext() {
-    return {
-      i18n: i18n,
-      defaultComponent: defaultComponent
-    };
+  const makeContext = () => ({
+    i18n,
+    defaultComponent
+  });
+  const getRenderKey = () => {
+    return forceRenderOnLocaleChange ? i18n.locale || "default" : "default";
   };
+  const [context, setContext] = React.useState(makeContext()),
+    [renderKey, setRenderKey] = React.useState(getRenderKey());
 
-  var getRenderKey = function getRenderKey() {
-    return forceRenderOnLocaleChange ? i18n.locale || 'default' : 'default';
-  };
-
-  var _React$useState = React.useState(makeContext()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      context = _React$useState2[0],
-      setContext = _React$useState2[1],
-      _React$useState3 = React.useState(getRenderKey()),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      renderKey = _React$useState4[0],
-      setRenderKey = _React$useState4[1];
   /**
@@ -89,23 +75,16 @@ * Subscribe for locale/message changes
    */
-
-
-  React.useEffect(function () {
-    var unsubscribe = i18n.on("change", function () {
+  React.useEffect(() => {
+    const unsubscribe = i18n.on("change", () => {
       setContext(makeContext());
       setRenderKey(getRenderKey());
     });
-
-    if (renderKey === 'default') {
+    if (renderKey === "default") {
       setRenderKey(getRenderKey());
     }
-
-    if (forceRenderOnLocaleChange && renderKey === 'default') {
+    if (forceRenderOnLocaleChange && renderKey === "default") {
       console.log("I18nProvider did not render. A call to i18n.activate still needs to happen or forceRenderOnLocaleChange must be set to false.");
     }
-
-    return function () {
-      return unsubscribe();
-    };
+    return () => unsubscribe();
   }, []);
-  if (forceRenderOnLocaleChange && renderKey === 'default') return null;
+  if (forceRenderOnLocaleChange && renderKey === "default") return null;
   return /*#__PURE__*/React.createElement(LinguiContext.Provider, {
@@ -117,13 +96,9 @@ value: context,
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+// match <tag>paired</tag> and <tag/> unpaired tags
+const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/;
+const nlRe = /(?:\r\n|\r|\n)/g;
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-var tagRe = /<(\d+)>(.*?)<\/\1>|<(\d+)\/>/;
-var nlRe = /(?:\r\n|\r|\n)/g; // For HTML, certain tags should omit their close tag. We keep a whitelist for
+// For HTML, certain tags should omit their close tag. We keep a whitelist for
 // those special-case tags.
-
-var voidElementTags = {
+const voidElementTags = {
   area: true,
@@ -146,58 +121,43 @@ base: true,
 };
+
 /**
  * `formatElements` - parse string and return tree of react elements
  *
- * `value` is string to be formatted with <0>Paired<0/> or <0/> (unpaired)
+ * `value` is string to be formatted with <tag>Paired<tag/> or <tag/> (unpaired)
  * placeholders. `elements` is a array of react elements which indexes
  * correspond to element indexes in formatted string
  */
-
 function formatElements(value) {
-  var elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var uniqueId = makeCounter(0, '$lingui$');
-  var parts = value.replace(nlRe, "").split(tagRe); // no inline elements, return
+  let elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const uniqueId = makeCounter(0, "$lingui$");
+  const parts = value.replace(nlRe, "").split(tagRe);
 
+  // no inline elements, return
   if (parts.length === 1) return value;
-  var tree = [];
-  var before = parts.shift();
+  const tree = [];
+  const before = parts.shift();
   if (before) tree.push(before);
-
-  var _iterator = _createForOfIteratorHelper(getElements(parts)),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var _step$value = _slicedToArray(_step.value, 3),
-          index = _step$value[0],
-          children = _step$value[1],
-          after = _step$value[2];
-
-      var element = elements[index];
-
-      if (!element || voidElementTags[element.type] && children) {
-        if (!element) {
-          console.error("Can use element at index '".concat(index, "' as it is not declared in the original translation"));
-        } else {
-          console.error("".concat(element.type, " is a void element tag therefore it must have no children"));
-        } // ignore problematic element but push its children and elements after it
-
-
-        element = /*#__PURE__*/React.createElement(React.Fragment);
+  for (const [index, children, after] of getElements(parts)) {
+    let element = elements[index];
+    if (!element || voidElementTags[element.type] && children) {
+      if (!element) {
+        console.error(`Can use element at index '${index}' as it is not declared in the original translation`);
+      } else {
+        console.error(`${element.type} is a void element tag therefore it must have no children`);
       }
 
-      tree.push( /*#__PURE__*/React.cloneElement(element, {
-        key: uniqueId()
-      }, // 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));
-      if (after) tree.push(after);
+      // ignore problematic element but push its children and elements after it
+      element = /*#__PURE__*/React.createElement(React.Fragment);
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
+    tree.push( /*#__PURE__*/React.cloneElement(element, {
+      key: uniqueId()
+    },
+    // 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));
+    if (after) tree.push(after);
   }
-
   return tree;
 }
+
 /*
@@ -217,43 +177,31 @@ * `getElements` - return array of element indexes and element childrens
  */
-
-
 function getElements(parts) {
   if (!parts.length) return [];
-
-  var _parts$slice = parts.slice(0, 4),
-      _parts$slice2 = _slicedToArray(_parts$slice, 4),
-      paired = _parts$slice2[0],
-      children = _parts$slice2[1],
-      unpaired = _parts$slice2[2],
-      after = _parts$slice2[3];
-
-  return [[parseInt(paired || unpaired), children || "", after]].concat(getElements(parts.slice(4, parts.length)));
+  const [paired, children, unpaired, after] = parts.slice(0, 4);
+  return [[paired || unpaired, children || "", after]].concat(getElements(parts.slice(4, parts.length)));
 }
-
-var makeCounter = function makeCounter() {
-  var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  return function () {
-    return "".concat(prefix, "_").concat(count++);
-  };
+const makeCounter = function () {
+  let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  return () => `${prefix}_${count++}`;
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function Trans(props) {
-  var _useLingui = useLingui(),
-      i18n = _useLingui.i18n,
-      defaultComponent = _useLingui.defaultComponent;
-
-  var render = props.render,
-      component = props.component,
-      id = props.id,
-      message = props.message,
-      formats = props.formats;
-
-  var values = _objectSpread({}, props.values);
-
-  var components = _objectSpread({}, props.components);
-
+  const {
+    i18n,
+    defaultComponent
+  } = useLingui();
+  const {
+    render,
+    component,
+    id,
+    message,
+    formats
+  } = props;
+  const values = {
+    ...props.values
+  };
+  const components = {
+    ...props.components
+  };
   if (values) {
@@ -269,19 +217,17 @@ /*
       */
-    Object.keys(values).forEach(function (key) {
-      var value = values[key];
+
+    Object.keys(values).forEach(key => {
+      const value = values[key];
       if (! /*#__PURE__*/React.isValidElement(value)) return;
-      var index = Object.keys(components).length;
+      const index = Object.keys(components).length;
       components[index] = value;
-      values[key] = "<".concat(index, "/>");
+      values[key] = `<${index}/>`;
     });
   }
-
-  var _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, {
-    message: message,
-    formats: formats
+  const _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, {
+    message,
+    formats
   }) : id; // i18n provider isn't loaded at all
 
-
-  var translation = _translation ? formatElements(_translation, components) : null;
-
+  const translation = _translation ? formatElements(_translation, components) : null;
   if (render === null || component === null) {
@@ -292,31 +238,31 @@ // Although `string` is a valid react element, types only allow `Element`
   }
-
-  var FallbackComponent = defaultComponent || React.Fragment;
-  var i18nProps = {
-    id: id,
-    message: message,
-    translation: translation,
+  const FallbackComponent = defaultComponent || React.Fragment;
+  const i18nProps = {
+    id,
+    message,
+    translation,
     isTranslated: id !== translation && message !== translation
-  }; // Validation of `render` and `component` props
+  };
 
+  // Validation of `render` and `component` props
   if (render && component) {
     console.error("You can't use both `component` and `render` prop at the same time. `component` is ignored.");
   } else if (render && typeof render !== "function") {
-    console.error("Invalid value supplied to prop `render`. It must be a function, provided ".concat(render));
+    console.error(`Invalid value supplied to prop \`render\`. It must be a function, provided ${render}`);
   } else if (component && typeof component !== "function") {
     // Apparently, both function components and class components are functions
     // See https://stackoverflow.com/a/41658173/1535540
-    console.error("Invalid value supplied to prop `component`. It must be a React component, provided ".concat(component));
+    console.error(`Invalid value supplied to prop \`component\`. It must be a React component, provided ${component}`);
     return /*#__PURE__*/React.createElement(FallbackComponent, i18nProps, translation);
-  } // Rendering using a render prop
+  }
 
-
+  // Rendering using a render prop
   if (typeof render === "function") {
     // Component: render={(props) => <a title={props.translation}>x</a>}
     return render(i18nProps);
-  } // `component` prop has a higher precedence over `defaultComponent`
+  }
 
-
-  var Component = component || FallbackComponent;
-  var DefaultComponent = defaultComponent;
+  // `component` prop has a higher precedence over `defaultComponent`
+  const Component = component || FallbackComponent;
+  const DefaultComponent = defaultComponent;
   return DefaultComponent && !component ? /*#__PURE__*/React.createElement(DefaultComponent, i18nProps, translation) : /*#__PURE__*/React.createElement(Component, null, translation);
@@ -323,0 +269,0 @@ }

build/index.d.ts

 import React, { ComponentType, FunctionComponent } from 'react';
 import { I18n } from '@lingui/core';
 
-declare type TransRenderProps = {
+type TransRenderProps = {
     id?: string;
@@ -11,3 +11,3 @@ translation?: React.ReactNode;
 };
-declare type TransProps = {
+type TransProps = {
     id: string;
@@ -33,10 +33,10 @@ message?: string;
 
-declare type I18nContext = {
+type I18nContext = {
     i18n: I18n;
     defaultComponent?: ComponentType<TransRenderProps>;
 };
-declare type withI18nProps = {
+type withI18nProps = {
     i18n: I18n;
 };
-declare type I18nProviderProps = I18nContext & {
+type I18nProviderProps = I18nContext & {
     forceRenderOnLocaleChange?: boolean;
@@ -46,5 +46,5 @@ children?: React.ReactNode;
 declare function useLingui(): I18nContext;
-declare function withI18n(o?: object): <P extends withI18nProps>(Component: ComponentType<P>) => React.ComponentType<Omit<P, 'i18n'>>;
+declare function withI18n(o?: object): <P extends withI18nProps>(Component: ComponentType<P>) => React.ComponentType<Omit<P, "i18n">>;
 declare const I18nProvider: FunctionComponent<I18nProviderProps>;
 
 export { I18nContext, I18nProvider, I18nProviderProps, Trans, TransProps, TransRenderProps, useLingui, withI18n, withI18nProps };

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [3.17.1](https://github.com/lingui/js-lingui/compare/v3.17.0...v3.17.1) (2023-02-07)
+
+
+### Bug Fixes
+
+* Named components not working in Trans in @lingui/react ([#1402](https://github.com/lingui/js-lingui/issues/1402)) ([bf7f655](https://github.com/lingui/js-lingui/commit/bf7f655ccac3fc22fb7d36662ab0ec96595574e5))
+
+
+
+
+
 # [3.17.0](https://github.com/lingui/js-lingui/compare/v3.16.1...v3.17.0) (2023-02-01)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lingui/react",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "sideEffects": false,
@@ -56,4 +56,4 @@ "description": "React components for translations",
   "dependencies": {
-    "@babel/runtime": "^7.11.2",
-    "@lingui/core": "3.17.0"
+    "@babel/runtime": "^7.20.13",
+    "@lingui/core": "3.17.1"
   },
@@ -63,3 +63,3 @@ "devDependencies": {
   },
-  "gitHead": "1c8bc46213b35b25da8fe7a80ddcf6f6a5d9d539"
+  "gitHead": "76ef4e8d1c668578ce2c3829ebf35d22ca5e679c"
 }

No alert changes

Worsened metrics

Total package byte prevSize

73611

-12.82%

Lines of code

551

-8.32%

Dependency changes

• + Added

  @lingui/core@3.17.1
  (transitive)

• - Removed

  @lingui/core@3.17.0
  (transitive)

• Updated

  @babel/runtime@^7.20.13

• Updated

  @lingui/core@3.17.1