Build hassio panel (#1184)

* Fix hass.io panel

* Add develop scripts

* Build hassio on Travis

.gitignore

@@ -1,11 +1,6 @@
-build/*
-build-temp/*
-build-es5/*
-build-temp-es5/*
 build-translations/*
-build-hassio/*
+hassio/build-es5/*
 node_modules/*
-bower_components/*
 npm-debug.log
 .DS_Store
 hass_frontend/*

.travis.yml

@@ -7,6 +7,7 @@ cache:
 install: yarn install
 script:
   - npm run build
+  - hassio/script/build_hassio
   - npm run test
   # - xvfb-run wct --module-resolution=node --npm
   # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'

gulp/tasks/hassio-panel.js

@@ -1,59 +0,0 @@
-const del = require('del');
-const gulp = require('gulp');
-const rename = require('gulp-rename');
-const replace = require('gulp-batch-replace');
-const gzip = require('gulp-gzip');
-const path = require('path');
-const runSequence = require('run-sequence');
-
-const {
-  stripImportsStrategy,
-} = require('../common/strategy');
-const minifyStream = require('../common/transform').minifyStream;
-const {
-  bundledStreamFromHTML,
-} = require('../common/html');
-
-const OUTPUT_DIR = 'build-hassio/';
-
-const DEPS_TO_STRIP = [
-  'bower_components/font-roboto/roboto.html',
-  'bower_components/paper-styles/color.html',
-];
-
-const es5Extra = "<script src='/frontend_es5/custom-elements-es5-adapter.js'></script>";
-
-async function buildHassioPanel() {
-  const stream = await bundledStreamFromHTML('hassio/hassio-app.html', {
-    strategy: stripImportsStrategy(DEPS_TO_STRIP)
-  });
-
-  return minifyStream(stream, /* es6= */ false)
-    .pipe(rename('hassio-app.html'))
-    .pipe(gulp.dest(OUTPUT_DIR));
-}
-
-function copyHassioIndex() {
-  return gulp.src('hassio/index.html')
-    .pipe(replace([['<!--EXTRA_SCRIPTS-->', es5Extra]]))
-    .pipe(gulp.dest(OUTPUT_DIR));
-}
-
-function gzipOutput() {
-  return gulp.src(path.resolve(OUTPUT_DIR, '*.html'))
-    .pipe(gzip({ skipGrowingFiles: true }))
-    .pipe(gulp.dest(OUTPUT_DIR));
-}
-
-gulp.task('hassio-clean', () => del([OUTPUT_DIR]));
-gulp.task('hassio-panel-es5', buildHassioPanel);
-gulp.task('hassio-index-es5', copyHassioIndex);
-gulp.task('hassio-gzip-es5', gzipOutput);
-
-gulp.task('hassio-es5', () => runSequence.use(gulp)(
-  'hassio-clean',
-  'run_rollup',
-  'hassio-panel-es5',
-  'hassio-index-es5',
-  'hassio-gzip-es5',
-));

hassio/config.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  // Target directory for the build.
+  buildDir: path.resolve(__dirname, 'build-es5'),
+  // Path where the Hass.io frontend will be publicly available.
+  publicPath: '/api/hassio/app-es5'
+}

hassio/index.html

@@ -29,8 +29,7 @@
       addScript('/static/webcomponents-bundle.js');
     }
     </script>
-    <!-- This is broken. -->
-    <script src="./hassio-app.js"></script>
+    <script src="./app.js"></script>
     <link rel='import' href='/static/mdi.html' async>
   </body>
 </html>

hassio/script/build_hassio

@@ -0,0 +1,13 @@
+#!/bin/sh
+# Builds the Hass.io app for production
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+OUTPUT_DIR_ES5=build-es5
+
+rm -rf $OUTPUT_DIR_ES5
+NODE_ENV=production ../node_modules/.bin/webpack -p
+node script/gen-index-html.js

hassio/script/develop

@@ -0,0 +1,12 @@
+#!/bin/sh
+# Run the Hass.io development server
+
+# Stop on errors
+set -e
+
+OUTPUT_DIR_ES5=build-es5
+
+rm -rf $OUTPUT_DIR_ES5
+mkdir $OUTPUT_DIR_ES5
+node script/gen-index-html.js
+../node_modules/.bin/webpack --watch --progress

hassio/script/gen-index-html.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const config = require('../config.js');
+
+let index = fs.readFileSync('index.html', 'utf-8');
+
+const toReplace = [
+  [
+    '<!--EXTRA_SCRIPTS-->',
+    "<script src='/frontend_es5/custom-elements-es5-adapter.js'></script>"
+  ],
+];
+
+for (item of toReplace) {
+  index = index.replace(item[0], item[1]);
+}
+
+fs.writeFileSync(`${config.buildDir}/index.html`, index);

