Provide init/destroy callbacks to `$state`

[anthumchris]

Describe the problem

I would like to used shared/global $state across multiple components and centrally manage the initialization and cleanup/teardown of that state on first/last use, similar to using Svelte 4 stores and their StartStopNotifier.

My goal is to provide developers with declarative, decoupled logic and state for their components and eliminate their explicit use of lifecycle hooks (onMount, onDestroy) by optimizing $state behind-the-scenes. This allows me to implicitly improve runtime performance and reduce memory usage by reading/writing large amounts of previously-fetched data to browser disk storage when $state is first/last used.

related: #11980

Describe the proposed solution

Working REPL example

Provide init/destroy callbacks to $state, similar to the StartStopNotifier used in Svelte stores. This also assists us when migrating from Svelte 4 stores to Svelte 5 $state Runes.

const myState = $state({
  loading: false,
  data,
  error,
}, initDestroy)

function initDestroy(state) {
  console.log('init')
  return () => {
    console.log('destroy')
    state.loading = false
    state.data = null
    state.error = null
  }
}

Importance

would make our lives easier

[MotionlessTrain]

createSubscriber could help with the start-stop part

[anthumchris]

Describe the proposed solution

Working REPL example

createSubscriber could help with the start-stop part

thanks, this was used in the working "proxy the proxy" example above

[paoloricciuti]

Describe the proposed solution

Working REPL example

createSubscriber could help with the start-stop part

thanks, this was used in the working "proxy the proxy" example above

So if it's doable very easily like this...why it should be in core?

[anthumchris]

So if it's doable very easily like this...why should it be in core?

Providing the rune as $state(value, initDestroy?) allows devs to opt-in without the need to import and use a separate function/file. It also maintains parity with Svelte 4's stores and eases migrations and refactoring.

Alternatively, $state(value, { initDestroy? }) would provide a more scalable approach by passing an options object.

[paoloricciuti]

One of the advantages of runes is exactly the fact that you can write these utilities yourself and create subscriber was created specifically with this intent in mind. Considering the implementation would literally be the same I really don't see the advantage here.

I'm gonna close this but thanks for reporting 🧡