stackblitz
Diff mode
Is your feature request related to a problem?
This is a feedback I tend to get from end user: they would be eager to observe a diff between the initial files and the solution.
Describe the solution you'd like.
When clicking on "solve", having a way to observe not only the solution code, but the difference with the initial files:
- files created/removed
- within an existing file, lines created/removed/modified
Describe alternatives you've considered.
The text content explains bits of improvements but for a complex lesson that may not be enough. Tools like "hackreels" allows to create complementary videos to show the evolution of a file, but doesn't extend much to multiple file.
Additional context
There might be libraries that help with computing the diff itself. Not an easy feature but might be very useful to learners.
Showing diff for the currently open file should be quite easy to do. All we need is to somehow compute the diff of two files in browser, and add diff syntax highlight to the editor.
But I'm not sure how showing diff of all the created and removed files should be done. 🤔
But I'm not sure how showing diff of all the created and removed files should be done.
I'd say it could be done in the tree view component ? Just adding a "+""-" in front of the filename and a different color. I didn't investigate the code at this point though to see how it could be implemented in the end.
But I'm not sure how showing diff of all the created and removed files should be done. 🤔
similar to the vscode git view?
- M (orange) for modified
- D (red) for deleted file
- A (green) for added file
- R (gray) for renamed file
