A while back, I made a GIF of refactoring React code to Svelte. Lots of folks asked me how I did it.
Refactoring some #reactjs code to #sveltejs pic.twitter.com/Z3qEIP4r5O
— Josh Nussbaum (@joshnuss) December 21, 2019
It was done by hand coding a Svelte component (code) that walks thru a list of CSS classes. Each class, either highlights, hides or displays lines.
I also did a typewriter example: https://svelte.dev/repl/543a55ffb5184821971fa243c95e4e03?version=3.34.0 which looks like this:
Code is usually a screenshot, but as a GIF I think it’s even more compelling. It’s a really nice way to share a code on social media, for a presentation or for a video course. I wondered if it was possible to make these more soft coded, that way it could work for any code. Maybe it could even end up as a VS code extension that records edits and generates a beautiful GIF/video.
So today I’m experimenting with recording the current selection, making a list of selections, and then playing it back.
Here’s the code: https://svelte.dev/repl/b2c83ff88a6d43a6b7f4cf882c0a8080?version=3.34.0
This one worked out well, I located selections using element.selectionStart & element.selectionEnd, stored them in an array and then played them back using element.setSelectionRange().
To go further, I would explore recording deletions and additions too.