@ape-egg/vibe 1.6.1 → 1.7.0

package/compiler/src/main.rs

@@ -84,6 +84,14 @@ struct Args {
     /// Skip iteration optimization - use runtime DOM cloning instead of compiled batch functions
     #[arg(long, name = "iterations-as-is")]
     iterations_as_is: bool,
+
+    /// Skip cleaning output directory before compilation
+    #[arg(long, name = "no-clean", hide = true)]
+    no_clean: bool,
+
+    /// Keep FOUC prevention class/attribute in compiled output
+    #[arg(long, name = "fouc-as-is")]
+    fouc_as_is: bool,
 }
 
 fn main() {
@@ -161,6 +169,12 @@ fn main() {
         overrides.iterations_as_is = !original_iterations_as_is;
         config.iterations_as_is = true;
     }
+    if args.no_clean {
+        config.no_clean = true;
+    }
+    if args.fouc_as_is {
+        config.fouc_as_is = true;
+    }
 
     if args.verbose {
         println!("{}", format!("Vibe Compiler v{}", env!("CARGO_PKG_VERSION")).cyan().bold());
@@ -191,21 +205,31 @@ fn main() {
             format!("{} (config: {})", value.to_string().green(), value.to_string().yellow())
         }
 
-        // Alphabetically ordered with padding (longest key is "node-modules-as-is" = 18 chars)
-        println!("  {}: {}", format!("{:<18}", "assets").cyan(), format_value_no_flag(&config._assets));
-        println!("  {}: {}", format!("{:<18}", "components").cyan(), format_value_no_flag(&config.components));
-        println!("  {}: {}", format!("{:<18}", "components-as-is").cyan(), format_bool_with_flag(config.components_as_is, overrides.components_as_is, original_components_as_is));
-        println!("  {}: {}", format!("{:<18}", "elements-as-is").cyan(), format_bool_with_flag(config.elements_as_is, overrides.elements_as_is, original_elements_as_is));
-        println!("  {}: {}", format!("{:<18}", "exclude-tags").cyan(), format_value_no_flag(format!("{:?}", config.reserved_elements)));
-        println!("  {}: {}", format!("{:<18}", "minify").cyan(), format_bool_with_flag(config.minify, overrides.minify, original_minify));
-        println!("  {}: {}", format!("{:<18}", "node-modules-as-is").cyan(), format_bool_with_flag(config.node_modules_as_is, overrides.node_modules_as_is, original_node_modules_as_is));
-        println!("  {}: {}", format!("{:<18}", "output").cyan(), format_value_no_flag(&config._output_str));
-        println!("  {}: {}", format!("{:<18}", "pages").cyan(), format_value_no_flag(&config.pages));
-        println!("  {}: {}", format!("{:<18}", "root").cyan(), format_value_no_flag(config._root.as_ref().map(|s| s.as_str()).unwrap_or("null")));
-        println!("  {}: {}", format!("{:<18}", "runtime-as-is").cyan(), format_bool_with_flag(config.runtime_as_is, overrides.runtime_as_is, original_runtime_as_is));
-        println!("  {}: {}", format!("{:<18}", "source").cyan(), format_value_no_flag(&config._source_str));
-        println!("  {}: {}", format!("{:<18}", "source-maps").cyan(), format_bool_with_flag(config.source_maps, overrides.source_maps, original_source_maps));
-        println!("  {}: {}", format!("{:<18}", "validate").cyan(), format_bool_with_flag(config.validate, overrides.validate, original_validate));
+        fn format_reserved_elements(elements: &[String]) -> String {
+            if elements.len() <= 2 {
+                format!("{:?}", elements)
+            } else {
+                let remaining = elements.len() - 2;
+                format!("[\"component\", \"div\", ... + {} more]", remaining)
+            }
+        }
+
+        // Alphabetically ordered with padding (longest key is "reservedElements" = 16 chars)
+        println!("  {}: {}", format!("{:<16}", "assets").cyan(), format_value_no_flag(&config._assets));
+        println!("  {}: {}", format!("{:<16}", "components").cyan(), format_value_no_flag(&config.components));
+        println!("  {}: {}", format!("{:<16}", "componentsAsIs").cyan(), format_bool_with_flag(config.components_as_is, overrides.components_as_is, original_components_as_is));
+        println!("  {}: {}", format!("{:<16}", "elementsAsIs").cyan(), format_bool_with_flag(config.elements_as_is, overrides.elements_as_is, original_elements_as_is));
+        println!("  {}: {}", format!("{:<16}", "iterationsAsIs").cyan(), format_bool_with_flag(config.iterations_as_is, overrides.iterations_as_is, original_iterations_as_is));
+        println!("  {}: {}", format!("{:<16}", "minify").cyan(), format_bool_with_flag(config.minify, overrides.minify, original_minify));
+        println!("  {}: {}", format!("{:<16}", "nodeModulesAsIs").cyan(), format_bool_with_flag(config.node_modules_as_is, overrides.node_modules_as_is, original_node_modules_as_is));
+        println!("  {}: {}", format!("{:<16}", "output").cyan(), format_value_no_flag(&config._output_str));
+        println!("  {}: {}", format!("{:<16}", "pages").cyan(), format_value_no_flag(&config.pages));
+        println!("  {}: {}", format!("{:<16}", "reservedElements").cyan(), format_value_no_flag(format_reserved_elements(&config.reserved_elements)));
+        println!("  {}: {}", format!("{:<16}", "root").cyan(), format_value_no_flag(config._root.as_ref().map(|s| s.as_str()).unwrap_or("null")));
+        println!("  {}: {}", format!("{:<16}", "runtimeAsIs").cyan(), format_bool_with_flag(config.runtime_as_is, overrides.runtime_as_is, original_runtime_as_is));
+        println!("  {}: {}", format!("{:<16}", "source").cyan(), format_value_no_flag(&config._source_str));
+        println!("  {}: {}", format!("{:<16}", "sourceMaps").cyan(), format_bool_with_flag(config.source_maps, overrides.source_maps, original_source_maps));
+        println!("  {}: {}", format!("{:<16}", "validate").cyan(), format_bool_with_flag(config.validate, overrides.validate, original_validate));
         println!();
     } else {
         // Show version in non-verbose mode

package/compiler/src/parser/html.rs

@@ -71,6 +71,21 @@ impl HtmlParser {
         Ok(())
     }
 
+    /// Reload a single element from disk (when the file changes in watch mode)
+    pub fn reload_element(&mut self, path: &Path) -> Result<(), ParseError> {
+        if path.extension().map_or(false, |ext| ext == "html") {
+            if let Some(tag_name) = path.file_stem().and_then(|s| s.to_str()) {
+                let content = fs::read_to_string(path).map_err(|e| ParseError::ReadError {
+                    path: path.display().to_string(),
+                    source: e,
+                })?;
+                let element = Element::new(tag_name.to_string(), path.to_path_buf(), content);
+                self.cache.insert(tag_name.to_string(), element);
+            }
+        }
+        Ok(())
+    }
+
     /// Get an element by tag name
     pub fn _get_element(&self, tag_name: &str) -> Option<&Element> {
         self.cache.get(tag_name)
@@ -115,8 +130,20 @@ impl HtmlParser {
 
         // Step 2: Handle explicit <component src="..."> elements
         // If components_as_is is false, recursively inline all <component> elements
+        // Keep running until no more components are found (handles nested components in slots)
         if !components_as_is {
-            result = self.inline_component_elements(&result, external_cache);
+            let mut iterations = 0;
+            let max_iterations = 50; // Prevent infinite loops
+            loop {
+                let before = result.clone();
+                result = self.inline_component_elements(&result, external_cache);
+                iterations += 1;
+
+                // Stop if no changes or max iterations reached
+                if result == before || iterations >= max_iterations {
+                    break;
+                }
+            }
 
             // NOTE: Don't run inline_custom_elements again here - it causes infinite recursion
             // Custom elements inside components are already processed when the component was cached
@@ -366,7 +393,7 @@ impl HtmlParser {
                 replacement = replacement.replace("<slot/>", slot_replacement);
                 replacement = replacement.replace("<slot />", slot_replacement);
 
-                // Keep the <component> wrapper
+                // Keep the <component> wrapper (without src attribute)
                 let wrapper = format!("<component>{}</component>", replacement);
                 result.replace_range(*start..*end, &wrapper);
             }
@@ -440,16 +467,41 @@ fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) ->
         }
     }
 
+    // Sort by descending length so more specific tags (e.g. "accordion-content")
+    // are processed before shorter prefixes (e.g. "accordion"), preventing
+    // partial tag-name matches like <accordion([^>]*)> matching <accordion-content>
+    custom_tags.sort_by(|a, b| b.len().cmp(&a.len()));
+
+    // Pre-compile class attribute regex for merging existing class values
+    let class_attr_re = regex::Regex::new(r#"\bclass="([^"]*)""#).unwrap();
+
     // Transform each custom tag
-    for tag in custom_tags {
-        // Opening tag: <custom-tag attrs> -> <div class="custom-tag" attrs>
-        let open_re = regex::Regex::new(&format!(r"<{}([^>]*)>", regex::escape(&tag))).unwrap();
-        result = open_re
-            .replace_all(&result, format!("<div class=\"{}\"$1>", tag).as_str())
-            .to_string();
+    for tag in &custom_tags {
+        // Opening tag: require whitespace or end-of-tag after the tag name so that
+        // <accordion> does not accidentally match <accordion-content>
+        let open_re = regex::Regex::new(
+            &format!(r"<{}([\s][^>]*|)>", regex::escape(tag))
+        ).unwrap();
+
+        result = open_re.replace_all(&result, |caps: &regex::Captures| -> String {
+            let attrs = caps.get(1).map(|m| m.as_str()).unwrap_or("");
+
+            // If the element already has class="...", merge tag name with existing value
+            if let Some(class_cap) = class_attr_re.captures(attrs) {
+                let existing = class_cap.get(1).unwrap().as_str();
+                let merged = format!("{} {}", tag, existing);
+                let new_attrs = class_attr_re.replace(
+                    attrs,
+                    format!(r#"class="{}""#, merged.trim()).as_str(),
+                );
+                format!("<div{}>", new_attrs)
+            } else {
+                format!("<div class=\"{}\"{}>", tag, attrs)
+            }
+        }).to_string();
 
         // Closing tag: </custom-tag> -> </div>
-        let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(&tag))).unwrap();
+        let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(tag))).unwrap();
         result = close_re.replace_all(&result, "</div>").to_string();
     }
 

package/index.js

@@ -1,15 +1,41 @@
 // Universal entry point for Vibe
 // Usage: import vibe from 'vibe/index.js'; vibe({ initialState }, { debug: true }, 'body');
 
-import { ensureBoot, boot, isBooted } from './boot.js';
+import { boot, isBooted, ensureBoot } from './boot.js';
+
+// Shared instance for queueing listeners before boot
+let vibeInstance = null;
+
+const createVibeInstance = () => ({
+  _pendingListeners: { afterUpdate: [], afterDomMutation: [], ready: [] },
+  on(event, callback) {
+    // If booted, delegate to window.$
+    if (isBooted() && window.$) {
+      return window.$.on(event, callback);
+    }
+
+    // Otherwise queue for later
+    if (this._pendingListeners[event]) {
+      this._pendingListeners[event].push(callback);
+    }
+    return () => {
+      this._pendingListeners[event] = this._pendingListeners[event].filter(cb => cb !== callback);
+    };
+  }
+});
 
 const vibe = (state = {}, config, targetSelector) => {
   if (isBooted()) {
-    // Already booted - mutate live state
+    // Already booted - merge state into live proxy
     Object.assign(window.$, state);
     return window.$;
   }
 
+  // Create shared instance on first call
+  if (!vibeInstance) {
+    vibeInstance = createVibeInstance();
+  }
+
   // Not booted yet - accumulate in global state registry
   if (!window.__vibeGlobalState) {
     window.__vibeGlobalState = {};
@@ -26,15 +52,18 @@ const vibe = (state = {}, config, targetSelector) => {
     window.__vibeTargetSelector = targetSelector;
   }
 
-  // Explicit boot call (no state passed means "boot now")
+  // Explicit boot call (no state passed means "boot now with accumulated state")
   if (Object.keys(state).length === 0 && Object.keys(window.__vibeGlobalState).length > 0) {
     return boot();
   }
 
-  // Ensure boot happens in microtask
+  // Queue boot in microtask to allow all component scripts to register
   ensureBoot();
 
-  return null;
+  return vibeInstance;
 };
 
+// Export function to get pending listeners (used by boot.js)
+export const getPendingListeners = () => vibeInstance?._pendingListeners || null;
+
 export default vibe;

package/llms.txt

@@ -129,7 +129,7 @@ Conditionals can be nested inside iterations and vice versa.
 Skip reactive processing for an element and its children:
 
 ```html
-<code dehydrate>@[this] displays literally, not parsed</code>
+<code vibe-dehydrate>@[this] displays literally, not parsed</code>
 ```
 
 Use cases:

package/package.json

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

package/runtime/cleanup.js

@@ -68,13 +68,4 @@ export const cleanup = (rootElement, debug = false) => {
       debug,
     );
   }
-
-  // Dispatch ready event to signal that Vibe has completed all initial processing
-  if (typeof document !== 'undefined') {
-    document.dispatchEvent(
-      new CustomEvent('vibe:ready', {
-        detail: { rootElement, cleanName, isClass },
-      }),
-    );
-  }
 };

