use this. on the unified bindings

packages/interpreter/src/unified_bindings.rs

@@ -17,100 +17,99 @@ mod js {
     const JS: &str = r#""#;
 
     fn mount_to_root() {
-        "{AppendChildren(root, stack.length-1);}"
+        "{this.AppendChildren(this.root, this.stack.length-1);}"
     }
     fn push_root(root: u32) {
-        "{stack.push(nodes[$root$]);}"
+        "{this.stack.push(this.nodes[$root$]);}"
     }
     fn append_children(id: u32, many: u16) {
-        "{AppendChildren($id$, $many$);}"
+        "{this.AppendChildren($id$, $many$);}"
     }
-
     fn pop_root() {
-        "{stack.pop();}"
+        "{this.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);}"
+        "{const root = this.nodes[$id$]; this.els = this.stack.splice(this.stack.length-$n$); if (root.listening) { this.listeners.removeAllNonBubbling(root); } root.replaceWith(...this.els);}"
     }
     fn insert_after(id: u32, n: u16) {
-        "{nodes[$id$].after(...stack.splice(stack.length-$n$));}"
+        "{this.nodes[$id$].after(...this.stack.splice(this.stack.length-$n$));}"
     }
     fn insert_before(id: u32, n: u16) {
-        "{nodes[$id$].before(...stack.splice(stack.length-$n$));}"
+        "{this.nodes[$id$].before(...this.stack.splice(this.stack.length-$n$));}"
     }
     fn remove(id: u32) {
-        "{node = nodes[$id$]; if (node !== undefined) { if (node.listening) { listeners.removeAllNonBubbling(node); } node.remove(); }}"
+        "{let node = this.nodes[$id$]; if (node !== undefined) { if (node.listening) { this.listeners.removeAllNonBubbling(node); } node.remove(); }}"
     }
     fn create_raw_text(text: &str) {
-        "{stack.push(document.createTextNode($text$));}"
+        "{this.stack.push(document.createTextNode($text$));}"
     }
     fn create_text_node(text: &str, id: u32) {
-        "{node = document.createTextNode($text$); nodes[$id$] = node; stack.push(node);}"
+        "{let node = document.createTextNode($text$); this.nodes[$id$] = node; this.stack.push(node);}"
     }
     fn create_placeholder(id: u32) {
-        "{node = document.createElement('pre'); node.hidden = true; stack.push(node); nodes[$id$] = node;}"
+        "{let node = document.createElement('pre'); node.hidden = true; this.stack.push(node); this.nodes[$id$] = node;}"
     }
     fn new_event_listener(event_name: &str<u8, evt>, id: u32, bubbles: u8) {
-        r#"node = nodes[id]; if(node.listening){node.listening += 1;}else{node.listening = 1;} node.setAttribute('data-dioxus-id', `\${id}`); listeners.create($event_name$, node, $bubbles$);"#
+        r#"let node = this.nodes[id]; if(node.listening){node.listening += 1;}else{node.listening = 1;} node.setAttribute('data-dioxus-id', `\${id}`); this.listeners.create($event_name$, node, $bubbles$);"#
     }
     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$);}"
+        "{let node = this.nodes[$id$]; node.listening -= 1; node.removeAttribute('data-dioxus-id'); this.listeners.remove(node, $event_name$, $bubbles$);}"
     }
     fn set_text(id: u32, text: &str) {
-        "{nodes[$id$].textContent = $text$;}"
+        "{this.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$);}"
+        "{let node = this.nodes[$id$]; this.setAttributeInner(node, $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);
+            let node = this.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$);}"
+        "{this.nodes[$id$] = this.LoadChild($ptr$, $len$);}"
     }
     fn hydrate_text(ptr: u32, len: u8, value: &str, id: u32) {
         r#"{
-                node = LoadChild($ptr$, $len$);
-                if (node.nodeType == Node.TEXT_NODE) {
-                    node.textContent = value;
-                } else {
-                    let text = document.createTextNode(value);
-                    node.replaceWith(text);
-                    node = text;
-                }
-                nodes[$id$] = node;
-            }"#
+            let node = this.LoadChild($ptr$, $len$);
+            if (node.nodeType == node.TEXT_NODE) {
+                node.textContent = value;
+            } else {
+                let text = document.createTextNode(value);
+                node.replaceWith(text);
+                node = text;
+            }
+            this.nodes[$id$] = node;
+        }"#
     }
     fn replace_placeholder(ptr: u32, len: u8, n: u16) {
-        "{els = stack.splice(stack.length - $n$); node = LoadChild($ptr$, $len$); node.replaceWith(...els);}"
+        "{this.els = this.stack.splice(this.stack.length - $n$); let node = this.LoadChild($ptr$, $len$); node.replaceWith(...this.els);}"
     }
     fn load_template(tmpl_id: u16, index: u16, id: u32) {
-        "{node = templates[$tmpl_id$][$index$].cloneNode(true); nodes[$id$] = node; stack.push(node);}"
+        "{let node = this.templates[$tmpl_id$][$index$].cloneNode(true); this.nodes[$id$] = node; this.stack.push(node);}"
     }
 
     /*
@@ -123,32 +122,32 @@ mod js {
     */
     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]);
