Extracting Nested Properties from an External Svelte Store: Legacy Derived vs. $derived() Runes API

[kevin82222]

I'm working with a Svelte store that comes from an external module (i.e. I don't control its creation). The store is defined like this:

// store.js
import { writable } from 'svelte/store'

export const page = writable({
  user: {
    name: 'Kevin',
    ...
  },
  ...
})

Since I only need the user part of the store, I created a derived store as follows:

// In my Svelte component (Svelte 4)
<script>
  import { page } from './store'
  import { derived } from 'svelte/store'

  // Derive the user object from the page store
  const user = derived(page, ($page) => $page.user)
</script>

Then in my template, I can use it like so:

<p>Hello {$user.name}!</p>

With Svelte 5's introduction of the new runes API (e.g. $derived()), I have a few questions:

1. Using $derived() with a store:
   Can I use the new $derived() runes API (e.g. const user = $derived($page.user)) on this store that is built with the legacy Svelte store API? Or is $derived() strictly for stores created with the new $state API?

2. Best Practices with Legacy Stores:
   Given that the store is built using writable from svelte/store (i.e. the legacy API), what is the recommended approach when I want to extract and use nested properties such as user?

Any insights, examples, or best practices on mixing these approaches or migrating to the new runes API (if applicable) would be greatly appreciated.

[webJose]

Try fromStore() first. Docs

[brunnerh]

You can use $derived with stores via $store syntax, but you can only use $store within components. You can use fromStore as noted by @webJose outside of components (in .svelte.js/ts files), the object returned from that then can be used in $derived (or other reactive contexts).

For extracting values I would use $derived in components or just a function when in an external module. $derived cannot be exported directly, so you need some wrapper, having a $derived in-between has little value.

E.g.

const pageState = fromStore(page);

export function user() { return pageState.current.user; }

Playground