@arc-js/intl 0.0.9 → 0.0.92

package/core/TranslationService.js

@@ -1020,22 +1020,30 @@ class TranslationService {
     }
     loadModule(moduleName) {
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(`Loading module ${moduleName}...`);
+            console.log(`Already loaded modules:`, Array.from(this.loadedModules));
             if (this.loadedModules.has(moduleName)) {
+                console.log(`Module ${moduleName} already loaded`);
                 return;
             }
             for (const locale of this.supportedLocales) {
+                console.log(`Loading module ${moduleName} for locale ${locale}...`);
                 const moduleData = yield loadModuleTranslations(moduleName, locale);
                 if (moduleData === null || moduleData === void 0 ? void 0 : moduleData.translations) {
+                    console.log(`Found translations for ${moduleName} in ${locale}`);
                     if (!this.resources[locale]) {
+                        console.log(`Creating resources for locale ${locale}`);
                         this.resources[locale] = { core: {} };
                     }
                     this.resources[locale][moduleName] = moduleData.translations;
+                    console.log(`Resources for ${locale}:`, Object.keys(this.resources[locale]));
                 }
                 else {
                     console.warn(`No translations found for module ${moduleName} in locale ${locale}`);
                 }
             }
             this.loadedModules.add(moduleName);
+            console.log(`Module ${moduleName} loaded successfully`);
         });
     }
     t(key, params = {}, options = {}) {

package/hooks/useTranslation.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useEffect, useState, useCallback } from 'react';
 import { useArcIntl } from '../providers/IntlProvider';
 export function useTranslation(moduleName) {
@@ -5,7 +6,7 @@ export function useTranslation(moduleName) {
   const [isModuleLoading, setIsModuleLoading] = useState(false);
   const [moduleLoaded, setModuleLoaded] = useState(!moduleName);
   const t = useCallback((key, params, options) => {
-    if (moduleName && !moduleLoaded && !options?.moduleName) {
+    if (moduleName && !moduleLoaded) {
       console.warn(`Module ${moduleName} not loaded yet, using default value`);
       return options?.defaultValue || key;
     }
@@ -16,7 +17,7 @@ export function useTranslation(moduleName) {
     return arcIntl.t(key, params || {}, finalOptions);
   }, [arcIntl, moduleName, moduleLoaded]);
   useEffect(() => {
-    if (moduleName && !moduleLoaded) {
+    if (moduleName && !moduleLoaded && !arcIntl.isLoading) {
       setIsModuleLoading(true);
       arcIntl.loadModuleTranslations(moduleName).then(() => {
         setModuleLoaded(true);
@@ -26,7 +27,7 @@ export function useTranslation(moduleName) {
         setIsModuleLoading(false);
       });
     }
-  }, [moduleName, moduleLoaded, arcIntl]);
+  }, [moduleName, moduleLoaded, arcIntl, arcIntl.isLoading]);
   return {
     t,
     changeLocale: arcIntl.changeLocale,

package/hooks/useTranslation.tsx

@@ -1,14 +1,13 @@
 import { useEffect, useState, useCallback } from 'react';
 import { useArcIntl } from '../providers/IntlProvider';
 
-
 export function useTranslation(moduleName?: string) {
     const arcIntl = useArcIntl();
     const [isModuleLoading, setIsModuleLoading] = useState(false);
     const [moduleLoaded, setModuleLoaded] = useState(!moduleName);
 
     const t = useCallback((key: string, params?: Record<string, any>, options?: any) => {
-        if (moduleName && !moduleLoaded && !options?.moduleName) {
+        if (moduleName && !moduleLoaded) {
             console.warn(`Module ${moduleName} not loaded yet, using default value`);
             return options?.defaultValue || key;
         }
@@ -22,7 +21,7 @@ export function useTranslation(moduleName?: string) {
     }, [arcIntl, moduleName, moduleLoaded]);
 
     useEffect(() => {
-        if (moduleName && !moduleLoaded) {
+        if (moduleName && !moduleLoaded && !arcIntl.isLoading) {
             setIsModuleLoading(true);
             arcIntl.loadModuleTranslations(moduleName)
                 .then(() => {
@@ -35,7 +34,7 @@ export function useTranslation(moduleName?: string) {
                     setIsModuleLoading(false);
                 });
         }
-    }, [moduleName, moduleLoaded, arcIntl]);
+    }, [moduleName, moduleLoaded, arcIntl, arcIntl.isLoading]);
 
     return {
         t,

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.9",
+  "version": "0.0.92",
   "description": "INTL est un système de gestion d'internationalisation (i18n) modulaire et performant pour les applications React avec TypeScript/JavaScript. Il fournit une gestion avancée des traductions, un chargement dynamique des modules, et une intégration transparente avec l'écosystème Arc.",
   "main": "index.js",
   "keywords": [],

package/providers/IntlProvider.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { TranslationService } from '../core/TranslationService';
 import { getSavedLocale, saveLocale, SUPPORTED_LOCALES } from '../config';
@@ -8,30 +9,17 @@ const useArcIntlValue = (translationsConfig, supportedLocales = SUPPORTED_LOCALE
   const [currentLocale, setCurrentLocale] = useState(getSavedLocale(supportedLocales));
   const [isLoading, setIsLoading] = useState(true);
   const [loadedModules, setLoadedModules] = useState(new Set());
+  const [initialized, setInitialized] = useState(false);
   useEffect(() => {
     setTranslationsConfig(translationsConfig);
-  }, [translationsConfig]);
-  useEffect(() => {
-    const loadAllModules = async () => {
-      if (translationsConfig.modules) {
-        const moduleNames = Object.keys(translationsConfig.modules);
-        for (const moduleName of moduleNames) {
-          try {
-            await service.loadModule(moduleName);
-            setLoadedModules(prev => new Set(prev).add(moduleName));
-          } catch (error) {
-            console.error(`Failed to load module ${moduleName}:`, error);
-          }
-        }
-      }
-    };
-    loadAllModules();
-  }, [translationsConfig.modules, service]);
+  }, [translationsConfig])
+
   useEffect(() => {
     const initialize = async () => {
       setIsLoading(true);
       try {
         await service.initialize(currentLocale);
+        setInitialized(true);
       } catch (error) {
         console.error('Failed to initialize translations:', error);
       } finally {
@@ -39,7 +27,23 @@ const useArcIntlValue = (translationsConfig, supportedLocales = SUPPORTED_LOCALE
       }
     };
     initialize();
-  }, [currentLocale, service]);
+  }, [currentLocale, service])
+
+  useEffect(() => {
+    if (!initialized || !translationsConfig.modules) return;
+    const loadAllModules = async () => {
+      const moduleNames = Object.keys(translationsConfig.modules || {});
+      for (const moduleName of moduleNames) {
+        try {
+          await service.loadModule(moduleName);
+          setLoadedModules(prev => new Set(prev).add(moduleName));
+        } catch (error) {
+          console.error(`Failed to load module ${moduleName}:`, error);
+        }
+      }
+    };
+    loadAllModules();
+  }, [initialized, translationsConfig.modules, service]);
   const changeLocale = useCallback(async locale => {
     if (!supportedLocales.includes(locale)) {
       console.warn(`Locale ${locale} is not supported`);
@@ -48,23 +52,28 @@ const useArcIntlValue = (translationsConfig, supportedLocales = SUPPORTED_LOCALE
     if (locale === currentLocale) return;
     setIsLoading(true);
     try {
+      await service.initialize(locale);
       setCurrentLocale(locale);
       saveLocale(locale);
     } catch (error) {
       console.error('Failed to change locale:', error);
+    } finally {
       setIsLoading(false);
     }
-  }, [currentLocale, supportedLocales]);
+  }, [currentLocale, supportedLocales, service]);
   const loadModuleTranslations = useCallback(async moduleName => {
+    if (loadedModules.has(moduleName)) return;
     setIsLoading(true);
     try {
       await service.loadModule(moduleName);
+      setLoadedModules(prev => new Set(prev).add(moduleName));
     } catch (error) {
       console.error(`Failed to load module ${moduleName}:`, error);
+      throw error;
     } finally {
       setIsLoading(false);
     }
-  }, [service]);
+  }, [service, loadedModules]);
   const t = useCallback((key, params, options) => {
     return service.t(key, params || {}, options || {});
   }, [service]);
@@ -73,7 +82,8 @@ const useArcIntlValue = (translationsConfig, supportedLocales = SUPPORTED_LOCALE
     changeLocale,
     currentLocale,
     isLoading,
-    loadModuleTranslations
+    loadModuleTranslations,
+    loadedModules: Array.from(loadedModules)
   };
 };
 export const ArcIntlProvider = ({
@@ -90,9 +100,4 @@ export const useArcIntl = () => {
   const context = useContext(ArcIntlContext);
   if (!context) throw new Error('useArcIntl must be used within an ArcIntlProvider');
   return context;
-};
-export default {
-  useArcIntlValue,
-  ArcIntlProvider,
-  useArcIntl
 };

package/providers/IntlProvider.tsx

@@ -14,35 +14,19 @@ const useArcIntlValue = (
   const [currentLocale, setCurrentLocale] = useState<Locale>(getSavedLocale(supportedLocales));
   const [isLoading, setIsLoading] = useState(true);
   const [loadedModules, setLoadedModules] = useState<Set<string>>(new Set());
+  const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
     setTranslationsConfig(translationsConfig);
   }, [translationsConfig]);
 
-  useEffect(() => {
-    const loadAllModules = async () => {
-      if (translationsConfig.modules) {
-        const moduleNames = Object.keys(translationsConfig.modules);
-        
-        for (const moduleName of moduleNames) {
-          try {
-            await service.loadModule(moduleName);
-            setLoadedModules(prev => new Set(prev).add(moduleName));
-          } catch (error) {
-            console.error(`Failed to load module ${moduleName}:`, error);
-          }
-        }
-      }
-    };
-
-    loadAllModules();
-  }, [translationsConfig.modules, service]);
-
+  
   useEffect(() => {
     const initialize = async () => {
       setIsLoading(true);
       try {
         await service.initialize(currentLocale);
+        setInitialized(true);
       } catch (error) {
         console.error('Failed to initialize translations:', error);
       } finally {
@@ -52,6 +36,26 @@ const useArcIntlValue = (
     initialize();
   }, [currentLocale, service]);
 
+  
+  useEffect(() => {
+    if (!initialized || !translationsConfig.modules) return;
+
+    const loadAllModules = async () => {
+      const moduleNames = Object.keys(translationsConfig.modules || {});
+      
+      for (const moduleName of moduleNames) {
+        try {
+          await service.loadModule(moduleName);
+          setLoadedModules(prev => new Set(prev).add(moduleName));
+        } catch (error) {
+          console.error(`Failed to load module ${moduleName}:`, error);
+        }
+      }
+    };
+
+    loadAllModules();
+  }, [initialized, translationsConfig.modules, service]);
+
   const changeLocale = useCallback(async (locale: Locale) => {
     if (!supportedLocales.includes(locale)) {
       console.warn(`Locale ${locale} is not supported`);
@@ -62,24 +66,30 @@ const useArcIntlValue = (
     
     setIsLoading(true);
     try {
+      await service.initialize(locale);
       setCurrentLocale(locale);
       saveLocale(locale);
     } catch (error) {
       console.error('Failed to change locale:', error);
+    } finally {
       setIsLoading(false);
     }
-  }, [currentLocale, supportedLocales]);
+  }, [currentLocale, supportedLocales, service]);
 
   const loadModuleTranslations = useCallback(async (moduleName: string) => {
+    if (loadedModules.has(moduleName)) return;
+    
     setIsLoading(true);
     try {
       await service.loadModule(moduleName);
+      setLoadedModules(prev => new Set(prev).add(moduleName));
     } catch (error) {
       console.error(`Failed to load module ${moduleName}:`, error);
+      throw error;
     } finally {
       setIsLoading(false);
     }
-  }, [service]);
+  }, [service, loadedModules]);
 
   const t = useCallback((key: string, params?: Record<string, any>, options?: any) => {
     return service.t(key, params || {}, options || {});
@@ -91,6 +101,7 @@ const useArcIntlValue = (
     currentLocale,
     isLoading,
     loadModuleTranslations,
+    loadedModules: Array.from(loadedModules),
   };
 };
 
@@ -119,10 +130,4 @@ export const useArcIntl = () => {
   const context = useContext(ArcIntlContext);
   if (!context) throw new Error('useArcIntl must be used within an ArcIntlProvider');
   return context;
-};
-
-export default {
-  useArcIntlValue,
-  ArcIntlProvider,
-  useArcIntl,
-}
+};