feat(utils): devtools dispatch support #260

[Aslemammad]

Here's a simple impl of the feature! Any suggestions/reviews are welcome.

Reminder: we discussed eval/new Function for simple js values instead of JSON values, but it's risky for now. So it's good to go with JSON for now

cc @AshConnolly

[dai-shi]

Looks great.

[AshConnolly]

Awesome! Thanks guys! Appreciate it! 😃 👍

[dai-shi]

Oh, codesandbox bot is not working.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2dcef56:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration

[dai-shi]

@AshConnolly Please try the codesandbox ci build, and make sure if this fixes what you want. You can install the build locally.

[AshConnolly]

Thanks so much for this @dai-shi & @Aslemammad! Appreciate it! Sorry for taking so long to get back to this!

I just tested it on Codesandbox and couldn't get it to work. What shape should the dispatch object be?
I tried various dispatch objects like :

{
  type: "ACTION",
  text: "bye"
}

{
  type: "ACTION",
  state: {
    text: "bye"
  }
}

but got this error:
index.js:27 please dispatch a serializable value that JSON.parse() and proxy() support SyntaxError: Unexpected token t in JSON at position 1

Sandbox here - https://codesandbox.io/s/react-forked-rhp1s?file=/src/App.js

In terms of the PR, you made this change look simple, I might even try and contribute next time I want a feature! (I'm sure its not as simple as it looks though!!)

Thanks again! 😄

[dai-shi]

I never tried, but it's probably this:

{"text":"bye"}

[AshConnolly]

So sorry for the late reply!
That appears to be working for me! 😄 🚀
see here - https://codesandbox.io/s/react-forked-euoqf?file=/src/App.js

Thanks so much! 👍

This change solves the issue of changing Valtio state from a dev tool which is great. However, I have a kind of related question that I hinted at here...

Is it possible to have some sort of Valtio implementation that allows us to change Valtio state from react dev tools? I often wonder if people are hesitant to use state libraries that don't clearly show state in devtools. Like with context you can see and modify context state in the react devtools, which is nice.

Happy to raise this as a separate issue / discussion if it helps!

Thanks again! 😄

[dai-shi]

Feel free to open a new issue / discussion. Maybe discussion, as we don't know if it's possible yet?

[AshConnolly]

Fantastic! Thanks so much @dai-shi & @Aslemammad! 😃 👍

[Noitidart]

Thanks @AshConnolly for bringing ideas from other places to here. I really think Valtio has a bright future! Taking the best ideas from other state management solutions and bringing it here.