@ape-egg/vibe 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [1.0.2] - 2026-01-20
+
+### Fixed
+
+- **parse.js**: Root element attribute bindings now captured when parsing individual nodes (fixes dynamically added elements with `value="@[...]"` not being hydrated)
+- **MutationObserver**: Added nodes now only hydrate themselves and descendants, not the entire tree (fixes focus loss and mutation cascade on dynamic DOM updates)
+- **MutationObserver**: Removed unnecessary hydration calls when nodes are removed (cleanup only)
+- **MutationObserver**: Batched hook firing - `afterDomMutation` now fires once after all mutations are processed, not per-node (major performance fix for bulk DOM updates)
+- **MutationObserver**: Parent elements are now re-parsed only once per mutation batch, not per-child (performance optimization)
+
+---
+
+## [1.0.1] - 2026-01-20
+
+### Fixed
+
+- Fixed iteration diff bug where MOVE operations corrupted indices, causing wrong items to be deleted
+
+---
+
 ## [1.0.0] - 2026-01-19
 
 ### Added

package/index.js

@@ -106,33 +106,6 @@ const main = (s, attrName = "vibe") => {
     enumerable: false,
   });
 
-  // Batch DOM changes: disconnects observer, runs fn, re-parses everything
-  Object.defineProperty($, 'batch', {
-    value: (fn) => {
-      if (observer) observer.disconnect();
-      try {
-        fn();
-      } finally {
-        parsedTree = parse(rootElement);
-        linkList = link(parsedTree);
-        const affectedElements = affected(parsedTree, $, $);
-        hydrate(affectedElements, $, linkList);
-        setPreviousState($);
-        renderAllIterations(parsedTree, $, linkList);
-        renderAllConditionals(parsedTree, $, linkList);
-        if (observer) {
-          observer.observe(rootElement, {
-            attributes: false,
-            characterData: false,
-            childList: true,
-            subtree: true,
-          });
-        }
-      }
-    },
-    enumerable: false,
-  });
-
   // Initial hydration
   const affectedElements = affected(parsedTree, $, $);
   hydrate(affectedElements, $, linkList);
