feat: dynamic locale switching

Author: mihamulec

apps/mmstack/src/app/app.routes.ts

@@ -1,3 +1,13 @@
 import { Routes } from '@angular/router';
+import { resolveTestTranslation } from './locale/test.register';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    resolve: {
+      resolveTestTranslation,
+    },
+    loadComponent: () =>
+      import('./demo.component').then((m) => m.DemoComponent),
+  },
+];

apps/mmstack/src/app/app.ts

@@ -1,18 +1,11 @@
 import { Component } from '@angular/core';
-import {
-  createSelectState,
-  SelectField,
-  SelectOptionContent,
-} from '@mmstack/form-material';
+import { RouterOutlet } from '@angular/router';
+import { createSelectState } from '@mmstack/form-material';
 
 @Component({
   selector: 'app-root',
-  imports: [SelectField, SelectOptionContent],
-  template: `
-    <mm-select-field [state]="demo">
-      <div *mmSelectOptionContent="let opt">{{ opt.label() }} zaz</div>
-    </mm-select-field>
-  `,
+  imports: [RouterOutlet],
+  template: ` <router-outlet /> `,
   styles: ``,
 })
 export class App {

packages/translate/README.md

@@ -174,11 +174,12 @@ export default createQuoteTranslation('sl-SI', {
 Use registerNamespace to prepare your namespace definition and obtain the injectNamespaceT function and the resolveNamespaceTranslation resolver function. Use the resolver in your Angular routes.
 
 ```typescript
-import q from './quote.namespace';
+import { registerNamespace } from '@mmstack/translate';
 
 // Register the namespace
 // Example: packages/quote/src/lib/quote.t.ts
 const r = registerNamespace(
+  // you can also fetch from a server if you prefer, as long as the shape is the same
   () => import('./quote.namespace').then((m) => m.default), // Default locale's compiled translation (functions as fallback if no locale of type provided)
   {
     // Map other locales to promise factories (dynamic imports)

packages/translate/src/lib/translate.ts

@@ -1,7 +1,7 @@
 import {
+  afterRenderEffect,
   computed,
   Directive,
-  effect,
   ElementRef,
   inject,
   input,
@@ -60,8 +60,10 @@ export abstract class Translate<
     const renderer = inject(Renderer2);
     const el = inject<ElementRef<HTMLElement>>(ElementRef);
 
-    effect(() =>
-      renderer.setProperty(el.nativeElement, 'textContent', translation()),
-    );
+    afterRenderEffect({
+      write: () => {
+        renderer.setProperty(el.nativeElement, 'textContent', translation());
+      },
+    });
   }
 }

packages/translate/src/lib/translation-store.ts

@@ -45,6 +45,7 @@ export function injectDefaultLocale() {
 export class TranslationStore {
   private readonly cache = createIntlCache();
   private readonly config = injectIntlConfig();
+  readonly loadQueue = signal<string[]>([]);
   readonly locale = signal(inject(LOCALE_ID));
   private readonly defaultLocale = injectDefaultLocale();
   private readonly translations = signal<
@@ -73,18 +74,8 @@ export class TranslationStore {
       {},
   );
 
-  private isInit = true;
-  private readonly skipInitLocale = computed(() => {
-    // should load new loaders if switched back to initial locale, so we do it like this
-    if (this.isInit) {
-      this.isInit = false;
-      return null;
-    }
-    return this.locale();
-  });
-
   readonly dynamicLocaleLoader = resource({
-    params: () => this.skipInitLocale(),
+    params: computed(() => this.loadQueue().at(0) ?? null),
     loader: async ({ params: newLocale, abortSignal }) => {
       if (!newLocale) return;
 
@@ -159,12 +150,17 @@ export class TranslationStore {
       )
         return;
       const dynamicLocales = this.dynamicLocaleLoader.value();
+
       if (!dynamicLocales) return;
       for (const locale of dynamicLocales.locales) {
         this.register(locale.namespace, {
           [dynamicLocales.locale]: locale.flat,
         });
       }
+      this.loadQueue.update((q) =>
+        q.filter((l) => l !== dynamicLocales.locale),
+      );
+      this.locale.set(dynamicLocales.locale);
     });
   }
 
@@ -250,22 +246,25 @@ export function injectDynamicLocale(): WritableSignal<string> & {
 } {
   const store = inject(TranslationStore);
 
-  const source = store.locale as WritableSignal<string> & {
+  const source = computed(() => store.locale()) as WritableSignal<string> & {
     isLoading: Signal<boolean>;
   };
 
-  const originalSet = source.set;
-
-  source.set = (value: string) => {
-    if (value === untracked(source) || !store.hasLocaleLoaders(value)) return;
-
-    originalSet(value);
+  const set = (value: string) => {
+    if (
+      value === untracked(source) ||
+      !store.hasLocaleLoaders(value) ||
+      untracked(store.loadQueue).includes(value)
+    )
+      return;
+    store.loadQueue.update((q) => [...q, value]);
   };
-
+  source.set = set;
   source.update = (updater: (value: string) => string) => {
     const next = updater(untracked(source));
     source.set(next);
   };
+  source.asReadonly = () => source;
 
   source.isLoading = store.dynamicLocaleLoader.isLoading;
 

packages/translate/src/lib/translator.ts

@@ -22,8 +22,14 @@ export abstract class Translator<
 
   transform<K extends keyof TMap & string>(
     key: K,
-    ...args: TMap[K] extends void ? [] : [TMap[K]]
+    ...args: TMap[K] extends void
+      ? [locale?: string]
+      : [TMap[K], locale?: string]
   ): string {
-    return this.t(key, ...args);
+    const actualArgs = args.filter(
+      (a) => typeof a === 'object',
+    ) as TMap[K] extends void ? [] : [TMap[K]];
+
+    return this.t(key, ...actualArgs);
   }
 }