feat: 🎸 Add interpolation to configuration (#330)

* feat: 🎸 Add RexExTranspiler

* refactor: 💡 Removed RegExTranspiler in favor of configuration

* refactor: 💡 Removed RegExp as transpilation option

* refactor: 💡 Moved wrapParam to testDefaultBehaviour scope

* fix: 🐛 MessageFormatTranspiler should use  TranslocoConfig

* refactor: 💡 removed unused const in spec

Author: Waterstraal

cypress/integration/transpilers.ts

@@ -3,22 +3,22 @@ export function testTranspilersContent(lang = 'english') {
   cy.get(`[data-cy=regular]`).should('contain', `Home - ${lang}`);
   cy.get(`[data-cy=with-params]`).should('contain', `Replaces standard 🦄 - ${lang}`);
   cy.get(`[data-cy=with-translation-reuse]`).should('contain', `a.b.c from list - ${lang}`);
-  cy.get(`[data-cy=with-message-format]`).should('contain', `The boy won his race - ${lang}`);
-  cy.get(`[data-cy=with-message-format-dynamic]`).should('contain', `The girl won her race - ${lang}`);
+  cy.get(`[data-cy=with-message-format]`).should('contain', `The boy named Henkie won his race - ${lang}`);
+  cy.get(`[data-cy=with-message-format-dynamic]`).should('contain', `The girl named Kim won her race - ${lang}`);
   cy.get(`[data-cy=with-message-format-params]`).should(
     'contain',
-    `Can replace transloco params and also give parse messageformat: The person won their race - ${lang}`
+    `Can replace transloco params and also give parse messageformat: The person named Joko won their race - ${lang}`
   );
 
   // Directive
   cy.get(`[data-cy=d-regular]`).should('contain', `Home - ${lang}`);
   cy.get(`[data-cy=d-with-params]`).should('contain', `Replaces standard 🦄 - ${lang}`);
   cy.get(`[data-cy=d-with-translation-reuse]`).should('contain', `a.b.c from list - ${lang}`);
-  cy.get(`[data-cy=d-with-message-format]`).should('contain', `The boy won his race - ${lang}`);
-  cy.get(`[data-cy=d-with-message-format-dynamic]`).should('contain', `The girl won her race - ${lang}`);
+  cy.get(`[data-cy=d-with-message-format]`).should('contain', `The boy named Pete won his race - ${lang}`);
+  cy.get(`[data-cy=d-with-message-format-dynamic]`).should('contain', `The girl named Maxime won her race - ${lang}`);
   cy.get(`[data-cy=d-with-message-format-params]`).should(
     'contain',
-    `Can replace transloco params and also give parse messageformat: The person won their race - ${lang}`
+    `Can replace transloco params and also give parse messageformat: The person named Ono won their race - ${lang}`
   );
 
   // Dynamic params
@@ -31,10 +31,10 @@ export function testTranspilersContent(lang = 'english') {
   cy.get(`[data-cy=p-regular]`).should('contain', `Home - ${lang}`);
   cy.get(`[data-cy=p-with-params]`).should('contain', `Replaces standard 🦄 - ${lang}`);
   cy.get(`[data-cy=p-with-translation-reuse]`).should('contain', `a.b.c from list - ${lang}`);
-  cy.get(`[data-cy=p-with-message-format]`).should('contain', `The boy won his race - ${lang}`);
-  cy.get(`[data-cy=p-with-message-format-dynamic]`).should('contain', `The girl won her race - ${lang}`);
+  cy.get(`[data-cy=p-with-message-format]`).should('contain', `The boy named Stef won his race - ${lang}`);
+  cy.get(`[data-cy=p-with-message-format-dynamic]`).should('contain', `The girl named Donna won her race - ${lang}`);
   cy.get(`[data-cy=p-with-message-format-params]`).should(
     'contain',
-    `Can replace transloco params and also give parse messageformat: The person won their race - ${lang}`
+    `Can replace transloco params and also give parse messageformat: The person named Mary won their race - ${lang}`
   );
 }

docs/docs/config-options.mdx

@@ -103,3 +103,12 @@ translocoConfig({
   }
 })
 ```
+
+### `interpolation`
+The start and end markings for parameters: (defaults to `['{{', '}}']`)
+```ts
+translocoConfig({
+  // This will enable you to specify parameters as such: `"Hello <<<value>>>"` 
+  interpolation: ['<<<', '>>>']
+})
+```    

docs/docs/transpiler.mdx

@@ -6,6 +6,11 @@ description: The Transpiler | Transloco Angular i18n
 The transpiler is responsible for resolving the given value.  
 For example, when given `Hello {{ key }}` the default transpiler will replace the dynamic variable `key` based on the given params, or in some cases, within the [translation object itself](./additional-functionality#reference-other-keys).
 
+## DefaultTranspiler
+The default transpiler can be configured with custom interpolation start and end markings to match message parameters.
+
+To configure the `DefaultTranspiler` interpolation markings you must provide a Transloco config with the [interpolation](./config-options#interpolation) property set. 
+
 ## Functional Transpiler
 
 In addition to the default transpiler, Transloco also exposes the `FunctionalTranspiler` which allows you to implement function calls into your translation values. This way you can leverage Angular's DI power and make your translations even more flexible.

projects/ngneat/transloco-messageformat/src/lib/messageformat.transpiler.spec.ts

@@ -1,9 +1,13 @@
 import { MessageFormatTranspiler } from './messageformat.transpiler';
-import { flatten } from '@ngneat/transloco';
+import { flatten, translocoConfig } from '@ngneat/transloco';
 
 describe('MessageFormatTranspiler', () => {
   const config = {};
   const parser = new MessageFormatTranspiler(config);
+  const parserWithCustomInterpolation = new MessageFormatTranspiler(
+    config,
+    translocoConfig({ interpolation: ['<<<', '>>>'] })
+  );
 
   it('should translate simple SELECT messageformat string from params when first param given', () => {
     const parsed = parser.transpile(
@@ -32,7 +36,7 @@ describe('MessageFormatTranspiler', () => {
     expect(parsed).toEqual('The person won their race');
   });
 
-  it('should translate simple parmas and SELECT messageformat string from params when no param given', () => {
+  it('should translate simple params and SELECT messageformat string from params when no param given', () => {
     const parsed = parser.transpile(
       'The {{value}} { gender, select, male {boy won his} female {girl won her} other {person won their}} race',
       { value: 'smart', gender: '' },
@@ -41,6 +45,24 @@ describe('MessageFormatTranspiler', () => {
     expect(parsed).toEqual('The smart person won their race');
   });
 
+  it('should translate simple param and interpolate params inside messageformat string', () => {
+    const parsedMale = parser.transpile(
+      'The {{ value }} { gender, select, male {boy named {{ name }} won his} female {girl named {{ name }} won her} other {person named {{ name }} won their}} race',
+      { value: 'smart', gender: 'male', name: 'Henkie' },
+      {}
+    );
+    expect(parsedMale).toEqual('The smart boy named Henkie won his race');
+  });
+
+  it('should translate simple param and interpolate params inside messageformat string using custom interpolation markers', () => {
+    const parsedMale = parserWithCustomInterpolation.transpile(
+      'The <<< value >>> { gender, select, male {boy named <<< name >>> won his} female {girl named <<< name >>> won her} other {person named <<< name >>> won their}} race',
+      { value: 'smart', gender: 'male', name: 'Henkie' },
+      {}
+    );
+    expect(parsedMale).toEqual('The smart boy named Henkie won his race');
+  });
+
   it('should translate simple string from params', () => {
     const parsed = parser.transpile('Hello {{ value }}', { value: 'World' }, {});
     expect(parsed).toEqual('Hello World');

projects/ngneat/transloco-messageformat/src/lib/messageformat.transpiler.ts

@@ -1,8 +1,9 @@
-import { Injectable, Inject, Optional } from '@angular/core';
-import { DefaultTranspiler, HashMap, Translation, isObject, setValue, getValue } from '@ngneat/transloco';
+import { Inject, Injectable, Optional } from '@angular/core';
+import { DefaultTranspiler, getValue, HashMap, isObject, setValue, Translation } from '@ngneat/transloco';
 
 import * as MessageFormat from 'messageformat';
-import { MessageformatConfig, TRANSLOCO_MESSAGE_FORMAT_CONFIG, MFLocale } from './messageformat.config';
+import { MessageformatConfig, MFLocale, TRANSLOCO_MESSAGE_FORMAT_CONFIG } from './messageformat.config';
+import { TRANSLOCO_CONFIG, TranslocoConfig } from '../../../transloco/src/lib/transloco.config';
 
 function mfFactory(locales?: MFLocale, messageConfig?: MessageFormat.Options): MessageFormat {
   //@ts-ignore
@@ -14,8 +15,11 @@ export class MessageFormatTranspiler extends DefaultTranspiler {
   private messageFormat: MessageFormat;
   private messageConfig: MessageFormat.Options;
 
-  constructor(@Optional() @Inject(TRANSLOCO_MESSAGE_FORMAT_CONFIG) config: MessageformatConfig) {
-    super();
+  constructor(
+    @Optional() @Inject(TRANSLOCO_MESSAGE_FORMAT_CONFIG) config: MessageformatConfig,
+    @Optional() @Inject(TRANSLOCO_CONFIG) userConfig?: TranslocoConfig
+  ) {
+    super(userConfig);
     const { locales, ...messageConfig } = config || { locales: undefined };
     this.messageConfig = messageConfig;
     this.messageFormat = mfFactory(locales, messageConfig);

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

@@ -1,12 +1,17 @@
 import { DefaultTranspiler, FunctionalTranspiler, getFunctionArgs, TranslocoTranspiler } from '../transloco.transpiler';
 import { flatten } from '../helpers';
 import { transpilerFunctions } from './transloco.mocks';
+import { defaultConfig, translocoConfig } from '@ngneat/transloco';
 
 describe('TranslocoTranspiler', () => {
   describe('DefaultTranspiler', () => {
     testDefaultBehaviour(new DefaultTranspiler());
   });
 
+  describe('DefaultTranspiler with custom interpolation', () => {
+    testDefaultBehaviour(new DefaultTranspiler(translocoConfig({ interpolation: ['<<', '>>'] })), ['<<', '>>']);
+  });
+
   describe('FunctionalTranspiler', () => {
     const injectorMock = { get: key => transpilerFunctions[key] };
     const parser = new FunctionalTranspiler(injectorMock);
@@ -63,19 +68,26 @@ describe('TranslocoTranspiler', () => {
     });
   });
 
-  function testDefaultBehaviour(parser: TranslocoTranspiler) {
+  function testDefaultBehaviour(
+    parser: TranslocoTranspiler,
+    interpolationMarkings: [string, string] = defaultConfig.interpolation
+  ) {
     it('should translate simple string from params', () => {
-      const parsed = parser.transpile('Hello {{ value }}', { value: 'World' }, {});
+      const parsed = parser.transpile(`Hello ${wrapParam('value')}`, { value: 'World' }, {});
       expect(parsed).toEqual('Hello World');
     });
 
     it('should translate simple string with multiple params', () => {
-      const parsed = parser.transpile('Hello {{ from }} {{ name }}', { name: 'Transloco', from: 'from' }, {});
+      const parsed = parser.transpile(
+        `Hello ${wrapParam('from')} ${wrapParam('name')}`,
+        { name: 'Transloco', from: 'from' },
+        {}
+      );
       expect(parsed).toEqual('Hello from Transloco');
     });
 
     it('should translate simple string with a key from lang', () => {
-      const parsed = parser.transpile('Hello {{ world }}', {}, flatten({ world: 'World' }));
+      const parsed = parser.transpile(`Hello ${wrapParam('world')}`, {}, flatten({ world: 'World' }));
       expect(parsed).toEqual('Hello World');
     });
 
@@ -86,30 +98,38 @@ describe('TranslocoTranspiler', () => {
         lang: 'lang',
         nes: { ted: 'supporting nested values!' }
       });
-      const parsed = parser.transpile('Hello {{ withKeys }} {{ from }} {{ lang }} {{nes.ted}}', {}, lang);
+      const parsed = parser.transpile(
+        `Hello ${wrapParam('withKeys')} ${wrapParam('from')} ${wrapParam('lang')} ${wrapParam('nes.ted')}`,
+        {},
+        lang
+      );
       expect(parsed).toEqual('Hello with keys from lang supporting nested values!');
     });
 
     it('should translate simple string with from lang with nested params', () => {
       const lang = flatten({
-        dear: 'dear {{name}}',
-        hello: 'Hello {{dear}}'
+        dear: `dear ${wrapParam('name')}`,
+        hello: `Hello ${wrapParam('dear')}`
       });
-      const parsed = parser.transpile('{{ hello }}', { name: 'world' }, lang);
+      const parsed = parser.transpile(`${wrapParam('hello')}`, { name: 'world' }, lang);
       expect(parsed).toEqual('Hello dear world');
     });
 
     it('should translate simple string with params and from lang', () => {
-      const parsed = parser.transpile('Hello {{ from }} {{ name }}', { name: 'Transloco' }, flatten({ from: 'from' }));
+      const parsed = parser.transpile(
+        `Hello ${wrapParam('from')} ${wrapParam('name')}`,
+        { name: 'Transloco' },
+        flatten({ from: 'from' })
+      );
       expect(parsed).toEqual('Hello from Transloco');
     });
 
     it('should translate simple string with params and from lang with params', () => {
       const lang = flatten({
-        hello: 'Hello {{name}}'
+        hello: `Hello ${wrapParam('name')}`
       });
       const parsed = parser.transpile(
-        '{{ hello }}, good {{ timeOfDay }}',
+        `${wrapParam('hello')}, good ${wrapParam('timeOfDay')}`,
         { name: 'world', timeOfDay: 'morning' },
         lang
       );
@@ -126,16 +146,16 @@ describe('TranslocoTranspiler', () => {
       const translation = {
         a: 'Hello',
         j: {
-          r: 'Hey {{value}}'
+          r: `Hey ${wrapParam('value')}`
         },
         b: {
-          flat: 'Flat {{ dynamic }}',
+          flat: `Flat ${wrapParam('dynamic')}`,
           c: {
             otherKey: 'otherKey',
-            d: 'Hello {{value}}'
+            d: `Hello ${wrapParam('value')}`
           },
           g: {
-            h: 'Name {{ name }}'
+            h: `Name ${wrapParam('name')}`
           }
         }
       };
@@ -192,5 +212,9 @@ describe('TranslocoTranspiler', () => {
         });
       });
     });
+
+    function wrapParam(param: string) {
+      return `${interpolationMarkings[0]} ${param} ${interpolationMarkings[1]}`;
+    }
   }
 });

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

@@ -18,6 +18,7 @@ export type TranslocoConfig = {
     useFallbackTranslation?: boolean;
     allowEmpty?: boolean;
   };
+  interpolation?: [string, string];
 };
 
 export const TRANSLOCO_CONFIG = new InjectionToken('TRANSLOCO_CONFIG', {
@@ -40,7 +41,8 @@ export const defaultConfig: TranslocoConfig = {
   },
   flatten: {
     aot: false
-  }
+  },
+  interpolation: ['{{', '}}']
 };
 
 /**

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

@@ -11,7 +11,8 @@ import { TRANSLOCO_CONFIG } from './transloco.config';
 export const defaultProviders = [
   {
     provide: TRANSLOCO_TRANSPILER,
-    useClass: DefaultTranspiler
+    useClass: DefaultTranspiler,
+    deps: [TRANSLOCO_CONFIG]
   },
   {
     provide: TRANSLOCO_MISSING_HANDLER,

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

@@ -1,18 +1,26 @@
-import { Injectable, InjectionToken, Injector } from '@angular/core';
+import { Inject, Injectable, InjectionToken, Injector, Optional } from '@angular/core';
 import { HashMap, Translation } from './types';
-import { getValue, isString, isObject, setValue, isDefined } from './helpers';
+import { getValue, isDefined, isObject, isString, setValue } from './helpers';
+import { defaultConfig, TRANSLOCO_CONFIG, TranslocoConfig } from './transloco.config';
 
 export const TRANSLOCO_TRANSPILER = new InjectionToken('TRANSLOCO_TRANSPILER');
 
 export interface TranslocoTranspiler {
   transpile(value: any, params: HashMap, translation: HashMap): any;
+
   onLangChanged?(lang: string): void;
 }
 
 export class DefaultTranspiler implements TranslocoTranspiler {
+  protected interpolationMatcher: RegExp;
+
+  constructor(@Optional() @Inject(TRANSLOCO_CONFIG) userConfig?: TranslocoConfig) {
+    this.interpolationMatcher = resolveMatcher(userConfig);
+  }
+
   transpile(value: any, params: HashMap = {}, translation: Translation): any {
     if (isString(value)) {
-      return value.replace(/{{(.*?)}}/g, (_, match) => {
+      return value.replace(this.interpolationMatcher, (_, match) => {
         match = match.trim();
         if (isDefined(params[match])) {
           return params[match];
@@ -72,6 +80,12 @@ export class DefaultTranspiler implements TranslocoTranspiler {
   }
 }
 
+function resolveMatcher(userConfig?: TranslocoConfig): RegExp {
+  const [start, end] = userConfig && userConfig.interpolation ? userConfig.interpolation : defaultConfig.interpolation;
+
+  return new RegExp(`${start}(.*?)${end}`, 'g');
+}
+
 export interface TranslocoTranspilerFunction {
   transpile(...args: string[]): any;
 }

src/app/app.module.ts

@@ -54,6 +54,7 @@ import { TranslocoMessageFormatModule } from '@ngneat/transloco-messageformat';
         missingHandler: {
           useFallbackTranslation: false
         }
+        // interpolation: ['<<<', '>>>']
       })
     }
   ],