Basic upgrade to svelte 5 (#6694)

open-chat-labs · Nov 1, 2024 · 66ad79f · 66ad79f
1 parent 2a773ed
commit 66ad79f
Show file tree

Hide file tree

Showing 86 changed files with 3,755 additions and 1,691 deletions.
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -16,10 +16,7 @@
         "sync_lang": "node ./generate.js"
     },
     "devDependencies": {
-        "@babel/core": "^7.22.10",
-        "@babel/preset-env": "^7.22.10",
         "@google-cloud/translate": "^8.0.1",
-        "@testing-library/svelte": "^4.0.3",
         "@tsconfig/svelte": "^5.0.0",
         "@types/dom-mediacapture-record": "^1.0.16",
         "@types/dompurify": "^3.0.2",
@@ -33,7 +30,6 @@
         "@typescript-eslint/parser": "^6.4.0",
         "assert": "2.0.0",
         "autoprefixer": "^10.4.15",
-        "babel-loader": "^9.1.3",
         "buffer": "6.0.3",
         "core-js": "^3.32.0",
         "dompurify": "^3.1.3",
@@ -49,12 +45,10 @@
         "prettier": "^3.0.1",
         "process": "^0.11.10",
         "rollup-plugin-dev": "^2.0.3",
+        "rollup-plugin-svelte": "^7.2.2",
         "sass": "^1.65.1",
         "stream-browserify": "3.0.0",
-        "svelte": "^4.2.19",
-        "svelte-check": "^4.0.1",
-        "svelte-dnd-action": "^0.9.50",
-        "svelte-preprocess": "^6.0.2",
+        "svelte-preprocess": "^6.0.3",
         "tslib": "^2.6.1",
         "typescript": "=5.4.2",
         "url": "^0.11.1",
@@ -72,7 +66,6 @@
         "@metamask/sdk": "^0.28.4",
         "@solana/wallet-adapter-wallets": "^0.19.32",
         "@solana/web3.js": "^1.91.8",
-        "@sveltejs/svelte-virtual-list": "^3.0.1",
         "@wagmi/chains": "^1.8.0",
         "@wagmi/connectors": "^5.1.10",
         "@wagmi/core": "^2.13.5",
@@ -89,9 +82,8 @@
         "rollbar": "^2.26.2",
         "sirv-cli": "^2.0.2",
         "smoothscroll": "^0.4.0",
-        "svelte-confetti": "^1.2.4",
-        "svelte-easy-crop": "^2.0.1",
-        "svelte-i18n": "^3.7.0",
+        "svelte-confetti": "^2.1.2",
+        "svelte-easy-crop": "^3.0.0",
         "svelte-material-icons": "^3.0.5",
         "svelte-qrcode-image": "^1.0.0-rc.2",
         "usergeek-ic-js": "hpeebles/usergeek-ic-js#3626834a09277d803e857d5968c0767771511047",

diff --git a/frontend/app/src/components/AlertBox.svelte b/frontend/app/src/components/AlertBox.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
+    import type { Snippet } from "svelte";
     import Alert from "svelte-material-icons/Alert.svelte";
     import { iconSize } from "../stores/iconSize";
 
-    export let icon: boolean = true;
+    type Props = {
+        icon?: boolean;
+        children?: Snippet
+    }
+
+    let { icon = true, children }: Props = $props();
 </script>
 
 <div class="alert-box">
@@ -12,7 +18,7 @@
         </div>
     {/if}
     <div class="alert-txt">
-        <slot />
+        {@render children?.()}
     </div>
 </div>
 

diff --git a/frontend/app/src/components/Head.svelte b/frontend/app/src/components/Head.svelte
@@ -7,6 +7,7 @@
         type UserLookup,
         routeForChatIdentifier,
         type ChatListScope,
+        userStore,
     } from "openchat-client";
     import { getContext, onMount } from "svelte";
     import { mobileOperatingSystem } from "../utils/devices";
@@ -16,7 +17,6 @@
 
     let viewPortContent = "width=device-width, initial-scale=1";
 
-    $: userStore = client.userStore;
     $: chatListScope = client.chatListScope;
     $: selectedChatStore = client.selectedChatStore;
     $: selectedCommunity = client.selectedCommunity;

diff --git a/frontend/app/src/components/SelectChatModal.svelte b/frontend/app/src/components/SelectChatModal.svelte
@@ -12,6 +12,7 @@
         MultiUserChat,
         OpenChat,
     } from "openchat-client";
