Upgrade translation store

README.md

@@ -37,18 +37,21 @@ i18next.init({
   }
 });
 
-const i18n = createI18nStore(i18next);
-export default i18n;
+export const { i18n, t, isError, isLoading } = createI18nStore(i18next);
 ```
 
 `App.svelte`:
 ```svelte
 <script>
-  import i18n from './i18n.js';
+  import { i18n, t } from './i18n.js';
+
+  $: tKey = $t('key');
 </script>
 
 <div>
-    {$i18n.t('key')}
+  {$i18n.t('key')}
+  {$t('key')}
+  {tKey}
 </div>
 ```
 
@@ -93,11 +96,12 @@ export default () => createI18nStore(i18next);
 <script>
   import { getContext } from "svelte";
 
-  const i18n = getContext("i18n");
+  const { i18n, t, isError, isLoading } = getContext("i18n");
 </script>
 
 <div>
   <h1>{ $i18n.t("key") }</h1>
+  <h1>{ $t("key") }</h1>
 </div>
 ```
 

src/i18n.test.ts

@@ -1,4 +1,9 @@
-const storeMock = jest.fn(() => ({ i18n: "i18nWritableInstance" }));
+const storeMock = jest.fn(() => ({
+  i18n: "i18nWritableInstance",
+  t: "TFunctionWritableInstance",
+  isLoading: "BooleanWritableInstance",
+  isError: "BooleanWritableInstance",
+}));
 jest.mock("./translation-store", () => {
   return { I18NextTranslationStore: storeMock };
 });
@@ -13,9 +18,12 @@ describe("i18n module", () => {
       expect(storeMock).toBeCalled();
     });
 
-    it("should return Writable i18n instance", () => {
-      const store = createI18nStore(i18next);
-      expect(store).toEqual("i18nWritableInstance");
+    it("should return Writable i18n/t/isLoading/isError instance", () => {
+      const { i18n, t, isLoading, isError } = createI18nStore(i18next);
+      expect(i18n).toEqual("i18nWritableInstance");
+      expect(t).toEqual("TFunctionWritableInstance");
+      expect(isLoading).toEqual("BooleanWritableInstance");
+      expect(isError).toEqual("BooleanWritableInstance");
     });
   });
 });

src/i18n.ts

@@ -3,5 +3,10 @@ import { I18NextTranslationStore } from './translation-store';
 
 export const createI18nStore = (i18n: i18n) => {
     const i18nStore = new I18NextTranslationStore(i18n);
-    return i18nStore.i18n;
+    return {
+        i18n: i18nStore.i18n,
+        t: i18nStore.t,
+        isLoading: i18nStore.isLoading,
+        isError: i18nStore.isError
+    };
 }

src/index.ts

@@ -1,2 +1 @@
-export * from "./i18n";
-export * from "./translation-store";
+export * from "./i18n";

src/translation-store.ts

@@ -1,50 +1,41 @@
-import type { i18n } from "i18next";
-import { writable, type Readable, type Writable } from "svelte/store";
+import type { TFunction, i18n } from "i18next";
+import { writable, type Writable } from "svelte/store";
 
-
-export interface TranslationService {
-    i18n: Readable<i18n>;
-}
-
-export const isLoading = writable(true);
-
-export class I18NextTranslationStore implements TranslationService {
+export class I18NextTranslationStore {
     public i18n: Writable<i18n>;
-    public isLoading: Writable<boolean>;
+    public t: Writable<TFunction>;
+    public isLoading = writable(true);
+    public isError = writable(false);
 
     constructor(i18n: i18n) {
-        this.i18n = this.createInstance(i18n);
-        this.isLoading = this.createLoadingInstance(i18n);
+        this.i18n = writable(i18n);
+        this.t = writable(i18n.t);
+        this.bindOnChange(i18n);
+        this.bindOnLoad(i18n);
     }
 
-    private createInstance(i18n: i18n): Writable<i18n> {
-        const i18nWritable = writable(i18n)
+    private bindOnChange(i18n: i18n) {
+        const setupI18n = () => {
+            this.i18n.set((i18n));
+            this.t.set((i18n.t));
+        };
 
-        i18n.on('initialized', () => {
-            i18nWritable.set(i18n)
-        })
-        i18n.on('loaded', () => {
-            i18nWritable.set(i18n)
-        })
-        i18n.on('added', () => i18nWritable.set(i18n))
-        i18n.on('languageChanged', () => {
-            i18nWritable.set(i18n)
-        })
-        return i18nWritable;
+        i18n.on('initialized', setupI18n);
+        i18n.on('loaded', setupI18n);
+        i18n.on('added', setupI18n);
+        i18n.on('languageChanged', setupI18n);
     }
 
-    private createLoadingInstance(i18n: i18n): Writable<boolean> {
+    private bindOnLoad(i18n: i18n) {
         // if loaded resources are empty || {}, set loading to true
         i18n.on('loaded', (resources) => {
-            Object.keys(resources).length !== 0 && isLoading.set(false)
-        })
+            Object.keys(resources).length !== 0 && this.isLoading.set(false)
+        });
 
-        // if resources failed loading, set loading to true
+        // if resources failed loading, set error to true
         i18n.on('failedLoading', () => {
-            isLoading.set(true)
-        })
-
-        return isLoading;
+            this.isError.set(true)
+        });
     }
 }