Cleanup

package.json

@@ -153,9 +153,7 @@
     "@polymer/iron-autogrow-textarea": "^3.0.1",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
-    "@polymer/iron-image": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
-    "@polymer/iron-label": "^3.0.1",
     "@polymer/iron-overlay-behavior": "^3.0.2",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/paper-checkbox": "^3.1.0",
@@ -185,11 +183,11 @@
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
     "@vue/web-component-wrapper": "^1.2.0",
     "@webcomponents/webcomponentsjs": "^2.2.7",
-    "chart.js": "^2.9.4",
-    "chartjs-chart-timeline": "^0.4.0",
+    "chart.js": "^3.3.2",
     "comlink": "^4.3.1",
     "core-js": "^3.6.5",
     "cropperjs": "^1.5.11",
+    "date-fns": "^2.22.1",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fecha": "^4.2.0",
@@ -242,7 +240,6 @@
   },
   "dependenciesOverride": {
     "node-emoji": "^1.10.0",
-    "@polymer/paper-dropdown-menu": "3.0.1",
     "@material/mwc-linear-progress": "canary"
   },
   "devDependenciesOverride": {

script/bootstrap

@@ -6,7 +6,6 @@ set -e
 
 cd "$(dirname "$0")/.."
 
-rm -rf node_modules
 rm -f yarn.lock
 node ./script/merge_requirements.js
 yarn install

script/gulp/rollup.js

@@ -70,7 +70,7 @@ const outputconfig = (isDev) => {
     dir: "./hacs_frontend/",
     chunkFileNames: !isDev ? "c.[hash].js" : "[name]-dev.js",
     assetFileNames: !isDev ? "a.[hash].js" : "[name]-dev.js",
-    entryFileNames: "e.[hash].js",
+    entryFileNames: !isDev ? "[name]-[hash].js" : "[name]-dev.js",
     format: "es",
     intro: "const __DEMO__ = false;",
   };
@@ -89,12 +89,11 @@ function createServer() {
 }
 
 gulp.task("rollup-develop", () => {
-  isDev = true;
   const watcher = rollup.watch({
     input: inputconfig.input,
     plugins: inputconfig.plugins,
     output: outputconfig(true),
-    preserveEntrySignatures: "strict",
+    preserveEntrySignatures: false,
     watch: {
       include: ["./src/**"],
       chokidar: {

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

@@ -1,50 +1,34 @@
-import { html, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-
 import { markdown } from "../../tools/markdown/markdown";
 import { version } from "../../version";
-import { HacsDialogBase } from "./hacs-dialog-base";
-import "./hacs-dialog";
-import "../hacs-link";
 
-@customElement("hacs-about-dialog")
-export class HacsAboutDialog extends HacsDialogBase {
-  protected render(): TemplateResult | void {
-    if (!this.active) return html``;
-    return html`
-      <hacs-dialog
-        .active=${this.active}
-        .hass=${this.hass}
-        .title=${this.narrow ? "HACS" : "Home Assistant Community Store"}
-        hideActions
-      >
-        <div class="content">
-          ${markdown.html(`
-**${this.hacs.localize("dialog_about.integration_version")}:** | ${this.hacs.configuration.version}
---|--
-**${this.hacs.localize("dialog_about.frontend_version")}:** | ${version}
-**${this.hacs.localize("common.repositories")}:** | ${this.repositories.length}
-**${this.hacs.localize(
-            "dialog_about.installed_repositories"
-          )}:** | ${this.repositories.filter((repo) => repo.installed).length}
+import { Hacs } from "../../data/hacs";
+import { showAlertDialog } from "../../../homeassistant-frontend/src/dialogs/generic/show-dialog-box";
+
+export async function showDialogAbout(element: any, hacs: Hacs) {
+  await showAlertDialog(element, {
+    title: "Home Assistant Community Store",
+    text: markdown.html(`
+  **${hacs.localize("dialog_about.integration_version")}:** | ${hacs.configuration.version}
+  --|--
+  **${hacs.localize("dialog_about.frontend_version")}:** | ${version}
+  **${hacs.localize("common.repositories")}:** | ${hacs.repositories.length}
+  **${hacs.localize("dialog_about.installed_repositories")}:** | ${
+      hacs.repositories.filter((repo) => repo.installed).length
+    }
 
-**${this.hacs.localize("dialog_about.useful_links")}:**
+  **${hacs.localize("dialog_about.useful_links")}:**
 
-- [General documentation](https://hacs.xyz/)
-- [Configuration](https://hacs.xyz/docs/configuration/start)
-- [FAQ](https://hacs.xyz/docs/faq/what)
-- [GitHub](https://github.com/hacs)
-- [Discord](https://discord.gg/apgchf8)
-- [Become a GitHub sponsor? ❤️](https://github.com/sponsors/ludeeus)
-- [BuyMe~~Coffee~~Beer? 🍺🙈](https://buymeacoffee.com/ludeeus)
+  - [General documentation](https://hacs.xyz/)
+  - [Configuration](https://hacs.xyz/docs/configuration/start)
+  - [FAQ](https://hacs.xyz/docs/faq/what)
+  - [GitHub](https://github.com/hacs)
+  - [Discord](https://discord.gg/apgchf8)
+  - [Become a GitHub sponsor? ❤️](https://github.com/sponsors/ludeeus)
+  - [BuyMe~~Coffee~~Beer? 🍺🙈](https://buymeacoffee.com/ludeeus)
 
-***
+  ***
 
-_Everything you find in HACS is **not** tested by Home Assistant, that includes HACS itself.
-The HACS and Home Assistant teams do not support **anything** you find here._
-        `)}
-        </div>
-      </hacs-dialog>
-    `;
-  }
+  _Everything you find in HACS is **not** tested by Home Assistant, that includes HACS itself.
+  The HACS and Home Assistant teams do not support **anything** you find here._`),
+  });
 }

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

@@ -3,7 +3,6 @@ import { customElement, property } from "lit/decorators";
 import { HacsDialogBase } from "./hacs-dialog-base";
 
 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"),
@@ -12,7 +11,7 @@ const DIALOG = {
   removed: () => import("./hacs-removed-dialog"),
   update: () => import("./hacs-update-dialog"),
   "repository-info": () => import("./hacs-repository-info-dialog"),
-  progress: () => import("./hacs-progress-dialog")
+  progress: () => import("./hacs-progress-dialog"),
 };
 
 @customElement("hacs-event-dialog")
@@ -37,7 +36,7 @@ export class HacsEventDialog extends HacsDialogBase {
     el.status = this.status;
 
     if (this.params) {
-      for (let [key, value] of Object.entries(this.params)) {
+      for (const [key, value] of Object.entries(this.params)) {
         el[key] = value;
       }
     }

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

@@ -169,7 +169,7 @@ export class HacsInstallDialog extends HacsDialogBase {
           ?disabled=${!this._repository.can_install || this._toggle}
           @click=${this._installRepository}
           >${this._installing
-            ? html`<ha-circular-progress active></ha-circular-progress>`
+            ? html`<ha-circular-progress active size="small"></ha-circular-progress>`
             : this.hacs.localize("common.install")}</mwc-button
         >
         <hacs-link slot="secondaryaction" .url="https://github.com/${this._repository.full_name}"

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

@@ -1,3 +1,4 @@
+import "../../../homeassistant-frontend/src/components/ha-circular-progress";
 import { html, TemplateResult, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import "./hacs-dialog";
@@ -6,9 +7,13 @@ import { HacsDialogBase } from "./hacs-dialog-base";
 @customElement("hacs-progress-dialog")
 export class HacsProgressDialog extends HacsDialogBase {
   @property() public title?: string;
+
   @property() public content?: string;
+
   @property() public confirmText?: string;
+
   @property() public confirm: () => Promise<void>;
+
   @property({ type: Boolean }) private _inProgress: boolean = false;
 
   shouldUpdate(changedProperties: PropertyValues) {
@@ -33,9 +38,11 @@ export class HacsProgressDialog extends HacsDialogBase {
           ${this.hacs.localize("common.cancel")}
         </mwc-button>
         <mwc-button slot="primaryaction" @click=${this._confirmed}>
-          ${this._inProgress
+          ${
+            this._inProgress
               ? html`<ha-circular-progress active size="small"></ha-circular-progress>`
-              : this.confirmText || this.hacs.localize("confirm.yes")}</mwc-button
+              : this.confirmText || this.hacs.localize("confirm.yes")
+          }</mwc-button
           >
         </mwc-button>
       </hacs-dialog>
@@ -44,9 +51,9 @@ export class HacsProgressDialog extends HacsDialogBase {
 
   private async _confirmed() {
     this._inProgress = true;
-    await this.confirm()
+    await this.confirm();
     this._inProgress = false;
-    this._close()
+    this._close();
   }
 
   private _close() {

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

@@ -17,7 +17,7 @@ export class HacsRemovedDialog extends HacsDialogBase {
       <hacs-dialog
         .active=${this.active}
         .hass=${this.hass}
-        .title=${this.hacs.localize("entry.messages.removed").replace("'{repository}'", "")}
+        .title=${this.hacs.localize("entry.messages.removed", { repository: "" })}
       >
         <div class="content">
           <div><b>${this.hacs.localize("dialog_removed.name")}:</b> ${this.repository.name}</div>
@@ -41,7 +41,7 @@ export class HacsRemovedDialog extends HacsDialogBase {
         </div>
         <mwc-button class="uninstall" slot="primaryaction" @click=${this._uninstallRepository}
           >${this._updating
-            ? html`<ha-circular-progress active></ha-circular-progress>`
+            ? html`<ha-circular-progress active size="small"></ha-circular-progress>`
             : this.hacs.localize("common.uninstall")}</mwc-button
         >
         <!--<mwc-button slot="secondaryaction" @click=${this._ignoreMessage}