fix(i18n): globalstateservice stateupdates memory leak

projects/core/src/alert/alert.performance.ts

@@ -16,7 +16,7 @@ describe('cds-badge performance', () => {
   `;
 
   it(`should bundle and treeshake alert`, async () => {
-    expect((await testBundleSize('@cds/core/alert/register.js')).kb).toBeLessThan(31.2);
+    expect((await testBundleSize('@cds/core/alert/register.js')).kb).toBeLessThan(31.3);
   });
 
   it(`should render 1 alert under 20ms`, async () => {

projects/core/src/grid/grid.performance.ts

@@ -11,7 +11,7 @@ import '@cds/core/grid/register.js';
 describe('cds-grid bundle performance', () => {
   it(`should bundle and treeshake component`, async () => {
     const result = await testBundleSize(`import '@cds/core/grid/register.js'`);
-    expect(result.kb).toBeLessThan(37.5);
+    expect(result.kb).toBeLessThan(37.6);
   });
 });
 

projects/core/src/index.performance.ts

@@ -56,6 +56,6 @@ describe('performance', () => {
       import '@cds/core/toggle/register.js';
       import '@cds/core/tree-view/register.js';`;
 
-    expect((await testBundleSize(bundle, { optimize: true })).kb).toBeLessThan(63.2);
+    expect((await testBundleSize(bundle, { optimize: true })).kb).toBeLessThan(63.3);
   });
 });

projects/core/src/internal/decorators/i18n.spec.ts

@@ -11,6 +11,7 @@ import {
   getI18nUpdateStrategy,
   I18nService,
   I18nElement,
+  GlobalStateService,
 } from '@cds/core/internal';
 import { html, LitElement } from 'lit';
 import { componentIsStable, createTestElement, removeTestElement } from '@cds/core/test';
@@ -42,6 +43,19 @@ class TestAlertI18nElement extends LitElement {
   }
 }
 
+/** @element test-extends-18n-element */
+@customElement('test-extends-18n-element')
+class TestExtendsI18nElement extends TestI18nElement {
+  @i18n() i18n = {
+    open: 'Open',
+    close: 'Close',
+  };
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
 describe('i18n decorator', () => {
   let testElement: HTMLElement;
   let component: TestI18nElement;
@@ -189,3 +203,21 @@ describe('helpers', () => {
     });
   });
 });
+
+describe('subscription', () => {
+  it('should be unsubscribed when the element is removed', async () => {
+    const testElement = await createTestElement(
+      html` <test-18n-element></test-18n-element><test-18n-element></test-18n-element> `
+    );
+    removeTestElement(testElement);
+    expect((GlobalStateService.stateUpdates as any).subscriptions.length).toBe(0);
+  });
+
+  it('should be unsubscribed when the element extends an @i8n element and is removed', async () => {
+    const testElement = await createTestElement(html` <test-extends-18n-element></test-extends-18n-element> `);
+    const component = testElement.querySelector<TestExtendsI18nElement>('test-extends-18n-element');
+    expect(component.i18n).toEqual({ open: 'Open', close: 'Close' });
+    removeTestElement(testElement);
+    expect((GlobalStateService.stateUpdates as any).subscriptions.length).toBe(0);
+  });
+});

projects/core/src/internal/decorators/i18n.ts

@@ -58,19 +58,21 @@ export function i18n() {
     const targetDisconnectedCallback: () => void = protoOrDescriptor.disconnectedCallback;
 
     function connectedCallback(this: any): void {
-      protoOrDescriptor.__i18nSub = GlobalStateService.stateUpdates.subscribe(update => {
-        if (update.key === 'i18nRegistry') {
-          this.requestUpdate(name);
-        }
-      });
+      if (!this.__i18nSub) {
+        this.__i18nSub = GlobalStateService.stateUpdates.subscribe(update => {
+          if (update.key === 'i18nRegistry') {
+            this.requestUpdate(name);
+          }
+        });
+      }
 
       if (targetConnectedCallback) {
         targetConnectedCallback.apply(this);
       }
     }
 
     function disconnectedCallback(this: any) {
-      protoOrDescriptor.__i18nSub.unsubscribe();
+      this.__i18nSub.unsubscribe();
 
       if (targetDisconnectedCallback) {
         targetDisconnectedCallback.apply(this);