feat: adapt new translations system in some places

Author: notwindstone

public/translations/fa.json

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import Layout from "@/components/layout/Layout.vue";
 import { onAfterRouteLeave, RouterView } from "@kitbag/router";
-import { provide, readonly, type Ref, ref, shallowRef, useTemplateRef, watchEffect } from "vue";
+import { provide, readonly, ref, shallowRef, useTemplateRef, watchEffect } from "vue";
 import {
   TranslationsKey,
-  LocaleSelectorContextKey,
+  TranslationsSelectorContextKey,
   PageWrapperContextKey, TranslationsContextKey,
 } from "@/constants/application.ts";
 import type { TranslationsSelectorType } from "@/types/translations-selector.type.ts";
@@ -13,17 +13,33 @@ import { useAccentAnimation } from "@/lib/stores/misc/accent-animations.ts";
 import English from "@/locales/en.json";
 import { shallowValidateTranslations } from "@/lib/translations/shallow-validate-translations.ts";
 import type { TranslationsType } from "@/types/translations.type.ts";
+import { Locales } from "@/constants/locales.ts";
+import type { LocaleType } from "@/types/locale.type.ts";
+import FetchTranslations from "@/components/general/FetchTranslations.vue";
+import type { TranslationsReferenceType } from "@/types/translations-reference.type.ts";
 
 const scrollLocked = ref<boolean>(false);
 const scrollTarget = useTemplateRef("scrollTarget");
 
-const storedTranslations = localStorage.getItem(TranslationsKey)
-  ?? JSON.stringify(English);
-// const storedLocale: string = localStorage.getItem(LocaleKey) ?? navigator.language.slice(0, 2);
+const shouldFetchTranslations = ref<boolean>(false);
+
+const navigatorLocale: string = navigator.language.slice(0, 2);
+const storedTranslations: string | null = localStorage.getItem(TranslationsKey);
 let parsedTranslations: unknown;
 
