i18n-keyless-react 1.1.0 → 1.1.2

package/dist/MyI18nText.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { useI18nKeyless } from "./store";
+type ComponentProps = NonNullable<ReturnType<typeof useI18nKeyless.getState>["config"]>["component"] extends React.ComponentType<infer P> ? P : never;
+/**
+ * the component should be a React component
+ *
+ * ```ts
+ * export default function MyComponent({ anyprop, can, fit, children}) {
+ *  return <Text>{children}</Text>;
+ * }
+ * ```
+ *
+ * Then you can pass MyComponent's props to i18n-keyless' MyI18nText
+ *
+ * ```ts
+ * <MyI18nText anyprop can fit>My text to translate</MyI18nText>
+ * ```
+ */
+type MyI18nTextProps = Omit<ComponentProps, "children"> & {
+    children: string;
+};
+export declare const MyI18nText: React.FC<MyI18nTextProps>;
+export {};

package/dist/MyI18nText.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useI18nKeyless } from "./store";
+export const MyI18nText = ({ children, ...textProps }) => {
+    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 = translations[children] || children;
+    const TextComponent = config.component;
+    return _jsx(TextComponent, { ...textProps, children: translatedText });
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { MyI18nText } from "./MyI18nText";
+export { init, useI18nKeyless, useCurrentLanguage, clearI18nKeylessStorage, fetchAllTranslations } from "./store";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { MyI18nText } from "./MyI18nText";
+export { init, useI18nKeyless, useCurrentLanguage, clearI18nKeylessStorage, fetchAllTranslations } from "./store";

package/dist/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "i18n-keyless-react",
+    "private": false,
+    "version": "1.1.2",
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build:lib": "tsc --project tsconfig.json && npm pack",
+        "prepublishOnly": "npm run build:lib"
+    },
+    "dependencies": {
+        "i18n-keyless-core": "1.0.0",
+        "p-queue": "^8.1.0",
+        "react": "^19.0.0",
+        "zustand": "^5.0.3"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.9.0",
+        "@types/node": "^22.5.5",
+        "@types/react": "^19.0.8",
+        "eslint": "^9.9.0",
+        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+        "eslint-plugin-react-refresh": "^0.4.9",
+        "typescript": "^5.5.3",
+        "typescript-eslint": "^8.0.1"
+    }
+}

package/dist/store.d.ts

@@ -0,0 +1,6 @@
+import { I18nConfig, Lang, TranslationStore } from "i18n-keyless-core";
+export declare const useI18nKeyless: import("zustand").UseBoundStore<import("zustand").StoreApi<TranslationStore>>;
+export declare const init: (config: I18nConfig) => Promise<void>;
+export declare function useCurrentLanguage(): Lang | null;
+export declare const fetchAllTranslations: (targetLanguage: Lang) => Promise<void>;
+export declare function clearI18nKeylessStorage(): Promise<void>;

package/dist/store.js

