custom callbacks from base element

src/common/components/BaseComponentElement/BaseComponentElement.ts

@@ -1,43 +1,5 @@
-import { html, render } from "@github/jtml";
+import { BaseElement } from "common/";
-import { AppMainElement } from "components/";
-import { closest } from "core/utils";
 
-class BaseComponentElement extends HTMLElement {
+class BaseComponentElement extends BaseElement {}
-    @closest appMain: AppMainElement;
-    bindEvents = () => {
-        const _elems = this.querySelectorAll("[data-action]");
-        _elems?.forEach((el) => {
-            for (const action of (el.getAttribute("data-action") || "")
-                .trim()
-                .split(/\s+/)) {
-                const eventSep = action.lastIndexOf(":");
-                const methodSep = action.lastIndexOf("#");
-                const tag = action.slice(eventSep + 1, methodSep);
-
-                const type = action.slice(0, eventSep);
-                const method = action.slice(methodSep + 1);
-
-                if (tag.toUpperCase() === this.tagName) {
-                    el.addEventListener(type, this?.[method]);
-                } else {
-                    this.childNodes.forEach((child: HTMLElement) => {
-                        if (child.tagName == tag.toUpperCase()) {
-                            el.addEventListener(type, child?.[method]);
-                        }
-                    });
-                }
-            }
-        });
-    };
-
-    render = () => {
-        return html``;
-    };
-
-    update = () => {
-        render(this.render(), this);
-        this.bindEvents();
-    };
-}
 
 export default BaseComponentElement;

src/common/core/BaseElement/BaseElement.ts

@@ -0,0 +1,75 @@
+import { html, render } from "@github/jtml";
+import { AppMainElement } from "components/";
+import { closest } from "core/utils";
+
+class BaseElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    private elementDisconnectCallbacks: Array<Function> = [];
+    constructor() {
+        super();
+    }
+
+    bindEvents = () => {
+        const _elems = this.querySelectorAll("[data-action]");
+        _elems?.forEach((el) => {
+            for (const action of (el.getAttribute("data-action") || "")
+                .trim()
+                .split(/\s+/)) {
+                const eventSep = action.lastIndexOf(":");
+                const methodSep = action.lastIndexOf("#");
+                const tag = action.slice(eventSep + 1, methodSep);
+
+                const type = action.slice(0, eventSep);
+                const method = action.slice(methodSep + 1);
+
+                if (tag.toUpperCase() === this.tagName) {
+                    el.addEventListener(type, this?.[method]);
+                    const _callback = () =>
+                        el.removeEventListener(type, this?.[method]);
+                    this.elementDisconnectCallbacks.push(_callback);
+                } else {
+                    this.childNodes.forEach((child: HTMLElement) => {
+                        if (child.tagName == tag.toUpperCase()) {
+                            el.addEventListener(type, child?.[method]);
+                            const _callback = () =>
+                                el.removeEventListener(type, child?.[method]);
+                            this.elementDisconnectCallbacks.push(_callback);
+                        }
+                    });
+                }
+            }
+        });
+    };
+
+    render = () => {
+        return html``;
+    };
+
+    update = () => {
+        render(this.render(), this);
+        this.bindEvents();
+    };
+
+    connectedCallback() {
+        this.elementConnected();
+    }
+
+    disconnectedCallback() {
+        this.elementDisconnected();
+        if (Array.isArray(this.elementDisconnectCallbacks)) {
+            this.elementDisconnectCallbacks.forEach((callback: Function) => {
+                if (typeof callback == "function") {
+                    callback();
+                }
+            });
+        }
+    }
+
+    elementConnected = () => {
+        this.update();
+    };
+
+    elementDisconnected = () => {};
+}
+
+export default BaseElement;

src/common/index.ts

@@ -1,3 +1,4 @@
+export { default as BaseElement } from "./core/BaseElement/BaseElement";
 export * from "./layouts";
 export * from "./components";
 export * from "./pages";

src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts

@@ -1,11 +1,8 @@
 import { target } from "@github/catalyst";
-import { html, render } from "@github/jtml";
+import { BaseElement } from "common/";
-import { AppMainElement } from "components/";
-import { closest } from "core/utils";
 
