feat: add support for dynamic translation fetch (close #638)

orestbida · Feb 17, 2024 · 6b865f1 · 6b865f1
1 parent dd67324
commit 6b865f1
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 25 deletions.
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
diff --git a/docs/reference/configuration-reference.md b/docs/reference/configuration-reference.md
@@ -675,12 +675,18 @@ If one or more services are enabled, then the entire category will be treated as
 Define your language settings and the translation(s).
 
 - **Type**:
-    ```javascript
-    {
+    ```typescript
+    interface Language {
         default: string
         autoDetect?: string
         rtl?: string | string[]
-        translations: Translations
+        translations: {
+            [locale: string]:
+                Translation
+                | string
+                | (() => Translation)
+                | (() => Promise<Translation>)
+        }
     }
     ```
 
@@ -718,7 +724,7 @@ List of languages that should use the RTL layout.
 
 - **Type**: `string | string[]`
 - **Example**: <br>
-    ```javascript
+    ```javascript {4}
     CookieConsent.run({
         language: {
             default: 'en',
@@ -738,12 +744,13 @@ List of languages that should use the RTL layout.
 Define the translation(s) content.
 
 - **Type**:
-    ```javascript
-    {
-        [language: string]: string | {
-            consentModal: ConsentModal,
-            preferencesModal: PreferencesModal
-        }
+    ```typescript
+    interface Translations {
+        [locale: string]:
+            Translation
+            | string
+            | (() => Translation)
+            | (() => Promise<Translation>)
     }
     ```
 - **Details**:
@@ -783,6 +790,21 @@ Define the translation(s) content.
     })
     ```
 
+    You can also fetch a translation asynchronously:
+    ```javascript {5-8}
+    CookieConsent.run({
+        language: {
+            default: 'en',
+            translations: {
+                en: async () => {
+                    const res = fetch('path-to-json-translation');
+                    return await res.json();
+                }
+            }
+        }
+    })
+    ```
+
 ### <span style="opacity: .6">[translation]</span>.consentModal<span class="required" data-label="required"></span>
 
 - **Type**:

diff --git a/src/utils/language.js b/src/utils/language.js
@@ -6,7 +6,8 @@ import {
     addClass,
     removeClass,
     isString,
-    isArray
+    isArray,
+    isFunction
 } from './general';
 
 /**
@@ -109,25 +110,22 @@ export const loadTranslationData = async (desiredLanguageCode) => {
         ? desiredLanguageCode
         : getCurrentLanguageCode();
 
-    let currentTranslation = state._allTranslations[currentLanguageCode];
-
-    if (!currentTranslation)
-        return false;
+    let translationData = state._allTranslations[currentLanguageCode];
 
     /**
-     * If translation is a string, fetch the external json file and replace
-     * the string (path to json file) with the parsed object
+     * Fetch translation if a string or function is provided
      */
-    if (isString(currentTranslation)) {
-        const fetchedTranslation = await fetchJson(currentTranslation);
-
-        if (!fetchedTranslation)
-            return false;
+    if (isString(translationData)) {
+        translationData = await fetchJson(translationData);
+    } else if (isFunction(translationData)) {
+        translationData = await translationData();
+    }
 
-        currentTranslation = fetchedTranslation;
+    if (!translationData) {
+        return false;
     }
 
-    state._currentTranslation = currentTranslation;
+    state._currentTranslation = translationData;
     setCurrentLanguageCode(currentLanguageCode);
 
     _log('CookieConsent [LANG]: set language: "' + currentLanguageCode + '"');

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -528,7 +528,12 @@ declare namespace CookieConsent {
              */
             autoDetect?: 'document' | 'browser'
 
-            translations: {[key: string]: Translation | string}
+            translations: {
+                [locale: string]: Translation
+                | string
+                | (() => Translation)
+                | (() => Promise<Translation>)
+            }
         }
     }