feat: support desktop more completely

packages/desktop/src/index.js

@@ -7,7 +7,7 @@ class Interpreter {
       "onclick": {}
     };
     this.lastNodeWasText = false;
-    this.nodes = [root, root, root, root];
+    this.nodes = [root];
   }
 
   top() {
@@ -19,9 +19,8 @@ class Interpreter {
   }
 
   PushRoot(edit) {
-    const id = edit.id;
+    const id = edit.root;
     const node = this.nodes[id];
-    console.log("pushing root ", node, "with id", id);
     this.stack.push(node);
   }
 
@@ -52,34 +51,36 @@ class Interpreter {
   }
 
   Remove(edit) {
-    let node = this.nodes[edit.element_id];
-    node.remove();
+    let node = this.nodes[edit.root];
+    if (node !== undefined) {
+      node.remove();
+    }
   }
 
   CreateTextNode(edit) {
     const node = document.createTextNode(edit.text);
-    this.nodes[edit.id] = node;
+    this.nodes[edit.root] = node;
     this.stack.push(node);
   }
 
   CreateElement(edit) {
     const tagName = edit.tag;
     const el = document.createElement(tagName);
-    this.nodes[edit.id] = el;
+    this.nodes[edit.root] = el;
     this.stack.push(el);
   }
 
   CreateElementNs(edit) {
     let el = document.createElementNS(edit.ns, edit.tag);
     this.stack.push(el);
-    this.nodes[edit.id] = el;
+    this.nodes[edit.root] = el;
   }
 
   CreatePlaceholder(edit) {
     let el = document.createElement("pre");
     // let el = document.createComment("vroot");
     this.stack.push(el);
-    this.nodes[edit.id] = el;
+    this.nodes[edit.root] = el;
   }
 
   RemoveEventListener(edit) { }
@@ -127,30 +128,31 @@ class Interpreter {
   }
 
   InsertAfter(edit) {
-    let old = this.nodes[edit.element_id];
-    let new_nodes = this.stack.splice(edit.many);
+    let old = this.nodes[edit.root];
+    let new_nodes = this.stack.splice(this.stack.length - edit.n);
+    // console.log("inserting nodes after", new_nodes, old);
     old.after(...new_nodes);
   }
 
   InsertBefore(edit) {
-    let old = this.nodes[edit.element_id];
-    let new_nodes = this.stack.splice(edit.many);
+    let old = this.nodes[edit.root];
+    let new_nodes = this.stack.splice(this.stack.length - edit.n);
     old.before(...new_nodes);
   }
 
   NewEventListener(edit) {
     const event_name = edit.event_name;
-    const mounted_node_id = edit.mounted_node_id;
+    const mounted_node_id = edit.root;
     const scope = edit.scope;
 
     const element = this.top();
     element.setAttribute(`dioxus-event-${event_name}`, `${scope}.${mounted_node_id}`);
 
-    console.log("listener map is", this.listeners);
     if (this.listeners[event_name] === undefined) {
-      console.log("adding listener!");
       this.listeners[event_name] = "bla";
+
       this.root.addEventListener(event_name, (event) => {
+        console.log("CLICKED");
         const target = event.target;
         const val = target.getAttribute(`dioxus-event-${event_name}`);
         if (val == null) {
@@ -161,8 +163,9 @@ class Interpreter {
         const scope_id = parseInt(fields[0]);
         const real_id = parseInt(fields[1]);
 
-        console.log(`parsed event with scope_id ${scope_id} and real_id ${real_id}`);
+        // console.log(`parsed event with scope_id ${scope_id} and real_id ${real_id}`);
 
+        console.log("message fired");
         let contents = serialize_event(event);
         rpc.call('user_event', {
           event: event_name,
@@ -170,33 +173,31 @@ class Interpreter {
           mounted_dom_id: real_id,
           contents: contents,
         }).then((reply) => {
-          console.log(reply);
+          console.log("reply received");
+
+          // console.log(reply);
           this.stack.push(this.root);
 
           let edits = reply.edits;
 
           for (let x = 0; x < edits.length; x++) {
             let edit = edits[x];
-            console.log(edit);
-
             let f = this[edit.type];
             f.call(this, edit);
           }
 
-          console.log("initiated");
-        }).catch((err) => {
-          console.log("failed to initiate", err);
-        });
+          // console.log("initiated");
+        })
       });
     }
   }
 }
 
 async function initialize() {
-  const reply = await rpc.call('initiate');
   let root = window.document.getElementById("_dioxusroot");
   const interpreter = new Interpreter(root);
-  console.log(reply);
+
+  const reply = await rpc.call('initiate');
 
   let pre_rendered = reply.pre_rendered;
   if (pre_rendered !== undefined) {
@@ -209,14 +210,14 @@ async function initialize() {
 }
 
 function apply_edits(edits, interpreter) {
+  console.log(edits);
   for (let x = 0; x < edits.length; x++) {
     let edit = edits[x];
-    console.log(edit);
     let f = interpreter[edit.type];
     f.call(interpreter, edit);
   }
 
-  console.log("stack completed: ", interpreter.stack);
+  // console.log("stack completed: ", interpreter.stack);
 }
 
 function serialize_event(event) {