Rollup (#5995)

build-scripts/gulp/app.js

@@ -1,7 +1,7 @@
 // Run HA develop mode
 const gulp = require("gulp");
 
-const envVars = require("../env");
+const env = require("../env");
 
 require("./clean.js");
 require("./translations.js");
@@ -11,6 +11,7 @@ require("./compress.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-app",
@@ -26,8 +27,8 @@ gulp.task(
       "gen-index-app-dev",
       "build-translations"
     ),
-    "copy-static",
-    "webpack-watch-app"
+    "copy-static-app",
+    env.useRollup() ? "rollup-watch-app" : "webpack-watch-app"
   )
 );
 
@@ -39,10 +40,10 @@ gulp.task(
     },
     "clean",
     gulp.parallel("gen-icons-json", "build-translations"),
-    "copy-static",
-    "webpack-prod-app",
+    "copy-static-app",
+    env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     ...// Don't compress running tests
-    (envVars.isTest() ? [] : ["compress-app"]),
+    (env.isTest() ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/cast.js

@@ -1,11 +1,14 @@
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-cast",
@@ -17,7 +20,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
-    "webpack-dev-server-cast"
+    env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
   )
 );
 
@@ -31,7 +34,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-cast",
-    "webpack-prod-cast",
+    env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
     "gen-index-cast-prod"
   )
 );

build-scripts/gulp/demo.js

@@ -1,6 +1,8 @@
 // Run demo develop mode
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gen-icons-json.js");
@@ -8,6 +10,7 @@ require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-demo",
@@ -19,7 +22,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
     "copy-static-demo",
-    "webpack-dev-server-demo"
+    env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
   )
 );
 
@@ -34,7 +37,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-demo",
-    "webpack-prod-demo",
+    env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
     "gen-index-demo-prod"
   )
 );

build-scripts/gulp/entry-html.js

@@ -6,31 +6,36 @@ const fs = require("fs-extra");
 const path = require("path");
 const template = require("lodash.template");
 const minify = require("html-minifier").minify;
-const config = require("../paths.js");
+const paths = require("../paths.js");
+const env = require("../env.js");
 
 const templatePath = (tpl) =>
-  path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
+  path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
 
 const readFile = (pth) => fs.readFileSync(pth).toString();
 
 const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
   const compiled = template(readFile(pathFunc(pth)));
-  return compiled({ ...data, renderTemplate });
+  return compiled({
+    ...data,
+    useRollup: env.useRollup(),
+    renderTemplate,
+  });
 };
 
 const renderDemoTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.demo_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const renderCastTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.cast_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const renderGalleryTemplate = (pth, data = {}) =>
   renderTemplate(pth, data, (tpl) =>
-    path.resolve(config.gallery_dir, "src/html/", `${tpl}.html.template`)
+    path.resolve(paths.gallery_dir, "src/html/", `${tpl}.html.template`)
   );
 
 const minifyHtml = (content) =>
@@ -52,14 +57,14 @@ gulp.task("gen-pages-dev", (done) => {
       es5PageJS: `/frontend_es5/${page}.js`,
     });
 
