feat(i18n): skipTranslationOnMissingKey

packages/__tests__/e2e/src/plugins/sut-i18n.html

@@ -93,5 +93,5 @@
   <custom-message data-test-id="custom-element-with-params" t="[message]itemWithCount" t-params.bind="{count: 0}">
   </custom-message>
 
-  <!-- <span data-test-id="missing-key" t="missing-key">non-translated text</span>  -->
+  <span data-test-id="missing-key" t="missing-key">non-translated text</span>
 </template>

packages/__tests__/e2e/src/startup.ts

@@ -29,7 +29,8 @@ window['au'] = new Aurelia()
         resources: {
           en: { translation: en['default'] },
           de: { translation: de['default'] },
-        }
+        },
+        skipTranslationOnMissingKey: !!new URL(location.href).searchParams.get('skipkey')
       };
     })
   )

packages/__tests__/e2e/tests/integration/i18n.e2e.ts

@@ -159,7 +159,7 @@ describe('i18n', () => {
     },
     {
       name: 'should work with "df" binding behavior',
-      suts: [{ selector: `#i18n-df-bb`, expected: " 10.2.2020 ", expectedDe: " 10.2.2020 " },]
+      suts: [{ selector: `#i18n-df-bb`, expected: ' 10.2.2020 ', expectedDe: ' 10.2.2020 ' },]
     },
     {
       name: 'should work with "nf" value converter',
@@ -183,7 +183,7 @@ describe('i18n', () => {
     },
     {
       name: 'should work with "rt" binding behavior',
-      suts: [{ selector: `#i18n-rt-bb`, expected: " 2 hours ago ", expectedDe: " vor 2 Stunden " },]
+      suts: [{ selector: `#i18n-rt-bb`, expected: ' 2 hours ago ', expectedDe: ' vor 2 Stunden ' },]
     },
   ];
 
@@ -297,4 +297,19 @@ describe('i18n', () => {
     });
   });
 
+  describe('treating missing keys', () => {
+    it('should by default replace the content with the missing key name', () => {
+      assertContent('[data-test-id=\'missing-key\']', 'missing-key');
+    });
+
+    it('should allow to keep original content if key not found', () => {
+      cy.visit('/?skipkey=true');
+      cy.reload();
+
+      assertContent('[data-test-id=\'missing-key\']', 'non-translated text');
+
+      cy.visit('/');
+      cy.reload();
+    });
+  });
 });

packages/__tests__/i18n/i18n.spec.ts

@@ -1,4 +1,4 @@
-import { I18N_EA_CHANNEL, I18nInitOptions, I18nModule, I18nService, I18N_SIGNAL } from '@aurelia/i18n';
+import { I18N_EA_CHANNEL, I18N_SIGNAL, I18nInitOptions, I18nModule, I18nService } from '@aurelia/i18n';
 import { EventAggregator } from '@aurelia/kernel';
 import { assert, MockSignaler } from '@aurelia/testing';
 import i18next from 'i18next';
@@ -79,12 +79,16 @@ describe('I18N', function () {
     { input: '[foo]simple.text', output: [{ attributes: ['foo'], value: translation.simple.text }] },
     { input: '[foo,bar]simple.text', output: [{ attributes: ['foo', 'bar'], value: translation.simple.text }] },
     { input: '[foo,bar]simple.text;[baz]simple.attr', output: [{ attributes: ['foo', 'bar'], value: translation.simple.text }, { attributes: ['baz'], value: translation.simple.attr }] },
-  ].forEach(({ input, output }) =>
+    { input: 'non.existent.key', output: [{ attributes: [], value: 'non.existent.key' }] },
+    { input: 'non.existent.key', skipTranslationOnMissingKey: true, output: [] },
+    { input: '[foo,bar]non.existent.key;[baz]simple.attr', skipTranslationOnMissingKey: true, output: [{ attributes: ['baz'], value: translation.simple.attr }] },
+  ].forEach(({ input, skipTranslationOnMissingKey, output }) =>
     it(`'evaluate' resolves key expression ${input} to ${JSON.stringify(output)}`, async function () {
       const customization = {
         resources: {
           en: { translation }
-        }
+        },
+        skipTranslationOnMissingKey
       };
       const { sut } = await setup(customization);
 

packages/__tests__/i18n/t/translation-integration.spec.ts

@@ -13,7 +13,7 @@ describe('translation-integration', function () {
     @bindable public message: string;
   }
 
-  async function setup(host: INode, component: unknown, aliases?: string[]) {
+  async function setup(host: INode, component: unknown, aliases?: string[], skipTranslationOnMissingKey = false) {
     const translation = {
       simple: {
         text: 'simple text',
@@ -64,7 +64,10 @@ describe('translation-integration', function () {
     const au = new Aurelia(ctx.container);
     await au.register(
       I18nConfiguration.customize((config) => {
-        config.initOptions = { resources: { en: { translation }, de: { translation: deTranslation } } };
+        config.initOptions = {
+          resources: { en: { translation }, de: { translation: deTranslation } },
+          skipTranslationOnMissingKey
+        };
         config.translationAttributeAliases = aliases;
       }))
       .register(CustomMessage as unknown as IRegistration)
@@ -905,4 +908,26 @@ describe('translation-integration', function () {
       assertTextContent(host, 'span', 'vor 2 Std.');
     });
   });
+
+  describe('`skipTranslationOnMissingKey`', function () {
+    it('is disabled by default, and the given key is rendered if the key is missing from i18next resource', async function () {
+      const key = 'lost-in-translation';
+      @customElement({ name: 'app', template: `<span t='${key}'></span>` })
+      class App { }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App());
+      assertTextContent(host, 'span', key);
+    });
+
+    it('enables skipping translation when set', async function () {
+      const key = 'lost-in-translation', text = 'untranslated text';
+      @customElement({ name: 'app', template: `<span t='${key}'>${text}</span>` })
+      class App { }
+
+      const host = DOM.createElement('app');
+      await setup(host, new App(), undefined, true);
+      assertTextContent(host, 'span', text);
+    });
+  });
 });

packages/i18n/src/i18n.ts

@@ -40,7 +40,13 @@ export class I18nService {
     const result: I18nKeyEvaluationResult[] = [];
     for (const part of parts) {
       const { attributes, key } = this.extractAttributesFromKey(part);
-      result.push({ attributes, value: this.tr(key, options) });
+      const translation = this.tr(key, options);
+      if (this.options.skipTranslationOnMissingKey && translation === key) {
+        // TODO change this once the logging infra is there.
+        console.warn(`Couldn't find translation for key: ${key}`);
+      } else {
+        result.push({ attributes, value: translation });
+      }
     }
     return result;
   }