react-i18next 16.0.1 → 16.1.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 16.1.0
+
+- Introduce `IcuTrans` component [1869](https://github.com/i18next/react-i18next/issues/1869)
+
 ### 16.0.1
 
 - fix: Using <Trans> component with named tags throws error when Selector API is enabled [1867](https://github.com/i18next/react-i18next/issues/1867) with [1868](https://github.com/i18next/react-i18next/pull/1868)

package/dist/commonjs/IcuTrans.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IcuTrans = IcuTrans;
+var _react = require("react");
+var _IcuTransWithoutContext = require("./IcuTransWithoutContext.js");
+var _context = require("./context.js");
+function IcuTrans({
+  i18nKey,
+  defaultTranslation,
+  content,
+  ns,
+  values = {},
+  i18n: i18nFromProps,
+  t: tFromProps
+}) {
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = (0, _react.useContext)(_context.I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || (0, _context.getI18n)();
+  const t = tFromProps || i18n?.t.bind(i18n);
+  return (0, _IcuTransWithoutContext.IcuTransWithoutContext)({
+    i18nKey,
+    defaultTranslation,
+    content,
+    ns: ns || t?.ns || defaultNSFromContext || i18n?.options?.defaultNS,
+    values,
+    i18n,
+    t: tFromProps
+  });
+}
+IcuTrans.displayName = 'IcuTrans';

package/dist/commonjs/IcuTransUtils/TranslationParserError.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TranslationParserError = void 0;
+class TranslationParserError extends Error {
+  constructor(message, position, translationString) {
+    super(message);
+    this.name = 'TranslationParserError';
+    this.position = position;
+    this.translationString = translationString;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, TranslationParserError);
+    }
+  }
+}
+exports.TranslationParserError = TranslationParserError;

package/dist/commonjs/IcuTransUtils/htmlEntityDecoder.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decodeHtmlEntities = void 0;
+const commonEntities = {
+  ' ': '\u00A0',
+  '&': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&apos;': "'",
+  '&copy;': '©',
+  '&reg;': '®',
+  '&trade;': '™',
+  '&hellip;': '…',
+  '&ndash;': '–',
+  '&mdash;': '—',
+  '&lsquo;': '\u2018',
+  '&rsquo;': '\u2019',
+  '&sbquo;': '\u201A',
+  '&ldquo;': '\u201C',
+  '&rdquo;': '\u201D',
+  '&bdquo;': '\u201E',
+  '&dagger;': '†',
+  '&Dagger;': '‡',
+  '&bull;': '•',
+  '&prime;': '′',
+  '&Prime;': '″',
+  '&lsaquo;': '‹',
+  '&rsaquo;': '›',
+  '&sect;': '§',
+  '&para;': '¶',
+  '&middot;': '·',
+  '&ensp;': '\u2002',
+  '&emsp;': '\u2003',
+  '&thinsp;': '\u2009',
+  '&euro;': '€',
+  '&pound;': '£',
+  '&yen;': '¥',
+  '&cent;': '¢',
+  '&curren;': '¤',
+  '&times;': '×',
+  '&divide;': '÷',
+  '&minus;': '−',
+  '&plusmn;': '±',
+  '&ne;': '≠',
+  '&le;': '≤',
+  '&ge;': '≥',
+  '&asymp;': '≈',
+  '&equiv;': '≡',
+  '&infin;': '∞',
+  '&int;': '∫',
+  '&sum;': '∑',
+  '&prod;': '∏',
+  '&radic;': '√',
+  '&part;': '∂',
+  '&permil;': '‰',
+  '&deg;': '°',
+  '&micro;': 'µ',
+  '&larr;': '←',
+  '&uarr;': '↑',
+  '&rarr;': '→',
+  '&darr;': '↓',
+  '&harr;': '↔',
+  '&crarr;': '↵',
+  '&lArr;': '⇐',
+  '&uArr;': '⇑',
+  '&rArr;': '⇒',
+  '&dArr;': '⇓',
+  '&hArr;': '⇔',
+  '&alpha;': 'α',
+  '&beta;': 'β',
+  '&gamma;': 'γ',
+  '&delta;': 'δ',
+  '&epsilon;': 'ε',
+  '&zeta;': 'ζ',
+  '&eta;': 'η',
+  '&theta;': 'θ',
+  '&iota;': 'ι',
+  '&kappa;': 'κ',
+  '&lambda;': 'λ',
+  '&mu;': 'μ',
+  '&nu;': 'ν',
+  '&xi;': 'ξ',
+  '&omicron;': 'ο',
+  '&pi;': 'π',
+  '&rho;': 'ρ',
+  '&sigma;': 'σ',
+  '&tau;': 'τ',
+  '&upsilon;': 'υ',
+  '&phi;': 'φ',
+  '&chi;': 'χ',
+  '&psi;': 'ψ',
+  '&omega;': 'ω',
+  '&Alpha;': 'Α',
+  '&Beta;': 'Β',
+  '&Gamma;': 'Γ',
+  '&Delta;': 'Δ',
+  '&Epsilon;': 'Ε',
+  '&Zeta;': 'Ζ',
+  '&Eta;': 'Η',
+  '&Theta;': 'Θ',
+  '&Iota;': 'Ι',
+  '&Kappa;': 'Κ',
+  '&Lambda;': 'Λ',
+  '&Mu;': 'Μ',
+  '&Nu;': 'Ν',
+  '&Xi;': 'Ξ',
+  '&Omicron;': 'Ο',
+  '&Pi;': 'Π',
+  '&Rho;': 'Ρ',
+  '&Sigma;': 'Σ',
+  '&Tau;': 'Τ',
+  '&Upsilon;': 'Υ',
+  '&Phi;': 'Φ',
+  '&Chi;': 'Χ',
+  '&Psi;': 'Ψ',
+  '&Omega;': 'Ω',
+  '&Agrave;': 'À',
+  '&Aacute;': 'Á',
+  '&Acirc;': 'Â',
+  '&Atilde;': 'Ã',
+  '&Auml;': 'Ä',
+  '&Aring;': 'Å',
+  '&AElig;': 'Æ',
+  '&Ccedil;': 'Ç',
+  '&Egrave;': 'È',
+  '&Eacute;': 'É',
+  '&Ecirc;': 'Ê',
+  '&Euml;': 'Ë',
+  '&Igrave;': 'Ì',
+  '&Iacute;': 'Í',
+  '&Icirc;': 'Î',
+  '&Iuml;': 'Ï',
+  '&ETH;': 'Ð',
+  '&Ntilde;': 'Ñ',
+  '&Ograve;': 'Ò',
+  '&Oacute;': 'Ó',
+  '&Ocirc;': 'Ô',
+  '&Otilde;': 'Õ',
+  '&Ouml;': 'Ö',
+  '&Oslash;': 'Ø',
+  '&Ugrave;': 'Ù',
+  '&Uacute;': 'Ú',
+  '&Ucirc;': 'Û',
+  '&Uuml;': 'Ü',
+  '&Yacute;': 'Ý',
+  '&THORN;': 'Þ',
+  '&szlig;': 'ß',
+  '&agrave;': 'à',
+  '&aacute;': 'á',
+  '&acirc;': 'â',
+  '&atilde;': 'ã',
+  '&auml;': 'ä',
+  '&aring;': 'å',
+  '&aelig;': 'æ',
+  '&ccedil;': 'ç',
+  '&egrave;': 'è',
+  '&eacute;': 'é',
+  '&ecirc;': 'ê',
+  '&euml;': 'ë',
+  '&igrave;': 'ì',
+  '&iacute;': 'í',
+  '&icirc;': 'î',
+  '&iuml;': 'ï',
+  '&eth;': 'ð',
+  '&ntilde;': 'ñ',
+  '&ograve;': 'ò',
+  '&oacute;': 'ó',
+  '&ocirc;': 'ô',
+  '&otilde;': 'õ',
+  '&ouml;': 'ö',
+  '&oslash;': 'ø',
+  '&ugrave;': 'ù',
+  '&uacute;': 'ú',
+  '&ucirc;': 'û',
+  '&uuml;': 'ü',
+  '&yacute;': 'ý',
+  '&thorn;': 'þ',
+  '&yuml;': 'ÿ',
+  '&iexcl;': '¡',
+  '&iquest;': '¿',
+  '&fnof;': 'ƒ',
+  '&circ;': 'ˆ',
+  '&tilde;': '˜',
+  '&OElig;': 'Œ',
+  '&oelig;': 'œ',
+  '&Scaron;': 'Š',
+  '&scaron;': 'š',
+  '&Yuml;': 'Ÿ',
+  '&ordf;': 'ª',
+  '&ordm;': 'º',
+  '&macr;': '¯',
+  '&acute;': '´',
+  '&cedil;': '¸',
+  '&sup1;': '¹',
+  '&sup2;': '²',
+  '&sup3;': '³',
+  '&frac14;': '¼',
+  '&frac12;': '½',
+  '&frac34;': '¾',
+  '&spades;': '♠',
+  '&clubs;': '♣',
+  '&hearts;': '♥',
+  '&diams;': '♦',
+  '&loz;': '◊',
+  '&oline;': '‾',
+  '&frasl;': '⁄',
+  '&weierp;': '℘',
+  '&image;': 'ℑ',
+  '&real;': 'ℜ',
+  '&alefsym;': 'ℵ'
+};
+const entityPattern = new RegExp(Object.keys(commonEntities).map(entity => entity.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'), 'g');
+const decodeHtmlEntities = text => text.replace(entityPattern, match => commonEntities[match]).replace(/&#(\d+);/g, (_, num) => String.fromCharCode(parseInt(num, 10))).replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
+exports.decodeHtmlEntities = decodeHtmlEntities;

package/dist/commonjs/IcuTransUtils/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TranslationParserError = require("./TranslationParserError");
+Object.keys(_TranslationParserError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TranslationParserError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TranslationParserError[key];
+    }
+  });
+});
+var _htmlEntityDecoder = require("./htmlEntityDecoder");
+Object.keys(_htmlEntityDecoder).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _htmlEntityDecoder[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _htmlEntityDecoder[key];
+    }
+  });
+});
+var _tokenizer = require("./tokenizer");
+Object.keys(_tokenizer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tokenizer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tokenizer[key];
+    }
+  });
+});
+var _renderTranslation = require("./renderTranslation");
+Object.keys(_renderTranslation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _renderTranslation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _renderTranslation[key];
+    }
+  });
+});

