Lovelace cleanups (#3427)

* Improvements

* Add types CAF

* Fix demo switching

* Do not set background color in hui-view

build-scripts/gulp/demo.js

@@ -1,4 +1,4 @@
-// Run HA develop mode
+// Run demo develop mode
 const gulp = require("gulp");
 
 require("./clean.js");

build-scripts/gulp/webpack.js

@@ -84,12 +84,12 @@ gulp.task("webpack-dev-server-demo", () => {
     open: true,
     watchContentBase: true,
     contentBase: path.resolve(paths.demo_dir, "dist"),
-  }).listen(8080, "localhost", function(err) {
+  }).listen(8090, "localhost", function(err) {
     if (err) {
       throw err;
     }
     // Server listening
-    log("[webpack-dev-server]", "http://localhost:8080");
+    log("[webpack-dev-server]", "http://localhost:8090");
   });
 });
 

build-scripts/webpack.js

@@ -96,7 +96,7 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
   // Create an object mapping browser urls to their paths during build
   const translationMetadata = require("../build-translations/translationMetadata.json");
   const workBoxTranslationsTemplatedURLs = {};
-  const englishFP = translationMetadata["translations"]["en"]["fingerprints"];
+  const englishFP = translationMetadata.translations.en.fingerprints;
   Object.keys(englishFP).forEach((key) => {
     workBoxTranslationsTemplatedURLs[
       `/static/translations/${englishFP[key]}`
@@ -192,7 +192,7 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
       new webpack.DefinePlugin({
         __DEV__: !isProdBuild,
         __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-        __VERSION__: JSON.stringify("DEMO"),
+        __VERSION__: JSON.stringify(`DEMO-${version}`),
         __DEMO__: true,
         __STATIC_PATH__: "/static/",
         "process.env.NODE_ENV": JSON.stringify(