feat(transloco): add option to not change the casing of the provided …

…scope

.prettierrc

@@ -1,3 +1,3 @@
 {
-  "singleQuote": true,
+  "singleQuote": true
 }

docs/docs/getting-started/config-options.mdx

@@ -113,3 +113,14 @@ translocoConfig({
   interpolation: ['<<<', '>>>']
 })
 ```
+
+### `scopes.keepCasing`
+This will make sure that the casing of the provided scope name is not altered, given that no alias has been set otherwise this setting will be ignored.
+
+```ts
+translocoConfig({
+  scopes: {
+    keepCasing: false
+  }
+})
+```

docs/docs/lazy-load/scope-configuration.mdx

@@ -139,8 +139,9 @@ Now we can access each one of the `todos` keys by using the `todos` namespace:
 ```
 
 ## Scope's namespace
+By default, the namespace will be the `scope`'s name camel-cased. you can keep the original casing by providing the [`scope.keepCasing`](../getting-started/config-options#scopeskeepcasing) config option.
 
-By default, the namespace will be the `scope` name (camel cased), but we can override it by providing custom `alias` name in the module/component `scope` provider:
+You can also provide a custom scope namespace by specifying an `alias` name in the module/component `scope` provider:
 
 ```ts
 provideTranslocoScope({ scope: 'todos', alias: 'customName' })

libs/transloco/src/lib/helpers.ts

@@ -89,7 +89,7 @@ export function coerceArray<T>(value: T | T[]): T[] {
 export function toCamelCase(str: string): string {
   return str
     .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) =>
-      index == 0 ? word.toLowerCase() : word.toUpperCase()
+      index == 0 ? word.toLowerCase() : word.toUpperCase(),
     )
     .replace(/\s+|_|-|\//g, '');
 }

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

@@ -19,7 +19,12 @@ export class ScopeResolver {
 
     if (provider) {
       if (isScopeObject(provider)) {
-        const { scope, alias = toCamelCase(scope) } = provider as ProviderScope;
+        const {
+          scope,
+          alias = this.service.config.scopes.keepCasing
+            ? scope
+            : toCamelCase(scope),
+        } = provider as ProviderScope;
         this.service._setScopeAlias(scope, alias);
 
         return scope;

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

@@ -8,6 +8,11 @@ describe('ScopeResolver', () => {
     spy = jasmine.createSpy('setScopeAlias');
     resolver = new ScopeResolver({
       _setScopeAlias: spy,
+      config: {
+        scopes: {
+          keepCasing: false,
+        },
+      },
     } as any);
   });
 
@@ -16,7 +21,7 @@ describe('ScopeResolver', () => {
       resolver.resolve({
         inline: 'lazy-page',
         provider: 'admin-page',
-      })
+      }),
     ).toEqual('lazy-page');
   });
 
@@ -25,7 +30,7 @@ describe('ScopeResolver', () => {
       resolver.resolve({
         inline: undefined,
         provider: 'admin-page',
-      })
+      }),
     ).toEqual('admin-page');
   });
 
@@ -34,7 +39,7 @@ describe('ScopeResolver', () => {
       resolver.resolve({
         inline: undefined,
         provider: undefined,
-      })
+      }),
     ).toEqual(undefined);
   });
 
@@ -46,7 +51,7 @@ describe('ScopeResolver', () => {
           scope: 'admin-page',
           alias: 'admin',
         },
-      })
+      }),
     ).toEqual('admin-page');
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith('admin-page', 'admin');
@@ -59,7 +64,7 @@ describe('ScopeResolver', () => {
         provider: {
           scope: 'admin-page',
         },
-      })
+      }),
     ).toEqual('admin-page');
     // one from before
     expect(spy).toHaveBeenCalledTimes(1);
@@ -73,10 +78,36 @@ describe('ScopeResolver', () => {
         provider: {
           scope: 'nested/scopes/admin-page',
         },
-      })
+      }),
     ).toEqual('nested/scopes/admin-page');
     // one from before
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith('nested/scopes/admin-page', 'nestedScopesAdminPage');
+    expect(spy).toHaveBeenCalledWith(
+      'nested/scopes/admin-page',
+      'nestedScopesAdminPage',
+    );
+  });
+
+  it('should keep the original scope name', () => {
+    resolver = new ScopeResolver({
+      _setScopeAlias: spy,
+      config: {
+        scopes: {
+          keepCasing: true,
+        },
+      },
+    } as any);
+
+    expect(
+      resolver.resolve({
+        inline: undefined,
+        provider: {
+          scope: 'AdMiN-pAgE',
+        },
+      }),
+    ).toEqual('AdMiN-pAgE');
+    // one from before
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('AdMiN-pAgE', 'AdMiN-pAgE');
   });
 });

libs/transloco/src/lib/tests/service/setTranslation.spec.ts

@@ -15,14 +15,14 @@ describe('setTranslation', () => {
     service = createService();
     setTranslationsSpy = spyOn(
       (service as any).translations,
-      'set'
+      'set',
     ).and.callThrough();
   });
 
   it('should add translation to the map after passing through the interceptor', () => {
     const interceptorSpy = spyOn(
       (service as any).interceptor,
-      'preSaveTranslation'
+      'preSaveTranslation',
     ).and.callThrough();
     const lang = 'en';
     const translation = flatten(mockLangs[lang]);
@@ -102,5 +102,16 @@ describe('setTranslation', () => {
       };
       expect(setTranslationsSpy).toHaveBeenCalledWith('en', merged);
     });
+
+    it("should not change scope's name given scope.keepCasing is set to true", () => {
+      service.config.scopes.keepCasing = true;
+      lang = 'LAZY-page/en';
+      service.setTranslation(translation, lang);
+      const merged = {
+        ...flatten(mockLangs.en),
+        ...flatten({ 'LAZY-page': { ...translation } }),
+      };
+      expect(setTranslationsSpy).toHaveBeenCalledWith('en', merged);
+    });
   });
 });

libs/transloco/src/lib/transloco.config.ts

@@ -18,14 +18,17 @@ export interface TranslocoConfig {
     allowEmpty: boolean;
   };
   interpolation: [string, string];
+  scopes: {
+    keepCasing?: boolean;
+  };
 }
 
 export const TRANSLOCO_CONFIG = new InjectionToken<TranslocoConfig>(
   'TRANSLOCO_CONFIG',
   {
     providedIn: 'root',
     factory: () => defaultConfig,
-  }
+  },
 );
 
 export const defaultConfig: TranslocoConfig = {
@@ -44,18 +47,22 @@ export const defaultConfig: TranslocoConfig = {
     aot: false,
   },
   interpolation: ['{{', '}}'],
+  scopes: {
+    keepCasing: false,
+  },
 };
 
-type DeepPartial<T> = T extends Array<any>
-  ? T
-  : T extends object
-  ? { [P in keyof T]?: DeepPartial<T[P]> }
-  : T;
+type DeepPartial<T> =
+  T extends Array<any>
+    ? T
+    : T extends object
+      ? { [P in keyof T]?: DeepPartial<T[P]> }
+      : T;
 
 export type PartialTranslocoConfig = DeepPartial<TranslocoConfig>;
 
 export function translocoConfig(
-  config: PartialTranslocoConfig = {}
+  config: PartialTranslocoConfig = {},
 ): TranslocoConfig {
   return {
     ...defaultConfig,
@@ -68,5 +75,9 @@ export function translocoConfig(
       ...defaultConfig.flatten,
       ...config.flatten,
     },
+    scopes: {
+      ...defaultConfig.scopes,
+      ...config.scopes,
+    },
   };
 }