Repository navigation
Use shiki-twoslash for .svelte code blocks #649
Description
Describe the problem
We just upgraded the docs to use shiki-twoslash, which provides tooltips on js code blocks:
It would be cool if svelte blocks got the same treatment.
Describe the proposed solution
Honestly no idea, but @jasonlyu123 got a POC working previously: sveltejs/kit#3324 (comment)
Alternatives considered
No response
Importance
nice to have
Additional Information
No response
Activity
jasonlyu123 commentedon Oct 26, 2024
Right, I never followed up on this. At some point, the POC became overly complicated when new stuff was added to the kit docs. The biggest issue is supporting the
// ---cut---comment as the script tag needs to be partly cut so source-map is harder. There is also some ts diagnostics error insvelte2tsxgenerated code that needs to be filtered out in a weird way and also requires a different sourcemap. So there are like a total of 3 or 4 kinds of sourcemap.teemingc commentedon Oct 26, 2024
I assumed this was working when I saw the hover tooltips on variables for the new svelte site https://svelte.dev/docs/svelte/$state . I think I misunderstood since those blocks were JS only. Svelte blocks still don't have them.
jasonlyu123 commentedon Oct 26, 2024
Yeah. the library only works with ts/js so there isn't hover info in the svelte file. There is now a twoslash vue and eslint so maybe there would be more stuff added to the base library making it easier and not needing so many layers of source map.
Hugos68 commentedon Oct 31, 2024
I've made some efforts to build
twoslash/svelteas a project for the upcoming Svelte hackathon:twoslash-sveltetwoslashes/twoslash#57If this is something that you think will be valueable to the docs I will gladly submit a PR to add twoslash to
.svelteblocks. It has 100% feature parity, so highlights, hovers, queries, cutted blocks etc all works.Just note that the PR is still just a PR so the package isn't out yet.
This is how it looks for example:
huntabyte commentedon Oct 31, 2024
@Hugos68 I have been patiently waiting for someone to build a Svelte integration for this for quite some time. This is incredible and will benefit not only the svelte.dev site but the entire ecosystem of Svelte libraries 💪 incredible job!
Rich-Harris commentedon Nov 5, 2024
This would be incredible, thank you!
Hugos68 commentedon Nov 5, 2024
Sure thing, once
twoslash-sveltegets merged intotwoslashI'll submit a PR 👍teemingc commentedon Sep 30, 2026
We've switched to Twinkleplop and should probably use its svelte-twoslash package https://twinkleplop.pngwn.workers.dev/docs/twoslash
Hugos68 commentedon Oct 1, 2026
@teemingc That's awesome! looks like a great package that filled the gap we needed to be filled. Thanks for notifiying me 👍