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	be58cda
🔍 Latest deploy log	https://app.netlify.com/sites/twoslash/deploys/6726598ef8d4bc000874501f
😎 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.