From 86227769ccbcff1c2fb06120d618a63b6d0ee2a1 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@dfinity.org>
Date: Tue, 17 Dec 2024 09:27:26 +0100
Subject: [PATCH] chore: self-closing HTML tags for non-void elements are
 ambiguous (#6022)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Motivation

Fix warning which becomes an error with Svelte v5 tooling (PR #6020).

```
  19:5  error  Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag(element_invalid_self_closing_tag)  svelte/valid-compile
```

# Changes

- e.g. `<div />` -> `<div></div>`

Signed-off-by: David Dal Busco <david.dalbusco@dfinity.org>
---
 .../lib/components/accounts/WalletPageHeading.svelte   |  2 +-
 frontend/src/lib/components/common/EmptyCards.svelte   | 10 +++++-----
 .../project-detail/CommitmentProgressBar.svelte        |  2 +-
 .../src/lib/components/ui/ProposalStatusTag.svelte     |  2 +-
 .../accounts/IcrcBalancesObserverTest.svelte           |  2 +-
 .../accounts/IcrcWalletTransactionsObserverTest.svelte |  2 +-
 .../src/tests/lib/directives/IntersectionTest.svelte   |  2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/accounts/WalletPageHeading.svelte b/frontend/src/lib/components/accounts/WalletPageHeading.svelte
index 618749e1790..291d8b9afd3 100644
--- a/frontend/src/lib/components/accounts/WalletPageHeading.svelte
+++ b/frontend/src/lib/components/accounts/WalletPageHeading.svelte
@@ -108,7 +108,7 @@
               {/if}
             </TooltipIcon>
           </div>
-          <div class="vertical-divider" />
+          <div class="vertical-divider"></div>
         {/if}<div class="account-name">
           {accountName}
         </div>
diff --git a/frontend/src/lib/components/common/EmptyCards.svelte b/frontend/src/lib/components/common/EmptyCards.svelte
index 5c22cb7b3ba..565531b1430 100644
--- a/frontend/src/lib/components/common/EmptyCards.svelte
+++ b/frontend/src/lib/components/common/EmptyCards.svelte
@@ -4,19 +4,19 @@
 
 <div class="card-grid" data-tid="empty-cards-component">
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
   <Card disabled>
-    <div class="card-item" />
+    <div class="card-item"></div>
   </Card>
 </div>
 
diff --git a/frontend/src/lib/components/project-detail/CommitmentProgressBar.svelte b/frontend/src/lib/components/project-detail/CommitmentProgressBar.svelte
index aea7b579211..51f1c853f1e 100644
--- a/frontend/src/lib/components/project-detail/CommitmentProgressBar.svelte
+++ b/frontend/src/lib/components/project-detail/CommitmentProgressBar.svelte
@@ -39,7 +39,7 @@
             class="min-indicator"
             data-tid="commitment-min-indicator"
             style={`left: calc(${minIndicatorPosition}px);`}
-          />
+          ></span>
         </div>
       </div>
     {/if}
diff --git a/frontend/src/lib/components/ui/ProposalStatusTag.svelte b/frontend/src/lib/components/ui/ProposalStatusTag.svelte
index 99e93d2e23e..f06a2cbf588 100644
--- a/frontend/src/lib/components/ui/ProposalStatusTag.svelte
+++ b/frontend/src/lib/components/ui/ProposalStatusTag.svelte
@@ -26,7 +26,7 @@
             class="actionable-status-badge"
             role="status"
             transition:scale={{ duration: 250, easing: cubicOut }}
-          />
+          ></div>
         </Tooltip>
       </div>
     {/if}
diff --git a/frontend/src/tests/lib/components/accounts/IcrcBalancesObserverTest.svelte b/frontend/src/tests/lib/components/accounts/IcrcBalancesObserverTest.svelte
index f4deb622f5f..893df357a9b 100644
--- a/frontend/src/tests/lib/components/accounts/IcrcBalancesObserverTest.svelte
+++ b/frontend/src/tests/lib/components/accounts/IcrcBalancesObserverTest.svelte
@@ -11,5 +11,5 @@
   ledgerCanisterId={CKTESTBTC_LEDGER_CANISTER_ID}
   {reload}
 >
-  <div data-tid="test-observer" />
+  <div data-tid="test-observer"></div>
 </IcrcBalancesObserver>
diff --git a/frontend/src/tests/lib/components/accounts/IcrcWalletTransactionsObserverTest.svelte b/frontend/src/tests/lib/components/accounts/IcrcWalletTransactionsObserverTest.svelte
index db4e00aad61..021ede636e6 100644
--- a/frontend/src/tests/lib/components/accounts/IcrcWalletTransactionsObserverTest.svelte
+++ b/frontend/src/tests/lib/components/accounts/IcrcWalletTransactionsObserverTest.svelte
@@ -13,5 +13,5 @@
   ledgerCanisterId={CKTESTBTC_LEDGER_CANISTER_ID}
   indexCanisterId={CKTESTBTC_INDEX_CANISTER_ID}
 >
-  <div data-tid="test-observer" />
+  <div data-tid="test-observer"></div>
 </IcrcWalletTransactionsObserver>
diff --git a/frontend/src/tests/lib/directives/IntersectionTest.svelte b/frontend/src/tests/lib/directives/IntersectionTest.svelte
index 25e871dd4f4..c3608633d0a 100644
--- a/frontend/src/tests/lib/directives/IntersectionTest.svelte
+++ b/frontend/src/tests/lib/directives/IntersectionTest.svelte
@@ -2,4 +2,4 @@
   import { onIntersection } from "$lib/directives/intersection.directives";
 </script>
 
-<div use:onIntersection />
+<div use:onIntersection></div>