-    fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
+    fs.outputFileSync(path.resolve(paths.root, `${page}.html`), content);
   }
   done();
 });
 
 gulp.task("gen-pages-prod", (done) => {
-  const latestManifest = require(path.resolve(config.output, "manifest.json"));
-  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  const latestManifest = require(path.resolve(paths.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(paths.output_es5, "manifest.json"));
 
   for (const page of PAGES) {
     const content = renderTemplate(page, {
@@ -70,7 +75,7 @@ gulp.task("gen-pages-prod", (done) => {
     });
 
     fs.outputFileSync(
-      path.resolve(config.root, `${page}.html`),
+      path.resolve(paths.root, `${page}.html`),
       minifyHtml(content)
     );
   }
@@ -91,13 +96,13 @@ gulp.task("gen-index-app-dev", (done) => {
     es5CustomPanelJS: "/frontend_es5/custom-panel.js",
   }).replace(/#THEMEC/g, "{{ theme_color }}");
 
-  fs.outputFileSync(path.resolve(config.root, "index.html"), content);
+  fs.outputFileSync(path.resolve(paths.root, "index.html"), content);
   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 latestManifest = require(path.resolve(paths.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(paths.output_es5, "manifest.json"));
   const content = renderTemplate("index", {
     latestAppJS: latestManifest["app.js"],
     latestCoreJS: latestManifest["core.js"],
@@ -110,7 +115,7 @@ gulp.task("gen-index-app-prod", (done) => {
   });
   const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
 
-  fs.outputFileSync(path.resolve(config.root, "index.html"), minified);
+  fs.outputFileSync(path.resolve(paths.root, "index.html"), minified);
   done();
 });
 
@@ -119,7 +124,7 @@ gulp.task("gen-index-cast-dev", (done) => {
     latestReceiverJS: "/frontend_latest/receiver.js",
   });
   fs.outputFileSync(
-    path.resolve(config.cast_root, "receiver.html"),
+    path.resolve(paths.cast_root, "receiver.html"),
     contentReceiver
   );
 
@@ -127,14 +132,14 @@ gulp.task("gen-index-cast-dev", (done) => {
     latestLauncherJS: "/frontend_latest/launcher.js",
     es5LauncherJS: "/frontend_es5/launcher.js",
   });
-  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+  fs.outputFileSync(path.resolve(paths.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"),
+    path.resolve(paths.cast_root, "index.html"),
     contentLauncher
   );
   done();
@@ -142,11 +147,11 @@ gulp.task("gen-index-cast-dev", (done) => {
 
 gulp.task("gen-index-cast-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.cast_output,
+    paths.cast_output,
     "manifest.json"
   ));
   const es5Manifest = require(path.resolve(
-    config.cast_output_es5,
+    paths.cast_output_es5,
     "manifest.json"
   ));
 
@@ -154,7 +159,7 @@ gulp.task("gen-index-cast-prod", (done) => {
     latestReceiverJS: latestManifest["receiver.js"],
   });
   fs.outputFileSync(
-    path.resolve(config.cast_root, "receiver.html"),
+    path.resolve(paths.cast_root, "receiver.html"),
     contentReceiver
   );
 
@@ -162,14 +167,14 @@ gulp.task("gen-index-cast-prod", (done) => {
     latestLauncherJS: latestManifest["launcher.js"],
     es5LauncherJS: es5Manifest["launcher.js"],
   });
-  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+  fs.outputFileSync(path.resolve(paths.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"),
+    path.resolve(paths.cast_root, "index.html"),
     contentLauncher
   );
   done();
@@ -185,17 +190,17 @@ gulp.task("gen-index-demo-dev", (done) => {
     es5DemoJS: "/frontend_es5/main.js",
   });
 
-  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  fs.outputFileSync(path.resolve(paths.demo_root, "index.html"), content);
   done();
 });
 
 gulp.task("gen-index-demo-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.demo_output,
+    paths.demo_output,
     "manifest.json"
   ));
   const es5Manifest = require(path.resolve(
-    config.demo_output_es5,
+    paths.demo_output_es5,
     "manifest.json"
   ));
   const content = renderDemoTemplate("index", {
@@ -206,7 +211,7 @@ gulp.task("gen-index-demo-prod", (done) => {
   });
   const minified = minifyHtml(content);
 
-  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
+  fs.outputFileSync(path.resolve(paths.demo_root, "index.html"), minified);
   done();
 });
 
@@ -217,13 +222,13 @@ gulp.task("gen-index-gallery-dev", (done) => {
     latestGalleryJS: "./frontend_latest/entrypoint.js",
   });
 
-  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), content);
+  fs.outputFileSync(path.resolve(paths.gallery_root, "index.html"), content);
   done();
 });
 
 gulp.task("gen-index-gallery-prod", (done) => {
   const latestManifest = require(path.resolve(
-    config.gallery_output,
+    paths.gallery_output,
     "manifest.json"
   ));
   const content = renderGalleryTemplate("index", {
@@ -231,6 +236,6 @@ gulp.task("gen-index-gallery-prod", (done) => {
   });
   const minified = minifyHtml(content);
 
-  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), minified);
+  fs.outputFileSync(path.resolve(paths.gallery_root, "index.html"), minified);
   done();
 });

build-scripts/gulp/gallery.js

@@ -1,6 +1,8 @@
 // Run demo develop mode
 const gulp = require("gulp");
 
+const env = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gen-icons-json.js");
@@ -8,6 +10,7 @@ require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-gallery",
@@ -20,7 +23,7 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-gallery",
     "gen-index-gallery-dev",
-    "webpack-dev-server-gallery"
+    env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
   )
 );
 
@@ -34,7 +37,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations"),
     "copy-static-gallery",
-    "webpack-prod-gallery",
+    env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
     "gen-index-gallery-prod"
   )
 );

