Rebuild just the card instead of entire view (#2452)

* Rebuild just the card instead of entire view

* Only rebuild card, not view

src/panels/lovelace/common/create-card-element.ts

@@ -106,7 +106,7 @@ export const createCardElement = (
 
     customElements.whenDefined(tag).then(() => {
       clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
+      fireEvent(element, "ll-rebuild");
     });
 
     return element;

src/panels/lovelace/common/create-hui-element.ts

@@ -72,7 +72,7 @@ export const createHuiElement = (
 
     customElements.whenDefined(tag).then(() => {
       clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
+      fireEvent(element, "ll-rebuild");
     });
 
     return element;

src/panels/lovelace/common/create-row-element.ts

@@ -115,7 +115,7 @@ export const createRowElement = (
 
     customElements.whenDefined(tag).then(() => {
       clearTimeout(timer);
-      fireEvent(element, "rebuild-view");
+      fireEvent(element, "ll-rebuild");
     });
 
     return element;

src/panels/lovelace/hui-root.ts

@@ -50,13 +50,6 @@ import { afterNextRender } from "../../common/util/render-status";
 const CSS_CACHE = {};
 const JS_CACHE = {};
 
-declare global {
-  // tslint:disable-next-line
-  interface HASSDomEvents {
-    "rebuild-view": {};
-  }
-}
-
 let loadedUnusedEntities = false;
 
 class HUIRoot extends hassLocalizeLitMixin(LitElement) {
@@ -298,7 +291,7 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
       </app-header>
       <div id='view' class="${classMap({
         "tabs-hidden": this.lovelace!.config.views.length < 2,
-      })}" @rebuild-view='${this._debouncedConfigChanged}'></div>
+      })}" @ll-rebuild='${this._debouncedConfigChanged}'></div>
     </app-header-layout>
     `;
   }

src/panels/lovelace/hui-view.ts

@@ -14,13 +14,14 @@ import { HaStateLabelBadge } from "../../components/entity/ha-state-label-badge"
 import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
 
 import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";
-import { LovelaceViewConfig } from "../../data/lovelace";
+import { LovelaceViewConfig, LovelaceCardConfig } from "../../data/lovelace";
 import { HomeAssistant } from "../../types";
 
 import { Lovelace, LovelaceCard } from "./types";
 import { createCardElement } from "./common/create-card-element";
 import { computeCardSize } from "./common/compute-card-size";
 import { showEditCardDialog } from "./editor/card-editor/show-edit-card-dialog";
+import { HuiErrorCard } from "./cards/hui-error-card";
 
 let editCodeLoaded = false;
 
@@ -47,7 +48,7 @@ export class HUIView extends hassLocalizeLitMixin(LitElement) {
   public lovelace?: Lovelace;
   public columns?: number;
   public index?: number;
-  private _cards: LovelaceCard[];
+  private _cards: Array<LovelaceCard | HuiErrorCard>;
   private _badges: Array<{ element: HaStateLabelBadge; entityId: string }>;
 
   static get properties(): PropertyDeclarations {
@@ -239,8 +240,7 @@ export class HUIView extends hassLocalizeLitMixin(LitElement) {
     const elements: LovelaceCard[] = [];
     const elementsToAppend: HTMLElement[] = [];
     config.cards.forEach((cardConfig, cardIndex) => {
-      const element = createCardElement(cardConfig) as LovelaceCard;
+      const element = this._createCardElement(cardConfig);
-      element.hass = this.hass;
       elements.push(element);
 
       if (!this.lovelace!.editMode) {
@@ -287,6 +287,32 @@ export class HUIView extends hassLocalizeLitMixin(LitElement) {
       applyThemesOnElement(root, this.hass!.themes, config.theme);
     }
   }
+
+  private _createCardElement(cardConfig: LovelaceCardConfig) {
+    const element = createCardElement(cardConfig) as LovelaceCard;
+    element.hass = this.hass;
+    element.addEventListener(
+      "ll-rebuild",
+      (ev) => {
+        // In edit mode let it go to hui-root and rebuild whole view.
+        if (!this.lovelace!.editMode) {
+          ev.stopPropagation();
+          this._rebuildCard(element, cardConfig);
+        }
+      },
+      { once: true }
+    );
+    return element;
+  }
+
+  private _rebuildCard(
+    element: LovelaceCard,
+    config: LovelaceCardConfig
+  ): void {
+    const newCard = this._createCardElement(config);
+    element.parentElement!.replaceChild(newCard, element);
+    this._cards = this._cards.splice(this._cards.indexOf(element), 1, newCard);
+  }
 }
 
 declare global {

src/panels/lovelace/types.ts

@@ -1,6 +1,13 @@
 import { HomeAssistant } from "../../types";
 import { LovelaceCardConfig, LovelaceConfig } from "../../data/lovelace";
 
+declare global {
+  // tslint:disable-next-line
+  interface HASSDomEvents {
+    "ll-rebuild": {};
+  }
+}
+
 export interface Lovelace {
   config: LovelaceConfig;
   editMode: boolean;