@ape-egg/vibe 1.7.1 → 1.8.0

package/compiler/src/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "vibe-compiler"
-version = "1.7.1"
+version = "1.7.2"
 edition = "2021"
 description = "Vibe framework compiler - compiles Vibe source files into optimized output"
 authors = ["Kim Korte"]
@@ -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/compiler/src/parser/html.rs

@@ -258,8 +258,8 @@ impl HtmlParser {
     /// Find the start position of the matching close tag, handling nesting of the same tag.
     /// `after_open`: byte position immediately after the `>` of the opening tag.
     fn find_matching_close(content: &str, after_open: usize, tag_name: &str) -> Option<usize> {
-        // \b ensures <component> matches but not <component-foo>
-        let open_re = regex::Regex::new(&format!(r"<{}\b", regex::escape(tag_name))).unwrap();
+        // (?:\s|>) ensures <component> matches but not <component-foo> (hyphen is not \s or >)
+        let open_re = regex::Regex::new(&format!(r"<{}(?:\s|>|/>)", regex::escape(tag_name))).unwrap();
         let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(tag_name))).unwrap();
 
         let mut depth = 1i32;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.7.1",
+  "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+/;