Merge pull request #6 from catdad-experiments/cleaner-rebuild

ll-rebuild triggers a force re-render, lots of cleanup and removing dead code

src/combined-card-editor.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from "lit";
 import { HomeAssistant, LovelaceCardConfig, LovelaceCardEditor, LovelaceConfig } from 'custom-card-helpers';
-import { NAME, EDITOR_NAME, LOG } from './utils';
+import { NAME, EDITOR_NAME, LOG_EDITOR as LOG } from './utils';
 
 class CombinedCardEditor extends LitElement implements LovelaceCardEditor {
   private _hass?: HomeAssistant;

src/combined-card.ts

@@ -1,11 +1,10 @@
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { state, customElement } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
 import { HomeAssistant, LovelaceCardConfig, LovelaceCard } from 'custom-card-helpers';
-import { NAME, EDITOR_NAME, HELPERS, LOG, loadStackEditor } from './utils';
+import { NAME, EDITOR_NAME, HELPERS, LOG, loadStackEditor, sleep } from './utils';
 
 const getRandomId = (): string => Math.random().toString(36).slice(2);
 
-@customElement(NAME)
 class CombinedCard extends LitElement implements LovelaceCard {
   @state() private _config?: LovelaceCardConfig;
   @state() private _helpers?;
@@ -39,33 +38,21 @@ class CombinedCard extends LitElement implements LovelaceCard {
 
     await HELPERS.whenLoaded;
 
-    const that = this;
+    return await (async function recursiveGetSize(that) {
+      const el = that._createCard(that._config as LovelaceCardConfig);
 
-    const size: number = await new Promise(r => {
-      const tryToGetSize = async () => {
-        const el = that._createCard(that._config as LovelaceCardConfig);
+      if (el && el.getCardSize) {
+        const size = await el.getCardSize();
 
-        if (el && el.getCardSize) {
-          return await el.getCardSize();
+        if (typeof size === 'number') {
+          return size;
         }
+      }
 
-        return null;
-      };
-
-      const recurse = () => {
-        tryToGetSize().then((size: null | number) => {
-          if (typeof size === 'number') {
-            return r(size);
-          }
-
-          setTimeout(() => recurse(), 50);
-        });
-      };
-
-      recurse();
-    });
+      await sleep(50);
 
-    return size;
+      return await recursiveGetSize(that);
+    })(this);
   }
 
   public setConfig(config: LovelaceCardConfig): void {
@@ -104,6 +91,18 @@ class CombinedCard extends LitElement implements LovelaceCard {
       this._createCard(this._config as LovelaceCardConfig) :
       'Loading...';
 
+    if (element && (element as LovelaceCard).addEventListener) {
+      (element as LovelaceCard).addEventListener(
+        'll-rebuild',
+        (ev) => {
+          LOG('rebuild event!!!');
+          ev.stopPropagation();
+          that._forceRender = getRandomId();
+        },
+        { once: true },
+      );
+    }
+
     const styles = loaded ? [
       '--ha-card-border-width: 0px',
       '--ha-card-border-color: rgba(0, 0, 0, 0)',
@@ -142,45 +141,9 @@ class CombinedCard extends LitElement implements LovelaceCard {
 
     element.editMode = this._editMode;
 
-    if (element) {
-      element.addEventListener(
-        'll-rebuild',
-        (ev) => {
-          ev.stopPropagation();
-          this._rebuildCard(element, config);
-        },
-        { once: true },
-      );
-    }
-
     return element;
   }
 
-  private _rebuildSelf(): void {
-    const cardElToReplace = this._card as LovelaceCard;
-    const config = this._config as LovelaceCardConfig;
-
-    if (!cardElToReplace || !config) {
-      return;
-    }
-
-    this._rebuildCard(cardElToReplace, config);
-  }
-
-  // TODO is this a mistake? should we just re-render the card instead?
-  // I don't actually remember when this does execute
-  private _rebuildCard(
-    cardElToReplace: LovelaceCard,
-    config: LovelaceCardConfig
-  ): void {
-    LOG('doing a bad manual rebuild');
-
-    const newCardEl = this._createCard(config);
-    if (cardElToReplace.parentElement && newCardEl) {
-      cardElToReplace.parentElement.replaceChild(newCardEl, cardElToReplace);
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       ha-card {
@@ -202,16 +165,10 @@ class CombinedCard extends LitElement implements LovelaceCard {
 
   static getStubConfig() {
     return {
-      type: 'custom:combined-card',
+      type: `custom:${NAME}`,
       cards: []
     };
   }
 }
 
-// Note: this is what adds the card to the UI card selector
-(window as any).customCards = (window as any).customCards || [];
-(window as any).customCards.push({
-  type: NAME,
-  name: "Combined Card",
-  description: "Combine a stack of cards into a single seamless card",
-});
+customElements.define(NAME, CombinedCard);

src/main.ts

@@ -1,2 +1,12 @@
+import { NAME } from './utils';
+
 import "./combined-card";
 import "./combined-card-editor";
+
+// Note: this is what adds the card to the UI card selector
+(window as any).customCards = (window as any).customCards || [];
+(window as any).customCards.push({
+  type: NAME,
+  name: "Combined Card",
+  description: "Combine a stack of cards into a single seamless card",
+});

src/utils.ts

@@ -5,12 +5,21 @@ export type fn = (...args: any[]) => void;
 export const NAME = 'combined-card';
 export const EDITOR_NAME = `${NAME}-editor`;
 
+const pillStyle = (color: string) => `color: ${color}; font-weight: bold; background: #555; border-radius: 2rem`;
+const pillText = (text: string) => `%c ${text} \x1B[m`;
+
 export const LOG = (first: string, ...args: any[]) => {
-  console.log(`%c ${NAME} v${pjson.version} \x1B[m ${first}`, 'color: #bad155; font-weight: bold; background: #555; border-radius: 2rem;', ...args);
+  console.log(`${pillText(`${NAME} v${pjson.version}`)} ${first}`, pillStyle('#bad155'), ...args);
 };
 
+export const LOG_EDITOR = (first: string, ...args: any[]) => {
+  LOG(`${pillText('editor')} ${first}`, pillStyle('#D15798'), ...args);
+}
+
 LOG('loaded');
 
+export const sleep = (time: number): Promise<undefined> => new Promise(resolve => setTimeout(() => resolve(undefined), time));
+
 // Home Assistant really needs to make this an SDK so that we can
 // stop trying to hack it. When they use these helpers, they can
 // use them synchronously, but third-party devs can't.
@@ -39,13 +48,6 @@ export const HELPERS = ((loadCardHelpers, callbacks: fn[]) => {
   });
 
   return {
-    push: (func: fn) => {
-      if (_helpers) {
-        func();
-      } else {
-        callbacks.push(func);
-      }
-    },
     get helpers() {
       return _helpers;
     },