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);