fix(mixins): onConnectedCallback runs only when called, add unit test…

…, refactor event logic

packages/lit-override/src/components/lit-override.component.spec.ts

@@ -167,6 +167,15 @@ describe('emit-connected-callback', () => {
     sandbox.restore();
   });
 
+  it('does not call onConnectedCallback if not defined', async () => {
+    const el = await fixture<LitOverride>(html`<lit-override></lit-override>`);
+
+    const callbackSpy = sinon.spy();
+    el.connectedCallback();
+
+    expect(callbackSpy).not.to.have.been.called;
+  });
+
   it('calls onConnectedCallback on connectedCallback lifecycle', async () => {
     const el = await fixture<LitOverride>(html`<lit-override></lit-override>`);
 

packages/lit-override/src/mixins/emit-connected-callback.ts

@@ -1,14 +1,11 @@
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ConnectedCallbackEvent } from './event.js';
+import { EmitConnectedCallbackInfo } from './types.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Constructor<T> = new (...args: any[]) => T;
 
-export interface EmitConnectedCallbackInfo {
-  name: string;
-  isConnected: boolean;
-}
-
 export declare class EmitConnectedCallbackProps {
   emitConnectedCallback: boolean;
 }
@@ -25,36 +22,30 @@ export declare class EmitConnectedCallbackProps {
  */
 export const EmitConnectedCallback = <T extends Constructor<LitElement>>(superClass: T) => {
   class EmitConnectedCallbackMixin extends superClass {
+    get childInfo(): EmitConnectedCallbackInfo {
+      return {
+        name: this.constructor.name,
+        isConnected: this.isConnected,
+      };
+    }
+
     @property({ reflect: true, type: Boolean })
     emitConnectedCallback = false;
 
     @property({ attribute: false })
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onConnectedCallback = (_thisChild: LitElement, _childInfo: EmitConnectedCallbackInfo) => {};
-
-    private setEmitConnectedCallback(childInfo: EmitConnectedCallbackInfo) {
-      if (this.emitConnectedCallback) {
-        const event = new CustomEvent('connected-callback', {
-          bubbles: true,
-          composed: true,
-          cancelable: false,
-          detail: { ...childInfo },
-        });
-
-        this.dispatchEvent(event);
-      }
-    }
+    onConnectedCallback? = (_thisChild: LitElement, _childInfo: EmitConnectedCallbackInfo) => {};
 
     connectedCallback() {
       super.connectedCallback();
 
-      const childInfo: EmitConnectedCallbackInfo = {
-        name: this.constructor.name,
-        isConnected: this.isConnected,
-      };
+      if (this.onConnectedCallback) {
+        this.onConnectedCallback(this, this.childInfo);
+      }
 
-      this.onConnectedCallback(this, childInfo);
-      this.setEmitConnectedCallback(childInfo);
+      if (this.emitConnectedCallback) {
+        this.dispatchEvent(new ConnectedCallbackEvent(this.childInfo));
+      }
     }
   }
 

packages/lit-override/src/mixins/event.ts

@@ -0,0 +1,11 @@
+import { EmitConnectedCallbackInfo } from './types.js';
+
+export class ConnectedCallbackEvent extends CustomEvent<EmitConnectedCallbackInfo> {
+  constructor(childInfo: EmitConnectedCallbackInfo) {
+    super('connected-callback', {
+      bubbles: true,
+      composed: true,
+      detail: { ...childInfo },
+    });
+  }
+}

packages/lit-override/src/mixins/index.ts

@@ -1 +1,3 @@
 export * from './emit-connected-callback.js';
+export * from './event.js';
+export * from './types.js';

packages/lit-override/src/mixins/types.ts

@@ -0,0 +1,4 @@
+export interface EmitConnectedCallbackInfo {
+  name: string;
+  isConnected: boolean;
+}