refactor: patched preview plugin, minor fixes (#62)

Co-authored-by: Bazukevich Aliaksandr <abazukevich@exadel.net>

src/core/root.ts

@@ -1,3 +1,4 @@
+import {bind} from '@exadel/esl';
 import {ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
 import {EventUtils} from '@exadel/esl/modules/esl-utils/dom/events';
 
@@ -27,6 +28,7 @@ export class UIPRoot extends ESLBaseElement {
     this.removeEventListener('request:change', this._onStateChange);
   }
 
+  @bind
   protected _onStateChange(e: CustomEvent) {
     this._state = e.detail.markup;
     const detail = Object.assign({

src/preview/preview.less

@@ -3,6 +3,7 @@ uip-preview {
   height: max-content;
   width: max-content;
   max-width: 100%;
+
   .uip-preview-inner {
     display: block;
     height: 100vh;

src/preview/preview.ts

@@ -1,16 +1,22 @@
+import {memoize} from '@exadel/esl';
 import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
 import {UIPPlugin} from '../core/plugin';
 
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
 
+  @memoize()
+  get $inner() {
+    const $inner = document.createElement('div');
+    $inner.classList.add('uip-preview-inner');
+    return $inner;
+  }
+
   @bind
   protected handleChange(e: CustomEvent): void {
     const {markup} = e.detail;
-    const $inner = document.createElement('div');
-    $inner.classList.add('uip-preview-inner');
-    $inner.innerHTML = markup;
-    this.innerHTML = $inner.outerHTML;
+    this.$inner.innerHTML = markup;
+    this.innerHTML = '';
+    this.appendChild(this.$inner);
   }
 }
-

src/settings/setting/bool-setting/bool-setting.less

@@ -5,6 +5,7 @@ uip-bool-setting {
 
     input {
       margin-left: 3px;
+      width: 100%;
     }
   }