Use shiki-twoslash for .svelte code blocks

[Rich-Harris]

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

[jasonlyu123]

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 in svelte2tsx generated 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.

[eltigerchino]

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]

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]

I've made some efforts to build twoslash/svelte as a project for the upcoming Svelte hackathon:

• PR: Feat: twoslash-svelte twoslashes/twoslash#57
• Preview: https://deploy-preview-57--twoslash.netlify.app/packages/svelte

If this is something that you think will be valueable to the docs I will gladly submit a PR to add twoslash to .svelte blocks. 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]

@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]

If this is something that you think will be valueable to the docs I will gladly submit a PR to add twoslash to .svelte blocks

This would be incredible, thank you!

[Hugos68]

Sure thing, once twoslash-svelte gets merged into twoslash I'll submit a PR 👍