@ape-egg/vibe 2.1.1 → 2.1.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [2.1.4] - 2026-06-18
+
+### Fixed
+
+- **Compiler 1.9.0 → 1.9.1 — `--minify` broke `<script>` and `<style>` blocks** (`compiler/src/compiler/compile.rs`) — `minify_html` only treated `<pre>` as whitespace-significant. Collapsing newlines inside a `<script>` turned a `//` line comment (or any ASI-dependent break) into a single line, so the comment swallowed the rest of the script and `new Function` threw a `SyntaxError` at runtime; `<style>` blocks were likewise flattened. Both tags now join `<pre>` as raw blocks emitted line-for-line, while the surrounding HTML still minifies normally. Repro: `minify_preserves_script_newlines_so_line_comments_dont_swallow_code`, `minify_preserves_style_newlines` (`compile.rs` unit tests).
+- **Compiler 1.9.0 → 1.9.1 — component inliner overshot on end tags split across lines** (`compiler/src/parser/html.rs`) — `find_matching_close` matched `</tag>` exactly, but whitespace-controlled markup can split an end tag (`</component\n>`), which HTML permits. The depth counter then counted the nested open without ever seeing its close, so the outer-close search ran past the real boundary and swallowed every following sibling into the component. The close-tag regex now tolerates whitespace before `>` (`</tag\s*>`); `\s*` can't bridge into `</tag-foo>`, so matching stays exact on the tag name. Repro: `find_matching_close_tolerates_whitespace_in_end_tag` (`html.rs` unit test).
+
+## [2.1.3] - 2026-06-18
+
+### Added
+
+- **Compiler 1.8.2 → 1.9.0 — `skipFiles` config option** (`compiler/src/config.rs`, `compiler/src/compiler/compile.rs`, `compiler/src/compiler/watcher.rs`, `compiler/src/main.rs`) — projects can now add their own exclude patterns on top of the compiler's built-in skip list (test files, `*.config.js`, `node_modules`, dotfiles, build dirs). Like `reservedElements`, user values **append** to the built-ins rather than replacing them, so the sensible defaults always hold. `Config::load` merges the built-in `SKIP_FILES` const with the user array into one effective `config.skip_files`, which is now threaded into `should_skip_path` at every call site (compile pass + watch mode) instead of the function reading a hard-coded const. Matching: a bare name (`server`) matches any file or directory with that name; a pattern containing `*` is a glob (`**/*.bak`) matched against both filename and full path; dotfiles are always skipped. This removes the need for app-side post-build pruning of directories the deploy never serves (a backend `server/`, build `scripts/`, a stale `dist/`). Config-only (no CLI flag, like `reservedElements`); surfaced in `--verbose` output. Repro: `tests/compiler/skip-files`.
+- Docs: the compiler **Configuration** page documents `skipFiles` (example config + full section) and adds two collapsible panels revealing the built-in `reservedElements` and `skipFiles` default lists.
+
+## [2.1.2] - 2026-06-18
+
+### Fixed
+
+- **Compiler 1.8.0 → 1.8.1 — `--minify` mangled tags whose attributes span multiple lines** (`compiler/src/compiler/compile.rs`) — `minify_html` joined trimmed source lines with no separator, so a newline *inside* a tag vanished instead of collapsing to a space. A multi-line `<meta name="viewport" content="...">` became `<metaname="viewport"content="...">`, which the downstream stamping stage then re-parsed into deeper garbage (`initial-scale="1.0,"`, `&quot;`, a bogus `</metaname...>` close). The inter-line break is now collapsed to a single space like any other whitespace run; the existing `>\s+<` → `><` pass re-tightens genuine tag boundaries. Generic fix — applies to any multi-line tag or text node, not just `<meta>`. Repro: `tests/compiler/minify-meta`.
+
 ## [2.1.1] - 2026-06-18
 
 ### Added

package/compiler/src/Cargo.lock

@@ -1599,7 +1599,7 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
 [[package]]
 name = "vibe-compiler"
