feat(localize): add option to show the key as a fallback when a locale is missing a translation

.changeset/fast-trees-prove.md

@@ -0,0 +1,5 @@
+---
+'@lion/localize': minor
+---
+
+add option to show the key as a fallback when a locale is missing a translation

packages/localize/src/LocalizeManager.js

@@ -14,13 +14,19 @@ import isLocalizeESModule from './isLocalizeESModule.js';
  */
 export class LocalizeManager {
   // eslint-disable-line no-unused-vars
-  constructor({ autoLoadOnLocaleChange = false, fallbackLocale = '' } = {}) {
+  constructor({
+    autoLoadOnLocaleChange = false,
+    fallbackLocale = '',
+    showKeyAsFallback = false,
+  } = {}) {
     /** @private */
     this.__delegationTarget = document.createDocumentFragment();
     /** @protected */
     this._autoLoadOnLocaleChange = !!autoLoadOnLocaleChange;
     /** @protected */
     this._fallbackLocale = fallbackLocale;
+    /** @protected */
+    this._showKeyAsFallback = showKeyAsFallback;
 
     /**
      * @type {Object.<string, Object.<string, Object>>}
@@ -574,7 +580,7 @@ export class LocalizeManager {
       messages,
     );
 
-    return String(result || '');
+    return String(result || (this._showKeyAsFallback ? key : ''));
   }
 
   /**

packages/localize/test/LocalizeManager.test.js

@@ -677,6 +677,20 @@ describe('LocalizeManager', () => {
       );
     });
   });
+
+  describe('show key as fallback', () => {
+    it('shows the key as a fallback when a translation cannot be found', () => {
+      manager = new LocalizeManager({ showKeyAsFallback: true });
+      manager.addData('en-GB', 'my-ns', { greeting: 'Hello!' });
+      expect(manager.msg('my-ns:unknownKey')).to.equal('my-ns:unknownKey');
+    });
+
+    it('shows nothing when a translation cannot be found by default', () => {
+      manager = new LocalizeManager();
+      manager.addData('en-GB', 'my-ns', { greeting: 'Hello!' });
+      expect(manager.msg('my-ns:unknownKey')).to.equal('');
+    });
+  });
 });
 
 describe('When supporting external translation tools like Google Translate', () => {