react-i18next 17.0.9 → 17.0.11

package/react-i18next.js

@@ -97,7 +97,7 @@
   const deepExtend = (target, source, overwrite) => {
     for (const prop in source) {
       if (prop !== '__proto__' && prop !== 'constructor') {
-        if (prop in target) {
+        if (Object.prototype.hasOwnProperty.call(target, prop)) {
           if (isString$1(target[prop]) || target[prop] instanceof String || isString$1(source[prop]) || source[prop] instanceof String) {
             if (overwrite) target[prop] = source[prop];
           } else {
@@ -461,11 +461,15 @@
     } = selector(createProxy());
     const keySeparator = opts?.keySeparator ?? '.';
     const nsSeparator = opts?.nsSeparator ?? ':';
+    const strict = opts?.enableSelector === 'strict';
     if (path.length > 1 && nsSeparator) {
       const ns = opts?.ns;
-      const nsArray = Array.isArray(ns) ? ns : null;
-      if (nsArray && nsArray.length > 1 && nsArray.slice(1).includes(path[0])) {
-        return `${path[0]}${nsSeparator}${path.slice(1).join(keySeparator)}`;
+      const nsList = strict ? Array.isArray(ns) ? ns : ns ? [ns] : null : Array.isArray(ns) ? ns : null;
+      if (nsList) {
+        const candidates = strict ? nsList : nsList.length > 1 ? nsList.slice(1) : [];
+        if (candidates.includes(path[0])) {
+          return `${path[0]}${nsSeparator}${path.slice(1).join(keySeparator)}`;
+        }
       }
     }
     return path.join(keySeparator);
@@ -877,7 +881,10 @@
       const useOptionsReplaceForData = options.replace && !isString$1(options.replace);
       let data = useOptionsReplaceForData ? options.replace : options;
       if (useOptionsReplaceForData && typeof options.count !== 'undefined') {
-        data.count = options.count;
+        data = {
+          ...data,
+          count: options.count
+        };
       }
       if (this.options.interpolation.defaultVariables) {
         data = {
@@ -1187,10 +1194,10 @@
       const skipOnVariables = options?.interpolation?.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
       const todos = [{
         regex: this.regexpUnescape,
-        safeValue: val => regexSafe(val)
+        safeValue: val => val
       }, {
         regex: this.regexp,
-        safeValue: val => this.escapeValue ? regexSafe(this.escape(val)) : regexSafe(val)
+        safeValue: val => this.escapeValue ? this.escape(val) : val
       }];
       todos.forEach(todo => {
         replaces = 0;
@@ -1214,9 +1221,9 @@
             value = makeString(value);
           }
           const safeValue = todo.safeValue(value);
-          str = str.replace(match[0], safeValue);
+          str = str.replace(match[0], regexSafe(safeValue));
           if (skipOnVariables) {
-            todo.regex.lastIndex += value.length;
+            todo.regex.lastIndex += safeValue.length;
             todo.regex.lastIndex -= match[0].length;
           } else {
             todo.regex.lastIndex = 0;
@@ -1266,7 +1273,7 @@
         clonedOptions = clonedOptions.replace && !isString$1(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
         clonedOptions.applyPostProcessor = false;
         delete clonedOptions.defaultValue;
-        const keyEndIndex = /{.*}/.test(match[1]) ? match[1].lastIndexOf('}') + 1 : match[1].indexOf(this.formatSeparator);
+        const keyEndIndex = /{.*}/s.test(match[1]) ? match[1].lastIndexOf('}') + 1 : match[1].indexOf(this.formatSeparator);
         if (keyEndIndex !== -1) {
           formatters = match[1].slice(keyEndIndex).split(this.formatSeparator).map(elem => elem.trim()).filter(Boolean);
           match[1] = match[1].slice(0, keyEndIndex);
@@ -1395,10 +1402,14 @@
     format(value, format, lng, options = {}) {
       if (!format) return value;
       if (value == null) return value;
-      const formats = format.split(this.formatSeparator);
-      if (formats.length > 1 && formats[0].indexOf('(') > 1 && !formats[0].includes(')') && formats.find(f => f.includes(')'))) {
-        const lastIndex = formats.findIndex(f => f.includes(')'));
-        formats[0] = [formats[0], ...formats.splice(1, lastIndex)].join(this.formatSeparator);
+      const rawFormats = format.split(this.formatSeparator);
+      const formats = [];
+      for (let i = 0; i < rawFormats.length; i++) {
+        let f = rawFormats[i];
+        while (f.indexOf('(') > -1 && !f.includes(')') && i + 1 < rawFormats.length) {
+          f = `${f}${this.formatSeparator}${rawFormats[++i]}`;
+        }
+        formats.push(f);
       }
       const result = formats.reduce((mem, f) => {
         const {
@@ -1657,6 +1668,7 @@
     nsSeparator: ':',
     pluralSeparator: '_',
     contextSeparator: '_',
+    enableSelector: false,
     partialBundledLanguages: false,
     saveMissing: false,
     updateMissing: false,
@@ -2233,127 +2245,318 @@
   instance.loadNamespaces;
   instance.loadLanguages;
 
-  function getDefaultExportFromCjs (x) {
-  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  const voidElements = {
+    area: true,
+    base: true,
+    br: true,
+    col: true,
+    embed: true,
+    hr: true,
+    img: true,
+    input: true,
+    link: true,
+    meta: true,
+    param: true,
+    source: true,
+    track: true,
+    wbr: true,
+    '!doctype': true,
+    '!DOCTYPE': true
+  };
+  const attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?("[^"]*"|'[^']*')/g;
+  function parseTag(tag) {
+    const res = {
+      type: 'tag',
+      name: '',
+      voidElement: false,
+      attrs: {},
+      children: []
+    };
+    const tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/);
+    if (tagMatch) {
+      res.name = tagMatch[1];
+      if (voidElements[tagMatch[1]] || tag.charAt(tag.length - 2) === '/') {
+        res.voidElement = true;
+      }
+      if (res.name.startsWith('!--')) {
+        const endIndex = tag.indexOf('-->');
+        return {
+          type: 'comment',
+          comment: endIndex !== -1 ? tag.slice(4, endIndex) : ''
+        };
+      }
+    }
+    const reg = new RegExp(attrRE);
+    let result = null;
+    for (;;) {
+      result = reg.exec(tag);
+      if (result === null) {
+        break;
+      }
+      if (!result[0].trim()) {
+        continue;
+      }
+      if (result[1]) {
+        const attr = result[1].trim();
+        let arr = [attr, null];
+        const eq = attr.indexOf('=');
+        if (eq > -1) {
+          arr = [attr.slice(0, eq), attr.slice(eq + 1)];
+        }
+        res.attrs[arr[0]] = arr[1];
+        reg.lastIndex--;
+      } else if (result[2]) {
+        res.attrs[result[2]] = result[3].trim().substring(1, result[3].length - 1);
+      }
+    }
+    return res;
   }
-
-  var voidElements;
-  var hasRequiredVoidElements;
-
-  function requireVoidElements () {
-  	if (hasRequiredVoidElements) return voidElements;
-  	hasRequiredVoidElements = 1;
-  	voidElements = {
-  	  "area": true,
-  	  "base": true,
-  	  "br": true,
-  	  "col": true,
-  	  "embed": true,
-  	  "hr": true,
-  	  "img": true,
-  	  "input": true,
-  	  "link": true,
-  	  "meta": true,
-  	  "param": true,
-  	  "source": true,
-  	  "track": true,
-  	  "wbr": true
-  	};
-  	return voidElements;
+  const tagRE = /<!--[\s\S]*?-->|<[a-zA-Z0-9\-!/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
+  const tagNameRE = /<\/?([^\s]+?)[/\s>]/;
+  const whitespaceRE = /^\s*$/;
+  const rawTextRE = /^(script|style)$/i;
+  const sentinel = '\u0000';
+  const empty = Object.create(null);
+  function restoreSentinels(nodes) {
+    nodes.forEach(function (node) {
+      if (node.type === 'text') {
+        node.content = node.content.split(sentinel).join('<');
+        return;
+      }
+      if (node.type === 'comment') {
+        node.comment = node.comment.split(sentinel).join('<');
+        return;
+      }
+      for (const key in node.attrs) {
+        const value = node.attrs[key];
+        if (typeof value === 'string' && value.indexOf(sentinel) > -1) {
+          node.attrs[key] = value.split(sentinel).join('<');
+        }
+      }
+      if (node.children.length) {
+        restoreSentinels(node.children);
+      }
+    });
   }
-
-  var voidElementsExports = requireVoidElements();
-  var e = /*@__PURE__*/getDefaultExportFromCjs(voidElementsExports);
-
-  var t = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
-  function n(n) {
-    var r = {
-        type: "tag",
-        name: "",
-        voidElement: false,
-        attrs: {},
-        children: []
-      },
-      i = n.match(/<\/?([^\s]+?)[/\s>]/);
-    if (i && (r.name = i[1], (e[i[1]] || "/" === n.charAt(n.length - 2)) && (r.voidElement = true), r.name.startsWith("!--"))) {
-      var s = n.indexOf("--\x3e");
-      return {
-        type: "comment",
-        comment: -1 !== s ? n.slice(4, s) : ""
+  function parse(html, options) {
+    const components = options && options.components || empty;
+    const allowedTags = options && options.allowedTags;
+    let restoreNeeded = false;
+    if (allowedTags) {
+      const isAllowed = typeof allowedTags === 'function' ? allowedTags : function (name) {
+        return allowedTags.indexOf(name) > -1;
       };
+      let out = '';
+      let pos = 0;
+      tagRE.lastIndex = 0;
+      let am;
+      while (am = tagRE.exec(html)) {
+        const tag = am[0];
+        out += html.slice(pos, am.index);
+        const nameMatch = tag.match(tagNameRE);
+        if (tag.startsWith('<!--') || nameMatch && isAllowed(nameMatch[1])) {
+          out += tag;
+          pos = am.index + tag.length;
+        } else {
+          restoreNeeded = true;
+          out += sentinel;
+          pos = am.index + 1;
+          tagRE.lastIndex = pos;
+        }
+      }
+      html = out + html.slice(pos);
     }
-    for (var a = new RegExp(t), c = null; null !== (c = a.exec(n));) if (c[0].trim()) if (c[1]) {
-      var o = c[1].trim(),
-        l = [o, ""];
-      o.indexOf("=") > -1 && (l = o.split("=")), r.attrs[l[0]] = l[1], a.lastIndex--;
-    } else c[2] && (r.attrs[c[2]] = c[3].trim().substring(1, c[3].length - 1));
-    return r;
-  }
-  var r = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g,
-    i = /^\s*$/,
-    s = Object.create(null);
-  function a(e, t) {
-    switch (t.type) {
-      case "text":
-        return e + t.content;
-      case "tag":
-        return e += "<" + t.name + (t.attrs ? function (e) {
-          var t = [];
-          for (var n in e) t.push(n + '="' + e[n] + '"');
-          return t.length ? " " + t.join(" ") : "";
-        }(t.attrs) : "") + (t.voidElement ? "/>" : ">"), t.voidElement ? e : e + t.children.reduce(a, "") + "</" + t.name + ">";
-      case "comment":
-        return e + "\x3c!--" + t.comment + "--\x3e";
+    const result = [];
+    const arr = [];
+    let current;
+    let level = -1;
+    let inComponent = false;
+    let rawUntil = 0;
+    let htmlLower;
+    if (html.indexOf('<') !== 0) {
+      const end = html.indexOf('<');
+      result.push({
+        type: 'text',
+        content: end === -1 ? html : html.substring(0, end)
+      });
     }
-  }
-  var c = {
-    parse: function (e, t) {
-      t || (t = {}), t.components || (t.components = s);
-      var a,
-        c = [],
-        o = [],
-        l = -1,
-        m = false;
-      if (0 !== e.indexOf("<")) {
-        var u = e.indexOf("<");
-        c.push({
-          type: "text",
-          content: -1 === u ? e : e.substring(0, u)
-        });
+    const matches = [];
+    let m;
+    while (m = tagRE.exec(html)) {
+      matches.push(m);
+    }
+    matches.forEach(function (match, i) {
+      const tag = match[0];
+      if (!tag) return;
+      if (tag.startsWith('<!--')) return;
+      let lts = 0;
+      let gts = 0;
+      let secondLt = -1;
+      let quote = null;
+      for (let j = 0; j < tag.length; j++) {
+        const c = tag.charAt(j);
+        if (quote) {
+          if (c === quote) quote = null;
+        } else if (c === '"' || c === "'") {
+          quote = c;
+        } else if (c === '<') {
+          lts++;
+          if (lts === 2) secondLt = j;
+        } else if (c === '>') {
+          gts++;
+        }
+      }
+      const validSplit = secondLt > -1 && /[a-zA-Z0-9\-!/]/.test(tag.charAt(secondLt + 1));
+      if (lts > gts && validSplit) {
+        const firstPart = tag.substring(0, secondLt);
+        const secondPart = tag.substring(firstPart.length);
+        matches[i][0] = secondPart;
+        matches[i].index += firstPart.length;
       }
-      return e.replace(r, function (r, s) {
-        if (m) {
-          if (r !== "</" + a.name + ">") return;
-          m = false;
-        }
-        var u,
-          f = "/" !== r.charAt(1),
-          h = r.startsWith("\x3c!--"),
-          p = s + r.length,
-          d = e.charAt(p);
-        if (h) {
-          var v = n(r);
-          return l < 0 ? (c.push(v), c) : ((u = o[l]).children.push(v), c);
-        }
-        if (f && (l++, "tag" === (a = n(r)).type && t.components[a.name] && (a.type = "component", m = true), a.voidElement || m || !d || "<" === d || a.children.push({
-          type: "text",
-          content: e.slice(p, e.indexOf("<", p))
-        }), 0 === l && c.push(a), (u = o[l - 1]) && u.children.push(a), o[l] = a), (!f || a.voidElement) && (l > -1 && (a.voidElement || a.name === r.slice(2, -1)) && (l--, a = -1 === l ? c : o[l]), !m && "<" !== d && d)) {
-          u = -1 === l ? c : o[l].children;
-          var x = e.indexOf("<", p),
-            g = e.slice(p, -1 === x ? void 0 : x);
-          i.test(g) && (g = " "), (x > -1 && l + u.length >= 0 || " " !== g) && u.push({
-            type: "text",
-            content: g
+    });
+    matches.forEach(function (match, i) {
+      const tag = match[0];
+      if (!tag) return;
+      const index = match.index;
+      if (index < rawUntil) return;
+      if (inComponent) {
+        if (tag !== '</' + current.name + '>') {
+          return;
+        } else {
+          inComponent = false;
+        }
+      }
+      const isOpen = tag.charAt(1) !== '/';
+      const isComment = tag.startsWith('<!--');
+      const start = index + tag.length;
+      const nextChar = html.charAt(start);
+      const nextMatch = matches[i + 1];
+      let isText;
+      if (nextChar === '<' && nextMatch) {
+        const nextTag = html.substring(start, nextMatch.index);
+        isText = nextTag.split('<').length > nextTag.split('>').length;
+      }
+      let parent;
+      if (isComment) {
+        const comment = parseTag(tag);
+        if (level < 0) {
+          result.push(comment);
+          return result;
+        }
+        parent = arr[level];
+        parent.children.push(comment);
+        const text = html.slice(start, nextMatch ? nextMatch.index : undefined);
+        if (text.length > 0) {
+          parent.children.push({
+            type: 'text',
+            content: text
           });
         }
-      }), c;
-    },
-    stringify: function (e) {
-      return e.reduce(function (e, t) {
-        return e + a("", t);
-      }, "");
+        return result;
+      }
+      if (isOpen) {
+        level++;
+        current = parseTag(tag);
+        if (current.type === 'tag' && components[current.name]) {
+          current.type = 'component';
+          inComponent = true;
+        }
+        let isRawText = false;
+        if (!inComponent && !current.voidElement && rawTextRE.test(current.name)) {
+          isRawText = true;
+          htmlLower || (htmlLower = html.toLowerCase());
+          const closeIndex = htmlLower.indexOf('</' + current.name.toLowerCase() + '>', start);
+          const contentEnd = closeIndex === -1 ? html.length : closeIndex;
+          const content = html.slice(start, contentEnd);
+          if (content) {
+            current.children.push({
+              type: 'text',
+              content
+            });
+          }
+          rawUntil = contentEnd;
+        }
+        if (!current.voidElement && !inComponent && !isRawText && nextChar && nextChar !== '<') {
+          current.children.push({
+            type: 'text',
+            content: html.slice(start, nextMatch ? nextMatch.index : undefined)
+          });
+        }
+        if (level === 0) {
+          result.push(current);
+        }
+        parent = arr[level - 1];
+        if (parent) {
+          parent.children.push(current);
+        }
+        arr[level] = current;
+      }
+      if (!isOpen || current.voidElement) {
+        if (level > -1 && (current.voidElement || current.name === tag.slice(2, -1))) {
+          level--;
+          current = level === -1 ? result : arr[level];
+        }
+        if (!inComponent && (nextChar !== '<' || isText) && nextChar) {
+          parent = level === -1 ? result : arr[level].children;
+          const end = nextMatch ? nextMatch.index : -1;
+          let content = html.slice(start, end === -1 ? undefined : end);
+          if (whitespaceRE.test(content)) {
+            content = ' ';
+          }
+          if (end > -1 && level + parent.length >= 0 || content !== ' ') {
+            parent.push({
+              type: 'text',
+              content
+            });
+          }
+        }
+      }
+    });
+    if (restoreNeeded) {
+      restoreSentinels(result);
+    }
+    return result;
+  }
+  function attrString(attrs) {
+    const buff = [];
+    for (const key in attrs) {
+      if (attrs[key] === null) {
+        buff.push(key);
+      } else {
+        buff.push(key + '="' + String(attrs[key]).replace(/"/g, '&quot;') + '"');
+      }
     }
+    if (!buff.length) {
+      return '';
+    }
+    return ' ' + buff.join(' ');
+  }
+  function stringifyNode(buff, doc) {
+    switch (doc.type) {
+      case 'text':
+        return buff + doc.content;
+      case 'tag':
+        {
+          const tagEnd = doc.voidElement && doc.name.toLowerCase() !== '!doctype' ? '/>' : '>';
+          buff += '<' + doc.name + (doc.attrs ? attrString(doc.attrs) : '') + tagEnd;
+          if (doc.voidElement) {
+            return buff;
+          }
+          return buff + doc.children.reduce(stringifyNode, '') + '</' + doc.name + '>';
+        }
+      case 'comment':
+        buff += '<!--' + doc.comment + '-->';
+        return buff;
+    }
+  }
+  function stringify(doc) {
+    return doc.reduce(function (token, rootEl) {
+      return token + stringifyNode('', rootEl);
+    }, '');
+  }
+  var index = {
+    parse,
+    stringify
   };
 
   const warn = (i18n, code, msg, rest) => {
@@ -2571,46 +2774,6 @@
     });
     return stringNode;
   };
-  const escapeLiteralLessThan = (str, keepArray = [], knownComponentsMap = {}) => {
-    if (!str) return str;
-    const knownNames = Object.keys(knownComponentsMap);
-    const allValidNames = [...keepArray, ...knownNames];
-    let result = '';
-    let i = 0;
-    while (i < str.length) {
-      if (str[i] === '<') {
-        let isValidTag = false;
-        const closingMatch = str.slice(i).match(/^<\/(\d+|[a-zA-Z][a-zA-Z0-9_-]*)>/);
-        if (closingMatch) {
-          const tagName = closingMatch[1];
-          if (/^\d+$/.test(tagName) || allValidNames.includes(tagName)) {
-            isValidTag = true;
-            result += closingMatch[0];
-            i += closingMatch[0].length;
-          }
-        }
-        if (!isValidTag) {
-          const openingMatch = str.slice(i).match(/^<(\d+|[a-zA-Z][a-zA-Z0-9_-]*)(\s+[\w-]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?)*\s*(\/)?>/);
-          if (openingMatch) {
-            const tagName = openingMatch[1];
-            if (/^\d+$/.test(tagName) || allValidNames.includes(tagName)) {
-              isValidTag = true;
-              result += openingMatch[0];
-              i += openingMatch[0].length;
-            }
-          }
-        }
-        if (!isValidTag) {
-          result += '&lt;';
-          i += 1;
-        }
-      } else {
-        result += str[i];
-        i += 1;
-      }
-    }
-    return result;
-  };
   const renderNodes = (children, knownComponentsMap, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) => {
     if (targetString === '') return [];
     const keepArray = i18nOptions.transKeepBasicHtmlNodesFor || [];
@@ -2625,8 +2788,11 @@
       });
     };
     getData(children);
-    const escapedString = escapeLiteralLessThan(targetString, keepArray, data);
-    const ast = c.parse(`<0>${escapedString}</0>`);
+    const knownNames = Object.keys(data);
+    const allowedTags = name => /^\d+$/.test(name) || keepArray.indexOf(name) > -1 || knownNames.indexOf(name) > -1;
+    const ast = index.parse(`<0>${targetString}</0>`, {
+      allowedTags
+    });
     const opts = {
       ...data,
       ...combinedTOpts
@@ -2831,7 +2997,7 @@
   }) {
     const i18n = i18nFromProps || getI18n();
     if (!i18n) {
-      warnOnce(i18n, 'NO_I18NEXT_INSTANCE', `Trans: You need to pass in an i18next instance using i18nextReactModule`, {
+      warnOnce(i18n, 'NO_I18NEXT_INSTANCE', `Trans: You need to pass in an i18next instance using initReactI18next or by passing it via props or context. In monorepo setups, make sure there is only one instance of react-i18next.`, {
         i18nKey
       });
       return children;
@@ -3579,7 +3745,7 @@
     const i18n = i18nFromProps || i18nFromContext || getI18n();
     if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
     if (!i18n) {
-      warnOnce(i18n, 'NO_I18NEXT_INSTANCE', 'useTranslation: You will need to pass in an i18next instance by using initReactI18next');
+      warnOnce(i18n, 'NO_I18NEXT_INSTANCE', 'useTranslation: You will need to pass in an i18next instance by using initReactI18next or by passing it via props or context. In monorepo setups, make sure there is only one instance of react-i18next.');
     }
     const i18nOptions = React.useMemo(() => ({
       ...getDefaults(),
@@ -3701,6 +3867,13 @@
       return arr;
     }, [t, finalI18n, ready, finalI18n.resolvedLanguage, finalI18n.language, finalI18n.languages]);
     if (i18n && useSuspense && !ready) {
+      let inDevelopment = false;
+      try {
+        inDevelopment = "development" !== 'production';
+      } catch (e) {}
+      if (inDevelopment) {
+        warnOnce(i18n, 'SUSPENDED_WHILE_LOADING', 'useTranslation: suspended while translations are loading (useSuspense is true by default). Add a <Suspense> boundary above this component, or set react.useSuspense: false in the i18next init options. https://react.i18next.com/latest/usetranslation-hook');
+      }
       throw new Promise(resolve => {
         const onLoaded = () => resolve();
         if (props.lng) {