@ape-egg/vibe 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # Changelog
 
+## [1.2.0] - 2026-02-03
+
+### Added
+
+- **Component state isolation**: Components now have their own isolated state using `<script type="component">` blocks
+  - Each component gets a unique ID (`_cTIMESTAMP_RANDOM`) automatically generated and stored in `data-vibe-component-id` attribute
+  - Component state lives at `$[componentId].property` in the global state object
+  - Variable declarations (`let count = 0`) are automatically transformed to property assignments (`this.count = 0`)
+  - Clean separation between global state and component-specific state
+  - Example component (subject to change!):
+    ```html
+    <script type="component">
+      let count = 0;
+      let increment = () => { this.count++; };
+    </script>
+    <button onclick="this.increment()">Clicked @[this.count] times</button>
+    ```
+- **`this.property` syntax**: Reference component-scoped state from anywhere inside a component
+  - Works in bindings: `@[this.count]`
+  - Works in attributes: `value="@[this.inputValue]"`
+  - Works in event handlers: `onclick="this.increment()"`
+  - Works in name bindings: `@[this.iconName]`
+  - Works in conditionals: `<!-- if this.isVisible -->`
+  - Works in iterations: `<!-- each this.items as item -->`
+  - Runtime automatically resolves `this.property` → `$['componentId'].property`
+- **Component script execution**: `<script type="component">` blocks execute in their own scope
+  - Scripts run when component HTML is fetched (runtime `<component>` resolution)
+  - State is registered in global `$` object under component ID
+  - All siblings after the script tag inherit the component ID via `data-vibe-component-id` attribute
+  - Multiple component scripts in same HTML create separate component instances with unique IDs
+- **Props and slots integration**: Component state works seamlessly with existing `<component>` features
+  - Props can set component state: `<component src="/card.html" theme="@[userTheme]">`
+  - Props work with `this.` references: `@[this.theme]` inside card.html
+  - Slots work inside component-scoped HTML
+  - Components can be nested with isolated state at each level
+
+### Changed
+
+- **Component ID tagging**: DOM elements are now tagged with `data-vibe-component-id` during component processing (previously only scripts had this attribute)
+  - All siblings after a `<script type="component">` get tagged with the same component ID
+  - Tagging stops when hitting another component script or end of HTML
+  - Enables `this.property` resolution in any context (bindings, events, conditionals, iterations)
+- **Event handler rewriting**: Event handlers with `this.property` are now rewritten at parse time
+  - `onclick="this.increment()"` → `onclick="$['_c123_abc'].increment()"`
+  - DOM properties (like `this.value`, `this.checked`) are preserved and not rewritten
+  - Prevents conflicts between component state access and native DOM properties
+
+### Technical Details
+
+- **Component state lifecycle**:
+  1. `<component src="/path.html">` fetches HTML
+  2. HTML is parsed in temporary container
+  3. `<script type="component">` blocks are found and executed
+  4. Each script generates unique component ID
+  5. Script and following siblings are tagged with `data-vibe-component-id`
+  6. Component state is registered at `$[componentId]`
+  7. Props are applied (with `this.` reference rewriting)
+  8. Slots are replaced
+  9. Transformed HTML replaces `<component>` element
+  10. MutationObserver triggers reactive hydration with component context
+- **`this.property` resolution**: Helper function `resolveThisPath()` in utils.js walks up DOM tree to find nearest `data-vibe-component-id`, then rewrites path from `this.property` → `componentId.property`
+- **Expression evaluation**: `evalInScope()` in utils.js handles both global (`$.property`) and component-scoped (`$['componentId'].property`) state access, with case-insensitive fallback for HTML-lowercased attribute names
+
+---
+
+## [1.1.3] - 2026-02-02
+
+### Added
+
+- **MutationObserver performance optimization**: Fast filter with short-circuit evaluation
+  - New `shouldProcessNode()` function checks for Vibe syntax before expensive processing
+  - Short-circuits on first match: most Vibe nodes contain `@[`, so check exits immediately
+  - Filters out third-party framework mutations (React, Vue, etc.) with cheap string operations
+  - Only walks DOM tree for nodes that actually contain Vibe syntax (`@[`, `<!-- each`, `<!-- if`, `<component>`)
+  - Enables efficient coexistence with other frameworks on the same page
+
+---
+
 ## [1.1.2] - 2026-02-01
 
 ### Fixed

