From 7d692f61e7f188b34239ff25dd5123d06690b3de Mon Sep 17 00:00:00 2001
From: waldronmatt <mhuntwaldron@gmail.com>
Date: Sun, 27 Oct 2024 00:36:52 -0400
Subject: [PATCH] fix(mixins): onConnectedCallback runs only when called, add
 unit test, refactor event logic

---
 .../components/lit-override.component.spec.ts |  9 ++++
 .../src/mixins/emit-connected-callback.ts     | 41 ++++++++-----------
 packages/lit-override/src/mixins/event.ts     | 11 +++++
 packages/lit-override/src/mixins/index.ts     |  2 +
 packages/lit-override/src/mixins/types.ts     |  4 ++
 5 files changed, 42 insertions(+), 25 deletions(-)
 create mode 100644 packages/lit-override/src/mixins/event.ts
 create mode 100644 packages/lit-override/src/mixins/types.ts

diff --git a/packages/lit-override/src/components/lit-override.component.spec.ts b/packages/lit-override/src/components/lit-override.component.spec.ts
index e66afdc3..3b2ed6b8 100644
--- a/packages/lit-override/src/components/lit-override.component.spec.ts
+++ b/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>`);
 
diff --git a/packages/lit-override/src/mixins/emit-connected-callback.ts b/packages/lit-override/src/mixins/emit-connected-callback.ts
index 21182594..34066a9f 100644
--- a/packages/lit-override/src/mixins/emit-connected-callback.ts
+++ b/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));
+      }
     }
   }
 
diff --git a/packages/lit-override/src/mixins/event.ts b/packages/lit-override/src/mixins/event.ts
new file mode 100644
index 00000000..9678cb81
--- /dev/null
+++ b/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 },
+    });
+  }
+}
diff --git a/packages/lit-override/src/mixins/index.ts b/packages/lit-override/src/mixins/index.ts
index f26a8b29..b5b6f372 100644
--- a/packages/lit-override/src/mixins/index.ts
+++ b/packages/lit-override/src/mixins/index.ts
@@ -1 +1,3 @@
 export * from './emit-connected-callback.js';
+export * from './event.js';
+export * from './types.js';
diff --git a/packages/lit-override/src/mixins/types.ts b/packages/lit-override/src/mixins/types.ts
new file mode 100644
index 00000000..a38e2e12
--- /dev/null
+++ b/packages/lit-override/src/mixins/types.ts
@@ -0,0 +1,4 @@
+export interface EmitConnectedCallbackInfo {
+  name: string;
+  isConnected: boolean;
+}