+    import { userStore } from "openchat-client";
     import Avatar from "./Avatar.svelte";
     import CollapsibleCard from "./CollapsibleCard.svelte";
     import { AvatarSize, chatIdentifiersEqual } from "openchat-client";
@@ -72,7 +73,6 @@
     };
 
     $: searchTermLower = searchTerm.toLowerCase();
-    $: userStore = client.userStore;
     $: selectedChatId = client.selectedChatId;
     $: globalState = client.globalStateStore;
 

diff --git a/frontend/app/src/components/Translatable.svelte b/frontend/app/src/components/Translatable.svelte
@@ -4,7 +4,11 @@
     import { translatable } from "../actions/translatable";
     import type { ResourceKey } from "openchat-client";
 
-    export let resourceKey: ResourceKey;
+    interface Props {
+        resourceKey: ResourceKey;
+    }
+
+    let { resourceKey }: Props = $props();
 </script>
 
 <span use:translatable={{ key: resourceKey }}>

diff --git a/frontend/app/src/components/chatSwipe.ts b/frontend/app/src/components/chatSwipe.ts
@@ -6,7 +6,7 @@ export function clamp(min: number, max: number, val: number): number {
 
 export const swipe: Action<HTMLElement, { threshold: number }> = (
     node,
-    param = { threshold: 20 }
+    param: { threshold: number } = { threshold: 20 },
 ): ActionReturn<{ threshold: number }> => {
     let start = 0;
     let end = 0;
@@ -31,7 +31,7 @@ export const swipe: Action<HTMLElement, { threshold: number }> = (
                 bubbles: true,
                 cancelable: true,
                 detail: { diffx },
-            })
+            }),
         );
     }
 

diff --git a/frontend/app/src/components/home/AggregateCommonEvents.svelte b/frontend/app/src/components/home/AggregateCommonEvents.svelte
@@ -2,6 +2,7 @@
 
 <script lang="ts">
     import type { ChatIdentifier, Level, OpenChat, UserLookup, UserSummary } from "openchat-client";
+    import { userStore } from "openchat-client";
     import { getContext, onDestroy, onMount } from "svelte";
     import { _ } from "svelte-i18n";
     import Markdown from "./Markdown.svelte";
@@ -19,7 +20,6 @@
 
     const client = getContext<OpenChat>("client");
 
-    $: userStore = client.userStore;
     $: joinedText = buildJoinedText($userStore, joined);
     $: deletedText =
         messagesDeleted.length > 0

diff --git a/frontend/app/src/components/home/ChatEvent.svelte b/frontend/app/src/components/home/ChatEvent.svelte
@@ -17,6 +17,7 @@
         type ChatType,
         routeForChatIdentifier,
         type Level,
+        userStore,
     } from "openchat-client";
     import GroupChangedEvent from "./GroupChangedEvent.svelte";
     import GroupRulesChangedEvent from "./GroupRulesChangedEvent.svelte";
@@ -74,7 +75,6 @@
         event.event.content.kind === "message_reminder_created_content" &&
         event.event.content.hidden;
     $: typing = client.typing;
-    $: userStore = client.userStore;
     $: {
         userSummary = {
             kind: "user",

diff --git a/frontend/app/src/components/home/ChatFrozenEvent.svelte b/frontend/app/src/components/home/ChatFrozenEvent.svelte
@@ -2,19 +2,16 @@
 
 <script lang="ts">
     import NonMessageEvent from "./NonMessageEvent.svelte";
-    import type { OpenChat, UserSummary } from "openchat-client";
+    import type { UserSummary } from "openchat-client";
+    import { userStore } from "openchat-client";
     import { _ } from "svelte-i18n";
-    import { getContext } from "svelte";
     import type { ChatFrozenEvent } from "openchat-shared";
     import { buildDisplayName } from "../../utils/user";
 
-    const client = getContext<OpenChat>("client");
-
     export let event: ChatFrozenEvent;
     export let user: UserSummary | undefined;
     export let timestamp: bigint;
 
-    $: userStore = client.userStore;
     $: me = event.frozenBy === user?.userId;
     $: frozenByStr = buildDisplayName($userStore, event.frozenBy, me);
 

diff --git a/frontend/app/src/components/home/ChatList.svelte b/frontend/app/src/components/home/ChatList.svelte
@@ -17,6 +17,7 @@
         emptyCombinedUnreadCounts,
         chatIdentifierToString,
         type CombinedUnreadCounts,
+        userStore,
     } from "openchat-client";
     import { afterUpdate, beforeUpdate, createEventDispatcher, getContext, tick } from "svelte";
     import SearchResult from "./SearchResult.svelte";
@@ -63,7 +64,6 @@
         $selectedCommunity?.membership.role === "none" &&
         $selectedChatId === undefined;
     $: chatSummariesListStore = client.chatSummariesListStore;
-    $: userStore = client.userStore;
     $: user = $userStore.get($createdUser.userId);
     $: lowercaseSearch = searchTerm.toLowerCase();
     $: showExploreGroups =

diff --git a/frontend/app/src/components/home/ChatSubtext.svelte b/frontend/app/src/components/home/ChatSubtext.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ChatSummary, OpenChat } from "openchat-client";
+    import { userStore } from "openchat-client";
     import { createEventDispatcher, getContext } from "svelte";
     import { _ } from "svelte-i18n";
     import { now } from "../../stores/time";
