@arc-js/intl 0.0.6 → 0.0.8

package/providers/IntlProvider.tsx

@@ -1,42 +1,92 @@
-// arcIntl/providers/ArcIntlProvider.tsx
-import { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { TranslationService } from '../core/TranslationService';
-import { getSavedLocale, saveLocale, Locale, SUPPORTED_LOCALES } from '../config';
+import { getSavedLocale, saveLocale, SUPPORTED_LOCALES, type TranslationsConfig } from '../config';
+import { setTranslationsConfig } from '../utils/loaders';
+import type { Locale } from '../config';
 
 const ArcIntlContext = createContext<ReturnType<typeof useArcIntlValue> | null>(null);
 
 const useArcIntlValue = (
+  translationsConfig: TranslationsConfig,
   supportedLocales: string[] = SUPPORTED_LOCALES
 ) => {
   const [service] = useState(() => new TranslationService(supportedLocales));
-  const [currentLocale, setCurrentLocale] = useState<Locale>(getSavedLocale());
+  const [currentLocale, setCurrentLocale] = useState<Locale>(getSavedLocale(supportedLocales));
   const [isLoading, setIsLoading] = useState(true);
+  const [loadedModules, setLoadedModules] = useState<Set<string>>(new Set());
+
+  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 () => {
-      await service.initialize(currentLocale);
-      setIsLoading(false);
+      setIsLoading(true);
+      try {
+        await service.initialize(currentLocale);
+      } catch (error) {
+        console.error('Failed to initialize translations:', error);
+      } finally {
+        setIsLoading(false);
+      }
     };
     initialize();
-  }, []);
+  }, [currentLocale, service]);
 
-  const changeLocale = async (locale: Locale) => {
+  const changeLocale = useCallback(async (locale: Locale) => {
+    if (!supportedLocales.includes(locale)) {
+      console.warn(`Locale ${locale} is not supported`);
+      return;
+    }
+    
+    if (locale === currentLocale) return;
+    
     setIsLoading(true);
-    await service.loadLocale(locale);
-    service.setLocale(locale);
-    setCurrentLocale(locale);
-    saveLocale(locale);
-    setIsLoading(false);
-  };
+    try {
+      setCurrentLocale(locale);
+      saveLocale(locale);
+    } catch (error) {
+      console.error('Failed to change locale:', error);
+      setIsLoading(false);
+    }
+  }, [currentLocale, supportedLocales]);
 
-  const loadModuleTranslations = async (moduleName: string) => {
+  const loadModuleTranslations = useCallback(async (moduleName: string) => {
     setIsLoading(true);
-    await service.loadModule(moduleName);
-    setIsLoading(false);
-  };
+    try {
+      await service.loadModule(moduleName);
+    } catch (error) {
+      console.error(`Failed to load module ${moduleName}:`, error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [service]);
+
+  const t = useCallback((key: string, params?: Record<string, any>, options?: any) => {
+    return service.t(key, params || {}, options || {});
+  }, [service]);
 
   return {
-    t: service.t.bind(service),
+    t,
     changeLocale,
     currentLocale,
     isLoading,
@@ -46,16 +96,22 @@ const useArcIntlValue = (
 
 export const ArcIntlProvider: React.FC<{
   children: React.ReactNode
+  translations: TranslationsConfig
   supportedLocales?: string[];
 }> = ({
+  translations,
   supportedLocales,
   children,
 }) => {
-  const value = useArcIntlValue((
-    typeof supportedLocales === 'object' &&
-    !!Array.isArray(supportedLocales) &&
-    supportedLocales.length > 0
-  ) ? supportedLocales : SUPPORTED_LOCALES);
+  const value = useArcIntlValue(
+    translations,
+    (typeof supportedLocales === 'object' &&
+      !!Array.isArray(supportedLocales) &&
+      supportedLocales.length > 0)
+      ? supportedLocales
+      : SUPPORTED_LOCALES
+  );
+  
   return <ArcIntlContext.Provider value={value}>{children}</ArcIntlContext.Provider>;
 };
 
@@ -63,4 +119,10 @@ 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/utils/loaders.d.ts

@@ -1,3 +1,17 @@
+interface TranslationMap {
+    [locale: string]: () => Promise<Record<string, any>>;
+}
+interface ModuleTranslations {
+    [moduleName: string]: TranslationMap;
+}
+interface TranslationsConfig {
+    base: {
+        [locale: string]: () => Promise<Record<string, any>>;
+    };
+    modules?: ModuleTranslations;
+}
+
+declare const setTranslationsConfig: (config: TranslationsConfig) => void;
 declare const loadBaseTranslations: (locale: string) => Promise<Record<string, any>>;
 declare const loadModulesTranslations: (locale: string) => Promise<Array<{
     moduleName: string;
@@ -8,4 +22,4 @@ declare const loadModuleTranslations: (moduleName: string, locale: string) => Pr
     translations: Record<string, any>;
 } | undefined>;
 
-export { loadBaseTranslations, loadModuleTranslations, loadModulesTranslations };
+export { loadBaseTranslations, loadModuleTranslations, loadModulesTranslations, setTranslationsConfig };