fix: 🐛 use proper webpack hook

Refactors the webpack plugin to use the proper hook, only extracting
keys from processed files. Also avoids triggering compilation twice in
watch mode.

Author: austinw-fineart

src/keys-builder/typescript/index.ts

@@ -26,7 +26,7 @@ export function extractTSKeys(config: Config): ExtractionResult {
 
 const translocoImport = /@(jsverse|ngneat)\/transloco/;
 const translocoKeysManagerImport = /@(jsverse|ngneat)\/transloco-keys-manager/;
-function TSExtractor(config: ExtractorConfig): ScopeMap {
+export function TSExtractor(config: ExtractorConfig): ScopeMap {
   const { file, scopes, defaultValue, scopeToKeys } = config;
   const content = readFile(file);
   const extractors = [];

src/utils/file.utils.ts

@@ -1,4 +1,4 @@
-import { readFileSync, writeFileSync } from 'fs';
+import { readFileSync, statSync, utimesSync, writeFileSync } from 'fs';
 
 import { stringify } from './object.utils';
 
@@ -21,6 +21,16 @@ export function readFile(
   return content;
 }
 
-export function writeFile(fileName: string, content: object) {
+export function writeFile(
+  fileName: string,
+  content: object,
+  preserve: boolean = false,
+) {
+  const stats = preserve
+    ? statSync(fileName, { throwIfNoEntry: false })
+    : undefined;
   writeFileSync(fileName, stringify(content), { encoding: 'utf-8' });
+  if (stats) {
+    utimesSync(fileName, stats.atime, stats.mtime);
+  }
 }

src/webpack-plugin/generate-keys.ts

@@ -4,7 +4,7 @@ import { sync as globSync } from 'glob';
 import { basename } from 'node:path';
 
 import { ScopeMap, Config } from '../types';
-import { readFile, writeFile } from '../utils/file.utils';
+import { readFile } from '../utils/file.utils';
 import { mergeDeep } from '../utils/object.utils';
 
 type Params = {
@@ -54,13 +54,18 @@ export function generateKeys({ translationPath, scopeToKeys, config }: Params) {
     }
   }
 
-  for (let { files, keys } of result) {
+  return result.flatMap(({ files, keys }) => {
     if (config.unflat) {
       keys = unflatten(keys);
     }
-    for (const filePath of files) {
-      const translation = readFile(filePath, { parse: true });
-      writeFile(filePath, mergeDeep({}, keys, translation));
-    }
-  }
+    return files.map((filePath) => {
+      let translation: Record<string, any>;
+      try {
+        translation = readFile(filePath, { parse: true });
+      } catch {
+        translation = {};
+      }
+      return { filePath, content: mergeDeep({}, keys, translation) };
+    });
+  });
 }

src/webpack-plugin/webpack-plugin.ts

@@ -1,18 +1,14 @@
-import { buildTranslationFiles } from '../keys-builder';
-import { buildTranslationFile } from '../keys-builder/build-translation-file';
-import { extractTemplateKeys } from '../keys-builder/template';
-import { extractTSKeys } from '../keys-builder/typescript';
+import { relative, sep } from 'node:path';
+import { templateExtractor } from '../keys-builder/template';
+import { TSExtractor } from '../keys-builder/typescript';
 import { Config, ScopeMap, FileType } from '../types';
+import { writeFile } from '../utils/file.utils';
 import { initExtraction } from '../utils/init-extraction';
 import { mergeDeep } from '../utils/object.utils';
-import { buildScopeFilePaths } from '../utils/path.utils';
 import { resolveConfig } from '../utils/resolve-config';
-import { updateScopesMap } from '../utils/update-scopes-map';
 
 import { generateKeys } from './generate-keys';
 
-let init = true;
-
 export class TranslocoExtractKeysWebpackPlugin {
   config: Config;
 
@@ -21,82 +17,83 @@ export class TranslocoExtractKeysWebpackPlugin {
   }
 
   apply(compiler: any) {
-    compiler.hooks.watchRun.tapPromise(
+    compiler.hooks.thisCompilation.tap(
       'TranslocoExtractKeysPlugin',
-      async (comp: any) => {
-        if (init) {
-          init = false;
-          return buildTranslationFiles(this.config);
-        }
-
-        const keysExtractions: Record<FileType, string[]> = {
-          html: [],
-          ts: [],
-        };
-        const files =
-          comp.modifiedFiles ||
-          Object.keys(comp.watchFileSystem.watcher.mtimes);
-
-        for (const file of files) {
-          const fileType = resolveFileType(file);
-
-          if (fileType) {
-            keysExtractions[fileType].push(file);
-          }
-        }
-
-        if (keysExtractions.html.length || keysExtractions.ts.length) {
-          let htmlResult = initExtraction();
-          let tsResult = initExtraction();
-          if (keysExtractions.ts.length) {
-            // Maybe someone added a TRANSLOCO_SCOPE
-            const newScopes = updateScopesMap({ files: keysExtractions.ts });
-
-            const paths = buildScopeFilePaths({
-              aliasToScope: newScopes,
-              langs: this.config.langs,
-              output: this.config.output,
-              fileFormat: this.config.fileFormat,
-            });
-
-            paths.forEach(({ path }) =>
-              buildTranslationFile({
-                path,
-                fileFormat: this.config.fileFormat,
-              }),
+      (comp: any) => {
+        comp.hooks.processAssets.tap(
+          {
+            name: 'TranslocoExtractKeysPlugin',
+            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+          },
+          () => {
+            let htmlResult = initExtraction();
+            let tsResult = initExtraction();
+            const files = compiler.modifiedFiles || comp.fileDependencies;
+
+            for (const file of files) {
+              if (
+                !this.config.input.some((input) => file.startsWith(input + sep))
+              ) {
+                continue;
+              }
+
+              const fileType = resolveFileType(file);
+
+              switch (fileType) {
+                case 'html': {
+                  htmlResult.scopeToKeys = templateExtractor({
+                    defaultValue: this.config.defaultValue,
+                    file,
+                    scopes: this.config.scopes,
+                    scopeToKeys: htmlResult.scopeToKeys,
+                  });
+                }
+                case 'ts': {
+                  tsResult.scopeToKeys = TSExtractor({
+                    defaultValue: this.config.defaultValue,
+                    file,
+                    scopes: this.config.scopes,
+                    scopeToKeys: tsResult.scopeToKeys,
+                  });
+                }
+              }
+            }
+
+            const scopeToKeys = mergeDeep(
+              {},
+              htmlResult.scopeToKeys,
+              tsResult.scopeToKeys,
+            ) as ScopeMap;
+            const hasTranslateKeys = Object.keys(scopeToKeys).some(
+              (key) => Object.keys(scopeToKeys[key]).length > 0,
             );
-            tsResult = extractTSKeys({
-              ...this.config,
-              files: keysExtractions.ts,
-            });
-          }
-
-          if (keysExtractions.html.length) {
-            htmlResult = extractTemplateKeys({
-              ...this.config,
-              files: keysExtractions.html,
-            });
-          }
-
-          const scopeToKeys = mergeDeep(
-            {},
-            htmlResult.scopeToKeys,
-            tsResult.scopeToKeys,
-          ) as ScopeMap;
-          const hasTranslateKeys = Object.keys(scopeToKeys).some(
-            (key) => Object.keys(scopeToKeys[key]).length > 0,
-          );
-
-          if (hasTranslateKeys) {
-            generateKeys({
-              config: this.config,
-              translationPath: this.config.translationsPath,
-              scopeToKeys,
-            });
-          }
-        }
 
-        return Promise.resolve();
+            if (hasTranslateKeys) {
+              const files = generateKeys({
+                config: this.config,
+                translationPath: this.config.translationsPath,
+                scopeToKeys,
+              });
+
+              for (const { filePath, content } of files) {
+                writeFile(filePath, content, true);
+
+                for (const [name, info] of comp.assetsInfo) {
+                  if (
+                    info.sourceFilename &&
+                    relative(info.sourceFilename, filePath) === ''
+                  ) {
+                    comp.updateAsset(
+                      name,
+                      new compiler.webpack.sources.RawSource(content),
+                    );
+                    break;
+                  }
+                }
+              }
+            }
+          },
+        );
       },
     );
   }