@ape-egg/vibe-compiler 3.0.0

package/src/compiler/component_tagger.rs

@@ -0,0 +1,482 @@
+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,
+    /// One past the last id assigned — `tag_components_from(start)` callers use
+    /// it to verify a compile unit stayed inside its allotted id range.
+    pub next_id: usize,
+}
+
+impl ComponentTagger {
+    /// Find component wrappers, add deterministic IDs, and structure state
+    pub fn tag_components(html: &str, base_path: &PathBuf) -> Result<TaggedResult, String> {
+        Self::tag_components_from(html, base_path, 0)
+    }
+
+    /// Same, but ids start at `start_id`. SPA compiles tag several units that
+    /// share one live document (the shell owns its chrome for the app's
+    /// lifetime; fragments mount into it) — each unit gets a disjoint id range
+    /// so a fragment's `_cN` never claims a shell component's state.
+    pub fn tag_components_from(html: &str, base_path: &PathBuf, start_id: usize) -> 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(start_id);
+        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);
+
+        let next_id = *component_counter.borrow();
+        Ok(TaggedResult {
+            html: modified_html,
+            state: merged_state,
+            next_id,
+        })
+    }
+
+    /// 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\""));
+    }
+}