From 91032927fd89d5c6b44a441bf0410f26faa73576 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Wed, 2 Jun 2021 13:19:32 +0200 Subject: [PATCH] closed shadowRoot and changed pages, components, layout to extend base class --- .../BaseComponentElement.ts | 43 +++++++++++++++++++ src/common/components/index.ts | 1 + src/common/index.ts | 3 ++ .../BaseLayoutElement/BaseLayoutElement.ts | 33 ++++++++++++++ .../pages/BasePageElement/BasePageElement.ts | 37 ++++++++++++++++ src/common/pages/index.ts | 1 + src/components/app-link/AppLinkElement.ts | 16 ++++--- src/components/app-main/AppMainElement.ts | 15 ++++--- src/components/app-menu/AppMenuElement.ts | 9 +--- src/components/app-modal/AppModalElement.ts | 4 +- .../app-pagination/AppPaginationElement.ts | 23 +++++----- src/components/app-root/AppRootElement.ts | 4 +- src/components/app-shadow/AppShadowElement.ts | 31 +++++++------ src/components/app-slot/AppSlotElement.ts | 4 +- .../input-field/InputFieldElement.ts | 8 +--- src/components/menu-item/MenuItemElement.ts | 8 +--- .../services/router-service/RouterService.ts | 3 -- src/index.ts | 2 +- src/layouts/menu-layout/MenuLayoutElement.ts | 17 ++++---- src/pages/history-page/HistoryPageElement.ts | 8 +--- src/pages/home-page/HomePageElement.ts | 8 +--- src/pages/login-page/LoginPageElement.ts | 17 +++++--- src/pages/logout-page/LogoutPageElement.ts | 4 +- src/pages/not-found/NotFoundElement.ts | 8 +--- .../register-page/RegisterPageElement.ts | 8 +--- 25 files changed, 206 insertions(+), 109 deletions(-) create mode 100644 src/common/components/BaseComponentElement/BaseComponentElement.ts create mode 100644 src/common/components/index.ts create mode 100644 src/common/pages/BasePageElement/BasePageElement.ts create mode 100644 src/common/pages/index.ts diff --git a/src/common/components/BaseComponentElement/BaseComponentElement.ts b/src/common/components/BaseComponentElement/BaseComponentElement.ts new file mode 100644 index 0000000..cab74b9 --- /dev/null +++ b/src/common/components/BaseComponentElement/BaseComponentElement.ts @@ -0,0 +1,43 @@ +import { html, render } from "@github/jtml"; +import { AppMainElement } from "components/"; +import { closest } from "core/utils"; + +class BaseComponentElement extends HTMLElement { + @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; diff --git a/src/common/components/index.ts b/src/common/components/index.ts new file mode 100644 index 0000000..fd3069f --- /dev/null +++ b/src/common/components/index.ts @@ -0,0 +1 @@ +export { default as BaseComponentElement } from "./BaseComponentElement/BaseComponentElement"; diff --git a/src/common/index.ts b/src/common/index.ts index e69de29..82365c1 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -0,0 +1,3 @@ +export * from "./layouts"; +export * from "./components"; +export * from "./pages"; diff --git a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts index a7388c3..fb07e03 100644 --- a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts +++ b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts @@ -1,7 +1,11 @@ import { target } from "@github/catalyst"; +import { html, render } from "@github/jtml"; +import { AppMainElement } from "components/"; +import { closest } from "core/utils"; class BaseLayoutElement extends HTMLElement { @target appSlot: HTMLElement; + @closest appMain: AppMainElement; public isLayout: boolean = true; public _appSlot: string; constructor() { @@ -24,6 +28,35 @@ 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; diff --git a/src/common/pages/BasePageElement/BasePageElement.ts b/src/common/pages/BasePageElement/BasePageElement.ts new file mode 100644 index 0000000..3df5252 --- /dev/null +++ b/src/common/pages/BasePageElement/BasePageElement.ts @@ -0,0 +1,37 @@ +import { html, render } from "@github/jtml"; +import { AppMainElement } from "components/"; +import { closest } from "core/utils"; + +class BasePageElement extends HTMLElement { + @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; diff --git a/src/common/pages/index.ts b/src/common/pages/index.ts new file mode 100644 index 0000000..e11976f --- /dev/null +++ b/src/common/pages/index.ts @@ -0,0 +1 @@ +export { default as BasePageElement } from "./BasePageElement/BasePageElement"; diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index ed57d19..52d3f7e 100644 --- a/src/components/app-link/AppLinkElement.ts +++ b/src/components/app-link/AppLinkElement.ts @@ -1,13 +1,19 @@ -import { attr, targets, controller, target } from "@github/catalyst"; +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 { AppMainElement } from "components/app-main/AppMainElement"; import { RouterService } from "core/services"; +import { BaseComponentElement } from "common/"; @controller -class AppLinkElement extends HTMLElement { - @closest appMain: AppMainElement; +class AppLinkElement extends BaseComponentElement { @attr to: string; @attr goBack: string; @attr title: string; @@ -67,8 +73,4 @@ class AppLinkElement extends HTMLElement { >${this.title}`}`; }; - - update = () => { - render(this.render(), this); - }; } diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index f403cc8..d4b694d 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/src/components/app-main/AppMainElement.ts @@ -2,14 +2,14 @@ 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/"; @controller -class AppMainElement extends HTMLElement { +class AppMainElement extends BaseComponentElement { public routerService: RouterService; public authStore: AuthStore; private httpClient: HttpClient; public appService: AppService; - @closest appMain; @target appModal; @target mainRoot; @@ -28,28 +28,31 @@ class AppMainElement extends HTMLElement { path: "/", component: "home-page", layout: "menu-layout", + middleware: this.isAuth, }, { path: "/home", component: "home-page", layout: "menu-layout", - middleware: this.middleAuth, + middleware: this.isAuth, }, { path: "/history", component: "history-page", layout: "menu-layout", - middleware: this.middleAuth, + middleware: this.isAuth, }, { path: "/register", component: "register-page", layout: "menu-layout", + middleware: this.isAuth, }, { path: "/login", component: "login-page", layout: "menu-layout", + middleware: this.isAuth, }, { path: "/unauthorized", @@ -130,9 +133,9 @@ class AppMainElement extends HTMLElement { if (this.appModal) this.removeChild(this.appModal); }; - get isAuth(): boolean { + isAuth = (): boolean => { return this.authStore && this.authStore.token; - } + }; } export type { AppMainElement }; diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index 7824da5..dacebdd 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/src/components/app-menu/AppMenuElement.ts @@ -1,15 +1,15 @@ import { controller, target } from "@github/catalyst"; import { html, render, 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 -class AppMenuElement extends HTMLElement { +class AppMenuElement extends BaseComponentElement { private walletService: WalletService; private walletData: Array; private totalWallets: number; - @closest appMain: AppMainElement; constructor() { super(); } @@ -51,13 +51,8 @@ class AppMenuElement extends HTMLElement { } }; - update = () => { - render(this.render(), this); - }; - get isAuth(): boolean { if (this.appMain?.isAuth) { - console.log(true); return true; } return false; diff --git a/src/components/app-modal/AppModalElement.ts b/src/components/app-modal/AppModalElement.ts index 79e9bdb..995ea3e 100644 --- a/src/components/app-modal/AppModalElement.ts +++ b/src/components/app-modal/AppModalElement.ts @@ -1,11 +1,11 @@ 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 HTMLElement { +class AppModalElement extends BaseComponentElement { @target modalElement: HTMLElement; - @closest appMain: AppMainElement; constructor() { super(); } diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index f9f59d1..dcfb4fa 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/src/components/app-pagination/AppPaginationElement.ts @@ -1,11 +1,11 @@ import { attr, controller, target } from "@github/catalyst"; import { html, render } from "@github/jtml"; +import { BaseComponentElement } from "common/"; import { AppMainElement } from "components/app-main/AppMainElement"; import { closest, isTrue } from "core/utils"; @controller -class AppPaginationElement extends HTMLElement { - @closest appMain: AppMainElement; +class AppPaginationElement extends BaseComponentElement { public items: Array; @attr page: number; @attr rpp: number; @@ -39,6 +39,7 @@ class AppPaginationElement extends HTMLElement { }; executeFetch = async (options?) => { + console.log(this.page); if (!options) { options = { rpp: this.rpp || 5, @@ -52,6 +53,7 @@ class AppPaginationElement extends HTMLElement { this.totalItems = response?.totalRecords; this.page = response?.page; this.rpp = response?.rpp; + console.log(this.page); } catch (err) { console.error(err); } @@ -67,6 +69,7 @@ class AppPaginationElement extends HTMLElement { pageNext = () => { const { rpp, totalItems, page } = this; + console.log(this.page); const pageRange = Math.ceil(totalItems / rpp); if (page < pageRange) { this.page++; @@ -84,7 +87,9 @@ class AppPaginationElement extends HTMLElement { const renderItems = () => { if (items?.length > 0) { - return html`${items?.map((item) => renderItem(item))}`; + return html` + ${items?.map((item) => renderItem(item))} + `; } return html``; }; @@ -92,6 +97,7 @@ class AppPaginationElement extends HTMLElement { const renderPagination = () => { if (totalItems > items?.length) { const pageRange = Math.ceil(totalItems / rpp); + console.log(pageRange); return html`
`; - }; - - update = () => { - render(this.render(), this); + return html`
${renderItems()} ${renderPagination()}
`; }; } diff --git a/src/components/app-root/AppRootElement.ts b/src/components/app-root/AppRootElement.ts index 080928b..6940ce7 100644 --- a/src/components/app-root/AppRootElement.ts +++ b/src/components/app-root/AppRootElement.ts @@ -1,11 +1,11 @@ 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 HTMLElement { +class AppRootElement extends BaseComponentElement { @target rootElement: HTMLElement; - @closest appMain: AppMainElement; constructor() { super(); } diff --git a/src/components/app-shadow/AppShadowElement.ts b/src/components/app-shadow/AppShadowElement.ts index 8529d5f..d8c706d 100644 --- a/src/components/app-shadow/AppShadowElement.ts +++ b/src/components/app-shadow/AppShadowElement.ts @@ -1,19 +1,24 @@ import { controller } from "@github/catalyst"; import style from "styles/main.scss"; -@controller -class AppShadowElement extends HTMLElement { - constructor() { - super(); - } +(function () { + const _shadow = new WeakMap(); - connectedCallback() { - this.attachShadow({ mode: "open" }); - const _appMain = document.createElement("app-main"); - const _style = document.createElement("style"); - _style.innerHTML = style; + @controller + class AppShadowElement extends HTMLElement { + constructor() { + super(); + _shadow.set(this, this.attachShadow({ mode: "closed" })); + } - this.shadowRoot.appendChild(_style); - this.shadowRoot.appendChild(_appMain); + connectedCallback() { + const _root = _shadow.get(this); + const _appMain = document.createElement("app-main"); + const _style = document.createElement("style"); + _style.innerHTML = style; + + _root.appendChild(_style); + _root.appendChild(_appMain); + } } -} +})(); diff --git a/src/components/app-slot/AppSlotElement.ts b/src/components/app-slot/AppSlotElement.ts index b048fe7..933058c 100644 --- a/src/components/app-slot/AppSlotElement.ts +++ b/src/components/app-slot/AppSlotElement.ts @@ -1,11 +1,11 @@ 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 HTMLElement { +class AppSlotElement extends BaseComponentElement { @target slotElement: HTMLElement; - @closest appMain: AppMainElement; constructor() { super(); } diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts index 7f9051a..8a881b9 100644 --- a/src/components/input-field/InputFieldElement.ts +++ b/src/components/input-field/InputFieldElement.ts @@ -7,10 +7,10 @@ import { RouterService } from "core/services"; import randomId from "core/utils/random-id"; import validator from "validator"; import { validatorErrors } from "core/constants"; +import { BaseComponentElement } from "common/"; @controller -class InputFieldElement extends HTMLElement { - @closest appMain: AppMainElement; +class InputFieldElement extends BaseComponentElement { @attr name: string; @attr type: string; @attr label: string; @@ -79,10 +79,6 @@ class InputFieldElement extends HTMLElement { ${this.error && html`${this.error}`} `; }; - - update = () => { - render(this.render(), this); - }; } export type { InputFieldElement }; diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts index 9bb4fc1..093a8ad 100644 --- a/src/components/menu-item/MenuItemElement.ts +++ b/src/components/menu-item/MenuItemElement.ts @@ -4,10 +4,10 @@ import { html, render, until } from "@github/jtml"; import { PingService } from "services/"; import { AppMainElement } from "components/app-main/AppMainElement"; import { RouterService } from "core/services"; +import { BaseComponentElement } from "common/"; @controller -class MenuItemElement extends HTMLElement { - @closest appMain: AppMainElement; +class MenuItemElement extends BaseComponentElement { @attr path: string; @attr title: string; @target itemEl: HTMLElement; @@ -45,8 +45,4 @@ class MenuItemElement extends HTMLElement { `; }; - - update = () => { - render(this.render(), this); - }; } diff --git a/src/core/services/router-service/RouterService.ts b/src/core/services/router-service/RouterService.ts index 58e0234..1892c05 100644 --- a/src/core/services/router-service/RouterService.ts +++ b/src/core/services/router-service/RouterService.ts @@ -47,9 +47,6 @@ class RouterService { const _mainRoot = this.mainRoot; const route = this.routerState; if (path == route?.path || route?.path == "/not-found") { - if (route.middleware && typeof route.middleware == "function") { - if (route.middleware()) return; - } let changed: boolean = false; if (_mainRoot?.childNodes.length > 0) { _mainRoot?.childNodes?.forEach?.((child: BaseLayoutElement) => { diff --git a/src/index.ts b/src/index.ts index 1a8126a..75a5144 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,3 @@ import "layouts"; -import "pages"; import "components"; +import "pages"; diff --git a/src/layouts/menu-layout/MenuLayoutElement.ts b/src/layouts/menu-layout/MenuLayoutElement.ts index 8a2aea7..680b37d 100644 --- a/src/layouts/menu-layout/MenuLayoutElement.ts +++ b/src/layouts/menu-layout/MenuLayoutElement.ts @@ -15,16 +15,20 @@ class MenuLayoutElement extends BaseLayoutElement { connectedCallback() { this.update(); window.addEventListener("tokenchange", this.updateAuth); + window.addEventListener("routechanged", this.updateAuth); } disconnectedCallback(): void { window.removeEventListener("tokenchange", this.updateAuth); + window.removeEventListener("routechanged", this.updateAuth); } get isAuth() { - const _hasToken = this.appMain?.isAuth; - const _hasData = this.appMain?.authStore?.user; - return _hasToken; + const _is = this.appMain?.routerService?.routerState?.middleware; + if (typeof _is == "function") { + return _is(); + } + return !!_is; } updateAuth = () => { @@ -32,13 +36,10 @@ class MenuLayoutElement extends BaseLayoutElement { }; render = () => { + const _isAuth = this.isAuth; return html` - + ${_isAuth ? html`` : html``} `; }; - - update = () => { - render(this.render(), this); - }; } diff --git a/src/pages/history-page/HistoryPageElement.ts b/src/pages/history-page/HistoryPageElement.ts index d2cba12..f1b0b00 100644 --- a/src/pages/history-page/HistoryPageElement.ts +++ b/src/pages/history-page/HistoryPageElement.ts @@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils"; import { html, render, until } from "@github/jtml"; import { TransactionsService } from "services/"; import { AppMainElement, AppPaginationElement } from "components/"; +import { BasePageElement } from "common/"; @controller -class HistoryPageElement extends HTMLElement { +class HistoryPageElement extends BasePageElement { private transactionsService: TransactionsService; - @closest appMain: AppMainElement; @target pagination: AppPaginationElement; constructor() { super(); @@ -42,8 +42,4 @@ class HistoryPageElement extends HTMLElement { > `; }; - - update = () => { - render(this.render(), this); - }; } diff --git a/src/pages/home-page/HomePageElement.ts b/src/pages/home-page/HomePageElement.ts index c87ab99..ad48032 100644 --- a/src/pages/home-page/HomePageElement.ts +++ b/src/pages/home-page/HomePageElement.ts @@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils"; import { html, render, until } from "@github/jtml"; import { PingService } from "services/"; import { AppMainElement } from "components/"; +import { BasePageElement } from "common/"; @controller -class HomePageElement extends HTMLElement { +class HomePageElement extends BasePageElement { private pingService: PingService; - @closest appMain: AppMainElement; constructor() { super(); } @@ -48,8 +48,4 @@ class HomePageElement extends HTMLElement { `; }; - - update = () => { - render(this.render(), this); - }; } diff --git a/src/pages/login-page/LoginPageElement.ts b/src/pages/login-page/LoginPageElement.ts index c463e00..8d041f8 100644 --- a/src/pages/login-page/LoginPageElement.ts +++ b/src/pages/login-page/LoginPageElement.ts @@ -1,14 +1,20 @@ -import { attr, targets, controller, target } from "@github/catalyst"; +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 { RouterService } from "core/services"; +import { BasePageElement } from "common/"; @controller -class LoginPageElement extends HTMLElement { +class LoginPageElement extends BasePageElement { @targets inputs: Array; - @closest appMain: AppMainElement; authService: AuthService; routerService: RouterService; errorMessage: string; @@ -48,6 +54,7 @@ class LoginPageElement extends HTMLElement { onSubmit = async () => { try { + console.log("test"); if (!this.validate()) { return; } @@ -113,8 +120,4 @@ class LoginPageElement extends HTMLElement { `; }; - - update() { - render(this.render(), this); - } } diff --git a/src/pages/logout-page/LogoutPageElement.ts b/src/pages/logout-page/LogoutPageElement.ts index 0517fb8..1768b10 100644 --- a/src/pages/logout-page/LogoutPageElement.ts +++ b/src/pages/logout-page/LogoutPageElement.ts @@ -2,10 +2,10 @@ import { controller } from "@github/catalyst"; import { closest, update } from "core/utils"; import { AuthService } from "services/"; import { AppMainElement } from "components/"; +import { BasePageElement } from "common/"; @controller -class LogoutPageElement extends HTMLElement { - @closest appMain: AppMainElement; +class LogoutPageElement extends BasePageElement { authService: AuthService; constructor() { super(); diff --git a/src/pages/not-found/NotFoundElement.ts b/src/pages/not-found/NotFoundElement.ts index e5fa481..c25098d 100644 --- a/src/pages/not-found/NotFoundElement.ts +++ b/src/pages/not-found/NotFoundElement.ts @@ -2,10 +2,10 @@ import { controller } from "@github/catalyst"; import { closest, update } from "core/utils"; import { html, render } from "@github/jtml"; import { AppMainElement } from "components/"; +import { BasePageElement } from "common/"; @controller -class NotFoundElement extends HTMLElement { - @closest appMain: AppMainElement; +class NotFoundElement extends BasePageElement { constructor() { super(); } @@ -19,8 +19,4 @@ class NotFoundElement extends HTMLElement {
`; }; - - update = () => { - render(this.render(), this); - }; } diff --git a/src/pages/register-page/RegisterPageElement.ts b/src/pages/register-page/RegisterPageElement.ts index 96d04d7..5141971 100644 --- a/src/pages/register-page/RegisterPageElement.ts +++ b/src/pages/register-page/RegisterPageElement.ts @@ -3,11 +3,11 @@ 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 { BasePageElement } from "common/"; @controller -class RegisterPageElement extends HTMLElement { +class RegisterPageElement extends BasePageElement { @targets inputs: Array; - @closest appMain: AppMainElement; authService: AuthService; constructor() { super(); @@ -84,8 +84,4 @@ class RegisterPageElement extends HTMLElement { `; }; - - update = () => { - render(this.render(), this); - }; }