Effector 23

.changeset/cool-bags-whisper.md

@@ -0,0 +1,5 @@
+---
+'@withease/i18next': patch
+---
+
+Add forgotten allowance for usage with i18next 23 in peerDependencies

.changeset/tame-cows-begin.md

@@ -0,0 +1,6 @@
+---
+'@withease/i18next': minor
+'@withease/web-api': minor
+---
+
+Allow to use with Effector 23

apps/website/docs/web-api/media_query.live.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { trackMediaQuery } from '@withease/web-api';
 import { createEvent } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
@@ -10,7 +10,7 @@ const mq = trackMediaQuery('(max-width: 320px)', {
   setup: appStarted,
 });
 
-const matchesSmall = useStore(mq.$matches);
+const matchesSmall = useUnit(mq.$matches);
 
 onMounted(appStarted);
 </script>

apps/website/docs/web-api/network_status.live.vue

@@ -1,15 +1,14 @@
 <script setup>
 import { trackNetworkStatus } from '@withease/web-api';
 import { createEvent } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
 
 const { $online, $offline } = trackNetworkStatus({ setup: appStarted });
 
-const online = useStore($online);
-const offline = useStore($offline);
+const [online, offline] = useUnit([$online, $offline]);
 
 onMounted(appStarted);
 </script>

apps/website/docs/web-api/page_visibility.live.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { trackPageVisibility } from '@withease/web-api';
 import { createEvent, createStore } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
@@ -12,7 +12,7 @@ const $history = createStore([])
   .on(visible, (state) => [...state, { at: new Date(), action: 'visible' }])
   .on(hidden, (state) => [...state, { at: new Date(), action: 'hidden' }]);
 
-const history = useStore($history);
+const history = useUnit($history);
 
 onMounted(appStarted);
 </script>

apps/website/docs/web-api/preferred_languages.live.vue

@@ -1,14 +1,14 @@
 <script setup>
 import { trackPreferredLanguages } from '@withease/web-api';
 import { createEvent } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
 
 const { $languages } = trackPreferredLanguages({ setup: appStarted });
 
-const languages = useStore($languages);
+const languages = useUnit($languages);
 
 onMounted(appStarted);
 </script>

apps/website/docs/web-api/screen_orientation.live.vue

@@ -1,15 +1,14 @@
 <script setup>
 import { trackScreenOrientation } from '@withease/web-api';
 import { createEvent } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
 
 const { $type, $angle } = trackScreenOrientation({ setup: appStarted });
 
-const type = useStore($type);
-const angle = useStore($angle);
+const [type, angle] = useUnit([$type, $angle]);
 
 onMounted(appStarted);
 </script>

package.json

@@ -37,8 +37,8 @@
     "@typescript-eslint/parser": "5.62.0",
     "@vitest/ui": "0.34.4",
     "bytes-iec": "^3.1.1",
-    "effector": "^22.8.6",
-    "effector-vue": "^22.2.0",
+    "effector": "23.0.0",
+    "effector-vue": "23.0.0",
     "eslint": "8.46.0",
     "glob": "^8.0.3",
     "i18next": "23.0.0",

packages/i18next/package.json

@@ -3,7 +3,7 @@
   "version": "23.0.0",
   "type": "commonjs",
   "peerDependencies": {
-    "effector": "^22.5.0",
-    "i18next": "^22.4.10"
+    "effector": "^22.5.0 || ^23.0.0",
+    "i18next": "^22.4.10 || ^23.0.0"
   }
 }

packages/i18next/src/integration.ts

