fix: tweak the js bindings while we're at it

examples/todomvc.rs

@@ -120,15 +120,18 @@ pub fn todo_entry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
 
     rsx!(cx, li {
         class: "{completed} {editing}",
-        onclick: move |_| set_is_editing(true),
-        onfocusout: move |_| set_is_editing(false),
         div { class: "view",
             input { class: "toggle", r#type: "checkbox", id: "cbg-{todo.id}", checked: "{todo.checked}",
                 onchange: move |evt| {
                     cx.props.set_todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
                 }
             }
-            label { r#for: "cbg-{todo.id}", pointer_events: "none", "{todo.contents}" }
+            label {
+                r#for: "cbg-{todo.id}",
+                onclick: move |_| set_is_editing(true),
+                onfocusout: move |_| set_is_editing(false),
+                "{todo.contents}"
+            }
         }
         is_editing.then(|| rsx!{
             input {

packages/interpreter/src/interpreter.js

@@ -88,8 +88,7 @@ export class Interpreter {
       this.listeners[event_name] = 0;
       this.handlers[event_name] = handler;
       this.root.addEventListener(event_name, handler);
-        }
-        else {
+    } else {
       this.listeners[event_name]++;
     }
   }
@@ -112,11 +111,9 @@ export class Interpreter {
     if (ns == "style") {
       // @ts-ignore
       node.style[name] = value;
-        }
-        else if (ns != null || ns != undefined) {
+    } else if (ns != null || ns != undefined) {
       node.setAttributeNS(ns, name, value);
-        }
-        else {
+    } else {
       switch (name) {
         case "value":
           if (value != node.value) {
@@ -136,8 +133,7 @@ export class Interpreter {
           // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
           if (value == "false" && bool_attrs.hasOwnProperty(name)) {
             node.removeAttribute(name);
-                    }
-                    else {
+          } else {
             node.setAttribute(name, value);
           }
       }
@@ -204,9 +200,12 @@ export class Interpreter {
           let target = event.target;
           if (target != null) {
             let realId = target.getAttribute(`data-dioxus-id`);
-                        let shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
+            let shouldPreventDefault = target.getAttribute(
+              `dioxus-prevent-default`
+            );
+
             if (event.type == "click") {
-                            event.preventDefault();
+              // todo call prevent default if it's the right type of event
               if (shouldPreventDefault !== `onclick`) {
                 if (target.tagName == "A") {
                   const href = target.getAttribute("href");
@@ -221,13 +220,16 @@ export class Interpreter {
               target = target.parentElement;
               realId = target.getAttribute(`data-dioxus-id`);
             }
-                        shouldPreventDefault = target.getAttribute(`dioxus-prevent-default`);
+
+            shouldPreventDefault = target.getAttribute(
+              `dioxus-prevent-default`
+            );
             let contents = serialize_event(event);
             if (shouldPreventDefault === `on${event.type}`) {
-                            event.preventDefault();
+              //   event.preventDefault();
             }
             if (event.type == "submit") {
-                            event.preventDefault();
+              //   event.preventDefault();
             }
             if (realId == null) {
               return;
@@ -271,7 +273,18 @@ function serialize_event(event) {
     case "keydown":
     case "keypress":
     case "keyup": {
-            let { charCode, key, altKey, ctrlKey, metaKey, keyCode, shiftKey, location, repeat, which, } = event;
+      let {
+        charCode,
+        key,
+        altKey,
+        ctrlKey,
+        metaKey,
+        keyCode,
+        shiftKey,
+        location,
+        repeat,
+        which,
+      } = event;
       return {
         char_code: charCode,
         key: key,
@@ -295,8 +308,7 @@ function serialize_event(event) {
       let value;
       if (target.type === "checkbox" || target.type === "radio") {
         value = target.checked ? "true" : "false";
-            }
-            else {
+      } else {
         value = target.value ?? target.textContent;
       }
       return {
@@ -334,7 +346,20 @@ function serialize_event(event) {
     case "mouseout":
     case "mouseover":
     case "mouseup": {
-            const { altKey, button, buttons, clientX, clientY, ctrlKey, metaKey, pageX, pageY, screenX, screenY, shiftKey, } = event;
+      const {
+        altKey,
+        button,
+        buttons,
+        clientX,
+        clientY,
+        ctrlKey,
+        metaKey,
+        pageX,
+        pageY,
+        screenX,
+        screenY,
+        shiftKey,
+      } = event;
       return {
         alt_key: altKey,
         button: button,
@@ -360,7 +385,30 @@ function serialize_event(event) {
     case "pointerleave":
     case "pointerover":
     case "pointerout": {
-            const { altKey, button, buttons, clientX, clientY, ctrlKey, metaKey, pageX, pageY, screenX, screenY, shiftKey, pointerId, width, height, pressure, tangentialPressure, tiltX, tiltY, twist, pointerType, isPrimary, } = event;
+      const {
+        altKey,
+        button,
+        buttons,
+        clientX,
+        clientY,
+        ctrlKey,
+        metaKey,
+        pageX,
+        pageY,
+        screenX,
+        screenY,
+        shiftKey,
+        pointerId,
+        width,
+        height,
+        pressure,
+        tangentialPressure,
+        tiltX,
+        tiltY,
+        twist,
+        pointerType,
+        isPrimary,
+      } = event;
       return {
         alt_key: altKey,
         button: button,
@@ -393,7 +441,7 @@ function serialize_event(event) {
     case "touchend":
     case "touchmove":
     case "touchstart": {
-            const { altKey, ctrlKey, metaKey, shiftKey, } = event;
+      const { altKey, ctrlKey, metaKey, shiftKey } = event;
       return {
         // changed_touches: event.changedTouches,
         // target_touches: event.targetTouches,
@@ -408,7 +456,7 @@ function serialize_event(event) {
       return {};
     }
     case "wheel": {
-            const { deltaX, deltaY, deltaZ, deltaMode, } = event;
+      const { deltaX, deltaY, deltaZ, deltaMode } = event;
       return {
         delta_x: deltaX,
         delta_y: deltaY,
@@ -419,7 +467,7 @@ function serialize_event(event) {
     case "animationstart":
     case "animationend":
     case "animationiteration": {
-            const { animationName, elapsedTime, pseudoElement, } = event;
+      const { animationName, elapsedTime, pseudoElement } = event;
       return {
         animation_name: animationName,
         elapsed_time: elapsedTime,
@@ -427,7 +475,7 @@ function serialize_event(event) {
       };
     }
     case "transitionend": {
-            const { propertyName, elapsedTime, pseudoElement, } = event;
+      const { propertyName, elapsedTime, pseudoElement } = event;
       return {
         property_name: propertyName,
         elapsed_time: elapsedTime,