package/README.md

@@ -18,20 +18,18 @@ The core reactive runtime. Works directly in the browser without any build tools
 
 ```html
 <html>
-<head>
-  <link rel="stylesheet" href="@ape-egg/vibe/vibe.css">
-  <script type="module">
-    import state from "@ape-egg/vibe";
-    // Attaches to element with attribute "vibe" by default
-    window.$ = state({ name: "World", count: 0 });
-  </script>
-</head>
-<body vibe>
-
-<h1>Hello, @[name]!</h1>
-<button onclick="$.count++">Clicked @[count] times</button>
-
-</body>
+  <head>
+    <link rel="stylesheet" href="./node_modules/@ape-egg/vibe/vibe.css" />
+    <script type="module">
+      import state from './node_modules/@ape-egg/vibe/runtime/index.js';
+      // Attaches to element with attribute "vibe" by default
+      window.$ = state({ name: 'World', count: 0 });
+    </script>
+  </head>
+  <body vibe>
+    <h1>Hello, @[name]!</h1>
+    <button onclick="$.count++">Clicked @[count] times</button>
+  </body>
 </html>
 ```
 
@@ -49,12 +47,14 @@ The CSS targets `[vibe]` and hides it until hydration completes. Once Vibe finis
 Vibe supports bindings in three positions:
 
 **Text content** — Inside element tags:
+
 ```html
 <div>@[firstName] @[lastName]</div>
 <h1>Hello, @[name]!</h1>
 ```
 
 **Attribute values** — In attribute value position:
+
 ```html
 <input value="@[username]" />
 <div class="@[theme]" style="color: @[color]"></div>
@@ -62,15 +62,19 @@ Vibe supports bindings in three positions:
 ```
 
 **Attribute names** — In attribute name position (useful for dynamic attributes):
+
 ```html
 <icon @[iconName]></icon>
 <button @[state]>Click me</button>
 ```
 
 **CSS** — Bindings also work in style tags:
+
 ```html
 <style>
-  .box { background: @[themeColor]; }
+  .box {
+    background: @[themeColor];
+  }
 </style>
 ```
 
@@ -78,7 +82,7 @@ Vibe supports bindings in three positions:
 
 ```html
 <!-- each items as item, index -->
-  <li>@[index]: @[item]</li>
+<li>@[index]: @[item]</li>
 <!-- /each -->
 ```
 
@@ -86,9 +90,9 @@ Nested iteration with dot paths:
 
 ```html
 <!-- each categories as category -->
-  <!-- each category.items as item -->
-    <span>@[item.name]</span>
-  <!-- /each -->
+<!-- each category.items as item -->
+<span>@[item.name]</span>
+<!-- /each -->
 <!-- /each -->
 ```
 
@@ -96,9 +100,9 @@ Nested iteration with dot paths:
 
 ```html
 <!-- if user.isAdmin -->
-  <admin-badge>Admin</admin-badge>
+<admin-badge>Admin</admin-badge>
 <!-- else -->
-  <span>User</span>
+<span>User</span>
 <!-- /if -->
 ```
 
@@ -126,9 +130,9 @@ Vibe uses recursive proxies to detect changes at any nesting level:
 
 ```javascript
 // All of these trigger reactive updates:
-$.user.name = "Alice";
+$.user.name = 'Alice';
 $.todos[2].completed = true;
-$.config.theme.colors.primary = "#007bff";
+$.config.theme.colors.primary = '#007bff';
 ```
 
 No need for immutable update patterns or spread operators. Just mutate and Vibe handles the rest.
@@ -211,6 +215,7 @@ Add to your `package.json`:
 ```
 
 **Defaults** (when no config):
+
 - `source`: `./`
 - `output`: `./compiled`
 - `components`: `<source>/components`
@@ -238,6 +243,7 @@ By default, the compiler creates deployable output by installing production depe
 3. Removes `package.json` and lockfile from output (cleanup)
 
 This ensures:
+
 - Compiled output only includes runtime dependencies (from `dependencies`, not `devDependencies`)
 - Local `node_modules` is never modified
 - Faster than copying (no intermediate copy step)
@@ -294,6 +300,7 @@ cp target/release/vibe-compiler ../native/vibe-compiler-darwin-arm64
 ```
 
 Supported platforms:
