use svelte5 syntax

Author: lohanidamodar

src/lib/components/billing/alerts/projectsLimit.svelte

@@ -9,8 +9,8 @@
         upgradeURL
     } from '$lib/stores/billing';
     import { currentPlan } from '$lib/stores/organization';
-    import SelectProjectCloud from '$lib/components/billing/alerts/selectProjectCloud.svelte';
-    let showSelectProject = false;
+    import SelectProjectCloud from './selectProjectCloud.svelte';
+    let showSelectProject = $state(false);
 </script>
 
 <SelectProjectCloud bind:showSelectProject />

src/lib/components/billing/alerts/selectProjectCloud.svelte

@@ -11,27 +11,27 @@
     import { page } from '$app/state';
     import { toLocaleDateTime } from '$lib/helpers/date';
 
-    export let showSelectProject: boolean;
-    export let selectedProjects: Array<string> = [];
+    const showSelectProject = $props.showSelectProject;
+    const selectedProjects = $state([]);
 
-    let projects: Array<Models.Project> = [];
-    let error: string | null = null;
+    let projects = $state<Array<Models.Project>>([]);
+    let error = $state<string | null>(null);
 
     onMount(() => {
         projects = page.data.projects?.projects || [];
     });
 
-    let projectsToArchive: Array<Models.Project> = [];
-
-    $: projectsToArchive = projects.filter((project) => !selectedProjects.includes(project.$id));
+    let projectsToArchive = $derived(
+        projects.filter((project) => !selectedProjects.includes(project.$id))
+    );
 
     async function updateSelected() {
         try {
             await sdk.forConsole.billing.updateSelectedProjects(
                 projects[0].teamId,
                 selectedProjects
             );
-            showSelectProject = false;
+            showSelectProject.set(false);
             invalidate(Dependencies.ORGANIZATION);
             addNotification({
                 type: 'success',
@@ -41,9 +41,29 @@
             error = e.message;
         }
     }
+    
+    function formatProjectsToArchive(projects: Array<Models.Project>) {
+        let result = '';
+        
+        projectsToArchive.forEach((project, index) => {
+            const text = `${index === 0 ? '' : ' '}<b>${project.name}</b> `;
+            result += text;
+            
+            if (index < projectsToArchive.length - 1) {
+                if (index == projectsToArchive.length - 2) {
+                    result += 'and ';
+                }
+                if (index < projectsToArchive.length - 2) {
+                    result += ', ';
+                }
+            }
+        });
+        
+        return result;
+    }
 </script>
 
-<Modal bind:show={showSelectProject} title={'Manage projects'} onSubmit={updateSelected}>
+<Modal bind:show={$showSelectProject} title={'Manage projects'} onSubmit={updateSelected}></Modal>
     <svelte:fragment slot="description">
         Choose which two projects to keep. Projects over the limit will be blocked after this date.
     </svelte:fragment>
@@ -53,7 +73,7 @@
     <Table.Root
         let:root
         allowSelection
-        bind:selectedRows={selectedProjects}
+        bind:selectedRows={$selectedProjects}
         columns={[{ id: 'name' }, { id: 'created' }]}>
         <svelte:fragment slot="header" let:root>
             <Table.Header.Cell column="name" {root}>Project Name</Table.Header.Cell>
@@ -67,30 +87,24 @@
             </Table.Row.Base>
         {/each}
     </Table.Root>
-    {#if selectedProjects.length > 2}
+    {#if $selectedProjects.length > 2}
         <div class="u-text-warning u-mb-4">
             You can only select two projects. Please deselect others to continue.
         </div>
     {/if}
-    {#if selectedProjects.length === 2}
+    {#if $selectedProjects.length === 2}
         <Alert.Inline
             status="warning"
-            title={`${projects.length - selectedProjects.length} projects will be archived on ${billingProjectsLimitDate}`}>
+            title={`${projects.length - $selectedProjects.length} projects will be archived on ${billingProjectsLimitDate}`}>
             <span>
-                {#each projectsToArchive as project, index}
-                    {@const text = `${index === 0 ? '' : ' '}<b>${project.name}</b> `}
-                    {@html text}{#if index < projectsToArchive.length - 1}{#if index == projectsToArchive.length - 2}
-                            and
-                        {/if}{#if index < projectsToArchive.length - 2},
-                        {/if}{/if}
-                {/each}
+                {@html formatProjectsToArchive(projectsToArchive)}
                 will be archived.
             </span>
         </Alert.Inline>
     {/if}
     <svelte:fragment slot="footer">
-        <Button.Button size="s" variant="secondary" on:click={() => (showSelectProject = false)}
+        <Button.Button size="s" variant="secondary" on:click={() => ($showSelectProject = false)}
             >Cancel</Button.Button>
-        <Button.Button size="s" disabled={selectedProjects.length !== 2}>Save</Button.Button>
+        <Button.Button size="s" disabled={$selectedProjects.length !== 2}>Save</Button.Button>
     </svelte:fragment>
 </Modal>

src/lib/layout/createProject.svelte

@@ -11,15 +11,17 @@
     import type { Models } from '@appwrite.io/console';
     import { filterRegions } from '$lib/helpers/regions';
 
-    export let projectName: string;
-    export let id: string;
-    export let regions: Array<Models.ConsoleRegion> = [];
-    export let region: string;
-    export let showTitle = true;
-    export let projects: number = undefined;
+    let projectName = $state('');
+    let id = $state('');
+    let regions = $state<Array<Models.ConsoleRegion>>([]);
+    let region = $state('');
+    let showTitle = $state(true);
+    let projects = $state<number | undefined>(undefined);
 
-    let showCustomId = false;
-    $: projectsLimited = $currentPlan.projects > 0 && projects && projects >= $currentPlan?.projects;
+    let showCustomId = $state(false);
+    let projectsLimited = $derived(
+        $currentPlan.projects > 0 && projects && projects >= $currentPlan?.projects
+    );
 </script>
 
 <svelte:head>
@@ -28,13 +30,16 @@
     {/each}
 </svelte:head>
 
-<form on:submit|preventDefault>
+<form
+    onsubmit={(e) => {
+        e.preventDefault();
+    }}>
     <Layout.Stack direction="column" gap="xxl">
         {#if showTitle}
             <Typography.Title size="l">Create your project</Typography.Title>
         {/if}
         {#if projectsLimited}
-            <Alert.Inline status="warning" title="You’ve reached your limit of 2 projects">
+            <Alert.Inline status="warning" title="You've reached your limit of 2 projects">
                 Extra projects are available on paid plans for an additional fee
                 <svelte:fragment slot="actions">
                     <Button
@@ -80,6 +85,6 @@
                 {/if}
             </Layout.Stack>
         </Layout.Stack>
-        <slot name="submit"></slot>
+        {@render globalThis.$slots.submit?.()}
     </Layout.Stack>
 </form>