@sprlab/wccompiler 0.5.1 → 0.5.3

package/lib/codegen.js

@@ -541,8 +541,6 @@ export function generateComponent(parseResult, options = {}) {
     const usedRuntime = new Set(['__signal']); // always need __signal
     if (computeds.length > 0) usedRuntime.add('__computed');
     if (effects.length > 0 || bindings.length > 0 || showBindings.length > 0 || modelBindings.length > 0 || attrBindings.length > 0 || ifBlocks.length > 0 || forBlocks.length > 0 || watchers.length > 0 || childComponents.length > 0 || slots.some(s => s.slotProps.length > 0)) usedRuntime.add('__effect');
-    // __batch is available but only needed if user code calls it explicitly — always include for safety
-    usedRuntime.add('__batch');
     const imports = [...usedRuntime].join(', ');
     lines.push(`import { ${imports} } from '${options.runtimeImportPath}';`);
   } else {
@@ -745,27 +743,35 @@ export function generateComponent(parseResult, options = {}) {
   lines.push('    if (this.__connected) return;');
   lines.push('    this.__connected = true;');
   lines.push('    this.__ac = new AbortController();');
+  lines.push('    this.__disposers = [];');
   lines.push('');
 
   // Binding effects — one __effect per binding
   for (const b of bindings) {
     if (b.type === 'prop') {
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${b.varName}.textContent = this._s_${b.name}() ?? '';`);
-      lines.push('    });');
+      lines.push('    }));');
     } else if (b.type === 'signal') {
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${b.varName}.textContent = this._${b.name}() ?? '';`);
-      lines.push('    });');
+      lines.push('    }));');
     } else if (b.type === 'computed') {
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${b.varName}.textContent = this._c_${b.name}() ?? '';`);
-      lines.push('    });');
+      lines.push('    }));');
     } else {
-      // method type — call the method
-      lines.push('    __effect(() => {');
-      lines.push(`      this.${b.varName}.textContent = this._${b.name}() ?? '';`);
-      lines.push('    });');
+      // method type — check if it's a props.x access pattern
+      let ref;
+      if (propsObjectName && b.name.startsWith(propsObjectName + '.')) {
+        const propName = b.name.slice(propsObjectName.length + 1);
+        ref = `this._s_${propName}()`;
+      } else {
+        ref = `this._${b.name}()`;
+      }
+      lines.push('    this.__disposers.push(__effect(() => {');
+      lines.push(`      this.${b.varName}.textContent = ${ref} ?? '';`);
+      lines.push('    }));');
     }
   }
 
@@ -804,22 +810,22 @@ export function generateComponent(parseResult, options = {}) {
       } else {
         ref = `this._${pb.expr}()`;
       }
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${cc.varName}.setAttribute('${pb.attr}', ${ref} ?? '');`);
-      lines.push('    });');
+      lines.push('    }));');
     }
   }
 
   // User effects
   for (const eff of effects) {
     const body = transformMethodBody(eff.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
-    lines.push('    __effect(() => {');
+    lines.push('    this.__disposers.push(__effect(() => {');
     // Indent each line of the body
     const bodyLines = body.split('\n');
     for (const line of bodyLines) {
       lines.push(`      ${line}`);
     }
-    lines.push('    });');
+    lines.push('    }));');
   }
 
   // Watcher effects
@@ -837,7 +843,7 @@ export function generateComponent(parseResult, options = {}) {
       } else {
         watchRef = `this._${w.target}()`;
       }
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.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};`);
@@ -847,12 +853,12 @@ export function generateComponent(parseResult, options = {}) {
       }
       lines.push('      }');
       lines.push(`      this.__prev_${w.target} = ${w.newParam};`);
-      lines.push('    });');
+      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('    this.__disposers.push(__effect(() => {');
       lines.push(`      const ${w.newParam} = ${getterExpr};`);
       lines.push(`      if (this.${prevName} !== undefined) {`);
       lines.push(`        const ${w.oldParam} = this.${prevName};`);
@@ -862,7 +868,7 @@ export function generateComponent(parseResult, options = {}) {
       }
       lines.push('      }');
       lines.push(`      this.${prevName} = ${w.newParam};`);
-      lines.push('    });');
+      lines.push('    }));');
     }
   }
 
@@ -875,28 +881,28 @@ export function generateComponent(parseResult, options = {}) {
   // Show effects — one __effect per ShowBinding
   for (const sb of showBindings) {
     const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
-    lines.push('    __effect(() => {');
+    lines.push('    this.__disposers.push(__effect(() => {');
     lines.push(`      this.${sb.varName}.style.display = (${expr}) ? '' : 'none';`);
-    lines.push('    });');
+    lines.push('    }));');
   }
 
   // Model effects — signal → DOM (one __effect per ModelBinding)
   for (const mb of modelBindings) {
     if (mb.prop === 'checked' && mb.radioValue !== null) {
       // Radio: compare signal value to radioValue
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${mb.varName}.checked = (this._${mb.signal}() === '${mb.radioValue}');`);
-      lines.push('    });');
+      lines.push('    }));');
     } else if (mb.prop === 'checked') {
       // Checkbox: coerce to boolean
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${mb.varName}.checked = !!this._${mb.signal}();`);
-      lines.push('    });');
+      lines.push('    }));');
     } else {
       // Value-based (text, number, textarea, select): nullish coalesce to ''
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${mb.varName}.value = this._${mb.signal}() ?? '';`);
-      lines.push('    });');
+      lines.push('    }));');
     }
   }
 
