What is the best way to update complex objects in stores in Svelte 5?

[rxliuli]

After svelte5, immer seems difficult to integrate with it, for example the following code

import { produce } from 'immer'
import { writable } from 'svelte/store'

const message = $state({
  id: 'test',
  content: 'test',
})
const store = writable({
  messages: [] as (typeof message)[],
})
store.update(
  produce((draft) => {
    draft.messages.push(message)
  }),
)

In real projects, states can be nested in many layers, and I have to be concerned about which objects are proxied by $state and which are not. The $state.snapshot doesn't recursively process objects, which is annoying... and I'm not sure what the best practice is? Maybe switching completely to $state would help?