Can I use externally created HtmlElement in leptos?

[liukaizheng]

    use winit::event_loop;
    use winit::platform::web::WindowExtWebSys;

    let event_loop = event_loop::EventLoop::new()?;
    let window = winit::window::Window::new(&event_loop)?;
    let mut canvas = window.canvas().expect("window should have a canvas by now");
   
    ...

   view! {
        <canvas node_ref = canvas />
   }

Can I use this canvas in leptos?

[gbj]

Sure. Probably the easiest way to do this is on a NodeRef containing whatever the parent element should be:

use leptos::*;

#[component]
pub fn App() -> impl IntoView {
    // here, I just create a canvas
    // but this can be the canvas you get from winit
    let some_canvas = document().create_element("canvas").unwrap();

    let parent = NodeRef::<html::Div>::new();
    create_effect(move |_| {
        if let Some(parent) = parent.get() {
            parent.append_child(&some_canvas);
        }
    });

    view! {
        <div node_ref=parent/>
    }
}

[liukaizheng]

Thank you very much!

[wrm65]

@gbj
My Xmas present to myself is to learn Rust + leptos

As a newbie, I have a similar requirement and have a some questions regarding your answer.

1. I gather create_effect is being used here to detect when the parent node is created on the DOM and then append the some_canvas element.

Is this method better than using a window event listener?

2. If the create_effect is only needed for single use,

how can we dispose (release memory) of the effect after use?
Would it be useful to have an optional flag or function create_effect_for_single_use which would automatically dispose itself?

3. I have a stored parent NodeRef which I would like to conditionally add (and remove) different views (like a wizard) to the parent node. Therefore, I need to use the mount_to function. IMHO, a bit surprise we can only use a HtmlElement, as it would be intuitive to (also) directly use a NodeRef.

What is the elegant (and simple) way to cast a NodeRef to a HtmlElement?

[gbj]

@wrm65 It's really difficult to read your post as currently formatted but I think I can give some answers.

1. create_effect is used to detect when the NodeRef has been filled with the DOM node. window_event_listener is irrelevant to this, because there is no event that will fire on the window when the element has been created.
2. I think you are overthinking/prematurely optimizing here. Yes, this would be possible, but I can't think of a situation in which it would really be necessary.
3. I do not think trying to set up this kind of imperative control flow manually is a good idea. mount_to is intended to mount your application itself, which then uses the normal patterns of control flow provided by the library. The way to show different views as some value changes is to do it declaratively:

<div class="wizard">
{move || match some_value.get() {
  Wizard::StepOne => /* some view */,
  Wizard::StepTwo => /* some other view */
}}
</div>

If you want additional help with this please open a separate discussion with some example code.

[wrm65]

Thanks for your response.

Apologies that the format of my post presented some difficulties.

1. You are of course correct that window_event_listener has no event that will fire on the window when the element has been created. Frameworks tend to provide custom events to detect this, such as painted, rendered etc.

2. The above custom events tend to be used once and after the event has fired, the event is automatically destroyed, thus ensuring the memory resource is released - more so...not relying on the developer! This was the nature of my suggestion to have a function create_effect_for_single_use for the initial example code, as it appears that was the intended use of the create_effect - to attach the canvas element after the NodeRef element (in this case the parent node) was created on the DOM.
   While the example was very simple, my overthinking was how would I release the memory after the create_effect had served its purpose.

3. Thanks for your declaratively suggestion. As I am new to this paradigm, I have been researching and watching videos on this. Watch some of your videos - excellent training reference for me to use.

I will open a separate discussion regarding adding a timestamp to your console log macro.