Fix event action in automation editor (#2686)

* Fix event action in automation editor

* Fix webpack resolve

* Update ha-automation-editor.js

config/babel.js

@@ -3,7 +3,7 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
     throw Error("latestBuild not defined for babel loader config");
   }
   return {
-    test: /\.m?js$|\.ts$/,
+    test: /\.m?js$|\.tsx?$/,
     use: {
       loader: "babel-loader",
       options: {
@@ -12,7 +12,12 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
             require("@babel/preset-env").default,
             { modules: false },
           ],
+          [
             require("@babel/preset-typescript").default,
+            {
+              jsxPragma: "h",
+            },
+          ],
         ].filter(Boolean),
         plugins: [
           // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})

config/webpack.js

@@ -2,6 +2,18 @@ const webpack = require("webpack");
 const path = require("path");
 const BabelMinifyPlugin = require("babel-minify-webpack-plugin");
 
+module.exports.resolve = {
+  extensions: [".ts", ".js", ".json", ".tsx"],
+  alias: {
+    react: "preact-compat",
+    "react-dom": "preact-compat",
+    // Not necessary unless you consume a module using `createClass`
+    "create-react-class": "preact-compat/lib/create-react-class",
+    // Not necessary unless you consume a module requiring `react-dom-factories`
+    "react-dom-factories": "preact-compat/lib/react-dom-factories",
+  },
+};
+
 module.exports.plugins = [
   // Ignore moment.js locales
   new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
@@ -17,7 +29,8 @@ module.exports.plugins = [
   ),
 ];
 
-module.exports.minimizer = [
+module.exports.optimization = {
+  minimizer: [
     // Took options from Polymer build tool
     // https://github.com/Polymer/tools/blob/master/packages/build/src/js-transform.ts
     new BabelMinifyPlugin(
@@ -43,4 +56,5 @@ module.exports.minimizer = [
       },
       {}
     ),
-];
+  ],
+};

demo/webpack.config.js

@@ -39,9 +39,7 @@ module.exports = {
       },
     ],
   },
-  optimization: {
-    minimizer: webpackBase.minimizer,
-  },
+  optimization: webpackBase.optimization,
   plugins: [
     new webpack.DefinePlugin({
       __DEV__: false,
@@ -78,17 +76,7 @@ module.exports = {
         importWorkboxFrom: "local",
       }),
   ].filter(Boolean),
-  resolve: {
-    extensions: [".ts", ".js", ".json"],
-    alias: {
-      react: "preact-compat",
-      "react-dom": "preact-compat",
-      // Not necessary unless you consume a module using `createClass`
-      "create-react-class": "preact-compat/lib/create-react-class",
-      // Not necessary unless you consume a module requiring `react-dom-factories`
-      "react-dom-factories": "preact-compat/lib/react-dom-factories",
-    },
-  },
+  resolve: webpackBase.resolve,
   output: {
     filename: "[name].js",
     chunkFilename: chunkFilename,

gallery/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { babelLoaderConfig } = require("../config/babel.js");
-const { minimizer } = require("../config/babel.js");
+const webpackBase = require("../config/babel.js");
 
 const isProd = process.env.NODE_ENV === "production";
 const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
@@ -32,9 +32,7 @@ module.exports = {
       },
     ],
   },
-  optimization: {
-    minimizer,
-  },
+  optimization: webpackBase.optimization,
   plugins: [
     new CopyWebpackPlugin([
       "public",
@@ -63,9 +61,7 @@ module.exports = {
         },
       }),
   ].filter(Boolean),
-  resolve: {
-    extensions: [".ts", ".js", ".json"],
-  },
+  resolve: webpackBase.resolve,
   output: {
     filename: "[name].js",
     chunkFilename: chunkFilename,

src/data/script.ts

@@ -0,0 +1,5 @@
+export interface EventAction {
+  event: string;
+  event_data?: { [key: string]: any };
+  event_data_template?: { [key: string]: any };
+}

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

@@ -0,0 +1,12 @@
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+
+// Force file to be a module to augment global scope.
+export {};
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "paper-input": Partial<PaperInputElement>;
+    }
+  }
+}

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

@@ -3,8 +3,26 @@ import "@polymer/paper-input/paper-input";
 
 import JSONTextArea from "../json_textarea";
 import { onChangeEvent } from "../../../../common/preact/event";
+import { LocalizeFunc } from "../../../../common/translations/localize";
+import { EventAction } from "../../../../data/script";
+
+interface Props {
+  index: number;
+  action: EventAction;
+  localize: LocalizeFunc;
+  onChange: (index: number, action: EventAction) => void;
+}
+
+export default class EventActionForm extends Component<Props> {
+  private onChange: (event: Event) => void;
+
+  static get defaultConfig(): EventAction {
+    return {
+      event: "",
+      event_data: {},
+    };
+  }
 
-export default class EventAction extends Component {
   constructor() {
     super();
 
@@ -12,16 +30,11 @@ export default class EventAction extends Component {
     this.serviceDataChanged = this.serviceDataChanged.bind(this);
   }
 
-  serviceDataChanged(data) {
-    this.props.onChange(
-      this.props.index,
-      Object.assign({}, this.props.action, { data })
-    );
-  }
-
-  render({ action, localize }) {
-    /* eslint-disable camelcase */
-    const { event, event_data } = action;
+  public render() {
+    const {
+      action: { event, event_data },
+      localize,
+    } = this.props;
     return (
       <div>
         <paper-input
@@ -42,9 +55,11 @@ export default class EventAction extends Component {
       </div>
     );
   }
-}
 
-EventAction.defaultConfig = {
-  event: "",
-  event_data: {},
-};
+  private serviceDataChanged(eventData) {
+    this.props.onChange(this.props.index, {
+      ...this.props.action,
+      event_data: eventData,
+    });
+  }
+}

tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "h",
     "target": "es2017",
     "module": "esnext",
     "moduleResolution": "node",

webpack.config.js

@@ -76,9 +76,7 @@ function createConfig(isProdBuild, latestBuild) {
         },
       ],
     },
-    optimization: {
-      minimizer: webpackBase.minimizer,
-    },
+    optimization: webpackBase.optimization,
     plugins: [
       new webpack.DefinePlugin({
         __DEV__: JSON.stringify(!isProdBuild),
@@ -196,17 +194,7 @@ function createConfig(isProdBuild, latestBuild) {
       path: path.resolve(__dirname, buildPath),
       publicPath,
     },
-    resolve: {
-      extensions: [".ts", ".js", ".json"],
-      alias: {
-        react: "preact-compat",
-        "react-dom": "preact-compat",
-        // Not necessary unless you consume a module using `createClass`
-        "create-react-class": "preact-compat/lib/create-react-class",
-        // Not necessary unless you consume a module requiring `react-dom-factories`
-        "react-dom-factories": "preact-compat/lib/react-dom-factories",
-      },
-    },
+    resolve: webpackBase.resolve,
   };
 }