Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.2k
feat(devtools): state diffing#1585
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:v2
Are you sure you want to change the base?
Uh oh!
There was an error while loading.Please reload this page.
Conversation
netlifybot commentedAug 23, 2022 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
✅ Deploy Preview forpinia-official canceled.
|
posva left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
This is pretty neat!
Make sure to run the lint:fix script in your files
Can you should some screenshots of the added features?
| store.$onAction(({ after, onError, name, args})=>{ | ||
| constgroupId=runningActionId++ | ||
| constinitialState=JSON.parse(JSON.stringify(toRaw(store.$state))); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
We should probably try to usehttps://developer.mozilla.org/en-US/docs/Web/API/structuredClone if it exists.
It should definitely gracefully fail for circular references and not crash
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
why are you doingtoRaw() here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
toRaw helps with cloning the object. I've testedstructuredClone function but it seems it has problems with cloning functions.
I can create my own deepClone function or use the one that lodash provides, but I don't know if you want to have dependencies
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
there shouldn't be functions in state 😓
Yes, we want to avoid importing lodash
structuredClone have some limitations but it should also be quite fast. You should probably avoid doingtoRaw() because we want to unwrap the properties.
I remember Vue devtools had a function for exactly this usecas in their codebase, it might be worth checking it out
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
From what I can tell, because state is wrapped in a proxy with methods, if I don't make this a raw objectstructuredClone won't work.
JSON.parse(JSON.stringify) will work withouttoRaw but the effect will be I think the same.
Could you explain to me whytoRaw should be avoided in this situation?
I use thisraw object just to copy and display it in devtools.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Because of nested refs
KrosFire commentedAug 31, 2022
@posva I've added fast-copy util which is also used in vue devtools for vuex state copy. As far as I could see it all works great. I've attached some images of devtools. |
posva commentedOct 6, 2022
Where is fast-clone used in devtools? |
Uh oh!
There was an error while loading.Please reload this page.
Hi inspired by redux devtools and also this issue:#859
I've decided to add more debug information to pinia devtools about the status of the state before and after given action.
In acknowledgment that states can be pretty huge I've also decided to add
differencesobject that only holds data that has been changed.I think it works pretty well, but it will crash for any circular objects. On the other hand I don't think that those kinds of objects should stored in pinia state.
Let me know what you think :)
Here are some images of new devtools feedback: