rip-lang 3.7.3 → 3.8.8

package/src/compiler.js

@@ -201,9 +201,7 @@ export class CodeGenerator {
 
     // Control flow — simple
     'break': 'generateBreak',
-    'break-if': 'generateBreakIf',
     'continue': 'generateContinue',
-    'continue-if': 'generateContinueIf',
     '?': 'generateExistential',
     '?:': 'generateTernary',
     '|>': 'generatePipe',
@@ -276,6 +274,7 @@ export class CodeGenerator {
     this.programVars = new Set();
     this.functionVars = new Map();
     this.helpers = new Set();
+    this.scopeStack = [];  // Track enclosing function scopes for proper variable hoisting
     this.collectProgramVariables(sexpr);
     let code = this.generate(sexpr);
 
@@ -310,14 +309,13 @@ export class CodeGenerator {
     collect(sexpr);
 
     // Match output lines to collected statement locations in parallel.
-    // Skip generated lines that have no source correspondence.
+    // Skip lines with no source correspondence (preamble, braces, etc.).
     let lines = code.split('\n');
     let locIdx = 0;
     for (let outLine = 0; outLine < lines.length; outLine++) {
       let line = lines[outLine];
       let trimmed = line.trim();
 
-      // Skip lines with no source correspondence
       if (!trimmed || trimmed === '}' || trimmed === '});') continue;
       if (trimmed.startsWith('let ') || trimmed.startsWith('var ')) continue;
       if (trimmed.startsWith('const slice') || trimmed.startsWith('const modulo') || trimmed.startsWith('const toSearchable')) continue;
@@ -358,6 +356,7 @@ export class CodeGenerator {
     }
 
     if (head === 'readonly') return;
+    if (head === 'component') return;  // Component body has its own scope
 
     if (CodeGenerator.ASSIGNMENT_OPS.has(head)) {
       let [target, value] = rest;
@@ -715,7 +714,7 @@ export class CodeGenerator {
 
     if (this.usesTemplates && !skip) {
       if (typeof globalThis !== 'undefined' && globalThis.__ripComponent) {
-        code += 'const { isSignal, __pushComponent, __popComponent, setContext, getContext, hasContext, __cx__ } = globalThis.__ripComponent;\n';
+        code += 'const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component } = globalThis.__ripComponent;\n';
       } else {
         code += this.getComponentRuntime();
       }
@@ -928,11 +927,17 @@ export class CodeGenerator {
 
   generatePropertyAccess(head, rest, context, sexpr) {
     let [obj, prop] = rest;
+    // In subclass constructors, rewrite @param refs (this.x) to _x for super() safety
+    if (this._atParamMap && obj === 'this') {
+      let mapped = this._atParamMap.get(str(prop));
+      if (mapped) return mapped;
+    }
     this.suppressReactiveUnwrap = true;
     let objCode = this.generate(obj, 'value');
     this.suppressReactiveUnwrap = false;
     let needsParens = CodeGenerator.NUMBER_LITERAL_RE.test(objCode) ||
-                      ((this.is(obj, 'object') || this.is(obj, 'await') || this.is(obj, 'yield')));
+                      objCode.startsWith('await ') ||
+                      ((this.is(obj, 'object') || this.is(obj, 'yield')));
     let base = needsParens ? `(${objCode})` : objCode;
     if (meta(prop, 'await') === true) return `await ${base}.${str(prop)}()`;
     if (meta(prop, 'predicate')) return `(${base}.${str(prop)} != null)`;
@@ -1133,9 +1138,7 @@ export class CodeGenerator {
   // ---------------------------------------------------------------------------
 
   generateBreak()    { return 'break'; }
-  generateBreakIf(head, rest)    { return `if (${this.generate(rest[0], 'value')}) break`; }
   generateContinue() { return 'continue'; }
-  generateContinueIf(head, rest) { return `if (${this.generate(rest[0], 'value')}) continue`; }
 
   generateExistential(head, rest) {
     return `(${this.generate(rest[0], 'value')} != null)`;
@@ -1573,7 +1576,11 @@ export class CodeGenerator {
       let keyCode;
       if (this.is(key, 'dynamicKey')) keyCode = `[${this.generate(key[1], 'value')}]`;
       else if (this.is(key, 'str')) keyCode = `[${this.generate(key, 'value')}]`;
-      else keyCode = this.generate(key, 'value');
+      else {
+        this.suppressReactiveUnwrap = true;
+        keyCode = this.generate(key, 'value');
+        this.suppressReactiveUnwrap = false;
+      }
       let valCode = this.generate(value, 'value');
       if (operator === '=') return `${keyCode} = ${valCode}`;
       if (operator === ':') return `${keyCode}: ${valCode}`;
@@ -1728,6 +1735,65 @@ export class CodeGenerator {
   // Comprehensions
   // ---------------------------------------------------------------------------
 
+  // Shared: parse a for-in iterator and return { header, setup }.
+  //   header: the for(...) clause (no trailing brace)
+  //   setup:  any `const x = arr[i]` preamble line, or null
+  _forInHeader(vars, iterable, step) {
+    let va = Array.isArray(vars) ? vars : [vars];
+    let noVar = va.length === 0;
+    let [itemVar, indexVar] = noVar ? ['_i', null] : va;
+    let ivp = (this.is(itemVar, 'array') || this.is(itemVar, 'object'))
+      ? this.generateDestructuringPattern(itemVar) : itemVar;
+
+    if (step && step !== null) {
+      let ih = Array.isArray(iterable) && iterable[0];
+      if (ih instanceof String) ih = str(ih);
+      let isRange = ih === '..' || ih === '...';
+      if (isRange) {
+        let isExcl = ih === '...';
+        let [s, e] = iterable.slice(1);
+        let sc = this.generate(s, 'value'), ec = this.generate(e, 'value'), stc = this.generate(step, 'value');
+        return { header: `for (let ${ivp} = ${sc}; ${ivp} ${isExcl ? '<' : '<='} ${ec}; ${ivp} += ${stc})`, setup: null };
+      }
+      let ic = this.generate(iterable, 'value'), idxN = indexVar || '_i', stc = this.generate(step, 'value');
+      let isNeg = this.is(step, '-', 1);
+      let isMinus1 = isNeg && (step[1] === '1' || step[1] === 1 || str(step[1]) === '1');
+      let isPlus1 = !isNeg && (step === '1' || step === 1 || str(step) === '1');
+      let update = isMinus1 ? `${idxN}--` : isPlus1 ? `${idxN}++` : `${idxN} += ${stc}`;
+      let header = isNeg
+        ? `for (let ${idxN} = ${ic}.length - 1; ${idxN} >= 0; ${update})`
+        : `for (let ${idxN} = 0; ${idxN} < ${ic}.length; ${update})`;
+      return { header, setup: noVar ? null : `const ${ivp} = ${ic}[${idxN}];` };
+    }
+    if (indexVar) {
+      let ic = this.generate(iterable, 'value');
+      return {
+        header: `for (let ${indexVar} = 0; ${indexVar} < ${ic}.length; ${indexVar}++)`,
+        setup: `const ${ivp} = ${ic}[${indexVar}];`,
+      };
+    }
+    return { header: `for (const ${ivp} of ${this.generate(iterable, 'value')})`, setup: null };
+  }
+
+  // Shared: parse a for-of (object) iterator and return { header, own, vv, oc, kvp }.
+  _forOfHeader(vars, iterable, own) {
+    let va = Array.isArray(vars) ? vars : [vars];
+    let [kv, vv] = va;
+    let kvp = (this.is(kv, 'array') || this.is(kv, 'object'))
+      ? this.generateDestructuringPattern(kv) : kv;
+    let oc = this.generate(iterable, 'value');
+    return { header: `for (const ${kvp} in ${oc})`, own, vv, oc, kvp };
+  }
+
+  // Shared: parse a for-as (iterator) spec and return { header }.
+  _forAsHeader(vars, iterable, isAwait) {
+    let va = Array.isArray(vars) ? vars : [vars];
+    let [fv] = va;
+    let ivp = (this.is(fv, 'array') || this.is(fv, 'object'))
+      ? this.generateDestructuringPattern(fv) : fv;
+    return { header: `for ${isAwait ? 'await ' : ''}(const ${ivp} of ${this.generate(iterable, 'value')})` };
+  }
+
   generateComprehension(head, rest, context) {
     let [expr, iterators, guards] = rest;
     if (context === 'statement') return this.generateComprehensionAsLoop(expr, iterators, guards);
@@ -1742,59 +1808,19 @@ export class CodeGenerator {
     for (let iter of iterators) {
       let [iterType, vars, iterable, stepOrOwn] = iter;
       if (iterType === 'for-in') {
-        let step = stepOrOwn;
-        let va = Array.isArray(vars) ? vars : [vars];
-        let noVar = va.length === 0;
-        let [itemVar, indexVar] = noVar ? ['_i', null] : va;
-        let ivp = ((this.is(itemVar, 'array') || this.is(itemVar, 'object')))
-          ? this.generateDestructuringPattern(itemVar) : itemVar;
-
-        if (step && step !== null) {
-          let ih = Array.isArray(iterable) && iterable[0];
-          if (ih instanceof String) ih = str(ih);
-          let isRange = ih === '..' || ih === '...';
-          if (isRange) {
-            let isExcl = ih === '...';
-            let [s, e] = iterable.slice(1);
-            let sc = this.generate(s, 'value'), ec = this.generate(e, 'value'), stc = this.generate(step, 'value');
-            code += this.indent() + `for (let ${ivp} = ${sc}; ${ivp} ${isExcl ? '<' : '<='} ${ec}; ${ivp} += ${stc}) {\n`;
-            this.indentLevel++;
-          } else {
-            let ic = this.generate(iterable, 'value'), idxN = indexVar || '_i', stc = this.generate(step, 'value');
-            let isNeg = this.is(step, '-', 1);
-            code += isNeg
-              ? this.indent() + `for (let ${idxN} = ${ic}.length - 1; ${idxN} >= 0; ${idxN} += ${stc}) {\n`
-              : this.indent() + `for (let ${idxN} = 0; ${idxN} < ${ic}.length; ${idxN} += ${stc}) {\n`;
-            this.indentLevel++;
-            if (!noVar) code += this.indent() + `const ${ivp} = ${ic}[${idxN}];\n`;
-          }
-        } else if (indexVar) {
-          let ic = this.generate(iterable, 'value');
-          code += this.indent() + `for (let ${indexVar} = 0; ${indexVar} < ${ic}.length; ${indexVar}++) {\n`;
-          this.indentLevel++;
-          code += this.indent() + `const ${ivp} = ${ic}[${indexVar}];\n`;
-        } else {
-          code += this.indent() + `for (const ${ivp} of ${this.generate(iterable, 'value')}) {\n`;
-          this.indentLevel++;
-        }
+        let { header, setup } = this._forInHeader(vars, iterable, stepOrOwn);
+        code += this.indent() + header + ' {\n';
+        this.indentLevel++;
+        if (setup) code += this.indent() + setup + '\n';
       } else if (iterType === 'for-of') {
-        let own = stepOrOwn;
-        let va = Array.isArray(vars) ? vars : [vars];
-        let [kv, vv] = va;
-        let kvp = ((this.is(kv, 'array') || this.is(kv, 'object')))
-          ? this.generateDestructuringPattern(kv) : kv;
-        let oc = this.generate(iterable, 'value');
-        code += this.indent() + `for (const ${kvp} in ${oc}) {\n`;
+        let { header, own, vv, oc, kvp } = this._forOfHeader(vars, iterable, stepOrOwn);
+        code += this.indent() + header + ' {\n';
         this.indentLevel++;
         if (own) code += this.indent() + `if (!Object.hasOwn(${oc}, ${kvp})) continue;\n`;
         if (vv) code += this.indent() + `const ${vv} = ${oc}[${kvp}];\n`;
       } else if (iterType === 'for-as') {
-        let isAwait = iter[3];
-        let va = Array.isArray(vars) ? vars : [vars];
-        let [fv] = va;
-        let ivp = ((this.is(fv, 'array') || this.is(fv, 'object')))
-          ? this.generateDestructuringPattern(fv) : fv;
-        code += this.indent() + `for ${isAwait ? 'await ' : ''}(const ${ivp} of ${this.generate(iterable, 'value')}) {\n`;
+        let { header } = this._forAsHeader(vars, iterable, iter[3]);
+        code += this.indent() + header + ' {\n';
         this.indentLevel++;
       }
     }
@@ -1807,7 +1833,7 @@ export class CodeGenerator {
     let hasCtrl = (node) => {
       if (typeof node === 'string' && (node === 'break' || node === 'continue')) return true;
       if (!Array.isArray(node)) return false;
-      if (['break', 'continue', 'break-if', 'continue-if', 'return', 'throw'].includes(node[0])) return true;
+      if (['break', 'continue', 'return', 'throw'].includes(node[0])) return true;
       if (node[0] === 'if' || node[0] === 'unless') return node.slice(1).some(hasCtrl);
       return node.some(hasCtrl);
     };
@@ -1908,17 +1934,36 @@ export class CodeGenerator {
               let hasAwait = this.containsAwait(body), hasYield = this.containsYield(body);
               let cleanParams = params, autoAssign = [];
               if (mName === 'constructor') {
+                let isSubclass = !!parentClass;
+                let atParamMap = isSubclass ? new Map() : null;
                 cleanParams = params.map(p => {
-                  if (this.is(p, '.') && p[1] === 'this') { autoAssign.push(`this.${p[2]} = ${p[2]}`); return p[2]; }
+                  // Handle @param: ['.', 'this', 'name']
+                  if (this.is(p, '.') && p[1] === 'this') {
+                    let name = p[2];
+                    let param = isSubclass ? `_${name}` : name;
+                    autoAssign.push(`this.${name} = ${param}`);
+                    if (isSubclass) atParamMap.set(name, param);
+                    return param;
+                  }
+                  // Handle @param with default: ['default', ['.', 'this', 'name'], value]
+                  if (this.is(p, 'default') && this.is(p[1], '.') && p[1][1] === 'this') {
+                    let name = p[1][2];
+                    let param = isSubclass ? `_${name}` : name;
+                    autoAssign.push(`this.${name} = ${param}`);
+                    if (isSubclass) atParamMap.set(name, param);
+                    return ['default', param, p[2]];
+                  }
                   return p;
                 });
                 for (let bm of boundMethods) autoAssign.unshift(`this.${bm} = this.${bm}.bind(this)`);
+                if (atParamMap?.size > 0) this._atParamMap = atParamMap;
               }
               let pList = this.generateParamList(cleanParams);
               let prefix = (isStatic ? 'static ' : '') + (hasAwait ? 'async ' : '') + (hasYield ? '*' : '');
               code += this.indent() + `${prefix}${mName}(${pList}) `;
               if (!isComputed) this.currentMethodName = mName;
               code += this.generateMethodBody(body, autoAssign, mName === 'constructor', cleanParams);
+              this._atParamMap = null;
               this.currentMethodName = null;
               code += '\n';
             } else if (isStatic) {
@@ -2186,10 +2231,16 @@ export class CodeGenerator {
     if (Array.isArray(params)) params.forEach(extractPN);
 
     let bodyVars = this.collectFunctionVariables(body);
-    let newVars = new Set([...bodyVars].filter(v => !this.programVars.has(v) && !this.reactiveVars?.has(v) && !paramNames.has(v)));
+    let newVars = new Set([...bodyVars].filter(v =>
+      !this.programVars.has(v) && !this.reactiveVars?.has(v) && !paramNames.has(v) &&
+      !this.scopeStack.some(s => s.has(v))  // don't re-declare variables from enclosing scopes
+    ));
     let noRetStmts = ['return', 'throw', 'break', 'continue'];
     let loopStmts = ['for-in', 'for-of', 'for-as', 'while', 'until', 'loop'];
 
+    // Track this function's scope so nested functions don't re-declare its variables
+    this.scopeStack.push(new Set([...newVars, ...paramNames]));
+
     if (this.is(body, 'block')) {
       let statements = this.unwrapBlock(body);
 
@@ -2284,16 +2335,26 @@ export class CodeGenerator {
 
       this.indentLevel--;
       code += this.indent() + '}';
+      this.scopeStack.pop();
       this.sideEffectOnly = prevSEO;
       return code;
     }
 
     // Single expression
     this.sideEffectOnly = prevSEO;
-    if (isConstructor || this.hasExplicitControlFlow(body)) return `{ ${this.generate(body, 'statement')}; }`;
-    if (Array.isArray(body) && (noRetStmts.includes(body[0]) || loopStmts.includes(body[0]))) return `{ ${this.generate(body, 'statement')}; }`;
-    if (sideEffectOnly) return `{ ${this.generate(body, 'statement')}; return; }`;
-    return `{ return ${this.generate(body, 'value')}; }`;
+    let result;
+    if (isConstructor && autoAssignments.length > 0) {
+      // Constructor with @params as a single expression — need to emit autoAssignments
+      let isSuper = Array.isArray(body) && body[0] === 'super';
+      let bodyCode = this.generate(body, 'statement');
+      let assigns = autoAssignments.map(a => `${a};`).join(' ');
+      result = isSuper ? `{ ${bodyCode}; ${assigns} }` : `{ ${assigns} ${bodyCode}; }`;
+    } else if (isConstructor || this.hasExplicitControlFlow(body)) result = `{ ${this.generate(body, 'statement')}; }`;
+    else if (Array.isArray(body) && (noRetStmts.includes(body[0]) || loopStmts.includes(body[0]))) result = `{ ${this.generate(body, 'statement')}; }`;
+    else if (sideEffectOnly) result = `{ ${this.generate(body, 'statement')}; return; }`;
+    else result = `{ return ${this.generate(body, 'value')}; }`;
+    this.scopeStack.pop();
+    return result;
   }
 
   generateFunctionBody(body, params = [], sideEffectOnly = false) {
@@ -2368,34 +2429,10 @@ export class CodeGenerator {
     if (iterators.length === 1) {
       let [iterType, vars, iterable, stepOrOwn] = iterators[0];
       if (iterType === 'for-in') {
-        let step = stepOrOwn;
-        let va = Array.isArray(vars) ? vars : [vars];
-        let noVar = va.length === 0;
-        let [itemVar, indexVar] = noVar ? ['_i', null] : va;
-        let ivp = ((this.is(itemVar, 'array') || this.is(itemVar, 'object')))
-          ? this.generateDestructuringPattern(itemVar) : itemVar;
-
-        if (step && step !== null) {
-          let ih = Array.isArray(iterable) && iterable[0];
-          if (ih instanceof String) ih = str(ih);
-          let isRange = ih === '..' || ih === '...';
-          if (isRange) {
-            let isExcl = ih === '...';
-            let [s, e] = iterable.slice(1);
-            code += this.indent() + `for (let ${ivp} = ${this.generate(s, 'value')}; ${ivp} ${isExcl ? '<' : '<='} ${this.generate(e, 'value')}; ${ivp} += ${this.generate(step, 'value')}) {\n`;
-          } else {
-            let ic = this.generate(iterable, 'value'), idxN = indexVar || '_i', stc = this.generate(step, 'value');
-            let isNeg = this.is(step, '-', 1);
-            code += isNeg
-              ? this.indent() + `for (let ${idxN} = ${ic}.length - 1; ${idxN} >= 0; ${idxN} += ${stc}) {\n`
-              : this.indent() + `for (let ${idxN} = 0; ${idxN} < ${ic}.length; ${idxN} += ${stc}) {\n`;
-            this.indentLevel++;
-            if (!noVar) code += this.indent() + `const ${ivp} = ${ic}[${idxN}];\n`;
-          }
-        } else {
-          code += this.indent() + `for (const ${ivp} of ${this.generate(iterable, 'value')}) {\n`;
-        }
+        let { header, setup } = this._forInHeader(vars, iterable, stepOrOwn);
+        code += this.indent() + header + ' {\n';
         this.indentLevel++;
+        if (setup) code += this.indent() + setup + '\n';
         if (guards && guards.length > 0) {
           code += this.indent() + `if (${guards.map(g => this.generate(g, 'value')).join(' && ')}) {\n`;
           this.indentLevel++;
@@ -2412,155 +2449,51 @@ export class CodeGenerator {
 
   generateComprehensionAsLoop(expr, iterators, guards) {
     let code = '';
+    let guardCond = guards?.length ? guards.map(g => this.generate(g, 'value')).join(' && ') : null;
+
+    // Helper: emit the loop body with optional guard wrapping
+    let emitBody = () => {
+      if (guardCond) {
+        code += this.indent() + `if (${guardCond}) {\n`;
+        this.indentLevel++;
+        code += this.indent() + this.generate(expr, 'statement') + ';\n';
+        this.indentLevel--; code += this.indent() + '}\n';
+      } else {
+        code += this.indent() + this.generate(expr, 'statement') + ';\n';
+      }
+    };
+
     if (iterators.length === 1) {
       let [iterType, vars, iterable, stepOrOwn] = iterators[0];
 
       if (iterType === 'for-in') {
-        let step = stepOrOwn;
-        let va = Array.isArray(vars) ? vars : [vars];
-        let noVar = va.length === 0;
-        let [itemVar, indexVar] = noVar ? ['_i', null] : va;
-        let ivp = ((this.is(itemVar, 'array') || this.is(itemVar, 'object')))
-          ? this.generateDestructuringPattern(itemVar) : itemVar;
-
-        if (step && step !== null) {
-          let ih = Array.isArray(iterable) && iterable[0];
-          if (ih instanceof String) ih = str(ih);
-          let isRange = ih === '..' || ih === '...';
-          if (isRange) {
-            let isExcl = ih === '...';
-            let [s, e] = iterable.slice(1);
-            code += `for (let ${ivp} = ${this.generate(s, 'value')}; ${ivp} ${isExcl ? '<' : '<='} ${this.generate(e, 'value')}; ${ivp} += ${this.generate(step, 'value')}) `;
-          } else {
-            let ic = this.generate(iterable, 'value'), idxN = indexVar || '_i', stc = this.generate(step, 'value');
-            let isNeg = this.is(step, '-', 1);
-            let isMinus1 = isNeg && (step[1] === '1' || step[1] === 1 || str(step[1]) === '1');
-            let isPlus1 = !isNeg && (step === '1' || step === 1 || str(step) === '1');
-            if (isMinus1) code += `for (let ${idxN} = ${ic}.length - 1; ${idxN} >= 0; ${idxN}--) `;
-            else if (isPlus1) code += `for (let ${idxN} = 0; ${idxN} < ${ic}.length; ${idxN}++) `;
-            else if (isNeg) code += `for (let ${idxN} = ${ic}.length - 1; ${idxN} >= 0; ${idxN} += ${stc}) `;
-            else code += `for (let ${idxN} = 0; ${idxN} < ${ic}.length; ${idxN} += ${stc}) `;
-            code += '{\n';
-            this.indentLevel++;
-            if (!noVar) code += this.indent() + `const ${ivp} = ${ic}[${idxN}];\n`;
-          }
-          if (guards?.length) {
-            if (!isRange) code += this.indent();
-            code += '{\n'; this.indentLevel++;
-            code += this.indent() + `if (${guards.map(g => this.generate(g, 'value')).join(' && ')}) {\n`;
-            this.indentLevel++;
-            code += this.indent() + this.generate(expr, 'statement') + ';\n';
-            this.indentLevel--; code += this.indent() + '}\n';
-            this.indentLevel--; code += this.indent() + '}';
-          } else {
-            if (!isRange) code += this.indent();
-            code += '{\n'; this.indentLevel++;
-            code += this.indent() + this.generate(expr, 'statement') + ';\n';
-            this.indentLevel--; code += this.indent() + '}';
-          }
-          if (!isRange) { this.indentLevel--; code += '\n' + this.indent() + '}'; }
-          return code;
-        }
-
-        if (indexVar) {
-          let ic = this.generate(iterable, 'value');
-          code += `for (let ${indexVar} = 0; ${indexVar} < ${ic}.length; ${indexVar}++) `;
-          code += '{\n'; this.indentLevel++;
-          code += this.indent() + `const ${ivp} = ${ic}[${indexVar}];\n`;
-        } else {
-          code += `for (const ${ivp} of ${this.generate(iterable, 'value')}) `;
-          if (guards?.length) {
-            code += '{\n'; this.indentLevel++;
-            code += this.indent() + `if (${guards.map(g => this.generate(g, 'value')).join(' && ')}) {\n`;
-            this.indentLevel++;
-            code += this.indent() + this.generate(expr, 'statement') + ';\n';
-            this.indentLevel--; code += this.indent() + '}\n';
-            this.indentLevel--; code += this.indent() + '}';
-          } else {
-            code += '{\n'; this.indentLevel++;
-            code += this.indent() + this.generate(expr, 'statement') + ';\n';
-            this.indentLevel--; code += this.indent() + '}';
-          }
-          return code;
-        }
-
-        // Fall through for indexVar case
-        if (guards?.length) {
-          code += this.indent() + `if (${guards.map(g => this.generate(g, 'value')).join(' && ')}) {\n`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-          this.indentLevel--; code += this.indent() + '}\n';
-        } else {
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-        }
+        let { header, setup } = this._forInHeader(vars, iterable, stepOrOwn);
+        code += header + ' {\n';
+        this.indentLevel++;
+        if (setup) code += this.indent() + setup + '\n';
+        emitBody();
         this.indentLevel--;
         code += this.indent() + '}';
         return code;
       }
 
       if (iterType === 'for-as') {
-        let va = Array.isArray(vars) ? vars : [vars];
-        let [fv] = va;
-        let ivp = ((this.is(fv, 'array') || this.is(fv, 'object')))
-          ? this.generateDestructuringPattern(fv) : fv;
-        code += `for (const ${ivp} of ${this.generate(iterable, 'value')}) `;
-        if (guards?.length) {
-          code += '{\n'; this.indentLevel++;
-          code += this.indent() + `if (${guards.map(g => this.generate(g, 'value')).join(' && ')}) {\n`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-          this.indentLevel--; code += this.indent() + '}\n';
-          this.indentLevel--; code += this.indent() + '}';
-        } else {
-          code += '{\n'; this.indentLevel++;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-          this.indentLevel--; code += this.indent() + '}';
-        }
+        let { header } = this._forAsHeader(vars, iterable, stepOrOwn);
+        code += header + ' {\n';
+        this.indentLevel++;
+        emitBody();
+        this.indentLevel--;
+        code += this.indent() + '}';
         return code;
       }
 
       if (iterType === 'for-of') {
-        let va = Array.isArray(vars) ? vars : [vars];
-        let [kv, vv] = va;
-        let own = stepOrOwn;
-        let oc = this.generate(iterable, 'value');
-        code += `for (const ${kv} in ${oc}) {\n`;
+        let { header, own, vv, oc, kvp } = this._forOfHeader(vars, iterable, stepOrOwn);
+        code += header + ' {\n';
         this.indentLevel++;
-        if (own && !vv && !guards?.length) {
-          code += this.indent() + `if (!Object.hasOwn(${oc}, ${kv})) continue;\n`;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-        } else if (own && vv && guards?.length) {
-          code += this.indent() + `if (Object.hasOwn(${oc}, ${kv})) {\n`;
-          this.indentLevel++;
-          code += this.indent() + `const ${vv} = ${oc}[${kv}];\n`;
-          code += this.indent() + `if (${guards.map(g => this.generate(g, 'value')).join(' && ')}) {\n`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-          this.indentLevel--; code += this.indent() + '}\n';
-          this.indentLevel--; code += this.indent() + '}\n';
-        } else if (own && vv) {
-          code += this.indent() + `if (Object.hasOwn(${oc}, ${kv})) {\n`;
-          this.indentLevel++;
-          code += this.indent() + `const ${vv} = ${oc}[${kv}];\n`;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-          this.indentLevel--; code += this.indent() + '}\n';
-        } else if (vv && guards?.length) {
-          code += this.indent() + `const ${vv} = ${oc}[${kv}];\n`;
-          code += this.indent() + `if (${guards.map(g => this.generate(g, 'value')).join(' && ')}) {\n`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-          this.indentLevel--; code += this.indent() + '}\n';
-        } else if (vv) {
-          code += this.indent() + `const ${vv} = ${oc}[${kv}];\n`;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-        } else if (guards?.length) {
-          code += this.indent() + `if (${guards.map(g => this.generate(g, 'value')).join(' && ')}) {\n`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-          this.indentLevel--; code += this.indent() + '}\n';
-        } else {
-          code += this.indent() + this.generate(expr, 'statement') + ';\n';
-        }
+        if (own) code += this.indent() + `if (!Object.hasOwn(${oc}, ${kvp})) continue;\n`;
+        if (vv) code += this.indent() + `const ${vv} = ${oc}[${kvp}];\n`;
+        emitBody();
         this.indentLevel--;
         code += this.indent() + '}';
         return code;
@@ -3043,6 +2976,7 @@ const __primitiveCoercion = {
 };
 
 function __state(initialValue) {
+  if (initialValue != null && typeof initialValue === 'object' && typeof initialValue.read === 'function') return initialValue;
   let value = initialValue;
   const subscribers = new Set();
   let notifying = false;
@@ -3142,14 +3076,19 @@ function __effect(fn) {
     dependencies: new Set(),
 
     run() {
+      if (effect._cleanup) { effect._cleanup(); effect._cleanup = null; }
       for (const dep of effect.dependencies) dep.delete(effect);
       effect.dependencies.clear();
       const prev = __currentEffect;
       __currentEffect = effect;
-      try { fn(); } finally { __currentEffect = prev; }
+      try {
+        const result = fn();
+        if (typeof result === 'function') effect._cleanup = result;
+      } finally { __currentEffect = prev; }
     },
 
     dispose() {
+      if (effect._cleanup) { effect._cleanup(); effect._cleanup = null; }
       for (const dep of effect.dependencies) dep.delete(effect);
       effect.dependencies.clear();
     }