fix: improve demo controllers, do not reset state (#129)

web-padawan · web-flow · commit 56f3e686c4c1 · 2021-12-31T18:23:27.000+02:00
diff --git a/.changeset/gorgeous-trees-smash.md b/.changeset/gorgeous-trees-smash.md
@@ -0,0 +1,5 @@
+---
+'@api-viewer/demo': patch
+---
+
+Improve demo controllers, do not reset state 
diff --git a/packages/api-demo/src/controllers/abstract-controller.ts b/packages/api-demo/src/controllers/abstract-controller.ts
@@ -0,0 +1,40 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export type AbstractControllerHost = HTMLElement & ReactiveControllerHost;
+
+export class AbstractController<T> {
+  host: AbstractControllerHost;
+
+  el: HTMLElement;
+
+  private _data: T[] = [];
+
+  get data(): T[] {
+    return this._data;
+  }
+
+  set data(data: T[]) {
+    this._data = data;
+
+    this.updateData(data);
+  }
+
+  updateData(_data: T[]) {
+    if (this.host.isConnected) {
+      this.host.requestUpdate();
+    }
+  }
+
+  constructor(host: AbstractControllerHost, component: HTMLElement) {
+    (this.host = host).addController(this as ReactiveController);
+    this.el = component;
+  }
+
+  clear() {
+    this.data = [];
+  }
+
+  destroy() {
+    this.host.removeController(this as ReactiveController);
+  }
+}
diff --git a/packages/api-demo/src/controllers/events-controller.ts b/packages/api-demo/src/controllers/events-controller.ts
@@ -1,53 +1,30 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { Event } from '@api-viewer/common/lib/manifest.js';
+import {
+  AbstractController,
+  AbstractControllerHost
+} from './abstract-controller.js';
 import { HasKnobs } from '../ui/knobs.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();
-    }
-  }
-
+export class EventsController extends AbstractController<CustomEvent> {
   constructor(
-    host: ReactiveControllerHost,
+    host: AbstractControllerHost & HasKnobs,
     component: HTMLElement,
     events: Event[]
   ) {
-    (this.host = host as EventsHost).addController(this);
+    super(host, component);
 
     events.forEach(({ name }) => {
       component.addEventListener(name, ((evt: CustomEvent) => {
         const s = '-changed';
         if (name.endsWith(s)) {
-          const { knob } = this.host.getKnob(name.replace(s, ''));
+          const { knob } = host.getKnob(name.replace(s, ''));
           if (knob) {
-            this.host.syncKnob(component, knob);
+            host.syncKnob(component, knob);
           }
         }
 
-        this.log = [...this.log, evt];
+        this.data = [...this.data, evt];
       }) as EventListener);
     });
   }
-
-  clear() {
-    this.log = [];
-  }
-
-  hostDisconnected() {
-    this.clear();
-  }
 }
diff --git a/packages/api-demo/src/controllers/slots-controller.ts b/packages/api-demo/src/controllers/slots-controller.ts
@@ -1,63 +1,32 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { Slot, SlotValue } from '@api-viewer/common/lib/index.js';
 import {
   hasTemplate,
   TemplateTypes
 } from '@api-viewer/common/lib/templates.js';
+import {
+  AbstractController,
+  AbstractControllerHost
+} from './abstract-controller.js';
 
 const capitalize = (name: string): string =>
   name[0].toUpperCase() + name.slice(1);
 
 const getSlotContent = (name: string): string =>
   capitalize(name === '' ? 'content' : name);
 
