Merge branch 'master' into add-file-data-drag-event

packages/interpreter/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "dioxus-interpreter-js"
-version = "0.3.3"
+version = { workspace = true }
 edition = "2018"
 authors = ["Jonathan Kelley"]
 description = "JS Intepreter for Dioxus - a concurrent renderer-agnostic Virtual DOM for interactive user experiences"
@@ -15,7 +15,7 @@ wasm-bindgen = { workspace = true, optional = true }
 js-sys = { version = "0.3.56", optional = true }
 web-sys = { version = "0.3.56", optional = true, features = ["Element", "Node"] }
 sledgehammer_bindgen = { version = "0.2.1", optional = true }
-sledgehammer_utils = { version = "0.1.1", optional = true }
+sledgehammer_utils = { version = "0.2", optional = true }
 serde = { version = "1.0", features = ["derive"], optional = true }
 
 [features]

packages/interpreter/README.md

@@ -1,6 +1,5 @@
 # `dioxus-interpreter-js`
 
-
 [![Crates.io][crates-badge]][crates-url]
 [![MIT licensed][mit-badge]][mit-url]
 [![Build Status][actions-badge]][actions-url]
@@ -8,35 +7,31 @@
 
 [crates-badge]: https://img.shields.io/crates/v/dioxus-interpreter-js.svg
 [crates-url]: https://crates.io/crates/dioxus-interpreter-js
-
 [mit-badge]: https://img.shields.io/badge/license-MIT-blue.svg
 [mit-url]: https://github.com/dioxuslabs/dioxus/blob/master/LICENSE
-
 [actions-badge]: https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg
 [actions-url]: https://github.com/dioxuslabs/dioxus/actions?query=workflow%3ACI+branch%3Amaster
-
 [discord-badge]: https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square
 [discord-url]: https://discord.gg/XgGxMSkvUM
 
 [Website](https://dioxuslabs.com) |
-[Guides](https://dioxuslabs.com/docs/0.3/guide/en/) |
+[Guides](https://dioxuslabs.com/learn/0.4/) |
 [API Docs](https://docs.rs/dioxus-interpreter-js/latest/dioxus_interpreter_js) |
 [Chat](https://discord.gg/XgGxMSkvUM)
 
-
 ## Overview
 
 `dioxus-interpreter-js` provides the high-performance JavaScript glue that interprets the stream of edits produced by the Dioxus VirtualDom and converts them into mutations on the actual web DOM.
 
 This crate features bindings for the web and sledgehammer for increased performance.
 
-
 ## Contributing
 
 - Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).
 - Join the discord and ask questions!
 
 ## License
+
 This project is licensed under the [MIT license].
 
 [mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT

packages/interpreter/src/interpreter.js

@@ -159,22 +159,29 @@ class Interpreter {
     }
   }
   RemoveAttribute(root, field, ns) {
-    const name = field;
     const node = this.nodes[root];
-    if (ns == "style") {
+    if (!ns) {
+      switch (field) {
+        case "value":
+          node.value = "";
+          break;
+        case "checked":
+          node.checked = false;
+          break;
+        case "selected":
+          node.selected = false;
+          break;
+        case "dangerous_inner_html":
+          node.innerHTML = "";
+          break;
+        default:
+          node.removeAttribute(field);
+          break;
+      }
+    } else if (ns == "style") {
       node.style.removeProperty(name);
-    } else if (ns !== null || ns !== undefined) {
-      node.removeAttributeNS(ns, name);
-    } else if (name === "value") {
-      node.value = "";
-    } else if (name === "checked") {
-      node.checked = false;
-    } else if (name === "selected") {
-      node.selected = false;
-    } else if (name === "dangerous_inner_html") {
-      node.innerHTML = "";
     } else {
-      node.removeAttribute(name);
+      node.removeAttributeNS(ns, field);
     }
   }
 
@@ -383,7 +390,11 @@ class Interpreter {
 async function handler(event, name, bubbles, config) {
   let target = event.target;
   if (target != null) {
-    let preventDefaultRequests = target.getAttribute(`dioxus-prevent-default`);
+    let preventDefaultRequests = null;
+    // Some events can be triggered on text nodes, which don't have attributes
+    if (target instanceof Element) {
+      preventDefaultRequests = target.getAttribute(`dioxus-prevent-default`);
+    }
 
     if (event.type === "click") {
       // todo call prevent default if it's the right type of event
@@ -439,15 +450,24 @@ async function handler(event, name, bubbles, config) {
       target.tagName === "FORM" &&
       (event.type === "submit" || event.type === "input")
     ) {
-      if (
-        target.tagName === "FORM" &&
-        (event.type === "submit" || event.type === "input")
-      ) {
-        const formData = new FormData(target);
+      const formData = new FormData(target);
 
-        for (let name of formData.keys()) {
-          let value = formData.getAll(name);
-          contents.values[name] = value;
+      for (let name of formData.keys()) {
+        let value = formData.getAll(name);
+        contents.values[name] = value;
+      }
+    }
+
+    if (
+      target.tagName === "SELECT" &&
+      event.type === "input"
+    ) {
+      const selectData = target.options;
+      contents.values["options"] = [];
+      for (let i = 0; i < selectData.length; i++) {
+        let option = selectData[i];
+        if (option.selected) {
+          contents.values["options"].push(option.value.toString());
         }
       }
     }
@@ -467,7 +487,10 @@ async function handler(event, name, bubbles, config) {
 }
 
 function find_real_id(target) {
-  let realId = target.getAttribute(`data-dioxus-id`);
+  let realId = null;
+  if (target instanceof Element) {
+    realId = target.getAttribute(`data-dioxus-id`);
+  }
   // walk the tree to find the real element
   while (realId == null) {
     // we've reached the root we don't want to send an event
@@ -476,7 +499,9 @@ function find_real_id(target) {
     }
 
     target = target.parentElement;
-    realId = target.getAttribute(`data-dioxus-id`);
+    if (target instanceof Element) {
+      realId = target.getAttribute(`data-dioxus-id`);
+    }
   }
   return realId;
 }

packages/interpreter/src/sledgehammer_bindings.rs

@@ -230,23 +230,32 @@ mod js {
         "{node = nodes[$id$]; SetAttributeInner(node, $field$, $value$, $ns$);}"
     }
     fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) {
-        r#"{name = $field$;
-        node = nodes[$id$];
-        if (ns == "style") {
-            node.style.removeProperty(name);
-        } else if (ns !== null && ns !== undefined && ns !== "") {
-            node.removeAttributeNS(ns, name);
-        } else if (name === "value") {
-            node.value = "";
-        } else if (name === "checked") {
-            node.checked = false;
-        } else if (name === "selected") {
-            node.selected = false;
-        } else if (name === "dangerous_inner_html") {
-            node.innerHTML = "";
-        } else {
-            node.removeAttribute(name);
-        }}"#
+        r#"{
+            node = nodes[$id$];
+            if (!ns) {
+                switch (field) {
+                    case "value":
+                        node.value = "";
+                        break;
+                    case "checked":
+                        node.checked = false;
+                        break;
+                    case "selected":
+                        node.selected = false;
+                        break;
+                    case "dangerous_inner_html":
+                        node.innerHTML = "";
+                        break;
+                    default:
+                        node.removeAttribute(field);
+                        break;
+                }
+            } else if (ns == "style") {
+                node.style.removeProperty(name);
+            } else {
+                node.removeAttributeNS(ns, field);
+            }
+        }"#
     }
     fn assign_id(ptr: u32, len: u8, id: u32) {
         "{nodes[$id$] = LoadChild($ptr$, $len$);}"