@sprlab/wccompiler 0.2.0 → 0.3.0

package/README.md

@@ -82,6 +82,26 @@ effect(() => {
 })
 ```
 
+Effects support cleanup — return a function to run before re-execution:
+
+```js
+effect(() => {
+  const id = setInterval(() => tick.set(tick() + 1), 1000)
+  return () => clearInterval(id)  // called before re-run
+})
+```
+
+### Watch
+
+```js
+watch('count', (newVal, oldVal) => {
+  console.log(`Changed from ${oldVal} to ${newVal}`)
+  if (newVal > 10) api.save(newVal)
+})
+```
+
+`watch` observes a specific signal/prop/computed and provides both old and new values. The callback does not run on initial mount — only on subsequent changes.
+
 ### Constants
 
 ```js
@@ -238,11 +258,18 @@ onMount(() => {
   console.log('Component connected to DOM')
 })
 
+onMount(async () => {
+  const data = await fetch('/api/items').then(r => r.json())
+  items.set(data)
+})
+
 onDestroy(() => {
   console.log('Component removed from DOM')
 })
 ```
 
+Async callbacks are wrapped in an IIFE — `connectedCallback` itself stays synchronous.
+
 ## CSS Scoping
 
 Styles are automatically scoped to the component using tag-name prefixing:

package/lib/codegen.js

@@ -95,6 +95,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
@@ -289,6 +297,103 @@ export function isStaticForExpr(expr, itemVar, indexVar, propsSet, rootVarNames,
   return true;
 }
 
+/**
+ * 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');
+    lines.push(`${indent}  ${nodeRef}.addEventListener('${e.event}', this._${e.handler}.bind(this));`);
+  }
+
+  // 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,8 +425,11 @@ export function generateComponent(parseResult) {
     attrBindings = [],
     slots = [],
     constantVars = [],
+    watchers = [],
     refs = [],
     refBindings = [],
+    childComponents = [],
+    childImports = [],
   } = parseResult;
 
   const signalNames = signals.map(s => s.name);
@@ -336,6 +444,14 @@ export function generateComponent(parseResult) {
   lines.push(reactiveRuntime.trim());
   lines.push('');
 
+  // ── 1b. Child component imports ──
+  for (const ci of childImports) {
+    lines.push(`import '${ci.importPath}';`);
+  }
+  if (childImports.length > 0) {
+    lines.push('');
+  }
+
   // ── 2. CSS injection (scoped CSS into document.head, always) ──
   if (style) {
     const scoped = scopeCSS(style, tagName);
@@ -410,6 +526,11 @@ export function generateComponent(parseResult) {
     lines.push(`    this.${s.varName} = ${pathExpr(s.path, '__root')};`);
   }
 
+  // Assign DOM refs for child component instances
+  for (const cc of childComponents) {
+    lines.push(`    this.${cc.varName} = ${pathExpr(cc.path, '__root')};`);
+  }
+
   // Assign DOM refs for attr bindings (reuse ref when same path)
   const attrPathMap = new Map();
   for (const ab of attrBindings) {
@@ -443,6 +564,11 @@ export function generateComponent(parseResult) {
     lines.push(`    this._c_${c.name} = __computed(() => ${body});`);
   }
 
+  // Watcher prev-value initialization
+  for (const w of watchers) {
+    lines.push(`    this.__prev_${w.target} = undefined;`);
+  }
+
   // ── if: template creation, anchor reference, state init ──
   for (const ifBlock of ifBlocks) {
     const vn = ifBlock.varName;
@@ -542,6 +668,27 @@ export function generateComponent(parseResult) {
     }
   }
 
+  // Child component reactive prop bindings
+  for (const cc of childComponents) {
+    for (const pb of cc.propBindings) {
+      let ref;
+      if (pb.type === 'prop') {
+        ref = `this._s_${pb.expr}()`;
+      } else if (pb.type === 'computed') {
+        ref = `this._c_${pb.expr}()`;
+      } else if (pb.type === 'signal') {
+        ref = `this._${pb.expr}()`;
+      } else if (pb.type === 'constant') {
+        ref = `this._const_${pb.expr}`;
+      } else {
+        ref = `this._${pb.expr}()`;
+      }
+      lines.push('    __effect(() => {');
+      lines.push(`      this.${cc.varName}.setAttribute('${pb.attr}', ${ref} ?? '');`);
+      lines.push('    });');
+    }
+  }
+
   // User effects
   for (const eff of effects) {
     const body = transformMethodBody(eff.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
@@ -554,6 +701,31 @@ export function generateComponent(parseResult) {
     lines.push('    });');
   }
 
+  // Watcher effects
+  for (const w of watchers) {
+    // 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}()`;
+    }
+    const body = transformMethodBody(w.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+    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('    });');
+  }
+
   // Event listeners
   for (const e of events) {
     lines.push(`    this.${e.varName}.addEventListener('${e.event}', this._${e.handler}.bind(this));`);
@@ -695,7 +867,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);
@@ -706,116 +878,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'; });`);
-      }
-    }
+    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 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(`        });`);
-      }
-    }
+      generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
 
-    // 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); });`);
-      }
-    }
-
-    // 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}`);
+      }
     }
   }
 
@@ -827,9 +962,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('  }');