Convert preact to tsx (#3643)

package.json

@@ -8,7 +8,7 @@
   "version": "1.0.0",
   "scripts": {
     "build": "script/build_frontend",
-    "lint": "eslint src hassio/src gallery/src && tslint 'src/**/*.ts' 'hassio/src/**/*.ts' 'gallery/src/**/*.ts' 'cast/src/**/*.ts' 'test-mocha/**/*.ts' && polymer lint && tsc",
+    "lint": "eslint src hassio/src gallery/src && tslint 'src/**/*.ts' 'src/**/*.tsx' 'hassio/src/**/*.ts' 'gallery/src/**/*.ts' 'cast/src/**/*.ts' 'test-mocha/**/*.ts' && polymer lint && tsc",
     "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
     "test": "npm run lint && npm run mocha",
     "docker_build": "sh ./script/docker_run.sh build $npm_package_version",

src/common/preact/event.ts

@@ -1,11 +1,12 @@
-interface OnChangeComponent {
+// interface OnChangeComponent {
-  props: {
+//   props: {
-    index: number;
+//     index: number;
-    onChange(index: number, data: object);
+//     onChange(index: number, data: object);
-  };
+//   };
-}
+// }
 
-export function onChangeEvent(this: OnChangeComponent, prop, ev) {
+// export function onChangeEvent(this: OnChangeComponent, prop, ev) {
+export function onChangeEvent(this: any, prop, ev) {
   const origData = this.props[prop];
 
   if (ev.target.value === origData[ev.target.name]) {

src/panels/config/js/automation.tsx

@@ -8,7 +8,7 @@ import Trigger from "./trigger/index";
 import Condition from "./condition/index";
 import Script from "./script/index";
 
-export default class Automation extends Component {
+export default class Automation extends Component<any> {
   constructor() {
     super();
 
@@ -18,29 +18,26 @@ export default class Automation extends Component {
     this.actionChanged = this.actionChanged.bind(this);
   }
 
-  onChange(ev) {
+  public onChange(ev) {
-    this.props.onChange(
+    this.props.onChange({
-      Object.assign({}, this.props.automation, {
+      ...this.props.automation,
-        [ev.target.name]: ev.target.value,
+      [ev.target.name]: ev.target.value,
-      })
+    });
-    );
   }
 
-  triggerChanged(trigger) {
+  public triggerChanged(trigger) {
-    this.props.onChange(Object.assign({}, this.props.automation, { trigger }));
+    this.props.onChange({ ...this.props.automation, trigger });
   }
 
-  conditionChanged(condition) {
+  public conditionChanged(condition) {
-    this.props.onChange(
+    this.props.onChange({ ...this.props.automation, condition });
-      Object.assign({}, this.props.automation, { condition })
-    );
   }
 
-  actionChanged(action) {
+  public actionChanged(action) {
-    this.props.onChange(Object.assign({}, this.props.automation, { action }));
+    this.props.onChange({ ...this.props.automation, action });
   }
 
-  render({ automation, isWide, hass, localize }) {
+  public render({ automation, isWide, hass, localize }) {
     const { alias, trigger, condition, action } = automation;
 
     return (

src/panels/config/js/condition/condition_edit.tsx

@@ -23,25 +23,26 @@ const TYPES = {
 
 const OPTIONS = Object.keys(TYPES).sort();
 
-export default class ConditionRow extends Component {
+export default class ConditionRow extends Component<any> {
   constructor() {
     super();
 
     this.typeChanged = this.typeChanged.bind(this);
   }
 
-  typeChanged(ev) {
+  public typeChanged(ev) {
     const type = ev.target.selectedItem.attributes.condition.value;
 
     if (type !== this.props.condition.condition) {
-      this.props.onChange(
+      this.props.onChange(this.props.index, {
-        this.props.index,
+        condition: type,
-        Object.assign({ condition: type }, TYPES[type].defaultConfig)
+        ...TYPES[type].defaultConfig,
-      );
+      });
     }
   }
 
-  render({ index, condition, onChange, hass, localize }) {
+  public render({ index, condition, onChange, hass, localize }) {
+    // tslint:disable-next-line: variable-name
     const Comp = TYPES[condition.condition];
     const selected = OPTIONS.indexOf(condition.condition);
 

src/panels/config/js/condition/condition_row.tsx

@@ -7,14 +7,14 @@ import "../../../../components/ha-card";
 
 import ConditionEdit from "./condition_edit";
 
-export default class ConditionRow extends Component {
+export default class ConditionRow extends Component<any> {
   constructor() {
     super();
 
     this.onDelete = this.onDelete.bind(this);
   }
 
-  onDelete() {
+  public onDelete() {
     // eslint-disable-next-line
     if (
       confirm(
@@ -27,7 +27,7 @@ export default class ConditionRow extends Component {
     }
   }
 
-  render(props) {
+  public render(props) {
     return (
       <ha-card>
         <div class="card-content">

src/panels/config/js/condition/device.tsx

@@ -3,32 +3,28 @@ import { h, Component } from "preact";
 import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-condition-picker";
 
-import { onChangeEvent } from "../../../../common/preact/event";
+export default class DeviceCondition extends Component<any, any> {
-
-export default class DeviceCondition extends Component {
   constructor() {
     super();
-    this.onChange = onChangeEvent.bind(this, "condition");
     this.devicePicked = this.devicePicked.bind(this);
     this.deviceConditionPicked = this.deviceConditionPicked.bind(this);
-    this.state.device_id = undefined;
+    this.state = { device_id: undefined };
   }
 
-  devicePicked(ev) {
+  public devicePicked(ev) {
     this.setState({ device_id: ev.target.value });
   }
 
-  deviceConditionPicked(ev) {
+  public deviceConditionPicked(ev) {
     const deviceCondition = ev.target.value;
-    this.props.onChange(
+    this.props.onChange(this.props.index, deviceCondition);
-      this.props.index,
-      (this.props.condition = deviceCondition)
-    );
   }
 
   /* eslint-disable camelcase */
-  render({ condition, hass }, { device_id }) {
+  public render({ condition, hass }, { device_id }) {
-    if (device_id === undefined) device_id = condition.device_id;
+    if (device_id === undefined) {
+      device_id = condition.device_id;
+    }
 
     return (
       <div>
@@ -50,7 +46,7 @@ export default class DeviceCondition extends Component {
   }
 }
 
-DeviceCondition.defaultConfig = {
+(DeviceCondition as any).defaultConfig = {
   device_id: "",
   domain: "",
   entity_id: "",

src/panels/config/js/condition/index.tsx

@@ -4,7 +4,7 @@ import "../../../../components/ha-card";
 
 import ConditionRow from "./condition_row";
 
-export default class Condition extends Component {
+export default class Condition extends Component<any> {
   constructor() {
     super();
 
@@ -12,7 +12,7 @@ export default class Condition extends Component {
     this.conditionChanged = this.conditionChanged.bind(this);
   }
 
-  addCondition() {
+  public addCondition() {
     const condition = this.props.condition.concat({
       condition: "state",
     });
@@ -20,7 +20,7 @@ export default class Condition extends Component {
     this.props.onChange(condition);
   }
 
-  conditionChanged(index, newValue) {
+  public conditionChanged(index, newValue) {
     const condition = this.props.condition.concat();
 
     if (newValue === null) {
@@ -32,7 +32,7 @@ export default class Condition extends Component {
     this.props.onChange(condition);
   }
 
-  render({ condition, hass, localize }) {
+  public render({ condition, hass, localize }) {
     return (
       <div class="triggers">
         {condition.map((cnd, idx) => (

src/panels/config/js/condition/numeric_state.tsx

@@ -5,7 +5,8 @@ import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class NumericStateCondition extends Component {
+export default class NumericStateCondition extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -13,15 +14,15 @@ export default class NumericStateCondition extends Component {
     this.entityPicked = this.entityPicked.bind(this);
   }
 
-  entityPicked(ev) {
+  public entityPicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.condition,
-      Object.assign({}, this.props.condition, { entity_id: ev.target.value })
+      entity_id: ev.target.value,
-    );
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ condition, hass, localize }) {
+  public render({ condition, hass, localize }) {
     const { value_template, entity_id, below, above } = condition;
     return (
       <div>
@@ -61,6 +62,6 @@ export default class NumericStateCondition extends Component {
   }
 }
 
-NumericStateCondition.defaultConfig = {
+(NumericStateCondition as any).defaultConfig = {
   entity_id: "",
 };

src/panels/config/js/condition/state.tsx

@@ -4,7 +4,8 @@ import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class StateCondition extends Component {
+export default class StateCondition extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -12,15 +13,15 @@ export default class StateCondition extends Component {
     this.entityPicked = this.entityPicked.bind(this);
   }
 
-  entityPicked(ev) {
+  public entityPicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.condition,
-      Object.assign({}, this.props.condition, { entity_id: ev.target.value })
+      entity_id: ev.target.value,
-    );
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ condition, hass, localize }) {
+  public render({ condition, hass, localize }) {
     const { entity_id, state } = condition;
     const cndFor = condition.for;
     return (
@@ -45,7 +46,7 @@ export default class StateCondition extends Component {
   }
 }
 
-StateCondition.defaultConfig = {
+(StateCondition as any).defaultConfig = {
   entity_id: "",
   state: "",
 };

src/panels/config/js/condition/sun.tsx

@@ -5,7 +5,11 @@ import "@polymer/paper-radio-group/paper-radio-group";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class SunCondition extends Component {
+export default class SunCondition extends Component<any> {
+  private onChange: (obj: any) => void;
+  private afterPicked: (obj: any) => void;
+  private beforePicked: (obj: any) => void;
+
   constructor() {
     super();
 
@@ -14,8 +18,8 @@ export default class SunCondition extends Component {
     this.beforePicked = this.radioGroupPicked.bind(this, "before");
   }
 
-  radioGroupPicked(key, ev) {
+  public radioGroupPicked(key, ev) {
-    const condition = Object.assign({}, this.props.condition);
+    const condition = { ...this.props.condition };
 
     if (ev.target.selected) {
       condition[key] = ev.target.selected;
@@ -26,7 +30,7 @@ export default class SunCondition extends Component {
     this.props.onChange(this.props.index, condition);
   }
 
-  render({ condition, localize }) {
+  public render({ condition, localize }) {
     /* eslint-disable camelcase */
     const { after, after_offset, before, before_offset } = condition;
     return (
@@ -101,4 +105,4 @@ export default class SunCondition extends Component {
   }
 }
 
-SunCondition.defaultConfig = {};
+(SunCondition as any).defaultConfig = {};

src/panels/config/js/condition/template.tsx

@@ -3,14 +3,15 @@ import "../../../../components/ha-textarea";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class TemplateCondition extends Component {
+export default class TemplateCondition extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
     this.onChange = onChangeEvent.bind(this, "condition");
   }
 
-  render({ condition, localize }) {
+  public render({ condition, localize }) {
     /* eslint-disable camelcase */
     const { value_template } = condition;
     return (
@@ -29,6 +30,6 @@ export default class TemplateCondition extends Component {
   }
 }
 
-TemplateCondition.defaultConfig = {
+(TemplateCondition as any).defaultConfig = {
   value_template: "",
 };

src/panels/config/js/condition/time.tsx

@@ -3,7 +3,8 @@ import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class TimeCondition extends Component {
+export default class TimeCondition extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -11,7 +12,7 @@ export default class TimeCondition extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ condition, localize }) {
+  public render({ condition, localize }) {
     const { after, before } = condition;
     return (
       <div>
@@ -36,4 +37,4 @@ export default class TimeCondition extends Component {
   }
 }
 
-TimeCondition.defaultConfig = {};
+(TimeCondition as any).defaultConfig = {};

src/panels/config/js/condition/zone.tsx

@@ -1,6 +1,5 @@
 import { h, Component } from "preact";
 import "../../../../components/entity/ha-entity-picker";
-import { onChangeEvent } from "../../../../common/preact/event";
 import hasLocation from "../../../../common/entity/has_location";
 import computeStateDomain from "../../../../common/entity/compute_state_domain";
 
@@ -8,31 +7,30 @@ function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
 }
 
-export default class ZoneCondition extends Component {
+export default class ZoneCondition extends Component<any> {
   constructor() {
     super();
 
-    this.onChange = onChangeEvent.bind(this, "condition");
     this.entityPicked = this.entityPicked.bind(this);
     this.zonePicked = this.zonePicked.bind(this);
   }
 
-  entityPicked(ev) {
+  public entityPicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.condition,
-      Object.assign({}, this.props.condition, { entity_id: ev.target.value })
+      entity_id: ev.target.value,
-    );
+    });
   }
 
-  zonePicked(ev) {
+  public zonePicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.condition,
-      Object.assign({}, this.props.condition, { zone: ev.target.value })
+      zone: ev.target.value,
-    );
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ condition, hass, localize }) {
+  public render({ condition, hass, localize }) {
     const { entity_id, zone } = condition;
     return (
       <div>
@@ -61,7 +59,7 @@ export default class ZoneCondition extends Component {
   }
 }
 
-ZoneCondition.defaultConfig = {
+(ZoneCondition as any).defaultConfig = {
   entity_id: "",
   zone: "",
 };

src/panels/config/js/json_textarea.tsx

@@ -1,15 +1,18 @@
 import { h, Component } from "preact";
 import "../../../components/ha-textarea";
 
-export default class JSONTextArea extends Component {
+export default class JSONTextArea extends Component<any, any> {
   constructor(props) {
     super(props);
-    this.state.isValid = true;
+    this.state = {
-    this.state.value = JSON.stringify(props.value || {}, null, 2);
+      isvalid: true,
+      value: JSON.stringify(props.value || {}, null, 2),
+    };
+
     this.onChange = this.onChange.bind(this);
   }
 
-  onChange(ev) {
+  public onChange(ev) {
     const value = ev.target.value;
     let parsed;
     let isValid;
@@ -31,16 +34,18 @@ export default class JSONTextArea extends Component {
     }
   }
 
-  componentWillReceiveProps({ value }) {
+  public componentWillReceiveProps({ value }) {
-    if (value === this.props.value) return;
+    if (value === this.props.value) {
+      return;
+    }
     this.setState({
       value: JSON.stringify(value, null, 2),
       isValid: true,
     });
   }
 
-  render({ label }, { value, isValid }) {
+  public render({ label }, { value, isValid }) {
-    const style = {
+    const style: any = {
       minWidth: 300,
       width: "100%",
     };

src/panels/config/js/preact-types.ts

@@ -7,6 +7,22 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       "paper-input": Partial<PaperInputElement>;
+      "ha-config-section": any;
+      "ha-card": any;
+      "paper-radio-button": any;
+      "paper-radio-group": any;
+      "ha-entity-picker": any;
+      "paper-listbox": any;
+      "paper-item": any;
+      "paper-menu-button": any;
+      "paper-dropdown-menu-light": any;
+      "paper-icon-button": any;
+      "ha-device-picker": any;
+      "ha-device-condition-picker": any;
+      "ha-textarea": any;
+      "ha-service-picker": any;
+      "mwc-button": any;
+      "ha-device-trigger-picker": any;
     }
   }
 }

src/panels/config/js/script.tsx

@@ -6,7 +6,13 @@ import "../../../components/ha-card";
 
 import Script from "./script/index";
 
-export default class ScriptEditor extends Component {
+export default class ScriptEditor extends Component<{
+  onChange: (...args: any[]) => any;
+  script: any;
+  isWide: any;
+  hass: any;
+  localize: any;
+}> {
   constructor() {
     super();
 
@@ -14,19 +20,19 @@ export default class ScriptEditor extends Component {
     this.sequenceChanged = this.sequenceChanged.bind(this);
   }
 
-  onChange(ev) {
+  public onChange(ev) {
-    this.props.onChange(
+    this.props.onChange({
-      Object.assign({}, this.props.script, {
+      ...this.props.script,
-        [ev.target.name]: ev.target.value,
+      [ev.target.name]: ev.target.value,
-      })
+    });
-    );
   }
 
-  sequenceChanged(sequence) {
+  public sequenceChanged(sequence) {
-    this.props.onChange(Object.assign({}, this.props.script, { sequence }));
+    this.props.onChange({ ...this.props.script, sequence });
   }
 
-  render({ script, isWide, hass, localize }) {
+  // @ts-ignore
+  public render({ script, isWide, hass, localize }) {
     const { alias, sequence } = script;
 
     return (

src/panels/config/js/script/action_edit.tsx

@@ -21,6 +21,7 @@ const OPTIONS = Object.keys(TYPES).sort();
 
 function getType(action) {
   const keys = Object.keys(TYPES);
+  // tslint:disable-next-line: prefer-for-of
   for (let i = 0; i < keys.length; i++) {
     if (keys[i] in action) {
       return keys[i];
@@ -29,14 +30,14 @@ function getType(action) {
   return null;
 }
 
-export default class Action extends Component {
+export default class Action extends Component<any> {
   constructor() {
     super();
 
     this.typeChanged = this.typeChanged.bind(this);
   }
 
-  typeChanged(ev) {
+  public typeChanged(ev) {
     const newType = ev.target.selectedItem.attributes.action.value;
     const oldType = getType(this.props.action);
 
@@ -45,9 +46,11 @@ export default class Action extends Component {
     }
   }
 
-  render({ index, action, onChange, hass, localize }) {
+  public render({ index, action, onChange, hass, localize }) {
     const type = getType(action);
+    // tslint:disable-next-line: variable-name
     const Comp = type && TYPES[type];
+    // @ts-ignore
     const selected = OPTIONS.indexOf(type);
 
     if (!Comp) {

src/panels/config/js/script/action_row.tsx

@@ -7,14 +7,14 @@ import "../../../../components/ha-card";
 
 import ActionEdit from "./action_edit";
 
-export default class Action extends Component {
+export default class Action extends Component<any> {
   constructor() {
     super();
 
     this.onDelete = this.onDelete.bind(this);
   }
 
-  onDelete() {
+  public onDelete() {
     // eslint-disable-next-line
     if (
       confirm(
@@ -27,7 +27,7 @@ export default class Action extends Component {
     }
   }
 
-  render(props) {
+  public render(props) {
     return (
       <ha-card>
         <div class="card-content">

src/panels/config/js/script/call_service.tsx

@@ -3,7 +3,7 @@ import "../../../../components/ha-service-picker";
 
 import JSONTextArea from "../json_textarea";
 
-export default class CallServiceAction extends Component {
+export default class CallServiceAction extends Component<any> {
   constructor() {
     super();
 
@@ -11,21 +11,18 @@ export default class CallServiceAction extends Component {
     this.serviceDataChanged = this.serviceDataChanged.bind(this);
   }
 
-  serviceChanged(ev) {
+  public serviceChanged(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.action,
-      Object.assign({}, this.props.action, { service: ev.target.value })
+      service: ev.target.value,
-    );
+    });
   }
 
-  serviceDataChanged(data) {
+  public serviceDataChanged(data) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, { ...this.props.action, data });
-      this.props.index,
-      Object.assign({}, this.props.action, { data })
-    );
   }
 
-  render({ action, hass, localize }) {
+  public render({ action, hass, localize }) {
     const { service, data } = action;
 
     return (
@@ -47,7 +44,7 @@ export default class CallServiceAction extends Component {
   }
 }
 
-CallServiceAction.defaultConfig = {
+(CallServiceAction as any).defaultConfig = {
   alias: "",
   service: "",
   data: {},

src/panels/config/js/script/condition.tsx

@@ -3,9 +3,9 @@ import { h, Component } from "preact";
 import StateCondition from "../condition/state";
 import ConditionEdit from "../condition/condition_edit";
 
-export default class ConditionAction extends Component {
+export default class ConditionAction extends Component<any> {
   // eslint-disable-next-line
-  render({ action, index, onChange, hass, localize }) {
+  public render({ action, index, onChange, hass, localize }) {
     return (
       <ConditionEdit
         condition={action}
@@ -18,7 +18,7 @@ export default class ConditionAction extends Component {
   }
 }
 
-ConditionAction.defaultConfig = Object.assign(
+(ConditionAction as any).defaultConfig = {
-  { condition: "state" },
+  condition: "state",
-  StateCondition.defaultConfig
+  ...(StateCondition as any).defaultConfig,
-);
+};

src/panels/config/js/script/delay.tsx

@@ -2,14 +2,15 @@ import { h, Component } from "preact";
 import "@polymer/paper-input/paper-input";
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class DelayAction extends Component {
+export default class DelayAction extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
     this.onChange = onChangeEvent.bind(this, "action");
   }
 
-  render({ action, localize }) {
+  public render({ action, localize }) {
     const { delay } = action;
     return (
       <div>
@@ -26,6 +27,6 @@ export default class DelayAction extends Component {
   }
 }
 
-DelayAction.defaultConfig = {
+(DelayAction as any).defaultConfig = {
   delay: "",
 };

src/panels/config/js/script/index.tsx

@@ -4,7 +4,7 @@ import "../../../../components/ha-card";
 
 import ActionRow from "./action_row";
 
-export default class Script extends Component {
+export default class Script extends Component<any> {
   constructor() {
     super();
 
@@ -12,7 +12,7 @@ export default class Script extends Component {
     this.actionChanged = this.actionChanged.bind(this);
   }
 
-  addAction() {
+  public addAction() {
     const script = this.props.script.concat({
       service: "",
     });
@@ -20,7 +20,7 @@ export default class Script extends Component {
     this.props.onChange(script);
   }
 
-  actionChanged(index, newValue) {
+  public actionChanged(index, newValue) {
     const script = this.props.script.concat();
 
     if (newValue === null) {
@@ -32,7 +32,7 @@ export default class Script extends Component {
     this.props.onChange(script);
   }
 
-  render({ script, hass, localize }) {
+  public render({ script, hass, localize }) {
     return (
       <div class="script">
         {script.map((act, idx) => (

src/panels/config/js/script/wait.tsx

@@ -5,7 +5,8 @@ import "../../../../components/ha-textarea";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class WaitAction extends Component {
+export default class WaitAction extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -15,16 +16,14 @@ export default class WaitAction extends Component {
 
   // Gets fired on mount. If empty, onChangeEvent removes attribute.
   // Without the attribute this action is no longer matched to this component.
-  onTemplateChange(ev) {
+  public onTemplateChange(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.action,
-      Object.assign({}, this.props.action, {
+      [ev.target.getAttribute("name")]: ev.target.value,
-        [ev.target.getAttribute("name")]: ev.target.value,
+    });
-      })
-    );
   }
 
-  render({ action, localize }) {
+  public render({ action, localize }) {
     /* eslint-disable camelcase */
     const { wait_template, timeout } = action;
     return (
@@ -51,7 +50,7 @@ export default class WaitAction extends Component {
   }
 }
 
-WaitAction.defaultConfig = {
+(WaitAction as any).defaultConfig = {
   wait_template: "",
   timeout: "",
 };

src/panels/config/js/trigger/device.tsx

@@ -4,29 +4,28 @@ import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-trigger-picker";
 import "../../../../components/device/ha-device-automation-picker";
 
-import { onChangeEvent } from "../../../../common/preact/event";
+export default class DeviceTrigger extends Component<any, any> {
-
-export default class DeviceTrigger extends Component {
   constructor() {
     super();
-    this.onChange = onChangeEvent.bind(this, "trigger");
     this.devicePicked = this.devicePicked.bind(this);
     this.deviceTriggerPicked = this.deviceTriggerPicked.bind(this);
-    this.state.device_id = undefined;
+    this.state = { device_id: undefined };
   }
 
-  devicePicked(ev) {
+  public devicePicked(ev) {
     this.setState({ device_id: ev.target.value });
   }
 
-  deviceTriggerPicked(ev) {
+  public deviceTriggerPicked(ev) {
     const deviceTrigger = ev.target.value;
-    this.props.onChange(this.props.index, (this.props.trigger = deviceTrigger));
+    this.props.onChange(this.props.index, deviceTrigger);
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, hass }, { device_id }) {
+  public render({ trigger, hass }, { device_id }) {
-    if (device_id === undefined) device_id = trigger.device_id;
+    if (device_id === undefined) {
+      device_id = trigger.device_id;
+    }
 
     return (
       <div>
@@ -48,7 +47,7 @@ export default class DeviceTrigger extends Component {
   }
 }
 
-DeviceTrigger.defaultConfig = {
+(DeviceTrigger as any).defaultConfig = {
   device_id: "",
   domain: "",
   entity_id: "",

src/panels/config/js/trigger/event.tsx

@@ -4,7 +4,8 @@ import "@polymer/paper-input/paper-input";
 import JSONTextArea from "../json_textarea";
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class EventTrigger extends Component {
+export default class EventTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -13,14 +14,15 @@ export default class EventTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  eventDataChanged(event_data) {
+  // tslint:disable-next-line: variable-name
-    this.props.onChange(
+  public eventDataChanged(event_data) {
-      this.props.index,
+    this.props.onChange(this.props.index, {
-      Object.assign({}, this.props.trigger, { event_data })
+      ...this.props.trigger,
-    );
+      event_data,
+    });
   }
 
-  render({ trigger, localize }) {
+  public render({ trigger, localize }) {
     const { event_type, event_data } = trigger;
     return (
       <div>
@@ -44,7 +46,7 @@ export default class EventTrigger extends Component {
   }
 }
 
-EventTrigger.defaultConfig = {
+(EventTrigger as any).defaultConfig = {
   event_type: "",
   event_data: {},
 };

src/panels/config/js/trigger/geo_location.tsx

@@ -5,7 +5,8 @@ import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class GeolocationTrigger extends Component {
+export default class GeolocationTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -14,22 +15,22 @@ export default class GeolocationTrigger extends Component {
     this.radioGroupPicked = this.radioGroupPicked.bind(this);
   }
 
-  zonePicked(ev) {
+  public zonePicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.trigger,
-      Object.assign({}, this.props.trigger, { zone: ev.target.value })
+      zone: ev.target.value,
-    );
+    });
   }
 
-  radioGroupPicked(ev) {
+  public radioGroupPicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.trigger,
-      Object.assign({}, this.props.trigger, { event: ev.target.selected })
+      event: ev.target.selected,
-    );
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, hass, localize }) {
+  public render({ trigger, hass, localize }) {
     const { source, zone, event } = trigger;
 
     return (
@@ -78,7 +79,7 @@ export default class GeolocationTrigger extends Component {
   }
 }
 
-GeolocationTrigger.defaultConfig = {
+(GeolocationTrigger as any).defaultConfig = {
   source: "",
   zone: "",
   event: "enter",

src/panels/config/js/trigger/homeassistant.tsx

@@ -2,22 +2,22 @@ import { h, Component } from "preact";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 
-export default class HassTrigger extends Component {
+export default class HassTrigger extends Component<any> {
   constructor() {
     super();
 
     this.radioGroupPicked = this.radioGroupPicked.bind(this);
   }
 
-  radioGroupPicked(ev) {
+  public radioGroupPicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.trigger,
-      Object.assign({}, this.props.trigger, { event: ev.target.selected })
+      event: ev.target.selected,
-    );
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, localize }) {
+  public render({ trigger, localize }) {
     const { event } = trigger;
     return (
       <div>
@@ -47,6 +47,6 @@ export default class HassTrigger extends Component {
   }
 }
 
-HassTrigger.defaultConfig = {
+(HassTrigger as any).defaultConfig = {
   event: "start",
 };

src/panels/config/js/trigger/index.tsx

@@ -5,7 +5,7 @@ import "../../../../components/ha-card";
 import TriggerRow from "./trigger_row";
 import StateTrigger from "./state";
 
-export default class Trigger extends Component {
+export default class Trigger extends Component<any> {
   constructor() {
     super();
 
@@ -13,15 +13,16 @@ export default class Trigger extends Component {
     this.triggerChanged = this.triggerChanged.bind(this);
   }
 
-  addTrigger() {
+  public addTrigger() {
-    const trigger = this.props.trigger.concat(
+    const trigger = this.props.trigger.concat({
-      Object.assign({ platform: "state" }, StateTrigger.defaultConfig)
+      platform: "state",
-    );
+      ...(StateTrigger as any).defaultConfig,
+    });
 
     this.props.onChange(trigger);
   }
 
-  triggerChanged(index, newValue) {
+  public triggerChanged(index, newValue) {
     const trigger = this.props.trigger.concat();
 
     if (newValue === null) {
@@ -33,7 +34,7 @@ export default class Trigger extends Component {
     this.props.onChange(trigger);
   }
 
-  render({ trigger, hass, localize }) {
+  public render({ trigger, hass, localize }) {
     return (
       <div class="triggers">
         {trigger.map((trg, idx) => (

src/panels/config/js/trigger/mqtt.tsx

@@ -3,7 +3,8 @@ import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class MQTTTrigger extends Component {
+export default class MQTTTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -11,7 +12,7 @@ export default class MQTTTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, localize }) {
+  public render({ trigger, localize }) {
     const { topic, payload } = trigger;
     return (
       <div>
@@ -36,6 +37,6 @@ export default class MQTTTrigger extends Component {
   }
 }
 
-MQTTTrigger.defaultConfig = {
+(MQTTTrigger as any).defaultConfig = {
   topic: "",
 };

src/panels/config/js/trigger/numeric_state.tsx

@@ -6,7 +6,8 @@ import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class NumericStateTrigger extends Component {
+export default class NumericStateTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -14,15 +15,15 @@ export default class NumericStateTrigger extends Component {
     this.entityPicked = this.entityPicked.bind(this);
   }
 
-  entityPicked(ev) {
+  public entityPicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.trigger,
-      Object.assign({}, this.props.trigger, { entity_id: ev.target.value })
+      entity_id: ev.target.value,
-    );
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, hass, localize }) {
+  public render({ trigger, hass, localize }) {
     const { value_template, entity_id, below, above } = trigger;
     let trgFor = trigger.for;
 
@@ -82,6 +83,6 @@ export default class NumericStateTrigger extends Component {
   }
 }
 
-NumericStateTrigger.defaultConfig = {
+(NumericStateTrigger as any).defaultConfig = {
   entity_id: "",
 };

src/panels/config/js/trigger/state.tsx

@@ -5,7 +5,8 @@ import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class StateTrigger extends Component {
+export default class StateTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -13,15 +14,15 @@ export default class StateTrigger extends Component {
     this.entityPicked = this.entityPicked.bind(this);
   }
 
-  entityPicked(ev) {
+  public entityPicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.trigger,
-      Object.assign({}, this.props.trigger, { entity_id: ev.target.value })
+      entity_id: ev.target.value,
-    );
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, hass, localize }) {
+  public render({ trigger, hass, localize }) {
     const { entity_id, to } = trigger;
     const trgFrom = trigger.from;
     let trgFor = trigger.for;
@@ -73,6 +74,6 @@ export default class StateTrigger extends Component {
   }
 }
 
-StateTrigger.defaultConfig = {
+(StateTrigger as any).defaultConfig = {
   entity_id: "",
 };

src/panels/config/js/trigger/sun.tsx

@@ -6,7 +6,8 @@ import "@polymer/paper-radio-group/paper-radio-group";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class SunTrigger extends Component {
+export default class SunTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -14,15 +15,15 @@ export default class SunTrigger extends Component {
     this.radioGroupPicked = this.radioGroupPicked.bind(this);
   }
 
-  radioGroupPicked(ev) {
+  public radioGroupPicked(ev) {
-    this.props.onChange(
+    this.props.onChange(this.props.index, {
-      this.props.index,
+      ...this.props.trigger,
-      Object.assign({}, this.props.trigger, { event: ev.target.selected })
+      event: ev.target.selected,
-    );
+    });
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, localize }) {
+  public render({ trigger, localize }) {
     const { offset, event } = trigger;
     return (
       <div>
@@ -61,6 +62,6 @@ export default class SunTrigger extends Component {
   }
 }
 
-SunTrigger.defaultConfig = {
+(SunTrigger as any).defaultConfig = {
   event: "sunrise",
 };

src/panels/config/js/trigger/template.tsx

@@ -4,14 +4,15 @@ import "../../../../components/ha-textarea";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class TemplateTrigger extends Component {
+export default class TemplateTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
     this.onChange = onChangeEvent.bind(this, "trigger");
   }
 
-  render({ trigger, localize }) {
+  public render({ trigger, localize }) {
     /* eslint-disable camelcase */
     const { value_template } = trigger;
     return (
@@ -30,6 +31,6 @@ export default class TemplateTrigger extends Component {
   }
 }
 
-TemplateTrigger.defaultConfig = {
+(TemplateTrigger as any).defaultConfig = {
   value_template: "",
 };

src/panels/config/js/trigger/time.tsx

@@ -4,7 +4,8 @@ import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class TimeTrigger extends Component {
+export default class TimeTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -12,7 +13,7 @@ export default class TimeTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, localize }) {
+  public render({ trigger, localize }) {
     const { at } = trigger;
     return (
       <div>
@@ -29,6 +30,6 @@ export default class TimeTrigger extends Component {
   }
 }
 
-TimeTrigger.defaultConfig = {
+(TimeTrigger as any).defaultConfig = {
   at: "",
 };

src/panels/config/js/trigger/time_pattern.tsx

@@ -4,7 +4,8 @@ import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
 
-export default class TimePatternTrigger extends Component {
+export default class TimePatternTrigger extends Component<any> {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
@@ -12,7 +13,7 @@ export default class TimePatternTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, localize }) {
+  public render({ trigger, localize }) {
     const { hours, minutes, seconds } = trigger;
     return (
       <div>
@@ -45,7 +46,7 @@ export default class TimePatternTrigger extends Component {
   }
 }
 
-TimePatternTrigger.defaultConfig = {
+(TimePatternTrigger as any).defaultConfig = {
   hours: "",
   minutes: "",
   seconds: "",

src/panels/config/js/trigger/trigger_edit.tsx

@@ -36,25 +36,15 @@ const TYPES = {
 
 const OPTIONS = Object.keys(TYPES).sort();
 
-export default class TriggerEdit extends Component {
+export default class TriggerEdit extends Component<any> {
   constructor() {
     super();
 
     this.typeChanged = this.typeChanged.bind(this);
   }
 
-  typeChanged(ev) {
+  public render({ index, trigger, onChange, hass, localize }) {
-    const type = ev.target.selectedItem.attributes.platform.value;
+    // tslint:disable-next-line: variable-name
-
-    if (type !== this.props.trigger.platform) {
-      this.props.onChange(
-        this.props.index,
-        Object.assign({ platform: type }, TYPES[type].defaultConfig)
-      );
-    }
-  }
-
-  render({ index, trigger, onChange, hass, localize }) {
     const Comp = TYPES[trigger.platform];
     const selected = OPTIONS.indexOf(trigger.platform);
 
@@ -102,4 +92,15 @@ export default class TriggerEdit extends Component {
       </div>
     );
   }
+
+  private typeChanged(ev) {
+    const type = ev.target.selectedItem.attributes.platform.value;
+
+    if (type !== this.props.trigger.platform) {
+      this.props.onChange(this.props.index, {
+        platform: type,
+        ...TYPES[type].defaultConfig,
+      });
+    }
+  }
 }

src/panels/config/js/trigger/trigger_row.tsx

@@ -7,27 +7,14 @@ import "../../../../components/ha-card";
 
 import TriggerEdit from "./trigger_edit";
 
-export default class TriggerRow extends Component {
+export default class TriggerRow extends Component<any> {
   constructor() {
     super();
 
     this.onDelete = this.onDelete.bind(this);
   }
 
-  onDelete() {
+  public render(props) {
-    // eslint-disable-next-line
-    if (
-      confirm(
-        this.props.localize(
-          "ui.panel.config.automation.editor.triggers.delete_confirm"
-        )
-      )
-    ) {
-      this.props.onChange(this.props.index, null);
-    }
-  }
-
-  render(props) {
     return (
       <ha-card>
         <div class="card-content">
@@ -61,4 +48,17 @@ export default class TriggerRow extends Component {
       </ha-card>
     );
   }
+
+  private onDelete() {
+    // eslint-disable-next-line
+    if (
+      confirm(
+        this.props.localize(
+          "ui.panel.config.automation.editor.triggers.delete_confirm"
+        )
+      )
+    ) {
+      this.props.onChange(this.props.index, null);
+    }
+  }
 }

src/panels/config/js/trigger/webhook.tsx

@@ -2,15 +2,15 @@ import { h, Component } from "preact";
 import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
-
+export default class WebhookTrigger extends Component<any> {
-export default class WebhookTrigger extends Component {
+  private onChange: (obj: any) => void;
   constructor() {
     super();
 
     this.onChange = onChangeEvent.bind(this, "trigger");
   }
 
-  render({ trigger, localize }) {
+  public render({ trigger, localize }) {
     const { webhook_id: webhookId } = trigger;
     return (
       <div>
@@ -27,6 +27,6 @@ export default class WebhookTrigger extends Component {
   }
 }
 
-WebhookTrigger.defaultConfig = {
+(WebhookTrigger as any).defaultConfig = {
   webhook_id: "",
 };

src/panels/config/js/trigger/zone.tsx

@@ -3,7 +3,6 @@ import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import "../../../../components/entity/ha-entity-picker";
 
-import { onChangeEvent } from "../../../../common/preact/event";
 import hasLocation from "../../../../common/entity/has_location";
 import computeStateDomain from "../../../../common/entity/compute_state_domain";
 
@@ -11,39 +10,17 @@ function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
 }
 
-export default class ZoneTrigger extends Component {
+export default class ZoneTrigger extends Component<any> {
   constructor() {
     super();
 
-    this.onChange = onChangeEvent.bind(this, "trigger");
     this.radioGroupPicked = this.radioGroupPicked.bind(this);
     this.entityPicked = this.entityPicked.bind(this);
     this.zonePicked = this.zonePicked.bind(this);
   }
 
-  entityPicked(ev) {
-    this.props.onChange(
-      this.props.index,
-      Object.assign({}, this.props.trigger, { entity_id: ev.target.value })
-    );
-  }
-
-  zonePicked(ev) {
-    this.props.onChange(
-      this.props.index,
-      Object.assign({}, this.props.trigger, { zone: ev.target.value })
-    );
-  }
-
-  radioGroupPicked(ev) {
-    this.props.onChange(
-      this.props.index,
-      Object.assign({}, this.props.trigger, { event: ev.target.selected })
-    );
-  }
-
   /* eslint-disable camelcase */
-  render({ trigger, hass, localize }) {
+  public render({ trigger, hass, localize }) {
     const { entity_id, zone, event } = trigger;
     return (
       <div>
@@ -91,9 +68,30 @@ export default class ZoneTrigger extends Component {
       </div>
     );
   }
+
+  private entityPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      entity_id: ev.target.value,
+    });
+  }
+
+  private zonePicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      zone: ev.target.value,
+    });
+  }
+
+  private radioGroupPicked(ev) {
+    this.props.onChange(this.props.index, {
+      ...this.props.trigger,
+      event: ev.target.selected,
+    });
+  }
 }
 
-ZoneTrigger.defaultConfig = {
+(ZoneTrigger as any).defaultConfig = {
   entity_id: "",
   zone: "",
   event: "enter",