package/dist/commonjs/IcuTransUtils/renderTranslation.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderTranslation = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TranslationParserError = require("./TranslationParserError");
+var _tokenizer = require("./tokenizer");
+var _htmlEntityDecoder = require("./htmlEntityDecoder");
+const renderDeclarationNode = (declaration, children, childDeclarations) => {
+  const {
+    type,
+    props = {}
+  } = declaration;
+  if (props.children && Array.isArray(props.children) && childDeclarations) {
+    const {
+      children: _childrenToRemove,
+      ...propsWithoutChildren
+    } = props;
+    return _react.default.createElement(type, propsWithoutChildren, ...children);
+  }
+  if (children.length === 0) {
+    return _react.default.createElement(type, props);
+  }
+  if (children.length === 1) {
+    return _react.default.createElement(type, props, children[0]);
+  }
+  return _react.default.createElement(type, props, ...children);
+};
+const renderTranslation = (translation, declarations = []) => {
+  if (!translation) {
+    return [];
+  }
+  const tokens = (0, _tokenizer.tokenize)(translation);
+  const result = [];
+  const stack = [];
+  const literalTagNumbers = new Set();
+  const getCurrentDeclarations = () => {
+    if (stack.length === 0) {
+      return declarations;
+    }
+    const parentFrame = stack[stack.length - 1];
+    if (parentFrame.declaration.props?.children && Array.isArray(parentFrame.declaration.props.children)) {
+      return parentFrame.declaration.props.children;
+    }
+    return parentFrame.declarations;
+  };
+  tokens.forEach(token => {
+    switch (token.type) {
+      case 'Text':
+        {
+          const decoded = (0, _htmlEntityDecoder.decodeHtmlEntities)(token.value);
+          const targetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
+          targetArray.push(decoded);
+        }
+        break;
+      case 'TagOpen':
+        {
+          const {
+            tagNumber
+          } = token;
+          const currentDeclarations = getCurrentDeclarations();
+          const declaration = currentDeclarations[tagNumber];
+          if (!declaration) {
+            literalTagNumbers.add(tagNumber);
+            const literalText = `<${tagNumber}>`;
+            const targetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
+            targetArray.push(literalText);
+            break;
+          }
+          stack.push({
+            tagNumber,
+            children: [],
+            position: token.position,
+            declaration,
+            declarations: currentDeclarations
+          });
+        }
+        break;
+      case 'TagClose':
+        {
+          const {
+            tagNumber
+          } = token;
+          if (literalTagNumbers.has(tagNumber)) {
+            const literalText = `</${tagNumber}>`;
+            const literalTargetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
+            literalTargetArray.push(literalText);
+            literalTagNumbers.delete(tagNumber);
+            break;
+          }
+          if (stack.length === 0) {
+            throw new _TranslationParserError.TranslationParserError(`Unexpected closing tag </${tagNumber}> at position ${token.position}`, token.position, translation);
+          }
+          const frame = stack.pop();
+          if (frame.tagNumber !== tagNumber) {
+            throw new _TranslationParserError.TranslationParserError(`Mismatched tags: expected </${frame.tagNumber}> but got </${tagNumber}> at position ${token.position}`, token.position, translation);
+          }
+          const element = renderDeclarationNode(frame.declaration, frame.children, frame.declarations);
+          const elementTargetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
+          elementTargetArray.push(element);
+        }
+        break;
+    }
+  });
+  if (stack.length > 0) {
+    const unclosed = stack[stack.length - 1];
+    throw new _TranslationParserError.TranslationParserError(`Unclosed tag <${unclosed.tagNumber}> at position ${unclosed.position}`, unclosed.position, translation);
+  }
+  return result;
+};
+exports.renderTranslation = renderTranslation;

