From 3d90d1d016659898fa9627005cc871829b19b0ba Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 20 Nov 2017 21:52:35 -0800
Subject: [PATCH] Tweak index.html (#657)

---
 gulp/tasks/gen-index-html.js   | 24 +++++++++++++++++++-----
 index.html                     | 21 ++++-----------------
 js/compatibility.js            |  1 +
 js/core.js                     |  2 +-
 package.json                   |  3 ++-
 src/util/hass-translation.html |  2 +-
 yarn.lock                      |  4 ++++
 7 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/gulp/tasks/gen-index-html.js b/gulp/tasks/gen-index-html.js
index d1b89162fe..37567bb221 100644
--- a/gulp/tasks/gen-index-html.js
+++ b/gulp/tasks/gen-index-html.js
@@ -3,7 +3,8 @@ const replace = require('gulp-batch-replace');
 const path = require('path');
 const url = require('url');
 const config = require('../config');
-const md5 = require('../common/md5.js');
+const md5 = require('../common/md5');
+const { minifyStream } = require('../common/transform');
 
 const buildReplaces = {
   '/home-assistant-polymer/build/core.js': 'core.js',
@@ -15,16 +16,26 @@ function generateIndex(es6) {
   const targetUrl = es6 ? '/frontend_latest/' : '/frontend_es5/';
 
   const toReplace = [
+    // Needs to look like a color during CSS minifiaction
+    ['{{ theme_color }}', '#THEME'],
     ['/home-assistant-polymer/hass_frontend/mdi.html',
       `/static/mdi-${md5(path.resolve(config.output, 'mdi.html'))}.html`],
-    ['/home-assistant-polymer/build-temp-es5/compatibility.js',
-      `/static/compatibility-${md5(path.resolve(config.output_es5, 'compatibility.js'))}.js`],
   ];
 
   if (!es6) {
     toReplace.push([
       '/service_worker.js', '/service_worker_es5.js'
     ]);
+
+    const compatibilityPath = `/frontend_es5/compatibility-${md5(path.resolve(config.output_es5, 'compatibility.js'))}.js`;
+    const es5Extra = `
+    <script src='${compatibilityPath}'></script>
+    <script src='/frontend_es5/custom-elements-es5-adapter.js'></script>
+    `;
+
+    toReplace.push([
+      '<!--EXTRA_SCRIPTS-->', es5Extra
+    ]);
   }
 
   for (const [replaceSearch, filename] of Object.entries(buildReplaces)) {
@@ -35,8 +46,11 @@ function generateIndex(es6) {
       url.resolve(targetUrl, `${parsed.name}-${hash}${parsed.ext}`)]);
   }
 
-  gulp.src(path.resolve(config.polymer_dir, 'index.html'))
-    .pipe(replace(toReplace))
+  const stream = gulp.src(path.resolve(config.polymer_dir, 'index.html'))
+    .pipe(replace(toReplace));
+
+  return minifyStream(stream, es6)
+    .pipe(replace([['#THEME', '{{ theme_color }}']]))
     .pipe(gulp.dest(targetPath));
 }
 
diff --git a/index.html b/index.html
index 74efb35a89..b19abe953b 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
       function initError() {
         document.getElementById('ha-init-skeleton').classList.add('error');
       };
-      window.noAuth = {{ no_auth }};
+      window.noAuth = '{{ no_auth }}';
       window.Polymer = {
         lazyRegister: true,
         useNativeCSSProperties: true,
@@ -76,22 +76,9 @@
       </div>
     </div>
     <home-assistant></home-assistant>
-    {# <script src='/home-assistant-polymer/build/_demo_data_compiled.js'></script> -#}
-    {% if not latest -%}
-    <script>
-      var compatibilityRequired = (typeof Object.assign != 'function');
-      if (compatibilityRequired) {
-        var e = document.createElement('script');
-        e.onerror = initError;
-        e.src = '/home-assistant-polymer/build-temp-es5/compatibility.js';
-        document.head.appendChild(e);
-      }
-    </script>
-    {% endif -%}
+    <!--<script src='/home-assistant-polymer/build/_demo_data_compiled.js'></script>-->
+    <!--EXTRA_SCRIPTS-->
     <script src='/home-assistant-polymer/build/core.js'></script>
-    {% if not dev_mode and not latest -%}
-    <script src='/frontend_es5/custom-elements-es5-adapter.js'></script>
-    {% endif -%}
     <script>
       var webComponentsSupported = (
         'customElements' in window &&
@@ -111,7 +98,7 @@
     </script>
     <link rel='import' href='/home-assistant-polymer/src/home-assistant.html' onerror='initError()'>
     {% if panel_url -%}
-      <link rel='import' href='{{ panel_url }}' onerror='initError()' async>
+      <link rel='import' href='{{ panel_url }}' async>
     {% endif -%}
     <link rel='import' href='/home-assistant-polymer/hass_frontend/mdi.html' async>
     {% for extra_url in extra_urls -%}
diff --git a/js/compatibility.js b/js/compatibility.js
index 2b5acb2b18..b3edbda996 100644
--- a/js/compatibility.js
+++ b/js/compatibility.js
@@ -1,3 +1,4 @@
+import 'unfetch/polyfill';
 import objAssign from 'es6-object-assign';
 
 objAssign.polyfill();
diff --git a/js/core.js b/js/core.js
index ed8ce8425e..2553bc51f8 100644
--- a/js/core.js
+++ b/js/core.js
@@ -23,7 +23,7 @@ const init = window.createHassConnection = function (password) {
     });
 };
 
-if (window.noAuth) {
+if (window.noAuth === '1') {
   window.hassConnection = init();
 } else if (window.localStorage.authToken) {
   window.hassConnection = init(window.localStorage.authToken);
diff --git a/package.json b/package.json
index eee3d19151..33b1eff398 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,8 @@
     "run-sequence": "^2.2.0",
     "sw-precache": "^5.2.0",
     "uglify-es": "^3.1.9",
-    "uglify-js": "^3.1.9"
+    "uglify-js": "^3.1.9",
+    "unfetch": "^3.0.0"
   },
   "devDependencies": {
     "web-component-tester": "^6.4.0"
diff --git a/src/util/hass-translation.html b/src/util/hass-translation.html
index b0570e05e6..45b25e05e4 100644
--- a/src/util/hass-translation.html
+++ b/src/util/hass-translation.html
@@ -74,7 +74,7 @@ window.getTranslation = function (translationInput) {
   // Create a promise to fetch translation from the server
   if (!translations[translationFingerprint]) {
     translations[translationFingerprint] =
-      fetch('/static/translations/' + translationFingerprint)
+      fetch(`/static/translations/${translationFingerprint}`)
         .then(response => response.json()).then(data => ({
           language: translation,
           resources: {
diff --git a/yarn.lock b/yarn.lock
index 914d1ba26a..af7748e03d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7884,6 +7884,10 @@ underscore@~1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
 
+unfetch@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-3.0.0.tgz#8d1e0513a4ecd0e5ff2d41a6ba77771aae8b6482"
+
 unique-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"