+            let root = this.stack[this.stack.length-many-1];
+            this.els = this.stack.splice(this.stack.length-many);
+            for (let k = 0; k < many; k++) {
+                root.appendChild(this.els[k]);
             }
         }"
     }
     fn set_top_attribute(field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
-        "{setAttributeInner(stack[stack.length-1], $field$, $value$, $ns$);}"
+        "{this.setAttributeInner(this.stack[this.stack.length-1], $field$, $value$, $ns$);}"
     }
     fn add_placeholder() {
-        "{node = document.createElement('pre'); node.hidden = true; stack.push(node);}"
-    }
-    fn create_element_ns(element: &'static str<u8, el>, ns: &'static str<u8, namespace>) {
-        "{stack.push(document.createElementNS($ns$, $element$))}"
+        "{let node = document.createElement('pre'); node.hidden = true; this.stack.push(node);}"
     }
     fn create_element(element: &'static str<u8, el>) {
-        "{stack.push(document.createElement($element$))}"
+        "{this.stack.push(document.createElement($element$))}"
+    }
+    fn create_element_ns(element: &'static str<u8, el>, ns: &'static str<u8, namespace>) {
+        "{this.stack.push(document.createElementNS($ns$, $element$))}"
     }
     fn add_templates(tmpl_id: u16, len: u16) {
-        "{templates[$tmpl_id$] = stack.splice(stack.length-$len$);}"
+        "{this.templates[$tmpl_id$] = this.stack.splice(this.stack.length-$len$);}"
     }
     fn foreign_event_listener(event: &str<u8, evt>, id: u32, bubbles: u8) {
         r#"
         bubbles = bubbles == 1;
-        node = nodes[id];
+        let node = this.nodes[id];
         if(node.listening){
             node.listening += 1;
         } else {
@@ -160,7 +159,7 @@ mod js {
         // if this is a mounted listener, we send the event immediately
         if (event_name === "mounted") {
             window.ipc.postMessage(
-                window.interpreter.serializeIpcMessage("user_event", {
+                this.serializeIpcMessage("user_event", {
                     name: event_name,
                     element: id,
                     data: null,
@@ -168,29 +167,28 @@ mod js {
                 })
             );
         } else {
-            listeners.create(event_name, node, bubbles, (event) => {
-                handler(event, event_name, bubbles, config);
+            this.listeners.create(event_name, node, bubbles, (event) => {
+                this.handler(event, event_name, bubbles);
             });
         }"#
     }
     fn assign_id_ref(array: &[u8], id: u32) {
-        "{nodes[$id$] = LoadChild($array$);}"
+        "{this.nodes[$id$] = this.LoadChild($array$);}"
     }
     fn hydrate_text_ref(array: &[u8], value: &str, id: u32) {
         r#"{
-            node = LoadChild($array$);
-            if (node.nodeType == Node.TEXT_NODE) {
+            let node = this.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;
+            this.nodes[$id$] = node;
         }"#
     }
-
     fn replace_placeholder_ref(array: &[u8], n: u16) {
-        "{els = stack.splice(stack.length - $n$); node = LoadChild($array$); node.replaceWith(...els);}"
+        "{this.els = this.stack.splice(this.stack.length - $n$); let node = this.LoadChild($array$); node.replaceWith(...this.els);}"
     }
 }