Streamline HTML generation and consolidate templates (#16117)

build-scripts/gulp/app.cjs

@@ -24,8 +24,7 @@ gulp.task(
     gulp.parallel(
       "gen-service-worker-app-dev",
       "gen-icons-json",
-      "gen-pages-dev",
+      "gen-pages-app-dev",
-      "gen-index-app-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -50,10 +49,6 @@ gulp.task(
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     // Don't compress running tests
     ...(env.isTestBuild() ? [] : ["compress-app"]),
-    gulp.parallel(
+    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod")
-      "gen-pages-prod",
-      "gen-index-app-prod",
-      "gen-service-worker-app-prod"
-    )
   )
 );

build-scripts/gulp/cast.cjs

@@ -19,7 +19,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
-    "gen-index-cast-dev",
+    "gen-pages-cast-dev",
     env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
   )
 );
@@ -35,6 +35,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
-    "gen-index-cast-prod"
+    "gen-pages-cast-prod"
   )
 );

build-scripts/gulp/demo.cjs

@@ -21,7 +21,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel(
       "gen-icons-json",
-      "gen-index-demo-dev",
+      "gen-pages-demo-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -42,6 +42,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
-    "gen-index-demo-prod"
+    "gen-pages-demo-prod"
   )
 );

build-scripts/gulp/entry-html.cjs

@@ -8,344 +8,223 @@ const paths = require("../paths.cjs");
 const env = require("../env.cjs");
 const { htmlMinifierOptions, terserOptions } = require("../bundle.cjs");
 
-const templatePath = (tpl) =>
+const renderTemplate = (templateFile, data = {}) => {
-  path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
+  const compiled = template(
-
+    fs.readFileSync(templateFile, { encoding: "utf-8" })
-const readFile = (pth) => fs.readFileSync(pth).toString();
+  );
-
-const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
-  const compiled = template(readFile(pathFunc(pth)));
   return compiled({
     ...data,
     useRollup: env.useRollup(),
     useWDS: env.useWDS(),
-    renderTemplate,
+    // Resolve any child/nested templates relative to the parent and pass the same data
+    renderTemplate: (childTemplate) =>
+      renderTemplate(
+        path.resolve(path.dirname(templateFile), childTemplate),
+        data
+      ),
   });
 };
 
-const renderDemoTemplate = (pth, data = {}) =>
+const WRAP_TAGS = { ".js": "script", ".css": "style" };
-  renderTemplate(pth, data, (tpl) =>
-    path.resolve(paths.demo_dir, "src/html/", `${tpl}.html.template`)
-  );
 
