@ape-egg/vibe 1.7.2 → 1.8.0

package/compiler/src/Cargo.toml

@@ -20,7 +20,7 @@ markup5ever = "0.12"
 thiserror = "1.0"
 regex = "1.10"
 colored = "2.1"
-reqwest = { version = "0.11", features = ["blocking", "rustls-tls"], default-features = false }
+ureq = { version = "2", features = ["tls"] }
 glob = "0.3"
 rquickjs = "0.6"
 swc_common = "=0.40.1"

package/compiler/src/compiler/compile.rs

@@ -1422,17 +1422,9 @@ impl Compiler {
 
     /// Fetch external component without caching (returns raw content)
     fn fetch_external_component_raw(&self, url: &str) -> Result<String, String> {
-        // Fetch from URL
-        match reqwest::blocking::get(url) {
-            Ok(response) => {
-                if !response.status().is_success() {
-                    return Err(format!("HTTP {} - {}", response.status().as_u16(), response.status().canonical_reason().unwrap_or("Unknown")));
-                }
-                match response.text() {
-                    Ok(content) => Ok(content),
-                    Err(e) => Err(format!("Failed to read response body: {}", e)),
-                }
-            }
+        match ureq::get(url).call() {
+            Ok(response) => response.into_string().map_err(|e| format!("Failed to read response body: {}", e)),
+            Err(ureq::Error::Status(code, response)) => Err(format!("HTTP {} - {}", code, response.status_text().to_string())),
             Err(e) => Err(format!("Failed to fetch: {}", e)),
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/affected.js

@@ -35,6 +35,24 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
     // Array didn't change, but check for affected elements inside iteration instances
     // (e.g., when tutorialProgress changes, need to update checkmarks in menu items)
     if (tree.runtime.instances) {
+      // Compiled iterations have instances without tree/scopedState — the batch function
+      // may reference global state keys (e.g., `selectedCategory` in a button binding).
+      // If any state key changed, trigger a rebuild so the batch function re-evaluates.
+      const hasCompiledInstances = tree.compiled && tree.runtime.instances.length > 0
+        && !tree.runtime.instances[0].tree;
+
+      if (hasCompiledInstances) {
+        const isInitialHydration = state === newState;
+        if (!isInitialHydration) {
+          const stateKeys = Object.keys(state);
+          const hasChangedKey = stateKeys.some(k => state[k] !== newState[k]);
+          if (hasChangedKey) {
+            affected.push({ type: 'iteration', node: tree, changeType: 'array' });
+            return affected;
+          }
+        }
+      }
+
       for (const instance of tree.runtime.instances) {
         if (instance.tree && instance.scopedState) {
           // Use the instance's scoped state (includes item, index, etc.)

package/runtime/component.js

@@ -28,36 +28,31 @@ export const abortComponentFetch = (element) => {
   }
 };
 
-export const processComponent = (rootElement, onComplete, config = {}) => {
-  const debug = !!config?.debug;
-  // Only process component elements with src attribute (fetched components)
-  // Supports: <component src="..."> and <div class="component" src="...">
-  // Ignores: <component> and <div class="component"> (inline component wrappers)
-  const componentElements = rootElement.querySelectorAll('component[src], div.component[src]');
-
-  if (componentElements.length === 0) {
-    // Defer onComplete to give user code a chance to register listeners
-    // This is important when all components are pre-compiled (no src attributes)
-    if (onComplete) queueMicrotask(() => onComplete());
-    return;
+// Check if an element is nested inside another unprocessed component[src]
+const isNestedInUnprocessedComponent = (el, rootElement) => {
+  let parent = el.parentElement;
+  while (parent && parent !== rootElement) {
+    if (
+      (parent.tagName === 'COMPONENT' || parent.classList?.contains('component')) &&
+      parent.hasAttribute('src')
+    ) {
+      return true;
+    }
+    parent = parent.parentElement;
   }
+  return false;
+};
 
-  // Process just the first element - MutationObserver will trigger next call
-  const el = componentElements[0];
-
-  // Skip if component is dehydrated (vibe-dehydrate attribute or class)
+// Process a single component element: fetch HTML, execute scripts, replace DOM
+const processSingle = (el, debug) => {
+  // Skip dehydrated components
   if (el.hasAttribute(DEHYDRATE_CLASS_OR_ATTR) || el.classList.contains(DEHYDRATE_CLASS_OR_ATTR)) {
-    // Skip this component and continue to next
-    if (componentElements.length > 1) {
-      // Process next component
-      processComponent(rootElement, onComplete, config);
-    } else {
-      // Defer onComplete to give user code a chance to register listeners
-      if (onComplete) queueMicrotask(() => onComplete());
-    }
-    return;
+    return Promise.resolve();
   }
 
+  // Skip if fetch already in flight for this element
+  if (pendingFetches.has(el)) return Promise.resolve();
+
   const src = el.getAttribute('src');
 
   // Use pre-hydration slot content if available (saved by index.js before hydration ran),
@@ -75,7 +70,7 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
   const controller = new AbortController();
   pendingFetches.set(el, controller);
 
-  fetch(src, { signal: controller.signal })
+  return fetch(src, { signal: controller.signal })
     .then((r) => r.text())
     .then((html) => {
       // Parse HTML in temporary container to process component scripts
@@ -84,13 +79,41 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
 
       // Process any <script type="module"> elements
       const moduleScripts = temp.querySelectorAll('script[type="module"]');
-      moduleScripts.forEach((script) => {
-        let scriptContent = script.textContent?.trim() || '';
-        if (!scriptContent) return;
 
-        // Strip import statements (we provide component() manually)
-        // Remove lines like: import component from '...';
-        scriptContent = scriptContent.replace(/import\s+\w+\s+from\s+['"][^'"]+['"];?\s*/g, '');
+      // Process each script — collect async tasks if any have imports
+      const asyncTasks = [];
+
+      for (const script of moduleScripts) {
+        let scriptContent = script.textContent?.trim() || '';
+        if (!scriptContent) continue;
+
+        // Strip `import component from '...'` — Vibe injects the contextual
+        // component() function as a parameter (it needs access to the temp DOM)
+        scriptContent = scriptContent.replace(/import\s+component\s+from\s+['"][^'"]+['"];?\s*/g, '');
+
+        // Check for remaining imports that need rewriting
+        const hasImports = /import\s/.test(scriptContent);
+
+        if (hasImports) {
+          // Rewrite remaining imports to dynamic await import()
+          // Order matters: default → named → namespace → side-effect (most specific first)
+          scriptContent = scriptContent.replace(
+            /import\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
+            'const $1 = (await import($2)).default;'
+          );
+          scriptContent = scriptContent.replace(
+            /import\s+\{([^}]+)\}\s+from\s+(['"][^'"]+['"])\s*;?/g,
+            'const {$1} = await import($2);'
+          );
+          scriptContent = scriptContent.replace(
+            /import\s+\*\s+as\s+(\w+)\s+from\s+(['"][^'"]+['"])\s*;?/g,
+            'const $1 = await import($2);'
+          );
+          scriptContent = scriptContent.replace(
+            /import\s+(['"][^'"]+['"])\s*;?/g,
+            'await import($1);'
+          );
+        }
 
         // Generate component ID for this instance
         const componentId = generateComponentId();
@@ -122,10 +145,16 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
         };
 
         // Execute script with component() function in scope
-        // Use Function constructor to provide 'component' as a parameter
         try {
-          const executeFn = new Function('component', scriptContent);
-          executeFn(componentFn);
+          if (hasImports) {
+            // Async execution for scripts with imports
+            const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
+            asyncTasks.push(new AsyncFunction('component', scriptContent)(componentFn));
+          } else {
+            // Synchronous execution for scripts without imports (preserves boot timing)
+            const executeFn = new Function('component', scriptContent);
+            executeFn(componentFn);
+          }
         } catch (e) {
           console.warn('[vibe] Failed to execute component script:', e);
         }
@@ -166,56 +195,67 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
 
         // Remove script from temp (we executed it manually)
         script.remove();
-      });
-
-      // Get transformed HTML from temp container (scripts removed)
-      let transformedHtml = temp.innerHTML;
-
-      // Replace props
-      Object.entries(props).forEach(([propName, propValue]) => {
-        const bindingMatch = propValue.match(/^@\[(.+)\]$/);
-
-        if (bindingMatch) {
-          // Reactive prop: replace @[propName] with @[path]
-          const path = bindingMatch[1];
-          const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
-          transformedHtml = transformedHtml.replace(propPattern, `@[${path}]`);
-        } else {
-          // Static prop: replace @[propName] with literal value
-          const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
-          transformedHtml = transformedHtml.replace(propPattern, propValue);
-        }
-      });
-
-      // Replace <slot></slot> with children
-      if (children) {
-        transformedHtml = transformedHtml.replace(/<slot><\/slot>/g, children);
-        transformedHtml = transformedHtml.replace(/<slot\s*\/>/g, children);
       }
 
-      // Clean up pending fetch tracker
-      pendingFetches.delete(el);
+      // Finalize: props, slots, DOM replacement
+      const finalize = () => {
+        // Get transformed HTML from temp container (scripts removed)
+        let transformedHtml = temp.innerHTML;
+
+        // Replace props
+        Object.entries(props).forEach(([propName, propValue]) => {
+          const bindingMatch = propValue.match(/^@\[(.+)\]$/);
+
+          if (bindingMatch) {
+            // Reactive prop: replace @[propName] with @[path]
+            const path = bindingMatch[1];
+            const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
+            transformedHtml = transformedHtml.replace(propPattern, `@[${path}]`);
+          } else {
+            // Static prop: replace @[propName] with literal value
+            const propPattern = new RegExp(`@\\[${escapeRegex(propName)}\\]`, 'g');
+            transformedHtml = transformedHtml.replace(propPattern, propValue);
+          }
+        });
 
-      // Replace with clean component wrapper (no src, no props)
-      // Check if element still has a parent (might have been removed during fetch)
-      if (el.parentNode) {
-        // Create clean wrapper element (preserve tag type: component or div.component)
-        const newWrapper =
-          el.tagName === 'DIV'
-            ? document.createElement('div')
-            : document.createElement('component');
-
-        if (el.tagName === 'DIV') {
-          newWrapper.className = 'component';
+        // Replace <slot></slot> with children
+        if (children) {
+          transformedHtml = transformedHtml.replace(/<slot><\/slot>/g, children);
+          transformedHtml = transformedHtml.replace(/<slot\s*\/>/g, children);
         }
 
-        newWrapper.innerHTML = transformedHtml;
-        el.replaceWith(newWrapper);
-        debugLog(PHASE_FETCH, src, debug);
+        // Clean up pending fetch tracker
+        pendingFetches.delete(el);
 
-        // Let MutationObserver handle the mutation naturally
-        // It will call processMutations, which will call processComponent for the next component
+        // Replace with clean component wrapper (no src, no props)
+        // Check if element still has a parent (might have been removed during fetch)
+        if (el.parentNode) {
+          // Create clean wrapper element (preserve tag type: component or div.component)
+          const newWrapper =
+            el.tagName === 'DIV'
+              ? document.createElement('div')
+              : document.createElement('component');
+
+          if (el.tagName === 'DIV') {
+            newWrapper.className = 'component';
+          }
+
+          newWrapper.innerHTML = transformedHtml;
+          el.replaceWith(newWrapper);
+          debugLog(PHASE_FETCH, src, debug);
+
+          // MutationObserver handles parsing and hydrating the new content.
+          // Branch nodes are registered in the manifest by mountBranch,
+          // so the observer can find parents even inside conditional branches.
+        }
+      };
+
+      // If any scripts had async imports, wait for them before finalizing.
+      // Otherwise finalize synchronously (preserves original boot timing).
+      if (asyncTasks.length > 0) {
+        return Promise.all(asyncTasks).then(finalize);
       }
+      finalize();
     })
     .catch((error) => {
       // Clean up pending fetch tracker
@@ -230,6 +270,34 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
       if (el.parentNode) {
         el.remove();
       }
-      // Don't recursively call - let MutationObserver handle it
     });
 };
+
+export const processComponent = (rootElement, onComplete, config = {}) => {
+  const debug = !!config?.debug;
+  const allComponents = rootElement.querySelectorAll('component[src], div.component[src]');
+
+  if (allComponents.length === 0) {
+    if (onComplete) queueMicrotask(() => onComplete());
+    return;
+  }
+
+  // Only process top-level components — skip those nested inside other
+  // unprocessed component[src] elements (they're slot content that will
+  // be revealed when the parent component finalizes).
+  const topLevel = Array.from(allComponents).filter(
+    el => !isNestedInUnprocessedComponent(el, rootElement)
+  );
+
+  if (topLevel.length === 0) {
+    if (onComplete) queueMicrotask(() => onComplete());
+    return;
+  }
+
+  // Fetch and process all top-level components in parallel.
+  // Nested components (inside finalized content) are discovered and
+  // processed by the MutationObserver → processComponent chain.
+  // onComplete is handled by checkCleanup (which fires when no
+  // component[src] elements remain).
+  topLevel.forEach(el => processSingle(el, debug));
+};

package/runtime/conditionals.js

@@ -4,6 +4,50 @@ import hydrate from './hydrate.js';
 import { createScopedState, renderAllIterations, initializeBlock } from './iterate.js';
 import { evalInScope } from './utils.js';
 
+// Registry of DOM nodes owned by conditional branches.
+// Maps a DOM node to { nodes: array_ref, index: number } so that
+// processMutations can update the reference when processComponent
+// replaces the node (el.replaceWith). Keeps conditional state in
+// sync with actual DOM without sweeps or special properties.
+export const branchNodeRegistry = new WeakMap();
+
+// Nodes that have been processed by mountBranch or renderIteration.
+// processMutations checks this to avoid re-processing already-handled content.
+export const managedNodes = new WeakSet();
+
+// Find the dot path of a conditional node in the manifest.
+// Searches for the parent element, then appends the conditional's key.
+const findConditionalPath = (node, manifest) => {
+  const parent = node.meta.startComment.parentNode;
+  const parentEntry = Object.entries(manifest).find(([_, el]) => el === parent);
+  if (!parentEntry) return null;
+
+  // Find which key this conditional has in the parent's children
+  // by matching the startComment reference
+  const [parentPath] = parentEntry;
+  return `${parentPath}.${node._key}`;
+};
+
+// Register branch tree nodes in the manifest (recursive)
+const addBranchToManifest = (tree, manifest, basePath) => {
+  if (tree.element) manifest[basePath] = tree.element;
+  if (tree.children) {
+    for (const key in tree.children) {
+      addBranchToManifest(tree.children[key], manifest, `${basePath}.${key}`);
+    }
+  }
+};
+
+// Remove branch tree nodes from the manifest (recursive)
+const removeBranchFromManifest = (tree, manifest, basePath) => {
+  delete manifest[basePath];
+  if (tree.children) {
+    for (const key in tree.children) {
+      removeBranchFromManifest(tree.children[key], manifest, `${basePath}.${key}`);
+    }
+  }
+};
+
 // Evaluate conditional expression in state context
 const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
 
@@ -96,12 +140,12 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
 
   // If branch doesn't exist (no else clause), just unmount current
   if (!branchData) {
-    unmountBranch(node);
+    unmountBranch(node, manifest);
     return;
   }
 
   // Unmount current branch first (if any)
-  unmountBranch(node);
+  unmountBranch(node, manifest);
 
   // Clone the template element
   const templateContent = branchData.element.childNodes;
@@ -118,8 +162,29 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
     clonedNodes,
   } = initializeBlock(templateContent, scopedState);
 
-  // Insert cloned nodes into DOM
-  clonedNodes.forEach((clonedNode) => parent.insertBefore(clonedNode, endComment));
+  // Insert cloned nodes into DOM and register in branch registry
+  clonedNodes.forEach((clonedNode, i) => {
+    parent.insertBefore(clonedNode, endComment);
+    branchNodeRegistry.set(clonedNode, { nodes: clonedNodes, index: i });
+    if (clonedNode.nodeType === 1) managedNodes.add(clonedNode);
+  });
+
+  // Integrate branch tree into the conditional node's children and manifest.
+  // This makes branch content visible to the main update loop (hydrate,
+  // renderAllConditionals, renderAllIterations) and to MutationObserver
+  // (which looks up parents in the manifest).
+  if (branchTree?.children) {
+    for (const key in branchTree.children) {
+      node.children[key] = branchTree.children[key];
+    }
+
+    const condPath = findConditionalPath(node, manifest);
+    if (condPath) {
+      for (const key in branchTree.children) {
+        addBranchToManifest(branchTree.children[key], manifest, `${condPath}.${key}`);
+      }
+    }
+  }
 
   // Recursively render any nested iterations and conditionals
   if (branchTree) {
@@ -136,13 +201,26 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
 };
 
 // Unmount currently active branch
-const unmountBranch = (node) => {
+const unmountBranch = (node, manifest) => {
   const { activeInstance } = node.runtime;
 
   if (!activeInstance) return;
 
-  // Remove all nodes from DOM
+  // Remove branch children from the conditional node's tree and manifest
+  if (activeInstance.parsedTree?.children) {
+    const condPath = manifest ? findConditionalPath(node, manifest) : null;
+
+    for (const key in activeInstance.parsedTree.children) {
+      delete node.children[key];
+      if (condPath) {
+        removeBranchFromManifest(activeInstance.parsedTree.children[key], manifest, `${condPath}.${key}`);
+      }
+    }
+  }
+
+  // Remove all nodes from DOM and deregister from branch registry
   activeInstance.nodes.forEach((domNode) => {
+    branchNodeRegistry.delete(domNode);
     if (domNode.parentNode) {
       domNode.parentNode.removeChild(domNode);
     }
@@ -173,7 +251,8 @@ export const updateConditional = (node, newState, oldState, manifest, parentScop
     mountBranch(node, newBranchData, newState, manifest, parentScope);
     node.runtime.activeBranch = newBranchData;
   } else {
-    // Same branch, but state might have changed - rehydrate
+    // Same branch, but state might have changed — rehydrate bindings
+    // and update nested conditionals/iterations
     const { activeInstance } = node.runtime;
 
     if (activeInstance && activeInstance.parsedTree) {
@@ -182,6 +261,8 @@ export const updateConditional = (node, newState, oldState, manifest, parentScop
 
       const affectedElements = affected(activeInstance.parsedTree, oldState, scopedState);
       hydrate(affectedElements, scopedState);
+      renderAllConditionals(activeInstance.parsedTree, scopedState, manifest, parentScope);
+      renderAllIterations(activeInstance.parsedTree, scopedState, manifest, parentScope);
     }
   }
 };

package/runtime/constants.js

@@ -202,15 +202,17 @@ export const DOM_ELEMENT_PROPERTIES = new Set([
 ]);
 
 // Regex for matching reactive bindings (@[expression])
-// Supports one level of nested brackets: @[items[0]] or @[obj[key]]
-export const BINDING_REGEX = /\@\[((?:[^\[\]]|\[[^\]]*\])+)\]/g;
+// Supports nested brackets, single-quoted and double-quoted strings inside expressions:
+// @[items[0]], @[obj[key]], @[x.replace('.png', '-mugshot.png')]
+const BINDING_INNER = String.raw`(?:[^\[\]'"]|\[[^\]]*\]|'[^']*'|"[^"]*")+`;
+export const BINDING_REGEX = new RegExp(String.raw`\@\[(${BINDING_INNER})\]`, 'g');
 
 // Regex for detecting a pure binding (entire value is just @[expression])
-export const PURE_BINDING_REGEX = /^\@\[((?:[^\[\]]|\[[^\]]*\])+)\]$/;
+export const PURE_BINDING_REGEX = new RegExp(String.raw`^\@\[(${BINDING_INNER})\]$`);
 
 // Regex for parsing iteration comment syntax (<!-- each items as item, index -->)
-// Supports nested paths like category.items
-export const ITERATION_REGEX = /^each\s+([\w.]+)\s+as\s+(\w+)(?:\s*,\s*(\w+))?\s*$/;
+// Supports nested paths like category.items and bracket notation like teams[0].combatants
+export const ITERATION_REGEX = /^each\s+([\w.\[\]]+)\s+as\s+(\w+)(?:\s*,\s*(\w+))?\s*$/;
 
 // Regex for detecting start of iteration comment
 export const ITERATION_START_REGEX = /^each\s+/;

package/runtime/index.js

@@ -5,7 +5,7 @@ import hydrate from './hydrate.js';
 import affected from './affected.js';
 import { deepMerge, hash } from './utils.js';
 import { renderAllIterations, setRenderAllConditionals } from './iterate.js';
-import { renderAllConditionals } from './conditionals.js';
+import { renderAllConditionals, branchNodeRegistry, managedNodes } from './conditionals.js';
 import {
   NON_REACTIVE_ELEMENTS,
   PHASE_ATTACH,
@@ -39,6 +39,9 @@ const shouldProcessNode = (node) => {
   // Only process element nodes
   if (node.nodeType !== 1) return false;
 
+  // Skip nodes already managed by mountBranch or renderIteration
+  if (managedNodes.has(node)) return false;
+
   // Fast check first: skip nodes without Vibe syntax (cheapest check)
   const html = node.outerHTML;
   if (
@@ -116,9 +119,15 @@ const processCoreLoop = (node, parsedNode, state, manifest, isNewNode, debug) =>
   // 1. Parse - already done before calling core loop (in processMutations)
 
   // 2. Hydrate (replace @[...] bindings)
-  // Use empty object as "previous state" for new nodes so all bindings are affected
+  // For new nodes, use {} so all bindings are found. But filter out iterations
+  // and conditionals — those should only go through renderAllIterations/renderAllConditionals
+  // (initial render path), not updateIteration/updateConditional (which would diff against
+  // stale oldState and produce false adds/removes).
   const oldStateForAffected = isNewNode ? {} : previousState;
-  const affectedElements = affected(parsedNode, oldStateForAffected, state);
+  let affectedElements = affected(parsedNode, oldStateForAffected, state);
+  if (isNewNode) {
+    affectedElements = affectedElements.filter(a => a.type !== 'iteration' && a.type !== 'conditional');
+  }
   if (affectedElements.length > 0) {
     hydratedCount = affectedElements.length;
     hydrate(affectedElements, state, manifest, oldStateForAffected);
@@ -509,30 +518,45 @@ const main = (s, config = {}, stringSelector = '') => {
   };
 
   // Extract plain values from proxy (removes proxy wrappers)
+  // Optimized: indexed loops, Object.keys (no prototype walk), inline primitive check
   const extractPlainValue = (obj) => {
     if (obj === null || typeof obj !== 'object') return obj;
-    if (Array.isArray(obj)) return obj.map(extractPlainValue);
-    const plain = {};
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        plain[key] = extractPlainValue(obj[key]);
+    if (Array.isArray(obj)) {
+      const len = obj.length;
+      const arr = new Array(len);
+      for (let i = 0; i < len; i++) {
+        const v = obj[i];
+        arr[i] = (v !== null && typeof v === 'object') ? extractPlainValue(v) : v;
       }
+      return arr;
+    }
+    const keys = Object.keys(obj);
+    const len = keys.length;
+    const plain = {};
+    for (let i = 0; i < len; i++) {
+      const k = keys[i];
+      const v = obj[k];
+      plain[k] = (v !== null && typeof v === 'object') ? extractPlainValue(v) : v;
     }
     return plain;
   };
 
   // Observer callback will be defined below (already declared above before processComponent)
 
-  const $ = state(s, (newState, oldState) => {
-    // Extract current state (after mutation)
-    const currentState = extractPlainValue($);
-    const changedProp = Object.keys(newState)[0];
+  const $ = state(s, (changedProps) => {
+    // Selective extraction: only extract changed props, preserve references for unchanged.
+    // This ensures affected() correctly skips iterations whose arrays didn't change,
+    // while still detecting binding changes inside iteration instances.
+    const currentState = { ...previousState };
+    for (const prop of changedProps) {
+      currentState[prop] = extractPlainValue($[prop]);
+    }
 
     // Find what changed (compare previousState vs currentState)
     const affectedElements = affected(parsedTree, previousState, currentState);
 
     if (affectedElements.length > 0) {
-      debugLog(PHASE_UPDATE, `state changed (${changedProp})`, debug);
+      debugLog(PHASE_UPDATE, 'state changed', debug);
 
       // Capture pending mutations before disconnecting (takeRecords clears the queue)
       let pendingMutations = [];
@@ -562,6 +586,18 @@ const main = (s, config = {}, stringSelector = '') => {
           processMutations(pendingMutations);
         }
       }
+
+      // Conditionals/iterations may have mounted new DOM while observer was disconnected.
+      // Scan for unresolved <component src=""> elements that need fetching.
+      if (componentProcessingStarted) {
+        const componentConfig = {
+          ...config,
+          _forceSync: true,
+          _observer: observer,
+          _processMutations: processMutations,
+        };
+        processComponent(rootElement, null, componentConfig);
+      }
     }
 
     // Store previous state for hooks (currentState is already plain, no need to clone)
@@ -667,6 +703,20 @@ const main = (s, config = {}, stringSelector = '') => {
           abortComponentFetch(node);
         }
 
+        // If this node is tracked by a conditional branch (e.g. a <component src>
+        // that was replaced by processComponent via el.replaceWith), update the
+        // conditional's tracked reference to point to the replacement node.
+        const branchRef = branchNodeRegistry.get(node);
+        if (branchRef) {
+          // Find the replacement: an added node in the same mutation at the same parent
+          const replacement = Array.from(addedNodesList).find(n => n.parentNode === target);
+          if (replacement) {
+            branchRef.nodes[branchRef.index] = replacement;
+            branchNodeRegistry.set(replacement, branchRef);
+          }
+          branchNodeRegistry.delete(node);
+        }
+
         const entry = Object.entries(manifest).find(([_, element]) => element === node);
 
         // Skip nodes that aren't tracked (e.g., iteration-generated nodes or nodes outside reactive scope)
@@ -907,7 +957,8 @@ const main = (s, config = {}, stringSelector = '') => {
 
     // Check for new <component> elements after DOM mutations
     // Process component elements if we've started (initial call happened)
-    if (componentProcessingStarted && !cleanupExecuted) {
+    // Note: Also process after cleanup — conditionals may reveal new components
+    if (componentProcessingStarted) {
       const componentConfig = {
         ...config,
         _forceSync: true,