From 504e4987b7a4fe96d8459814ed8dc42f6a217a67 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 6 Feb 2019 11:13:00 -0800 Subject: [PATCH] Fix event action in automation editor (#2686) * Fix event action in automation editor * Fix webpack resolve * Update ha-automation-editor.js --- config/babel.js | 9 ++- config/webpack.js | 60 ++++++++++++------- demo/webpack.config.js | 16 +---- gallery/webpack.config.js | 10 +--- src/data/script.ts | 5 ++ src/panels/config/js/preact-types.ts | 12 ++++ .../config/js/script/{event.js => event.tsx} | 47 ++++++++++----- tsconfig.json | 2 + webpack.config.js | 16 +---- 9 files changed, 101 insertions(+), 76 deletions(-) create mode 100644 src/data/script.ts create mode 100644 src/panels/config/js/preact-types.ts rename src/panels/config/js/script/{event.js => event.tsx} (53%) diff --git a/config/babel.js b/config/babel.js index 1c073245dc..3a9fbe452c 100644 --- a/config/babel.js +++ b/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, + [ + require("@babel/preset-typescript").default, + { + jsxPragma: "h", + }, + ], ].filter(Boolean), plugins: [ // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2}) diff --git a/config/webpack.js b/config/webpack.js index a5a6384f00..118fb0e23f 100644 --- a/config/webpack.js +++ b/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,30 +29,32 @@ module.exports.plugins = [ ), ]; -module.exports.minimizer = [ - // Took options from Polymer build tool - // https://github.com/Polymer/tools/blob/master/packages/build/src/js-transform.ts - new BabelMinifyPlugin( - { - // Disable the minify-constant-folding plugin because it has a bug relating - // to invalid substitution of constant values into export specifiers: - // https://github.com/babel/minify/issues/820 - evaluate: false, +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( + { + // Disable the minify-constant-folding plugin because it has a bug relating + // to invalid substitution of constant values into export specifiers: + // https://github.com/babel/minify/issues/820 + evaluate: false, - // TODO(aomarks) Find out why we disabled this plugin. - simplifyComparisons: false, + // TODO(aomarks) Find out why we disabled this plugin. + simplifyComparisons: false, - // Prevent removal of things that babel thinks are unreachable, but sometimes - // gets wrong: https://github.com/Polymer/tools/issues/724 - deadcode: false, + // Prevent removal of things that babel thinks are unreachable, but sometimes + // gets wrong: https://github.com/Polymer/tools/issues/724 + deadcode: false, - // Disable the simplify plugin because it can eat some statements preceeding - // loops. https://github.com/babel/minify/issues/824 - simplify: false, + // Disable the simplify plugin because it can eat some statements preceeding + // loops. https://github.com/babel/minify/issues/824 + simplify: false, - // This is breaking ES6 output. https://github.com/Polymer/tools/issues/261 - mangle: false, - }, - {} - ), -]; + // This is breaking ES6 output. https://github.com/Polymer/tools/issues/261 + mangle: false, + }, + {} + ), + ], +}; diff --git a/demo/webpack.config.js b/demo/webpack.config.js index e3f1b8023c..3ba0f389df 100644 --- a/demo/webpack.config.js +++ b/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, diff --git a/gallery/webpack.config.js b/gallery/webpack.config.js index 032efa198d..763bed55c7 100644 --- a/gallery/webpack.config.js +++ b/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, diff --git a/src/data/script.ts b/src/data/script.ts new file mode 100644 index 0000000000..0c50a3f6e6 --- /dev/null +++ b/src/data/script.ts @@ -0,0 +1,5 @@ +export interface EventAction { + event: string; + event_data?: { [key: string]: any }; + event_data_template?: { [key: string]: any }; +} diff --git a/src/panels/config/js/preact-types.ts b/src/panels/config/js/preact-types.ts new file mode 100644 index 0000000000..95d790ede4 --- /dev/null +++ b/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; + } + } +} diff --git a/src/panels/config/js/script/event.js b/src/panels/config/js/script/event.tsx similarity index 53% rename from src/panels/config/js/script/event.js rename to src/panels/config/js/script/event.tsx index f11eb12170..43d7c30f79 100644 --- a/src/panels/config/js/script/event.js +++ b/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 { + 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 (
); } -} -EventAction.defaultConfig = { - event: "", - event_data: {}, -}; + private serviceDataChanged(eventData) { + this.props.onChange(this.props.index, { + ...this.props.action, + event_data: eventData, + }); + } +} diff --git a/tsconfig.json b/tsconfig.json index 387ca8661e..b9c04a1dbe 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,7 @@ { "compilerOptions": { + "jsx": "react", + "jsxFactory": "h", "target": "es2017", "module": "esnext", "moduleResolution": "node", diff --git a/webpack.config.js b/webpack.config.js index fade775416..ec6d52dc1a 100644 --- a/webpack.config.js +++ b/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, }; }