Merge pull request #188 from aruznieto/i18n

feat: i18n - dynamic import on build time

Author: dec0dOS

frontend/public/locales/en/common.json

@@ -63,5 +63,6 @@
   "optional": "Optional",
   "destination": "Destination",
   "username": "Username",
-  "password": "Password"
+  "password": "Password",
+  "languageName": "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",
+  "languageName": "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 "generated/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>
-            <option value={"es-ES"}>Español</option>
+            {localesList.map((locale) => (
+              <option key={locale.code} value={locale.code}>
+                {locale.name}
+              </option>
+            ))}
           </Select>
         </Grid>
       </AccordionDetails>

frontend/src/generated/localesList.json

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

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"]
 }

frontend/vite-plugin-generate-locales.js

@@ -0,0 +1,51 @@
+import fs from "fs";
+import path from "path";
+import * as url from "url";
+
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+
+export default function GenerateLocalesPlugin() {
+  return {
+    name: "generate-locales",
+    buildStart() {
+      const localesDir = path.resolve(__dirname, "public", "locales");
+
+      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 = JSON.parse(
+                fs.readFileSync(commonFilePath, "utf-8")
+              );
+              return {
+                code: locale,
+                name: commonFile.languageName || locale,
+              };
+            }
+            return {
+              code: locale,
+              name: locale,
+            };
+          });
+
+        // Save the array to a JSON file
+        const outputPath = path.resolve(
+          __dirname,
+          "src",
+          "generated",
+          "localesList.json"
+        );
+        fs.writeFileSync(outputPath, JSON.stringify(localesList, null, 2));
+
+        console.log(`Locales list saved to ${outputPath}`);
+      } else {
+        console.error("Locales directory not found.");
+      }
+    },
+  };
+}

frontend/vite.config.js

@@ -1,6 +1,7 @@
 import process from "node:process";
 import { defineConfig, searchForWorkspaceRoot } from "vite";
 import react from "@vitejs/plugin-react";
+import GenerateLocalesPlugin from "./vite-plugin-generate-locales.js";
 
 export default defineConfig({
   base: "/app",
@@ -21,11 +22,12 @@ export default defineConfig({
       components: "/src/components",
       utils: "/src/utils",
       external: "/src/external",
+      generated: "/src/generated",
     },
   },
   build: {
     outDir: "build",
     chunkSizeWarningLimit: 1000,
   },
-  plugins: [react()],
+  plugins: [react(), GenerateLocalesPlugin()],
 });