@sprlab/wccompiler 0.2.1 → 0.4.0

package/lib/codegen.js

@@ -75,7 +75,7 @@ function slotPropRef(source, signalNames, computedNames, propNames) {
  * @param {string|null} [emitsObjectName] — Emits object variable name
  * @returns {string}
  */
-export function transformExpr(expr, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, constantNames = []) {
+export function transformExpr(expr, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, constantNames = [], methodNames = []) {
   let result = expr;
 
   // Transform emit calls: emitsObjectName( → this._emit(
@@ -84,6 +84,14 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
     result = result.replace(emitsRe, 'this._emit(');
   }
 
+  // Transform method calls: methodName( → this._methodName(
+  for (const name of methodNames) {
+    if (propsObjectName && name === propsObjectName) continue;
+    if (emitsObjectName && name === emitsObjectName) continue;
+    const methodRe = new RegExp(`\\b${name}\\(`, 'g');
+    result = result.replace(methodRe, `this._${name}(`);
+  }
+
   // Transform props.x → this._s_x() BEFORE signal/computed transforms
   if (propsObjectName && propNames.size > 0) {
     const propsRe = new RegExp(`\\b${propsObjectName}\\.(\\w+)`, 'g');
@@ -95,6 +103,14 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
     });
   }
 
+  // Transform bare prop names → this._s_x() (for template expressions like :style="{ color: myProp }")
+  for (const propName of propNames) {
+    if (propsObjectName && propName === propsObjectName) continue;
+    if (emitsObjectName && propName === emitsObjectName) continue;
+    const bareRe = new RegExp(`\\b(${propName})\\b(?!\\.set\\()(?!\\()`, 'g');
+    result = result.replace(bareRe, `this._s_${propName}()`);
+  }
+
   // Transform computed names first (to avoid partial matches with signals)
   for (const name of computedNames) {
     // Skip propsObjectName and emitsObjectName
@@ -231,15 +247,24 @@ export function transformForExpr(expr, itemVar, indexVar, propsSet, rootVarNames
 
   for (const p of propsSet) {
     if (excludeSet.has(p)) continue;
-    r = r.replace(new RegExp(`\\b${p}\\b`, 'g'), `this._s_${p}()`);
+    // First: transform name() calls → this._s_name() (don't double-call)
+    r = r.replace(new RegExp(`\\b${p}\\(\\)`, 'g'), `this._s_${p}()`);
+    // Then: transform bare name references
+    r = r.replace(new RegExp(`\\b${p}\\b(?!\\()`, 'g'), `this._s_${p}()`);
   }
   for (const n of rootVarNames) {
     if (excludeSet.has(n)) continue;
-    r = r.replace(new RegExp(`\\b${n}\\b`, 'g'), `this._${n}()`);
+    // First: transform name() calls → this._name() (don't double-call)
+    r = r.replace(new RegExp(`\\b${n}\\(\\)`, 'g'), `this._${n}()`);
+    // Then: transform bare name references
+    r = r.replace(new RegExp(`\\b${n}\\b(?!\\()`, 'g'), `this._${n}()`);
   }
   for (const n of computedNames) {
     if (excludeSet.has(n)) continue;
-    r = r.replace(new RegExp(`\\b${n}\\b`, 'g'), `this._c_${n}()`);
+    // First: transform name() calls → this._c_name() (don't double-call)
+    r = r.replace(new RegExp(`\\b${n}\\(\\)`, 'g'), `this._c_${n}()`);
+    // Then: transform bare name references
+    r = r.replace(new RegExp(`\\b${n}\\b(?!\\()`, 'g'), `this._c_${n}()`);
   }
   return r;
 }
@@ -289,6 +314,173 @@ export function isStaticForExpr(expr, itemVar, indexVar, propsSet, rootVarNames,
   return true;
 }
 
+/**
+ * Generate the JS expression for an event handler based on its type:
+ * - Simple name (e.g. "removeItem") → this._removeItem.bind(this)
+ * - Function call (e.g. "removeItem(item)") → (e) => { this._removeItem(item); }
+ * - Arrow function (e.g. "() => removeItem(item)") → () => { removeItem(item); }
+ *
+ * @param {string} handler — The raw handler string from the template
+ * @param {string[]} signalNames
+ * @param {string[]} computedNames
+ * @param {string|null} propsObjectName
+ * @param {Set<string>} propNames
+ * @param {string|null} emitsObjectName
+ * @param {string[]} constantNames
+ * @returns {string}
+ */
+export function generateEventHandler(handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames) {
+  if (handler.includes('=>')) {
+    // Arrow function expression: (e) => removeItem(item)
+    const arrowIdx = handler.indexOf('=>');
+    const params = handler.slice(0, arrowIdx).trim();
+    let body = handler.slice(arrowIdx + 2).trim();
+    body = transformMethodBody(body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, [], constantNames);
+    return `${params} => { ${body}; }`;
+  } else if (handler.includes('(')) {
+    // Function call expression: removeItem(item)
+    const parenIdx = handler.indexOf('(');
+    const fnName = handler.slice(0, parenIdx).trim();
+    const args = handler.slice(parenIdx + 1, handler.lastIndexOf(')')).trim();
+    const transformedArgs = args ? transformExpr(args, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames) : '';
+    return `(e) => { this._${fnName}(${transformedArgs}); }`;
+  } else {
+    // Simple method name
+    return `this._${handler}.bind(this)`;
+  }
+}
+
+/**
+ * Generate the JS expression for an event handler inside an each block.
+ * Similar to generateEventHandler but uses transformForExpr for the each scope.
+ *
+ * @param {string} handler
+ * @param {string} itemVar
+ * @param {string|null} indexVar
+ * @param {Set<string>} propNames
+ * @param {Set<string>} signalNamesSet
+ * @param {Set<string>} computedNamesSet
+ * @returns {string}
+ */
+export function generateForEventHandler(handler, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet) {
+  if (handler.includes('=>')) {
+    // Arrow function expression
+    const arrowIdx = handler.indexOf('=>');
+    const params = handler.slice(0, arrowIdx).trim();
+    let body = handler.slice(arrowIdx + 2).trim();
+    body = transformForExpr(body, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+    return `${params} => { ${body}; }`;
+  } else if (handler.includes('(')) {
+    // Function call expression: removeItem(item)
+    const parenIdx = handler.indexOf('(');
+    const fnName = handler.slice(0, parenIdx).trim();
+    const args = handler.slice(parenIdx + 1, handler.lastIndexOf(')')).trim();
+    const transformedArgs = args ? transformForExpr(args, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet) : '';
+    return `(e) => { this._${fnName}(${transformedArgs}); }`;
+  } else {
+    // Simple method name
+    return `this._${handler}.bind(this)`;
+  }
+}
+
+/**
+ * Generate per-item setup code for bindings, events, show, attr, model, and slots.
+ * Used by both keyed and non-keyed each effects.
+ *
+ * @param {string[]} lines — Output lines array
+ * @param {object} forBlock — ForBlock with bindings, events, etc.
+ * @param {string} itemVar
+ * @param {string|null} indexVar
+ * @param {Set<string>} propNames
+ * @param {Set<string>} signalNamesSet
+ * @param {Set<string>} computedNamesSet
+ */
+function generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet) {
+  const indent = '        ';
+
+  // Bindings
+  for (const b of forBlock.bindings) {
+    const nodeRef = pathExpr(b.path, 'node');
+    if (isStaticForBinding(b.name, itemVar, indexVar)) {
+      lines.push(`${indent}  ${nodeRef}.textContent = ${b.name} ?? '';`);
+    } else {
+      const expr = transformForExpr(b.name, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+      lines.push(`${indent}  __effect(() => { ${nodeRef}.textContent = ${expr} ?? ''; });`);
+    }
+  }
+
+  // Events
+  for (const e of forBlock.events) {
+    const nodeRef = pathExpr(e.path, 'node');
+    const handlerExpr = generateForEventHandler(e.handler, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+    lines.push(`${indent}  ${nodeRef}.addEventListener('${e.event}', ${handlerExpr});`);
+  }
+
+  // Show
+  for (const sb of forBlock.showBindings) {
+    const nodeRef = pathExpr(sb.path, 'node');
+    if (isStaticForExpr(sb.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet)) {
+      lines.push(`${indent}  ${nodeRef}.style.display = (${sb.expression}) ? '' : 'none';`);
+    } else {
+      const expr = transformForExpr(sb.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+      lines.push(`${indent}  __effect(() => { ${nodeRef}.style.display = (${expr}) ? '' : 'none'; });`);
+    }
+  }
+
+  // Attr bindings
+  for (const ab of forBlock.attrBindings) {
+    const nodeRef = pathExpr(ab.path, 'node');
+    if (isStaticForExpr(ab.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet)) {
+      lines.push(`${indent}  const __val_${ab.varName} = ${ab.expression};`);
+      lines.push(`${indent}  if (__val_${ab.varName} != null && __val_${ab.varName} !== false) { ${nodeRef}.setAttribute('${ab.attr}', __val_${ab.varName}); }`);
+    } else {
+      const expr = transformForExpr(ab.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+      lines.push(`${indent}  __effect(() => {`);
+      lines.push(`${indent}    const __val = ${expr};`);
+      lines.push(`${indent}    if (__val == null || __val === false) { ${nodeRef}.removeAttribute('${ab.attr}'); }`);
+      lines.push(`${indent}    else { ${nodeRef}.setAttribute('${ab.attr}', __val); }`);
+      lines.push(`${indent}  });`);
+    }
+  }
+
+  // Model bindings
+  for (const mb of (forBlock.modelBindings || [])) {
+    const nodeRef = pathExpr(mb.path, 'node');
+    lines.push(`${indent}  __effect(() => {`);
+    if (mb.prop === 'checked' && mb.radioValue !== null) {
+      lines.push(`${indent}    ${nodeRef}.checked = (this._${mb.signal}() === '${mb.radioValue}');`);
+    } else if (mb.prop === 'checked') {
+      lines.push(`${indent}    ${nodeRef}.checked = !!this._${mb.signal}();`);
+    } else {
+      lines.push(`${indent}    ${nodeRef}.value = this._${mb.signal}() ?? '';`);
+    }
+    lines.push(`${indent}  });`);
+    if (mb.prop === 'checked' && mb.radioValue === null) {
+      lines.push(`${indent}  ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.checked); });`);
+    } else if (mb.coerce) {
+      lines.push(`${indent}  ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(Number(e.target.value)); });`);
+    } else {
+      lines.push(`${indent}  ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.value); });`);
+    }
+  }
+
+  // Scoped slots
+  for (const s of (forBlock.slots || [])) {
+    if (s.slotProps.length > 0) {
+      const slotNodeRef = pathExpr(s.path, 'node');
+      const propsEntries = s.slotProps.map(sp => `'${sp.prop}': ${sp.source}`).join(', ');
+      lines.push(`${indent}  { const __slotEl = ${slotNodeRef};`);
+      lines.push(`${indent}    const __sp = { ${propsEntries} };`);
+      lines.push(`${indent}    let __h = __slotEl.innerHTML;`);
+      lines.push(`${indent}    for (const [k, v] of Object.entries(__sp)) {`);
+      lines.push(`${indent}      __h = __h.replace(new RegExp('\\\\{\\\\{\\\\s*' + k + '\\\\s*\\\\}\\\\}', 'g'), v ?? '');`);
+      lines.push(`${indent}    }`);
+      lines.push(`${indent}    __slotEl.innerHTML = __h;`);
+      lines.push(`${indent}  }`);
+    }
+  }
+}
+
 /**
  * Generate a fully self-contained JS component from a ParseResult.
  *
@@ -320,6 +512,7 @@ export function generateComponent(parseResult) {
     attrBindings = [],
     slots = [],
     constantVars = [],
+    watchers = [],
     refs = [],
     refBindings = [],
     childComponents = [],
@@ -329,6 +522,7 @@ export function generateComponent(parseResult) {
   const signalNames = signals.map(s => s.name);
   const computedNames = computeds.map(c => c.name);
   const constantNames = constantVars.map(v => v.name);
+  const methodNames = methods.map(m => m.name);
   const refVarNames = refs.map(r => r.varName);
   const propNames = new Set(propDefs.map(p => p.name));
 
@@ -454,10 +648,20 @@ export function generateComponent(parseResult) {
 
   // Computed initialization
   for (const c of computeds) {
-    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
     lines.push(`    this._c_${c.name} = __computed(() => ${body});`);
   }
 
+  // Watcher prev-value initialization
+  for (let idx = 0; idx < watchers.length; idx++) {
+    const w = watchers[idx];
+    if (w.kind === 'signal') {
+      lines.push(`    this.__prev_${w.target} = undefined;`);
+    } else {
+      lines.push(`    this.__prev_watch${idx} = undefined;`);
+    }
+  }
+
   // ── if: template creation, anchor reference, state init ──
   for (const ifBlock of ifBlocks) {
     const vn = ifBlock.varName;
@@ -590,14 +794,59 @@ export function generateComponent(parseResult) {
     lines.push('    });');
   }
 
+  // Watcher effects
+  for (let idx = 0; idx < watchers.length; idx++) {
+    const w = watchers[idx];
+    const body = transformMethodBody(w.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+
+    if (w.kind === 'signal') {
+      // Determine the signal reference for the watch target
+      let watchRef;
+      if (propNames.has(w.target)) {
+        watchRef = `this._s_${w.target}()`;
+      } else if (computedNames.includes(w.target)) {
+        watchRef = `this._c_${w.target}()`;
+      } else {
+        watchRef = `this._${w.target}()`;
+      }
+      lines.push('    __effect(() => {');
+      lines.push(`      const ${w.newParam} = ${watchRef};`);
+      lines.push(`      if (this.__prev_${w.target} !== undefined) {`);
+      lines.push(`        const ${w.oldParam} = this.__prev_${w.target};`);
+      const bodyLines = body.split('\n');
+      for (const line of bodyLines) {
+        lines.push(`        ${line}`);
+      }
+      lines.push('      }');
+      lines.push(`      this.__prev_${w.target} = ${w.newParam};`);
+      lines.push('    });');
+    } else {
+      // kind === 'getter' — transform the getter expression and use it directly
+      const getterExpr = transformMethodBody(w.target, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+      const prevName = `__prev_watch${idx}`;
+      lines.push('    __effect(() => {');
+      lines.push(`      const ${w.newParam} = ${getterExpr};`);
+      lines.push(`      if (this.${prevName} !== undefined) {`);
+      lines.push(`        const ${w.oldParam} = this.${prevName};`);
+      const bodyLines = body.split('\n');
+      for (const line of bodyLines) {
+        lines.push(`        ${line}`);
+      }
+      lines.push('      }');
+      lines.push(`      this.${prevName} = ${w.newParam};`);
+      lines.push('    });');
+    }
+  }
+
   // Event listeners
   for (const e of events) {
-    lines.push(`    this.${e.varName}.addEventListener('${e.event}', this._${e.handler}.bind(this));`);
+    const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    lines.push(`    this.${e.varName}.addEventListener('${e.event}', ${handlerExpr});`);
   }
 
   // Show effects — one __effect per ShowBinding
   for (const sb of showBindings) {
-    const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
     lines.push('    __effect(() => {');
     lines.push(`      this.${sb.varName}.style.display = (${expr}) ? '' : 'none';`);
     lines.push('    });');
@@ -639,7 +888,7 @@ export function generateComponent(parseResult) {
 
   // Attr binding effects — one __effect per AttrBinding
   for (const ab of attrBindings) {
-    const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
     if (ab.kind === 'attr') {
       lines.push('    __effect(() => {');
       lines.push(`      const __v = ${expr};`);
@@ -691,10 +940,10 @@ export function generateComponent(parseResult) {
     for (let i = 0; i < ifBlock.branches.length; i++) {
       const branch = ifBlock.branches[i];
       if (branch.type === 'if') {
-        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
         lines.push(`      if (${expr}) { __branch = ${i}; }`);
       } else if (branch.type === 'else-if') {
-        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
         lines.push(`      else if (${expr}) { __branch = ${i}; }`);
       } else {
         // else
@@ -731,7 +980,7 @@ export function generateComponent(parseResult) {
   // ── each effects ──
   for (const forBlock of forBlocks) {
     const vn = forBlock.varName;
-    const { itemVar, indexVar, source } = forBlock;
+    const { itemVar, indexVar, source, keyExpr } = forBlock;
 
     const signalNamesSet = new Set(signalNames);
     const computedNamesSet = new Set(computedNames);
@@ -742,116 +991,79 @@ export function generateComponent(parseResult) {
     lines.push('    __effect(() => {');
     lines.push(`      const __source = ${sourceExpr};`);
     lines.push('');
-    lines.push(`      for (const n of this.${vn}_nodes) n.remove();`);
-    lines.push(`      this.${vn}_nodes = [];`);
-    lines.push('');
     lines.push("      const __iter = typeof __source === 'number'");
     lines.push('        ? Array.from({ length: __source }, (_, i) => i + 1)');
     lines.push('        : (__source || []);');
     lines.push('');
-    lines.push(`      __iter.forEach((${itemVar}, ${indexVar || '__idx'}) => {`);
-    lines.push(`        const clone = this.${vn}_tpl.content.cloneNode(true);`);
-    lines.push('        const node = clone.firstChild;');
-
-    // Setup bindings per item
-    for (const b of forBlock.bindings) {
-      const nodeRef = pathExpr(b.path, 'node');
-      if (isStaticForBinding(b.name, itemVar, indexVar)) {
-        // Static binding: reference only item/index, assign once
-        lines.push(`        ${nodeRef}.textContent = ${b.name} ?? '';`);
-      } else {
-        // Reactive binding: references component variables, wrap in effect
-        const expr = transformForExpr(b.name, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
-        lines.push(`        __effect(() => { ${nodeRef}.textContent = ${expr} ?? ''; });`);
-      }
-    }
 
-    // Setup events per item
-    for (const e of forBlock.events) {
-      const nodeRef = pathExpr(e.path, 'node');
-      lines.push(`        ${nodeRef}.addEventListener('${e.event}', this._${e.handler}.bind(this));`);
-    }
-
-    // Setup show per item
-    for (const sb of forBlock.showBindings) {
-      const nodeRef = pathExpr(sb.path, 'node');
-      if (isStaticForExpr(sb.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet)) {
-        const expr = sb.expression;
-        lines.push(`        ${nodeRef}.style.display = (${expr}) ? '' : 'none';`);
-      } else {
-        const expr = transformForExpr(sb.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
-        lines.push(`        __effect(() => { ${nodeRef}.style.display = (${expr}) ? '' : 'none'; });`);
-      }
-    }
-
-    // Setup attr bindings per item
-    for (const ab of forBlock.attrBindings) {
-      const nodeRef = pathExpr(ab.path, 'node');
-      if (isStaticForExpr(ab.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet)) {
-        const expr = ab.expression;
-        lines.push(`        const __val_${ab.varName} = ${expr};`);
-        lines.push(`        if (__val_${ab.varName} != null && __val_${ab.varName} !== false) { ${nodeRef}.setAttribute('${ab.attr}', __val_${ab.varName}); }`);
-      } else {
-        const expr = transformForExpr(ab.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
-        lines.push(`        __effect(() => {`);
-        lines.push(`          const __val = ${expr};`);
-        lines.push(`          if (__val == null || __val === false) { ${nodeRef}.removeAttribute('${ab.attr}'); }`);
-        lines.push(`          else { ${nodeRef}.setAttribute('${ab.attr}', __val); }`);
-        lines.push(`        });`);
-      }
-    }
+    if (keyExpr) {
+      // ── Keyed reconciliation ──
+      lines.push(`      const __oldMap = this.${vn}_keyMap || new Map();`);
+      lines.push('      const __newMap = new Map();');
+      lines.push('      const __newNodes = [];');
+      lines.push('');
+      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('          __newMap.set(__key, node);');
+      lines.push('          __newNodes.push(node);');
+      lines.push('          __oldMap.delete(__key);');
+      lines.push('        } else {');
+      lines.push(`          const clone = this.${vn}_tpl.content.cloneNode(true);`);
+      lines.push('          const node = clone.firstChild;');
+
+      // Setup bindings/events/show/attr/model/slots for NEW nodes only
+      // (reused nodes keep their existing bindings)
+      generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+
+      lines.push('          __newMap.set(__key, node);');
+      lines.push('          __newNodes.push(node);');
+      lines.push('        }');
+      lines.push('      });');
+      lines.push('');
+      lines.push('      // Remove nodes no longer in the list');
+      lines.push('      for (const n of __oldMap.values()) n.remove();');
+      lines.push('');
+      lines.push('      // Reorder: insert all nodes in correct order before anchor');
+      lines.push(`      for (const n of __newNodes) this.${vn}_anchor.parentNode.insertBefore(n, this.${vn}_anchor);`);
+      lines.push('');
+      lines.push(`      this.${vn}_nodes = __newNodes;`);
+      lines.push(`      this.${vn}_keyMap = __newMap;`);
+      lines.push('    });');
+    } else {
+      // ── Non-keyed: destroy all and recreate (original behavior) ──
+      lines.push(`      for (const n of this.${vn}_nodes) n.remove();`);
+      lines.push(`      this.${vn}_nodes = [];`);
+      lines.push('');
+      lines.push(`      __iter.forEach((${itemVar}, ${indexVar || '__idx'}) => {`);
+      lines.push(`        const clone = this.${vn}_tpl.content.cloneNode(true);`);
+      lines.push('        const node = clone.firstChild;');
 
-    // Setup model bindings per item
-    for (const mb of (forBlock.modelBindings || [])) {
-      const nodeRef = pathExpr(mb.path, 'node');
-      // Effect (signal → DOM) — always reactive since it references component variables
-      lines.push(`        __effect(() => {`);
-      if (mb.prop === 'checked' && mb.radioValue !== null) {
-        lines.push(`          ${nodeRef}.checked = (this._${mb.signal}() === '${mb.radioValue}');`);
-      } else if (mb.prop === 'checked') {
-        lines.push(`          ${nodeRef}.checked = !!this._${mb.signal}();`);
-      } else {
-        lines.push(`          ${nodeRef}.value = this._${mb.signal}() ?? '';`);
-      }
-      lines.push(`        });`);
-      // Listener (DOM → signal)
-      if (mb.prop === 'checked' && mb.radioValue === null) {
-        lines.push(`        ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.checked); });`);
-      } else if (mb.coerce) {
-        lines.push(`        ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(Number(e.target.value)); });`);
-      } else {
-        lines.push(`        ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.value); });`);
-      }
-    }
+      generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
 
-    // Setup scoped slot resolution per item
-    for (const s of (forBlock.slots || [])) {
-      if (s.slotProps.length > 0) {
-        const slotNodeRef = pathExpr(s.path, 'node');
-        const propsEntries = s.slotProps.map(sp => `'${sp.prop}': ${sp.source}`).join(', ');
-        lines.push(`        { const __slotEl = ${slotNodeRef};`);
-        lines.push(`          const __sp = { ${propsEntries} };`);
-        lines.push(`          let __h = __slotEl.innerHTML;`);
-        lines.push(`          for (const [k, v] of Object.entries(__sp)) {`);
-        lines.push(`            __h = __h.replace(new RegExp('\\\\{\\\\{\\\\s*' + k + '\\\\s*\\\\}\\\\}', 'g'), v ?? '');`);
-        lines.push(`          }`);
-        lines.push(`          __slotEl.innerHTML = __h;`);
-        lines.push(`        }`);
-      }
+      lines.push(`        this.${vn}_anchor.parentNode.insertBefore(node, this.${vn}_anchor);`);
+      lines.push(`        this.${vn}_nodes.push(node);`);
+      lines.push('      });');
+      lines.push('    });');
     }
-
-    lines.push(`        this.${vn}_anchor.parentNode.insertBefore(node, this.${vn}_anchor);`);
-    lines.push(`        this.${vn}_nodes.push(node);`);
-    lines.push('      });');
-    lines.push('    });');
   }
 
   // Lifecycle: onMount hooks (at the very end of connectedCallback)
   for (const hook of onMountHooks) {
     const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
-    const bodyLines = body.split('\n');
-    for (const line of bodyLines) {
-      lines.push(`    ${line}`);
+    if (hook.async) {
+      lines.push('    (async () => {');
+      const bodyLines = body.split('\n');
+      for (const line of bodyLines) {
+        lines.push(`      ${line}`);
+      }
+      lines.push('    })();');
+    } else {
+      const bodyLines = body.split('\n');
+      for (const line of bodyLines) {
+        lines.push(`    ${line}`);
+      }
     }
   }
 
@@ -863,9 +1075,18 @@ export function generateComponent(parseResult) {
     lines.push('  disconnectedCallback() {');
     for (const hook of onDestroyHooks) {
       const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
-      const bodyLines = body.split('\n');
-      for (const line of bodyLines) {
-        lines.push(`    ${line}`);
+      if (hook.async) {
+        lines.push('    (async () => {');
+        const bodyLines = body.split('\n');
+        for (const line of bodyLines) {
+          lines.push(`      ${line}`);
+        }
+        lines.push('    })();');
+      } else {
+        const bodyLines = body.split('\n');
+        for (const line of bodyLines) {
+          lines.push(`    ${line}`);
+        }
       }
     }
     lines.push('  }');
@@ -978,20 +1199,21 @@ export function generateComponent(parseResult) {
 
       // Events: generate addEventListener
       for (const e of branch.events) {
+        const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
         lines.push(`      const ${e.varName} = ${pathExpr(e.path, 'node')};`);
-        lines.push(`      ${e.varName}.addEventListener('${e.event}', this._${e.handler}.bind(this));`);
+        lines.push(`      ${e.varName}.addEventListener('${e.event}', ${handlerExpr});`);
       }
 
       // Show bindings: generate effects
       for (const sb of branch.showBindings) {
-        const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
         lines.push(`      const ${sb.varName} = ${pathExpr(sb.path, 'node')};`);
         lines.push(`      __effect(() => { ${sb.varName}.style.display = (${expr}) ? '' : 'none'; });`);
       }
 
       // Attr bindings: generate effects
       for (const ab of branch.attrBindings) {
-        const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
         lines.push(`      const ${ab.varName} = ${pathExpr(ab.path, 'node')};`);
         lines.push(`      __effect(() => {`);
         lines.push(`        const __val = ${expr};`);