@ape-egg/vibe 1.1.2 → 1.2.0

package/runtime/utils.js

@@ -3,18 +3,85 @@ 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
+export const findComponentIdForElement = (element) => {
+  if (!element) return null;
+
+  // First check if element itself has the ID (tagged during parse)
+  if (element.hasAttribute('data-vibe-component-id')) {
+    return element.getAttribute('data-vibe-component-id');
+  }
+
+  // Check if any ancestor has the ID
+  const ancestor = element.closest('[data-vibe-component-id]');
+  if (ancestor) {
+    return ancestor.getAttribute('data-vibe-component-id');
+  }
+
+  return 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