Syntax for a reactive $store nested as an object property

[anthumchris]

Describe the problem

Could the Svelte compiler have syntax to reactively destructure stores that are nested as a property of another object? This example shows how $store can only be reactively destructured as a top-level object, requiring an intermediate top-level variable to be declared for the store:

<script>
  import { readable } from 'svelte/store'

  const store = readable({ val: 111 })
  const obj = { store }

  $: ({ val } = $store)          // ✅ val is updated reactively
  $: ({ val } = obj.$store)      // ❌ $store is a literal property (undefined)
  $: ({ val } = obj.($store))    // ❌ invalid JS
</script>

val: {val}

https://svelte.dev/repl/1df711beb6cb46dda8b8283a3be0bbf2?version=4.2.12

Describe the proposed solution

Syntax obj.$store or obj.($store) could reactively access nested stores. This could make imports, code architecture, and store value deconstruction more flexible:

<script>
  import { UserAction } from './actions'

  $: ({ loading, data, error } = UserAction.$state)
</script>

{#if loading}
  Loading...
{:else if error}
  Error: {error}
{:else}
  {data}
{/if}

Importance

would make my life easier

[Conduitry]

Duplicate of #4079. But, realistically, I don't know that this will get much attention now with the new reactivity models being introduced in Svelte 5.