playaround with vdom

nayyaung9 · Aug 31, 2021 · 8f48912 · 8f48912
1 parent bf00386
commit 8f48912
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,9 @@
     <title>vdom implementation</title>
   </head>
   <body>
-    <h1>Hello vdom</h1>
+    <h1>VDOM implementation in burmese</h1>
+    <button id="reload">RELOAD</button>
+    <div id="root"></div>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script type="text/babel" src="./index.js"></script>
   </body>

diff --git a/index.js b/index.js
@@ -4,11 +4,78 @@ function h(type, props, ...children) {
   return { type, props, children };
 }
 
+/**
+ * a function createElement(…) that will take a virtual DOM node
+ * and return a real DOM node
+ */
+function createElement(node) {
+  if (typeof node === "string") {
+    return document.createTextNode(node);
+  }
+
+  const $el = document.createElement(node.type);
+
+  node.children.map(createElement).forEach($el.appendChild.bind($el));
+
+  return $el;
+}
+
+/**
+ * compare two nodes (old and new)
+ */
+function changed(node1, node2) {
+  return (
+    typeof node1 !== typeof node2 ||
+    (typeof node1 === "string" && node1 !== node2) ||
+    node1.type !== node2.type
+  );
+}
+
+/**
+ * updateElement is used to check old node are exist
+ * diff children
+ */
+function updateElement($parent, newNode, oldNode, index = 0) {
+  if (!oldNode) {
+    $parent.appendChild(createElement(newNode));
+  } else if (!newNode) {
+    $parent.removeChild($parent.childNodes[index]);
+  } else if (changed(newNode, oldNode)) {
+    $parent.replaceChild(createElement(newNode), $parent.childNodes[index]);
+  } else if (newNode.type) {
+    const newLength = newNode.children.length;
+    const oldLength = oldNode.children.length;
+    for (let i = 0; i < newLength || i < oldLength; i++) {
+      updateElement(
+        $parent.childNodes[index],
+        newNode.children[i],
+        oldNode.children[i],
+        i
+      );
+    }
+  }
+}
+
+// ---------------------------------------------------------------------
+
 const a = (
-  <ul class="list">
+  <ul>
     <li>item 1</li>
     <li>item 2</li>
   </ul>
 );
 
-console.log(a);
+const b = (
+  <ul>
+    <li>item 1</li>
+    <li>hello!</li>
+  </ul>
+);
+
+const $root = document.getElementById("root");
+const $reload = document.getElementById("reload");
+
+updateElement($root, a);
+$reload.addEventListener("click", () => {
+  updateElement($root, b, a);
+});