Added optional cleanup support to onmounted

[rapporian]

Hi @ealmloff, This PR implements the closure strategy discussed. It adds an optional cleanup closure to onmounted handlers. When an element is removed from the DOM, any cleanup closure returned by its onmounted handler is automatically invoked.

Here is how it would be used:

div {
    onmounted: move |e| {
        let el = e.data();
        start_animation(el.clone());
        move || stop_animation(el)
    },
}

Changes

• onmounted handlers can now return a FnOnce() cleanup closure
• Cleanup runs before element removal (remove, replace_with)
• Existing handlers returning () or async {} continue to work
• Web renderer only (desktop/mobile not yet implemented)

Testing

• Added Playwright test that toggles an element and verifies cleanup is called

Documentation

• Documentation PR

[ealmloff]

Thanks for working on this! API looks a lot nicer, but I would like to avoid more thread locals and we may need deeper integration into core to track removals.

We would also need support for the webview renderer before this is merged. The code should be fairly similar once the web version is fully working

[ealmloff]

Instead of a thread local, can you add the cleanup callback to the mounted event? This variant would need to do something like event.data().set_on_cleanup(self)

[ealmloff]

I'm not sure this will catch all removals. If we generate mutations efficiently, only the parent should be replaced when diffing from:

div {
   button { onmounted }
}

To:

p { "node removed" }

The virtual dom knows which nodes are recycled, but it doesn't currently show up in mutations. We could add a new FreeId mutation which just drops the reference from the js heap instead of relying on the id being re-used later. That would also allow us to garbage collect dom nodes earlier in general

[rapporian]

@ealmloff thanks for the feedback and guidance on this. Please see this new checkin where I've tried to achieve what you requested but honestly, it was a step beyond my current depth of understanding of the Dioxus framework. That said, I needed "a little → a lot" of claude-code help.

I came at it from different angles to test it and ensure it was backward compatible "for the app developer", but it needs eyes on it. Thanks for being kind if it's terrible.

Note: The #[non_exhaustive] attribute on Mutation means custom renderers with exhaustive matches will need to add a wildcard. The free_id() trait method has a default no-op, so no implementation is required unless cleanup support is desired. Not sure how you would ideally handle this.

It solves the problem for animation engine development I'm tinkering with.