Version 0.1.1

VERSION

@@ -1 +1 @@
-0.1.0
+0.1.1

changelog.md

@@ -1,3 +1,7 @@
+## 0.1.1
+- Fix creating custom cards (@Nikfinn99 @thomasloven).
+- Support dividers.
+
 ## 0.1.0
 - Fixes problems with some embedded cards that result in storm of errors in console and non-removed frames.
 

vertical-stack-in-card.js

@@ -15,7 +15,7 @@ class VerticalStackInCard extends HTMLElement {
         this.style.background = "var(--paper-card-background-color)";
 
         const root = this.shadowRoot;
-        while (root.lastChild) {
+        while (root.hasChildNodes()) {
             root.removeChild(root.lastChild);
         }
 
@@ -28,16 +28,84 @@ class VerticalStackInCard extends HTMLElement {
             root.appendChild(title);
         }
 
-        let element;
-        config.cards.forEach(item => {
-            if (item.type.startsWith("custom:")){
-                element = document.createElement(`${item.type.substr("custom:".length)}`);
+        const _createThing = (tag, config) => {
+            const element = document.createElement(tag);
+            try {
+                element.setConfig(config);
+            } catch (err) {
+                console.error(tag, err);
+                return _createError(err.message, config);
+            }
+            return element;
+        };
+
+        const _createError = (error, config) => {
+            return _createThing("hui-error-card", {
+                type: "error",
+                error,
+                config,
+            });
+        };
+
+        const _fireEvent = (ev, detail, entity=null) => {
+            ev = new Event(ev, {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+            });
+            ev.detail = detail || {};
+
+            if (entity) {
+                entity.dispatchEvent(ev);
             } else {
-                element = document.createElement(`hui-${item.type}-card`);
+                document
+                    .querySelector("home-assistant")
+                    .shadowRoot.querySelector("home-assistant-main")
+                    .shadowRoot.querySelector("app-drawer-layout partial-panel-resolver")
+                    .shadowRoot.querySelector("ha-panel-lovelace")
+                    .shadowRoot.querySelector("hui-root")
+                    .shadowRoot.querySelector("ha-app-layout #view")
+                    .firstElementChild
+                    .dispatchEvent(ev);
+            }
+        }
+
+        config.cards.forEach((item) => {
+            let tag = item.type;
+
+            if (tag.startsWith("divider")) {
+                tag = `hui-divider-row`;
+            } else if (tag.startsWith("custom:")) {
+                tag = tag.substr("custom:".length);
+            } else {
+                tag = `hui-${tag}-card`;
+            }
+
+            if (customElements.get(tag)) {
+                const element = _createThing(tag, item);
+                root.appendChild(element);
+                this._refCards.push(element);
+            } else {
+                // If element doesn't exist (yet) create an error
+                const element = _createError(
+                    `Custom element doesn't exist: ${tag}.`,
+                    item
+                );
+                element.style.display = "None";
+
+                const time = setTimeout(() => {
+                    element.style.display = "";
+                }, 2000);
+
+                // Remove error if element is defined later
+                customElements.whenDefined(tag).then(() => {
+                    clearTimeout(time);
+                    _fireEvent("ll-rebuild", {}, element);
+                });
+
+                root.appendChild(element);
+                this._refCards.push(element);
             }
-            element.setConfig(item);
-            root.appendChild(element);
-            this._refCards.push(element);
         });
     }