@coherent.js/client 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/client/hmr.js

@@ -11,7 +11,7 @@
     window.__coherent_hmr_initialized = true;
     const log = (...args) => console.log('[Coherent HMR]', ...args);
     const warn = (...args) => console.warn('[Coherent HMR]', ...args);
-    const _error = (...args) => console._error('[Coherent HMR]', ...args);
+    const _error = (...args) => console.error('[Coherent HMR]', ...args);
     let hadDisconnect = false;
     function connect() {
         try {
@@ -33,8 +33,8 @@
                 warn('disconnected, retrying in 1s...');
                 setTimeout(connect, 1000);
             });
-            ws.addEventListener('_error', (e) => {
-                _error('socket _error', e);
+            ws.addEventListener('error', (e) => {
+                error('socket error', e);
                 try {
                     ws.close();
                 }

package/dist/client/hydration.js

@@ -58,8 +58,8 @@ function extractInitialState(element, options = {}) {
         }
         return hasState ? state : null;
     }
-    catch (_error) {
-        console.warn('Error extracting initial state:', _error);
+    catch (error) {
+        console.warn('Error extracting initial state:', error);
         return options.initialState || null;
     }
 }
@@ -107,8 +107,8 @@ function hydrate(element, component, props = {}, options = {}) {
                 // Always use the fallback patching method to preserve hydration
                 this.fallbackRerender();
             }
-            catch (_error) {
-                console._error('Error during component re-render:', _error);
+            catch (error) {
+                console.error('Error during component re-render:', error);
             }
         },
         // Fallback re-render method using existing patching
@@ -129,8 +129,8 @@ function hydrate(element, component, props = {}, options = {}) {
                 this.previousVirtualElement = newVirtualElement;
                 // Component re-rendered successfully with fallback
             }
-            catch (_error) {
-                console._error('Error during component re-render (fallback):', _error);
+            catch (error) {
+                console.error('Error during component re-render (fallback):', error);
             }
         },
         // Create virtual element representation from existing DOM
@@ -316,9 +316,9 @@ function hydrate(element, component, props = {}, options = {}) {
                             (node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim());
                     });
                 }
-                catch (_error) {
+                catch (error) {
                     // Fallback to empty array if Array.from fails
-                    console.warn('Failed to convert childNodes to array:', _error);
+                    console.warn('Failed to convert childNodes to array:', error);
                     domChildren = [];
                 }
             }
@@ -366,7 +366,7 @@ function hydrate(element, component, props = {}, options = {}) {
             const props = vNode[tagName] || {};
             const element = document.createElement(tagName);
             // Set attributes
-            Object.keys(props).forEach(key => {
+            Object.keys(_props).forEach(key => {
                 if (key === 'children' || key === 'text')
                     return;
                 const value = props[key];
@@ -411,7 +411,7 @@ function hydrate(element, component, props = {}, options = {}) {
             // Build attributes
             let attributes = '';
             const children = [];
-            Object.keys(props).forEach(key => {
+            Object.keys(_props).forEach(key => {
                 if (key === 'children') {
                     if (Array.isArray(props.children)) {
                         children.push(...props.children);
@@ -571,8 +571,8 @@ if (typeof window !== 'undefined') {
                     // Call the handler function with the element as context and pass event, state, setState
                     handlerFunc.call(element, event, state, setState);
                 }
-                catch (_error) {
-                    console.warn(`Error executing coherent event handler:`, _error);
+                catch (error) {
+                    console.warn(`Error executing coherent event handler:`, error);
                 }
             }
             else {
@@ -580,8 +580,8 @@ if (typeof window !== 'undefined') {
                 try {
                     handlerFunc.call(element, event);
                 }
-                catch (_error) {
-                    console.warn(`Error executing coherent event handler (no component context):`, _error);
+                catch (error) {
+                    console.warn(`Error executing coherent event handler (no component _context):`, error);
                 }
             }
         }
@@ -630,7 +630,7 @@ function renderVirtualDOMToElement(vdom, container) {
         const element = document.createElement(tagName);
         const props = vdom[tagName] || {};
         // Set attributes and properties
-        Object.keys(props).forEach(key => {
+        Object.keys(_props).forEach(key => {
             if (key === 'children') {
                 // Handle children
                 const children = props.children;
@@ -984,8 +984,8 @@ function attachFunctionEventListeners(rootElement, virtualElement, instance, opt
                             const result = handler.call(domElement, event, currentState, currentSetState);
                             return result;
                         }
-                        catch (_error) {
-                            console._error(`Error in ${eventName} handler:`, _error);
+                        catch (error) {
+                            console.error(`Error in ${eventName} handler:`, error);
                         }
                     };
                     // Remove any existing onclick attributes that might interfere
@@ -1106,8 +1106,8 @@ function attachEventListeners(element, instance) {
                             const func = new Function('event', 'state', 'setState', 'element', eventAttr);
                             func.call(elementWithEvent, e, state, setState, elementWithEvent);
                         }
-                        catch (_error) {
-                            console.warn(`Error executing ${eventName} handler:`, _error);
+                        catch (error) {
+                            console.warn(`Error executing ${eventName} handler:`, error);
                         }
                     };
                     if (typeof elementWithEvent.addEventListener === 'function') {
@@ -1165,8 +1165,8 @@ function attachEventListeners(element, instance) {
                                     handlerFunc.call(actionElement, e);
                                 }
                             }
-                            catch (_error) {
-                                console.warn(`Error executing action handler for ${actionId}:`, _error);
+                            catch (error) {
+                                console.warn(`Error executing action handler for ${actionId}:`, error);
                             }
                         };
                         if (typeof actionElement.addEventListener === 'function') {
@@ -1211,8 +1211,8 @@ function attachEventListeners(element, instance) {
                                 // Bind the function to the element and call it with the event
                                 handlerFunc.call(elementWithCoherentEvent, e, state, setState);
                             }
-                            catch (_error) {
-                                console.warn(`Error executing coherent event handler:`, _error);
+                            catch (error) {
+                                console.warn(`Error executing coherent event handler:`, error);
                             }
                         };
                         if (typeof elementWithCoherentEvent.addEventListener === 'function') {
@@ -1230,8 +1230,8 @@ function attachEventListeners(element, instance) {
             }
         });
     }
-    catch (_error) {
-        console.warn('Error attaching event listeners:', _error);
+    catch (error) {
+        console.warn('Error attaching event listeners:', error);
     }
 }
 /**
@@ -1324,8 +1324,8 @@ function handleComponentAction(event, action, target, instance) {
                     // Call the custom method on the instance
                     instance[action](event, target);
                 }
-                catch (_error) {
-                    console.warn(`Error executing custom action ${action}:`, _error);
+                catch (error) {
+                    console.warn(`Error executing custom action ${action}:`, error);
                 }
             }
             else {
@@ -1339,8 +1339,8 @@ function handleComponentAction(event, action, target, instance) {
                         // Call the handler function with event, state, and setState
                         handlerFunc(event, state, setState);
                     }
-                    catch (_error) {
-                        console.warn(`Error executing action handler ${action}:`, _error);
+                    catch (error) {
+                        console.warn(`Error executing action handler ${action}:`, error);
                     }
                 }
                 else {
@@ -1365,7 +1365,7 @@ function hydrateAll(elements, components, propsArray = []) {
     return elements.map((element, index) => {
         const component = components[index];
         const props = propsArray[index] || {};
-        return hydrate(element, component, props);
+        return hydrate(element, component, _props);
     });
 }
 /**
@@ -1381,7 +1381,7 @@ function hydrateBySelector(selector, component, props = {}) {
         return [];
     }
     const elements = document.querySelectorAll(selector);
-    return Array.from(elements).map(element => hydrate(element, component, props));
+    return Array.from(elements).map(element => hydrate(element, component, _props));
 }
 /**
  * Enable client-side interactivity for event handlers
@@ -1408,7 +1408,7 @@ function makeHydratable(component, options = {}) {
     const componentName = options.componentName || component.name || 'AnonymousComponent';
     // Create a new function that wraps the original component
     const hydratableComponent = function (props = {}) {
-        return component(props);
+        return component(_props);
     };
     // Set the component name on the hydratable component function
     Object.defineProperty(hydratableComponent, 'name', {
@@ -1477,13 +1477,13 @@ function makeHydratable(component, options = {}) {
             hydrationAttributes: {
                 'data-coherent-component': componentName,
                 'data-coherent-state': state ? JSON.stringify(state) : (options.initialState ? JSON.stringify(options.initialState) : null),
-                'data-coherent-props': Object.keys(props).length > 0 ? JSON.stringify(props) : null
+                'data-coherent-props': Object.keys(_props).length > 0 ? JSON.stringify(_props) : null
             }
         };
     };
     // Add a method to render with hydration data
     hydratableComponent.renderWithHydration = function (props = {}) {
-        const result = hydratableComponent(props);
+        const result = hydratableComponent(_props);
         // Try to extract state from the component if it's a withState wrapped component
         let state = null;
         if (hydratableComponent.__wrappedComponent && hydratableComponent.__stateContainer) {
@@ -1552,7 +1552,7 @@ function autoHydrate(componentRegistry = {}) {
                 }
             }
             if (!component) {
-                console._error(`❌ Component ${componentName} not found in registry`);
+                console.error(`❌ Component ${componentName} not found in registry`);
                 return; // Skip this element
             }
             if (component) {
@@ -1572,8 +1572,8 @@ function autoHydrate(componentRegistry = {}) {
                         console.warn(`❌ Failed to hydrate component: ${componentName}`);
                     }
                 }
-                catch (_error) {
-                    console._error(`❌ Failed to auto-hydrate component ${componentName}:`, _error);
+                catch (error) {
+                    console.error(`❌ Failed to auto-hydrate component ${componentName}:`, error);
                 }
             }
         });

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) {