feat: refactor existing Block List component to render via LitElement vs Preact; workaround to double-rendering quirk flagged

Author: sghoweri

packages/components/bolt-block-list/src/block-list.standalone.js

@@ -1,35 +1,37 @@
-import { define, props } from '@bolt/core/utils';
-import { h, withPreact, Fragment, Markup } from '@bolt/core/renderers';
-import styles from './block-list.scss';
+import { BoltElement, customElement, unsafeCSS, html } from '@bolt/element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import blockListStyles from './block-list.scss';
 
-@define
-class BoltBlockList extends withPreact() {
-  static is = 'bolt-block-list';
+@customElement('bolt-block-list')
+class BoltBlockList extends BoltElement {
+  static get properties() {
+    return {
+      items: Array,
+    };
+  }
 
-  static props = {
-    items: props.any,
-  };
+  static get styles() {
+    return [unsafeCSS(blockListStyles)];
+  }
 
-  constructor(self) {
-    self = super(self);
-    this.useShadow = false; // @todo: Get this working with shadowDOM + slots
-    return self;
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback();
+    this.items = this.items || [];
   }
 
   render() {
-    const theItems = this.props.items ? this.props.items.split(',') : [];
-    let finalItems = '';
-    theItems.forEach(value => {
-      finalItems += `<li class="c-bolt-block-list__item">${value}</li>`;
-    });
-    return (
-      <>
-        {this.useShadow && <style>{styles[0][1]}</style>}
-        <ul className="c-bolt-block-list">
-          <Markup markup={finalItems} />
-        </ul>
-      </>
-    );
+    return html`
+      <ul class="c-bolt-block-list">
+        ${this.items && this.items.length >= 1
+          ? this.items.map(
+              item =>
+                html`
+                  <li class="c-bolt-block-list__item">${unsafeHTML(item)}</li>
+                `,
+            )
+          : ''}
+      </ul>
+    `;
   }
 }