Svelte 5: Automatically implement toJSON so state and properties are serialized.

[niemyjski]

Describe the problem

I ran into a problem which sounded exactly like #9639 (comment), but upon further investigation of that issue. I noticed that my round tripping my data from a svelte class to local storage and then back was not working due to rune properties not being serialized. This was working in svelte 4.

I fixed the issue by implementing toJSON (exceptionless/Exceptionless@264fff7)

export class BooleanFilter {
    public term = $state<string>();
    public value = $state<boolean>();
    constructor(term?: string, value?: boolean) {
        this.term = term;
        this.value = value;
    }

    public type: string = 'boolean';

    public toJSON() {
        return {
            type: this.type,
            term: this.term,
            value: this.value
        };
    }
}

Describe the proposed solution

I feel like the svelte compiler should automatically generate the toJSON implementation for classes by combining any serialized properties with any rune properties. This would lead to one less breaking change with runes only mode and greatly improve dx.

Importance

would make my life easier

[trueadm]

Svelte 4 never had runes, so I'm struggling to see how this is a breaking change in Svelte 5? Furthermore, auto generating a toJSON isn't a simple as it sounds. If you have a field that references a cyclical reference then you'll run into issues serialising it, so it's probably best if people handle their own fields to avoid the pitfalls.

[niemyjski]

I was using writables for syncing these fields, they had to be converted to runes. Cyclical references is always going to be an issue no matter who implements it.

[trueadm]

@niemyjski So this isn't a breaking change then, as writables are still valid and supported in Svelte 5. What you can do is create a helper class that has a toJSON method and captures the state field from the prototype (that's where we put accessors) and auto generates the values. Then for each of your classes you can simply extend that class and get automatic toJSON.

We could in theory do this if we can see that your class hasn't extended another class – but then this gets into subtle differences that cause edge-cases for a compiler based approach. I think it's far better for us to document this and maybe provide ideas on how people might solve this.