Embed the preact code directly (#1177)

* Embed the preact code directly

* Do not transform object rest spread

* Lint

* Ignore preact from lint

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',
 ])

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;

js/common/preact/unmount.js

@@ -0,0 +1,5 @@
+import { render } from 'preact';
+
+export default function unmount(mountEl) {
+  render(() => null, mountEl);
+}

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 }) {

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
+      ));
     }
   }
 

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 */

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 */

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;

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 */

js/panel-config/panel-config.js

@@ -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);
-};

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 }) {

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 }) {

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,
+);

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 }) {

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 }) {

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 }) {

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 */

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);
   }

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 */

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 */

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 */

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
+      ));
     }
   }
 

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 */

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",

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`
     <style include="ha-style">
@@ -181,7 +188,7 @@ class HaAutomationEditor extends
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this._rendered) {
-      window.unmountPreact(this._rendered);
+      unmountPreact(this._rendered);
       this._rendered = null;
     }
   }
@@ -251,7 +258,7 @@ class HaAutomationEditor extends
     if (this._renderScheduled || !this.hass || !this.config) return;
     this._renderScheduled = true;
     Promise.resolve().then(() => {
-      this._rendered = window.AutomationEditor(this.$.root, {
+      this._rendered = AutomationEditor(this.$.root, {
         automation: this.config,
         onChange: this.configChanged,
         isWide: this.isWide,
@@ -268,8 +275,7 @@ class HaAutomationEditor extends
       this.dirty = false;
 
       if (this.creatingNew) {
-        history.replaceState(null, null, '/config/automation/edit/' + id);
-        this.fire('location-changed');
+        this.navigate(`/config/automation/edit/${id}`, true);
       }
     }.bind(this), function (errors) {
       this.errors = errors.body.message;

panels/config/ha-panel-config.js

@@ -3,7 +3,6 @@ import '@polymer/iron-media-query/iron-media-query.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../build-temp/panel-config.js';
 import '../../src/layouts/hass-error-screen.js';
 import '../../src/util/hass-mixins.js';
 import './automation/ha-config-automation.js';

panels/config/script/ha-script-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';
@@ -22,11 +23,18 @@ import '../../../src/layouts/ha-app-layout.js';
 import '../../../src/util/hass-mixins.js';
 import '../ha-config-js.js';
 import '../ha-config-section.js';
+import Script from '../../../js/panel-config/script.js';
+import unmountPreact from '../../../js/common/preact/unmount.js';
+
+function ScriptEditor(mountEl, props, mergeEl) {
+  return render(h(Script, props), mountEl, mergeEl);
+}
 
 /*
  * @appliesMixin window.hassMixins.LocalizeMixin
  */
-class HaScriptEditor extends window.hassMixins.LocalizeMixin(PolymerElement) {
+class HaScriptEditor extends
+  window.hassMixins.LocalizeMixin(window.hassMixins.NavigateMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="ha-style">
@@ -174,7 +182,7 @@ class HaScriptEditor extends window.hassMixins.LocalizeMixin(PolymerElement) {
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this._rendered) {
-      window.unmountPreact(this._rendered);
+      unmountPreact(this._rendered);
       this._rendered = null;
     }
   }
@@ -242,7 +250,7 @@ class HaScriptEditor extends window.hassMixins.LocalizeMixin(PolymerElement) {
     if (this._renderScheduled || !this.hass || !this.config) return;
     this._renderScheduled = true;
     Promise.resolve().then(() => {
-      this._rendered = window.ScriptEditor(this.$.root, {
+      this._rendered = ScriptEditor(this.$.root, {
         script: this.config,
         onChange: this.configChanged,
         isWide: this.isWide,

polymer.json

@@ -29,7 +29,9 @@
       "**/*.html",
       "**/ha-paper-slider.js",
       "**/hass-mixins.js",
-      "**/ha-iconset-svg.js"
+      "**/ha-iconset-svg.js",
+      "**/ha-script-editor.js",
+      "**/ha-automation-editor.js"
     ]
   },
   "builds": [

webpack.config.js

@@ -10,23 +10,23 @@ function createConfig(isProdBuild, latestBuild) {
     publicPath = `/home-assistant-polymer/${buildPath}`;
   }
 
-  const rules = [];
-  if (!latestBuild) {
-    rules.push({
-      test: /\.js$/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            ['es2015', { modules: false }]
-          ],
-          plugins: [
-            // Only support the syntax, Webpack will handle it.
-            "syntax-dynamic-import"
-          ],
+  const babelOptions = {
+    plugins: [
+      // Only support the syntax, Webpack will handle it.
+      "syntax-dynamic-import",
+      [
+        'transform-react-jsx',
+        {
+          pragma: 'h'
         }
-      }
-    });
+      ],
+    ],
+  };
+
+  if (!latestBuild) {
+    babelOptions.presets = [
+      ['es2015', { modules: false }]
+    ];
   }
 
   const chunkFilename = isProdBuild ?
@@ -39,7 +39,15 @@ function createConfig(isProdBuild, latestBuild) {
       authorize: './src/auth/ha-authorize.js'
     },
     module: {
-      rules
+      rules: [
+        {
+          test: /\.js$/,
+          use: {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        }
+      ]
     },
     output: {
       filename: '[name].js',

yarn.lock

@@ -2660,7 +2660,7 @@ babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
-babel-plugin-syntax-object-rest-spread@^6.8.0:
+babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"