package/dist/commonjs/IcuTransUtils/tokenizer.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokenize = void 0;
+const tokenize = translation => {
+  const tokens = [];
+  let position = 0;
+  let currentText = '';
+  const flushText = () => {
+    if (currentText) {
+      tokens.push({
+        type: 'Text',
+        value: currentText,
+        position: position - currentText.length
+      });
+      currentText = '';
+    }
+  };
+  while (position < translation.length) {
+    const char = translation[position];
+    if (char === '<') {
+      const tagMatch = translation.slice(position).match(/^<(\d+)>/);
+      if (tagMatch) {
+        flushText();
+        tokens.push({
+          type: 'TagOpen',
+          value: tagMatch[0],
+          position,
+          tagNumber: parseInt(tagMatch[1], 10)
+        });
+        position += tagMatch[0].length;
+      } else {
+        const closeTagMatch = translation.slice(position).match(/^<\/(\d+)>/);
+        if (closeTagMatch) {
+          flushText();
+          tokens.push({
+            type: 'TagClose',
+            value: closeTagMatch[0],
+            position,
+            tagNumber: parseInt(closeTagMatch[1], 10)
+          });
+          position += closeTagMatch[0].length;
+        } else {
+          currentText += char;
+          position += 1;
+        }
+      }
+    } else {
+      currentText += char;
+      position += 1;
+    }
+  }
+  flushText();
+  return tokens;
+};
+exports.tokenize = tokenize;