@@ -144,16 +117,54 @@ const main = (s, attrName = "vibe") => {
   renderAllConditionals(parsedTree, $, linkList);
 
   observer = new MutationObserver((mutations) => {
+    // Early exit if no mutations to process (common case)
+    if (mutations.length === 0) return;
+
+    let hadChanges = false;
+    let parsedParents = null; // Lazy init - only create Set when needed
+
     mutations.forEach(({ addedNodes, removedNodes, target }) => {
+      // Process removed nodes first (cleanup before additions)
+      removedNodes.forEach((node) => {
+        const entry = Object.entries(linkList).find(
+          ([_, element]) => element === node,
+        );
+
+        // Skip nodes that aren't tracked (e.g., iteration-generated nodes or nodes outside reactive scope)
+        if (!entry) return;
+
+        const [dotAnnotation] = entry;
+        delete linkList[dotAnnotation];
+
+        const dotPath = dotAnnotation.split(".");
+        const name = dotPath.pop();
+        const parentDotAnnotation = dotPath.join(".");
+
+        const picked = navigateTree(parsedTree, parentDotAnnotation);
+
+        // If we can't navigate to the parent, skip
+        if (!picked || !picked.element) return;
+
+        // Update parent's parsed HTML (only once per parent)
+        if (!parsedParents) parsedParents = new Set();
+        if (!parsedParents.has(picked)) {
+          const { parsed } = parse(picked.element);
+          picked.parsed = parsed;
+          parsedParents.add(picked);
+        }
+
+        // Remove the node from parent's children
+        delete picked.children[name];
+
+        hadChanges = true;
+      });
+
       addedNodes.forEach((node) => {
         // Skip if node itself or any ancestor is non-reactive
         if (isNonReactiveOrInside(node)) {
           return;
         }
 
-        const index = [...target.childNodes].findIndex(
-          (childNode) => childNode === node,
-        );
         const entry = Object.entries(linkList).find(
           ([_, element]) => element === target,
         );
@@ -176,57 +187,33 @@ const main = (s, attrName = "vibe") => {
         const name = `${node.nodeName.toLowerCase()}_${hash()}`;
         const parsedNode = parse(node);
 
-        // Update parent's parsed HTML
-        const { parsed } = parse(picked.element);
-        picked.parsed = parsed;
+        // Update parent's parsed HTML (only once per parent)
+        if (!parsedParents) parsedParents = new Set();
+        if (!parsedParents.has(picked)) {
+          const { parsed } = parse(picked.element);
+          picked.parsed = parsed;
+          parsedParents.add(picked);
+        }
 
         // Add the parsed node to parent's children
         picked.children[name] = parsedNode;
 
         linkList[`${dotAnnotation}.${name}`] = node;
 
-        const affectedElements = affected(parsedTree, $, $);
-
-        hydrate(affectedElements, $, linkList);
-
-        // Trigger afterDomMutation hook for added nodes
-        hooks.afterDomMutation.forEach((callback) => callback());
-      });
-
-      removedNodes.forEach((node) => {
-        const entry = Object.entries(linkList).find(
-          ([_, element]) => element === node,
-        );
-
-        // Skip nodes that aren't tracked (e.g., iteration-generated nodes or nodes outside reactive scope)
-        if (!entry) return;
-
-        const [dotAnnotation] = entry;
-        delete linkList[dotAnnotation];
+        // Only hydrate the newly added node and its descendants, not the entire tree
+        // Use empty object as "previous state" so all bindings in new node are considered affected
+        const affectedElements = affected(parsedNode, {}, $);
 
-        const dotPath = dotAnnotation.split(".");
-        const name = dotPath.pop();
-        const parentDotAnnotation = dotPath.join(".");
-
-        const picked = navigateTree(parsedTree, parentDotAnnotation);
-
-        // If we can't navigate to the parent, skip
-        if (!picked || !picked.element) return;
-
-        // Update parent's parsed HTML
-        const { parsed } = parse(picked.element);
-        picked.parsed = parsed;
-
-        // Remove the node from parent's children
-        delete picked.children[name];
-
-        const affectedElements = affected(parsedTree, $, $);
         hydrate(affectedElements, $, linkList);
 
-        // Trigger afterDomMutation hook for removed nodes
-        hooks.afterDomMutation.forEach((callback) => callback());
+        hadChanges = true;
       });
     });
+
+    // Fire hooks once after all mutations are processed (not per-node)
+    if (hadChanges) {
+      hooks.afterDomMutation.forEach((callback) => callback());
+    }
   });
 
   observer.observe(rootElement, {

package/iteration-utils.js

@@ -211,15 +211,9 @@ export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
       });
     }
 
-    // Check if position changed
-    if (oldIdx !== newIdx) {
-      operations.push({
-        type: "MOVE",
-        from: oldIdx,
-        to: newIdx,
-        key,
-      });
-    }
+    // Note: We don't generate MOVE for index changes here.
+    // Items in LCS maintain relative order - after REMOVEs and ADDs,
+    // they'll naturally be in correct positions.
   });
 
   // Second pass: identify removals

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "description": "Runtime-first reactivity",
   "main": "index.js",

package/parse.js

@@ -216,10 +216,25 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
 
 export default (root, rootKey = undefined) => {
   const { childNodes } = root
+
+  // Check for attribute bindings on the root element itself (only if element has attributes)
+  let attributes = null;
+  if (root.attributes && root.attributes.length > 0) {
+    for (let j = 0; j < root.attributes.length; j++) {
+      const attr = root.attributes[j];
+      BINDING_REGEX.lastIndex = 0;
+      if (BINDING_REGEX.test(attr.value)) {
+        if (!attributes) attributes = {};
+        attributes[attr.name] = attr.value;
+      }
+    }
+  }
+
   return {
     // html: root.outerHTML,
     parsed: parseHTML([...childNodes], rootKey),
     element: root,
-    children: recursive(Array.from(childNodes), rootKey)
+    children: recursive(Array.from(childNodes), rootKey),
+    ...(attributes && { attributes })
   }
 }