feat(transloco): support nested array of scopes

libs/transloco/src/lib/helpers.ts

@@ -1,4 +1,4 @@
-import { ProviderScope, Translation } from './types';
+import { NestedArray, ProviderScope, Translation } from './types';
 import { flatten as _flatten, unflatten as _unflatten } from 'flat';
 
 export function getValue<T>(obj: T, path: keyof T) {
@@ -130,3 +130,9 @@ export function unflatten(obj: Translation): Translation {
 export function flatten(obj: Translation): Translation {
   return _flatten(obj, { safe: true });
 }
+
+export function flattenArray<T>(arr: NestedArray<T>): T[] {
+  // not using "Infinity" to avoid call stack issues if someone passes an array that references itself
+  // "100 as 1" is used to trick TS to not attempt to resolve that level of nesting
+  return arr.flat(100 as 1) as T[];
+}

libs/transloco/src/lib/scope-resolver.ts

@@ -1,10 +1,10 @@
-import { TranslocoScope, ProviderScope, MaybeArray } from './types';
+import { TranslocoScope, ProviderScope } from './types';
 import { TranslocoService } from './transloco.service';
 import { isScopeObject, toCamelCase } from './helpers';
 
 type ScopeResolverParams = {
   inline: string | undefined;
-  provider: MaybeArray<TranslocoScope>;
+  provider: TranslocoScope;
 };
 
 export class ScopeResolver {

libs/transloco/src/lib/tests/directive/multi-scope-alias.spec.ts

@@ -6,15 +6,13 @@ import {
 } from '@ngneat/spectator';
 import { createFactory } from './shared';
 import { providersMock, runLoader } from '../mocks';
-import { Component } from '@angular/core';
+import { Component, Provider } from '@angular/core';
 import { TranslocoDirective } from '../../transloco.directive';
 import { TRANSLOCO_SCOPE } from '../../transloco-scope';
 import { TranslocoModule } from '../../transloco.module';
 
-describe('Scope alias', () => {
-  let spectator: SpectatorHost<TranslocoDirective>;
-
-  const createHost = createFactory([
+function getScopeProviders(): Provider[] {
+  return [
     {
       provide: TRANSLOCO_SCOPE,
       useValue: {
@@ -31,17 +29,52 @@ describe('Scope alias', () => {
       },
       multi: true,
     },
-  ]);
+  ];
+}
+
+function getNestedScopeProviders(): Provider[] {
+  return [
+    {
+      provide: TRANSLOCO_SCOPE,
+      useValue: [
+        {
+          scope: 'admin-page',
+          alias: 'adminPageAlias',
+        },
+        {
+          scope: 'lazy-page',
+          alias: 'lazyPage',
+        },
+      ],
+      multi: true,
+    },
+  ];
+}
+
+describe('Scope alias', () => {
+  let spectator: SpectatorHost<TranslocoDirective>;
+
+  const createHostWithSeparateScopes = createFactory(getScopeProviders());
+  const createHostWithNestedScopes = createFactory(getScopeProviders());
+  const template = `<section *transloco="let t;">
+    <div>
+      {{t('adminPageAlias.title')}}<br />
+      {{t('lazyPage.title')}}
+    </div>
+  </section>
+  `;
+
+  it('should support multiple scopes with aliases provided separately', fakeAsync(() => {
+    spectator = createHostWithSeparateScopes(template);
+    runLoader();
+    runLoader();
+    spectator.detectChanges();
+    expect(spectator.query('div')).toHaveText('Admin english', false);
+    expect(spectator.query('div')).toHaveText('Admin Lazy english', false);
+  }));
 
-  it('should support multiple scopes with aliases', fakeAsync(() => {
-    spectator = createHost(`
-        <section *transloco="let t;">
-          <div>
-            {{t('adminPageAlias.title')}}<br />
-            {{t('lazyPage.title')}}
-          </div>
-        </section>
-    `);
+  it('should support nested scopes with aliases', fakeAsync(() => {
+    spectator = createHostWithNestedScopes(template);
     runLoader();
     runLoader();
     spectator.detectChanges();
@@ -52,41 +85,39 @@ describe('Scope alias', () => {
 
 @Component({
   template: `
-    <p>{{ 'lazy.title' | transloco }}</p>
-    <span>{{ 'admin.title' | transloco }}</span>
+    <p>{{ 'lazyPage.title' | transloco }}</p>
+    <span>{{ 'adminPageAlias.title' | transloco }}</span>
     <h1>{{ 'nested.title' | transloco }}</h1>
   `,
 })
 class TestPipe {}
 
 describe('Scope alias pipe', () => {
   let spectator: Spectator<TestPipe>;
-  const createComponent = createComponentFactory({
-    component: TestPipe,
-    imports: [TranslocoModule],
-    providers: [
-      providersMock,
-      {
-        provide: TRANSLOCO_SCOPE,
-        useValue: {
-          scope: 'lazy-page',
-          alias: 'lazy',
-        },
-        multi: true,
-      },
-      {
-        provide: TRANSLOCO_SCOPE,
-        useValue: {
-          scope: 'admin-page',
-          alias: 'admin',
-        },
-        multi: true,
-      },
-    ],
-  });
+  const createComponentFactoryWithProviders = (providers: Provider[]) =>
+    createComponentFactory({
+      component: TestPipe,
+      imports: [TranslocoModule],
+      providers: [providersMock, providers],
+    });
+  const createComponentSeparateScopes = createComponentFactoryWithProviders(
+    getScopeProviders()
+  );
+  const createComponentNestedScopes = createComponentFactoryWithProviders(
+    getNestedScopeProviders()
+  );
+
+  it('should support multiple scope aliases provided separately', fakeAsync(() => {
+    spectator = createComponentSeparateScopes();
+    runLoader();
+    runLoader();
+    spectator.detectChanges();
+    expect(spectator.query('p')).toHaveText('Admin Lazy english');
+    expect(spectator.query('span')).toHaveText('Admin english');
+  }));
 
-  it('should support multiple scope aliasses', fakeAsync(() => {
-    spectator = createComponent();
+  it('should support nested scope aliases', fakeAsync(() => {
+    spectator = createComponentNestedScopes();
     runLoader();
     runLoader();
     spectator.detectChanges();

libs/transloco/src/lib/transloco.directive.ts

@@ -30,6 +30,7 @@ import {
 } from './shared';
 import { LangResolver } from './lang-resolver';
 import { ScopeResolver } from './scope-resolver';
+import { flattenArray } from './helpers';
 
 type TranslateFn = (key: string, params?: HashMap) => any;
 interface ViewContext {
@@ -107,7 +108,7 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
 
           return Array.isArray(this.providerScope)
             ? forkJoin(
-                (<TranslocoScope[]>this.providerScope).map((providerScope) =>
+                flattenArray(this.providerScope).map((providerScope) =>
                   this.resolveScope(lang, providerScope)
                 )
               )

libs/transloco/src/lib/transloco.pipe.ts

@@ -19,6 +19,7 @@ import {
 } from './shared';
 import { LangResolver } from './lang-resolver';
 import { ScopeResolver } from './scope-resolver';
+import { flattenArray } from './helpers';
 
 @Pipe({
   name: 'transloco',
@@ -79,7 +80,7 @@ export class TranslocoPipe implements PipeTransform, OnDestroy {
 
           return Array.isArray(this.providerScope)
             ? forkJoin(
-                (<TranslocoScope[]>this.providerScope).map((providerScope) =>
+                flattenArray(this.providerScope).map((providerScope) =>
                   this.resolveScope(lang, providerScope)
                 )
               )

libs/transloco/src/lib/types.ts

@@ -44,7 +44,8 @@ export interface ProviderScope {
   loader?: InlineLoader;
   alias?: string;
 }
-export type MaybeArray<T> = T | T[];
+export type NestedArray<T> = Array<T> | Array<NestedArray<T>>;
+export type MaybeArray<T> = T | NestedArray<T>;
 export type TranslocoScope = ProviderScope | string | undefined;
 export type InlineLoader = HashMap<() => Promise<Translation>>;
 export interface LoadOptions {

libs/transloco/tsconfig.lib.json

@@ -7,7 +7,7 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": ["dom", "es2018"]
+    "lib": ["dom", "es2019"]
   },
   "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
   "include": ["**/*.ts"]

nx.json

@@ -14,12 +14,7 @@
     "default": {
       "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": [
-          "build",
-          "lint",
-          "test",
-          "e2e"
-        ],
+        "cacheableOperations": ["build", "lint", "test", "e2e"],
         "parallel": 1
       }
     }