Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mounted event is not triggered in fullstack renderer #1763

Closed
1 of 3 tasks
hampuslidin opened this issue Dec 30, 2023 · 0 comments · Fixed by #1764
Closed
1 of 3 tasks

mounted event is not triggered in fullstack renderer #1763

hampuslidin opened this issue Dec 30, 2023 · 0 comments · Fixed by #1764

Comments

@hampuslidin
Copy link
Contributor

Problem

I am trying to listen to the mounted event in a component to get it's size after it has been rendered. The problem is that I can't get it to work in the fullstack renderer (dioxus-fullstack). It does work in the web renderer (dioxus-web) however.

Steps To Reproduce

A small example of how I am using it:

use dioxus::html::geometry::euclid::Rect;
use dioxus_fullstack::prelude::*;

fn main() {
    dioxus_logger::init(log::LevelFilter::Debug).expect("failed to initialize logger");
    
    /* Works woth dioxus-web. */
    dioxus_web::launch(App);

    /* Doesn't work with dioxus-fullstack. */
    // LaunchBuilder::new(App).launch();
}

pub fn App(cx: Scope) -> Element {
    let size = use_state(cx, Rect::zero);

    log::debug!("App");

    render! {
        div {
            onmounted: |event|
            {
                log::debug!("Mounted");
                to_owned![size];
                async move {
                    if let Ok(rect) = event.inner().get_client_rect().await {
                        size.set(rect);
                    }
                }
            },
            "{size:?}"
        }
    }
}

The problem is also reproducible in the following main() setup:

fn main() {
    dioxus_logger::init(log::LevelFilter::Debug).expect("failed to initialize logger");

    #[cfg(feature = "web")]
    dioxus_web::launch_with_props(
        App,
        get_root_props_from_document().unwrap_or_default(),
        dioxus_web::Config::new().hydrate(true),
    );

    #[cfg(feature = "ssr")]
    {
        tokio::runtime::Runtime::new()
            .unwrap()
            .block_on(async move {
                let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 8080));
                axum::Server::bind(&addr)
                    .serve(
                        axum::Router::new()
                            .serve_dioxus_application("", ServeConfigBuilder::new(App, ()))
                            .into_make_service(),
                    )
                    .await
                    .unwrap();
            });
    }
}

Expected behavior

Using the web renderer will yield the output "App\nMounted\nApp" with the inner HTML "Rect(860.0x18.0 at (0.0, 0.0))". Using the fullstack renderer will yield the output "App" with the inner HTML "Rect(0.0x0.0 at (0.0, 0.0))". Expected behavior is that both methods should have the same output.

Environment:

  • Dioxus version: 0.4.3
  • Rust version: 1.74.1
  • OS info: macOS Monteray
  • App platform: fullstack

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant