chore: Run i18n watcher concurrently with dev server

google-labs-jules[bot] · google-labs-jules[bot] · commit 93c9067842b2 · 2025-05-27T11:35:02.000Z
Adds `npm-run-all` to enable the i18n namespace index watcher script (`dev:i18n-watch`) to run in parallel with the Vite development server (`dev:vite`) using a single command.

The `package.json` scripts have been updated:
- The original `start` script (running `vite`) has been renamed to `dev:vite`.
- A new `dev` script has been added: `"dev": "npm-run-all --parallel dev:vite dev:i18n-watch"`.

You can now run `npm run dev` to start both the Vite server and the i18n watcher, streamlining the development setup.
diff --git a/package.json b/package.json
@@ -74,8 +74,10 @@
     "lint": "eslint --fix \"{src,__tests__,types}/**/*.{ts,tsx,js,json}\"",
     "format": "prettier --write \"{src,__tests__,types}/**/*.{ts,tsx,js,json}\"",
     "test": "node ./test/RunTests.js",
-    "build": "vite build",
-    "start": "vite",
+    "build": "node scripts/generate-i18n-indexes.js && vite build",
+    "dev": "npm-run-all --parallel dev:vite dev:i18n-watch",
+    "dev:vite": "vite",
+    "dev:i18n-watch": "node scripts/generate-i18n-indexes.js --watch",
     "preview": "vite preview",
     "prepare": "husky install"
   },
diff --git a/scripts/generate-i18n-indexes.js b/scripts/generate-i18n-indexes.js
@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+
+const fs = require('fs').promises;
+const path = require('path');
+const chokidar = require('chokidar');
+
+const localesDir = path.join(__dirname, '..', 'public', 'locales');
+
+/**
+ * Recursively finds all .json files in a directory and its subdirectories,
+ * generating namespace strings from their paths relative to the base language directory.
+ *
+ * @param {string} baseDir The base directory for the current language (e.g., public/locales/en).
+ * @param {string} currentDir The directory currently being scanned.
+ * @returns {Promise<string[]>} A promise that resolves to an array of namespace strings.
+ */
+async function getNamespaces(baseDir, currentDir) {
+  let namespaces = [];
+  try {
+    const entries = await fs.readdir(currentDir, { withFileTypes: true });
+    for (const entry of entries) {
+      const entryPath = path.join(currentDir, entry.name);
+      if (entry.isDirectory()) {
+        namespaces = namespaces.concat(await getNamespaces(baseDir, entryPath));
+      } else if (entry.isFile() && entry.name.endsWith('.json') && entry.name !== 'index.json') {
+        const relativePath = path.relative(baseDir, entryPath);
+        const namespace = relativePath.replace(/\.json$/, '').replace(/\\/g, '/'); // Ensure POSIX paths for namespaces
+        namespaces.push(namespace);
+      }
+    }
+  } catch (error) {
+    console.error(`Error reading directory ${currentDir}: ${error.message}`);
+    // Decide if we should re-throw or return empty/partial results
+  }
+  return namespaces;
+}
+
+/**
+ * Main function to generate index.json files for all language directories.
+ */
+async function generateIndexes() {
+  console.log(`Starting generation of index.json files in ${localesDir}...\n`);
+
+  try {
+    const langDirs = await fs.readdir(localesDir, { withFileTypes: true });
+
+    for (const langDirEntry of langDirs) {
+      if (langDirEntry.isDirectory()) {
+        const langCode = langDirEntry.name;
+        const langDirPath = path.join(localesDir, langCode);
+        console.log(`Processing language: ${langCode}`);
+
+        const namespaces = await getNamespaces(langDirPath, langDirPath);
+
+        if (namespaces.length === 0) {
+          console.log(`  No JSON files found for language ${langCode} (excluding index.json). Skipping index generation.`);
+          continue;
+        }
+
+        namespaces.sort();
+
+        const indexFilePath = path.join(langDirPath, 'index.json');
+        const jsonData = JSON.stringify(namespaces, null, 2);
+
+        try {
+          await fs.writeFile(indexFilePath, jsonData);
+          console.log(`  Successfully generated index.json for ${langCode} at ${indexFilePath}`);
+        } catch (writeError) {
+          console.error(`  Error writing index.json for ${langCode}: ${writeError.message}`);
+        }
+        console.log('  Namespaces found:', namespaces);
+        console.log('\n');
+      }
+    }
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      console.error(
+        `Error: Locales directory not found at ${localesDir}. Please ensure this directory exists and contains language subdirectories.`
+      );
+    } else {
+      console.error(`Error reading locales directory ${localesDir}: ${error.message}`);
+    }
+    process.exitCode = 1; // Indicate failure
+    return;
+  }
+
+  console.log('Finished generating all index.json files.');
+}
+
+// Main execution logic
+async function main() {
+  if (process.argv.includes('--watch')) {
+    console.log('Initial generation before watching...');
+    await generateIndexes();
+    console.log('\nWatching for file changes in', localesDir, '(excluding index.json files)...\n');
+
+    const watcher = chokidar.watch(path.join(localesDir, '**/*.json'), {
+      ignored: (filePath) => path.basename(filePath) === 'index.json',
+      ignoreInitial: true, // Don't trigger for existing files on startup
+      persistent: true,
+    });
+
+    watcher
+      .on('add', async (filePath) => {
+        console.log(`File ${path.relative(localesDir, filePath)} has been added. Regenerating indexes...`);
+        await generateIndexes();
+      })
+      .on('change', async (filePath) => {
+        console.log(`File ${path.relative(localesDir, filePath)} has been changed. Regenerating indexes...`);
+        await generateIndexes();
+      })
+      .on('unlink', async (filePath) => {
+        console.log(`File ${path.relative(localesDir, filePath)} has been unlinked. Regenerating indexes...`);
+        await generateIndexes();
+      })
+      .on('error', (error) => console.error(`Watcher error: ${error}`))
+      .on('ready', () => console.log('Initial scan complete. Ready for changes.'));
+  } else {
+    await generateIndexes();
+  }
+}
+
+main().catch((error) => {
+  console.error(`An unexpected error occurred: ${error.message}`);
+  process.exitCode = 1; // Indicate failure
+});
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import { CssBaseline, ThemeProvider } from '@mui/material';
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
@@ -9,7 +9,7 @@ import NavigationBar from './components/NavigationBar/NavigationBar';
 import { AuthProvider } from './context/AuthContext';
 import { GlobalModalProvider } from './context/GlobalModalContext';
 import { useNotify } from './hooks/useNotify';