+if (storedTranslations === null && navigatorLocale !== "en") {
+  const doesUserLocaleExist = Locales
+    .includes(navigatorLocale as LocaleType);
+
+  if (doesUserLocaleExist) {
+    shouldFetchTranslations.value = true;
+  }
+}
+
 try {
-  parsedTranslations = JSON.parse(storedTranslations);
+  parsedTranslations = storedTranslations === null
+    ? English
+    : JSON.parse(storedTranslations);
 } catch (error: unknown) {
   console.error("Couldn't parse stored translations", error);
   parsedTranslations = English;
@@ -33,8 +49,6 @@ const translations = shallowRef<TranslationsType>(
   shallowValidateTranslations(parsedTranslations),
 );
 
-document.getElementById("__html-tag")?.setAttribute?.("lang", translations.value.Info.Code);
-
 function selectTranslations(selected: TranslationsType): void {
   translations.value = selected;
   localStorage.setItem(TranslationsKey, JSON.stringify(selected));
@@ -44,8 +58,8 @@ function lockScroll(state: boolean): void {
 }
 
 provide<(state: boolean) => void>(PageWrapperContextKey, lockScroll);
-provide<Ref<TranslationsType, TranslationsType>>(TranslationsContextKey, readonly(translations));
-provide<TranslationsSelectorType>(LocaleSelectorContextKey, selectTranslations);
+provide<TranslationsReferenceType>(TranslationsContextKey, readonly(translations));
+provide<TranslationsSelectorType>(TranslationsSelectorContextKey, selectTranslations);
 
 const accentAnimationStore = useAccentAnimation();
 
@@ -74,6 +88,8 @@ watchEffect(() => {
   pause();
 });
 watchEffect(() => {
+  document.getElementById("__html-tag")?.setAttribute?.("lang", translations.value.Info.Code);
+
   if (translations.value.Info.RTL) {
     document.body.dataset.rtl = "yes";
 
@@ -95,6 +111,7 @@ onAfterRouteLeave(() => {
 </script>
 
 <template>
+  <FetchTranslations v-if="shouldFetchTranslations" />
   <div v-show="false">
     <!-- This block contains UnoCSS classes that are not included in the bundle -->
     <span class="i-mdi-github i-mdi-telegram i-fluent-add-square-24-regular i-fluent-folder-24-regular i-fluent-settings-24-regular i-fluent-chat-help-24-regular i-fluent-phone-update-24-regular i-fluent-animal-cat-24-regular i-fluent-people-16-regular i-fluent-edit-16-regular i-fluent-triangle-right-16-regular i-fluent-dismiss-circle-16-regular i-fluent-settings-16-regular i-fluent-tag-16-regular i-fluent-folder-16-regular i-fluent-folder-arrow-right-16-regular i-fluent-copy-arrow-right-16-regular i-fluent-delete-16-regular i-fluent-link-16-regular i-simple-icons-nixos i-simple-icons-archlinux i-simple-icons-debian i-simple-icons-flatpak i-simple-icons-linux i-simple-icons-gentoo i-mdi-microsoft-windows i-simple-icons-arm i-simple-icons-apple i-lucide-bolt i-lucide-square-mouse-pointer i-lucide-text-cursor-input i-lucide-ellipsis text-red-500 underline" />

public/translations/pl.json

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useQuery } from "@tanstack/vue-query";
+import type { TranslationsType } from "@/types/translations.type.ts";
+import { shallowValidateTranslations } from "@/lib/translations/shallow-validate-translations.ts";
+import { TranslationsKey, TranslationsSelectorContextKey } from "@/constants/application.ts";
+import { inject } from "vue";
+import type { TranslationsSelectorType } from "@/types/translations-selector.type.ts";
+
+const setTranslations = inject<TranslationsSelectorType>(TranslationsSelectorContextKey);
+const locale: string = navigator.language.slice(0, 2);
+
+useQuery({
+  "queryKey": ["translations", "background", locale],
+  "queryFn" : async () => {
+    const response = await fetch(`/translations/${locale}.json`);
+    const data: unknown = await response.json();
+    const validated: TranslationsType = shallowValidateTranslations(data);
+
+    setTranslations?.(validated);
+    localStorage.setItem(TranslationsKey, JSON.stringify(validated));
+  },
+});
+</script>

public/translations/ru.json

@@ -4,7 +4,7 @@ import type { GithubReleasesType } from "@/types/github-releases.type.ts";
 export const ApplicationName = "Freesm Launcher";
 
 export const TranslationsContextKey = Symbol();
-export const LocaleSelectorContextKey = Symbol();
+export const TranslationsSelectorContextKey = Symbol();
 export const LauncherContextKey = Symbol();
 export const LauncherModalContextKey = Symbol();
 export const LauncherModalEmbedContextKey = Symbol();

public/translations/ua.json

@@ -1,34 +1 @@
-export const Locales = [
-  {
-    "Code": "en",
-    "Name": "English",
-    "Flag": "\uD83C\uDDEC\uD83C\uDDE7",
-    "RTL" : false,
-  },
-  {
-    "Code": "ru",
-    "Name": "Русский",
-    "Flag": "\uD83C\uDDF7\uD83C\uDDFA",
-    "RTL" : false,
-  },
-  {
-    "Code": "ua",
-    "Name": "Українська",
-    "Flag": "\uD83C\uDDFA\uD83C\uDDE6",
-    "RTL" : false,
-  },
-  {
-    "Code": "fa",
-    "Name": "فارسی",
-    "Flag": "\uD83C\uDDEE\uD83C\uDDF7",
-    "RTL" : true,
-  },
-  {
-    "Code": "pl",
-    "Name": "Polski",
-    "Flag": "\uD83C\uDDF5\uD83C\uDDF1",
-    "RTL" : false,
-  },
-] as const;
-export const LocalesArray = Locales.map(({ Code }) => Code);
-export const DefaultLocale = Locales[0].Code;
+export const Locales = ["en", "ru", "ua", "fa", "pl"] as const;

src/App.vue

@@ -12,7 +12,7 @@ export function shallowValidateTranslations(parsed: unknown): TranslationsType {
     typeof parsed?.Messages !== "object" ||
     parsed?.Messages === null
   ) {
-    return Translations;
+    return Translations as TranslationsType;
   }
 
   return parsed as TranslationsType;

src/components/general/FetchTranslations.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import Page from "@/components/layout/Page.vue";
-import { translate } from "@/lib/translations/translate.ts";
 import { inject } from "vue";
-import type { ContextLocaleType } from "@/types/context-locale.type.ts";
-import { LocaleContextKey } from "@/constants/application.ts";
 import ThemeGenerator from "@/components/themes/ThemeGenerator.vue";
+import { TranslationsContextKey } from "@/constants/application.ts";
+import type { TranslationsReferenceType } from "@/types/translations-reference.type.ts";
 
 document.title = "Themes - Freesm Launcher";
 document
@@ -14,7 +13,7 @@ document
     "Easily create and preview your Freesm Launcher theme in real-time.",
   );
 
-const locale = inject<ContextLocaleType>(LocaleContextKey);
+const translations = inject<TranslationsReferenceType>(TranslationsContextKey);
 
 const themeJson = JSON.stringify({
   "colors": {
@@ -89,10 +88,10 @@ console.log(themeJson, themeStyle);
   <Page>
     <div class="mx-auto max-w-240 flex flex-col gap-8 px-4 pt-12">
       <p class="select-text text-center text-balance text-5xl text-white font-bold sm:text-7xl">
-        {{ translate("pages.themes.title", locale) }}
+        {{ translations?.Messages?.["pages.themes.title"] }}
       </p>
       <p class="select-text text-center text-balance text-lg text-gray-400 sm:text-2xl">
-        {{ translate("pages.themes.description", locale) }}
+        {{ translations?.Messages?.["pages.themes.description"] }}
       </p>
     </div>
     <ThemeGenerator />