@lovalingo/lovalingo 0.0.13 → 0.0.15

package/dist/components/AixsterProvider.js

@@ -42,6 +42,7 @@ navigateRef, // For path mode routing
     const missReportIntervalRef = useRef(null);
     const retryTimeoutRef = useRef(null);
     const isNavigatingRef = useRef(false);
+    const isInternalNavigationRef = useRef(false);
     const translationCacheRef = useRef(new Map());
     const exclusionsCacheRef = useRef(null);
     // NEW: Hash-based translation cache for React Context system
@@ -306,43 +307,60 @@ navigateRef, // For path mode routing
     }, [defaultLocale]);
     // Change locale
     const setLocale = useCallback((newLocale) => {
-        if (!allLocales.includes(newLocale))
-            return;
-        const previousLocale = locale; // Capture current locale before switching
-        // Save to localStorage
-        try {
-            localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
-        }
-        catch (e) {
-            console.warn('Failed to save locale to localStorage:', e);
-        }
-        // Update URL based on routing strategy
-        if (routing === 'path') {
-            // Path mode: use React Router navigate
-            const navigate = navigateRef?.current;
-            if (!navigate) {
-                console.error('PATH mode requires navigateRef prop. Pass navigateRef to both <LangRouter> and <LovalingoProvider>');
+        void (async () => {
+            if (!allLocales.includes(newLocale))
                 return;
+            const previousLocale = locale; // Capture current locale before switching
+            // Save to localStorage
+            try {
+                localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
             }
-            const pathParts = window.location.pathname.split('/').filter(Boolean);
-            // Strip existing locale
-            if (allLocales.includes(pathParts[0])) {
-                pathParts.shift();
+            catch (e) {
+                console.warn('Failed to save locale to localStorage:', e);
             }
-            // Build new path with new locale
-            const basePath = pathParts.join('/');
-            const newPath = `/${newLocale}${basePath ? '/' + basePath : ''}${window.location.search}${window.location.hash}`;
-            navigate(newPath);
-        }
-        else if (routing === 'query') {
-            // Query mode: update query parameter (/pricing?t=en -> /pricing?t=fr)
-            const url = new URL(window.location.href);
-            url.searchParams.set('t', newLocale);
-            window.history.pushState({}, '', url.toString());
-        }
-        setLocaleState(newLocale);
-        loadData(newLocale, previousLocale); // Pass previous locale for restoration
-    }, [allLocales, locale, routing, loadData]);
+            isInternalNavigationRef.current = true;
+            // Show navigation overlay immediately (only when a non-default locale is involved)
+            if (locale !== defaultLocale || newLocale !== defaultLocale) {
+                setIsNavigationLoading(true);
+            }
+            // Prevent MutationObserver work during the switch to avoid React conflicts
+            isNavigatingRef.current = true;
+            // Update URL based on routing strategy
+            if (routing === 'path') {
+                const pathParts = window.location.pathname.split('/').filter(Boolean);
+                // Strip existing locale
+                if (allLocales.includes(pathParts[0])) {
+                    pathParts.shift();
+                }
+                // Build new path with new locale
+                const basePath = pathParts.join('/');
+                const newPath = `/${newLocale}${basePath ? '/' + basePath : ''}${window.location.search}${window.location.hash}`;
+                // Prefer React Router navigation when available, but gracefully fallback for non-React-Router apps
+                const navigate = navigateRef?.current;
+                if (navigate) {
+                    navigate(newPath);
+                }
+                else {
+                    try {
+                        window.history.pushState({}, '', newPath);
+                    }
+                    catch {
+                        window.location.assign(newPath);
+                    }
+                }
+            }
+            else if (routing === 'query') {
+                const url = new URL(window.location.href);
+                url.searchParams.set('t', newLocale);
+                window.history.pushState({}, '', url.toString());
+            }
+            setLocaleState(newLocale);
+            // Always load data with overlay when switching locales to provide feedback and ensure cleanup
+            await loadData(newLocale, previousLocale, true);
+        })().finally(() => {
+            isInternalNavigationRef.current = false;
+        });
+    }, [allLocales, locale, routing, loadData, defaultLocale, navigateRef]);
     // NEW: Get translation by hash (for React Context system)
     const getTranslation = useCallback((hash, fallback) => {
         return hashTranslations.get(hash) || null;
@@ -442,17 +460,16 @@ navigateRef, // For path mode routing
     useEffect(() => {
         let navigationTimeout = null;
         const handlePopState = () => {
+            if (isInternalNavigationRef.current)
+                return;
             const newLocale = detectLocale();
             const previousLocale = locale;
             // Show navigation overlay immediately
             if (locale !== defaultLocale || newLocale !== defaultLocale) {
                 setIsNavigationLoading(true);
             }
-            // SET NAVIGATION FLAG & DISCONNECT OBSERVER
+            // SET NAVIGATION FLAG (MutationObserver callback will ignore while navigating)
             isNavigatingRef.current = true;
-            if (observerRef.current) {
-                observerRef.current.disconnect();
-            }
             if (newLocale !== locale) {
                 setLocaleState(newLocale);
                 // Clear any pending navigation
@@ -477,17 +494,16 @@ navigateRef, // For path mode routing
         const originalPushState = history.pushState;
         const originalReplaceState = history.replaceState;
         const handleNavigation = () => {
+            if (isInternalNavigationRef.current)
+                return;
             const newLocale = detectLocale();
             const previousLocale = locale;
             // Show navigation overlay immediately
             if (locale !== defaultLocale || newLocale !== defaultLocale) {
                 setIsNavigationLoading(true);
             }
-            // SET NAVIGATION FLAG & DISCONNECT OBSERVER
+            // SET NAVIGATION FLAG (MutationObserver callback will ignore while navigating)
             isNavigatingRef.current = true;
-            if (observerRef.current) {
-                observerRef.current.disconnect();
-            }
             // Clear any pending navigation translation
             if (navigationTimeout)
                 clearTimeout(navigationTimeout);

package/dist/components/LangRouter.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { BrowserRouter, Routes, Route, Navigate, Outlet, useParams, useNavigate } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate, Outlet, useLocation, useParams, useNavigate } from 'react-router-dom';
 /**
  * NavigateExporter - Internal component that exports navigate function via ref
  */
@@ -17,13 +17,27 @@ function NavigateExporter({ navigateRef }) {
  */
 function LangGuard({ defaultLang, langs }) {
     const { lang } = useParams();
+    const location = useLocation();
     // If invalid language, redirect to default
     if (!lang || !langs.includes(lang)) {
-        return React.createElement(Navigate, { to: `/${defaultLang}`, replace: true });
+        const parts = location.pathname.split('/').filter(Boolean);
+        // Drop the invalid locale segment (first)
+        if (parts.length > 0)
+            parts.shift();
+        const rest = parts.join('/');
+        const nextPath = `/${defaultLang}${rest ? `/${rest}` : ''}${location.search}${location.hash}`;
+        return React.createElement(Navigate, { to: nextPath, replace: true });
     }
     // Valid language - render children (user's routes)
     return React.createElement(Outlet, { context: { lang } });
 }
+function RedirectToDefaultLang({ defaultLang }) {
+    const location = useLocation();
+    const nextPath = location.pathname === '/' || location.pathname === ''
+        ? `/${defaultLang}${location.search}${location.hash}`
+        : `/${defaultLang}${location.pathname}${location.search}${location.hash}`;
+    return React.createElement(Navigate, { to: nextPath, replace: true });
+}
 /**
  * LangRouter - Drop-in replacement for BrowserRouter that automatically handles language routing
  *
@@ -56,5 +70,5 @@ export function LangRouter({ children, defaultLang, langs, navigateRef }) {
             React.createElement(Route, { path: ":lang/*", element: React.createElement(LangGuard, { defaultLang: defaultLang, langs: langs }) },
                 React.createElement(Route, { index: true, element: React.createElement(React.Fragment, null, children) }),
                 React.createElement(Route, { path: "*", element: React.createElement(React.Fragment, null, children) })),
-            React.createElement(Route, { path: "*", element: React.createElement(Navigate, { to: `/${defaultLang}`, replace: true }) }))));
+            React.createElement(Route, { path: "*", element: React.createElement(RedirectToDefaultLang, { defaultLang: defaultLang }) }))));
 }

package/dist/index.d.ts

@@ -22,4 +22,5 @@ export { useLangNavigate } from './hooks/useLangNavigate';
 export { useLovalingo } from './hooks/useLovalingo';
 export { useLovalingoTranslate } from './hooks/useLovalingoTranslate';
 export { useLovalingoEdit } from './hooks/useLovalingoEdit';
+export { VERSION } from './version';
 export type { LovalingoConfig, LovalingoContextValue, Translation, Exclusion, HashTranslation } from './types';

package/dist/index.js

@@ -25,3 +25,5 @@ export { useLangNavigate } from './hooks/useLangNavigate';
 export { useLovalingo } from './hooks/useLovalingo';
 export { useLovalingoTranslate } from './hooks/useLovalingoTranslate';
 export { useLovalingoEdit } from './hooks/useLovalingoEdit';
+// Version
+export { VERSION } from './version';

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "0.0.15";

package/dist/version.js

@@ -0,0 +1 @@
+export const VERSION = "0.0.15";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovalingo/lovalingo",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "React translation library with automatic routing, real-time AI translation, and zero-flash rendering. One-line language routing setup.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",