Handling Objects in Custom Devtools Emit

[TakhyunKim]

I'm wondering whether this is something the library user should handle,
or if it should be provided by the library itself.

Based on the discussion here, I plan to create an issue and submit a pull request.

Through the Custom Devtools example, I was able to observe the debugging log behavior in the console window.

• https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools

The current example demonstrates the increment and decrement of count,
and the format of the value passed to EventClient is { count: number; history: Array<number> }.

In the case of history here, the array is passed by reference.
This causes history to reference the address of the original array, leading to the following issue:
(For convenience, the TanStackDevtools eventBusConfig debug option has been disabled)

debugging log testing image with bug

The history values in the log are the same.

debugging log testing image with user has taken action

When applying history, the spread operator was used.

Personally, I think it's difficult for library users to always keep this in mind.
One approach could be to perform a deep clone, such as using structuredClone,
on the payload during the stage where the library itself emits it.

• https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

Thank you for reading this long post.