@jsarc/intl 0.0.0

package/providers/IntlProvider.tsx

@@ -0,0 +1,138 @@
+import { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
+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 useArcIntlValue = (
+  translationsConfig: TranslationsConfig,
+  supportedLocales: string[] = SUPPORTED_LOCALES
+) => {
+  const [service] = useState(() => new TranslationService(supportedLocales, translationsConfig));
+  const [currentLocale, setCurrentLocale] = useState<Locale>(getSavedLocale(supportedLocales));
+  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 || !translationsConfig.modules) return;
+
+    const loadAllModules = async () => {
+      const moduleNames = Object.keys(translationsConfig.modules || {});
+      
+      for (const moduleName of moduleNames) {
+        try {
+          await service.loadModule(moduleName);
+        } catch (error) {
+          console.error(`❌ Failed to load module ${moduleName}:`, error);
+        }
+      }
+    };
+
+    loadAllModules();
+  }, [initialized, translationsConfig.modules, service, isLoading]);
+
+  const changeLocale = useCallback(async (locale: Locale) => {
+    if (!supportedLocales.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, supportedLocales, 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]);
+
+  return {
+    t,
+    changeLocale,
+    currentLocale,
+    isLoading,
+    loadModuleTranslations,
+    isInitialized: initialized,
+  };
+};
+
+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,
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable", "ESNext"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src/**/*"],
+    "exclude": [
+        "node_modules",
+        "**/*.d.ts"
+    ]
+}

package/utils/loaders.ts

@@ -0,0 +1,79 @@
+import type { TranslationsConfig } from '../config';
+
+export const loadBaseTranslations = async (
+  locale: string,
+  translationsConfig: TranslationsConfig
+): Promise<Record<string, any>> => {
+  if (!translationsConfig?.base[locale]) {
+    console.warn(`❌ No base translations found for locale: ${locale}`);
+    console.warn('Available locales:', translationsConfig?.base ? Object.keys(translationsConfig.base) : 'none');
+    return {};
+  }
+  
+  try {
+    const loader = translationsConfig.base[locale];
+    const result = await loader();
+    return result;
+  } catch (error) {
+    console.error(`❌ Failed to load base ${locale} translations`, error);
+    return {};
+  }
+};
+
+export const loadModulesTranslations = async (
+  locale: string,
+  translationsConfig: TranslationsConfig
+): Promise<Array<{ moduleName: string; translations: Record<string, any> }>> => {
+  const results: any[] = [];
+  
+  if (!translationsConfig?.modules) {
+    console.warn(`⚠️ No modules configuration found for locale "${locale}"`);
+    return results;
+  }
+  
+  for (const [moduleName, moduleTranslations] of Object.entries(translationsConfig.modules)) {
+    if (moduleTranslations[locale]) {
+      try {
+        const loader = moduleTranslations[locale];
+        const translations = await loader();
+        
+        results.push({
+          moduleName,
+          translations
+        });
+      } catch (error) {
+        console.error(`❌ Failed to load translations for module "${moduleName}" and locale "${locale}"`, error);
+      }
+    } else {
+      console.warn(`⚠️ No translations for module "${moduleName}" in locale "${locale}"`);
+    }
+  }
+  return results;
+};
+
+export const loadModuleTranslations = async (
+  moduleName: string,
+  locale: string,
+  translationsConfig: TranslationsConfig
+): Promise<{ moduleName: string; translations: Record<string, any> } | undefined> => {
+  if (!translationsConfig?.modules?.[moduleName]?.[locale]) {
+    console.warn(`❌ No translations config found for module "${moduleName}" and locale "${locale}"`);
+    console.warn('Available modules:', translationsConfig?.modules ? Object.keys(translationsConfig.modules) : 'none');
+    if (translationsConfig?.modules?.[moduleName]) {
+      console.warn(`Available locales for ${moduleName}:`, Object.keys(translationsConfig.modules[moduleName]));
+    }
+    return undefined;
+  }
+  
+  try {
+    const loader = translationsConfig.modules[moduleName][locale];
+    const translations = await loader();
+    return {
+      moduleName,
+      translations
+    };
+  } catch (error) {
+    console.error(`❌ Failed to load translations for module "${moduleName}" and locale "${locale}"`, error);
+    return undefined;
+  }
+};

package/utils/mergeTranslations.ts

@@ -0,0 +1,15 @@
+export const mergeDeep = (target: any, source: any): any => {
+    if (typeof target !== 'object' || typeof source !== 'object') return source;
+
+    const output = { ...target };
+    for (const key in source) {
+        if (source.hasOwnProperty(key)) {
+            if (target.hasOwnProperty(key)) {
+                output[key] = mergeDeep(target[key], source[key]);
+            } else {
+                output[key] = source[key];
+            }
+        }
+    }
+    return output;
+};