feat: upgrade to svelte 5

package.json

@@ -41,8 +41,8 @@
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@mistweaverco/electron-notarize-async": "0.0.4",
     "@fortawesome/fontawesome-free": "6.6.0",
-    "@sveltejs/adapter-node": "5.2.9",
-    "@sveltejs/vite-plugin-svelte": "3.1.2",
+    "@sveltejs/adapter-node": "^5.2.9",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@types/node": "^20.14.8",
     "bulma": "1.0.2",
     "dotenv": "16.4.5",
@@ -55,11 +55,11 @@
     "kit-monorepo": "github:sveltejs/kit",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.5",
-    "svelte": "4.2.19",
+    "svelte": "^5.4.0",
     "svelte-awesome-color-picker": "3.1.4",
-    "svelte-check": "3.8.6",
+    "svelte-check": "^4.1.0",
     "tslib": "^2.6.3",
     "typescript": "^5.5.2",
-    "vite": "^5.3.1"
+    "vite": "^6.0.0"
   }
 }

src/main/index.ts

@@ -53,6 +53,8 @@ async function createWindow(): Promise<void> {
   MAIN_WINDOW = new BrowserWindow({
     width: mainWindowState.width,
     height: mainWindowState.height,
+    minWidth: 400,
+    minHeight: 200,
     x: mainWindowState.x,
     y: mainWindowState.y,
     show: false,

src/renderer/src/App.svelte

@@ -3,46 +3,32 @@
   import Join from './Join.svelte'
   import Host from './Host.svelte'
   import Settings from './Settings.svelte'
-  import {
-    useActiveView,
-    useNavigationEnabled,
-    useIsHosting,
-    useIsWatching,
-    useParticipantUrl,
-    useHostUrl
-  } from './stores'
+  import { activeView, participantUrl, hostUrl, isHosting } from './stores.svelte'
   import { getDataFromBananasUrl } from './Utils'
-  const activeView = useActiveView()
-  const participantUrl = useParticipantUrl()
-  const hostUrl = useHostUrl()
-  const isHosting = useIsHosting()
-  useNavigationEnabled()
-  useIsWatching()
+
   window.onmessage = async (evt: MessageEvent): Promise<void> => {
     const { data } = evt
     if (data.type !== 'openBananasURL') return
     const urlData = await getDataFromBananasUrl(data.url)
     switch (urlData.type) {
       case 'host':
-        $activeView = 'join'
-        $participantUrl = data.url
+        activeView.value = 'join'
+        participantUrl.value = data.url
         break
       case 'participant':
-        if ($activeView !== 'host' || !$isHosting) return
-        $hostUrl = data.url
+        if (activeView.value !== 'host' || !isHosting.value) return
+        hostUrl.value = data.url
         break
     }
   }
 </script>
 
 <Navigation />
 
-{#if $activeView === 'join'}
+{#if activeView.value === 'join'}
   <Join />
-{/if}
-{#if $activeView === 'host'}
+{:else if activeView.value === 'host'}
   <Host />
-{/if}
-{#if $activeView === 'settings'}
+{:else if activeView.value === 'settings'}
   <Settings />
 {/if}

src/renderer/src/Host.svelte

@@ -1,39 +1,40 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { useNavigationEnabled, useIsHosting, useHostUrl } from './stores'
+  import { hostUrl, isHosting, navigationEnabled } from './stores.svelte'
   import { mayBeConnectionString, getDataFromBananasUrl, ConnectionType } from './Utils'
   import WebRTC from './WebRTC.svelte'
 
-  const navigationEnabled = useNavigationEnabled()
-  const isHosting = useIsHosting()
-
   let webRTCComponent: WebRTC
   let connectButton: HTMLButtonElement
   let copyButton: HTMLButtonElement
 
-  let cursorsActive = false
-  let displayStreamActive = false
-  let microphoneActive = true
-  let isStreaming = false
-  let sessionStarted = false
-  let connectionStringIsValid: boolean | null = null
-  let connectToUserName = ''
-  let copyButtonIsLoading = false
-  let connectionString = useHostUrl()
+  let cursorsActive = $state(false)
+  let displayStreamActive = $state(false)
+  let microphoneActive = $state(true)
+  let isStreaming = $state(false)
+  let sessionStarted = $state(false)
+  let connectionStringIsValid: boolean | null = $state(null)
+  let connectToUserName = $state('')
+  let copyButtonIsLoading = $state(false)
+  let connectionString = $derived(hostUrl.value)
 
   const onConnectionStringChange = async (): Promise<void> => {
-    if ($connectionString === '') {
+    if (connectionString === '') {
       connectionStringIsValid = null
       return
     }
-    connectionStringIsValid = mayBeConnectionString(ConnectionType.PARTICIPANT, $connectionString)
+
+    connectionStringIsValid = mayBeConnectionString(ConnectionType.PARTICIPANT, connectionString)
+
     if (connectionStringIsValid) {
-      const banansData = await getDataFromBananasUrl($connectionString)
+      const banansData = await getDataFromBananasUrl(connectionString)
       connectToUserName = banansData.data.username
     }
   }
 
-  $: $connectionString, onConnectionStringChange()
+  $effect(() => {
+    onConnectionStringChange()
+  })
 
   const toggleRemoteCursors = (): void => {
     cursorsActive = !cursorsActive
@@ -44,11 +45,12 @@
   onMount(async () => {
     const settings = await window.BananasApi.getSettings()
     connectButton.addEventListener('click', async () => {
-      const data = await getDataFromBananasUrl($connectionString)
+      const data = await getDataFromBananasUrl(connectionString)
       await webRTCComponent.Connect(data.rtcSessionDescription)
       isStreaming = true
       displayStreamActive = true
     })
+
     copyButton.addEventListener('click', async () => {
       copyButtonIsLoading = true
       const offer = await webRTCComponent.CreateHostUrl({
@@ -63,20 +65,20 @@
   const onStartSessionButtonClick = async (): Promise<void> => {
     await webRTCComponent.Setup()
     sessionStarted = true
-    $navigationEnabled = false
-    $isHosting = true
+    navigationEnabled.value = false
+    isHosting.value = true
   }
   const reset = (): void => {
-    $connectionString = ''
+    hostUrl.value = ''
     cursorsActive = false
     displayStreamActive = false
     microphoneActive = true
     isStreaming = false
     sessionStarted = false
     connectionStringIsValid = null
     copyButtonIsLoading = false
-    $navigationEnabled = true
-    $isHosting = false
+    navigationEnabled.value = true
+    isHosting.value = false
   }
   const onDisconnectClick = async (): Promise<void> => {
     await webRTCComponent.Disconnect()
@@ -108,7 +110,7 @@
           <button
             title={displayStreamActive ? 'Streaming your display' : 'Not streaming your display'}
             class="button {displayStreamActive ? 'is-success' : 'is-danger'}"
-            on:click={onDisplayStreamToggle}
+            onclick={onDisplayStreamToggle}
           >
             <span class="icon">
               <i class="fa-solid fa-display"></i>
@@ -117,7 +119,7 @@
           <button
             title={microphoneActive ? 'Microphone active' : 'Microphone muted'}
             class="button {microphoneActive ? 'is-success' : 'is-danger'}"
-            on:click={onMicrophoneToggle}
+            onclick={onMicrophoneToggle}
           >
             <span class="icon">
               <i class="fas {microphoneActive ? 'fa-microphone' : 'fa-microphone-slash'}"></i>
@@ -128,15 +130,15 @@
             class="button {cursorsActive ? 'is-success' : 'is-danger'} {!displayStreamActive
               ? 'is-hidden'
               : ''}"
-            on:click={toggleRemoteCursors}
+            onclick={toggleRemoteCursors}
           >
             <span class="icon">
               <i class="fas fa-mouse-pointer"></i>
             </span>
           </button>
         </div>
         <div class="cell has-text-right">
-          <button class="button is-danger" on:click={onDisconnectClick}>
+          <button class="button is-danger" onclick={onDisconnectClick}>
             <span class="icon">
               <i class="fas fa-unlink"></i>
             </span>
@@ -152,7 +154,7 @@
         <button
           class="button is-link {isStreaming ? 'is-hidden' : ''}"
           disabled={sessionStarted}
-          on:click={onStartSessionButtonClick}
+          onclick={onStartSessionButtonClick}
         >
           <span class="icon">
             <i class="fas fa-play"></i>
@@ -164,7 +166,7 @@
       <div class="cell">
         <button
           class="button is-danger {!sessionStarted || isStreaming ? 'is-hidden' : ''}"
-          on:click={onDisconnectClick}
+          onclick={onDisconnectClick}
         >
           <span class="icon">
             <i class="fas fa-unlink"></i>
@@ -191,7 +193,7 @@
     <div class="field has-addons {!sessionStarted || isStreaming ? 'is-hidden' : ''}">
       <div class="control has-icons-left has-icons-right">
         <input
-          bind:value={$connectionString}
+          bind:value={hostUrl.value}
           placeholder="participant connection string"
           class="input {connectionStringIsValid === null
             ? ''