⚗️ Inject translations with webpack

Author: richardfrost

bin/webpack.common.js

@@ -1,6 +1,7 @@
 import fs from 'fs-extra';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import webpack from 'webpack';
+import translations from '../src/script/translations.js';
 
 const BUILD = fs.readJsonSync('.build.json');
 
@@ -35,6 +36,7 @@ export default {
   },
   plugins: [
     new webpack.DefinePlugin({ __BUILD__: JSON.stringify(BUILD) }),
+    new webpack.DefinePlugin({ __TRANSLATIONS__: JSON.stringify(translations) }),
   ],
   resolve: {
     extensions: ['.js', '.ts'],

src/script/translation.ts

@@ -1,10 +1,15 @@
 import i18next, { i18n } from 'i18next';
-import translations from '@APF/translations.js';
 import { stringArray } from '@APF/lib/helper';
 
+// __TRANSLATIONS__ is injected by webpack from ROOT/src/script/
+/* eslint-disable-next-line @typescript-eslint/naming-convention */
+declare const __TRANSLATIONS__: any;
+
 export default class Translation {
   i18next: i18n;
 
+  static readonly translations = typeof __TRANSLATIONS__ == 'undefined' ? { common: {} }  : __TRANSLATIONS__;
+
   //#region Class reference helpers
   // Can be overridden in children classes
   get Class() { return (this.constructor as typeof Translation); }
@@ -17,7 +22,7 @@ export default class Translation {
       lng: language,
       fallbackLng: 'en',
       ns: namespaces,
-      resources: translations
+      resources: this.Class.translations,
     });
   }