-const renderCastTemplate = (pth, data = {}) =>
+const minifyHtml = (content, ext) => {
-  renderTemplate(pth, data, (tpl) =>
+  const wrapTag = WRAP_TAGS[ext] || "";
-    path.resolve(paths.cast_dir, "src/html/", `${tpl}.html.template`)
+  const begTag = wrapTag && `<${wrapTag}>`;
-  );
+  const endTag = wrapTag && `</${wrapTag}>`;
-
+  return minify(begTag + content + endTag, {
-const renderGalleryTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, (tpl) =>
-    path.resolve(paths.gallery_dir, "src/html/", `${tpl}.html.template`)
-  );
-
-const minifyHtml = (content) =>
-  minify(content, {
     ...htmlMinifierOptions,
     conservativeCollapse: false,
     minifyJS: terserOptions({
       latestBuild: false, // Shared scripts should be ES5
       isTestBuild: true, // Don't need source maps
     }),
-  });
+  }).then((wrapped) =>
-
+    wrapTag ? wrapped.slice(begTag.length, -endTag.length) : wrapped
-const PAGES = ["onboarding", "authorize"];
-
-gulp.task("gen-pages-dev", (done) => {
-  for (const page of PAGES) {
-    const content = renderTemplate(page, {
-      latestPageJS: `/frontend_latest/${page}.js`,
-
-      es5PageJS: `/frontend_es5/${page}.js`,
-    });
-
-    fs.outputFileSync(
-      path.resolve(paths.app_output_root, `${page}.html`),
-      content
   );
+};
+
+// Function to generate a dev task for each project's configuration
+// Note Currently WDS paths are hard-coded to only work for app
+const genPagesDevTask =
+  (
+    pageEntries,
+    inputRoot,
+    outputRoot,
+    useWDS = false,
+    inputSub = "src/html",
+    publicRoot = ""
+  ) =>
+  async () => {
+    for (const [page, entries] of Object.entries(pageEntries)) {
+      const content = renderTemplate(
+        path.resolve(inputRoot, inputSub, `${page}.template`),
+        {
+          latestEntryJS: entries.map((entry) =>
+            useWDS
+              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
+              : `${publicRoot}/frontend_latest/${entry}.js`
+          ),
+          es5EntryJS: entries.map(
+            (entry) => `${publicRoot}/frontend_es5/${entry}.js`
+          ),
+          latestCustomPanelJS: useWDS
+            ? "http://localhost:8000/src/entrypoints/custom-panel.ts"
+            : `${publicRoot}/frontend_latest/custom-panel.js`,
+          es5CustomPanelJS: `${publicRoot}/frontend_es5/custom-panel.js`,
         }
-  done();
+      );
-});
+      fs.outputFileSync(path.resolve(outputRoot, page), content);
-
+    }
-gulp.task("gen-pages-prod", async () => {
+  };
-  const latestManifest = require(path.resolve(
-    paths.app_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.app_output_es5,
-    "manifest.json"
-  ));
 
+// Same as previous but for production builds
+// (includes minification and hashed file names from manifest)
+const genPagesProdTask =
+  (
+    pageEntries,
+    inputRoot,
+    outputRoot,
+    outputLatest,
+    outputES5,
+    inputSub = "src/html"
+  ) =>
+  async () => {
+    const latestManifest = require(path.resolve(outputLatest, "manifest.json"));
+    const es5Manifest = outputES5
+      ? require(path.resolve(outputES5, "manifest.json"))
+      : {};
     const minifiedHTML = [];
-  for (const page of PAGES) {
+    for (const [page, entries] of Object.entries(pageEntries)) {
-    const content = renderTemplate(page, {
+      const content = renderTemplate(
-      latestPageJS: latestManifest[`${page}.js`],
+        path.resolve(inputRoot, inputSub, `${page}.template`),
-      es5PageJS: es5Manifest[`${page}.js`],
+        {
-    });
+          latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
-
+          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
+          latestCustomPanelJS: latestManifest["custom-panel.js"],
+          es5CustomPanelJS: es5Manifest["custom-panel.js"],
+        }
+      );
       minifiedHTML.push(
-      minifyHtml(content).then((minified) =>
+        minifyHtml(content, path.extname(page)).then((minified) =>
-        fs.outputFileSync(
+          fs.outputFileSync(path.resolve(outputRoot, page), minified)
-          path.resolve(paths.app_output_root, `${page}.html`),
-          minified
-        )
         )
       );
     }
     await Promise.all(minifiedHTML);
-});
+  };
 
-gulp.task("gen-index-app-dev", (done) => {
+// Map HTML pages to their required entrypoints
-  let latestAppJS;
+const APP_PAGE_ENTRIES = {
-  let latestCoreJS;
+  "authorize.html": ["authorize"],
-  let latestCustomPanelJS;
+  "onboarding.html": ["onboarding"],
+  "index.html": ["core", "app"],
+};
 
-  if (env.useWDS()) {
+gulp.task(
-    latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
+  "gen-pages-app-dev",
-    latestCoreJS = "http://localhost:8000/src/entrypoints/core.ts";
+  genPagesDevTask(
-    latestCustomPanelJS =
+    APP_PAGE_ENTRIES,
-      "http://localhost:8000/src/entrypoints/custom-panel.ts";
+    paths.polymer_dir,
-  } else {
+    paths.app_output_root,
-    latestAppJS = "/frontend_latest/app.js";
+    env.useWDS()
-    latestCoreJS = "/frontend_latest/core.js";
+  )
-    latestCustomPanelJS = "/frontend_latest/custom-panel.js";
+);
-  }
 
-  const content = renderTemplate("index", {
+gulp.task(
-    latestAppJS,
+  "gen-pages-app-prod",
-    latestCoreJS,
+  genPagesProdTask(
-    latestCustomPanelJS,
+    APP_PAGE_ENTRIES,
-
+    paths.polymer_dir,
-    es5AppJS: "/frontend_es5/app.js",
+    paths.app_output_root,
-    es5CoreJS: "/frontend_es5/core.js",
-    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
-  }).replace(/#THEMEC/g, "{{ theme_color }}");
-
-  fs.outputFileSync(path.resolve(paths.app_output_root, "index.html"), content);
-  done();
-});
-
-gulp.task("gen-index-app-prod", async () => {
-  const latestManifest = require(path.resolve(
     paths.app_output_latest,
-    "manifest.json"
+    paths.app_output_es5
-  ));
+  )
-  const es5Manifest = require(path.resolve(
-    paths.app_output_es5,
-    "manifest.json"
-  ));
-  const content = renderTemplate("index", {
-    latestAppJS: latestManifest["app.js"],
-    latestCoreJS: latestManifest["core.js"],
-    latestCustomPanelJS: latestManifest["custom-panel.js"],
-
-    es5AppJS: es5Manifest["app.js"],
-    es5CoreJS: es5Manifest["core.js"],
-    es5CustomPanelJS: es5Manifest["custom-panel.js"],
-  });
-  const minified = (await minifyHtml(content)).replace(
-    /#THEMEC/g,
-    "{{ theme_color }}"
 );
 
-  fs.outputFileSync(
+const CAST_PAGE_ENTRIES = {
-    path.resolve(paths.app_output_root, "index.html"),
+  "faq.html": ["launcher"],
-    minified
+  "index.html": ["launcher"],
-  );
+  "media.html": ["media"],
-});
+  "receiver.html": ["receiver"],
+};
 
-gulp.task("gen-index-cast-dev", (done) => {
+gulp.task(
-  const contentReceiver = renderCastTemplate("receiver", {
+  "gen-pages-cast-dev",
-    latestReceiverJS: "/frontend_latest/receiver.js",
+  genPagesDevTask(CAST_PAGE_ENTRIES, paths.cast_dir, paths.cast_output_root)
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "receiver.html"),
-    contentReceiver
 );
 
-  const contentMedia = renderCastTemplate("media", {
+gulp.task(
-    latestMediaJS: "/frontend_latest/media.js",
+  "gen-pages-cast-prod",
-    es5MediaJS: "/frontend_es5/media.js",
+  genPagesProdTask(
-  });
+    CAST_PAGE_ENTRIES,
-  fs.outputFileSync(
+    paths.cast_dir,
-    path.resolve(paths.cast_output_root, "media.html"),
+    paths.cast_output_root,
-    contentMedia
-  );
-
-  const contentFAQ = renderCastTemplate("launcher-faq", {
-    latestLauncherJS: "/frontend_latest/launcher.js",
-    es5LauncherJS: "/frontend_es5/launcher.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "faq.html"),
-    contentFAQ
-  );
-
-  const contentLauncher = renderCastTemplate("launcher", {
-    latestLauncherJS: "/frontend_latest/launcher.js",
-    es5LauncherJS: "/frontend_es5/launcher.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "index.html"),
-    contentLauncher
-  );
-  done();
-});
-
-gulp.task("gen-index-cast-prod", (done) => {
-  const latestManifest = require(path.resolve(
     paths.cast_output_latest,
-    "manifest.json"
+    paths.cast_output_es5
-  ));
+  )
-  const es5Manifest = require(path.resolve(
-    paths.cast_output_es5,
-    "manifest.json"
-  ));
-
-  const contentReceiver = renderCastTemplate("receiver", {
-    latestReceiverJS: latestManifest["receiver.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "receiver.html"),
-    contentReceiver
 );
 
-  const contentMedia = renderCastTemplate("media", {
+const DEMO_PAGE_ENTRIES = { "index.html": ["main"] };
-    latestMediaJS: latestManifest["media.js"],
+
-    es5MediaJS: es5Manifest["media.js"],
+gulp.task(
-  });
+  "gen-pages-demo-dev",
-  fs.outputFileSync(
+  genPagesDevTask(DEMO_PAGE_ENTRIES, paths.demo_dir, paths.demo_output_root)
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
 );
 
-  const contentFAQ = renderCastTemplate("launcher-faq", {
+gulp.task(
-    latestLauncherJS: latestManifest["launcher.js"],
+  "gen-pages-demo-prod",
-    es5LauncherJS: es5Manifest["launcher.js"],
+  genPagesProdTask(
-  });
+    DEMO_PAGE_ENTRIES,
-  fs.outputFileSync(
+    paths.demo_dir,
-    path.resolve(paths.cast_output_root, "faq.html"),
+    paths.demo_output_root,
-    contentFAQ
-  );
-
-  const contentLauncher = renderCastTemplate("launcher", {
-    latestLauncherJS: latestManifest["launcher.js"],
-    es5LauncherJS: es5Manifest["launcher.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "index.html"),
-    contentLauncher
-  );
-  done();
-});
-
-gulp.task("gen-index-demo-dev", (done) => {
-  const content = renderDemoTemplate("index", {
-    latestDemoJS: "/frontend_latest/main.js",
-
-    es5DemoJS: "/frontend_es5/main.js",
-  });
-
-  fs.outputFileSync(
-    path.resolve(paths.demo_output_root, "index.html"),
-    content
-  );
-  done();
-});
-
-gulp.task("gen-index-demo-prod", async () => {
-  const latestManifest = require(path.resolve(
     paths.demo_output_latest,
-    "manifest.json"
+    paths.demo_output_es5
-  ));
+  )
-  const es5Manifest = require(path.resolve(
-    paths.demo_output_es5,
-    "manifest.json"
-  ));
-  const content = renderDemoTemplate("index", {
-    latestDemoJS: latestManifest["main.js"],
-
-    es5DemoJS: es5Manifest["main.js"],
-  });
-  const minified = await minifyHtml(content);
-
-  fs.outputFileSync(
-    path.resolve(paths.demo_output_root, "index.html"),
-    minified
 );
-});
 
-gulp.task("gen-index-gallery-dev", (done) => {
+const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
-  const content = renderGalleryTemplate("index", {
-    latestGalleryJS: "./frontend_latest/entrypoint.js",
-  });
 
-  fs.outputFileSync(
+gulp.task(
-    path.resolve(paths.gallery_output_root, "index.html"),
+  "gen-pages-gallery-dev",
-    content
+  genPagesDevTask(
+    GALLERY_PAGE_ENTRIES,
+    paths.gallery_dir,
+    paths.gallery_output_root
+  )
 );
-  done();
-});
 
-gulp.task("gen-index-gallery-prod", async () => {
+gulp.task(
-  const latestManifest = require(path.resolve(
+  "gen-pages-gallery-prod",
-    paths.gallery_output_latest,
+  genPagesProdTask(
-    "manifest.json"
+    GALLERY_PAGE_ENTRIES,
-  ));
+    paths.gallery_dir,
-  const content = renderGalleryTemplate("index", {
+    paths.gallery_output_root,
-    latestGalleryJS: latestManifest["entrypoint.js"],
+    paths.gallery_output_latest
-  });
+  )
-  const minified = await minifyHtml(content);
-
-  fs.outputFileSync(
-    path.resolve(paths.gallery_output_root, "index.html"),
-    minified
 );
-});
 
-gulp.task("gen-index-hassio-dev", async () => {
+const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
-  writeHassioEntrypoint(
+
-    `${paths.hassio_publicPath}/frontend_latest/entrypoint.js`,
+gulp.task(
-    `${paths.hassio_publicPath}/frontend_es5/entrypoint.js`
+  "gen-pages-hassio-dev",
+  genPagesDevTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    undefined,
+    "src",
+    paths.hassio_publicPath
+  )
 );
-});
 
-gulp.task("gen-index-hassio-prod", async () => {
+gulp.task(
-  const latestManifest = require(path.resolve(
+  "gen-pages-hassio-prod",
+  genPagesProdTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
     paths.hassio_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
     paths.hassio_output_es5,
-    "manifest.json"
+    "src"
-  ));
+  )
-  writeHassioEntrypoint(
-    latestManifest["entrypoint.js"],
-    es5Manifest["entrypoint.js"]
 );
-});
-
-function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
-  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
-  // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-  fs.writeFileSync(
-    path.resolve(paths.hassio_output_root, "entrypoint.js"),
-    `
-function loadES5() {
-  var el = document.createElement('script');
-  el.src = '${es5Entrypoint}';
-  document.body.appendChild(el);
-}
-if (/.*Version\\/(?:11|12)(?:\\.\\d+)*.*Safari\\//.test(navigator.userAgent)) {
-    loadES5();
-} else {
-  try {
-    new Function("import('${latestEntrypoint}')")();
-  } catch (err) {
-    loadES5();
-  }
-}
-  `,
-    { encoding: "utf-8" }
-  );
-}

build-scripts/gulp/gallery.cjs

@@ -159,7 +159,7 @@ gulp.task(
       "gather-gallery-pages"
     ),
     "copy-static-gallery",
-    "gen-index-gallery-dev",
+    "gen-pages-gallery-dev",
     gulp.parallel(
       env.useRollup()
         ? "rollup-dev-server-gallery"
@@ -193,6 +193,6 @@ gulp.task(
     ),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
-    "gen-index-gallery-prod"
+    "gen-pages-gallery-prod"
   )
 );

build-scripts/gulp/hassio.cjs

@@ -17,7 +17,7 @@ gulp.task(
     },
     "clean-hassio",
     "gen-dummy-icons-json",
-    "gen-index-hassio-dev",
+    "gen-pages-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
@@ -39,7 +39,7 @@ gulp.task(
     "build-locale-data",
     "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
-    "gen-index-hassio-prod",
+    "gen-pages-hassio-prod",
     ...// Don't compress running tests
     (env.isTestBuild() ? [] : ["compress-hassio"])
   )

cast/src/html/_social_meta.html.template

@@ -0,0 +1,24 @@
+<meta property="fb:app_id" content="338291289691179" />
+<meta property="og:title" content="Home Assistant Cast" />
+<meta property="og:site_name" content="Home Assistant Cast" />
+<meta property="og:url" content="https://cast.home-assistant.io/" />
+<meta property="og:type" content="website" />
+<meta
+  property="og:description"
+  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
+/>
+<meta
+  property="og:image"
+  content="https://cast.home-assistant.io/images/google-nest-hub.png"
+/>
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@home_assistant" />
+<meta name="twitter:title" content="Home Assistant Cast" />
+<meta
+  name="twitter:description"
+  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
+/>
+<meta
+  name="twitter:image"
+  content="https://cast.home-assistant.io/images/google-nest-hub.png"
+/>

cast/src/html/faq.html.template

@@ -3,7 +3,7 @@
   <head>
     <title>Home Assistant Cast - FAQ</title>
     <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate('_style_base') %>
+    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
     <style>
       body {
         background-color: #e5e5e5;
@@ -35,25 +35,14 @@
     />
   </head>
   <body>
-    <%= renderTemplate('_js_base') %>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-
     <script>
-      import("<%= latestLauncherJS %>");
+      <% for (const entry of latestEntryJS) { %>
+        import("<%= entry %>");
+      <% } %>
       window.latestJS = true;
     </script>
-
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
-    </script>
-
     <hc-layout subtitle="FAQ">
       <style>
         a {

cast/src/html/index.html.template

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home Assistant Cast</title>
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
+    <style>
+      body {
+        background-color: #e5e5e5;
+      }
+    </style>
+    <%= renderTemplate("_social_meta.html.template") %>
+  </head>
+  <body>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <hc-connect></hc-connect>
+    <script>
+      <% for (const entry of latestEntryJS) { %>
+        import("<%= entry %>");
+      <% } %>
+      window.latestJS = true;
+    </script>
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-57927901-9', 'auto');
+    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
+    </script>
+  </body>
+</html>

cast/src/html/launcher.html.template

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Home Assistant Cast</title>
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate('_style_base') %>
-    <style>
-      body {
-        background-color: #e5e5e5;
-      }
-    </style>
-    <meta property="fb:app_id" content="338291289691179">
-    <meta property="og:title" content="Home Assistant Cast">
-    <meta property="og:site_name" content="Home Assistant Cast">
-    <meta property="og:url" content="https://cast.home-assistant.io/">
-    <meta property="og:type" content="website">
-    <meta property="og:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
-    <meta property="og:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@home_assistant">
-    <meta name="twitter:title" content="Home Assistant Cast">
-    <meta name="twitter:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
-    <meta name="twitter:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
-  </head>
-  <body>
-    <%= renderTemplate('_js_base') %>
-
-    <hc-connect></hc-connect>
-
-    <script>
-      import("<%= latestLauncherJS %>");
-      window.latestJS = true;
-    </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
-    </script>
-    <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-57927901-9', 'auto');
-    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
-    </script>
-  </body>
-</html>

cast/src/html/media.html.template

@@ -22,25 +22,14 @@
     </script>
   </head>
   <body>
-    <%= renderTemplate('_js_base') %>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-
     <cast-media-player></cast-media-player>
-
     <script>
-      import("<%= latestMediaJS %>");
+      <% for (const entry of latestEntryJS) { %>
+        import("<%= entry %>");
+      <% } %>
       window.latestJS = true;
     </script>
-
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5MediaJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5MediaJS %>");
-        <% } %>
-      }
-    </script>
   </body>
 </html>

cast/src/html/receiver.html.template

@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
   <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
-  <script type="module" src="<%= latestReceiverJS %>"></script>
+  <% for (const entry of latestEntryJS) { %>
-  <%= renderTemplate('_style_base') %>
+    <script type="module" src="<%= entry %>"></script>
+  <% } %>
+  <%= renderTemplate("../../../src/html/_style_base.html.template") %>
   <style>
     body {
       background-color: white;

demo/src/html/_social_meta.html.template

@@ -0,0 +1,26 @@
+<meta property="fb:app_id" content="338291289691179" />
+<meta property="og:title" content="Home Assistant Demo" />
+<meta property="og:site_name" content="Home Assistant" />
+<meta property="og:url" content="https://demo.home-assistant.io/" />
+<meta property="og:type" content="website" />
+<meta
+  property="og:description"
+  content="Open source home automation that puts local control and privacy first."
+/>
+<meta
+  property="og:image"
+  content="https://www.home-assistant.io/images/default-social.png"
+/>
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@home_assistant" />
+
+<meta name="twitter:title" content="Home Assistant" />
+<meta
+  name="twitter:description"
+  content="Open source home automation that puts local control and privacy first."
+/>
+<meta
+  name="twitter:image"
+  content="https://www.home-assistant.io/images/default-social.png"
+/>

demo/src/html/index.html.template

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <title>Home Assistant Demo</title>
     <meta charset="utf-8" />
     <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
     <link rel="icon" href="/static/icons/favicon.ico" />
@@ -35,33 +36,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#03a9f4" />
-    <meta property="fb:app_id" content="338291289691179" />
+    <%= renderTemplate("_social_meta.html.template") %>
-    <meta property="og:title" content="Home Assistant Demo" />
-    <meta property="og:site_name" content="Home Assistant" />
-    <meta property="og:url" content="https://demo.home-assistant.io/" />
-    <meta property="og:type" content="website" />
-    <meta
-      property="og:description"
-      content="Open source home automation that puts local control and privacy first."
-    />
-    <meta
-      property="og:image"
-      content="https://www.home-assistant.io/images/default-social.png"
-    />
-
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@home_assistant" />
-
-    <meta name="twitter:title" content="Home Assistant" />
-    <meta
-      name="twitter:description"
-      content="Open source home automation that puts local control and privacy first."
-    />
-    <meta
-      name="twitter:image"
-      content="https://www.home-assistant.io/images/default-social.png"
-    />
-    <title>Home Assistant Demo</title>
     <style>
       html {
         background-color: var(--primary-background-color, #fafafa);
@@ -107,29 +82,22 @@
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
     </div>
-
     <ha-demo></ha-demo>
-
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
-    <%= renderTemplate('_js_base') %>
+    <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>
-    <%= renderTemplate('_preload_roboto') %>
-
     <script>
-      import("<%= latestDemoJS %>");
+      if (!window.globalThis) {
-      window.latestJS = true;
+        window.globalThis = window;
-    </script>
+      }
-
+      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-    <script>
+      if (!isS11_12) {
-      if (!window.latestJS) {
+        <% for (const entry of latestEntryJS) { %>
-        <% if (useRollup) { %>
+          import("<%= entry %>");
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5DemoJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5DemoJS %>");
         <% } %>
+        window.latestJS = true;
       }
     </script>
-
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
       (function (d, t) {

gallery/src/html/index.html.template

@@ -8,8 +8,9 @@
     />
     <meta name="theme-color" content="#2157BC" />
     <title>Home Assistant Design</title>
-
+    <% for (const entry of latestEntryJS) { %>
-    <script type="module" src="<%= latestGalleryJS %>"></script>
+      <script type="module" src="<%= entry %>"></script>
+    <% } %>
     <style>
       body {
         font-family: Roboto, Noto, sans-serif;

hassio/src/entrypoint.js.template

@@ -0,0 +1,22 @@
+(function () {
+  function loadES5(src) {
+    var el = document.createElement("script");
+    el.src = src;
+    document.body.appendChild(el);
+  }
+  if (/.*Version\/(?:11|12)(?:\.\d+)*.*Safari\//.test(navigator.userAgent)) {
+    <% for (const entry of es5EntryJS) { %>
+      loadES5("<%= entry %>");
+    <% } %>
+  } else {
+    try {
+        <% for (const entry of latestEntryJS) { %>
+          new Function("import('<%= entry %>')")();
+        <% } %>
+    } catch (err) {
+      <% for (const entry of es5EntryJS) { %>
+        loadES5("<%= entry %>");
+      <% } %>
+  }
+  }
+})();

src/html/_header.html.template

@@ -1,4 +1,9 @@
-<meta charset="utf-8">
+<meta charset="utf-8" />
-<link rel='manifest' href='/manifest.json' crossorigin="use-credentials">
+<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
-<link rel='icon' href='/static/icons/favicon.ico'>
+<link rel="icon" href="/static/icons/favicon.ico" />
-<%= renderTemplate('_style_base') %>
+<% if (!useWDS) { %>
+  <% for (const entry of latestEntryJS) { %>
+    <link rel="modulepreload" href="<%= entry %>" crossorigin="use-credentials" />
+  <% } %>
+<% } %>
+<%= renderTemplate("_style_base.html.template") %>

src/html/_script_load_es5.html.template

@@ -0,0 +1,17 @@
+<script>
+  (function() {
+    if (!window.latestJS) {
+      <% if (useRollup) { %>
+        _ls("/static/js/s.min.js").onload = function() {
+          <% for (const entry of es5EntryJS) { %>
+            System.import("<%= entry %>");
+          <% } %>
+        }
+      <% } else { %>
+        <% for (const entry of es5EntryJS) { %>
+          _ls("<%= entry %>");
+        <% } %>
+      <% } %>
+    }
+  })();
+</script>

src/html/authorize.html.template

@@ -2,8 +2,7 @@
 <html>
   <head>
     <title>Home Assistant</title>
-    <link rel="modulepreload" href="<%= latestPageJS %>" crossorigin="use-credentials" />
+    <%= renderTemplate("_header.html.template") %>
-    <%= renderTemplate('_header') %>
     <style>
       .content {
         padding: 20px 16px;
@@ -38,36 +37,23 @@
       </div>
       <ha-authorize><p>Initializing</p></ha-authorize>
     </div>
-
+    <%= renderTemplate("_js_base.html.template") %>
-    <%= renderTemplate('_js_base') %>
+    <%= renderTemplate("_preload_roboto.html.template") %>
-    <%= renderTemplate('_preload_roboto') %>
-
     <script crossorigin="use-credentials">
       if (!window.globalThis) {
         window.globalThis = window;
       }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
-        import("<%= latestPageJS %>");
+        <% for (const entry of latestEntryJS) { %>
+          import("<%= entry %>");
+        <% } %>
         window.latestJS = true;
         window.providersPromise = fetch("/auth/providers", {
           credentials: "same-origin",
         });
       }
     </script>
-
+    <%= renderTemplate("_script_load_es5.html.template") %>
-    <script>
-      (function() {
-        if (!window.latestJS) {
-          <% if (useRollup) { %>
-            _ls("/static/js/s.min.js").onload = function() {
-              System.import("<%= es5PageJS %>");
-            }
-          <% } else { %>
-            _ls("<%= es5PageJS %>");
-          <% } %>
-        }
-      })();
-    </script>
   </body>
 </html>

src/html/index.html.template

@@ -1,12 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <% if (!useWDS) { %>
-    <link rel="modulepreload" href="<%= latestCoreJS %>" crossorigin="use-credentials" />
-    <link rel="modulepreload" href="<%= latestAppJS %>" crossorigin="use-credentials" />
-    <% } %>
-    <%= renderTemplate('_header') %>
     <title>Home Assistant</title>
+    <%= renderTemplate("_header.html.template") %>
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="apple-touch-icon"
@@ -36,7 +32,7 @@
     <meta name="msapplication-TileColor" content="#03a9f4ff" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="referrer" content="same-origin" />
-    <meta name="theme-color" content="#THEMEC" />
+    <meta name="theme-color" content="{{ theme_color }}" />
     <meta name="color-scheme" content="dark light" />
     <style>
       html {
@@ -83,20 +79,18 @@
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
     </div>
-
     <home-assistant></home-assistant>
-
+    <%= renderTemplate("_js_base.html.template") %>
-    <%= renderTemplate('_js_base') %>
+    <%= renderTemplate("_preload_roboto.html.template") %>
-    <%= renderTemplate('_preload_roboto') %>
-
     <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
       if (!window.globalThis) {
         window.globalThis = window;
       }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
-        import("<%= latestCoreJS %>");
+        <% for (const entry of latestEntryJS) { %>
-        import("<%= latestAppJS %>");
+          import("<%= entry %>");
+        <% } %>
         window.customPanelJS = "<%= latestCustomPanelJS %>";
         window.latestJS = true;
       }
@@ -106,7 +100,6 @@
     import("{{ extra_module }}");
     {%- endfor -%}
     </script>
-
     <script>
         if (!window.latestJS) {
           window.customPanelJS = "<%= es5CustomPanelJS %>";
@@ -115,13 +108,14 @@
             _ls("/static/js/s.min.js").onload = function() {
               // Although core and app can load in any order, we need to
               // force loading core first because it contains polyfills
-              return System.import("<%= es5CoreJS %>").then(function() {
+              return System.import("<%= es5EntryJS[0] %>").then(function() {
-                System.import("<%= es5AppJS %>");
+                System.import("<%= es5EntryJS[1] %>");
               });
             }
           <% } else { %>
-            _ls("<%= es5CoreJS %>");
+            <% for (const entry of es5EntryJS) { %>
-            _ls("<%= es5AppJS %>");
+              _ls("<%= entry %>");
+            <% } %>
           <% } %>
         }
     </script>

src/html/onboarding.html.template

@@ -2,12 +2,7 @@
 <html>
   <head>
     <title>Home Assistant</title>
-    <link
+    <%= renderTemplate("_header.html.template") %>
-      rel="modulepreload"
-      href="<%= latestPageJS %>"
-      crossorigin="use-credentials"
-    />
-    <%= renderTemplate('_header') %>
     <style>
       html {
         color: var(--primary-text-color, #212121);
@@ -70,39 +65,25 @@
         <img src="/static/icons/favicon-192x192.png" height="52" width="52" alt="" />
         Home Assistant
       </div>
-
       <ha-onboarding></ha-onboarding>
     </div>
-
+    <%= renderTemplate("_js_base.html.template") %>
-    <%= renderTemplate('_js_base') %>
+    <%= renderTemplate("_preload_roboto.html.template") %>
-    <%= renderTemplate('_preload_roboto') %>
-
     <script crossorigin="use-credentials">
       if (!window.globalThis) {
         window.globalThis = window;
       }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
-        import("<%= latestPageJS %>");
+        <% for (const entry of latestEntryJS) { %>
+          import("<%= entry %>");
+        <% } %>
         window.latestJS = true;
         window.stepsPromise = fetch("/api/onboarding", {
           credentials: "same-origin",
         });
       }
     </script>
-
+    <%= renderTemplate("_script_load_es5.html.template") %>
-    <script>
-      (function() {
-        if (!window.latestJS) {
-          <% if (useRollup) { %>
-            _ls("/static/js/s.min.js").onload = function() {
-              System.import("<%= es5PageJS %>");
-            }
-          <% } else { %>
-            _ls("<%= es5PageJS %>");
-          <% } %>
-        }
-      })();
-    </script>
   </body>
 </html>