react-i18next 14.1.1 → 14.1.3

package/src/TransWithoutContext.js

@@ -1,39 +1,35 @@
 import { Fragment, isValidElement, cloneElement, createElement, Children } from 'react';
 import HTML from 'html-parse-stringify';
-import { warn, warnOnce } from './utils.js';
+import { isObject, isString, warn, warnOnce } from './utils.js';
 import { getDefaults } from './defaults.js';
 import { getI18n } from './i18nInstance.js';
 
-function hasChildren(node, checkLength) {
+const hasChildren = (node, checkLength) => {
   if (!node) return false;
   const base = node.props ? node.props.children : node.children;
   if (checkLength) return base.length > 0;
   return !!base;
-}
+};
 
-function getChildren(node) {
+const getChildren = (node) => {
   if (!node) return [];
   const children = node.props ? node.props.children : node.children;
   return node.props && node.props.i18nIsDynamicList ? getAsArray(children) : children;
-}
+};
 
-function hasValidReactChildren(children) {
-  if (Object.prototype.toString.call(children) !== '[object Array]') return false;
-  return children.every((child) => isValidElement(child));
-}
+const hasValidReactChildren = (children) =>
+  Array.isArray(children) && children.every(isValidElement);
 
-function getAsArray(data) {
-  return Array.isArray(data) ? data : [data];
-}
+const getAsArray = (data) => (Array.isArray(data) ? data : [data]);
 
-function mergeProps(source, target) {
+const mergeProps = (source, target) => {
   const newTarget = { ...target };
   // overwrite source.props when target.props already set
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
-}
+};
 