hassio/src/addon-store/hassio-addon-repository.js

@@ -2,9 +2,9 @@ import '@polymer/paper-card/paper-card.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/hassio-card-content.js';
-import '../../src/resources/hassio-style.js';
-import NavigateMixin from '../../src/mixins/navigate-mixin.js';
+import '../../../src/components/hassio-card-content.js';
+import '../../../src/resources/hassio-style.js';
+import NavigateMixin from '../../../src/mixins/navigate-mixin.js';
 
 class HassioAddonRepository extends NavigateMixin(PolymerElement) {
   static get template() {

hassio/src/addon-store/hassio-repositories-editor.js

@@ -4,9 +4,9 @@ import '@polymer/paper-input/paper-input.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/buttons/ha-call-api-button.js';
-import '../../src/components/hassio-card-content.js';
-import '../../src/resources/hassio-style.js';
+import '../../../src/components/buttons/ha-call-api-button.js';
+import '../../../src/components/hassio-card-content.js';
+import '../../../src/resources/hassio-style.js';
 
 class HassioRepositoriesEditor extends PolymerElement {
   static get template() {

hassio/src/addon-view/hassio-addon-audio.js

@@ -8,8 +8,8 @@ import '@polymer/paper-listbox/paper-listbox.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/resources/ha-style.js';
-import EventsMixin from '../../src/mixins/events-mixin.js';
+import '../../../src/resources/ha-style.js';
+import EventsMixin from '../../../src/mixins/events-mixin.js';
 
 class HassioAddonAudio extends EventsMixin(PolymerElement) {
   static get template() {

hassio/src/addon-view/hassio-addon-config.js

@@ -4,7 +4,7 @@ import '@polymer/paper-card/paper-card.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/buttons/ha-call-api-button.js';
+import '../../../src/components/buttons/ha-call-api-button.js';
 
 class HassioAddonConfig extends PolymerElement {
   static get template() {

hassio/src/addon-view/hassio-addon-info.js

@@ -5,11 +5,11 @@ import '@polymer/paper-toggle-button/paper-toggle-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/buttons/ha-call-api-button.js';
-import '../../src/components/ha-markdown.js';
-import '../../src/components/hassio-card-content.js';
-import '../../src/resources/ha-style.js';
-import EventsMixin from '../../src/mixins/events-mixin.js';
+import '../../../src/components/buttons/ha-call-api-button.js';
+import '../../../src/components/ha-markdown.js';
+import '../../../src/components/hassio-card-content.js';
+import '../../../src/resources/ha-style.js';
+import EventsMixin from '../../../src/mixins/events-mixin.js';
 
 class HassioAddonInfo extends EventsMixin(PolymerElement) {
   static get template() {

hassio/src/addon-view/hassio-addon-logs.js

@@ -3,7 +3,7 @@ import '@polymer/paper-card/paper-card.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/resources/ha-style.js';
+import '../../../src/resources/ha-style.js';
 
 class HassioAddonLogs extends PolymerElement {
   static get template() {

hassio/src/addon-view/hassio-addon-network.js

@@ -3,9 +3,9 @@ import '@polymer/paper-input/paper-input.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/buttons/ha-call-api-button.js';
-import '../../src/resources/ha-style.js';
-import EventsMixin from '../../src/mixins/events-mixin.js';
+import '../../../src/components/buttons/ha-call-api-button.js';
+import '../../../src/resources/ha-style.js';
+import EventsMixin from '../../../src/mixins/events-mixin.js';
 
 class HassioAddonNetwork extends EventsMixin(PolymerElement) {
   static get template() {

hassio/src/addon-view/hassio-addon-view.js

@@ -6,8 +6,8 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/ha-menu-button.js';
-import '../../src/resources/ha-style.js';
+import '../../../src/components/ha-menu-button.js';
+import '../../../src/resources/ha-style.js';
 import '../hassio-markdown-dialog.js';
 import './hassio-addon-audio.js';
 import './hassio-addon-config.js';

hassio/src/dashboard/hassio-addons.js

@@ -2,9 +2,9 @@ import '@polymer/paper-card/paper-card.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/hassio-card-content.js';
-import '../../src/resources/hassio-style.js';
-import NavigateMixin from '../../src/mixins/navigate-mixin.js';
+import '../../../src/components/hassio-card-content.js';
+import '../../../src/resources/hassio-style.js';
+import NavigateMixin from '../../../src/mixins/navigate-mixin.js';
 
 class HassioAddons extends NavigateMixin(PolymerElement) {
   static get template() {

hassio/src/dashboard/hassio-dashboard.js

@@ -3,7 +3,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './hassio-addons.js';
 import './hassio-hass-update.js';
-import EventsMixin from '../../src/mixins/events-mixin.js';
+import EventsMixin from '../../../src/mixins/events-mixin.js';
 
 class HassioDashboard extends EventsMixin(PolymerElement) {
   static get template() {

hassio/src/dashboard/hassio-hass-update.js

@@ -3,9 +3,9 @@ import '@polymer/paper-card/paper-card.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/buttons/ha-call-api-button.js';
-import '../../src/components/hassio-card-content.js';
-import '../../src/resources/hassio-style.js';
+import '../../../src/components/buttons/ha-call-api-button.js';
+import '../../../src/components/hassio-card-content.js';
+import '../../../src/resources/hassio-style.js';
 
 class HassioHassUpdate extends PolymerElement {
   static get template() {

hassio/src/hassio-app.js

@@ -1,6 +1,10 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
+// For mdi icons.
+import '../../src/components/ha-iconset-svg.js';
+import '../../src/resources/html-import/polyfill.js';
+
 import './hassio-main.js';
 
 class HassioApp extends PolymerElement {

hassio/src/hassio-main.js

@@ -2,13 +2,13 @@ import '@polymer/app-route/app-route.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../src/layouts/hass-loading-screen.js';
+import '../../src/layouts/hass-loading-screen.js';
 import './addon-view/hassio-addon-view.js';
 import './hassio-data.js';
 import './hassio-pages-with-tabs.js';
 
-import applyThemesOnElement from '../src/common/dom/apply_themes_on_element.js';
-import EventsMixin from '../src/mixins/events-mixin.js';
+import applyThemesOnElement from '../../src/common/dom/apply_themes_on_element.js';
+import EventsMixin from '../../src/mixins/events-mixin.js';
 
 class HassioMain extends EventsMixin(PolymerElement) {
   static get template() {

hassio/src/hassio-markdown-dialog.js

@@ -5,8 +5,8 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../src/components/ha-markdown.js';
-import '../src/resources/ha-style.js';
+import '../../src/components/ha-markdown.js';
+import '../../src/resources/ha-style.js';
 
 class HassioMarkdownDialog extends PolymerElement {
   static get template() {

hassio/src/hassio-pages-with-tabs.js

@@ -7,15 +7,15 @@ import '@polymer/paper-tabs/paper-tabs.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../src/components/ha-menu-button.js';
-import '../src/resources/ha-style.js';
+import '../../src/components/ha-menu-button.js';
+import '../../src/resources/ha-style.js';
 import './addon-store/hassio-addon-store.js';
 import './dashboard/hassio-dashboard.js';
 import './hassio-markdown-dialog.js';
 import './snapshots/hassio-snapshot.js';
 import './snapshots/hassio-snapshots.js';
 import './system/hassio-system.js';
-import NavigateMixin from '../src/mixins/navigate-mixin.js';
+import NavigateMixin from '../../src/mixins/navigate-mixin.js';
 
 class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
   static get template() {

hassio/src/snapshots/hassio-snapshot.js

@@ -8,7 +8,7 @@ import '@polymer/paper-input/paper-input.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/resources/ha-style.js';
+import '../../../src/resources/ha-style.js';
 
 class HassioSnapshot extends PolymerElement {
   static get template() {

hassio/src/snapshots/hassio-snapshots.js

@@ -7,9 +7,9 @@ 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 '../../src/components/hassio-card-content.js';
-import '../../src/resources/hassio-style.js';
-import EventsMixin from '../../src/mixins/events-mixin.js';
+import '../../../src/components/hassio-card-content.js';
+import '../../../src/resources/hassio-style.js';
+import EventsMixin from '../../../src/mixins/events-mixin.js';
 
 class HassioSnapshots extends EventsMixin(PolymerElement) {
   static get template() {

hassio/src/system/hassio-host-info.js

@@ -3,8 +3,8 @@ import '@polymer/paper-card/paper-card.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/buttons/ha-call-api-button.js';
-import EventsMixin from '../../src/mixins/events-mixin.js';
+import '../../../src/components/buttons/ha-call-api-button.js';
+import EventsMixin from '../../../src/mixins/events-mixin.js';
 
 class HassioHostInfo extends EventsMixin(PolymerElement) {
   static get template() {

hassio/src/system/hassio-supervisor-info.js

@@ -3,8 +3,8 @@ import '@polymer/paper-card/paper-card.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../src/components/buttons/ha-call-api-button.js';
-import EventsMixin from '../../src/mixins/events-mixin.js';
+import '../../../src/components/buttons/ha-call-api-button.js';
+import EventsMixin from '../../../src/mixins/events-mixin.js';
 
 class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
   static get template() {

hassio/webpack.config.js

@@ -0,0 +1,51 @@
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const config = require('./config.js');
+
+const version = fs.readFileSync('../setup.py', 'utf8').match(/\d{8}[^']*/);
+if (!version) {
+  throw Error('Version not found');
+}
+const VERSION = version[0];
+const isProdBuild = process.env.NODE_ENV === 'production'
+const chunkFilename = isProdBuild ?
+  '[name]-[chunkhash].chunk.js' : '[name].chunk.js';
+
+module.exports = {
+  mode: isProdBuild ? 'production' : 'development',
+  entry: {
+    app: './src/hassio-app.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['es2015', { modules: false }]
+            ],
+            plugins: [
+              // Only support the syntax, Webpack will handle it.
+              "syntax-dynamic-import",
+            ],
+          },
+        },
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __DEV__: JSON.stringify(!isProdBuild),
+      __VERSION__: JSON.stringify(VERSION),
+    })
+  ],
+  output: {
+    filename: '[name].js',
+    chunkFilename: chunkFilename,
+    path: config.buildDir,
+    publicPath: config.publicPath,
+  }
+};

package.json

@@ -10,7 +10,7 @@
     "clean": "rm -rf build/* build-temp/* build-es5/* build-temp-es5/* build-translations/*",
     "build": "script/build_frontend",
     "dev": "npm run gulp ru_all gen-service-worker",
-    "lint_js": "eslint src hassio test-mocha",
+    "lint_js": "eslint src hassio/src test-mocha",
     "lint_html": "polymer lint",
     "mocha": "node_modules/.bin/mocha --opts test-mocha/mocha.opts",
     "test": "npm run lint_js && npm run lint_html && npm run mocha"

polymer.json

@@ -16,7 +16,8 @@
     "src/panels/logbook/ha-panel-logbook.js",
     "src/panels/map/ha-panel-map.js",
     "src/panels/shopping-list/ha-panel-shopping-list.js",
-    "src/panels/mailbox/ha-panel-mailbox.js"
+    "src/panels/mailbox/ha-panel-mailbox.js",
+    "hassio/src/hassio-app.js"
   ],
   "sources": [
     "src/**/*",

script/build_frontend

@@ -16,7 +16,7 @@ cp -r public/__init__.py $OUTPUT_DIR_ES5/
 
 # Build frontend
 BUILD_DEV=0 ./node_modules/.bin/gulp build-translations authorize authorize-es5
-NODE_ENV=production webpack -p
+NODE_ENV=production ./node_modules/.bin/webpack -p
 
 # Icons
 script/update_mdi.py
@@ -24,8 +24,8 @@ script/update_mdi.py
 ./node_modules/.bin/gulp compress
 
 # Stub the service worker
-touch hass_frontend/service_worker.js
-touch hass_frontend_es5/service_worker.js
+touch $OUTPUT_DIR/service_worker.js
+touch $OUTPUT_DIR_ES5/service_worker.js
 
 # Generate the __init__ file
 echo "VERSION = '`git rev-parse HEAD`'" >> $OUTPUT_DIR/__init__.py

script/develop

@@ -0,0 +1,20 @@
+#!/bin/sh
+# Run the frontend development server
+
+# Stop on errors
+set -e
+
+OUTPUT_DIR=hass_frontend
+
+rm -rf $OUTPUT_DIR
+cp -r public $OUTPUT_DIR
+
+./node_modules/.bin/gulp build-translations authorize authorize-es5
+
+# Icons
+script/update_mdi.py
+
+# Stub the service worker
+touch $OUTPUT_DIR/service_worker.js
+
+./node_modules/.bin/webpack --watch --progress

src/panels/hassio/ha-panel-hassio.js

@@ -1,6 +1,8 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
+import config from '../../../hassio/config.js';
+
 class HaPanelHassio extends PolymerElement {
   static get template() {
     return html`
@@ -29,7 +31,7 @@ class HaPanelHassio extends PolymerElement {
       iframeUrl: {
         type: String,
         value: __DEV__ ?
-          '/home-assistant-polymer/hassio/index.html' : '/api/hassio/app-es5/index.html',
+          '/home-assistant-polymer/hassio/build-es5/index.html' : `${config.publicPath}/index.html`,
       }
     };
   }