More entity improvement

[balloob]

This PR depends on #674 so this PR merges into that branch.

• Add entity picker to the script and automation editors
• Allow filtering by entity and domain inside entity picker
• Add new service picker for scripts editor
• Add service picker and entity picker to dev services tool

In the automation editor: when configuring a zone we only autocomplete entities that have a location.

[andrey-git]

Do we really want to go in the preact direction?

I didn't actually try it, so I'm not aware of the advantages, but the disadvantages I see are:

• Polymer is easier to understand: "Here is a file which says how the element looks and what it does".
• Requires rollup. This became less of an issue with ES6 rollup, but still the code you debug is not the code you wrote.

[balloob]

For this PR: All the logic here is added in Polymer components. The preact components are just pointing at the polymer components.

the code you debug is not the code you wrote.

It is very very similar. The only thing that is transpiled is that <paper-menu-button bla={5} /> is rewritten to h('paper-menu-button', {bla: 5}) (try it out here). Rollup (which will power Polymer 3) is just bundling all the files.

The reason I went for Preact for the automation/script editor is because of speed and as an interoperability experiment. Dynamically figuring out which component to render is just a lot more straightforward in Preact. I don't have to do something like this for each type:

<template is='dom-if' if='[[isTriggerState(row)]]'>
  <trigger-state-editor
    hass='[[hass]]'
    trigger='{{trigger}}'
  ></trigger-state-editor>
</template>

but instead can do this to match all types at once (since it's JS):

const Comp = TYPES[row.type];
return <Comp hass={hass} trigger={trigger} />

We could probably rewrite this using window.hassUtil.dynamicContentUpdater and Polymer and make it similar smooth.

I'm not against removing Preact. I just don't feel like doing it 😉

[andrey-git]

The polymer part looks fine. I don't quite understand the preact part :)

[balloob]

The preact part is rendering the new component and dealing with the data that comes out of it. If you want we can jump on a call and I can give you a preact 101.

[balloob]

Is this ok to merge?

[andrey-git]

ok to merge.

I understand the theory, it is just much harder (relative to Polymer) to follow that everything is correct.