react-i18next 16.5.7 → 16.6.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 16.6.0
+
+- warn when `t` is called before `ready` with `useSuspense: false` [1896](https://github.com/i18next/react-i18next/issues/1896)
+- type-safe `values` prop on `<Trans />` component — interpolation variables are now inferred from the translation string when custom types are configured [1772](https://github.com/i18next/react-i18next/issues/1772)
+
+### 16.5.8
+
+- A selector function cannot be resolved without an i18n instance... returning empty string is safer than leaking the raw function reference. [1907](https://github.com/i18next/react-i18next/issues/1907)
+
 ### 16.5.7
 
 - fix: `<Trans>` component with `enableSelector: true` does not support multiple selectors for fallbacks [1907](https://github.com/i18next/react-i18next/issues/1907)

package/TransWithoutContext.d.ts

@@ -4,9 +4,11 @@ import type {
   ApplyTarget,
   ConstrainTarget,
   GetSource,
+  InterpolationMap,
   ParseKeys,
   Namespace,
   SelectorFn,
+  TFunctionReturn,
   TypeOptions,
   TOptions,
   TFunction,
@@ -15,6 +17,10 @@ import * as React from 'react';
 
 type _DefaultNamespace = TypeOptions['defaultNS'];
 type _EnableSelector = TypeOptions['enableSelector'];
+type _KeySeparator = TypeOptions['keySeparator'];
+type _AppendKeyPrefix<Key, KPrefix> = KPrefix extends string
+  ? `${KPrefix}${_KeySeparator}${Key & string}`
+  : Key;
 
 type TransChild = React.ReactNode | Record<string, unknown>;
 type $NoInfer<T> = [T][T extends T ? 0 : never];
@@ -37,7 +43,7 @@ export type TransProps<
   ns?: Ns;
   parent?: string | React.ComponentType<any> | null; // used in React.createElement if not null
   tOptions?: TOpt;
-  values?: {};
+  values?: InterpolationMap<TFunctionReturn<Ns, _AppendKeyPrefix<Key, KPrefix>, TOpt>>;
   shouldUnescape?: boolean;
   t?: TFunction<Ns, KPrefix>;
 };
@@ -72,7 +78,7 @@ export interface TransSelectorProps<
   ns?: Ns;
   parent?: string | React.ComponentType<any> | null; // used in React.createElement if not null
   tOptions?: TOpt;
-  values?: {};
+  values?: Key extends (...args: any[]) => infer R ? InterpolationMap<R> : {};
   shouldUnescape?: boolean;
   t?: TFunction<Ns, KPrefix>;
 }
@@ -107,7 +113,8 @@ export type ErrorCode =
   | 'TRANS_NULL_VALUE'
   | 'TRANS_INVALID_OBJ'
   | 'TRANS_INVALID_VAR'
-  | 'TRANS_INVALID_COMPONENTS';
+  | 'TRANS_INVALID_COMPONENTS'
+  | 'USE_T_BEFORE_READY';
 
 export type ErrorMeta = {
   code: ErrorCode;

package/dist/amd/react-i18next.js

@@ -190,7 +190,7 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
     }
     return current;
   };
-  const getCleanedCode = code => code?.replace('_', '-');
+  const getCleanedCode = code => code?.replace(/_/g, '-');
   const consoleLogger = {
     type: 'logger',
     log(args) {
@@ -446,7 +446,16 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
     const {
       [PATH_KEY]: path
     } = selector(createProxy());
-    return path.join(opts?.keySeparator ?? '.');
+    const keySeparator = opts?.keySeparator ?? '.';
+    const nsSeparator = opts?.nsSeparator ?? ':';
+    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)}`;
+      }
+    }
+    return path.join(keySeparator);
   }
   const checkedLoadedFor = {};
   const shouldHandleAsObject = res => !isString$1(res) && typeof res !== 'boolean' && typeof res !== 'number';
@@ -519,6 +528,10 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
         ...opt
       });
       if (!Array.isArray(keys)) keys = [String(keys)];
+      keys = keys.map(k => typeof k === 'function' ? keysFromSelector(k, {
+        ...this.options,
+        ...opt
+      }) : String(k));
       const returnDetails = opt.returnDetails !== undefined ? opt.returnDetails : this.options.returnDetails;
       const keySeparator = opt.keySeparator !== undefined ? opt.keySeparator : this.options.keySeparator;
       const {
@@ -765,6 +778,10 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       let usedLng;
       let usedNS;
       if (isString$1(keys)) keys = [keys];
+      if (Array.isArray(keys)) keys = keys.map(k => typeof k === 'function' ? keysFromSelector(k, {
+        ...this.options,
+        ...opt
+      }) : k);
       keys.forEach(k => {
         if (this.isValidLookup(found)) return;
         const extracted = this.extractFromKey(k, opt);
@@ -1003,9 +1020,6 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       this.logger = baseLogger.create('pluralResolver');
       this.pluralRulesCache = {};
     }
-    addRule(lng, obj) {
-      this.rules[lng] = obj;
-    }
     clearCache() {
       this.pluralRulesCache = {};
     }
@@ -1025,7 +1039,7 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
           type
         });
       } catch (err) {
-        if (!Intl) {
+        if (typeof Intl === 'undefined') {
           this.logger.error('No Intl support, please use an Intl polyfill!');
           return dummyRule;
         }
@@ -1205,13 +1219,13 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       const handleHasOptions = (key, inheritedOptions) => {
         const sep = this.nestingOptionsSeparator;
         if (key.indexOf(sep) < 0) return key;
-        const c = key.split(new RegExp(`${sep}[ ]*{`));
+        const c = key.split(new RegExp(`${regexEscape(sep)}[ ]*{`));
         let optionsString = `{${c[1]}`;
         key = c[0];
         optionsString = this.interpolate(optionsString, clonedOptions);
         const matchedSingleQuotes = optionsString.match(/'/g);
         const matchedDoubleQuotes = optionsString.match(/"/g);
-        if ((matchedSingleQuotes?.length ?? 0) % 2 === 0 && !matchedDoubleQuotes || matchedDoubleQuotes.length % 2 !== 0) {
+        if ((matchedSingleQuotes?.length ?? 0) % 2 === 0 && !matchedDoubleQuotes || (matchedDoubleQuotes?.length ?? 0) % 2 !== 0) {
           optionsString = optionsString.replace(/'/g, '"');
         }
         try {
@@ -1689,6 +1703,23 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       }
     });
   };
+  const SUPPORT_NOTICE_KEY = '__i18next_supportNoticeShown';
+  const getSupportNoticeShown = () => typeof globalThis !== 'undefined' && !!globalThis[SUPPORT_NOTICE_KEY];
+  const setSupportNoticeShown = () => {
+    if (typeof globalThis !== 'undefined') globalThis[SUPPORT_NOTICE_KEY] = true;
+  };
+  const usesLocize = inst => {
+    if (inst?.modules?.backend?.name?.indexOf('Locize') > 0) return true;
+    if (inst?.modules?.backend?.constructor?.name?.indexOf('Locize') > 0) return true;
+    if (inst?.options?.backend?.backends) {
+      if (inst.options.backend.backends.some(b => b?.name?.indexOf('Locize') > 0 || b?.constructor?.name?.indexOf('Locize') > 0)) return true;
+    }
+    if (inst?.options?.backend?.projectId) return true;
+    if (inst?.options?.backend?.backendOptions) {
+      if (inst.options.backend.backendOptions.some(b => b?.projectId)) return true;
+    }
+    return false;
+  };
   class I18n extends EventEmitter {
     constructor(options = {}, callback) {
       super();
@@ -1741,6 +1772,10 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
       if (typeof this.options.overloadTranslationOptionHandler !== 'function') {
         this.options.overloadTranslationOptionHandler = defOpts.overloadTranslationOptionHandler;
       }
+      if (this.options.showSupportNotice !== false && !usesLocize(this) && !getSupportNoticeShown()) {
+        if (typeof console !== 'undefined' && typeof console.info !== 'undefined') console.info('🌐 i18next is made possible by our own product, Locize — consider powering your project with managed localization (AI, CDN, integrations): https://locize.com 💙');
+        setSupportNoticeShown();
+      }
       const createClassOnDemand = ClassOrObject => {
         if (!ClassOrObject) return null;
         if (typeof ClassOrObject === 'function') return new ClassOrObject();
@@ -2001,21 +2036,20 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
         o.lngs = o.lngs || fixedT.lngs;
         o.ns = o.ns || fixedT.ns;
         if (o.keyPrefix !== '') o.keyPrefix = o.keyPrefix || keyPrefix || fixedT.keyPrefix;
+        const selectorOpts = {
+          ...this.options,
+          ...o
+        };
+        if (typeof o.keyPrefix === 'function') o.keyPrefix = keysFromSelector(o.keyPrefix, selectorOpts);
         const keySeparator = this.options.keySeparator || '.';
         let resultKey;
         if (o.keyPrefix && Array.isArray(key)) {
           resultKey = key.map(k => {
-            if (typeof k === 'function') k = keysFromSelector(k, {
-              ...this.options,
-              ...opts
-            });
+            if (typeof k === 'function') k = keysFromSelector(k, selectorOpts);
             return `${o.keyPrefix}${keySeparator}${k}`;
           });
         } else {
-          if (typeof key === 'function') key = keysFromSelector(key, {
-            ...this.options,
-            ...opts
-          });
+          if (typeof key === 'function') key = keysFromSelector(key, selectorOpts);
           resultKey = o.keyPrefix ? `${o.keyPrefix}${keySeparator}${key}` : key;
         }
         return this.t(resultKey, o);
@@ -2156,7 +2190,19 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
         clone.store = new ResourceStore(clonedData, mergedOptions);
         clone.services.resourceStore = clone.store;
       }
-      if (options.interpolation) clone.services.interpolator = new Interpolator(mergedOptions);
+      if (options.interpolation) {
+        const defOpts = get();
+        const mergedInterpolation = {
+          ...defOpts.interpolation,
+          ...this.options.interpolation,
+          ...options.interpolation
+        };
+        const mergedForInterpolator = {
+          ...mergedOptions,
+          interpolation: mergedInterpolation
+        };
+        clone.services.interpolator = new Interpolator(mergedForInterpolator);
+      }
       clone.translator = new Translator(clone.services, mergedOptions);
       clone.translator.on('*', (event, ...args) => {
         clone.emit(event, ...args);
@@ -3465,7 +3511,12 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
   const notReadyT = (k, optsOrDefaultValue) => {
     if (isString(optsOrDefaultValue)) return optsOrDefaultValue;
     if (isObject(optsOrDefaultValue) && isString(optsOrDefaultValue.defaultValue)) return optsOrDefaultValue.defaultValue;
-    return Array.isArray(k) ? k[k.length - 1] : k;
+    if (typeof k === 'function') return '';
+    if (Array.isArray(k)) {
+      const last = k[k.length - 1];
+      return typeof last === 'function' ? '' : last;
+    }
+    return k;
   };
   const notReadySnapshot = {
     t: notReadyT,
@@ -3592,8 +3643,12 @@ define(['exports', 'react'], (function (exports, React) { 'use strict';
           wrapperLangRef.current = lang;
         }
       }
-      const arr = [t, i18nWrapper, ready];
-      arr.t = t;
+      const effectiveT = !ready && !useSuspense ? (...args) => {
+        warnOnce(i18n, 'USE_T_BEFORE_READY', 'useTranslation: t was called before ready. When using useSuspense: false, make sure to check the ready flag before using t.');
+        return t(...args);
+      } : t;
+      const arr = [effectiveT, i18nWrapper, ready];
+      arr.t = effectiveT;
       arr.i18n = i18nWrapper;
       arr.ready = ready;
       return arr;