Merge pull request #2506 from appwrite/fix-slot-render-and-migrate-to-realtime-service

src/lib/components/csvImportBox.svelte

@@ -169,7 +169,7 @@
                 migrations.migrations.forEach(updateOrAddItem);
             });
 
-        return sdk.forConsoleIn(page.params.region).client.subscribe('console', (response) => {
+        return sdk.forConsoleIn(page.params.region).realtime.subscribe('console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;
             if (response.events.includes('migrations.*')) {
                 updateOrAddItem(response.payload as Payload);

src/lib/stores/sdk.ts

@@ -21,7 +21,8 @@ import {
     Sites,
     Tokens,
     TablesDB,
-    Domains
+    Domains,
+    Realtime
 } from '@appwrite.io/console';
 import { Billing } from '../sdk/billing';
 import { Backups } from '../sdk/backups';
@@ -90,7 +91,8 @@ function createConsoleSdk(client: Client) {
         sources: new Sources(client),
         sites: new Sites(client),
         domains: new Domains(client),
-        storage: new Storage(client)
+        storage: new Storage(client),
+        realtime: new Realtime(client)
     };
 }
 
@@ -185,6 +187,11 @@ export enum RuleTrigger {
     MANUAL = 'manual'
 }
 
+/**
+ * Some type imports are broken on the SDK, this works correctly for the time being!
+ */
+export type AppwriteRealtimeSubscription = Awaited<ReturnType<Realtime['subscribe']>>;
+
 export const createAdminClient = () => {
     return new Client().setEndpoint(getApiEndpoint()).setMode('admin').setProject(getProjectId());
 };

src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte

@@ -16,7 +16,7 @@
     export let data;
 
     onMount(() => {
-        return sdk.forConsole.client.subscribe('console', (response) => {
+        return sdk.forConsole.realtime.subscribe('console', (response) => {
             if (response.events.includes('functions.*.executions.*')) {
                 invalidate(Dependencies.EXECUTIONS);
             }

src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte

@@ -17,7 +17,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
+    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -81,17 +81,20 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
     }
 
     onMount(() => {
-        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
-            if (response.events.includes(`projects.${projectId}.ping`)) {
-                connectionSuccessful = true;
-                invalidate(Dependencies.ORGANIZATION);
-                invalidate(Dependencies.PROJECT);
-                unsubscribe();
-            }
-        });
+        let subscription: AppwriteRealtimeSubscription;
+        sdk.forConsole.realtime
+            .subscribe('console', (response) => {
+                if (response.events.includes(`projects.${projectId}.ping`)) {
+                    connectionSuccessful = true;
+                    invalidate(Dependencies.ORGANIZATION);
+                    invalidate(Dependencies.PROJECT);
+                    subscription?.close();
+                }
+            })
+            .then((realtime) => (subscription = realtime));
 
         return () => {
-            unsubscribe();
+            subscription?.close();
             resetPlatformStore();
         };
     });

src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte

@@ -18,7 +18,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
+    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -90,17 +90,20 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
     }
 
     onMount(() => {
-        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
-            if (response.events.includes(`projects.${projectId}.ping`)) {
-                connectionSuccessful = true;
-                invalidate(Dependencies.ORGANIZATION);
-                invalidate(Dependencies.PROJECT);
-                unsubscribe();
-            }
-        });
+        let subscription: AppwriteRealtimeSubscription;
+        sdk.forConsole.realtime
+            .subscribe('console', (response) => {
+                if (response.events.includes(`projects.${projectId}.ping`)) {
+                    connectionSuccessful = true;
+                    invalidate(Dependencies.ORGANIZATION);
+                    invalidate(Dependencies.PROJECT);
+                    subscription?.close();
+                }
+            })
+            .then((realtime) => (subscription = realtime));
 
         return () => {
-            unsubscribe();
+            subscription?.close();
             resetPlatformStore();
         };
     });

src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte

@@ -18,7 +18,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
+    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -156,17 +156,20 @@
     }
 
     onMount(() => {
-        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
-            if (response.events.includes(`projects.${projectId}.ping`)) {
-                connectionSuccessful = true;
-                invalidate(Dependencies.ORGANIZATION);
-                invalidate(Dependencies.PROJECT);
-                unsubscribe();
-            }
-        });
+        let subscription: AppwriteRealtimeSubscription;
+        sdk.forConsole.realtime
+            .subscribe('console', (response) => {
+                if (response.events.includes(`projects.${projectId}.ping`)) {
+                    connectionSuccessful = true;
+                    invalidate(Dependencies.ORGANIZATION);
+                    invalidate(Dependencies.PROJECT);
+                    subscription?.close();
+                }
+            })
+            .then((realtime) => (subscription = realtime));
 
         return () => {
-            unsubscribe();
+            subscription?.close();
             resetPlatformStore();
         };
     });