-import i18n from './i18n';
+import { i18n } from './i18n'; // Updated import
 import ErrorPage from './pages/Error';
 import HomePage from './pages/Home';
 import LoginProcessPage from './pages/LoginProcess';
@@ -29,10 +29,6 @@ const App: React.FC = () => {
     return isDarkMode === 'true';
   });
 
-  useEffect(() => {
-    i18n.loadNamespaces('components/globalmodal');
-  }, []);
-
   useEffect(() => {
     const message = localStorage.getItem('logoutMessage');
     if (message) {
@@ -43,24 +39,25 @@ const App: React.FC = () => {
     }
   }, [notify]);
 
-  const storedLanguage = localStorage.getItem('RCBG_SELECTED_LANGUAGE');
-  if (storedLanguage) {
-    i18n.changeLanguage(storedLanguage);
-  } else {
-    i18n.changeLanguage('en');
-  }
-
   const toggleTheme = () => {
     setIsDarkMode((prev) => {
       localStorage.setItem('RCBG_IS_DARK_MODE', String(!prev));
       return !prev;
     });
   };
 
+  const handleChangeLanguage = async (newLang: string) => {
+    await i18n.changeLanguage(newLang);
+    localStorage.setItem('RCBG_SELECTED_LANGUAGE', newLang);
+  };
+
   // Define Navbar wrapper
   const NavbarWrapper = () => (
     <div>
-      <NavigationBar toggleTheme={toggleTheme} />
+      <NavigationBar
+        toggleTheme={toggleTheme}
+        handleChangeLanguage={handleChangeLanguage}
+      />
       <Outlet />
     </div>
   );
@@ -97,9 +94,7 @@ const App: React.FC = () => {
           <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
             <GlobalModalProvider>
               <CssBaseline />
-              <Suspense fallback={<div></div>}>
-                <RouterProvider router={router} />
-              </Suspense>
+              <RouterProvider router={router} />
               <GlobalModal />
             </GlobalModalProvider>
           </ThemeProvider>
diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
@@ -35,10 +35,12 @@ import { galleryApiFetch } from '@/utils';
  * - Mobile drawer with equivalent navigation and utility actions
  *
  * @param toggleTheme function to switch between light and dark modes
+ * @param handleChangeLanguage function to change the application language
  */
 const NavigationBar: React.FC<{
   toggleTheme: () => void;
-}> = ({ toggleTheme }) => {
+  handleChangeLanguage: (newLang: string) => Promise<void>;
+}> = ({ toggleTheme, handleChangeLanguage }) => {
   // initialize translation for this component namespace
   const { t, i18n } = useTranslation('components/navigationbar');
 
@@ -86,14 +88,6 @@ const NavigationBar: React.FC<{
    * Changes the application language, updates localStorage,
    * applies to i18n and shows a notification.
    *
-   * @param lang locale code to switch to (e.g. 'en', 'zh')
-   */
-  const changeLanguage = (lang: string) => {
-    localStorage.setItem('RCBG_SELECTED_LANGUAGE', lang);
-    i18n.changeLanguage(lang);
-    notify(t('navigation_bar.language_updated_message'));
-  };
-
   // shared style for navigation links
   const generalNavLinkSx = {
     '&:visited': {
@@ -269,16 +263,18 @@ const NavigationBar: React.FC<{
               sx={{ mt: 1, zIndex: 9001 }}
             >
               <MenuItem
-                onClick={() => {
-                  changeLanguage('en');
+                onClick={async () => {
+                  await handleChangeLanguage('en');
+                  notify(t('navigation_bar.language_updated_message'));
                   setLanguageMenuAnchor(null);
                 }}
               >
                 🇺🇸 English
               </MenuItem>
               <MenuItem
-                onClick={() => {
-                  changeLanguage('zh');
+                onClick={async () => {
+                  await handleChangeLanguage('zh');
+                  notify(t('navigation_bar.language_updated_message'));
                   setLanguageMenuAnchor(null);
                 }}
               >
@@ -396,16 +392,18 @@ const NavigationBar: React.FC<{
                 sx={{ mt: 1, zIndex: 9001 }}
               >
                 <MenuItem
-                  onClick={() => {
-                    changeLanguage('en');
+                  onClick={async () => {
+                    await handleChangeLanguage('en');
+                    notify(t('navigation_bar.language_updated_message'));
                     setLanguageMenuAnchor(null);
                   }}
                 >
                   🇺🇸 English
                 </MenuItem>
                 <MenuItem
-                  onClick={() => {
-                    changeLanguage('zh');
+                  onClick={async () => {
+                    await handleChangeLanguage('zh');
+                    notify(t('navigation_bar.language_updated_message'));
                     setLanguageMenuAnchor(null);
                   }}
                 >
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -1,35 +1,61 @@
-import i18n from 'i18next';
+import i18next from 'i18next'; // Changed import
 import LanguageDetector from 'i18next-browser-languagedetector';
 import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 
-i18n
-  .use(HttpApi)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    backend: {
-      // Path to your translation JSON files
-      loadPath: '/locales/{{lng}}/{{ns}}.json',
-    },
+const i18n = i18next.createInstance(); // Create an instance
 
-    // Fallback language
-    debug: true,
+async function initializeI18n() {
+  // Simplified language detection
+  const detectedLng = localStorage.getItem('RCBG_SELECTED_LANGUAGE') || 'en';
+  let fetchedNamespaces: string[] = [];
 
-    // Initial language
-    fallbackLng: 'en',
+  try {
+    const response = await fetch(`/locales/${detectedLng}/index.json`);
+    if (response.ok) {
+      fetchedNamespaces = await response.json();
+    } else {
+      console.error(
+        `Failed to fetch index.json for language ${detectedLng}. Status: ${response.status}. Using empty namespaces.`
+      );
+      // Potentially fetch fallbackLng's index.json here if desired
+      // For now, fetchedNamespaces remains [] as per instruction
+    }
+  } catch (error) {
+    console.error(`Error fetching index.json for language ${detectedLng}:`, error, '. Using empty namespaces.');
+    // fetchedNamespaces remains []
+  }
 
-    // Leave empty as namespaces will be dynamically loaded
-    interpolation: {
-      escapeValue: false, // React already escapes values
-    },
+  // If no namespaces were loaded (e.g. index.json missing or empty),
+  // it might be good to load at least a 'common' or default namespace if your app has one.
+  // For now, we proceed with potentially empty `fetchedNamespaces` as per current logic.
 
-    lng: 'en',
-    // Enable debug mode
-    ns: [],
-    react: {
-      useSuspense: true, // Enable suspense for lazy loading
-    },
-  });
+  await i18n
+    .use(HttpApi)
+    .use(LanguageDetector) // LanguageDetector will override 'lng' if it runs after and detects a different language.
+                          // However, we are setting 'lng' explicitly based on our logic.
+                          // If LanguageDetector should be the source of truth after initial load,
+                          // the 'lng' option might not be needed or its value considered an initial hint.
+                          // For this setup, explicit 'lng' is used as per instructions.
+    .use(initReactI18next)
+    .init({
+      lng: detectedLng, // Set the initial language explicitly
+      ns: fetchedNamespaces, // Use dynamically fetched namespaces
+      fallbackLng: 'en',
+      backend: {
+        loadPath: '/locales/{{lng}}/{{ns}}.json',
+      },
+      interpolation: {
+        escapeValue: false, // React already escapes values
+      },
+      react: {
+        useSuspense: false,
+      },
+      debug: true, // Or process.env.NODE_ENV === 'development'
+    });
 
-export default i18n;
+  return i18n; // Return the initialized instance
+}
+
+export default initializeI18n;
+export { i18n }; // Export the instance for use elsewhere
diff --git a/src/index.tsx b/src/index.tsx
