feat(i18n): add new script for checking missing translations

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
   },
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: './tsconfig.json',
+    project: ['./tsconfig.json', './scripts/tsconfig.json'],
     tsconfigRootDir: './',
   },
   settings: {

.gitignore

@@ -1,4 +1,5 @@
 build
+bin
 # Logs
 logs
 *.log

package.json

@@ -75,6 +75,7 @@
     "@types/validator": "~13.0.0",
     "@typescript-eslint/eslint-plugin": "~2.34.0",
     "@typescript-eslint/parser": "~2.34.0",
+    "chalk": "^4.0.0",
     "commitizen": "~4.1.2",
     "commitlint-config-cz": "~0.13.0",
     "cross-env": "~7.0.0",
@@ -106,16 +107,17 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "commit": "npx git-cz",
-    "start": "react-scripts start",
+    "start": "yarn translation:check && react-scripts start",
     "build": "react-scripts build",
     "prepublishOnly": "npm run build",
-    "test": "react-scripts test --detectOpenHandles",
+    "test": "yarn translation:check && react-scripts test --detectOpenHandles",
     "test:ci": "cross-env CI=true react-scripts test --passWithNoTests",
-    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \"scripts/**/*.{js,ts}\"",
+    "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \"scripts/**/*.{js,ts}\" --fix",
     "lint-staged": "lint-staged",
     "commitlint": "commitlint",
-    "coveralls": "npm run test:ci -- --coverage --watchAll=false && cat ./coverage/lcov.info"
+    "coveralls": "npm run test:ci -- --coverage --watchAll=false && cat ./coverage/lcov.info",
+    "translation:check": "cd scripts && tsc && node ../bin/scripts/checkMissingTranslations.js"
   },
   "browserslist": {
     "production": [

scripts/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '../.eslintrc.js',
+  rules: {
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
+  }
+}

scripts/checkMissingTranslations.ts

@@ -0,0 +1,78 @@
+import chalk from 'chalk'
+import { ResourceKey } from 'i18next'
+
+import resources from '../src/locales'
+
+const error = chalk.bold.red
+const warning = chalk.keyword('orange')
+const success = chalk.keyword('green')
+
+const checkRecursiveTranslation = (
+  comparingLanguage: string,
+  searchingPath: string[],
+  defaultLanguageObject: ResourceKey,
+  comparingLanguageObject: ResourceKey,
+) => {
+  if (typeof defaultLanguageObject === 'string' || typeof comparingLanguageObject === 'string') {
+    if (typeof defaultLanguageObject === 'object') {
+      console.log(
+        warning(
+          `Found a string for path ${searchingPath.join(
+            '-->',
+          )} and language ${comparingLanguage} while is and object for the default language`,
+        ),
+      )
+    }
+    return
+  }
+  const defaultKeys: string[] = Object.keys(defaultLanguageObject)
+  const translatedKeys: string[] = Object.keys(comparingLanguageObject)
+  if (defaultKeys.length === 0 || translatedKeys.length === 0) {
+    return
+  }
+  defaultKeys.forEach((key) => {
+    if (!comparingLanguageObject[key]) {
+      console.warn(
+        warning(
+          `The key ${key} is not present for path ${searchingPath.join(
+            '-->',
+          )} and language ${comparingLanguage}`,
+        ),
+      )
+    } else {
+      checkRecursiveTranslation(
+        comparingLanguage,
+        [...searchingPath, key],
+        defaultLanguageObject[key],
+        comparingLanguageObject[key],
+      )
+    }
+  })
+}
+
+const run = () => {
+  const languages = Object.keys(resources)
+  const defaultLanguage = 'en'
+  console.log(
+    success(
+      '🏁 Start finding translation problem comparing all languages with the default one (English)',
+    ),
+  )
+  console.log('')
+  if (!resources[defaultLanguage]) {
+    console.log(error('We have a big problem.... the english language is not found!'))
+    process.exit(1)
+  }
+
+  languages.forEach((language) => {
+    if (language === defaultLanguage) {
+      return
+    }
+    console.log(success(`Checking ${language}`))
+    console.log('')
+    checkRecursiveTranslation(language, [language], resources[defaultLanguage], resources[language])
+    console.log('')
+  })
+}
+
+run()

scripts/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "include": ["./checkMissingTranslations.ts"],
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../bin",
+    "target": "es5"
+  }
+}

src/i18n.ts

@@ -2,64 +2,7 @@ import i18n from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next } from 'react-i18next'
 
-import translationAR from './locales/ar/translations'
-import translationDE from './locales/de/translations'
-import translationEnUs from './locales/enUs/translations'
-import translationES from './locales/es/translations'
-import translationFR from './locales/fr/translations'
-import translationID from './locales/id/translations'
-import translationIT from './locales/it/translations'
-import translationJA from './locales/ja/translations'
-import translationPtBR from './locales/ptBr/translations'
-import translationRU from './locales/ru/translations'
-import translationZhCN from './locales/zhCN/translations'
-
-const resources: { [language: string]: any } = {
-  it: {
-    name: 'Italian',
-    translation: translationIT,
-  },
-  ar: {
-    name: 'Arabic',
-    translation: translationAR,
-  },
-  de: {
-    name: 'German',
-    translation: translationDE,
-  },
-  en: {
-    name: 'English, American',
-    translation: translationEnUs,
-  },
-  es: {
-    name: 'Spanish',
-    translation: translationES,
-  },
-  fr: {
-    name: 'French',
-    translation: translationFR,
-  },
-  id: {
-    name: 'Indonesian',
-    translation: translationID,
-  },
-  ja: {
-    name: 'Japanese',
-    translation: translationJA,
-  },
-  ptBR: {
-    name: 'Portuguese',
-    translation: translationPtBR,
-  },
-  ru: {
-    name: 'Russian',
-    translation: translationRU,
-  },
-  zhCN: {
-    name: 'Chinese',
-    translation: translationZhCN,
-  },
-}
+import resources from './locales'
 
 i18n
   // load translation using xhr -> see /public/locales

src/locales/index.ts

@@ -0,0 +1,62 @@
+import { Resource } from 'i18next'
+
+import translationAR from './ar/translations'
+import translationDE from './de/translations'
+import translationEnUs from './enUs/translations'
+import translationES from './es/translations'
+import translationFR from './fr/translations'
+import translationID from './id/translations'
+import translationIT from './it/translations'
+import translationJA from './ja/translations'
+import translationPtBR from './ptBr/translations'
+import translationRU from './ru/translations'
+import translationZhCN from './zhCN/translations'
+
+const resources: Resource = {
+  it: {
+    name: 'Italian',
+    translation: translationIT,
+  },
+  ar: {
+    name: 'Arabic',
+    translation: translationAR,
+  },
+  de: {
+    name: 'German',
+    translation: translationDE,
+  },
+  en: {
+    name: 'English, American',
+    translation: translationEnUs,
+  },
+  es: {
+    name: 'Spanish',
+    translation: translationES,
+  },
+  fr: {
+    name: 'French',
+    translation: translationFR,
+  },
+  id: {
+    name: 'Indonesian',
+    translation: translationID,
+  },
+  ja: {
+    name: 'Japanese',
+    translation: translationJA,
+  },
+  ptBR: {
+    name: 'Portuguese',
+    translation: translationPtBR,
+  },
+  ru: {
+    name: 'Russian',
+    translation: translationRU,
+  },
+  zhCN: {
+    name: 'Chinese',
+    translation: translationZhCN,
+  },
+}
+
+export default resources