i18n-keyless-react 1.4.0 → 1.5.1

package/dist/I18nKeylessText.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface I18nTextProps {
+    children: string;
+}
+export declare const I18nKeylessText: React.FC<I18nTextProps>;
+interface I18nKeylessTextWithReplacementProps {
+    children: string;
+    replace?: Record<string, string>;
+}
+export declare const I18nKeylessTextWithReplacement: React.FC<I18nKeylessTextWithReplacementProps>;
+export {};

package/dist/I18nKeylessText.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useMemo } from "react";
+import { useI18nKeyless } from "./store";
+export const I18nKeylessText = ({ children }) => {
+    const translations = useI18nKeyless((store) => store.translations);
+    const currentLanguage = useI18nKeyless((store) => store.currentLanguage);
+    const config = useI18nKeyless((store) => store.config);
+    const translateKey = useI18nKeyless((store) => store.translateKey);
+    useEffect(() => {
+        translateKey(children);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [children, currentLanguage]);
+    const translatedText = currentLanguage === config.languages.primary ? children : translations[children] || children;
+    return _jsx(React.Fragment, { children: translatedText }, currentLanguage);
+};
+export const I18nKeylessTextWithReplacement = ({ children, replace, }) => {
+    const translations = useI18nKeyless((store) => store.translations);
+    const currentLanguage = useI18nKeyless((store) => store.currentLanguage);
+    const config = useI18nKeyless((store) => store.config);
+    const translateKey = useI18nKeyless((store) => store.translateKey);
+    useEffect(() => {
+        translateKey(children);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [children, currentLanguage]);
+    const translatedText = currentLanguage === config.languages.primary ? children : translations[children] || children;
+    const replacedText = useMemo(() => {
+        if (!replace) {
+            return translatedText;
+        }
+        // Create a regex that matches all keys to replace
+        // Escape special regex characters in keys
+        const pattern = Object.keys(replace)
+            .map((key) => key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
+            .join("|");
+        const regex = new RegExp(pattern, "g");
+        // Replace all occurrences in a single pass
+        return translatedText.replace(regex, (matched) => replace[matched] || matched);
+    }, [translatedText, replace]);
+    return _jsx(React.Fragment, { children: replacedText }, currentLanguage);
+};

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { I18nText } from "./I18nText";
+export { I18nKeylessText, I18nKeylessTextWithReplacement } from "./I18nKeylessText";
 export { init, getTranslation, setCurrentLanguage, useCurrentLanguage, clearI18nKeylessStorage, fetchAllTranslations, } from "./store";

package/dist/index.js

@@ -1,2 +1,2 @@
-export { I18nText } from "./I18nText";
+export { I18nKeylessText, I18nKeylessTextWithReplacement } from "./I18nKeylessText";
 export { init, getTranslation, setCurrentLanguage, useCurrentLanguage, clearI18nKeylessStorage, fetchAllTranslations, } from "./store";

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "i18n-keyless-react",
     "private": false,
-    "version": "1.4.0",
+    "version": "1.5.1",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",

package/dist/store.js

@@ -66,24 +66,29 @@ export const useI18nKeyless = create((set, get) => ({
     storage: null,
     _hydrate: async () => {
         const storage = get().config?.storage;
+        const debug = get().config?.debug;
         if (!storage) {
             throw new Error("i18n-keyless: storage is not initialized");
         }
         const translations = await getItem(storeKeys.translations, storage);
         if (translations) {
-            console.log("i18n-keyless: _hydrate", translations);
+            if (debug)
+                console.log("i18n-keyless: _hydrate", translations);
             set({ translations: JSON.parse(translations) });
         }
         else {
-            console.log("i18n-keyless: _hydrate: no translations");
+            if (debug)
+                console.log("i18n-keyless: _hydrate: no translations");
         }
         const currentLanguage = await getItem(storeKeys.currentLanguage, storage);
         if (currentLanguage) {
-            console.log("i18n-keyless: _hydrate", currentLanguage);
+            if (debug)
+                console.log("i18n-keyless: _hydrate", currentLanguage);
             set({ currentLanguage: currentLanguage });
         }
         else {
-            console.log("i18n-keyless: _hydrate: no current language");
+            if (debug)
+                console.log("i18n-keyless: _hydrate: no current language");
             set({ currentLanguage: get().config?.languages.initWithDefault });
         }
         const uniqueId = await getItem(storeKeys.uniqueId, storage);
@@ -112,10 +117,10 @@ export const useI18nKeyless = create((set, get) => ({
         setItem(storeKeys.translations, JSON.stringify(nextTranslations), storage);
     },
     translateKey: (key) => {
-        if (key.length > 280) {
-            console.error("i18n-keyless: Key length exceeds 280 characters limit:", key);
-            return;
-        }
+        // if (key.length > 280) {
+        //   console.error("i18n-keyless: Key length exceeds 280 characters limit:", key);
+        //   return;
+        // }
         const translation = get().translations[key];
         if (translation) {
             return;
@@ -125,7 +130,6 @@ export const useI18nKeyless = create((set, get) => ({
             return;
         }
         queue.add(async () => {
-            // console.log("i18n-keyless: translateKey", key);
             try {
                 if (get().translating[key]) {
                     return;
@@ -144,7 +148,6 @@ export const useI18nKeyless = create((set, get) => ({
                     };
                     const apiUrl = config.API_URL || "https://api.i18n-keyless.com";
                     const url = `${apiUrl}/translate`;
-                    // console.log("i18n-keyless: POST", url);
                     const response = await fetch(url, {
                         method: "POST",
                         headers: {
@@ -169,8 +172,10 @@ export const useI18nKeyless = create((set, get) => ({
         }, { priority: 1, id: key });
     },
     setLanguage: async (lang) => {
-        console.log("i18n-keyless: setLanguage", lang);
         const config = get().config;
+        const debug = get().config?.debug;
+        if (debug)
+            console.log("i18n-keyless: setLanguage", lang);
         const sanitizedLang = !config || !config.languages.supported.includes(lang) ? config?.languages.fallback : lang;
         set({ currentLanguage: sanitizedLang });
         if (config?.storage) {
@@ -183,7 +188,6 @@ export const useI18nKeyless = create((set, get) => ({
     },
 }));
 export async function init(config) {
-    // console.log("i18n-keyless: init", config);
     if (!config.languages) {
         throw new Error("i18n-keyless: languages is required");
     }
@@ -229,7 +233,6 @@ export function setCurrentLanguage(lang) {
     return useI18nKeyless.getState().setLanguage(lang);
 }
 export async function fetchAllTranslations(targetLanguage) {
-    // console.log("i18n-keyless: fetchAllTranslations", targetLanguage);
     const store = useI18nKeyless.getState();
     const config = store.config;
     if (!config) {
@@ -237,7 +240,6 @@ export async function fetchAllTranslations(targetLanguage) {
         return;
     }
     if (config.languages.primary === targetLanguage) {
-        // console.log("i18n-keyless: using primary language");
         return;
     }
     try {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "i18n-keyless-react",
   "private": false,
-  "version": "1.4.0",
+  "version": "1.5.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/I18nText.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-type MyI18nTextProps = {
-    children: string;
-};
-export declare const I18nText: React.FC<MyI18nTextProps>;
-export {};

package/dist/I18nText.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from "react";
-import { useI18nKeyless } from "./store";
-export const I18nText = ({ children }) => {
-    const translations = useI18nKeyless((store) => store.translations);
-    const currentLanguage = useI18nKeyless((store) => store.currentLanguage);
-    const config = useI18nKeyless((store) => store.config);
-    const translateKey = useI18nKeyless((store) => store.translateKey);
-    useEffect(() => {
-        translateKey(children);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [children, currentLanguage]);
-    if (!config) {
-        return null;
-    }
-    const translatedText = currentLanguage === config.languages.primary ? children : translations[children] || children;
-    return _jsx(React.Fragment, { children: translatedText }, currentLanguage);
-};