@ape-egg/vibe 2.0.0 → 2.0.5

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # Changelog
 
+## [2.0.5] - 2026-06-16
+
+### Fixed
+
+- **Name bindings routed through a component prop inside an iteration were silently dropped** (`runtime/iterate.js`, `runtime/component.js`) — `resolveIterationComponentProps` injects `@[window.__vibeIterProps._pN]` into a component's bindings, and prop substitution carries that accessor into the template's own bindings, including name-bindings (`<icon @[props.element]>`). HTML lowercases attribute names, so the camelCase global arrived at hydrate as `window.__vibeiterprops` and resolved to `undefined`, dropping the attribute. The iteration-prop registry global is now all-lowercase (`__vibeiterprops`) so it survives attribute-name normalization. Adds the `name-binding-prop` e2e fixture and spec.
+
+## [2.0.4] - 2026-06-12
+
+Companion-package and website release; no runtime changes.
+
+### Fixed
+
+- **Codie treated vibe name bindings as broken attributes** (`@ape-egg/codie`) — `cleanupBooleanAttrs` now recognizes `@[expr]` as an attribute name (so `<icon @[icon]=""></icon>` cleans up to `<icon @[icon]></icon>`), and the HTML highlighter tokenizes opening tags containing name-binding attributes instead of leaving them unhighlighted.
+- **Codie's editing textarea inherited host design-system styling** (`@ape-egg/codie`) — the textarea reset now also clears `box-shadow`, `border-radius` and `background`, so CSS libraries that style `textarea` globally (e.g. stylecheat's inset ring) can't bleed into the editor.
+
+### Changed
+
+- Website: the fantasy tutorial is replaced by the interactive **Try & learn** lessons (live Codie editor on every page), a **Roadmap** page is added, toast notifications land site-wide, dark mode is the default, and the compiler status is promoted from alpha to **beta**.
+
+## [2.0.3] - 2026-06-11
+
+Compiler parity with the 2.0.x runtime: all six findings from
+`get-compiler-up-to-date-with-vibe-runtime-2.0.0.md` are fixed and the doc is
+retired. Every former parity-gap opt-out in the e2e suite now runs dual-mode
+(644 e2e tests, both runtime and compiled). Compiler bumped 1.7.2 → 1.8.0.
+
+### Fixed
+
+- **Compiled component props only substituted exact `@[prop]` bindings** (`compiler/src/parser/html.rs`) — the inliner now mirrors the runtime's `renderPropsAndSlot` exactly: case-insensitive `@[propName]` replacement, prop identifiers inside larger `@[expr]` expressions and directive comments (`if` / `else if` / `each`), `$.propName` references in event-handler bodies, bare boolean attributes (→ `true`), JSON-quoted string literals, raw numerics. Binding props (`prop="@[path]"`) rewrite identifiers to the bound path, so prop reactivity flows in both directions on compiled pages (parent→child re-render, child→parent handler writes). One shared `substitute_props` serves all three inline sites; `src`/`class` are excluded from props.
+  - Tests: `component-props.spec.js` (all four suites), `components-in-iterations.spec.js` (all five suites) — now `testBothModes`
+
+- **Compiled iteration batch functions stamped boolean attribute bindings as strings** (`compiler/src/compiler/iteration_optimizer.rs`) — `open="@[flag]"` rendered `open="false"`, which is "open" to HTML and `[open]`-style CSS. The generator now classifies attribute bindings like the runtime batch path: DOM properties and value-style attributes keep `attr="${expr}"`, boolean-coerced attributes emit conditional presence (`${(expr) ? ' attr=""' : ''}`). Rust-side `VALUE_ATTRS`/`DOM_PROPERTIES` mirror `runtime/constants.js`; the template emitter was unified into one recursive pass that also escapes backticks and `${` in static text.
+  - Test: `directive-nesting.spec.js` → "Outer-scope reactivity inside `<!-- each -->`" — now `testBothModes`
+
+- **`@[$.unsafe(...)]` inside a compiled iteration crashed boot** (`compiler/src/compiler/iteration_optimizer.rs`) — the generated batch function interpolated `$.unsafe(...)` against a plain `$` (uncaught TypeError; `$.ready` never resolved), and a template-literal interpolation can never honor raw-HTML semantics anyway (`RawHtml.toString()` escapes by design). Templates containing `$.unsafe(` no longer get a batch function — those iterations render through clone+hydrate, the one place that implements `$.unsafe` (innerHTML + inert subtree).
+  - Test: `hydration-optouts.spec.js` → "Raw HTML rendering via $.unsafe()" — now `testBothModes`
+
+- **Manifest restoration templates dropped whitespace text nodes** (`compiler/src/compiler/manifest_builder.rs`) — the manifest's child keys are childNodes indices computed on the pre-stamp DOM, but restoration re-inserted templates with whitespace-only text nodes filtered out, shifting every later sibling's index. Iterations/conditionals after a restored region never got wired to their DOM markers, crashing boot with "Cannot read properties of undefined (reading '__vibeRendered')" on prop-driven compiled pages. Templates are now captured verbatim — an exact node-count round-trip.
+
+- **Restoration located directives by expression text with a subtree-wide scan** (`runtime/pre-compiled-manifest.js`) — two conditionals sharing an expression cross-matched: the outer's template landed inside the inner's markers (multi-root component scope broke this way). Directive regions are now located by their manifest key's childNodes index and processed in ascending order, so each restoration revalidates the next index. Same-expression siblings, conditionals inside iterations, and nested regions all disambiguate structurally; the `insideIteration`/`_vibeProcessed` scanning heuristics are gone.
+
+- **Compiled pages executed inlined component scripts as native page modules** (`compiler/src/parser/html.rs`, `runtime/component.js`, `runtime/index.js`) — native timing is wrong on every axis: scripts ran pre-boot so `const id = component(state); $[id]` captured the placeholder `$`, scripts with imports registered state after boot with nothing merging it into the live proxy, and `$.ready` raced async registration. The compiler now neuters src-inlined component scripts to `<script type="vibe-module">`; the runtime executes them at boot through the same injected-`component()` path fetched scripts use (shared `transformScriptContent`): live `$`, componentId claimed from the build-tagged wrapper, listener cleanup on re-execution, and async scripts gate `$.ready`. Scripts stay in the DOM (inert) so manifest indices keep matching.
+  - Tests: `component-state.spec.js` → "Async component() with child prop binding", "component() returns componentId", "Multi-root component scope" — now `testBothModes`
+
+- **`$.this.X` in event handlers double-rewrote on compiled pages** (`runtime/parse.js`) — runtime-fetched components arrive with `$.this.` already rewritten by component.js, but compiled pages reach parse with the authored form, and the bare-`this.X` pass alone produced `$.$['id'].X` (TypeError on click). parse now consumes `$.this.X` as one reference before the bare-`this.X` pass.
+
+- **`$` snapshot fallback leaked state reads to the live root** (`runtime/utils.js`) — `dollarFor`'s helper fallback served any key missing from a snapshot, so old/new diff evaluations both read the live value for a component state bucket registered mid-cycle and change detection saw "no change" (a `<!-- if this.x -->` in an async compiled component never mounted). The fallback now serves only the root's non-enumerable helper methods (`unsafe`, `on`, `reconcile`, …); a state key missing from a snapshot reads `undefined`, as the diff requires.
+
+- **Batch path rewrote a text binding on its own line as a name binding** (`runtime/iterate.js`) — `BATCH_NAME_BINDING_REGEX` matched any whitespace-bounded `@[expr]`, so a prettier-formatted `<option>` with `@[item]` on its own line rendered ` item=""` as its text. The name-binding pass now runs only over tag spans (quote-aware `mapTagSpans` — name bindings can only exist inside a tag), and binding-bearing text nodes are trimmed in the batch template to match the clone path's trimmed writes.
+  - Test: `batch-vs-clone-equivalence.spec.js` → dom-prop-selected region (and all other regions still byte-identical)
+
+### Changed
+
+- **Compiler 1.7.2 → 1.8.0** — prop-substitution parity, component-script neutering (`vibe-module`), verbatim restoration templates, boolean-attribute classification in batch functions, `$.unsafe` batch opt-out.
+
+---
+
+## [2.0.2] - 2026-06-11
+
+### Fixed
+
+- **Unmounting a conditional left nested-directive content behind** (`runtime/conditionals.js`) — `unmountBranch` removed only `activeInstance.nodes`, the branch's originally cloned top-level nodes. Content rendered by nested directives at the branch's top level — `<!-- each -->` rows, deeper `<!-- if -->` branches — is inserted between the *nested* directive's own comment markers after the branch mounts, so it never appears in that list and survived the unmount. Every off/on toggle of the outer conditional then accumulated another copy of the nested content. `unmountBranch` now sweeps the live range between the conditional's start/end comments (same pattern as iteration teardown), still collecting componentIds before detaching so orphaned component state is released.
+  - Test: `tests/e2e/each-inside-if-toggle.spec.js` (nested each rows + nested if content removed on toggle-off; repeated off/on toggles don't duplicate)
+
+- **`checked`/`selected` bindings stringified into the attribute** (`runtime/hydrate.js`, `runtime/iterate.js`) — DOM-property bindings mirrored every value into the attribute as a string, so `checked="@[on]"` with falsy state produced `checked="false"` — which is *checked* to HTML and `[checked]`-style CSS, and lied in `outerHTML` snapshots. `checked`/`selected` now keep the canonical boolean attribute form: present (empty) when truthy, removed when falsy; the property still follows the state. Only `value` keeps the stringified attribute mirror. Applied in both the clone path (`hydrate.js`) and the batch path (`applyDomPropertyWrites` in `iterate.js`) so runtime and batch-rendered iterations agree.
+  - Test: `tests/e2e/checked-attribute-sync.spec.js` (absent when falsy, empty-present when truthy, removed on truthy→falsy, property always synced)
+
+---
+
+## [2.0.1] - 2026-06-10
+
+### Fixed
+
+- **Loop-alias rewriter mangled object-literal keys in inline handlers** (`runtime/loop-scope.js`) — `rewriteHandlerAliases` rewrote every standalone alias identifier, including ones in object-key position, so `onclick="f({ pack: pack.name })"` inside `<!-- each soundPacks as pack -->` hydrated to `f({ $scope(this,'pack'): $scope(this,'pack').name })` — a syntax error, and the click silently did nothing. The rewriter now tracks bracket frames with a pending-ternary count per nesting level, which is what tells an object key's `:` apart from a ternary's: an alias followed by `:` inside `{ }` with no open ternary is a key and stays put, and a shorthand property (`{ pack }`) expands to `{ pack: $scope(this,'pack') }`. Ternary branches (`go ? pack : null`), computed keys (`{ [pack]: 1 }`), and array elements keep rewriting as values.
+  - Test: `tests/unit/loop-scope.test.js` (key position, shorthand expansion, computed keys, ternary colons inside object values, arrays, optional chaining/nullish coalescing)
+
+---
+
 ## [2.0.0] - 2026-06-06
 
 Version rolled to 2.0.0. **Still Beta — no behavior changes since 1.9.9.** The major bump consolidates the 1.9.x line (runtime reactive core, components, optional compiler, `$.unsafe` raw-HTML, plus the recent reactivity-correctness, iteration teardown-leak, and scoped-state performance fixes); it does not signal a stability promotion or any breaking change.

package/README.md

@@ -1,6 +1,6 @@
 # Vibe
 
-**Version 2.0.0 (Beta)** — A runtime-first reactive framework with optional compilation.
+**Version 2.0.2 (Beta)** — A runtime-first reactive framework with optional compilation.
 
 No virtual DOM. No build step required. Just modern JavaScript. When you need production optimizations, add the optional Rust-based compiler.
 

package/ROADMAP.md

@@ -278,6 +278,51 @@ This is acceptable technical debt since:
 
 ---
 
+## Proposed: `settled` Lifecycle Event (app quiescence)
+
+**Status**: Proposal
+**Priority**: Medium
+**Category**: Core Runtime / Lifecycle
+**Discovered**: 2026-06-16 (battle-brawlers: boss-unlock toast on the arena page)
+
+### Problem
+
+There is no event for *"the app has finished its initial boot/render churn and is now idle — run post-boot side-effects here."* The existing hooks don't cover it:
+
+- **`ready`** (`PHASE_READY`, removes `[vibe-fouc]` + dispatches `vibe:ready`) fires after the **first** render — but that first render is the *dataless/initial* state. Async data (e.g. a socket-loaded game state) arrives *after* `ready` and triggers a second, often **multi-second** data-driven re-render. So `ready` is "first paint," not "settled."
+- **`afterUpdate`** fires on **every** flush — it's a per-change signal, not a one-shot "we've quiesced" signal, and it fires *during* the churn.
+
+Consequently, state set imperatively right after boot is unreliable. Concrete case: pushing a toast (`$.notifications.push(...)`) when game state loads — the toast is added before the heavy first data render paints, the main thread is blocked through its 4s auto-dismiss window, and it's removed unseen. "The heavy boot churn eats it."
+
+### What it would accomplish
+
+A one-time, post-quiescence hook so consumers can reliably run boot-time side-effects: toasts/announcements, focus management, scroll restoration, analytics "app interactive", third-party widget init — anything that must happen *after* the initial render storm rather than during it.
+
+```js
+$.on('settled', () => notify.success('…'));   // lands; paints; lives its full duration
+```
+
+### Proposed shape
+
+`settled` fires **once per page load**, after: (a) Vibe's reactive flush queue has drained, and (b) the browser reports a free frame. Implementation sketch: when a flush completes with no further flush queued, schedule `requestIdleCallback(cb, { timeout })` (with a `setTimeout` fallback for Safari < 17); if still no flush was queued when it fires, dispatch `settled`.
+
+**Honest caveat — it's a heuristic, not a guarantee.** Perpetual tickers make true quiescence undecidable (battle-brawlers runs a 1s `setInterval` clock that flushes forever). This is the same class of fuzziness as Playwright's `networkidle` ("no requests for 500ms" — which Playwright now discourages as flaky). `settled` should mean "drained + one idle frame," documented as best-effort. Vibe *can* reliably know its own flush queue is empty; only external async (sockets/timers) is fuzzy, and the idle check bounds that.
+
+### Current workaround
+
+Hand-roll the idle wait at the call site with `requestIdleCallback`. See `webdev/webdev-game-stack/pages/the-arena.html` (boss-unlock toast): defer the toast to `requestIdleCallback({ timeout })` so it lands after the arena's heavy first render. Works, but every consumer re-implements it and must know it's needed.
+
+### Related (accurate precedents)
+
+- **Angular** — `ApplicationRef.isStable` (Observable) / `NgZone.onStable`: emits when the app has no pending micro/macro tasks. This is the genuine *app-level quiescence* analog to `settled`.
+- **Vue** — `nextTick()`: resolves after the current reactive flush → DOM updated. *Flush-level* (one flush), not full idle.
+- **Svelte** — `tick()`: resolves after pending state is applied to the DOM. Also flush-level.
+- **React** — no first-class app-settled signal; composed from `useEffect` + `requestIdleCallback`, or inferred via concurrent features (`useTransition` `isPending`, Suspense).
+
+**Not this:** `onMount` (Svelte) / `onMounted` (Vue) / `useEffect(fn, [])` (React) are **component-level "this component finished mounting"** hooks. They are *not* an app-wide quiescence signal and are not what `settled` proposes — don't model `settled` on them.
+
+---
+
 ## Future Proposals
 
 *This section reserved for additional feature proposals*

package/compiler/src/Cargo.lock

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

package/compiler/src/Cargo.toml

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

package/compiler/src/compiler/compile.rs

@@ -1587,24 +1587,99 @@ impl Compiler {
     }
 
     fn validate_html(&self, content: &str, path: &Path) -> Result<(), CompileError> {
-        // Check 1: Quote balance per line
-        let mut line_num = 1;
-        for line in content.lines() {
-            let quote_count = line.matches('"').count();
-            if quote_count % 2 != 0 {
-                return Err(CompileError::ValidationError {
-                    file: path.display().to_string(),
-                    line: line_num,
-                    message: "Unclosed quote".to_string(),
-                });
-            }
-            line_num += 1;
-        }
+        // Check 1: Unclosed attribute quotes
+        self.validate_quote_balance(content, path)?;
 
         // Check 2: Tag balance (unclosed elements break slot extraction)
         self.validate_tag_balance(content, path)
     }
 
+    /// Quotes only matter inside tags and attribute values may span lines;
+    /// comments and raw content (script, style, pre) are skipped entirely.
+    fn validate_quote_balance(&self, content: &str, path: &Path) -> Result<(), CompileError> {
+        const RAW_CONTENT: &[&str] = &["script", "style", "pre"];
+
+        let bytes = content.as_bytes();
+        let mut i = 0;
+        let mut line = 1;
+
+        while i < bytes.len() {
+            if bytes[i] == b'\n' {
+                line += 1;
+                i += 1;
+            } else if bytes[i..].starts_with(b"<!--") {
+                match find_bytes(bytes, b"-->", i + 4) {
+                    Some(end) => {
+                        line += count_newlines(&bytes[i..end + 3]);
+                        i = end + 3;
+                    }
+                    None => break,
+                }
+            } else if bytes[i] == b'<'
+                && i + 1 < bytes.len()
+                && (bytes[i + 1].is_ascii_alphabetic() || bytes[i + 1] == b'/' || bytes[i + 1] == b'!')
+            {
+                let is_closing = bytes[i + 1] == b'/';
+                let name_start = i + if is_closing { 2 } else { 1 };
+                let name_end = bytes[name_start..]
+                    .iter()
+                    .position(|b| !(b.is_ascii_alphanumeric() || *b == b'-'))
+                    .map_or(bytes.len(), |p| name_start + p);
+                let name = content[name_start..name_end].to_ascii_lowercase();
+                i = name_end;
+
+                let mut quote: Option<(u8, usize)> = None;
+                let mut self_closing = false;
+                while i < bytes.len() {
+                    let b = bytes[i];
+                    if b == b'\n' {
+                        line += 1;
+                    }
+                    match quote {
+                        Some((q, _)) if b == q => quote = None,
+                        Some(_) => {}
+                        None => match b {
+                            b'"' | b'\'' => quote = Some((b, line)),
+                            b'>' => {
+                                self_closing = bytes[i - 1] == b'/';
+                                break;
+                            }
+                            _ => {}
+                        },
+                    }
+                    i += 1;
+                }
+
+                if let Some((_, quote_line)) = quote {
+                    return Err(CompileError::ValidationError {
+                        file: path.display().to_string(),
+                        line: quote_line,
+                        message: "Unclosed quote".to_string(),
+                    });
+                }
+                if i >= bytes.len() {
+                    break;
+                }
+                i += 1;
+
+                if !is_closing && !self_closing && RAW_CONTENT.contains(&name.as_str()) {
+                    let close = format!("</{}", name);
+                    match find_bytes_ci(bytes, close.as_bytes(), i) {
+                        Some(pos) => {
+                            line += count_newlines(&bytes[i..pos]);
+                            i = pos;
+                        }
+                        None => break, // unterminated raw block — tag balance reports it
+                    }
+                }
+            } else {
+                i += 1;
+            }
+        }
+
+        Ok(())
+    }
+
     fn validate_tag_balance(&self, content: &str, path: &Path) -> Result<(), CompileError> {
         const VOID_ELEMENTS: &[&str] = &[
             "area", "base", "br", "col", "embed", "hr", "img", "input",
@@ -1892,3 +1967,15 @@ fn minify_html(html: &str) -> String {
 
     result.trim().to_string()
 }
+
+fn find_bytes(haystack: &[u8], needle: &[u8], from: usize) -> Option<usize> {
+    haystack[from..].windows(needle.len()).position(|w| w == needle).map(|p| p + from)
+}
+
+fn find_bytes_ci(haystack: &[u8], needle: &[u8], from: usize) -> Option<usize> {
+    haystack[from..].windows(needle.len()).position(|w| w.eq_ignore_ascii_case(needle)).map(|p| p + from)
+}
+
+fn count_newlines(bytes: &[u8]) -> usize {
+    bytes.iter().filter(|&&b| b == b'\n').count()
+}

package/compiler/src/compiler/iteration_optimizer.rs

@@ -60,6 +60,16 @@ fn extract_and_compile_iterations(html: &str) -> HashMap<String, CompiledIterati
                 continue;
             }
 
+            // Raw-HTML bindings can't ride a template literal: a batch function
+            // interpolates RawHtml via toString(), which escapes. Skip the batch
+            // function so the runtime renders these rows through clone+hydrate —
+            // the one place that implements $.unsafe semantics (innerHTML +
+            // inert subtree).
+            if template_html.contains("$.unsafe(") {
+                search_start = end_after;
+                continue;
+            }
+
             // Generate hash for this template
             let hash = generate_template_hash(template_html);
 
@@ -113,6 +123,54 @@ fn generate_template_hash(template: &str) -> String {
     format!("iter_{:x}", hash)
 }
 
+/// DOM element properties — set on the element, kept as value attributes in
+/// batch output. Mirrors DOM_PROPERTIES in runtime/constants.js.
+const DOM_PROPERTIES: &[&str] = &["value", "checked", "selected"];
+
+/// Attributes that keep their string value verbatim (never boolean-coerced).
+/// Mirrors VALUE_ATTRS in runtime/constants.js — the two lists must stay in
+/// lockstep or batch and clone paths render different attributes.
+const VALUE_ATTRS: &[&str] = &[
+    "class", "style", "id", "title", "lang", "dir", "tabindex", "accesskey",
+    "slot", "part", "is", "nonce", "popover", "anchor",
+    "contenteditable", "draggable", "spellcheck", "translate",
+    "autocapitalize", "inputmode", "enterkeyhint", "virtualkeyboardpolicy",
+    "href", "src", "action", "cite", "data", "poster", "srcset",
+    "imagesrcset", "formaction", "ping", "usemap", "manifest", "codebase",
+    "name", "type", "value", "placeholder", "pattern", "min", "max", "step",
+    "minlength", "maxlength", "size", "accept", "autocomplete", "list",
+    "form", "formmethod", "formtarget", "formenctype", "wrap", "method",
+    "enctype", "for", "dirname",
+    "alt", "label", "summary", "abbr",
+    "width", "height", "cols", "rows", "span", "rowspan", "colspan",
+    "low", "high", "optimum",
+    "target", "rel", "hreflang", "download", "as", "media", "charset",
+    "crossorigin", "integrity", "loading", "decoding", "fetchpriority",
+    "referrerpolicy", "blocking", "imagesizes", "sizes",
+    "preload", "kind", "srclang",
+    "content", "http-equiv",
+    "sandbox", "allow", "srcdoc", "credentialless",
+    "headers", "scope",
+    "datetime",
+    "coords", "shape",
+];
+
+/// Whether an attribute keeps its string value (vs boolean coercion).
+/// Mirrors isValueStyleAttr in runtime/iterate.js.
+fn is_value_style_attr(name: &str) -> bool {
+    VALUE_ATTRS.contains(&name)
+        || name.starts_with("data-")
+        || name.starts_with("aria-")
+        || name.starts_with("on")
+}
+
+/// Escape a static text chunk for a JS template-literal context.
+fn escape_tpl_text(text: &str) -> String {
+    text.replace('\\', "\\\\")
+        .replace('`', "\\`")
+        .replace("${", "\\${")
+}
+
 /// Compile template HTML to a batch function string
 /// Supports nested <!-- each --> blocks
 fn compile_template_to_batch_fn(
@@ -120,134 +178,120 @@ fn compile_template_to_batch_fn(
     item_alias: &str,
     index_alias: &str,
 ) -> String {
-    // Process nested iterations first
-    let processed_template = process_nested_iterations(template);
-
-    // Replace @[expr] with ${expr}
-    let binding_re = Regex::new(r"@\[([^\]]+)\]").unwrap();
-    let with_bindings = binding_re.replace_all(&processed_template, |caps: &regex::Captures| {
-        format!("${{{}}}", &caps[1])
-    });
-
-    // Fix boolean attributes: remove ="" from attributes to match CSS selectors
-    // Converts: <div attr=""> to <div attr>
+    // Normalize static boolean attributes: <div attr=""> → <div attr>
+    // (matches CSS attribute selectors). Runs on raw template text, before
+    // emission — emitted JS below also contains attr="" inside string
+    // literals, which must not be touched.
     let boolean_attr_re = Regex::new(r#"(\w+)="""#).unwrap();
-    let with_boolean_attrs = boolean_attr_re.replace_all(&with_bindings, "$1");
+    let cleaned = boolean_attr_re.replace_all(template, "$1");
 
-    // Escape backslashes only (backticks are fine in JSON strings)
-    let escaped = with_boolean_attrs
-        .replace('\\', "\\\\");
+    let body = emit_template_literal(&cleaned);
 
-    // Generate batch function
     format!(
-        r#"(arr, $) => {{ let html = ''; const len = arr.length; for (let {index} = 0; {index} < len; {index}++) {{ const {item} = arr[{index}]; html += `{template}`; }} return html; }}"#,
+        r#"(arr, $) => {{ let html = ''; const len = arr.length; for (let {index} = 0; {index} < len; {index}++) {{ const {item} = arr[{index}]; html += `{body}`; }} return html; }}"#,
         index = index_alias,
         item = item_alias,
-        template = escaped
+        body = body
     )
 }
 
-/// Process nested <!-- each --> blocks recursively
-/// Replaces nested iterations with inline loop code
-fn process_nested_iterations(template: &str) -> String {
+/// Emit the body of a JS template literal for a template chunk:
+///   - static text escaped for template-literal context
+///   - attribute pure bindings classified like hydrate.js / compileBatchFn:
+///     DOM properties and value-style attributes keep `attr="${expr}"`,
+///     boolean-coerced attributes become `${(expr) ? ' attr=""' : ''}` so the
+///     attribute is ABSENT when falsy and present-empty when truthy
+///   - remaining @[expr] bindings (text content, partial attribute values)
+///     become `${expr}` interpolations
+///   - nested <!-- each --> blocks become inline IIFE loops, recursively
+///
+/// Anything the runtime clone+hydrate path renders, this output has to render
+/// identically — it is the compiled twin of compileBatchFn in runtime/iterate.js.
+fn emit_template_literal(template: &str) -> String {
     let each_re = Regex::new(r"<!--\s*each\s+([^\s]+)\s+as\s+([^\s,]+)(?:\s*,\s*([^\s]+))?\s*-->").unwrap();
     let end_re = Regex::new(r"<!--\s*/each\s*-->").unwrap();
-
-    let mut result = template.to_string();
-    let mut replacements = Vec::new();
-
-    // Find all nested iterations
-    let mut search_start = 0;
-    while let Some(start_match) = each_re.find_at(&result, search_start) {
-        let captures = each_re.captures(&result[start_match.start()..]).unwrap();
-        let array_path = captures.get(1).unwrap().as_str();
-        let item_alias = captures.get(2).unwrap().as_str();
-        let index_alias = captures.get(3).map(|m| m.as_str()).unwrap_or("index");
-
-        let template_start = start_match.end();
-
-        // Find matching <!-- /each --> using depth counting
-        if let Some((end_pos, _)) = find_matching_each_end(&result, template_start) {
-            let inner_template = &result[template_start..end_pos];
-
-            // Recursively process inner template
-            let processed_inner = process_nested_iterations(inner_template);
-
-            // For nested iterations, convert to string concatenation
-            // Uses JSON string escaping which is valid JavaScript
-            let inner_concat_code = convert_to_string_concat(&processed_inner, item_alias, index_alias, array_path);
-
-            let nested_code = format!("${{(() => {{ let inner = ''; const len_{idx} = {arr}.length; for (let {idx} = 0; {idx} < len_{idx}; {idx}++) {{ const {item} = {arr}[{idx}]; {code} }} return inner; }})()}}",
-                idx = index_alias,
-                arr = array_path,
-                item = item_alias,
-                code = inner_concat_code
-            );
-
-            // Store replacement (from start to end including comments)
-            let end_match = end_re.find_at(&result, end_pos).unwrap();
-            replacements.push((start_match.start(), end_match.end(), nested_code));
-
-            search_start = end_match.end();
-        } else {
-            break;
-        }
-    }
-
-    // Apply replacements in reverse order to maintain positions
-    for (start, end, replacement) in replacements.iter().rev() {
-        result.replace_range(*start..*end, replacement);
-    }
-
-    result
-}
-
-/// Convert template to string concatenation code using template literals
-/// Parses @[expr] and converts to: inner += `text${expr}more text`;
-/// Template literals properly handle newlines without escaping
-/// NOTE: Backslashes and ${ need escaping, but backticks don't (they'll be in JSON)
-fn convert_to_string_concat(template: &str, _item_alias: &str, _index_alias: &str, _array_path: &str) -> String {
+    let attr_binding_re = Regex::new(r#"(\s)([\w-]+)="@\[([^\]]+)\]""#).unwrap();
     let binding_re = Regex::new(r"@\[([^\]]+)\]").unwrap();
 
-    // Build template literal with ${} expressions
-    let mut result = String::from("inner += `");
-    let mut last_end = 0;
-
-    for cap in binding_re.captures_iter(template) {
-        let match_start = cap.get(0).unwrap().start();
-        let match_end = cap.get(0).unwrap().end();
-        let expr = &cap[1];
-
-        // Add text before this binding
-        if match_start > last_end {
-            let text = &template[last_end..match_start];
-            // For template literals: only escape backslashes and ${ sequences
-            // Don't escape backticks - they're fine in JSON and we want them as-is
-            let escaped = text
-                .replace('\\', "\\\\")   // Escape backslashes
-                .replace("${", "\\${");  // Escape template literal expression markers
-            result.push_str(&escaped);
+    let mut out = String::new();
+    let mut pos = 0;
+
+    while pos < template.len() {
+        let next_each = each_re.find_at(template, pos);
+        let next_attr = attr_binding_re.find_at(template, pos);
+        let next_binding = binding_re.find_at(template, pos);
+
+        // Earliest match wins; attr-binding outranks plain binding at the same
+        // region (the plain regex would match inside the attr form).
+        let candidates = [
+            next_each.map(|m| (m.start(), 0u8)),
+            next_attr.map(|m| (m.start(), 1u8)),
+            next_binding.map(|m| (m.start(), 2u8)),
+        ];
+        let Some(&(start, kind)) = candidates
+            .iter()
+            .flatten()
+            .min_by_key(|(s, k)| (*s, *k))
+        else {
+            out.push_str(&escape_tpl_text(&template[pos..]));
+            break;
+        };
+
+        out.push_str(&escape_tpl_text(&template[pos..start]));
+
+        match kind {
+            0 => {
+                // Nested <!-- each --> → inline IIFE loop
+                let m = next_each.unwrap();
+                let caps = each_re.captures(&template[m.start()..]).unwrap();
+                let arr = caps.get(1).unwrap().as_str();
+                let item = caps.get(2).unwrap().as_str();
+                let idx = caps.get(3).map(|c| c.as_str()).unwrap_or("index");
+
+                if let Some((end_pos, _)) = find_matching_each_end(template, m.end()) {
+                    let inner = emit_template_literal(&template[m.end()..end_pos]);
+                    out.push_str(&format!(
+                        "${{(() => {{ let inner = ''; const len_{idx} = {arr}.length; for (let {idx} = 0; {idx} < len_{idx}; {idx}++) {{ const {item} = {arr}[{idx}]; inner += `{inner_body}`; }} return inner; }})()}}",
+                        idx = idx,
+                        arr = arr,
+                        item = item,
+                        inner_body = inner
+                    ));
+                    let end_match = end_re.find_at(template, end_pos).unwrap();
+                    pos = end_match.end();
+                } else {
+                    // Unbalanced each — emit as text and move on
+                    out.push_str(&escape_tpl_text(&template[m.start()..m.end()]));
+                    pos = m.end();
+                }
+            }
+            1 => {
+                // Attribute pure binding: attr="@[expr]"
+                let m = next_attr.unwrap();
+                let caps = attr_binding_re.captures(&template[m.start()..]).unwrap();
+                let ws = caps.get(1).unwrap().as_str();
+                let name = caps.get(2).unwrap().as_str();
+                let expr = caps.get(3).unwrap().as_str();
+                let name_lc = name.to_lowercase();
+
+                if DOM_PROPERTIES.contains(&name_lc.as_str()) || is_value_style_attr(&name_lc) {
+                    out.push_str(&format!("{ws}{name}=\"${{{expr}}}\""));
+                } else {
+                    out.push_str(&format!("${{({expr}) ? ' {name}=\"\"' : ''}}"));
+                }
+                pos = m.end();
+            }
+            _ => {
+                // Plain binding: text content or partial attribute value
+                let m = next_binding.unwrap();
+                let caps = binding_re.captures(&template[m.start()..]).unwrap();
+                out.push_str(&format!("${{{}}}", caps.get(1).unwrap().as_str()));
+                pos = m.end();
+            }
         }
-
-        // Add expression
-        result.push_str("${");
-        result.push_str(expr);
-        result.push_str("}");
-
-        last_end = match_end;
-    }
-
-    // Add remaining text
-    if last_end < template.len() {
-        let text = &template[last_end..];
-        let escaped = text
-            .replace('\\', "\\\\")
-            .replace("${", "\\${");
-        result.push_str(&escaped);
     }
 
-    result.push_str("`;");
-    result
+    out
 }
 
 /// Find matching <!-- /each --> comment using depth counting
@@ -323,6 +367,38 @@ mod tests {
         assert_eq!(compiled.index_alias, "idx");
     }
 
+    #[test]
+    fn test_boolean_attr_binding_emits_conditional_presence() {
+        let html = r#"
+            <!-- each items as item -->
+            <attr-target open="@[flag]" href="@[item.url]" value="@[item.v]"></attr-target>
+            <!-- /each -->
+        "#;
+
+        let opts = build_iteration_optimizations(html);
+        let iterations = &opts.unwrap().iterations;
+        let (_, compiled) = iterations.iter().next().unwrap();
+
+        // Boolean-coerced attribute: absent when falsy, present-empty when truthy
+        assert!(compiled.batch_fn.contains(r#"${(flag) ? ' open=""' : ''}"#));
+        // Value-style attribute keeps its string value
+        assert!(compiled.batch_fn.contains(r#"href="${item.url}""#));
+        // DOM property keeps its value form
+        assert!(compiled.batch_fn.contains(r#"value="${item.v}""#));
+    }
+
+    #[test]
+    fn test_unsafe_template_skips_batch_fn() {
+        let html = r#"
+            <!-- each rows as row -->
+            <li>@[$.unsafe(row.markup)]</li>
+            <!-- /each -->
+        "#;
+
+        // RawHtml semantics can't ride a template literal — no batch function
+        assert!(build_iteration_optimizations(html).is_none());
+    }
+
     #[test]
     fn test_nested_iteration_compiled() {
         let html = r#"