@@ -51,17 +51,21 @@ export function createI18nextIntegration({
   // -- Parse options
   const $instance: Store<i18n | null> = is.store(instance)
     ? instance
-    : createStore(instance as i18n | null);
+    : createStore(instance as i18n | null, {
+        serialize: 'ignore',
+        name: '$instance',
+      });
 
   const destroy = teardown ?? createEvent();
 
   // -- Internal API
 
-  const $derivedT = $instance.map((i18next): TFunction | null =>
+  const $derivedT = combine($instance, (i18next): TFunction | null =>
     i18next ? i18next.t.bind(i18next) : null
   );
   const $stanaloneT = createStore<TFunction | null>(null, {
     serialize: 'ignore',
+    name: '$stanaloneT',
   });
 
   // -- Public API
@@ -110,7 +114,7 @@ export function createI18nextIntegration({
 
         const finalKey = result.join('');
 
-        return t(finalKey);
+        return t(finalKey) ?? finalKey;
       }
     );
   }
@@ -121,7 +125,7 @@ export function createI18nextIntegration({
   ): Store<string> {
     return combine(
       { t: $t, variables: combine(variables ?? {}) },
-      ({ t, variables }) => t(key, variables)
+      ({ t, variables }) => t(key, variables) ?? key
     );
   }
 
@@ -155,10 +159,12 @@ export function createI18nextIntegration({
 
   const $contextChangeListener = createStore<(() => void) | null>(null, {
     serialize: 'ignore',
+    name: '$contextChangeListener',
   });
 
   const $missingKeyListener = createStore<(() => void) | null>(null, {
     serialize: 'ignore',
+    name: '$missingKeyListener',
   });
 
   const setupListenersFx = createEffect((i18next: i18n) => {

packages/i18next/src/reporting.test.ts

@@ -23,7 +23,7 @@ describe('integration.reporting.missingKey', () => {
 
     reporting.missingKey.watch(listener);
 
-    const $result = $t.map((t) => t('common:key'));
+    const $result = $t.map((t) => t('common:key') ?? null);
 
     const scope = fork();
 
@@ -51,7 +51,7 @@ describe('integration.reporting.missingKey', () => {
 
     reporting.missingKey.watch(listener);
 
-    const $result = $t.map((t) => t('common:other_key'));
+    const $result = $t.map((t) => t('common:other_key') ?? null);
 
     const scope = fork();
 

packages/i18next/src/t.test.ts

@@ -13,7 +13,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:foo'));
+    const $result = $t.map((t) => t('common:foo') ?? null);
 
     const scope = fork();
 
@@ -28,7 +28,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:foo'));
+    const $result = $t.map((t) => t('common:foo') ?? null);
 
     const scope = fork();
 
@@ -50,7 +50,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:foo'));
+    const $result = $t.map((t) => t('common:foo') ?? null);
 
     const scope = fork();
 
@@ -72,7 +72,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:foo'));
+    const $result = $t.map((t) => t('common:foo') ?? null);
 
     const scope = fork();
 
@@ -95,7 +95,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:foo'));
+    const $result = $t.map((t) => t('common:foo') ?? null);
 
     const scope = fork();
 
@@ -123,7 +123,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:hello'));
+    const $result = $t.map((t) => t('common:hello') ?? null);
 
     const scope = fork();
 
@@ -149,7 +149,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:hello'));
+    const $result = $t.map((t) => t('common:hello') ?? null);
 
     const scope = fork();
 
@@ -174,7 +174,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:hello'));
+    const $result = $t.map((t) => t('common:hello') ?? null);
 
     const scope = fork();
 
@@ -199,7 +199,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:hello'));
+    const $result = $t.map((t) => t('common:hello') ?? null);
 
     const scope = fork();
 
@@ -230,7 +230,7 @@ describe('integration.$t', () => {
       teardown,
     });
 
-    const $result = $t.map((t) => t('common:hello'));
+    const $result = $t.map((t) => t('common:hello') ?? null);
 
     const scope = fork();
 
@@ -260,7 +260,7 @@ describe('integration.$t', () => {
       teardown,
     });
 
-    const $result = $t.map((t) => t('common:hello'));
+    const $result = $t.map((t) => t('common:hello') ?? null);
 
     const scope = fork();
 
@@ -289,7 +289,7 @@ describe('integration.$t', () => {
       setup,
     });
 
-    const $result = $t.map((t) => t('common:hello'));
+    const $result = $t.map((t) => t('common:hello') ?? null);
 
     const scope = fork();
     expect(scope.getState($result)).toBe('hello');

packages/web-api/package.json

@@ -3,6 +3,6 @@
   "version": "1.0.1",
   "type": "commonjs",
   "peerDependencies": {
-    "effector": "^22.5.0"
+    "effector": "^22.5.0 || ^23.0.0"
   }
 }