refactor: split styles logic to controller (#96)

Author: web-padawan

src/api-demo-knobs-mixin.ts

@@ -1,11 +1,7 @@
 import { LitElement, PropertyValues } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { Knob } from './lib/knobs.js';
-import {
-  ComponentWithProps,
-  CSSPropertyInfo,
-  PropertyInfo
-} from './lib/types.js';
+import { ComponentWithProps, PropertyInfo } from './lib/types.js';
 import {
   getTemplates,
   hasTemplate,
@@ -133,14 +129,11 @@ export interface ApiDemoKnobsInterface extends HasKnobs {
   tag: string;
   props: PropertyInfo[];
   propKnobs: Knob<PropertyInfo>[];
-  cssProps: CSSPropertyInfo[];
   exclude: string;
   vid?: number;
-  processedCss: CSSPropertyInfo[];
   customKnobs: Knob<PropertyInfo>[];
   knobs: Record<string, Knob>;
   setKnobs(target: HTMLInputElement): void;
-  setCss(target: HTMLInputElement): void;
   initKnobs(component: HTMLElement): void;
 }
 
@@ -153,16 +146,10 @@ export const ApiDemoKnobsMixin = <T extends Constructor<LitElement>>(
     @property({ attribute: false })
     props: PropertyInfo[] = [];
 
-    @property({ attribute: false })
-    cssProps: CSSPropertyInfo[] = [];
-
     @property() exclude = '';
 
     @property({ type: Number }) vid?: number;
 
-    @property({ attribute: false })
-    processedCss!: CSSPropertyInfo[];
-
     @property({ attribute: false })
     customKnobs: Knob<PropertyInfo>[] = [];
 
@@ -176,7 +163,6 @@ export const ApiDemoKnobsMixin = <T extends Constructor<LitElement>>(
       // Reset state if tag changed
       if (props.has('tag')) {
         this.knobs = {};
-        this.processedCss = [];
         this.propKnobs = getKnobs(this.tag, this.props, this.exclude);
         this.customKnobs = getCustomKnobs(this.tag, this.vid);
       }
@@ -196,19 +182,6 @@ export const ApiDemoKnobsMixin = <T extends Constructor<LitElement>>(
       return { knob, custom };
     }
 
-    setCss(target: HTMLInputElement): void {
-      const { value, dataset } = target;
-
-      this.processedCss = this.processedCss.map((prop) => {
-        return prop.name === dataset.name
-          ? {
-              ...prop,
-              value
-            }
-          : prop;
-      });
-    }
-
     setKnobs(target: HTMLInputElement): void {
       const { name, type } = target.dataset;
       let value;
@@ -254,23 +227,6 @@ export const ApiDemoKnobsMixin = <T extends Constructor<LitElement>>(
             this.syncKnob(component, prop);
           });
       }
-
-      if (this.cssProps.length) {
-        const style = getComputedStyle(component);
-
-        this.processedCss = this.cssProps.map((cssProp) => {
-          let value = cssProp.default
-            ? unquote(cssProp.default)
-            : style.getPropertyValue(cssProp.name);
-          const result = cssProp;
-          if (value) {
-            value = value.trim();
-            result.default = value;
-            result.value = value;
-          }
-          return result;
-        });
-      }
     }
 
     syncKnob(component: Element, changed: Knob<PropertyInfo>): void {

src/api-viewer-demo.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators/property.js';
 import { cache } from 'lit/directives/cache.js';
 import { EventsController } from './controllers/events-controller.js';
 import { SlotsController } from './controllers/slots-controller.js';
+import { StylesController } from './controllers/styles-controller.js';
 import { renderEvents } from './lib/demo-events.js';
 import { renderSnippet } from './lib/demo-snippet.js';
 import { renderer } from './lib/renderer.js';
@@ -12,7 +13,7 @@ import {
   renderKnobs,
   slotRenderer
 } from './lib/knobs.js';
-import { EventInfo, SlotInfo } from './lib/types.js';
+import { CSSPropertyInfo, EventInfo, SlotInfo } from './lib/types.js';
 import { hasTemplate, TemplateTypes } from './lib/utils.js';
 import { ApiDemoKnobsMixin } from './api-demo-knobs-mixin.js';
 import './api-viewer-panel.js';
@@ -22,6 +23,9 @@ import './api-viewer-tabs.js';
 class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
   @property() copyBtnText = 'copy';
 
+  @property({ attribute: false })
+  cssProps: CSSPropertyInfo[] = [];
+
   @property({ attribute: false })
   events: EventInfo[] = [];
 
@@ -34,6 +38,8 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
 
   private slotsController!: SlotsController;
 
+  private stylesController!: StylesController;
+
   protected createRenderRoot(): this {
     return this;
   }
@@ -69,16 +75,12 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
     const id = this.vid as number;
     const log = this.eventsController?.log || [];
     const slots = this.slotsController?.slots || [];
+    const cssProps = this.stylesController?.css || [];
     const hideSlots = noSlots || hasTemplate(id, tag, TemplateTypes.SLOT);
 
     return html`
       <div part="demo-output" @rendered=${this.onRendered}>
-        ${renderer({
-          id,
-          tag,
-          knobs: this.knobs,
-          cssProps: this.processedCss
-        })}
+        ${renderer({ id, tag, knobs: this.knobs })}
       </div>
       <api-viewer-tabs part="demo-tabs">
         <api-viewer-tab heading="Source" slot="tab" part="tab"></api-viewer-tab>
@@ -87,7 +89,7 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
             ${this.copyBtnText}
           </button>
           <div part="demo-snippet">
-            ${renderSnippet(id, tag, this.knobs, slots, this.processedCss)}
+            ${renderSnippet(id, tag, this.knobs, slots, cssProps)}
           </div>
         </api-viewer-panel>
         <api-viewer-tab
@@ -126,7 +128,7 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
           <div part="knobs" ?hidden=${noCss}>
             <section part="knobs-column" @change=${this._onCssChanged}>
               ${renderKnobs(
-                this.cssProps,
+                cssProps,
                 'Custom CSS Properties',
                 'css-prop',
                 cssPropRenderer
@@ -207,6 +209,8 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
     this.initEvents(component);
 
     this.initSlots(component);
+
+    this.initStyles(component);
   }
 
   private initEvents(component: HTMLElement) {
@@ -233,8 +237,22 @@ class ApiViewerDemo extends ApiDemoKnobsMixin(LitElement) {
     );
   }
 
+  private initStyles(component: HTMLElement) {
+    const controller = this.stylesController;
+    if (controller) {
+      this.removeController(controller);
+    }
+
+    this.stylesController = new StylesController(
+      this,
+      component,
+      this.cssProps
+    );
+  }
+
   private _onCssChanged(e: CustomEvent): void {
-    this.setCss(e.composedPath()[0] as HTMLInputElement);
+    const target = e.composedPath()[0] as HTMLInputElement;
+    this.stylesController.setValue(target.dataset.name as string, target.value);
   }
 
   private _onPropChanged(e: Event): void {

src/controllers/styles-controller.ts

@@ -0,0 +1,80 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { CSSPropertyInfo } from '../lib/types.js';
+import { unquote } from '../lib/utils.js';
+
+export class StylesController implements ReactiveController {
+  host: HTMLElement & ReactiveControllerHost;
+
+  el: HTMLElement;
+
+  private _css: CSSPropertyInfo[] = [];
+
+  get css(): CSSPropertyInfo[] {
+    return this._css;
+  }
+
+  set css(cssProps: CSSPropertyInfo[]) {
+    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();
+    }
+  }
+
+  constructor(
+    host: HTMLElement & ReactiveControllerHost,
+    component: HTMLElement,
+    cssProps: CSSPropertyInfo[]
+  ) {
+    (this.host = host).addController(this);
+    this.el = component;
+
+    if (cssProps.length) {
+      const style = getComputedStyle(component);
+
+      this.css = cssProps.map((cssProp) => {
+        let value = cssProp.default
+          ? unquote(cssProp.default)
+          : style.getPropertyValue(cssProp.name);
+
+        const result = cssProp;
+        if (value) {
+          value = value.trim();
+          result.default = value;
+          result.value = value;
+        }
+
+        return result;
+      });
+    }
+  }
+
+  hostDisconnected() {
+    this.css = [];
+  }
+
+  setValue(name: string, value: string) {
+    this.css = this.css.map((prop) => {
+      return prop.name === name
+        ? {
+            ...prop,
+            value
+          }
+        : prop;
+    });
+  }
+}

src/lib/renderer.ts

@@ -3,7 +3,6 @@ import { directive, Directive, PartInfo, PartType } from 'lit/directive.js';
 import { templateContent } from 'lit/directives/template-content.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Knob } from './knobs.js';
-import { CSSPropertyInfo } from './types.js';
 import {
   getTemplate,
   getTemplateNode,
@@ -16,7 +15,6 @@ export type ComponentRendererOptions = {
   id: number;
   tag: string;
   knobs: Record<string, Knob>;
-  cssProps: CSSPropertyInfo[];
 };
 
 const { HOST, PREFIX, SLOT, SUFFIX, WRAPPER } = TemplateTypes;
@@ -25,7 +23,7 @@ const updateComponent = (
   component: HTMLElement,
   options: ComponentRendererOptions
 ): void => {
-  const { knobs, cssProps } = options;
+  const { knobs } = options;
 
   // Apply knobs using properties or attributes
   Object.keys(knobs).forEach((key: string) => {
@@ -42,20 +40,6 @@ const updateComponent = (
       (component as any)[key] = value;
     }
   });
-
-  // Apply CSS props
-  if (cssProps.length) {
-    cssProps.forEach((prop) => {
-      const { name, value } = prop;
-      if (value) {
-        if (value === prop.default) {
-          component.style.removeProperty(name);
-        } else {
-          component.style.setProperty(name, value);
-        }
-      }
-    });
-  }
 };
 
 const isDefinedPromise = (action: unknown): action is Promise<unknown> =>