Add TypeScript types to documentation using TwoSlash

[jsudelko]

TwoSlash allows you to add types to your code block markup. For a TypeScript-focused library it would be a godsend. Sometimes I have to switch back and forth between VS Code and docs copying over documentation examples in order to understand what something means or the expected type output. It would he handy if I could simply hover to see the actual TypeScript types.

See Rollup as an example of TwoSlash in the wild. Hover over the JavaScript code snippet.

[fabian-hiller]

Thank you for sharing. Feel free to create a PR and implement it.

[ZerNico]

I started trying to implement this btw.
I changed the Syntax highlighter to Shiki and implemented TwoSlash with it which mostly works.
The problem is, that the default renderer of TwoSlash renders <pre> Elements inside each other for the popups which is an invalid nesting in the HTML spec and the QwikCity dev server just blocks that outright and displays an error.
We'd probably have to implement a custom renderer for it, maybe even with some library for nicer popups.
For example the VitePress TwoSlash plugin uses https://floating-vue.starpad.dev/.
Do you know of a good existing library for Qwik that would work for that?

[fabian-hiller]

Thank you for your contribution! Maybe QwikUI? Or we just build it ourselves like I did with all the other components. But to be honest, I do not have the time to focus on this right now as our v1 RC release has a much higher priority at the moment.

[ZerNico]

Ah I will check that out, thank you! A custom component would probably also not be that hard to implement.
No worries, this has no priority at all, it would just be a nice small addition to the docs. I will work on it from time to time when I have the time, maybe we can eventually add it to the docs some day.