@ape-egg/vibe 4.0.1 → 4.1.1

package/runtime/parse.js

@@ -18,17 +18,12 @@ import {
 import { rewriteHandlerAliases } from './loop-scope.js';
 import './this-scope.js';
 
-// Walks up the DOM for the nearest component wrapper tagged by component.js.
-// Used to rewrite `this.property` in event handlers to the component's state path.
 const findComponentIdForElement = (element) => {
   if (!element?.closest) return null;
   const wrapper = element.closest('[data-vibe-component-id]');
   return wrapper ? wrapper.getAttribute('data-vibe-component-id') : null;
 };
 
-// `key` is reserved on fetched-component wrappers and remounts on CHANGE — a
-// literal key can never change, so it can never fire. Warn once per value
-// instead of dying silently (reparses would otherwise spam).
 const warnedStaticKeys = new Set();
 const warnStaticKey = (key) => {
   if (warnedStaticKeys.has(key)) return;
@@ -38,18 +33,6 @@ const warnStaticKey = (key) => {
   );
 };
 
-// Single source of truth for reading attribute/name bindings off an element.
-// Called from both the root handler and recursive() so they can't drift. Any
-// element classified as a fetched component (`<component src>` or
-// `<div class="component" src>`) captures ONLY a bound src (`src="@[page.src]"`
-// — resolved by hydration before the fetch, re-mounted on change) and a bound
-// key (`key="@[page.path]"` — a key change remounts the same src); every other
-// attribute is a prop owned by processComponent and must stay raw — hydrating
-// them would coerce objects to "[object Object]" or strip boolean-like attrs
-// to empty. A mounted wrapper carries the authored bindings in data-vibe-src /
-// data-vibe-key (stamped by finalize — the src attribute was consumed by the
-// fetch), so the knowledge survives every wrapper replacement: reparsing the
-// live DOM alone rebuilds it.
 const captureAttributeBindings = (element, aliasSet) => {
   const nodeName = element.nodeName;
   const isFetchedComponent =
@@ -84,17 +67,11 @@ const captureAttributeBindings = (element, aliasSet) => {
     const attr = element.attributes[j];
     BINDING_REGEX.lastIndex = 0;
 
-    // A name-binding the compiler relocated into data-vibe-namebind because its
-    // expression has whitespace (barred from attribute-name position): the value
-    // holds the verbatim @[expr](s). Treat it as a name binding, not a value binding.
     if (attr.name === 'data-vibe-namebind') {
       nameBindings.push(attr.value);
       continue;
     }
 
-    // A src-family binding parked on data-vibe-<attr> (by an earlier parse of
-    // this template, or by component finalize neutralizing fetched HTML):
-    // bind it to the real attribute — hydration writes the evaluated URL there.
     if (isFetchableElement && attr.name.startsWith('data-vibe-')) {
       const realName = attr.name.slice(10);
       if (FETCH_SRC_ATTRS.includes(realName)) {
@@ -103,11 +80,6 @@ const captureAttributeBindings = (element, aliasSet) => {
       }
     }
 
-    // A raw binding-valued src reaching a fetchable element fires a request
-    // for the literal `@[...]` text (innerHTML parse and cloneNode both
-    // trigger it). Park it on data-vibe-<attr> — after the loop, since
-    // removeAttribute would shift the live NamedNodeMap being iterated —
-    // so the template and every clone of it are inert until hydration.
     if (isFetchableElement && FETCH_SRC_ATTRS.includes(attr.name)) {
       BINDING_REGEX.lastIndex = 0;
       if (BINDING_REGEX.test(attr.value)) {
@@ -117,32 +89,16 @@ const captureAttributeBindings = (element, aliasSet) => {
       }
     }
 
-    // Attribute name itself contains a binding (e.g. <icon @[section.icon]>).
     if (BINDING_REGEX.test(attr.name)) {
       nameBindings.push(attr.name);
       continue;
     }
 
-    // Event handlers get two compile-time rewrites, computed off the original
-    // value and written once:
-    //   1. `this.` inside a component scope → `$this(this).` — resolved at
-    //      FIRE time by this-scope.js: declared state keys hit the bucket,
-    //      everything else stays the native element. Fire-time resolution is
-    //      load-bearing: compiled pages register component state after the
-    //      initial parse, so no key check is possible here.
-    //   2. bare loop-variable aliases → `$scope(this,'alias')` (loop-scoped
-    //      handlers — only when an enclosing <!-- each --> alias is in scope).
     if (attr.name.startsWith('on')) {
       let v = attr.value;
       if (v.includes('this.')) {
         const componentId = findComponentIdForElement(element);
         if (componentId) {
-          // `$.this.X` (component-state write through the root) must be
-          // consumed as one reference BEFORE the bare `this.X` pass — that
-          // pass alone would leave the `$.` prefix behind and produce
-          // `$.$this(this).X`. Runtime-fetched components arrive with this
-          // form already rewritten by component.js; compiled pages inline the
-          // authored form, so parse meets it raw.
           v = v.replace(STATE_THIS_PROP_REGEX, (_, prop) => `$['${componentId}'].${prop}`);
           v = v.replace(THIS_PROP_REGEX, (_, prop) => `$this(this).${prop}`);
         }
@@ -172,10 +128,6 @@ const captureAttributeBindings = (element, aliasSet) => {
   };
 };
 
-// Walk a parsed children map for any iteration node carrying scoped handlers.
-// Each iteration node's own flag already aggregates its descendants, so we take
-// the flag without re-descending into its template; we still recurse through
-// elements and conditional branches to reach nested iteration nodes.
 const subtreeHasScopedHandlers = (nodes) => {
   for (const key in nodes) {
     const node = nodes[key];
@@ -211,30 +163,21 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
   let result = {};
 
   for (let i = 0; i < children.length; i++) {
-    // Skip if this index was part of an iteration template
     if (skipIndices.has(i)) continue;
 
     const element = children[i];
     const { nodeName, childNodes, outerHTML, innerHTML, textContent } = element;
 
-    // Skip non-reactive elements and dehydrated elements
     if (NON_REACTIVE_ELEMENTS.includes(nodeName)) continue;
     if (element.hasAttribute?.(DEHYDRATE_CLASS_OR_ATTR) || element.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)) {
       stats.skipped++;
       continue;
     }
 
-    // Handle iteration comments
     if (nodeName === '#comment') {
       const trimmedComment = textContent.trim();
       const iterationMatch = parseIterationHeader(trimmedComment);
 
-      // An each-shaped comment that fails the grammar, WITH a matching /each,
-      // is an authored directive with a syntax error — code, not prose. It
-      // used to render its body once, silently: the framework's worst
-      // footgun. Directives scream like a SyntaxError in every mode. (A
-      // prose comment merely starting with "each", no /each below, stays an
-      // inert comment.)
       if (
         !iterationMatch &&
         ITERATION_START_REGEX.test(trimmedComment) &&
@@ -246,8 +189,6 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         );
       }
 
-      // A bare <!-- if --> / <!-- else if --> (no expression) with a
-      // matching /if ahead is the same class of authored error.
       if (/^if$/.test(trimmedComment) || /^else\s+if$/.test(trimmedComment)) {
         try {
           findConditionalEnd(children, i + 1);
@@ -256,7 +197,6 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
               'Expected <!-- if condition --> ... <!-- else if condition --> ... <!-- /if -->',
           );
         } catch {
-          // No /if below — an inert comment.
         }
       }
 
@@ -264,49 +204,27 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         const { arrayPath, itemAlias, keyExpr, indexAlias } = iterationMatch;
 
         try {
-          // Find matching end comment
           const endIndex = findEndComment(children, i + 1);
 
-          // Extract template nodes (between start and end comments)
           const templateNodes = Array.from(children).slice(i + 1, endIndex);
 
-          // Create a temporary container for the template
           const templateContainer = document.createElement('div');
           templateNodes.forEach((node) => {
             templateContainer.appendChild(node.cloneNode(true));
           });
 
-          // Aliases in scope inside this loop's template = enclosing aliases plus
-          // this loop's item alias and (only when explicitly declared) its index
-          // alias. The implicit default index name is never auto-rewritten.
           const childAliases = new Set(aliasSet);
           childAliases.add(itemAlias);
           if (indexAlias) childAliases.add(indexAlias);
 
-          // Parse the template recursively
           const templateParsed = recursive([...templateContainer.childNodes], undefined, new Set(), stats, childAliases);
 
-          // A handler rewritten to `$scope(this,'alias')` only exists in this
-          // freshly-parsed runtime template — the manifest's compiled batchFn was
-          // generated from the original (unrewritten) template, so it must be
-          // bypassed for this iteration (see canUseCompiled). True when a direct
-          // handler in this template was rewritten, OR a nested iteration carries
-          // scoped handlers (its inlined batchFn would be wrong too). The runtime
-          // clone / batch / diff paths all read the rewritten template correctly.
           const hasScopedHandlers =
             (childAliases.size > 0 && templateContainer.innerHTML.includes("$scope(this,")) ||
             subtreeHasScopedHandlers(templateParsed);
 
-          // All aliases in scope inside this loop (enclosing + this loop's own) —
-          // passed back to parse() by iterate.js when it re-parses a cloned
-          // instance. Must be the ACCUMULATED set, not just this loop's own: a
-          // handler nested in a further if/each inside the loop can reference an
-          // outer alias that wasn't rewritten in this loop's own template (the
-          // inner structure's branch was extracted to a separate container), so
-          // the re-parse needs every enclosing alias to rewrite it.
           const scopeAliases = [...childAliases];
 
-          // Store iteration metadata (use index for deterministic keys)
           const iterationKey = `iteration_${i}`;
           const iterationNode = {
             type: 'iteration',
@@ -325,9 +243,6 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
                 children: templateParsed,
               },
             },
-            // Preserve runtime data from previous parse if it exists (stored on startComment by iterate.js)
-            // Only restore if the comment node is still connected to the DOM (not replaced by component loading)
-            // @ts-ignore - custom property added by iterate.js
             runtime: (element.isConnected && element.__vibeIterationRuntime) || {
               instances: [],
               templateRemoved: false,
@@ -336,13 +251,11 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
           };
           result[iterationKey] = iterationNode;
 
-          // Mark template indices as processed
           for (let j = i + 1; j < endIndex; j++) {
             skipIndices.add(j);
           }
-          skipIndices.add(endIndex); // Also skip the end comment
+          skipIndices.add(endIndex);
 
-          // Skip past this iteration block
           i = endIndex;
           continue;
         } catch (e) {
@@ -351,37 +264,24 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         }
       }
 
-      // Handle conditional comments
       const conditionalMatch = textContent.trim().match(CONDITIONAL_REGEX);
 
       if (conditionalMatch) {
         const [_, expression] = conditionalMatch;
 
         try {
-          // Find matching end comment and optional else / else-if boundary
           const { elseIndex, endIndex, elseText } = findConditionalEnd(children, i + 1);
 
-          // Extract true branch nodes (between if and else/endif)
           const trueBranchEnd = elseIndex !== null ? elseIndex : endIndex;
           const trueBranchNodes = Array.from(children).slice(i + 1, trueBranchEnd);
 
-          // Create temporary container for true branch
           const trueBranchContainer = document.createElement('div');
           trueBranchNodes.forEach((node) => {
             trueBranchContainer.appendChild(node.cloneNode(true));
           });
 
-          // Parse the true branch recursively (loop aliases stay in scope
-          // inside a conditional nested within an iteration).
           const trueBranchParsed = recursive([...trueBranchContainer.childNodes], undefined, new Set(), stats, aliasSet);
 
-          // Extract false branch nodes if else exists. An `else if` boundary
-          // DESUGARS: the false branch becomes a synthesized nested
-          // conditional (`<!-- if rest -->…<!-- /if -->` wrapping the chain
-          // tail), so every mount/patch/manifest path only ever sees binary
-          // conditionals — else-if is grammar, not machinery. The chain tail
-          // may itself contain further else-if boundaries; the recursion
-          // desugars them the same way.
           let falseBranchParsed = null;
           let falseBranchContainer = null;
           if (elseIndex !== null) {
@@ -400,16 +300,12 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
             falseBranchParsed = recursive([...falseBranchContainer.childNodes], undefined, new Set(), stats, aliasSet);
           }
 
-          // Store conditional metadata (use index for deterministic keys)
           const conditionalKey = `conditional_${i}`;
           result[conditionalKey] = {
             _key: conditionalKey,
             type: 'conditional',
             meta: {
               expression,
-              // Enclosing loop aliases — threaded back into parse() when
-              // mountBranch re-parses this branch, so loop-scoped handlers
-              // (including those nested deeper in further conditionals) rewrite.
               scopeAliases: [...aliasSet],
               startComment: element,
               elseComment: elseIndex !== null ? children[elseIndex] : null,
@@ -437,12 +333,10 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
             children: {},
           };
 
-          // Mark template indices as processed
           for (let j = i + 1; j <= endIndex; j++) {
             skipIndices.add(j);
           }
 
-          // Skip past this conditional block
           i = endIndex;
           continue;
         } catch (e) {
@@ -451,17 +345,15 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         }
       }
 
-      // Skip other comments
       continue;
     }
 
     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
+    const textNodeRef = isTextNode ? element : null;
 
     const { attributes, nameBindings } = captureAttributeBindings(element, aliasSet);
     const hasChildren = childNodes.length;
@@ -493,11 +385,6 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
   return result;
 };
 
-// `aliasSet` carries enclosing `<!-- each -->` aliases into the parse. The root
-// page parse passes none; iterate.js passes a loop's own aliases when it
-// re-parses a cloned instance subtree, so loop-scoped `on*` handlers (including
-// those in nested loops, via child-alias accumulation in recursive) rewrite to
-// `$scope(this,'alias')`.
 export default (root, rootKey = undefined, aliasSet = new Set()) => {
   const { childNodes } = root;
   const stats = { skipped: 0 };
@@ -505,7 +392,6 @@ export default (root, rootKey = undefined, aliasSet = new Set()) => {
   const { attributes, nameBindings } = captureAttributeBindings(root, aliasSet);
 
   return {
-    // html: root.outerHTML,
     parsed: parseHTML([...childNodes], rootKey),
     element: root,
     children: recursive(Array.from(childNodes), rootKey, new Set(), stats, aliasSet),

package/runtime/pre-compiled-iterations.js

@@ -1,20 +1,8 @@
-/**
- * pre-compiled-iterations.js
- *
- * Pre-compiled iteration rendering - production version of iteration optimization.
- * Uses pre-compiled batch functions from manifest generated by the compiler.
- *
- * This is the production implementation that runs compiled code generated at build time.
- */
-
 import { stampInstanceScopes } from './loop-scope.js';
+import { markBoundValues } from './iteration-utils.js';
 
-// Reusable template element for parsing compiled HTML
 const parseTemplate = typeof document !== 'undefined' ? document.createElement('template') : null;
 
-/**
- * Check if template has nested iterations or conditionals
- */
 const hasNestedStructures = (template) => {
   if (!template || !template.children) return false;
   for (const key in template.children) {
@@ -26,37 +14,23 @@ const hasNestedStructures = (template) => {
   return false;
 };
 
-/**
- * Check if iteration node has compiled batch function
- */
 export const canUseCompiled = (iterationNode) => {
   if (!iterationNode || !iterationNode.meta) {
     return false;
   }
 
-  // A template with a loop-scoped `$scope(this,'alias')` handler was rewritten at
-  // parse time; the manifest's compiled batchFn predates that rewrite and would
-  // emit the bare, unresolvable alias. Fall back to the runtime path, which reads
-  // the rewritten template.
   if (iterationNode.meta.hasScopedHandlers) {
     return false;
   }
 
-  // Check compiled data from manifest merge
   const compiled = iterationNode.compiled;
   if (!compiled || !compiled.iterations || !compiled.iterations.batchFn) {
     return false;
   }
 
-  // If we have a compiled batch function, we can use it even if the template
-  // has nested structures, because the compiler has already inlined them
-  // into the batch function
   return true;
 };
 
-/**
- * Get compiled function metadata from iteration node
- */
 export const getCompiledMeta = (iterationNode) => {
   const compiled = iterationNode.compiled;
   if (!compiled || !compiled.iterations) return null;
@@ -68,12 +42,6 @@ export const getCompiledMeta = (iterationNode) => {
   };
 };
 
-/**
- * Build a scoped wrapper that puts state keys in scope for the batch function.
- * The compiler generates (arr, $) => { ... } with bare variable names like `selectedCategory`,
- * but those aren't parameters of the arrow function. We create a wrapper that defines
- * state keys as parameters, then evaluates the batch function in that scope.
- */
 const buildScopedFn = (batchFnStr, stateKeys) => {
   return new Function(
     ...stateKeys, 'arr',
@@ -83,9 +51,6 @@ const buildScopedFn = (batchFnStr, stateKeys) => {
   );
 };
 
-/**
- * Call a compiled batch function with state keys spread into scope
- */
 const callCompiled = (iterationNode, array, state, compiledMeta) => {
   if (!iterationNode.runtime.compiledFn) {
     try {
@@ -103,20 +68,16 @@ const callCompiled = (iterationNode, array, state, compiledMeta) => {
   return iterationNode.runtime.compiledFn(...values, array);
 };
 
-/**
- * Render iteration using pre-compiled batch function from manifest
- */
 export const renderCompiled = (iterationNode, array, state, compiledMeta, parent, endComment) => {
   const html = callCompiled(iterationNode, array, state, compiledMeta);
   if (html === null) return false;
 
-  // Parse and insert
   if (parseTemplate) {
     parseTemplate.innerHTML = html;
     const frag = parseTemplate.content;
+    markBoundValues(frag, html);
     const kids = frag.children;
 
-    // Track instances - pre-allocate array for performance
     const arrayLen = array.length;
     const instances = new Array(arrayLen);
     for (let i = 0; i < arrayLen; i++) {
@@ -133,9 +94,6 @@ export const renderCompiled = (iterationNode, array, state, compiledMeta, parent
   return false;
 };
 
-/**
- * Update iteration using pre-compiled batch function (bulk rebuild)
- */
 export const updateCompiled = (iterationNode, newArray, state, compiledMeta, startComment, endComment) => {
   const parent = startComment.parentNode;
   const rt = iterationNode.runtime;
@@ -143,16 +101,11 @@ export const updateCompiled = (iterationNode, newArray, state, compiledMeta, sta
   const html = newArray.length === 0 ? '' : callCompiled(iterationNode, newArray, state, compiledMeta);
   if (html === null) return false;
 
-  // Keep-DOM guard, same contract as the runtime batch renderer: compiled
-  // iterations sit in the always-dirty bucket, so every flush of ANY key
-  // lands here — identical output must keep the existing rows (imperative
-  // listeners, focus, markers die with deleteContents), not rebuild them.
   if (html === rt.lastCompiledHtml && rt.instances.length === newArray.length) {
     for (let i = 0; i < newArray.length; i++) rt.instances[i].item = newArray[i];
     return true;
   }
 
-  // Clear existing instances
   if (rt.instances.length > 0) {
     const range = document.createRange();
     range.setStartAfter(startComment);
@@ -166,13 +119,12 @@ export const updateCompiled = (iterationNode, newArray, state, compiledMeta, sta
     return true;
   }
 
-  // Parse and insert
   if (parseTemplate) {
     parseTemplate.innerHTML = html;
     const frag = parseTemplate.content;
+    markBoundValues(frag, html);
     const kids = frag.children;
 
-    // Track instances - pre-allocate array for performance
     const arrayLen = newArray.length;
     const instances = new Array(arrayLen);
     for (let i = 0; i < arrayLen; i++) {