diff --git a/.gitignore b/.gitignore index 866eca9a7a..e9f2208381 100644 --- a/.gitignore +++ b/.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/* diff --git a/.travis.yml b/.travis.yml index 03eee93e5a..4b357440b7 100644 --- a/.travis.yml +++ b/.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' diff --git a/gulp/tasks/hassio-panel.js b/gulp/tasks/hassio-panel.js deleted file mode 100755 index a2c01b94b4..0000000000 --- a/gulp/tasks/hassio-panel.js +++ /dev/null @@ -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 = ""; - -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([['', 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', -)); diff --git a/hassio/config.js b/hassio/config.js new file mode 100644 index 0000000000..fbffc770d5 --- /dev/null +++ b/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' +} \ No newline at end of file diff --git a/hassio/index.html b/hassio/index.html index d5a816c12a..ebf68f9646 100644 --- a/hassio/index.html +++ b/hassio/index.html @@ -29,8 +29,7 @@ addScript('/static/webcomponents-bundle.js'); } - - + diff --git a/hassio/script/build_hassio b/hassio/script/build_hassio new file mode 100755 index 0000000000..eac3313364 --- /dev/null +++ b/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 diff --git a/hassio/script/develop b/hassio/script/develop new file mode 100755 index 0000000000..a74c1e178e --- /dev/null +++ b/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 diff --git a/hassio/script/gen-index-html.js b/hassio/script/gen-index-html.js new file mode 100755 index 0000000000..3fdb31651e --- /dev/null +++ b/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 = [ + [ + '', + "" + ], +]; + +for (item of toReplace) { + index = index.replace(item[0], item[1]); +} + +fs.writeFileSync(`${config.buildDir}/index.html`, index); diff --git a/hassio/addon-store/hassio-addon-repository.js b/hassio/src/addon-store/hassio-addon-repository.js similarity index 92% rename from hassio/addon-store/hassio-addon-repository.js rename to hassio/src/addon-store/hassio-addon-repository.js index d4a0afb687..c18d55ec91 100644 --- a/hassio/addon-store/hassio-addon-repository.js +++ b/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() { diff --git a/hassio/addon-store/hassio-addon-store.js b/hassio/src/addon-store/hassio-addon-store.js similarity index 100% rename from hassio/addon-store/hassio-addon-store.js rename to hassio/src/addon-store/hassio-addon-store.js diff --git a/hassio/addon-store/hassio-repositories-editor.js b/hassio/src/addon-store/hassio-repositories-editor.js similarity index 94% rename from hassio/addon-store/hassio-repositories-editor.js rename to hassio/src/addon-store/hassio-repositories-editor.js index bf8e945286..8713cd1012 100644 --- a/hassio/addon-store/hassio-repositories-editor.js +++ b/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() { diff --git a/hassio/addon-view/hassio-addon-audio.js b/hassio/src/addon-view/hassio-addon-audio.js similarity index 97% rename from hassio/addon-view/hassio-addon-audio.js rename to hassio/src/addon-view/hassio-addon-audio.js index 283ee44fb2..3286da55a0 100644 --- a/hassio/addon-view/hassio-addon-audio.js +++ b/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() { diff --git a/hassio/addon-view/hassio-addon-config.js b/hassio/src/addon-view/hassio-addon-config.js similarity index 97% rename from hassio/addon-view/hassio-addon-config.js rename to hassio/src/addon-view/hassio-addon-config.js index 0f7bd4d3fa..9d7b275ec4 100644 --- a/hassio/addon-view/hassio-addon-config.js +++ b/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() { diff --git a/hassio/addon-view/hassio-addon-info.js b/hassio/src/addon-view/hassio-addon-info.js similarity index 96% rename from hassio/addon-view/hassio-addon-info.js rename to hassio/src/addon-view/hassio-addon-info.js index b8734c04f5..5bc2104022 100644 --- a/hassio/addon-view/hassio-addon-info.js +++ b/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() { diff --git a/hassio/addon-view/hassio-addon-logs.js b/hassio/src/addon-view/hassio-addon-logs.js similarity index 96% rename from hassio/addon-view/hassio-addon-logs.js rename to hassio/src/addon-view/hassio-addon-logs.js index 0adfede6b1..fb3d44a792 100644 --- a/hassio/addon-view/hassio-addon-logs.js +++ b/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() { diff --git a/hassio/addon-view/hassio-addon-network.js b/hassio/src/addon-view/hassio-addon-network.js similarity index 94% rename from hassio/addon-view/hassio-addon-network.js rename to hassio/src/addon-view/hassio-addon-network.js index 7655b6e268..33d6f28d9c 100644 --- a/hassio/addon-view/hassio-addon-network.js +++ b/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() { diff --git a/hassio/addon-view/hassio-addon-view.js b/hassio/src/addon-view/hassio-addon-view.js similarity index 97% rename from hassio/addon-view/hassio-addon-view.js rename to hassio/src/addon-view/hassio-addon-view.js index 5d4a711a31..60ce009cb1 100644 --- a/hassio/addon-view/hassio-addon-view.js +++ b/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'; diff --git a/hassio/dashboard/hassio-addons.js b/hassio/src/dashboard/hassio-addons.js similarity index 92% rename from hassio/dashboard/hassio-addons.js rename to hassio/src/dashboard/hassio-addons.js index 8ccc3591e6..5df294709a 100644 --- a/hassio/dashboard/hassio-addons.js +++ b/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() { diff --git a/hassio/dashboard/hassio-dashboard.js b/hassio/src/dashboard/hassio-dashboard.js similarity index 92% rename from hassio/dashboard/hassio-dashboard.js rename to hassio/src/dashboard/hassio-dashboard.js index 67bebbf3e6..da41ee9e19 100644 --- a/hassio/dashboard/hassio-dashboard.js +++ b/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() { diff --git a/hassio/dashboard/hassio-hass-update.js b/hassio/src/dashboard/hassio-hass-update.js similarity index 93% rename from hassio/dashboard/hassio-hass-update.js rename to hassio/src/dashboard/hassio-hass-update.js index 86b0c102bc..814cca680e 100644 --- a/hassio/dashboard/hassio-hass-update.js +++ b/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() { diff --git a/hassio/hassio-app.js b/hassio/src/hassio-app.js similarity index 90% rename from hassio/hassio-app.js rename to hassio/src/hassio-app.js index 23c45d0cc8..f0c7b7fedf 100644 --- a/hassio/hassio-app.js +++ b/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 { diff --git a/hassio/hassio-data.js b/hassio/src/hassio-data.js similarity index 100% rename from hassio/hassio-data.js rename to hassio/src/hassio-data.js diff --git a/hassio/hassio-main.js b/hassio/src/hassio-main.js similarity index 93% rename from hassio/hassio-main.js rename to hassio/src/hassio-main.js index c7b65418a2..c7ff824754 100644 --- a/hassio/hassio-main.js +++ b/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() { diff --git a/hassio/hassio-markdown-dialog.js b/hassio/src/hassio-markdown-dialog.js similarity index 95% rename from hassio/hassio-markdown-dialog.js rename to hassio/src/hassio-markdown-dialog.js index dde813111f..956a2abaa9 100644 --- a/hassio/hassio-markdown-dialog.js +++ b/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() { diff --git a/hassio/hassio-pages-with-tabs.js b/hassio/src/hassio-pages-with-tabs.js similarity index 96% rename from hassio/hassio-pages-with-tabs.js rename to hassio/src/hassio-pages-with-tabs.js index 30ac4d2a70..ffdd070001 100644 --- a/hassio/hassio-pages-with-tabs.js +++ b/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() { diff --git a/hassio/snapshots/hassio-snapshot.js b/hassio/src/snapshots/hassio-snapshot.js similarity index 99% rename from hassio/snapshots/hassio-snapshot.js rename to hassio/src/snapshots/hassio-snapshot.js index aca817d7bd..7aa1828a78 100644 --- a/hassio/snapshots/hassio-snapshot.js +++ b/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() { diff --git a/hassio/snapshots/hassio-snapshots.js b/hassio/src/snapshots/hassio-snapshots.js similarity index 97% rename from hassio/snapshots/hassio-snapshots.js rename to hassio/src/snapshots/hassio-snapshots.js index 831fd472b3..06a2175115 100644 --- a/hassio/snapshots/hassio-snapshots.js +++ b/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() { diff --git a/hassio/system/hassio-host-info.js b/hassio/src/system/hassio-host-info.js similarity index 97% rename from hassio/system/hassio-host-info.js rename to hassio/src/system/hassio-host-info.js index 0e8380a2fa..3412d45ef8 100644 --- a/hassio/system/hassio-host-info.js +++ b/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() { diff --git a/hassio/system/hassio-supervisor-info.js b/hassio/src/system/hassio-supervisor-info.js similarity index 97% rename from hassio/system/hassio-supervisor-info.js rename to hassio/src/system/hassio-supervisor-info.js index 79fe2f94c8..dfdf35f72c 100644 --- a/hassio/system/hassio-supervisor-info.js +++ b/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() { diff --git a/hassio/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js similarity index 100% rename from hassio/system/hassio-supervisor-log.js rename to hassio/src/system/hassio-supervisor-log.js diff --git a/hassio/system/hassio-system.js b/hassio/src/system/hassio-system.js similarity index 100% rename from hassio/system/hassio-system.js rename to hassio/src/system/hassio-system.js diff --git a/hassio/webpack.config.js b/hassio/webpack.config.js new file mode 100644 index 0000000000..4bc2abf15b --- /dev/null +++ b/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, + } +}; diff --git a/package.json b/package.json index 1867a0081d..29fcc3518e 100644 --- a/package.json +++ b/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" diff --git a/polymer.json b/polymer.json index 4a329fe02a..84d9616c77 100644 --- a/polymer.json +++ b/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/**/*", diff --git a/script/build_frontend b/script/build_frontend index 45cbe04c2c..9d775870ba 100755 --- a/script/build_frontend +++ b/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 diff --git a/script/develop b/script/develop new file mode 100755 index 0000000000..5b22330206 --- /dev/null +++ b/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 diff --git a/src/panels/hassio/ha-panel-hassio.js b/src/panels/hassio/ha-panel-hassio.js index 19c90b22fe..40dfb487db 100644 --- a/src/panels/hassio/ha-panel-hassio.js +++ b/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`, } }; }