package/dist/commonjs/IcuTransWithoutContext.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IcuTransWithoutContext = IcuTransWithoutContext;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("./utils.js");
+var _i18nInstance = require("./i18nInstance.js");
+var _IcuTransUtils = require("./IcuTransUtils");
+function IcuTransWithoutContext({
+  i18nKey,
+  defaultTranslation,
+  content,
+  ns,
+  values = {},
+  i18n: i18nFromProps,
+  t: tFromProps
+}) {
+  const i18n = i18nFromProps || (0, _i18nInstance.getI18n)();
+  if (!i18n) {
+    (0, _utils.warnOnce)(i18n, 'NO_I18NEXT_INSTANCE', `IcuTrans: You need to pass in an i18next instance using i18nextReactModule`, {
+      i18nKey
+    });
+    return _react.default.createElement(_react.default.Fragment, {}, defaultTranslation);
+  }
+  const t = tFromProps || i18n.t?.bind(i18n) || (k => k);
+  let namespaces = ns || t.ns || i18n.options?.defaultNS;
+  namespaces = (0, _utils.isString)(namespaces) ? [namespaces] : namespaces || ['translation'];
+  let mergedValues = values;
+  if (i18n.options?.interpolation?.defaultVariables) {
+    mergedValues = values && Object.keys(values).length > 0 ? {
+      ...values,
+      ...i18n.options.interpolation.defaultVariables
+    } : {
+      ...i18n.options.interpolation.defaultVariables
+    };
+  }
+  const translation = t(i18nKey, {
+    defaultValue: defaultTranslation,
+    ...mergedValues,
+    ns: namespaces
+  });
+  try {
+    const rendered = (0, _IcuTransUtils.renderTranslation)(translation, content);
+    return _react.default.createElement(_react.default.Fragment, {}, ...rendered);
+  } catch (error) {
+    (0, _utils.warn)(i18n, 'ICU_TRANS_RENDER_ERROR', `IcuTrans component error for key "${i18nKey}": ${error.message}`, {
+      i18nKey,
+      error
+    });
+    return _react.default.createElement(_react.default.Fragment, {}, translation);
+  }
+}
+IcuTransWithoutContext.displayName = 'IcuTransWithoutContext';