build-scripts/gulp/gather-static.js

@@ -51,6 +51,12 @@ function copyPolyfills(staticDir) {
   );
 }
 
+function copyLoaderJS(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(npmPath("systemjs/dist/s.min.js"), staticPath("js"));
+  copyFileDir(npmPath("systemjs/dist/s.min.js.map"), staticPath("js"));
+}
+
 function copyFonts(staticDir) {
   const staticPath = genStaticPath(staticDir);
   // Local fonts
@@ -72,17 +78,17 @@ function copyMapPanel(staticDir) {
   );
 }
 
-gulp.task("copy-translations", (done) => {
+gulp.task("copy-translations-app", async () => {
   const staticDir = paths.static;
   copyTranslations(staticDir);
-  done();
 });
 
-gulp.task("copy-static", (done) => {
+gulp.task("copy-static-app", async () => {
   const staticDir = paths.static;
   // Basic static files
   fs.copySync(polyPath("public"), paths.root);
 
+  copyLoaderJS(staticDir);
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
@@ -90,10 +96,9 @@ gulp.task("copy-static", (done) => {
 
   // Panel assets
   copyMapPanel(staticDir);
-  done();
 });
 
-gulp.task("copy-static-demo", (done) => {
+gulp.task("copy-static-demo", async () => {
   // Copy app static files
   fs.copySync(
     polyPath("public/static"),
@@ -102,28 +107,29 @@ gulp.task("copy-static-demo", (done) => {
   // Copy demo static files
   fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
 
+  copyLoaderJS(paths.demo_static);
   copyPolyfills(paths.demo_static);
   copyMapPanel(paths.demo_static);
   copyFonts(paths.demo_static);
   copyTranslations(paths.demo_static);
   copyMdiIcons(paths.demo_static);
-  done();
 });
 
-gulp.task("copy-static-cast", (done) => {
+gulp.task("copy-static-cast", async () => {
   // 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);
 
+  copyLoaderJS(paths.cast_static);
+  copyPolyfills(paths.cast_static);
   copyMapPanel(paths.cast_static);
   copyFonts(paths.cast_static);
   copyTranslations(paths.cast_static);
   copyMdiIcons(paths.cast_static);
-  done();
 });
 
-gulp.task("copy-static-gallery", (done) => {
+gulp.task("copy-static-gallery", async () => {
   // Copy app static files
   fs.copySync(polyPath("public/static"), paths.gallery_static);
   // Copy gallery static files
@@ -133,5 +139,4 @@ gulp.task("copy-static-gallery", (done) => {
   copyFonts(paths.gallery_static);
   copyTranslations(paths.gallery_static);
   copyMdiIcons(paths.gallery_static);
-  done();
 });

build-scripts/gulp/hassio.js

@@ -1,11 +1,12 @@
 const gulp = require("gulp");
 
-const envVars = require("../env");
+const env = require("../env");
 
 require("./clean.js");
 require("./gen-icons-json.js");
 require("./webpack.js");
 require("./compress.js");
+require("./rollup.js");
 
 gulp.task(
   "develop-hassio",
@@ -15,7 +16,7 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
-    "webpack-watch-hassio"
+    env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
 
@@ -27,8 +28,8 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
-    "webpack-prod-hassio",
+    env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     ...// Don't compress running tests
-    (envVars.isTest() ? [] : ["compress-hassio"])
+    (env.isTest() ? [] : ["compress-hassio"])
   )
 );

build-scripts/gulp/rollup.js

@@ -0,0 +1,149 @@
+// Tasks to run Rollup
+const path = require("path");
+const gulp = require("gulp");
+const rollup = require("rollup");
+const handler = require("serve-handler");
+const http = require("http");
+const log = require("fancy-log");
+const rollupConfig = require("../rollup");
+const paths = require("../paths");
+const open = require("open");
+
+const bothBuilds = (createConfigFunc, params) =>
+  gulp.series(
+    async function buildLatest() {
+      await buildRollup(
+        createConfigFunc({
+          ...params,
+          latestBuild: true,
+        })
+      );
+    },
+    async function buildES5() {
+      await buildRollup(
+        createConfigFunc({
+          ...params,
+          latestBuild: false,
+        })
+      );
+    }
+  );
+
+function createServer(serveOptions) {
+  const server = http.createServer((request, response) => {
+    return handler(request, response, {
+      public: serveOptions.root,
+    });
+  });
+
+  server.listen(
+    serveOptions.port,
+    serveOptions.networkAccess ? "0.0.0.0" : undefined,
+    () => {
+      log.info(`Available at http://localhost:${serveOptions.port}`);
+      open(`http://localhost:${serveOptions.port}`);
+    }
+  );
+}
+
+function watchRollup(createConfig, extraWatchSrc = [], serveOptions) {
+  const { inputOptions, outputOptions } = createConfig({
+    isProdBuild: false,
+    latestBuild: true,
+  });
+
+  const watcher = rollup.watch({
+    ...inputOptions,
+    output: [outputOptions],
+    watch: {
+      include: ["src"] + extraWatchSrc,
+    },
+  });
+
+  let startedHttp = false;
+
+  watcher.on("event", (event) => {
+    if (event.code === "ERROR") {
+      log.error(event.error);
+    } else if (event.code === "END") {
+      if (startedHttp || !serveOptions) {
+        return;
+      }
+      startedHttp = true;
+      createServer(serveOptions);
+    }
+  });
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-translations", "copy-translations-app")
+  );
+}
+
+async function buildRollup(config) {
+  const bundle = await rollup.rollup(config.inputOptions);
+  await bundle.write(config.outputOptions);
+}
+
+gulp.task("rollup-watch-app", () => {
+  watchRollup(rollupConfig.createAppConfig);
+});
+
+gulp.task("rollup-watch-hassio", () => {
+  watchRollup(rollupConfig.createHassioConfig, ["hassio/src"]);
+});
+
+gulp.task("rollup-dev-server-demo", () => {
+  watchRollup(rollupConfig.createDemoConfig, ["demo/src"], {
+    root: paths.demo_root,
+    port: 8090,
+  });
+});
+
+gulp.task("rollup-dev-server-cast", () => {
+  watchRollup(rollupConfig.createCastConfig, ["cast/src"], {
+    root: paths.cast_root,
+    port: 8080,
+    networkAccess: true,
+  });
+});
+
+gulp.task("rollup-dev-server-gallery", () => {
+  watchRollup(rollupConfig.createGalleryConfig, ["gallery/src"], {
+    root: paths.gallery_root,
+    port: 8100,
+  });
+});
+
+gulp.task(
+  "rollup-prod-app",
+  bothBuilds(rollupConfig.createAppConfig, { isProdBuild: true })
+);
+
+gulp.task(
+  "rollup-prod-demo",
+  bothBuilds(rollupConfig.createDemoConfig, { isProdBuild: true })
+);
+
+gulp.task(
+  "rollup-prod-cast",
+  bothBuilds(rollupConfig.createCastConfig, { isProdBuild: true })
+);
+
+gulp.task("rollup-prod-hassio", () =>
+  buildRollup(
+    rollupConfig.createHassioConfig({
+      isProdBuild: true,
+      latestBuild: false,
+    })
+  )
+);
+
+gulp.task("rollup-prod-gallery", () =>
+  buildRollup(
+    rollupConfig.createGalleryConfig({
+      isProdBuild: true,
+      latestBuild: true,
+    })
+  )
+);

build-scripts/gulp/webpack.js

@@ -38,9 +38,9 @@ const runDevServer = ({
 
 const handler = (done) => (err, stats) => {
   if (err) {
-    console.log(err.stack || err);
+    log.error(err.stack || err);
     if (err.details) {
-      console.log(err.details);
+      log.error(err.details);
     }
     return;
   }
@@ -48,7 +48,7 @@ const handler = (done) => (err, stats) => {
   log(`Build done @ ${new Date().toLocaleTimeString()}`);
 
   if (stats.hasErrors() || stats.hasWarnings()) {
-    console.log(stats.toString("minimal"));
+    log.warn(stats.toString("minimal"));
   }
 
   if (done) {
@@ -64,7 +64,7 @@ gulp.task("webpack-watch-app", () => {
   );
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
-    gulp.series("build-translations", "copy-translations")
+    gulp.series("build-translations", "copy-translations-app")
   );
 });