@ape-egg/vibe 2.1.3 → 2.1.6

package/compiler/src/compiler/component_tagger.rs

@@ -1,15 +1,24 @@
 use html5ever::parse_document;
 use html5ever::tendril::TendrilSink;
 use html5ever::serialize::{serialize, SerializeOpts};
-use markup5ever_rcdom::{RcDom, NodeData, Handle, SerializableHandle};
+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 {
@@ -137,46 +146,74 @@ impl ComponentTagger {
                 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_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);
+                            // Read the script's raw text directly. Serializing the
+                            // element would HTML-escape JS operators (`>` -> `&gt;`,
+                            // `&&` -> `&amp;&amp;`) because the serializer loses the
+                            // rawtext context when it starts at the script's children;
+                            // the escaped source then fails to parse, dropping a
+                            // `component(stateVar)` component to the regex fallback
+                            // (which only matches `component({` literals) and leaving
+                            // it untagged.
+                            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());
+                                }
                             }
+                            // Wrap in <script> so extract_from_html routes it through
+                            // the JS AST analyzer, which resolves `component(stateVar)`
+                            // via its declaration (the regex fallback can't).
+                            direct_scripts_html.push_str("<script>");
+                            direct_scripts_html.push_str(&script_text);
+                            direct_scripts_html.push_str("</script>");
                         }
                     }
                 }
 
-                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)));
-                    }
+                // 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)));
                 }
             }
         }
@@ -200,36 +237,84 @@ impl ComponentTagger {
         })
     }
 
-    /// Rewrite this.property to componentId.property in a node's subtree
+    /// 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;
-        let this_regex = Regex::new(r"@\[this\.(\w+)\]").unwrap();
+        // 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);
+    }
 
-        // Recursively walk the node and all descendants
-        Self::rewrite_node_recursive(node, &this_regex, 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 nodes and attributes
-    fn rewrite_node_recursive(node: &Handle, regex: &Regex, component_id: &str) {
-        // Rewrite text content
+    /// 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 = regex.replace_all(&text, format!("@[{}.$1]", component_id));
-            *text = new_text.to_string().into();
+            let new_text = Self::rewrite_bindings(&text, binding_regex, this_prop, component_id);
+            *text = new_text.into();
         }
 
-        // Rewrite attributes
+        // 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 new_value = regex.replace_all(&attr.value, format!("@[{}.$1]", component_id));
-                attr.value = new_value.to_string().into();
+                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
         for child in node.children.borrow().iter() {
-            Self::rewrite_node_recursive(child, regex, component_id);
+            Self::rewrite_node_recursive(child, binding_regex, this_prop, state_this_prop, component_id);
         }
     }
 }
