@sprlab/wccompiler 0.16.16 → 0.16.17

package/README.md

@@ -359,6 +359,32 @@ The source expression calls the signal (`items()`) to read the current array. Su
 <li each="item in items()" :key="item.id">{{item.name}}</li>
 ```
 
+**Keyed Reconciliation with Full Reactivity:**
+
+When using `:key`, the compiler optimizes rendering by reusing DOM nodes instead of destroying and recreating them. All dynamic bindings (text content, attributes, event handlers) are automatically updated when signals change, ensuring the UI always reflects the current data state.
+
+```html
+<!-- UI updates immediately when item.active changes -->
+<li each="item in items()" :key="item.id">
+  <span>{{ item.name }}</span>
+  <span>{{ item.active ? '✓ Active' : '✗ Inactive' }}</span>
+  <button @click="() => toggleActive(item.id)">Toggle</button>
+</li>
+```
+
+**Keyed Reconciliation with Full Reactivity:**
+
+When using `:key`, the compiler optimizes rendering by reusing DOM nodes instead of destroying and recreating them. All dynamic bindings (text content, attributes, event handlers) are automatically updated when signals change, ensuring the UI always reflects the current data state.
+
+```html
+<!-- UI updates immediately when item.active changes -->
+<li each="item in items()" :key="item.id">
+  <span>{{ item.name }}</span>
+  <span>{{ item.active ? '✓ Active' : '✗ Inactive' }}</span>
+  <button @click="() => toggleActive(item.id)">Toggle</button>
+</li>
+```
+
 Numeric ranges are also supported:
 
 ```html
@@ -406,6 +432,81 @@ Directives work inside `each` blocks — including conditionals and nested loops
 <div :style="{ color: textColor() }">...</div>
 ```
 
+#### Class Directive (`:class`)
+
+Supports multiple syntaxes for dynamic class binding:
+
+**Object Syntax:**
+```html
+<div :class="{ active: isActive(), 'text-large': isLarge() }">Content</div>
+```
+
+**Ternary Expressions:**
+```html
+<div :class="theme() === 'light' ? 'light-theme' : 'dark-theme'">Content</div>
+```
+
+**Template Literals:**
+```html
+<div :class="`${theme()}-theme ${size()}-size`">Content</div>
+```
+
+**Mixed Static and Dynamic:**
+```html
+<div class="base-class" :class="isActive() ? 'active' : ''">Content</div>
+```
+
+All string literals are preserved correctly - signal names inside strings are NOT transformed.
+
+#### Class Directive (`:class`)
+
+Supports multiple syntaxes for dynamic class binding:
+
+**Object Syntax:**
+```html
+<div :class="{ active: isActive(), 'text-large': isLarge() }">Content</div>
+```
+
+**Ternary Expressions:**
+```html
+<div :class="theme() === 'light' ? 'light-theme' : 'dark-theme'">Content</div>
+```
+
+**Template Literals:**
+```html
+<div :class="`${theme()}-theme ${size()}-size`">Content</div>
+```
+
+**Mixed Static and Dynamic:**
+```html
+<div class="base-class" :class="isActive() ? 'active' : ''">Content</div>
+```
+
+All string literals are preserved correctly - signal names inside strings are NOT transformed.
+
+#### Style Directive (`:style`)
+
+Supports single and multiple CSS properties:
+
+**Single Property:**
+```html
+<div :style="{ color: textColor() }">Text</div>
+```
+
+**Multiple Properties:**
+```html
+<div :style="{ color: textColor(), fontSize: fontSize() + 'px', backgroundColor: bgColor() }">
+  Styled Text
+</div>
+```
+
+**Kebab-case Properties:**
+```html
+<div :style="{ 'font-size': size() + 'px', 'background-color': bgColor() }">Text</div>
+```
+
+Object literal keys are preserved correctly - only values are transformed to reactive calls.
+
 ### Template Refs
 
 ```js

package/lib/codegen.js

@@ -1788,10 +1788,15 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`      __iter.forEach((${itemVar}, ${indexVar || '__idx'}) => {`);
       lines.push(`        const __key = ${keyExpr};`);
       lines.push('        if (__oldMap.has(__key)) {');
-      lines.push('          const node = __oldMap.get(__key);');
+      lines.push('          const oldNode = __oldMap.get(__key);');
       
-      // BUG-0012 FIX: Update all dynamic properties when reusing nodes
-      // Re-run setup to ensure bindings reflect current item data
+      // BUG-0012 FIX: When reusing nodes, we must recreate them to get fresh effects
+      // Old effects capture stale item references and fail on subsequent updates
+      // Strategy: Remove old node, create fresh clone with new effects
+      lines.push('          oldNode.remove();');
+      lines.push(`          const node = this.${vn}_tpl.content.cloneNode(true).firstChild;`);
+      
+      // Setup bindings/events for the recreated node (uses 'node' variable)
       generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet, methodNames);
       
       lines.push('          __newMap.set(__key, node);');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.16.16",
+  "version": "0.16.17",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "exports": {