Identifying Missing Translations in JSX Files with Node.js

Internationalization is a crucial aspect of modern web development, allowing applications to support multiple languages. However, sometimes we forget to add the translations for all strings. In this blog post, we'll create a Node.js script that helps identify missing translations in your JSX files.

Setting Up the Script

Here's a Node.js script that uses regular expressions to search for translation keys in JSX files and compares them against a reference set of keys (in this case, from the English language file en.json):

const fs = require('fs');
const path = require('path');
const glob = require('glob');

// Load the keys from en.json
const enJson = require('../lang/en.json');
const enKeys = Object.keys(enJson);

// Define the directory where your .jsx files are located
const jsxDirectory = './resources/js';

// Use glob to get all .jsx files in the directory
const files = glob.sync(path.join(jsxDirectory, '**/*.jsx'));

let missingTranslations = [];

files.forEach((file) => {
    const content = fs.readFileSync(file, 'utf8');

    // This regex matches translation keys used like: t('key')
    // Added \b to ensure the match starts with t('
    const singleQuoteMatches = content.match(/\bt\('([^']*)'\)/g);
    const doubleQuoteMatches = content.match(/\bt\("([^"]*)"\)/g);

    // Combine the matches
    const matches = [...(singleQuoteMatches || []), ...(doubleQuoteMatches || [])];

    // Remove duplicates
    const uniqueMatches = [...new Set(matches)];

    if (uniqueMatches) {
        uniqueMatches.forEach((match) => {
            // Extract the key from the match
            const key = match.slice(3, -2);

            // If the key is not in enKeys, add it to missingTranslations
            if (!enKeys.includes(key)) {
                missingTranslations.push(key);
            }
        });
    }
});

if (missingTranslations.length > 0) {
    console.log("Missing English translations:", missingTranslations);
    console.log("Total:", missingTranslations.length);
}

How to Use the Script

Install Dependencies: Ensure you have the required npm packages installed. Run the following command in your terminal:
```
npm install glob
```
Run the Script: Execute the script using the following command:
```
node script.cjs
```
Replace script.cjs with the actual filename if you've saved the script with a different name.
Review Results: The script will output the keys of missing translations along with the total count. Review the list to identify which translations need to be added to your language files.

Conclusion

This Node.js script provides a simple yet effective way to identify missing translations in your JSX files. By comparing the keys used in your code with a reference set, you can ensure that your application's internationalization remains comprehensive and up-to-date.

Ideally you would run this script as part of your CI/CD pipeline, so that it can automatically identify missing translations and fail the build if any are found. This ensures that your application's internationalization is always complete and up-to-date. In my next blog post, I'll show you how to integrate this script into your CI/CD pipeline using GitHub Actions.