@ape-egg/vibe 1.9.1 → 1.9.6

package/runtime/hydrate.js

@@ -1,7 +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 { evalInScope } from './utils.js';
+import { evalInScope, resolveCaseInsensitivePath } from './utils.js';
 
 export default (affected, state, manifest = {}, oldState = {}) => {
   affected.forEach((aff) => {
@@ -24,18 +24,15 @@ export default (affected, state, manifest = {}, oldState = {}) => {
     if (aff.type === 'nameBinding') {
       const { nameBinding, matchInner, element } = aff;
       try {
-        // HTML lowercases attribute names, so we need case-insensitive lookup
-        // Try exact match first, then try finding a case-insensitive match
+        // HTML lowercases attribute names, so we need case-insensitive lookup.
+        // Try exact match first, then walk the path case-insensitively if the
+        // exact lookup returned nothing — this recovers camelCase property
+        // names in dotted paths like `<icon @[fx.convertsIcon]>` (arrives at
+        // runtime as `@[fx.convertsicon]`).
         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('[')) {
-          // Find the property with case-insensitive match
-          const keys = Object.keys(effectiveState);
-          const matchingKey = keys.find(k => k.toLowerCase() === matchInner.toLowerCase());
-          if (matchingKey) {
-            attrName = effectiveState[matchingKey];
-          }
+        if (!attrName) {
+          attrName = resolveCaseInsensitivePath(effectiveState, matchInner);
         }
 
         // Track multiple name bindings per element (need a map of binding -> evaluated attr)

package/runtime/index.js

@@ -6,6 +6,7 @@ import affected from './affected.js';
 import { deepMerge, hash } from './utils.js';
 import { renderAllIterations, setRenderAllConditionals, releaseOrphanedIterationProps } from './iterate.js';
 import { renderAllConditionals, branchNodeRegistry, managedNodes } from './conditionals.js';
+import { installScopeResolver } from './loop-scope.js';
 import {
   NON_REACTIVE_ELEMENTS,
   PHASE_ATTACH,
@@ -327,6 +328,10 @@ let previousState = {};
 const main = (s, config = {}, stringSelector = '') => {
   const debug = !!config?.debug;
   const verbose = !!config?.verbose;
+  globalThis.__vibeDebug = debug;
+
+  // Expose the global `$scope` resolver used by loop-scoped `on*` handlers.
+  installScopeResolver();
 
   // Detect if running in compiler's headless browser
   // When true: skip cleanup to preserve [vibe] attribute in compiled HTML
@@ -550,7 +555,17 @@ const main = (s, config = {}, stringSelector = '') => {
     // while still detecting binding changes inside iteration instances.
     const currentState = { ...previousState };
     for (const prop of changedProps) {
-      currentState[prop] = extractPlainValue($[prop]);
+      // Distinguish "set to undefined" (key still present in $) from "deleted"
+      // (key absent from $). For deletions, removing from currentState matches
+      // the live proxy's shape — otherwise downstream consumers that pass
+      // currentState as `$` to evalInScope (e.g. iterations that re-render via
+      // bindings reading the root state) would see the deleted key as a phantom
+      // own-property with value `undefined`.
+      if (prop in $) {
+        currentState[prop] = extractPlainValue($[prop]);
+      } else {
+        delete currentState[prop];
+      }
     }
 
     // Find what changed (compare previousState vs currentState)
@@ -608,6 +623,11 @@ const main = (s, config = {}, stringSelector = '') => {
   });
 
   // Add hook subscription method (non-enumerable so it won't be spread/cloned with state)
+  // `configurable: true` lets a component script's scoped `$` Proxy (built in
+  // component.js) legally return a wrapped `.on` that auto-registers cleanup
+  // — the Proxy invariant rejects overriding non-configurable + non-writable
+  // data properties. Enumerable stays false so `on` doesn't leak into state
+  // snapshots or Object.keys($).
   Object.defineProperty($, 'on', {
     value: (event, callback) => {
       if (hooks[event]) {
@@ -616,6 +636,7 @@ const main = (s, config = {}, stringSelector = '') => {
       return () => (hooks[event] = hooks[event].filter((cb) => cb !== callback));
     },
     enumerable: false,
+    configurable: true,
   });
 
   // Promise that resolves after the ready hook fires and all ready callbacks
@@ -644,6 +665,13 @@ const main = (s, config = {}, stringSelector = '') => {
     enumerable: false,
   });
 
+  // Expose the live reactive proxy to the iteration stamper so loop-scoped
+  // `on*` handlers (`$scope`) resolve the SAME object identity the app sees via
+  // `$`, instead of the plain diff-snapshot clones iterations render against
+  // (see extractPlainValue below). Non-enumerable so it never shows up in the
+  // manifest's node-path entry iteration.
+  Object.defineProperty(manifest, '__live', { value: $, enumerable: false, configurable: true });
+
   // Initial hydration - pass plain values so iteration can do reference comparison
   const initialState = extractPlainValue($);
   const affectedElements = affected(parsedTree, initialState, initialState);
@@ -860,6 +888,19 @@ const main = (s, config = {}, stringSelector = '') => {
         iteratedCount += counts.iteratedCount;
         evaluatedCount += counts.evaluatedCount;
 
+        // For inlined `<component>` wrappers belonging to an iteration row
+        // (marked by component.js's resolveIterationComponentProps transfer),
+        // stash the parsed tree on the wrapper. processCoreLoop has just run
+        // hydrate + renderAllConditionals + renderAllIterations on it, so
+        // `parsedNode` carries live `runtime.activeInstance` /
+        // `runtime.instances` data — exactly what `affected.js` needs to walk
+        // into branch / row content. Iterate.js's update path consumes this
+        // tree to re-hydrate bindings inside the inlined component on each
+        // row-scope change without rebuilding the wrapper's DOM.
+        if (node.nodeType === 1 && node._vibeIterPropExprs) {
+          node._vibeIterTree = parsedNode;
+        }
+
         // Count elements vs nodes separately
         if (node.nodeName.startsWith('#')) {
           addedNodes++;