@@ -14,7 +15,6 @@
     export let chat: ChatSummary;
     export let clickableMembers = false;
 
-    $: userStore = client.userStore;
     $: userId = chat.kind === "direct_chat" ? chat.them.userId : "";
     $: isBot = $userStore.get(userId)?.kind === "bot";
     $: isSuspended = $userStore.get(userId)?.suspended ?? false;

diff --git a/frontend/app/src/components/home/ChatSummary.svelte b/frontend/app/src/components/home/ChatSummary.svelte
@@ -8,6 +8,7 @@
         CommunitySummary,
         DiamondMembershipStatus,
     } from "openchat-client";
+    import { userStore } from "openchat-client";
     import Delete from "svelte-material-icons/Delete.svelte";
     import DotsVertical from "svelte-material-icons/DotsVertical.svelte";
     import Heart from "svelte-material-icons/Heart.svelte";
@@ -60,7 +61,6 @@
     $: blockedUsers = client.blockedUsers;
     $: messagesRead = client.messagesRead;
     $: typersByContext = client.typersByContext;
-    $: userStore = client.userStore;
     $: favouritesStore = client.favouritesStore;
     $: menuColour = "var(--icon-txt)";
     $: externalContent = chatSummary.kind === "channel" && chatSummary.externalUrl !== undefined;

diff --git a/frontend/app/src/components/home/ChatUnfrozenEvent.svelte b/frontend/app/src/components/home/ChatUnfrozenEvent.svelte
@@ -2,19 +2,16 @@
 
 <script lang="ts">
     import NonMessageEvent from "./NonMessageEvent.svelte";
-    import type { OpenChat, UserSummary } from "openchat-client";
+    import type { UserSummary } from "openchat-client";
+    import { userStore } from "openchat-client";
     import { _ } from "svelte-i18n";
-    import { getContext } from "svelte";
     import type { ChatUnfrozenEvent } from "openchat-shared";
     import { buildDisplayName } from "../../utils/user";
 
-    const client = getContext<OpenChat>("client");
-
     export let event: ChatUnfrozenEvent;
     export let user: UserSummary | undefined;
     export let timestamp: bigint;
 
-    $: userStore = client.userStore;
     $: me = event.unfrozenBy === user?.userId;
     $: unfrozenByStr = buildDisplayName($userStore, event.unfrozenBy, me);
 

