Home Assistant Cast

build-scripts/gulp/cast.js

@@ -0,0 +1,37 @@
+// Run cast develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-cast",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-cast",
+    gulp.parallel("gen-icons", "gen-index-cast-dev", "build-translations"),
+    "copy-static-cast",
+    "webpack-dev-server-cast"
+  )
+);
+
+gulp.task(
+  "build-cast",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-cast",
+    gulp.parallel("gen-icons", "build-translations"),
+    "copy-static-cast",
+    "webpack-prod-cast",
+    "gen-index-cast-prod"
+  )
+);

build-scripts/gulp/clean.js

@@ -15,3 +15,9 @@ gulp.task(
     return del([config.demo_root, config.build_dir]);
   })
 );
+gulp.task(
+  "clean-cast",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.cast_root, config.build_dir]);
+  })
+);

build-scripts/gulp/entry-html.js

@@ -14,6 +14,9 @@ const templatePath = (tpl) =>
 const demoTemplatePath = (tpl) =>
   path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`);
 
+const castTemplatePath = (tpl) =>
+  path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`);
+
 const readFile = (pth) => fs.readFileSync(pth).toString();
 
 const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
@@ -24,6 +27,9 @@ const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
 const renderDemoTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, demoTemplatePath);
 
+const renderCastTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, castTemplatePath);
+
 const minifyHtml = (content) =>
   minify(content, {
     collapseWhitespace: true,
@@ -113,17 +119,64 @@ gulp.task("gen-index-app-prod", (done) => {
   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",
+gulp.task("gen-index-cast-dev", (done) => {
+  const contentReceiver = renderCastTemplate("receiver", {
+    latestReceiverJS: "/frontend_latest/receiver.js",
   });
+  fs.outputFileSync(
+    path.resolve(config.cast_root, "receiver.html"),
+    contentReceiver
+  );
 
-  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  const contentFAQ = renderCastTemplate("launcher-faq", {
+    latestLauncherJS: "/frontend_latest/launcher.js",
+    es5LauncherJS: "/frontend_es5/launcher.js",
+  });
+  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+
+  const contentLauncher = renderCastTemplate("launcher", {
+    latestLauncherJS: "/frontend_latest/launcher.js",
+    es5LauncherJS: "/frontend_es5/launcher.js",
+  });
+  fs.outputFileSync(
+    path.resolve(config.cast_root, "index.html"),
+    contentLauncher
+  );
+  done();
+});
+
+gulp.task("gen-index-cast-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.cast_output,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    config.cast_output_es5,
+    "manifest.json"
+  ));
+
+  const contentReceiver = renderCastTemplate("receiver", {
+    latestReceiverJS: latestManifest["receiver.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(config.cast_root, "receiver.html"),
+    contentReceiver
+  );
+
+  const contentFAQ = renderCastTemplate("launcher-faq", {
+    latestLauncherJS: latestManifest["launcher.js"],
+    es5LauncherJS: es5Manifest["launcher.js"],
+  });
+  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+
+  const contentLauncher = renderCastTemplate("launcher", {
+    latestLauncherJS: latestManifest["launcher.js"],
+    es5LauncherJS: es5Manifest["launcher.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(config.cast_root, "index.html"),
+    contentLauncher
+  );
   done();
 });
 

build-scripts/gulp/gather-static.js

@@ -114,3 +114,15 @@ gulp.task("copy-static-demo", (done) => {
   copyTranslations(paths.demo_static);
   done();
 });
+
+gulp.task("copy-static-cast", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public/static"), paths.cast_static);
+  // Copy cast static files
+  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_root);
+
+  copyMapPanel(paths.cast_static);
+  copyFonts(paths.cast_static);
+  copyTranslations(paths.cast_static);
+  done();
+});

build-scripts/gulp/webpack.js

@@ -5,7 +5,11 @@ const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
 const log = require("fancy-log");
 const paths = require("../paths");
-const { createAppConfig, createDemoConfig } = require("../webpack");
+const {
+  createAppConfig,
+  createDemoConfig,
+  createCastConfig,
+} = require("../webpack");
 
 const handler = (done) => (err, stats) => {
   if (err) {
@@ -114,3 +118,53 @@ gulp.task(
       )
     )
 );
+
+gulp.task("webpack-dev-server-cast", () => {
+  const compiler = webpack([
+    createCastConfig({
+      isProdBuild: false,
+      latestBuild: false,
+    }),
+    createCastConfig({
+      isProdBuild: false,
+      latestBuild: true,
+    }),
+  ]);
+
+  new WebpackDevServer(compiler, {
+    open: true,
+    watchContentBase: true,
+    contentBase: path.resolve(paths.cast_dir, "dist"),
+  }).listen(
+    8080,
+    // Accessible from the network, because that's how Cast hits it.
+    "0.0.0.0",
+    function(err) {
+      if (err) {
+        throw err;
+      }
+      // Server listening
+      log("[webpack-dev-server]", "http://localhost:8080");
+    }
+  );
+});
+
+gulp.task(
+  "webpack-prod-cast",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createCastConfig({
+            isProdBuild: true,
+            latestBuild: false,
+          }),
+          createCastConfig({
+            isProdBuild: true,
+            latestBuild: true,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);

build-scripts/paths.js

@@ -14,4 +14,10 @@ module.exports = {
   demo_static: path.resolve(__dirname, "../demo/dist/static"),
   demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"),
   demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
+
+  cast_dir: path.resolve(__dirname, "../cast"),
+  cast_root: path.resolve(__dirname, "../cast/dist"),
+  cast_static: path.resolve(__dirname, "../cast/dist/static"),
+  cast_output: path.resolve(__dirname, "../cast/dist/frontend_latest"),
+  cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
 };

build-scripts/webpack.js

@@ -214,10 +214,56 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
   };
 };
 
+const createCastConfig = ({ isProdBuild, latestBuild }) => {
+  const isStatsBuild = false;
+  const entry = {
+    launcher: "./cast/src/launcher/entrypoint.ts",
+  };
+
+  if (latestBuild) {
+    entry.receiver = "./cast/src/receiver/entrypoint.ts";
+  }
+
+  return {
+    mode: genMode(isProdBuild),
+    devtool: genDevTool(isProdBuild),
+    entry,
+    module: {
+      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
+    },
+    optimization: optimization(latestBuild),
+    plugins: [
+      new ManifestPlugin(),
+      new webpack.DefinePlugin({
+        __DEV__: !isProdBuild,
+        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+        __VERSION__: JSON.stringify(version),
+        __DEMO__: false,
+        __STATIC_PATH__: "/static/",
+        "process.env.NODE_ENV": JSON.stringify(
+          isProdBuild ? "production" : "development"
+        ),
+      }),
+      ...plugins,
+    ].filter(Boolean),
+    resolve,
+    output: {
+      filename: genFilename(isProdBuild),
+      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
+      path: path.resolve(
+        paths.cast_root,
+        latestBuild ? "frontend_latest" : "frontend_es5"
+      ),
+      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
+    },
+  };
+};
+
 module.exports = {
   resolve,
   plugins,
   optimization,
   createAppConfig,
   createDemoConfig,
+  createCastConfig,
 };