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>);
     }