-version = "1.8.0"
+version = "1.9.1"
 dependencies = [
  "clap",
  "colored",

package/compiler/src/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "vibe-compiler"
-version = "1.8.0"
+version = "1.9.1"
 edition = "2021"
 description = "Vibe framework compiler - compiles Vibe source files into optimized output"
 authors = ["Kim Korte"]

package/compiler/src/compiler/compile.rs

@@ -12,6 +12,32 @@ use rayon::prelude::*;
 use crate::config::Config;
 use crate::parser::HtmlParser;
 
+/// Map an output-relative HTML path to the URL path the runtime resolves a
+/// manifest from. Strips the `root` dir (served at /) and collapses dynamic
+/// `$param` segments to a `$` token, e.g. with root `pages`:
+///   pages/armory.html        -> armory.html
+///   pages/the-arena/$id.html -> the-arena/$.html
+fn manifest_url_path(relative_path: &str, root: Option<&str>) -> String {
+    let stripped = match root {
+        Some(r) if relative_path == r => "",
+        Some(r) if relative_path.starts_with(&format!("{}/", r)) => &relative_path[r.len() + 1..],
+        _ => relative_path,
+    };
+
+    stripped
+        .split('/')
+        .map(|seg| match seg.strip_prefix('$') {
+            // $id.html -> $.html ; $id -> $
+            Some(rest) => match rest.find('.') {
+                Some(dot) => format!("${}", &rest[dot..]),
+                None => "$".to_string(),
+            },
+            None => seg.to_string(),
+        })
+        .collect::<Vec<_>>()
+        .join("/")
+}
+
 // =============================================================================
 // MIRROR_MODE: Copy asset files from source to output as-is, preserving
 // directory structure. HTML files are compiled separately.
@@ -38,7 +64,10 @@ const MIRROR_EXTENSIONS: &[&str] = &[
     "json", "xml", "csv",
 ];
 
-// Files and directories to skip when walking source (supports glob patterns)
+// Built-in files and directories to skip when walking source (supports glob
+// patterns). User-supplied `skipFiles` are appended to these in Config::load,
+// so the effective list lives on `config.skip_files` and is passed into
+// should_skip_path() at every call site.
 // Note: Output directory is checked dynamically (not hardcoded here)
 // Note: Dotfiles are handled by starts_with('.') check in should_skip_path()
 pub const SKIP_FILES: &[&str] = &[
@@ -53,20 +82,21 @@ pub const SKIP_FILES: &[&str] = &[
     "**/*.config.ts",    // Config files
 ];
 
-/// Check if a path should be skipped based on SKIP_FILES patterns
-pub fn should_skip_path(path: &Path, name: &str) -> bool {
+/// Check if a path should be skipped based on the effective skip patterns
+/// (built-in SKIP_FILES + user `skipFiles`, merged in Config::load).
+pub fn should_skip_path(path: &Path, name: &str, patterns: &[String]) -> bool {
     // Check if name starts with dot (dotfiles/directories)
     if name.starts_with('.') {
         return true;
     }
 
     // Check exact name match (for directories and simple filenames)
-    if SKIP_FILES.contains(&name) {
+    if patterns.iter().any(|p| p == name) {
         return true;
     }
 
     // Check glob patterns (e.g., **/*.test.js)
-    for pattern_str in SKIP_FILES {
+    for pattern_str in patterns {
         if pattern_str.contains('*') {
             if let Ok(pattern) = Pattern::new(pattern_str) {
                 // Try matching against just the filename
@@ -794,6 +824,7 @@ impl Compiler {
                 self.config.iterations_as_is,
                 self.config.components_as_is,
                 &self.config.source,
+                self.config.root.as_deref(),
             ) {
                 Ok(()) => {
                     pages_processed += 1;
@@ -826,6 +857,7 @@ impl Compiler {
         iterations_as_is: bool,
         components_as_is: bool,
         source_root: &Path,
+        manifest_root: Option<&str>,
     ) -> Result<(), String> {
         use crate::compiler::manifest_builder::ManifestBuilder;
         use crate::compiler::component_tagger::ComponentTagger;
@@ -841,10 +873,17 @@ impl Compiler {
         let manifest_builder = ManifestBuilder::new();
         let manifest = manifest_builder.build_from_html(html, &state, iterations_as_is)?;
 
+        // Map the output-relative path to the served-URL path: drop the `root`
+        // dir (the folder served at /, e.g. `pages`) and collapse dynamic
+        // `$param` segments to a single `$` token. This lets the runtime resolve
+        // a manifest from a clean URL — `/armory` and `/the-arena/123` find
+        // `armory.html.manifest.js` and `the-arena/$.html.manifest.js`.
+        let manifest_rel = manifest_url_path(relative_path, manifest_root);
+
         // Write manifest
         let manifest_path = output_dir
             .join("vibe-hyperspeed")
-            .join(format!("{}.manifest.js", relative_path));
+            .join(format!("{}.manifest.js", manifest_rel));
 
         // Ensure directory exists
         if let Some(parent) = manifest_path.parent() {
@@ -857,7 +896,7 @@ impl Compiler {
 
         let manifest_js = format!(
             "// Pre-compiled manifest for /{}\n// Generated by Vibe compiler\n\nexport default {};\n",
-            relative_path,
+            manifest_rel,
             manifest_json
         );
 
@@ -901,6 +940,7 @@ impl Compiler {
         let verbose = self.verbose;
         let iterations_as_is = self.config.iterations_as_is;
         let components_as_is = self.config.components_as_is;
+        let manifest_root = self.config.root.clone();
 
         let results: Vec<_> = html_files
             .par_iter()
@@ -917,7 +957,7 @@ impl Compiler {
                 };
 
                 // Try to generate manifest for this file (skip on error)
-                match Self::generate_file_manifest(&html, html_path, &output_dir, relative_path, verbose, iterations_as_is, components_as_is, &source_root) {
+                match Self::generate_file_manifest(&html, html_path, &output_dir, relative_path, verbose, iterations_as_is, components_as_is, &source_root, manifest_root.as_deref()) {
                     Ok(()) => (true, None),
                     Err(e) => {
                         if verbose {
@@ -974,7 +1014,7 @@ impl Compiler {
                 }
 
                 // Skip special directories
-                if should_skip_path(&path, file_name) {
+                if should_skip_path(&path, file_name, &self.config.skip_files) {
                     continue;
                 }
 
@@ -1059,7 +1099,7 @@ impl Compiler {
                 }
 
                 // Skip special directories
-                if should_skip_path(&path, file_name) {
+                if should_skip_path(&path, file_name, &self.config.skip_files) {
                     continue;
                 }
 
@@ -1093,7 +1133,7 @@ impl Compiler {
                 self.process_directory_assets_only(&path, &new_relative, canonical_output, canonical_source, stats)?;
             } else if let Some(ext) = path.extension().and_then(|e| e.to_str()) {
                 // Skip files matching skip patterns
-                if should_skip_path(&path, file_name) {
+                if should_skip_path(&path, file_name, &self.config.skip_files) {
                     continue;
                 }
 
@@ -1546,7 +1586,7 @@ impl Compiler {
             let file_name_str = file_name.to_string_lossy();
 
             // Skip specific directories/patterns (includes dotfiles via SKIP_FILES)
-            if should_skip_path(&path, &file_name_str) {
+            if should_skip_path(&path, &file_name_str, &self.config.skip_files) {
                 continue;
             }
 
@@ -1765,7 +1805,7 @@ impl Compiler {
             let file_name = path.file_name().unwrap().to_str().unwrap();
 
             // Skip files/directories matching skip patterns
-            if should_skip_path(&path, file_name) {
+            if should_skip_path(&path, file_name, &self.config.skip_files) {
                 continue;
             }
 
@@ -1929,23 +1969,40 @@ fn copy_dir_recursive(src: &Path, dest: &Path) -> Result<(), CompileError> {
 /// Basic HTML minification
 fn minify_html(html: &str) -> String {
     let mut result = String::with_capacity(html.len());
-    let mut in_pre = false;
+    let mut in_raw = false;
     let mut last_was_space = false;
 
     for line in html.lines() {
         let trimmed = line.trim();
 
-        if trimmed.contains("<pre") {
-            in_pre = true;
+        // <pre>, <script> and <style> carry significant whitespace and must
+        // survive minification verbatim: <pre> is literal text, while a JS
+        // `//` line comment or ASI in <script> breaks the moment its trailing
+        // newline is collapsed into a space (the comment swallows the rest of
+        // the script). Keep these blocks line-for-line, exactly as <pre> always
+        // did. The opening-tag line enters the block before we emit it; the
+        // closing-tag line leaves it (and collapses, which only tightens the
+        // bare `</pre>` / `</script>` / `</style>`).
+        if trimmed.contains("<pre") || trimmed.contains("<script") || trimmed.contains("<style") {
+            in_raw = true;
         }
-        if trimmed.contains("</pre>") {
-            in_pre = false;
+        if trimmed.contains("</pre>") || trimmed.contains("</script>") || trimmed.contains("</style>") {
+            in_raw = false;
         }
 
-        if in_pre {
+        if in_raw {
             result.push_str(line);
             result.push('\n');
+            last_was_space = false;
         } else {
+            // The line break preceding this line is whitespace: collapse it to a
+            // single space so attributes/text split across lines don't glue
+            // together (e.g. a multi-line <meta name=... content=...> tag).
+            // The >\s+< pass below re-tightens genuine tag boundaries.
+            if !last_was_space && !result.is_empty() {
+                result.push(' ');
+                last_was_space = true;
+            }
             for c in trimmed.chars() {
                 if c.is_whitespace() {
                     if !last_was_space {
@@ -1979,3 +2036,50 @@ fn find_bytes_ci(haystack: &[u8], needle: &[u8], from: usize) -> Option<usize> {
 fn count_newlines(bytes: &[u8]) -> usize {
     bytes.iter().filter(|&&b| b == b'\n').count()
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn minify_preserves_script_newlines_so_line_comments_dont_swallow_code() {
+        // A `//` line comment inside a component script relies on its trailing
+        // newline. If minify collapses newlines into spaces, the comment eats
+        // the rest of the script → SyntaxError at runtime (new Function).
+        let html = "<page>\n\
+            <script type=\"module\">\n\
+            \x20 const a = 1; // explain a\n\
+            \x20 // keep explaining\n\
+            \x20 const b = 2;\n\
+            </script>\n\
+            </page>";
+
+        let out = minify_html(html);
+
+        // The code after the comments must still be reachable, i.e. on its own
+        // line rather than glued behind the `//`.
+        let script = &out[out.find("<script").unwrap()..out.find("</script>").unwrap()];
+        assert!(
+            script.contains('\n'),
+            "script newlines were collapsed, // comment swallows following code: {script:?}"
+        );
+        assert!(out.contains("const b = 2"), "code after // comment lost: {out:?}");
+
+        // Surrounding HTML must still be minified (tag boundaries tightened).
+        assert!(out.contains("<page><script"), "non-script HTML not minified: {out:?}");
+    }
+
+    #[test]
+    fn minify_preserves_style_newlines() {
+        let html = "<page>\n\
+            <style>\n\
+            \x20 a { color: red; }\n\
+            \x20 b { color: blue; }\n\
+            </style>\n\
+            </page>";
+
+        let out = minify_html(html);
+        let style = &out[out.find("<style").unwrap()..out.find("</style>").unwrap()];
+        assert!(style.contains('\n'), "style newlines collapsed: {style:?}");
+    }
+}

package/compiler/src/compiler/component_tagger.rs

@@ -1,7 +1,7 @@
 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;
@@ -137,15 +137,26 @@ 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 (`>` -> `>`,
+                            // `&&` -> `&&`) 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>");
                         }
                     }
                 }
@@ -200,36 +211,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 +297,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,6 +311,40 @@ 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 tag_multiple_components() {
         let html = r#"<!DOCTYPE html><html><body><component></component><component></component><component></component></body></html>"#;

package/compiler/src/compiler/js_analyzer.rs

@@ -554,6 +554,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"));

package/compiler/src/compiler/watcher.rs

@@ -128,11 +128,11 @@ fn to_kebab_case(s: &str) -> String {
 
 /// Check if a path should be blacklisted based on SKIP_FILES patterns
 /// This checks both the filename and all path components relative to source root
-fn is_path_blacklisted(path: &Path, source_root: &Path) -> bool {
+fn is_path_blacklisted(path: &Path, source_root: &Path, skip_files: &[String]) -> bool {
     let file_name = path.file_name().and_then(|n| n.to_str()).unwrap_or("");
 
     // Check filename against blacklist
-    if should_skip_path(path, file_name) {
+    if should_skip_path(path, file_name, skip_files) {
         return true;
     }
 
@@ -140,7 +140,7 @@ fn is_path_blacklisted(path: &Path, source_root: &Path) -> bool {
     if let Ok(relative) = path.strip_prefix(source_root) {
         for component in relative.components() {
             if let Some(component_str) = component.as_os_str().to_str() {
-                if should_skip_path(path, component_str) {
+                if should_skip_path(path, component_str, skip_files) {
                     return true;
                 }
             }
@@ -159,7 +159,7 @@ pub fn build_dependency_graph(config: &Config) -> std::result::Result<Dependency
         .unwrap_or_else(|_| config.output.clone());
 
     // Scan all HTML files in source directory
-    scan_directory(&config.source, &config.source, &config.components, &canonical_output, &mut graph)?;
+    scan_directory(&config.source, &config.source, &config.components, &canonical_output, &config.skip_files, &mut graph)?;
 
     Ok(graph)
 }
@@ -169,6 +169,7 @@ fn scan_directory(
     source_root: &Path,
     components_dir: &str,
     output_dir: &Path,
+    skip_files: &[String],
     graph: &mut DependencyGraph,
 ) -> std::result::Result<(), std::io::Error> {
     if !dir.is_dir() {
@@ -190,11 +191,11 @@ fn scan_directory(
             }
 
             // Skip directories using shared skip logic
-            if should_skip_path(&path, file_name) {
+            if should_skip_path(&path, file_name, skip_files) {
                 continue;
             }
 
-            scan_directory(&path, source_root, components_dir, output_dir, graph)?;
+            scan_directory(&path, source_root, components_dir, output_dir, skip_files, graph)?;
         } else if let Some(ext) = path.extension() {
             if ext == "html" {
                 let html = std::fs::read_to_string(&path)?;
@@ -354,7 +355,7 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                         for event in events {
                             for path in &event.paths {
                                 // Skip blacklisted files/directories (check entire path, not just filename)
-                                if is_path_blacklisted(path, &config.source) {
+                                if is_path_blacklisted(path, &config.source, &config.skip_files) {
                                     continue;
                                 }
 
@@ -381,7 +382,7 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                             }
 
                             // Skip blacklisted files/directories
-                            if is_path_blacklisted(path, &config.source) {
+                            if is_path_blacklisted(path, &config.source, &config.skip_files) {
                                 continue;
                             }
 
@@ -487,7 +488,7 @@ pub fn watch(config: Config, verbose: bool) -> std::result::Result<(), Box<dyn s
                             }
 
                             // Skip blacklisted files/directories
-                            if is_path_blacklisted(path, &config.source) {
+                            if is_path_blacklisted(path, &config.source, &config.skip_files) {
                                 continue;
                             }
 

package/compiler/src/config.rs

@@ -35,6 +35,8 @@ pub struct VibeCompilerConfig {
     #[serde(default)]
     pub reserved_elements: Vec<String>,
     #[serde(default)]
+    pub skip_files: Vec<String>,
+    #[serde(default)]
     pub node_modules_as_is: bool,
     #[serde(default)]
     pub components_as_is: bool,
@@ -96,6 +98,7 @@ impl Default for VibeCompilerConfig {
             elements_as_is: false,
             source_maps: false,
             reserved_elements: vec![],
+            skip_files: vec![],
             node_modules_as_is: false,
             components_as_is: false,
             runtime_as_is: false,
@@ -115,11 +118,12 @@ pub struct Config {
     pub components: String,
     pub pages: String,
     pub _assets: String,
-    pub _root: Option<String>,
+    pub root: Option<String>,
     pub minify: bool,
     pub elements_as_is: bool,
     pub source_maps: bool,
     pub reserved_elements: Vec<String>,
+    pub skip_files: Vec<String>,
     pub node_modules_as_is: bool,
     pub components_as_is: bool,
     pub runtime_as_is: bool,
@@ -154,6 +158,13 @@ impl Config {
         let mut reserved_elements = get_default_reserved_elements();
         reserved_elements.extend(config.reserved_elements);
 
+        // Combine built-in skip patterns with user-provided ones (append, not replace)
+        let mut skip_files: Vec<String> = crate::compiler::compile::SKIP_FILES
+            .iter()
+            .map(|s| s.to_string())
+            .collect();
+        skip_files.extend(config.skip_files);
+
         Self {
             source,
             output,
@@ -162,11 +173,12 @@ impl Config {
             components: config.components,
             pages: config.pages,
             _assets: config.assets,
-            _root: config.root,
+            root: config.root,
             minify: config.minify,
             elements_as_is: config.elements_as_is,
             source_maps: config.source_maps,
             reserved_elements,
+            skip_files,
             node_modules_as_is: config.node_modules_as_is,
             components_as_is: config.components_as_is,
             runtime_as_is: config.runtime_as_is,

package/compiler/src/main.rs

@@ -204,6 +204,14 @@ fn main() {
             }
         }
 
+        fn format_list_preview(items: &[String]) -> String {
+            if items.len() <= 2 {
+                format!("{:?}", items)
+            } else {
+                format!("[{:?}, {:?}, ... + {} more]", items[0], items[1], items.len() - 2)
+            }
+        }
+
         // Alphabetically ordered with padding (longest key is "reservedElements" = 16 chars)
         println!("  {}: {}", format!("{:<16}", "assets").cyan(), format_value_no_flag(&config._assets));
         println!("  {}: {}", format!("{:<16}", "components").cyan(), format_value_no_flag(&config.components));
@@ -215,8 +223,9 @@ fn main() {
         println!("  {}: {}", format!("{:<16}", "output").cyan(), format_value_no_flag(&config._output_str));
         println!("  {}: {}", format!("{:<16}", "pages").cyan(), format_value_no_flag(&config.pages));
         println!("  {}: {}", format!("{:<16}", "reservedElements").cyan(), format_value_no_flag(format_reserved_elements(&config.reserved_elements)));
-        println!("  {}: {}", format!("{:<16}", "root").cyan(), format_value_no_flag(config._root.as_ref().map(|s| s.as_str()).unwrap_or("null")));
+        println!("  {}: {}", format!("{:<16}", "root").cyan(), format_value_no_flag(config.root.as_ref().map(|s| s.as_str()).unwrap_or("null")));
         println!("  {}: {}", format!("{:<16}", "runtimeAsIs").cyan(), format_bool_with_flag(config.runtime_as_is, overrides.runtime_as_is, original_runtime_as_is));
+        println!("  {}: {}", format!("{:<16}", "skipFiles").cyan(), format_value_no_flag(format_list_preview(&config.skip_files)));
         println!("  {}: {}", format!("{:<16}", "source").cyan(), format_value_no_flag(&config._source_str));
         println!("  {}: {}", format!("{:<16}", "sourceMaps").cyan(), format_bool_with_flag(config.source_maps, overrides.source_maps, original_source_maps));
         println!();

package/compiler/src/parser/html.rs

@@ -261,7 +261,11 @@ impl HtmlParser {
     fn find_matching_close(content: &str, after_open: usize, tag_name: &str) -> Option<usize> {
         // (?:\s|>) ensures <component> matches but not <component-foo> (hyphen is not \s or >)
         let open_re = regex::Regex::new(&format!(r"<{}(?:\s|>|/>)", regex::escape(tag_name))).unwrap();
-        let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(tag_name))).unwrap();
+        // `\s*>` tolerates whitespace before the `>` of an end tag — HTML allows
+        // it, and whitespace-controlled markup splits end tags across lines
+        // (`</component\n>`). `\s*` can't bridge into `</component-foo>` (the `-`
+        // is neither whitespace nor `>`), so this stays exact on the tag name.
+        let close_re = regex::Regex::new(&format!(r"</{}\s*>", regex::escape(tag_name))).unwrap();
 
         let mut depth = 1i32;
         let mut cursor = after_open;
@@ -744,3 +748,31 @@ fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) ->
 
     result
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn find_matching_close_tolerates_whitespace_in_end_tag() {
+        // Whitespace-controlled markup splits an end tag across lines, e.g.
+        //   <icon-cell
+        //     ><component src="x"></component
+        //   ></icon-cell>
+        // which reaches the inliner as `</component\n>`. HTML permits
+        // whitespace before the `>` of an end tag, so the depth counter must
+        // treat `</component\n>` as the nested close. If it doesn't, the nested
+        // open is counted but never closed and the OUTER close search overshoots,
+        // swallowing every following sibling into the component.
+        let content = "<component><a><component src=\"x\"></component\n></a></component><sibling></sibling>";
+        let after_open = "<component>".len();
+
+        let close = HtmlParser::find_matching_close(content, after_open, "component")
+            .expect("outer </component> must be found");
+
+        // The match must be the OUTER close (immediately before <sibling>), not
+        // an overshoot past it.
+        assert!(content[close..].starts_with("</component>"), "matched wrong close: {:?}", &content[close..close + 14]);
+        assert!(content[close..].contains("<sibling>"), "sibling was swallowed into the component");
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "2.1.1",
+  "version": "2.1.4",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/pre-compiled-manifest.js

@@ -126,6 +126,98 @@ export const buildHyperspeedManifest = (parsedTree) => {
 let hyperspeedData = null;
 let hyperspeedDetectionAttempted = false;
 
+/**
+ * Build the ordered list of manifest URLs to try for a page, most-likely first.
+ *
+ * `pathname` is window.location.pathname; `route` is the optional route template
+ * the page declares (window.__ROUTE__, e.g. "/brawlers/:index"). When the route
+ * marks a segment dynamic with `:param`, the compiler has collapsed that segment
+ * to `$` in the manifest path — so we point straight at the tokenized manifest
+ * instead of probing literal paths (`/brawlers/0.html.manifest.js`) that are
+ * guaranteed to 404. Without the route hint the original literal-first strategies
+ * apply unchanged. The result is de-duplicated (subdirectory pages otherwise
+ * produce the same candidate twice).
+ *
+ * @param {string} pathname
+ * @param {string|null|undefined} route
+ * @returns {string[]}
+ */
+export const buildManifestCandidatePaths = (pathname, route) => {
+  let pagePath = pathname;
+
+  // Normalize path: handle directory URLs and missing extensions
+  if (pagePath.endsWith("/")) {
+    pagePath = pagePath + "index.html";
+  } else if (!pagePath.includes(".")) {
+    const lastSlash = pagePath.lastIndexOf("/");
+    const lastSegment = pagePath.substring(lastSlash + 1);
+    if (lastSegment && !lastSegment.includes(".")) {
+      pagePath = pagePath + ".html";
+    }
+  }
+
+  const pathSegments = pagePath.split("/").filter((s) => s);
+  if (pathSegments.length === 0) return [];
+
+  const fileName = pathSegments[pathSegments.length - 1];
+  const dirSegments = pathSegments.slice(0, -1);
+
+  const possiblePaths = [];
+
+  // Route-aware fast path: a `:segment` in the declared route is a dynamic param
+  // the compiler tokenized to `$`. Tokenize exactly those positions (params can
+  // sit mid-path, e.g. /a/:id/b) and try that manifest first — a direct hit, no
+  // 404 probing. Skipped entirely when no route is declared.
+  const routeSegments = route ? route.split("/").filter((s) => s) : null;
+  if (routeSegments && routeSegments.some((s) => s.startsWith(":"))) {
+    const tokenized = pathSegments.map((seg, i) => {
+      if (!routeSegments[i]?.startsWith(":")) return seg;
+      const dot = seg.indexOf(".");
+      return dot >= 0 ? "$" + seg.slice(dot) : "$";
+    });
+    possiblePaths.push(`/vibe-hyperspeed/${tokenized.join("/")}.manifest.js`);
+  }
+
+  // Strategy 1: vibe-hyperspeed at the same level as parent directory
+  // /compiled/playground/test.html -> /compiled/vibe-hyperspeed/playground/test.html.manifest.js
+  if (dirSegments.length >= 1) {
+    const subPath = dirSegments.slice(1).join("/"); // Everything after first dir
+    const baseDir = "/" + dirSegments[0]; // First directory segment
+    possiblePaths.push(
+      `${baseDir}/vibe-hyperspeed/${subPath ? subPath + "/" : ""}${fileName}.manifest.js`,
+    );
+  }
+
+  // Strategy 2: vibe-hyperspeed at web root (original behavior)
+  // /compiled/playground/test.html -> /vibe-hyperspeed/compiled/playground/test.html.manifest.js
+  possiblePaths.push(`/vibe-hyperspeed${pagePath}.manifest.js`);
+
+  // Strategy 3: vibe-hyperspeed relative to immediate parent
+  // /playground/test.html -> /vibe-hyperspeed/playground/test.html.manifest.js
+  if (dirSegments.length > 0) {
+    const relativePath = dirSegments.join("/");
+    possiblePaths.push(
+      `/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`,
+    );
+  }
+
+  // Strategy 4: dynamic routes without a declared route. The compiler collapses a
+  // `$param` segment to a single `$` token (the-arena/$id.html ->
+  // the-arena/$.html.manifest.js), so a concrete URL only matches once its
+  // trailing segment is tokenized. Tried after the literal strategies, so static
+  // pages still win on an exact hit.
+  const dot = fileName.indexOf(".");
+  const tokenized = dot >= 0 ? "$" + fileName.slice(dot) : "$";
+  if (tokenized !== fileName) {
+    const dirPrefix = dirSegments.length ? `/${dirSegments.join("/")}` : "";
+    possiblePaths.push(`/vibe-hyperspeed${dirPrefix}/${tokenized}.manifest.js`);
+  }
+
+  // Subdirectory pages make strategies 2 and 3 collapse to the same URL — probe
+  // each candidate once.
+  return [...new Set(possiblePaths)];
+};
+
 /**
  * Detect page-specific manifest (async, cached after first call)
  * Returns { manifest, path } or null
@@ -143,55 +235,15 @@ const detectHyperspeed = async () => {
   const skipNetwork = !!document.querySelector("[vibe-fouc], .vibe-fouc");
 
   try {
-    let pagePath = window.location.pathname;
-
-    // Normalize path: handle directory URLs and missing extensions
-    if (pagePath.endsWith("/")) {
-      // /compiled/ -> /compiled/index.html
-      pagePath = pagePath + "index.html";
-    } else if (!pagePath.includes(".")) {
-      // /compiled/mypage -> /compiled/mypage.html
-      const lastSlash = pagePath.lastIndexOf("/");
-      const lastSegment = pagePath.substring(lastSlash + 1);
-      if (lastSegment && !lastSegment.includes(".")) {
-        pagePath = pagePath + ".html";
-      }
-    }
-
-    const pathSegments = pagePath.split("/").filter((s) => s);
-
-    if (pathSegments.length === 0) return null;
-
-    // Extract file name and directory parts
-    // For /compiled/playground/test.html -> ['compiled', 'playground', 'test.html']
-    const fileName = pathSegments[pathSegments.length - 1];
-    const dirSegments = pathSegments.slice(0, -1); // All parts except filename
-
-    // Build possible manifest paths
-    const possiblePaths = [];
-
-    // Strategy 1: vibe-hyperspeed at the same level as parent directory
-    // /compiled/playground/test.html -> /compiled/vibe-hyperspeed/playground/test.html.manifest.js
-    if (dirSegments.length >= 1) {
-      const subPath = dirSegments.slice(1).join("/"); // Everything after first dir
-      const baseDir = "/" + dirSegments[0]; // First directory segment
-      possiblePaths.push(
-        `${baseDir}/vibe-hyperspeed/${subPath ? subPath + "/" : ""}${fileName}.manifest.js`,
-      );
-    }
-
-    // Strategy 2: vibe-hyperspeed at web root (original behavior)
-    // /compiled/playground/test.html -> /vibe-hyperspeed/compiled/playground/test.html.manifest.js
-    possiblePaths.push(`/vibe-hyperspeed${pagePath}.manifest.js`);
-
-    // Strategy 3: vibe-hyperspeed relative to immediate parent
-    // /playground/test.html -> /vibe-hyperspeed/playground/test.html.manifest.js
-    if (dirSegments.length > 0) {
-      const relativePath = dirSegments.join("/");
-      possiblePaths.push(
-        `/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`,
-      );
-    }
+    // window.__ROUTE__ is the page's route template (e.g. "/brawlers/:index"),
+    // injected by the compiler/dev server for dynamic pages. It lets us resolve
+    // the tokenized `$` manifest directly instead of probing literal 404s.
+    const possiblePaths = buildManifestCandidatePaths(
+      window.location.pathname,
+      typeof window !== "undefined" ? window.__ROUTE__ : null,
+    );
+
+    if (possiblePaths.length === 0) return null;
 
     if (!skipNetwork) {
       // Fully-runtime dynamic import. Hidden behind `new Function` so any

package/runtime/pre-compiled-manifest.test.mjs

@@ -0,0 +1,58 @@
+import assert from 'node:assert';
+
+// The module runs a top-level `await detectHyperspeed()` that touches the DOM,
+// so stub the globals before importing it. querySelector returns truthy →
+// skipNetwork → no import() probing during module init.
+globalThis.window = { location: { pathname: '/' }, __ROUTE__: undefined };
+globalThis.document = { querySelector: () => ({}) };
+
+const { buildManifestCandidatePaths } = await import('./pre-compiled-manifest.js');
+
+let passed = 0;
+const test = (name, fn) => {
+  fn();
+  passed++;
+  console.log(`  ok - ${name}`);
+};
+
+// Dynamic route: window.__ROUTE__ tells us the trailing segment is a param, so
+// the very first candidate must be the tokenized `$` manifest — no literal
+// `0.html.manifest.js` probes that are guaranteed to 404.
+test('dynamic route resolves the $ manifest first (no literal probing)', () => {
+  const paths = buildManifestCandidatePaths('/brawlers/0', '/brawlers/:index');
+  assert.strictEqual(paths[0], '/vibe-hyperspeed/brawlers/$.html.manifest.js');
+  assert.ok(
+    !paths.includes('/vibe-hyperspeed/brawlers/0.html.manifest.js') ||
+      paths.indexOf('/vibe-hyperspeed/brawlers/$.html.manifest.js') <
+        paths.indexOf('/vibe-hyperspeed/brawlers/0.html.manifest.js'),
+    'tokenized path must come before any literal path',
+  );
+});
+
+// Mid-path params tokenize by position, not just the filename.
+test('tokenizes only the param segments named by the route', () => {
+  const paths = buildManifestCandidatePaths(
+    '/_internal/characters/troll',
+    '/_internal/characters/:key',
+  );
+  assert.strictEqual(
+    paths[0],
+    '/vibe-hyperspeed/_internal/characters/$.html.manifest.js',
+  );
+});
+
+// Static page: no route hint, behaviour unchanged, no duplicate candidates.
+test('static top-level page resolves cleanly with no duplicates', () => {
+  const paths = buildManifestCandidatePaths('/armory', null);
+  assert.ok(paths.includes('/vibe-hyperspeed/armory.html.manifest.js'));
+  assert.strictEqual(paths.length, new Set(paths).size, 'no duplicate candidates');
+});
+
+// Subdirectory static page: strategies 2 and 3 collapse to the same URL — it
+// must be probed once, not twice.
+test('subdirectory page dedupes identical candidates', () => {
+  const paths = buildManifestCandidatePaths('/foo/bar', null);
+  assert.strictEqual(paths.length, new Set(paths).size, 'no duplicate candidates');
+});
+
+console.log(`\n${passed} passed`);