Realtime

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import { createClient, setClient } from '@svelte-lean/query';
	import { http } from '@svelte-lean/query/http';
	import { live } from '@svelte-lean/query/live';
	import { tabs } from '@svelte-lean/query/tabs';
	import { can, session } from '$api/session.svelte';
	import { memberRules } from './rules';
	import { eventSource } from './source';

	let { children } = $props();

	setClient(
		createClient({
			transport: http({ base: '/' }),
			scope: () => [session.workspace],
			can,
			modules: [
				live(eventSource('/events'), memberRules),
				// One poller and one socket per browser; tabs of another user never share.
				tabs({ session: () => (session.userId === null ? null : String(session.userId)) })
			]
		})
	);
</script>

{@render children()}

// src/lib/live-source.ts — a LiveSource over server-sent events: one EventSource per channel.
// A Pusher, Reverb or WebSocket client is wrapped the same way.
import type { LiveSource } from '@svelte-lean/query/live';

export function eventSource(base: string): LiveSource {
	return {
		subscribe({ channel, event }, deliver, ready) {
			const events = new EventSource(`${base}/${encodeURIComponent(channel)}`);
			const listener = (message: MessageEvent<string>) => deliver(JSON.parse(message.data));
			events.addEventListener(event, listener);
			events.addEventListener('open', () => ready(), { once: true });
			return () => {
				events.removeEventListener(event, listener);
				events.close();
			};
		}
	};
}

// Poke, then pull: the observed lists tagged Members refetch, coalesced per burst.
rule('Members', { channel: 'members', event: 'member.created' }),

// The event carries the row: every cached page, list and detail holding it is patched.
rule('Members', {
	channel: 'members',
	event: 'member.updated',
	message: type<{ member: Member }>(),
	patch: (m) => patch(tag('Member', m.member.id), () => m.member)
}),

// Change one field of the one cached detail the message names.
rule(getMember, {
	channel: (params) => `members.${params.id}`,
	event: 'presence.changed',
	message: type<{ id: number; status: Member['status'] }>(),
	patch: (m) => patch([getMember, { id: m.id }], (member) => ({ ...member, status: m.status }))
})