rust-monaco icon indicating copy to clipboard operation
rust-monaco copied to clipboard

Leptos components?

Open Boscop opened this issue 1 year ago • 4 comments

It would be nice to not just have yew components but also leptos components (for leptos 0.7) 🙂

Boscop avatar Oct 05 '24 16:10 Boscop

I would be happy to implement this. If I were to go about this, where would I begin?

rakshith-ravi avatar Oct 06 '24 14:10 rakshith-ravi

@rakshith-ravi Great, thank you! To go about this, it makes most sense to do it for Leptos 0.7. The official Leptos book is not yet updated to 0.7, but a lot of it still applies, but for seeing examples of Leptos components, the examples folder of the repo is fully updated to 0.7, e.g.: https://github.com/leptos-rs/leptos/tree/main/examples/todomvc

Boscop avatar Oct 07 '24 11:10 Boscop

Indeed. I work with the Leptos team on 0.7 😄 I was wondering more in terms of how rust-monaco is implemented and how to interact with it :D

rakshith-ravi avatar Oct 08 '24 15:10 rakshith-ravi

I was wondering more in terms of how rust-monaco is implemented and how to interact with it :D Ah, I don't know..

Btw, people are saying that Monaco editor in general is not as well documented as CodeMirror:

  • https://news.ycombinator.com/item?id=30677881

As a new user of Monaco trying to incorporate it into a project: I disagree with Monaco's documentation being good. Monaco's documentation is terrible, it's auto-generated API documentation. Examples are outdated or flat out wrong. To make matters worse, the (unofficial?) React plugin documentation is unreadable to newcomers

  • https://blog.replit.com/code-editors

Monaco’s API documentation is good enough but could be better. Monaco has no official guides as far as I know, which makes it hard to get started. You probably have a tough time using the codebase as a supplementary resource due to how the project is structured.

  • https://sourcegraph.com/blog/migrating-monaco-codemirror

Monaco’s documentation is not great, so we couldn’t always figure out if it was possible to make it do what we needed.

{A87595D1-DB6E-472F-96C4-D0E1687809C6}

And Monaco doesn't support mobile at all. So I'm leaning more towards using CodeMirror now. There's a crate that wraps CodeMirror for wasm, but it's version 5, and I'd be more interested in using CodeMirror 6 in leptos, as it has better support for mobile, accessibility and LSP. And given that CodeMirror is better documented, and both SourceGraph and Replit switched from Monaco to CodeMirror (interesting HN thread about this), I'd recommend if your goal is to have one good code editor component for Leptos (which I think would be great), I'd recommend choosing CodeMirror now after researching more. Because Monaco doesn't work on mobile at all, and isn't modular, it blows up the bundle size by a huge amount, whereas CodeMirror 6 is modular.

For my needs, the only plus that Monaco has is better LSP support, but CodeMirror 6 supports some LSP features, just not all yet, but the situation will improve (yellow in that diagram means it's work-in-progress), and the LSP features that it already supports are the most important ones. Also, mobile support and fast-loading pagespeed is more important for me (as it was also for Replit).

Boscop avatar Oct 09 '24 07:10 Boscop