How to "dismount" after "leptos::mount_to" #1306

jsprog · 2023-07-07T22:52:12Z

jsprog
Jul 7, 2023

I'm mounting a view inside content not controlled by leptos, but I can't find a way to dismount that content when needed.

[package]
name = "leptos-mount"
version = "0.1.0"
edition = "2021"

[dependencies]
leptos = { version = "0.4.2", features = ["csr"] }
wasm-bindgen = "0.2.87"
web-sys = { version = "0.3.64", features = ["HtmlElement"]}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leptos-Mount</title>
</head>
<body>
    <div id="target" style="border: dashed 1px blue; margin: 10px;">
        <b>mount-target</b>
    </div>
</body>
</html>

use leptos::*;
use wasm_bindgen::JsCast;
use web_sys::HtmlElement;

fn main() {
    mount_to_body(|cx| view! {cx, <App/> } );
}

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    let (count, set_count) = create_signal(cx, 0);

    let increment_count = move |_| { set_count.update(|count| *count += 1); };

    let remove_target = move |_| {
        // of course, removing the target node won't drop the live mounted view instance

        // let target_element = window().document().unwrap().query_selector("#target")
        //     .unwrap()
        //     .unwrap()
        //     ;
        // target_element.remove();
    };

    // this time, that target element is from hard-coded content in index.html
    let target_element = window().document().unwrap().query_selector("#target")
        .unwrap() // The query is fixed and valid
        .unwrap() // I'm really sure that the target exists
        .unchecked_into::<HtmlElement>(); // downcast from Element to HtmlElement

    // mount in #target, but no access to a handle!
    leptos::mount_to(target_element, move |cx| {
         view! {cx,
            <div style="border: dashed 1px red; margin: 10px;">
                <b>"mounted in #target"</b>

                // this custom component will stop logging changes in count after this view get dismounted
                <CustomComponent count=count />
            </div>
        }
    });

    view! {cx,
        <button on:click=increment_count>Next Count</button>
        <button on:click=remove_target>Remove Target</button>
    }
}

#[component]
pub fn CustomComponent(
    cx: Scope,
    count: ReadSignal<i32>,
) -> impl IntoView {
    create_effect(cx, move |_| {
        log!("count: {}", count.get()); // the custom component will stop logging changes in count after it get dismounted
    });

    view! {cx,
        <div style="border: dashed 1px black; margin: 10px;">
            <b>custom component</b>
            <div>count: {move || count.get()}</div>
        </div>
    }
}

Answered by gbj

Jul 8, 2023

Fair enough. I still don't understand what "kill a view" here means, I'm afraid. Sorry for the miscommunication here--it definitely seems like that's a clear question to you and not to me.

One final word, if it's helpful in your life exploration: mount_to just gives you a Scope in the reactive system and expects you to return a View. View is just an enum that wraps a couple different types of, basically, smart pointers to DOM nodes.

I can imagine "kill" meaning

remove from the DOM, and/or
stop the reactive system

These would be achieved by

Element::remove()
Scope::dispose()

So if you

mount_to(|cx| {
  let div = view! { cx,
    <div></div>
  };
  // store cx and div somewhere 
  div
});

…

View full answer

gbj · 2023-07-08T11:20:46Z

gbj
Jul 8, 2023
Maintainer

Here's what I'd do!

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    // determines whether the component is in the DOM or not
    let (visible, set_visible) = create_signal(cx, true);

    // ...
    
    // remove_target just toggles that signal
    let remove_target = move |_| {
        set_visible.set(false);
    };

    // ...
 
    // mount in #target, but no access to a handle!
    leptos::mount_to(target_element, move |cx| {
        view! {cx,
            <div
                node_ref=unmount_handle
                style="border: dashed 1px red; margin: 10px;"
            >
                <b>"mounted in #target"</b>

                // wrap it in <Show/>
                <Show when=move || visible.get()
                    fallback=|_| ()
                >
                    // this custom component will stop logging changes in count after this view get dismounted
                    <CustomComponent count=count />
                </Show>
            </div>
        }
    });
    
    // ...

0 replies

jsprog · 2023-07-08T15:44:48Z

jsprog
Jul 8, 2023
Author

Thank you very much, your answer is already covering fixed targets as was the case with the sample I provided, Unfortunately, It falls short for non-fixed targets as was the case when trying to render live leptos views in dom targets created by leaflet.

I'm mounting live leptos views in content generated by leaflet markers (DivIcon { className: 'unique-class-name', iconSize: [1, 1], iconAnchor: [0, 0]})
leaflet is free for adding, and removing dom nodes for markers as needed by scrolling and some other libraries (e.g: clustering). The target nodes are not fixed.
per leaflet maker, I'm registering add event handler for mounting a live leptos view, and trying to dismount it by registering a handler for remove event.
when leaftet shows the same marker again, it creates a new target dom node.
Of course, I could solve the same problem above with other frameworks like qooxdoo, meteor's blaze, vue and even svelte
solidjs provides protal https://www.solidjs.com/docs/latest#portal

svelte required a portal and the solution was like the following, not sure if I need to create a custom portal component (if it really works)?:

<script>
    // some content...

    marker.addEventListener('add', () => {
        marker_attached = true
    })
    marker.addEventListener('remove', () => {
        marker_attached = false
    })
</script>


{#if marker_attached}
    <div use:portal={`.custom-marker-type.${unique-marker-class}`} hidden>
       <svg>
          <!-- custom live content -->
       </svg>
    </div>
{/if}

Edit:
I tried creating a custom Portal component, and wrapped it in <Show when=move || visible.get()... when rendering. unfortunately, the mounted content won't go after portal's cleanup.

Questions:

can't we dismount mounted content?
can't we have portals for leptos?

1 reply

gbj Jul 8, 2023
Maintainer

Okay, so what would've been my other suggestion may be more useful to you, then.

I can't totally follow the situation here, but it's fairly simple to remove a mounted DOM element and then append it as a child of another DOM element.

let unmount_handle = create_node_ref::<html::Div>(cx);

let remove_target = move |_| {
    unmount_handle.get().unwrap().remove();
}

// ...

view! {cx,
    <div
        node_ref=unmount_handle
        style="border: dashed 1px red; margin: 10px;"
    >
    // ... etc.

If you want to then append it to some other DOM node, just do some_other_node.append_child(&unmount_handle.get().unwrap())

Maybe I'm misunderstanding the situation. Is this all you're talking about? Unmounting and remounting an element in the DOM?

jsprog · 2023-07-08T17:23:56Z

jsprog
Jul 8, 2023
Author

I can't totally follow the situation here, but it's fairly simple to remove a mounted DOM element and then append it as a child of another DOM element.

May this will help with the creation of a custom portal component (I'll try later).

Is this all you're talking about? Unmounting and remounting an element in the DOM?

No, It's quite different, and I'm trying to Teleport live(not dead) leptos views to DOM targets controlled by leaflet.
Leaflet is free to add/remove DOM nodes as needed, and that's why I'm registering listeners for add and remove marker's events. the svelte example is only a reference for clarity.
- when the add event get emitted, I mount a view at a DOM target created by leaflet (leaflet DivIcon with unique class name).
- when the remove event get emitted, I need to kill the mounted view (no leftovers).

Question: How to kill a view mounted with leptos::mount_to?

1 reply

gbj Jul 8, 2023
Maintainer

I guess I don't understand the terminology you're using at all. What does "live" view mean? What does "dead" view mean? What does it mean to "kill" one? What would "leftovers" be? Does there need to be any interaction between these separate "views" or is each one completely different?

Leptos just works with DOM elements and a reactive system to update them. I'm not able to tell the difference between what you're describing and mounting or removing an element created with Leptos to/from the DOM in response to the add/remove events from Leaflet.

Maybe if you share an example that's closer to what you're actually trying to do I could help figure it out. But it seems like it's neither the example you gave earlier, nor the example I gave of mounting/unjointing elements, so I'm kind of lost.

jsprog · 2023-07-08T18:47:19Z

jsprog
Jul 8, 2023
Author

@gbj, I really appreciate your non trivial efforts after seeing many github projects not providing the discussions tab at all. I suppose that nearly all my questions are clear enough (but not claiming all of them are simplified enough). unfortunately, I'm not receiving answers to some clear questions as is the case with (e.g: How to kill a view mounted with leptos::mount_to?).

What does "live view" view mean?

I should've said "reactive view" instead.

Let's no drag this discussion any longer, and better to discuss different matters in more specialized topics whenever needed. I'll try to build a custom portal component based on some of your suggestions in this discussion and try to report later about success if any.

Conclusion:

Leptos doesn't support (doesn't expose) killing mounted reactive views, I'm not saying it's a shortcoming, nor I'm having experience with solidjs.
Creating a custom Portal component that moves a DOM node (node_ref) to a remote target is much better for keeping context (provide_context) to children components and likely to be lighter. It was achieved like this with svelte-portal
I hope that leptos will introduce native support for portals.

Thank you very much.

1 reply

gbj Jul 8, 2023
Maintainer

Fair enough. I still don't understand what "kill a view" here means, I'm afraid. Sorry for the miscommunication here--it definitely seems like that's a clear question to you and not to me.

One final word, if it's helpful in your life exploration: mount_to just gives you a Scope in the reactive system and expects you to return a View. View is just an enum that wraps a couple different types of, basically, smart pointers to DOM nodes.

I can imagine "kill" meaning

remove from the DOM, and/or
stop the reactive system

These would be achieved by

Element::remove()
Scope::dispose()

So if you

mount_to(|cx| {
  let div = view! { cx,
    <div></div>
  };
  // store cx and div somewhere 
  div
});

You can later call cx.dispose() and div.remove().

I can't think of anything else that killing the view could mean. This is also what's done by the <Show/> example (which disposes the child scope when when turns false) and the node_ref example.

Fine to end the discussion here as you said, just wanted to say the above for the sake of clarity.

Answer selected by jsprog

jsprog · 2023-07-08T19:58:52Z

jsprog
Jul 8, 2023
Author

I still don't understand what "kill a view" here means,

I suppose that the word "kill" is quite popular for getting rid of everything related. to kill a gui process in linux, you'll kill the process, children processes, and nothing will be left on screen. By killing a leptos view, you'll remove content from dom, and dispose of reactive context as stated by your last post.

Thank you very much, your last post is providing matching answers to my questions.

Best Regards

0 replies

mrchantey · 2023-07-29T04:33:59Z

mrchantey
Jul 29, 2023

For those interested I've found the clear body on drop pattern useful, particularly for running tests:

use leptos::*;

pub fn mount_with_unmount<F, N>(f: F) -> Mount
where
F: FnOnce(Scope) -> N + 'static,
N: IntoView,
{
	leptos::mount_to_body(f);
	Mount
}

pub struct Mount;

impl Drop for Mount {
	fn drop(&mut self) { clear_body() }
}

fn clear_body() {
	let window = window().unwrap();
	let body = window.document().unwrap().body().unwrap();
	while let Some(child) = body.first_child() {
		body.remove_child(&child).unwrap();
	}
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to "dismount" after "leptos::mount_to" #1306

{{title}}

Replies: 6 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to "dismount" after "leptos::mount_to" #1306

jsprog Jul 7, 2023

Replies: 6 comments · 3 replies

gbj Jul 8, 2023 Maintainer

jsprog Jul 8, 2023 Author

gbj Jul 8, 2023 Maintainer

jsprog Jul 8, 2023 Author

gbj Jul 8, 2023 Maintainer

jsprog Jul 8, 2023 Author

gbj Jul 8, 2023 Maintainer

jsprog Jul 8, 2023 Author

mrchantey Jul 29, 2023

jsprog
Jul 7, 2023

Replies: 6 comments 3 replies

gbj
Jul 8, 2023
Maintainer

jsprog
Jul 8, 2023
Author

gbj Jul 8, 2023
Maintainer

jsprog
Jul 8, 2023
Author

gbj Jul 8, 2023
Maintainer

jsprog
Jul 8, 2023
Author

gbj Jul 8, 2023
Maintainer

jsprog
Jul 8, 2023
Author

mrchantey
Jul 29, 2023