delete, create , update events

src/lib/database.ts

@@ -8,13 +8,37 @@ export const createCollectionSubscriber = (databaseId: string, collectionId: str
 	databases.listDocuments(databaseId, collectionId).then(data => store.set(data.documents))
 
 	client.subscribe(`databases.${databaseId}.collections.${collectionId}.documents`, (response: RealtimeResponseEvent<any>) => {
-		store.update(current => {
-			const index = current.findIndex(item => item.$id === response.payload.$id)
-			if (index === -1) return current
 
-			current[index] = response.payload
+		if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.delete`)) {
-			return current
+			store.update(current => {
-		})
+				const index = current.findIndex(item => item.$id === response.payload.$id)
+				if (index === -1) return current
+
+				current.splice(index, 1)
+				return current
+			})
+			return
+		}
+
+		if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.update`)) {
+			store.update(current => {
+				const index = current.findIndex(item => item.$id === response.payload.$id)
+				if (index === -1) return current
+
+				current[index] = response.payload
+				return current
+			})
+			return
+		}
+
+		if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.create`)) {
+			store.update(current => {
+				current.push(response.payload)
+				return current
+			})
+			return
+		}
+
 	})
 
 	return store

src/routes/index.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
 	import Layout from '../lib/components/Layout.svelte'
+	import { createCollectionSubscriber } from '$lib/database'
+
+	const names = createCollectionSubscriber('6388a5e235c0c0fc8054', '6388a5e930cfd8a7ae56')
 </script>
 
 <Layout>
 	<h1>Home</h1>
+
+	<div>
+		{#each $names as { name }}
+			<p>{name}</p>
+		{/each}
+	</div>
 </Layout>