Expose instead of

igorkamyshev · Apr 8, 2024 · 6fbe517 · 6fbe517
1 parent 60af5db
commit 6fbe517
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 31 deletions.
diff --git a/.changeset/poor-carrots-argue.md b/.changeset/poor-carrots-argue.md
@@ -2,4 +2,4 @@
 '@withease/i18next': minor
 ---
 
-Add _Store_ `$language` and _EventCallable_ `changeLanguage` to integration
+Add _Store_ `$language` and _Effect_ `changeLanguageFx` to integration
diff --git a/apps/website/docs/i18next/index.md b/apps/website/docs/i18next/index.md
@@ -157,19 +157,19 @@ const { $language } = createI18nextIntegration({
 });
 ```
 
-#### `changeLanguage` <Badge text="since v23.2.0" />
+#### `changeLanguageFx` <Badge text="since v23.2.0" />
 
-An [_EventCallable_](https://effector.dev/en/api/effector/event/) that can be called with a language code to change the current language.
+An [_Effect_](https://effector.dev/en/api/effector/effect/) that can be called with a language code to change the current language.
 
 ```ts
-const { changeLanguage } = createI18nextIntegration({
+const { changeLanguageFx } = createI18nextIntegration({
   /* ... */
 });
 
 sample({
   clock: someButtonClicked,
   fn: () => 'en',
-  target: changeLanguage,
+  target: changeLanguageFx,
 });
 ```
 

diff --git a/packages/i18next/src/integration.ts b/packages/i18next/src/integration.ts
@@ -1,7 +1,7 @@
 import {
   type Event,
   type Store,
-  type EventCallable,
+  type Effect,
   attach,
   combine,
   createEffect,
@@ -30,7 +30,7 @@ type I18nextIntegration = {
   translated: Translated;
   $isReady: Store<boolean>;
   $language: Store<string | null>;
-  changeLanguage: EventCallable<string>;
+  changeLanguageFx: Effect<string, void, unknown>;
   reporting: {
     missingKey: Event<MissinKeyReport>;
   };
@@ -85,7 +85,16 @@ export function createI18nextIntegration({
 
   const $language = createStore<string | null>(null, { serialize: 'ignore' });
 
-  const changeLanguage = createEvent<string>();
+  const changeLanguageFx = attach({
+    source: $instance,
+    async effect(instance, nextLangauge: string) {
+      if (!instance) {
+        return;
+      }
+
+      await instance.changeLanguage(nextLangauge);
+    },
+  });
 
   // -- End of public API
 
@@ -107,19 +116,6 @@ export function createI18nextIntegration({
     target: $language,
   });
 
-  const changeLanguageFx = attach({
-    source: $instance,
-    async effect(instance, nextLangauge: string) {
-      if (!instance) {
-        return;
-      }
-
-      await instance.changeLanguage(nextLangauge);
-    },
-  });
-
-  sample({ clock: changeLanguage, target: changeLanguageFx });
-
   sample({
     clock: instanceInitialized,
     fn: () => true,
@@ -261,7 +257,7 @@ export function createI18nextIntegration({
     $isReady,
     $t,
     $language,
-    changeLanguage,
+    changeLanguageFx,
     translated: (firstArg, ...args: any[]) => {
       if (typeof firstArg === 'string') {
         return translatedWithVariables(firstArg, args[0]);

diff --git a/packages/i18next/src/language.test.ts b/packages/i18next/src/language.test.ts
@@ -4,7 +4,7 @@ import { createInstance } from 'i18next';
 
 import { createI18nextIntegration } from './integration';
 
-describe('integration.$language/changeLanguage', () => {
+describe('integration.$language/changeLanguageFx', () => {
   test('change language', async () => {
     const setup = createEvent();
 
@@ -16,10 +16,11 @@ describe('integration.$language/changeLanguage', () => {
       lng: 'th',
     });
 
-    const { $language, changeLanguage, translated } = createI18nextIntegration({
-      instance,
-      setup,
-    });
+    const { $language, changeLanguageFx, translated } =
+      createI18nextIntegration({
+        instance,
+        setup,
+      });
 
     const $val = translated('common:key');
 
@@ -34,7 +35,7 @@ describe('integration.$language/changeLanguage', () => {
     expect(scope.getState($language)).toBe('th');
     expect(scope.getState($val)).toBe('th value');
 
-    await allSettled(changeLanguage, { scope, params: 'en' });
+    await allSettled(changeLanguageFx, { scope, params: 'en' });
 
     // After change
     expect(scope.getState($language)).toBe('en');

diff --git a/packages/i18next/src/t.test.ts b/packages/i18next/src/t.test.ts
@@ -118,7 +118,7 @@ describe('integration.$t', () => {
 
     const setup = createEvent();
 
-    const { $t } = createI18nextIntegration({
+    const { $t, changeLanguageFx } = createI18nextIntegration({
       instance,
       setup,
     });
@@ -131,7 +131,7 @@ describe('integration.$t', () => {
 
     expect(scope.getState($result)).toBe('Sawa dee');
 
-    instance.changeLanguage('en');
+    await allSettled(changeLanguageFx, { params: 'en', scope });
 
     await allSettled(scope);
     expect(scope.getState($result)).toBe('Hello');
@@ -240,7 +240,7 @@ describe('integration.$t', () => {
 
     await allSettled(teardown, { scope });
 
-    instance.changeLanguage('en');
+    await allSettled(changeLanguageFx, { params: 'en', scope });
 
     await allSettled(scope);
     expect(scope.getState($result)).toBe('Sawa dee');