diff --git a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts index 695c9b756c..ac1ad635d2 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.test.ts @@ -11,6 +11,22 @@ class UmbLocalizeControllerHostElement extends UmbElementMixin(LitElement) { @property() lang = 'en-us'; } +@customElement('umb-localization-render-count') +class UmbLocalizationRenderCountElement extends UmbElementMixin(LitElement) { + amountOfUpdates = 0; + amountOfRenders = 0; + + requestUpdate() { + super.requestUpdate(); + this.amountOfUpdates++; + } + + render() { + this.amountOfRenders++; + return html`${this.localize.term('logout')}`; + } +} + interface TestLocalization extends UmbLocalizationSetBase { close: string; logout: string; @@ -42,6 +58,12 @@ const englishOverride: UmbLocalizationSet = { close: 'Close 2', }; +const englishOverrideLogout: UmbLocalizationSet = { + $code: 'en-us', + $dir: 'ltr', + logout: 'Log out 2', +}; + const danish: UmbLocalizationSet = { $code: 'da', $dir: 'ltr', @@ -130,7 +152,7 @@ describe('UmbLocalizeController', () => { expect(controller.term('logout')).to.equal('Log out'); // Fallback }); - it('should override a term if new translation is registered', () => { + it('should override a term if new localization is registered', () => { // Let the registry load the new extension umbLocalizationManager.registerLocalization(englishOverride); @@ -152,6 +174,35 @@ describe('UmbLocalizeController', () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any expect((controller.term as any)('logout', 'Hello', 'World')).to.equal('Log out'); }); + + it('only reacts to changes of its own localization-keys', async () => { + const element: UmbLocalizationRenderCountElement = await fixture( + html``, + ); + expect(element.amountOfUpdates).to.equal(0); + expect(element.amountOfRenders).to.equal(1); + + expect(element.shadowRoot!.textContent).to.equal('Log out'); + expect(element.amountOfUpdates).to.equal(0); + + // Let the registry load the new extension + umbLocalizationManager.registerLocalization(englishOverride); + + await aTimeout(12); + + // This should still be the same (cause it should not be affected as the change did not change our localization key) + expect(element.amountOfUpdates).to.equal(0); + expect(element.shadowRoot!.textContent).to.equal('Log out'); + + // Let the registry load the new extension + umbLocalizationManager.registerLocalization(englishOverrideLogout); + + await aTimeout(12); + + // Now we should have gotten one update and the text should be different + expect(element.amountOfUpdates).to.equal(1); + expect(element.shadowRoot!.textContent).to.equal('Log out 2'); + }); }); describe('date', () => { diff --git a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts index dd20e23ebd..767370df80 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts @@ -107,7 +107,9 @@ export class UmbLocalizationController(key: K, ...args: FunctionParams): string { - this.#usedKeys.push(key); + if (!this.#usedKeys.includes(key)) { + this.#usedKeys.push(key); + } const { primary, secondary } = this.getLocalizationData(this.lang()); let term: any; diff --git a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.manager.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.manager.ts index e481072374..226eb5f277 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.manager.ts @@ -71,6 +71,11 @@ export class UmbLocalizationManager { this.localizations.set(code, t); } + // Declare what keys have been changed: + const keys = Object.keys(t); + for (const key of keys) { + this.#changedKeys.add(key); + } this.#requestChangedKeysUpdate(); } #registerLocalizationBind = this.registerLocalization.bind(this);