Fix mounted event after initial hydration (#3480)

* trigger queued mounted events immediately after hydrating

* add a playwright test to prevent regressions

Cargo.lock

@@ -4026,6 +4026,15 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "dioxus-playwright-fullstack-mounted-test"
+version = "0.1.0"
+dependencies = [
+ "dioxus",
+ "serde",
+ "tokio",
+]
+
 [[package]]
 name = "dioxus-playwright-fullstack-test"
 version = "0.1.0"

Cargo.toml

@@ -97,6 +97,7 @@ members = [
     "packages/playwright-tests/liveview",
     "packages/playwright-tests/web",
     "packages/playwright-tests/fullstack",
+    "packages/playwright-tests/fullstack-mounted",
     "packages/playwright-tests/suspense-carousel",
     "packages/playwright-tests/nested-suspense",
 ]

packages/playwright-tests/fullstack-mounted.spec.js

@@ -0,0 +1,10 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+test("hydration", async ({ page }) => {
+  await page.goto("http://localhost:7777");
+
+  // Expect the page to contain the pending text.
+  const main = page.locator("#main");
+  await expect(main).toContainText("The mounted event was triggered.");
+});

packages/playwright-tests/fullstack-mounted/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "dioxus-playwright-fullstack-mounted-test"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { workspace = true, features = ["fullstack"] }
+serde = "1.0.159"
+tokio = { workspace = true, features = ["full"], optional = true }
+
+[features]
+default = []
+server = ["dioxus/server", "dep:tokio"]
+web = ["dioxus/web"]

packages/playwright-tests/fullstack-mounted/src/main.rs

@@ -0,0 +1,23 @@
+// Regression test for https://github.com/DioxusLabs/dioxus/pull/3480
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let mut mounted = use_signal(|| false);
+
+    rsx! {
+        div {
+            onmounted: move |_| {
+                mounted.set(true);
+            },
+            if mounted() {
+                "The mounted event was triggered."
+            }
+        }
+    }
+}

packages/playwright-tests/playwright.config.js

@@ -102,6 +102,15 @@ module.exports = defineConfig({
       reuseExistingServer: !process.env.CI,
       stdout: "pipe",
     },
+    {
+      cwd: path.join(process.cwd(), "fullstack-mounted"),
+      command:
+        'cargo run --package dioxus-cli --release -- serve --force-sequential --platform web --addr "127.0.0.1" --port 7777',
+      port: 7777,
+      timeout: 50 * 60 * 1000,
+      reuseExistingServer: !process.env.CI,
+      stdout: "pipe",
+    },
     {
       cwd: path.join(process.cwd(), "suspense-carousel"),
       command:

packages/web/src/lib.rs

@@ -125,6 +125,12 @@ pub async fn run(mut virtual_dom: VirtualDom, web_config: Config) -> ! {
 
             let rx = websys_dom.rehydrate(&virtual_dom).unwrap();
             hydration_receiver = Some(rx);
+
+            #[cfg(feature = "mounted")]
+            {
+                // Flush any mounted events that were queued up while hydrating
+                websys_dom.flush_queued_mounted_events();
+            }
         }
         #[cfg(not(feature = "hydrate"))]
         {

packages/web/src/mutations.rs

@@ -59,7 +59,7 @@ impl WebsysDom {
     }
 
     #[cfg(feature = "mounted")]
-    fn flush_queued_mounted_events(&mut self) {
+    pub(crate) fn flush_queued_mounted_events(&mut self) {
         for id in self.queued_mounted_events.drain(..) {
             let node = self.interpreter.base().get_node(id.0 as u32);
             if let Some(element) = node.dyn_ref::<web_sys::Element>() {