For complex things, I came up with a pattern that stores the state externally from the components in a single centralized file. So the components just become simple shells that render the state and forward events. (All the complex business logic can be tested without the DOM/headless browser.)
I call it "nation state" because it groups sets of related variables together in a scope between local and global.
I implemented the pattern with Svelte runes, but I think it could be implemented with anything; even React.
Yes this is the way to do it, global-ish state files with getters and setters. I’ll have a .svelte.ts file (or a few of them) with a typed state object, maybe a function for refreshing it or syncing it with a backend api, import the state all over the place.
Might be an anti pattern but it works really well.
I think I follow but IIRC my problem was something like that the getters and setters had to be quite "flat". if they weren't they would recursively infect everything top-down and then not work anyway because of boundaries in the deep reactivity.
I call it "nation state" because it groups sets of related variables together in a scope between local and global.
I implemented the pattern with Svelte runes, but I think it could be implemented with anything; even React.
I went into more detail here (with live example/code): https://www.reddit.com/r/sveltejs/comments/1dgf8la/comment/l...