chore: remove dependency with custom-card-helpers

RomRider · RomRider · commit 331ed6ad53a4 · 2023-07-24T07:50:43.000Z
diff --git a/package.json b/package.json
@@ -68,7 +68,6 @@
   "dependencies": {
     "@ctrl/tinycolor": "^3.1.6",
     "@material/mwc-ripple": "^0.19.1",
-    "custom-card-helpers": "^1.9.0",
     "fast-copy": "^2.1.0",
     "home-assistant-js-websocket": "^8.2.0",
     "lit": "^2.7.6",
diff --git a/src/action-handler.ts b/src/action-handler.ts
@@ -2,7 +2,7 @@ import { noChange } from 'lit-html';
 // import '@material/mwc-ripple';
 // tslint:disable-next-line
 import { Ripple } from '@material/mwc-ripple';
-import { myFireEvent } from './my-fire-event';
+import { fireEvent } from './common/fire-event';
 import { deepEqual } from './deep-equal';
 import { AttributePart, Directive, DirectiveParameters, directive } from 'lit-html/directive';
 
@@ -154,7 +154,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
           if (options.repeat && !this.isRepeating) {
             this.isRepeating = true;
             this.repeatTimeout = setInterval(() => {
-              myFireEvent(element, 'action', { action: 'hold' });
+              fireEvent(element, 'action', { action: 'hold' });
             }, options.repeat);
           }
         }, this.holdTime);
@@ -186,21 +186,21 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       }
       if (options.hasHold && this.held) {
         if (!options.repeat) {
-          myFireEvent(target, 'action', { action: 'hold' });
+          fireEvent(target, 'action', { action: 'hold' });
         }
       } else if (options.hasDoubleClick) {
         if ((ev.type === 'click' && (ev as MouseEvent).detail < 2) || !this.dblClickTimeout) {
           this.dblClickTimeout = window.setTimeout(() => {
             this.dblClickTimeout = undefined;
-            myFireEvent(target, 'action', { action: 'tap' });
+            fireEvent(target, 'action', { action: 'tap' });
           }, 250);
         } else {
           clearTimeout(this.dblClickTimeout);
           this.dblClickTimeout = undefined;
-          myFireEvent(target, 'action', { action: 'double_tap' });
+          fireEvent(target, 'action', { action: 'double_tap' });
         }
       } else {
-        myFireEvent(target, 'action', { action: 'tap' });
+        fireEvent(target, 'action', { action: 'tap' });
       }
     };
 
diff --git a/src/at_least_version.ts b/src/at_least_version.ts
diff --git a/src/button-card.ts b/src/button-card.ts
@@ -9,7 +9,6 @@ import { styleMap, StyleInfo } from 'lit-html/directives/style-map';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { classMap, ClassInfo } from 'lit-html/directives/class-map';
 import { HassEntity } from 'home-assistant-js-websocket';
