Upgrade to lit (not lit-element / lit-html)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frigate-hass-card",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Frigate Lovelace Card for Home Assistant",
   "keywords": [
     "frigate",
@@ -18,23 +18,22 @@
     "custom-card-helpers": "^1.7.2",
     "dayjs": "^1.10.6",
     "home-assistant-js-websocket": "^5.11.1",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
-    "zod": "^3.8.1"
+    "lit": "^2.0.0-rc.2",
+    "zod": "^3.8.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.15.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.15.4",
     "@rollup/plugin-json": "^4.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.30.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prettier": "^3.4.1",
-    "npm-check-updates": "^11.8.3",
+    "npm-check-updates": "^11.8.5",
     "prettier": "^2.3.2",
     "rollup": "^2.56.3",
     "rollup-plugin-babel": "^4.4.0",
@@ -44,8 +43,7 @@
     "rollup-plugin-styles": "^3.14.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-uglify": "^6.0.4",
-    "sass": "^1.38.1",
+    "sass": "^1.39.0",
     "typescript": "^4.4.2"
   },
   "scripts": {

src/action-handler-directive.ts

@@ -1,4 +1,5 @@
-import { directive, PropertyPart } from 'lit-html';
+import { noChange } from 'lit';
+import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive';
 
 import {
   ActionHandlerDetail,
@@ -194,7 +195,7 @@ const getActionHandler = (): ActionHandler => {
 
 export const actionHandlerBind = (
   element: ActionHandlerElement,
-  options: ActionHandlerOptions,
+  options?: ActionHandlerOptions,
 ): void => {
   const actionhandler: ActionHandler = getActionHandler();
   if (!actionhandler) {
@@ -204,8 +205,13 @@ export const actionHandlerBind = (
 };
 
 export const actionHandler = directive(
-  (options: ActionHandlerOptions = {}) =>
-    (part: PropertyPart): void => {
-      actionHandlerBind(part.committer.element as ActionHandlerElement, options);
-    },
+  class extends Directive {
+    update(part: AttributePart, [options]: DirectiveParameters<this>) {
+      actionHandlerBind(part.element as ActionHandlerElement, options);
+      return noChange;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    render(_options?: ActionHandlerOptions) {}
+  },
 );

src/editor.ts

@@ -1,14 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  LitElement,
-  html,
-  customElement,
-  property,
-  TemplateResult,
-  CSSResult,
-  state,
-  unsafeCSS,
-} from 'lit-element';
+import { LitElement, html, TemplateResult, CSSResultGroup, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+
 import { HomeAssistant, fireEvent, LovelaceCardEditor } from 'custom-card-helpers';
 import { localize } from './localize/localize';
 import type { FrigateCardConfig } from './types';
@@ -96,7 +89,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
     // You can restrict on domain type
     const cameraEntities = this._getEntities('camera');
-    const binarySensorEntities = this._getEntities('binary_sensor');
 
     const webrtcCameraEntity =
       this._config?.webrtc && (this._config?.webrtc as any).entity
@@ -114,7 +106,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
     const menuModes = {
       '': '',
-      'none': localize('menu_mode.none'),
+      none: localize('menu_mode.none'),
       'hidden-top': localize('menu_mode.hidden-top'),
       'hidden-left': localize('menu_mode.hidden-left'),
       'hidden-bottom': localize('menu_mode.hidden-bottom'),
@@ -444,7 +436,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
   }
 
   // Return compiled CSS styles (thus safe to use with unsafeCSS).
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return unsafeCSS(frigate_card_editor_style);
   }
 }

src/frigate-hass-card.ts

@@ -1,20 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   LitElement,
-  html,
-  customElement,
-  property,
-  CSSResult,
+  CSSResultGroup,
   TemplateResult,
   PropertyValues,
-  state,
+  html,
   unsafeCSS,
-  query,
-} from 'lit-element';
-
-import { NodePart } from 'lit-html';
-import { until } from 'lit-html/directives/until.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+} from 'lit';
+import { customElement, property, query, state, } from 'lit/decorators';
+import { until } from 'lit/directives/until.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import {
   HomeAssistant,
@@ -163,7 +158,7 @@ export class FrigateCardMenu extends LitElement {
   }
 
   // Render the menu.
-  protected render(): TemplateResult | void | ((part: NodePart) => Promise<void>) {
+  protected render(): TemplateResult {
     // If the menu is off, or if it's in hidden mode but there's no button to
     // unhide it, just show nothing.
     if (
@@ -206,7 +201,7 @@ export class FrigateCardMenu extends LitElement {
   }
 
   // Return compiled CSS styles (thus safe to use with unsafeCSS).
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return unsafeCSS(frigate_card_menu_style);
   }
 }
@@ -1030,7 +1025,7 @@ export class FrigateCard extends LitElement {
   }
 
   // Return compiled CSS styles (thus safe to use with unsafeCSS).
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return unsafeCSS(frigate_card_style);
   }