From e384f76ac1002729b326d1ba534e9dd18da48766 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 5 Jun 2020 21:56:56 -0700
Subject: [PATCH] Make two builds of hassio (#6105)

---
 build-scripts/bundle.js       |  7 ++-----
 build-scripts/gulp/hassio.js  | 23 +++++++++++++++++++++++
 build-scripts/gulp/rollup.js  | 13 ++-----------
 build-scripts/gulp/webpack.js |  5 ++---
 build-scripts/paths.js        |  2 +-
 hassio/webpack.config.js      |  9 +++------
 6 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index 6fdce58edb..5433c4e59d 100644
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -170,15 +170,12 @@ module.exports.config = {
   },
 
   hassio({ isProdBuild, latestBuild }) {
-    if (latestBuild) {
-      throw new Error("Hass.io does not support latest build!");
-    }
     return {
       entry: {
         entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
       },
-      outputPath: paths.hassio_output_root,
-      publicPath: paths.hassio_publicPath,
+      outputPath: outputPath(paths.hassio_output_root, latestBuild),
+      publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
       dontHash: new Set(["entrypoint"]),
diff --git a/build-scripts/gulp/hassio.js b/build-scripts/gulp/hassio.js
index 595752008c..858a58e263 100644
--- a/build-scripts/gulp/hassio.js
+++ b/build-scripts/gulp/hassio.js
@@ -1,6 +1,9 @@
 const gulp = require("gulp");
+const fs = require("fs");
+const path = require("path");
 
 const env = require("../env");
+const paths = require("../paths");
 
 require("./clean.js");
 require("./gen-icons-json.js");
@@ -8,6 +11,24 @@ require("./webpack.js");
 require("./compress.js");
 require("./rollup.js");
 
+async function writeEntrypointJS() {
+  // We ship two builds and we need to do feature detection on what version to load.
+  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
+  fs.writeFileSync(
+    path.resolve(paths.hassio_output_root, "entrypoint.js"),
+    `
+try {
+  new Function("import('${paths.hassio_publicPath}/frontend_latest/entrypoint.js')")();
+} catch (err) {
+  var el = document.createElement('script');
+  el.src = '${paths.hassio_publicPath}/frontend_es5/entrypoint.js';
+  document.body.appendChild(el);
+}
+  `,
+    { encoding: "utf-8" }
+  );
+}
+
 gulp.task(
   "develop-hassio",
   gulp.series(
@@ -16,6 +37,7 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
+    writeEntrypointJS,
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -29,6 +51,7 @@ gulp.task(
     "clean-hassio",
     "gen-icons-json",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
+    writeEntrypointJS,
     ...// Don't compress running tests
     (env.isTest() ? [] : ["compress-hassio"])
   )
diff --git a/build-scripts/gulp/rollup.js b/build-scripts/gulp/rollup.js
index b186f15407..bfb7d941c1 100644
--- a/build-scripts/gulp/rollup.js
+++ b/build-scripts/gulp/rollup.js
@@ -92,11 +92,7 @@ gulp.task("rollup-watch-app", () => {
 });
 
 gulp.task("rollup-watch-hassio", () => {
-  watchRollup(
-    // Force latestBuild = false for hassio config.
-    (conf) => rollupConfig.createHassioConfig({ ...conf, latestBuild: false }),
-    ["hassio/src/**"]
-  );
+  watchRollup(rollupConfig.createHassioConfig, ["hassio/src/**"]);
 });
 
 gulp.task("rollup-dev-server-demo", () => {
@@ -137,12 +133,7 @@ gulp.task(
 );
 
 gulp.task("rollup-prod-hassio", () =>
-  buildRollup(
-    rollupConfig.createHassioConfig({
-      isProdBuild: true,
-      latestBuild: false,
-    })
-  )
+  bothBuilds(rollupConfig.createHassioConfig, { isProdBuild: true })
 );
 
 gulp.task("rollup-prod-gallery", () =>
diff --git a/build-scripts/gulp/webpack.js b/build-scripts/gulp/webpack.js
index e7e58eb726..38fba59640 100644
--- a/build-scripts/gulp/webpack.js
+++ b/build-scripts/gulp/webpack.js
@@ -129,7 +129,7 @@ gulp.task("webpack-watch-hassio", () => {
   webpack(
     createHassioConfig({
       isProdBuild: false,
-      latestBuild: false,
+      latestBuild: true,
     })
   ).watch({}, handler());
 });
@@ -139,9 +139,8 @@ gulp.task(
   () =>
     new Promise((resolve) =>
       webpack(
-        createHassioConfig({
+        bothBuilds(createHassioConfig, {
           isProdBuild: true,
-          latestBuild: false,
         }),
         handler(resolve)
       )
diff --git a/build-scripts/paths.js b/build-scripts/paths.js
index 8289890c59..0a3e4fe79d 100644
--- a/build-scripts/paths.js
+++ b/build-scripts/paths.js
@@ -34,7 +34,7 @@ module.exports = {
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_output_root: path.resolve(__dirname, "../hassio/build"),
-  hassio_publicPath: "/api/hassio/app/",
+  hassio_publicPath: "/api/hassio/app",
 
   translations_src: path.resolve(__dirname, "../src/translations"),
 };
diff --git a/hassio/webpack.config.js b/hassio/webpack.config.js
index 222b20ef84..429c98e6b2 100644
--- a/hassio/webpack.config.js
+++ b/hassio/webpack.config.js
@@ -1,11 +1,8 @@
 const { createHassioConfig } = require("../build-scripts/webpack.js");
-const { isProdBuild } = require("../build-scripts/env.js");
-
-// File just used for stats builds
-
-const latestBuild = false;
+const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 
 module.exports = createHassioConfig({
   isProdBuild: isProdBuild(),
-  latestBuild,
+  isStatsBuild: isStatsBuild(),
+  latestBuild: true,
 });