Merge branch 'feature/WW-26-architecture'

src/common/core/BaseElement/BaseElement.ts

@@ -1,15 +1,18 @@
-import { html, render } from "@github/jtml";
+import { html, render, TemplateResult } from "@github/jtml";
 import { AppMainElement } from "components/";
 import { closest } from "core/utils";
 
 class BaseElement extends HTMLElement {
     @closest appMain: AppMainElement;
+    private _appMain: AppMainElement;
     private elementDisconnectCallbacks: Array<Function> = [];
     constructor() {
         super();
+        this.connectedCallback = this.connectedCallback.bind(this);
+        this.disconnectedCallback = this.disconnectedCallback.bind(this);
     }
 
-    bindEvents = () => {
+    bindEvents = (): void => {
         const _elems = this.querySelectorAll("[data-action]");
         _elems?.forEach((el) => {
             for (const action of (el.getAttribute("data-action") || "")
@@ -41,35 +44,37 @@ class BaseElement extends HTMLElement {
         });
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         return html``;
     };
 
-    update = () => {
+    update = (): void => {
         render(this.render(), this);
         this.bindEvents();
     };
 
-    connectedCallback() {
+    connectedCallback(): void {
         this.elementConnected();
+        this._appMain = this.appMain;
     }
 
-    disconnectedCallback() {
-        this.elementDisconnected();
+    disconnectedCallback(): void {
+        const { _appMain } = this;
+        this.elementDisconnected(_appMain);
         if (Array.isArray(this.elementDisconnectCallbacks)) {
             this.elementDisconnectCallbacks.forEach((callback: Function) => {
                 if (typeof callback == "function") {
-                    callback();
+                    callback(_appMain);
                 }
             });
         }
     }
 
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.update();
     };
 
-    elementDisconnected = () => {};
+    elementDisconnected = (appMain: AppMainElement): void => {};
 }
 
 export default BaseElement;

src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts

@@ -9,7 +9,7 @@ class BaseLayoutElement extends BaseElement {
         super();
     }
 
-    get slotTag() {
+    get slotTag(): string {
         return this.appSlot?.firstElementChild?.tagName;
     }
 
@@ -20,7 +20,7 @@ class BaseLayoutElement extends BaseElement {
         return tag?.tagName === this.slotTag;
     };
 
-    setElement = (newTag: string) => {
+    setElement = (newTag: string): void => {
         const _appSlot = `<div data-target="base-layout.content"><${newTag}></${newTag}></div>`;
         this._appSlot = _appSlot;
         this.appSlot.innerHTML = _appSlot;

src/components/app-link/AppLinkElement.ts

@@ -1,13 +1,6 @@
-import {
-    attr,
-    targets,
-    controller,
-    target,
-    listenForBind,
-} from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { PingService } from "services/";
+import { attr, controller, target } from "@github/catalyst";
+import { isTrue } from "core/utils";
+import { html, TemplateResult } from "@github/jtml";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { RouterService } from "core/services";
 import { BaseComponentElement } from "common/";
@@ -32,17 +25,17 @@ class AppLinkElement extends BaseComponentElement {
         }
         this.update();
         if (isTrue(this.goBack)) {
-            window.addEventListener("routechanged", this.update);
+            this.appMain.addEventListener("routechanged", this.update);
         }
     };
 
-    elementDisconnected = (): void => {
+    elementDisconnected = (appMain: AppMainElement): void => {
         if (isTrue(this.goBack)) {
-            window.removeEventListener("routechanged", this.update);
+            appMain?.removeEventListener("routechanged", this.update);
         }
     };
 
-    goTo = (e: Event) => {
+    goTo = (e: Event): void => {
         e.preventDefault();
         if (!isTrue(this.goBack) && this.to) {
             this.routerService.goTo(this.to);
@@ -52,11 +45,11 @@ class AppLinkElement extends BaseComponentElement {
         this.update();
     };
 
-    get disabled() {
+    get disabled(): boolean {
         return isTrue(this.goBack) && this.routerService.emptyState;
     }
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`${this.disabled
             ? html`<a
                   class="btn btn-link btn-disabled"
@@ -74,3 +67,5 @@ class AppLinkElement extends BaseComponentElement {
               >`}`;
     };
 }
+
+export type { AppLinkElement };

src/components/app-main/AppMainElement.ts

@@ -1,8 +1,8 @@
 import { controller, target } from "@github/catalyst";
-import { closest } from "core/utils";
 import { AppService, HttpClient, RouterService } from "core/services";
 import { AuthStore } from "core/store";
 import { BaseComponentElement } from "common/";
+import { AppModalElement, AppRootElement } from "components/";
 
 @controller
 class AppMainElement extends BaseComponentElement {
@@ -10,8 +10,8 @@ class AppMainElement extends BaseComponentElement {
     public authStore: AuthStore;
     private httpClient: HttpClient;
     public appService: AppService;
-    @target appModal;
-    @target mainRoot;
+    @target appModal: AppModalElement;
+    @target mainRoot: AppRootElement;
 
     constructor() {
         super();
@@ -21,8 +21,8 @@ class AppMainElement extends BaseComponentElement {
         const mainRoot = this.createMainRoot();
         this.httpClient = new HttpClient();
         this.appService = new AppService(this, this.httpClient);
-        this.routerService = new RouterService(mainRoot);
-        this.authStore = new AuthStore(this.appService);
+        this.routerService = new RouterService(this, mainRoot);
+        this.authStore = new AuthStore(this, this.appService);
         this.routerService.setRoutes([
             {
                 path: "/",
@@ -134,7 +134,7 @@ class AppMainElement extends BaseComponentElement {
     };
 
     isAuth = (): boolean => {
-        return this.authStore && this.authStore.token;
+        return this.authStore && !!this.authStore.token;
     };
 }
 

src/components/app-menu/AppMenuElement.ts

@@ -1,8 +1,7 @@
-import { controller, target } from "@github/catalyst";
-import { html, render, TemplateResult } from "@github/jtml";
+import { controller } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
 import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest, update } from "core/utils";
 import { WalletService } from "services/";
 
 @controller
@@ -14,21 +13,21 @@ class AppMenuElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.walletService = new WalletService(this.appMain?.appService);
         if (this.appMain.isAuth) {
             this.getWallets();
         } else {
             this.update();
         }
-        window.addEventListener("tokenchange", this.updateToken);
+        this.appMain.addEventListener("tokenchange", this.updateToken);
     };
 
-    elementDisconnected = () => {
-        window.removeEventListener("tokenchange", this.updateToken);
+    elementDisconnected = (appMain: AppMainElement): void => {
+        appMain?.removeEventListener("tokenchange", this.updateToken);
     };
 
-    getWallets = async () => {
+    getWallets = async (): Promise<void> => {
         try {
             const response = await this.walletService.getAll({ rpp: 2 });
             this.setWallets(response.items, response.totalRecords);
@@ -37,13 +36,13 @@ class AppMenuElement extends BaseComponentElement {
         }
     };
 
-    setWallets = (wallets: Array<any>, totalWallets: number) => {
+    setWallets = (wallets: Array<any>, totalWallets: number): void => {
         this.walletData = wallets;
         this.totalWallets = totalWallets;
         this.update();
     };
 
-    updateToken = () => {
+    updateToken = (): void => {
         if (this.isAuth) {
             this.getWallets();
         } else {
@@ -58,7 +57,7 @@ class AppMenuElement extends BaseComponentElement {
         return false;
     }
 
-    renderWallets = () => {
+    renderWallets = (): Array<TemplateResult> => {
         if (this.isAuth && this.totalWallets > 0) {
             return this.walletData.map(
                 (wallet) => html`<menu-item data-path="/wallet/${wallet.id}"
@@ -69,7 +68,7 @@ class AppMenuElement extends BaseComponentElement {
         return null;
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         const { isAuth, totalWallets, walletData } = this;
 
         const regularMenu = (path: string, title: string): TemplateResult =>
@@ -111,3 +110,5 @@ class AppMenuElement extends BaseComponentElement {
         `;
     };
 }
+
+export type { AppMenuElement };

src/components/app-modal/AppModalElement.ts

@@ -1,7 +1,5 @@
 import { controller, target } from "@github/catalyst";
 import { BaseComponentElement } from "common/";
-import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest } from "core/utils";
 
 @controller
 class AppModalElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppModalElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {};
+    elementConnected = (): void => {};
 }
+
+export type { AppModalElement };

src/components/app-pagination/AppPaginationElement.ts

@@ -1,8 +1,6 @@
-import { attr, controller, target } from "@github/catalyst";
-import { html, render } from "@github/jtml";
+import { attr, controller } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
 import { BaseComponentElement } from "common/";
-import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest, isTrue } from "core/utils";
 
 @controller
 class AppPaginationElement extends BaseComponentElement {
@@ -16,18 +14,18 @@ class AppPaginationElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {};
+    elementConnected = (): void => {};
 
-    attributeChangedCallback() {
+    attributeChangedCallback(): void {
         this.update();
     }
 
-    setItems = (items) => {
+    setItems = (items): void => {
         this.items = items;
         this.update();
     };
 
-    setFetchFunc = async (fetchFunc: Function, autoInit?) => {
+    setFetchFunc = async (fetchFunc: Function, autoInit?): Promise<void> => {
         this.fetchFunc = fetchFunc;
         if (autoInit) {
             const options = {
@@ -38,8 +36,7 @@ class AppPaginationElement extends BaseComponentElement {
         }
     };
 
-    executeFetch = async (options?) => {
-        console.log(this.page);
+    executeFetch = async (options?): Promise<void> => {
         if (!options) {
             options = {
                 rpp: this.rpp || 5,
@@ -53,13 +50,12 @@ class AppPaginationElement extends BaseComponentElement {
             this.totalItems = response?.totalRecords;
             this.page = response?.page;
             this.rpp = response?.rpp;
-            console.log(this.page);
         } catch (err) {
             console.error(err);
         }
     };
 
-    pageBack = () => {
+    pageBack = (): void => {
         const { page } = this;
         if (page > 1) {
             this.page--;
@@ -67,9 +63,8 @@ class AppPaginationElement extends BaseComponentElement {
         }
     };
 
-    pageNext = () => {
+    pageNext = (): void => {
         const { rpp, totalItems, page } = this;
-        console.log(this.page);
         const pageRange = Math.ceil(totalItems / rpp);
         if (page < pageRange) {
             this.page++;
@@ -77,7 +72,7 @@ class AppPaginationElement extends BaseComponentElement {
         }
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         const { rpp, totalItems, page, items } = this;
 
         const renderItem = (item) => html`<tr>
@@ -97,7 +92,6 @@ class AppPaginationElement extends BaseComponentElement {
         const renderPagination = () => {
             if (totalItems > items?.length) {
                 const pageRange = Math.ceil(totalItems / rpp);
-                console.log(pageRange);
                 return html`
                     <div>
                         <button

src/components/app-root/AppRootElement.ts

@@ -1,7 +1,5 @@
 import { controller, target } from "@github/catalyst";
 import { BaseComponentElement } from "common/";
-import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest } from "core/utils";
 
 @controller
 class AppRootElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppRootElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {};
+    elementConnected = (): void => {};
 }
+
+export type { AppRootElement };

src/components/app-slot/AppSlotElement.ts

@@ -1,7 +1,5 @@
 import { controller, target } from "@github/catalyst";
 import { BaseComponentElement } from "common/";
-import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest } from "core/utils";
 
 @controller
 class AppSlotElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppSlotElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {};
+    elementConnected = (): void => {};
 }
+
+export type { AppSlotElement };

src/components/input-field/InputFieldElement.ts

@@ -1,8 +1,6 @@
-import { attr, targets, controller, target } from "@github/catalyst";
-import { closest, index, update, isTrue, firstUpper } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { PingService } from "services/";
-import { AppMainElement } from "components/app-main/AppMainElement";
+import { attr, controller, target } from "@github/catalyst";
+import { firstUpper } from "core/utils";
+import { html, TemplateResult } from "@github/jtml";
 import { RouterService } from "core/services";
 import randomId from "core/utils/random-id";
 import validator from "validator";
@@ -24,7 +22,7 @@ class InputFieldElement extends BaseComponentElement {
         super();
     }
 
-    public elementConnected = () => {
+    public elementConnected = (): void => {
         this.randId = `${name}${randomId()}`;
         this.update();
     };
@@ -69,7 +67,7 @@ class InputFieldElement extends BaseComponentElement {
         return _return;
     }
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`<div data-target="input-field.main">
             ${this.label &&
             html`<label for="${this.randId}"

src/components/menu-item/MenuItemElement.ts

@@ -1,7 +1,5 @@
-import { attr, targets, controller, target } from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { PingService } from "services/";
+import { attr, controller, target } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { RouterService } from "core/services";
 import { BaseComponentElement } from "common/";
@@ -16,7 +14,7 @@ class MenuItemElement extends BaseComponentElement {
         super();
     }
 
-    public elementConnected = () => {
+    public elementConnected = (): void => {
         this.routerService = this.appMain?.routerService;
         if (!this.title && this.innerText) {
             const _slottedText = this.innerText;
@@ -24,18 +22,18 @@ class MenuItemElement extends BaseComponentElement {
             this.title = _slottedText;
         }
         this.update();
-        window.addEventListener("routechanged", this.update);
+        this.appMain.addEventListener("routechanged", this.update);
     };
 
-    public elementDisconnected = () => {
-        window.removeEventListener("routechanged", this.update);
+    public elementDisconnected = (appMain: AppMainElement): void => {
+        appMain?.removeEventListener("routechanged", this.update);
     };
 
-    get current() {
+    get current(): boolean {
         return this.routerService.comparePath(this.path);
     }
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`
             <div
                 class="${this.current ? "selected " : ""}menu-item"
@@ -46,3 +44,5 @@ class MenuItemElement extends BaseComponentElement {
         `;
     };
 }
+
+export type { MenuItemElement };

src/core/services/base-service/BaseService.ts

@@ -1,4 +1,4 @@
-import { AppService, HttpClient } from "core/services";
+import { AppService } from "core/services";
 
 class BaseService {
     constructor(public endpoint: string, public appService: AppService) {}

src/core/services/router-service/RouterService.ts

@@ -1,5 +1,5 @@
 import { BaseLayoutElement } from "common/layouts";
-import { update } from "core/utils";
+import { AppMainElement } from "components/";
 
 class RouterService {
     private historyStack: Array<RouteState> = [];
@@ -7,7 +7,10 @@ class RouterService {
     private domEvents: any = {
         routechanged: new Event("routechanged"),
     };
-    constructor(private mainRoot: ShadowRoot | HTMLElement) {}
+    constructor(
+        private appMain: AppMainElement,
+        private mainRoot: ShadowRoot | HTMLElement
+    ) {}
 
     get routerState(): RouteState {
         const historyLen = this.historyStack?.length;
@@ -115,7 +118,7 @@ class RouterService {
             this.historyStack.push(newRoute);
             this.update();
         }
-        window.dispatchEvent(this.domEvents.routechanged);
+        this.appMain.dispatchEvent(this.domEvents.routechanged);
     };
 
     public goTo = (path: string): void => {

src/core/store/AuthStore.ts

@@ -1,35 +1,43 @@
+import { AppMainElement } from "components/";
 import { AppService } from "core/services";
 import { AuthService } from "services/";
 
 class AuthStore {
-    private _token;
-    private _userDetails;
+    private _token: string;
+    private _userDetails: UserDetails;
     private authService: AuthService;
     private domEvents: any = {
         tokenchange: new Event("tokenchange"),
     };
-    constructor(private appService: AppService) {
+    constructor(
+        private appMain: AppMainElement,
+        private appService: AppService
+    ) {
         this.token = localStorage.getItem("token");
         this.authService = new AuthService(this.appService);
     }
 
-    get token() {
+    get token(): string {
         if (this._token == "null") return null;
         if (this._token == "undefined") return undefined;
         return this._token;
     }
 
-    set token(token) {
-        this._token = token;
-        localStorage.setItem("token", token);
-        window.dispatchEvent(this.domEvents.tokenchange);
+    set token(token: string) {
+        const { _token } = this;
+        const _changed = token != _token;
+        if (_changed) {
+            this._token = token;
+            localStorage.setItem("token", token);
+            this.appMain.dispatchEvent(this.domEvents.tokenchange);
+        }
     }
 
-    get user() {
+    get user(): UserDetails {
         return this._userDetails;
     }
 
-    set user(userDetails) {
+    set user(userDetails: UserDetails) {
         this._userDetails = userDetails;
     }
 
@@ -57,10 +65,18 @@ class AuthStore {
         }
     };
 
-    userLogout = () => {
+    userLogout = (): void => {
         this.token = null;
         localStorage.removeItem("token");
     };
 }
 
 export default AuthStore;
+
+export type UserDetails = {
+    id: string;
+    username: string;
+    email: string;
+    dateCreated: string;
+    dateUpdated: string;
+};

src/core/utils/closest-deco.ts

@@ -1,6 +1,6 @@
 import { toKebabCase } from "core/utils";
 
-export default function closest(proto, key) {
+export default function closest(proto: Object, key: string): any {
     const kebab: string = toKebabCase(key);
     return Object.defineProperty(proto, key, {
         configurable: true,
@@ -10,6 +10,6 @@ export default function closest(proto, key) {
     });
 }
 
-function findClosest(element: HTMLElement, key: string) {
+function findClosest(element: HTMLElement, key: string): HTMLElement {
     return element.closest(key);
 }

src/core/utils/isTrue.ts

@@ -1,3 +1,3 @@
-export default function isTrue(text: string) {
+export default function isTrue(text: string): boolean {
     return text === "true";
 }

src/core/utils/random-id.ts

@@ -1,3 +1,3 @@
-export default function randomId() {
+export default function randomId(): string {
     return "_" + Math.random().toString(36).substr(2, 5);
 }

src/core/utils/toKebabCase.ts

@@ -1,4 +1,4 @@
-export default function toKebabCase(text: string) {
+export default function toKebabCase(text: string): string {
     return text
         .replace(/([a-z])([A-Z])/g, "$1-$2")
         .replace(/\s+/g, "-")

src/core/utils/update-deco.ts

@@ -1,5 +1,5 @@
-export default function update(proto: any, key?: string, dir?: any) {
-    const method = dir.value!;
+export default function update(proto: any, key?: string, dir?: any): any {
+    const method: Function = dir.value!;
     dir.value = function () {
         const _return = method.apply(this, arguments);
         if (proto.update) proto.update.call(this);

src/layouts/menu-layout/MenuLayoutElement.ts

@@ -1,6 +1,6 @@
 import { controller } from "@github/catalyst";
 import { closest } from "core/utils";
-import { html, render } from "@github/jtml";
+import { html, TemplateResult } from "@github/jtml";
 import { BaseLayoutElement } from "common/layouts";
 import { AppMainElement } from "components/";
 
@@ -12,18 +12,18 @@ class MenuLayoutElement extends BaseLayoutElement {
         super();
     }
 
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.update();
-        window.addEventListener("tokenchange", this.updateAuth);
-        window.addEventListener("routechanged", this.updateAuth);
+        this.appMain.addEventListener("tokenchange", this.updateAuth);
+        this.appMain.addEventListener("routechanged", this.updateAuth);
     };
 
-    elementDisconnected = () => {
-        window.removeEventListener("tokenchange", this.updateAuth);
-        window.removeEventListener("routechanged", this.updateAuth);
+    elementDisconnected = (appMain: AppMainElement): void => {
+        appMain?.removeEventListener("tokenchange", this.updateAuth);
+        appMain?.removeEventListener("routechanged", this.updateAuth);
     };
 
-    get isAuth() {
+    get isAuth(): boolean {
         const _is = this.appMain?.routerService?.routerState?.middleware;
         if (typeof _is == "function") {
             return _is();
@@ -31,11 +31,11 @@ class MenuLayoutElement extends BaseLayoutElement {
         return !!_is;
     }
 
-    updateAuth = () => {
+    updateAuth = (): void => {
         this.update();
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         const _isAuth = this.isAuth;
         return html`
             ${_isAuth ? html`<app-menu></app-menu>` : html``}
@@ -43,3 +43,5 @@ class MenuLayoutElement extends BaseLayoutElement {
         `;
     };
 }
+
+export type { MenuLayoutElement };

src/pages/history-page/HistoryPageElement.ts

@@ -1,6 +1,5 @@
-import { attr, targets, controller, target } from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
-import { html, render, until } from "@github/jtml";
+import { controller, target } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
 import { TransactionsService } from "services/";
 import { AppMainElement, AppPaginationElement } from "components/";
 import { BasePageElement } from "common/";
@@ -13,20 +12,20 @@ class HistoryPageElement extends BasePageElement {
         super();
     }
 
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.transactionsService = new TransactionsService(
             this.appMain?.appService
         );
         this.update();
         this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
-        window.addEventListener("tokenchange", this.update);
+        this.appMain.addEventListener("tokenchange", this.update);
     };
 
-    elementDisconnected = () => {
-        window.removeEventListener("tokenchange", this.update);
+    elementDisconnected = (appMain: AppMainElement): void => {
+        appMain?.removeEventListener("tokenchange", this.update);
     };
 
-    getTransactions = async (options) => {
+    getTransactions = async (options): Promise<any> => {
         try {
             const response = await this.transactionsService.getAll(options);
             return response;
@@ -35,7 +34,7 @@ class HistoryPageElement extends BasePageElement {
         }
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`
             <app-pagination
                 data-target="history-page.pagination"
@@ -43,3 +42,5 @@ class HistoryPageElement extends BasePageElement {
         `;
     };
 }
+
+export type { HistoryPageElement };

src/pages/home-page/HomePageElement.ts

@@ -1,6 +1,5 @@
-import { attr, targets, controller, target } from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
-import { html, render, until } from "@github/jtml";
+import { controller } from "@github/catalyst";
+import { html, TemplateResult, until } from "@github/jtml";
 import { PingService } from "services/";
 import { AppMainElement } from "components/";
 import { BasePageElement } from "common/";
@@ -12,17 +11,17 @@ class HomePageElement extends BasePageElement {
         super();
     }
 
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.pingService = new PingService(this.appMain?.appService);
         this.update();
-        window.addEventListener("tokenchange", this.update);
+        this.appMain.addEventListener("tokenchange", this.update);
     };
 
-    elementDisconnected = (): void => {
-        window.removeEventListener("tokenchange", this.update);
+    elementDisconnected = (appMain: AppMainElement): void => {
+        appMain?.removeEventListener("tokenchange", this.update);
     };
 
-    getPong = async () => {
+    getPong = async (): Promise<void> => {
         try {
             const response = await this.pingService.getAll();
         } catch (err) {
@@ -30,11 +29,11 @@ class HomePageElement extends BasePageElement {
         }
     };
 
-    pongEl = () => {
+    pongEl = (): TemplateResult => {
         return html`<div>${until(this.getPong())}</div>`;
     };
 
-    openModal = () => {
+    openModal = (): void => {
         const _modal = this.appMain.appModal;
         if (_modal) {
             this.appMain.closeModal();
@@ -43,9 +42,11 @@ class HomePageElement extends BasePageElement {
         }
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`
             <button data-action="click:home-page#openModal">Test</button>
         `;
     };
 }
+
+export { HomePageElement };

src/pages/login-page/LoginPageElement.ts

@@ -1,14 +1,7 @@
-import {
-    attr,
-    targets,
-    controller,
-    target,
-    listenForBind,
-} from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { AuthService, PingService } from "services/";
-import { AppMainElement, InputFieldElement } from "components/";
+import { targets, controller } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
+import { AuthService } from "services/";
+import { InputFieldElement } from "components/";
 import { RouterService } from "core/services";
 import { BasePageElement } from "common/";
 
@@ -21,13 +14,13 @@ class LoginPageElement extends BasePageElement {
     constructor() {
         super();
     }
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.authService = new AuthService(this.appMain.appService);
         this.routerService = this.appMain.routerService;
         this.update();
     };
 
-    get emailInput() {
+    get emailInput(): InputFieldElement {
         for (const i in this.inputs) {
             if (this.inputs[i]?.name == "email") {
                 return this.inputs[i];
@@ -35,7 +28,7 @@ class LoginPageElement extends BasePageElement {
         }
     }
 
-    get passwordInput() {
+    get passwordInput(): InputFieldElement {
         for (const i in this.inputs) {
             if (this.inputs[i]?.name == "password") {
                 return this.inputs[i];
@@ -44,7 +37,7 @@ class LoginPageElement extends BasePageElement {
     }
 
     get values(): Object {
-        const formObject = {};
+        const formObject: any = {};
         this.inputs.forEach((input: InputFieldElement) => {
             const inputType = input.inp;
             formObject[input.name] = (inputType as HTMLInputElement).value;
@@ -52,9 +45,8 @@ class LoginPageElement extends BasePageElement {
         return formObject;
     }
 
-    onSubmit = async () => {
+    onSubmit = async (): Promise<void> => {
         try {
-            console.log("test");
             if (!this.validate()) {
                 return;
             }
@@ -63,7 +55,6 @@ class LoginPageElement extends BasePageElement {
             );
 
             if (response?.token) {
-                console.log(this.appMain);
                 this.routerService.goTo("/");
             }
         } catch (err) {
@@ -89,7 +80,7 @@ class LoginPageElement extends BasePageElement {
         return _return;
     }
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`
             <form>
                 <input-field
@@ -121,3 +112,5 @@ class LoginPageElement extends BasePageElement {
         `;
     };
 }
+
+export type { LoginPageElement };

src/pages/logout-page/LogoutPageElement.ts

@@ -1,7 +1,5 @@
 import { controller } from "@github/catalyst";
-import { closest, update } from "core/utils";
 import { AuthService } from "services/";
-import { AppMainElement } from "components/";
 import { BasePageElement } from "common/";
 
 @controller
@@ -10,9 +8,11 @@ class LogoutPageElement extends BasePageElement {
     constructor() {
         super();
     }
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.authService = new AuthService(this.appMain.appService);
         this.appMain?.authStore?.userLogout();
         this.appMain?.routerService.goTo("/login");
     };
 }
+
+export type { LogoutPageElement };

src/pages/not-found/NotFoundElement.ts

@@ -1,7 +1,5 @@
 import { controller } from "@github/catalyst";
-import { closest, update } from "core/utils";
-import { html, render } from "@github/jtml";
-import { AppMainElement } from "components/";
+import { html, TemplateResult } from "@github/jtml";
 import { BasePageElement } from "common/";
 
 @controller
@@ -9,14 +7,16 @@ class NotFoundElement extends BasePageElement {
     constructor() {
         super();
     }
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.update();
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`
             <div>404 - Page not found</div>
             <div><app-link data-to="/" data-title="Homepage"></app-link></div>
         `;
     };
 }
+
+export type { NotFoundElement };

src/pages/register-page/RegisterPageElement.ts

@@ -1,8 +1,7 @@
-import { attr, targets, controller, target } from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { AuthService, PingService } from "services/";
-import { AppMainElement, InputFieldElement } from "components/";
+import { targets, controller } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
+import { AuthService } from "services/";
+import { InputFieldElement } from "components/";
 import { BasePageElement } from "common/";
 
 @controller
@@ -12,7 +11,7 @@ class RegisterPageElement extends BasePageElement {
     constructor() {
         super();
     }
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.authService = new AuthService(this.appMain.appService);
         this.update();
     };
@@ -26,7 +25,7 @@ class RegisterPageElement extends BasePageElement {
         return formObject;
     }
 
-    onSubmit = async () => {
+    onSubmit = async (): Promise<void> => {
         try {
             if (!this.validate()) {
                 return;
@@ -50,7 +49,7 @@ class RegisterPageElement extends BasePageElement {
         return _return;
     }
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`
             <form>
                 <input-field
@@ -85,3 +84,5 @@ class RegisterPageElement extends BasePageElement {
         `;
     };
 }
+
+export type { RegisterPageElement };