How to use JSON.stringify with class instances that use $state runes?

[apisarev]

How to use JSON.stringify with class instances that use $state runes for properties?
When I try to convert a class instance to JSON that contains properties with $state, those properties are ignored in the resulting JSON.

[brunnerh]

I would only recommend the use of classes if you really need the performance boost they provide.

Plain objects that are used with $state can be serialized as expected, their only downside is that a Proxy is used to provide reactivity for the properties which has some overhead.

For classes you can use the second argument to JSON.stringify to list properties to include, e.g.

<script>
	class Counter {
		value = $state(0)
	}

	const counter = new Counter();
</script>

<button onclick={() => counter.value++}>
	clicks: {counter.value}
</button>

<pre>{JSON.stringify(counter, ['value'], 2)}</pre>

REPL

Alternatively you could also add a toJSON function that provides an object for serialization:

<script>
	class Counter {
		value = $state(0)

		toJSON() {
			return {
				value: this.value,
			}
		}
	}

	const counter = new Counter();
</script>

<button onclick={() => counter.value++}>
	clicks: {counter.value}
</button>

<pre>{JSON.stringify(counter, null, 2)}</pre>

REPL