Patterns for 2-way reactivity on deeply nested objects?

[colecrouter]

This is more of a discussion than a cry for help. Amongst all the Svelte 5 tutorials online, I haven't seen much in terms of handling 2-way reactivity. I'm curious about others' takes on this problem.

Let's imagine we're trying to make a contacts app. We have data like this:

{
  "name": "John Smith",
  "phone": {
    "home": "",
    "work": ""
  }
}

Maybe we have something like this:

<script>
  // App.svelte
  class UserManager {
    raw = state([]); // Pass in user data array
    i = state(0);

    get currentUser() { return this.raw[i]; }
    set currentUser(value) { ... }
    get index() { return this.i; }
    set index(value) { ... }
    // Not a full implementation, you get the idea
  }
  
  const userManager = new UserManager();
</script>

<List users={userManager.raw} bind:selectedIndex={userManager.index} />

<Details bind:user={userManager.currentUser} />

Ok, what if we wanted to wrap our raw data in classes? How would you go about doing it?

Getter/Setter Only

class User {
  raw;

  constructor(data)
  get firstName() { ... }
  set firstName(value) { ... }
  get phoneNumbers() { return Object.values(this.raw.phone); }
  set phoneNumbers(value) { ... }
}

class UserManager {
  ...
  get currentUser() { return new User(this.raw[i]); }
}

Problem 1: Getter/Setter Foot-Gun

// ❌ does not update this.raw
user.phoneNumbers[0] = "(123) 456-7890";
// ✅ works, but gross
user.phoneNumbers = ["(123) 456-7890", ...user.phoneNumbers.slice(1)];

Look at the phoneNumbers getter. It seems like this is because index access triggers the getter, but not the setter (correct me if I'm wrong). If you work around this, you'll likely end up with a race condition.

Note this isn't a Svelte issue, just something that stumped me for a while! This could be solved with using an $effect, but I'm curious if anyone has found a cleaner solution.

Problem 2: Unnecessary Class Creation

Obviously, returning new objects inside a getter isn't the best solution, as every call creates a distinct instance of that class. Not to mention, it only works as long as the resulting objects don't contain any state.

Using $derived for Subclasses

This seems to work well, if it fits your use case (aka you don't ever need to reassign it externally).

class UserManager {
  ...
-  get currentUser() { return new User(this.raw[i]); }
+  currentUser = $derived(new User(this.raw[i]); }
}

This solves problem 2 quite elegantly, but I haven't played around much with it. By avoiding using a getter, our User instance is "cached" until either this.raw or this.i is updated.

Using $state Inside Subclasses

Is it possible to avoid recreation of classes entirely? I haven't experimented with this much yet.

Please share your thoughts on any & all of this!

[brunnerh]

I would probably create the class instances directly, not on get or in $derived (which is just a lazy getter).
I.e. when data is loaded, every object is converted and when new users are added, they are added as User instances.

[colecrouter]

Interesting idea. So in that case, we would need to recreate all objects if our raw value is changed externally, but then internally we can avoid state entirely. I'm going to experiment with this, thanks!