val-town / codemirror-ts

lint, hover, and autocomplete extensions for CodeMirror + TypeScript
https://val-town.github.io/codemirror-ts/
ISC License
105 stars 6 forks source link

TypeScript twoslash #26

Open hatemhosny opened 1 month ago

hatemhosny commented 1 month ago

Great work. Thank you for making this available.

I suggest adding support for twoslash comments, similar to TypeScript playground.

image

You can find the implementation used by TypeScript playground here: https://github.com/microsoft/TypeScript-Website/blob/v2/packages/playground/src/twoslashInlays.ts

then, it is used (for Monaco editor) like that: https://github.com/microsoft/TypeScript-Website/blob/dc4ecf56cb90d45e98a1afc78e1788d1cc5e208d/packages/playground/src/index.ts#L733

Also, twoslash completions can be found here: https://github.com/microsoft/TypeScript-Website/blob/v2/packages/sandbox/src/twoslashSupport.ts

and used like that: https://github.com/microsoft/TypeScript-Website/blob/dc4ecf56cb90d45e98a1afc78e1788d1cc5e208d/packages/sandbox/src/index.ts#L196-L207

It would be great if you consider adding support for that. Thanks a lot.

tmcw commented 3 days ago

I'm interested in adding support for this. Oddy I can't seem to get the TypeScript Playground to do anything based on the comments - should this work? https://www.typescriptlang.org/play/?#code/MYewdgziA2CmB00QHMBQB6dACHusD0AfIA

Ah, okay, it works: https://www.typescriptlang.org/play/?#code/MYewdgzgLgBAhgI2DAvDARACQKYBtcjoBQA9CTBTAHoD8QA

hatemhosny commented 3 days ago

Great, thank you.

Please let me know if you think I can help. I have recently implemented twoslash support (for monaco editor) in my project, LiveCodes. demo: https://livecodes.io/?x=id/ajgszcfiqvz&editor=monaco