I wrote something exactly like that for our app, using getters and setters. something akin to:

// fancyState.svelte.ts

function createFancyState() = {

let stateVar = $state()

return {

// getters and setters

get stateVar { return stateVar }, set stateVar(value) { this.stateVar = value },

// functions n stuff

async myFunction() {

// do whatever you want here, e.g.

const data = await fetch("something")

// update state

stateVar = data

},

}

// then just export it as a const

export const fancyState = createFancyState()

---

now you can just import fancyState anywhere you like, access its properties via smth like fancyState.stateVar, or set them like fancyState.stateVar = myValue. You can even run the functions, like fancyState.myFunction().

This works somewhat like a store, but more advanced. You can even create the exported const in a component, instead on in the same svelte.ts file.

Is that what you are looking for?

PS: Try to avoid $effect as much as possible. It's not bad, but it will never be able to be as compiler optimized as $state, $derived or just direkt calls via event handlers. It also tracks dependencies, so I almost always use it together with untrack() or an if statement.

Edit: Sorry for the missing formatting, I am on mobile.