Tweak index.html (#657)

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'))
+  const stream = gulp.src(path.resolve(config.polymer_dir, 'index.html'))
-    .pipe(replace(toReplace))
+    .pipe(replace(toReplace));
+
+  return minifyStream(stream, es6)
+    .pipe(replace([['#THEME', '{{ theme_color }}']]))
     .pipe(gulp.dest(targetPath));
 }
 

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> -#}
+    <!--<script src='/home-assistant-polymer/build/_demo_data_compiled.js'></script>-->
-    {% if not latest -%}
+    <!--EXTRA_SCRIPTS-->
-    <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/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 -%}

js/compatibility.js

@@ -1,3 +1,4 @@
+import 'unfetch/polyfill';
 import objAssign from 'es6-object-assign';
 
 objAssign.polyfill();

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);

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"

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: {

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"