Upgrade svelte@5

ed-asriyan · Nov 9, 2024 · a164da2 · a164da2
1 parent 6df7394
commit a164da2
Show file tree

Hide file tree

Showing 29 changed files with 4,652 additions and 4,664 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,21 +13,21 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@sentry/svelte": "^7.107.0",
-		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@sentry/svelte": "^8.37.1",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tsconfig/svelte": "^5.0.2",
 		"firebase": "^10.13.1",
 		"firebase-admin": "^12.0.0",
 		"prettier-bytes": "^1.0.4",
 		"sass": "^1.77.8",
-		"svelte": "^4.2.12",
-		"svelte-check": "^3.8.4",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"svelte-i18n": "^4.0.0",
 		"tslib": "^2.6.2",
-		"typescript": "^5.2.2",
+		"typescript": "^5.5.0",
 		"uikit": "^3.21.13",
 		"vidstack": "^1.12.11",
-		"vite": "^5.4.1",
+		"vite": "^5.4.4",
 		"vite-plugin-pwa": "^0.19.8"
 	},
 	"type": "module"

diff --git a/src/App.svelte b/src/App.svelte
@@ -7,7 +7,7 @@
     import { environment, isProduction } from './settings';
     import './app.scss';
 
-    let roomId: string;
+    let roomId: string = $state();
 
     const testPrefix = 'test_';
     const syncHashAndRoomId = function () {
@@ -23,7 +23,7 @@
     syncHashAndRoomId();
 </script>
 
-<svelte:window on:hashchange={syncHashAndRoomId}></svelte:window>
+<svelte:window onhashchange={syncHashAndRoomId}></svelte:window>
 
 <Analytics/>
 

diff --git a/src/analytics.svelte b/src/analytics.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     import { analytics, isProduction } from './settings';
     import normalizeSource, { SourceType } from './normalize-source';
     import { blob } from './stores/blob';

diff --git a/src/components/controls/card-copy-url.svelte b/src/components/controls/card-copy-url.svelte
@@ -5,10 +5,14 @@
     import type { Room } from '../../stores/room';
     import Loader from '../loader.svelte';
 
-    export let room: Room;
-    export let highlight: boolean;
+    interface Props {
+        room: Room;
+        highlight: boolean;
+    }
 
-    let copyTumbler: boolean = false;
+    let { room, highlight }: Props = $props();
+
+    let copyTumbler: boolean = $state(false);
 
     const copyToClipboard = function () {
         const input = document.createElement('input');
@@ -20,7 +24,7 @@
         trigger();
     };
 
-    $: url = !!room && `${location.protocol}//${location.host}${location.pathname}#${room.id}`; 
+    let url = $derived(!!room && `${location.protocol}//${location.host}${location.pathname}#${room.id}`); 
     const canShare: boolean = Boolean(navigator.share);
 
     const linkClick = function () {
@@ -53,7 +57,7 @@
                     class:gradient-text={highlight}
                     class:uk-text-bold={highlight}
                     uk-tooltip={canShare ? $_('invite.clickToShare') : $_('invite.clickToCopy')}
-                    on:click={linkClick}
+                    onclick={linkClick}
                 >
                     {url}
                 </div>
@@ -68,10 +72,12 @@
             <br/>
         {:else}
             {#if canShare}
-                <Interpolator text={$_('invite.clickToShareHint')} let:data={data}>
-                    {#if data.name === 'link' }
-                        <span class="uk-text-secondary pointer" on:click={copyToClipboard}>{ data.text }</span>
-                    {/if}
+                <Interpolator text={$_('invite.clickToShareHint')} >
+                    {#snippet children({ data: data })}
+                                        {#if data.name === 'link'}
+                            <span class="uk-text-secondary pointer" onclick={copyToClipboard}>{ data.text }</span>
+                        {/if}
+                    {/snippet}
                 </Interpolator>
             {:else}
                 { $_('invite.copyLink') }

diff --git a/src/components/controls/card-video-selector.svelte b/src/components/controls/card-video-selector.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { run, preventDefault } from 'svelte/legacy';
+
     import { fade } from 'svelte/transition';
     import { _ } from 'svelte-i18n';
     import prettierBytes from 'prettier-bytes';
@@ -12,14 +14,20 @@
     import normalizeSource, { SourceType } from '../../normalize-source';
     import { blob } from '../../stores/blob';
 
-    export let room: Room;
-
-    $: url = room?.url;
-    $: source = normalizeSource($url);
-    $: if ($url) {
-        $blob = null;
+    interface Props {
+        room: Room;
     }
 
+    let { room }: Props = $props();
+
+    let url = $derived(room?.url);
+    let source = $derived(normalizeSource($url));
+    run(() => {
+        if ($url) {
+            $blob = null;
+        }
+    });
+
     const selectExample = function () {
         $url = getExampleVideo();
         track(new ClickEvent(room, { target: 'example' }));
@@ -40,26 +48,28 @@
 
 <b>🔗 { $_('selectVideo.link.title') }</b>
 <div class="uk-margin-bottom">
-    <Interpolator text={$_('selectVideo.link.description')} let:data={data}>
-        {#if data.name === 'type'}
-            <u>{ data.text }</u>
-        {/if}
-    </Interpolator>
+    <Interpolator text={$_('selectVideo.link.description')} >
+        {#snippet children({ data: data })}
+                {#if data.name === 'type'}
+                <u>{ data.text }</u>
+            {/if}
+        {/snippet}
+        </Interpolator>
 </div>
 <div class="uk-margin-bottom">
     <div class="uk-inline uk-width-1-1">
         {#if room}
             <input
                 bind:value={$url}
-                on:input={onInput}
+                oninput={onInput}
                 class="uk-input"
                 class:uk-form-danger={!source}
                 placeholder="Video URL"
             />
             {#if !$url && haveExamples}
                 <a
                     class="uk-form-icon uk-form-icon-flip uk-text-small uk-padding-small uk-width-auto example pointer"
-                    on:click|preventDefault={selectExample}
+                    onclick={preventDefault(selectExample)}
                     href="/#"
                     transition:fade
                 >
@@ -79,16 +89,20 @@
     {#if $url}
         {#if source}
             {#if source.type == SourceType.direct}
-                <Interpolator text={$_('selectVideo.link.hintNotWorking')} let:data={data}>
-                    {#if data.name === 'u'}
-                        <u>{ data.text }</u>
-                    {/if}
-                </Interpolator>
-                <Interpolator text={$_('selectVideo.link.help')} let:data={data}>
-                    {#if data.name === 'link'}
-                        <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" on:click={clickUrlTutorial}>{ data.text }</a>
-                    {/if}
-                </Interpolator>
+                <Interpolator text={$_('selectVideo.link.hintNotWorking')} >
+                    {#snippet children({ data: data })}
+                                        {#if data.name === 'u'}
+                            <u>{ data.text }</u>
+                        {/if}
+                                                        {/snippet}
+                                </Interpolator>
+                <Interpolator text={$_('selectVideo.link.help')} >
+                    {#snippet children({ data: data })}
+                                        {#if data.name === 'link'}
+                            <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" onclick={clickUrlTutorial}>{ data.text }</a>
+                        {/if}
+                                                        {/snippet}
+                                </Interpolator>
             {:else if source && (source.type === SourceType.magnet)}
                     <div class="uk-flex uk-text-small uk-relative uk-padding-top">
                             <div class="uk-flex-1">{ $_('downloadSpeed', { values: { speed: `${prettierBytes($downloadSpeed || 0)}/s` }}) }</div>
@@ -106,12 +120,14 @@
         {/if}
     {:else}
         { $_('selectVideo.link.hintEmpty') }
-        <Interpolator text={$_('selectVideo.link.help')} let:data={data}>
-            {#if data.name === 'link'}
-                <u>
-                    <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" on:click={clickUrlTutorial}>{ data.text }</a>
-                </u>
-            {/if}
+        <Interpolator text={$_('selectVideo.link.help')} >
+            {#snippet children({ data: data })}
+                        {#if data.name === 'link'}
+                    <u>
+                        <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" onclick={clickUrlTutorial}>{ data.text }</a>
+                    </u>
+                {/if}
+            {/snippet}
         </Interpolator>
     {/if}
 </div>
@@ -130,12 +146,14 @@
     {/if}
     <div class="hint uk-margin-top uk-text-center uk-text-small">
         { $_('selectVideo.file.hint') }
-        <Interpolator text={$_('selectVideo.file.help')} let:data={data}>
-            {#if data.name === 'link'}
-                <u>
-                    <a href="https://www.youtube.com/watch?v=FsT7kUaqBdM" target="_blank" on:click={clickDownloadTutorial}>{ data.text }</a>
-                </u>
-            {/if}
+        <Interpolator text={$_('selectVideo.file.help')} >
+            {#snippet children({ data: data })}
+                        {#if data.name === 'link'}
+                    <u>
+                        <a href="https://www.youtube.com/watch?v=FsT7kUaqBdM" target="_blank" onclick={clickDownloadTutorial}>{ data.text }</a>
+                    </u>
+                {/if}
+            {/snippet}
         </Interpolator>
     </div>
 </div>

diff --git a/src/components/controls/index.svelte b/src/components/controls/index.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { run } from 'svelte/legacy';
+
     import { tick } from 'svelte';
     import { _ } from 'svelte-i18n';
     import type { Room } from '../../stores/room';
@@ -12,14 +14,18 @@
     import { randomStr } from '../../utils';
     import normalizeSource, { type Source } from '../../normalize-source';
 
-    export let room: Room;
+    interface Props {
+        room: Room;
+    }
+
+    let { room }: Props = $props();
 
-    $: users = room?.users;
-    $: url = room?.url;
-    $: highlightVideoSelector = room && !$url && !$blob;
-    $: highlightInvite = room && !highlightVideoSelector && $users?.length < 1;
+    let users = $derived(room?.users);
+    let url = $derived(room?.url);
+    let highlightVideoSelector = $derived(room && !$url && !$blob);
+    let highlightInvite = $derived(room && !highlightVideoSelector && $users?.length < 1);
 
-    $: source = url && $url && normalizeSource($url);
+    let source = $derived(url && $url && normalizeSource($url));
 
     const updateRoom = function (newRoomId: string) {
         document.location.hash = `#${newRoomId}`;
@@ -61,11 +67,11 @@
         window.scrollTo({ top, behavior: 'smooth' });
     };
 
-    let container: HTMLElement;
-    let firstTime = true;
-    let lastSource: Source | null | "" = null;
-    let lastUsersCount = 0;
-    $: {
+    let container: HTMLElement = $state();
+    let firstTime = $state(true);
+    let lastSource: Source | null | "" = $state(null);
+    let lastUsersCount = $state(0);
+    run(() => {
         let shouldScroll: boolean = false;
         if (firstTime) {
             if (users) {
@@ -80,7 +86,7 @@
             lastUsersCount = $users.length;
         }
         shouldScroll && tick().then(() => scroll(source && $users.length ? 'top' : 'bottom'));
-    };
+    });
 </script>
 
 <div bind:this={container} class="uk-container uk-grid-collapse uk-grid-match" uk-grid>
@@ -101,25 +107,27 @@
             <Users users={$users} />
         </div>
         <div class="button uk-flex uk-margin-top uk-flex-column">
-            <button class="uk-button uk-button-default glass" on:click={generateNewRoom}>
+            <button class="uk-button uk-button-default glass" onclick={generateNewRoom}>
                 ↻
                 { $_('room.generateNewRoom.button') }
             </button>
         </div>
         <div class="button uk-flex uk-margin-top uk-flex-column">
-            <button class="uk-button uk-button-default glass" on:click={joinAnotherRoom}>
+            <button class="uk-button uk-button-default glass" onclick={joinAnotherRoom}>
                 { $_('room.joinAnotherRoom') }
                 →
             </button>
         </div>
     </div>
 </div>
 <div class="uk-text-small uk-width-1-1 uk-text-center uk-margin-medium-top">
-    <Interpolator text={$_('feedback.linkText')} let:data={data}>
-        {#if data.name === 'link'}
-            <a href={$_('feedback.link')} target="_blank">{ data.text }</a>
-        {/if}
-    </Interpolator>
+    <Interpolator text={$_('feedback.linkText')} >
+        {#snippet children({ data: data })}
+                {#if data.name === 'link'}
+                <a href={$_('feedback.link')} target="_blank">{ data.text }</a>
+            {/if}
+                    {/snippet}
+        </Interpolator>
 </div>
 <div class="footer uk-text-small uk-text-muted uk-text-center uk-padding uk-padding-remove-bottom">
     <LanguageSelector />

diff --git a/src/components/controls/language-selector.svelte b/src/components/controls/language-selector.svelte
@@ -8,7 +8,7 @@
     };
 </script>
 
-<select class="uk-button uk-button-default uk-text-center" bind:value={$locale} on:change={onLanguageChanged}>
+<select class="uk-button uk-button-default uk-text-center" bind:value={$locale} onchange={onLanguageChanged}>
     {#each Object.entries(locales) as lang}
         <option value={ lang[0] }>{ lang[1].locale.flag } { lang[1].locale.name }</option>
     {/each}

diff --git a/src/components/controls/users/index.svelte b/src/components/controls/users/index.svelte
@@ -4,7 +4,11 @@
     import { me } from '../../../stores/me';
     import User from './user.svelte';
 
-    export let users: UserModel[];
+    interface Props {
+        users: UserModel[];
+    }
+
+    let { users }: Props = $props();
 </script>
 
 <div class="users uk-flex-center uk-flex uk-text-center uk-flex-middle">

diff --git a/src/components/controls/users/user.svelte b/src/components/controls/users/user.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
 
-    export let userName: string;
-    export let canEdit: boolean;
-    export let status: string;
+    interface Props {
+        userName: string;
+        canEdit: boolean;
+        status: string;
+    }
+
+    let { userName = $bindable(), canEdit, status }: Props = $props();
 
     const maxLength = 10;
 
@@ -26,7 +30,7 @@
         class="uk-text-emphasis uk-margin-small-top"
         class:pointer={canEdit}
         class:uk-text-large={userName.length === 1 || isEmoji(userName)}
-        on:click={updateName}
+        onclick={updateName}
         uk-tooltip={canEdit ? $_('users.nameEdit') : undefined }
     >
         { userName.slice(0, maxLength) }