stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
507 stars 49 forks source link

Diff mode #370

Open eric-burel opened 1 month ago

eric-burel commented 1 month ago

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:

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.

AriPerkkio commented 1 month ago

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. 🤔

eric-burel commented 1 month ago

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.