$inspect and $state.snapshot call `toJSON` method on Three.js objects

[michealparks]

Describe the bug

All Three.js objects contain a toJSON method for serializing state. In Svelte applications involving Three.js, including Threlte apps, it's common to create $state or $derived runes containing Three class instances. For example, one reason for doing this is that some objects must be recreated upon constructor parameter changes.

$inspect and $state.snapshot (haven't tested anything else yet) seem to be calling these objects' toJSON method, serializing them into objects with a completely different structure. This renders these runes unusable, since the logged object isn't the actual class instance.

Reproduction

https://svelte.dev/playground/b9b4dded798b47b6b9cf293fe67d3d22?version=5.38.1

Open console to see serialized objects vs class instances.

System Info

System:
    OS: macOS 15.6
    CPU: (8) arm64 Apple M2
    Memory: 398.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: 9.15.9 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 139.0.7258.68
    Safari: 18.6

Severity

annoyance

[Ocean-OS]

$state.snapshot performs structuredClone on objects, which can only accurately clone POJOs and arrays— it calls toJSON on objects that do not match this criteria, and then parses the result.
If you need to make a more detailed clone, I'd recommend monkey-patching toJSON on the object to serialize it differently.

[michealparks]

Totally fair! I figured I'd mention $state.snapshot since I didn't expect the behavior. IMO this behavior with $inspect is far more problematic.

[Ocean-OS]

$inspect uses $state.snapshot under the hood to react to deep changes, but I don't think it should log the snapshotted value (if it actually structuredCloned it), I'll write a quick fix for that.