Render only a single component entirely on the client? | Monaco editor component

[Sett17]

I want to make a Monaco component with the rust-monaco crate.

For this, the component needs to be rendered on the client as the server, of course, cannot use the bindings. Is there a way I can tell Leptos to not SSR a single component or force it to re-render it on the client?

I could also be on the wrong track about how this needs to work, so if anyone has already made monaco component for Leptos, I'd appreciate the help.

[gbj]

Hm this is interesting. It's definitely somewhere on the agenda to have something like a <ClientOnly/> component.

For now, the closest you can get is probably

let (outlet, set_outlet) = create_signal(cx, None::<View>);
// `create_effect` only runs on the client, and will run once immediately
create_effect(cx, move |_| {
  // delays a tick until after hydration is done so there's no mismatch
  request_animation_frame(move || {
    set_outlet(/* whatever the new view is */)
  })
})

This could be wrapped in a component, of course. In fact, that's probably pretty darn close to what a <ClientOnly/> component would look like...

[Sett17]

I'm not sure if this should still be in this Discussion, if not I can open a new one. But with this the new view is only partly set/updated.

let (outlet, set_outlet) = create_signal(cx, None::<HtmlElement<Div>>);
    // `create_effect` only runs on the client, and will run once immediately
    create_effect(cx, move |_| {
        cfg_if::cfg_if! {
            if #[cfg(feature = "hydrate")] { //compile this only for wasm code
                //...
                // delays a tick until after hydration is done so there's no mismatch
                request_animation_frame(move || {
                    let div = view! {cx, <div class="w-11/12 h-full border"></div>};
                    //... a &div is passed to the monaco create function
                    l!("div: {:?}", div.outer_html()); //shows the expected html of the whole editor

                    /*
                    Whats in the DOM:
                    <div class="w-11/12 h-full border" style="--codelens-font-features_ee1f61: "liga" off, "calt" off;">
                    </div>
                     */

                    set_outlet(Some(div));
                })
            }
        }
    });
    view! {cx,
        {move || match outlet.get() {
            Some(v) => v,
            None => view! {cx, <div>"loading or something"</div>}
        }}
    }

Do I need to access it differently? Still quite new to Leptos, there's a lot to wrap your head around and keep in mind sometimes.

The create function mentioned in the comment

[gbj]

1. I gave you a really dumb way to do this. Here's one that's much better:

    let editor_ref = create_node_ref::<html::Div>(cx);
    create_effect(cx, move |_| {
        use wasm_bindgen::JsCast;

        if let Some(div) = editor_ref.get() {
            let editor = monaco::api::CodeEditor::create(div.unchecked_ref(), Some(monaco::api::CodeEditorOptions::default()));
            on_cleanup(cx, move || drop(editor));
            log!("div: {:?}", div.outer_html());
        }
    });
    view! { cx,
        <div class="w-11/12 h-full border" node_ref=editor_ref></div>
    }

2. The reason for the behavior, which I figured out after looking at the rust-monaco docs, is that they implement Drop for the CodeEditor type such that it removes the code editor from the DOM. So I stuck it in an on_cleanup here so that it won't be cleaned up until the element is removed.

[Sett17]

This works perfectly! I also tried to somehow do it with node_ref, but couldn't figure it out.

Appreciate the help, and the explanation!