refactor & fix regex

browser.js

@@ -1,6 +1,6 @@
 const { getTranslations, isBrowser, createLanguageSelect, setOptions } = require("./index.js");
 
-if (isBrowser) {
+if (isBrowser()) {
   window.weployScriptTag = document.currentScript;
 
   // get options

package.json

@@ -29,9 +29,6 @@
   },
   "homepage": "https://github.com/desentio/weploy-translate#readme",
   "dependencies": {
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.11",
@@ -41,6 +38,10 @@
     "css-minimizer-webpack-plugin": "^6.0.0",
     "mini-css-extract-plugin": "^2.8.1",
     "raw-loader": "^4.0.2",
-    "terser-webpack-plugin": "^5.3.10"
+    "terser-webpack-plugin": "^5.3.10",
+    "circular-dependency-plugin": "^5.2.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }

utils/compressions.js

@@ -0,0 +1,23 @@
+function compressToArrayBuffer(string, encoding) {
+  const byteArray = new TextEncoder().encode(string);
+  const cs = new CompressionStream(encoding);
+  const writer = cs.writable.getWriter();
+  writer.write(byteArray);
+  writer.close();
+  return new Response(cs.readable).arrayBuffer();
+}
+
+function decompressArrayBuffer(byteArray, encoding) {
+  const cs = new DecompressionStream(encoding);
+  const writer = cs.writable.getWriter();
+  writer.write(byteArray);
+  writer.close();
+  return new Response(cs.readable).arrayBuffer().then(function (arrayBuffer) {
+    return new TextDecoder().decode(arrayBuffer);
+  });
+}
+
+module.exports = {
+  compressToArrayBuffer,
+  decompressArrayBuffer,
+};

utils/configs.js

@@ -0,0 +1,69 @@
+// check if code runs on server or client
+const isBrowser = () => typeof window !== 'undefined'
+const API_URL = "https://api.tasksource.io"
+
+/** Translation Options */
+var weployOptions;
+
+function getWeployOptions() {
+  if (isBrowser()) {
+    if (!window.weployOptions) {
+      setWeployOptions({})
+    }
+    return window.weployOptions;
+  } else {
+    if (!weployOptions) {
+      setWeployOptions({})
+    }
+    return weployOptions;
+  }
+}
+
+function setWeployOptions(value = {}) {
+  if (isBrowser()) {
+    window.weployOptions = {
+      ...(window.weployOptions || {}),
+      ...value
+    };
+  } else {
+    weployOptions = {
+      ...(weployOptions || {}),
+      ...value
+    };
+  }
+}
+
+/** Active Language */
+var weployActiveLang;
+
+function getWeployActiveLang() {
+  if (isBrowser()){ 
+    if (!window.weployActiveLang) {
+      setWeployActiveLang(null)
+    }
+    return window.weployActiveLang;
+  } else {
+    if (!weployActiveLang) {
+      setWeployActiveLang(null)
+    }
+    return weployActiveLang;
+  }
+}
+
+function setWeployActiveLang(language) {
+  if (isBrowser()) {
+    window.weployActiveLang = language
+  } else {
+    weployActiveLang = language
+  }
+}
+
+module.exports = {
+  isBrowser,
+  getWeployOptions,
+  setWeployOptions,
+  getWeployActiveLang,
+  setWeployActiveLang,
+  API_URL,
+  weployOptions
+}

utils/debounce.js

@@ -0,0 +1,35 @@
+const { isBrowser } = require("./configs");
+
+function getWeployTimer() {
+  if (!isBrowser()) return null;
+  if (!window.weployTimer) {
+    setWeployTimer(null);
+  }
+  return window.weployTimer;
+}
+
+function setWeployTimer(value) {
+  if (!isBrowser()) return null;
+  window.weployTimer = value;
+}
+
+const debounce = (mainFunction, delay = 2000) => {
+  if (!isBrowser()) return mainFunction();
+
+  // Return an anonymous function that takes in any number of arguments
+  return function (...args) {
+    // Clear the previous timer to prevent the execution of 'mainFunction'
+    clearTimeout(getWeployTimer());
+
+    // Set a new timer that will execute 'mainFunction' after the specified delay
+    setWeployTimer(setTimeout(() => {
+      mainFunction(...args);
+    }, delay));
+  };
+};
+
+module.exports = {
+  debounce,
+  getWeployTimer,
+  setWeployTimer
+}

utils/delay.js

@@ -0,0 +1,5 @@
+function delay(time) {
+  return new Promise(resolve => setTimeout(resolve, time));
+}
+
+module.exports = delay;

utils/AllWeployLanguagesList.js → utils/languages/allWeployLanguagesList.js

@@ -1,5 +1,5 @@
 
-const AllWeployLanguagesList = [
+const allWeployLanguagesList = [
   { "label": "Afar", "lang": "aa" },
   { "label": "Avestan", "lang": "ae" },
   { "label": "Afrikaans", "lang": "af" },
@@ -85,4 +85,4 @@ const AllWeployLanguagesList = [
   { "label": "Chinese", "lang": "zh" },
 ];
 
-module.exports = AllWeployLanguagesList;
+module.exports = allWeployLanguagesList;

utils/languages/fetchLanguageList.js

@@ -0,0 +1,46 @@
+const { isBrowser, API_URL, getWeployOptions, setWeployActiveLang, setWeployOptions } = require("../configs");
+const { renderWeploySelectorState } = require("../selector/renderWeploySelectorState");
+
+async function fetchLanguageList(apiKey) {
+  const options = getWeployOptions();
+  const langs = options.definedLanguages;
+  if (langs && Array.isArray(langs) && langs.length) return langs;
+  if (window.weployError) return [];
+
+  const availableLangs = await fetch(API_URL + "/weploy-projects/by-api-key", {
+    headers: {
+      "X-Api-Key": apiKey
+    }
+  })
+  .then((res) => res.json())
+  .then((res) => {
+    if (res.error) {
+      throw new Error(res.error?.message || res.error || "Error fetching languages")
+    }
+    const languages =  [res.language, ...res.allowedLanguages]
+    const languagesWithFlagAndLabel = languages.map((lang, index) => ({
+      lang,
+      flag: (res.flags || [])?.[index] || lang, // fallback to text if flag unavailable
+      label: (res.labels || [])?.[index] || lang // fallback to text if flag unavailable
+    }))
+    setWeployOptions({ definedLanguages: languagesWithFlagAndLabel })
+    setWeployActiveLang(languagesWithFlagAndLabel[0].lang)
+    return languagesWithFlagAndLabel
+  })
+  .catch((err) => {
+    console.error(err);
+    // if (isBrowser()) window.weployOptions.definedLanguages = [] // store in global scope
+    // else weployOptions.definedLanguages = [] // for npm package
+    if (isBrowser()) {
+      window.weployError = err.message;
+      renderWeploySelectorState({ shouldUpdateActiveLang: false });
+    }
+    return [];
+  })
+
+  return availableLangs
+}
+
+module.exports = {
+  fetchLanguageList,
+}

utils/languages/getSelectedLanguage.js

@@ -0,0 +1,63 @@
+const { getWeployOptions } = require("../configs");
+const { fetchLanguageList } = require("./fetchLanguageList");
+
+function getSelectedLanguage() {
+  return new Promise((resolve, reject) => {
+    const search = window.location.search;
+    const params = new URLSearchParams(search);
+    const paramsLang = params.get('lang');
+    const localStorageLang = localStorage.getItem("language");
+
+    if (paramsLang && (paramsLang != localStorageLang)) {
+      localStorage.setItem("language", paramsLang);
+    }
+
+    let language = paramsLang || localStorageLang;
+    if (language) {
+      resolve(language); // Resolve the promise
+    }
+  });
+}
+
+async function getLanguageFromLocalStorage() {
+  const optsArgs = getWeployOptions()
+  const apiKey = optsArgs.apiKey
+
+  const search = window.location.search;
+  const params = new URLSearchParams(search);
+  const paramsLang = params.get('lang');
+  const localStorageLang = localStorage.getItem("language");
+
+  if (paramsLang && (paramsLang != localStorageLang)) {
+    localStorage.setItem("language", paramsLang);
+  }
+  let language = paramsLang || localStorageLang;
+
+  const availableLangs = await fetchLanguageList(apiKey);
+  if (!availableLangs.find(l => l.lang == language)) {
+    saveLanguageToLocalStorage(availableLangs, optsArgs.useBrowserLanguage);
+  }
+  return language; // Get the language from local storage
+}
+
+function saveLanguageToLocalStorage(availableLangs = [], useBrowserLang = true) {
+  const language = window.navigator.language; // Get browser language (usually in this format: en-US)
+  const langIsoCode = language && language.length >= 2 ? language.substring(0, 2) : null // Get the language ISO code
+  const langInAvailableLangs = availableLangs.find(lang => lang.lang == langIsoCode) //  Check if the language is in the available languages
+
+  // if no available languages, return
+  if (!availableLangs.length) {
+    return;
+  }
+
+  const langInAvailableLangsOrFirst = langInAvailableLangs?.lang || availableLangs[0].lang // If the language is not in the available languages, use the first available language
+  const langToSave = useBrowserLang ? langInAvailableLangsOrFirst : availableLangs[0].lang // If useBrowserLang is true, use the language from the browser, otherwise use the first available language
+  // Save the language to local storage
+  localStorage.setItem("language", langToSave);
+}
+
+module.exports = {
+  getSelectedLanguage,
+  getLanguageFromLocalStorage,
+  saveLanguageToLocalStorage
+}