@ape-egg/vibe 2.1.22 → 3.0.0

package/compiler/src/compiler/component_tagger.rs

@@ -1,469 +0,0 @@
-use html5ever::parse_document;
-use html5ever::tendril::TendrilSink;
-use html5ever::serialize::{serialize, SerializeOpts};
-use markup5ever_rcdom::{RcDom, NodeData, Handle, Node, 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 std::sync::OnceLock;
-use crate::compiler::state_extractor::StateExtractor;
-
-/// Matches a `component(...)` state-registration call in a component's inline
-/// script. The `\b` keeps it from firing on `subcomponent(`; resolvable or not,
-/// its presence is what tells the tagger this wrapper owns component-local state.
-fn component_call_regex() -> &'static Regex {
-    static RE: OnceLock<Regex> = OnceLock::new();
-    RE.get_or_init(|| Regex::new(r"\bcomponent\s*\(").unwrap())
-}
-
-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> {
-        // 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);
-        }
-
-        // Snapshot original-cased `@[...]` bindings before html5ever lowercases
-        // any that live in attribute-name position (name bindings); restored after
-        // serialization below.
-        let binding_cases = crate::compiler::binding_case::capture(&html_with_placeholders);
-
-        // Parse HTML (with placeholders instead of actual vibe-dehydrate content)
-        let dom = parse_document(RcDom::default(), Default::default())
-            .from_utf8()
-            .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
-        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 mut modified_html = String::from_utf8(modified_html_bytes)
-            .map_err(|e| format!("Failed to convert HTML to UTF-8: {}", e))?;
-
-        // Restore original casing of name-binding expressions html5ever lowercased.
-        modified_html = crate::compiler::binding_case::restore(&modified_html, &binding_cases);
-
-        // 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)?;
-
-        // 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
-
-                // 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 direct_scripts_html = Self::direct_scripts_html(node);
-
-                // A component must be tagged whenever it REGISTERS local state via a
-                // `component(...)` call — that is what makes `this.X` in its markup
-                // resolvable at runtime. Whether the initial state VALUES are statically
-                // resolvable is a separate concern (it only governs FOUC value-stamping).
-                // A state built from a runtime expression — e.g.
-                // `component({ levels: Array.from({ length: 25 }, ...) })` — resolves to
-                // an empty object here, but the component still needs its id + `this.`
-                // rewrite, or a compiled `<!-- each this.levels -->` ships a raw `this.`
-                // the runtime can't resolve when a restored conditional branch re-parses
-                // the template (no wrapper-tag ancestor to fall back to).
-                let registers_state = component_call_regex().is_match(&direct_scripts_html);
-
-                if registers_state {
-                    let comp_state = match StateExtractor::extract_from_html(
-                        &direct_scripts_html,
-                        &PathBuf::from(".")
-                    ) {
-                        Ok(Value::Object(state)) => state,
-                        _ => serde_json::Map::new(),
-                    };
-
-                    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);
-
-                    // Register any statically-resolvable initial state under the id. May be
-                    // empty (runtime-built state); the runtime fills it in when the inlined
-                    // `component(...)` call runs on mount.
-                    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")
-        })
-    }
-
-    /// Concatenate a node's DIRECT `<script>` children as `<script>…</script>`.
-    /// Reads raw text (not serialized) so JS operators (`>`, `&&`) aren't
-    /// HTML-escaped — the escaped source would fail the AST parse and drop a
-    /// `component(stateVar)` call to the regex fallback. Used both to extract a
-    /// wrapper's own state and to detect nested component boundaries.
-    fn direct_scripts_html(node: &Handle) -> String {
-        let mut out = String::new();
-        for child in node.children.borrow().iter() {
-            if let NodeData::Element { name: ref child_name, .. } = child.data {
-                if child_name.local.as_ref() == "script" {
-                    let mut script_text = String::new();
-                    for grandchild in child.children.borrow().iter() {
-                        if let NodeData::Text { ref contents } = grandchild.data {
-                            script_text.push_str(&contents.borrow());
-                        }
-                    }
-                    out.push_str("<script>");
-                    out.push_str(&script_text);
-                    out.push_str("</script>");
-                }
-            }
-        }
-        out
-    }
-
-    /// Is this node a component wrapper that registers its OWN local state? Such
-    /// a node gets its own `_cN` id and `this.`→id pass when `walk_tag_and_extract`
-    /// reaches it, so an ancestor's rewrite must stop here — descending would let
-    /// the ancestor claim the nested component's bindings with the wrong id (the
-    /// DebugContent→ScalingModal empty-legend bug).
-    fn is_state_registering_component(node: &Handle) -> bool {
-        if let NodeData::Element { name, attrs, .. } = &node.data {
-            let tag_name = name.local.as_ref();
-            let borrowed = attrs.borrow();
-            let is_component = tag_name == "component" && !Self::has_src_attr(&borrowed);
-            let is_div_component = tag_name == "div"
-                && Self::has_class_component(&borrowed)
-                && !Self::has_src_attr(&borrowed);
-            if !(is_component || is_div_component) {
-                return false;
-            }
-            drop(borrowed);
-            return component_call_regex().is_match(&Self::direct_scripts_html(node));
-        }
-        false
-    }
-
-    /// Rewrite `this.X` to `componentId.X` throughout a component's subtree:
-    /// inside `@[...]` bindings (text + attributes, nested paths and multi-ref
-    /// expressions) and inside if/each/else-if directive comments. Resolving the
-    /// directives at build time is what lets a component-local `<!-- if this.x -->`
-    /// work on compiled (manifest-restored) pages, where the runtime can't fall
-    /// back to a `data-vibe-component-id` ancestor lookup.
-    fn rewrite_this_to_component_id(node: &Handle, component_id: &str) {
-        use regex::Regex;
-        // The whole `@[...]` binding; `this.` is resolved within it so nested
-        // paths (this.x.y) and expressions (this.a + this.b) are all covered.
-        let binding_regex = Regex::new(r"@\[[^\]]*\]").unwrap();
-        let this_prop = Regex::new(r"\bthis\.").unwrap();
-        // `$.this.X` writes that live in event-handler bodies (onclick="$.this.mode
-        // = 'edit'"), outside any `@[...]`. The runtime lowers these via its
-        // STATE_THIS_PROP_REGEX pass (runtime/component.js); the compiler must do
-        // the same or compiled pages ship a literal `$.this.X` that resolves to
-        // undefined when the native handler fires.
-        let state_this_prop = Regex::new(r"\$\.this\.(\w+)").unwrap();
-        Self::rewrite_node_recursive(node, &binding_regex, &this_prop, &state_this_prop, component_id);
-    }
-
-    /// Resolve `this.` to `componentId.` inside every `@[...]` binding in a string.
-    fn rewrite_bindings(s: &str, binding_regex: &Regex, this_prop: &Regex, component_id: &str) -> String {
-        let replacement = format!("{}.", component_id);
-        binding_regex
-            .replace_all(s, |caps: &regex::Captures| {
-                this_prop.replace_all(&caps[0], replacement.as_str()).to_string()
-            })
-            .to_string()
-    }
-
-    /// Recursively rewrite this.property in text, attributes, and directive comments
-    fn rewrite_node_recursive(node: &Handle, binding_regex: &Regex, this_prop: &Regex, state_this_prop: &Regex, component_id: &str) {
-        // Rewrite text content bindings
-        if let NodeData::Text { ref contents } = node.data {
-            let mut text = contents.borrow_mut();
-            let new_text = Self::rewrite_bindings(&text, binding_regex, this_prop, component_id);
-            *text = new_text.into();
-        }
-
-        // Rewrite attribute bindings (`@[...]`) and event-handler `$.this.X` writes.
-        if let NodeData::Element { ref attrs, .. } = node.data {
-            let mut attrs_mut = attrs.borrow_mut();
-            for attr in attrs_mut.iter_mut() {
-                let mut new_value = Self::rewrite_bindings(&attr.value, binding_regex, this_prop, component_id);
-                if new_value.contains("$.this.") {
-                    new_value = state_this_prop
-                        .replace_all(&new_value, |c: &regex::Captures| format!("$.{}.{}", component_id, &c[1]))
-                        .to_string();
-                }
-                attr.value = new_value.into();
-            }
-        }
-
-        // Directive comments are immutable in the RcDom, so swap any if/each/else-if
-        // comment carrying a `this.` expression for a freshly-built comment node.
-        {
-            let mut children = node.children.borrow_mut();
-            for child in children.iter_mut() {
-                if let NodeData::Comment { ref contents } = child.data {
-                    let text = contents.to_string();
-                    let trimmed = text.trim_start();
-                    let is_directive = trimmed.starts_with("if ")
-                        || trimmed.starts_with("each ")
-                        || trimmed.starts_with("else if ");
-                    if is_directive && text.contains("this.") {
-                        let new_text = this_prop
-                            .replace_all(&text, format!("{}.", component_id).as_str())
-                            .to_string();
-                        *child = Node::new(NodeData::Comment { contents: new_text.into() });
-                    }
-                }
-            }
-        }
-
-        // Recurse into children — but STOP at a nested component that registers
-        // its own state. It owns the `this.` inside it and gets its own id +
-        // rewrite when walk_tag_and_extract reaches it; descending here would
-        // claim its bindings with this ancestor's id (the empty-legend bug).
-        for child in node.children.borrow().iter() {
-            if Self::is_state_registering_component(child) {
-                continue;
-            }
-            Self::rewrite_node_recursive(child, binding_regex, this_prop, state_this_prop, 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 rewrites_this_in_directive_comments_and_nested_bindings() {
-        // Conditionals/iterations keep `this.` in their directive comments and
-        // bindings can be nested (this.x.y). Compiled (manifest-restored) pages
-        // can't resolve `this.` via a runtime wrapper-tag lookup, so the compiler
-        // must resolve it to the component id at build time.
-        let html = r#"<!DOCTYPE html><html><body><component><script>const s = { x: null }; component(s);</script><page-content><!-- if this.x --><span>@[this.x.name]</span><!-- /if --><!-- each this.items as it --><b>@[it]</b><!-- /each --></page-content></component></body></html>"#;
-
-        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
-
-        assert!(result.html.contains("if _c0.x"), "if comment not rewritten: {}", result.html);
-        assert!(result.html.contains("@[_c0.x.name]"), "nested binding not rewritten: {}", result.html);
-        assert!(result.html.contains("each _c0.items as it"), "each comment not rewritten: {}", result.html);
-        // A non-this global expression must be left alone.
-        assert!(!result.html.contains("_c0.items as _c0"), "over-rewrote loop alias: {}", result.html);
-    }
-
-    #[test]
-    fn tag_component_called_with_variable() {
-        // BrawlerDetailContent shape: state held in a `const`, passed to
-        // component(state) as a bare identifier, with a top-level
-        // `<!-- if this.X -->`. The wrapper must still be tagged so the
-        // conditional can resolve `this.` at runtime.
-        let html = r#"<!DOCTYPE html><html><body><component><script>const state = { currentCharacter: null }; component(state);</script><page-content><!-- if this.currentCharacter --><span>@[this.currentCharacter]</span><!-- /if --></page-content></component></body></html>"#;
-
-        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
-
-        assert!(
-            result.html.contains("data-vibe-component-id=\"_c0\""),
-            "wrapper not tagged; html: {}",
-            result.html
-        );
-    }
-
-    #[test]
-    fn tags_component_with_runtime_built_state() {
-        // AccountProgression shape: the ONLY state key is built from a runtime
-        // expression (`Array.from`), so static extraction resolves to an empty
-        // object. The wrapper must still be tagged and its `<!-- each this.X -->`
-        // rewritten — otherwise a restored conditional branch re-parses a raw
-        // `this.levels` the runtime can't resolve, and the loop renders nothing.
-        let html = r#"<!DOCTYPE html><html><body><component><script>component({ levels: Array.from({ length: 25 }, (_, i) => i + 1) });</script><slides><!-- each this.levels as lvl --><slide>@[lvl]</slide><!-- /each --></slides></component></body></html>"#;
-
-        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
-
-        assert!(
-            result.html.contains("data-vibe-component-id=\"_c0\""),
-            "runtime-built-state component not tagged: {}",
-            result.html
-        );
-        assert!(
-            result.html.contains("each _c0.levels as lvl"),
-            "each comment not rewritten: {}",
-            result.html
-        );
-    }
-
-    #[test]
-    fn nested_component_this_resolves_to_own_id() {
-        // DebugContent → ScalingModal shape: a stateful component nested inside
-        // another stateful component, each owning its own `this.`. The outer's
-        // this.→id rewrite must STOP at the inner component boundary — otherwise
-        // it claims the inner's bindings/directives with the OUTER id before the
-        // inner is reached, and the inner's live state (registered under its own
-        // runtime id) never reaches the markup → empty each-loops, dead bindings.
-        let html = r#"<!DOCTYPE html><html><body><component><script>component({ outer: 1 })</script><outer-mark>@[this.outer]</outer-mark><component><script>component({ inner: 2, items: [] })</script><modal-root open="@[this.open]"><!-- each this.items as it --><inner-mark>@[this.inner]</inner-mark><!-- /each --></modal-root></component></component></body></html>"#;
-
-        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
-
-        // Outer is _c0 (visited first), inner is _c1 (reached on recursion).
-        assert!(result.html.contains("@[_c0.outer]"), "outer binding wrong: {}", result.html);
-        assert!(result.html.contains("@[_c1.inner]"), "inner binding not rewritten to own id: {}", result.html);
-        assert!(result.html.contains("each _c1.items as it"), "inner each not rewritten to own id: {}", result.html);
-        assert!(result.html.contains("open=\"@[_c1.open]\""), "inner attr binding not rewritten to own id: {}", result.html);
-        // The outer must NOT have claimed any of the inner's bindings/directives.
-        assert!(!result.html.contains("@[_c0.inner]"), "outer claimed inner text binding: {}", result.html);
-        assert!(!result.html.contains("each _c0.items"), "outer claimed inner each: {}", result.html);
-        assert!(!result.html.contains("@[_c0.open]"), "outer claimed inner attr binding: {}", result.html);
-    }
-
-    #[test]
-    fn tag_multiple_components() {
-        // Each wrapper registers component-local state, so all three are tagged
-        // with sequential ids. (A bare `<component></component>` with no state
-        // call is intentionally NOT tagged — it owns no `this.` to resolve.)
-        let html = r#"<!DOCTYPE html><html><body><component><script>component({ a: 1 })</script></component><component><script>component({ b: 2 })</script></component><component><script>component({ c: 3 })</script></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\""));
-    }
-}