From 69784959637f6a53458e15d9a42d48de751c72f3 Mon Sep 17 00:00:00 2001 From: Andres Date: Fri, 20 Oct 2023 11:10:45 +0200 Subject: [PATCH] feat: dynamic import on build time --- frontend/public/locales/en/common.json | 3 +- frontend/public/locales/es-ES/common.json | 3 +- frontend/src/components/Settings/Settings.jsx | 14 +++---- frontend/src/i18n.js | 5 ++- frontend/src/utils/localesList.json | 10 +++++ frontend/tsconfig.json | 3 +- generateLocalesList.js | 40 +++++++++++++++++++ package.json | 4 +- 8 files changed, 67 insertions(+), 15 deletions(-) create mode 100644 frontend/src/utils/localesList.json create mode 100644 generateLocalesList.js diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index 3dc0905..f23ee21 100644 --- a/frontend/public/locales/en/common.json +++ b/frontend/public/locales/en/common.json @@ -63,5 +63,6 @@ "optional": "Optional", "destination": "Destination", "username": "Username", - "password": "Password" + "password": "Password", + "yourLanguage": "English" } diff --git a/frontend/public/locales/es-ES/common.json b/frontend/public/locales/es-ES/common.json index f314e3c..2bf8ef6 100644 --- a/frontend/public/locales/es-ES/common.json +++ b/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" } diff --git a/frontend/src/components/Settings/Settings.jsx b/frontend/src/components/Settings/Settings.jsx index 0ee47aa..08774ad 100644 --- a/frontend/src/components/Settings/Settings.jsx +++ b/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() { diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js index fd27dd5..8d5d959 100644 --- a/frontend/src/i18n.js +++ b/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", }, diff --git a/frontend/src/utils/localesList.json b/frontend/src/utils/localesList.json new file mode 100644 index 0000000..35f6fb1 --- /dev/null +++ b/frontend/src/utils/localesList.json @@ -0,0 +1,10 @@ +[ + { + "code": "en", + "name": "English" + }, + { + "code": "es-ES", + "name": "Español" + } +] diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 2c8bc1d..39c41ba 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -5,7 +5,8 @@ "baseUrl": "src", "module": "NodeNext", "moduleResolution": "NodeNext", - "jsx": "preserve" + "jsx": "preserve", + "resolveJsonModule": true }, "include": ["src"] } diff --git a/generateLocalesList.js b/generateLocalesList.js new file mode 100644 index 0000000..63a4fda --- /dev/null +++ b/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."); +} diff --git a/package.json b/package.json index 679dc8a..d789026 100644 --- a/package.json +++ b/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\"", - "build": "cd frontend && cross-env GENERATE_SOURCEMAP=false yarn build", + "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": "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"