package/dist/es/IcuTrans.js

@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+import { IcuTransWithoutContext } from './IcuTransWithoutContext.js';
+import { getI18n, I18nContext } from './context.js';
+export function IcuTrans({
+  i18nKey,
+  defaultTranslation,
+  content,
+  ns,
+  values = {},
+  i18n: i18nFromProps,
+  t: tFromProps
+}) {
+  const {
+    i18n: i18nFromContext,
+    defaultNS: defaultNSFromContext
+  } = useContext(I18nContext) || {};
+  const i18n = i18nFromProps || i18nFromContext || getI18n();
+  const t = tFromProps || i18n?.t.bind(i18n);
+  return IcuTransWithoutContext({
+    i18nKey,
+    defaultTranslation,
+    content,
+    ns: ns || t?.ns || defaultNSFromContext || i18n?.options?.defaultNS,
+    values,
+    i18n,
+    t: tFromProps
+  });
+}
+IcuTrans.displayName = 'IcuTrans';

package/dist/es/IcuTransUtils/TranslationParserError.js

@@ -0,0 +1,11 @@
+export class TranslationParserError extends Error {
+  constructor(message, position, translationString) {
+    super(message);
+    this.name = 'TranslationParserError';
+    this.position = position;
+    this.translationString = translationString;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, TranslationParserError);
+    }
+  }
+}