Smarter completion tracking

[Rich-Harris]

from @dominikg:

Idea for ux: watch the editor content for code blocks/steps of the left hand side and turn the steps green once completed

[Rich-Harris]

At the moment a file is 'complete' if it's a byte-for-byte match of the end state. It would be much more robust if it was based on an AST comparison instead, where possible. (This might pose challenges in cases where there are preprocessors involved etc; maybe it's possible to get the transformed output directly from Vite, in which case the comparison gets fairly simple. Though we'd need to account for style scoping hashes)

[dominikg]

v-p-s uses a stable css hash function during dev and a loose comparison to avoid mismatches from add_location calls
https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/src/handle-hot-update.ts

It also holds a cache of compile data which could be exposed in a way to allow comparison. Would also be useful for a repl like AST viewer.

An alternative way could be to create a test suite that has to pass, which would allow for differences in ordering and other changes that lead to the same output but would also mean an implementation that is a lot more involved.

Long shot but something like a purpose-built version of @vitest/ui could provide immediate feedback as users are coding. https://github.com/vitest-dev/vitest/tree/main/packages/ui docs: https://vitest.dev/guide/ui.html

[Rich-Harris]

Just merged #46, which seems to work pretty well. I thought about the incremental completion idea but as soon as I tried to sketch an implementation my brain melted, so I'm going to close this for now. Maybe we could think about it further down the line though

[dominikg]

Just had another thought about testcases for completion tracking. This is very similar to TDD. This yt vid shows it working quite well with vitest and sveltekit already https://www.youtube.com/watch?v=5bQD3dCoyHA.
With the improved vite compatibility Ben has been working on and a bit of snooping how @vitest/ui gets the results into the browser it could be a very nice ux in the end, both lenient regarding formatting and introducing testing at the same time.

Wouldn't have to be explained to the user at the beginning, but having it as an "oh, btw, you already learned how testing can benefit you from this tutorial, the setup is X" at some point.