@ape-egg/vibe 1.0.2 → 1.0.5

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,7 @@
-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';
+import { evalInScope } from './utils.js';
 
 // Keep track of old state for diffing
 let previousState = {};
@@ -9,19 +10,6 @@ export const setPreviousState = (state) => {
   previousState = { ...state };
 };
 
-// Evaluate expression in the context of state
-const evalInScope = (expr, state) => {
-  try {
-    const keys = Object.keys(state);
-    const values = Object.values(state);
-    // Create a function with state keys as parameters and evaluate the expression
-    return new Function(...keys, `'use strict'; return (${expr})`)(...values);
-  } catch (e) {
-    // Fallback to undefined if evaluation fails
-    return undefined;
-  }
-};
-
 export default (affected, state, linkList = {}) => {
   affected.forEach((aff) => {
     // Handle iteration updates
@@ -40,12 +28,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 +85,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.`,
@@ -70,15 +68,23 @@ const main = (s, attrName = "vibe") => {
     afterDomMutation: [],
   };
 
-  // Observer reference - set after observer is created
+  // Observer reference and callback - defined here so state handler can access processMutations
   let observer = null;
+  let processMutations = null;
 
   const $ = state(s, (newState) => {
     const mergedState = deepMerge($, newState);
     const affectedElements = affected(parsedTree, previousState, mergedState);
 
-    if (observer) observer.disconnect();
+    // Capture pending mutations before disconnecting (takeRecords clears the queue)
+    let pendingMutations = [];
+    if (observer) {
+      pendingMutations = observer.takeRecords();
+      observer.disconnect();
+    }
+
     hydrate(affectedElements, mergedState, linkList);
+
     if (observer) {
       observer.observe(rootElement, {
         attributes: false,
@@ -86,13 +92,16 @@ const main = (s, attrName = "vibe") => {
         childList: true,
         subtree: true,
       });
+
+      // Process mutations that were pending before we disconnected
+      if (pendingMutations.length > 0 && processMutations) {
+        processMutations(pendingMutations);
+      }
     }
 
     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,7 +110,7 @@ const main = (s, attrName = "vibe") => {
       if (hooks[event]) {
         hooks[event].push(callback);
       }
-      return () => hooks[event] = hooks[event].filter((cb) => cb !== callback);
+      return () => (hooks[event] = hooks[event].filter((cb) => cb !== callback));
     },
     enumerable: false,
   });
@@ -116,7 +125,8 @@ const main = (s, attrName = "vibe") => {
   renderAllIterations(parsedTree, $, linkList);
   renderAllConditionals(parsedTree, $, linkList);
 
-  observer = new MutationObserver((mutations) => {
+  // Define observer callback as named function so we can call it manually for pending mutations
+  processMutations = (mutations) => {
     // Early exit if no mutations to process (common case)
     if (mutations.length === 0) return;
 
@@ -124,11 +134,8 @@ const main = (s, attrName = "vibe") => {
     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,
-        );
+        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;
@@ -136,9 +143,9 @@ const main = (s, attrName = "vibe") => {
         const [dotAnnotation] = entry;
         delete linkList[dotAnnotation];
 
-        const dotPath = dotAnnotation.split(".");
+        const dotPath = dotAnnotation.split('.');
         const name = dotPath.pop();
-        const parentDotAnnotation = dotPath.join(".");
+        const parentDotAnnotation = dotPath.join('.');
 
         const picked = navigateTree(parsedTree, parentDotAnnotation);
 
@@ -165,9 +172,7 @@ const main = (s, attrName = "vibe") => {
           return;
         }
 
-        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;
@@ -206,6 +211,10 @@ const main = (s, attrName = "vibe") => {
 
         hydrate(affectedElements, $, linkList);
 
+        // Process iterations and conditionals in the newly added node
+        renderAllIterations(parsedNode, $, linkList);
+        renderAllConditionals(parsedNode, $, linkList);
+
         hadChanges = true;
       });
     });
@@ -214,7 +223,9 @@ const main = (s, attrName = "vibe") => {
     if (hadChanges) {
       hooks.afterDomMutation.forEach((callback) => callback());
     }
-  });
+  };
+
+  observer = new MutationObserver(processMutations);
 
   observer.observe(rootElement, {
     attributes: false,

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,
 };