Merge branch 'master' into resilient-hydration

packages/interpreter/src/sledgehammer_bindings.rs

@@ -1,9 +1,17 @@
+#[cfg(feature = "web")]
 use js_sys::Function;
+#[cfg(feature = "web")]
 use sledgehammer_bindgen::bindgen;
+#[cfg(feature = "web")]
 use web_sys::Node;
 
-#[bindgen]
+#[cfg(feature = "web")]
+pub const SLEDGEHAMMER_JS: &str = GENERATED_JS;
+
+#[cfg(feature = "web")]
+#[bindgen(module)]
 mod js {
+    const JS_FILE: &str = "./packages/interpreter/src/common.js";
     const JS: &str = r#"
     class ListenerMap {
         constructor(root) {
@@ -57,51 +65,6 @@ mod js {
             delete this.local[id];
         }
     }
-    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 !== null && ns !== undefined && 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);
-                    }
-            }
-        }
-    }
     function LoadChild(ptr, len) {
         // iterate through each number and get that child
         node = stack[stack.length - 1];
@@ -164,7 +127,7 @@ mod js {
     export function get_node(id) {
         return nodes[id];
     }
-    export function initilize(root, handler) {
+    export function initialize(root, handler) {
         listeners.handler = handler;
         nodes = [root];
         stack = [root];
@@ -177,43 +140,11 @@ mod js {
             root.appendChild(els[k]);
         }
     }
-    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;
-      }
     "#;
 
     extern "C" {
         #[wasm_bindgen]
-        pub fn save_template(nodes: Vec<Node>, tmpl_id: u32);
+        pub fn save_template(nodes: Vec<Node>, tmpl_id: u16);
 
         #[wasm_bindgen]
         pub fn hydrate(ids: Vec<u32>);
@@ -222,7 +153,7 @@ mod js {
         pub fn get_node(id: u32) -> Node;
 
         #[wasm_bindgen]
-        pub fn initilize(root: Node, handler: &Function);
+        pub fn initialize(root: Node, handler: &Function);
     }
 
     fn mount_to_root() {
@@ -231,19 +162,19 @@ mod js {
     fn push_root(root: u32) {
         "{stack.push(nodes[$root$]);}"
     }
-    fn append_children(id: u32, many: u32) {
+    fn append_children(id: u32, many: u16) {
         "{AppendChildren($id$, $many$);}"
     }
     fn pop_root() {
         "{stack.pop();}"
     }
-    fn replace_with(id: u32, n: u32) {
+    fn replace_with(id: u32, n: u16) {
         "{root = nodes[$id$]; els = stack.splice(stack.length-$n$); if (root.listening) { listeners.removeAllNonBubbling(root); } root.replaceWith(...els);}"
     }
-    fn insert_after(id: u32, n: u32) {
+    fn insert_after(id: u32, n: u16) {
         "{nodes[$id$].after(...stack.splice(stack.length-$n$));}"
     }
-    fn insert_before(id: u32, n: u32) {
+    fn insert_before(id: u32, n: u16) {
         "{nodes[$id$].before(...stack.splice(stack.length-$n$));}"
     }
     fn remove(id: u32) {
@@ -268,7 +199,7 @@ mod js {
         "{nodes[$id$].textContent = $text$;}"
     }
     fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
-        "{node = nodes[$id$]; SetAttributeInner(node, $field$, $value$, $ns$);}"
+        "{node = nodes[$id$]; setAttributeInner(node, $field$, $value$, $ns$);}"
     }
     fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) {
         r#"{
@@ -314,10 +245,167 @@ mod js {
             nodes[$id$] = node;
         }"#
     }
-    fn replace_placeholder(ptr: u32, len: u8, n: u32) {
+    fn replace_placeholder(ptr: u32, len: u8, n: u16) {
         "{els = stack.splice(stack.length - $n$); node = LoadChild($ptr$, $len$); node.replaceWith(...els);}"
     }
-    fn load_template(tmpl_id: u32, index: u32, id: u32) {
+    fn load_template(tmpl_id: u16, index: u16, id: u32) {
         "{node = templates[$tmpl_id$][$index$].cloneNode(true); nodes[$id$] = node; stack.push(node);}"
     }
 }
+
+#[cfg(feature = "binary-protocol")]
+pub mod binary_protocol {
+    use sledgehammer_bindgen::bindgen;
+    pub const SLEDGEHAMMER_JS: &str = GENERATED_JS;
+
+    #[bindgen]
+    mod protocol_js {
+        const JS_FILE: &str = "./packages/interpreter/src/interpreter.js";
+        const JS_FILE: &str = "./packages/interpreter/src/common.js";
+
+        fn mount_to_root() {
+            "{AppendChildren(root, stack.length-1);}"
+        }
+        fn push_root(root: u32) {
+            "{stack.push(nodes[$root$]);}"
+        }
+        fn append_children(id: u32, many: u16) {
+            "{AppendChildren($id$, $many$);}"
+        }
+        fn append_children_to_top(many: u16) {
+            "{
+                root = stack[stack.length-many-1];
+                els = stack.splice(stack.length-many);
+                for (k = 0; k < many; k++) {
+                    root.appendChild(els[k]);
+                }
+            }"
+        }
+        fn pop_root() {
+            "{stack.pop();}"
+        }
+        fn replace_with(id: u32, n: u16) {
+            "{root = nodes[$id$]; els = stack.splice(stack.length-$n$); if (root.listening) { listeners.removeAllNonBubbling(root); } root.replaceWith(...els);}"
+        }
+        fn insert_after(id: u32, n: u16) {
+            "{nodes[$id$].after(...stack.splice(stack.length-$n$));}"
+        }
+        fn insert_before(id: u32, n: u16) {
+            "{nodes[$id$].before(...stack.splice(stack.length-$n$));}"
+        }
+        fn remove(id: u32) {
+            "{node = nodes[$id$]; if (node !== undefined) { if (node.listening) { listeners.removeAllNonBubbling(node); } node.remove(); }}"
+        }
+        fn create_raw_text(text: &str) {
+            "{stack.push(document.createTextNode($text$));}"
+        }
+        fn create_text_node(text: &str, id: u32) {
+            "{node = document.createTextNode($text$); nodes[$id$] = node; stack.push(node);}"
+        }
+        fn create_element(element: &'static str<u8, el>) {
+            "{stack.push(document.createElement($element$))}"
+        }
+        fn create_element_ns(element: &'static str<u8, el>, ns: &'static str<u8, namespace>) {
+            "{stack.push(document.createElementNS($ns$, $element$))}"
+        }
+        fn create_placeholder(id: u32) {
+            "{node = document.createElement('pre'); node.hidden = true; stack.push(node); nodes[$id$] = node;}"
+        }
+        fn add_placeholder() {
+            "{node = document.createElement('pre'); node.hidden = true; stack.push(node);}"
+        }
+        fn new_event_listener(event: &str<u8, evt>, id: u32, bubbles: u8) {
+            r#"
+            bubbles = bubbles == 1;
+            node = nodes[id];
+            if(node.listening){
+                node.listening += 1;
+            } else {
+                node.listening = 1;
+            }
+            node.setAttribute('data-dioxus-id', `\${id}`);
+            const event_name = $event$;
+    
+            // if this is a mounted listener, we send the event immediately
+            if (event_name === "mounted") {
+                window.ipc.postMessage(
+                    window.interpreter.serializeIpcMessage("user_event", {
+                        name: event_name,
+                        element: id,
+                        data: null,
+                        bubbles,
+                    })
+                );
+            } else {
+                listeners.create(event_name, node, bubbles, (event) => {
+                    handler(event, event_name, bubbles, config);
+                });
+            }"#
+        }
+        fn remove_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) {
+            "{node = nodes[$id$]; node.listening -= 1; node.removeAttribute('data-dioxus-id'); listeners.remove(node, $event_name$, $bubbles$);}"
+        }
+        fn set_text(id: u32, text: &str) {
+            "{nodes[$id$].textContent = $text$;}"
+        }
+        fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
+            "{node = nodes[$id$]; setAttributeInner(node, $field$, $value$, $ns$);}"
+        }
+        fn set_top_attribute(field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
+            "{setAttributeInner(stack[stack.length-1], $field$, $value$, $ns$);}"
+        }
+        fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) {
+            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(array: &[u8], id: u32) {
+            "{nodes[$id$] = LoadChild($array$);}"
+        }
+        fn hydrate_text(array: &[u8], value: &str, id: u32) {
+            r#"{
+                node = LoadChild($array$);
+                if (node.nodeType == Node.TEXT_NODE) {
+                    node.textContent = value;
+                } else {
+                    let text = document.createTextNode(value);
+                    node.replaceWith(text);
+                    node = text;
+                }
+                nodes[$id$] = node;
+            }"#
+        }
+        fn replace_placeholder(array: &[u8], n: u16) {
+            "{els = stack.splice(stack.length - $n$); node = LoadChild($array$); node.replaceWith(...els);}"
+        }
+        fn load_template(tmpl_id: u16, index: u16, id: u32) {
+            "{node = templates[$tmpl_id$][$index$].cloneNode(true); nodes[$id$] = node; stack.push(node);}"
+        }
+        fn add_templates(tmpl_id: u16, len: u16) {
+            "{templates[$tmpl_id$] = stack.splice(stack.length-$len$);}"
+        }
+    }
+}