twoslash icon indicating copy to clipboard operation
twoslash copied to clipboard

feat: `twoslash-svelte`

Open Hugos68 opened this issue 1 year ago • 12 comments

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

Hugos68 avatar Oct 29 '24 23:10 Hugos68

Deploy Preview for twoslash ready!

Name Link
Latest commit b3e46398c55132d46172d8f896b4bc1bb67eccb1
Latest deploy log https://app.netlify.com/sites/twoslash/deploys/67e119f1d636fc000882f10f
Deploy Preview https://deploy-preview-57--twoslash.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

netlify[bot] avatar Oct 29 '24 23:10 netlify[bot]

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

Hugos68 avatar Oct 31 '24 09:10 Hugos68

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

orta avatar Oct 31 '24 14:10 orta

@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: image 2: image

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: image

Hugos68 avatar Oct 31 '24 22:10 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 avatar Nov 01 '24 13:11 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 avatar Nov 30 '24 08:11 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.

Hugos68 avatar Dec 19 '24 09:12 Hugos68

@dominikg, I might need some help as you're one of the maintainers of svelte2tsx correct?

sorry for not responding sooner. I do not maintain svelte2tsx, @dummdidumm would be the best person to reach out to, you can try #editor-tools-questions on https://svelte.dev/chat

dominikg avatar Feb 02 '25 20:02 dominikg

No problem, and thanks, will do!

Hugos68 avatar Feb 02 '25 21:02 Hugos68

@antfu This is ready for review

Hugos68 avatar Mar 24 '25 09:03 Hugos68

Side comment, do remember to add svelte to dependencies or peers dependencies or devDependency :)

PuruVJ avatar Apr 05 '25 06:04 PuruVJ

@PuruVJ Good call! Thanks, will do.

Hugos68 avatar Apr 05 '25 08:04 Hugos68