Add custom panel example using React (#2651)

.gitignore

@@ -7,6 +7,7 @@ config/custom_components/*
 !config/custom_components/example.py
 !config/custom_components/hello_world.py
 !config/custom_components/mqtt_example.py
+!config/custom_components/react_panel
 
 tests/testing_config/deps
 tests/testing_config/home-assistant.log

config/custom_components/react_panel/__init__.py

@@ -0,0 +1,30 @@
+"""
+Custom panel example showing TodoMVC using React.
+
+Will add a panel to control lights and switches using React. Allows configuring
+the title via configuration.yaml:
+
+react_panel:
+  title: 'home'
+
+"""
+import os
+
+from homeassistant.components.frontend import register_panel
+
+DOMAIN = 'react_panel'
+DEPENDENCIES = ['frontend']
+
+PANEL_PATH = os.path.join(os.path.dirname(__file__), 'panel.html')
+
+
+def setup(hass, config):
+    """Initialize custom panel."""
+    title = config.get(DOMAIN, {}).get('title')
+
+    config = None if title is None else {'title': title}
+
+    register_panel(hass, 'react', PANEL_PATH,
+                   title='TodoMVC', icon='mdi:checkbox-marked-outline',
+                   config=config)
+    return True

config/custom_components/react_panel/panel.html

@@ -0,0 +1,415 @@
+<script src="https://fb.me/react-15.2.1.min.js"></script>
+<script src="https://fb.me/react-dom-15.2.1.min.js"></script>
+
+<!-- for development, replace with:
+<script src="https://fb.me/react-15.2.1.js"></script>
+<script src="https://fb.me/react-dom-15.2.1.js"></script>
+-->
+
+<!--
+  CSS taken from ReactJS TodoMVC example by Pete Hunt
+  http://todomvc.com/examples/react/
+-->
+
+<style>
+  .todoapp input[type="checkbox"] {
+    outline: none;
+  }
+
+  .todoapp {
+    background: #fff;
+    margin: 130px 0 40px 0;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+                0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .todoapp h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+  }
+
+  .todoapp .main {
+    position: relative;
+    border-top: 1px solid #e6e6e6;
+  }
+
+  .todoapp .todo-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .todoapp .todo-list li {
+    position: relative;
+    font-size: 24px;
+    border-bottom: 1px solid #ededed;
+  }
+
+  .todoapp .todo-list li:last-child {
+    border-bottom: none;
+  }
+
+  .todoapp .todo-list li .toggle {
+    text-align: center;
+    width: 40px;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    border: none; /* Mobile Safari */
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+  }
+
+  .todoapp .todo-list li .toggle:focus {
+    border-left: 3px solid rgba(175, 47, 47, 0.35);
+  }
+
+  .todoapp .todo-list li .toggle:after {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+  }
+
+  .todoapp .todo-list li .toggle:checked:after {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+  }
+
+  .todoapp .todo-list li label {
+    white-space: pre-line;
+    word-break: break-all;
+    padding: 15px 60px 15px 15px;
+    margin-left: 45px;
+    display: block;
+    line-height: 1.2;
+    transition: color 0.4s;
+  }
+
+  .todoapp .todo-list li.completed label {
+    color: #d9d9d9;
+    text-decoration: line-through;
+  }
+
+  .todoapp .footer {
+    color: #777;
+    padding: 10px 15px;
+    height: 20px;
+    text-align: center;
+    border-top: 1px solid #e6e6e6;
+  }
+
+  .todoapp .footer:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+                0 8px 0 -3px #f6f6f6,
+                0 9px 1px -3px rgba(0, 0, 0, 0.2),
+                0 16px 0 -6px #f6f6f6,
+                0 17px 2px -6px rgba(0, 0, 0, 0.2);
+  }
+
+  .todoapp .todo-count {
+    float: left;
+    text-align: left;
+    font-weight: 300;
+  }
+
+  .todoapp .toggle-menu {
+    position: absolute;
+    right: 15px;
+    font-weight: 300;
+    color: rgba(175, 47, 47, 0.75);
+  }
+
+  .todoapp .filters {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    position: absolute;
+    right: 0;
+    left: 0;
+  }
+
+  .todoapp .filters li {
+    display: inline;
+  }
+
+  .todoapp .filters li a {
+    color: inherit;
+    margin: 3px;
+    padding: 3px 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+  }
+
+  .todoapp .filters li a.selected,
+  .filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+  }
+
+  .todoapp .filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+  }
+
+  /*
+    Hack to remove background from Mobile Safari.
+    Can't use it globally since it destroys checkboxes in Firefox
+  */
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    .todoapp .toggle-all,
+    .todoapp .todo-list li .toggle {
+      background: none;
+    }
+
+    .todoapp .todo-list li .toggle {
+      height: 40px;
+    }
+
+    .todoapp .toggle-all {
+      -webkit-transform: rotate(90deg);
+      transform: rotate(90deg);
+      -webkit-appearance: none;
+      appearance: none;
+    }
+  }
+
+  @media (max-width: 430px) {
+    .todoapp .footer {
+      height: 50px;
+    }
+
+    .todoapp .filters {
+      bottom: 10px;
+    }
+  }
+</style>
+
+<dom-module id='ha-panel-react'>
+  <template>
+    <style>
+      :host {
+        background: #f5f5f5;
+        display: block;
+        height: 100%;
+        overflow: auto;
+      }
+      .mount {
+        font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        line-height: 1.4em;
+        color: #4d4d4d;
+        min-width: 230px;
+        max-width: 550px;
+        margin: 0 auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-font-smoothing: antialiased;
+        font-smoothing: antialiased;
+        font-weight: 300;
+      }
+    </style>
+    <div id='mount' class='mount'></div>
+  </template>
+</dom-module>
+
+<script>
+// Example uses ES6. Will only work in modern browsers
+class TodoMVC extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filter: 'all',
+      // load initial value of entities
+      entities: this.props.hass.reactor.evaluate(
+        this.props.hass.entityGetters.visibleEntityMap),
+    };
+  }
+
+  componentDidMount() {
+    // register to entity updates
+    this._unwatchHass = this.props.hass.reactor.observe(
+      this.props.hass.entityGetters.visibleEntityMap,
+      entities => this.setState({entities}))
+  }
+
+  componentWillUnmount() {
+    // unregister to entity updates
+    this._unwatchHass();
+  }
+
+  handlePickFilter(filter, ev) {
+    ev.preventDefault();
+    this.setState({filter});
+  }
+
+  handleEntityToggle(entity, ev) {
+    this.props.hass.serviceActions.callService(
+      entity.domain, 'toggle', { entity_id: entity.entityId });
+  }
+
+  handleToggleMenu(ev) {
+    ev.preventDefault();
+    Polymer.Base.fire('open-menu', null, {node: ev.target});
+  }
+
+  entityRow(entity) {
+    const completed = entity.state === 'on';
+
+    return React.createElement(
+      'li', {
+        className: completed && 'completed',
+        key: entity.entityId,
+      },
+      React.createElement(
+        "div", { className: "view" },
+        React.createElement(
+          "input", {
+            checked: completed,
+            className: "toggle",
+            type: "checkbox",
+            onChange: ev => this.handleEntityToggle(entity, ev),
+          }),
+        React.createElement("label", null, entity.entityDisplay)));
+  }
+
+  filterRow(filter) {
+    return React.createElement(
+      "li", { key: filter },
+      React.createElement(
+        "a", {
+          href: "#",
+          className: this.state.filter === filter && "selected",
+          onClick: ev => this.handlePickFilter(filter, ev),
+        },
+        filter.substring(0, 1).toUpperCase() + filter.substring(1)
+      )
+    );
+  }
+
+  render() {
+    const { entities, filter } = this.state;
+
+    if (!entities) return null;
+
+    const filters = ['all', 'light', 'switch'];
+
+    const showEntities = filter === 'all' ?
+      entities.filter(ent => filters.includes(ent.domain)) :
+      entities.filter(ent => ent.domain == filter);
+
+    return React.createElement(
+      'div', { className: 'todoapp-wrapper' },
+      React.createElement(
+        "section", { className: "todoapp" },
+        React.createElement(
+          "div", null,
+          React.createElement(
+            "header", { className: "header" },
+            React.createElement("h1", null, this.props.title || "todos")
+          ),
+          React.createElement(
+            "section", { className: "main" },
+            React.createElement(
+              "ul", { className: "todo-list" },
+              showEntities.valueSeq().map(ent => this.entityRow(ent)))
+            )
+          ),
+          React.createElement(
+            "footer", { className: "footer" },
+            React.createElement(
+              "span", { className: "todo-count" },
+              showEntities.filter(ent => ent.state === 'off').size + " items left"
+            ),
+            React.createElement(
+              "ul", { className: "filters" },
+              filters.map(filter => this.filterRow(filter))
+            ),
+            !this.props.showMenu && React.createElement(
+              "a", {
+                className: "toggle-menu",
+                href: '#',
+                onClick: ev => this.handleToggleMenu(ev),
+              },
+              "Show menu"
+            )
+          )
+        ));
+  }
+}
+
+Polymer({
+  is: 'ha-panel-react',
+
+  properties: {
+    // Home Assistant object
+    hass: {
+      type: Object,
+    },
+
+    // If should render in narrow mode
+    narrow: {
+      type: Boolean,
+      value: false,
+    },
+
+    // If sidebar is currently shown
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    // Home Assistant panel info
+    // panel.config contains config passed to register_panel serverside
+    panel: {
+      type: Object,
+    }
+  },
+
+  // This will make sure we forward changed properties to React
+  observers: [
+    'propsChanged(hass, narrow, showMenu, panel)',
+  ],
+
+  // Mount React when element attached
+  attached: function () {
+    this.mount(this.hass, this.narrow, this.showMenu, this.panel);
+  },
+
+  // Called when properties change
+  propsChanged: function (hass, narrow, showMenu, panel) {
+    this.mount(hass, narrow, showMenu, panel);
+  },
+
+  // Render React. Debounce in case multiple properties change.
+  mount: function (hass, narrow, showMenu, panel) {
+    this.debounce('mount', function () {
+      ReactDOM.render(React.createElement(TodoMVC, {
+        hass: hass,
+        narrow: narrow,
+        showMenu: showMenu,
+        title: panel.config ? panel.config.title : null
+      }), this.$.mount);
+    }.bind(this));
+  },
+
+  // Unmount React node when panel no longer in use.
+  detached: function () {
+    ReactDOM.unmountComponentAtNode(this);
+  },
+});
+</script>

