Use new replace object for localize

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

@@ -139,10 +139,10 @@ export class HacsInstallDialog extends HacsDialogBase {
             : ""}
           ${!this._repository.can_install
             ? html`<p class="error">
-                ${this.hacs
-                  .localize("confirm.home_assistant_version_not_correct")
-                  .replace("{haversion}", this.hass.config.version)
-                  .replace("{minversion}", this._repository.homeassistant)}
+                ${this.hacs.localize("confirm.home_assistant_version_not_correct", {
+                  haversion: this.hass.config.version,
+                  minversion: this._repository.homeassistant,
+                })}
               </p>`
             : ""}
           <div class="note">

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

@@ -118,10 +118,10 @@ export class HacsUpdateDialog extends HacsDialogBase {
           ${
             !repository.can_install
               ? html`<p class="error">
-                  ${this.hacs
-                    .localize("confirm.home_assistant_version_not_correct")
-                    .replace("{haversion}", this.hass.config.version)
-                    .replace("{minversion}", repository.homeassistant)}
+                  ${this.hacs.localize("confirm.home_assistant_version_not_correct", {
+                    haversion: this.hass.config.version,
+                    minversion: repository.homeassistant,
+                  })}
                 </p>`
               : ""
           }

src/localize/localize.ts

@@ -6,7 +6,7 @@ const warnings: { language: string[]; sting: Record<string, Array<string>> } = {
   sting: {},
 };
 
-export function localize(language: string, string: string, replace?: Record<string, any>) {
+export function localize(language: string, string: string, replace?: Record<string, any>): string {
   let translated: any;
 
   const logger = new HacsLogger("localize");
@@ -63,11 +63,11 @@ export function localize(language: string, string: string, replace?: Record<stri
         logger.error(`Variable '${key}' does not exist in '${string}' with '${lang}'`);
         continue;
       }
-      translated = translated.replace(`{${key}}`, replace[key]);
+      translated = translated.replace(`{${key}}`, String(replace[key]));
     }
     if (translated.includes("{") || translated.includes("}")) {
       logger.error(`Translation for '${string}' with '${lang}' is missing variables`);
     }
   }
-  return translated;
+  return String(translated);
 }

src/panels/hacs-entry-panel.ts

@@ -123,10 +123,10 @@ export class HacsEntryPanel extends LitElement {
                         <paper-item-body two-line>
                           ${repository.name}
                           <div secondary>
-                            ${this.hacs
-                              .localize("sections.pending_repository_upgrade")
-                              .replace("{installed}", repository.installed_version)
-                              .replace("{available}", repository.available_version)}
+                            ${this.hacs.localize("sections.pending_repository_upgrade", {
+                              installed: repository.installed_version,
+                              available: repository.available_version,
+                            })}
                           </div>
                         </paper-item-body>
                       </paper-icon-item>

src/panels/hacs-store-panel.ts

@@ -74,9 +74,8 @@ export class HacsStorePanel extends LitElement {
 
   private _updateFilters(e) {
     const current = this.filters[this.section]?.find((filter) => filter.id === e.detail.id);
-    this.filters[this.section].find(
-      (filter) => filter.id === current.id
-    ).checked = !current.checked;
+    this.filters[this.section].find((filter) => filter.id === current.id).checked =
+      !current.checked;
     this.requestUpdate();
   }
 
@@ -198,22 +197,22 @@ export class HacsStorePanel extends LitElement {
 
   private _renderNoResultsFound(): TemplateResult {
     return html`<ha-card class="no-repositories">
-      <div class="header">${this.hacs.localize("store.no_repositories")} 😕</div>
+      <div class="header">${this.hacs!.localize("store.no_repositories")} 😕</div>
       <p>
-        ${this.hacs
-          .localize("store.no_repositories_found_desc1")
-          .replace("{searchInput}", this._searchInput)}
+        ${this.hacs!.localize("store.no_repositories_found_desc1", {
+          searchInput: this._searchInput,
+        })}
         <br />
-        ${this.hacs.localize("store.no_repositories_found_desc2")}
+        ${this.hacs!.localize("store.no_repositories_found_desc2")}
       </p>
     </ha-card>`;
   }
 
   private _renderEmpty(): TemplateResult {
     return html`<ha-card class="no-repositories">
-      <div class="header">${this.hacs.localize("store.no_repositories")} 😕</div>
+      <div class="header">${this.hacs!.localize("store.no_repositories")} 😕</div>
       <p>
-        ${this.hacs.localize("store.no_repositories_desc1")}<br />${this.hacs.localize(
+        ${this.hacs!.localize("store.no_repositories_desc1")}<br />${this.hacs!.localize(
           "store.no_repositories_desc2"
         )}
       </p>

src/tools/get-messages.ts

@@ -18,9 +18,7 @@ export const getMessages = memoizeOne((hacs: Hacs) => {
     if (repo.installed && hacs.removed.map((r) => r.repository)?.includes(repo.full_name)) {
       const removedrepo = hacs.removed.find((r) => r.repository === repo.full_name);
       messages.push({
-        name: hacs
-          .localize("entry.messages.removed")
-          .replace("{repository}", removedrepo.repository),
+        name: hacs.localize("entry.messages.removed", { repository: removedrepo.repository }),
         info: removedrepo.reason,
         severity: "error",
         dialog: "removed",
@@ -57,9 +55,9 @@ export const getMessages = memoizeOne((hacs: Hacs) => {
   if (repositoriesNotAddedToLovelace.length > 0) {
     messages.push({
       name: hacs.localize("entry.messages.resources.title"),
-      info: hacs
-        .localize("entry.messages.resources.content")
-        .replace("{number}", String(repositoriesNotAddedToLovelace.length)),
+      info: hacs.localize("entry.messages.resources.content", {
+        number: repositoriesNotAddedToLovelace.length,
+      }),
       severity: "error",
       path: "/hacs/frontend",
     });
@@ -68,15 +66,13 @@ export const getMessages = memoizeOne((hacs: Hacs) => {
   if (repositoriesRestartPending.length > 0) {
     messages.push({
       name: hacs.localize("entry.messages.restart.title"),
-      info: hacs
-        .localize("entry.messages.restart.content")
-        .replace("{number}", String(repositoriesRestartPending.length))
-        .replace(
-          "{pluralWording}",
+      info: hacs.localize("entry.messages.restart.content", {
+        number: repositoriesRestartPending.length,
+        pluralWording:
           repositoriesRestartPending.length === 1
             ? hacs.localize("common.integration")
-            : hacs.localize("common.integration_plural")
-        ),
+            : hacs.localize("common.integration_plural"),
+      }),
       severity: "error",
       path: "/config/server_control",
     });