fix: handle parser error when couldn't parse

Author: itayod

cypress/integration/home.ts

@@ -29,6 +29,10 @@ export function generateContent(lang = 'english') {
 
   // Missing key
   cy.get(`[data-cy=missing-key]`).should('contain', 'alertty');
+
+  // Loop
+  cy.get(`[data-cy=translation-loop]`).should('contain', `b ${lang}`);
+  cy.get(`[data-cy=translation-loop]`).should('contain', `c ${lang}`);
 }
 
 describe('Transloco', () => {

projects/transloco/src/lib/tests/transloco.parser.spec.ts

@@ -1,4 +1,5 @@
 import { DefaultParser } from '../../public-api';
+import createSpy = jasmine.createSpy;
 
 describe('TranslocoParser', () => {
   const parser = new DefaultParser();
@@ -34,4 +35,15 @@ describe('TranslocoParser', () => {
     expect(parser.parse(null)).toEqual(null);
     expect(parser.parse(undefined)).toEqual(undefined);
   });
+
+  it('shoudl call error handler when value can not be parsed', () => {
+    const errorCB = createSpy();
+    parser.parse(null, {}, {}, errorCB);
+    parser.parse(undefined, {}, {}, errorCB);
+    parser.parse(<any>false, {}, {}, errorCB);
+    parser.parse(<any>{}, {}, {}, errorCB);
+    parser.parse(<any>[], {}, {}, errorCB);
+
+    expect(errorCB).toHaveBeenCalledTimes(5);
+  });
 });

projects/transloco/src/lib/transloco.parser.ts

@@ -5,11 +5,15 @@ import { getValue } from './helpers';
 export const TRANSLOCO_PARSER = new InjectionToken('TRANSLOCO_PARSER');
 
 export abstract class TranslocoParser {
-  abstract parse(value: string, params: HashMap, lang: HashMap): string;
+  abstract parse(value: string, params: HashMap, lang: HashMap, onError?: Function): string;
 }
 
 export class DefaultParser extends TranslocoParser {
-  parse(value: string, params: HashMap = {}, lang?: HashMap) {
+  parse(value: string, params: HashMap = {}, lang?: HashMap, onError?: Function): string {
+    if (typeof value !== 'string') {
+      return onError ? onError() && value : value;
+    }
+
     return value
       ? value.replace(/{{(.*?)}}/g, function(_, match) {
           match = match.trim();

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

@@ -115,7 +115,8 @@ export class TranslocoService {
     if (!value) {
       return this.missingHandler.handle(key, params, this.config);
     }
-    return this.parser.parse(value, params, lang);
+
+    return this.parser.parse(value, params, lang, this.parseErrorHandler.bind(this, key));
   }
 
   /**
@@ -160,4 +161,8 @@ export class TranslocoService {
   getTranslation(lang: string) {
     return this.langs.get(lang);
   }
+
+  private parseErrorHandler(key) {
+    console.warn(`could not parse key: ${key}`);
+  }
 }

src/app/home/home.component.html

@@ -40,3 +40,8 @@ <h3 class="mtb">Missing key</h3>
 <ul class="list-group">
   <li class="list-group-item" data-cy="missing-key"><b>Open the console </b>{{ 'alertty' | transloco }}</li>
 </ul>
+
+<h3 class="mtb">Translation loop</h3>
+<ul class="list-group">
+  <li *ngFor="let key of translateList" class="list-group-item" data-cy="translation-loop">{{ key | transloco }}</li>
+</ul>

src/app/home/home.component.ts

@@ -9,17 +9,17 @@ export class HomeComponent implements OnInit {
   dynamic = '🦄';
   key = 'home';
 
-  constructor() {
-  }
+  translateList = ['b', 'c'];
 
-  ngOnInit() {
-  }
+  constructor() {}
+
+  ngOnInit() {}
 
   changeKey() {
     this.key = this.key === 'home' ? 'fromList' : 'home';
   }
 
   changeParam() {
-    this.dynamic = this.dynamic === '🦄' ? '🦄🦄🦄' :'🦄';
+    this.dynamic = this.dynamic === '🦄' ? '🦄🦄🦄' : '🦄';
   }
 }

src/assets/i18n/en.json

@@ -6,5 +6,7 @@
     "b": {
       "c": "a.b.c {{fromList}} english"
     }
-  }
+  },
+  "b": "b english",
+  "c": "c english"
 }

src/assets/i18n/es.json

@@ -6,5 +6,7 @@
     "b": {
       "c": "a.b.c {{fromList}} spanish"
     }
-  }
+  },
+  "b": "b spanish",
+  "c": "c spanish"
 }