diff --git a/frontend/app/src/components/home/ChitHallOfFame.svelte b/frontend/app/src/components/home/ChitHallOfFame.svelte
@@ -66,9 +66,15 @@
             .chitLeaderboard()
             .then((result) => {
                 switch (mode) {
-                    case "all-time": leaders = result.allTime; break;
-                    case "last-month": leaders = result.lastMonth; break;
-                    case "this-month": leaders = result.thisMonth; break;
+                    case "all-time":
+                        leaders = result.allTime;
+                        break;
+                    case "last-month":
+                        leaders = result.lastMonth;
+                        break;
+                    case "this-month":
+                        leaders = result.thisMonth;
+                        break;
                 }
 
                 leaders = leaders.slice(0, 10);
@@ -123,15 +129,17 @@
                     class:selected={mode === "all-time"}>
                     {$_("halloffame.allTime")}
                 </div>
-            </div>        
+            </div>
             <div class="scoreboard-container">
                 <table cellpadding="3px" class="scoreboard">
                     <thead class="table-header">
-                        {#if !$mobileWidth}
-                            <th class="rank">#</th>
-                        {/if}
-                        <th class="username">{$_("halloffame.username")}</th>
-                        <th class="balance">CHIT</th>
+                        <tr>
+                            {#if !$mobileWidth}
+                                <th class="rank">#</th>
+                            {/if}
+                            <th class="username">{$_("halloffame.username")}</th>
+                            <th class="balance">CHIT</th>
+                        </tr>
                     </thead>
                     <tbody>
                         {#each leaders as leader, i}
@@ -312,5 +320,5 @@
                 border-bottom: 2px solid var(--txt);
             }
         }
-    }    
+    }
 </style>
diff --git a/frontend/app/src/components/home/CryptoTransferBuilder.svelte b/frontend/app/src/components/home/CryptoTransferBuilder.svelte
@@ -2,6 +2,7 @@
     import Button from "../Button.svelte";
     import ButtonGroup from "../ButtonGroup.svelte";
     import type { ChatSummary, OpenChat, UserSummary } from "openchat-client";
+    import { userStore } from "openchat-client";
     import type { CryptocurrencyContent, MessageContext } from "openchat-shared";
     import TokenInput from "./TokenInput.svelte";
     import Overlay from "../Overlay.svelte";
@@ -46,7 +47,6 @@
     $: lastCryptoSent = client.lastCryptoSent;
     $: cryptoBalanceStore = client.cryptoBalance;
     $: cryptoBalance = $cryptoBalanceStore[ledger] ?? BigInt(0);
-    $: userStore = client.userStore;
     $: cryptoLookup = client.enhancedCryptoLookup;
     $: tokenDetails = $cryptoLookup[ledger];
     $: symbol = tokenDetails.symbol;

diff --git a/frontend/app/src/components/home/CurrentChatHeader.svelte b/frontend/app/src/components/home/CurrentChatHeader.svelte
@@ -4,6 +4,7 @@
         routeForChatIdentifier,
         type OpenChat,
         type TypersByKey,
+        userStore,
     } from "openchat-client";
     import page from "page";
     import { mobileWidth } from "../../stores/screenDimensions";
@@ -41,7 +42,6 @@
     let showSuspendUserModal = false;
 
     $: typersByContext = client.typersByContext;
-    $: userStore = client.userStore;
     $: userId = selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "";
     $: isMultiUser =
         selectedChatSummary.kind === "group_chat" || selectedChatSummary.kind === "channel";

diff --git a/frontend/app/src/components/home/CurrentChatMenu.svelte b/frontend/app/src/components/home/CurrentChatMenu.svelte
@@ -22,7 +22,12 @@
     import MenuItem from "../MenuItem.svelte";
     import { iconSize } from "../../stores/iconSize";
     import { _ } from "svelte-i18n";
-    import { chatIdentifiersEqual, type ChatSummary, type OpenChat } from "openchat-client";
+    import {
+        userStore,
+        chatIdentifiersEqual,
+        type ChatSummary,
+        type OpenChat,
+    } from "openchat-client";
     import { createEventDispatcher, getContext, onMount } from "svelte";
     import { notificationsSupported } from "../../utils/notifications";
     import { toastStore } from "../../stores/toast";
@@ -56,7 +61,6 @@
     $: canMakeProposals =
         client.tryGetNervousSystem(governanceCanisterId)?.submittingProposalsEnabled ?? false;
     $: userId = selectedChatSummary.kind === "direct_chat" ? selectedChatSummary.them.userId : "";
-    $: userStore = client.userStore;
     $: isBot = $userStore.get(userId)?.kind === "bot";
     $: isSuspended = $userStore.get(userId)?.suspended ?? false;
     $: lastState = $rightPanelHistory[$rightPanelHistory.length - 1] ?? { kind: "no_panel" };

diff --git a/frontend/app/src/components/home/CurrentChatMessages.svelte b/frontend/app/src/components/home/CurrentChatMessages.svelte
@@ -19,6 +19,7 @@
         chatIdentifiersEqual,
         type ChatIdentifier,
         routeForChatIdentifier,
+        userStore,
     } from "openchat-client";
     import InitialGroupMessage from "./InitialGroupMessage.svelte";
     import page from "page";
@@ -60,7 +61,6 @@
     $: focusMessageIndex = client.focusMessageIndex;
     $: chatStateStore = client.chatStateStore;
     $: chatListScope = client.chatListScope;
-    $: userStore = client.userStore;
     $: showAvatar = initialised && shouldShowAvatar(chat, events[0]?.index);
     $: selectedCommunity = client.selectedCommunity;
     $: messageContext = { chatId: chat.id, threadRootMessageIndex: undefined };