feat: 🎸 mutli-langs

add support for static lang

Author: Netanel Basal

README.md

@@ -431,6 +431,8 @@ Alternatively, here is how to use it directly in the template:
 </ng-container>
 ```
 
+Note that it will be used as the **initial language**. If you need it to be **static**, you can use the `static` pipe: `en|static`.
+
 ## Custom Loading Template
 
 Transloco provides you with a way to define a loading template, that will be used while the translation file is loading.
@@ -672,9 +674,10 @@ Transloco provides a schematics [command](https://github.com/ngneat/transloco/bl
 
 ## Plugins
 
-- [Messageformat](https://github.com/ngneat/transloco/tree/master/projects/ngneat/transloco-messageformat) (offical)
-- [Persist Language](https://github.com/ngneat/transloco/tree/master/projects/ngneat/transloco-persist-lang) (offical)
-- [Persist Translations](https://github.com/ngneat/transloco/tree/master/projects/ngneat/transloco-persist-translations) (offical)
+- [Messageformat](https://github.com/ngneat/transloco/tree/master/projects/ngneat/transloco-messageformat) (official)
+- [Persist Language](https://github.com/ngneat/transloco/tree/master/projects/ngneat/transloco-persist-lang) (official)
+- [Persist Translations](https://github.com/ngneat/transloco/tree/master/projects/ngneat/transloco-persist-translations) (official)
+- [Preload Languages](https://github.com/ngneat/transloco/tree/master/projects/ngneat/transloco-preload-langs) (official)
 
 ## Support
 

projects/ngneat/transloco-preload-langs/tsconfig.lib.json

@@ -1,5 +1,4 @@
 {
-  "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../out-tsc/lib",
     "target": "es2015",

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

@@ -123,15 +123,15 @@ export function isBrowser() {
 /**
  * @example
  *
- * getPipeValue('todos|scoped', 'scoped') [true, todos]
- * getPipeValue('eng|static', 'static') [true, eng]
- * getPipeValue('eng', 'static') [false, '']
+ * getPipeValue('todos|scoped', 'scoped') [true, 'todos']
+ * getPipeValue('en|static', 'static') [true, 'en']
+ * getPipeValue('en', 'static') [false, 'en']
  */
-export function getPipeValue(str: string, value: string, char = '|') {
+export function getPipeValue(str: string, value: string, char = '|'): [boolean, string] {
   if (isString(str)) {
     const splitted = str.split(char);
     const lastItem = splitted.pop();
-    return lastItem === value ? [true, splitted.toString()] : [false, ''];
+    return lastItem === value ? [true, splitted.toString()] : [false, lastItem];
   }
 
   return [false, ''];

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

@@ -0,0 +1,13 @@
+import { TranslocoService } from './transloco.service';
+import { getPipeValue } from './helpers';
+
+export function shouldListenToLangChanges(service: TranslocoService, lang: string) {
+  const [hasStatic] = getPipeValue(lang, 'static');
+  if (hasStatic === false) {
+    // If we didn't get 'lang|static' check if it's set in the global level
+    return service.config.listenToLangChange;
+  }
+
+  // We have 'lang|static' so don't listen to lang changes
+  return false;
+}

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

@@ -0,0 +1,10 @@
+import { getPipeValue } from '../helpers';
+
+describe('getPipeValue', () => {
+  it('should work', () => {
+    expect(getPipeValue(null, 'static')).toEqual([false, '']);
+    expect(getPipeValue('en', 'static')).toEqual([false, 'en']);
+    expect(getPipeValue('en|static', 'static')).toEqual([true, 'en']);
+    expect(getPipeValue('todos-page|static', 'static')).toEqual([true, 'todos-page']);
+  });
+});

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

@@ -202,6 +202,95 @@ describe('TranslocoDirective', () => {
     }));
   });
 
+  describe('Multi Langs', () => {
+    it('should support multi langs', fakeAsync(() => {
+      host = createHost(
+        `
+      <section *transloco="let t;">
+        <h1>{{ t.home }}</h1>     
+      </section>
+      <section *transloco="let t; lang: 'es'">
+       <h2>{{ t.home }}</h2>     
+      </section>
+      `,
+        false
+      );
+      const service = host.get<TranslocoService>(TranslocoService);
+      setlistenToLangChange(service);
+      host.detectChanges();
+      runLoader();
+      host.detectChanges();
+      expect(host.queryHost('h1')).toHaveText('home english');
+      expect(host.queryHost('h2')).toHaveText('home spanish');
+      service.setActiveLang('es');
+      runLoader();
+      host.detectChanges();
+      // it should change both because when we don't have static it's
+      // only the initial value
+      expect(host.queryHost('h1')).toHaveText('home spanish');
+      expect(host.queryHost('h2')).toHaveText('home spanish');
+    }));
+
+    it('should respect scopes', fakeAsync(() => {
+      host = createHost(
+        `
+      <section *transloco="let t;">
+        <h1>{{ t.home }}</h1>     
+      </section>
+      <section *transloco="let t; lang: 'es'; scope: 'lazy-page'">
+       <h2>{{ t.lazyPage.title }}</h2>     
+      </section>
+      `,
+        false
+      );
+      const service = host.get<TranslocoService>(TranslocoService);
+      setlistenToLangChange(service);
+      host.detectChanges();
+      runLoader();
+      host.detectChanges();
+      expect(host.queryHost('h1')).toHaveText('home english');
+      expect(host.queryHost('h2')).toHaveText('Admin Lazy spanish');
+      service.setActiveLang('es');
+      runLoader();
+      host.detectChanges();
+      // it should change both because when we don't have static it's
+      // only the initial value
+      expect(host.queryHost('h1')).toHaveText('home spanish');
+      expect(host.queryHost('h2')).toHaveText('Admin Lazy spanish');
+      service.setActiveLang('en');
+      runLoader();
+      host.detectChanges();
+      expect(host.queryHost('h1')).toHaveText('home english');
+      expect(host.queryHost('h2')).toHaveText('Admin Lazy english');
+    }));
+
+    it('should not change the static lang', fakeAsync(() => {
+      host = createHost(
+        `
+      <section *transloco="let t;">
+        <h1>{{ t.home }}</h1>  
+        <section *transloco="let inline; lang: 'en|static'">
+          <h2>{{ inline.home }}</h2>         
+        </section>      
+      </section>
+      `,
+        false
+      );
+      const service = host.get<TranslocoService>(TranslocoService);
+      setlistenToLangChange(service);
+      host.detectChanges();
+      runLoader();
+      host.detectChanges();
+      expect(host.queryHost('h1')).toHaveText('home english');
+      expect(host.queryHost('h2')).toHaveText('home english');
+      service.setActiveLang('es');
+      runLoader();
+      host.detectChanges();
+      expect(host.queryHost('h1')).toHaveText('home spanish');
+      expect(host.queryHost('h2')).toHaveText('home english');
+    }));
+  });
+
   describe('Loading Template', () => {
     it('should attach and detach view with inline loader template', fakeAsync(() => {
       spyOn<TemplateHandler>(TemplateHandler.prototype, 'attachView').and.callThrough();

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

@@ -21,7 +21,8 @@ import { TRANSLOCO_LOADING_TEMPLATE } from './transloco-loading-template';
 import { TRANSLOCO_SCOPE } from './transloco-scope';
 import { TranslocoService } from './transloco.service';
 import { HashMap, Translation } from './types';
-import { getValue } from './helpers';
+import { getValue, getPipeValue } from './helpers';
+import { shouldListenToLangChanges } from './shared';
 
 @Directive({
   selector: '[transloco]'
@@ -60,12 +61,12 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
       this.loaderTplHandler.attachView();
     }
 
-    const { listenToLangChange } = this.translocoService.config;
+    const listenToLangChange = shouldListenToLangChanges(this.translocoService, this.providerLang || this.inlineLang);
 
     this.subscription = this.translocoService.langChanges$
       .pipe(
-        switchMap(globalLang => {
-          const lang = this.getLang(globalLang);
+        switchMap(() => {
+          const lang = this.getLang();
           const scope = this.getScope();
           this.langName = scope ? `${scope}/${lang}` : lang;
           return this.translocoService._loadDependencies(this.langName);
@@ -79,9 +80,7 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
         let targetLang = this.langName;
         const scope = this.getScope();
         if (scope) {
-          targetLang = this.translocoService.isSharedScope
-            ? this.getLang(this.translocoService.getActiveLang())
-            : this.langName;
+          targetLang = this.translocoService.isSharedScope ? this.getLang() : this.langName;
         }
         const translation = this.translocoService.getTranslation(targetLang);
         this.langName = targetLang;
@@ -125,24 +124,26 @@ export class TranslocoDirective implements OnInit, OnDestroy, OnChanges {
   }
 
   // inline => providers => global
-  private getLang(globalLang: string) {
+  private getLang() {
     /**
      * When the user changes the lang we need to update
      * the view. Otherwise, the lang will remain the inline/provided lang
      */
     if (this.initialized) {
-      return globalLang;
+      return this.translocoService.getActiveLang();
     }
 
     if (this.inlineLang) {
-      return this.inlineLang;
+      const [_, lang] = getPipeValue(this.inlineLang, 'static');
+      return lang;
     }
 
     if (this.providerLang) {
-      return this.providerLang;
+      const [_, lang] = getPipeValue(this.providerLang, 'static');
+      return lang;
     }
 
-    return globalLang;
+    return this.translocoService.getActiveLang();
   }
 
   ngOnDestroy() {

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

@@ -6,6 +6,7 @@ import { Subscription } from 'rxjs';
 import { TRANSLOCO_SCOPE } from './transloco-scope';
 import { TRANSLOCO_LANG } from './transloco-lang';
 import { getLangFromScope, getScopeFromLang } from './helpers';
+import { shouldListenToLangChanges } from './shared';
 
 @Pipe({
   name: 'transloco',
@@ -25,8 +26,7 @@ export class TranslocoPipe implements PipeTransform, OnDestroy {
     @Optional() @Inject(TRANSLOCO_LANG) private providerLang: string | null,
     private cdr: ChangeDetectorRef
   ) {
-    const { listenToLangChange } = this.translocoService.config;
-    this.listenToLangChange = listenToLangChange;
+    this.listenToLangChange = shouldListenToLangChanges(this.translocoService, this.providerLang);
   }
 
   transform(key: string, params: HashMap = {}): string {

src/app/app.module.ts

@@ -23,8 +23,8 @@ import { MessageFormatTranspiler } from '@ngneat/transloco-messageformat';
     BrowserModule,
     AppRoutingModule,
     TranslocoModule,
-    HttpClientModule,
-    TranslocoPreloadLangsModule.preload(['es', 'todos-page|scoped'])
+    HttpClientModule
+    // TranslocoPreloadLangsModule.preload(['es', 'todos-page|scoped'])
     // TranslocoPersistLangModule.init({
     //   getLangFn,
     //   storage: {

src/app/multilangs/multilangs.component.html

@@ -10,4 +10,14 @@ <h4>Spanish: (inline lang, scope: lazy-page)</h4>
 
 <provider-lang></provider-lang>
 
+<h4>Static Lang: <code>es</code></h4>
+<ng-container *transloco="let t; lang: 'es|static'; loadingTpl: loading">
+  <p>{{ t.home }}</p>
+</ng-container>
+
+<h4>Static Lang with scope <code>lazy-page/es</code></h4>
+<ng-container *transloco="let t; lang: 'es|static'; loadingTpl: loading; scope: 'lazy-page'">
+  <p>{{ t.lazyPage.title }}</p>
+</ng-container>
+
 <ng-template #loading>Loading..</ng-template>