refactor: split events logic to controller (#91)

Author: web-padawan

src/api-demo-knobs-mixin.ts

@@ -126,7 +126,12 @@ const getCustomKnobs = (tag: string, vid?: number): Knob<PropertyInfo>[] => {
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export type Constructor<T = unknown> = new (...args: any[]) => T;
 
-export interface ApiDemoKnobsInterface {
+export interface HasKnobs {
+  getKnob(name: string): { knob: Knob<PropertyInfo>; custom?: boolean };
+  syncKnob(component: Element, changed: Knob<PropertyInfo>): void;
+}
+
+export interface ApiDemoKnobsInterface extends HasKnobs {
   tag: string;
   props: PropertyInfo[];
   propKnobs: Knob<PropertyInfo>[];
@@ -142,8 +147,6 @@ export interface ApiDemoKnobsInterface {
   setSlots(target: HTMLInputElement): void;
   setCss(target: HTMLInputElement): void;
   initKnobs(component: HTMLElement): void;
-  getKnob(name: string): { knob: Knob<PropertyInfo>; custom?: boolean };
-  syncKnob(component: Element, changed: Knob<PropertyInfo>): void;
 }
 
 export const ApiDemoKnobsMixin = <T extends Constructor<LitElement>>(

src/api-viewer-demo.ts

@@ -1,6 +1,7 @@
-import { LitElement, html, PropertyValues, TemplateResult } from 'lit';
+import { LitElement, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { cache } from 'lit/directives/cache.js';
+import { EventsController } from './controllers/events-controller.js';
 import { renderEvents } from './lib/demo-events.js';
 import { renderSnippet } from './lib/demo-snippet.js';
 import { renderer } from './lib/renderer.js';
@@ -23,11 +24,10 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
   @property({ attribute: false })
   events: EventInfo[] = [];
 
-  @property({ attribute: false })
-  eventLog!: CustomEvent[];
-
   private _whenDefined: Record<string, Promise<unknown>> = {};
 
+  private eventsController!: EventsController;
+
   protected createRenderRoot(): this {
     return this;
   }
@@ -51,6 +51,7 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
         </div>
       `;
     }
+
     const [noCss, noEvents, noSlots, noCustomKnobs, noProps] = [
       this.cssProps,
       this.events,
@@ -60,7 +61,7 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
     ].map((arr) => arr.length === 0);
 
     const id = this.vid as number;
-    const log = this.eventLog;
+    const log = this.eventsController?.log || [];
     const slots = this.processedSlots;
     const hideSlots = noSlots || hasTemplate(id, this.tag, TemplateTypes.SLOT);
 
@@ -165,18 +166,9 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
     `;
   }
 
-  willUpdate(props: PropertyValues) {
-    super.willUpdate(props);
-
-    // Reset state if tag changed
-    if (props.has('tag')) {
-      this.eventLog = [];
-    }
-  }
-
   private _onLogClear(): void {
-    this.eventLog = [];
-    const tab = this.renderRoot.querySelector('#events') as HTMLElement;
+    this.eventsController.clear();
+    const tab = this.querySelector('#events') as HTMLElement;
     if (tab) {
       tab.focus();
     }
@@ -211,21 +203,19 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
   private onRendered(e: CustomEvent): void {
     const { component } = e.detail;
 
-    this.initKnobs(e.detail.component);
+    this.initKnobs(component);
 
-    this.events.forEach((event) => {
-      component.addEventListener(event.name, ((evt: CustomEvent) => {
-        const s = '-changed';
-        if (event.name.endsWith(s)) {
-          const { knob } = this.getKnob(event.name.replace(s, ''));
-          if (knob) {
-            this.syncKnob(component, knob);
-          }
-        }
+    this.initEvents(component);
+  }
+
+  private initEvents(component: HTMLElement) {
+    const controller = this.eventsController;
+    if (controller) {
+      controller.clear();
+      this.removeController(controller);
+    }
 
-        this.eventLog = [...this.eventLog, evt];
-      }) as EventListener);
-    });
+    this.eventsController = new EventsController(this, component, this.events);
   }
 
   private _onCssChanged(e: CustomEvent): void {

src/controllers/events-controller.ts

@@ -0,0 +1,53 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { EventInfo } from '../lib/types.js';
+import { HasKnobs } from '../api-demo-knobs-mixin.js';
+
+type EventsHost = HTMLElement & ReactiveControllerHost & HasKnobs;
+
+export class EventsController implements ReactiveController {
+  host: EventsHost;
+
+  private _log: CustomEvent[] = [];
+
+  get log(): CustomEvent[] {
+    return this._log;
+  }
+
+  set log(log: CustomEvent[]) {
+    this._log = log;
+
+    if (this.host.isConnected) {
+      this.host.requestUpdate();
+    }
+  }
+
+  constructor(
+    host: ReactiveControllerHost,
+    component: HTMLElement,
+    events: EventInfo[]
+  ) {
+    (this.host = host as EventsHost).addController(this);
+
+    events.forEach(({ name }) => {
+      component.addEventListener(name, ((evt: CustomEvent) => {
+        const s = '-changed';
+        if (name.endsWith(s)) {
+          const { knob } = this.host.getKnob(name.replace(s, ''));
+          if (knob) {
+            this.host.syncKnob(component, knob);
+          }
+        }
+
+        this.log = [...this.log, evt];
+      }) as EventListener);
+    });
+  }
+
+  clear() {
+    this.log = [];
+  }
+
+  hostDisconnected() {
+    this.clear();
+  }
+}