Merge pull request #1986 from ealmloff/bump-sledgehammer-bindgen

Bump the sledgehammer bindgen version

packages/desktop/src/protocol.rs

@@ -43,18 +43,19 @@ fn handle_edits_code() -> String {
     }"#;
     let polling_request = format!(
         r#"// Poll for requests
+    window.interpreter = new JSChannel();
     window.interpreter.wait_for_request = (headless) => {{
       fetch(new Request("{EDITS_PATH}"))
           .then(response => {{
               response.arrayBuffer()
                   .then(bytes => {{
                       // In headless mode, the requestAnimationFrame callback is never called, so we need to run the bytes directly
                       if (headless) {{
-                        run_from_bytes(bytes);
+                        window.interpreter.run_from_bytes(bytes);
                       }}
                       else {{
                         requestAnimationFrame(() => {{
-                          run_from_bytes(bytes);
+                            window.interpreter.run_from_bytes(bytes);
                         }});
                       }}
                       window.interpreter.wait_for_request(headless);
@@ -74,7 +75,7 @@ fn handle_edits_code() -> String {
         interpreter.replace_range(import_start..import_end, "");
     }
 
-    format!("{interpreter}\nconst config = new InterpreterConfig(true);")
+    format!("{interpreter}\nconst intercept_link_redirects = true;")
 }
 
 static DEFAULT_INDEX: &str = include_str!("./index.html");

packages/interpreter/Cargo.toml

@@ -17,7 +17,7 @@ web-sys = { version = "0.3.56", optional = true, features = [
     "Element",
     "Node",
 ] }
-sledgehammer_bindgen = { version = "0.3.1", default-features = false, optional = true }
+sledgehammer_bindgen = { version = "0.4.0", default-features = false, optional = true }
 sledgehammer_utils = { version = "0.2", optional = true }
 serde = { version = "1.0", features = ["derive"], optional = true }
 

packages/interpreter/src/common.js

@@ -1,4 +1,4 @@
-export function setAttributeInner(node, field, value, ns) {
+this.setAttributeInner = function (node, field, value, ns) {
   const name = field;
   if (ns === "style") {
     // ????? why do we need to do this

packages/interpreter/src/common_exported.js

@@ -0,0 +1,79 @@
+export function setAttributeInner(node, field, value, ns) {
+  const name = field;
+  if (ns === "style") {
+    // ????? why do we need to do this
+    if (node.style === undefined) {
+      node.style = {};
+    }
+    node.style[name] = value;
+  } else if (!!ns) {
+    node.setAttributeNS(ns, name, value);
+  } else {
+    switch (name) {
+      case "value":
+        if (value !== node.value) {
+          node.value = value;
+        }
+        break;
+      case "initial_value":
+        node.defaultValue = value;
+        break;
+      case "checked":
+        node.checked = truthy(value);
+        break;
+      case "initial_checked":
+        node.defaultChecked = truthy(value);
+        break;
+      case "selected":
+        node.selected = truthy(value);
+        break;
+      case "initial_selected":
+        node.defaultSelected = truthy(value);
+        break;
+      case "dangerous_inner_html":
+        node.innerHTML = value;
+        break;
+      default:
+        // https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
+        if (!truthy(value) && bool_attrs.hasOwnProperty(name)) {
+          node.removeAttribute(name);
+        } else {
+          node.setAttribute(name, value);
+        }
+    }
+  }
+}
+
+const bool_attrs = {
+  allowfullscreen: true,
+  allowpaymentrequest: true,
+  async: true,
+  autofocus: true,
+  autoplay: true,
+  checked: true,
+  controls: true,
+  default: true,
+  defer: true,
+  disabled: true,
+  formnovalidate: true,
+  hidden: true,
+  ismap: true,
+  itemscope: true,
+  loop: true,
+  multiple: true,
+  muted: true,
+  nomodule: true,
+  novalidate: true,
+  open: true,
+  playsinline: true,
+  readonly: true,
+  required: true,
+  reversed: true,
+  selected: true,
+  truespeed: true,
+  webkitdirectory: true,
+};
+
+function truthy(val) {
+  return val === "true" || val === true;
+}

packages/interpreter/src/interpreter.js

@@ -1,12 +1,6 @@
-class InterpreterConfig {
-  constructor(intercept_link_redirects) {
-    this.intercept_link_redirects = intercept_link_redirects;
-  }
-}
-
 // this handler is only provided on the desktop and liveview implementations since this
 // method is not used by the web implementation
-async function handler(event, name, bubbles, config) {
+this.handler = async function (event, name, bubbles) {
   let target = event.target;
   if (target != null) {
     let preventDefaultRequests = null;
@@ -17,7 +11,7 @@ async function handler(event, name, bubbles, config) {
 
     if (event.type === "click") {
       // todo call prevent default if it's the right type of event
-      if (config.intercept_link_redirects) {
+      if (intercept_link_redirects) {
         let a_element = target.closest("a");
         if (a_element != null) {
           event.preventDefault();
@@ -35,7 +29,7 @@ async function handler(event, name, bubbles, config) {
             const href = a_element.getAttribute("href");
             if (href !== "" && href !== null && href !== undefined) {
               window.ipc.postMessage(
-                window.interpreter.serializeIpcMessage("browser_open", { href })
+                this.serializeIpcMessage("browser_open", { href })
               );
             }
           }
@@ -142,7 +136,7 @@ async function handler(event, name, bubbles, config) {
       return;
     }
     window.ipc.postMessage(
-      window.interpreter.serializeIpcMessage("user_event", {
+      this.serializeIpcMessage("user_event", {
         name: name,
         element: parseInt(realId),
         data: contents,
@@ -223,43 +217,42 @@ class ListenerMap {
     delete this.local[id];
   }
 }
-function LoadChild(array) {
+this.LoadChild = function (array) {
   // iterate through each number and get that child
-  node = stack[stack.length - 1];
+  let node = this.stack[this.stack.length - 1];
 
   for (let i = 0; i < array.length; i++) {
-    end = array[i];
-    for (node = node.firstChild; end > 0; end--) {
+    this.end = array[i];
+    for (node = node.firstChild; this.end > 0; this.end--) {
       node = node.nextSibling;
     }
   }
   return node;
 }
-const listeners = new ListenerMap();
-let nodes = [];
-let stack = [];
-let root;
-const templates = {};
-let node, els, end, k;
-
-function AppendChildren(id, many) {
-  root = nodes[id];
-  els = stack.splice(stack.length - many);
-  for (k = 0; k < many; k++) {
-    root.appendChild(els[k]);
+this.listeners = new ListenerMap();
+this.nodes = [];
+this.stack = [];
+this.root;
+this.templates = {};
+this.els = null;
+this.end = null;
+
+this.AppendChildren = function (id, many) {
+  this.root = this.nodes[id];
+  this.els = this.stack.splice(this.stack.length - many);
+  for (let k = 0; k < many; k++) {
+    this.root.appendChild(this.els[k]);
   }
 }
 
-window.interpreter = {}
-
-window.interpreter.initialize = function (root) {
-  nodes = [root];
-  stack = [root];
-  listeners.root = root;
+this.initialize = function (root) {
+  this.nodes = [root];
+  this.stack = [root];
+  this.listeners.root = root;
 }
 
-window.interpreter.getClientRect = function (id) {
-  const node = nodes[id];
+this.getClientRect = function (id) {
+  const node = this.nodes[id];
   if (!node) {
     return;
   }
@@ -271,8 +264,8 @@ window.interpreter.getClientRect = function (id) {
   };
 }
 
-window.interpreter.scrollTo = function (id, behavior) {
-  const node = nodes[id];
+this.scrollTo = function (id, behavior) {
+  const node = this.nodes[id];
   if (!node) {
     return false;
   }
@@ -283,8 +276,8 @@ window.interpreter.scrollTo = function (id, behavior) {
 }
 
 /// Set the focus on the element
-window.interpreter.setFocus = function (id, focus) {
-  const node = nodes[id];
+this.setFocus = function (id, focus) {
+  const node = this.nodes[id];
   if (!node) {
     return false;
   }
@@ -579,7 +572,7 @@ async function serialize_event(event) {
     }
   }
 }
-window.interpreter.serializeIpcMessage = function (method, params = {}) {
+this.serializeIpcMessage = function (method, params = {}) {
   return JSON.stringify({ method, params });
 }
 

packages/interpreter/src/lib.rs

@@ -20,7 +20,7 @@ pub use write_native_mutations::*;
 #[cfg(all(feature = "minimal_bindings", feature = "webonly"))]
 pub mod minimal_bindings {
     use wasm_bindgen::{prelude::wasm_bindgen, JsValue};
-    #[wasm_bindgen(module = "/src/common.js")]
+    #[wasm_bindgen(module = "/src/common_exported.js")]
     extern "C" {
         pub fn setAttributeInner(node: JsValue, name: &str, value: JsValue, ns: Option<&str>);
     }

packages/liveview/src/main.js

@@ -1,4 +1,4 @@
-const config = new InterpreterConfig(false);
+const intercept_link_redirects = false;
 
 function main() {
   let root = window.document.getElementById("main");
@@ -9,6 +9,7 @@ function main() {
 
 class IPC {
   constructor(root) {
+    window.interpreter = new JSChannel();
     window.interpreter.initialize(root);
     const ws = new WebSocket(WS_ADDR);
     ws.binaryType = "arraybuffer";
@@ -34,7 +35,7 @@ class IPC {
       // The first byte tells the shim if this is a binary of text frame
       if (binaryFrame) {
         // binary frame
-        run_from_bytes(messageData);
+        window.interpreter.run_from_bytes(messageData);
       }
       else {
         // text frame

packages/web/src/dom.rs

@@ -110,6 +110,7 @@ impl WebsysDom {
         }));
 
         dioxus_interpreter_js::initialize(
+            interpreter.js_channel(),
             root.clone().unchecked_into(),
             handler.as_ref().unchecked_ref(),
         );

packages/web/src/mutations.rs

@@ -62,7 +62,7 @@ impl WebsysDom {
         // Now that we've flushed the edits and the dom nodes exist, we can send the mounted events.
         {
             for id in self.queued_mounted_events.drain(..) {
-                let node = get_node(id.0 as u32);
+                let node = get_node(self.interpreter.js_channel(), id.0 as u32);
                 if let Some(element) = node.dyn_ref::<web_sys::Element>() {
                     let _ = self.event_channel.unbounded_send(UiEvent {
                         name: "mounted".to_string(),
@@ -91,7 +91,7 @@ impl WriteMutations for WebsysDom {
 
         self.templates
             .insert(template.name.to_owned(), self.max_template_id);
-        save_template(roots, self.max_template_id);
+        save_template(self.interpreter.js_channel(), roots, self.max_template_id);
         self.max_template_id += 1
     }
 

packages/web/src/rehydrate.rs

@@ -23,7 +23,7 @@ impl WebsysDom {
         // Recursively rehydrate the dom from the VirtualDom
         self.rehydrate_scope(root_scope, dom, &mut ids, &mut to_mount)?;
 
-        dioxus_interpreter_js::hydrate(ids);
+        dioxus_interpreter_js::hydrate(self.interpreter.js_channel(), ids);
 
         #[cfg(feature = "mounted")]
         for id in to_mount {
@@ -168,7 +168,11 @@ impl WriteMutations for OnlyWriteTemplates<'_> {
         self.0
             .templates
             .insert(template.name.to_owned(), self.0.max_template_id);
-        save_template(roots, self.0.max_template_id);
+        save_template(
+            self.0.interpreter.js_channel(),
+            roots,
+            self.0.max_template_id,
+        );
         self.0.max_template_id += 1
     }