rootScope service, watch lang

app/scripts/components/CorpusUpdates.vue

@@ -4,6 +4,7 @@ import { ref } from "vue"
 import moment from "moment"
 import settings from "@/settings"
 import { loc, locObj } from "@/i18n"
+import { rootScope } from "@/vue-services"
 
 // type CorpusUpdatesScope = IScope & {
 //     LIMIT: number
@@ -13,12 +14,13 @@ import { loc, locObj } from "@/i18n"
 //     toggleExpanded: (to?: boolean) => void
 // }
 
-defineProps(["lang"])
-
 const LIMIT = 5
-let recentUpdates = ref()
-let recentUpdatesFiltered = ref()
-let expanded = ref(false)
+const lang = ref(rootScope.lang)
+const recentUpdates = ref()
+const recentUpdatesFiltered = ref()
+const expanded = ref(false)
+
+rootScope.$watch("lang", (value) => (lang.value = value))
 
 if (settings.frontpage?.corpus_updates) {
     const limitDate = moment().subtract(6, "months")
@@ -42,7 +44,8 @@ function toggleExpanded(to) {
             <article v-for="corpus in recentUpdatesFiltered">
                 <time :datetime="corpus.info.Updated" class="opacity-75 float-right">{{ corpus.info.Updated }}</time>
                 <div>
-                    <strong>{{ locObj(corpus.title, lang) }}</strong> {{ loc("front_corpus_updated", lang) }}.
+                    <strong>{{ locObj(corpus.title, lang) }}</strong>
+                    {{ loc("front_corpus_updated", lang) }}.
                 </div>
             </article>
             <div v-if="recentUpdates.length > LIMIT">

app/scripts/components/frontpage.ts

@@ -25,7 +25,7 @@ export default angular.module("korpApp").component("frontpage", {
                 <search-examples ng-if="examples" class="w-80 grow"></search-examples>
             </div>
 
-            <corpus-updates class="w-80 grow" v-props-lang="$root.lang"></corpus-updates>
+            <corpus-updates class="w-80 grow"></corpus-updates>
 
             <newsdesk ng-if="newsdeskIsEnabled" class="w-80 grow"></newsdesk>
         </div>

app/scripts/util.ts

@@ -17,7 +17,7 @@ export const fromKeys = <K extends keyof any, T>(keys: K[], getValue: (key: K) =
     Object.fromEntries(keys.map((key) => [key, getValue(key)]))
 
 /** Mapping from service names to their TS types. */
-type ServiceTypes = {
+export type ServiceTypes = {
     $controller: IControllerService
     $http: IHttpService
     $location: LocationService

app/scripts/vue-services.ts

@@ -0,0 +1,16 @@
+/** @format */
+
+import angular, { type auto } from "angular"
+import { RootScope } from "./root-scope.types"
+import { ServiceTypes } from "./util"
+
+export let rootScope: RootScope
+
+angular.module("korpApp").run([
+    "$injector",
+    ($injector: auto.IInjectorService) => {
+        // Enhance return type of $injector.get()
+        const getService: <K extends keyof ServiceTypes>(name: K) => ServiceTypes[K] = $injector.get
+        rootScope = getService("$rootScope")
+    },
+])