Is there a plan to make liveQuery more compatible with Svelte5 runes

[newholder]

With the introduction of runes, store is kinda obsolete. Is there any plan to support runes once svelte5 released?

I use it like this in svelte5

let _friends = liveQuery(async () => {
      return await db.friends
        .where("age")
        .between(18, 65)
        .toArray();
    });

let friends = $derived($_friends)

[dfahlander]

Thanks for bringing it up. Also asked on stackoverflow: https://stackoverflow.com/questions/78089371/dexie-livequery-with-svelte-5-runes

Need more knowledge about Svelte 5 and runes before I could do anything about it but a PR would be much welcome. Could we introduce some kind of svelte helper library that delivers runes for live queries? A bit like we have for react?

[molarmanful]

The recently-added fromStore alongside the wrapper from #1907 worked for me:

import { liveQuery } from 'dexie'
import { fromStore } from 'svelte/store'

export const liveQ = q => fromStore({
  subscribe: (run, invalidate) =>
    liveQuery(q).subscribe(run, invalidate).unsubscribe,
})

// usage

const friends = liveQ(async () => await db.friends.where('age').between(18, 65).toArray())

$inspect(friends.current)

[ericdudley]

Hello, I am also trying to use Dexie.js in a Svelte5 project with runes. I started by following the existing tutorial Get started with Dexie in Svelte tutorial. However, I got stuck when trying to make a liveQuery reactive to props/state.

I was able to get it working by combining $derived.by with a noop reference to the state I want to react to (in this case namePrefix). Is this the correct way of parameterizing a live query? Re-creating the liveQuery whenever the parameter changes?

<script lang="ts">
	import { db } from '$lib/store';
	import { liveQuery } from 'dexie';

	let { namePrefix }: { namePrefix: string } = $props();

	let friends = $derived.by(() => {
		// noop just to make it reactive
		namePrefix;

		return liveQuery(() => db.friends
				.where('name')
				.startsWithIgnoreCase(namePrefix ?? '')
				.toArray()
		);
	});
</script>

[dfahlander]

Hello, I am also trying to use Dexie.js in a Svelte5 project with runes. I started by following the existing tutorial Get started with Dexie in Svelte tutorial. However, I got stuck when trying to make a liveQuery reactive to props/state.

I was able to get it working by combining $derived.by with a noop reference to the state I want to react to (in this case namePrefix). Is this the correct way of parameterizing a live query? Re-creating the liveQuery whenever the parameter changes?

<script lang="ts">
	import { db } from '$lib/store';
	import { liveQuery } from 'dexie';

	let { namePrefix }: { namePrefix: string } = $props();

	let friends = $derived.by(() => {
		// noop just to make it reactive
		namePrefix;

		return liveQuery(() => db.friends
				.where('name')
				.startsWithIgnoreCase(namePrefix ?? '')
				.toArray()
		);
	});
</script>

It's correct to recreate the query whenever a closure it depends on changes. In the background the old query will be unsubscribed and a new query subscribed and the result will stay until the new query emits it's initial value.