feat: 🎸 pass scope name to loader

Author: NetanelBasal

projects/ngneat/transloco/src/lib/get-fallbacks-loaders.ts

@@ -1,17 +1,18 @@
 import { from } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { resolveLoader } from './resolve-loader';
-import { TranslocoLoader } from './transloco.loader';
+import { TranslocoLoader, TranslocoLoaderData } from './transloco.loader';
 import { InlineLoader } from './types';
 
 export function getFallbacksLoaders(
   mainPath: string,
   fallbackPath: string,
   mainLoader: TranslocoLoader,
-  inlineLoader: InlineLoader
+  inlineLoader: InlineLoader,
+  data: TranslocoLoaderData
 ) {
   return [mainPath, fallbackPath].map(path => {
-    const loader = resolveLoader(path, mainLoader, inlineLoader);
+    const loader = resolveLoader(path, mainLoader, inlineLoader, data);
 
     return from(loader).pipe(
       map(translation => ({

projects/ngneat/transloco/src/lib/resolve-loader.ts

@@ -1,8 +1,13 @@
-import { TranslocoLoader } from './transloco.loader';
+import { TranslocoLoader, TranslocoLoaderData } from './transloco.loader';
 import { InlineLoader } from './types';
 import { isFunction } from './helpers';
 
-export function resolveLoader(path: string, mainLoader: TranslocoLoader, inlineLoader: InlineLoader) {
+export function resolveLoader(
+  path: string,
+  mainLoader: TranslocoLoader,
+  inlineLoader: InlineLoader,
+  data: TranslocoLoaderData
+) {
   if (inlineLoader) {
     const pathLoader = inlineLoader[path];
     if (isFunction(pathLoader) === false) {
@@ -12,5 +17,5 @@ export function resolveLoader(path: string, mainLoader: TranslocoLoader, inlineL
     return inlineLoader[path]().then(res => (res.default ? res.default : res));
   }
 
-  return mainLoader.getTranslation(path);
+  return mainLoader.getTranslation(path, data);
 }

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

@@ -1,6 +1,6 @@
 import { fakeAsync } from '@angular/core/testing';
 import { flatten } from '@ngneat/transloco';
-import { createService, mockLangs, runLoader } from '../transloco.mocks';
+import { createService, mockLangs } from '../transloco.mocks';
 import { loadLang } from './utils';
 
 describe('getTranslation', () => {

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

@@ -36,7 +36,7 @@ describe('load', () => {
     spyOn((service as any).loader, 'getTranslation').and.callThrough();
     service.load('en').subscribe();
     runLoader();
-    expect((service as any).loader.getTranslation).toHaveBeenCalledWith('en');
+    expect((service as any).loader.getTranslation).toHaveBeenCalledWith('en', { scope: null });
     expect((service as any).translations.size).toEqual(1);
   }));
 

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

@@ -37,7 +37,7 @@ describe('missingHandler', () => {
       service.load('en').subscribe();
       runLoader();
       expect(service.loader.getTranslation).toHaveBeenCalledTimes(2);
-      expect(service.loader.getTranslation.calls.allArgs()).toEqual([['en'], ['es']]);
+      expect(service.loader.getTranslation.calls.allArgs()).toEqual([['en', { scope: null }], ['es', { scope: null }]]);
     }));
 
     it('should get the translation from the fallback when there is no key', fakeAsync(() => {
@@ -58,7 +58,10 @@ describe('missingHandler', () => {
       spyOn(service.loader, 'getTranslation').and.callThrough();
       service.load('lazy-page/en').subscribe();
       runLoader(2000);
-      expect(service.loader.getTranslation.calls.allArgs()).toEqual([['lazy-page/en'], ['lazy-page/es']]);
+      expect(service.loader.getTranslation.calls.allArgs()).toEqual([
+        ['lazy-page/en', { scope: 'lazy-page' }],
+        ['lazy-page/es', { scope: 'lazy-page' }]
+      ]);
       expect(service.translate('empty', {}, 'lazy-page/en')).toEqual('resolved from es');
     }));
 

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

@@ -3,9 +3,13 @@ import { Observable, of } from 'rxjs';
 import { Translation } from './types';
 
 export interface TranslocoLoader {
-  getTranslation(lang: string): Observable<Translation> | Promise<Translation>;
+  getTranslation(lang: string, data: TranslocoLoaderData): Observable<Translation> | Promise<Translation>;
 }
 
+export type TranslocoLoaderData = {
+  scope: string;
+};
+
 export class DefaultLoader implements TranslocoLoader {
   constructor(private translations: Map<string, Translation>) {}
 

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

@@ -15,7 +15,11 @@ import {
 } from './types';
 import { flatten, getValue, isString, size, toCamelCase, unflatten } from './helpers';
 import { defaultConfig, TRANSLOCO_CONFIG, TranslocoConfig } from './transloco.config';
-import { TRANSLOCO_MISSING_HANDLER, TranslocoMissingHandler, TranslocoMissingHandlerData } from './transloco-missing-handler';
+import {
+  TRANSLOCO_MISSING_HANDLER,
+  TranslocoMissingHandler,
+  TranslocoMissingHandlerData
+} from './transloco-missing-handler';
 import { TRANSLOCO_INTERCEPTOR, TranslocoInterceptor } from './transloco.interceptor';
 import { TRANSLOCO_FALLBACK_STRATEGY, TranslocoFallbackStrategy } from './transloco-fallback-strategy';
 import { mergeConfig } from './merge-config';
@@ -114,17 +118,17 @@ export class TranslocoService implements OnDestroy {
   load(path: string, options: LoadOptions = {}): Observable<Translation> {
     if (this.cache.has(path) === false) {
       let loadTranslation: Observable<Translation | { translation: Translation; lang: string }[]>;
+      const isScope = this._isLangScoped(path);
+      const scope = isScope ? getScopeFromLang(path) : null;
 
       if (this.useFallbackTranslation(path)) {
         // if the path is scope the fallback should be `scope/fallbackLang`;
-        const fallback = this._isLangScoped(path)
-          ? `${getScopeFromLang(path)}/${this.firstFallbackLang}`
-          : this.firstFallbackLang;
+        const fallback = isScope ? `${scope}/${this.firstFallbackLang}` : this.firstFallbackLang;
 
-        const loaders = getFallbacksLoaders(path, fallback, this.loader, options.inlineLoader);
+        const loaders = getFallbacksLoaders(path, fallback, this.loader, options.inlineLoader, { scope });
         loadTranslation = forkJoin(loaders);
       } else {
-        const loader = resolveLoader(path, this.loader, options.inlineLoader);
+        const loader = resolveLoader(path, this.loader, options.inlineLoader, { scope });
         loadTranslation = from(loader);
       }
 

src/app/loaders/http.loader.ts

@@ -6,7 +6,7 @@ import { Injectable } from '@angular/core';
 export class HttpLoader implements TranslocoLoader {
   constructor(private http: HttpClient) {}
 
-  getTranslation(langPath: string) {
+  getTranslation(langPath: string, { scope }) {
     return this.http.get<Translation>(`/assets/i18n/${langPath}.json`);
   }
 }