@@ -238,6 +323,10 @@ impl ComponentTagger {
 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>"#;
@@ -248,9 +337,69 @@ mod tests {
         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 tag_multiple_components() {
-        let html = r#"<!DOCTYPE html><html><body><component></component><component></component><component></component></body></html>"#;
+        // 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();
 

package/compiler/src/compiler/js_analyzer.rs

@@ -9,17 +9,20 @@ use std::fs;
 
 /// Analyzes JavaScript code to extract state from vibe() calls
 pub struct JsAnalyzer {
-    source_map: Lrc<SourceMap>,
     base_path: PathBuf,
     _module_cache: HashMap<PathBuf, Module>,
+    /// Memoizes resolved imports by (file, export name). Dedupes diamond imports
+    /// (without it, recursive resolution re-parses shared modules exponentially)
+    /// and breaks cycles (an in-progress entry is seeded `None`).
+    import_cache: HashMap<(PathBuf, String), Option<Value>>,
 }
 
 impl JsAnalyzer {
     pub fn new(base_path: PathBuf) -> Self {
         Self {
-            source_map: Lrc::new(SourceMap::default()),
             base_path,
             _module_cache: HashMap::new(),
+            import_cache: HashMap::new(),
         }
     }
 
@@ -34,11 +37,11 @@ impl JsAnalyzer {
         module.visit_with(&mut scope_builder);
         // eprintln!("[JsAnalyzer] Found {} imports", scope_builder.imports.len());
 
-        // Resolve imports to actual Values
+        // Resolve imports to actual Values (keyed by the LOCAL name used in code)
         let mut resolved_imports: HashMap<String, Value> = HashMap::new();
-        for (import_name, import_path) in &scope_builder.imports {
-            if let Some(value) = self.resolve_import_value(&import_path, import_name) {
-                resolved_imports.insert(import_name.clone(), value);
+        for (local_name, (import_path, imported_name)) in scope_builder.imports.clone() {
+            if let Some(value) = self.resolve_import_value(&import_path, &imported_name) {
+                resolved_imports.insert(local_name, value);
             }
         }
 
@@ -50,35 +53,73 @@ impl JsAnalyzer {
         state_extractor.merged_state
     }
 
-    /// Resolve an import and return the exported value (fully resolved)
-    fn resolve_import_value(&mut self, import_path: &str, import_name: &str) -> Option<Value> {
-        // eprintln!("[JsAnalyzer] Resolving import: '{}' name: '{}'", import_path, import_name);
-        // Resolve relative path
+    /// Resolve an import and return the exported value (fully resolved).
+    /// `imported_name` is the EXPORT name to look up ("default" for a default
+    /// import). The imported module's OWN imports are resolved too, so a chain
+    /// like `import appState` → `export default { version: VERSION }` →
+    /// `import VERSION from './version.js'` resolves all the way down.
+    fn resolve_import_value(&mut self, import_path: &str, imported_name: &str) -> Option<Value> {
+        self.resolve_import_value_depth(import_path, imported_name, 0)
+    }
+
+    fn resolve_import_value_depth(
+        &mut self,
+        import_path: &str,
+        imported_name: &str,
+        depth: usize,
+    ) -> Option<Value> {
+        // Guard against pathological depth.
+        if depth > 16 {
+            return None;
+        }
+
         let resolved_path = self.resolve_path(import_path)?;
-        // eprintln!("[JsAnalyzer] Resolved to: {:?}", resolved_path);
+        let cache_key = (resolved_path.clone(), imported_name.to_string());
+        if let Some(cached) = self.import_cache.get(&cache_key) {
+            return cached.clone();
+        }
+        // Seed the in-progress entry so an import cycle resolves to None instead
+        // of recursing forever.
+        self.import_cache.insert(cache_key.clone(), None);
 
-        // Read and parse the module
-        let code = fs::read_to_string(&resolved_path).ok()?;
+        let result = self.resolve_export_from_file(&resolved_path, imported_name, depth);
+        self.import_cache.insert(cache_key, result.clone());
+        result
+    }
+
+    fn resolve_export_from_file(
+        &mut self,
+        resolved_path: &PathBuf,
+        imported_name: &str,
+        depth: usize,
+    ) -> Option<Value> {
+        let code = fs::read_to_string(resolved_path).ok()?;
         let module = self.parse_module(&code)?;
 
-        // Build scope for the imported module
+        // Build scope for the imported module.
         let mut scope_builder = ScopeBuilder::new(resolved_path.parent()?.to_path_buf());
         module.visit_with(&mut scope_builder);
 
-        // Find the exported binding
-        let mut export_finder = ExportFinder::new(
-            import_name.to_string(),
-            scope_builder.bindings.clone(),
-        );
-        module.visit_with(&mut export_finder);
-
-        // Resolve the exported expression with the file's bindings
-        if let Some(expr) = export_finder.found_export {
-            let state_extractor = StateExtractor::new(scope_builder.bindings);
-            return state_extractor.resolve_expr(&expr);
+        // Recursively resolve THIS module's own imports so a property like
+        // `version: VERSION` (itself a default import) can be resolved. Import
+        // paths in this codebase are absolute (`/js/...`), resolved against the
+        // analyzer's fixed base, so no per-module base swap is needed.
+        let mut resolved_imports: HashMap<String, Value> = HashMap::new();
+        for (local_name, (path, name)) in scope_builder.imports.clone() {
+            if let Some(value) = self.resolve_import_value_depth(&path, &name, depth + 1) {
+                resolved_imports.insert(local_name, value);
+            }
         }
 
-        None
+        // Find the requested export.
+        let mut export_finder =
+            ExportFinder::new(imported_name.to_string(), scope_builder.bindings.clone());
+        module.visit_with(&mut export_finder);
+
+        let expr = export_finder.found_export?;
+        let mut state_extractor = StateExtractor::new(scope_builder.bindings);
+        state_extractor.resolved_imports = resolved_imports;
+        state_extractor.resolve_expr(&expr)
     }
 
     /// Resolve import path relative to base_path
@@ -115,9 +156,12 @@ impl JsAnalyzer {
         }
     }
 
-    /// Parse JavaScript/TypeScript module
+    /// Parse JavaScript/TypeScript module. Uses a FRESH source map per call —
+    /// recursive import resolution parses many files, and a shared map would
+    /// accumulate byte positions until they overflow (`start <= end` panic).
     fn parse_module(&self, code: &str) -> Option<Module> {
-        let fm = self.source_map.new_source_file(
+        let source_map: Lrc<SourceMap> = Default::default();
+        let fm = source_map.new_source_file(
             Lrc::new(FileName::Anon),
             code.to_string(),
         );
@@ -147,7 +191,9 @@ impl JsAnalyzer {
 /// Builds a scope of variable bindings and tracks imports
 struct ScopeBuilder {
     bindings: HashMap<String, Expr>,
-    imports: HashMap<String, String>, // import_name -> import_path
+    // local binding name -> (import path, imported export name; "default" for a
+    // default import, "*" for a namespace import)
+    imports: HashMap<String, (String, String)>,
     _base_path: PathBuf,
 }
 
@@ -167,21 +213,29 @@ impl Visit for ScopeBuilder {
 
         for specifier in &import.specifiers {
             match specifier {
-                // import { name } from './file.js'
+                // import { orig as local } from './file.js'
                 ImportSpecifier::Named(named) => {
-                    let _import_name = match &named.imported {
+                    let imported = match &named.imported {
                         Some(ModuleExportName::Ident(ident)) => ident.sym.to_string(),
-                        _ => named.local.sym.to_string(),
+                        Some(ModuleExportName::Str(s)) => s.value.to_string(),
+                        None => named.local.sym.to_string(),
                     };
-                    self.imports.insert(named.local.sym.to_string(), import_path.clone());
+                    self.imports
+                        .insert(named.local.sym.to_string(), (import_path.clone(), imported));
                 }
                 // import name from './file.js' (default import)
                 ImportSpecifier::Default(default) => {
-                    self.imports.insert(default.local.sym.to_string(), import_path.clone());
+                    self.imports.insert(
+                        default.local.sym.to_string(),
+                        (import_path.clone(), "default".to_string()),
+                    );
                 }
-                // import * as name from './file.js'
+                // import * as name from './file.js' (namespace import)
                 ImportSpecifier::Namespace(namespace) => {
-                    self.imports.insert(namespace.local.sym.to_string(), import_path.clone());
+                    self.imports.insert(
+                        namespace.local.sym.to_string(),
+                        (import_path.clone(), "*".to_string()),
+                    );
                 }
             }
         }
@@ -233,6 +287,13 @@ impl ExportFinder {
 }
 
 impl Visit for ExportFinder {
+    // `export default <expr>` — matched when the consumer used a default import.
+    fn visit_export_default_expr(&mut self, export: &ExportDefaultExpr) {
+        if self.target_name == "default" {
+            self.found_export = Some((*export.expr).clone());
+        }
+    }
+
     fn visit_export_decl(&mut self, export: &ExportDecl) {
         match &export.decl {
             Decl::Var(var_decl) => {
@@ -554,6 +615,63 @@ mod tests {
         assert_eq!(state["c"].as_f64().unwrap(), 3.0);
     }
 
+    #[test]
+    fn test_component_called_with_variable() {
+        // component(state) — the whole argument is a variable bound to an object
+        // literal above (BrawlerDetailContent does exactly this). The extractor
+        // must resolve the variable; otherwise the component wrapper is never
+        // tagged and its `this.` conditionals can't resolve at runtime.
+        let mut analyzer = JsAnalyzer::new(PathBuf::from("."));
+        let script = r#"
+            const state = {
+              currentCharacter: null,
+              currentSlots: [],
+              currentLastTickEnd: 0,
+            };
+            setupCharacter(state);
+            const id = component(state);
+        "#;
+
+        let state = analyzer.extract_state(script).expect("state should be extracted");
+        assert!(state.get("currentCharacter").is_some(), "got: {state}");
+        assert_eq!(state["currentLastTickEnd"].as_f64().unwrap(), 0.0);
+    }
+
+    #[test]
+    fn test_component_var_amid_realistic_script() {
+        // Mirrors BrawlerDetailContent's script shape: top-level imports, a
+        // dynamic import().then(), an empty `catch {}`, optional chaining, and
+        // `component(state)`. A parse failure on any of these makes extract_state
+        // return None and the component goes untagged.
+        let mut analyzer = JsAnalyzer::new(PathBuf::from("."));
+        let script = r#"
+            import CHARACTERS from '/js/constants/CHARACTERS.js';
+            import { buildEquipmentSlots, unequip } from '/js/equipment.js';
+
+            const backParam = new URLSearchParams(location.search).get('back') || '';
+            const state = {
+              currentCharacter: null,
+              currentSlots: [],
+              currentLastTickEnd: 0,
+              backUrl: backParam.startsWith('/') ? backParam : '',
+            };
+
+            const setupCharacter = (target) => {
+              const ref = $.characters?.[0];
+              try { ref.foo(); } catch {}
+              target.currentCharacter = ref;
+            };
+
+            setupCharacter(state);
+            const id = component(state);
+
+            import('/js/dnd.js').then(({ default: dnd }) => { dnd.init(); });
+        "#;
+
+        let state = analyzer.extract_state(script).expect("state should be extracted");
+        assert!(state.get("currentCharacter").is_some(), "got: {state}");
+    }
+
     #[test]
     fn test_absolute_path_import() {
         let mut analyzer = JsAnalyzer::new(PathBuf::from("/tmp"));
@@ -569,4 +687,29 @@ mod tests {
         assert_eq!(state["other"].as_str().unwrap(), "value");
         assert_eq!(state["extra"].as_str().unwrap(), "value");
     }
+
+    #[test]
+    fn resolves_default_import_chain() {
+        // Two nested DEFAULT imports, mirroring boot.js → app.js → version.js:
+        // `import appState` → `export default { version: VERSION }` → `import VERSION`.
+        let dir = std::env::temp_dir().join("vibe_default_import_chain_test");
+        let _ = fs::remove_dir_all(&dir);
+        fs::create_dir_all(&dir).unwrap();
+        fs::write(dir.join("version.js"), "export default '0.1.5';").unwrap();
+        fs::write(
+            dir.join("app.js"),
+            "import VERSION from '/version.js';\nexport default { version: VERSION, coins: 400 };",
+        )
+        .unwrap();
+
+        let mut analyzer = JsAnalyzer::new(dir.clone());
+        let state = analyzer
+            .extract_state("import appState from '/app.js';\nvibe({ ...appState });")
+            .unwrap();
+
+        assert_eq!(state["version"], "0.1.5");
+        assert_eq!(state["coins"].as_f64(), Some(400.0));
+
+        let _ = fs::remove_dir_all(&dir);
+    }
 }

package/compiler/src/compiler/mod.rs

@@ -5,6 +5,7 @@ mod value_stamper;
 mod iteration_optimizer;
 mod js_analyzer;
 mod component_tagger;
+mod reassignment_analyzer;
 pub mod watcher;
 
 pub use compile::Compiler;