@coherent.js/client 1.0.0-beta.3 → 1.0.0-beta.6

package/README.md

@@ -23,6 +23,25 @@ Requirements:
 - Node.js >= 20
 - ESM module system
 
+
+## Exports
+
+Client-side hydration and HMR utilities
+
+### Modular Imports (Tree-Shakable)
+
+- Hydration utilities: `@coherent.js/client`
+- Client router: `@coherent.js/client/router`
+- HMR support: `@coherent.js/client/hmr`
+
+### Example Usage
+
+```javascript
+import { hydrateComponent } from '@coherent.js/client';
+import { createClientRouter } from '@coherent.js/client/router';
+```
+
+> **Note**: All exports are tree-shakable. Import only what you need for optimal bundle size.
 ## Quick start
 
 The client package pairs with server-rendered HTML produced by `@coherent.js/core`.

package/dist/index.js

@@ -1,5 +1,16 @@
 // src/hydration.js
 var componentInstances = /* @__PURE__ */ new WeakMap();
+function getKey(vNode) {
+  if (!vNode || typeof vNode !== "object" || Array.isArray(vNode)) {
+    return void 0;
+  }
+  const tagName = Object.keys(vNode)[0];
+  const props = vNode[tagName];
+  if (props && typeof props === "object") {
+    return props.key;
+  }
+  return void 0;
+}
 function extractInitialState(element, options = {}) {
   if (typeof window === "undefined") {
     return options.initialState || null;
@@ -213,7 +224,25 @@ function hydrate(element, component, props = {}, options = {}) {
         }
       });
     },
-    // Patch children with intelligent list diffing
+    // Get children array from a vNode
+    getVNodeChildren(vNode) {
+      if (!vNode || typeof vNode !== "object" || Array.isArray(vNode)) {
+        return [];
+      }
+      const tagName = Object.keys(vNode)[0];
+      const props2 = vNode[tagName];
+      if (!props2 || typeof props2 !== "object") {
+        return [];
+      }
+      if (props2.children) {
+        return Array.isArray(props2.children) ? props2.children : [props2.children];
+      }
+      if (props2.text !== void 0) {
+        return [props2.text];
+      }
+      return [];
+    },
+    // Patch children with key-based reconciliation
     patchChildren(domElement, oldVNode, newVNode) {
       if (typeof window === "undefined" || typeof Node === "undefined" || typeof document === "undefined") {
         return;
@@ -221,22 +250,8 @@ function hydrate(element, component, props = {}, options = {}) {
       if (!domElement || typeof domElement.childNodes === "undefined" || typeof domElement.appendChild !== "function") {
         return;
       }
-      const oldTagName = oldVNode ? Object.keys(oldVNode)[0] : null;
-      const newTagName = Object.keys(newVNode)[0];
-      const oldProps = oldVNode && oldTagName ? oldVNode[oldTagName] || {} : {};
-      const newProps = newVNode[newTagName] || {};
-      let oldChildren = [];
-      let newChildren = [];
-      if (oldProps.children) {
-        oldChildren = Array.isArray(oldProps.children) ? oldProps.children : [oldProps.children];
-      } else if (oldProps.text) {
-        oldChildren = [oldProps.text];
-      }
-      if (newProps.children) {
-        newChildren = Array.isArray(newProps.children) ? newProps.children : [newProps.children];
-      } else if (newProps.text) {
-        newChildren = [newProps.text];
-      }
+      const oldChildren = this.getVNodeChildren(oldVNode);
+      const newChildren = this.getVNodeChildren(newVNode);
       let domChildren = [];
       if (typeof Array.from === "function" && domElement.childNodes) {
         try {
@@ -248,24 +263,62 @@ function hydrate(element, component, props = {}, options = {}) {
           domChildren = [];
         }
       }
-      const maxLength = Math.max(oldChildren.length, newChildren.length, domChildren.length);
-      for (let i = 0; i < maxLength; i++) {
-        const oldChild = oldChildren[i];
-        const newChild = newChildren[i];
-        const domChild = domChildren[i];
-        if (newChild === void 0) {
-          if (domChild && typeof domChild.remove === "function") {
-            domChild.remove();
+      const oldKeyMap = /* @__PURE__ */ new Map();
+      const oldIndexMap = /* @__PURE__ */ new Map();
+      oldChildren.forEach((child, i) => {
+        const key = getKey(child);
+        if (key !== void 0) {
+          oldKeyMap.set(key, { vNode: child, index: i, domNode: domChildren[i] });
+        } else {
+          oldIndexMap.set(i, { vNode: child, index: i, domNode: domChildren[i] });
+        }
+      });
+      const usedOldNodes = /* @__PURE__ */ new Set();
+      newChildren.forEach((newChild, newIndex) => {
+        const newKey = getKey(newChild);
+        let oldEntry = null;
+        if (newKey !== void 0 && oldKeyMap.has(newKey)) {
+          oldEntry = oldKeyMap.get(newKey);
+          usedOldNodes.add(newKey);
+        } else if (newKey === void 0 && oldIndexMap.has(newIndex)) {
+          oldEntry = oldIndexMap.get(newIndex);
+          usedOldNodes.add(`index:${newIndex}`);
+        }
+        if (oldEntry && oldEntry.domNode) {
+          this.patchDOM(oldEntry.domNode, oldEntry.vNode, newChild);
+          const currentPosition = Array.from(domElement.childNodes).filter((node) => {
+            return node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim();
+          }).indexOf(oldEntry.domNode);
+          if (currentPosition !== newIndex) {
+            const referenceNode = domElement.childNodes[newIndex];
+            if (referenceNode) {
+              domElement.insertBefore(oldEntry.domNode, referenceNode);
+            } else {
+              domElement.appendChild(oldEntry.domNode);
+            }
           }
-        } else if (domChild === void 0) {
+        } else {
           const newElement = this.createDOMElement(newChild);
           if (newElement) {
-            domElement.appendChild(newElement);
+            const referenceNode = domElement.childNodes[newIndex];
+            if (referenceNode) {
+              domElement.insertBefore(newElement, referenceNode);
+            } else {
+              domElement.appendChild(newElement);
+            }
           }
-        } else {
-          this.patchDOM(domChild, oldChild, newChild);
         }
-      }
+      });
+      oldKeyMap.forEach((entry, key) => {
+        if (!usedOldNodes.has(key) && entry.domNode && entry.domNode.parentNode) {
+          entry.domNode.remove();
+        }
+      });
+      oldIndexMap.forEach((entry, index) => {
+        if (!usedOldNodes.has(`index:${index}`) && entry.domNode && entry.domNode.parentNode) {
+          entry.domNode.remove();
+        }
+      });
     },
     // Create DOM element from virtual element
     createDOMElement(vNode) {