package/runtime/component.js

@@ -36,7 +36,9 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
   const componentElements = rootElement.querySelectorAll('component[src], div.component[src]');
 
   if (componentElements.length === 0) {
-    if (onComplete) onComplete();
+    // 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;
   }
 
@@ -50,7 +52,8 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
       // Process next component
       processComponent(rootElement, onComplete, config);
     } else {
-      if (onComplete) onComplete();
+      // Defer onComplete to give user code a chance to register listeners
+      if (onComplete) queueMicrotask(() => onComplete());
     }
     return;
   }
@@ -131,21 +134,21 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
           const thisRegex = /@\[this\.(\w+)\]/g;
 
           // Rewrite in text nodes
-          Array.from(element.childNodes).forEach(node => {
+          Array.from(element.childNodes).forEach((node) => {
             if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('@[this.')) {
               node.textContent = node.textContent.replace(thisRegex, `@[${componentId}.$1]`);
             }
           });
 
           // Rewrite in attributes
-          Array.from(element.attributes || []).forEach(attr => {
+          Array.from(element.attributes || []).forEach((attr) => {
             if (attr.value.includes('@[this.')) {
               attr.value = attr.value.replace(thisRegex, `@[${componentId}.$1]`);
             }
           });
 
           // Recurse into children
-          Array.from(element.children).forEach(child => {
+          Array.from(element.children).forEach((child) => {
             rewriteThisBindings(child);
           });
         };
@@ -195,9 +198,10 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
       // 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');
+        const newWrapper =
+          el.tagName === 'DIV'
+            ? document.createElement('div')
+            : document.createElement('component');
 
         if (el.tagName === 'DIV') {
           newWrapper.className = 'component';
@@ -207,16 +211,8 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
         el.replaceWith(newWrapper);
         debugLog(PHASE_FETCH, src, debug);
 
-        // Force immediate processing of the mutation (MutationObserver is async, but we need sync)
-        // Use microtask to process right after replaceWith completes
-        if (config._forceSync && config._processMutations && config._observer) {
-          Promise.resolve().then(() => {
-            const pending = config._observer.takeRecords();
-            if (pending.length > 0) {
-              config._processMutations(pending);
-            }
-          });
-        }
+        // Let MutationObserver handle the mutation naturally
+        // It will call processMutations, which will call processComponent for the next component
       }
     })
     .catch((error) => {

package/runtime/index.js

@@ -18,6 +18,7 @@ import {
   PHASE_UPDATE,
   PHASE_MUTATE,
   PHASE_HYPERSPEED,
+  PHASE_READY,
   DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
 import { processComponent, abortComponentFetch } from './component.js';
@@ -70,12 +71,12 @@ const shouldProcessNode = (node) => {
 // Navigate tree using dot notation (handles .children at each level)
 const navigateTree = (tree, path) => {
   if (!path) return tree;
-  return path.split('.').reduce((node, key) => node?.children?.[key], tree);
+  return path.split('.').filter(k => k).reduce((node, key) => node?.children?.[key], tree);
 };
 
 // Get or create a node in the tree at the given path
 const ensureNode = (tree, path) => {
-  const keys = path.split('.');
+  const keys = path.split('.').filter(k => k);
   return keys.reduce((node, key) => {
     if (!node.children[key]) {
       node.children[key] = { children: {} };
@@ -497,6 +498,7 @@ const main = (s, config = {}, stringSelector = '') => {
   const hooks = {
     afterUpdate: [],
     afterDomMutation: [],
+    ready: [],
   };
 
   // Extract plain values from proxy (removes proxy wrappers)
@@ -950,6 +952,15 @@ const main = (s, config = {}, stringSelector = '') => {
     if (shouldCleanup(rootElement)) {
       cleanup(rootElement, debug);
       cleanupExecuted = true;
+
+      // Fire ready hook after cleanup completes
+      hooks.ready.forEach((callback) => {
+        try {
+          callback();
+        } catch (error) {
+          console.error('[vibe] Error in ready hook:', error);
+        }
+      });
     }
   };
 

package/runtime/iterate.js

@@ -16,9 +16,10 @@ import * as compiled from './pre-compiled-iterations.js';
  * Find a comment node with matching text content in the given nodes.
  */
 const findComment = (nodes, text) => {
+  const trimmedText = text.trim();
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
-    if (node.nodeType === 8 && node.textContent.trim() === text.trim()) {
+    if (node.nodeType === 8 && node.textContent.trim() === trimmedText) {
       return node;
     }
   }
@@ -36,9 +37,16 @@ const cloneTreeWithElements = (originalTree, clonedRoot) => {
     parsed: originalTree.parsed,
     element: clonedRoot,
     children: {},
-    ...(originalTree.attributes && { attributes: originalTree.attributes }),
   };
 
+  // Avoid spread operator for performance
+  if (originalTree.attributes) {
+    cloned.attributes = originalTree.attributes;
+  }
+  if (originalTree.nameBindings) {
+    cloned.nameBindings = originalTree.nameBindings;
+  }
+
   if (!originalTree.children) return cloned;
 
   const clonedChildNodes = clonedRoot?.childNodes;
@@ -130,26 +138,42 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
   let clonedNodes = [];
   let firstElement = null;
 
-  // Always use slow path: clone and parse from scratch
-  // TODO: Re-enable fast path once cloneTreeWithElements properly handles nested conditionals
+  // TEMPORARY: Disable fast path to test if it's causing duplication
+  let canUseFastPath = false;
 
   // Create a container for parsing (to capture all nodes including comment nodes like <!-- if -->)
   const parseContainer = document.createElement('div');
 
-  // Clone all template nodes into the container
-  for (let i = 0; i < templateNodes.length; i++) {
-    const cloned = templateNodes[i].cloneNode(true);
-    parseContainer.appendChild(cloned);
-    if (!firstElement && cloned.nodeType === 1) {
-      firstElement = cloned;
+  if (canUseFastPath) {
+    // Fast path: clone template nodes and map to cached tree structure
+    for (let i = 0; i < templateNodes.length; i++) {
+      const cloned = templateNodes[i].cloneNode(true);
+      parseContainer.appendChild(cloned);
+      if (!firstElement && cloned.nodeType === 1) {
+        firstElement = cloned;
+      }
+    }
+    tree = cloneTreeWithElements(cachedTree, parseContainer);
+  } else {
+    // Slow path: clone and parse from scratch
+    for (let i = 0; i < templateNodes.length; i++) {
+      const cloned = templateNodes[i].cloneNode(true);
+      parseContainer.appendChild(cloned);
+      if (!firstElement && cloned.nodeType === 1) {
+        firstElement = cloned;
+      }
     }
+    // Parse the entire container (includes all nodes + conditionals)
+    tree = parse(parseContainer);
   }
 
-  // Parse the entire container (includes all nodes + conditionals)
-  tree = parse(parseContainer);
-
   // Extract the cloned nodes from the container (these are the same nodes the tree references)
-  clonedNodes = Array.from(parseContainer.childNodes);
+  // Avoid Array.from for performance
+  const childNodes = parseContainer.childNodes;
+  clonedNodes = [];
+  for (let i = 0; i < childNodes.length; i++) {
+    clonedNodes.push(childNodes[i]);
+  }
 
   // If no firstElement found, use parseContainer as fallback
   if (!firstElement) {
@@ -271,6 +295,21 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     return;
   }
 
+  // Fallback check: If markers are lost (e.g., comment nodes replaced by component loading),
+  // check actual DOM state between comments for hydrated nodes
+  let currentNode = startComment.nextSibling;
+  while (currentNode && currentNode !== endComment) {
+    if (currentNode.nodeType === 1) {
+      // Element node
+      const html = currentNode.outerHTML || '';
+      // If node doesn't have any @[...] syntax, it's been hydrated
+      if (!html.includes('@[')) {
+        return; // Already rendered
+      }
+    }
+    currentNode = currentNode.nextSibling;
+  }
+
   // Remove template nodes from DOM on first render
   if (!iterationNode.runtime.templateRemoved) {
     let node = startComment.nextSibling;
@@ -361,7 +400,16 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   // Compiled path: Use pre-compiled batch function when available
   if (compiled.canUseCompiled(iterationNode)) {
     const compiledMeta = compiled.getCompiledMeta(iterationNode);
-    if (compiled.updateCompiled(iterationNode, newArray, newState, compiledMeta, startComment, endComment)) {
+    if (
+      compiled.updateCompiled(
+        iterationNode,
+        newArray,
+        newState,
+        compiledMeta,
+        startComment,
+        endComment,
+      )
+    ) {
       return;
     }
     // Fall through to runtime path if compiled failed

package/runtime/parse.js

@@ -12,7 +12,7 @@ const parseHTML = (children, rootKey = undefined) =>
   children.reduce((s, element, i) => {
     const { nodeName, textContent } = element;
     if (['#comment'].includes(nodeName)) {
-      return `${s}${nodeName === '#comment' ? `asd` : textContent}`;
+      return s;
     }
     const name = nodeName.startsWith('#') ? nodeName.slice(1) : nodeName;
     const innerNodeIdentifier = `${name}_${i}`.toLowerCase();
@@ -77,8 +77,9 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
               },
             },
             // 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.__vibeIterationRuntime || {
+            runtime: (element.isConnected && element.__vibeIterationRuntime) || {
               instances: [],
               templateRemoved: false,
             },