@ape-egg/vibe 2.1.4 → 2.1.7

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [2.1.7] - 2026-06-19
+
+### Fixed
+
+- **Compiled component-local state was lost when a conditional re-mounted** (`runtime/component.js`, `runtime/conditionals.js`) — on compiled pages each component's setup script is inlined as `type="vibe-module"`, but the boot-time pass only runs the scripts present at boot. A `<component>` carrying its own `component({...})` state inside a `<!-- if -->` rendered correctly the first time, then went blank after the conditional was toggled off and back on: the branch markup was restored but its `<!-- each _cN.x -->` read component-local state that had been released on unmount. `mountBranch` now runs the freshly mounted subtree's `vibe-module` scripts via a new `executeCompiledComponentScriptsIn(nodes)` — before nested iterations/conditionals render, so the re-registered state is in place when `<!-- each _cN.x -->` evaluates. The `_cN` id-counter advance and the script runner are factored out so the scoped and boot-time passes share one path. Repro: `e2e-runtime/conditional-component-remount.html`, `tests/e2e/components-in-conditionals.spec.js`.
+
+## [2.1.6] - 2026-06-19
+
+### Added
+
+- **Compiler 1.9.2 → 1.9.3 — constant-vs-dynamic state analysis before value-stamping** (`compiler/src/compiler/reassignment_analyzer.rs` (new), `value_stamper.rs`, `compile.rs`, `compiler/mod.rs`) — the compiler now proves which global `$` state keys are compile-time constants before baking them into pre-rendered HTML. A key is stamped only when its initial value is a primitive (string/number/bool/null) **and** nothing anywhere writes it (assignment, compound, `++`/`--`, `delete`, or a nested `$.key.x = …`); every other key stays a live `@[...]` binding for the runtime to fill. The rule is deliberately one-sided: a wrong "constant" bakes stale content into production HTML (a correctness bug), a wrong "dynamic" only forgoes the optimization (a brief FOUC), so every uncertain case resolves to dynamic. Whole-program escape signals discard the optimization entirely — aliasing `$` itself (`const x = $`), reflective writes (`Object.assign($, …)`, `Object.defineProperty`), or any source that fails to parse. The `$.key` / `$['key']` (global) vs `$[expr]` (component-state-by-id) split mirrors Vibe's own convention, so a computed component-state write is ignored rather than treated as an escape. Objects and arrays are never constant (a value alias like `const a = $.items; a.push(x)` can mutate them invisibly). Built on an SWC AST visitor with broad unit coverage (`reassignment_analyzer.rs` tests).
+
+### Fixed
+
+- **Compiler 1.9.2 → 1.9.3 — state initialized from imports could not be resolved** (`compiler/src/compiler/js_analyzer.rs`) — the state extractor now follows default-import chains across files (`resolve_import_value` / `resolve_export_from_file` / `visit_export_default_expr`), so a `$` key whose initial value comes from an imported module resolves to its real value for stamping instead of being treated as unknown. Also tags components whose state object is built at runtime.
+- **Compiler 1.9.2 → 1.9.3 — `>` inside a prop binding broke component / custom-element inlining** (`compiler/src/parser/html.rs`, `component_tagger.rs`) — the inliner's attribute-run pattern was `[^>]*`, so a comparison inside a quoted binding value (`flipped="@[selectedBrawlers.length >= maxBrawlers]"`) truncated the open tag at that inner `>`, mis-parsing every following attribute and mangling the element. The attribute run now mirrors a real HTML tokenizer (`ATTR_RUN`) — a tag ends only on an *unquoted* `>`, so `>`/`>=` inside any quoted value is part of the value. Repro: `inline_component_tolerates_gt_in_prop_binding`, `inline_custom_element_tolerates_gt_in_prop_binding`.
+
+## [2.1.5] - 2026-06-19
+
+### Fixed
+
+- **Route-aware manifest resolution for dynamic pages** (`runtime/pre-compiled-manifest.js`) — the candidate-path builder is extracted into an exported, unit-tested `buildManifestCandidatePaths(pathname, route)` and now reads `window.__ROUTE__` (the route template the compiler/dev server injects for dynamic pages, e.g. `/brawlers/:index`). When the route marks a segment dynamic with `:param`, the compiler has already collapsed that segment to `$` in the manifest path, so the runtime points straight at the tokenized manifest (`/vibe-hyperspeed/brawlers/$.html.manifest.js`) first instead of probing literal URLs (`/brawlers/0.html.manifest.js`) that are guaranteed to 404. Params can sit mid-path (`/a/:id/b`), and the candidate list is de-duplicated (subdirectory pages otherwise produced the same URL twice). Static pages with no route hint behave exactly as before. Tests: `runtime/pre-compiled-manifest.test.mjs`.
+- **Compiler 1.9.1 → 1.9.2 — component `<script>` source was HTML-escaped, dropping `component(stateVar)` components** (`compiler/src/compiler/component_tagger.rs`) — re-serializing a `<script>` element from its children loses the rawtext context, so JS operators were entity-escaped (`>` → `&gt;`, `&&` → `&amp;&amp;`). The mangled source then failed to parse, demoting the component to the regex fallback (which only matches `component({` object literals) and leaving a component called with a bare variable untagged. The script's text is now read directly. Adds AST-analyzer coverage for `component(stateVar)` resolution against a realistic script shape (imports, dynamic `import().then()`, `catch {}`, optional chaining).
+- **Compiler 1.9.1 → 1.9.2 — component-local `this.` was only resolved in simple text/attribute bindings** (`compiler/src/compiler/component_tagger.rs`) — build-time `this.` → component-id rewriting now also covers `if`/`each`/`else if` directive comments, nested binding paths (`@[this.x.y]`), multi-reference expressions, and `$.this.X` writes in event-handler bodies (`onclick="$.this.mode = 'edit'"`) — mirroring the runtime's `STATE_THIS_PROP_REGEX` pass. Without this, compiled (manifest-restored) pages — which can't fall back to a `data-vibe-component-id` ancestor lookup — shipped literal `this.`/`$.this.` that resolved to `undefined`. Loop aliases (`each _c0.items as it`) are left untouched.
+
 ## [2.1.4] - 2026-06-18
 
 ### Fixed

