Merge pull request #519 from dermotduffy/ref-not-query

Retire use of @query and use ref univerally

src/card.ts

@@ -10,6 +10,7 @@ import { HomeAssistant, LovelaceCardEditor, getLovelace } from 'custom-card-help
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import screenfull from 'screenfull';
 import { throttle } from 'lodash-es';
 import { until } from 'lit/directives/until.js';
@@ -150,14 +151,9 @@ export class FrigateCard extends LitElement {
   @state()
   protected _conditionState?: ConditionState;
 
-  @query('frigate-card-menu')
-  protected _menu!: FrigateCardMenu;
-
-  @query('frigate-card-elements')
-  protected _elements?: FrigateCardElements;
-
-  @query('frigate-card-image')
-  protected _image?: FrigateCardImage;
+  protected _refMenu: Ref<FrigateCardMenu> = createRef();
+  protected _refElements: Ref<FrigateCardElements> = createRef();
+  protected _refImage: Ref<FrigateCardImage> = createRef();
 
   // user interaction timer ("screensaver" functionality, return to default
   // view after user interaction).
@@ -195,14 +191,14 @@ export class FrigateCard extends LitElement {
     // to update, without necessarily re-rendering the entire card (re-rendering
     // is expensive).
     if (this._hass) {
-      if (this._menu) {
-        this._menu.hass = this._hass;
+      if (this._refMenu.value) {
+        this._refMenu.value.hass = this._hass;
       }
-      if (this._elements) {
-        this._elements.hass = this._hass;
+      if (this._refElements.value) {
+        this._refElements.value.hass = this._hass;
       }
-      if (this._image) {
-        this._image.hass = this._hass;
+      if (this._refImage.value) {
+        this._refImage.value.hass = this._hass;
       }
     }
 
@@ -434,7 +430,9 @@ export class FrigateCard extends LitElement {
     if (!this._dynamicMenuButtons.includes(button)) {
       this._dynamicMenuButtons = [...this._dynamicMenuButtons, button];
     }
-    this._menu.buttons = this._getMenuButtons();
+    if (this._refMenu.value) {
+      this._refMenu.value.buttons = this._getMenuButtons();
+    }
   }
 
   /**
@@ -445,7 +443,9 @@ export class FrigateCard extends LitElement {
     this._dynamicMenuButtons = this._dynamicMenuButtons.filter(
       (button) => button != target,
     );
-    this._menu.buttons = this._getMenuButtons();
+    if (this._refMenu.value) {
+      this._refMenu.value.buttons = this._getMenuButtons();
+    }
   }
 
   /**
@@ -888,7 +888,7 @@ export class FrigateCard extends LitElement {
         // This is a rare code path: this would only be used if someone has a
         // menu toggle action configured outside of the menu itself (e.g.
         // picture elements).
-        this._menu.toggleMenu();
+        this._refMenu.value?.toggleMenu();
         break;
       case 'camera_select':
         const camera = frigateCardAction.camera;
@@ -1025,6 +1025,7 @@ export class FrigateCard extends LitElement {
   protected _renderMenu(): TemplateResult | void {
     return html`
       <frigate-card-menu
+        ${ref(this._refMenu)}
         .hass=${this._hass}
         .menuConfig=${this._getConfig().menu}
         .buttons=${this._getMenuButtons()}
@@ -1239,6 +1240,7 @@ export class FrigateCard extends LitElement {
               // be present even if a particular view has an error. Elements
               // need to render after the main views so it can render 'on top'.
               html` <frigate-card-elements
+                ${ref(this._refElements)}
                 .hass=${this._hass}
                 .elements=${this._getConfig().elements}
                 .conditionState=${this._conditionState}
@@ -1285,6 +1287,7 @@ export class FrigateCard extends LitElement {
     return html`
       ${!this._message && this._view.is('image')
         ? html` <frigate-card-image
+            ${ref(this._refImage)}
             .imageConfig=${this._getConfig().image}
             .view=${this._view}
             .hass=${this._hass}

src/components/elements.ts

@@ -1,6 +1,7 @@
 import { LitElement, TemplateResult, html, CSSResultGroup, unsafeCSS } from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
-import { customElement, property, query } from 'lit/decorators.js';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { customElement, property } from 'lit/decorators.js';
 
 import {
   FrigateConditional,
@@ -144,9 +145,6 @@ export class FrigateCardElements extends LitElement {
   @property({ attribute: false })
   protected conditionState?: ConditionState;
 
-  @query('frigate-card-elements-core')
-  _core!: FrigateCardElementsCore;
-
   /**
    * Handle a picture element to be removed from the menu.
    * @param ev The event.
@@ -235,16 +233,14 @@ export class FrigateCardElements extends LitElement {
 export class FrigateCardElementsConditional extends LitElement {
   protected _config?: FrigateConditional;
   protected _hass?: HomeAssistant;
-
-  @query('frigate-card-elements-core')
-  _core?: FrigateCardElementsCore;
+  protected _refCore: Ref<FrigateCardElementsCore> = createRef() ;
 
   /**
    * Set the Home Assistant object.
    */
   set hass(hass: HomeAssistant) {
-    if (this._core) {
-      this._core.hass = hass;
+    if (this._refCore.value) {
+      this._refCore.value.hass = hass;
     }
     this._hass = hass;
   }
@@ -283,6 +279,7 @@ export class FrigateCardElementsConditional extends LitElement {
   protected render(): TemplateResult | void {
     if (fetchStateAndEvaluateCondition(this, this._config.conditions)) {
       return html` <frigate-card-elements-core
+        ${ref(this._refCore)}
         .hass=${this._hass}
         .elements=${this._config.elements}
       >

src/components/image.ts

@@ -7,7 +7,8 @@ import {
   unsafeCSS,
 } from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
 
 import { CachedValueController } from '../cached-value-controller.js';
 import { CameraConfig, ImageViewConfig } from '../types.js';
@@ -40,8 +41,7 @@ export class FrigateCardImage extends LitElement {
   @state()
   protected _imageConfig?: ImageViewConfig;
 
-  @query('img')
-  protected _image?: HTMLImageElement;
+  protected _refImage: Ref<HTMLImageElement> = createRef() ;
 
   protected _cachedValueController?: CachedValueController<string>;
   protected _boundVisibilityHandler = this._visibilityHandler.bind(this);
@@ -144,7 +144,7 @@ export class FrigateCardImage extends LitElement {
    * Handle document visibility changes.
    */
   protected _visibilityHandler(): void {
-    if (!this._image) {
+    if (!this._refImage.value) {
       return;
     }
     if (document.visibilityState === 'hidden') {
@@ -196,8 +196,8 @@ export class FrigateCardImage extends LitElement {
    * Force the img element to the stock image.
    */
   protected _forceStockImage(): void {
-    if (this._image) {
-      this._image.src = defaultImage;
+    if (this._refImage.value) {
+      this._refImage.value.src = defaultImage;
     }
   }
 
@@ -205,6 +205,7 @@ export class FrigateCardImage extends LitElement {
     const src = this._cachedValueController?.value;
     return src
       ? html` <img
+          ${ref(this._refImage)}
           src=${src}
           @load=${(ev) => {
             dispatchMediaShowEvent(this, ev);