closed shadowRoot and changed pages, components, layout to extend base class

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;

src/common/components/index.ts

@@ -0,0 +1 @@
+export { default as BaseComponentElement } from "./BaseComponentElement/BaseComponentElement";

src/common/index.ts

@@ -0,0 +1,3 @@
+export * from "./layouts";
+export * from "./components";
+export * from "./pages";

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;

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;

src/common/pages/index.ts

@@ -0,0 +1 @@
+export { default as BasePageElement } from "./BasePageElement/BasePageElement";