@3sln/dodo 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3sln/dodo",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A minimal, configurable virtual DOM library.",
   "main": "index.js",
   "type": "module",

package/src/vdom.js

@@ -91,10 +91,10 @@ function getPathFromElement(element) {
   let current = element;
   while (current) {
     path.push(current);
-    if (current.shadowRoot) {
-      current = current.shadowRoot.host;
+    if (current.parentElement) {
+      current = current.parentElement;
     } else {
-      current = current.parentNode;
+      current = current.getRootNode()?.host;
     }
   }
   return path;
@@ -448,21 +448,34 @@ export default (userSettings) => {
     return domNode;
   }
 
-  function cleanupTarget(target) {
+  function cleanupTargetChildren(target) {
     if (target.children) {
       for (const child of target.children) {
         cleanupTarget(child);
       }
     }
+  }
 
+  function cleanupTarget(target) {
     const state = target[NODE_STATE];
     if (state) {
+
       switch (state.vdom.type) {
         case ELEMENT_NODE:
+          reconcileElementProps(target, {});
+          cleanupTargetChildren(target);
+          delete target[NODE_STATE];
+          break;
         case OPAQUE_NODE:
           reconcileElementProps(target, {});
+          delete target[NODE_STATE];
+          break;
+        case ALIAS_NODE:
+          cleanupTargetChildren(target);
+          delete target[NODE_STATE];
           break;
         case SPECIAL_NODE:
+          delete target[NODE_STATE];
           try {
             state.vdom.tag.detach?.(target);
           } catch (err) {
@@ -475,7 +488,6 @@ export default (userSettings) => {
       } catch (err) {
         console.error(err);
       }
-      delete target[NODE_STATE];
     }
   }
 
@@ -565,41 +577,65 @@ export default (userSettings) => {
 
     const moveBefore = window.Element.prototype.moveBefore;
     const insertBefore = window.Element.prototype.insertBefore;
-    if (target.isConnected && typeof moveBefore === 'function') {
-      for (let i = 0; i < newDomChildren.length; i++) {
-        const newChild = newDomChildren[i];
-        const existingChildAtPosition = target.childNodes[i];
-        if (newChild !== existingChildAtPosition) {
-          (newChild.isConnected ? moveBefore : insertBefore).call(target, newChild, existingChildAtPosition);
+    if (target.isConnected) {
+      if (typeof moveBefore === 'function') {
+        for (let i = 0; i < newDomChildren.length; i++) {
+          const newChild = newDomChildren[i];
+          const existingChildAtPosition = target.childNodes[i];
+          if (newChild !== existingChildAtPosition) {
+            (newChild.isConnected ? moveBefore : insertBefore).call(target, newChild, existingChildAtPosition);
+          }
+          const state = newChild[NODE_STATE];
+          if (state?.newVdom) {
+            if (!state.vdom) {
+              try {
+                state.newVdom.hooks?.$attach?.(newChild);
+                if (state.newVdom.type === SPECIAL_NODE) {
+                  state.newVdom.tag.attach?.(newChild);
+                }
+              } catch (err) {
+                console.error(err);
+              }
+            }
+            reconcileNode(newChild);
+          }
         }
-        const state = newChild[NODE_STATE];
-        if (state?.newVdom) {
-          if (!state.vdom) {
-            try {
-              state.newVdom.hooks?.$attach?.(newChild);
-              if (state.newVdom.type === SPECIAL_NODE) {
-                state.newVdom.tag.attach?.(newChild);
+      } else {
+        const doc = target.ownerDocument;
+        let focusWithin = documentToFocusWithinSet.get(doc);
+        if (!focusWithin) {
+          focusWithin = installFocusTrackingForDocument(doc);
+        }
+        for (let i = 0; i < newDomChildren.length; i++) {
+          const newChild = newDomChildren[i];
+          const existingChildAtPosition = target.childNodes[i];
+          if (newChild !== existingChildAtPosition) {
+            if (!focusWithin.has(newChild)) {
+              insertBefore.call(target, newChild, existingChildAtPosition);
+            }
+          }
+          const state = newChild[NODE_STATE];
+          if (state?.newVdom) {
+            if (!state.vdom) {
+              try {
+                state.newVdom.hooks?.$attach?.(newChild);
+                if (state.newVdom.type === SPECIAL_NODE) {
+                  state.newVdom.tag.attach?.(newChild);
+                }
+              } catch (err) {
+                console.error(err);
               }
-            } catch (err) {
-              console.error(err);
             }
+            reconcileNode(newChild);
           }
-          reconcileNode(newChild);
         }
       }
     } else {
-      const doc = target.ownerDocument;
-      let focusWithin = documentToFocusWithinSet.get(doc);
-      if (!focusWithin) {
-        focusWithin = installFocusTrackingForDocument(doc);
-      }
       for (let i = 0; i < newDomChildren.length; i++) {
         const newChild = newDomChildren[i];
         const existingChildAtPosition = target.childNodes[i];
         if (newChild !== existingChildAtPosition) {
-          if (!focusWithin.has(newChild)) {
-            insertBefore.call(target, newChild, existingChildAtPosition);
-          }
+          insertBefore.call(target, newChild, existingChildAtPosition);
         }
         const state = newChild[NODE_STATE];
         if (state?.newVdom) {
@@ -620,8 +656,14 @@ export default (userSettings) => {
   }
 
   function reconcile(target, vdom) {
+    const state = target[NODE_STATE];
     if (vdom === null || vdom === undefined) {
-      cleanupTarget(target);
+      if (state) {
+        cleanupTarget(target);
+      } else {
+        cleanupTargetChildren(target);
+      }
+      target.replaceChildren();
       return;
     }
 
@@ -631,7 +673,6 @@ export default (userSettings) => {
     }
 
     if (vdom instanceof VNode) {
-      let state = target[NODE_STATE];
       if (state) {
         if (state.vdom.type === vdom.type) {
           if (shouldUpdate(state.vdom.args, vdom.args)) {
@@ -652,7 +693,7 @@ export default (userSettings) => {
           break;
       }
 
-      target[NODE_STATE] = state = { originalProps: {}, newVdom: vdom };
+      target[NODE_STATE] = { originalProps: {}, newVdom: vdom };
       try {
         vdom.hooks?.$attach?.(target);
         if (vdom.type === SPECIAL_NODE) {