fix constant re-rendering on hass updates

Author: warmfire540

src/card.ts

@@ -4,30 +4,61 @@ import { addMarginForChips, entitiesThatShouldBeChips } from '@/helpers';
 import { Task } from '@lit/task';
 import type { Config } from '@type/config';
 import type { HomeAssistant } from '@type/homeassistant';
-import { CSSResult, html, LitElement } from 'lit';
+import { CSSResult, html, LitElement, type TemplateResult } from 'lit';
 import { state } from 'lit/decorators.js';
 import { version } from '../package.json';
 import { chipStyles, styles } from './styles';
 const equal = require('fast-deep-equal');
 
+/**
+ * Declaration for the loadCardHelpers function provided by Home Assistant
+ * Used to create and configure card elements
+ */
 declare function loadCardHelpers(): Promise<any>;
 
+/**
+ * Main component class for the Toolbar Status Chips
+ * Displays entity statuses as chips in the Home Assistant toolbar
+ */
 export default class ToolbarStatusChips extends LitElement {
+  /**
+   * Card configuration object
+   * @state Marks this as a reactive property that will trigger updates
+   */
   @state()
   private _config!: Config;
 
+  /**
+   * Collection of entities to be displayed as chips
+   * @state Marks this as a reactive property that will trigger updates
+   */
   @state()
   private _entities!: ChipEntity[];
 
+  /**
+   * Current URL slug extracted from the document URL
+   * Used for automatic area matching when no area is explicitly configured
+   * @state Marks this as a reactive property that will trigger updates
+   */
   @state()
   private _slug: string | undefined;
 
-  // not state
+  /**
+   * Reference to the current Home Assistant instance
+   * Not marked as @state as it's handled differently
+   */
   private _hass!: HomeAssistant;
 
-  // for editor
+  /**
+   * Flag indicating whether the card is in edit mode
+   * Used by the Home Assistant card editor
+   */
   public editMode: boolean = false;
 
+  /**
+   * Creates an instance of ToolbarStatusChips
+   * Extracts the current URL slug and logs version information
+   */
   constructor() {
     super();
     this._slug = document?.URL?.split('?')[0]
@@ -41,7 +72,12 @@ export default class ToolbarStatusChips extends LitElement {
     );
   }
 
-  override render() {
+  /**
+   * Renders the lit element card
+   * Displays chips based on the current entities if available
+   * @returns {TemplateResult} The rendered HTML template
+   */
+  override render(): TemplateResult {
     const styles = chipStyles(this.isEditing);
     return this._entities.length
       ? this._createChipsTask.render({
@@ -54,35 +90,68 @@ export default class ToolbarStatusChips extends LitElement {
       : html``;
   }
 
-  // styles to position the status chips at the top of on the toolbar
+  /**
+   * Defines the CSS styles for the component
+   * Positions the status chips at the top of the toolbar
+   * @returns {CSSResult} The component styles
+   */
   static override get styles(): CSSResult {
     return styles;
   }
 
-  // config property getters
+  /**
+   * Gets the additional label from configuration
+   * Used to filter entities by an additional label
+   * @returns {string | undefined} The configured additional label
+   */
   get additionalLabel() {
     return this._config.additional_label;
   }
 
+  /**
+   * Gets the area ID to filter entities by
+   * Falls back to the URL slug if no area is configured
+   * @returns {string | undefined} The area ID to use for filtering
+   */
   get area() {
     return this._config.area || this._slug;
   }
 
+  /**
+   * Determines if optional entities should be shown
+   * True if explicitly configured or if viewing the status path
+   * @returns {boolean} Whether optional entities should be shown
+   */
   get optional() {
     return (
       this._config.features?.includes('optional') ||
       this.area === this.statusPath
     );
   }
 
+  /**
+   * Gets the solo label from configuration
+   * When set, only entities with this label are shown, ignoring area filtering
+   * @returns {string | undefined} The configured solo label
+   */
   get soloLabel() {
     return this._config.solo_label;
   }
 
+  /**
+   * Gets the status path from configuration
+   * Defaults to 'home' if not configured
+   * @returns {string} The path identifier for the status/home view
+   */
   get statusPath() {
     return this._config.status_path || 'home';
   }
 
+  /**
+   * Determines if the card is currently in editing mode
+   * True if editMode is explicitly set or if parent has 'preview' class
+   * @returns {boolean} Whether the card is being edited
+   */
   get isEditing(): boolean {
     return (
       this.editMode ||
@@ -95,16 +164,22 @@ export default class ToolbarStatusChips extends LitElement {
    * HASS setup
    */
 
-  // The user supplied configuration. Throw an exception and Home Assistant
-  // will render an error card.
+  /**
+   * Sets the card configuration
+   * Only updates if the new config is different from the current one
+   * @param {Config} config - The new card configuration
+   */
   setConfig(config: Config) {
     if (!equal(config, this._config)) {
       this._config = config;
     }
   }
 
-  // Whenever the state changes, a new `hass` object is set. Use this to
-  // update your content.
+  /**
+   * Updates the card when Home Assistant state changes
+   * Filters entities based on labels and area, then creates chips for matching entities
+   * @param {HomeAssistant} hass - The new Home Assistant state
+   */
   set hass(hass: HomeAssistant) {
     // get entities with the status label
     let entities = Object.values(hass.entities).filter((entity) =>
@@ -132,7 +207,6 @@ export default class ToolbarStatusChips extends LitElement {
 
     const chips = entitiesThatShouldBeChips(entities, hass, this.optional);
 
-    // todo - don't set raw objects to properties of this...
     // check if the entities have changed - update the card
     if (!equal(chips, this._entities)) {
       // no need to check states if entities have changed
@@ -142,11 +216,20 @@ export default class ToolbarStatusChips extends LitElement {
     }
   }
 
-  // card configuration
+  /**
+   * Returns the configuration element for the card editor
+   * @returns {HTMLElement} The card editor element
+   */
   static getConfigElement() {
     return document.createElement('toolbar-status-chips-editor');
   }
 
+  /**
+   * Generates a default configuration based on Home Assistant state
+   * Finds the area with the most status-labeled entities
+   * @param {HomeAssistant} hass - The Home Assistant state
+   * @returns {Promise<Config>} The generated configuration
+   */
   public static async getStubConfig(hass: HomeAssistant): Promise<Config> {
     // Get all area IDs and their details
     const areas = Object.entries(hass.areas);
@@ -191,7 +274,10 @@ export default class ToolbarStatusChips extends LitElement {
     };
   }
 
-  // Task handles async work
+  /**
+   * Task that creates the chip cards asynchronously
+   * Uses the Home Assistant card helpers to create a horizontal stack of chips
+   */
   _createChipsTask = new Task(this, {
     task: async () => {
       const helpers = await loadCardHelpers();

src/entity.ts

@@ -36,7 +36,7 @@ export class ChipEntity {
    */
   get isActive(): boolean {
     const validation = this.validateState();
-    return validation !== StateValidation.Pass;
+    return validation === StateValidation.Error;
   }
 
   /**
@@ -78,11 +78,17 @@ export class ChipEntity {
 
   /**
    * Checks if a value is numeric
+   * don't use ES6 syntax or this will be a key and break fast-deep-equal
+   * @param num Value to check
+   * @returns True if the value is numeric, false otherwise
    */
-  private isNumeric = (num: any) =>
-    (typeof num === 'number' ||
-      (typeof num === 'string' && num.trim() !== '')) &&
-    !isNaN(num as number);
+  private isNumeric(num: any): boolean {
+    return (
+      (typeof num === 'number' ||
+        (typeof num === 'string' && num.trim() !== '')) &&
+      !isNaN(num as number)
+    );
+  }
 
   /**
    * Validates a state value against defined thresholds if numeric, or against 'on' state if non-numeric

test/card.spec.ts

@@ -123,9 +123,11 @@ describe('card.ts', () => {
     });
 
     it('should use slug as area when area not provided', () => {
-      stub(window, 'URL').returns({ pathname: 'foo/slug' } as any);
+      const windowStub = stub(window, 'URL');
+      windowStub.returns({ pathname: 'foo/slug' } as any);
       element.setConfig({});
       expect(element.area).to.equal((element as any)._slug);
+      windowStub.restore();
     });
   });
 
@@ -252,7 +254,27 @@ describe('card.ts', () => {
     });
 
     it('should return true when parent has preview class', async () => {
-      // todo - figure this out
+      // Create a mock parent element
+      const mockParentElement = {
+        classList: {
+          contains: (className: string) => className === 'preview',
+        },
+      };
+
+      // Use Object.defineProperty to mock the parentElement property
+      Object.defineProperty(element, 'parentElement', {
+        get: () => mockParentElement,
+        configurable: true, // Allow the property to be redefined later
+      });
+
+      // Verify isEditing returns true
+      expect(element.isEditing).to.be.true;
+
+      // Clean up - restore the original property descriptor
+      Object.defineProperty(element, 'parentElement', {
+        value: null,
+        configurable: true,
+      });
     });
 
     it('should return false when neither condition is met', () => {

test/editor.spec.ts

@@ -69,8 +69,6 @@ describe('editor.ts', () => {
       card.setConfig(testConfig);
 
       const el = await fixture(card.render() as TemplateResult);
-      console.log(el.innerHTML);
-      console.log(el.outerHTML);
       expect(el.outerHTML).to.equal(
         `<div>
         <h4>