src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte

@@ -18,7 +18,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
+    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -117,17 +117,20 @@ EXPO_PUBLIC_APPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.p
     }
 
     onMount(() => {
-        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
-            if (response.events.includes(`projects.${projectId}.ping`)) {
-                connectionSuccessful = true;
-                invalidate(Dependencies.ORGANIZATION);
-                invalidate(Dependencies.PROJECT);
-                unsubscribe();
-            }
-        });
+        let subscription: AppwriteRealtimeSubscription;
+        sdk.forConsole.realtime
+            .subscribe('console', (response) => {
+                if (response.events.includes(`projects.${projectId}.ping`)) {
+                    connectionSuccessful = true;
+                    invalidate(Dependencies.ORGANIZATION);
+                    invalidate(Dependencies.PROJECT);
+                    subscription?.close();
+                }
+            })
+            .then((realtime) => (subscription = realtime));
 
         return () => {
-            unsubscribe();
+            subscription?.close();
             resetPlatformStore();
         };
     });

src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte

@@ -28,7 +28,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
+    import { type AppwriteRealtimeSubscription, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -202,18 +202,21 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
     }
 
     onMount(() => {
-        const unsubscribe = sdk.forConsole.client.subscribe('console', (response) => {
-            if (response.events.includes(`projects.${projectId}.ping`)) {
-                connectionSuccessful = true;
-                invalidate(Dependencies.ORGANIZATION);
-                invalidate(Dependencies.PROJECT);
-                unsubscribe();
-            }
-        });
+        let subscription: AppwriteRealtimeSubscription;
+        sdk.forConsole.realtime
+            .subscribe('console', (response) => {
+                if (response.events.includes(`projects.${projectId}.ping`)) {
+                    connectionSuccessful = true;
+                    invalidate(Dependencies.ORGANIZATION);
+                    invalidate(Dependencies.PROJECT);
+                    subscription?.close();
+                }
+            })
+            .then((realtime) => (subscription = realtime));
 
         return () => {
-            unsubscribe();
             resetPlatformStore();
+            subscription?.close();
         };
     });
 </script>

src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte

@@ -24,17 +24,20 @@
     import { sdk } from '$lib/stores/sdk';
     import { capitalize } from '$lib/helpers/string';
     import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
+    import type { Snippet } from 'svelte';
 
     let {
         deployment,
         proxyRuleList,
         hideQRCode = false,
-        variant = 'primary'
+        variant = 'primary',
+        footer
     }: {
         deployment: Models.Deployment;
         proxyRuleList: Models.ProxyRuleList;
         hideQRCode?: boolean;
         variant?: 'primary' | 'secondary';
+        footer?: Snippet;
     } = $props();
 
     let show = $state(false);
@@ -207,13 +210,13 @@
                 </Layout.Stack>
             </Layout.Stack>
         </div>