-export function nodesToString(children, i18nOptions) {
+export const nodesToString = (children, i18nOptions) => {
   if (!children) return '';
   let stringNode = '';
 
@@ -46,32 +42,35 @@ export function nodesToString(children, i18nOptions) {
 
   // e.g. lorem <br/> ipsum {{ messageCount, format }} dolor <strong>bold</strong> amet
   childrenArray.forEach((child, childIndex) => {
-    if (typeof child === 'string') {
+    if (isString(child)) {
       // actual e.g. lorem
       // expected e.g. lorem
       stringNode += `${child}`;
     } else if (isValidElement(child)) {
-      const childPropsCount = Object.keys(child.props).length;
-      const shouldKeepChild = keepArray.indexOf(child.type) > -1;
-      const childChildren = child.props.children;
+      const { props, type } = child;
+      const childPropsCount = Object.keys(props).length;
+      const shouldKeepChild = keepArray.indexOf(type) > -1;
+      const childChildren = props.children;
 
-      if (!childChildren && shouldKeepChild && childPropsCount === 0) {
+      if (!childChildren && shouldKeepChild && !childPropsCount) {
         // actual e.g. lorem <br/> ipsum
         // expected e.g. lorem <br/> ipsum
-        stringNode += `<${child.type}/>`;
-      } else if (!childChildren && (!shouldKeepChild || childPropsCount !== 0)) {
+        stringNode += `<${type}/>`;
+      } else if (
+        (!childChildren && (!shouldKeepChild || childPropsCount)) ||
+        props.i18nIsDynamicList
+      ) {
         // actual e.g. lorem <hr className="test" /> ipsum
         // expected e.g. lorem <0></0> ipsum
-        stringNode += `<${childIndex}></${childIndex}>`;
-      } else if (child.props.i18nIsDynamicList) {
+        // or
         // we got a dynamic list like
         // e.g. <ul i18nIsDynamicList>{['a', 'b'].map(item => ( <li key={item}>{item}</li> ))}</ul>
         // expected e.g. "<0></0>", not e.g. "<0><0>a</0><1>b</1></0>"
         stringNode += `<${childIndex}></${childIndex}>`;
-      } else if (shouldKeepChild && childPropsCount === 1 && typeof childChildren === 'string') {
+      } else if (shouldKeepChild && childPropsCount === 1 && isString(childChildren)) {
         // actual e.g. dolor <strong>bold</strong> amet
         // expected e.g. dolor <strong>bold</strong> amet
-        stringNode += `<${child.type}>${childChildren}</${child.type}>`;
+        stringNode += `<${type}>${childChildren}</${type}>`;
       } else {
         // regular case mapping the inner children
         const content = nodesToString(childChildren, i18nOptions);
@@ -79,7 +78,7 @@ export function nodesToString(children, i18nOptions) {
       }
     } else if (child === null) {
       warn(`Trans: the passed in value is invalid - seems you passed in a null child.`);
-    } else if (typeof child === 'object') {
+    } else if (isObject(child)) {
       // e.g. lorem {{ value, format }} ipsum
       const { format, ...clone } = child;
       const keys = Object.keys(clone);
@@ -103,9 +102,9 @@ export function nodesToString(children, i18nOptions) {
   });
 
   return stringNode;
-}
+};
 
-function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) {
+const renderNodes = (children, targetString, i18n, i18nOptions, combinedTOpts, shouldUnescape) => {
   if (targetString === '') return [];
 
   // check if contains tags we need to replace from html string to react nodes
@@ -119,15 +118,15 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   // v2 -> interpolates upfront no need for "some <0>{{var}}</0>"" -> will be just "some {{var}}" in translation file
   const data = {};
 
-  function getData(childs) {
+  const getData = (childs) => {
     const childrenArray = getAsArray(childs);
 
     childrenArray.forEach((child) => {
-      if (typeof child === 'string') return;
+      if (isString(child)) return;
       if (hasChildren(child)) getData(getChildren(child));
-      else if (typeof child === 'object' && !isValidElement(child)) Object.assign(data, child);
+      else if (isObject(child) && !isValidElement(child)) Object.assign(data, child);
     });
-  }
+  };
 
   getData(children);
 
@@ -136,7 +135,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   const ast = HTML.parse(`<0>${targetString}</0>`);
   const opts = { ...data, ...combinedTOpts };
 
-  function renderInner(child, node, rootReactNode) {
+  const renderInner = (child, node, rootReactNode) => {
     const childs = getChildren(child);
     const mappedChildren = mapAST(childs, node.children, rootReactNode);
     // `mappedChildren` will always be empty if using the `i18nIsDynamicList` prop,
@@ -145,9 +144,9 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
       (child.props && child.props.i18nIsDynamicList)
       ? childs
       : mappedChildren;
-  }
+  };
 
-  function pushTranslatedJSX(child, inner, mem, i, isVoid) {
+  const pushTranslatedJSX = (child, inner, mem, i, isVoid) => {
     if (child.dummy) {
       child.children = inner; // needed on preact!
       mem.push(cloneElement(child, { key: i }, isVoid ? undefined : inner));
@@ -169,12 +168,12 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
         }),
       );
     }
-  }
+  };
 
   // reactNode (the jsx root element or child)
   // astNode (the translation string as html ast)
   // rootReactNode (the most outer jsx children array or trans components prop)
-  function mapAST(reactNode, astNode, rootReactNode) {
+  const mapAST = (reactNode, astNode, rootReactNode) => {
     const reactNodes = getAsArray(reactNode);
     const astNodes = getAsArray(astNode);
 
@@ -204,14 +203,12 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           isElement && hasChildren(node, true) && !node.voidElement;
 
         const isEmptyTransWithHTML =
-          emptyChildrenButNeedsHandling && typeof child === 'object' && child.dummy && !isElement;
+          emptyChildrenButNeedsHandling && isObject(child) && child.dummy && !isElement;
 
         const isKnownComponent =
-          typeof children === 'object' &&
-          children !== null &&
-          Object.hasOwnProperty.call(children, node.name);
+          isObject(children) && Object.hasOwnProperty.call(children, node.name);
 
-        if (typeof child === 'string') {
+        if (isString(child)) {
           const value = i18n.services.interpolator.interpolate(child, opts, i18n.language);
           mem.push(value);
         } else if (
@@ -257,7 +254,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
             mem.push(`<${node.name}>${inner}</${node.name}>`);
           }
-        } else if (typeof child === 'object' && !isElement) {
+        } else if (isObject(child) && !isElement) {
           const content = node.children[0] ? translationContent : null;
 
           // v1
@@ -291,7 +288,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
       }
       return mem;
     }, []);
-  }
+  };
 
   // call mapAST with having react nodes nested into additional node like
   // we did for the string ast from translation
@@ -302,7 +299,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
     getAsArray(children || []),
   );
   return getChildren(result[0]);
-}
+};
 
 export function Trans({
   children,
@@ -333,7 +330,7 @@ export function Trans({
 
   // prepare having a namespace
   let namespaces = ns || t.ns || (i18n.options && i18n.options.defaultNS);
-  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  namespaces = isString(namespaces) ? [namespaces] : namespaces || ['translation'];
 
   const nodeAsString = nodesToString(children, reactI18nextOptions);
   const defaultValue =
@@ -349,11 +346,16 @@ export function Trans({
         ? { ...values, ...i18n.options.interpolation.defaultVariables }
         : { ...i18n.options.interpolation.defaultVariables };
   }
+  const interpolationOverride =
+    values || count !== undefined || !children // if !children gets problems in future, undo that fix: https://github.com/i18next/react-i18next/issues/1729 by removing !children from this condition
+      ? tOptions.interpolation
+      : { interpolation: { ...tOptions.interpolation, prefix: '#$?', suffix: '?$#' } };
   const combinedTOpts = {
     ...tOptions,
     context: context || tOptions.context, // Add `context` from the props or fallback to the value from `tOptions`
     count,
     ...values,
+    ...interpolationOverride,
     defaultValue,
     ns: namespaces,
   };

package/src/context.js

@@ -18,44 +18,23 @@ export class ReportNamespaces {
     });
   }
 
-  getUsedNamespaces() {
-    return Object.keys(this.usedNamespaces);
-  }
+  getUsedNamespaces = () => Object.keys(this.usedNamespaces);
 }
 
-export function composeInitialProps(ForComponent) {
-  return (ctx) =>
-    new Promise((resolve) => {
-      const i18nInitialProps = getInitialProps();
-
-      if (ForComponent.getInitialProps) {
-        ForComponent.getInitialProps(ctx).then((componentsInitialProps) => {
-          resolve({
-            ...componentsInitialProps,
-            ...i18nInitialProps,
-          });
-        });
-      } else {
-        resolve(i18nInitialProps);
-      }
-    });
-  // Avoid async for now - so we do not need to pull in regenerator
-
-  // return async ctx => {
-  //   const componentsInitialProps = ForComponent.getInitialProps
-  //     ? await ForComponent.getInitialProps(ctx)
-  //     : {};
+export const composeInitialProps = (ForComponent) => async (ctx) => {
+  const componentsInitialProps = ForComponent.getInitialProps
+    ? await ForComponent.getInitialProps(ctx)
+    : {};
 
-  //   const i18nInitialProps = getInitialProps();
+  const i18nInitialProps = getInitialProps();
 
-  //   return {
-  //     ...componentsInitialProps,
-  //     ...i18nInitialProps,
-  //   };
-  // };
-}
+  return {
+    ...componentsInitialProps,
+    ...i18nInitialProps,
+  };
+};
 
-export function getInitialProps() {
+export const getInitialProps = () => {
   const i18n = getI18n();
   const namespaces = i18n.reportNamespaces ? i18n.reportNamespaces.getUsedNamespaces() : [];
 
@@ -72,4 +51,4 @@ export function getInitialProps() {
   ret.initialLanguage = i18n.language;
 
   return ret;
-}
+};

package/src/defaults.js

@@ -13,10 +13,8 @@ let defaultOptions = {
   unescape,
 };
 
-export function setDefaults(options = {}) {
+export const setDefaults = (options = {}) => {
   defaultOptions = { ...defaultOptions, ...options };
-}
+};
 
-export function getDefaults() {
-  return defaultOptions;
-}
+export const getDefaults = () => defaultOptions;

package/src/i18nInstance.js

@@ -1,9 +1,7 @@
 let i18nInstance;
 
-export function setI18n(instance) {
+export const setI18n = (instance) => {
   i18nInstance = instance;
-}
+};
 
-export function getI18n() {
-  return i18nInstance;
-}
+export const getI18n = () => i18nInstance;

package/src/useSSR.js

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { getI18n, I18nContext } from './context.js';
 
-export function useSSR(initialI18nStore, initialLanguage, props = {}) {
+export const useSSR = (initialI18nStore, initialLanguage, props = {}) => {
   const { i18n: i18nFromProps } = props;
   const { i18n: i18nFromContext } = useContext(I18nContext) || {};
   const i18n = i18nFromProps || i18nFromContext || getI18n();
@@ -30,4 +30,4 @@ export function useSSR(initialI18nStore, initialLanguage, props = {}) {
     i18n.changeLanguage(initialLanguage);
     i18n.initializedLanguageOnce = true;
   }
-}
+};

package/src/useTranslation.js

@@ -1,6 +1,13 @@
 import { useState, useEffect, useContext, useRef, useCallback } from 'react';
 import { getI18n, getDefaults, ReportNamespaces, I18nContext } from './context.js';
-import { warnOnce, loadNamespaces, loadLanguages, hasLoadedNamespace } from './utils.js';
+import {
+  warnOnce,
+  loadNamespaces,
+  loadLanguages,
+  hasLoadedNamespace,
+  isString,
+  isObject,
+} from './utils.js';
 
 const usePrevious = (value, ignore) => {
   const ref = useRef();
@@ -10,20 +17,18 @@ const usePrevious = (value, ignore) => {
   return ref.current;
 };
 
-function alwaysNewT(i18n, language, namespace, keyPrefix) {
-  return i18n.getFixedT(language, namespace, keyPrefix);
-}
+const alwaysNewT = (i18n, language, namespace, keyPrefix) =>
+  i18n.getFixedT(language, namespace, keyPrefix);
 
-function useMemoizedT(i18n, language, namespace, keyPrefix) {
-  return useCallback(alwaysNewT(i18n, language, namespace, keyPrefix), [
+const useMemoizedT = (i18n, language, namespace, keyPrefix) =>
+  useCallback(alwaysNewT(i18n, language, namespace, keyPrefix), [
     i18n,
     language,
     namespace,
     keyPrefix,
   ]);
-}
 
-export function useTranslation(ns, props = {}) {
+export const useTranslation = (ns, props = {}) => {
   // assert we have the needed i18nInstance
   const { i18n: i18nFromProps } = props;
   const { i18n: i18nFromContext, defaultNS: defaultNSFromContext } = useContext(I18nContext) || {};
@@ -32,12 +37,8 @@ export function useTranslation(ns, props = {}) {
   if (!i18n) {
     warnOnce('You will need to pass in an i18next instance by using initReactI18next');
     const notReadyT = (k, optsOrDefaultValue) => {
-      if (typeof optsOrDefaultValue === 'string') return optsOrDefaultValue;
-      if (
-        optsOrDefaultValue &&
-        typeof optsOrDefaultValue === 'object' &&
-        typeof optsOrDefaultValue.defaultValue === 'string'
-      )
+      if (isString(optsOrDefaultValue)) return optsOrDefaultValue;
+      if (isObject(optsOrDefaultValue) && isString(optsOrDefaultValue.defaultValue))
         return optsOrDefaultValue.defaultValue;
       return Array.isArray(k) ? k[k.length - 1] : k;
     };
@@ -58,7 +59,7 @@ export function useTranslation(ns, props = {}) {
 
   // prepare having a namespace
   let namespaces = ns || defaultNSFromContext || (i18n.options && i18n.options.defaultNS);
-  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  namespaces = isString(namespaces) ? [namespaces] : namespaces || ['translation'];
 
   // report namespaces as used
   if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
@@ -114,9 +115,9 @@ export function useTranslation(ns, props = {}) {
       setT(getNewT);
     }
 
-    function boundReset() {
+    const boundReset = () => {
       if (isMounted.current) setT(getNewT);
-    }
+    };
 
     // bind events to trigger change, like languageChanged
     if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
@@ -161,4 +162,4 @@ export function useTranslation(ns, props = {}) {
       loadNamespaces(i18n, namespaces, () => resolve());
     }
   });
-}
+};

package/src/utils.js

@@ -1,14 +1,16 @@
+// Do not use arrow function here as it will break optimizations of arguments
 export function warn(...args) {
   if (console && console.warn) {
-    if (typeof args[0] === 'string') args[0] = `react-i18next:: ${args[0]}`;
+    if (isString(args[0])) args[0] = `react-i18next:: ${args[0]}`;
     console.warn(...args);
   }
 }
 
 const alreadyWarned = {};
+// Do not use arrow function here as it will break optimizations of arguments
 export function warnOnce(...args) {
-  if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
-  if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
+  if (isString(args[0]) && alreadyWarned[args[0]]) return;
+  if (isString(args[0])) alreadyWarned[args[0]] = new Date();
   warn(...args);
 }
 
@@ -16,7 +18,7 @@ export function warnOnce(...args) {
 //
 // export function deprecated(...args) {
 //   if (process && process.env && (!process.env.NODE_ENV || process.env.NODE_ENV === 'development')) {
-//     if (typeof args[0] === 'string') args[0] = `deprecation warning -> ${args[0]}`;
+//     if (isString(args[0])) args[0] = `deprecation warning -> ${args[0]}`;
 //     warnOnce(...args);
 //   }
 // }
@@ -37,22 +39,22 @@ const loadedClb = (i18n, cb) => () => {
   }
 };
 
-export function loadNamespaces(i18n, ns, cb) {
+export const loadNamespaces = (i18n, ns, cb) => {
   i18n.loadNamespaces(ns, loadedClb(i18n, cb));
-}
+};
 
 // should work with I18NEXT >= v22.5.0
-export function loadLanguages(i18n, lng, ns, cb) {
+export const loadLanguages = (i18n, lng, ns, cb) => {
   // eslint-disable-next-line no-param-reassign
-  if (typeof ns === 'string') ns = [ns];
+  if (isString(ns)) ns = [ns];
   ns.forEach((n) => {
     if (i18n.options.ns.indexOf(n) < 0) i18n.options.ns.push(n);
   });
   i18n.loadLanguages(lng, loadedClb(i18n, cb));
-}
+};
 
 // WAIT A LITTLE FOR I18NEXT BEING UPDATED IN THE WILD, before removing this old i18next version support
-function oldI18nextHasLoadedNamespace(ns, i18n, options = {}) {
+const oldI18nextHasLoadedNamespace = (ns, i18n, options = {}) => {
   const lng = i18n.languages[0];
   const fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
   const lastLng = i18n.languages[i18n.languages.length - 1];
@@ -91,9 +93,9 @@ function oldI18nextHasLoadedNamespace(ns, i18n, options = {}) {
   if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
 
   return false;
-}
+};
 
-export function hasLoadedNamespace(ns, i18n, options = {}) {
+export const hasLoadedNamespace = (ns, i18n, options = {}) => {
   if (!i18n.languages || !i18n.languages.length) {
     warnOnce('i18n.languages were undefined or empty', i18n.languages);
     return true;
@@ -120,12 +122,13 @@ export function hasLoadedNamespace(ns, i18n, options = {}) {
         return false;
     },
   });
-}
+};
 
-export function getDisplayName(Component) {
-  return (
-    Component.displayName ||
-    Component.name ||
-    (typeof Component === 'string' && Component.length > 0 ? Component : 'Unknown')
-  );
-}
+export const getDisplayName = (Component) =>
+  Component.displayName ||
+  Component.name ||
+  (isString(Component) && Component.length > 0 ? Component : 'Unknown');
+
+export const isString = (obj) => typeof obj === 'string';
+
+export const isObject = (obj) => typeof obj === 'object' && obj !== null;

package/src/withSSR.js

@@ -3,8 +3,8 @@ import { useSSR } from './useSSR.js';
 import { composeInitialProps } from './context.js';
 import { getDisplayName } from './utils.js';
 
-export function withSSR() {
-  return function Extend(WrappedComponent) {
+export const withSSR = () =>
+  function Extend(WrappedComponent) {
     function I18nextWithSSR({ initialI18nStore, initialLanguage, ...rest }) {
       useSSR(initialI18nStore, initialLanguage);
 
@@ -19,4 +19,3 @@ export function withSSR() {
 
     return I18nextWithSSR;
   };
-}

package/src/withTranslation.js

@@ -2,8 +2,8 @@ import { createElement, forwardRef as forwardRefReact } from 'react';
 import { useTranslation } from './useTranslation.js';
 import { getDisplayName } from './utils.js';
 
-export function withTranslation(ns, options = {}) {
-  return function Extend(WrappedComponent) {
+export const withTranslation = (ns, options = {}) =>
+  function Extend(WrappedComponent) {
     function I18nextWithTranslation({ forwardedRef, ...rest }) {
       const [t, i18n, ready] = useTranslation(ns, { ...rest, keyPrefix: options.keyPrefix });
 
@@ -33,4 +33,3 @@ export function withTranslation(ns, options = {}) {
 
     return options.withRef ? forwardRefReact(forwardRef) : I18nextWithTranslation;
   };
-}