@ape-egg/vibe 1.9.9 → 2.0.5

package/runtime/loop-scope.js

@@ -51,8 +51,11 @@ const copyString = (value, i, push) => {
 // Rewrite standalone references to loop-variable aliases inside an event-handler
 // expression into `$scope(this,'alias')` calls. Skips `@[...]` binding spans
 // (they keep their existing hydrate-time stringifying behavior), string literals,
-// and member accesses, so only identifiers that genuinely name a loop alias are
-// touched.
+// member accesses, and object-literal keys (`{ alias: x }` keeps its key; the
+// shorthand `{ alias }` expands to `{ alias: $scope(this,'alias') }`), so only
+// identifiers that genuinely name a loop alias are touched. Bracket frames carry
+// a pending-ternary count per nesting level, which is what tells an object key's
+// `:` apart from a ternary's.
 export const rewriteHandlerAliases = (value, aliasSet) => {
   if (!aliasSet || aliasSet.size === 0 || typeof value !== 'string') return value;
 
@@ -62,6 +65,8 @@ export const rewriteHandlerAliases = (value, aliasSet) => {
   };
   let i = 0;
   const n = value.length;
+  const frames = [{ bracket: '', ternaries: 0 }];
+  const frame = () => frames[frames.length - 1];
 
   while (i < n) {
     const ch = value[i];
@@ -92,6 +97,37 @@ export const rewriteHandlerAliases = (value, aliasSet) => {
       continue;
     }
 
+    if (ch === '(' || ch === '[' || ch === '{') {
+      frames.push({ bracket: ch, ternaries: 0 });
+      push(ch);
+      i++;
+      continue;
+    }
+    if (ch === ')' || ch === ']' || ch === '}') {
+      if (frames.length > 1) frames.pop();
+      push(ch);
+      i++;
+      continue;
+    }
+    if (ch === '?') {
+      const next = value[i + 1];
+      if (next === '.' || next === '?') {
+        push(ch + next);
+        i += 2;
+        continue;
+      }
+      frame().ternaries++;
+      push(ch);
+      i++;
+      continue;
+    }
+    if (ch === ':') {
+      if (frame().ternaries > 0) frame().ternaries--;
+      push(ch);
+      i++;
+      continue;
+    }
+
     // Identifier — rewrite when it's a standalone alias reference.
     if (IDENT_START.test(ch)) {
       let j = i + 1;
@@ -99,7 +135,17 @@ export const rewriteHandlerAliases = (value, aliasSet) => {
       const ident = value.slice(i, j);
       const isMember = lastNonSpace(out) === '.';
       if (!isMember && aliasSet.has(ident)) {
-        push(`$scope(this,'${ident}')`);
+        let k = j;
+        while (k < n && /\s/.test(value[k])) k++;
+        const next = value[k] || '';
+        const prev = lastNonSpace(out);
+        const inObject = frame().bracket === '{';
+        const isKey = inObject && next === ':' && frame().ternaries === 0;
+        const isShorthand =
+          inObject && (prev === '{' || prev === ',') && (next === ',' || next === '}');
+        if (isKey) push(ident);
+        else if (isShorthand) push(`${ident}: $scope(this,'${ident}')`);
+        else push(`$scope(this,'${ident}')`);
       } else {
         push(ident);
       }

package/runtime/parse.js

@@ -7,6 +7,7 @@ import {
   DOM_ELEMENT_PROPERTIES,
   DEHYDRATE_CLASS_OR_ATTR,
   THIS_PROP_REGEX,
+  STATE_THIS_PROP_REGEX,
 } from './constants.js';
 import { rewriteHandlerAliases } from './loop-scope.js';
 
@@ -57,6 +58,13 @@ const captureAttributeBindings = (element, aliasSet) => {
       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
+          // `$.$['id'].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, (match, prop) =>
             DOM_ELEMENT_PROPERTIES.has(prop) ? match : `$['${componentId}'].${prop}`,
           );

package/runtime/pre-compiled-manifest.js

@@ -374,172 +374,73 @@ export const restoreMarkersFromManifest = (
       }
     }
 
-    // Handle conditional and iteration children - process them at THIS level before recursing
-    // These are comment nodes in the DOM, not elements, so we need to find them here
+    // Restore iterations/conditionals at THIS level by their childNodes index.
+    // The manifest key encodes the start comment's pre-stamp position
+    // (`conditional_13` = element.childNodes[13]); processing in ascending
+    // order keeps every index valid, because each restoration returns its
+    // region to the exact pre-stamp node count before the next index is
+    // consulted. Locating by index — not by expression text — is what
+    // disambiguates sibling directives that share the same expression.
     if (tree.children) {
-      for (const key in tree.children) {
+      const directives = Object.keys(tree.children)
+        .filter((key) => {
+          const type = tree.children[key].type;
+          return type === "iteration" || type === "conditional";
+        })
+        .map((key) => ({ key, index: Number(key.match(/_(\d+)$/)?.[1]) }))
+        .filter(({ index }) => Number.isInteger(index))
+        .sort((a, b) => a.index - b.index);
+
+      for (const { key, index } of directives) {
         const childTree = tree.children[key];
+        const restoration = childTree.compiled?.restoration;
 
-        // Handle iteration restoration
-        if (childTree.type === "iteration" && childTree.compiled?.restoration) {
-          const restoration = childTree.compiled.restoration;
-
-          // Find iteration comment by matching the expression
-          let startComment = null;
-          let endComment = null;
-          let depth = 0;
-
-          const walker = document.createTreeWalker(
-            element,
-            NodeFilter.SHOW_COMMENT,
-          );
-          while (walker.nextNode()) {
-            const comment = walker.currentNode;
-            const trimmed = comment.textContent.trim();
-
-            // Skip already processed iterations
-            if (comment._vibeProcessed) continue;
-
-            // Match by expression: "each items as item, i"
-            const expectedComment = `each ${restoration.expression}`;
-            if (trimmed === expectedComment && !startComment) {
-              startComment = comment;
-              depth = 1;
-            } else if (startComment) {
-              if (trimmed.startsWith("each ")) {
-                depth++;
-              } else if (trimmed === "/each") {
-                depth--;
-                if (depth === 0) {
-                  endComment = comment;
-                  break;
-                }
-              }
-            }
-          }
-
-          // Always delete the iteration node from tree - runtime will re-create it
-          // Do this even if comments weren't found (they might have been removed by parent restoration)
-          delete tree.children[key];
-
-          if (startComment && endComment) {
-            // Mark as processed
-            startComment._vibeProcessed = true;
-            endComment._vibeProcessed = true;
-
-            const parent = startComment.parentNode;
-            const insertionPoint = endComment.nextSibling;
+        // Always delete the directive node from the tree — the runtime
+        // re-creates it when it parses the restored DOM.
+        delete tree.children[key];
 
-            // Remove all pre-rendered content between comments
-            let current = startComment.nextSibling;
-            while (current && current !== endComment) {
-              const next = current.nextSibling;
-              if (current.nodeType !== Node.COMMENT_NODE) {
-                current.remove();
-              }
-              current = next;
-            }
-
-            // Insert the template (single item)
-            const tempContainer = document.createElement("div");
-            tempContainer.innerHTML = restoration.template;
-
-            const fragment = document.createDocumentFragment();
-            while (tempContainer.firstChild) {
-              fragment.appendChild(tempContainer.firstChild);
-            }
-            parent.insertBefore(fragment, endComment);
-          }
+        if (!restoration?.template) continue;
 
+        const startComment = element.childNodes[index];
+        if (!startComment || startComment.nodeType !== Node.COMMENT_NODE) {
           continue;
         }
 
-        if (
-          childTree.type === "conditional" &&
-          childTree.compiled?.restoration
-        ) {
-          const restoration = childTree.compiled.restoration;
-
-          // Find conditional comment markers in the current element
-          // But SKIP conditionals that are inside iteration blocks
-          const walker = document.createTreeWalker(
-            element,
-            NodeFilter.SHOW_COMMENT,
-          );
-          let startComment = null;
-          let endComment = null;
-          let insideIteration = false;
-          let conditionalDepth = 0;
-
-          while (walker.nextNode()) {
-            const comment = walker.currentNode;
-            const text = comment.textContent.trim();
-
-            // Track if we're inside an iteration block
-            if (text.startsWith("each ")) {
-              insideIteration = true;
-              continue;
-            } else if (text === "/each") {
-              insideIteration = false;
-              continue;
-            }
-
-            // Skip conditionals inside iterations - runtime will handle them
-            if (insideIteration) continue;
-
-            // Skip already processed conditionals
-            if (comment._vibeProcessed) continue;
-
-            if (text.startsWith("if")) {
-              if (!startComment) {
-                const expression = childTree.meta?.expression;
-                const expectedText = expression ? "if " + expression : null;
-                if (expectedText && text === expectedText) {
-                  startComment = comment;
-                  conditionalDepth = 1;
-                }
-              } else {
-                // Track nested conditionals
-                conditionalDepth++;
-              }
-            } else if (text === "/if" && startComment) {
-              conditionalDepth--;
-              if (conditionalDepth === 0) {
-                endComment = comment;
-                break;
-              }
+        // Find the matching end marker at this sibling level, depth-counted
+        // so nested same-kind directives inside the region don't end it early.
+        const isIteration = childTree.type === "iteration";
+        const openPrefix = isIteration ? "each " : "if ";
+        const closeMarker = isIteration ? "/each" : "/if";
+        let depth = 0;
+        let endComment = null;
+        for (let cur = startComment.nextSibling; cur; cur = cur.nextSibling) {
+          if (cur.nodeType !== Node.COMMENT_NODE) continue;
+          const text = cur.textContent.trim();
+          if (text.startsWith(openPrefix)) {
+            depth++;
+          } else if (text === closeMarker) {
+            if (depth === 0) {
+              endComment = cur;
+              break;
             }
+            depth--;
           }
-
-          // Always delete the conditional node from tree - runtime will re-create it
-          // Do this even if comments weren't found (they might have been removed by parent restoration)
-          delete tree.children[key];
-
-          if (startComment && endComment) {
-            // Mark as processed
-            startComment._vibeProcessed = true;
-            endComment._vibeProcessed = true;
-
-            // Remove ALL pre-rendered content between start and end comments
-            // This includes the <!-- else --> marker from compiled HTML
-            let current = startComment.nextSibling;
-            while (current && current !== endComment) {
-              const next = current.nextSibling;
-              current.remove(); // Remove ALL nodes, including comment nodes
-              current = next;
-            }
-
-            // Insert the template content BEFORE endComment
-            const tempContainer = document.createElement("div");
-            tempContainer.innerHTML = restoration.template;
-
-            const fragment = document.createDocumentFragment();
-            while (tempContainer.firstChild) {
-              fragment.appendChild(tempContainer.firstChild);
-            }
-            endComment.parentNode.insertBefore(fragment, endComment);
-          }
         }
+        if (!endComment) continue;
+
+        // Drop the stamped content (including the <!-- else --> marker and
+        // any stamped-row comments) and re-insert the pre-stamp template —
+        // node-for-node identical to what the manifest was built against.
+        let current = startComment.nextSibling;
+        while (current && current !== endComment) {
+          const next = current.nextSibling;
+          current.remove();
+          current = next;
+        }
+
+        const tpl = document.createElement("template");
+        tpl.innerHTML = restoration.template;
+        endComment.parentNode.insertBefore(tpl.content, endComment);
       }
     }
 

package/runtime/utils.js

@@ -46,13 +46,23 @@ export const setRootState = (proxy) => { rootProxy = proxy; };
 // delegate to the live root (their target is `$`), so they need no wrapper.
 const dollarCache = new WeakMap();
 const RESERVED_PROBE = 'unsafe'; // reserved method present on root-backed states, absent on plain snapshots
+// The fallback serves ONLY the root's non-enumerable helper methods. A state
+// key that is merely missing from this snapshot must read as undefined — the
+// old/new snapshot diff depends on it. Letting it leak through to the live
+// root would make both sides of the diff read the same current value (e.g. a
+// component state bucket registered mid-cycle), silently defeating change
+// detection.
+const rootHelper = (k) => {
+  const desc = Object.getOwnPropertyDescriptor(rootProxy, k);
+  return desc && !desc.enumerable;
+};
 const dollarFor = (state) => {
   if (!rootProxy || state === rootProxy || RESERVED_PROBE in state) return state;
   let wrapped = dollarCache.get(state);
   if (!wrapped) {
     wrapped = new Proxy(state, {
-      get: (t, k) => (k in t ? t[k] : rootProxy[k]),
-      has: (t, k) => k in t || k in rootProxy,
+      get: (t, k) => (k in t ? t[k] : rootHelper(k) ? rootProxy[k] : undefined),
+      has: (t, k) => k in t || rootHelper(k),
     });
     dollarCache.set(state, wrapped);
   }