@ape-egg/vibe 1.1.2 → 1.2.0

package/runtime/hydrate.js

@@ -3,27 +3,20 @@ 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 = {};
-
-export const setPreviousState = (state) => {
-  previousState = { ...state };
-};
-
-export default (affected, state, manifest = {}) => {
+export default (affected, state, manifest = {}, oldState = {}) => {
   affected.forEach((aff) => {
     // Use scoped state if provided (from iteration instances)
     const effectiveState = aff.scopedState || state;
 
     // Handle iteration updates
     if (aff.type === 'iteration') {
-      updateIteration(aff.node, state, previousState, manifest);
+      updateIteration(aff.node, state, oldState, manifest);
       return;
     }
 
     // Handle conditional updates
     if (aff.type === 'conditional') {
-      updateConditional(aff.node, state, previousState, manifest);
+      updateConditional(aff.node, state, oldState, manifest);
       return;
     }
 
@@ -33,7 +26,7 @@ export default (affected, state, manifest = {}) => {
       try {
         // HTML lowercases attribute names, so we need case-insensitive lookup
         // Try exact match first, then try finding a case-insensitive match
-        let attrName = evalInScope(matchInner, effectiveState);
+        let attrName = evalInScope(matchInner, effectiveState, element);
 
         // If exact match failed and expression is a simple property (no dots/brackets)
         if (!attrName && !matchInner.includes('.') && !matchInner.includes('[')) {
@@ -91,12 +84,12 @@ export default (affected, state, manifest = {}) => {
         if (isDomProperty && isPureBinding) {
           // For DOM properties like value, set the property directly
           const expr = isPureBinding[1];
-          const value = evalInScope(expr, effectiveState);
+          const value = evalInScope(expr, effectiveState, element);
           element[attrName] = value;
         } else if (!isValueAttr && isPureBinding) {
           // Boolean-like attributes: add or remove based on truthiness
           const expr = isPureBinding[1];
-          const value = evalInScope(expr, effectiveState);
+          const value = evalInScope(expr, effectiveState, element);
           if (value) {
             element.setAttribute(attrName, '');
           } else {
@@ -105,7 +98,7 @@ export default (affected, state, manifest = {}) => {
         } else {
           // Value attribute - replace bindings with values
           const newValue = attrValue.replace(BINDING_REGEX, (_, expr) => {
-            return evalInScope(expr, effectiveState);
+            return evalInScope(expr, effectiveState, element);
           });
           element.setAttribute(attrName, newValue);
         }
@@ -114,12 +107,12 @@ export default (affected, state, manifest = {}) => {
     }
 
     // Handle regular element updates
-    const { matches, matchOuter, matchInner, input, element } = aff;
+    const { matches, matchOuter, matchInner, input, element, textNode } = aff;
 
     // This prevents undefined store properties to throw an error
     try {
       // Evaluate the expression with state as context
-      const evaluated = evalInScope(matchInner, effectiveState);
+      const evaluated = evalInScope(matchInner, effectiveState, element);
 
       const toReplace = input.replaceAll(matchOuter, evaluated).trim();
 
@@ -129,10 +122,14 @@ export default (affected, state, manifest = {}) => {
         }
       });
 
-      element.textContent = toReplace;
+      // If we have a direct reference to the text node, update it specifically
+      // This prevents wiping child elements when parent has both text and element children
+      if (textNode && textNode.nodeType === 3) {
+        textNode.textContent = toReplace;
+      } else {
+        // Fallback: element has no children or is just a text container
+        element.textContent = toReplace;
+      }
     } catch (e) {}
   });
-
-  // Update previous state for next diff
-  setPreviousState(state);
 };

package/runtime/index.js

@@ -1,7 +1,7 @@
 import state from './state.js';
 import parse from './parse.js';
 import createManifest from './manifest.js';
-import hydrate, { setPreviousState } from './hydrate.js';
+import hydrate from './hydrate.js';
 import affected from './affected.js';
 import { deepMerge, hash } from './utils.js';
 import { renderAllIterations, setRenderAllConditionals } from './iterate.js';
@@ -22,23 +22,40 @@ import {
 import { processComponent, abortComponentFetch } from './component.js';
 import { debugLog } from './debug.js';
 import { shouldCleanup, cleanup } from './cleanup.js';
+import { generateComponentId, executeComponentScript } from './component-state.js';
 
 // Wire up cross-module dependency after all modules are loaded
 setRenderAllConditionals(renderAllConditionals);
 
-// Check if node itself or any ancestor is non-reactive or dehydrated
-const isNonReactiveOrInside = (node) => {
+// Check if node should be processed by Vibe
+const shouldProcessNode = (node) => {
+  // Only process element nodes
+  if (node.nodeType !== 1) return false;
+
+  // Fast check first: skip nodes without Vibe syntax (cheapest check)
+  const html = node.outerHTML;
+  if (
+    !html.includes('@[') &&
+    !html.includes('<!-- each') &&
+    !html.includes('<!-- if') &&
+    !html.includes('<component')
+  ) {
+    return false;
+  }
+
+  // Node has Vibe syntax - now check if it's in a non-reactive context
   let current = node;
   while (current && current !== document.body) {
     if (NON_REACTIVE_ELEMENTS.includes(current.nodeName)) {
-      return true;
+      return false;
     }
     if (current.hasAttribute?.('dehydrate')) {
-      return true;
+      return false;
     }
     current = current.parentElement;
   }
-  return false;
+
+  return true;
 };
 
 // Navigate tree using dot notation (handles .children at each level)
@@ -90,10 +107,11 @@ const processCoreLoop = (node, parsedNode, state, manifest, isNewNode, debug) =>
 
   // 2. Hydrate (replace @[...] bindings)
   // Use empty object as "previous state" for new nodes so all bindings are affected
-  const affectedElements = affected(parsedNode, isNewNode ? {} : previousState, state);
+  const oldStateForAffected = isNewNode ? {} : previousState;
+  const affectedElements = affected(parsedNode, oldStateForAffected, state);
   if (affectedElements.length > 0) {
     hydratedCount = affectedElements.length;
-    hydrate(affectedElements, state, manifest);
+    hydrate(affectedElements, state, manifest, oldStateForAffected);
   }
 
   // 3. Conditionals (evaluate <!-- if -->)
@@ -139,6 +157,45 @@ const main = (s, attrName = 'vibe', config = {}) => {
 
   debugLog(PHASE_ATTACH, `Vibe attached to`, debug, 0, rootElement);
 
+  // Process inline component scripts FIRST (before parse)
+  // This sets componentIds so parse can rewrite event handlers
+  const componentScripts = rootElement.querySelectorAll('script[type="component"]');
+
+  if (componentScripts.length > 0) {
+    componentScripts.forEach((script) => {
+      // Skip if already processed (e.g., by auto.js)
+      if (script.hasAttribute('data-vibe-component-id')) return;
+
+      const scriptContent = script.textContent?.trim() || '';
+      if (!scriptContent) return;
+
+      const componentId = generateComponentId();
+
+      // Store componentId on script element BEFORE parsing
+      script.setAttribute('data-vibe-component-id', componentId);
+
+      // Tag all following sibling elements with this component ID (shallow)
+      // Stop at next component script or end of siblings
+      let sibling = script.nextElementSibling;
+      while (sibling) {
+        // Stop if we hit another component script
+        if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'component') {
+          break;
+        }
+        // Tag only the sibling (descendants will use closest() to find it)
+        sibling.setAttribute('data-vibe-component-id', componentId);
+        sibling = sibling.nextElementSibling;
+      }
+
+      // Execute component script to get state
+      const componentState = executeComponentScript(scriptContent);
+
+      // Add component state to initial state
+      s[componentId] = componentState;
+    });
+  }
+
+  // Now parse (event handlers will be rewritten correctly)
   let parsedTree = parse(rootElement);
   let manifest = createManifest(parsedTree);
 
@@ -171,19 +228,33 @@ const main = (s, attrName = 'vibe', config = {}) => {
     afterDomMutation: [],
   };
 
+  // Extract plain values from proxy (removes proxy wrappers)
+  const extractPlainValue = (obj) => {
+    if (obj === null || typeof obj !== 'object') return obj;
+    if (Array.isArray(obj)) return obj.map(extractPlainValue);
+    const plain = {};
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        plain[key] = extractPlainValue(obj[key]);
+      }
+    }
+    return plain;
+  };
+
   // 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 $ = state(s, (newState, oldState) => {
+    // Extract current state (after mutation)
+    const currentState = extractPlainValue($);
+    const changedProp = Object.keys(newState)[0];
 
-    // Find what changed
-    const affectedElements = affected(parsedTree, previousState, mergedState);
+    // Find what changed (compare previousState vs currentState)
+    const affectedElements = affected(parsedTree, previousState, currentState);
 
     if (affectedElements.length > 0) {
-      const changedKeys = Object.keys(newState).join(', ');
-      debugLog(PHASE_UPDATE, `state changed (${changedKeys})`, debug);
+      debugLog(PHASE_UPDATE, `state changed (${changedProp})`, debug);
 
       // Capture pending mutations before disconnecting (takeRecords clears the queue)
       let pendingMutations = [];
@@ -194,11 +265,11 @@ const main = (s, attrName = 'vibe', config = {}) => {
 
       // Run core loop on the full tree (hydrate will use affected list)
       // isNewNode = false because this is a state update, not a DOM mutation
-      hydrate(affectedElements, mergedState, manifest);
+      hydrate(affectedElements, currentState, manifest, previousState);
 
       // After hydrate, check for conditional/iteration changes
-      const conditionalCount = renderAllConditionals(parsedTree, mergedState, manifest);
-      const iterationCount = renderAllIterations(parsedTree, mergedState, manifest);
+      const conditionalCount = renderAllConditionals(parsedTree, currentState, manifest);
+      const iterationCount = renderAllIterations(parsedTree, currentState, manifest);
 
       if (observer) {
         observer.observe(rootElement, {
@@ -215,22 +286,10 @@ const main = (s, attrName = 'vibe', config = {}) => {
       }
     }
 
-    // Deep clone that handles proxies (structuredClone fails on proxy objects)
-    const deepClone = (obj) => {
-      if (obj === null || typeof obj !== 'object') return obj;
-      if (Array.isArray(obj)) return obj.map(deepClone);
-      const cloned = {};
-      for (const key in obj) {
-        if (obj.hasOwnProperty(key)) {
-          cloned[key] = deepClone(obj[key]);
-        }
-      }
-      return cloned;
-    };
-
-    const prev = deepClone(previousState);
-    previousState = { ...$, ...newState };
-    hooks.afterUpdate.forEach((callback) => callback(deepClone({ ...$ }), prev));
+    // Store previous state for hooks (currentState is already plain, no need to clone)
+    const prev = previousState;
+    previousState = currentState;
+    hooks.afterUpdate.forEach((callback) => callback(currentState, prev));
   });
 
   // Add hook subscription method (non-enumerable so it won't be spread/cloned with state)
@@ -244,8 +303,9 @@ const main = (s, attrName = 'vibe', config = {}) => {
     enumerable: false,
   });
 
-  // Initial hydration
-  const affectedElements = affected(parsedTree, $, $);
+  // Initial hydration - pass plain values so iteration can do reference comparison
+  const initialState = extractPlainValue($);
+  const affectedElements = affected(parsedTree, initialState, initialState);
 
   debugLog(
     PHASE_HYDRATE,
@@ -257,14 +317,13 @@ const main = (s, attrName = 'vibe', config = {}) => {
     debug,
   );
 
-  hydrate(affectedElements, $, manifest);
-
+  // Hydrate with proxy $ so DOM bindings work
+  // Pass initialState as oldState for iterations (won't actually update, just initial render)
+  hydrate(affectedElements, $, manifest, initialState);
 
   // Render all iterations and conditionals after initial hydration
-  setPreviousState($);
-  previousState = { ...$ };
-
-  const iterationCount = renderAllIterations(parsedTree, $, manifest);
+  // Use initialState (plain values) for iteration rendering so reference comparison works
+  const iterationCount = renderAllIterations(parsedTree, initialState, manifest);
   if (iterationCount > 0)
     debugLog(
       PHASE_ITERATE,
@@ -288,6 +347,9 @@ const main = (s, attrName = 'vibe', config = {}) => {
       debug,
     );
 
+  // After all initial rendering, capture a clean snapshot for comparison
+  previousState = extractPlainValue($);
+
   // 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)
@@ -353,8 +415,8 @@ const main = (s, attrName = 'vibe', config = {}) => {
       });
 
       addedNodesList.forEach((node) => {
-        // Skip if node itself or any ancestor is non-reactive
-        if (isNonReactiveOrInside(node)) {
+        // Skip nodes that aren't element nodes, are non-reactive, or lack Vibe syntax
+        if (!shouldProcessNode(node)) {
           return;
         }
 
@@ -539,12 +601,16 @@ const main = (s, attrName = 'vibe', config = {}) => {
         ...config,
         _forceSync: true,
         _observer: observer,
-        _processMutations: processMutations
+        _processMutations: processMutations,
       };
-      processComponent(rootElement, () => {
-        // When all components are done, run cleanup check
-        checkCleanup();
-      }, componentConfig);
+      processComponent(
+        rootElement,
+        () => {
+          // When all components are done, run cleanup check
+          checkCleanup();
+        },
+        componentConfig,
+      );
     }
   };
 
@@ -596,7 +662,7 @@ const main = (s, attrName = 'vibe', config = {}) => {
     ...config,
     _forceSync: true,
     _observer: observer,
-    _processMutations: processMutations
+    _processMutations: processMutations,
   };
 
   processComponent(

package/runtime/iterate.js

@@ -2,6 +2,7 @@ import parse from './parse.js';
 import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { resolvePath, getItemKey, computeDiff } from './iteration-utils.js';
+import { resolveThisPath } from './utils.js';
 
 // Fast path for iteration rendering (opt-in via window.__VIBE_FAST_ITERATION__)
 // See: _vibe-compiled-iteration-batch.js for implementation details
@@ -153,7 +154,7 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
   }
 
   if (tree) {
-    const affectedElements = affected(tree, {}, scopedState);
+    const affectedElements = affected(tree, {}, scopedState, [], scopedState);
     hydrate(affectedElements, scopedState);
   }
 
@@ -278,7 +279,10 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
 
   const parent = startComment.parentNode;
 
-  const array = resolvePath(state, arrayPath);
+  // Handle this.property for component-scoped arrays
+  const resolvedArrayPath = resolveThisPath(arrayPath, startComment.parentElement);
+
+  const array = resolvePath(state, resolvedArrayPath);
   if (!Array.isArray(array) || array.length === 0) {
     iterationNode.runtime.instances = [];
     return;
@@ -327,8 +331,12 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   if (!iterationNode.runtime.instances || !iterationNode.runtime.templateRemoved) return;
 
   const { arrayPath, template, startComment, endComment } = iterationNode.meta;
-  const oldArray = resolvePath(oldState, arrayPath) || [];
-  const newArray = resolvePath(newState, arrayPath) || [];
+
+  // Handle this.property for component-scoped arrays
+  const resolvedArrayPath = resolveThisPath(arrayPath, startComment.parentElement);
+
+  const oldArray = resolvePath(oldState, resolvedArrayPath) || [];
+  const newArray = resolvePath(newState, resolvedArrayPath) || [];
 
   // Fast path: opt-in via window.__VIBE_FAST_ITERATION__ (preview of Vibe Compiled)
   // Use for bulk operations (large arrays or empty→full transitions)

package/runtime/parse.js

@@ -5,6 +5,7 @@ import {
   BINDING_REGEX,
   ITERATION_REGEX,
   CONDITIONAL_REGEX,
+  DOM_ELEMENT_PROPERTIES,
 } from './constants.js';
 
 const parseHTML = (children, rootKey = undefined) =>
@@ -185,6 +186,11 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
     const name = nodeName.startsWith('#') ? nodeName.slice(1) : nodeName;
     const nodeIdentifier = `${name}_${i}`.toLowerCase();
 
+    // For text nodes, use parent element (text nodes can't have attributes)
+    const isTextNode = nodeName === '#text';
+    const elementForBindings = isTextNode ? element.parentElement : element;
+    const textNodeRef = isTextNode ? element : null; // Store reference to actual text node
+
     // Check for attribute bindings
     const attributes = {};
     const nameBindings = [];
@@ -200,6 +206,18 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
           continue; // Don't process as regular attribute
         }
 
+        // Rewrite event handlers with this. to use component state
+        if (attr.name.startsWith('on') && attr.value.includes('this.')) {
+          const componentId = findComponentIdForElement(element);
+          if (componentId) {
+            // Rewrite this.property to $['componentId'].property, but skip DOM properties
+            const rewritten = attr.value.replace(/\bthis\.(\w+)/g, (match, prop) => {
+              return DOM_ELEMENT_PROPERTIES.has(prop) ? match : `$['${componentId}'].${prop}`;
+            });
+            element.setAttribute(attr.name, rewritten);
+          }
+        }
+
         // Check if attribute value contains binding
         BINDING_REGEX.lastIndex = 0;
         if (BINDING_REGEX.test(attr.value)) {
@@ -207,6 +225,32 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         }
       }
     }
+
+    // Helper to find component ID for an element
+    function findComponentIdForElement(element) {
+      if (!element || !element.parentElement) return null;
+
+      let current = element;
+
+      while (current && current !== document.body) {
+        // Check previous siblings for script[data-vibe-component-id]
+        let sibling = current.previousElementSibling;
+        while (sibling) {
+          if (
+            sibling.tagName === 'SCRIPT' &&
+            sibling.getAttribute('type') === 'component' &&
+            sibling.hasAttribute('data-vibe-component-id')
+          ) {
+            return sibling.getAttribute('data-vibe-component-id');
+          }
+          sibling = sibling.previousElementSibling;
+        }
+
+        current = current.parentElement;
+      }
+
+      return null;
+    }
     const hasAttributeBindings = Object.keys(attributes).length > 0;
     const hasNameBindings = nameBindings.length > 0;
 
@@ -218,18 +262,20 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
 
       result[rootKey || nodeIdentifier] = {
         parsed,
-        element,
+        element: elementForBindings,
         children: recursive(iteratableChildren, undefined, new Set(), stats),
         ...(hasAttributeBindings && { attributes }),
         ...(hasNameBindings && { nameBindings }),
+        ...(textNodeRef && { textNode: textNodeRef }),
       };
     } else {
       result[nodeIdentifier] = {
         parsed: innerHTML || textContent,
-        element,
+        element: elementForBindings,
         children: {},
         ...(hasAttributeBindings && { attributes }),
         ...(hasNameBindings && { nameBindings }),
+        ...(textNodeRef && { textNode: textNodeRef }),
       };
     }
   }

package/runtime/scope.js

@@ -0,0 +1,70 @@
+// Scope resolution for component state
+
+/**
+ * Find the component ID that owns this element
+ * Walks up DOM to find nearest script[data-vibe-component-id]
+ * @param {Element} element - DOM element to find component for
+ * @returns {string|null} - Component ID or null if not in component scope
+ */
+export const findComponentId = (element) => {
+  let current = element;
+
+  while (current && current !== document.body) {
+    // Check if this element has component ID
+    if (current.hasAttribute && current.hasAttribute('data-vibe-component-id')) {
+      return current.getAttribute('data-vibe-component-id');
+    }
+
+    // Check previous siblings for script[data-vibe-component-id]
+    let sibling = current.previousElementSibling;
+    while (sibling) {
+      if (
+        sibling.tagName === 'SCRIPT' &&
+        sibling.getAttribute('type') === 'component' &&
+        sibling.hasAttribute('data-vibe-component-id')
+      ) {
+        return sibling.getAttribute('data-vibe-component-id');
+      }
+      sibling = sibling.previousElementSibling;
+    }
+
+    current = current.parentElement;
+  }
+
+  return null;
+};
+
+/**
+ * Resolve a property path with component scope fallback
+ * Checks component state first, then global state
+ * @param {string} path - Property path (e.g., "count" or "user.name")
+ * @param {Element} element - DOM element for context
+ * @param {object} globalState - Global $ object
+ * @returns {*} - Resolved value
+ */
+export const resolveWithScope = (path, element, globalState) => {
+  const componentId = findComponentId(element);
+
+  if (componentId && globalState[componentId]) {
+    // Check component state first
+    const componentState = globalState[componentId];
+    const value = resolvePath(path, componentState);
+
+    if (value !== undefined) {
+      return value;
+    }
+  }
+
+  // Fallback to global state
+  return resolvePath(path, globalState);
+};
+
+/**
+ * Resolve a dot-notation path in an object
+ * @param {string} path - Property path
+ * @param {object} obj - Object to resolve path in
+ * @returns {*} - Resolved value or undefined
+ */
+const resolvePath = (path, obj) => {
+  return path.split('.').reduce((current, key) => current?.[key], obj);
+};

package/runtime/state.js

@@ -16,17 +16,22 @@ const createDeepProxy = (target, rerender, rootState = null, rootProp = null) =>
   const proxy = new Proxy(target, {
     set(obj, prop, value) {
       const oldValue = obj[prop];
-      const ref = Reflect.set(obj, prop, value);
 
       // Only trigger rerender if value actually changed
       if (oldValue !== value) {
-        // If we're at root level, use the prop being set
-        // If we're nested, use the root prop that contains this nested object
+        // Perform the mutation
+        const ref = Reflect.set(obj, prop, value);
+
+        // Trigger rerender with changed state
+        // If we're nested, use the root prop; otherwise use the prop itself
         const changedProp = rootProp || prop;
-        rerender({ [changedProp]: rootState[changedProp] });
+        rerender({ [changedProp]: rootState[changedProp] }, null);
+
+        return ref;
       }
 
-      return ref;
+      // No change, just set
+      return Reflect.set(obj, prop, value);
     },
 
     get(target, prop) {