@ape-egg/vibe 1.6.1 → 1.7.1

package/compiler/src/compiler/compile.rs

@@ -40,9 +40,8 @@ const MIRROR_EXTENSIONS: &[&str] = &[
 
 // Files and directories to skip when walking source (supports glob patterns)
 // Note: Output directory is checked dynamically (not hardcoded here)
+// Note: Dotfiles are handled by starts_with('.') check in should_skip_path()
 pub const SKIP_FILES: &[&str] = &[
-    ".git",
-    ".claude",
     "target",            // Rust build artifacts
     "tests",             // Test files
     "test-results",
@@ -56,6 +55,11 @@ pub const SKIP_FILES: &[&str] = &[
 
 /// Check if a path should be skipped based on SKIP_FILES patterns
 pub fn should_skip_path(path: &Path, name: &str) -> bool {
+    // Check if name starts with dot (dotfiles/directories)
+    if name.starts_with('.') {
+        return true;
+    }
+
     // Check exact name match (for directories and simple filenames)
     if SKIP_FILES.contains(&name) {
         return true;
@@ -433,6 +437,11 @@ impl Compiler {
         }
     }
 
+    /// Clear all cached component content (forces re-fetch on next compile)
+    pub fn clear_component_cache(&mut self) {
+        self.component_cache.clear();
+    }
+
     pub fn compile(&mut self) -> Result<CompileStats, CompileError> {
         let mut stats = CompileStats {
             files_compiled: 0,
@@ -479,17 +488,28 @@ impl Compiler {
             }
         }
 
-        // Validate HTML syntax if requested (optional, controlled by validate flag)
-        if self.config.validate {
-            let validation_start = Instant::now();
-            if self.verbose {
-                println!("\nValidating HTML syntax...");
-            }
-            self.validate_html_syntax()?;
-            stats.validation_time_ms = Some(validation_start.elapsed().as_secs_f64() * 1000.0);
+        // Validate HTML syntax (always runs)
+        let validation_start = Instant::now();
+        if self.verbose {
+            println!("\nValidating HTML syntax...");
+        }
+        self.validate_html_syntax()?;
+        stats.validation_time_ms = Some(validation_start.elapsed().as_secs_f64() * 1000.0);
+        if self.verbose {
+            println!("  HTML validation completed successfully");
+        }
+
+        // Clean output directory if not in no-clean mode
+        if !self.config.no_clean && self.config.output.exists() {
             if self.verbose {
-                println!("  HTML validation completed successfully");
+                println!("  Cleaning output directory: {}", self.config.output.display());
             }
+            fs::remove_dir_all(&self.config.output).map_err(|e| {
+                CompileError::WriteError {
+                    path: self.config.output.display().to_string(),
+                    source: e,
+                }
+            })?;
         }
 
         // Create output directory
@@ -622,6 +642,13 @@ impl Compiler {
         }
 
         for file_path in files {
+            // Validate HTML before compiling (same as full compile path)
+            let content = fs::read_to_string(file_path).map_err(|e| CompileError::ReadError {
+                path: file_path.display().to_string(),
+                source: e,
+            })?;
+            self.validate_html(&content, file_path)?;
+
             // Calculate relative path
             let relative_path = file_path
                 .strip_prefix(&self.config.source)
@@ -785,30 +812,19 @@ impl Compiler {
         source_root: &Path,
     ) -> Result<(), String> {
         use crate::compiler::manifest_builder::ManifestBuilder;
-        use crate::compiler::value_stamper::ValueStamper;
         use crate::compiler::component_tagger::ComponentTagger;
+        use crate::compiler::value_stamper::ValueStamper;
 
         // Tag components with deterministic IDs and structure state
         let tagged = ComponentTagger::tag_components(html, &source_root.to_path_buf())?;
         let html = &tagged.html;  // Use modified HTML with data-vibe-component-id attributes
         let state = tagged.state;
 
-        // Build manifest from ORIGINAL HTML (before stamping, so templates have @[...] markers)
+        // Build manifest from pre-stamp HTML (both conditional branches present, @[...] markers intact)
+        // This ensures restoration.template has both branches so runtime can switch between them
         let manifest_builder = ManifestBuilder::new();
         let manifest = manifest_builder.build_from_html(html, &state, iterations_as_is)?;
 
-        // Stamp values (pre-render) AFTER building manifest
-        // When components_as_is is true, skip stamping inside component elements (runtime will handle them)
-        let stamper = ValueStamper::new(&state, components_as_is)?;
-        let mut pre_rendered = stamper.stamp_html(html.to_string())?;
-
-        // Remove FOUC prevention since HTML is pre-rendered
-        pre_rendered = remove_fouc_prevention(pre_rendered);
-
-        // Write pre-rendered HTML
-        fs::write(html_path, pre_rendered)
-            .map_err(|e| format!("Failed to write HTML: {}", e))?;
-
         // Write manifest
         let manifest_path = output_dir
             .join("vibe-hyperspeed")
@@ -832,6 +848,20 @@ impl Compiler {
         fs::write(&manifest_path, manifest_js)
             .map_err(|e| format!("Failed to write manifest: {}", e))?;
 
+        // Stamp the compiled HTML with initial state values for FOUC prevention:
+        // - @[...] bindings replaced with their initial values
+        // - Only the active conditional branch is kept (inactive branch stripped)
+        // - Iterations are pre-rendered with initial array data
+        // The manifest (written above) preserves BOTH branches so the runtime can
+        // restore them and switch between branches reactively.
+        let stamper = ValueStamper::new(&state, components_as_is)
+            .map_err(|e| format!("Failed to create value stamper: {}", e))?;
+        let stamped = stamper.stamp_html(html.to_string())
+            .map_err(|e| format!("Failed to stamp HTML: {}", e))?;
+
+        fs::write(html_path, stamped)
+            .map_err(|e| format!("Failed to write stamped HTML: {}", e))?;
+
         Ok(())
     }
 
@@ -1076,11 +1106,6 @@ impl Compiler {
             source: e,
         })?;
 
-        // Validate if requested
-        if self.config.validate {
-            self.validate_html(&content, path)?;
-        }
-
         // Count <component src="..."> instances before processing (only if not components_as_is)
         let (internal_count, external_count, component_srcs) = if !self.config.components_as_is {
             self.extract_components(&content)
@@ -1099,12 +1124,17 @@ impl Compiler {
         );
 
         // Minify if requested
-        let output = if self.config.minify {
+        let mut output = if self.config.minify {
             minify_html(&processed)
         } else {
             processed
         };
 
+        // Remove FOUC prevention unless fouc_as_is is enabled
+        if !self.config.fouc_as_is {
+            output = remove_fouc_prevention(output);
+        }
+
         // Write to output
         let output_path = self.get_output_path(path, relative_path)?;
         fs::write(&output_path, output).map_err(|e| CompileError::WriteError {
@@ -1212,8 +1242,8 @@ impl Compiler {
             // Transform custom tags to <component> tags
             let transformed = parser.process_html(
                 &content,
-                false, // elements_as_is
-                &[], // reserved_elements
+                self.config.elements_as_is,
+                &self.config.reserved_elements,
                 true, // components_as_is (don't inline, just transform)
                 &self.config.components,
             );
@@ -1249,8 +1279,8 @@ impl Compiler {
             // Transform custom tags to <component> tags
             let transformed = parser.process_html(
                 &content,
-                false, // elements_as_is
-                &[], // reserved_elements
+                self.config.elements_as_is,
+                &self.config.reserved_elements,
                 true, // components_as_is (don't inline, just transform)
                 &self.config.components,
             );
@@ -1463,8 +1493,8 @@ impl Compiler {
             let file_name = entry.file_name();
             let file_name_str = file_name.to_string_lossy();
 
-            // Skip hidden files and specific directories/patterns
-            if file_name_str.starts_with('.') || should_skip_path(&path, &file_name_str) {
+            // Skip specific directories/patterns (includes dotfiles via SKIP_FILES)
+            if should_skip_path(&path, &file_name_str) {
                 continue;
             }
 
@@ -1505,8 +1535,8 @@ impl Compiler {
     }
 
     fn validate_html(&self, content: &str, path: &Path) -> Result<(), CompileError> {
+        // Check 1: Quote balance per line
         let mut line_num = 1;
-
         for line in content.lines() {
             let quote_count = line.matches('"').count();
             if quote_count % 2 != 0 {
@@ -1519,9 +1549,77 @@ impl Compiler {
             line_num += 1;
         }
 
+        // Check 2: Tag balance (unclosed elements break slot extraction)
+        self.validate_tag_balance(content, path)
+    }
+
+    fn validate_tag_balance(&self, content: &str, path: &Path) -> Result<(), CompileError> {
+        const VOID_ELEMENTS: &[&str] = &[
+            "area", "base", "br", "col", "embed", "hr", "img", "input",
+            "link", "meta", "param", "source", "track", "wbr",
+        ];
+        // These are implicitly closed by the parser — don't require explicit close tags
+        const IMPLICIT_CLOSE: &[&str] = &[
+            "html", "head", "body", "p", "li", "dt", "dd", "option",
+            "optgroup", "tr", "td", "th", "thead", "tbody", "tfoot", "colgroup",
+        ];
+
+        // Strip comments, raw content blocks, and @[...] bindings before tag scanning
+        let stripped = Self::strip_for_tag_validation(content);
+
+        // Match any tag: opening, self-closing, or closing
+        let tag_re = Regex::new(r"</?([a-zA-Z][a-zA-Z0-9-]*)(?:\s[^>]*)?>").unwrap();
+
+        // Count opens vs closes per tag name; track line of first open for error reporting
+        let mut counts: HashMap<String, (i32, usize)> = HashMap::new();
+        for cap in tag_re.captures_iter(&stripped) {
+            let full = cap.get(0).unwrap().as_str();
+            let name = cap[1].to_lowercase();
+            if VOID_ELEMENTS.contains(&name.as_str()) || IMPLICIT_CLOSE.contains(&name.as_str()) {
+                continue;
+            }
+            if full.starts_with("</") {
+                counts.entry(name).and_modify(|(c, _)| *c -= 1);
+            } else if full.ends_with("/>") {
+                // self-closing — no balance change
+            } else {
+                let offset = cap.get(0).unwrap().start();
+                let line = stripped[..offset].matches('\n').count() + 1;
+                let entry = counts.entry(name).or_insert((0, line));
+                entry.0 += 1;
+            }
+        }
+
+        // Report the first unclosed tag (sorted by line for deterministic output)
+        let mut unclosed: Vec<(String, usize)> = counts.into_iter()
+            .filter(|(_, (count, _))| *count > 0)
+            .map(|(name, (_, line))| (name, line))
+            .collect();
+        unclosed.sort_by_key(|(_, line)| *line);
+
+        if let Some((name, line)) = unclosed.first() {
+            return Err(CompileError::ValidationError {
+                file: path.display().to_string(),
+                line: *line,
+                message: format!("Unclosed tag <{}>", name),
+            });
+        }
+
         Ok(())
     }
 
+    fn strip_for_tag_validation(content: &str) -> String {
+        // Strip HTML comments <!-- ... --> (includes Vibe syntax: each, if, else, /if, /each)
+        let comment_re = Regex::new(r"(?s)<!--.*?-->").unwrap();
+        let s = comment_re.replace_all(content, "");
+        // Strip @[...] reactive bindings (can contain < and > characters)
+        let binding_re = Regex::new(r"@\[[^\]]*\]").unwrap();
+        let s = binding_re.replace_all(&s, "");
+        // Strip content inside <script>, <style>, <pre> to avoid parsing embedded code as HTML
+        let raw_re = Regex::new(r"(?si)(<(?:script|style|pre)(?:\s[^>]*)?>).*?(</(?:script|style|pre)>)").unwrap();
+        raw_re.replace_all(&s, "$1$2").into_owned()
+    }
+
     /// Copy an entire directory recursively
     fn copy_directory(
         &mut self,

package/compiler/src/compiler/component_tagger.rs

@@ -20,10 +20,23 @@ pub struct TaggedResult {
 impl ComponentTagger {
     /// Find component wrappers, add deterministic IDs, and structure state
     pub fn tag_components(html: &str, base_path: &PathBuf) -> Result<TaggedResult, String> {
-        // Parse HTML
+        // Extract ALL <template> content to protect it from HTML parser
+        // HTML parsers can strip content from <template> tags during serialization
+        let template_regex = regex::Regex::new(r"(?s)<template[^>]*>.*?</template>").unwrap();
+        let mut template_placeholders: Vec<String> = Vec::new();
+        let mut html_with_placeholders = html.to_string();
+
+        for (i, mat) in template_regex.find_iter(html).enumerate() {
+            let content = mat.as_str();
+            let placeholder = format!("<!--VIBE_TEMPLATE_PLACEHOLDER_{}-->", i);
+            template_placeholders.push(content.to_string());
+            html_with_placeholders = html_with_placeholders.replace(content, &placeholder);
+        }
+
+        // Parse HTML (with placeholders instead of actual vibe-dehydrate content)
         let dom = parse_document(RcDom::default(), Default::default())
             .from_utf8()
-            .read_from(&mut html.as_bytes())
+            .read_from(&mut html_with_placeholders.as_bytes())
             .map_err(|e| format!("Failed to parse HTML: {:?}", e))?;
 
         // Find all component wrappers and extract their state
@@ -39,9 +52,15 @@ impl ComponentTagger {
             SerializeOpts::default()
         ).map_err(|e| format!("Failed to serialize HTML: {:?}", e))?;
 
-        let modified_html = String::from_utf8(modified_html_bytes)
+        let mut modified_html = String::from_utf8(modified_html_bytes)
             .map_err(|e| format!("Failed to convert HTML to UTF-8: {}", e))?;
 
+        // Restore template content from placeholders
+        for (i, content) in template_placeholders.iter().enumerate() {
+            let placeholder = format!("<!--VIBE_TEMPLATE_PLACEHOLDER_{}-->", i);
+            modified_html = modified_html.replace(&placeholder, content);
+        }
+
         // Extract all state from HTML
         let all_state = StateExtractor::extract_from_html(html, base_path)?;
 
@@ -108,46 +127,55 @@ impl ComponentTagger {
             if is_component || is_div_component {
                 drop(borrowed_attrs); // Release borrow before checking innerHTML
 
-                // First check if this component has state-registering scripts
-                // Serialize this node's children to get innerHTML
-                let mut inner_html_bytes = Vec::new();
+                // Only extract state from DIRECT <script> children — not the full subtree.
+                // Using the full subtree caused the Layout wrapper (a <component> created by
+                // inline_component_elements that contains all nested component scripts) to be
+                // treated as a stateful component with the merged state of all its descendants.
+                // That made rewrite_this_to_component_id rewrite every @[this.xxx] in the page
+                // to @[_c0.xxx] before child components could claim their own bindings.
+                let mut direct_scripts_html = String::new();
                 for child in node.children.borrow().iter() {
-                    let _ = serialize(
-                        &mut inner_html_bytes,
-                        &SerializableHandle::from(child.clone()),
-                        SerializeOpts::default()
-                    );
+                    if let NodeData::Element { name: ref child_name, .. } = child.data {
+                        if child_name.local.as_ref() == "script" {
+                            let mut script_bytes = Vec::new();
+                            let _ = serialize(
+                                &mut script_bytes,
+                                &SerializableHandle::from(child.clone()),
+                                SerializeOpts::default()
+                            );
+                            if let Ok(script_str) = String::from_utf8(script_bytes) {
+                                direct_scripts_html.push_str(&script_str);
+                            }
+                        }
+                    }
                 }
 
-                if let Ok(inner_html) = String::from_utf8(inner_html_bytes) {
-                    // Extract state from component's innerHTML
-                    if let Ok(Value::Object(comp_state)) = StateExtractor::extract_from_html(
-                        &inner_html,
-                        &PathBuf::from(".")
-                    ) {
-                        // Only tag and register components that have state
-                        if !comp_state.is_empty() {
-                            let component_id = format!("_c{}", *counter.borrow());
-                            *counter.borrow_mut() += 1;
-
-                            // Add data-vibe-component-id attribute
-                            let mut attrs_mut = attrs.borrow_mut();
-                            attrs_mut.push(markup5ever::Attribute {
-                                name: QualName::new(
-                                    None,
-                                    Namespace::from(""),
-                                    LocalName::from("data-vibe-component-id"),
-                                ),
-                                value: component_id.clone().into(),
-                            });
-                            drop(attrs_mut);
-
-                            // Rewrite this.property to componentId.property in the node's children
-                            // This allows ValueStamper to properly evaluate component-scoped expressions
-                            Self::rewrite_this_to_component_id(node, &component_id);
-
-                            component_states.borrow_mut().push((component_id, Value::Object(comp_state)));
-                        }
+                if let Ok(Value::Object(comp_state)) = StateExtractor::extract_from_html(
+                    &direct_scripts_html,
+                    &PathBuf::from(".")
+                ) {
+                    // Only tag and register components that have state
+                    if !comp_state.is_empty() {
+                        let component_id = format!("_c{}", *counter.borrow());
+                        *counter.borrow_mut() += 1;
+
+                        // Add data-vibe-component-id attribute
+                        let mut attrs_mut = attrs.borrow_mut();
+                        attrs_mut.push(markup5ever::Attribute {
+                            name: QualName::new(
+                                None,
+                                Namespace::from(""),
+                                LocalName::from("data-vibe-component-id"),
+                            ),
+                            value: component_id.clone().into(),
+                        });
+                        drop(attrs_mut);
+
+                        // Rewrite this.property to componentId.property in the node's children
+                        // This allows ValueStamper to properly evaluate component-scoped expressions
+                        Self::rewrite_this_to_component_id(node, &component_id);
+
+                        component_states.borrow_mut().push((component_id, Value::Object(comp_state)));
                     }
                 }
             }

package/compiler/src/compiler/value_stamper.rs

@@ -79,8 +79,21 @@ impl<'a> ValueStamper<'a> {
     }
 
     pub fn stamp_html(&self, html: String) -> Result<String, String> {
+        // Extract vibe-dehydrate content to protect it from processing
+        // This prevents @[...] markers and iterations/conditionals from being processed
+        let dehydrate_regex = Regex::new(r"(?s)<template[^>]*\svibe-dehydrate[^>]*>.*?</template>").unwrap();
+        let mut dehydrate_placeholders: Vec<String> = Vec::new();
+        let mut html_with_placeholders = html.clone();
+
+        for (i, mat) in dehydrate_regex.find_iter(&html).enumerate() {
+            let content = mat.as_str();
+            let placeholder = format!("<!--VIBE_DEHYDRATE_PLACEHOLDER_{}-->", i);
+            dehydrate_placeholders.push(content.to_string());
+            html_with_placeholders = html_with_placeholders.replace(content, &placeholder);
+        }
+
         // First, render iterations (expands templates into multiple instances)
-        let html = self.render_iterations(html)?;
+        let html = self.render_iterations(html_with_placeholders)?;
 
         // Then, render conditionals (resolve if/else branches)
         let html = self.render_conditionals(html)?;
@@ -95,6 +108,13 @@ impl<'a> ValueStamper<'a> {
             }
         }
 
+        // Skip elements with vibe-dehydrate attribute (content should not be processed)
+        // This is a secondary protection in case placeholders aren't used
+        let dehydrate_regex = Regex::new(r"(?s)<template[^>]*\svibe-dehydrate[^>]*>.*?</template>").unwrap();
+        for mat in dehydrate_regex.find_iter(&html) {
+            skip_regions.push((mat.start(), mat.end()));
+        }
+
         // When components_as_is is true, skip component elements (runtime will handle them)
         // Match both <component> and <div class="component"> elements
         if self.components_as_is {
@@ -148,6 +168,15 @@ impl<'a> ValueStamper<'a> {
         // Add remaining text
         result.push_str(&html[last_pos..]);
 
+        // Clean up attributes that still contain unresolved markers
+        result = self.cleanup_unresolved_attributes(result);
+
+        // Restore vibe-dehydrate content from placeholders
+        for (i, content) in dehydrate_placeholders.iter().enumerate() {
+            let placeholder = format!("<!--VIBE_DEHYDRATE_PLACEHOLDER_{}-->", i);
+            result = result.replace(&placeholder, content);
+        }
+
         // Finally, clean up boolean-like attributes with falsy values
         // When components_as_is is true, skip cleanup inside component elements
         Ok(self.cleanup_boolean_attributes(result, &skip_regions))
@@ -238,13 +267,19 @@ impl<'a> ValueStamper<'a> {
                     // Render nested iterations first
                     let mut item_html = temp_stamper.render_iterations_recursive(template.clone())?;
 
-                    // Then stamp all bindings in this item's context
+                    // Then render conditionals with this item's context
+                    item_html = temp_stamper.render_conditionals(item_html)?;
+
+                    // Finally stamp all bindings in this item's context
                     item_html = temp_stamper.binding_regex.replace_all(&item_html, |caps: &Captures| {
                         let expr = &caps[1];
                         temp_stamper.eval_expression(expr)
                             .unwrap_or_else(|| caps[0].to_string())
                     }).to_string();
 
+                    // Clean up attributes with unresolved markers (e.g., data-tutorial="@[item.id]" when item.id is undefined)
+                    item_html = temp_stamper.cleanup_unresolved_attributes(item_html);
+
                     rendered_items.push(item_html);
                 }
 
@@ -500,9 +535,31 @@ impl<'a> ValueStamper<'a> {
     fn try_eval_condition(&self, condition: &str) -> Option<bool> {
         self.context.with(|ctx| -> Option<bool> {
             // Try to evaluate condition
-            // If it fails (e.g., references undefined iteration variables), return None
-            let result: rquickjs::Value = ctx.eval(condition).ok()?;
-            result.as_bool()
+            let result: rquickjs::Value = match ctx.eval(condition) {
+                Ok(val) => val,
+                Err(_) => {
+                    // Evaluation failed (undefined variable, syntax error, etc.)
+                    // Default to false as per requirements
+                    return Some(false);
+                }
+            };
+
+            // Use JavaScript truthiness rules instead of requiring boolean type
+            // This allows conditions like "item.id" to work correctly
+            if result.is_bool() {
+                result.as_bool()
+            } else if result.is_null() || result.is_undefined() {
+                Some(false)
+            } else if result.is_number() {
+                // 0, NaN are falsy
+                result.as_number().map(|n| n != 0.0 && !n.is_nan())
+            } else if result.is_string() {
+                // Empty string is falsy
+                result.as_string().and_then(|s| s.to_string().ok()).map(|s| !s.is_empty())
+            } else {
+                // Objects, arrays are truthy
+                Some(true)
+            }
         })
     }
 
@@ -510,6 +567,19 @@ impl<'a> ValueStamper<'a> {
     /// Boolean-like attributes (not in VALUE_ATTRS) should be:
     /// - Removed entirely when falsy
     /// - Present with empty value when truthy (HTML5 boolean attribute syntax)
+    /// Remove attributes that still contain unresolved markers (e.g., data-tutorial="@[item.id]")
+    /// These occur when iterating over items where some don't have the referenced property
+    fn cleanup_unresolved_attributes(&self, html: String) -> String {
+        // Match attributes with marker values: attr="@[...]"
+        // Use non-greedy match and look for closing "]" at end of attribute value
+        let attr_with_marker = Regex::new(r#"\s+([\w-]+)="@\[.+?\]""#).unwrap();
+
+        attr_with_marker.replace_all(&html, |_caps: &Captures| {
+            // Remove the entire attribute when it has an unresolved marker
+            String::new()
+        }).to_string()
+    }
+
     fn cleanup_boolean_attributes(&self, html: String, skip_regions: &[(usize, usize)]) -> String {
         // Create a set for faster lookup
         let value_attrs: HashSet<&str> = VALUE_ATTRS.iter().copied().collect();