@@ -0,0 +1,287 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { create } from "zustand";
+// https://github.com/sindresorhus/p-queue/issues/145#issuecomment-882068004
+import PQueue from "p-queue/dist";
+import packageJson from "./package.json";
+const queue = new PQueue({ concurrency: 5 });
+queue.on("empty", () => {
+    // when each word is translated, fetch the translations for the current language
+    fetchAllTranslations(useI18nKeyless.getState().currentLanguage);
+});
+const storeKeys = {
+    uniqueId: "i18n-keyless-user-id",
+    lastRefresh: "i18n-keyless-last-refresh",
+    translations: "i18n-keyless-translations",
+    currentLanguage: "i18n-keyless-current-language",
+};
+async function getItem(key, storage) {
+    if (!storage) {
+        throw new Error("i18n-keyless: storage is not initialized");
+    }
+    if (storage.getItem) {
+        return storage.getItem(key);
+    }
+    else if (storage.get) {
+        return storage.get(key);
+    }
+    else if (storage.getString) {
+        return storage.getString(key);
+    }
+    return null;
+}
+async function setItem(key, value, storage) {
+    if (!storage) {
+        throw new Error("i18n-keyless: storage is not initialized");
+    }
+    if (storage.setItem) {
+        storage.setItem(key, value);
+    }
+    else if (storage.set) {
+        storage.set(key, value);
+    }
+}
+async function deleteItem(key, storage) {
+    if (!storage) {
+        throw new Error("i18n-keyless: storage is not initialized");
+    }
+    if (storage.delete) {
+        storage.delete(key);
+    }
+    else if (storage.del) {
+        storage.del(key);
+    }
+    else if (storage.removeItem) {
+        storage.removeItem(key);
+    }
+    else if (storage.remove) {
+        storage.remove(key);
+    }
+}
+export const useI18nKeyless = create((set, get) => ({
+    uniqueId: null,
+    lastRefresh: null,
+    translations: {},
+    currentLanguage: "fr",
+    config: null,
+    translating: {},
+    _hasHydrated: false,
+    storage: null,
+    _hydrate: async () => {
+        const storage = get().config?.storage;
+        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);
+            set({ translations: JSON.parse(translations) });
+        }
+        else {
+            console.log("i18n-keyless: _hydrate: no translations");
+        }
+        const currentLanguage = await getItem(storeKeys.currentLanguage, storage);
+        if (currentLanguage) {
+            console.log("i18n-keyless: _hydrate", currentLanguage);
+            set({ currentLanguage: currentLanguage });
+        }
+        else {
+            console.log("i18n-keyless: _hydrate: no current language");
+            set({ currentLanguage: get().config?.languages.initWithDefault });
+        }
+        const uniqueId = await getItem(storeKeys.uniqueId, storage);
+        if (uniqueId) {
+            set({ uniqueId: uniqueId });
+        }
+        const lastRefresh = await getItem(storeKeys.lastRefresh, storage);
+        if (lastRefresh) {
+            set({ lastRefresh: lastRefresh });
+        }
+    },
+    getTranslation: (text) => {
+        const translation = get().translations[text];
+        if (!translation) {
+            get().translateKey(text);
+        }
+        return translation || text;
+    },
+    setTranslations: (newTranslations) => {
+        const nextTranslations = { ...get().translations, ...newTranslations };
+        set({ translations: nextTranslations });
+        const storage = get().config?.storage;
+        if (!storage) {
+            throw new Error("i18n-keyless: storage is not initialized");
+        }
+        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;
+        }
+        const translation = get().translations[key];
+        if (translation) {
+            return;
+        }
+        const config = get().config;
+        if (!config?.addMissingTranslations) {
+            return;
+        }
+        queue.add(async () => {
+            // console.log("i18n-keyless: translateKey", key);
+            try {
+                if (get().translating[key]) {
+                    return;
+                }
+                else {
+                    set({ translating: { ...get().translating, [key]: true } });
+                }
+                if (config?.handleTranslate) {
+                    const result = await config?.handleTranslate?.(key);
+                }
+                else {
+                    const body = {
+                        key,
+                        languages: config.languages.supported,
+                        primaryLanguage: config.languages.primary,
+                    };
+                    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: {
+                            "Content-Type": "application/json",
+                            Authorization: `Bearer ${config.API_KEY}`,
+                            unique_id: get().uniqueId || "",
+                            Version: packageJson.version,
+                        },
+                        body: JSON.stringify(body),
+                    }).then((res) => res.json());
+                    if (response.message) {
+                        console.warn("i18n-keyless: ", response.message);
+                    }
+                }
+                set({ translating: { ...get().translating, [key]: false } });
+                return;
+            }
+            catch (error) {
+                console.error("i18n-keyless: Error translating key:", error);
+                set({ translating: { ...get().translating, [key]: false } });
+            }
+        }, { priority: 1, id: key });
+    },
+    setLanguage: async (lang) => {
+        console.log("i18n-keyless: setLanguage", lang);
+        const config = get().config;
+        const sanitizedLang = !config || !config.languages.supported.includes(lang) ? config?.languages.fallback : lang;
+        set({ currentLanguage: sanitizedLang });
+        if (config?.storage) {
+            setItem(storeKeys.currentLanguage, sanitizedLang, config.storage);
+        }
+        // Only fetch translations if the new language is not the primary language
+        if (lang !== config?.languages.primary) {
+            await fetchAllTranslations(lang);
+        }
+    },
+}));
+export const init = async (config) => {
+    // console.log("i18n-keyless: init", config);
+    if (!config.languages) {
+        throw new Error("i18n-keyless: languages is required");
+    }
+    if (!config.languages.primary) {
+        throw new Error("i18n-keyless: primary is required");
+    }
+    if (!config.languages.initWithDefault) {
+        config.languages.initWithDefault = config.languages.primary;
+    }
+    if (!config.languages.fallback) {
+        config.languages.fallback = config.languages.primary;
+    }
+    if (!config.languages.supported.includes(config.languages.initWithDefault)) {
+        config.languages.supported.push(config.languages.initWithDefault);
+    }
+    if (!config.component) {
+        throw new Error("i18n-keyless: component is required");
+    }
+    if (!config.storage) {
+        throw new Error("i18n-keyless: storage is required. You can use react-native-mmkv, @react-native-async-storage/async-storage, or window.localStorage, or any storage that has a getItem, setItem, removeItem, or get, set, and remove method");
+    }
+    if (!config.getAllTranslations || !config.handleTranslate) {
+        if (!config.API_KEY) {
+            if (!config.API_URL) {
+                throw new Error("i18n-keyless: you didn't provide an API_KEY nor an API_URL nor a handleTranslate + getAllTranslations function. You need to provide one of them to make i18n-keyless work");
+            }
+        }
+    }
+    if (config.addMissingTranslations !== false) {
+        // default to true
+        config.addMissingTranslations = true;
+    }
+    useI18nKeyless.setState({ config });
+    await useI18nKeyless.getState()._hydrate();
+    const currentLanguage = useI18nKeyless.getState().currentLanguage;
+    config.onInit?.(currentLanguage);
+};
+export function useCurrentLanguage() {
+    const currentLanguage = useI18nKeyless((state) => state.currentLanguage);
+    return currentLanguage;
+}
+export const fetchAllTranslations = async (targetLanguage) => {
+    // console.log("i18n-keyless: fetchAllTranslations", targetLanguage);
+    const store = useI18nKeyless.getState();
+    const config = store.config;
+    if (!config) {
+        console.error("i18n-keyless: No config found");
+        return;
+    }
+    if (config.languages.primary === targetLanguage) {
+        // console.log("i18n-keyless: using primary language");
+        return;
+    }
+    try {
+        const response = config.getAllTranslations
+            ? await config.getAllTranslations()
+            : await fetch(`${config.API_URL || "https://api.i18n-keyless.com"}/translate/${targetLanguage}?last_refresh=${store.lastRefresh}`, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${config.API_KEY}`,
+                    Version: packageJson.version,
+                    unique_id: store.uniqueId || "",
+                },
+            }).then((res) => res.json());
+        if (!response.ok) {
+            throw new Error(response.error);
+        }
+        if (response.message) {
+            console.warn("i18n-keyless: ", response.message);
+        }
+        if (response.data.uniqueId) {
+            useI18nKeyless.setState({ uniqueId: response.data.uniqueId });
+            setItem(storeKeys.uniqueId, response.data.uniqueId, config.storage);
+        }
+        if (response.data.lastRefresh) {
+            useI18nKeyless.setState({ lastRefresh: response.data.lastRefresh });
+            setItem(storeKeys.lastRefresh, response.data.lastRefresh, config.storage);
+        }
+        const data = response.data;
+        useI18nKeyless.getState().setTranslations(data.translations);
+    }
+    catch (error) {
+        console.error("i18n-keyless: Batch translation error:", error);
+    }
+};
+export async function clearI18nKeylessStorage() {
+    useI18nKeyless.setState({
+        translations: {},
+        currentLanguage: "fr",
+        config: null,
+    });
+    const config = useI18nKeyless.getState().config;
+    if (config?.storage) {
+        for (const key of Object.keys(storeKeys)) {
+            deleteItem(key, config.storage);
+        }
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "i18n-keyless-react",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,7 +10,7 @@
     "dist"
   ],
   "scripts": {
-    "build:lib": "tsc --project ../../tsconfig.json && npm pack",
+    "build:lib": "tsc --project tsconfig.json && npm pack",
     "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {