Hash demo files in index.html (#3185)

build-scripts/gulp/app.js

@@ -20,7 +20,7 @@ gulp.task(
       "gen-service-worker-dev",
       "gen-icons",
       "gen-pages-dev",
-      "gen-index-html-dev",
+      "gen-index-app-dev",
       "build-translations"
     ),
     "copy-static",
@@ -44,7 +44,7 @@ gulp.task(
     ),
     gulp.parallel(
       "gen-pages-prod",
-      "gen-index-html-prod",
+      "gen-index-app-prod",
       "gen-service-worker-prod"
     )
   )

build-scripts/gulp/demo.js

@@ -16,7 +16,12 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-demo",
-    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    gulp.parallel(
+      "gen-icons",
+      "gen-icons-demo",
+      "gen-index-demo-dev",
+      "build-translations"
+    ),
     "copy-static-demo",
     "webpack-dev-server-demo"
   )
@@ -31,6 +36,7 @@ gulp.task(
     "clean-demo",
     gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
     "copy-static-demo",
-    "webpack-prod-demo"
+    "webpack-prod-demo",
+    "gen-index-demo-prod"
   )
 );

build-scripts/gulp/entry-html.js

@@ -11,13 +11,19 @@ const config = require("../paths.js");
 const templatePath = (tpl) =>
   path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
 
+const demoTemplatePath = (tpl) =>
+  path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`);
+
 const readFile = (pth) => fs.readFileSync(pth).toString();
 
-const renderTemplate = (pth, data = {}) => {
-  const compiled = template(readFile(templatePath(pth)));
+const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
+  const compiled = template(readFile(pathFunc(pth)));
   return compiled({ ...data, renderTemplate });
 };
 
+const renderDemoTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, demoTemplatePath);
+
 const minifyHtml = (content) =>
   minify(content, {
     collapseWhitespace: true,
@@ -66,7 +72,7 @@ gulp.task("gen-pages-prod", (done) => {
   done();
 });
 
-gulp.task("gen-index-html-dev", (done) => {
+gulp.task("gen-index-app-dev", (done) => {
   // In dev mode we don't mangle names, so we hardcode urls. That way we can
   // run webpack as last in watch mode, which blocks output.
   const content = renderTemplate("index", {
@@ -86,7 +92,7 @@ gulp.task("gen-index-html-dev", (done) => {
   done();
 });
 
-gulp.task("gen-index-html-prod", (done) => {
+gulp.task("gen-index-app-prod", (done) => {
   const latestManifest = require(path.resolve(config.output, "manifest.json"));
   const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
   const content = renderTemplate("index", {
@@ -106,3 +112,52 @@ gulp.task("gen-index-html-prod", (done) => {
   fs.outputFileSync(path.resolve(config.root, "index.html"), minified);
   done();
 });
+
+gulp.task("gen-index-demo-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-demo-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-demo-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.demo_output,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    config.demo_output_es5,
+    "manifest.json"
+  ));
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: latestManifest["main.js"],
+
+    es5Compatibility: es5Manifest["compatibility.js"],
+    es5DemoJS: es5Manifest["main.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
+  done();
+});

build-scripts/paths.js

@@ -13,5 +13,5 @@ module.exports = {
   demo_root: path.resolve(__dirname, "../demo/dist"),
   demo_static: path.resolve(__dirname, "../demo/dist/static"),
   demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"),
-  demo_output_es5: path.resolve(__dirname, "../demo/frontend_es5"),
+  demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
 };

build-scripts/webpack.js

@@ -20,6 +20,12 @@ version = version[0];
 const genMode = (isProdBuild) => (isProdBuild ? "production" : "development");
 const genDevTool = (isProdBuild) =>
   isProdBuild ? "cheap-source-map" : "inline-cheap-module-source-map";
+const genFilename = (isProdBuild, dontHash = new Set()) => ({ chunk }) => {
+  if (!isProdBuild || dontHash.has(chunk.name)) {
+    return `${chunk.name}.js`;
+  }
+  return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
+};
 const genChunkFilename = (isProdBuild, isStatsBuild) =>
   isProdBuild && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
 
@@ -158,14 +164,7 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
         }),
     ].filter(Boolean),
     output: {
-      filename: ({ chunk }) => {
-        const dontHash = new Set([
-          // Files who'se names should not be hashed.
-          // We currently have none.
-        ]);
-        if (!isProdBuild || dontHash.has(chunk.name)) return `${chunk.name}.js`;
-        return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
-      },
+      filename: genFilename(isProdBuild),
       chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
       path: latestBuild ? paths.output : paths.output_es5,
       publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
@@ -187,6 +186,7 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
     },
     optimization: optimization(latestBuild),
     plugins: [
+      new ManifestPlugin(),
       new webpack.DefinePlugin({
         __DEV__: !isProdBuild,
         __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
@@ -201,7 +201,7 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
     ].filter(Boolean),
     resolve,
     output: {
-      filename: "[name].js",
+      filename: genFilename(isProdBuild),
       chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
       path: path.resolve(
         paths.demo_root,

demo/script/gen-icons.js

@@ -1,15 +0,0 @@
-#!/usr/bin/env node
-const fs = require("fs");
-const {
-  findIcons,
-  generateIconset,
-  genMDIIcons,
-} = require("../../build-scripts/gulp/gen-icons.js");
-
-function genHademoIcons() {
-  const iconNames = findIcons("./src", "hademo");
-  fs.writeFileSync("./hademo-icons.html", generateIconset("hademo", iconNames));
-}
-
-genMDIIcons();
-genHademoIcons();

demo/src/html/index.html.template

@@ -95,43 +95,17 @@
   <body>
     <div id="ha-init-skeleton"></div>
     <ha-demo></ha-demo>
-    <script>
-      function _ls(src) {
-        var doc = document.documentElement;
-        var script = doc.insertBefore(
-          document.createElement("script"),
-          doc.lastChild
-        );
-        script.type = "text/javascript";
-        script.src = src;
-      }
-      window.Polymer = {
-        lazyRegister: true,
-        useNativeCSSProperties: true,
-        dom: "shadow",
-        suppressTemplateNotifications: true,
-        suppressBindingNotifications: true,
-      };
-      var webComponentsSupported =
-        "customElements" in window &&
-        "content" in document.createElement("template");
-      if (!webComponentsSupported) {
-        _ls("/static/polyfills/webcomponents-bundle.js");
-      }
-      var isS101 = /\s+Version\/10\.1(?:\.\d+)?\s+Safari\//.test(
-        navigator.userAgent
-      );
-    </script>
+    <%= renderTemplate('_js_base') %>
 
-    <script type="module" src="./frontend_latest/main.js"></script>
+    <script type="module" src="<%= latestDemoJS %>"></script>
 
     <script nomodule>
       (function() {
         // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
         if (!isS101) {
-          _ls("./static/polyfills/custom-elements-es5-adapter.js");
-          _ls("./frontend_es5/compatibility.js");
-          _ls("./frontend_es5/main.js");
+          _ls("/static/polyfills/custom-elements-es5-adapter.js");
+          _ls("<%= es5Compatibility %>");
+          _ls("<%= es5DemoJS %>");
         }
       })();
     </script>