@ape-egg/vibe 1.3.2 → 1.6.0

package/compiler/src/compiler/component_tagger.rs

@@ -0,0 +1,234 @@
+use html5ever::parse_document;
+use html5ever::tendril::TendrilSink;
+use html5ever::serialize::{serialize, SerializeOpts};
+use markup5ever_rcdom::{RcDom, NodeData, Handle, SerializableHandle};
+use markup5ever::{QualName, LocalName, Namespace};
+use regex::Regex;
+use serde_json::Value;
+use std::collections::HashSet;
+use std::path::PathBuf;
+use std::cell::RefCell;
+use crate::compiler::state_extractor::StateExtractor;
+
+pub struct ComponentTagger;
+
+pub struct TaggedResult {
+    pub html: String,
+    pub state: Value,
+}
+
+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
+        let dom = parse_document(RcDom::default(), Default::default())
+            .from_utf8()
+            .read_from(&mut html.as_bytes())
+            .map_err(|e| format!("Failed to parse HTML: {:?}", e))?;
+
+        // Find all component wrappers and extract their state
+        let component_counter = RefCell::new(0);
+        let component_states = RefCell::new(Vec::new());
+        Self::walk_tag_and_extract(&dom.document, &component_counter, &component_states, html);
+
+        // Serialize back to HTML
+        let mut modified_html_bytes = Vec::new();
+        serialize(
+            &mut modified_html_bytes,
+            &SerializableHandle::from(dom.document.clone()),
+            SerializeOpts::default()
+        ).map_err(|e| format!("Failed to serialize HTML: {:?}", e))?;
+
+        let modified_html = String::from_utf8(modified_html_bytes)
+            .map_err(|e| format!("Failed to convert HTML to UTF-8: {}", e))?;
+
+        // Extract all state from HTML
+        let all_state = StateExtractor::extract_from_html(html, base_path)?;
+
+        // Build a set of all keys that are in component states
+        let mut component_keys = HashSet::new();
+        for (_, comp_state) in component_states.borrow().iter() {
+            if let Value::Object(comp_map) = comp_state {
+                for key in comp_map.keys() {
+                    component_keys.insert(key.clone());
+                }
+            }
+        }
+
+        // Filter global state to only include keys NOT in component states
+        let mut merged_state = if let Value::Object(all_map) = all_state {
+            let mut global_only = serde_json::Map::new();
+            for (key, value) in all_map {
+                // Only include in global if it's not a component state key
+                if !component_keys.contains(&key) {
+                    global_only.insert(key, value);
+                }
+            }
+            global_only
+        } else {
+            serde_json::Map::new()
+        };
+
+        // Add component states under their IDs
+        for (component_id, comp_state) in component_states.borrow().iter() {
+            if let Value::Object(comp_map) = comp_state {
+                // Only add if component has non-empty state
+                if !comp_map.is_empty() {
+                    merged_state.insert(component_id.clone(), comp_state.clone());
+                }
+            }
+        }
+
+        let merged_state = Value::Object(merged_state);
+
+        Ok(TaggedResult {
+            html: modified_html,
+            state: merged_state,
+        })
+    }
+
+    /// Recursively walk DOM, add data-vibe-component-id, and extract component state
+    fn walk_tag_and_extract(
+        node: &Handle,
+        counter: &RefCell<usize>,
+        component_states: &RefCell<Vec<(String, Value)>>,
+        original_html: &str,
+    ) {
+        // Check if this is a component wrapper
+        if let NodeData::Element { name, attrs, .. } = &node.data {
+            let tag_name = name.local.as_ref();
+            let borrowed_attrs = attrs.borrow();
+
+            // Check if it's <component> (without src) or <div class="component"> (without src)
+            let is_component = tag_name == "component" && !Self::has_src_attr(&borrowed_attrs);
+            let is_div_component = tag_name == "div"
+                && Self::has_class_component(&borrowed_attrs)
+                && !Self::has_src_attr(&borrowed_attrs);
+
+            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();
+                for child in node.children.borrow().iter() {
+                    let _ = serialize(
+                        &mut inner_html_bytes,
+                        &SerializableHandle::from(child.clone()),
+                        SerializeOpts::default()
+                    );
+                }
+
+                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)));
+                        }
+                    }
+                }
+            }
+        }
+
+        // Recurse into children
+        for child in node.children.borrow().iter() {
+            Self::walk_tag_and_extract(child, counter, component_states, original_html);
+        }
+    }
+
+    /// Check if element has src attribute
+    fn has_src_attr(attrs: &[markup5ever::Attribute]) -> bool {
+        attrs.iter().any(|attr| attr.name.local.as_ref() == "src")
+    }
+
+    /// Check if element has class="component"
+    fn has_class_component(attrs: &[markup5ever::Attribute]) -> bool {
+        attrs.iter().any(|attr| {
+            attr.name.local.as_ref() == "class"
+                && attr.value.as_ref().split_whitespace().any(|c| c == "component")
+        })
+    }
+
+    /// Rewrite this.property to componentId.property in a node's subtree
+    fn rewrite_this_to_component_id(node: &Handle, component_id: &str) {
+        use regex::Regex;
+        let this_regex = Regex::new(r"@\[this\.(\w+)\]").unwrap();
+
+        // Recursively walk the node and all descendants
+        Self::rewrite_node_recursive(node, &this_regex, component_id);
+    }
+
+    /// Recursively rewrite this.property in text nodes and attributes
+    fn rewrite_node_recursive(node: &Handle, regex: &Regex, component_id: &str) {
+        // Rewrite text content
+        if let NodeData::Text { ref contents } = node.data {
+            let mut text = contents.borrow_mut();
+            let new_text = regex.replace_all(&text, format!("@[{}.$1]", component_id));
+            *text = new_text.to_string().into();
+        }
+
+        // Rewrite attributes
+        if let NodeData::Element { ref attrs, .. } = node.data {
+            let mut attrs_mut = attrs.borrow_mut();
+            for attr in attrs_mut.iter_mut() {
+                let new_value = regex.replace_all(&attr.value, format!("@[{}.$1]", component_id));
+                attr.value = new_value.to_string().into();
+            }
+        }
+
+        // Recurse into children
+        for child in node.children.borrow().iter() {
+            Self::rewrite_node_recursive(child, regex, component_id);
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn tag_single_component() {
+        let html = r#"<!DOCTYPE html><html><body><component><script>component({ count: 0 })</script><div>@[this.count]</div></component></body></html>"#;
+
+        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
+
+        // Should have data-vibe-component-id in output
+        assert!(result.html.contains("data-vibe-component-id=\"_c0\""));
+    }
+
+    #[test]
+    fn tag_multiple_components() {
+        let html = r#"<!DOCTYPE html><html><body><component></component><component></component><component></component></body></html>"#;
+
+        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
+
+        // Should have _c0, _c1, _c2
+        assert!(result.html.contains("data-vibe-component-id=\"_c0\""));
+        assert!(result.html.contains("data-vibe-component-id=\"_c1\""));
+        assert!(result.html.contains("data-vibe-component-id=\"_c2\""));
+    }
+}

package/compiler/src/compiler/iteration_optimizer.rs

@@ -0,0 +1,351 @@
+use regex::Regex;
+use serde::{Serialize, Deserialize};
+use std::collections::HashMap;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct CompiledIteration {
+    pub item_alias: String,
+    pub index_alias: String,
+    pub state_path: String,
+    pub batch_fn: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct IterationOptimizations {
+    pub iterations: HashMap<String, CompiledIteration>,
+}
+
+/// Generate compiled batch functions for iterations in HTML
+pub fn build_iteration_optimizations(html: &str) -> Option<IterationOptimizations> {
+    let iterations = extract_and_compile_iterations(html);
+
+    if iterations.is_empty() {
+        None
+    } else {
+        Some(IterationOptimizations { iterations })
+    }
+}
+
+/// Extract <!-- each --> blocks and compile them to batch functions
+fn extract_and_compile_iterations(html: &str) -> HashMap<String, CompiledIteration> {
+    let mut result = HashMap::new();
+
+    // Match: <!-- each arrayPath as item, index -->
+    let each_re = Regex::new(r"<!--\s*each\s+([^\s]+)\s+as\s+([^\s,]+)(?:\s*,\s*([^\s]+))?\s*-->").unwrap();
+
+    let mut search_start = 0;
+
+    while let Some(start_match) = each_re.find_at(html, search_start) {
+        let captures = each_re.captures(&html[start_match.start()..]).unwrap();
+        let state_path = captures.get(1).unwrap().as_str();
+        let item_alias = captures.get(2).unwrap().as_str();
+        let index_alias = captures.get(3).map(|m| m.as_str()).unwrap_or("index");
+
+        let template_start = start_match.end();
+
+        // Find matching <!-- /each --> using depth counting
+        if let Some((end_pos, end_after)) = find_matching_each_end(html, template_start) {
+            let template_html = &html[template_start..end_pos];
+
+            // Skip if this iteration is inside a conditional (parent won't be compiled)
+            if is_in_conditional_context(html, start_match.start()) {
+                search_start = end_after;
+                continue;
+            }
+
+            // Check if template has nested structures (skip if so)
+            if has_nested_structures(template_html) {
+                search_start = end_after;
+                continue;
+            }
+
+            // Generate hash for this template
+            let hash = generate_template_hash(template_html);
+
+            // Compile template to batch function
+            let batch_fn = compile_template_to_batch_fn(
+                template_html,
+                item_alias,
+                index_alias,
+            );
+
+            result.insert(hash, CompiledIteration {
+                item_alias: item_alias.to_string(),
+                index_alias: index_alias.to_string(),
+                state_path: state_path.to_string(),
+                batch_fn,
+            });
+
+            search_start = end_after;
+        } else {
+            break;
+        }
+    }
+
+    result
+}
+
+/// Check if template contains conditionals (we skip these)
+/// Nested iterations are supported, but not if parent has conditionals
+fn has_nested_structures(template: &str) -> bool {
+    template.contains("<!-- if")
+}
+
+/// Check if we're inside a non-compiled parent iteration
+/// This happens when the template contains conditionals that prevent compilation
+fn is_in_conditional_context(html: &str, pos: usize) -> bool {
+    // Look backwards from current position for unclosed conditionals
+    let before = &html[..pos];
+    let if_count = before.matches("<!-- if").count();
+    let endif_count = before.matches("<!-- /if").count();
+    if_count > endif_count
+}
+
+/// Generate a stable hash for a template
+fn generate_template_hash(template: &str) -> String {
+    use std::collections::hash_map::DefaultHasher;
+    use std::hash::{Hash, Hasher};
+
+    let mut hasher = DefaultHasher::new();
+    template.trim().hash(&mut hasher);
+    let hash = hasher.finish();
+    format!("iter_{:x}", hash)
+}
+
+/// Compile template HTML to a batch function string
+/// Supports nested <!-- each --> blocks
+fn compile_template_to_batch_fn(
+    template: &str,
+    item_alias: &str,
+    index_alias: &str,
+) -> String {
+    // Process nested iterations first
+    let processed_template = process_nested_iterations(template);
+
+    // Replace @[expr] with ${expr}
+    let binding_re = Regex::new(r"@\[([^\]]+)\]").unwrap();
+    let with_bindings = binding_re.replace_all(&processed_template, |caps: &regex::Captures| {
+        format!("${{{}}}", &caps[1])
+    });
+
+    // Fix boolean attributes: remove ="" from attributes to match CSS selectors
+    // Converts: <div attr=""> to <div attr>
+    let boolean_attr_re = Regex::new(r#"(\w+)="""#).unwrap();
+    let with_boolean_attrs = boolean_attr_re.replace_all(&with_bindings, "$1");
+
+    // Escape backslashes only (backticks are fine in JSON strings)
+    let escaped = with_boolean_attrs
+        .replace('\\', "\\\\");
+
+    // Generate batch function
+    format!(
+        r#"(arr, $) => {{ let html = ''; const len = arr.length; for (let {index} = 0; {index} < len; {index}++) {{ const {item} = arr[{index}]; html += `{template}`; }} return html; }}"#,
+        index = index_alias,
+        item = item_alias,
+        template = escaped
+    )
+}
+
+/// Process nested <!-- each --> blocks recursively
+/// Replaces nested iterations with inline loop code
+fn process_nested_iterations(template: &str) -> String {
+    let each_re = Regex::new(r"<!--\s*each\s+([^\s]+)\s+as\s+([^\s,]+)(?:\s*,\s*([^\s]+))?\s*-->").unwrap();
+    let end_re = Regex::new(r"<!--\s*/each\s*-->").unwrap();
+
+    let mut result = template.to_string();
+    let mut replacements = Vec::new();
+
+    // Find all nested iterations
+    let mut search_start = 0;
+    while let Some(start_match) = each_re.find_at(&result, search_start) {
+        let captures = each_re.captures(&result[start_match.start()..]).unwrap();
+        let array_path = captures.get(1).unwrap().as_str();
+        let item_alias = captures.get(2).unwrap().as_str();
+        let index_alias = captures.get(3).map(|m| m.as_str()).unwrap_or("index");
+
+        let template_start = start_match.end();
+
+        // Find matching <!-- /each --> using depth counting
+        if let Some((end_pos, _)) = find_matching_each_end(&result, template_start) {
+            let inner_template = &result[template_start..end_pos];
+
+            // Recursively process inner template
+            let processed_inner = process_nested_iterations(inner_template);
+
+            // For nested iterations, convert to string concatenation
+            // Uses JSON string escaping which is valid JavaScript
+            let inner_concat_code = convert_to_string_concat(&processed_inner, item_alias, index_alias, array_path);
+
+            let nested_code = format!("${{(() => {{ let inner = ''; const len_{idx} = {arr}.length; for (let {idx} = 0; {idx} < len_{idx}; {idx}++) {{ const {item} = {arr}[{idx}]; {code} }} return inner; }})()}}",
+                idx = index_alias,
+                arr = array_path,
+                item = item_alias,
+                code = inner_concat_code
+            );
+
+            // Store replacement (from start to end including comments)
+            let end_match = end_re.find_at(&result, end_pos).unwrap();
+            replacements.push((start_match.start(), end_match.end(), nested_code));
+
+            search_start = end_match.end();
+        } else {
+            break;
+        }
+    }
+
+    // Apply replacements in reverse order to maintain positions
+    for (start, end, replacement) in replacements.iter().rev() {
+        result.replace_range(*start..*end, replacement);
+    }
+
+    result
+}
+
+/// Convert template to string concatenation code using template literals
+/// Parses @[expr] and converts to: inner += `text${expr}more text`;
+/// Template literals properly handle newlines without escaping
+/// NOTE: Backslashes and ${ need escaping, but backticks don't (they'll be in JSON)
+fn convert_to_string_concat(template: &str, _item_alias: &str, _index_alias: &str, _array_path: &str) -> String {
+    let binding_re = Regex::new(r"@\[([^\]]+)\]").unwrap();
+
+    // Build template literal with ${} expressions
+    let mut result = String::from("inner += `");
+    let mut last_end = 0;
+
+    for cap in binding_re.captures_iter(template) {
+        let match_start = cap.get(0).unwrap().start();
+        let match_end = cap.get(0).unwrap().end();
+        let expr = &cap[1];
+
+        // Add text before this binding
+        if match_start > last_end {
+            let text = &template[last_end..match_start];
+            // For template literals: only escape backslashes and ${ sequences
+            // Don't escape backticks - they're fine in JSON and we want them as-is
+            let escaped = text
+                .replace('\\', "\\\\")   // Escape backslashes
+                .replace("${", "\\${");  // Escape template literal expression markers
+            result.push_str(&escaped);
+        }
+
+        // Add expression
+        result.push_str("${");
+        result.push_str(expr);
+        result.push_str("}");
+
+        last_end = match_end;
+    }
+
+    // Add remaining text
+    if last_end < template.len() {
+        let text = &template[last_end..];
+        let escaped = text
+            .replace('\\', "\\\\")
+            .replace("${", "\\${");
+        result.push_str(&escaped);
+    }
+
+    result.push_str("`;");
+    result
+}
+
+/// Find matching <!-- /each --> comment using depth counting
+/// Returns (position_before_comment, position_after_comment)
+fn find_matching_each_end(html: &str, start_pos: usize) -> Option<(usize, usize)> {
+    let each_re = Regex::new(r"<!--\s*each\s+").unwrap();
+    let end_re = Regex::new(r"<!--\s*/each\s*-->").unwrap();
+
+    let mut depth = 1;
+    let mut search_pos = start_pos;
+
+    while depth > 0 {
+        let next_start = each_re.find_at(html, search_pos);
+        let next_end = end_re.find_at(html, search_pos);
+
+        match (next_start, next_end) {
+            (Some(start_match), Some(end_match)) if start_match.start() < end_match.start() => {
+                // Found nested <!-- each --> before <!-- /each -->
+                depth += 1;
+                search_pos = start_match.end();
+            }
+            (_, Some(end_match)) => {
+                // Found <!-- /each -->
+                depth -= 1;
+                if depth == 0 {
+                    return Some((end_match.start(), end_match.end()));
+                }
+                search_pos = end_match.end();
+            }
+            _ => return None, // No matching end found
+        }
+    }
+
+    None
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_simple_iteration() {
+        let html = r#"
+            <!-- each items as item -->
+            <li>@[item.name]</li>
+            <!-- /each -->
+        "#;
+
+        let opts = build_iteration_optimizations(html);
+        assert!(opts.is_some());
+
+        let iterations = &opts.unwrap().iterations;
+        assert_eq!(iterations.len(), 1);
+
+        let (_, compiled) = iterations.iter().next().unwrap();
+        assert_eq!(compiled.item_alias, "item");
+        assert_eq!(compiled.index_alias, "index");
+        assert_eq!(compiled.state_path, "items");
+        assert!(compiled.batch_fn.contains("html += `"));
+    }
+
+    #[test]
+    fn test_iteration_with_index() {
+        let html = r#"
+            <!-- each items as item, idx -->
+            <li>[@[idx]] @[item.name]</li>
+            <!-- /each -->
+        "#;
+
+        let opts = build_iteration_optimizations(html);
+        let iterations = &opts.unwrap().iterations;
+        let (_, compiled) = iterations.iter().next().unwrap();
+        assert_eq!(compiled.index_alias, "idx");
+    }
+
+    #[test]
+    fn test_nested_iteration_compiled() {
+        let html = r#"
+            <!-- each categories as cat -->
+            <div>
+                <!-- each cat.items as item -->
+                <span>@[item]</span>
+                <!-- /each -->
+            </div>
+            <!-- /each -->
+        "#;
+
+        let opts = build_iteration_optimizations(html);
+        // Should compile nested iterations
+        assert!(opts.is_some());
+
+        let iterations = &opts.unwrap().iterations;
+        assert_eq!(iterations.len(), 1);
+
+        let (_, compiled) = iterations.iter().next().unwrap();
+        // Should contain nested loop code with template literals
+        assert!(compiled.batch_fn.contains("cat.items"));
+        assert!(compiled.batch_fn.contains("let inner = ''"));
+        assert!(compiled.batch_fn.contains("inner += `"));
+    }
+}