-import { timerTimeRemaining, createThing, DOMAINS_TOGGLE, computeStateDomain } from 'custom-card-helpers';
 import { LovelaceCard } from './types/lovelace';
 import {
   ButtonCardConfig,
@@ -36,17 +35,20 @@ import {
   getLovelaceCast,
   secondsToDuration,
   durationToSeconds,
+  computeStateDomain,
 } from './helpers';
+import { createThing } from './common/create-thing';
 import { styles } from './styles';
-import { computeStateDisplay } from './compute_state_display';
+import { computeStateDisplay } from './common/compute_state_display';
 import copy from 'fast-copy';
 import * as pjson from '../package.json';
 import { deepEqual } from './deep-equal';
-import { stateColorCss } from './state_color';
-import { ON } from './common/const';
+import { stateColorCss } from './common/state_color';
+import { ON, DOMAINS_TOGGLE } from './common/const';
 import { handleAction } from './handle-action';
-import { myFireEvent } from './my-fire-event';
+import { fireEvent } from './common/fire-event';
 import { HomeAssistant } from './types/homeassistant';
+import { timerTimeRemaining } from './common/timer';
 
 let helpers = (window as any).cardHelpers;
 const helperPromise = new Promise<void>(async (resolve) => {
@@ -145,7 +147,7 @@ class ButtonCard extends LitElement {
     else {
       const element = createThing(config);
       helperPromise.then(() => {
-        myFireEvent(element, 'll-rebuild', {});
+        fireEvent(element, 'll-rebuild', {});
       });
       return element;
     }
diff --git a/src/common/compute_state_display.ts b/src/common/compute_state_display.ts
@@ -1,14 +1,19 @@
 import { HassConfig, HassEntity } from 'home-assistant-js-websocket';
-import { LocalizeFunc } from 'custom-card-helpers';
-import { computeDomain, isNumericFromAttributes } from './helpers';
-import { formatNumber, getNumberFormatOptions, blankBeforePercent } from './common/format_number';
-import { EntityRegistryDisplayEntry, FrontendLocaleData, HomeAssistant, TimeZone } from './types/homeassistant';
-import { UNIT_TO_MILLISECOND_CONVERT, formatDuration } from './common/duration';
-import { formatDateTime } from './common/format_date_time';
-import { formatDate } from './common/format_date';
-import { formatTime } from './common/format_time';
-import { UPDATE_SUPPORT_PROGRESS, updateIsInstallingFromAttributes } from './common/update';
-import { supportsFeatureFromAttributes } from './common/supports-features';
+import { computeDomain, isNumericFromAttributes } from '../helpers';
+import { formatNumber, getNumberFormatOptions, blankBeforePercent } from './format_number';
+import {
+  LocalizeFunc,
+  EntityRegistryDisplayEntry,
+  FrontendLocaleData,
+  HomeAssistant,
+  TimeZone,
+} from '../types/homeassistant';
+import { UNIT_TO_MILLISECOND_CONVERT, formatDuration } from './duration';
+import { formatDateTime } from './format_date_time';
+import { formatDate } from './format_date';
+import { formatTime } from './format_time';
+import { UPDATE_SUPPORT_PROGRESS, updateIsInstallingFromAttributes } from './update';
+import { supportsFeatureFromAttributes } from './supports-features';
 
 const UNAVAILABLE = 'unavailable';
 const UNKNOWN = 'unknown';
diff --git a/src/common/const.ts b/src/common/const.ts
@@ -1,10 +1,10 @@
 export const UNAVAILABLE = 'unavailable';
 export const BINARY_STATE_ON = 'on';
 export const BINARY_STATE_OFF = 'off';
-const arrayLiteralIncludes = <T extends readonly unknown[]>(array: T) => (
-  searchElement: unknown,
-  fromIndex?: number,
-): searchElement is T[number] => array.includes(searchElement as T[number], fromIndex);
+const arrayLiteralIncludes =
+  <T extends readonly unknown[]>(array: T) =>
+  (searchElement: unknown, fromIndex?: number): searchElement is T[number] =>
+    array.includes(searchElement as T[number], fromIndex);
 
 export const UNKNOWN = 'unknown';
 export const ON = 'on';
@@ -15,3 +15,5 @@ export const OFF_STATES = [UNAVAILABLE, UNKNOWN, OFF] as const;
 
 export const isUnavailableState = arrayLiteralIncludes(UNAVAILABLE_STATES);
 export const isOffState = arrayLiteralIncludes(OFF_STATES);
+
+export const DOMAINS_TOGGLE = new Set(['fan', 'input_boolean', 'light', 'switch', 'group', 'automation', 'humidifier']);
diff --git a/src/common/create-thing.ts b/src/common/create-thing.ts
@@ -0,0 +1,96 @@
+import { fireEvent } from './fire-event';
+
+const SPECIAL_TYPES = new Set(['call-service', 'divider', 'section', 'weblink', 'cast', 'select']);
+const DOMAIN_TO_ELEMENT_TYPE = {
+  alert: 'toggle',
+  automation: 'toggle',
+  climate: 'climate',
+  cover: 'cover',
+  fan: 'toggle',
+  group: 'group',
+  input_boolean: 'toggle',
+  input_number: 'input-number',
+  input_select: 'input-select',
+  input_text: 'input-text',
+  light: 'toggle',
+  lock: 'lock',
+  media_player: 'media-player',
+  remote: 'toggle',
+  scene: 'scene',
+  script: 'script',
+  sensor: 'sensor',
+  timer: 'timer',
+  switch: 'toggle',
+  vacuum: 'toggle',
+  // Temporary. Once climate is rewritten,
+  // water heater should get it's own row.
+  water_heater: 'climate',
+  input_datetime: 'input-datetime',
+};
+
+declare global {
+  // eslint-disable-next-line
+  interface HASSDomEvents {
+    'll-rebuild': Record<string, unknown>;
+    'll-badge-rebuild': Record<string, unknown>;
+  }
+}
+
+export const createThing = (cardConfig, isRow = false) => {
+  const _createError = (error, config) => {
+    return _createThing('hui-error-card', {
+      type: 'error',
+      error,
+      config,
+    });
+  };
+
+  const _createThing = (tag, config) => {
+    const element = window.document.createElement(tag);
+    try {
+      // Preventing an error-card infinity loop: https://github.com/custom-cards/custom-card-helpers/issues/54
+      if (!element.setConfig) return;
+      element.setConfig(config);
+    } catch (err) {
+      console.error(tag, err);
+      return _createError((err as Error).message, config);
+    }
+    return element;
+  };
+
+  if (!cardConfig || typeof cardConfig !== 'object' || (!isRow && !cardConfig.type))
+    return _createError('No type defined', cardConfig);
+  let tag = cardConfig.type;
+  if (tag && tag.startsWith('custom:')) {
+    tag = tag.substr('custom:'.length);
+  } else if (isRow) {
+    if (SPECIAL_TYPES.has(tag)) {
+      tag = `hui-${tag}-row`;
+    } else {
+      if (!cardConfig.entity) {
+        return _createError('Invalid config given.', cardConfig);
+      }
+
+      const domain = cardConfig.entity.split('.', 1)[0];
+      tag = `hui-${DOMAIN_TO_ELEMENT_TYPE[domain] || 'text'}-entity-row`;
+    }
+  } else {
+    tag = `hui-${tag}-card`;
+  }
+
+  if (customElements.get(tag)) return _createThing(tag, cardConfig);
+
+  // If element doesn't exist (yet) create an error
+  const element = _createError(`Custom element doesn't exist: ${cardConfig.type}.`, cardConfig);
+  element.style.display = 'None';
+  const timer = setTimeout(() => {
+    element.style.display = '';
+  }, 2000);
+  // Remove error if element is defined later
+  customElements.whenDefined(cardConfig.type).then(() => {
+    clearTimeout(timer);
+    fireEvent(element, 'll-rebuild', {}, element);
+  });
+
+  return element;
+};
diff --git a/src/common/fire-event.ts b/src/common/fire-event.ts
@@ -55,7 +55,7 @@ export interface HASSDomEvent<T> extends Event {
  * @return {Event} The new event that was fired.
  */
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const myFireEvent = <HassEvent extends ValidHassDomEvent>(
+export const fireEvent = <HassEvent extends ValidHassDomEvent>(
   node: HTMLElement | Window,
   type: HassEvent,
   detail?: HASSDomEvents[HassEvent],
diff --git a/src/common/state_color.ts b/src/common/state_color.ts
@@ -1,11 +1,11 @@
 /** Return an color representing a state. */
 import { HassEntity } from 'home-assistant-js-websocket';
-import { UNAVAILABLE } from './common/const';
-import { computeGroupDomain, GroupEntity } from './helpers';
-import { computeCssVariable } from './helpers';
-import { computeDomain, slugify } from './helpers';
-import { batteryStateColorProperty } from './helpers';
-import { stateActive } from './helpers';
+import { UNAVAILABLE } from './const';
+import { computeGroupDomain, GroupEntity } from '../helpers';
+import { computeCssVariable } from '../helpers';
+import { computeDomain, slugify } from '../helpers';
+import { batteryStateColorProperty } from '../helpers';
+import { stateActive } from '../helpers';
 
 const STATE_COLORED_DOMAIN = new Set([
   'alarm_control_panel',
diff --git a/src/common/timer.ts b/src/common/timer.ts
@@ -0,0 +1,17 @@
+import { HassEntity } from 'home-assistant-js-websocket';
+import { durationToSeconds } from '../helpers';
+
+export const timerTimeRemaining = (stateObj: HassEntity): undefined | number => {
+  if (!stateObj.attributes.remaining) {
+    return undefined;
+  }
+  let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
+
+  if (stateObj.state === 'active') {
+    const now = new Date().getTime();
+    const madeActive = new Date(stateObj.last_changed).getTime();
+    timeRemaining = Math.max(timeRemaining - (now - madeActive) / 1000, 0);
+  }
+
+  return timeRemaining;
+};
diff --git a/src/handle-action.ts b/src/handle-action.ts
@@ -1,4 +1,4 @@
-import { myFireEvent } from './my-fire-event';
+import { fireEvent } from './common/fire-event';
 import { ActionConfig } from './types/types';
 import { HomeAssistant } from './types/homeassistant';
 
@@ -16,7 +16,7 @@ export const handleAction = async (
   config: ActionConfigParams,
   action: string,
 ): Promise<void> => {
-  myFireEvent(node, 'hass-action', { config, action });
+  fireEvent(node, 'hass-action', { config, action });
 };
 
 type ActionParams = { config: ActionConfigParams; action: string };
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -1,10 +1,16 @@
 import { PropertyValues } from 'lit';
 import tinycolor, { TinyColor } from '@ctrl/tinycolor';
-import { HomeAssistant, LovelaceConfig } from 'custom-card-helpers';
+import { HomeAssistant } from './types/homeassistant';
+import { LovelaceConfig } from './types/lovelace';
 import { StateConfig } from './types/types';
 import { HassEntity, HassEntityAttributeBase, HassEntityBase } from 'home-assistant-js-websocket';
 import { OFF, UNAVAILABLE, isUnavailableState } from './common/const';
 
+export const atLeastVersion = (version: string, major: number, minor: number): boolean => {
+  const [haMajor, haMinor] = version.split('.', 2);
+  return Number(haMajor) > major || (Number(haMajor) === major && Number(haMinor) >= minor);
+};
+
 export function computeDomain(entityId: string): string {
   return entityId.substr(0, entityId.indexOf('.'));
 }
@@ -13,6 +19,8 @@ export function computeEntity(entityId: string): string {
   return entityId.substr(entityId.indexOf('.') + 1);
 }
 
+export const computeStateDomain = (stateObj: HassEntity) => computeDomain(stateObj.entity_id);
+
 export function getColorFromVariable(elt: Element, color: string): string {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const colorArray: string[] = [];
diff --git a/yarn.lock b/yarn.lock
