Move to ES bundle (#283)

.gitignore

@@ -4,5 +4,8 @@ build
 src/localize/generated.ts
 !script/build
 hacs_frontend/*.js
-hacs_frontend/*.gz
+hacs_frontend/*.json
+hacs_frontend/*.js.gz
+!hacs_frontend/*.py
+
 yarn-error.log

hacs_frontend/__init__.py

@@ -2,16 +2,4 @@
 from .version import VERSION
 
 def locate_dir():
-    return __path__[0]
-
-def locate_js():
-    return f"{__path__[0]}/main.js"
-
-def locate_gz():
-    return f"{__path__[0]}/main.js.gz"
-
-def locate_debug_js():
-    return f"{__path__[0]}/debug.js"
-
-def locate_debug_gz():
-    return f"{__path__[0]}/debug.js.gz"
+    return __path__[0]

package.json

@@ -114,6 +114,7 @@
     "@rollup/plugin-typescript": "^6.0.0",
     "@webcomponents/webcomponentsjs": "^2.4.4",
     "cpx": "^1.5.0",
-    "idb-keyval": "^3.2.0"
+    "idb-keyval": "^3.2.0",
+    "rollup-plugin-entrypoint-hashmanifest": "^0.1.2"
   }
 }

script/gulp/build.js

@@ -8,7 +8,6 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "common",
-    "rollup-build",
-    "rollup-build-debug"
+    "rollup-build"
   )
 );

script/gulp/common.js

@@ -7,12 +7,7 @@ require("./translations");
 
 gulp.task("cleanup", (task) => {
   del.sync(["./homeassistant-frontend/build/**", "./homeassistant-frontend/build"]);
-  del.sync([
-    "./hacs_frontend/main.js",
-    "./hacs_frontend/main.js.gz",
-    "./hacs_frontend/debug.js",
-    "./hacs_frontend/debug.js.gz",
-  ]);
+  del.sync(["./hacs_frontend/*.js", "./hacs_frontend/*.json", "./hacs_frontend/*.gz"]);
   task();
 });
 

script/gulp/rollup.js

@@ -1,6 +1,8 @@
 const gulp = require("gulp");
 const rollup = require("rollup");
 const http = require("http");
+const path = require("path");
+const fs = require("fs-extra");
 const log = require("fancy-log");
 const { string } = require("rollup-plugin-string");
 const handler = require("serve-handler");
@@ -10,6 +12,7 @@ const babel = require("rollup-plugin-babel");
 const babelTypescript = require("@babel/preset-typescript");
 const babelDecorators = require("@babel/plugin-proposal-decorators");
 const babelClassProperties = require("@babel/plugin-proposal-class-properties");
+const entrypointHashmanifest = require("rollup-plugin-entrypoint-hashmanifest");
 
 const { nodeResolve } = require("@rollup/plugin-node-resolve");
 const gzipPlugin = require("rollup-plugin-gzip");
@@ -45,6 +48,7 @@ const DevelopPlugins = [
     extensions,
     exclude: [require.resolve("@mdi/js/mdi.js")],
   }),
+  entrypointHashmanifest({ manifestName: "./hacs_frontend/manifest.json" }),
 ];
 
 const BuildPlugins = DevelopPlugins.concat([
@@ -54,16 +58,19 @@ const BuildPlugins = DevelopPlugins.concat([
   gzipPlugin.default(),
 ]);
 
-const DebugPlugins = DevelopPlugins.concat([gzipPlugin.default()]);
-
 const inputconfig = {
   input: "./src/main.ts",
   plugins: DevelopPlugins,
 };
-const outputconfig = {
-  file: "./hacs_frontend/main.js",
-  format: "iife",
-  intro: "const __DEMO__ = false;",
+const outputconfig = (isDev) => {
+  return {
+    dir: "./hacs_frontend/",
+    chunkFileNames: !isDev ? "c.[hash].js" : "[name]-dev.js",
+    assetFileNames: !isDev ? "a.[hash].js" : "[name]-dev.js",
+    entryFileNames: "e.[hash].js",
+    format: "es",
+    intro: "const __DEMO__ = false;",
+  };
 };
 
 function createServer() {
@@ -74,17 +81,21 @@ function createServer() {
   });
 
   server.listen(5000, true, () => {
-    log.info("File will be served to http://127.0.0.1:5000/main.js");
+    log.info("File will be served to http://127.0.0.1:5000/entrypoint.js");
   });
 }
 
 gulp.task("rollup-develop", () => {
+  isDev = true;
   const watcher = rollup.watch({
     input: inputconfig.input,
     plugins: inputconfig.plugins,
-    output: outputconfig,
+    output: outputconfig(true),
     watch: {
       include: ["./src/**"],
+      chokidar: {
+        usePolling: true,
+      },
     },
   });
 
@@ -104,6 +115,7 @@ gulp.task("rollup-develop", () => {
         log("You can now use the generated file");
         log("A new file will be generated if you change something");
         first = false;
+        writeEntrypoint();
       }
     } else if (event.code === "ERROR") {
       log.error(event.error);
@@ -114,14 +126,24 @@ gulp.task("rollup-develop", () => {
 gulp.task("rollup-build", async function (task) {
   inputconfig.plugins = BuildPlugins;
   const bundle = await rollup.rollup(inputconfig);
-  await bundle.write(outputconfig);
+  await bundle.write(outputconfig(false));
+  writeEntrypoint();
   task();
 });
 
-gulp.task("rollup-build-debug", async function (task) {
-  inputconfig.plugins = DebugPlugins;
-  outputconfig.file = "./hacs_frontend/debug.js";
-  const bundle = await rollup.rollup(inputconfig);
-  await bundle.write(outputconfig);
-  task();
-});
+function writeEntrypoint() {
+  const entrypointManifest = require(path.resolve("./hacs_frontend/manifest.json"));
+  fs.writeFileSync(
+    path.resolve("./hacs_frontend/entrypoint.js"),
+    `
+try {
+  new Function("import('/hacsfiles/frontend/${entrypointManifest["./src/main.ts"]}')")();
+} catch (err) {
+  var el = document.createElement('script');
+  el.src = '/hacsfiles/frontend/${entrypointManifest["./src/main.ts"]}';
+  document.body.appendChild(el);
+}
+  `,
+    { encoding: "utf-8" }
+  );
+}

src/components/dialogs/hacs-add-repository-dialog.ts

@@ -1,22 +1,23 @@
+import { mdiGithub } from "@mdi/js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-listbox/paper-listbox";
-import memoizeOne from "memoize-one";
-import { customElement, html, TemplateResult, css, property, PropertyValues } from "lit-element";
+import { css, customElement, html, property, PropertyValues, TemplateResult } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
-import { HacsDialogBase } from "./hacs-dialog-base";
+import memoizeOne from "memoize-one";
+import "../../../homeassistant-frontend/src/common/search/search-input";
+import "../../../homeassistant-frontend/src/components/ha-svg-icon";
 import { Repository } from "../../data/common";
-import { mdiGithub } from "@mdi/js";
 import { localize } from "../../localize/localize";
 import { activePanel } from "../../panels/hacs-sections";
+import { scrollBarStyle, searchStyles } from "../../styles/element-styles";
 import { filterRepositoriesByInput } from "../../tools/filter-repositories-by-input";
-import { searchStyles, scrollBarStyle } from "../../styles/element-styles";
 import "../hacs-chip";
 import "../hacs-filter";
 import { hacsIcon } from "../hacs-icon";
-import "../../../homeassistant-frontend/src/common/search/search-input";
-import "../../../homeassistant-frontend/src/components/ha-svg-icon";
+import "./hacs-dialog";
+import { HacsDialogBase } from "./hacs-dialog-base";
 
 @customElement("hacs-add-repository-dialog")
 export class HacsAddRepositoryDialog extends HacsDialogBase {

src/components/dialogs/hacs-custom-repositories-dialog.ts

@@ -1,24 +1,22 @@
+import { mdiDelete, mdiGithub } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import {
+  css,
   customElement,
   html,
-  TemplateResult,
-  css,
   property,
-  query,
   PropertyValues,
+  query,
+  TemplateResult,
 } from "lit-element";
-import { HacsDialogBase } from "./hacs-dialog-base";
-import { scrollBarStyle } from "../../styles/element-styles";
 import "../../../homeassistant-frontend/src/components/ha-svg-icon";
-import { mdiGithub, mdiDelete } from "@mdi/js";
-
-import { repositoryDelete, getRepositories, repositoryAdd } from "../../data/websocket";
-
+import { getRepositories, repositoryAdd, repositoryDelete } from "../../data/websocket";
 import { localize } from "../../localize/localize";
-
+import { scrollBarStyle } from "../../styles/element-styles";
 import "../hacs-icon-button";
+import "./hacs-dialog";
+import { HacsDialogBase } from "./hacs-dialog-base";
 
 @customElement("hacs-custom-repositories-dialog")
 export class HacsCustomRepositoriesDialog extends HacsDialogBase {
@@ -65,9 +63,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
                   three-line
                   >${repo.name}
                   <div secondary>${repo.description}</div>
-                  <div secondary>
-                    Category: ${repo.category}
-                  </div></paper-item-body
+                  <div secondary>Category: ${repo.category}</div></paper-item-body
                 ><hacs-icon-button
                   class="delete"
                   .icon=${mdiDelete}

src/components/dialogs/hacs-dialog-base.ts

@@ -1,15 +1,14 @@
 import { LitElement, property, PropertyValues } from "lit-element";
 import { HomeAssistant, Route } from "../../../homeassistant-frontend/src/types";
-import { Hacs } from "../../data/hacs";
-
 import {
+  Configuration,
   Critical,
   LovelaceResource,
-  Status,
-  Configuration,
-  Repository,
   RemovedRepository,
+  Repository,
+  Status,
 } from "../../data/common";
+import { Hacs } from "../../data/hacs";
 
 export class HacsDialogBase extends LitElement {
   @property({ attribute: false }) public configuration: Configuration;

src/components/dialogs/hacs-dialog.ts

@@ -1,10 +1,9 @@
-import { css, customElement, html, TemplateResult, property } from "lit-element";
-import { HacsDialogBase } from "./hacs-dialog-base";
-import { hacsStyleDialog, scrollBarStyle } from "../../styles/element-styles";
-import { HacsStyles } from "../../styles//hacs-common-style";
+import { css, customElement, html, property, TemplateResult } from "lit-element";
 import { createCloseHeading } from "../../../homeassistant-frontend/src/components/ha-dialog";
-
+import { HacsStyles } from "../../styles//hacs-common-style";
+import { hacsStyleDialog, scrollBarStyle } from "../../styles/element-styles";
 import "../hacs-icon-button";
+import { HacsDialogBase } from "./hacs-dialog-base";
 
 @customElement("hacs-dialog")
 export class HacsDialog extends HacsDialogBase {

src/components/dialogs/hacs-event-dialog.ts

@@ -1,23 +1,29 @@
 import { customElement, html, property, TemplateResult } from "lit-element";
-import "./hacs-about-dialog";
-import "./hacs-add-repository-dialog";
-import "./hacs-custom-repositories-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
-import "./hacs-generic-dialog";
-import "./hacs-install-dialog";
-import "./hacs-navigate-dialog";
-import "./hacs-reload-dialog";
-import "./hacs-removed-dialog";
-import "./hacs-repository-info-dialog";
-import "./hacs-update-dialog";
+
+const DIALOG = {
+  about: () => import("./hacs-about-dialog"),
+  "add-repository": () => import("./hacs-add-repository-dialog"),
+  "custom-repositories": () => import("./hacs-custom-repositories-dialog"),
+  generic: () => import("./hacs-generic-dialog"),
+  install: () => import("./hacs-install-dialog"),
+  navigate: () => import("./hacs-navigate-dialog"),
+  reload: () => import("./hacs-reload-dialog"),
+  removed: () => import("./hacs-removed-dialog"),
+  update: () => import("./hacs-update-dialog"),
+  "repository-info": () => import("./hacs-repository-info-dialog"),
+};
 
 @customElement("hacs-event-dialog")
 export class HacsEventDialog extends HacsDialogBase {
   @property({ attribute: false }) public params!: any;
 
   protected render(): TemplateResult | void {
     if (!this.active) return html``;
-    const el: any = document.createElement(`hacs-${this.params.type || "generic"}-dialog`);
+    const dialog = this.params.type || "generic";
+    DIALOG[dialog]();
+
+    const el: any = document.createElement(`hacs-${dialog}-dialog`);
     el.active = true;
     el.hass = this.hass;
     el.hacs = this.hacs;

src/components/dialogs/hacs-generic-dialog.ts

@@ -1,9 +1,9 @@
-import { customElement, html, TemplateResult, property } from "lit-element";
+import { customElement, html, property, TemplateResult } from "lit-element";
 import memoizeOne from "memoize-one";
-
 import { Repository } from "../../data/common";
-import { HacsDialogBase } from "./hacs-dialog-base";
 import { markdown } from "../../tools/markdown/markdown";
+import "./hacs-dialog";
+import { HacsDialogBase } from "./hacs-dialog-base";
 
 @customElement("hacs-generic-dialog")
 export class HacsGenericDialog extends HacsDialogBase {

src/components/dialogs/hacs-install-dialog.ts

@@ -1,34 +1,32 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import memoizeOne from "memoize-one";
-
 import {
   css,
   CSSResultArray,
   customElement,
   html,
-  TemplateResult,
   property,
   PropertyValues,
   query,
+  TemplateResult,
 } from "lit-element";
-
+import memoizeOne from "memoize-one";
+import "../../../homeassistant-frontend/src/components/ha-circular-progress";
+import "../../../homeassistant-frontend/src/components/ha-formfield";
+import "../../../homeassistant-frontend/src/components/ha-switch";
+import { Repository } from "../../data/common";
 import {
-  repositoryToggleBeta,
-  repositoryInstall,
   getRepositories,
+  repositoryInstall,
   repositoryInstallVersion,
+  repositoryToggleBeta,
+  repositoryUpdate,
 } from "../../data/websocket";
-import { updateLovelaceResources } from "../../tools/update-lovelace-resources";
 import { localize } from "../../localize/localize";
-import { HacsDialogBase } from "./hacs-dialog-base";
-import { Repository } from "../../data/common";
-import { repositoryUpdate } from "../../data/websocket";
-import "../../../homeassistant-frontend/src/components/ha-switch";
-import "../../../homeassistant-frontend/src/components/ha-formfield";
-import "../../../homeassistant-frontend/src/components/ha-circular-progress";
-import "./hacs-dialog";
+import { updateLovelaceResources } from "../../tools/update-lovelace-resources";
 import "../hacs-link";
+import "./hacs-dialog";
+import { HacsDialogBase } from "./hacs-dialog-base";
 
 @customElement("hacs-install-dialog")
 export class HacsInstallDialog extends HacsDialogBase {