homeassistant/components/frontend/__init__.py

@@ -1,4 +1,5 @@
 """Handle the frontend for Home Assistant."""
+import hashlib
 import logging
 import os
 
@@ -25,20 +26,27 @@ def register_built_in_panel(hass, component_name, title=None, icon=None,
     # pylint: disable=too-many-arguments
     path = 'panels/ha-panel-{}.html'.format(component_name)
 
+    if hass.wsgi.development:
+        url = ('/static/home-assistant-polymer/panels/'
+               '{0}/ha-panel-{0}.html'.format(component_name))
+    else:
+        url = None  # use default url generate mechanism
+
     register_panel(hass, component_name, os.path.join(STATIC_PATH, path),
-                   FINGERPRINTS[path], title, icon, url_name, config)
+                   FINGERPRINTS[path], title, icon, url_name, url, config)
 
 
-def register_panel(hass, component_name, path, md5, title=None, icon=None,
-                   url_name=None, config=None):
+def register_panel(hass, component_name, path, md5=None, title=None, icon=None,
+                   url_name=None, url=None, config=None):
     """Register a panel for the frontend.
 
     component_name: name of the web component
     path: path to the HTML of the web component
-    md5: the md5 hash of the web component (for versioning)
+    md5: the md5 hash of the web component (for versioning, optional)
     title: title to show in the sidebar (optional)
     icon: icon to show next to title in sidebar (optional)
     url_name: name to use in the url (defaults to component_name)
+    url: for the web component (for dev environment, optional)
     config: config to be passed into the web component
 
     Warning: this API will probably change. Use at own risk.
@@ -50,8 +58,13 @@ def register_panel(hass, component_name, path, md5, title=None, icon=None,
     if url_name in PANELS:
         _LOGGER.warning('Overwriting component %s', url_name)
     if not os.path.isfile(path):
-        _LOGGER.warning('Panel %s component does not exist: %s',
+        _LOGGER.error('Panel %s component does not exist: %s',
                       component_name, path)
+        return
+
+    if md5 is None:
+        with open(path) as fil:
+            md5 = hashlib.md5(fil.read().encode('utf-8')).hexdigest()
 
     data = {
         'url_name': url_name,
@@ -65,9 +78,8 @@ def register_panel(hass, component_name, path, md5, title=None, icon=None,
     if config is not None:
         data['config'] = config
 
-    if hass.wsgi.development:
-        data['url'] = ('/static/home-assistant-polymer/panels/'
-                       '{0}/ha-panel-{0}.html'.format(component_name))
+    if url is not None:
+        data['url'] = url
     else:
         url = URL_PANEL_COMPONENT.format(component_name)
 

homeassistant/components/frontend/version.py

@@ -2,7 +2,7 @@
 
 FINGERPRINTS = {
     "core.js": "bc78f21f5280217aa2c78dfc5848134f",
-    "frontend.html": "6fdf8282937005d3e4395f456199b118",
+    "frontend.html": "6c52e8cb797bafa3124d936af5ce1fcc",
     "mdi.html": "f6c6cc64c2ec38a80e91f801b41119b3",
     "panels/ha-panel-dev-event.html": "20327fbd4fb0370aec9be4db26fd723f",
     "panels/ha-panel-dev-info.html": "28e0a19ceb95aa714fd53228d9983a49",