diff --git a/package.json b/package.json index 33dddaf7..0655b87a 100644 --- a/package.json +++ b/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": { diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts index 38968d55..220b36bd 100644 --- a/src/action-handler-directive.ts +++ b/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) { + 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) {} + }, ); diff --git a/src/editor.ts b/src/editor.ts index debd2c51..b81029a0 100644 --- a/src/editor.ts +++ b/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); } } diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index d4f1dfc5..7ee8eece 100644 --- a/src/frigate-hass-card.ts +++ b/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) { + 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); }