Assume the virtual dom is not rendering while not diffing components (#3406)

* Invert when the rendering flag is set

* Add a playwright test to make sure effects, and web-sys integration is working

* fix playwright test

packages/playwright-tests/web.spec.js

@@ -115,3 +115,12 @@ test("onmounted", async ({ page }) => {
   const mountedDiv = page.locator("div.onmounted-div");
   await expect(mountedDiv).toHaveText("onmounted was called 1 times");
 });
+
+test("web-sys closure", async ({ page }) => {
+  await page.goto("http://localhost:9999");
+  // wait until the div is mounted
+  const scrollDiv = page.locator("div#web-sys-closure-div");
+  await scrollDiv.waitFor({ state: "attached" });
+  await page.keyboard.press("Enter");
+  await expect(scrollDiv).toHaveText("the keydown event was triggered");
+});

packages/playwright-tests/web/Cargo.toml

@@ -11,3 +11,5 @@ dioxus = { workspace = true, features = ["web"]}
 serde_json = "1.0.96"
 tracing.workspace = true
 tracing-wasm = "0.2.1"
+wasm-bindgen.workspace = true
+web-sys = { workspace = true, features = ["Element", "Window"] }

packages/playwright-tests/web/src/main.rs

@@ -1,6 +1,7 @@
 // This test is used by playwright configured in the root of the repo
 
 use dioxus::prelude::*;
+use wasm_bindgen::prelude::*;
 
 fn app() -> Element {
     let mut num = use_signal(|| 0);
@@ -53,6 +54,7 @@ fn app() -> Element {
         div { class: "eval-result", "{eval_result}" }
         PreventDefault {}
         OnMounted {}
+        WebSysClosure {}
     }
 }
 
@@ -86,6 +88,49 @@ fn OnMounted() -> Element {
     }
 }
 
+// This component tests attaching an event listener to the document with a web-sys closure
+// and effect
+#[component]
+fn WebSysClosure() -> Element {
+    static TRIGGERED: GlobalSignal<bool> = GlobalSignal::new(|| false);
+    use_effect(|| {
+        let window = web_sys::window().expect("window not available");
+
+        // Assert the component contents have been mounted
+        window
+            .document()
+            .unwrap()
+            .get_element_by_id("web-sys-closure-div")
+            .expect("Effects should only be run after all contents have bene mounted to the dom");
+
+        // Make sure passing the runtime into the closure works
+        let callback = Callback::new(|_| {
+            assert!(!dioxus::dioxus_core::vdom_is_rendering());
+            *TRIGGERED.write() = true;
+        });
+        let closure: Closure<dyn Fn()> = Closure::new({
+            move || {
+                callback(());
+            }
+        });
+
+        window
+            .add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref())
+            .expect("Failed to add keydown event listener");
+
+        closure.forget();
+    });
+
+    rsx! {
+        div {
+            id: "web-sys-closure-div",
+            if TRIGGERED() {
+                "the keydown event was triggered"
+            }
+        }
+    }
+}
+
 fn main() {
     tracing_wasm::set_as_global_default_with_config(
         tracing_wasm::WASMLayerConfigBuilder::default()