DenysVuika · DenysVuika · Dec 14, 2024 · Dec 14, 2024 · Dec 14, 2024 · Dec 14, 2024
diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
       - run: npm i
       - run: npm test
@@ -26,7 +26,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           registry-url: https://registry.npmjs.org/
       - run: npm i
@@ -42,7 +42,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           registry-url: https://npm.pkg.github.com/
           #scope: '@DenysVuika'

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
       - name: npm install, build, and test
         run: |

diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@ build
 .rpt2_cache
 yarn-error.log
 coverage
+.idea
+size-plugin.json
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "trailingComma": "none"
 }
diff --git a/index.js b/index.js
@@ -1,6 +1,6 @@
 import {
   TranslateContext,
-  TranslateProvider,
+  TranslateProvider
 } from '@denysvuika/preact-translate';
 import { useContext } from 'preact/hooks';
 import './style';

diff --git a/lib/src/__snapshots__/translateProvider.spec.tsx.snap b/lib/src/__snapshots__/translateProvider.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TranslateProvider matches snapshot 1`] = `
-Object {
+{
   "asFragment": [Function],
   "baseElement": <body>
     <div>

diff --git a/lib/src/useTranslate.tsx b/lib/src/useTranslate.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
 import { LanguageData } from './languageData';
 import { TranslateOptions } from './translateOptions';
 import { TranslateParams } from './translateParams';
@@ -9,7 +9,7 @@ let cache: LanguageData = {};
 const defaultOptions: TranslateOptions = {
   root: '',
   lang: 'en',
-  fallbackLang: 'en'
+  fallbackLang: 'en',
 };
 
 export default function useTranslate(
@@ -23,48 +23,52 @@ export default function useTranslate(
   const [data, setData] = useState(cache);
   const [isReady, setReady] = useState(false);
 
-  const loadData = (langKey: string) => {
-    // eslint-disable-next-line no-prototype-builtins
-    if (data.hasOwnProperty(langKey)) {
-      return;
-    }
+  const loadData = useCallback(
+    async (langKey: string) => {
+      if (data[langKey]) {
+        return;
+      }
 
-    setReady(false);
+      setReady(false);
 
-    const url = getResourceUrl(options.root, langKey);
-
-    fetch(url)
-      .then(results => results.json())
-      .then(resource => {
-        cache[langKey] = resource;
-        setData({ ...cache });
-        setReady(true);
-      })
-      .catch(error => {
-        console.log('Aww, snap.', error);
+      try {
+        const url = getResourceUrl(options.root, langKey);
+        const response = await fetch(url);
+        cache[langKey] = await response.json();
+      } catch (error) {
+        console.error(`Failed to load language data for ${langKey}:`, error);
+      } finally {
         setData({ ...cache });
         setReady(true);
-      });
-  };
+      }
+    },
+    [data, options.root]
+  );
 
   useEffect(() => {
-    loadData(options.fallbackLang);
-    loadData(lang);
-  }, [lang]);
+    const loadLanguages = async () => {
+      await loadData(options.fallbackLang);
+      await loadData(lang);
+    };
+    void loadLanguages();
+  }, [lang, loadData, options.fallbackLang]);
 
-  const t = (key: string, params?: TranslateParams) => {
-    // eslint-disable-next-line no-prototype-builtins
-    if (!data.hasOwnProperty(lang)) {
-      return key;
-    }
+  const t = useMemo(
+    () => (key: string, params?: TranslateParams) => {
+      // eslint-disable-next-line no-prototype-builtins
+      if (!data.hasOwnProperty(lang)) {
+        return key;
+      }
 
-    let value = getValue(data, lang, key);
-    if (value === key && lang !== options.fallbackLang) {
-      value = getValue(data, options.fallbackLang, key);
-    }
+      let value = getValue(data, lang, key);
+      if (value === key && lang !== options.fallbackLang) {
+        value = getValue(data, options.fallbackLang, key);
+      }
 
-    return format(value, params);
-  };
+      return format(value, params);
+    },
+    [data, lang, options.fallbackLang]
+  );
 
   return { lang, setLang, t, isReady };
 }
diff --git a/lib/src/utils.spec.ts b/lib/src/utils.spec.ts
@@ -29,7 +29,7 @@ describe('Utils', () => {
       const template = 'Good luck, {param1} {param2}!';
       const params = {
         param1: 'Mr.',
-        param2: 'Gorsky',
+        param2: 'Gorsky'
       };
 
       const value = format(template, params);
@@ -61,9 +61,9 @@ describe('Utils', () => {
       const data = {
         en: {
           messages: {
-            404: 'Error, not found.',
-          },
-        },
+            404: 'Error, not found.'
+          }
+        }
       };
 
       const value = getValue(data, 'en', 'messages.404');
@@ -73,8 +73,8 @@ describe('Utils', () => {
     test('returns original key if nested value not found', () => {
       const data = {
         en: {
-          messages: {},
-        },
+          messages: {}
+        }
       };
 
       const value = getValue(data, 'en', 'messages.500');
@@ -84,8 +84,8 @@ describe('Utils', () => {
     test('supports tol-level values with dots', () => {
       const data = {
         en: {
-          'messages.errors.500': 'Aw, snap!',
-        },
+          'messages.errors.500': 'Aw, snap!'
+        }
       };
 
       const value = getValue(data, 'en', 'messages.errors.500');