Svelte 5: make unstate apply to deeply nested object & keep property order

[zhihengGet]

Describe the problem

if i have let b=$state(...) ; let a = {a: b} then a wont be plain js object with unstate(a) , i have to apply unstate to the a.a
plz consider making unstate work deeply.

another thing is that unstate changes the order of properties i.e $state({a,b,d,c}) , console.log unstate would return a b c d not abdc, i think its better to keep the original key ord

Describe the proposed solution

Importance

nice to have

[dummdidumm]

Giving this the 5.0 milestone in the meaning of "we need to decide how it should work before 5.0".
As for the use case, I think it makes more sense to do unstate at the point where you're assigning to a - is there a reason you can't do this?

[zhihengGet]

user case: im trying to write a adapter for react-query, the query key can be an array of $states, and i won't be able to know if each element is a nested object that contains a $state or not ... so it is unknown to me which element and which property of this element i need to apply unstate too.

for my own project yes i can apply to a.a but making unstate work deeply this would my life easier as lib author

have said that i think it is ok unstate does not apply deeply since we can ask user to not nest $state inside

btw plz also consider making the key order same as original (nice to have and i would say most user expect this(?))

[dummdidumm]

user case: im trying to write a adapter for react-query

Is there any code you can link to already? My hunch is that for such an adapter, where things are under your control and people should never mutate the query state, that using $state.frozen might actually be better.

btw plz also consider making the key order same as original (nice to have and i would say most user expect this(?))

What do you mean by that?

[zhihengGet]

TLDR : i think you can close this!

1. svelte-query this is outdated version WIP it is mostly related to devTool, given a query key, if user update this query key then all both the old query (before update)and new query would have same key ; so i have to apply unstate to the query key to make sure they are not reactive inside devTool, and unstate won't work if they nested $state inside of an{}; i think this is a minor issue and i found out i can get around it withjson.stringifynow :)

let a = $state({} )
  const data = useQuery({
    queryKey: [a], // if user update this state then  in devTool all queryKey would be the same since it is proxied
    queryFn: () =>
      fetch('https://github.com/api/repos/TanStack/query').then((res) =>
        res.json(),
      ),
  })

2. plz ignore; i was using a old version of svelte 5 and if you have a let a = $state( { a,b,d,c}), console.log(unstate(a)) would print abcd instead of {a b d c} , the order of object key is destroyed(）. but it seems to be good now that i tested again;

[dummdidumm]

We decided in #11180 to not make unstate (now $state.snapshot) apply recursively - it should be applied selectively, and if you don't know whether there might be some reactive state deep within your tree then the snapshot should probably happen earlier.