diff --git a/gulp/tasks/rollup.js b/gulp/tasks/rollup.js index 16f6803208..bd62ed8393 100644 --- a/gulp/tasks/rollup.js +++ b/gulp/tasks/rollup.js @@ -80,7 +80,6 @@ gulp.task('run_rollup_es5', () => gulp.src([ gulp.task('run_rollup', () => gulp.src([ 'js/core.js', - 'js/panel-config/panel-config.js', 'js/util.js', 'demo_data/demo_data.js', ]) diff --git a/js/common/preact/event.js b/js/common/preact/event.js index 4e13c69f4c..ba31558444 100644 --- a/js/common/preact/event.js +++ b/js/common/preact/event.js @@ -5,7 +5,7 @@ export function onChangeEvent(prop, ev) { return; } - const data = { ...origData }; + const data = Object.assign({}, origData); if (ev.target.value) { data[ev.target.name] = ev.target.value; diff --git a/js/common/preact/unmount.js b/js/common/preact/unmount.js new file mode 100644 index 0000000000..8465d591e2 --- /dev/null +++ b/js/common/preact/unmount.js @@ -0,0 +1,5 @@ +import { render } from 'preact'; + +export default function unmount(mountEl) { + render(() => null, mountEl); +} diff --git a/js/panel-config/automation.js b/js/panel-config/automation.js index 3793fd7830..e048a3f335 100644 --- a/js/panel-config/automation.js +++ b/js/panel-config/automation.js @@ -15,31 +15,31 @@ export default class Automation extends Component { } onChange(ev) { - this.props.onChange({ - ...this.props.automation, - [ev.target.name]: ev.target.value, - }); + this.props.onChange(Object.assign( + {}, this.props.automation, + { [ev.target.name]: ev.target.value }, + )); } triggerChanged(trigger) { - this.props.onChange({ - ...this.props.automation, - trigger, - }); + this.props.onChange(Object.assign( + {}, this.props.automation, + { trigger }, + )); } conditionChanged(condition) { - this.props.onChange({ - ...this.props.automation, - condition, - }); + this.props.onChange(Object.assign( + {}, this.props.automation, + { condition }, + )); } actionChanged(action) { - this.props.onChange({ - ...this.props.automation, - action, - }); + this.props.onChange(Object.assign( + {}, this.props.automation, + { action }, + )); } render({ automation, isWide, hass, localize }) { diff --git a/js/panel-config/condition/condition_edit.js b/js/panel-config/condition/condition_edit.js index cd4d5b323d..08ef6a78df 100644 --- a/js/panel-config/condition/condition_edit.js +++ b/js/panel-config/condition/condition_edit.js @@ -29,10 +29,10 @@ export default class ConditionRow extends Component { const type = ev.target.selectedItem.attributes.condition.value; if (type !== this.props.condition.condition) { - this.props.onChange(this.props.index, { - condition: type, - ...TYPES[type].defaultConfig - }); + this.props.onChange(this.props.index, Object.assign( + { condition: type }, + TYPES[type].defaultConfig + )); } } diff --git a/js/panel-config/condition/numeric_state.js b/js/panel-config/condition/numeric_state.js index b7adfad3b3..a1647860af 100644 --- a/js/panel-config/condition/numeric_state.js +++ b/js/panel-config/condition/numeric_state.js @@ -11,10 +11,10 @@ export default class NumericStateCondition extends Component { } entityPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.condition, - entity_id: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.condition, + { entity_id: ev.target.value }, + )); } /* eslint-disable camelcase */ diff --git a/js/panel-config/condition/state.js b/js/panel-config/condition/state.js index e5580c63a4..414aaf2032 100644 --- a/js/panel-config/condition/state.js +++ b/js/panel-config/condition/state.js @@ -11,10 +11,10 @@ export default class StateCondition extends Component { } entityPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.condition, - entity_id: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.condition, + { entity_id: ev.target.value }, + )); } /* eslint-disable camelcase */ diff --git a/js/panel-config/condition/sun.js b/js/panel-config/condition/sun.js index 2fe35c9ecd..e4786c693e 100644 --- a/js/panel-config/condition/sun.js +++ b/js/panel-config/condition/sun.js @@ -12,7 +12,7 @@ export default class SunCondition extends Component { } radioGroupPicked(key, ev) { - const condition = { ...this.props.condition }; + const condition = Object.assign({}, this.props.condition); if (ev.target.selected) { condition[key] = ev.target.selected; diff --git a/js/panel-config/condition/zone.js b/js/panel-config/condition/zone.js index d82c69a6c3..f28259d8ef 100644 --- a/js/panel-config/condition/zone.js +++ b/js/panel-config/condition/zone.js @@ -18,17 +18,17 @@ export default class ZoneCondition extends Component { } entityPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.condition, - entity_id: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.condition, + { entity_id: ev.target.value }, + )); } zonePicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.condition, - zone: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.condition, + { zone: ev.target.value }, + )); } /* eslint-disable camelcase */ diff --git a/js/panel-config/panel-config.js b/js/panel-config/panel-config.js deleted file mode 100644 index d439b545ef..0000000000 --- a/js/panel-config/panel-config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { h, render } from 'preact'; -import Automation from './automation.js'; -import Script from './script.js'; - -window.ScriptEditor = function (mountEl, props, mergeEl) { - return render(h(Script, props), mountEl, mergeEl); -}; - -window.AutomationEditor = function (mountEl, props, mergeEl) { - return render(h(Automation, props), mountEl, mergeEl); -}; - -window.unmountPreact = function (mountEl, mergeEl) { - render(() => null, mountEl, mergeEl); -}; diff --git a/js/panel-config/script.js b/js/panel-config/script.js index 26dec7873f..544c67630d 100644 --- a/js/panel-config/script.js +++ b/js/panel-config/script.js @@ -11,17 +11,17 @@ export default class ScriptEditor extends Component { } onChange(ev) { - this.props.onChange({ - ...this.props.script, - [ev.target.name]: ev.target.value, - }); + this.props.onChange(Object.assign( + {}, this.props.script, + { [ev.target.name]: ev.target.value } + )); } sequenceChanged(sequence) { - this.props.onChange({ - ...this.props.script, - sequence, - }); + this.props.onChange(Object.assign( + {}, this.props.script, + { sequence }, + )); } render({ script, isWide, hass, localize }) { diff --git a/js/panel-config/script/call_service.js b/js/panel-config/script/call_service.js index 246fab07ff..8561b54a9d 100644 --- a/js/panel-config/script/call_service.js +++ b/js/panel-config/script/call_service.js @@ -11,17 +11,17 @@ export default class CallServiceAction extends Component { } serviceChanged(ev) { - this.props.onChange(this.props.index, { - ...this.props.action, - service: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.action, + { service: ev.target.value }, + )); } serviceDataChanged(data) { - this.props.onChange(this.props.index, { - ...this.props.action, - data, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.action, + { data }, + )); } render({ action, hass, localize }) { diff --git a/js/panel-config/script/condition.js b/js/panel-config/script/condition.js index 3fcea7657c..b66b95c2a3 100644 --- a/js/panel-config/script/condition.js +++ b/js/panel-config/script/condition.js @@ -18,7 +18,7 @@ export default class ConditionAction extends Component { } } -ConditionAction.defaultConfig = { - condition: 'state', - ...StateCondition.defaultConfig, -}; +ConditionAction.defaultConfig = Object.assign( + { condition: 'state' }, + StateCondition.defaultConfig, +); diff --git a/js/panel-config/script/event.js b/js/panel-config/script/event.js index 643d1b57f7..085ed6236f 100644 --- a/js/panel-config/script/event.js +++ b/js/panel-config/script/event.js @@ -12,10 +12,10 @@ export default class EventAction extends Component { } serviceDataChanged(data) { - this.props.onChange(this.props.index, { - ...this.props.action, - data, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.action, + { data }, + )); } render({ action, localize }) { diff --git a/js/panel-config/script/wait.js b/js/panel-config/script/wait.js index 0032cc17f8..66945a5e8d 100644 --- a/js/panel-config/script/wait.js +++ b/js/panel-config/script/wait.js @@ -12,10 +12,10 @@ 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) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - [ev.target.name]: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { [ev.target.name]: ev.target.value }, + )); } render({ action, localize }) { diff --git a/js/panel-config/trigger/event.js b/js/panel-config/trigger/event.js index 68a6c324ed..b00beae029 100644 --- a/js/panel-config/trigger/event.js +++ b/js/panel-config/trigger/event.js @@ -13,10 +13,10 @@ export default class EventTrigger extends Component { /* eslint-disable camelcase */ eventDataChanged(event_data) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - event_data, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { event_data }, + )); } render({ trigger, localize }) { diff --git a/js/panel-config/trigger/homeassistant.js b/js/panel-config/trigger/homeassistant.js index a27f96b61a..4c29d377a4 100644 --- a/js/panel-config/trigger/homeassistant.js +++ b/js/panel-config/trigger/homeassistant.js @@ -8,10 +8,10 @@ export default class HassTrigger extends Component { } radioGroupPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - event: ev.target.selected, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { event: ev.target.selected }, + )); } /* eslint-disable camelcase */ diff --git a/js/panel-config/trigger/index.js b/js/panel-config/trigger/index.js index dcc453bea3..a77e6da79c 100644 --- a/js/panel-config/trigger/index.js +++ b/js/panel-config/trigger/index.js @@ -12,10 +12,10 @@ export default class Trigger extends Component { } addTrigger() { - const trigger = this.props.trigger.concat({ - platform: 'state', - ...StateTrigger.defaultConfig, - }); + const trigger = this.props.trigger.concat(Object.assign( + { platform: 'state' }, + StateTrigger.defaultConfig, + )); this.props.onChange(trigger); } diff --git a/js/panel-config/trigger/numeric_state.js b/js/panel-config/trigger/numeric_state.js index 3aa85978cf..f680c95833 100644 --- a/js/panel-config/trigger/numeric_state.js +++ b/js/panel-config/trigger/numeric_state.js @@ -11,10 +11,10 @@ export default class NumericStateTrigger extends Component { } entityPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - entity_id: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { entity_id: ev.target.value }, + )); } /* eslint-disable camelcase */ diff --git a/js/panel-config/trigger/state.js b/js/panel-config/trigger/state.js index 461a4a5789..933fbd3490 100644 --- a/js/panel-config/trigger/state.js +++ b/js/panel-config/trigger/state.js @@ -11,10 +11,10 @@ export default class StateTrigger extends Component { } entityPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - entity_id: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { entity_id: ev.target.value }, + )); } /* eslint-disable camelcase */ diff --git a/js/panel-config/trigger/sun.js b/js/panel-config/trigger/sun.js index 8140095e7a..43e0126147 100644 --- a/js/panel-config/trigger/sun.js +++ b/js/panel-config/trigger/sun.js @@ -11,10 +11,10 @@ export default class SunTrigger extends Component { } radioGroupPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - event: ev.target.selected, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { event: ev.target.selected }, + )); } /* eslint-disable camelcase */ diff --git a/js/panel-config/trigger/trigger_edit.js b/js/panel-config/trigger/trigger_edit.js index fbc13d566a..d5a7c5ef58 100644 --- a/js/panel-config/trigger/trigger_edit.js +++ b/js/panel-config/trigger/trigger_edit.js @@ -35,10 +35,10 @@ export default class TriggerEdit extends Component { 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 - }); + this.props.onChange(this.props.index, Object.assign( + { platform: type }, + TYPES[type].defaultConfig + )); } } diff --git a/js/panel-config/trigger/zone.js b/js/panel-config/trigger/zone.js index b918cdd0c1..e4d77182d2 100644 --- a/js/panel-config/trigger/zone.js +++ b/js/panel-config/trigger/zone.js @@ -19,24 +19,24 @@ export default class ZoneTrigger extends Component { } entityPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - entity_id: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { entity_id: ev.target.value }, + )); } zonePicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - zone: ev.target.value, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { zone: ev.target.value }, + )); } radioGroupPicked(ev) { - this.props.onChange(this.props.index, { - ...this.props.trigger, - event: ev.target.selected, - }); + this.props.onChange(this.props.index, Object.assign( + {}, this.props.trigger, + { event: ev.target.selected }, + )); } /* eslint-disable camelcase */ diff --git a/package.json b/package.json index d5b7a327a3..40925854c0 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,6 @@ "babel-loader": "^7.1.4", "babel-plugin-external-helpers": "^6.22.0", "babel-plugin-syntax-dynamic-import": "^6.18.0", - "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-react-jsx": "^6.24.1", "babel-preset-env": "^1.6.1", "chai": "^4.1.2", diff --git a/panels/config/automation/ha-automation-editor.js b/panels/config/automation/ha-automation-editor.js index ec07f6925d..5a63b79b33 100644 --- a/panels/config/automation/ha-automation-editor.js +++ b/panels/config/automation/ha-automation-editor.js @@ -15,6 +15,7 @@ import '@polymer/paper-radio-button/paper-radio-button.js'; import '@polymer/paper-radio-group/paper-radio-group.js'; import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js'; +import { h, render } from 'preact'; import '../../../src/components/entity/ha-entity-picker.js'; import '../../../src/components/ha-combo-box.js'; @@ -24,13 +25,19 @@ import '../../../src/layouts/ha-app-layout.js'; import '../../../src/util/hass-mixins.js'; import '../ha-config-js.js'; import '../ha-config-section.js'; +import Automation from '../../../js/panel-config/automation.js'; +import unmountPreact from '../../../js/common/preact/unmount.js'; + +function AutomationEditor(mountEl, props, mergeEl) { + return render(h(Automation, props), mountEl, mergeEl); +} /* * @appliesMixin window.hassMixins.LocalizeMixin * @appliesMixin window.hassMixins.EventsMixin */ class HaAutomationEditor extends - window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(PolymerElement)) { + window.hassMixins.LocalizeMixin(window.hassMixins.NavigateMixin(PolymerElement)) { static get template() { return html`