Merge script and automation editor JS (#693)

* Merge script and automation editor JS

* Also consolidate the files

gulp/tasks/rollup.js

@@ -68,16 +68,17 @@ gulp.task('run_rollup_es5', () => gulp.src([
   'demo_data/demo_data.js',
 ])
   .pipe(rollupEach(getRollupInputOptions(/* es6= */ false), rollupOutputOptions))
+  .on('error', err => console.error(err.message))
   .pipe(gulp.dest('build-temp-es5')));
 
 gulp.task('run_rollup', () => gulp.src([
   'js/core.js',
-  'js/automation-editor/automation-editor.js',
+  'js/panel-config/panel-config.js',
   'js/util.js',
-  'js/script-editor/script-editor.js',
   'demo_data/demo_data.js',
 ])
   .pipe(rollupEach(getRollupInputOptions(/* es6= */ true), rollupOutputOptions))
+  .on('error', err => console.error(err.message))
   .pipe(gulp.dest('build-temp')));
 
 gulp.task('ru_all_es5', ['run_rollup_es5'], () => {

js/panel-config/automation.js

@@ -1,8 +1,8 @@
 import { h, Component } from 'preact';
 
 import Trigger from './trigger/index.js';
-import Condition from '../common/component/condition/index.js';
-import Script from '../common/component/script/index.js';
+import Condition from './condition/index.js';
+import Script from './script/index.js';
 
 export default class Automation extends Component {
   constructor() {

js/panel-config/condition/numeric_state.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class NumericStateCondition extends Component {
   constructor() {

js/panel-config/condition/state.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class StateCondition extends Component {
   constructor() {

js/panel-config/condition/sun.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class SunCondition extends Component {
   constructor() {

js/panel-config/condition/template.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class TemplateCondition extends Component {
   constructor() {

js/panel-config/condition/time.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class TimeCondition extends Component {
   constructor() {

js/panel-config/condition/zone.js

@@ -1,8 +1,8 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
-import { hasLocation } from '../../util/location.js';
-import computeStateDomain from '../../util/compute_state_domain.js';
+import { onChangeEvent } from '../../common/util/event.js';
+import { hasLocation } from '../../common/util/location.js';
+import computeStateDomain from '../../common/util/compute_state_domain.js';
 
 function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== 'zone';

js/panel-config/panel-config.js

@@ -1,5 +1,10 @@
 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);

js/panel-config/script.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import Script from '../common/component/script/index.js';
+import Script from './script/index.js';
 
 export default class ScriptEditor extends Component {
   constructor() {
@@ -24,7 +24,7 @@ export default class ScriptEditor extends Component {
     });
   }
 
-  render({ script, isWide }) {
+  render({ script, isWide, hass }) {
     const { alias, sequence } = script;
 
     return (
@@ -54,7 +54,11 @@ export default class ScriptEditor extends Component {
               Learn more about available actions.
             </a></p>
           </span>
-          <Script script={sequence} onChange={this.sequenceChanged} />
+          <Script
+            script={sequence}
+            onChange={this.sequenceChanged}
+            hass={hass}
+          />
         </ha-config-section>
       </div>
     );

js/panel-config/script/delay.js

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class DelayAction extends Component {
   constructor() {

js/panel-config/script/event.js

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 import JSONTextArea from '../json_textarea.js';
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class EventAction extends Component {
   constructor() {

js/panel-config/script/wait.js

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class WaitAction extends Component {
   constructor() {

js/panel-config/trigger/event.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import JSONTextArea from '../../common/component/json_textarea.js';
+import JSONTextArea from '../json_textarea.js';
 import { onChangeEvent } from '../../common/util/event.js';
 
 export default class EventTrigger extends Component {

js/script-editor/script-editor.js

@@ -1,10 +0,0 @@
-import { h, render } from 'preact';
-import Script from './script.js';
-
-window.ScriptEditor = function (mountEl, props, mergeEl) {
-  return render(h(Script, props), mountEl, mergeEl);
-};
-
-window.unmountPreact = function (mountEl, mergeEl) {
-  render(() => null, mountEl, mergeEl);
-};

panels/config/automation/ha-automation-editor.html

@@ -22,8 +22,7 @@
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
-
-<script src='../../../build-temp/automation-editor.js'></script>
+<link rel="import" href="../ha-config-js.html">
 
 <dom-module id="ha-automation-editor">
   <template>

panels/config/ha-config-js.html

@@ -0,0 +1 @@
+<script src='../../build-temp/panel-config.js'></script>

panels/config/script/ha-script-editor.html

@@ -15,12 +15,14 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
-<link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../src/components/entity/ha-entity-picker.html'>
+<link rel='import' href='../../../src/components/ha-combo-box.html'>
 <link rel='import' href='../../../src/layouts/ha-app-layout.html'>
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
 
-<script src='../../../build-temp/script-editor.js'></script>
+<link rel="import" href="../ha-config-js.html">
 
 <dom-module id="ha-script-editor">
   <template>
@@ -159,13 +161,18 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
 
       isWide: {
         type: Boolean,
-        observer: 'isWideChanged',
+        observer: '_updateComponent',
       },
 
       _rendered: {
         type: Object,
         value: null,
       },
+
+      _renderScheduled: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -194,7 +201,7 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
   scriptChanged(newVal, oldVal) {
     if (!newVal) return;
     if (!this.hass) {
-      setTimeout(this.scriptChanged.bind(this, newVal, oldVal), 0);
+      setTimeout(() => this.scriptChanged(newVal, oldVal), 0);
       return;
     }
     if (oldVal && oldVal.entity_id === newVal.entity_id) {
@@ -229,11 +236,6 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
     this._updateComponent();
   }
 
-  isWideChanged() {
-    if (this.config === null) return;
-    this._updateComponent();
-  }
-
   backTapped() {
     if (this.dirty &&
         // eslint-disable-next-line
@@ -244,11 +246,17 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
   }
 
   _updateComponent() {
-    this._rendered = window.ScriptEditor(this.$.root, {
-      script: this.config,
-      onChange: this.configChanged,
-      isWide: this.isWide,
-    }, this._rendered);
+    if (this._renderScheduled || !this.hass || !this.config) return;
+    this._renderScheduled = true;
+    Promise.resolve().then(() => {
+      this._rendered = window.ScriptEditor(this.$.root, {
+        script: this.config,
+        onChange: this.configChanged,
+        isWide: this.isWide,
+        hass: this.hass,
+      }, this._rendered);
+      this._renderScheduled = false;
+    });
   }
 
   saveScript() {