Feat: twoslash-svelte

[Hugos68]

This PR attempts to create twoslash-svelte which is an extension of twoslashthat supports Svelte.

[netlify]

✅ Deploy Preview for twoslash ready!

Name	Link
🔨 Latest commit	16a7c9b
🔍 Latest deploy log	https://app.netlify.com/sites/twoslash/deploys/675f4c9f0d145c0008eb2b97
😎 Deploy Preview	https://deploy-preview-57--twoslash.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Hugos68]

@antfu @orta
A review would be appreiciated, I'm now at a point where I feel confident I have the code working. I was able to copy some code from twoslash-vue as it works similarly (convert source to tsx then typecheck and use sourcemaps to backtrack the original location).

All that's left is tests.

[orta]

From a high level, this looks very cool to me!

[Hugos68]

@antfu There seems to be a bug related to the $ inside twoslash or @shikijs/vitepress-twoslash. Everytime a variable has the $ inside of it there are 2 popups:

1:
2:

As you can see both popups show information about $state but one is at the first index of the word and the other is at the middle index (which is the correct one). Why is there an extra popup for the $?

In the HTML output you can see that instead of a single span the $ and state are seperated:

[Hugos68]

Also, for some reason twoslash-vue test aren't passing anymore, I have no clue why as I didn't touch the tests from twoslash-vue.

[Hugos68]

@antfu This is ready for review btw, not sure if you have missed it as I know you're inbox is quite lengthy.

[Hugos68]

@dominikg, I might need some help as you're one of the maintainers of svelte2tsx correct?
When compiling the tsx coming from svelte2tsx how can I include the .d.ts files? I've tried many methods but can't find a consistent way where the user can install svelte2tsx and the twoslash-svelte package can use those files.