+
 - `vibe-compiler-darwin-arm64` (macOS Apple Silicon) ✅ Included
 - `vibe-compiler-darwin-x64` (macOS Intel)
 - `vibe-compiler-linux-x64`

package/index.js

@@ -1,2 +1,96 @@
-// Re-export from runtime for backwards compatibility
-export { default } from './runtime/index.js';
+// Universal entry point for Vibe
+// Usage: <script src="vibe/index.js">$.count = 0;</script>  (global)
+//        <script src="vibe/index.js">let count = 0;</script>  (component)
+
+(async () => {
+  const script = document.currentScript;
+  const scriptContent = script?.textContent?.trim() || '';
+
+  // Determine if this is component state (has let/const/var) or global state (uses $)
+  const hasDeclarations = /\b(let|const|var)\s+\w+/.test(scriptContent);
+  const isComponent = hasDeclarations;
+
+  // Boot Vibe if not already initialized or booting
+  if (!window.__vibeInitialized && !window.__vibeBooting) {
+    window.__vibeBooting = true;
+
+    // Process ALL scripts on the page BEFORE booting
+    const { generateComponentId, executeComponentScript } = await import('./runtime/component-state.js');
+    const allComponentScripts = document.querySelectorAll('script[src*="index.js"]');
+    const initialState = {};
+    const globalStateScripts = [];
+
+    allComponentScripts.forEach((s) => {
+      const content = s.textContent?.trim() || '';
+      if (!content) return;
+
+      const hasDecl = /\b(let|const|var)\s+\w+/.test(content);
+      if (hasDecl) {
+        // This is a component script
+        const componentId = generateComponentId();
+
+        // Tag script and siblings
+        s.setAttribute('data-vibe-component-id', componentId);
+        s.setAttribute('type', 'component');
+
+        let sibling = s.nextElementSibling;
+        while (sibling) {
+          if (sibling.tagName === 'SCRIPT' && /\b(let|const|var)\s+\w+/.test(sibling.textContent || '')) {
+            break;
+          }
+          sibling.setAttribute('data-vibe-component-id', componentId);
+          sibling = sibling.nextElementSibling;
+        }
+
+        // Execute component script to get state
+        const componentState = executeComponentScript(content);
+        initialState[componentId] = componentState;
+      } else {
+        // This is a global state script - save for later
+        globalStateScripts.push(content);
+      }
+    });
+
+    // Execute global state scripts into initialState BEFORE booting
+    // This ensures global state is available during initial parse/hydrate
+    if (globalStateScripts.length > 0) {
+      const captured = {};
+      const fakeState = new Proxy(captured, {
+        set(target, key, value) {
+          target[key] = value;
+          return true;
+        }
+      });
+
+      globalStateScripts.forEach(code => {
+        const $ = fakeState;
+        eval(code);
+      });
+
+      // Merge global state into initialState
+      Object.assign(initialState, captured);
+    }
+
+    // Boot Vibe with both component and global states
+    const { default: main } = await import('./runtime/index.js');
+    window.$ = main(initialState, 'vibe', {});
+    window.__vibeInitialized = true;
+    window.__vibeBooting = false;
+  } else {
+    // Vibe already booted - just execute global code if any
+    if (window.__vibeBooting) {
+      await new Promise(resolve => {
+        const check = setInterval(() => {
+          if (window.__vibeInitialized) {
+            clearInterval(check);
+            resolve();
+          }
+        }, 10);
+      });
+    }
+
+    if (!isComponent && scriptContent) {
+      eval(scriptContent);
+    }
+  }
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",
@@ -15,6 +15,7 @@
   },
   "files": [
     "index.js",
+    "vibe.css",
     "runtime/",
     "compiler/bin/",
     "compiler/native/",

package/runtime/affected.js

@@ -1,10 +1,10 @@
 import { resolvePath, deepEqual } from './iteration-utils.js';
 import { extractDependencies } from './conditionals.js';
 import { BINDING_REGEX } from './constants.js';
-import { evalInScope } from './utils.js';
+import { evalInScope, resolveThisPath } from './utils.js';
 
 // Evaluate conditional expression
-const evaluateCondition = (expression, state) => !!evalInScope(expression, state);
+const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
 
 // Helper function to check if a match references a specific key
 const matchesKey = (matchStr, key) => matchStr === key || matchStr.startsWith(key + '.');
@@ -12,8 +12,11 @@ const matchesKey = (matchStr, key) => matchStr === key || matchStr.startsWith(ke
 const recursive = (tree, state, newState, affected, scopedStateForHydration = null) => {
   // Handle iteration nodes specially
   if (tree.type === 'iteration') {
-    const oldArray = resolvePath(state, tree.meta.arrayPath);
-    const newArray = resolvePath(newState, tree.meta.arrayPath);
+    // Handle this.property for component-scoped arrays
+    const arrayPath = resolveThisPath(tree.meta.arrayPath, tree.meta.startComment?.parentElement);
+
+    const oldArray = resolvePath(state, arrayPath);
+    const newArray = resolvePath(newState, arrayPath);
 
     // Fast path: reference comparison (arrays are typically replaced, not mutated)
     // This avoids expensive O(n) deepEqual for large arrays
@@ -34,7 +37,8 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
           // Use the instance's scoped state (includes item, index, etc.)
           // Merge newState into scopedState to get updated global values
           const mergedNewState = { ...instance.scopedState, ...newState };
-          recursive(instance.tree, instance.scopedState, mergedNewState, affected, mergedNewState);
+          // Pass the Proxy as scopedState so evalInScope can access iteration variables
+          recursive(instance.tree, instance.scopedState, mergedNewState, affected, instance.scopedState);
         }
       }
     }
@@ -44,8 +48,8 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
 
   // Handle conditional nodes specially
   if (tree.type === 'conditional') {
-    const oldValue = evaluateCondition(tree.meta.expression, state);
-    const newValue = evaluateCondition(tree.meta.expression, newState);
+    const oldValue = evaluateCondition(tree.meta.expression, state, tree.meta.startComment?.parentElement);
+    const newValue = evaluateCondition(tree.meta.expression, newState, tree.meta.startComment?.parentElement);
 
     // Check if condition result changed
     if (oldValue !== newValue) {
@@ -83,21 +87,24 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
     const checkedMatches = [];
 
     for (const m of matches) {
-      const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+      // Resolve this.property to componentId.property
+      const resolvedInner = resolveThisPath(m.inner, tree.element);
+
+      const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
 
       let shouldAffect = false;
       let relevantKeys = [];
 
       if (isInitialHydration) {
         // Initial hydration: affect all matched keys
-        relevantKeys = shallowNewState.filter((key) => matchesKey(m.inner, key));
+        relevantKeys = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
         shouldAffect = noMatch || relevantKeys.length > 0;
       } else {
         // Update: only affect if value changed
         const changedKeys = shallowNewState.filter((key) =>
-          matchesKey(m.inner, key) && state[key] !== newState[key]
+          matchesKey(resolvedInner, key) && state[key] !== newState[key]
         );
-        relevantKeys = changedKeys.length > 0 ? changedKeys : shallowState.filter((key) => matchesKey(m.inner, key));
+        relevantKeys = changedKeys.length > 0 ? changedKeys : shallowState.filter((key) => matchesKey(resolvedInner, key));
         shouldAffect = noMatch || changedKeys.length > 0;
       }
 
@@ -119,6 +126,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
           input: m.input,
           matches: m.matches,
           element: tree.element,
+          textNode: tree.textNode, // Reference to specific text node (prevents wiping children)
           scopedState: scopedStateForHydration, // Pass scoped state from iteration context
         });
       }
@@ -140,18 +148,21 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       }
 
       for (const m of attrMatches) {
-        const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+        // Resolve this.property to componentId.property
+        const resolvedInner = resolveThisPath(m.inner, tree.element);
+
+        const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
 
         let shouldAffect = false;
 
         if (isInitialHydration) {
           // Initial hydration: affect all matched keys
-          const newMatches = shallowNewState.filter((key) => matchesKey(m.inner, key));
+          const newMatches = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
           // Update: only affect if value changed
           const changedKeys = shallowNewState.filter((key) =>
-            matchesKey(m.inner, key) && state[key] !== newState[key]
+            matchesKey(resolvedInner, key) && state[key] !== newState[key]
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }
@@ -162,7 +173,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
             attrName,
             attrValue,
             matchOuter: m.outer,
-            matchInner: m.inner,
+            matchInner: m.inner, // Keep original, evalInScope will resolve this.
             element: tree.element,
             scopedState: scopedStateForHydration, // Pass scoped state from iteration context
           });
@@ -186,16 +197,19 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
       }
 
       for (const m of nameMatches) {
-        const noMatch = !shallowState.some((key) => matchesKey(m.inner, key));
+        // Resolve this.property to componentId.property
+        const resolvedInner = resolveThisPath(m.inner, tree.element);
+
+        const noMatch = !shallowState.some((key) => matchesKey(resolvedInner, key));
 
         let shouldAffect = false;
 
         if (isInitialHydration) {
-          const newMatches = shallowNewState.filter((key) => matchesKey(m.inner, key));
+          const newMatches = shallowNewState.filter((key) => matchesKey(resolvedInner, key));
           shouldAffect = noMatch || newMatches.length > 0;
         } else {
           const changedKeys = shallowNewState.filter((key) =>
-            matchesKey(m.inner, key) && state[key] !== newState[key]
+            matchesKey(resolvedInner, key) && state[key] !== newState[key]
           );
           shouldAffect = noMatch || changedKeys.length > 0;
         }
@@ -205,7 +219,7 @@ const recursive = (tree, state, newState, affected, scopedStateForHydration = nu
             type: 'nameBinding',
             nameBinding,
             matchOuter: m.outer,
-            matchInner: m.inner,
+            matchInner: m.inner, // Keep original, evalInScope will resolve this.
             element: tree.element,
             scopedState: scopedStateForHydration,
           });

