feat: Add support for watching multiple locales dirs, #116

Author: felixmosh

README.md

@@ -31,7 +31,10 @@ module.exports = {
   ...
   plugins: [
     new I18NextHMRPlugin({
-      localesDir: path.resolve(__dirname, 'static/locales'),
+      localesDir: path.resolve(__dirname, 'static/locales'), 
+      localesDirs: [
+         // use this property for multiple locales directories   
+      ]
     })
   ]
 };

__tests__/loader.spec.js

@@ -2,13 +2,10 @@ const loader = require('../lib/loader');
 
 describe('loader', () => {
   let context;
-  const options = {
-    lang: 'en',
-    ns: 'namespace',
-  };
+  const options = ['en/namespace'];
   const query = {
     getChangedLang: jest.fn().mockImplementation(() => options),
-    localesDir: 'locals-dir',
+    localesDirs: ['locals-dir'],
   };
   const content = `module.exports = '__PLACEHOLDER__';`;
 
@@ -21,7 +18,16 @@ describe('loader', () => {
 
   it('should add localesDir as context dependency', () => {
     loader.apply(context, [content]);
-    expect(context.addContextDependency).toHaveBeenCalledWith(query.localesDir);
+    expect(context.addContextDependency).toHaveBeenCalledWith(query.localesDirs[0]);
+  });
+
+  it('should add all locale dirs as context dependency', () => {
+    query.localesDirs = ['folder1', 'folder2'];
+    loader.apply(context, [content]);
+
+    expect(context.addContextDependency).toHaveBeenCalledTimes(query.localesDirs.length);
+    expect(context.addContextDependency).toHaveBeenCalledWith(query.localesDirs[0]);
+    expect(context.addContextDependency).toHaveBeenCalledWith(query.localesDirs[1]);
   });
 
   it('should inject an object', () => {

lib/loader.js

@@ -1,5 +1,5 @@
 module.exports = function (content) {
-  this.addContextDependency(this.query.localesDir);
+  this.query.localesDirs.forEach((dir) => this.addContextDependency(dir));
   return (
     content.replace(`'__PLACEHOLDER__'`, JSON.stringify(this.query.getChangedLang())) +
     '//' +

lib/plugin.js

@@ -5,11 +5,15 @@ const pluginName = 'I18nextHMRPlugin';
 
 const DEFAULT_OPTIONS = {
   localesDir: '',
+  localesDirs: [],
 };
 
 class I18nextHMRPlugin {
   constructor(options) {
     this.options = { ...DEFAULT_OPTIONS, ...options };
+    this.options.localesDirs = []
+      .concat(this.options.localesDirs, this.options.localesDir)
+      .filter(Boolean);
     this.lastUpdate = { changedFiles: [] };
   }
 
@@ -19,10 +23,16 @@ class I18nextHMRPlugin {
       : false;
 
     compiler.hooks.beforeCompile.tapAsync(pluginName, (params, callback) => {
-      if (fs.existsSync(this.options.localesDir)) {
+      const noneExistsDirs = this.options.localesDirs.filter((dir) => !fs.existsSync(dir));
+
+      if (noneExistsDirs.length === 0) {
         return callback();
       }
-      throw new Error(`i18next-hmr: '${this.options.localesDir}' not found`);
+      throw new Error(
+        `i18next-hmr: \n'${noneExistsDirs.join(`',\n'`)}'${
+          noneExistsDirs.length > 1 ? '\nare' : ''
+        } not found`
+      );
     });
 
     compiler.hooks.watchRun.tap(pluginName, (compiler) => {
@@ -35,7 +45,9 @@ class I18nextHMRPlugin {
         const fileExt = path.extname(file);
 
         return (
-          file.includes(this.options.localesDir) && !!fileExt && changedTimes[file] > startTime
+          this.options.localesDirs.some((dir) => file.startsWith(dir)) &&
+          !!fileExt &&
+          changedTimes[file] > startTime
         );
       });
 
@@ -45,10 +57,9 @@ class I18nextHMRPlugin {
 
       const changedFiles = files.map((file) => {
         const fileExt = path.extname(file);
+        const dir = this.options.localesDirs.find((dir) => file.startsWith(dir));
 
-        return path
-          .relative(this.options.localesDir, file)
-          .slice(0, -1 * fileExt.length || undefined); // keep all when fileExt.length === 0
+        return path.relative(dir, file).slice(0, -1 * fileExt.length || undefined); // keep all when fileExt.length === 0
       });
 
       this.lastUpdate = { changedFiles };
@@ -66,7 +77,7 @@ class I18nextHMRPlugin {
         module.loaders.push({
           loader: path.resolve(__dirname, 'loader.js'), // Path to loader
           options: {
-            localesDir: this.options.localesDir,
+            localesDirs: this.options.localesDirs,
             getChangedLang: () => ({ ...this.lastUpdate }),
           },
         });

plugin.d.ts

@@ -1,5 +1,5 @@
 export class I18NextHMRPlugin {
   static addListener(cb: (data: { lang: string; ns: string }) => void): void;
 
-  constructor(options: { localesDir: string });
+  constructor(options: { localesDir: string; localesDirs: string[] });
 }