@ape-egg/vibe 1.1.2 → 1.3.0

package/runtime/parse.js

@@ -1,10 +1,10 @@
-import { hash } from './utils.js';
 import { findEndComment, findConditionalEnd } from './iteration-utils.js';
 import {
   NON_REACTIVE_ELEMENTS,
   BINDING_REGEX,
   ITERATION_REGEX,
   CONDITIONAL_REGEX,
+  DOM_ELEMENT_PROPERTIES,
 } from './constants.js';
 
 const parseHTML = (children, rootKey = undefined) =>
@@ -59,9 +59,9 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
           // Parse the template recursively
           const templateParsed = recursive([...templateContainer.childNodes], undefined, new Set(), stats);
 
-          // Store iteration metadata
-          const iterationKey = `iteration_${hash()}`;
-          result[iterationKey] = {
+          // Store iteration metadata (use index for deterministic keys)
+          const iterationKey = `iteration_${i}`;
+          const iterationNode = {
             type: 'iteration',
             meta: {
               arrayPath,
@@ -75,12 +75,15 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
                 children: templateParsed,
               },
             },
-            runtime: {
+            // Preserve runtime data from previous parse if it exists (stored on startComment by iterate.js)
+            // @ts-ignore - custom property added by iterate.js
+            runtime: element.__vibeIterationRuntime || {
               instances: [],
               templateRemoved: false,
             },
             children: {},
           };
+          result[iterationKey] = iterationNode;
 
           // Mark template indices as processed
           for (let j = i + 1; j < endIndex; j++) {
@@ -132,8 +135,8 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
             falseBranchParsed = recursive([...falseBranchContainer.childNodes], undefined, new Set(), stats);
           }
 
-          // Store conditional metadata
-          const conditionalKey = `conditional_${hash()}`;
+          // Store conditional metadata (use index for deterministic keys)
+          const conditionalKey = `conditional_${i}`;
           result[conditionalKey] = {
             type: 'conditional',
             meta: {
@@ -185,10 +188,21 @@ 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 = [];
-    if (element.attributes) {
+
+    // Skip hydrating attributes on fetched components - they need to be passed raw
+    const isFetchedComponent =
+      (nodeName === 'COMPONENT' || (nodeName === 'DIV' && element.classList?.contains('component'))) &&
+      element.hasAttribute('src');
+
+    if (element.attributes && !isFetchedComponent) {
       for (let j = 0; j < element.attributes.length; j++) {
         const attr = element.attributes[j];
         // Reset lastIndex before test - BINDING_REGEX has 'g' flag which persists state
@@ -200,6 +214,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 +233,16 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         }
       }
     }
+
+    // Helper to find component ID for an element
+    // Looks for nearest ancestor with data-vibe-component-id
+    function findComponentIdForElement(element) {
+      if (!element) return null;
+
+      // Find nearest component wrapper (tagged by component.js)
+      const wrapper = element.closest('[data-vibe-component-id]');
+      return wrapper ? wrapper.getAttribute('data-vibe-component-id') : null;
+    }
     const hasAttributeBindings = Object.keys(attributes).length > 0;
     const hasNameBindings = nameBindings.length > 0;
 
@@ -218,18 +254,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,50 @@
+// Scope resolution for component state
+
+/**
+ * Find the component ID that owns this element
+ * Finds nearest ancestor with data-vibe-component-id (set by component.js)
+ * @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) => {
+  if (!element || !element.closest) return null;
+
+  // Find nearest component wrapper (tagged by component.js)
+  const wrapper = element.closest('[data-vibe-component-id]');
+  return wrapper ? wrapper.getAttribute('data-vibe-component-id') : 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) {

package/runtime/utils.js

@@ -3,18 +3,76 @@ let hashCounter = 0;
 export const hash = () => `_${hashCounter++}`;
 
 // Evaluate expression in the context of state
-export const evalInScope = (expr, state) => {
+// Handles @[this.property] for component state and @[property] for global state
+export const evalInScope = (expr, state, element = null) => {
   try {
     // Normalize whitespace - collapse newlines/spaces to single space (resilient to IDE formatting)
-    const normalized = expr.replace(/\s+/g, ' ').trim();
-    const keys = Object.keys(state);
-    const values = Object.values(state);
-    return new Function(...keys, `'use strict'; return (${normalized})`)(...values);
+    let normalized = expr.replace(/\s+/g, ' ').trim();
+
+    // If expression contains 'this.', replace with component state path
+    if (normalized.includes('this.') && element) {
+      const componentId = findComponentIdForElement(element);
+      if (componentId) {
+        // Replace this.property with $['componentId'].property
+        normalized = normalized.replace(/\bthis\.(\w+)/g, `$['${componentId}'].$1`);
+      }
+    }
+
+    // Add $ to scope for this.property references
+    const effectiveState = { ...state, $: state };
+
+    const keys = Object.keys(effectiveState);
+    const values = Object.values(effectiveState);
+
+    const result = new Function(...keys, `'use strict'; return (${normalized})`)(...values);
+
+    // If result is undefined and we're accessing a component property, try case-insensitive match
+    // This handles HTML lowercasing attribute names like @[this.iconName] -> @[this.iconname]
+    if (result === undefined) {
+      const componentMatch = normalized.match(/\$\['([^']+)'\]\.(\w+)/);
+      if (componentMatch) {
+        const [, componentId, propName] = componentMatch;
+        const componentState = state[componentId];
+        if (componentState) {
+          // Try case-insensitive property lookup
+          const actualKey = Object.keys(componentState).find(k => k.toLowerCase() === propName.toLowerCase());
+          if (actualKey) {
+            return componentState[actualKey];
+          }
+        }
+      }
+    }
+
+    return result;
   } catch (e) {
     return undefined;
   }
 };
 
+// Helper to find component ID for an element
+// Walks up DOM tree to find nearest component wrapper
+export const findComponentIdForElement = (element) => {
+  if (!element || !element.closest) return null;
+
+  const wrapper = element.closest('[data-vibe-component-id]');
+  return wrapper ? wrapper.getAttribute('data-vibe-component-id') : null;
+};
+
+// Helper to resolve this.property paths to componentId.property
+// Used for component-scoped iterations, conditionals, etc.
+export const resolveThisPath = (path, element) => {
+  if (!path.startsWith('this.')) {
+    return path;
+  }
+
+  const componentId = findComponentIdForElement(element);
+  if (componentId) {
+    return path.replace(/^this\./, `${componentId}.`);
+  }
+
+  return path;
+};
+
 // Instead of using lodash-es as a dependency, we run our own deepMerge (mergeWith in lodash)
 export const deepMerge = (target, source) => {
   // Handle null/undefined

package/{runtime/vibe.css → vibe.css}

@@ -2,10 +2,12 @@
  * Elements with [vibe] attribute are hidden until framework removes it after hydration.
  * This prevents flash of unprocessed content and disables transitions during init.
  */
-[vibe] {
+[vibe-fouc],
+.vibe-fouc {
   visibility: hidden;
 }
 
-[vibe] * {
+[vibe-fouc] *,
+.vibe-fouc * {
   transition: none !important;
 }