rip-lang 3.7.4 → 3.8.8

package/docs/rip-fav.svg

@@ -0,0 +1,5 @@
+<svg width="420" height="420" viewBox="0 0 420 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="210" cy="210" r="210" fill="white"/>
+<path d="M114.5 263C79.772 263 45.7872 275.051 34.271 283.579C33.4994 284.151 34.012 285.229 34.9656 285.117C73.1916 280.629 115.309 292.74 146.5 304C178.5 315.552 221 336 269 336C314.651 336 372.074 310.499 386.401 293.944C387.038 293.208 386.301 292.353 385.435 292.799C376.614 297.341 364.243 306.018 316.073 306.948C265.273 307.928 159 263 114.5 263Z" fill="#0389FF"/>
+<path d="M223.46 84C239.53 84 253.592 86.9253 265.645 92.7754C277.697 98.6254 287.071 107.048 293.767 118.043C300.462 129.038 303.811 142.219 303.811 157.584C303.811 173.09 300.357 186.165 293.449 196.808C287.068 206.742 278.259 214.402 267.026 219.792L309.603 297.958C297.885 297.851 283.094 295.413 266.52 291.62C257.58 289.574 248.214 287.157 238.645 284.547L209.127 229.054H188.782V270.333C176.996 266.968 165.515 263.788 154.823 261.15C146.038 258.984 137.665 257.152 130 255.885V84H223.46ZM188.782 183.381H209.505C216.412 183.381 222.297 182.535 227.16 180.844C232.094 179.082 235.865 176.297 238.473 172.491C241.151 168.685 242.49 163.716 242.49 157.584C242.49 151.382 241.151 146.342 238.473 142.466C235.865 138.519 232.094 135.628 227.16 133.796C222.297 131.893 216.412 130.941 209.505 130.941H188.782V183.381Z" fill="#BB0000"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.7.4",
+  "version": "3.8.8",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",
@@ -67,7 +67,7 @@
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@rip-lang/api": "1.1.5",
-    "@rip-lang/ui": "0.2.0"
+    "@rip-lang/api": "workspace:*",
+    "@rip-lang/ui": "workspace:*"
   }
 }

package/scripts/serve.js

@@ -23,7 +23,8 @@ const MIME_TYPES = {
   '.png': 'image/png',
   '.jpg': 'image/jpeg',
   '.svg': 'image/svg+xml',
-  '.ico': 'image/x-icon'
+  '.ico': 'image/x-icon',
+  '.rip': 'text/plain; charset=utf-8'
 };
 
 // Request handler for serving files
@@ -53,7 +54,7 @@ function handleRequest(req) {
         headers: {
           'Content-Type': MIME_TYPES[ext] || 'application/octet-stream',
           'Content-Encoding': 'br',
-          'Cache-Control': 'public, max-age=31536000'
+          'Cache-Control': 'no-cache'
         }
       });
     } catch (e) {

package/src/browser.js

@@ -9,8 +9,8 @@ export { CodeGenerator, Compiler, compile, compileToJS, formatSExpr, getReactive
 export const VERSION = "0.0.0";
 export const BUILD_DATE = "0000-00-00@00:00:00GMT";
 
-// Import compileToJS for use in rip() function
-import { compileToJS, getReactiveRuntime } from './compiler.js';
+// Import compiler functions for use in rip() function and globalThis registration
+import { compile, compileToJS, formatSExpr, getReactiveRuntime, getComponentRuntime } from './compiler.js';
 
 // Eagerly register Rip's reactive primitives on globalThis so that
 // framework code (ui.rip) can use them directly without the compiler
@@ -26,6 +26,7 @@ const dedent = s => {
 }
 
 // Browser runtime for executing <script type="text/rip"> tags
+// Supports both inline scripts and external files via src attribute
 async function processRipScripts() {
   const scripts = document.querySelectorAll('script[type="text/rip"]');
 
@@ -33,7 +34,18 @@ async function processRipScripts() {
     if (script.hasAttribute('data-rip-processed')) continue;
 
     try {
-      const ripCode = dedent(script.textContent);
+      let ripCode;
+      if (script.src) {
+        const response = await fetch(script.src);
+        if (!response.ok) {
+          console.error(`Rip: failed to fetch ${script.src} (${response.status})`);
+          continue;
+        }
+        ripCode = await response.text();
+      } else {
+        ripCode = dedent(script.textContent);
+      }
+
       let jsCode;
       try {
         jsCode = compileToJS(ripCode);
@@ -113,13 +125,17 @@ if (typeof globalThis !== 'undefined') {
   globalThis.rip = rip;
   globalThis.importRip = importRip;
   globalThis.compileToJS = compileToJS;
+  globalThis.__ripExports = { compile, compileToJS, formatSExpr, VERSION, BUILD_DATE, getReactiveRuntime, getComponentRuntime };
 }
 
 // Auto-process scripts when this module loads
+// Expose __ripScriptsReady promise so other modules can await completion
 if (typeof document !== 'undefined') {
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', processRipScripts);
+    globalThis.__ripScriptsReady = new Promise(resolve => {
+      document.addEventListener('DOMContentLoaded', () => processRipScripts().then(resolve));
+    });
   } else {
-    processRipScripts();
+    globalThis.__ripScriptsReady = processRipScripts();
   }
 }

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',
@@ -311,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;
@@ -359,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;
@@ -929,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)`;
@@ -1134,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)`;
@@ -1574,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}`;
@@ -1729,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);
@@ -1743,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++;
       }
     }
@@ -1808,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);
     };
@@ -1909,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) {
@@ -2299,7 +2343,13 @@ export class CodeGenerator {
     // Single expression
     this.sideEffectOnly = prevSEO;
     let result;
-    if (isConstructor || this.hasExplicitControlFlow(body)) result = `{ ${this.generate(body, 'statement')}; }`;
+    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')}; }`;
@@ -2379,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++;
@@ -2423,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;
@@ -3154,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();
     }