update toggle example

examples/demo/Toggle.js

@@ -7,7 +7,7 @@ class Toggle extends WebComponent {
   get template() {
     return html`
       <button onClick=${() => (this.props.toggle = !this.props.toggle)}>
-        ${this.props.toggle}
+        ${this.props.toggle ? "On" : "Off"}
       </button>
     `;
   }

src/WebComponent.js

@@ -195,35 +195,33 @@ export class WebComponent extends HTMLElement {
       const el = createElement(tree, watchList);
       if (this.#prevWatchList?.length === 0) {
         if (el) this.replaceChildren(el);
+        this.#prevWatchList = watchList;
       } else {
         const d = diff(watchList, this.#prevWatchList);
         if (d?.length) {
           console.log(d);
           d.forEach((change) => {
-            const all = this.querySelectorAll(change.selector);
-            let changedElement = all[0];
+            const oldNode = change.prevNode?.parentNode;
+            const newNode = change.node?.parentNode;
 
-            if (changedElement?.length > 1) {
-              console.log(">>> multiple!", changedElement);
+            if (change.type === "prop") {
+              console.log(">>> prop changed", change);
+              handleProp(change.key, change.value, change.prevNode);
+              this.#prevWatchList[change.index] = watchList[change.index];
             }
-
-            if (!!changedElement && change.type === "textContent") {
-              changedElement.textContent = change.value;
-            }
-            if (!!changedElement && change.type === "prop") {
-              handleProp(change.key, change.value, changedElement);
+            if (change.type === "textContent") {
+              console.log(">>> text changed", change);
+              oldNode?.parentNode?.replaceChild(newNode, oldNode);
+              this.#prevWatchList[change.index] = watchList[change.index];
             }
-            if (!!changedElement && change.type === "replace") {
-              changedElement.parentNode.replaceChild(
-                change.node.parentNode,
-                changedElement
-              );
+            if (change.type === "replace") {
+              console.log(">>> replace placeholder", change);
+              oldNode?.replaceChild(newNode, change.prevNode);
+              this.#prevWatchList[change.index] = watchList[change.index];
             }
           });
         }
       }
-
-      this.#prevWatchList = watchList;
     }
   }
 }
@@ -240,9 +238,13 @@ function diff(change, prev) {
       ) {
         return {
           ...dom,
+          prevNode: dom.node,
           value: change[index]?.value,
           node: change[index]?.node,
+          index,
         };
+      } else {
+        prev.node = change.node;
       }
       return null;
     })

src/utils/create-element.mjs

@@ -1,67 +1,50 @@
 import { serialize } from "./serialize.mjs";
-export function createElement(tree, watchList = [], selector = []) {
-  if (!tree) {
+export function createElement(tree, watchList = []) {
+  if (!tree && tree !== 0) {
+    console.log(tree);
     const div = document.createElement("div");
-    div.className = `__placeholder__`;
-    selector.push(`div.${div.className}`);
     const watchObj = {
-      selector: selector.join(" "),
       type: "replace",
       node: div,
-      value: null,
+      value: "__replace__",
     };
     watchList.push(watchObj);
     return div;
   }
   if (!tree.type) {
-    const value = tree.dynamic ? tree.value : tree;
-
-    if (Array.isArray(value)) {
+    if (Array.isArray(tree)) {
       const frag = document.createDocumentFragment();
       frag.replaceChildren(
-        ...value.map((leaf) =>
-          leaf.dynamic
-            ? createElement(leaf.value, watchList)
-            : createElement(leaf, watchList)
-        )
+        ...tree.map((leaf, index) => {
+          return createElement(leaf, watchList, undefined, index);
+        })
       );
 
       return frag;
     }
 
-    const node = document.createTextNode(value);
+    const node = document.createTextNode(tree);
     const watchObj = {
-      selector: selector.join(" "),
       type: "textContent",
       node,
-      value,
+      value: tree,
     };
     watchList.push(watchObj);
 
     return node;
   } else {
     const el = document.createElement(tree.type);
-    const elSelector = tree.type;
-    const selectorIndex = selector.length;
-    selector.push(elSelector);
 
     /**
      * handle props
      */
     if (tree.props) {
       Object.entries(tree.props).forEach(([prop, value]) => {
-        if (prop === "id") {
-          selector[selectorIndex] += `#${value}`;
-        }
-        if (prop === "class") {
-          selector[selectorIndex] += `.${value}`;
-        }
         handleProp(prop, value, el);
         const watchObj2 = {
-          selector: selector.join(" "),
           type: "prop",
           key: prop,
-          value: value,
+          value,
           node: el,
         };
         watchList.push(watchObj2);
@@ -72,7 +55,7 @@ export function createElement(tree, watchList = [], selector = []) {
      * handle children
      */
     tree.children?.forEach((child) => {
-      const childEl = createElement(child, watchList, selector);
+      const childEl = createElement(child, watchList);
       if (childEl instanceof Node) {
         el.appendChild(childEl);
       }