chore: get create working and simplify dynamic nodes

packages/interpreter/src/interpreter.js

@@ -132,16 +132,13 @@ export class Interpreter {
     this.nodes[root] = node;
     this.stack.push(node);
   }
-  CreateElement(tag, root) {
+  CreateElement(tag) {
     const el = document.createElement(tag);
-    this.nodes[root] = el;
     this.stack.push(el);
   }
-  CreateElementNs(tag, root, ns) {
-    console.log("creating element", tag, root, ns);
+  CreateElementNs(tag, ns) {
     let el = document.createElementNS(ns, tag);
     this.stack.push(el);
-    this.nodes[root] = el;
   }
   CreatePlaceholder(root) {
     let el = document.createElement("pre");
@@ -149,6 +146,11 @@ export class Interpreter {
     this.stack.push(el);
     this.nodes[root] = el;
   }
+  CreateStaticPlaceholder() {
+    let el = document.createElement("pre");
+    el.hidden = true;
+    this.stack.push(el);
+  }
   NewEventListener(event_name, root, handler, bubbles) {
     const element = this.nodes[root];
     element.setAttribute("data-dioxus-id", `${root}`);
@@ -162,9 +164,16 @@ export class Interpreter {
   SetText(root, text) {
     this.nodes[root].textContent = text;
   }
-  SetAttribute(root, field, value, ns) {
+  SetAttribute(id, field, value, ns) {
+    const node = this.nodes[id];
+    this.SetAttributeInner(node, field, value, ns);
+  }
+  SetStaticAttribute(field, value, ns) {
+    const node = this.top();
+    this.SetAttributeInner(node, field, value, ns);
+  }
+  SetAttributeInner(node, field, value, ns) {
     const name = field;
-    const node = this.nodes[root];
     if (ns === "style") {
       // ????? why do we need to do this
       if (node.style === undefined) {
@@ -248,9 +257,9 @@ export class Interpreter {
     let node = this.LoadChild(path);
     node.replaceWith(...els);
   }
-  LoadTemplate(name, index) {
-    console.log("loading template", name, index);
+  LoadTemplate(name, index, id) {
     let node = this.templates[name][index].cloneNode(true);
+    this.nodes[id] = node;
     this.stack.push(node);
   }
   SaveTemplate(name, m) {
@@ -265,24 +274,38 @@ export class Interpreter {
         this.AssignId(edit.path, edit.id);
         break;
       case "CreateElement":
-        if (edit.namespace !== null && edit.namespace !== undefined) {
-          this.CreateElementNs(edit.name, edit.id, edit.namespace);
-        } else {
-          this.CreateElement(edit.name, edit.id);
-        }
+        this.CreateElement(edit.name);
+        break;
+      case "CreateElementNs":
+        this.CreateElementNs(edit.name, edit.namespace);
         break;
       case "CreatePlaceholder":
         this.CreatePlaceholder(edit.id);
         break;
-      case "CreateTextNode":
+      case "CreateStaticText":
         this.CreateTextNode(edit.value);
         break;
+      case "CreateStaticPlaceholder":
+        this.CreateStaticPlaceholder();
+        break;
+      case "CreateTextPlaceholder":
+        this.CreateRawText("placeholder");
+        break;
       case "CreateStaticText":
+        this.CreateRawText(edit.value);
+        break;
+      case "CreateTextNode":
         this.CreateTextNode(edit.value);
         break;
       case "HydrateText":
         this.HydrateText(edit.path, edit.value, edit.id);
         break;
+      case "LoadTemplate":
+        this.LoadTemplate(edit.name, edit.index);
+        break;
+      case "SaveTemplate":
+        this.SaveTemplate(edit.name, edit.m);
+        break;
       case "PushRoot":
         this.PushRoot(edit.id);
         break;
@@ -293,29 +316,29 @@ export class Interpreter {
         this.ReplacePlaceholder(edit.path, edit.m);
         break;
       case "InsertAfter":
-        this.InsertAfter(edit.id, edit.n);
+        this.InsertAfter(edit.id, edit.m);
         break;
       case "InsertBefore":
-        this.InsertBefore(edit.id, edit.n);
+        this.InsertBefore(edit.id, edit.m);
         break;
       case "Remove":
         this.Remove(edit.id);
         break;
-      case "LoadTemplate":
-        this.LoadTemplate(edit.name, edit.index);
-        break;
-      case "SaveTemplate":
-        this.SaveTemplate(edit.name, edit.m);
-        break;
-      case "CreateElementNs":
-        this.CreateElementNs(edit.name, edit.id, edit.ns);
-        break;
       case "SetText":
         this.SetText(edit.id, edit.value);
         break;
       case "SetAttribute":
         this.SetAttribute(edit.id, edit.name, edit.value, edit.ns);
         break;
+      case "SetStaticAttribute":
+        this.SetStaticAttribute(edit.name, edit.value, edit.ns);
+        break;
+      case "SetBoolAttribute":
+        this.SetAttribute(edit.id, edit.name, edit.value, edit.ns);
+        break;
+      case "SetInnerText":
+        console.log("Set inner text?");
+        break;
       case "RemoveAttribute":
         this.RemoveAttribute(edit.id, edit.name, edit.ns);
         break;