Merge pull request #404 from devforth/AdminForth/407

fix: use useI18n instead of window.i18n

Author: ivictbor

adminforth/spa/package.json

@@ -10,7 +10,7 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "i18n:extract": "echo {} > i18n-empty.json && vue-i18n-extract report --vueFiles \"./src/**/*.{js,vue}\" --output ./i18n-messages.json --languageFiles \"i18n-empty.json\" --add"
+    "i18n:extract": "echo {} > i18n-empty.json && vue-i18n-extract report --vueFiles \"./src/**/*.{js,vue,ts}\" --output ./i18n-messages.json --languageFiles \"i18n-empty.json\" --add"
   },
   "dependencies": {
     "@iconify-prerendered/vue-flag": "^0.28.1748584105",

adminforth/spa/src/i18n.ts

@@ -7,7 +7,7 @@ function slavicPluralRule(choice: number, choicesLength: number, orgRule: any) {
   if (choice === 0) {
     return 0
   }
-
+  
   const teen = choice > 10 && choice < 20
   const endsWithOne = choice % 10 === 1
 
@@ -21,6 +21,8 @@ function slavicPluralRule(choice: number, choicesLength: number, orgRule: any) {
   return choicesLength < 4 ? 2 : 3
 }
 
+export let i18nInstance: ReturnType<typeof createI18n> | null = null
+
 export function initI18n(app: ReturnType<typeof createApp>) {
   const i18n = createI18n({
     legacy: false,
@@ -48,7 +50,7 @@ export function initI18n(app: ReturnType<typeof createApp>) {
       return key + ' ';
     },
   });
-
   app.use(i18n);
+  i18nInstance = i18n 
   return i18n
 }

adminforth/spa/src/main.ts

@@ -14,7 +14,7 @@ app.use(createPinia())
 app.use(router)
 
 // get access to i18n instance outside components
-window.i18n = initI18n(app);
+initI18n(app);
 
 
 /* IMPORTANT:ADMINFORTH CUSTOM USES */

adminforth/spa/src/utils.ts

@@ -9,6 +9,7 @@ import adminforth from './adminforth';
 import sanitizeHtml  from 'sanitize-html'
 import debounce from 'debounce';
 import type { AdminForthResourceColumnInputCommon, Predicate } from '@/types/Common';
+import { i18nInstance } from './i18n'
 
 const LS_LANG_KEY = `afLanguage`;
 const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
@@ -19,6 +20,7 @@ export async function callApi({path, method, body, headers}: {
   body?: any
   headers?: Record<string, string>
 }): Promise<any> {
+  const t = i18nInstance?.global.t || ((s: string) => s)
   const options = {
     method,
     headers: {
@@ -42,11 +44,11 @@ export async function callApi({path, method, body, headers}: {
     // if it is internal error, say to user
     if (e instanceof TypeError && e.message === 'Failed to fetch') {
       // this is a network error
-      adminforth.alert({variant:'danger', message: window.i18n?.global?.t('Network error, please check your Internet connection and try again'),})
+      adminforth.alert({variant:'danger', message: t('Network error, please check your Internet connection and try again'),})
       return null;
     }
 
-    adminforth.alert({variant:'danger', message: window.i18n?.global?.t('Something went wrong, please try again later'),})
+    adminforth.alert({variant:'danger', message: t('Something went wrong, please try again later'),})
     console.error(`error in callApi ${path}`, e);
   }
 }