Leptos components?

[Boscop]

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

[rakshith-ravi]

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

[Boscop]

@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

[rakshith-ravi]

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

[Boscop]

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.

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

[qknight]

@Boscop Co-Creator of https://crates.io/crates/codemirror here. The problem with the CodeMirror 6 is they don't offer a 'monolitic' payload one could integrate easily.

That said, I'd like to have Version 6 support with rust/leptos also, so if anyone wants to pay for it, we can make this happen. Just reach out to me via this ticket, email or X.

Version 5

This file shows how to use a CDN for the js/css files: https://github.com/slowtec/codemirror-rs/blob/9d54d0b6770bc2385a8d9ffc676104e694d025c5/codemirror-sys/examples/basic/index.html

If you want a nice demo of how it can be integrated:

1. go to https://klimabilanzklaeranlage.de/tool
2. project menu -> load example
3. open the second tab called 'sensitivity parameters' and scroll down to 'Additional custom emissions' and click it so the card opens
4. then copy the text from the example and see how it changes the values and graph

I also had much more experience with the version 5 since I'm using it in the https://nixcloud.io/tour/?id=introduction/nix also!

Version 6

Version 6 is served via a CDN also, see https://www.jsdelivr.com/?query=codemirror but collecting and interconnecting all the modules is more work than for the version 5.