package/runtime/component-state.js

@@ -0,0 +1,63 @@
+// Shared utility for processing component state from <script type="component">
+
+/**
+ * Generate unique component ID
+ */
+export const generateComponentId = () => {
+  return `_c${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+
+/**
+ * Transform variable declarations to property assignments
+ * let count = 0; → this.count = 0;
+ */
+const transformDeclarations = (code) => {
+  return code
+    // Transform: let varName = value;
+    .replace(/\b(let|const|var)\s+(\w+)\s*=\s*([^;]+);/g, 'this.$2 = $3;')
+    // Transform: let varName;
+    .replace(/\b(let|const|var)\s+(\w+)\s*;/g, 'this.$2 = undefined;');
+};
+
+/**
+ * Execute component script and return state object
+ * @param {string} scriptContent - JavaScript code to execute
+ * @returns {object} - Component state object
+ */
+export const executeComponentScript = (scriptContent) => {
+  const componentState = {};
+
+  if (!scriptContent || !scriptContent.trim()) {
+    return componentState;
+  }
+
+  try {
+    // Transform declarations to property assignments
+    const transformed = transformDeclarations(scriptContent);
+
+    // Execute script with 'this' = componentState
+    const fn = new Function(transformed);
+    fn.call(componentState);
+
+  } catch (error) {
+    console.error('[vibe] Error executing component script:', error);
+    console.error('[vibe] Script content:', scriptContent);
+  }
+
+  return componentState;
+};
+
+/**
+ * Register component state in global store
+ * @param {string} componentId - Unique component identifier
+ * @param {object} state - Component state object
+ * @param {object} globalState - Global $ object
+ */
+export const registerComponentState = (componentId, state, globalState) => {
+  if (!globalState[componentId]) {
+    globalState[componentId] = state;
+  } else {
+    // Component already registered, merge new state
+    Object.assign(globalState[componentId], state);
+  }
+};

package/runtime/component.js

@@ -1,6 +1,7 @@
 import { debugLog } from './debug.js';
 import { PHASE_FETCH } from './constants.js';
 import { evalInScope } from './utils.js';
+import { generateComponentId, executeComponentScript } from './component-state.js';
 
 // Helper to escape regex special characters
 const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -52,8 +53,44 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
   fetch(src, { signal: controller.signal })
     .then((r) => r.text())
     .then((html) => {
-      // Transform the fetched HTML
-      let transformedHtml = html;
+      // Parse HTML in temporary container to process component scripts
+      const temp = document.createElement('div');
+      temp.innerHTML = html;
+
+      // Process any <script type="component"> elements
+      const componentScripts = temp.querySelectorAll('script[type="component"]');
+      componentScripts.forEach((script) => {
+        const scriptContent = script.textContent?.trim() || '';
+        if (!scriptContent) return;
+
+        // Generate component ID
+        const componentId = generateComponentId();
+
+        // Tag script element
+        script.setAttribute('data-vibe-component-id', componentId);
+
+        // Tag following siblings with this component ID
+        let sibling = script.nextElementSibling;
+        while (sibling) {
+          // Stop if we hit another component script
+          if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'component') {
+            break;
+          }
+          sibling.setAttribute('data-vibe-component-id', componentId);
+          sibling = sibling.nextElementSibling;
+        }
+
+        // Execute component script to get state
+        const componentState = executeComponentScript(scriptContent);
+
+        // Register in global state
+        if (window.$) {
+          window.$[componentId] = componentState;
+        }
+      });
+
+      // Get transformed HTML from temp container
+      let transformedHtml = temp.innerHTML;
 
       // Replace props
       Object.entries(props).forEach(([propName, propValue]) => {

package/runtime/conditionals.js

@@ -5,7 +5,7 @@ import { createScopedState, renderAllIterations, initializeBlock } from './itera
 import { evalInScope } from './utils.js';
 
 // Evaluate conditional expression in state context
-const evaluateCondition = (expression, state) => !!evalInScope(expression, state);
+const evaluateCondition = (expression, state, element = null) => !!evalInScope(expression, state, element);
 
 // Extract state dependencies from an expression
 // e.g., "count > 5" → ["count"]
@@ -78,7 +78,7 @@ export const renderConditional = (node, state, manifest, parentScope = {}) => {
   startComment.__vibeRendered = true;
 
   // Evaluate condition with current state
-  const conditionResult = evaluateCondition(expression, state);
+  const conditionResult = evaluateCondition(expression, state, startComment.parentElement);
 
   // Determine which branch to mount
   const branchToMount = conditionResult ? branches.if : branches.else;
@@ -154,7 +154,7 @@ const unmountBranch = (node) => {
 
 // Update conditional when dependencies change
 export const updateConditional = (node, newState, oldState, manifest, parentScope = {}) => {
-  const { expression, branches } = node.meta;
+  const { expression, branches, startComment } = node.meta;
 
   // If not yet rendered, skip (renderConditional handles initial render)
   if (!node.runtime.templateRemoved) {
@@ -162,7 +162,7 @@ export const updateConditional = (node, newState, oldState, manifest, parentScop
   }
 
   // Evaluate expression with new state
-  const newConditionResult = evaluateCondition(expression, newState);
+  const newConditionResult = evaluateCondition(expression, newState, startComment?.parentElement);
   const newBranchData = newConditionResult ? branches.if : branches.else;
 
   // Check if branch changed (compare references)

package/runtime/constants.js

@@ -156,6 +156,19 @@ export const VALUE_ATTRS = [
 // Properties that should be set directly on the DOM element (not as attributes)
 export const DOM_PROPERTIES = ['value', 'checked', 'selected'];
 
+// DOM element properties that should NOT be rewritten in event handlers
+// When parsing onclick="this.value = this.inputValue", preserve this.value (DOM) but rewrite this.inputValue (component state)
+export const DOM_ELEMENT_PROPERTIES = new Set([
+  'value', 'checked', 'selected', 'disabled', 'readOnly', 'files',
+  'tagName', 'nodeName', 'nodeType', 'classList', 'className', 'id',
+  'innerHTML', 'outerHTML', 'textContent', 'innerText',
+  'parentElement', 'parentNode', 'nextSibling', 'previousSibling',
+  'firstChild', 'lastChild', 'children', 'childNodes',
+  'offsetWidth', 'offsetHeight', 'clientWidth', 'clientHeight',
+  'scrollTop', 'scrollLeft', 'scrollWidth', 'scrollHeight',
+  'style', 'dataset', 'attributes'
+]);
+
 // Regex for matching reactive bindings (@[expression])
 // Supports one level of nested brackets: @[items[0]] or @[obj[key]]
 export const BINDING_REGEX = /\@\[((?:[^\[\]]|\[[^\]]*\])+)\]/g;