package/README.md

@@ -491,6 +491,54 @@ The compiler generates optimized batch functions for `<!-- each -->` loops, prov
 
 **Opt-out:** Set `iterationsAsIs: true` to use runtime rendering for all iterations.
 
+### Pre-rendered Global State (write state the way the compiler expects)
+
+To eliminate the flash of raw `@[...]` markers, the compiler **bakes** any global `$`
+value it can prove is constant straight into the pre-rendered HTML. `BETA v@[version]`
+ships as `BETA v0.1.5`. Everything else stays a live binding the runtime fills on
+hydration.
+
+A global key is baked **only** when both hold:
+
+- **It's a primitive** — `string` / `number` / `boolean` / `null`. Objects and arrays
+  are never baked (their contents can be mutated through a reference the compiler
+  can't follow), so an `@[config.theme]` binding always stays live.
+- **It's never reassigned** anywhere the compiler scans (every `.js` module, inline
+  `<script>`, and `on*` handler under `source`, minus `skipFiles`). Any `$.key = …`,
+  `$.key += …`, `$.key++`, `delete $.key`, or `$['key'] = …` marks it dynamic.
+
+This is why **how you write a mutation matters** — write global state through a
+**direct member assignment on `$`**:
+
+```js
+$.coins = gameState.coins;     // ✅ seen → `coins` stays a live binding
+```
+
+If you mutate global state by a path static analysis can't follow, the compiler won't
+see the write and may bake a stale initial value:
+
+```js
+const s = $; s.coins = 5;      // ⚠️ aliasing $ — disables baking for ALL keys (safe, but loses the optimization)
+applyState($, patch);          // ⚠️ if applyState does `arg.coins = …`, that write is INVISIBLE → `coins` may wrongly bake
+```
+
+Passing `$` as a read-only argument (`derive($, opts)`) is fine; only writing through
+the alias is the problem. Reach for `$.key = …` and the classifier stays correct.
+
+The baked value comes from your `vibe({ ... })` initial state, resolved statically
+(including default imports, e.g. `version: VERSION` → `version.js`'s `export default`).
+If the initial value is a runtime call (`settings: loadLocalStorage(...)`), it simply
+isn't baked — the binding stays live, which is harmless.
+
+**Iterations follow the same rule.** An `<!-- each -->` over a global/dynamic array is
+rendered **empty** in the compiled HTML (the raw `@[item.x]` template body is dropped,
+not painted), and the runtime restores it from the manifest once the array has data.
+Don't rely on a loop's template body existing in the DOM before hydration.
+
+**Still use `vibe-fouc`.** Baking removes raw markers for *constant* values, but
+session/runtime state (auth, server data, anything you reassign) can't be pre-rendered
+— keep the `vibe-fouc` guard so that state doesn't flash either.
+
 ### Output Structure
 
 Mirrors source structure:

package/compiler/src/Cargo.lock

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

package/compiler/src/Cargo.toml

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

package/compiler/src/compiler/compile.rs

@@ -8,6 +8,7 @@ use colored::Colorize;
 use regex::Regex;
 use glob::Pattern;
 use rayon::prelude::*;
+use serde_json::{Map, Value};
 
 use crate::config::Config;
 use crate::parser::HtmlParser;
@@ -116,6 +117,80 @@ pub fn should_skip_path(path: &Path, name: &str, patterns: &[String]) -> bool {
     false
 }
 
+/// Recursively gather JS sources that could write `$` state: every `.js` module
+/// (full text — also a candidate for the global `vibe()` call) plus, from each
+/// `.html` file, every inline `<script>` body and `on*` handler body. Skips the
+/// compiled output directory and anything `should_skip_path` excludes.
+fn collect_state_sources(
+    dir: &Path,
+    output_canon: Option<&Path>,
+    skip: &[String],
+    sources: &mut Vec<String>,
+    js_paths: &mut Vec<PathBuf>,
+) {
+    let entries = match fs::read_dir(dir) {
+        Ok(e) => e,
+        Err(_) => return,
+    };
+    for entry in entries.flatten() {
+        let path = entry.path();
+        let name = match path.file_name().and_then(|n| n.to_str()) {
+            Some(n) => n,
+            None => continue,
+        };
+        if should_skip_path(&path, name, skip) {
+            continue;
+        }
+        if path.is_dir() {
+            // Never descend into the compiled output — its JS is bundled/minified
+            // and would falsely trip the analysis.
+            if let (Some(oc), Some(pc)) = (output_canon, path.canonicalize().ok()) {
+                if pc.as_path() == oc {
+                    continue;
+                }
+            }
+            collect_state_sources(&path, output_canon, skip, sources, js_paths);
+        } else {
+            match path.extension().and_then(|e| e.to_str()) {
+                Some("js") => {
+                    if let Ok(code) = fs::read_to_string(&path) {
+                        sources.push(code);
+                        js_paths.push(path);
+                    }
+                }
+                Some("html") => {
+                    if let Ok(html) = fs::read_to_string(&path) {
+                        sources.extend(extract_inline_scripts(&html));
+                        sources.extend(extract_event_handlers(&html));
+                    }
+                }
+                _ => {}
+            }
+        }
+    }
+}
+
+/// Inner JS of every `<script>…</script>` block.
+fn extract_inline_scripts(html: &str) -> Vec<String> {
+    let re = Regex::new(r"(?is)<script\b[^>]*>(.*?)</script>").unwrap();
+    re.captures_iter(html)
+        .map(|c| c[1].to_string())
+        .filter(|s| !s.trim().is_empty())
+        .collect()
+}
+
+/// Bodies of `on*="…"` / `on*='…'` event-handler attributes. The attribute-name
+/// match is heuristic (it can catch a non-handler like `only="…"`), so each body
+/// is kept only if it parses as JS — genuine handlers parse, false positives drop.
+fn extract_event_handlers(html: &str) -> Vec<String> {
+    use crate::compiler::reassignment_analyzer::parses_as_js;
+    let re = Regex::new(r#"(?is)\son[a-z]+\s*=\s*(?:"([^"]*)"|'([^']*)')"#).unwrap();
+    re.captures_iter(html)
+        .filter_map(|c| c.get(1).or_else(|| c.get(2)).map(|m| m.as_str().to_string()))
+        .filter(|body| !body.trim().is_empty() && parses_as_js(body))
+        .collect()
+}
+
 /// Rename `src="{component_src}"` to `data-vibe-recursive-src="{component_src}"`
 /// on `<component>` / `<div class="component">` tags. Used during cache build
 /// to neutralize cyclic refs before they reach `inline_component_elements` —
@@ -791,6 +866,7 @@ impl Compiler {
         let start = Instant::now();
         let mut pages_processed = 0;
         let mut pages_skipped = 0;
+        let global_constants = self.compute_global_constants();
 
         for file_path in files {
             // Convert source path to output path
@@ -825,6 +901,7 @@ impl Compiler {
                 self.config.components_as_is,
                 &self.config.source,
                 self.config.root.as_deref(),
+                &global_constants,
             ) {
                 Ok(()) => {
                     pages_processed += 1;
@@ -858,6 +935,7 @@ impl Compiler {
         components_as_is: bool,
         source_root: &Path,
         manifest_root: Option<&str>,
+        global_constants: &Map<String, Value>,
     ) -> Result<(), String> {
         use crate::compiler::manifest_builder::ManifestBuilder;
         use crate::compiler::component_tagger::ComponentTagger;
@@ -909,7 +987,7 @@ impl Compiler {
         // - Iterations are pre-rendered with initial array data
         // The manifest (written above) preserves BOTH branches so the runtime can
         // restore them and switch between branches reactively.
-        let stamper = ValueStamper::new(&state, components_as_is)
+        let stamper = ValueStamper::with_constants(&state, components_as_is, global_constants)
             .map_err(|e| format!("Failed to create value stamper: {}", e))?;
         let stamped = stamper.stamp_html(html.to_string())
             .map_err(|e| format!("Failed to stamp HTML: {}", e))?;
@@ -920,6 +998,60 @@ impl Compiler {
         Ok(())
     }
 
+    /// Resolve the global `$` state keys that reassignment analysis proves are
+    /// compile-time constants, mapped to their resolved values — the only globals
+    /// safe to value-stamp into pre-rendered HTML. Scans every JS source under the
+    /// project source root (`.js` modules, inline `<script>` bodies, and `on*`
+    /// handler bodies), skipping the compiled output and the configured skips.
+    /// Returns an empty map on any doubt (see reassignment_analyzer soundness).
+    fn compute_global_constants(&self) -> Map<String, Value> {
+        use crate::compiler::js_analyzer::JsAnalyzer;
+        use crate::compiler::reassignment_analyzer::classify_constant_keys;
+
+        let root = &self.config.source;
+        let output_canon = self.config.output.canonicalize().ok();
+
+        let mut sources: Vec<String> = Vec::new();
+        let mut js_paths: Vec<PathBuf> = Vec::new();
+        collect_state_sources(
+            root,
+            output_canon.as_deref(),
+            &self.config.skip_files,
+            &mut sources,
+            &mut js_paths,
+        );
+
+        // Resolve the global vibe()/state() initial state. Partial resolution
+        // keeps statically-resolvable keys (e.g. `version: VERSION`) and drops
+        // runtime-only ones (`settings: loadLocalStorage(...)`), which is exactly
+        // the set we could ever stamp.
+        let mut global_state: Map<String, Value> = Map::new();
+        for path in &js_paths {
+            let code = match fs::read_to_string(path) {
+                Ok(c) => c,
+                Err(_) => continue,
+            };
+            if !(code.contains("vibe(") || code.contains("state(")) {
+                continue;
+            }
+            let mut analyzer = JsAnalyzer::new(root.clone());
+            if let Some(Value::Object(state)) = analyzer.extract_state(&code) {
+                for (key, value) in state {
+                    global_state.insert(key, value);
+                }
+            }
+        }
+        if global_state.is_empty() {
+            return Map::new();
+        }
+
+        let constant_keys = classify_constant_keys(&global_state, &sources);
+        global_state
+            .into_iter()
+            .filter(|(key, _)| constant_keys.contains(key))
+            .collect()
+    }
+
     /// Generate manifests (called separately from main.rs if needed)
     pub fn generate_manifests(&self) -> Result<ManifestStats, CompileError> {
 
@@ -941,6 +1073,9 @@ impl Compiler {
         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();
+        // Resolve which global state keys are constant once, then share across all
+        // pages (read-only; `&Map` is Sync so the parallel map can borrow it).
+        let global_constants = self.compute_global_constants();
 
         let results: Vec<_> = html_files
             .par_iter()
@@ -957,7 +1092,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, manifest_root.as_deref()) {
+                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(), &global_constants) {
                     Ok(()) => (true, None),
                     Err(e) => {
                         if verbose {

package/compiler/src/compiler/component_tagger.rs

@@ -8,8 +8,17 @@ 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 {
@@ -161,33 +170,50 @@ impl ComponentTagger {
                     }
                 }
 
-                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)));
                 }
             }
         }
@@ -345,9 +371,35 @@ mod tests {
         );
     }
 
+    #[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();