feat: dynamic import on build time

frontend/public/locales/en/common.json

@@ -63,5 +63,6 @@
   "optional": "Optional",
   "destination": "Destination",
   "username": "Username",
-  "password": "Password"
+  "password": "Password",
+  "yourLanguage": "English"
 }

frontend/public/locales/es-ES/common.json

@@ -63,5 +63,6 @@
   "optional": "Opcional",
   "destination": "Destino",
   "username": "Nombre de usuario",
-  "password": "Contraseña"
+  "password": "Contraseña",
+  "yourLanguage": "Español"
 }

frontend/src/components/Settings/Settings.jsx

@@ -2,19 +2,14 @@ import {
   Accordion,
   AccordionSummary,
   AccordionDetails,
-  Checkbox,
-  Divider,
   Grid,
   Typography,
-  TextField,
   Select,
 } from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 
-import API from "utils/API";
-import { parseValue, replaceValue, setValue } from "utils/ChangeHelper";
-
 import { useTranslation } from "react-i18next";
+import localesList from "../../utils/localesList.json";
 
 function Settings() {
   const { t, i18n } = useTranslation();
@@ -31,8 +26,11 @@ function Settings() {
       <AccordionDetails>
         <Grid item>
           <Select native value={i18n.language} onChange={handleChange()}>
-            <option value={"en"}>English</option>
+            {localesList.map((locale) => (
-            <option value={"es-ES"}>Español</option>
+              <option key={locale.code} value={locale.code}>
+                {locale.name}
+              </option>
+            ))}
           </Select>
         </Grid>
       </AccordionDetails>

frontend/src/i18n.js

@@ -3,7 +3,8 @@ import languageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 import Backend from "i18next-http-backend";
 
-const userLanguage = window.navigator.language;
+import localesList from "./utils/localesList.json";
+const supportedLngs = localesList.map((locale) => locale.code);
 
 i18n
   .use(languageDetector)
@@ -23,7 +24,7 @@ i18n
     react: {
       useSuspense: true,
     },
-    supportedLngs: ["en", "es-ES"],
+    supportedLngs,
     backend: {
       loadPath: "/locales/{{lng}}/{{ns}}.json",
     },

frontend/src/utils/localesList.json

@@ -0,0 +1,10 @@
+[
+  {
+    "code": "en",
+    "name": "English"
+  },
+  {
+    "code": "es-ES",
+    "name": "Español"
+  }
+]

frontend/tsconfig.json

@@ -5,7 +5,8 @@
     "baseUrl": "src",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "resolveJsonModule": true
   },
   "include": ["src"]
 }

generateLocalesList.js

@@ -0,0 +1,40 @@
+const fs = require("fs");
+const path = require("path");
+
+const localesDir = path.join(__dirname, "frontend", "public", "locales"); // Adjust the path if necessary
+
+if (fs.existsSync(localesDir)) {
+  const localesList = fs
+    .readdirSync(localesDir)
+    .filter((file) => {
+      return fs.statSync(path.join(localesDir, file)).isDirectory();
+    })
+    .map((locale) => {
+      const commonFilePath = path.join(localesDir, locale, "common.json");
+      if (fs.existsSync(commonFilePath)) {
+        const commonFile = require(commonFilePath);
+        return {
+          code: locale,
+          name: commonFile.yourLanguage || locale,
+        };
+      }
+      return {
+        code: locale,
+        name: locale,
+      };
+    });
+
+  // Save the array to a JSON file
+  const outputPath = path.join(
+    __dirname,
+    "frontend",
+    "src",
+    "utils",
+    "localesList.json"
+  );
+  fs.writeFileSync(outputPath, JSON.stringify(localesList, null, 2));
+
+  console.log(`Locales list saved to ${outputPath}`);
+} else {
+  console.error("Locales directory not found.");
+}

package.json

@@ -13,8 +13,8 @@
     "format": "yarn prettier",
     "format:fix": "yarn prettier --write .",
     "lint": "yarn workspaces foreach --all --parallel run lint",
-    "dev": "concurrently \"cd frontend && cross-env FAST_REFRESH=true yarn start\" \"cd backend && cross-env NODE_ENV=development ZU_DEFAULT_USERNAME=admin ZU_DEFAULT_PASSWORD=zero-ui nodemon ./bin/www --ignore data/db.json\"",
+    "dev": "concurrently \"node generateLocalesList.js && cd frontend && cross-env FAST_REFRESH=true yarn start\" \"cd backend && cross-env NODE_ENV=development ZU_DEFAULT_USERNAME=admin ZU_DEFAULT_PASSWORD=zero-ui nodemon ./bin/www --ignore data/db.json\"",
-    "build": "cd frontend && cross-env GENERATE_SOURCEMAP=false yarn build",
+    "build": "node generateLocalesList.js && cd frontend && cross-env GENERATE_SOURCEMAP=false yarn build",
     "prod": "cd backend && cross-env NODE_ENV=production ZU_SECURE_HEADERS=false yarn start",
     "release": "standard-version && git push --follow-tags origin main && git add CHANGELOG.md",
     "commit": "yarn git-cz"