Make two builds of hassio (#6105)

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"]),

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"])
   )

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", () =>

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

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"),
 };

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