Is there a pattern for dynamic creation/disposal of $effects?

[colecrouter]

Playground example

I recently come across this issue when trying to build nested proxy data classes. I refactored my classes using getters/setters to use $state and $effect. This was a huge win in all regards (DX, performance, etc.), but now I cannot create these outside of a component's initialization lifecycle. This is a well documented limitation, and can be resolved by wrapping the $effect declaration (or it's calling code) inside of an $effect.root.

At a top level, this isn't a massive issue, but it quickly gets out of hand with nested classes.

Things I've considered:

Idea	The problem as I see it
Declare a global WeakMap to keep track of class instances & call their clean-up functions.	The $effects hold onto references to their instances, so (I think) the instance won't ever get GC'd.
Each class instance stores a reference its own $effect.root clean-up.	It's unreasonable to properly ensure that all clean-up functions are always called everywhere, unless you: surrender all reactive primitives & SvelteMap, SvelteSet, etc. write replacements that properly call clean-ups on deletion never declare these data classes outside of this context
Previous idea, but using [Symbol.dispose]	This is cleaner, but I don't think there's anywhere you could properly "keep the thing in scope until it's not referenced" fundamentally.

—I also understand that I might have tied my business logic too tightly to Svelte's reactivity system.

I would love to hear others comments on this matter, as well as any possible solutions.

[Ocean-OS]

You could do something like this where $effect.roots are created (but their cleanup functions are tied to the component lifecycle).

[colecrouter]

Thanks for sharing, that's brilliant.

As you say, it relies on component destruction for effect disposal, but this could be the perfect solution for many cases.