fix: 🐛 add key prefix when translating scope (#116)

Author: shaharkazaz

projects/ngneat/transloco/src/lib/tests/transloco.mocks.ts

@@ -10,6 +10,8 @@ import enLazy from '../../../../../../src/assets/i18n/lazy-page/en.json';
 import esLazy from '../../../../../../src/assets/i18n/lazy-page/es.json';
 import enLazyScopeAlias from '../../../../../../src/assets/i18n/lazy-scope-alias/en.json';
 import esLazyScopeAlias from '../../../../../../src/assets/i18n/lazy-scope-alias/es.json';
+import enMF from '../../../../../../src/assets/i18n/transpilers/messageformat/en.json';
+import esMF from '../../../../../../src/assets/i18n/transpilers/messageformat/es.json';
 import { tick } from '@angular/core/testing';
 import { TranslocoService } from '../transloco.service';
 import { TRANSLOCO_LOADING_TEMPLATE } from '../transloco-loading-template';
@@ -23,7 +25,9 @@ export const mockLangs = {
   'lazy-page/en': enLazy,
   'lazy-page/es': esLazy,
   'lazy-scope-alias/en': enLazyScopeAlias,
-  'lazy-scope-alias/es': esLazyScopeAlias
+  'lazy-scope-alias/es': esLazyScopeAlias,
+  'transpilers/messageformat/en': enMF,
+  'transpilers/messageformat/es': esMF
 };
 
 export const loader = {

projects/ngneat/transloco/src/lib/tests/transloco.service.spec.ts

@@ -122,19 +122,47 @@ describe('TranslocoService', () => {
         expect(spy).toHaveBeenCalledTimes(1);
       }));
 
-      it('should support scoped lang', fakeAsync(() => {
+      it('should support scope', fakeAsync(() => {
         const spy = createSpy();
-        service.selectTranslate('lazyPage.title', null, 'lazy-page').subscribe(spy);
+        service.selectTranslate('title', null, 'lazy-page').subscribe(spy);
         runLoader();
         expect(spy).toHaveBeenCalledWith('Admin Lazy english');
       }));
 
-      it('should support scoped lang with param', fakeAsync(() => {
+      it('should support scope with lang', fakeAsync(() => {
         const spy = createSpy();
-        service.selectTranslate('lazyPage.withParam', { param: 'Transloco' }, 'lazy-page').subscribe(spy);
+        service.selectTranslate('title', null, 'lazy-page/es').subscribe(spy);
+        runLoader();
+        expect(spy).toHaveBeenCalledWith('Admin Lazy spanish');
+      }));
+
+      it('should support scope with param', fakeAsync(() => {
+        const spy = createSpy();
+        service.selectTranslate('withParam', { param: 'Transloco' }, 'lazy-page').subscribe(spy);
         runLoader();
         expect(spy).toHaveBeenCalledWith('Admin Lazy english Transloco');
       }));
+
+      it('should support scope with lang and params', fakeAsync(() => {
+        const spy = createSpy();
+        service.selectTranslate('withParam', { param: 'Transloco' }, 'lazy-page/es').subscribe(spy);
+        runLoader();
+        expect(spy).toHaveBeenCalledWith('Admin Lazy spanish Transloco');
+      }));
+
+      it('should support nested scope with params', fakeAsync(() => {
+        const spy = createSpy();
+        service.selectTranslate('params', { value: 'Transloco' }, 'transpilers/messageformat').subscribe(spy);
+        runLoader();
+        expect(spy).toHaveBeenCalledWith('Replaces standard Transloco - english');
+      }));
+
+      it('should support nested scope with lang and params', fakeAsync(() => {
+        const spy = createSpy();
+        service.selectTranslate('params', { value: 'Transloco' }, 'transpilers/messageformat/es').subscribe(spy);
+        runLoader();
+        expect(spy).toHaveBeenCalledWith('Replaces standard Transloco - spanish');
+      }));
     });
 
     describe('translateObject', () => {

projects/ngneat/transloco/src/lib/transloco.service.ts

@@ -163,11 +163,21 @@ export class TranslocoService implements OnDestroy {
    * translate('scope.someKey', { }, 'en')
    */
   translate<T = any>(key: TranslateParams, params: HashMap = {}, lang = this.getActiveLang()): T {
-    const resolveLang = this._isLangScoped(lang) ? this.getActiveLang() : lang;
+    let resolveLang = lang;
+    let scope;
+    if (this._isLangScoped(lang)) {
+      const langFromScope = getLangFromScope(lang);
+      const hasLang = this._isLang(langFromScope);
+      resolveLang = hasLang ? langFromScope : this.getActiveLang();
+      scope = this.getMappedScope(hasLang ? getScopeFromLang(lang) : lang);
+    }
+
     if (Array.isArray(key)) {
-      return key.map(k => this.translate(k, params, resolveLang)) as any;
+      return key.map(k => this.translate(scope ? `${scope}.${k}` : k, params, resolveLang)) as any;
     }
 
+    key = scope ? `${scope}.${key}` : key;
+
     if (!key) {
       return this.missingHandler.handle(key, this.config);
     }
@@ -292,8 +302,7 @@ export class TranslocoService implements OnDestroy {
 
     // Merged the scoped language into the active language
     if (scope) {
-      const { scopeMapping = {} } = this.config;
-      const key = scopeMapping[scope] || toCamelCase(scope);
+      const key = this.getMappedScope(scope);
       flattenScopeOrTranslation = flatten({ [key]: translation });
     }
 
@@ -351,6 +360,13 @@ export class TranslocoService implements OnDestroy {
     return this.getAvailableLangsIds().indexOf(lang) === -1;
   }
 
+  /**
+   * @internal
+   */
+  _isLang(lang: string) {
+    return this.getAvailableLangsIds().indexOf(lang) !== -1;
+  }
+
   /**
    * @internal
    *
@@ -371,7 +387,10 @@ export class TranslocoService implements OnDestroy {
    * @internal
    */
   _completeScopeWithLang(langOrScope: string) {
-    return this._isLangScoped(langOrScope) ? `${langOrScope}/${this.getActiveLang()}` : langOrScope;
+    if (this._isLangScoped(langOrScope) && !this._isLang(getLangFromScope(langOrScope))) {
+      return `${langOrScope}/${this.getActiveLang()}`;
+    }
+    return langOrScope;
   }
 
   /**
@@ -463,4 +482,9 @@ export class TranslocoService implements OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }
+
+  private getMappedScope(scope: string): string {
+    const { scopeMapping = {} } = this.config;
+    return scopeMapping[scope] || toCamelCase(scope);
+  }
 }

src/assets/i18n/lazy-page/es.json

@@ -1,3 +1,4 @@
 {
-  "title": "Admin Lazy spanish"
+  "title": "Admin Lazy spanish",
+  "withParam": "Admin Lazy spanish {{param}}"
 }