@jsarc/intl 0.0.1-beta.0.3 → 0.0.1-beta.0.4

package/js/providers/IntlProvider.jsx

@@ -1,8 +1,104 @@
 import React from "react";
-import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { TranslationService } from '../core/TranslationService';
 import { getSavedLocale, saveLocale, SUPPORTED_LOCALES } from '../config';
 const ArcIntlContext = createContext(null);
+export const ArcIntlProvider = ({
+  translations,
+  supportedLocales,
+  children
+}) => {
+  const finalSupportedLocales = useMemo(() => {
+    return typeof supportedLocales === 'object' && !!Array.isArray(supportedLocales) && supportedLocales.length > 0 ? supportedLocales : SUPPORTED_LOCALES;
+  }, [supportedLocales]);
+  const [service] = useState(() => new TranslationService(finalSupportedLocales, translations));
+  const [currentLocale, setCurrentLocale] = useState(() => getSavedLocale(finalSupportedLocales));
+  const [isLoading, setIsLoading] = useState(true);
+  const [initialized, setInitialized] = useState(false);
+  useEffect(() => {
+    const initialize = async () => {
+      setIsLoading(true);
+      try {
+        if (!initialized) {
+          await service.initialize(currentLocale);
+          setInitialized(true);
+        } else {
+          await service.initialize(currentLocale);
+        }
+      } catch (error) {
+        console.error('❌ Failed to initialize translations:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const timer = setTimeout(() => {
+      initialize();
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [currentLocale, service, initialized]);
+  useEffect(() => {
+    if (!initialized || isLoading || !translations.modules) return;
+    const loadAllModules = async () => {
+      const moduleNames = Object.keys(translations.modules || {});
+      for (const moduleName of moduleNames) {
+        try {
+          await service.loadModule(moduleName);
+        } catch (error) {
+          console.error(`❌ Failed to load module ${moduleName}:`, error);
+        }
+      }
+    };
+    loadAllModules();
+  }, [initialized, translations.modules, service, isLoading]);
+  const changeLocale = useCallback(async locale => {
+    if (!finalSupportedLocales.includes(locale)) {
+      console.warn(`⚠️ Locale ${locale} is not supported`);
+      return;
+    }
+    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, finalSupportedLocales, service]);
+  const loadModuleTranslations = useCallback(async moduleName => {
+    setIsLoading(true);
+    try {
+      await service.loadModule(moduleName);
+    } catch (error) {
+      console.error(`❌ Failed to load module ${moduleName}:`, error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [service]);
+  const t = useCallback((key, params, options) => {
+    const result = service.t(key, params || {}, options || {});
+    return result;
+  }, [service]);
+  const contextValue = useMemo(() => ({
+    t,
+    changeLocale,
+    currentLocale,
+    isLoading,
+    loadModuleTranslations,
+    isInitialized: initialized
+  }), [t, changeLocale, currentLocale, isLoading, loadModuleTranslations, initialized]);
+  return React.createElement(ArcIntlContext.Provider, {
+    value: contextValue
+  }, children);
+};
+export const useArcIntl = () => {
+  const context = useContext(ArcIntlContext);
+  if (!context) throw new Error('useArcIntl must be used within an ArcIntlProvider');
+  return context;
+};
 const useArcIntlValue = (translationsConfig, supportedLocales = SUPPORTED_LOCALES) => {
   const [service] = useState(() => new TranslationService(supportedLocales, translationsConfig));
   const [currentLocale, setCurrentLocale] = useState(getSavedLocale(supportedLocales));
@@ -84,23 +180,7 @@ const useArcIntlValue = (translationsConfig, supportedLocales = SUPPORTED_LOCALE
     isInitialized: initialized
   };
 };
-export const ArcIntlProvider = ({
-  translations,
-  supportedLocales,
-  children
-}) => {
-  const value = useArcIntlValue(translations, typeof supportedLocales === 'object' && !!Array.isArray(supportedLocales) && supportedLocales.length > 0 ? supportedLocales : SUPPORTED_LOCALES);
-  return React.createElement(ArcIntlContext.Provider, {
-    value: value
-  }, children);
-};
-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/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.1-beta.0.3",
+  "version": "0.0.1-beta.0.4",
   "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.ts",
   "keywords": [],

package/providers/IntlProvider.tsx

@@ -3,7 +3,127 @@ import { TranslationService } from '../core/TranslationService';
 import { getSavedLocale, saveLocale, SUPPORTED_LOCALES, type TranslationsConfig } from '../config';
 import type { Locale } from '../config';
 
-const ArcIntlContext = createContext<ReturnType<typeof useArcIntlValue> | null>(null);
+const ArcIntlContext = createContext<any | null>(null);
+
+export const ArcIntlProvider: React.FC<{
+  children: React.ReactNode
+  translations: TranslationsConfig
+  supportedLocales?: string[];
+}> = ({
+  translations,
+  supportedLocales,
+  children,
+}) => {
+  const finalSupportedLocales = useMemo(() => {
+    return (typeof supportedLocales === 'object' &&
+      !!Array.isArray(supportedLocales) &&
+      supportedLocales.length > 0)
+      ? supportedLocales
+      : SUPPORTED_LOCALES;
+  }, [supportedLocales]);
+
+  const [service] = useState(() => new TranslationService(finalSupportedLocales, translations));
+  
+  const [currentLocale, setCurrentLocale] = useState<Locale>(() => getSavedLocale(finalSupportedLocales));
+  const [isLoading, setIsLoading] = useState(true);
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    const initialize = async () => {
+      setIsLoading(true);
+      try {
+        if (!initialized) {
+          await service.initialize(currentLocale);
+          setInitialized(true);
+        } else {
+          await service.initialize(currentLocale);
+        }
+      } catch (error) {
+        console.error('❌ Failed to initialize translations:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    const timer = setTimeout(() => {
+      initialize();
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [currentLocale, service, initialized]);
+
+  useEffect(() => {
+    if (!initialized || isLoading || !translations.modules) return;
+
+    const loadAllModules = async () => {
+      const moduleNames = Object.keys(translations.modules || {});
+      
+      for (const moduleName of moduleNames) {
+        try {
+          await service.loadModule(moduleName);
+        } catch (error) {
+          console.error(`❌ Failed to load module ${moduleName}:`, error);
+        }
+      }
+    };
+
+    loadAllModules();
+  }, [initialized, translations.modules, service, isLoading]);
+
+  const changeLocale = useCallback(async (locale: Locale) => {
+    if (!finalSupportedLocales.includes(locale)) {
+      console.warn(`⚠️ Locale ${locale} is not supported`);
+      return;
+    }
+    
+    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, finalSupportedLocales, service]);
+
+  const loadModuleTranslations = useCallback(async (moduleName: string) => {
+    setIsLoading(true);
+    try {
+      await service.loadModule(moduleName);
+    } catch (error) {
+      console.error(`❌ Failed to load module ${moduleName}:`, error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [service]);
+
+  const t = useCallback((key: string, params?: Record<string, any>, options?: any) => {
+    const result = service.t(key, params || {}, options || {});
+    return result;
+  }, [service]);
+
+  const contextValue = useMemo(() => ({
+    t,
+    changeLocale,
+    currentLocale,
+    isLoading,
+    loadModuleTranslations,
+    isInitialized: initialized,
+  }), [t, changeLocale, currentLocale, isLoading, loadModuleTranslations, initialized]);
+
+  return <ArcIntlContext.Provider value={contextValue}>{children}</ArcIntlContext.Provider>;
+};
+
+export const useArcIntl = () => {
+  const context = useContext(ArcIntlContext);
+  if (!context) throw new Error('useArcIntl must be used within an ArcIntlProvider');
+  return context;
+};
 
 const useArcIntlValue = (
   translationsConfig: TranslationsConfig,
@@ -13,7 +133,7 @@ const useArcIntlValue = (
   const [currentLocale, setCurrentLocale] = useState<Locale>(getSavedLocale(supportedLocales));
   const [isLoading, setIsLoading] = useState(true);
   const [initialized, setInitialized] = useState(false);
-
+
   useEffect(() => {
     const initialize = async () => {
       setIsLoading(true);
@@ -30,14 +150,14 @@ const useArcIntlValue = (
         setIsLoading(false);
       }
     };
-
+
     const timer = setTimeout(() => {
       initialize();
     }, 0);
 
     return () => clearTimeout(timer);
   }, [currentLocale, service, initialized]);
-
+
   useEffect(() => {
     if (!initialized || isLoading || !translationsConfig.modules) return;
 
@@ -103,36 +223,7 @@ const useArcIntlValue = (
   };
 };
 
-export const ArcIntlProvider: React.FC<{
-  children: React.ReactNode
-  translations: TranslationsConfig
-  supportedLocales?: string[];
-}> = ({
-  translations,
-  supportedLocales,
-  children,
-}) => {
-
-  const value = useArcIntlValue(
-    translations,
-    (typeof supportedLocales === 'object' &&
-      !!Array.isArray(supportedLocales) &&
-      supportedLocales.length > 0)
-      ? supportedLocales
-      : SUPPORTED_LOCALES
-  );
-  
-  return <ArcIntlContext.Provider value={value}>{children}</ArcIntlContext.Provider>;
-};
-
-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,
-}
+};