@ape-egg/vibe 1.9.0 → 1.9.5

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)
@@ -87,17 +84,24 @@ export default (affected, state, manifest = {}, oldState = {}) => {
           // Attribute: Truthful DOM representation, enables compiler snapshots via outerHTML
           const expr = isPureBinding[1];
           const value = evalInScope(expr, effectiveState, element);
-          element[attrName] = value;
+          if (element[attrName] !== value) element[attrName] = value;
           if (value !== undefined && value !== null) {
-            element.setAttribute(attrName, String(value));
+            const str = String(value);
+            if (element.getAttribute(attrName) !== str) element.setAttribute(attrName, str);
           }
         } else if (!isValueAttr && isPureBinding) {
-          // Boolean-like attributes: add or remove based on truthiness
+          // Boolean-like attributes: add or remove based on truthiness.
+          // Compare both presence AND value — initial hydration starts with
+          // the raw `@[...]` binding text as the attribute value, so
+          // `hasAttribute` alone isn't enough to know the canonical state is
+          // already set.
           const expr = isPureBinding[1];
           const value = evalInScope(expr, effectiveState, element);
           if (value) {
-            element.setAttribute(attrName, '');
-          } else {
+            if (element.getAttribute(attrName) !== '') {
+              element.setAttribute(attrName, '');
+            }
+          } else if (element.hasAttribute(attrName)) {
             element.removeAttribute(attrName);
           }
         } else {
@@ -105,7 +109,9 @@ export default (affected, state, manifest = {}, oldState = {}) => {
           const newValue = attrValue.replace(BINDING_REGEX, (_, expr) => {
             return evalInScope(expr, effectiveState, element);
           });
-          element.setAttribute(attrName, newValue);
+          if (element.getAttribute(attrName) !== newValue) {
+            element.setAttribute(attrName, newValue);
+          }
         }
       } catch (e) {}
       return;
@@ -128,11 +134,19 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       });
 
       // 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
+      // This prevents wiping child elements when parent has both text and element children.
+      // Skip the write when the value is already correct — the browser would repaint
+      // (and any in-flight CSS transition on the row would jitter) even when no value
+      // actually changed. Reactivity coverage is unchanged: the only state changes that
+      // hit this path either produce a new value (still applied) or don't (now no-op).
+      // Skip the write when the value is already correct — the browser would
+      // repaint (and any in-flight CSS transition would jitter) even when no
+      // value actually changed. Reactivity coverage is unchanged: state changes
+      // that produce a new value still apply; state changes that don't are now
+      // proper no-ops at the DOM layer.
       if (textNode && textNode.nodeType === 3) {
-        textNode.textContent = toReplace;
-      } else {
-        // Fallback: element has no children or is just a text container
+        if (textNode.textContent !== toReplace) textNode.textContent = toReplace;
+      } else if (element.textContent !== toReplace) {
         element.textContent = toReplace;
       }
     } catch (e) {}

package/runtime/index.js

@@ -4,8 +4,9 @@ import createManifest from './manifest.js';
 import hydrate from './hydrate.js';
 import affected from './affected.js';
 import { deepMerge, hash } from './utils.js';
-import { renderAllIterations, setRenderAllConditionals } from './iterate.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,
@@ -21,7 +22,7 @@ import {
   PHASE_READY,
   DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
-import { processComponent, abortComponentFetch, collectComponentIds, releaseOrphanedComponentState } from './component.js';
+import { processComponent, abortComponentFetch, collectComponentIds, releaseOrphanedComponentState, renderComponentTemplate } from './component.js';
 import { debugLog } from './debug.js';
 import { shouldCleanup, cleanup } from './cleanup.js';
 import { reconcile } from './reconcile.js';
@@ -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
@@ -634,6 +655,16 @@ const main = (s, config = {}, stringSelector = '') => {
     enumerable: false,
   });
 
+  // Pure-render path for surgical component HMR. Given raw component template
+  // HTML, callsite props, slot HTML, and existing componentIds, returns the
+  // processed HTML string the plugin's HMR handler can hand to $.reconcile.
+  // Scripts are NOT executed — callers use this only when they've verified
+  // script contents haven't changed (so registered state is still valid).
+  Object.defineProperty($, 'renderComponent', {
+    value: renderComponentTemplate,
+    enumerable: false,
+  });
+
   // Initial hydration - pass plain values so iteration can do reference comparison
   const initialState = extractPlainValue($);
   const affectedElements = affected(parsedTree, initialState, initialState);
@@ -850,6 +881,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++;
@@ -864,6 +908,9 @@ const main = (s, config = {}, stringSelector = '') => {
 
     // CLEANUP OF CURRENT STATE
     releaseOrphanedComponentState(removedComponentIds);
+    mutations.forEach(({ removedNodes: removedNodesList }) => {
+      releaseOrphanedIterationProps(removedNodesList);
+    });
 
     // Fire hooks once after all mutations are processed (not per-node)
     if (hadChanges) {