@adminforth/i18n 1.0.10 → 1.0.12

package/Changelog.md

@@ -5,9 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.12]
+
+### Fixed
+
+- live mode frontend translations loading when tmp dir is nopt preserver  (e.g. docker cached /tmp pipeline)
+
+## [1.0.11]
+
+### Fixed
+
+- cache invalidations on delete
+
 ## [v1.0.10]
 
-## Fixed
+### Fixed
 
 - fix automatic translations for duplicate strings
 - improve slavik pluralization generations by splitting the requests

package/custom/LanguageInUserMenu.vue

@@ -43,7 +43,7 @@
 import 'flag-icon-css/css/flag-icons.min.css';
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 
-import { setLang, getCountryCodeFromLangCode, getLocalLang } from './langCommon';
+import { setLang, getCountryCodeFromLangCode, getLocalLang, setLocalLang } from './langCommon';
 
 import { computed, ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -56,7 +56,7 @@ const props = defineProps(['meta', 'resource']);
 const selectedLanguage = ref('');
 
 function doChangeLang(lang) {
-  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, lang);
+  setLocalLang(lang);
   // unfortunately, we need this to recall all APIs
   document.location.reload();
 

package/custom/langCommon.ts

@@ -54,6 +54,7 @@ const countryISO31661ByLangISO6391 = {
     ko: 'kr', // Korean → South Korea
     ja: 'jp', // Japanese → Japan
     uk: 'ua', // Ukrainian → Ukraine
+    ur: 'pk', // Urdu → Pakistan
 };
 
 export function getCountryCodeFromLangCode(langCode) {

package/dist/custom/LanguageInUserMenu.vue

@@ -43,7 +43,7 @@
 import 'flag-icon-css/css/flag-icons.min.css';
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 
-import { setLang, getCountryCodeFromLangCode, getLocalLang } from './langCommon';
+import { setLang, getCountryCodeFromLangCode, getLocalLang, setLocalLang } from './langCommon';
 
 import { computed, ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -56,7 +56,7 @@ const props = defineProps(['meta', 'resource']);
 const selectedLanguage = ref('');
 
 function doChangeLang(lang) {
-  setLang({ setLocaleMessage, locale }, props.meta.pluginInstanceId, lang);
+  setLocalLang(lang);
   // unfortunately, we need this to recall all APIs
   document.location.reload();
 

package/dist/custom/langCommon.ts

@@ -54,6 +54,7 @@ const countryISO31661ByLangISO6391 = {
     ko: 'kr', // Korean → South Korea
     ja: 'jp', // Japanese → Japan
     uk: 'ua', // Ukrainian → Ukraine
+    ur: 'pk', // Urdu → Pakistan
 };
 
 export function getCountryCodeFromLangCode(langCode) {

package/dist/index.js

@@ -205,29 +205,38 @@ export default class I18N extends AdminForthPlugin {
                 // clear frontend cache for all lan
                 return { ok: true };
             }));
+            // add hook on delete of any translation to reset cache
+            resourceConfig.hooks.delete.afterSave.push((_d) => __awaiter(this, [_d], void 0, function* ({ record }) {
+                for (const lang of this.options.supportedLanguages) {
+                    this.cache.clear(`${this.resourceConfig.resourceId}:frontend:${lang}`);
+                    this.cache.clear(`${this.resourceConfig.resourceId}:${record[this.options.categoryFieldName]}:${lang}:${record[this.enFieldName]}`);
+                }
+                this.updateUntranslatedMenuBadge();
+                return { ok: true };
+            }));
             if (this.options.completedFieldName) {
                 // on show and list add a list hook which will add incomplete field to record if translation is missing for at least one language
                 const addIncompleteField = (record) => {
                     // form list of all langs, sorted by alphabet, without en, to get 'al|ro|uk'
                     record.fully_translated = this.fullCompleatedFieldValue === record[this.options.completedFieldName];
                 };
-                resourceConfig.hooks.list.afterDatasourceResponse.push((_d) => __awaiter(this, [_d], void 0, function* ({ response }) {
+                resourceConfig.hooks.list.afterDatasourceResponse.push((_e) => __awaiter(this, [_e], void 0, function* ({ response }) {
                     response.forEach(addIncompleteField);
                     return { ok: true };
                 }));
-                resourceConfig.hooks.show.afterDatasourceResponse.push((_e) => __awaiter(this, [_e], void 0, function* ({ response }) {
+                resourceConfig.hooks.show.afterDatasourceResponse.push((_f) => __awaiter(this, [_f], void 0, function* ({ response }) {
                     addIncompleteField(response.length && response[0]);
                     return { ok: true };
                 }));
                 // also add edit hook beforeSave to update completedFieldName
-                resourceConfig.hooks.edit.beforeSave.push((_f) => __awaiter(this, [_f], void 0, function* ({ record, oldRecord }) {
+                resourceConfig.hooks.edit.beforeSave.push((_g) => __awaiter(this, [_g], void 0, function* ({ record, oldRecord }) {
                     const futureRecord = Object.assign(Object.assign({}, oldRecord), record);
                     const futureCompletedFieldValue = yield this.computeCompletedFieldValue(futureRecord);
                     record[this.options.completedFieldName] = futureCompletedFieldValue;
                     return { ok: true };
                 }));
                 // add list hook to support filtering by fully_translated virtual field
-                resourceConfig.hooks.list.beforeDatasourceRequest.push((_g) => __awaiter(this, [_g], void 0, function* ({ query }) {
+                resourceConfig.hooks.list.beforeDatasourceRequest.push((_h) => __awaiter(this, [_h], void 0, function* ({ query }) {
                     if (!query.filters || query.filters.length === 0) {
                         query.filters = [];
                     }
@@ -265,7 +274,7 @@ export default class I18N extends AdminForthPlugin {
                     // if optional `confirm` is provided, user will be asked to confirm action
                     confirm: 'Are you sure you want to translate selected items?',
                     state: 'selected',
-                    action: (_h) => __awaiter(this, [_h], void 0, function* ({ selectedIds, tr }) {
+                    action: (_j) => __awaiter(this, [_j], void 0, function* ({ selectedIds, tr }) {
                         try {
                             yield this.bulkTranslate({ selectedIds });
                         }
@@ -278,7 +287,7 @@ export default class I18N extends AdminForthPlugin {
                         this.updateUntranslatedMenuBadge();
                         return {
                             ok: true, error: undefined,
-                            successMessage: yield tr(`Translated {count} items`, 'frontend', { count: selectedIds.length }),
+                            successMessage: yield tr(`Translated {count} items`, 'backend', { count: selectedIds.length }),
                         };
                     })
                 });
@@ -460,9 +469,9 @@ ${JSON.stringify(strings.reduce((acc, s) => {
     }
     tryProcessAndWatch(adminforth) {
         return __awaiter(this, void 0, void 0, function* () {
-            const spaDir = adminforth.codeInjector.spaTmpPath();
+            const serveDir = adminforth.codeInjector.getServeDir();
             // messages file is in i18n-messages.json
-            const messagesFile = path.join(spaDir, '..', 'spa_tmp', 'i18n-messages.json');
+            const messagesFile = path.join(serveDir, 'i18n-messages.json');
             console.log('🪲messagesFile', messagesFile);
             this.processExtractedMessages(adminforth, messagesFile);
             // we use watcher because file can't be yet created when we start - bundleNow can be done in build time or can be done now
@@ -509,10 +518,15 @@ ${JSON.stringify(strings.reduce((acc, s) => {
             if (!msg) {
                 return msg;
             }
+            if (category === 'frontend') {
+                throw new Error(`Category 'frontend' is reserved for frontend messages, use any other category for backend messages`);
+            }
             // console.log('🪲tr', msg, category, lang);
             // if lang is not supported , throw
             if (!this.options.supportedLanguages.includes(lang)) {
-                throw new Error(`Language ${lang} is not entered to be supported by requested by browser in request headers accept-language`);
+                lang = 'en'; // for now simply fallback to english
+                // throwing like line below might be too strict, e.g. for custom apis made with fetch which don't pass accept-language
+                // throw new Error(`Language ${lang} is not entered to be supported by requested by browser in request headers accept-language`);
             }
             let result;
             // try to get translation from cache

package/index.ts

@@ -234,6 +234,16 @@ export default class I18N extends AdminForthPlugin {
       return { ok: true };
     });
 
+    // add hook on delete of any translation to reset cache
+    resourceConfig.hooks.delete.afterSave.push(async ({ record }: { record: any }): Promise<{ ok: boolean, error?: string }> => {
+      for (const lang of this.options.supportedLanguages) {
+        this.cache.clear(`${this.resourceConfig.resourceId}:frontend:${lang}`);
+        this.cache.clear(`${this.resourceConfig.resourceId}:${record[this.options.categoryFieldName]}:${lang}:${record[this.enFieldName]}`);
+      }
+      this.updateUntranslatedMenuBadge();
+      return { ok: true };
+    });
+
     if (this.options.completedFieldName) {
       // on show and list add a list hook which will add incomplete field to record if translation is missing for at least one language
       const addIncompleteField = (record: any) => {
@@ -316,7 +326,7 @@ export default class I18N extends AdminForthPlugin {
             this.updateUntranslatedMenuBadge();
             return { 
               ok: true, error: undefined, 
-              successMessage: await tr(`Translated {count} items`, 'frontend', {count: selectedIds.length}),
+              successMessage: await tr(`Translated {count} items`, 'backend', {count: selectedIds.length}),
             };
           }
         }
@@ -550,15 +560,13 @@ ${
 
     // updateBadge
     this.updateUntranslatedMenuBadge()
-
-
   }
 
 
   async tryProcessAndWatch(adminforth: IAdminForth) {
-    const spaDir = adminforth.codeInjector.spaTmpPath();
+    const serveDir = adminforth.codeInjector.getServeDir();
     // messages file is in i18n-messages.json
-    const messagesFile = path.join(spaDir, '..', 'spa_tmp', 'i18n-messages.json');
+    const messagesFile = path.join(serveDir, 'i18n-messages.json');
     console.log('🪲messagesFile', messagesFile);
     this.processExtractedMessages(adminforth, messagesFile);
     // we use watcher because file can't be yet created when we start - bundleNow can be done in build time or can be done now
@@ -609,11 +617,18 @@ ${
       if (!msg) {
         return msg;
       }
+
+      if (category === 'frontend') {
+        throw new Error(`Category 'frontend' is reserved for frontend messages, use any other category for backend messages`);
+      }
       // console.log('🪲tr', msg, category, lang);
 
       // if lang is not supported , throw
       if (!this.options.supportedLanguages.includes(lang as LanguageCode)) {
-        throw new Error(`Language ${lang} is not entered to be supported by requested by browser in request headers accept-language`);
+        lang = 'en'; // for now simply fallback to english
+
+        // throwing like line below might be too strict, e.g. for custom apis made with fetch which don't pass accept-language
+        // throw new Error(`Language ${lang} is not entered to be supported by requested by browser in request headers accept-language`);
       }
 
       let result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/i18n",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",