@@ -918,44 +924,44 @@ export function generateComponent(parseResult, options = {}) {
   for (const ab of attrBindings) {
     const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
     if (ab.kind === 'attr') {
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      const __v = ${expr};`);
       lines.push(`      if (__v || __v === '') { this.${ab.varName}.setAttribute('${ab.attr}', __v); }`);
       lines.push(`      else { this.${ab.varName}.removeAttribute('${ab.attr}'); }`);
-      lines.push('    });');
+      lines.push('    }));');
     } else if (ab.kind === 'bool') {
-      lines.push('    __effect(() => {');
+      lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${ab.varName}.${ab.attr} = !!(${expr});`);
-      lines.push('    });');
+      lines.push('    }));');
     } else if (ab.kind === 'class') {
       if (ab.expression.trimStart().startsWith('{')) {
         // Object expression: iterate entries, classList.add/remove
-        lines.push('    __effect(() => {');
+        lines.push('    this.__disposers.push(__effect(() => {');
         lines.push(`      const __obj = ${expr};`);
         lines.push('      for (const [__k, __val] of Object.entries(__obj)) {');
         lines.push(`        __val ? this.${ab.varName}.classList.add(__k) : this.${ab.varName}.classList.remove(__k);`);
         lines.push('      }');
-        lines.push('    });');
+        lines.push('    }));');
       } else {
         // String expression: set className
-        lines.push('    __effect(() => {');
+        lines.push('    this.__disposers.push(__effect(() => {');
         lines.push(`      this.${ab.varName}.className = ${expr};`);
-        lines.push('    });');
+        lines.push('    }));');
       }
     } else if (ab.kind === 'style') {
       if (ab.expression.trimStart().startsWith('{')) {
         // Object expression: iterate entries, set style[key]
-        lines.push('    __effect(() => {');
+        lines.push('    this.__disposers.push(__effect(() => {');
         lines.push(`      const __obj = ${expr};`);
         lines.push('      for (const [__k, __val] of Object.entries(__obj)) {');
         lines.push(`        this.${ab.varName}.style[__k] = __val;`);
         lines.push('      }');
-        lines.push('    });');
+        lines.push('    }));');
       } else {
         // String expression: set cssText
-        lines.push('    __effect(() => {');
+        lines.push('    this.__disposers.push(__effect(() => {');
         lines.push(`      this.${ab.varName}.style.cssText = ${expr};`);
-        lines.push('    });');
+        lines.push('    }));');
       }
     }
   }
@@ -963,7 +969,7 @@ export function generateComponent(parseResult, options = {}) {
   // ── if effects ──
   for (const ifBlock of ifBlocks) {
     const vn = ifBlock.varName;
-    lines.push('    __effect(() => {');
+    lines.push('    this.__disposers.push(__effect(() => {');
     lines.push('      let __branch = null;');
     for (let i = 0; i < ifBlock.branches.length; i++) {
       const branch = ifBlock.branches[i];
@@ -1002,7 +1008,7 @@ export function generateComponent(parseResult, options = {}) {
     }
     lines.push('      }');
     lines.push(`      this.${vn}_active = __branch;`);
-    lines.push('    });');
+    lines.push('    }));');
   }
 
   // ── each effects ──
@@ -1016,7 +1022,7 @@ export function generateComponent(parseResult, options = {}) {
     // Transform the source expression
     const sourceExpr = transformForExpr(source, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
 
-    lines.push('    __effect(() => {');
+    lines.push('    this.__disposers.push(__effect(() => {');
     lines.push(`      const __source = ${sourceExpr};`);
     lines.push('');
     lines.push("      const __iter = typeof __source === 'number'");
@@ -1058,7 +1064,7 @@ export function generateComponent(parseResult, options = {}) {
       lines.push('');
       lines.push(`      this.${vn}_nodes = __newNodes;`);
       lines.push(`      this.${vn}_keyMap = __newMap;`);
-      lines.push('    });');
+      lines.push('    }));');
     } else {
       // ── Non-keyed: destroy all and recreate (original behavior) ──
       lines.push(`      for (const n of this.${vn}_nodes) n.remove();`);
@@ -1073,7 +1079,7 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`        this.${vn}_anchor.parentNode.insertBefore(node, this.${vn}_anchor);`);
       lines.push(`        this.${vn}_nodes.push(node);`);
       lines.push('      });');
-      lines.push('    });');
+      lines.push('    }));');
     }
   }
 
@@ -1098,10 +1104,11 @@ export function generateComponent(parseResult, options = {}) {
   lines.push('  }');
   lines.push('');
 
-  // disconnectedCallback (cleanup: abort listeners + user hooks)
+  // disconnectedCallback (cleanup: abort listeners + dispose effects + user hooks)
   lines.push('  disconnectedCallback() {');
   lines.push('    this.__connected = false;');
   lines.push('    this.__ac.abort();');
+  lines.push('    this.__disposers.forEach(d => d());');
   if (onDestroyHooks.length > 0) {
     for (const hook of onDestroyHooks) {
       const body = transformMethodBody(hook.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);

package/lib/reactive-runtime.js

@@ -64,7 +64,9 @@ function __computed(fn) {
 
 function __effect(fn) {
   let _cleanup = null;
+  let _active = true;
   const run = () => {
+    if (!_active) return;
     if (typeof _cleanup === 'function') _cleanup();
     const prev = __currentEffect;
     __currentEffect = run;
@@ -72,6 +74,7 @@ function __effect(fn) {
     __currentEffect = prev;
   };
   run();
+  return () => { _active = false; if (typeof _cleanup === 'function') _cleanup(); };
 }
 
 function __batch(fn) {

package/package.json

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