-export class SlotsController implements ReactiveController {
-  host: ReactiveControllerHost;
-
+export class SlotsController extends AbstractController<SlotValue> {
   enabled: boolean;
 
-  el: HTMLElement;
-
-  private _slots: SlotValue[] = [];
-
-  get slots(): SlotValue[] {
-    return this._slots;
-  }
-
-  set slots(slots: SlotValue[]) {
-    this._slots = slots;
-
-    // Apply slots content by re-creating nodes
-    if (this.enabled && this.el.isConnected && slots && slots.length) {
-      this.el.innerHTML = '';
-      slots.forEach((slot) => {
-        let node: Element | Text;
-        const { name, content } = slot;
-        if (name) {
-          node = document.createElement('div');
-          node.setAttribute('slot', name);
-          node.textContent = content;
-        } else {
-          node = document.createTextNode(content);
-        }
-        this.el.appendChild(node);
-      });
-    }
-
-    // Update the demo snippet
-    this.host.requestUpdate();
-  }
-
   constructor(
-    host: ReactiveControllerHost,
-    id: number,
+    host: AbstractControllerHost,
     component: HTMLElement,
+    id: number,
     slots: Slot[]
   ) {
-    (this.host = host).addController(this as ReactiveController);
-    this.el = component;
+    super(host, component);
+
     this.enabled = !hasTemplate(id, component.localName, TemplateTypes.SLOT);
-    this.slots = slots
+    this.data = slots
       .sort((a, b) => {
         if (a.name === '') {
           return 1;
@@ -75,12 +44,8 @@ export class SlotsController implements ReactiveController {
       }) as SlotValue[];
   }
 
-  hostDisconnected() {
-    this.slots = [];
-  }
-
   setValue(name: string, content: string) {
-    this.slots = this.slots.map((slot) => {
+    this.data = this.data.map((slot) => {
       return slot.name === name
         ? {
             ...slot,
@@ -89,4 +54,25 @@ export class SlotsController implements ReactiveController {
         : slot;
     });
   }
+
+  updateData(data: SlotValue[]) {
+    super.updateData(data);
+
+    // Apply slots content by re-creating nodes
+    if (this.enabled && this.el.isConnected && data && data.length) {
+      this.el.innerHTML = '';
+      data.forEach((slot) => {
+        let node: Element | Text;
+        const { name, content } = slot;
+        if (name) {
+          node = document.createElement('div');
+          node.setAttribute('slot', name);
+          node.textContent = content;
+        } else {
+          node = document.createTextNode(content);
+        }
+        this.el.appendChild(node);
+      });
+    }
+  }
 }
diff --git a/packages/api-demo/src/controllers/styles-controller.ts b/packages/api-demo/src/controllers/styles-controller.ts
@@ -1,55 +1,25 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
 import {
   CssCustomProperty,
   CssCustomPropertyValue,
   unquote
 } from '@api-viewer/common/lib/index.js';
+import {
+  AbstractController,
+  AbstractControllerHost
+} from './abstract-controller.js';
 
-export class StylesController implements ReactiveController {
-  host: HTMLElement & ReactiveControllerHost;
-
-  el: HTMLElement;
-
-  private _css: CssCustomPropertyValue[] = [];
-
-  get css(): CssCustomPropertyValue[] {
-    return this._css;
-  }
-
-  set css(cssProps: CssCustomPropertyValue[]) {
-    this._css = cssProps;
-
-    if (cssProps.length) {
-      cssProps.forEach((prop) => {
-        const { name, value } = prop;
-        if (value) {
-          if (value === prop.default) {
-            this.el.style.removeProperty(name);
-          } else {
-            this.el.style.setProperty(name, value);
-          }
-        }
-      });
-    }
-
-    // Update the demo snippet
-    if (this.host.isConnected) {
-      this.host.requestUpdate();
-    }
-  }
-
+export class StylesController extends AbstractController<CssCustomPropertyValue> {
   constructor(
-    host: HTMLElement & ReactiveControllerHost,
+    host: AbstractControllerHost,
     component: HTMLElement,
     cssProps: CssCustomProperty[]
   ) {
-    (this.host = host).addController(this);
-    this.el = component;
+    super(host, component);
 
     if (cssProps.length) {
       const style = getComputedStyle(component);
 
-      this.css = cssProps.map((cssProp) => {
+      this.data = cssProps.map((cssProp) => {
         let value = cssProp.default
           ? unquote(cssProp.default)
           : style.getPropertyValue(cssProp.name);
@@ -66,12 +36,8 @@ export class StylesController implements ReactiveController {
     }
   }
 
-  hostDisconnected() {
-    this.css = [];
-  }
-
   setValue(name: string, value: string) {
-    this.css = this.css.map((prop) => {
+    this.data = this.data.map((prop) => {
       return prop.name === name
         ? {
             ...prop,
@@ -80,4 +46,21 @@ export class StylesController implements ReactiveController {
         : prop;
     });
   }
+
+  updateData(data: CssCustomPropertyValue[]) {
+    super.updateData(data);
+
+    if (data.length) {
+      data.forEach((prop) => {
+        const { name, value } = prop;
+        if (value) {
+          if (value === prop.default) {
+            this.el.style.removeProperty(name);
+          } else {
+            this.el.style.setProperty(name, value);
+          }
+        }
+      });
+    }
+  }
 }
diff --git a/packages/api-demo/src/layout.ts b/packages/api-demo/src/layout.ts
@@ -104,9 +104,9 @@ class ApiDemoLayout extends LitElement {
     ].map((arr) => arr.length === 0);
 
     const id = this.vid as number;
-    const log = this.eventsController?.log || [];
-    const slots = this.slotsController?.slots || [];
-    const cssProps = this.stylesController?.css || [];
+    const log = this.eventsController?.data || [];
+    const slots = this.slotsController?.data || [];
+    const cssProps = this.stylesController?.data || [];
     const hideSlots = noSlots || hasTemplate(id, tag, TemplateTypes.SLOT);
 
     return html`
@@ -266,8 +266,7 @@ class ApiDemoLayout extends LitElement {
   private initEvents(component: HTMLElement) {
     const controller = this.eventsController;
     if (controller) {
-      controller.clear();
-      this.removeController(controller);
+      controller.destroy();
     }
 
     this.eventsController = new EventsController(this, component, this.events);
@@ -286,21 +285,21 @@ class ApiDemoLayout extends LitElement {
   private initSlots(component: HTMLElement) {
     const controller = this.slotsController;
     if (controller) {
-      this.removeController(controller);
+      controller.destroy();
     }
 
     this.slotsController = new SlotsController(
       this,
-      this.vid as number,
       component,
+      this.vid as number,
       this.slots
     );
   }
 
   private initStyles(component: HTMLElement) {
     const controller = this.stylesController;
     if (controller) {
-      this.removeController(controller);
+      controller.destroy();
     }
 
     this.stylesController = new StylesController(

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@api-viewer/demo': patch
 +---
++
 +Improve demo controllers, do not reset state