@snack-uikit/locale 0.15.2-preview-69fcfa33.0 → 0.15.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.15.2 (2025-10-06)</small>
+
+* feat(PDS-2843): add interpolation to useLocale ([dfd0a2e](https://github.com/cloud-ru-tech/snack-uikit/commit/dfd0a2e))
+
+
+
+
+
 ## 0.15.1 (2025-05-28)
 
 

package/dist/cjs/components/LocaleProvider/LocaleProvider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Dictionary, DottedTranslationKey, ExtendedDictionary, LocaleDictionary, LocaleLang, Locales, OverrideLocales } from '../../types';
+import { Dictionary, DottedTranslationKey, ExtendedDictionary, InterpolationObject, LocaleDictionary, LocaleLang, Locales, OverrideLocales } from '../../types';
 export declare const DEFAULT_LANG = "en-GB";
 export type LocaleContextType<D extends Dictionary> = {
     lang: LocaleLang | string;
@@ -17,7 +17,7 @@ export type ContextOptions<D extends Dictionary> = {
     defaultLanguage?: LocaleLang;
 };
 type LocaleComponentName<D extends Dictionary> = keyof LocaleDictionary<D>;
-type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (key: DottedTranslationKey<D, T>) => string;
+type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (key: DottedTranslationKey<D, T>, interpolation?: InterpolationObject) => string;
 export declare function createLocaleContext<D extends Dictionary>({ extendedDictionary, defaultLanguage, }: ContextOptions<D>): {
     LocaleContext: import("react").Context<LocaleContextType<D>>;
     LocaleProvider: ({ lang, fallbackLang, overrideLocales, children }: LocaleProviderProps<D>) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/LocaleProvider/LocaleProvider.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
@@ -16,6 +15,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lodash_merge_1 = __importDefault(require("lodash.merge"));
 const react_1 = require("react");
 const locales_1 = require("../../locales");
+const interpolateTranslation_1 = require("../../utils/interpolateTranslation");
 exports.DEFAULT_LANG = 'en-GB';
 function mergeLocaleWithExtension(extension) {
   return (0, lodash_merge_1.default)({}, locales_1.LOCALES, extension);
@@ -72,7 +72,7 @@ function createLocaleContext(_ref) {
       }
       return localesByLang[componentName] || {};
     }, [componentName, localesByLang]);
-    const getLocaleText = (0, react_1.useCallback)(key => {
+    const getLocaleText = (0, react_1.useCallback)((key, interpolation) => {
       let translation = '';
       const complexKey = key.split('.');
       if (complexKey.length === 1) {
@@ -89,7 +89,7 @@ function createLocaleContext(_ref) {
         console.warn(`Snack-uikit: the '${key}' key is not found in the current locale '${lang}'.`);
         return key;
       }
-      return translation;
+      return (0, interpolateTranslation_1.interpolateTranslation)(translation, interpolation);
     }, [lang, locales]);
     return {
       t: getLocaleText,

package/dist/cjs/types.d.ts

@@ -10,3 +10,4 @@ export type Locales<D extends Dictionary> = Record<LocaleLang, LocaleDictionary<
 export type OverrideLocales<D extends Dictionary> = PartialDeep<Record<LocaleLang, LocaleDictionary<D>>>;
 export type DottedTranslationKey<D extends Dictionary, C extends keyof LocaleDictionary<D> | undefined = undefined> = C extends keyof LocaleDictionary<D> ? PathsToProps<LocaleDictionary<D>[C], string> : PathsToProps<LocaleDictionary<D>, string>;
 export type ExtendedDictionary<D> = Record<LocaleLang, D>;
+export type InterpolationObject = Record<string, string | number>;

package/dist/cjs/utils/__tests__/interpolateTranslation.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/utils/__tests__/interpolateTranslation.spec.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const vitest_1 = require("vitest");
+const interpolateTranslation_1 = require("../interpolateTranslation");
+(0, vitest_1.describe)('interpolateTranslation', () => {
+  (0, vitest_1.it)('replaces a single placeholder', () => {
+    const result = (0, interpolateTranslation_1.interpolateTranslation)('Hello there {{who}}!', {
+      who: 'General Kenobi'
+    });
+    (0, vitest_1.expect)(result).toBe('Hello there General Kenobi!');
+  });
+  (0, vitest_1.it)('replaces numbers correctly', () => {
+    const result = (0, interpolateTranslation_1.interpolateTranslation)('{{zero}}, {{three}}', {
+      zero: 0,
+      three: 3
+    });
+    (0, vitest_1.expect)(result).toBe('0, 3');
+  });
+  (0, vitest_1.it)('keeps placeholder intact when value is an empty string or undefined', () => {
+    const result = (0, interpolateTranslation_1.interpolateTranslation)('{{value}}, "{{toBeUndefined}}" and /{{toBeEmptyString}}/"', {
+      toBeEmptyString: '',
+      value: 'value'
+    });
+    (0, vitest_1.expect)(result).toBe('value, "{{toBeUndefined}}" and /{{toBeEmptyString}}/"');
+  });
+  (0, vitest_1.it)('returns original text when there are no placeholders', () => {
+    const result = (0, interpolateTranslation_1.interpolateTranslation)('No placeholders here', {
+      nothing: 'to replace'
+    });
+    (0, vitest_1.expect)(result).toBe('No placeholders here');
+  });
+});

package/dist/cjs/utils/interpolateTranslation.d.ts

@@ -0,0 +1,2 @@
+import { InterpolationObject } from '../types';
+export declare function interpolateTranslation(text: string, interpolation?: InterpolationObject): string;

package/dist/cjs/utils/interpolateTranslation.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.interpolateTranslation = interpolateTranslation;
+function interpolateTranslation(text, interpolation) {
+  if (!interpolation || Object.keys(interpolation).length === 0) {
+    return text;
+  }
+  return text.replace(/{{(.*?)}}/g, (match, p1) => {
+    const value = interpolation[p1];
+    return value !== undefined && value !== '' ? String(value) : match;
+  });
+}

package/dist/esm/components/LocaleProvider/LocaleProvider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Dictionary, DottedTranslationKey, ExtendedDictionary, LocaleDictionary, LocaleLang, Locales, OverrideLocales } from '../../types';
+import { Dictionary, DottedTranslationKey, ExtendedDictionary, InterpolationObject, LocaleDictionary, LocaleLang, Locales, OverrideLocales } from '../../types';
 export declare const DEFAULT_LANG = "en-GB";
 export type LocaleContextType<D extends Dictionary> = {
     lang: LocaleLang | string;
@@ -17,7 +17,7 @@ export type ContextOptions<D extends Dictionary> = {
     defaultLanguage?: LocaleLang;
 };
 type LocaleComponentName<D extends Dictionary> = keyof LocaleDictionary<D>;
-type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (key: DottedTranslationKey<D, T>) => string;
+type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (key: DottedTranslationKey<D, T>, interpolation?: InterpolationObject) => string;
 export declare function createLocaleContext<D extends Dictionary>({ extendedDictionary, defaultLanguage, }: ContextOptions<D>): {
     LocaleContext: import("react").Context<LocaleContextType<D>>;
     LocaleProvider: ({ lang, fallbackLang, overrideLocales, children }: LocaleProviderProps<D>) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/LocaleProvider/LocaleProvider.js

@@ -1,8 +1,8 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import merge from 'lodash.merge';
 import { createContext, useCallback, useContext, useMemo } from 'react';
 import { LOCALES } from '../../locales';
+import { interpolateTranslation } from '../../utils/interpolateTranslation';
 export const DEFAULT_LANG = 'en-GB';
 function mergeLocaleWithExtension(extension) {
     return merge({}, LOCALES, extension);
@@ -39,7 +39,7 @@ export function createLocaleContext({ extendedDictionary, defaultLanguage = DEFA
             }
             return (localesByLang[componentName] || {});
         }, [componentName, localesByLang]);
-        const getLocaleText = useCallback(key => {
+        const getLocaleText = useCallback((key, interpolation) => {
             let translation = '';
             const complexKey = key.split('.');
             if (complexKey.length === 1) {
@@ -57,7 +57,7 @@ export function createLocaleContext({ extendedDictionary, defaultLanguage = DEFA
                 console.warn(`Snack-uikit: the '${key}' key is not found in the current locale '${lang}'.`);
                 return key;
             }
-            return translation;
+            return interpolateTranslation(translation, interpolation);
         }, [lang, locales]);
         return {
             t: getLocaleText,

package/dist/esm/types.d.ts

@@ -10,3 +10,4 @@ export type Locales<D extends Dictionary> = Record<LocaleLang, LocaleDictionary<
 export type OverrideLocales<D extends Dictionary> = PartialDeep<Record<LocaleLang, LocaleDictionary<D>>>;
 export type DottedTranslationKey<D extends Dictionary, C extends keyof LocaleDictionary<D> | undefined = undefined> = C extends keyof LocaleDictionary<D> ? PathsToProps<LocaleDictionary<D>[C], string> : PathsToProps<LocaleDictionary<D>, string>;
 export type ExtendedDictionary<D> = Record<LocaleLang, D>;
+export type InterpolationObject = Record<string, string | number>;

package/dist/esm/utils/__tests__/interpolateTranslation.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/__tests__/interpolateTranslation.spec.js

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { interpolateTranslation } from '../interpolateTranslation';
+describe('interpolateTranslation', () => {
+    it('replaces a single placeholder', () => {
+        const result = interpolateTranslation('Hello there {{who}}!', { who: 'General Kenobi' });
+        expect(result).toBe('Hello there General Kenobi!');
+    });
+    it('replaces numbers correctly', () => {
+        const result = interpolateTranslation('{{zero}}, {{three}}', {
+            zero: 0,
+            three: 3,
+        });
+        expect(result).toBe('0, 3');
+    });
+    it('keeps placeholder intact when value is an empty string or undefined', () => {
+        const result = interpolateTranslation('{{value}}, "{{toBeUndefined}}" and /{{toBeEmptyString}}/"', {
+            toBeEmptyString: '',
+            value: 'value',
+        });
+        expect(result).toBe('value, "{{toBeUndefined}}" and /{{toBeEmptyString}}/"');
+    });
+    it('returns original text when there are no placeholders', () => {
+        const result = interpolateTranslation('No placeholders here', { nothing: 'to replace' });
+        expect(result).toBe('No placeholders here');
+    });
+});

package/dist/esm/utils/interpolateTranslation.d.ts

@@ -0,0 +1,2 @@
+import { InterpolationObject } from '../types';
+export declare function interpolateTranslation(text: string, interpolation?: InterpolationObject): string;

package/dist/esm/utils/interpolateTranslation.js

@@ -0,0 +1,9 @@
+export function interpolateTranslation(text, interpolation) {
+    if (!interpolation || Object.keys(interpolation).length === 0) {
+        return text;
+    }
+    return text.replace(/{{(.*?)}}/g, (match, p1) => {
+        const value = interpolation[p1];
+        return value !== undefined && value !== '' ? String(value) : match;
+    });
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Locale",
-  "version": "0.15.2-preview-69fcfa33.0",
+  "version": "0.15.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,5 +41,5 @@
   "devDependencies": {
     "@types/lodash.merge": "4.6.9"
   },
-  "gitHead": "29427722aa93f2a800d130b6ab3db58fee5901c3"
+  "gitHead": "6cb0fa075cbf0ea8966672deb05dcbfa65e13326"
 }

package/src/components/LocaleProvider/LocaleProvider.tsx

@@ -1,4 +1,3 @@
-'use client'
 import merge from 'lodash.merge';
 import { createContext, ReactNode, useCallback, useContext, useMemo } from 'react';
 
@@ -7,12 +6,14 @@ import {
   Dictionary,
   DottedTranslationKey,
   ExtendedDictionary,
+  InterpolationObject,
   LocaleDictionary,
   LocaleLang,
   Locales,
   OverrideLocales,
   TranslatedEntity,
 } from '../../types';
+import { interpolateTranslation } from '../../utils/interpolateTranslation';
 
 export const DEFAULT_LANG = 'en-GB';
 
@@ -44,6 +45,7 @@ type LocaleComponentName<D extends Dictionary> = keyof LocaleDictionary<D>;
 
 type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (
   key: DottedTranslationKey<D, T>,
+  interpolation?: InterpolationObject,
 ) => string;
 
 export function createLocaleContext<D extends Dictionary>({
@@ -104,7 +106,7 @@ export function createLocaleContext<D extends Dictionary>({
     }, [componentName, localesByLang]);
 
     const getLocaleText: GetLocaleText<D, C> = useCallback(
-      key => {
+      (key, interpolation) => {
         let translation = '';
 
         const complexKey = key.split('.');
@@ -129,7 +131,7 @@ export function createLocaleContext<D extends Dictionary>({
           return key;
         }
 
-        return translation;
+        return interpolateTranslation(translation, interpolation);
       },
       [lang, locales],
     );

package/src/types.ts

@@ -23,3 +23,5 @@ export type DottedTranslationKey<
   : PathsToProps<LocaleDictionary<D>, string>;
 
 export type ExtendedDictionary<D> = Record<LocaleLang, D>;
+
+export type InterpolationObject = Record<string, string | number>;

package/src/utils/__tests__/interpolateTranslation.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+
+import { interpolateTranslation } from '../interpolateTranslation';
+
+describe('interpolateTranslation', () => {
+  it('replaces a single placeholder', () => {
+    const result = interpolateTranslation('Hello there {{who}}!', { who: 'General Kenobi' });
+    expect(result).toBe('Hello there General Kenobi!');
+  });
+
+  it('replaces numbers correctly', () => {
+    const result = interpolateTranslation('{{zero}}, {{three}}', {
+      zero: 0,
+      three: 3,
+    });
+    expect(result).toBe('0, 3');
+  });
+
+  it('keeps placeholder intact when value is an empty string or undefined', () => {
+    const result = interpolateTranslation('{{value}}, "{{toBeUndefined}}" and /{{toBeEmptyString}}/"', {
+      toBeEmptyString: '',
+      value: 'value',
+    });
+    expect(result).toBe('value, "{{toBeUndefined}}" and /{{toBeEmptyString}}/"');
+  });
+
+  it('returns original text when there are no placeholders', () => {
+    const result = interpolateTranslation('No placeholders here', { nothing: 'to replace' });
+    expect(result).toBe('No placeholders here');
+  });
+});

package/src/utils/interpolateTranslation.ts

@@ -0,0 +1,12 @@
+import { InterpolationObject } from '../types';
+
+export function interpolateTranslation(text: string, interpolation?: InterpolationObject) {
+  if (!interpolation || Object.keys(interpolation).length === 0) {
+    return text;
+  }
+
+  return text.replace(/{{(.*?)}}/g, (match, p1) => {
+    const value = interpolation[p1];
+    return value !== undefined && value !== '' ? String(value) : match;
+  });
+}