@ape-egg/vibe 1.7.2 → 1.9.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/compiler/src/parser/html.rs

@@ -231,15 +231,15 @@ impl HtmlParser {
                         replacement = replacement.replace(&prop_binding, &prop_value);
                     }
 
-                    // Replace <slot> tags with content, or remove if empty/missing
-                    let slot_replacement = if slot_content.trim().is_empty() {
-                        ""
+                    // Replace <slot> tags — wrap children in <slot> boundary, or remove if empty
+                    let slot_wrapped = if slot_content.trim().is_empty() {
+                        String::new()
                     } else {
-                        &slot_content
+                        format!("<slot>{}</slot>", slot_content)
                     };
-                    replacement = replacement.replace("<slot></slot>", slot_replacement);
-                    replacement = replacement.replace("<slot/>", slot_replacement);
-                    replacement = replacement.replace("<slot />", slot_replacement);
+                    replacement = replacement.replace("<slot></slot>", &slot_wrapped);
+                    replacement = replacement.replace("<slot/>", &slot_wrapped);
+                    replacement = replacement.replace("<slot />", &slot_wrapped);
 
                     // Keep the wrapper for consistency with runtime (using generic <component> wrapper)
                     // No src attribute = wrapper won't be re-processed
@@ -371,10 +371,10 @@ impl HtmlParser {
                 replacement = replacement.replace(&prop_binding, prop_value);
             }
 
-            let slot_replacement = if slot_content.trim().is_empty() { "" } else { slot_content.as_str() };
-            replacement = replacement.replace("<slot></slot>", slot_replacement);
-            replacement = replacement.replace("<slot/>", slot_replacement);
-            replacement = replacement.replace("<slot />", slot_replacement);
+            let slot_wrapped = if slot_content.trim().is_empty() { String::new() } else { format!("<slot>{}</slot>", slot_content) };
+            replacement = replacement.replace("<slot></slot>", &slot_wrapped);
+            replacement = replacement.replace("<slot/>", &slot_wrapped);
+            replacement = replacement.replace("<slot />", &slot_wrapped);
 
             let wrapper = format!("<component>{}</component>", replacement);
             result.replace_range(*start..*end, &wrapper);
@@ -447,10 +447,10 @@ impl HtmlParser {
                         replacement = replacement.replace(&prop_binding, prop_value);
                     }
 
-                    let slot_replacement = if slot_content.trim().is_empty() { "" } else { slot_content.as_str() };
-                    replacement = replacement.replace("<slot></slot>", slot_replacement);
-                    replacement = replacement.replace("<slot/>", slot_replacement);
-                    replacement = replacement.replace("<slot />", slot_replacement);
+                    let slot_wrapped = if slot_content.trim().is_empty() { String::new() } else { format!("<slot>{}</slot>", slot_content) };
+                    replacement = replacement.replace("<slot></slot>", &slot_wrapped);
+                    replacement = replacement.replace("<slot/>", &slot_wrapped);
+                    replacement = replacement.replace("<slot />", &slot_wrapped);
 
                     let wrapper = format!("<component>{}</component>", replacement);
                     result.replace_range(start..end, &wrapper);

package/index.js

@@ -5,9 +5,16 @@ import { boot, isBooted, ensureBoot } from './boot.js';
 
 // Shared instance for queueing listeners before boot
 let vibeInstance = null;
+let resolveInstanceReady = null;
 
 const createVibeInstance = () => ({
   _pendingListeners: { afterUpdate: [], afterDomMutation: [], ready: [] },
+  // Promise that resolves when the real $.ready resolves post-boot. Lets
+  // consumers holding the pre-boot placeholder (e.g. tests awaiting
+  // `window.$.ready` before boot has replaced $ with the reactive proxy)
+  // wait for readiness without polling. Non-enumerable so it stays out of
+  // state snapshots.
+  ready: new Promise((resolve) => { resolveInstanceReady = resolve; }),
   on(event, callback) {
     // If booted, delegate to window.$
     if (isBooted() && window.$) {
@@ -66,4 +73,12 @@ const vibe = (state = {}, config, targetSelector) => {
 // Export function to get pending listeners (used by boot.js)
 export const getPendingListeners = () => vibeInstance?._pendingListeners || null;
 
+// Forward post-boot $.ready to the pre-boot placeholder's ready promise.
+// Called by boot.js after main() creates the real reactive proxy.
+export const chainInstanceReady = (realReadyPromise) => {
+  if (resolveInstanceReady && realReadyPromise) {
+    realReadyPromise.then(() => resolveInstanceReady());
+  }
+};
+
 export default vibe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.7.2",
+  "version": "1.9.0",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",
@@ -27,7 +27,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "Kim Korte",
+  "author": "kkortes",
   "license": "ISC",
   "publishConfig": {
     "access": "public"

package/runtime/_vibe-compiled-iteration-batch.js

@@ -28,6 +28,15 @@
 
 import { BINDING_REGEX } from './constants.js';
 
+// innerHTML serialization encodes <, >, &, ", ' inside attribute values.
+// Decode them back before wrapping @[expr] in ${...} for the template literal.
+const decodeEntities = (s) => s
+  .replace(/&lt;/g, '<')
+  .replace(/&gt;/g, '>')
+  .replace(/&quot;/g, '"')
+  .replace(/&#39;/g, "'")
+  .replace(/&amp;/g, '&');
+
 // Reusable template element for HTML parsing
 const parseTemplate = document.createElement('template');
 
@@ -59,20 +68,20 @@ const hasNestedStructures = (tree) => {
 export const compileBatchFn = (template, itemAlias, indexAlias, stateKeys) => {
   const templateHtml = template.element.innerHTML.trim();
   const escaped = templateHtml.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
-  const code = escaped.replace(BINDING_REGEX, (_, expr) => '${' + expr + '}');
+  const code = escaped.replace(BINDING_REGEX, (_, expr) => '${' + decodeEntities(expr) + '}');
 
   return new Function(
     'arr',
     ...stateKeys,
     `
-    let html = '';
-    const len = arr.length;
-    for (let ${indexAlias} = 0; ${indexAlias} < len; ${indexAlias}++) {
-      const ${itemAlias} = arr[${indexAlias}];
-      html += \`${code}\`;
-    }
-    return html;
-  `,
+      let html = '';
+      const len = arr.length;
+      for (let ${indexAlias} = 0; ${indexAlias} < len; ${indexAlias}++) {
+        const ${itemAlias} = arr[${indexAlias}];
+        html += \`${code}\`;
+      }
+      return html;
+    `,
   );
 };
 

package/runtime/affected.js

@@ -6,20 +6,33 @@ import { evalInScope, resolveThisPath } from './utils.js';
 // Evaluate conditional expression
 const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
 
-// Helper function to check if a match references a specific key
-const matchesKey = (matchStr, key) =>
-  matchStr === key ||
-  matchStr.startsWith(key + '.') ||
-  matchStr.startsWith(key + '[');
+// Helper function to check if a match references a specific key.
+// Fast path: exact match or property access (`user.name` matches `user`).
+// Slow path: word-boundary search for complex expressions like `Math.floor(coins / 100)`
+// where the key appears as an identifier anywhere in the expression.
+const isIdentChar = (c) => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9') || c === '_' || c === '$';
+
+const matchesKey = (matchStr, key) => {
+  if (matchStr === key || matchStr.startsWith(key + '.') || matchStr.startsWith(key + '[')) return true;
+
+  // Search for key as a standalone identifier (word boundaries on both sides)
+  let i = 0;
+  while ((i = matchStr.indexOf(key, i)) !== -1) {
+    const before = i === 0 ? '' : matchStr[i - 1];
+    const after = i + key.length >= matchStr.length ? '' : matchStr[i + key.length];
+    if (!isIdentChar(before) && !isIdentChar(after)) return true;
+    i += key.length;
+  }
+  return false;
+};
 
 const recursive = (tree, state, newState, affected, scopedStateForHydration = null, depth = 0) => {
   // Handle iteration nodes specially
   if (tree.type === 'iteration') {
-    // Handle this.property for component-scoped arrays
-    const arrayPath = resolveThisPath(tree.meta.arrayPath, tree.meta.startComment?.parentElement);
+    const resolvedExpr = resolveThisPath(tree.meta.arrayPath, tree.meta.startComment?.parentElement);
 
-    const oldArray = resolvePath(state, arrayPath);
-    const newArray = resolvePath(newState, arrayPath);
+    const oldArray = evalInScope(resolvedExpr, state, tree.meta.startComment?.parentElement) ?? resolvePath(state, resolvedExpr);
+    const newArray = evalInScope(resolvedExpr, newState, tree.meta.startComment?.parentElement) ?? resolvePath(newState, resolvedExpr);
 
     // Fast path: reference comparison (arrays are typically replaced, not mutated)
     // This avoids expensive O(n) deepEqual for large arrays
@@ -35,13 +48,35 @@ 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.)
-          // Merge newState into scopedState to get updated global values
+          // Build plain-object snapshots for comparison. scopedState is a live Proxy
+          // that reflects current global state — spreading it gives us the local vars
+          // (cat, index) plus current global values. We then override globals with the
+          // actual old (state) / new (newState) values so binding comparisons can detect
+          // which state keys changed.
+          const mergedOldState = { ...instance.scopedState, ...state };
           const mergedNewState = { ...instance.scopedState, ...newState };
-          // Pass the Proxy as scopedState so evalInScope can access iteration variables
-          recursive(instance.tree, instance.scopedState, mergedNewState, affected, instance.scopedState, depth + 1);
+          // Pass scopedState as scopedStateForHydration so evalInScope can access iteration variables
+          recursive(instance.tree, mergedOldState, mergedNewState, affected, instance.scopedState, depth + 1);
         }
       }
     }
@@ -202,17 +237,20 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       for (const m of nameMatches) {
         // Resolve this.property to componentId.property
         const resolvedInner = resolveThisPath(m.inner, tree.element);
+        // HTML lowercases attribute names, so expression may be lowercase while state
+        // keys are camelCase. Match case-insensitively by trying both direct and lowercased.
+        const matchKey = (key) => matchesKey(resolvedInner, key) || matchesKey(resolvedInner, key.toLowerCase());
 
-        const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
+        const noMatch = !shallowState.some(matchKey);
 
         let shouldAffect = false;
 
         if (isInitialHydration) {
-          const newMatches = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
+          const newMatches = shallowNewState.filter(matchKey);
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
           const changedKeys = shallowNewState.filter((key) =>
-            matchesKey(resolvedInner, key) && state[key] !== newState[key]
+            matchKey(key) && state[key] !== newState[key]
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }