Default to $state.snapshot() when console logging

[jamestinman]

Describe the problem

When console logging a reactive variable, the Svelte developer almost always wants to see the value of that variable.

However, in most cases Svelte requires the variable to be wrapped in $state.snapshot() otherwise you only get e.g. [Proxy(Object), Proxy(Object)]. This is unintuitive, and thus IMO going against general Svelteish principles.

Describe the proposed solution

$inspect looked like it was for this use case, but alas itself can only be used inside an effect (e.g. during component initialisation). But still, it would better to default to the obvious console behaviour for the developer, with cases when there is a genuine need to see the variable wrapper perhaps using a different Rune.

Importance

would make my life easier

[Prinzhorn]

#13070 #13142

[paoloricciuti]

In dev it's already the case...are you referring to something else?

[jamestinman]

I'm on:
├── svelte@5.27.0
Glad to see Rich attempting to improve in #13070
Did not appreciate just how tricky it is!

Would it not be better to simply default to $state.snapshot() for all console logs, as it works just fine with "normal" vars?

[paoloricciuti]

Yeah but Simon already added that...are you seeing this differently?

[dummdidumm]

this is what you should be seing - a warning, a snapshotted version, the original version.

[Rich-Harris]

1. We shouldn't do this in production, because that adds unnecessary overhead
2. We shouldn't have unexpected divergence between dev and prod

The conclusion of 1 and 2 is that this would be an undesirable change. We already handle this by printing the snapshotted values after the console_log_state warning, which seems like enough, so I'll close this.

In an ideal world browsers would do a better job of logging proxies directly, using the ownKeys and getOwnPropertyDescriptor traps