i18next@25 (#95)

Author: igorkamyshev

.changeset/honest-panthers-glow.md

@@ -0,0 +1,5 @@
+---
+'@withease/i18next': major
+---
+
+Support i18next@25

package.json

@@ -24,7 +24,7 @@
     "effector-vue": "23.0.0",
     "estree-walker": "^3.0.3",
     "glob": "^8.0.3",
-    "i18next": "24.0.0",
+    "i18next": "25.0.0",
     "markdown": "^0.5.0",
     "playwright": "^1.32.2",
     "prettier": "^2.6.2",

packages/i18next/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "peerDependencies": {
     "effector": "^22.5.0 || ^23.0.0",
-    "i18next": "^23.0.0 || ^24.0.0"
+    "i18next": "^23.0.0 || ^24.0.0 || ^25.0.0"
   },
   "scripts": {
     "test:run": "vitest run --typecheck",
@@ -35,7 +35,7 @@
   "size-limit": [
     {
       "path": "./dist/i18next.js",
-      "limit": "1.26 kB"
+      "limit": "1.33 kB"
     }
   ]
 }

packages/i18next/src/integration.ts

@@ -176,7 +176,13 @@ export function createI18nextIntegration({
   ): Store<string> {
     return combine(
       { t: $t, variables: combine(variables ?? {}) },
-      ({ t, variables }) => t(key, variables) ?? key
+      ({ t, variables }) =>
+        t(
+          key,
+          // since i18next@25 t-function mutates variables object,
+          // so we spread it to avoid mutating original object
+          { ...variables }
+        ) ?? key
     );
   }
 

packages/i18next/src/translated.test.ts

@@ -27,6 +27,35 @@ describe('integration.translated', () => {
 
       expect(scope.getState($result)).toBe('valueOne');
     });
+
+    test('supports simple key and language change', async () => {
+      const instance = createInstance({
+        resources: {
+          th: { common: { key: 'valueOne' } },
+          en: { common: { key: 'valueTwo' } },
+        },
+        lng: 'th',
+      });
+
+      const setup = createEvent();
+
+      const { translated, changeLanguageFx } = createI18nextIntegration({
+        instance,
+        setup,
+      });
+
+      const $result = translated('common:key');
+
+      const scope = fork();
+
+      await allSettled(setup, { scope });
+
+      expect(scope.getState($result)).toBe('valueOne');
+
+      await allSettled(changeLanguageFx, { scope, params: 'en' });
+
+      expect(scope.getState($result)).toBe('valueTwo');
+    });
   });
 
   describe('overload: template literal', () => {
@@ -87,5 +116,40 @@ describe('integration.translated', () => {
 
       expect(scope.getState($result)).toBe('valueOne kek');
     });
+
+    test('changes after language changed', async () => {
+      const instance = createInstance({
+        resources: {
+          th: { common: { key: 'valueOne {{name}}' } },
+          en: { common: { key: 'valueTwo {{name}}' } },
+        },
+        lng: 'th',
+      });
+
+      const setup = createEvent();
+
+      const { translated, changeLanguageFx } = createI18nextIntegration({
+        instance,
+        setup,
+      });
+
+      const $name = createStore('wow');
+
+      const $result = translated('common:key', { name: $name });
+
+      const scope = fork();
+
+      await allSettled(setup, { scope });
+
+      expect(scope.getState($result)).toBe('valueOne wow');
+
+      await allSettled(changeLanguageFx, { scope, params: 'en' });
+
+      expect(scope.getState($result)).toBe('valueTwo wow');
+
+      await allSettled($name, { scope, params: 'kek' });
+
+      expect(scope.getState($result)).toBe('valueTwo kek');
+    });
   });
 });