Nostr Web Client

Taking a look at this...it's a really odd pattern, but it also doesn't surprise me that it's not working.

The `value` prop is: a) only scoped to `Component1`, and b) never passed to `Component2`. Since the `state` object on `+page.svelte` is redeclared, `value` doesn't live there, either. It looks to me like Svelte is doing the natural thing and letting `value` be destroyed with its owner (i.e., `Component1`).

Interestingly, the `closure` function seems to outlive its component. As your example solution suggests, copying `value` into the closure's scope ensures `value` has the same lifespan as `closure`.

How come this worked in Svelte 4? I'm trying to understand what Svelte/JS is doing with the references under the hood that would explain the behavior.

hodlbod 10mo ago

The pattern is really weird in isolation, but it makes sense for use cases like portals and modal dialogs.

It worked in svelte 4 because this is just how javascript works. It seems like svelte 5 is trying to re-implement garbage collection by undefining props on unmount. Svelte 4 just used javascript for state management — even though there was some compiler magic with stores that get `unsubscribe` called automatically, it was basically relying on the javascript VM's garbage collector to avoid memory leaks. I suspect something about runes makes this more difficult.

Reply to this note

Please Login to reply.

Discussion

MichaelJ 10mo ago

Maybe the most idiomatic way to implement this pattern with modals in Svelte 5 is to use snapshots. That may suffice to capture the variables the closure needs into a persisted context.

https://svelte.dev/docs/kit/snapshots

hodlbod 10mo ago

In fact it doesn't, you have to re-assign the variable in order to break reactivity

MichaelJ 10mo ago

Dang.

Interestingly, I did try putting a `const newValue = value` inside the callback body in your example, and even that didn't work.

It seems like the Svelte compiler should undefine functions in component bodies, to be thorough, since those functions lose their captured context. Then everything in a component would be tied to its lifecycle, not just some things.

Maybe doing that with functions has other problems, though.

hodlbod 10mo ago

The problem is that svelte is trying to re-invent garbage collection. It seems to me like you could just... let stuff be defined, and it would disappear when everything that holds a reference to it gets collected.