Svelte 5: Reactive properties in classes are not included in JSON.stringify, structuredClone and so on

[ZerGo0]

Describe the bug

I'm currently migrating another project to Svelte 5 and I have noticed that classes with reactivity are pretty hard to deal with. Reactive properties are not included in methods/functions like JSON.stringify, structuredClone. I understand that reactive properties generate getters and setters, but the docs don't mention the incompatibility and as far as I know there are no built-in functions to do stuff like this.

This is a pretty big pitfall in my opinion. You can't use classes the way you are used to, and you have to write your own helper functions for basic stuff like stringify. Arrays, maps, nested reactive classes and so on make things even more complicated.

I know that this how classes with getters and setters work in JS, but when you migrate, and you get the binding_property_non_reactive warning you simply make the property reactive, and now it's not included anymore.

Reproduction

REPL

Logs

No response

System Info

System:
    OS: Linux 6.11 EndeavourOS
    CPU: (4) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 9.31 GB / 15.32 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 23.1.0 - /usr/bin/node
    npm: 10.9.0 - /usr/bin/npm
    pnpm: 9.12.3 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 130.0.6723.91

Severity

annoyance

[paoloricciuti]

That's just how classes works...you can create a toJSON method on the class to specify how you want the class to be serialized

[ZerGo0]

For smaller less complex classes you can do it manually, but it's pretty tedious for more complex one with nesting and so on.

Anyway, it doesn't seem like there is anything planned for this. Discord user @yuqii came up with this for json conversion:

function upgrade(target) {
  Reflect.defineProperty(target.prototype, 'toJSON', {
    value() {
      const res = {}
      const pdesc = {
        ...Object.getOwnPropertyDescriptors(target.prototype),
        ...Object.getOwnPropertyDescriptors(this),
      }
      for (const k in pdesc) {
        const v = pdesc[k].value ?? pdesc[k].get?.call(this)
        if (typeof v != 'function') {
          res[k] = v
        }
      }
      return res
    },
  })
}

I needed to to deep copy a class as well so I came up with this and also use it to convert to json:

export function svelteDeepCopy<T>(obj: any, asObject: boolean): T {
  // Handle null, undefined and primitive types
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  // Handle Date objects
  if (obj instanceof Date) {
    return new Date(obj.getTime()) as any;
  }

  // Handle Array objects
  if (Array.isArray(obj)) {
    return obj.map((item) => svelteDeepCopy(item, asObject)) as any;
  }

  // Handle Map objects
  if (obj instanceof Map) {
    return new Map(
      Array.from(obj.entries()).map(([key, value]) => [key, svelteDeepCopy(value, asObject)])
    ) as any;
  }

  // Handle Set objects
  if (obj instanceof Set) {
    return new Set(Array.from(obj).map((value) => svelteDeepCopy(value, asObject))) as any;
  }

  // Handle Object literals and class instances
  let clone: any;
  const constructor = obj.constructor;
  if (!asObject && constructor && constructor.name && constructor.name !== 'Object') {
    if (constructor.length === 0) {
      clone = new constructor();
      Object.assign(clone, $state.snapshot(obj));
    } else {
      console.warn(
        'Cannot deep copy object with constructor with arguments. Using Object.assign instead.',
        constructor.name,
        constructor.length,
        constructor,
        obj
      );
      clone = Object.assign({}, obj);
    }
  } else {
    clone = Object.assign({}, obj);
  }

  const prototype = Object.getPrototypeOf(obj);
  if (!prototype) {
    return clone;
  }

  for (const key of Object.getOwnPropertyNames(prototype)) {
    clone[key] = svelteDeepCopy(obj[key], asObject);
  }

  return clone;
}

export function svelteStringify(obj: any): string {
  return JSON.stringify(svelteDeepCopy(obj, true));
}

It assumes that you have a parameter-less constructor and I haven't fully tested it, but it worked for my case. (A class with reactive props and a array of a class with reactive props as well)

This is definitely not the best way of doing this. I hope that someone can come up with something better in the future.