Upgrade to lit

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boilerplate-card",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Lovelace boilerplate-card",
   "keywords": [
     "home-assistant",
@@ -15,23 +15,22 @@
   "author": "Ian Richardson <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "custom-card-helpers": "^1.6.6",
+    "custom-card-helpers": "^1.7.2",
     "home-assistant-js-websocket": "^4.5.0",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0"
+    "lit": "^2.0.0-rc.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
     "@rollup/plugin-json": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "prettier": "^1.19.1",
     "rollup": "^1.32.1",
     "rollup-plugin-babel": "^4.4.0",
@@ -41,7 +40,7 @@
     "rollup-plugin-terser": "^5.3.1",
     "rollup-plugin-typescript2": "^0.24.3",
     "rollup-plugin-uglify": "^6.0.4",
-    "typescript": "^3.9.7"
+    "typescript": "^3.9.10"
   },
   "scripts": {
     "start": "rollup -c rollup.config.dev.js --watch",

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, ActionHandlerOptions } from 'custom-card-helpers/dist/types';
 import { fireEvent } from 'custom-card-helpers';
@@ -176,14 +177,22 @@ const getActionHandler = (): ActionHandler => {
   return actionhandler as ActionHandler;
 };
 
-export const actionHandlerBind = (element: ActionHandlerElement, options: ActionHandlerOptions): void => {
+export const actionHandlerBind = (element: ActionHandlerElement, options?: ActionHandlerOptions): void => {
   const actionhandler: ActionHandler = getActionHandler();
   if (!actionhandler) {
     return;
   }
   actionhandler.bind(element, options);
 };
 
-export const actionHandler = directive((options: ActionHandlerOptions = {}) => (part: PropertyPart): void => {
-  actionHandlerBind(part.committer.element as ActionHandlerElement, options);
-});
+export const actionHandler = directive(
+  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
+    render(_options?: ActionHandlerOptions) {}
+  },
+);

src/boilerplate-card.ts

@@ -2,14 +2,12 @@
 import {
   LitElement,
   html,
-  customElement,
-  property,
-  CSSResult,
   TemplateResult,
   css,
   PropertyValues,
-  internalProperty,
-} from 'lit-element';
+  CSSResultGroup,
+} from 'lit';
+import { customElement, property, state } from "lit/decorators";
 import {
   HomeAssistant,
   hasConfigOrEntityChanged,
@@ -56,7 +54,8 @@ export class BoilerplateCard extends LitElement {
   // TODO Add any properities that should cause your element to re-render here
   // https://lit-element.polymer-project.org/guide/properties
   @property({ attribute: false }) public hass!: HomeAssistant;
-  @internalProperty() private config!: BoilerplateCardConfig;
+
+  @state() private config!: BoilerplateCardConfig;
 
   // https://lit-element.polymer-project.org/guide/properties#accessors-custom
   public setConfig(config: BoilerplateCardConfig): void {
@@ -135,7 +134,7 @@ export class BoilerplateCard extends LitElement {
   }
 
   // https://lit-element.polymer-project.org/guide/styles
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css``;
   }
 }

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.3.2';
+export const CARD_VERSION = '1.4.0';

src/editor.ts

@@ -1,18 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/camelcase */
-import {
-  LitElement,
-  html,
-  customElement,
-  property,
-  TemplateResult,
-  CSSResult,
-  css,
-  internalProperty,
-} from 'lit-element';
+import { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';
 import { HomeAssistant, fireEvent, LovelaceCardEditor, ActionConfig } from 'custom-card-helpers';
 
 import { BoilerplateCardConfig } from './types';
+import { customElement, property, state } from 'lit/decorators';
 
 const options = {
   required: {
@@ -58,9 +50,9 @@ const options = {
 @customElement('boilerplate-card-editor')
 export class BoilerplateCardEditor extends LitElement implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
-  @internalProperty() private _config?: BoilerplateCardConfig;
-  @internalProperty() private _toggle?: boolean;
-  @internalProperty() private _helpers?: any;
+  @state() private _config?: BoilerplateCardConfig;
+  @state() private _toggle?: boolean;
+  @state() private _helpers?: any;
   private _initialized = false;
 
   public setConfig(config: BoilerplateCardConfig): void {
@@ -275,7 +267,7 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
     }
     if (target.configValue) {
       if (target.value === '') {
-        const tmpConfig = {...this._config};
+        const tmpConfig = { ...this._config };
         delete tmpConfig[target.configValue];
         this._config = tmpConfig;
       } else {
@@ -288,7 +280,7 @@ export class BoilerplateCardEditor extends LitElement implements LovelaceCardEdi
     fireEvent(this, 'config-changed', { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .option {
         padding: 4px 0px;