-class BaseLayoutElement extends HTMLElement {
+class BaseLayoutElement extends BaseElement {
     @target appSlot: HTMLElement;
-    @closest appMain: AppMainElement;
     public isLayout: boolean = true;
     public _appSlot: string;
     constructor() {
@@ -28,35 +25,6 @@ class BaseLayoutElement extends HTMLElement {
         this._appSlot = _appSlot;
         this.appSlot.innerHTML = _appSlot;
     };
-
-    bindEvents = () => {
-        const _elems = this.querySelectorAll("[data-action]");
-        _elems?.forEach((el) => {
-            for (const action of (el.getAttribute("data-action") || "")
-                .trim()
-                .split(/\s+/)) {
-                const eventSep = action.lastIndexOf(":");
-                const methodSep = action.lastIndexOf("#");
-                const tag = action.slice(eventSep + 1, methodSep);
-
-                const type = action.slice(0, eventSep);
-                const method = action.slice(methodSep + 1);
-
-                if (tag.toUpperCase() === this.tagName) {
-                    this.addEventListener(type, this[method]);
-                }
-            }
-        });
-    };
-
-    render = () => {
-        return html``;
-    };
-
-    update = () => {
-        render(this.render(), this);
-        this.bindEvents();
-    };
 }
 
 export default BaseLayoutElement;

src/common/pages/BasePageElement/BasePageElement.ts

@@ -1,37 +1,5 @@
-import { html, render } from "@github/jtml";
+import { BaseElement } from "common/";
-import { AppMainElement } from "components/";
-import { closest } from "core/utils";
 
-class BasePageElement extends HTMLElement {
+class BasePageElement extends BaseElement {}
-    @closest appMain: AppMainElement;
-    bindEvents = () => {
-        const _elems = this.querySelectorAll("[data-action]");
-        _elems?.forEach((el) => {
-            for (const action of (el.getAttribute("data-action") || "")
-                .trim()
-                .split(/\s+/)) {
-                const eventSep = action.lastIndexOf(":");
-                const methodSep = action.lastIndexOf("#");
-                const tag = action.slice(eventSep + 1, methodSep);
-
-                const type = action.slice(0, eventSep);
-                const method = action.slice(methodSep + 1);
-
-                if (tag.toUpperCase() === this.tagName) {
-                    this.addEventListener(type, this[method]);
-                }
-            }
-        });
-    };
-
-    render = () => {
-        return html``;
-    };
-
-    update = () => {
-        render(this.render(), this);
-        this.bindEvents();
-    };
-}
 
 export default BasePageElement;

src/components/app-link/AppLinkElement.ts

@@ -23,7 +23,7 @@ class AppLinkElement extends BaseComponentElement {
         super();
     }
 
-    public connectedCallback(): void {
+    elementConnected = (): void => {
         this.routerService = this.appMain?.routerService;
         if (!this.title && this.innerText) {
             const _slottedText = this.innerText;
@@ -34,13 +34,13 @@ class AppLinkElement extends BaseComponentElement {
         if (isTrue(this.goBack)) {
             window.addEventListener("routechanged", this.update);
         }
-    }
+    };
 
-    public disconnectedCallback(): void {
+    elementDisconnected = (): void => {
         if (isTrue(this.goBack)) {
             window.removeEventListener("routechanged", this.update);
         }
-    }
+    };
 
     goTo = (e: Event) => {
         e.preventDefault();

src/components/app-main/AppMainElement.ts

@@ -16,7 +16,7 @@ class AppMainElement extends BaseComponentElement {
     constructor() {
         super();
     }
-    connectedCallback() {
+    elementConnected = () => {
         if (this.appMain !== this) return;
         const mainRoot = this.createMainRoot();
         this.httpClient = new HttpClient();
@@ -70,7 +70,7 @@ class AppMainElement extends BaseComponentElement {
             },
         ]);
         this.routerService.init();
-    }
+    };
 
     middleAuth = () => {
         if (!this.isAuth) {

src/components/app-menu/AppMenuElement.ts

@@ -14,7 +14,7 @@ class AppMenuElement extends BaseComponentElement {
         super();
     }
 
-    connectedCallback() {
+    elementConnected = () => {
         this.walletService = new WalletService(this.appMain?.appService);
         if (this.appMain.isAuth) {
             this.getWallets();
@@ -22,11 +22,11 @@ class AppMenuElement extends BaseComponentElement {
             this.update();
         }
         window.addEventListener("tokenchange", this.updateToken);
-    }
+    };
 
-    disconnectedCallback(): void {
+    elementDisconnected = () => {
         window.removeEventListener("tokenchange", this.updateToken);
-    }
+    };
 
     getWallets = async () => {
         try {

src/components/app-modal/AppModalElement.ts

@@ -10,5 +10,5 @@ class AppModalElement extends BaseComponentElement {
         super();
     }
 
-    connectedCallback() {}
+    elementConnected = () => {};
 }

src/components/app-pagination/AppPaginationElement.ts

@@ -16,7 +16,7 @@ class AppPaginationElement extends BaseComponentElement {
         super();
     }
 
-    connectedCallback() {}
+    elementConnected = () => {};
 
     attributeChangedCallback() {
         this.update();

src/components/app-root/AppRootElement.ts

@@ -10,5 +10,5 @@ class AppRootElement extends BaseComponentElement {
         super();
     }
 
-    connectedCallback() {}
+    elementConnected = () => {};
 }

src/components/app-slot/AppSlotElement.ts

@@ -10,5 +10,5 @@ class AppSlotElement extends BaseComponentElement {
         super();
     }
 
-    connectedCallback() {}
+    elementConnected = () => {};
 }

src/components/input-field/InputFieldElement.ts

@@ -24,10 +24,10 @@ class InputFieldElement extends BaseComponentElement {
         super();
     }
 
-    public connectedCallback(): void {
+    public elementConnected = () => {
         this.randId = `${name}${randomId()}`;
         this.update();
-    }
+    };
 
     get valid(): boolean {
         return !!this.error;

src/components/menu-item/MenuItemElement.ts

@@ -16,7 +16,7 @@ class MenuItemElement extends BaseComponentElement {
         super();
     }
 
-    public connectedCallback(): void {
+    public elementConnected = () => {
         this.routerService = this.appMain?.routerService;
         if (!this.title && this.innerText) {
             const _slottedText = this.innerText;
@@ -25,11 +25,11 @@ class MenuItemElement extends BaseComponentElement {
         }
         this.update();
         window.addEventListener("routechanged", this.update);
-    }
+    };
 
-    public disconnectedCallback(): void {
+    public elementDisconnected = () => {
         window.removeEventListener("routechanged", this.update);
-    }
+    };
 
     get current() {
         return this.routerService.comparePath(this.path);

src/layouts/menu-layout/MenuLayoutElement.ts

@@ -12,16 +12,16 @@ class MenuLayoutElement extends BaseLayoutElement {
         super();
     }
 
-    connectedCallback() {
+    elementConnected = () => {
         this.update();
         window.addEventListener("tokenchange", this.updateAuth);
         window.addEventListener("routechanged", this.updateAuth);
-    }
+    };
 
-    disconnectedCallback(): void {
+    elementDisconnected = () => {
         window.removeEventListener("tokenchange", this.updateAuth);
         window.removeEventListener("routechanged", this.updateAuth);
-    }
+    };
 
     get isAuth() {
         const _is = this.appMain?.routerService?.routerState?.middleware;

src/pages/history-page/HistoryPageElement.ts

@@ -13,18 +13,18 @@ class HistoryPageElement extends BasePageElement {
         super();
     }
 
-    connectedCallback() {
+    elementConnected = () => {
         this.transactionsService = new TransactionsService(
             this.appMain?.appService
         );
         this.update();
         this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
         window.addEventListener("tokenchange", this.update);
-    }
+    };
 
-    disconnectedCallback(): void {
+    elementDisconnected = () => {
         window.removeEventListener("tokenchange", this.update);
-    }
+    };
 
     getTransactions = async (options) => {
         try {

src/pages/home-page/HomePageElement.ts

@@ -12,15 +12,15 @@ class HomePageElement extends BasePageElement {
         super();
     }
 
-    connectedCallback() {
+    elementConnected = () => {
         this.pingService = new PingService(this.appMain?.appService);
         this.update();
         window.addEventListener("tokenchange", this.update);
-    }
+    };
 
-    disconnectedCallback(): void {
+    elementDisconnected = (): void => {
         window.removeEventListener("tokenchange", this.update);
-    }
+    };
 
     getPong = async () => {
         try {

src/pages/login-page/LoginPageElement.ts

@@ -21,11 +21,11 @@ class LoginPageElement extends BasePageElement {
     constructor() {
         super();
     }
-    connectedCallback() {
+    elementConnected = () => {
         this.authService = new AuthService(this.appMain.appService);
         this.routerService = this.appMain.routerService;
         this.update();
-    }
+    };
 
     get emailInput() {
         for (const i in this.inputs) {

src/pages/logout-page/LogoutPageElement.ts

@@ -10,9 +10,9 @@ class LogoutPageElement extends BasePageElement {
     constructor() {
         super();
     }
-    connectedCallback() {
+    elementConnected = () => {
         this.authService = new AuthService(this.appMain.appService);
         this.appMain?.authStore?.userLogout();
         this.appMain?.routerService.goTo("/login");
-    }
+    };
 }

src/pages/not-found/NotFoundElement.ts

@@ -9,9 +9,9 @@ class NotFoundElement extends BasePageElement {
     constructor() {
         super();
     }
-    connectedCallback() {
+    elementConnected = () => {
         this.update();
-    }
+    };
 
     render = () => {
         return html`

src/pages/register-page/RegisterPageElement.ts

@@ -12,10 +12,10 @@ class RegisterPageElement extends BasePageElement {
     constructor() {
         super();
     }
-    connectedCallback() {
+    elementConnected = () => {
         this.authService = new AuthService(this.appMain.appService);
         this.update();
-    }
+    };
 
     get values(): Object {
         const formObject = {};