feat(uip-elements): tech review changes

src/core/state-model.ts

@@ -19,7 +19,8 @@ export class UIPStateModel extends Observable {
 
   public setHtml(markup: string, modifier: UIPPlugin) {
     const root = new DOMParser().parseFromString(markup, 'text/html').body;
-    if (root.innerHTML !== this._html.innerHTML) {
+
+    if (root?.innerHTML !== this.html) {
       this._html = root;
       this._lastModifier = modifier;
       this.fire();

src/preview/preview.ts

@@ -14,8 +14,8 @@ export class UIPPreview extends UIPPlugin {
 
   @bind
   protected _onRootStateChange(): void {
-    this.$inner.innerHTML = this.model!.html;
     this.innerHTML = '';
+    this.$inner.innerHTML = this.model!.html;
     this.appendChild(this.$inner);
   }
 }

src/snippets/snippets.ts

@@ -4,11 +4,11 @@ import {UIPPlugin} from '../core/plugin';
 
 export class UIPSnippets extends UIPPlugin {
   public static is = 'uip-snippets';
-
   public static ACTIVE_CLASS = 'active';
+  public static ITEM_CLASS = 'snippets-list-item';
 
   public get $items(): HTMLElement[] {
-    const items = this.querySelectorAll('.snippets-list-item');
+    const items = this.querySelectorAll(`.${UIPSnippets.ITEM_CLASS}`);
     return Array.from(items) as HTMLElement[];
   }
 
@@ -42,51 +42,71 @@ export class UIPSnippets extends UIPPlugin {
     this.removeEventListener('click', this._onClick);
   }
 
-  protected render(): void {
+  get $inner() {
     const $inner = document.createElement('div');
     CSSClassUtils.add($inner, 'uip-snippets-inner esl-scrollable-content');
 
+    return $inner;
+  }
+
+  get $scroll() {
     const $scroll = document.createElement('esl-scrollbar');
     $scroll.setAttribute('target', '::prev(.uip-snippets-inner)');
 
-    const snippets = this.querySelectorAll('template[uip-snippet]');
-    if (!snippets.length) return;
+    return $scroll;
+  }
+
+  get $snippetsList() {
     const $ul = document.createElement('ul');
     $ul.className = 'snippets-list';
 
+    return $ul;
+  }
+
+  get $snippetsListItem() {
+    const $li = document.createElement('li');
+    $li.classList.add(UIPSnippets.ITEM_CLASS);
+
+    return $li;
+  }
+
+  protected render(): void {
+    const inner = this.$inner;
+    const snippetsList = this.$snippetsList;
+    const snippets = this.querySelectorAll('[uip-snippet]');
+    if (!snippets.length) return;
+
     Array.from(snippets)
       .map((snippet: HTMLTemplateElement) => this.createListItem(snippet))
-      .forEach((item) => item && $ul.appendChild(item));
+      .forEach((item) => item && snippetsList.appendChild(item));
 
     this.$active = this.$active as HTMLElement;
 
-    $inner.appendChild($ul);
-    this.innerHTML = $inner.outerHTML + $scroll.outerHTML;
+    inner.appendChild(snippetsList);
+    this.innerHTML = inner.outerHTML + this.$scroll.outerHTML;
   }
 
   protected createListItem(snippet: HTMLTemplateElement) {
-    const li = document.createElement('li');
-    li.classList.add('snippets-list-item');
+    const listItem = this.$snippetsListItem;
     const label = snippet.getAttribute('label');
     if (!label) return;
-    li.textContent = label;
-    li.appendChild(snippet);
-    return li;
+    listItem.textContent = label;
+    listItem.appendChild(snippet);
+    return listItem;
   }
 
   protected applyActive(): void {
-    const tmpl = this.$active?.querySelector('template[uip-snippet]');
+    const tmpl = this.$active?.querySelector('[uip-snippet]');
     if (!tmpl || !this.model) return;
     this.model.setHtml(tmpl.innerHTML, this);
   }
 
   @bind
   protected _onClick(event: Event) {
     const target = event.target as HTMLElement;
-    if (!target.classList.contains('snippets-list-item')) return;
+    if (!target.classList.contains(UIPSnippets.ITEM_CLASS)) return;
     this.$active = target;
 
     this.applyActive();
   }
 }
-