-        {#if $$slots.footer}
+        {#if footer}
             <span
                 style="margin-left: calc(-1* var(--space-7));margin-right: calc(-1* var(--space-7));width:auto;">
                 <Divider />
             </span>
             <Layout.Stack direction="row-reverse">
-                <slot name="footer" />
+                {@render footer?.()}
             </Layout.Stack>
         {/if}
     </Layout.Stack>

src/routes/(console)/project-[region]-[project]/sites/+page.svelte

@@ -49,7 +49,7 @@
     $updateCommandGroupRanks({ sites: 1000 });
 
     onMount(() => {
-        return sdk.forConsole.client.subscribe('console', (response) => {
+        return sdk.forConsole.realtime.subscribe('console', (response) => {
             if (response.events.includes('sites.*')) {
                 invalidate(Dependencies.SITES);
             }

src/routes/(console)/project-[region]-[project]/sites/create-site/deploying/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { base } from '$app/paths';
+    import { base, resolve } from '$app/paths';
     import { page } from '$app/state';
     import { Fieldset, Card, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
     import Button from '$lib/elements/forms/button.svelte';
@@ -11,7 +11,6 @@
     import { goto } from '$app/navigation';
     import { onMount } from 'svelte';
     import { getFrameworkIcon } from '$lib/stores/sites';
-    import type { Models, RealtimeResponseEvent } from '@appwrite.io/console';
 
     let { data } = $props();
 
@@ -20,23 +19,25 @@
     onMount(() => {
         return sdk
             .forConsoleIn(page.params.region)
-            .client.subscribe(
-                'console',
-                async (response: RealtimeResponseEvent<Models.Deployment>) => {
-                    if (
-                        response.events.includes(
-                            `sites.${data.site.$id}.deployments.${data.deployment.$id}.update`
-                        )
-                    ) {
-                        deployment = response.payload;
-                        if (response.payload.status === 'ready') {
-                            goto(
-                                `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/finish?site=${data.site.$id}`
-                            );
-                        }
+            .realtime.subscribe('console', async (response) => {
+                if (
+                    response.events.includes(
+                        `sites.${data.site.$id}.deployments.${data.deployment.$id}.update`
+                    )
+                ) {
+                    deployment = response.payload;
+                    if (response.payload.status === 'ready') {
+                        const resolvedUrl = resolve(
+                            '/(console)/project-[region]-[project]/sites/create-site/finish',
+                            {
+                                region: page.params.region,
+                                project: page.params.project
+                            }
+                        );
+                        await goto(`${resolvedUrl}?site=${data.site.$id}`);
                     }
                 }
-            );
+            });
     });
 </script>
 

src/routes/(console)/project-[region]-[project]/sites/create-site/finish/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
     import { Layout, Typography, Icon, Lights, Step, Card } from '@appwrite.io/pink-svelte';
@@ -18,13 +18,23 @@
     import { ConnectRepoModal } from '$lib/components/git';
     import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
 
-    export let data;
+    import type { PageProps } from './$types';
 
-    let showOpenOnMobile = false;
-    let showConnectRepository = false;
-    let showInviteCollaborator = false;
+    const { data }: PageProps = $props();
 
-    const siteURL = data.proxyRuleList.rules[0].domain;
+    let showOpenOnMobile = $state(false);
+    let showConnectRepository = $state(false);
+    let showInviteCollaborator = $state(false);
+
+    const siteURL = $derived(data.proxyRuleList.rules[0].domain);
+
+    const siteRedirectHref = $derived.by(() => {
+        return resolve('/(console)/project-[region]-[project]/sites/site-[site]', {
+            region: page.params.region,
+            project: page.params.project,
+            site: data.site.$id
+        });
+    });
 
     onMount(() => {
         if (
@@ -54,16 +64,15 @@
                 providerRepositoryId: selectedRepository,
                 providerBranch: 'main'
             });
-            invalidate(Dependencies.SITE);
+
+            await invalidate(Dependencies.SITE);
         } catch {
             return;
         }
     }
 </script>
 
-<Wizard
-    column
-    href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
+<Wizard column href={siteRedirectHref}>
     <!-- Creating a new stack -->
     <Layout.Stack gap="xxxl">
         <div style:position="relative" style="z-index: 6;">
@@ -83,9 +92,9 @@
                     deployment={data.deployment}
                     proxyRuleList={data.proxyRuleList}
                     hideQRCode>
-                    <svelte:fragment slot="footer">
+                    {#snippet footer()}
                         <Button href={`${$regionalProtocol}${siteURL}`} external>Visit site</Button>
-                    </svelte:fragment>
+                    {/snippet}
                 </SiteCard>
             </Layout.Stack>
         </div>
@@ -127,7 +136,7 @@
                                     source: 'sites_create_finish'
                                 });
                             }}
-                            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}/domains`}>
+                            href={`${siteRedirectHref}/domains`}>
                             <Layout.Stack gap="s" style="height: 100%">
                                 <Layout.Stack
                                     direction="row"
@@ -191,13 +200,7 @@
     </Layout.Stack>
 
     <svelte:fragment slot="footer">
-        <Button
-            size="s"
-            fullWidthMobile
-            secondary
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${data.site.$id}`}>
-            Go to dashboard
-        </Button>
+        <Button size="s" fullWidthMobile secondary href={siteRedirectHref}>Go to dashboard</Button>
     </svelte:fragment>
 </Wizard>
 

src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte

@@ -19,7 +19,7 @@
     let showRollback = false;
 
     onMount(() => {
-        return sdk.forConsole.client.subscribe('console', (response) => {
+        return sdk.forConsole.realtime.subscribe('console', (response) => {
             if (response.events.includes(`sites.${page.params.site}.deployments.*`)) {
                 invalidate(Dependencies.SITE);
             }
@@ -31,7 +31,7 @@
     <Layout.Stack gap="xxxl">
         {#if data?.deployment && data.deployment.status === 'ready'}
             <SiteCard deployment={data.deployment} proxyRuleList={data.proxyRuleList}>
-                <svelte:fragment slot="footer">
+                {#snippet footer()}
                     {#if data.proxyRuleList.total}
                         <Button
                             external
@@ -53,7 +53,7 @@
                             active.
                         </span>
                     </Tooltip>
-                </svelte:fragment>
+                {/snippet}
             </SiteCard>
         {:else if data.deployment?.status === 'building'}
             <Card.Base padding="none">

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+layout.svelte

@@ -13,7 +13,7 @@
 
     onMount(() => {
         let previousStatus: string = null;
-        return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
+        return sdk.forConsole.realtime.subscribe<Models.Deployment>('console', (message) => {
             if (message.payload.status !== 'ready' && previousStatus === message.payload.status) {
                 return;
             }

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte

@@ -36,7 +36,7 @@
             showConnectRepo = true;
         }
 
-        return sdk.forConsole.client.subscribe('console', (response) => {
+        return sdk.forConsole.realtime.subscribe('console', (response) => {
             if (response.events.includes('sites.*.deployments.*')) {
                 invalidate(Dependencies.DEPLOYMENTS);
             }

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte

@@ -2,7 +2,6 @@
     import { Container } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import type { Models, RealtimeResponseEvent } from '@appwrite.io/console';
     import SiteCard from '../../../(components)/siteCard.svelte';
     import Logs, { badgeTypeDeployment } from '../../../(components)/logs.svelte';
     import Card from '$lib/components/card.svelte';
@@ -20,7 +19,9 @@
     import { page } from '$app/state';
     import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
 
-    let { data } = $props();
+    import type { PageProps } from './$types';
+
+    let { data }: PageProps = $props();
 
     let deployment = $derived(data.deployment);
 
@@ -32,24 +33,21 @@
     onMount(() => {
         return sdk
             .forConsoleIn(page.params.region)
-            .client.subscribe(
-                'console',
-                async (response: RealtimeResponseEvent<Models.Deployment>) => {
-                    if (
-                        response.events.includes(
-                            `sites.${page.params.site}.deployments.${page.params.deployment}.update`
-                        )
-                    ) {
-                        await invalidate(Dependencies.DEPLOYMENT);
-                    }
+            .realtime.subscribe('console', async (response) => {
+                if (
+                    response.events.includes(
+                        `sites.${page.params.site}.deployments.${page.params.deployment}.update`
+                    )
+                ) {
+                    await invalidate(Dependencies.DEPLOYMENT);
                 }
-            );
+            });
     });
 </script>
 
 <Container>
     <SiteCard {deployment} proxyRuleList={data.proxyRuleList}>
-        <svelte:fragment slot="footer">
+        {#snippet footer()}
             {#if deployment?.status === 'ready' && data.proxyRuleList?.total}
                 <Button
                     external
@@ -78,7 +76,7 @@
                 bind:showDelete
                 bind:showCancel
                 activeDeployment={data.site.deploymentId} />
-        </svelte:fragment>
+        {/snippet}
     </SiteCard>
     <Card padding="s">
         <Accordion

src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/+page.svelte

@@ -13,7 +13,7 @@
     export let data;
 
     onMount(() => {
-        return sdk.forConsole.client.subscribe('console', (response) => {
+        return sdk.forConsole.realtime.subscribe('console', (response) => {
             if (response.events.includes('sites.*.executions.*')) {
                 invalidate(Dependencies.EXECUTIONS);
             }