@ape-egg/vibe 1.0.0 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [1.0.3] - 2026-01-23
+
+### Added
+
+- **MutationObserver**: Now processes `<!-- if -->` and `<!-- each -->` comments when new nodes are added to DOM, enabling dynamic content to use vibe's control flow without manual processing
+
+### Fixed
+
+- **affected.js**: Only marks elements as affected when their specific bound values change, preventing unnecessary DOM updates when unrelated state changes (fixes `@[color]` in `<style>` updating on every keystroke when `@[firstName]` changes)
+
+---
+
+## [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/_vibe-compiled-iteration-batch.js

@@ -58,13 +58,13 @@ const hasNestedStructures = (tree) => {
  */
 export const compileBatchFn = (template, itemAlias, indexAlias, stateKeys) => {
   const templateHtml = template.element.innerHTML.trim();
-  const escaped = templateHtml
-    .replace(/\\/g, '\\\\')
-    .replace(/`/g, '\\`')
-    .replace(/\$\{/g, '\\${');
+  const escaped = templateHtml.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
   const code = escaped.replace(BINDING_REGEX, (_, expr) => '${' + expr + '}');
 
-  return new Function('arr', ...stateKeys, `
+  return new Function(
+    'arr',
+    ...stateKeys,
+    `
     let html = '';
     const len = arr.length;
     for (let ${indexAlias} = 0; ${indexAlias} < len; ${indexAlias}++) {
@@ -72,7 +72,8 @@ export const compileBatchFn = (template, itemAlias, indexAlias, stateKeys) => {
       html += \`${code}\`;
     }
     return html;
-  `);
+  `,
+  );
 };
 
 /**
@@ -92,7 +93,7 @@ export const renderFast = (iterationNode, array, state, parent, endComment) => {
   const stateKeys = iterationNode.runtime.stateKeys;
 
   // Build HTML string using batch function
-  const stateValues = stateKeys.map(k => state[k]);
+  const stateValues = stateKeys.map((k) => state[k]);
   const html = batchFn(array, ...stateValues);
 
   // Parse with reusable template element
@@ -141,7 +142,7 @@ export const updateFast = (iterationNode, newArray, state, startComment, endComm
   // Build HTML string using cached batch function
   const batchFn = iterationNode.runtime.batchFn;
   const stateKeys = iterationNode.runtime.stateKeys;
-  const stateValues = stateKeys.map(k => state[k]);
+  const stateValues = stateKeys.map((k) => state[k]);
   const html = batchFn(newArray, ...stateValues);
 
   // Parse and insert

package/affected.js

@@ -1,6 +1,6 @@
-import { resolvePath, deepEqual } from './iteration-utils.js'
-import { extractDependencies } from './conditionals.js'
-import { BINDING_REGEX } from './constants.js'
+import { resolvePath, deepEqual } from './iteration-utils.js';
+import { extractDependencies } from './conditionals.js';
+import { BINDING_REGEX } from './constants.js';
 
 // Evaluate conditional expression
 const evaluateCondition = (expression, state) => {
@@ -29,7 +29,7 @@ const recursive = (tree, state, newState, affected) => {
       affected.push({
         type: 'iteration',
         node: tree,
-        changeType: 'array'
+        changeType: 'array',
       });
     }
     return affected;
@@ -45,7 +45,7 @@ const recursive = (tree, state, newState, affected) => {
       affected.push({
         type: 'conditional',
         node: tree,
-        changeType: 'expression'
+        changeType: 'expression',
       });
       return affected;
     }
@@ -70,21 +70,37 @@ const recursive = (tree, state, newState, affected) => {
   if (matches.length) {
     const shallowState = Object.keys(state);
     const shallowNewState = Object.keys(newState);
+    const isInitialHydration = state === newState;
 
     let hasAffected = false;
     const checkedMatches = [];
 
     for (const m of matches) {
-      const noMatch = !shallowState.some(key => matchesKey(m.inner, key));
-      const newMatches = shallowNewState.filter(key => matchesKey(m.inner, key));
+      const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+
+      let shouldAffect = false;
+      let relevantKeys = [];
+
+      if (isInitialHydration) {
+        // Initial hydration: affect all matched keys
+        relevantKeys = shallowNewState.filter((key) => matchesKey(m.inner, key));
+        shouldAffect = noMatch || relevantKeys.length > 0;
+      } else {
+        // Update: only affect if value changed
+        const changedKeys = shallowNewState.filter((key) =>
+          matchesKey(m.inner, key) && state[key] !== newState[key]
+        );
+        relevantKeys = changedKeys.length > 0 ? changedKeys : shallowState.filter((key) => matchesKey(m.inner, key));
+        shouldAffect = noMatch || changedKeys.length > 0;
+      }
 
-      if (noMatch || newMatches.length) {
+      if (shouldAffect) {
         hasAffected = true;
       }
 
       checkedMatches.push({
         ...m,
-        matches: newMatches.length ? newMatches : shallowState.filter(key => matchesKey(m.inner, key))
+        matches: relevantKeys,
       });
     }
 
@@ -95,7 +111,7 @@ const recursive = (tree, state, newState, affected) => {
           matchInner: m.inner,
           input: m.input,
           matches: m.matches,
-          element: tree.element
+          element: tree.element,
         });
       }
     }
@@ -105,6 +121,7 @@ const recursive = (tree, state, newState, affected) => {
   if (tree.attributes) {
     const shallowState = Object.keys(state);
     const shallowNewState = Object.keys(newState);
+    const isInitialHydration = state === newState;
 
     for (const [attrName, attrValue] of Object.entries(tree.attributes)) {
       BINDING_REGEX.lastIndex = 0;
@@ -115,17 +132,30 @@ const recursive = (tree, state, newState, affected) => {
       }
 
       for (const m of attrMatches) {
-        const noMatch = !shallowState.some(key => matchesKey(m.inner, key));
-        const newMatches = shallowNewState.filter(key => matchesKey(m.inner, key));
+        const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+
+        let shouldAffect = false;
+
+        if (isInitialHydration) {
+          // Initial hydration: affect all matched keys
+          const newMatches = shallowNewState.filter((key) => matchesKey(m.inner, key));
+          shouldAffect = noMatch || newMatches.length > 0;
+        } else {
+          // Update: only affect if value changed
+          const changedKeys = shallowNewState.filter((key) =>
+            matchesKey(m.inner, key) && state[key] !== newState[key]
+          );
+          shouldAffect = noMatch || changedKeys.length > 0;
+        }
 
-        if (noMatch || newMatches.length) {
+        if (shouldAffect) {
           affected.push({
             type: 'attribute',
             attrName,
             attrValue,
             matchOuter: m.outer,
             matchInner: m.inner,
-            element: tree.element
+            element: tree.element,
           });
         }
       }
@@ -146,4 +176,4 @@ const recursive = (tree, state, newState, affected) => {
   return affected;
 };
 
-export default (tree, state, newState) => recursive(tree, state, newState, [])
+export default (tree, state, newState) => recursive(tree, state, newState, []);

package/conditionals.js

@@ -44,7 +44,7 @@ export const renderAllConditionals = (tree, state, linkList, parentScope = {}) =
 
   // Recursively render conditionals in child nodes
   if (tree.children) {
-    Object.keys(tree.children).forEach(key => {
+    Object.keys(tree.children).forEach((key) => {
       const child = tree.children[key];
       if (typeof child === 'object' && child !== null) {
         renderAllConditionals(child, state, linkList, parentScope);
@@ -104,15 +104,18 @@ const mountBranch = (node, branchData, state, linkList, parentScope) => {
   const parent = startComment.parentNode;
 
   // Create scoped state (with parent scope if inside iteration)
-  const scopedState = Object.keys(parentScope).length > 0
-    ? createScopedState(state, parentScope)
-    : state;
+  const scopedState =
+    Object.keys(parentScope).length > 0 ? createScopedState(state, parentScope) : state;
 
   // Initialize block (clone, parse, hydrate)
-  const { element: firstElement, tree: branchTree, clonedNodes } = initializeBlock(templateContent, scopedState);
+  const {
+    element: firstElement,
+    tree: branchTree,
+    clonedNodes,
+  } = initializeBlock(templateContent, scopedState);
 
   // Insert cloned nodes into DOM
-  clonedNodes.forEach(clonedNode => parent.insertBefore(clonedNode, endComment));
+  clonedNodes.forEach((clonedNode) => parent.insertBefore(clonedNode, endComment));
 
   // Recursively render any nested iterations and conditionals
   if (branchTree) {
@@ -124,7 +127,7 @@ const mountBranch = (node, branchData, state, linkList, parentScope) => {
   node.runtime.activeInstance = {
     branch: branchData,
     nodes: clonedNodes,
-    parsedTree: branchTree
+    parsedTree: branchTree,
   };
 };
 
@@ -135,7 +138,7 @@ const unmountBranch = (node) => {
   if (!activeInstance) return;
 
   // Remove all nodes from DOM
-  activeInstance.nodes.forEach(domNode => {
+  activeInstance.nodes.forEach((domNode) => {
     if (domNode.parentNode) {
       domNode.parentNode.removeChild(domNode);
     }
@@ -170,13 +173,11 @@ export const updateConditional = (node, newState, oldState, linkList, parentScop
     const { activeInstance } = node.runtime;
 
     if (activeInstance && activeInstance.parsedTree) {
-      const scopedState = Object.keys(parentScope).length > 0
-        ? createScopedState(newState, parentScope)
-        : newState;
+      const scopedState =
+        Object.keys(parentScope).length > 0 ? createScopedState(newState, parentScope) : newState;
 
       const affectedElements = affected(activeInstance.parsedTree, oldState, scopedState);
       hydrate(affectedElements, scopedState);
     }
   }
 };
-

package/constants.js

@@ -1,56 +1,137 @@
 // Elements that should not have reactive bindings
-export const NON_REACTIVE_ELEMENTS = ["SCRIPT", "HEAD", "PRE"];
+export const NON_REACTIVE_ELEMENTS = ['SCRIPT', 'HEAD', 'PRE'];
 
 // Attributes where the string value is meaningful (should NOT be removed when falsy)
 // All other attributes are treated as boolean-like (removed when falsy, present when truthy)
 export const VALUE_ATTRS = [
   // Global attributes
-  'class', 'style', 'id', 'title', 'lang', 'dir', 'tabindex', 'accesskey',
-  'slot', 'part', 'is', 'nonce', 'popover', 'anchor',
+  'class',
+  'style',
+  'id',
+  'title',
+  'lang',
+  'dir',
+  'tabindex',
+  'accesskey',
+  'slot',
+  'part',
+  'is',
+  'nonce',
+  'popover',
+  'anchor',
 
   // Enumerated (take specific string values, not truly boolean)
-  'contenteditable', 'draggable', 'spellcheck', 'translate', 'autocapitalize',
-  'inputmode', 'enterkeyhint', 'virtualkeyboardpolicy',
+  'contenteditable',
+  'draggable',
+  'spellcheck',
+  'translate',
+  'autocapitalize',
+  'inputmode',
+  'enterkeyhint',
+  'virtualkeyboardpolicy',
 
   // URLs and sources
-  'href', 'src', 'action', 'cite', 'data', 'poster', 'srcset', 'imagesrcset',
-  'formaction', 'ping', 'usemap', 'manifest', 'codebase',
+  'href',
+  'src',
+  'action',
+  'cite',
+  'data',
+  'poster',
+  'srcset',
+  'imagesrcset',
+  'formaction',
+  'ping',
+  'usemap',
+  'manifest',
+  'codebase',
 
   // Form attributes
-  'name', 'type', 'value', 'placeholder', 'pattern', 'min', 'max', 'step',
-  'minlength', 'maxlength', 'size', 'accept', 'autocomplete', 'list', 'form',
-  'formmethod', 'formtarget', 'formenctype', 'wrap', 'method', 'enctype',
-  'for', 'dirname',
+  'name',
+  'type',
+  'value',
+  'placeholder',
+  'pattern',
+  'min',
+  'max',
+  'step',
+  'minlength',
+  'maxlength',
+  'size',
+  'accept',
+  'autocomplete',
+  'list',
+  'form',
+  'formmethod',
+  'formtarget',
+  'formenctype',
+  'wrap',
+  'method',
+  'enctype',
+  'for',
+  'dirname',
 
   // Text/accessibility
-  'alt', 'label', 'summary', 'abbr',
+  'alt',
+  'label',
+  'summary',
+  'abbr',
 
   // Dimensions and layout
-  'width', 'height', 'cols', 'rows', 'span', 'rowspan', 'colspan',
-  'low', 'high', 'optimum',
+  'width',
+  'height',
+  'cols',
+  'rows',
+  'span',
+  'rowspan',
+  'colspan',
+  'low',
+  'high',
+  'optimum',
 
   // Link/resource hints
-  'target', 'rel', 'hreflang', 'download', 'as', 'media', 'type', 'charset',
-  'crossorigin', 'integrity', 'loading', 'decoding', 'fetchpriority',
-  'referrerpolicy', 'blocking', 'imagesizes', 'sizes',
+  'target',
+  'rel',
+  'hreflang',
+  'download',
+  'as',
+  'media',
+  'type',
+  'charset',
+  'crossorigin',
+  'integrity',
+  'loading',
+  'decoding',
+  'fetchpriority',
+  'referrerpolicy',
+  'blocking',
+  'imagesizes',
+  'sizes',
 
   // Media
-  'preload', 'kind', 'srclang',
+  'preload',
+  'kind',
+  'srclang',
 
   // Meta
-  'content', 'http-equiv',
+  'content',
+  'http-equiv',
 
   // iframe/embed
-  'sandbox', 'allow', 'srcdoc', 'credentialless',
+  'sandbox',
+  'allow',
+  'srcdoc',
+  'credentialless',
 
   // Table
-  'headers', 'scope',
+  'headers',
+  'scope',
 
   // Datetime
   'datetime',
 
   // Object/embed legacy
-  'coords', 'shape',
+  'coords',
+  'shape',
 ];
 
 // Properties that should be set directly on the DOM element (not as attributes)

package/hydrate.js

@@ -1,6 +1,6 @@
-import { updateIteration } from './iterate.js'
-import { updateConditional } from './conditionals.js'
-import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js'
+import { updateIteration } from './iterate.js';
+import { updateConditional } from './conditionals.js';
+import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js';
 
 // Keep track of old state for diffing
 let previousState = {};
@@ -40,12 +40,12 @@ export default (affected, state, linkList = {}) => {
     if (aff.type === 'attribute') {
       const { attrName, attrValue, element } = aff;
       try {
-
         // Check if this is a pure binding (e.g., value="@[inputValue]")
         const isPureBinding = attrValue.match(PURE_BINDING_REGEX);
         const isDomProperty = DOM_PROPERTIES.includes(attrName);
         // Value attrs keep their string value; everything else is boolean-like (removed when falsy)
-        const isValueAttr = VALUE_ATTRS.includes(attrName) ||
+        const isValueAttr =
+          VALUE_ATTRS.includes(attrName) ||
           attrName.startsWith('data-') ||
           attrName.startsWith('aria-') ||
           attrName.startsWith('on');
@@ -97,4 +97,4 @@ export default (affected, state, linkList = {}) => {
 
   // Update previous state for next diff
   setPreviousState(state);
-}
+};

package/index.js

@@ -1,12 +1,12 @@
-import state from "./state.js";
-import parse from "./parse.js";
-import link from "./link.js";
-import hydrate, { setPreviousState } from "./hydrate.js";
-import affected from "./affected.js";
-import { deepMerge, hash } from "./utils.js";
-import { renderAllIterations, setRenderAllConditionals } from "./iterate.js";
-import { renderAllConditionals } from "./conditionals.js";
-import { NON_REACTIVE_ELEMENTS } from "./constants.js";
+import state from './state.js';
+import parse from './parse.js';
+import link from './link.js';
+import hydrate, { setPreviousState } from './hydrate.js';
+import affected from './affected.js';
+import { deepMerge, hash } from './utils.js';
+import { renderAllIterations, setRenderAllConditionals } from './iterate.js';
+import { renderAllConditionals } from './conditionals.js';
+import { NON_REACTIVE_ELEMENTS } from './constants.js';
 
 // Wire up cross-module dependency after all modules are loaded
 setRenderAllConditionals(renderAllConditionals);
@@ -29,12 +29,12 @@ const isNonReactiveOrInside = (node) => {
 // Navigate tree using dot notation (handles .children at each level)
 const navigateTree = (tree, path) => {
   if (!path) return tree;
-  return path.split(".").reduce((node, key) => node?.children?.[key], tree);
+  return path.split('.').reduce((node, key) => node?.children?.[key], tree);
 };
 
 // Get or create a node in the tree at the given path
 const ensureNode = (tree, path) => {
-  const keys = path.split(".");
+  const keys = path.split('.');
   return keys.reduce((node, key) => {
     if (!node.children[key]) {
       node.children[key] = { children: {} };
@@ -43,14 +43,12 @@ const ensureNode = (tree, path) => {
   }, tree);
 };
 
-const main = (s, attrName = "vibe") => {
+const main = (s, attrName = 'vibe') => {
   // Find element(s) with the specified attribute
   const elements = document.querySelectorAll(`[${attrName}]`);
 
   if (elements.length === 0) {
-    console.info(
-      `[vibe] No element found with attribute "${attrName}". Falling back to body.`,
-    );
+    console.info(`[vibe] No element found with attribute "${attrName}". Falling back to body.`);
   } else if (elements.length > 1) {
     console.info(
       `[vibe] Multiple elements (${elements.length}) found with attribute "${attrName}". Hydrating the first one.`,
@@ -90,9 +88,7 @@ const main = (s, attrName = "vibe") => {
 
     const prev = structuredClone(previousState);
     previousState = { ...$, ...newState };
-    hooks.afterUpdate.forEach((callback) =>
-      callback(structuredClone({ ...$ }), prev),
-    );
+    hooks.afterUpdate.forEach((callback) => callback(structuredClone({ ...$ }), prev));
   });
 
   // Add hook subscription method (non-enumerable so it won't be spread/cloned with state)
@@ -101,34 +97,7 @@ const main = (s, attrName = "vibe") => {
       if (hooks[event]) {
         hooks[event].push(callback);
       }
-      return () => hooks[event] = hooks[event].filter((cb) => cb !== callback);
-    },
-    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,
-          });
-        }
-      }
+      return () => (hooks[event] = hooks[event].filter((cb) => cb !== callback));
     },
     enumerable: false,
   });
@@ -144,19 +113,53 @@ 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,
-        );
+        const entry = Object.entries(linkList).find(([_, element]) => element === target);
 
         // If parent isn't tracked, this node is outside the reactive scope
         if (!entry) return;
@@ -176,57 +179,37 @@ 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, $, $);
+        // 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, {}, $);
 
         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,
-        );
+        // Process iterations and conditionals in the newly added node
+        renderAllIterations(parsedNode, $, linkList);
+        renderAllConditionals(parsedNode, $, linkList);
 
-        // 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
-        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/iterate.js

@@ -32,7 +32,7 @@ const cloneTreeWithElements = (originalTree, clonedRoot) => {
     parsed: originalTree.parsed,
     element: clonedRoot,
     children: {},
-    ...(originalTree.attributes && { attributes: originalTree.attributes })
+    ...(originalTree.attributes && { attributes: originalTree.attributes }),
   };
 
   if (!originalTree.children) return cloned;
@@ -50,7 +50,9 @@ const cloneTreeWithElements = (originalTree, clonedRoot) => {
 
       // Find corresponding comments in cloned DOM
       const clonedStart = findComment(clonedChildNodes, startComment.textContent);
-      const clonedElse = elseComment ? findComment(clonedChildNodes, elseComment.textContent) : null;
+      const clonedElse = elseComment
+        ? findComment(clonedChildNodes, elseComment.textContent)
+        : null;
       const clonedEnd = findComment(clonedChildNodes, endComment.textContent);
 
       cloned.children[key] = {
@@ -60,14 +62,14 @@ const cloneTreeWithElements = (originalTree, clonedRoot) => {
           startComment: clonedStart || startComment,
           elseComment: clonedElse,
           endComment: clonedEnd || endComment,
-          branches // Branch templates are reused (they're cloned during mount)
+          branches, // Branch templates are reused (they're cloned during mount)
         },
         runtime: {
           activeBranch: undefined,
           activeInstance: null,
-          templateRemoved: false
+          templateRemoved: false,
         },
-        children: {}
+        children: {},
       };
       continue;
     }
@@ -88,13 +90,13 @@ const cloneTreeWithElements = (originalTree, clonedRoot) => {
           indexAlias: child.meta.indexAlias,
           startComment: clonedStart || startComment,
           endComment: clonedEnd || endComment,
-          template // Template is reused (cloned during render)
+          template, // Template is reused (cloned during render)
         },
         runtime: {
           instances: [],
-          templateRemoved: false
+          templateRemoved: false,
         },
-        children: {}
+        children: {},
       };
       continue;
     }
@@ -150,7 +152,7 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
     // Fallback for text-only templates
     if (!firstElement && clonedNodes.length > 0) {
       const container = document.createElement('span');
-      clonedNodes.forEach(node => container.appendChild(node.cloneNode(true)));
+      clonedNodes.forEach((node) => container.appendChild(node.cloneNode(true)));
       firstElement = container;
     }
 
@@ -165,7 +167,7 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
   return {
     element: firstElement,
     tree,
-    clonedNodes
+    clonedNodes,
   };
 };
 
@@ -222,7 +224,7 @@ export const createScopedState = (globalState, localVars, parentScope = {}) => {
         return { configurable: true, enumerable: true, value: parentScope[prop] };
       }
       return Reflect.getOwnPropertyDescriptor(target, prop);
-    }
+    },
   });
 };
 
@@ -247,11 +249,14 @@ export const renderAllIterations = (tree, state, linkList, parentScope = {}) =>
 
 // Callback for rendering conditionals - set by conditionals.js to avoid circular import
 let _renderAllConditionals = () => {};
-export const setRenderAllConditionals = (fn) => { _renderAllConditionals = fn; };
+export const setRenderAllConditionals = (fn) => {
+  _renderAllConditionals = fn;
+};
 
 // Initial render of an iteration block
 export const renderIteration = (iterationNode, state, linkList, parentScope = {}) => {
-  const { arrayPath, itemAlias, indexAlias, template, startComment, endComment } = iterationNode.meta;
+  const { arrayPath, itemAlias, indexAlias, template, startComment, endComment } =
+    iterationNode.meta;
 
   // Already rendered - updates go through updateIteration
   if (iterationNode.runtime.instances?.length > 0) return;
@@ -294,7 +299,7 @@ export const renderIteration = (iterationNode, state, linkList, parentScope = {}
     const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
 
     // Insert cloned nodes
-    clonedNodes.forEach(node => parent.insertBefore(node, endComment));
+    clonedNodes.forEach((node) => parent.insertBefore(node, endComment));
 
     // Recursively render nested iterations and conditionals
     if (tree) {
@@ -323,7 +328,11 @@ export const updateIteration = (iterationNode, newState, oldState, linkList, par
   const isFullToEmpty = oldArray.length > 0 && newArray.length === 0;
   const isLargeArray = newArray.length > 100 || oldArray.length > 100;
 
-  if (window.__VIBE_FAST_ITERATION__ && fastPath.canUseFastPath(template) && (isEmptyToFull || isFullToEmpty || isLargeArray)) {
+  if (
+    window.__VIBE_FAST_ITERATION__ &&
+    fastPath.canUseFastPath(template) &&
+    (isEmptyToFull || isFullToEmpty || isLargeArray)
+  ) {
     fastPath.updateFast(iterationNode, newArray, newState, startComment, endComment);
     return;
   }
@@ -333,16 +342,26 @@ export const updateIteration = (iterationNode, newState, oldState, linkList, par
   const newKeys = newArray.map((item, i) => getItemKey(item, i));
   const operations = computeDiff(oldKeys, newKeys, oldArray, newArray);
 
-  operations.forEach(op => {
+  operations.forEach((op) => {
     switch (op.type) {
-      case 'REMOVE': removeInstance(iterationNode, op.index); break;
-      case 'ADD': addInstance(iterationNode, op.item, op.index, newState, linkList, parentScope); break;
-      case 'MOVE': moveInstance(iterationNode, op.from, op.to); break;
-      case 'UPDATE': updateInstance(iterationNode, op.index, op.item, newState, linkList, parentScope); break;
+      case 'REMOVE':
+        removeInstance(iterationNode, op.index);
+        break;
+      case 'ADD':
+        addInstance(iterationNode, op.item, op.index, newState, linkList, parentScope);
+        break;
+      case 'MOVE':
+        moveInstance(iterationNode, op.from, op.to);
+        break;
+      case 'UPDATE':
+        updateInstance(iterationNode, op.index, op.item, newState, linkList, parentScope);
+        break;
     }
   });
 
-  iterationNode.runtime.instances.forEach((inst, i) => { inst.index = i; });
+  iterationNode.runtime.instances.forEach((inst, i) => {
+    inst.index = i;
+  });
 };
 
 // Add a new instance at the specified index
@@ -356,12 +375,14 @@ const addInstance = (iterationNode, item, index, state, linkList, parentScope) =
   const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
 
   // Find insertion point
-  const insertBefore = index < iterationNode.runtime.instances.length
-    ? iterationNode.runtime.instances[index].clonedNodes?.[0] || iterationNode.runtime.instances[index].element
-    : endComment;
+  const insertBefore =
+    index < iterationNode.runtime.instances.length
+      ? iterationNode.runtime.instances[index].clonedNodes?.[0] ||
+        iterationNode.runtime.instances[index].element
+      : endComment;
 
   // Insert cloned nodes
-  clonedNodes.forEach(node => startComment.parentNode.insertBefore(node, insertBefore));
+  clonedNodes.forEach((node) => startComment.parentNode.insertBefore(node, insertBefore));
 
   // Recursively render nested iterations and conditionals
   if (tree) {
@@ -380,7 +401,9 @@ const removeInstance = (iterationNode, index) => {
   const instance = iterationNode.runtime.instances[index];
 
   // Remove all cloned nodes from DOM
-  (instance.clonedNodes || [instance.element]).forEach(node => node?.parentNode?.removeChild(node));
+  (instance.clonedNodes || [instance.element]).forEach((node) =>
+    node?.parentNode?.removeChild(node),
+  );
 
   iterationNode.runtime.instances.splice(index, 1);
 };
@@ -401,11 +424,11 @@ const moveInstance = (iterationNode, fromIndex, toIndex) => {
   // Find new insertion point
   const nextInstance = iterationNode.runtime.instances[toIndex + 1];
   const insertBefore = nextInstance
-    ? (nextInstance.clonedNodes?.[0] || nextInstance.element)
+    ? nextInstance.clonedNodes?.[0] || nextInstance.element
     : iterationNode.meta.endComment;
 
   // Move all nodes
-  nodes.forEach(node => parent.insertBefore(node, insertBefore));
+  nodes.forEach((node) => parent.insertBefore(node, insertBefore));
 };
 
 // Update an instance with new item data
@@ -426,8 +449,8 @@ const updateInstance = (iterationNode, index, newItem, state, linkList, parentSc
   const insertBefore = oldNodes[oldNodes.length - 1]?.nextSibling;
   const parent = oldNodes[0]?.parentNode;
 
-  oldNodes.forEach(node => node?.parentNode?.removeChild(node));
-  clonedNodes.forEach(node => parent.insertBefore(node, insertBefore));
+  oldNodes.forEach((node) => node?.parentNode?.removeChild(node));
+  clonedNodes.forEach((node) => parent.insertBefore(node, insertBefore));
 
   // Recursively render nested iterations and conditionals
   if (tree) {
@@ -447,5 +470,5 @@ export default {
   renderIteration,
   updateIteration,
   renderAllIterations,
-  createScopedState
+  createScopedState,
 };

package/iteration-utils.js

@@ -4,7 +4,7 @@ import { ITERATION_START_REGEX, CONDITIONAL_START_REGEX } from './constants.js';
 // Resolve nested paths in state (e.g., "user.items" -> state.user.items)
 export const resolvePath = (obj, path) => {
   if (!path || !obj) return undefined;
-  return path.split(".").reduce((acc, part) => acc?.[part], obj);
+  return path.split('.').reduce((acc, part) => acc?.[part], obj);
 };
 
 // Clone template element preserving structure
@@ -16,11 +16,11 @@ export const cloneTemplate = (templateElement) => {
 export const findEndComment = (nodes, startIndex) => {
   let depth = 1;
   for (let i = startIndex; i < nodes.length; i++) {
-    if (nodes[i].nodeName === "#comment") {
+    if (nodes[i].nodeName === '#comment') {
       const text = nodes[i].textContent.trim();
       if (ITERATION_START_REGEX.test(text)) {
         depth++;
-      } else if (text === "/each") {
+      } else if (text === '/each') {
         depth--;
         if (depth === 0) {
           return i;
@@ -28,7 +28,7 @@ export const findEndComment = (nodes, startIndex) => {
       }
     }
   }
-  throw new Error("Unmatched <!-- each --> comment: missing <!-- /each -->");
+  throw new Error('Unmatched <!-- each --> comment: missing <!-- /each -->');
 };
 
 // Find matching <!-- /if --> and optional <!-- else --> with depth tracking
@@ -38,7 +38,7 @@ export const findConditionalEnd = (nodes, startIndex) => {
   let elseIndex = null;
 
   for (let i = startIndex; i < nodes.length; i++) {
-    if (nodes[i].nodeName === "#comment") {
+    if (nodes[i].nodeName === '#comment') {
       const text = nodes[i].textContent.trim();
 
       // Check for nested if
@@ -46,11 +46,11 @@ export const findConditionalEnd = (nodes, startIndex) => {
         depth++;
       }
       // Check for else at current depth
-      else if (text === "else" && depth === 1 && elseIndex === null) {
+      else if (text === 'else' && depth === 1 && elseIndex === null) {
         elseIndex = i;
       }
       // Check for /if
-      else if (text === "/if") {
+      else if (text === '/if') {
         depth--;
         if (depth === 0) {
           return { elseIndex, endIndex: i };
@@ -59,13 +59,13 @@ export const findConditionalEnd = (nodes, startIndex) => {
     }
   }
 
-  throw new Error("Unmatched <!-- if --> comment: missing <!-- /if -->");
+  throw new Error('Unmatched <!-- if --> comment: missing <!-- /if -->');
 };
 
 // Generate stable hash for objects
 export const stableHash = (obj) => {
-  if (obj === null || obj === undefined) return "null";
-  if (typeof obj !== "object") return String(obj);
+  if (obj === null || obj === undefined) return 'null';
+  if (typeof obj !== 'object') return String(obj);
 
   try {
     // Sort keys for stable hashing
@@ -96,7 +96,7 @@ export const deepEqual = (a, b) => {
     return a === b;
   }
 
-  if (typeof a !== "object" || typeof b !== "object") {
+  if (typeof a !== 'object' || typeof b !== 'object') {
     return a === b;
   }
 
@@ -166,12 +166,12 @@ export const longestCommonSubsequence = (arr1, arr2) => {
 // Generate unique key for array items
 export const getItemKey = (item, index) => {
   // 1. If item has 'id' property, use it
-  if (item && typeof item === "object" && "id" in item) {
+  if (item && typeof item === 'object' && 'id' in item) {
     return `id_${item.id}`;
   }
 
   // 2. If item is primitive, use value + index
-  if (typeof item !== "object" || item === null) {
+  if (typeof item !== 'object' || item === null) {
     return `val_${item}_${index}`;
   }
 
@@ -204,29 +204,23 @@ export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
     // Check if item content changed
     if (!deepEqual(oldArray[oldIdx], newArray[newIdx])) {
       operations.push({
-        type: "UPDATE",
+        type: 'UPDATE',
         index: newIdx,
         oldIndex: oldIdx,
         item: newArray[newIdx],
       });
     }
 
-    // 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
   oldKeys.forEach((key, idx) => {
     if (!processedOld.has(idx)) {
       operations.push({
-        type: "REMOVE",
+        type: 'REMOVE',
         index: idx,
         key,
       });
@@ -237,7 +231,7 @@ export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
   newKeys.forEach((key, idx) => {
     if (!processedNew.has(idx)) {
       operations.push({
-        type: "ADD",
+        type: 'ADD',
         index: idx,
         item: newArray[idx],
         key,
@@ -252,7 +246,7 @@ export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
       return priority[a.type] - priority[b.type];
     }
     // For REMOVE, process from end to beginning
-    if (a.type === "REMOVE") {
+    if (a.type === 'REMOVE') {
       return b.index - a.index;
     }
     // For others, process in order

package/link.js

@@ -1,5 +1,5 @@
 const recursive = (tree, results, tagChain) => {
-  results[tagChain.join(".")] = tree.element;
+  results[tagChain.join('.')] = tree.element;
 
   if (tree.children && Object.keys(tree.children).length > 0) {
     Object.keys(tree.children).forEach((tag) => {

package/package.json

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

package/parse.js

@@ -1,18 +1,23 @@
-import { hash } from './utils.js'
-import { findEndComment, findConditionalEnd } from './iteration-utils.js'
-import { NON_REACTIVE_ELEMENTS, BINDING_REGEX, ITERATION_REGEX, CONDITIONAL_REGEX } from './constants.js'
+import { hash } from './utils.js';
+import { findEndComment, findConditionalEnd } from './iteration-utils.js';
+import {
+  NON_REACTIVE_ELEMENTS,
+  BINDING_REGEX,
+  ITERATION_REGEX,
+  CONDITIONAL_REGEX,
+} from './constants.js';
 
 const parseHTML = (children, rootKey = undefined) =>
   children.reduce((s, element, i) => {
-    const { nodeName, textContent } = element
+    const { nodeName, textContent } = element;
     if (['#comment'].includes(nodeName)) {
-      return `${s}${nodeName === '#comment' ? `asd` : textContent}`
+      return `${s}${nodeName === '#comment' ? `asd` : textContent}`;
     }
-    const name = nodeName.startsWith('#') ? nodeName.slice(1) : nodeName
-    const innerNodeIdentifier = `${name}_${i}`.toLowerCase()
+    const name = nodeName.startsWith('#') ? nodeName.slice(1) : nodeName;
+    const innerNodeIdentifier = `${name}_${i}`.toLowerCase();
 
-    return rootKey || `${s}${`\$[${innerNodeIdentifier}]`}`
-  }, '')
+    return rootKey || `${s}${`\$[${innerNodeIdentifier}]`}`;
+  }, '');
 
 const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
   let result = {};
@@ -44,7 +49,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
 
           // Create a temporary container for the template
           const templateContainer = document.createElement('div');
-          templateNodes.forEach(node => {
+          templateNodes.forEach((node) => {
             templateContainer.appendChild(node.cloneNode(true));
           });
 
@@ -64,14 +69,14 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
               template: {
                 parsed: parseHTML([...templateContainer.childNodes]),
                 element: templateContainer,
-                children: templateParsed
-              }
+                children: templateParsed,
+              },
             },
             runtime: {
               instances: [],
-              templateRemoved: false
+              templateRemoved: false,
             },
-            children: {}
+            children: {},
           };
 
           // Mark template indices as processed
@@ -105,7 +110,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
 
           // Create temporary container for true branch
           const trueBranchContainer = document.createElement('div');
-          trueBranchNodes.forEach(node => {
+          trueBranchNodes.forEach((node) => {
             trueBranchContainer.appendChild(node.cloneNode(true));
           });
 
@@ -118,7 +123,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
           if (elseIndex !== null) {
             const falseBranchNodes = Array.from(children).slice(elseIndex + 1, endIndex);
             falseBranchContainer = document.createElement('div');
-            falseBranchNodes.forEach(node => {
+            falseBranchNodes.forEach((node) => {
               falseBranchContainer.appendChild(node.cloneNode(true));
             });
             falseBranchParsed = recursive([...falseBranchContainer.childNodes]);
@@ -137,21 +142,23 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
                 if: {
                   parsed: parseHTML([...trueBranchContainer.childNodes]),
                   element: trueBranchContainer,
-                  children: trueBranchParsed
+                  children: trueBranchParsed,
                 },
-                else: falseBranchContainer ? {
-                  parsed: parseHTML([...falseBranchContainer.childNodes]),
-                  element: falseBranchContainer,
-                  children: falseBranchParsed
-                } : null
-              }
+                else: falseBranchContainer
+                  ? {
+                      parsed: parseHTML([...falseBranchContainer.childNodes]),
+                      element: falseBranchContainer,
+                      children: falseBranchParsed,
+                    }
+                  : null,
+              },
             },
             runtime: {
               activeBranch: undefined,
               activeInstance: null,
-              templateRemoved: false
+              templateRemoved: false,
             },
-            children: {}
+            children: {},
           };
 
           // Mark template indices as processed
@@ -199,27 +206,42 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
         parsed,
         element,
         children: recursive(iteratableChildren),
-        ...(hasAttributeBindings && { attributes })
+        ...(hasAttributeBindings && { attributes }),
       };
     } else {
       result[nodeIdentifier] = {
         parsed: innerHTML || textContent,
         element,
         children: {},
-        ...(hasAttributeBindings && { attributes })
+        ...(hasAttributeBindings && { attributes }),
       };
     }
   }
 
   return result;
-}
+};
 
 export default (root, rootKey = undefined) => {
-  const { childNodes } = root
+  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 }),
+  };
+};

package/state.js

@@ -1,12 +1,12 @@
 export default (state, rerender) =>
   new Proxy(state, {
     set(obj, prop, value) {
-      const ref = Reflect.set(...arguments)
+      const ref = Reflect.set(...arguments);
       rerender({
         [prop]: value,
-      })
+      });
       // console.info("state change", { obj, prop, value });
-      return ref
+      return ref;
     },
     get(target, prop) {
       // if (typeof target[prop] === 'function') {
@@ -21,6 +21,6 @@ export default (state, rerender) =>
 
       // }
 
-      return Reflect.get(...arguments)
+      return Reflect.get(...arguments);
     },
-  })
+  });

package/utils.js

@@ -9,7 +9,7 @@ export const deepMerge = (target, source) => {
   if (target == null) return source;
 
   // If source is not an object, return it
-  if (typeof source !== "object") return source;
+  if (typeof source !== 'object') return source;
 
   // If source is an array, replace target array (don't merge arrays)
   if (Array.isArray(source)) return source;
@@ -27,8 +27,8 @@ export const deepMerge = (target, source) => {
       if (
         targetValue != null &&
         sourceValue != null &&
-        typeof targetValue === "object" &&
-        typeof sourceValue === "object" &&
+        typeof targetValue === 'object' &&
+        typeof sourceValue === 'object' &&
         !Array.isArray(targetValue) &&
         !Array.isArray(sourceValue)
       ) {
@@ -42,4 +42,3 @@ export const deepMerge = (target, source) => {
 
   return result;
 };
-