search

fabian-hiller / valibot

The modular and type safe schema library for validating structural data 🤖
https://valibot.dev
MIT License
6k stars 186 forks source link

Add TypeScript types to documentation using TwoSlash #688

Open jsudelko opened 3 months ago

jsudelko commented 3 months ago

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 commented 3 months ago

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

ZerNico commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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.