Refactor

src/framework/page-element.ts

@@ -1,33 +1,30 @@
-import { PageEvent, PageEventType } from "./page-event";
+import { PageEvent, PageEventType } from './page-event';
+import { EventBroadcaster } from './event-broadcaster';
 
-export abstract class PageElement {
-  private element: HTMLElement;
+export abstract class PageElement implements EventBroadcaster {
+  protected eventBroadcaster: EventBroadcaster;
 
-  // Getter and setter accessors would have to agree in visibility
-  public getElement(): HTMLElement {
-    return this.element;
+  protected constructor(
+    private readonly rootElement: HTMLElement,
+    private readonly children: Array<PageElement> = []
+  ) {}
+
+  public get element(): HTMLElement {
+    return this.rootElement;
   }
 
-  protected setElement(value: HTMLElement) {
-    this.getElement()?.parentElement?.replaceChild(value, this.getElement());
-    this.element = value;
-  }
-
-  protected eventBroadcaster: PageElement;
-
-  protected constructor(private children: Array<PageElement> = []) {}
-
-  public broadcastEvent(event: PageEvent, parent: PageElement = null) {
+  public broadcastEvent(event: PageEvent, parent: EventBroadcaster = null) {
     if (event.type === PageEventType.eventBroadcasterChanged) {
       this.eventBroadcaster = event.data;
     }
+
     this.handleEvent(event, parent);
     this.children.forEach(c => c.broadcastEvent(event, this));
   }
 
-  protected query(query: string): HTMLElement | null {
-    return this.getElement()?.querySelector(query);
-  }
+  protected handleEvent(event: PageEvent, parent: EventBroadcaster) {}
 
-  protected handleEvent(event: PageEvent, parent: PageElement) {}
+  protected query(query: string): HTMLElement | null {
+    return this.element?.querySelector(query);
+  }
 }