rip-lang 3.7.4 → 3.8.9

package/docs/dist/rip.browser.js

@@ -1354,7 +1354,7 @@ var NEWLINE_RE = /^(?:\n[^\n\S]*)+/;
 var COMMENT_RE = /^(\s*)###([^#][\s\S]*?)(?:###([^\n\S]*)|###$)|^((?:\s*#(?!##[^#]).*)+)/;
 var CODE_RE = /^[-=]>/;
 var REACTIVE_RE = /^(?:~[=>]|=!)/;
-var STRING_START_RE = /^(?:'''|"""|'|")/;
+var STRING_START_RE = /^(?:'''\\|"""\\|'''|"""|'|")/;
 var STRING_SINGLE_RE = /^(?:[^\\']|\\[\s\S])*/;
 var STRING_DOUBLE_RE = /^(?:[^\\"#$]|\\[\s\S]|\#(?!\{)|\$(?!\{))*/;
 var HEREDOC_SINGLE_RE = /^(?:[^\\']|\\[\s\S]|'(?!''))*/;
@@ -1650,6 +1650,20 @@ class Lexer {
     return fallback;
   }
   commentToken() {
+    if (this.inRenderBlock) {
+      if (/^#[a-zA-Z_]/.test(this.chunk)) {
+        let prev = this.prev();
+        if (prev && (prev[0] === "IDENTIFIER" || prev[0] === "PROPERTY"))
+          return 0;
+        let m = /^#([a-zA-Z_][\w-]*)/.exec(this.chunk);
+        if (m) {
+          this.emit("IDENTIFIER", "div#" + m[1]);
+          return m[0].length;
+        }
+      }
+      if (/^\s+#[a-zA-Z_]/.test(this.chunk))
+        return 0;
+    }
     let match = COMMENT_RE.exec(this.chunk);
     if (!match)
       return 0;
@@ -1766,12 +1780,14 @@ class Lexer {
     if (!m)
       return 0;
     let quote = m[0];
+    let raw = quote.length > 1 && quote.endsWith("\\");
+    let baseQuote = raw ? quote.slice(0, -1) : quote;
     let prev = this.prev();
     if (prev && this.prevVal() === "from" && (this.seenImport || this.seenExport)) {
       prev[0] = "FROM";
     }
     let regex;
-    switch (quote) {
+    switch (baseQuote) {
       case "'":
         regex = STRING_SINGLE_RE;
         break;
@@ -1785,13 +1801,13 @@ class Lexer {
         regex = HEREDOC_DOUBLE_RE;
         break;
     }
-    let { tokens: parts, index: end } = this.matchWithInterpolations(regex, quote);
-    let heredoc = quote.length === 3;
+    let { tokens: parts, index: end } = this.matchWithInterpolations(regex, quote, baseQuote);
+    let heredoc = baseQuote.length === 3;
     let indent = null;
     if (heredoc) {
-      indent = this.processHeredocIndent(end, quote, parts);
+      indent = this.processHeredocIndent(end, baseQuote, parts);
     }
-    this.mergeInterpolationTokens(parts, { quote, indent, endOffset: end });
+    this.mergeInterpolationTokens(parts, { quote: baseQuote, indent, endOffset: end, raw });
     return end;
   }
   processHeredocIndent(end, quote, tokens) {
@@ -1875,7 +1891,7 @@ class Lexer {
     }
     return { tokens, index: offset + closingDelimiter.length };
   }
-  mergeInterpolationTokens(tokens, { quote, indent, endOffset }) {
+  mergeInterpolationTokens(tokens, { quote, indent, endOffset, raw }) {
     if (tokens.length > 1) {
       this.emit("STRING_START", "(", { len: quote?.length || 0, data: { quote } });
     }
@@ -1897,6 +1913,9 @@ class Lexer {
         if (i === tokens.length - 1 && quote?.length === 3) {
           processed = processed.replace(/\n[^\S\n]*$/, "");
         }
+        if (raw) {
+          processed = processed.replace(/\\([nrtbfv0\\'"`xu])/g, "\\\\$1");
+        }
         this.emit("STRING", `"${processed}"`, { len: val.length, data: { quote } });
       }
     }
@@ -1936,7 +1955,7 @@ class Lexer {
       let [flags2] = REGEX_FLAGS_RE.exec(this.chunk.slice(index2));
       let end2 = index2 + flags2.length;
       if (parts.length === 1 || !parts.some((p) => p[0] === "TOKENS")) {
-        let body2 = parts[0]?.[1] || "";
+        let body2 = (parts[0]?.[1] || "").replace(/(?<!\\)\//g, "\\/");
         this.emit("REGEX", `/${body2}/${flags2}`, { len: end2, data: { delimiter: "///", heregex: { flags: flags2 } } });
       } else {
         this.emit("REGEX_START", "(", { len: 0 });
@@ -2264,7 +2283,7 @@ class Lexer {
     let isTemplateTag = (name) => {
       return isHtmlTag(name) || isComponent(name);
     };
-    let startsWithHtmlTag = (tokens, i) => {
+    let startsWithTag = (tokens, i) => {
       let j = i;
       while (j > 0) {
         let pt = tokens[j - 1][0];
@@ -2273,7 +2292,7 @@ class Lexer {
         }
         j--;
       }
-      return tokens[j] && tokens[j][0] === "IDENTIFIER" && isHtmlTag(tokens[j][1]);
+      return tokens[j] && tokens[j][0] === "IDENTIFIER" && isTemplateTag(tokens[j][1]);
     };
     this.scanTokens(function(token, i, tokens) {
       let tag = token[0];
@@ -2339,7 +2358,7 @@ class Lexer {
       if (tag === "IDENTIFIER" || tag === "PROPERTY") {
         let next = tokens[i + 1];
         let nextNext = tokens[i + 2];
-        if (next && next[0] === "#" && nextNext && nextNext[0] === "PROPERTY") {
+        if (next && next[0] === "#" && nextNext && (nextNext[0] === "PROPERTY" || nextNext[0] === "IDENTIFIER")) {
           token[1] = token[1] + "#" + nextNext[1];
           if (nextNext.spaced)
             token.spaced = true;
@@ -2405,12 +2424,14 @@ class Lexer {
           return 1;
         }
         let isTemplateElement = false;
-        if (tag === "IDENTIFIER" && isTemplateTag(token[1])) {
+        let prevTag = i > 0 ? tokens[i - 1][0] : null;
+        let isAfterControlFlow = prevTag === "IF" || prevTag === "UNLESS" || prevTag === "WHILE" || prevTag === "UNTIL" || prevTag === "WHEN";
+        if (tag === "IDENTIFIER" && isTemplateTag(token[1]) && !isAfterControlFlow) {
           isTemplateElement = true;
         } else if (tag === "PROPERTY" || tag === "STRING" || tag === "CALL_END" || tag === ")") {
-          isTemplateElement = startsWithHtmlTag(tokens, i);
+          isTemplateElement = startsWithTag(tokens, i);
         } else if (tag === "IDENTIFIER" && i > 1 && tokens[i - 1][0] === "...") {
-          if (startsWithHtmlTag(tokens, i)) {
+          if (startsWithTag(tokens, i)) {
             let commaToken = gen(",", ",", token);
             let arrowToken = gen("->", "->", token);
             arrowToken.newLine = true;
@@ -2419,12 +2440,21 @@ class Lexer {
           }
         }
         if (isTemplateElement) {
-          let callStartToken = gen("CALL_START", "(", token);
-          let arrowToken = gen("->", "->", token);
-          arrowToken.newLine = true;
-          tokens.splice(i + 1, 0, callStartToken, arrowToken);
-          pendingCallEnds.push(currentIndent + 1);
-          return 3;
+          let isClassOrIdTail = tag === "PROPERTY" && i > 0 && (tokens[i - 1][0] === "." || tokens[i - 1][0] === "#");
+          if (tag === "IDENTIFIER" && isTemplateTag(token[1]) || isClassOrIdTail) {
+            let callStartToken = gen("CALL_START", "(", token);
+            let arrowToken = gen("->", "->", token);
+            arrowToken.newLine = true;
+            tokens.splice(i + 1, 0, callStartToken, arrowToken);
+            pendingCallEnds.push(currentIndent + 1);
+            return 3;
+          } else {
+            let commaToken = gen(",", ",", token);
+            let arrowToken = gen("->", "->", token);
+            arrowToken.newLine = true;
+            tokens.splice(i + 1, 0, commaToken, arrowToken);
+            return 3;
+          }
         }
       }
       if (tag === "IDENTIFIER" && isComponent(token[1]) && nextToken && (nextToken[0] === "OUTDENT" || nextToken[0] === "TERMINATOR")) {
@@ -3154,7 +3184,7 @@ var parserInstance = {
       case 229:
         return $[$0 - 4].length === 3 ? ["if", $[$0 - 4][1], $[$0 - 4][2], ["if", $[$0 - 1], $[$0]]] : [...$[$0 - 4], ["if", $[$0 - 1], $[$0]]];
       case 230:
-        return ["unless", $[$0 - 1], $[$0]];
+        return ["if", ["!", $[$0 - 1]], $[$0]];
       case 231:
         return ["if", ["!", $[$0 - 3]], $[$0 - 2], $[$0]];
       case 233:
@@ -3166,7 +3196,7 @@ var parserInstance = {
         return ["?:", $[$0 - 4], $[$0 - 6], $[$0 - 1]];
       case 238:
       case 239:
-        return ["unless", $[$0], [$[$0 - 2]]];
+        return ["if", ["!", $[$0]], [$[$0 - 2]]];
       case 240:
         return ["try", $[$0]];
       case 241:
@@ -3200,9 +3230,9 @@ var parserInstance = {
       case 256:
         return ["while", $[$0 - 2], $[$0]];
       case 257:
-        return ["until", $[$0]];
+        return ["while", ["!", $[$0]]];
       case 258:
-        return ["until", $[$0 - 2], $[$0]];
+        return ["while", ["!", $[$0 - 2]], $[$0]];
       case 259:
         return $[$0 - 1].length === 2 ? [$[$0 - 1][0], $[$0 - 1][1], $[$0]] : [$[$0 - 1][0], $[$0 - 1][1], $[$0 - 1][2], $[$0]];
       case 260:
@@ -3435,11 +3465,12 @@ var parserInstance = {
     [TERROR, EOF] = [2, 1];
     lexer = Object.create(this.lexer);
     sharedState = { ctx: {} };
-    for (const k in this.ctx)
-      if (Object.hasOwn(this.ctx, k)) {
-        const v = this.ctx[k];
-        sharedState.ctx[k] = v;
-      }
+    for (const k in this.ctx) {
+      if (!Object.hasOwn(this.ctx, k))
+        continue;
+      const v = this.ctx[k];
+      sharedState.ctx[k] = v;
+    }
     lexer.setInput(input, sharedState.ctx);
     [sharedState.ctx.lexer, sharedState.ctx.parser] = [lexer, this];
     if (lexer.loc == null)
@@ -3586,8 +3617,11 @@ function installComponentSupport(CodeGenerator) {
       }
       current = current[1];
     }
-    const tag = typeof current === "string" ? current : current instanceof String ? current.valueOf() : "div";
-    return { tag, classes };
+    let raw = typeof current === "string" ? current : current instanceof String ? current.valueOf() : "div";
+    let [tag, id] = raw.split("#");
+    if (!tag)
+      tag = "div";
+    return { tag, classes, id };
   };
   proto.transformComponentMembers = function(sexpr) {
     if (!Array.isArray(sexpr)) {
@@ -3606,6 +3640,9 @@ function installComponentSupport(CodeGenerator) {
       }
       return sexpr;
     }
+    if (sexpr[0] === ".") {
+      return [".", this.transformComponentMembers(sexpr[1]), sexpr[2]];
+    }
     if (sexpr[0] === "->") {
       return ["=>", ...sexpr.slice(1).map((item) => this.transformComponentMembers(item))];
     }
@@ -3706,24 +3743,28 @@ function installComponentSupport(CodeGenerator) {
       lines.push(`    this.${name} = __computed(() => ${val});`);
     }
     for (const effect of effects) {
-      const effectBody = effect[1];
+      const effectBody = effect[2];
       const effectCode = this.generateInComponent(effectBody, "value");
-      lines.push(`    __effect(${effectCode});`);
+      lines.push(`    __effect(() => { ${effectCode}; });`);
     }
     lines.push("  }");
     for (const { name, func } of methods) {
       if (Array.isArray(func) && (func[0] === "->" || func[0] === "=>")) {
         const [, params, methodBody] = func;
         const paramStr = Array.isArray(params) ? params.map((p) => this.formatParam(p)).join(", ") : "";
-        const bodyCode = this.generateInComponent(methodBody, "value");
-        lines.push(`  ${name}(${paramStr}) { return ${bodyCode}; }`);
+        const transformed = this.reactiveMembers ? this.transformComponentMembers(methodBody) : methodBody;
+        const isAsync = this.containsAwait(methodBody);
+        const bodyCode = this.generateFunctionBody(transformed, params || []);
+        lines.push(`  ${isAsync ? "async " : ""}${name}(${paramStr}) ${bodyCode}`);
       }
     }
     for (const { name, value } of lifecycleHooks) {
       if (Array.isArray(value) && (value[0] === "->" || value[0] === "=>")) {
         const [, , hookBody] = value;
-        const bodyCode = this.generateInComponent(hookBody, "value");
-        lines.push(`  ${name}() { return ${bodyCode}; }`);
+        const transformed = this.reactiveMembers ? this.transformComponentMembers(hookBody) : hookBody;
+        const isAsync = this.containsAwait(hookBody);
+        const bodyCode = this.generateFunctionBody(transformed, []);
+        lines.push(`  ${isAsync ? "async " : ""}${name}() ${bodyCode}`);
       }
     }
     if (renderBlock) {
@@ -3829,8 +3870,11 @@ ${blockFactoriesCode}return ${lines.join(`
         this._setupLines.push(`__effect(() => { ${textVar2}.data = this.${str}.value; });`);
         return textVar2;
       }
+      const [tagStr, idStr] = str.split("#");
       const elVar = this.newElementVar();
-      this._createLines.push(`${elVar} = document.createElement('${str}');`);
+      this._createLines.push(`${elVar} = document.createElement('${tagStr || "div"}');`);
+      if (idStr)
+        this._createLines.push(`${elVar}.id = '${idStr}';`);
       return elVar;
     }
     if (!Array.isArray(sexpr)) {
@@ -3844,7 +3888,8 @@ ${blockFactoriesCode}return ${lines.join(`
       return this.generateChildComponent(headStr, rest);
     }
     if (headStr && this.isHtmlTag(headStr)) {
-      return this.generateTag(headStr, [], rest);
+      let [tagName, id] = headStr.split("#");
+      return this.generateTag(tagName || "div", [], rest, id);
     }
     if (headStr === ".") {
       const [, obj, prop] = sexpr;
@@ -3859,9 +3904,9 @@ ${blockFactoriesCode}return ${lines.join(`
         this._createLines.push(`${slotVar} = this.${prop} instanceof Node ? this.${prop} : (this.${prop} != null ? document.createTextNode(String(this.${prop})) : document.createComment(''));`);
         return slotVar;
       }
-      const { tag, classes } = this.collectTemplateClasses(sexpr);
+      const { tag, classes, id } = this.collectTemplateClasses(sexpr);
       if (tag && this.isHtmlTag(tag)) {
-        return this.generateTag(tag, classes, []);
+        return this.generateTag(tag, classes, [], id);
       }
       const textVar2 = this.newTextVar();
       const exprCode2 = this.generateInComponent(sexpr, "value");
@@ -3874,12 +3919,12 @@ ${blockFactoriesCode}return ${lines.join(`
         const classExprs = head.slice(1);
         return this.generateDynamicTag(tag2, classExprs, rest);
       }
-      const { tag, classes } = this.collectTemplateClasses(head);
+      const { tag, classes, id } = this.collectTemplateClasses(head);
       if (tag && this.isHtmlTag(tag)) {
         if (classes.length === 1 && classes[0] === "__clsx") {
           return this.generateDynamicTag(tag, rest, []);
         }
-        return this.generateTag(tag, classes, rest);
+        return this.generateTag(tag, classes, rest, id);
       }
     }
     if (headStr === "->" || headStr === "=>") {
@@ -3901,14 +3946,9 @@ ${blockFactoriesCode}return ${lines.join(`
     }
     return textVar;
   };
-  proto.generateTag = function(tag, classes, args) {
-    const elVar = this.newElementVar();
-    this._createLines.push(`${elVar} = document.createElement('${tag}');`);
-    if (classes.length > 0) {
-      this._createLines.push(`${elVar}.className = '${classes.join(" ")}';`);
-    }
+  proto.appendChildren = function(elVar, args) {
     for (const arg of args) {
-      if (Array.isArray(arg) && (arg[0] === "->" || arg[0] === "=>")) {
+      if (this.is(arg, "->") || this.is(arg, "=>")) {
         const block = arg[2];
         if (this.is(block, "block")) {
           for (const child of block.slice(1)) {
@@ -3921,29 +3961,18 @@ ${blockFactoriesCode}return ${lines.join(`
         }
       } else if (this.is(arg, "object")) {
         this.generateAttributes(elVar, arg);
-      } else if (typeof arg === "string") {
+      } else if (typeof arg === "string" || arg instanceof String) {
         const textVar = this.newTextVar();
-        if (arg.startsWith('"') || arg.startsWith("'") || arg.startsWith("`")) {
-          this._createLines.push(`${textVar} = document.createTextNode(${arg});`);
-        } else if (this.reactiveMembers && this.reactiveMembers.has(arg)) {
-          this._createLines.push(`${textVar} = document.createTextNode('');`);
-          this._setupLines.push(`__effect(() => { ${textVar}.data = this.${arg}.value; });`);
-        } else if (this.componentMembers && this.componentMembers.has(arg)) {
-          this._createLines.push(`${textVar} = document.createTextNode(String(this.${arg}));`);
-        } else {
-          this._createLines.push(`${textVar} = document.createTextNode(String(${arg}));`);
-        }
-        this._createLines.push(`${elVar}.appendChild(${textVar});`);
-      } else if (arg instanceof String) {
         const val = arg.valueOf();
-        const textVar = this.newTextVar();
         if (val.startsWith('"') || val.startsWith("'") || val.startsWith("`")) {
           this._createLines.push(`${textVar} = document.createTextNode(${val});`);
         } else if (this.reactiveMembers && this.reactiveMembers.has(val)) {
           this._createLines.push(`${textVar} = document.createTextNode('');`);
           this._setupLines.push(`__effect(() => { ${textVar}.data = this.${val}.value; });`);
+        } else if (this.componentMembers && this.componentMembers.has(val)) {
+          this._createLines.push(`${textVar} = document.createTextNode(String(this.${val}));`);
         } else {
-          this._createLines.push(`${textVar} = document.createTextNode(String(${val}));`);
+          this._createLines.push(`${textVar} = document.createTextNode(${this.generateInComponent(arg, "value")});`);
         }
         this._createLines.push(`${elVar}.appendChild(${textVar});`);
       } else if (arg) {
@@ -3951,6 +3980,17 @@ ${blockFactoriesCode}return ${lines.join(`
         this._createLines.push(`${elVar}.appendChild(${childVar});`);
       }
     }
+  };
+  proto.generateTag = function(tag, classes, args, id) {
+    const elVar = this.newElementVar();
+    this._createLines.push(`${elVar} = document.createElement('${tag}');`);
+    if (id) {
+      this._createLines.push(`${elVar}.id = '${id}';`);
+    }
+    if (classes.length > 0) {
+      this._createLines.push(`${elVar}.className = '${classes.join(" ")}';`);
+    }
+    this.appendChildren(elVar, args);
     return elVar;
   };
   proto.generateDynamicTag = function(tag, classExprs, children) {
@@ -3958,46 +3998,9 @@ ${blockFactoriesCode}return ${lines.join(`
     this._createLines.push(`${elVar} = document.createElement('${tag}');`);
     if (classExprs.length > 0) {
       const classArgs = classExprs.map((e) => this.generateInComponent(e, "value")).join(", ");
-      const hasReactive = classExprs.some((e) => this.hasReactiveDeps(e));
-      if (hasReactive) {
-        this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${classArgs}); });`);
-      } else {
-        this._createLines.push(`${elVar}.className = __clsx(${classArgs});`);
-      }
-    }
-    for (const arg of children) {
-      const argHead = Array.isArray(arg) ? arg[0] instanceof String ? arg[0].valueOf() : arg[0] : null;
-      if (argHead === "->" || argHead === "=>") {
-        const block = arg[2];
-        const blockHead = Array.isArray(block) ? block[0] instanceof String ? block[0].valueOf() : block[0] : null;
-        if (blockHead === "block") {
-          for (const child of block.slice(1)) {
-            const childVar = this.generateNode(child);
-            this._createLines.push(`${elVar}.appendChild(${childVar});`);
-          }
-        } else if (block) {
-          const childVar = this.generateNode(block);
-          this._createLines.push(`${elVar}.appendChild(${childVar});`);
-        }
-      } else if (this.is(arg, "object")) {
-        this.generateAttributes(elVar, arg);
-      } else if (typeof arg === "string" || arg instanceof String) {
-        const textVar = this.newTextVar();
-        const argStr = arg.valueOf();
-        if (argStr.startsWith('"') || argStr.startsWith("'") || argStr.startsWith("`")) {
-          this._createLines.push(`${textVar} = document.createTextNode(${argStr});`);
-        } else if (this.reactiveMembers && this.reactiveMembers.has(argStr)) {
-          this._createLines.push(`${textVar} = document.createTextNode('');`);
-          this._setupLines.push(`__effect(() => { ${textVar}.data = this.${argStr}.value; });`);
-        } else {
-          this._createLines.push(`${textVar} = document.createTextNode(${this.generateInComponent(arg, "value")});`);
-        }
-        this._createLines.push(`${elVar}.appendChild(${textVar});`);
-      } else {
-        const childVar = this.generateNode(arg);
-        this._createLines.push(`${elVar}.appendChild(${childVar});`);
-      }
+      this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${classArgs}); });`);
     }
+    this.appendChildren(elVar, children);
     return elVar;
   };
   proto.generateAttributes = function(elVar, objExpr) {
@@ -4018,6 +4021,11 @@ ${blockFactoriesCode}return ${lines.join(`
         if (key.startsWith('"') && key.endsWith('"')) {
           key = key.slice(1, -1);
         }
+        if (key === "ref") {
+          const refName = String(value).replace(/^["']|["']$/g, "");
+          this._createLines.push(`this.${refName} = ${elVar};`);
+          continue;
+        }
         if (key.startsWith(BIND_PREFIX) && key.endsWith(BIND_SUFFIX)) {
           const prop = key.slice(BIND_PREFIX.length, -BIND_SUFFIX.length);
           const valueCode2 = this.generateInComponent(value, "value");
@@ -4302,6 +4310,7 @@ ${blockFactoriesCode}return ${lines.join(`
     const { propsCode, childrenSetupLines } = this.buildComponentProps(args);
     this._createLines.push(`${instVar} = new ${componentName}(${propsCode});`);
     this._createLines.push(`${elVar} = ${instVar}._create();`);
+    this._createLines.push(`(this._children || (this._children = [])).push(${instVar});`);
     this._setupLines.push(`if (${instVar}._setup) ${instVar}._setup();`);
     for (const line of childrenSetupLines) {
       this._setupLines.push(line);
@@ -4317,7 +4326,10 @@ ${blockFactoriesCode}return ${lines.join(`
         for (let i = 1;i < arg.length; i++) {
           const [key, value] = arg[i];
           if (typeof key === "string") {
+            const prevReactive = this.reactiveMembers;
+            this.reactiveMembers = new Set;
             const valueCode = this.generateInComponent(value, "value");
+            this.reactiveMembers = prevReactive;
             props.push(`${key}: ${valueCode}`);
           }
         }
@@ -4345,15 +4357,16 @@ ${blockFactoriesCode}return ${lines.join(`
     return { propsCode, childrenSetupLines };
   };
   proto.hasReactiveDeps = function(sexpr) {
-    if (!this.reactiveMembers || this.reactiveMembers.size === 0)
-      return false;
     if (typeof sexpr === "string") {
-      return this.reactiveMembers.has(sexpr);
+      return !!(this.reactiveMembers && this.reactiveMembers.has(sexpr));
     }
     if (!Array.isArray(sexpr))
       return false;
     if (sexpr[0] === "." && sexpr[1] === "this" && typeof sexpr[2] === "string") {
-      return this.reactiveMembers.has(sexpr[2]);
+      return !!(this.reactiveMembers && this.reactiveMembers.has(sexpr[2]));
+    }
+    if (sexpr[0] === "." && this._rootsAtThis(sexpr[1])) {
+      return true;
     }
     for (const child of sexpr) {
       if (this.hasReactiveDeps(child))
@@ -4361,6 +4374,13 @@ ${blockFactoriesCode}return ${lines.join(`
     }
     return false;
   };
+  proto._rootsAtThis = function(sexpr) {
+    if (typeof sexpr === "string")
+      return sexpr === "this";
+    if (!Array.isArray(sexpr) || sexpr[0] !== ".")
+      return false;
+    return this._rootsAtThis(sexpr[1]);
+  };
   proto.getComponentRuntime = function() {
     return `
 // ============================================================================
@@ -4426,6 +4446,11 @@ class __Component {
     return this;
   }
   unmount() {
+    if (this._children) {
+      for (const child of this._children) {
+        child.unmount();
+      }
+    }
     if (this.unmounted) this.unmounted();
     if (this._root && this._root.parentNode) {
       this._root.parentNode.removeChild(this._root);
@@ -4717,6 +4742,7 @@ class CodeGenerator {
     ">>": "generateBinaryOp",
     ">>>": "generateBinaryOp",
     "%%": "generateModulo",
+    "%%=": "generateModuloAssign",
     "//": "generateFloorDiv",
     "//=": "generateFloorDivAssign",
     "..": "generateRange",
@@ -4767,9 +4793,7 @@ class CodeGenerator {
     readonly: "generateReadonly",
     effect: "generateEffect",
     break: "generateBreak",
-    "break-if": "generateBreakIf",
     continue: "generateContinue",
-    "continue-if": "generateContinueIf",
     "?": "generateExistential",
     "?:": "generateTernary",
     "|>": "generatePipe",
@@ -4779,12 +4803,10 @@ class CodeGenerator {
     yield: "generateYield",
     "yield-from": "generateYieldFrom",
     if: "generateIf",
-    unless: "generateIf",
     "for-in": "generateForIn",
     "for-of": "generateForOf",
     "for-as": "generateForAs",
     while: "generateWhile",
-    until: "generateUntil",
     try: "generateTry",
     throw: "generateThrow",
     control: "generateControl",
@@ -4860,7 +4882,7 @@ class CodeGenerator {
         continue;
       if (trimmed.startsWith("let ") || trimmed.startsWith("var "))
         continue;
-      if (trimmed.startsWith("const slice") || trimmed.startsWith("const modulo") || trimmed.startsWith("const toSearchable"))
+      if (trimmed.startsWith("const slice") || trimmed.startsWith("const modulo") || trimmed.startsWith("const toMatchable"))
         continue;
       if (trimmed.startsWith("const {") && trimmed.includes("__"))
         continue;
@@ -4896,6 +4918,8 @@ class CodeGenerator {
     }
     if (head === "readonly")
       return;
+    if (head === "component")
+      return;
     if (CodeGenerator.ASSIGNMENT_OPS.has(head)) {
       let [target, value] = rest;
       if (typeof target === "string" || target instanceof String) {
@@ -4920,12 +4944,6 @@ class CodeGenerator {
         this.collectProgramVariables(elseBranch);
       return;
     }
-    if (head === "unless") {
-      let [condition, body] = rest;
-      this.collectProgramVariables(condition);
-      this.collectProgramVariables(body);
-      return;
-    }
     if (head === "try") {
       this.collectProgramVariables(rest[0]);
       if (rest.length >= 2 && Array.isArray(rest[1]) && rest[1].length === 2 && rest[1][0] !== "block") {
@@ -5082,7 +5100,7 @@ class CodeGenerator {
           let condCode = this.generate(cond.condition, "value");
           let valCode = this.generate(argWithout, "value");
           let callStr2 = `${callee}(${valCode})`;
-          return cond.type === "unless" ? `if (!${condCode}) ${callStr2}` : `if (${condCode}) ${callStr2}`;
+          return `if (${condCode}) ${callStr2}`;
         }
       }
       let needsAwait = headAwaitMeta === true;
@@ -5092,7 +5110,7 @@ class CodeGenerator {
       return needsAwait ? `await ${callStr}` : callStr;
     }
     if (Array.isArray(head) && typeof head[0] === "string") {
-      let stmtOps = ["=", "+=", "-=", "*=", "/=", "%=", "**=", "&&=", "||=", "??=", "if", "unless", "return", "throw"];
+      let stmtOps = ["=", "+=", "-=", "*=", "/=", "%=", "**=", "&&=", "||=", "??=", "if", "return", "throw"];
       if (stmtOps.includes(head[0])) {
         let exprs = sexpr.map((stmt) => this.generate(stmt, "value"));
         return `(${exprs.join(", ")})`;
@@ -5114,7 +5132,7 @@ class CodeGenerator {
           let condCode = this.generate(cond.condition, "value");
           let valCode = this.generate(argWithout, "value");
           let callStr2 = `${calleeCode2}(${valCode})`;
-          return cond.type === "unless" ? `if (!${condCode}) ${callStr2}` : `if (${condCode}) ${callStr2}`;
+          return `if (${condCode}) ${callStr2}`;
         }
       }
       let needsAwait = false;
@@ -5151,7 +5169,7 @@ class CodeGenerator {
       else
         other.push(stmt);
     }
-    let blockStmts = ["def", "class", "if", "unless", "for-in", "for-of", "for-as", "while", "until", "loop", "switch", "try"];
+    let blockStmts = ["def", "class", "if", "for-in", "for-of", "for-as", "while", "loop", "switch", "try"];
     let statementsCode = other.map((stmt, index) => {
       let isSingle = other.length === 1 && imports.length === 0 && exports.length === 0;
       let isObj = this.is(stmt, "object");
@@ -5203,8 +5221,8 @@ class CodeGenerator {
 `;
         needsBlank = true;
       }
-      if (this.helpers.has("toSearchable")) {
-        code += `const toSearchable = (v, allowNewlines) => {
+      if (this.helpers.has("toMatchable")) {
+        code += `const toMatchable = (v, allowNewlines) => {
 `;
         code += `  if (typeof v === "string") return !allowNewlines && /[\\n\\r]/.test(v) ? null : v;
 `;
@@ -5315,6 +5333,12 @@ function _setDataSection() {
     this.helpers.add("modulo");
     return `modulo(${this.generate(left, "value")}, ${this.generate(right, "value")})`;
   }
+  generateModuloAssign(head, rest) {
+    let [target, value] = rest;
+    this.helpers.add("modulo");
+    let t = this.generate(target, "value"), v = this.generate(value, "value");
+    return `${t} = modulo(${t}, ${v})`;
+  }
   generateFloorDiv(head, rest) {
     let [left, right] = rest;
     return `Math.floor(${this.generate(left, "value")} / ${this.generate(right, "value")})`;
@@ -5398,27 +5422,22 @@ function _setDataSection() {
     }
     if (context === "statement" && head === "=" && Array.isArray(value) && (value[0] === "||" || value[0] === "&&") && value.length === 3) {
       let [binOp, left, right] = value;
-      if ((this.is(right, "unless") || this.is(right, "if")) && right.length === 3) {
-        let [condType, condition, wrappedValue] = right;
+      if (this.is(right, "if") && right.length === 3) {
+        let [, condition, wrappedValue] = right;
         let unwrapped = Array.isArray(wrappedValue) && wrappedValue.length === 1 ? wrappedValue[0] : wrappedValue;
         let fullValue = [binOp, left, unwrapped];
         let t = this.generate(target, "value"), c = this.generate(condition, "value"), v = this.generate(fullValue, "value");
-        return condType === "unless" ? `if (!${c}) ${t} = ${v}` : `if (${c}) ${t} = ${v}`;
+        return `if (${c}) ${t} = ${v}`;
       }
     }
     if (context === "statement" && head === "=" && Array.isArray(value) && value.length === 3) {
       let [valHead, condition, actualValue] = value;
       let isPostfix = Array.isArray(actualValue) && actualValue.length === 1 && (!Array.isArray(actualValue[0]) || actualValue[0][0] !== "block");
-      if ((valHead === "unless" || valHead === "if") && isPostfix) {
+      if (valHead === "if" && isPostfix) {
         let unwrapped = Array.isArray(actualValue) && actualValue.length === 1 ? actualValue[0] : actualValue;
         let t = this.generate(target, "value");
         let condCode = this.unwrapLogical(this.generate(condition, "value"));
         let v = this.generate(unwrapped, "value");
-        if (valHead === "unless") {
-          if (condCode.includes(" ") || /[<>=&|]/.test(condCode))
-            condCode = `(${condCode})`;
-          return `if (!${condCode}) ${t} = ${v}`;
-        }
         return `if (${condCode}) ${t} = ${v}`;
       }
     }
@@ -5444,10 +5463,15 @@ function _setDataSection() {
   }
   generatePropertyAccess(head, rest, context, sexpr) {
     let [obj, prop] = rest;
+    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"));
+    let needsParens = CodeGenerator.NUMBER_LITERAL_RE.test(objCode) || 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)}()`;
@@ -5461,12 +5485,12 @@ function _setDataSection() {
   }
   generateRegexIndex(head, rest) {
     let [value, regex, captureIndex] = rest;
-    this.helpers.add("toSearchable");
+    this.helpers.add("toMatchable");
     this.programVars.add("_");
     let v = this.generate(value, "value"), r = this.generate(regex, "value");
     let idx = captureIndex !== null ? this.generate(captureIndex, "value") : "0";
     let allowNL = r.includes("/m") ? ", true" : "";
-    return `(_ = toSearchable(${v}${allowNL}).match(${r})) && _[${idx}]`;
+    return `(_ = toMatchable(${v}${allowNL}).match(${r})) && _[${idx}]`;
   }
   generateIndexAccess(head, rest) {
     let [arr, index] = rest;
@@ -5566,11 +5590,6 @@ function _setDataSection() {
     let [expr] = rest;
     if (this.sideEffectOnly)
       return "return";
-    if (this.is(expr, "unless")) {
-      let [, condition, body] = expr;
-      let val = Array.isArray(body) && body.length === 1 ? body[0] : body;
-      return `if (!${this.generate(condition, "value")}) return ${this.generate(val, "value")}`;
-    }
     if (this.is(expr, "if")) {
       let [, condition, body, ...elseParts] = expr;
       if (elseParts.length === 0) {
@@ -5578,11 +5597,10 @@ function _setDataSection() {
         return `if (${this.generate(condition, "value")}) return ${this.generate(val, "value")}`;
       }
     }
-    if (this.is(expr, "new") && Array.isArray(expr[1]) && expr[1][0] === "unless") {
-      let [, unlessNode] = expr;
-      let [, condition, body] = unlessNode;
+    if (this.is(expr, "new") && Array.isArray(expr[1]) && expr[1][0] === "if") {
+      let [, condition, body] = expr[1];
       let val = Array.isArray(body) && body.length === 1 ? body[0] : body;
-      return `if (!${this.generate(condition, "value")}) return ${this.generate(["new", val], "value")}`;
+      return `if (${this.generate(condition, "value")}) return ${this.generate(["new", val], "value")}`;
     }
     return `return ${this.generate(expr, "value")}`;
   }
@@ -5634,15 +5652,9 @@ ${this.indent()}}`;
   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)`;
   }
@@ -5689,18 +5701,6 @@ ${this.indent()}}`;
     return `yield* ${this.generate(rest[0], "value")}`;
   }
   generateIf(head, rest, context, sexpr) {
-    if (head === "unless") {
-      let [condition2, body] = rest;
-      if (Array.isArray(body) && body.length === 1 && (!Array.isArray(body[0]) || body[0][0] !== "block"))
-        body = body[0];
-      if (context === "value") {
-        return `(!${this.generate(condition2, "value")} ? ${this.extractExpression(body)} : undefined)`;
-      }
-      let condCode = this.unwrap(this.generate(condition2, "value"));
-      if (/[ <>=&|]/.test(condCode))
-        condCode = `(${condCode})`;
-      return `if (!${condCode}) ` + this.generate(body, "statement");
-    }
     let [condition, thenBranch, ...elseBranches] = rest;
     return context === "value" ? this.generateIfAsExpression(condition, thenBranch, elseBranches) : this.generateIfAsStatement(condition, thenBranch, elseBranches);
   }
@@ -5919,10 +5919,6 @@ ${this.indent()}}`;
     let code = `while (${this.unwrap(this.generate(cond, "value"))}) `;
     return code + (guard ? this.generateLoopBodyWithGuard(body, guard) : this.generateLoopBody(body));
   }
-  generateUntil(head, rest) {
-    let [cond, body] = rest;
-    return `while (!(${this.unwrap(this.generate(cond, "value"))})) ` + this.generateLoopBody(body);
-  }
   generateRange(head, rest) {
     if (head === "...") {
       if (rest.length === 1)
@@ -5988,11 +5984,11 @@ ${this.indent()}}`;
   }
   generateRegexMatch(head, rest) {
     let [left, right] = rest;
-    this.helpers.add("toSearchable");
+    this.helpers.add("toMatchable");
     this.programVars.add("_");
     let r = this.generate(right, "value");
     let allowNL = r.includes("/m") ? ", true" : "";
-    return `(_ = toSearchable(${this.generate(left, "value")}${allowNL}).match(${r}))`;
+    return `(_ = toMatchable(${this.generate(left, "value")}${allowNL}).match(${r}))`;
   }
   generateNew(head, rest) {
     let [call] = rest;
@@ -6053,8 +6049,11 @@ ${this.indent()}}`;
         keyCode = `[${this.generate(key[1], "value")}]`;
       else if (this.is(key, "str"))
         keyCode = `[${this.generate(key, "value")}]`;
-      else
+      else {
+        this.suppressReactiveUnwrap = true;
         keyCode = this.generate(key, "value");
+        this.suppressReactiveUnwrap = false;
+      }
       let valCode = this.generate(value, "value");
       if (operator === "=")
         return `${keyCode} = ${valCode}`;
@@ -6120,21 +6119,19 @@ ${this.indent()}}`;
     let [expr] = rest;
     if (Array.isArray(expr)) {
       let checkExpr = expr, wrapperType = null;
-      if (expr[0] === "new" && Array.isArray(expr[1]) && (expr[1][0] === "if" || expr[1][0] === "unless")) {
+      if (expr[0] === "new" && Array.isArray(expr[1]) && expr[1][0] === "if") {
         wrapperType = "new";
         checkExpr = expr[1];
-      } else if (expr[0] === "if" || expr[0] === "unless") {
+      } else if (expr[0] === "if") {
         checkExpr = expr;
       }
-      if (checkExpr[0] === "if" || checkExpr[0] === "unless") {
-        let [condType, condition, body] = checkExpr;
+      if (checkExpr[0] === "if") {
+        let [, condition, body] = checkExpr;
         let unwrapped = Array.isArray(body) && body.length === 1 ? body[0] : body;
         expr = wrapperType === "new" ? ["new", unwrapped] : unwrapped;
         let condCode = this.generate(condition, "value");
         let throwCode = `throw ${this.generate(expr, "value")}`;
-        return condType === "unless" ? `if (!(${condCode})) {
-${this.indent()}  ${throwCode};
-${this.indent()}}` : `if (${condCode}) {
+        return `if (${condCode}) {
 ${this.indent()}  ${throwCode};
 ${this.indent()}}`;
       }
@@ -6206,6 +6203,52 @@ ${this.indent()}}`;
   generateWhen() {
     throw new Error("when clause should be handled by switch");
   }
+  _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"), stc2 = this.generate(step, "value");
+        return { header: `for (let ${ivp} = ${sc}; ${ivp} ${isExcl ? "<" : "<="} ${ec}; ${ivp} += ${stc2})`, 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 };
+  }
+  _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 };
+  }
+  _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")
@@ -6222,53 +6265,16 @@ ${this.indent()}}`;
     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}) {
-`;
-            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}) {
-` : this.indent() + `for (let ${idxN} = 0; ${idxN} < ${ic}.length; ${idxN} += ${stc}) {
-`;
-            this.indentLevel++;
-            if (!noVar)
-              code += this.indent() + `const ${ivp} = ${ic}[${idxN}];
-`;
-          }
-        } else if (indexVar) {
-          let ic = this.generate(iterable, "value");
-          code += this.indent() + `for (let ${indexVar} = 0; ${indexVar} < ${ic}.length; ${indexVar}++) {
+        let { header, setup } = this._forInHeader(vars, iterable, stepOrOwn);
+        code += this.indent() + header + ` {
 `;
-          this.indentLevel++;
-          code += this.indent() + `const ${ivp} = ${ic}[${indexVar}];
-`;
-        } else {
-          code += this.indent() + `for (const ${ivp} of ${this.generate(iterable, "value")}) {
+        this.indentLevel++;
+        if (setup)
+          code += this.indent() + setup + `
 `;
-          this.indentLevel++;
-        }
       } 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}) {
+        let { header, own, vv, oc, kvp } = this._forOfHeader(vars, iterable, stepOrOwn);
+        code += this.indent() + header + ` {
 `;
         this.indentLevel++;
         if (own)
@@ -6278,11 +6284,8 @@ ${this.indent()}}`;
           code += this.indent() + `const ${vv} = ${oc}[${kvp}];
 `;
       } 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")}) {
+        let { header } = this._forAsHeader(vars, iterable, iter[3]);
+        code += this.indent() + header + ` {
 `;
         this.indentLevel++;
       }
@@ -6297,13 +6300,13 @@ ${this.indent()}}`;
         return true;
       if (!Array.isArray(node))
         return false;
-      if (["break", "continue", "break-if", "continue-if", "return", "throw"].includes(node[0]))
+      if (["break", "continue", "return", "throw"].includes(node[0]))
         return true;
-      if (node[0] === "if" || node[0] === "unless")
+      if (node[0] === "if")
         return node.slice(1).some(hasCtrl);
       return node.some(hasCtrl);
     };
-    let loopStmts = ["for-in", "for-of", "for-as", "while", "until", "loop"];
+    let loopStmts = ["for-in", "for-of", "for-as", "while", "loop"];
     if (this.is(expr, "block")) {
       for (let i = 0;i < expr.length - 1; i++) {
         let s = expr[i + 1], isLast = i === expr.length - 2;
@@ -6425,15 +6428,31 @@ ${this.indent()}}`;
               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];
+                    let name = p[2];
+                    let param = isSubclass ? `_${name}` : name;
+                    autoAssign.push(`this.${name} = ${param}`);
+                    if (isSubclass)
+                      atParamMap.set(name, param);
+                    return param;
+                  }
+                  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 ? "*" : "");
@@ -6441,6 +6460,7 @@ ${this.indent()}}`;
               if (!isComputed)
                 this.currentMethodName = mName;
               code += this.generateMethodBody(body, autoAssign, mName === "constructor", cleanParams);
+              this._atParamMap = null;
               this.currentMethodName = null;
               code += `
 `;
@@ -6618,7 +6638,7 @@ export default ${expr[1]}`;
     if (!Array.isArray(expr))
       return null;
     let h = expr[0];
-    if ((h === "unless" || h === "if") && expr.length === 3)
+    if (h === "if" && expr.length === 3)
       return { type: h, condition: expr[1], value: expr[2] };
     if (h === "+" || h === "-" || h === "*" || h === "/") {
       for (let i = 1;i < expr.length; i++) {
@@ -6727,7 +6747,7 @@ export default ${expr[1]}`;
     let bodyVars = this.collectFunctionVariables(body);
     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))));
     let noRetStmts = ["return", "throw", "break", "continue"];
-    let loopStmts = ["for-in", "for-of", "for-as", "while", "until", "loop"];
+    let loopStmts = ["for-in", "for-of", "for-as", "while", "loop"];
     this.scopeStack.push(new Set([...newVars, ...paramNames]));
     if (this.is(body, "block")) {
       let statements = this.unwrapBlock(body);
@@ -6769,7 +6789,7 @@ export default ${expr[1]}`;
 `;
             return;
           }
-          if (!isConstructor && !sideEffectOnly && isLast && (h === "if" || h === "unless")) {
+          if (!isConstructor && !sideEffectOnly && isLast && h === "if") {
             let [cond, thenB, ...elseB] = stmt.slice(1);
             let hasMulti = (b) => this.is(b, "block") && b.length > 2;
             if (hasMulti(thenB) || elseB.some(hasMulti)) {
@@ -6834,7 +6854,12 @@ export default ${expr[1]}`;
     }
     this.sideEffectOnly = prevSEO;
     let result;
-    if (isConstructor || this.hasExplicitControlFlow(body))
+    if (isConstructor && autoAssignments.length > 0) {
+      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")}; }`;
@@ -6918,37 +6943,13 @@ ${this.indent()}}`;
     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")}) {
+        let { header, setup } = this._forInHeader(vars, iterable, stepOrOwn);
+        code += this.indent() + header + ` {
 `;
-          } 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}) {
-` : this.indent() + `for (let ${idxN} = 0; ${idxN} < ${ic}.length; ${idxN} += ${stc}) {
-`;
-            this.indentLevel++;
-            if (!noVar)
-              code += this.indent() + `const ${ivp} = ${ic}[${idxN}];
-`;
-          }
-        } else {
-          code += this.indent() + `for (const ${ivp} of ${this.generate(iterable, "value")}) {
-`;
-        }
         this.indentLevel++;
+        if (setup)
+          code += this.indent() + setup + `
+`;
         if (guards && guards.length > 0) {
           code += this.indent() + `if (${guards.map((g) => this.generate(g, "value")).join(" && ")}) {
 `;
@@ -6972,229 +6973,59 @@ ${this.indent()}}`;
   }
   generateComprehensionAsLoop(expr, iterators, guards) {
     let code = "";
-    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 += `{
-`;
-            this.indentLevel++;
-            if (!noVar)
-              code += this.indent() + `const ${ivp} = ${ic}[${idxN}];
-`;
-          }
-          if (guards?.length) {
-            if (!isRange)
-              code += this.indent();
-            code += `{
-`;
-            this.indentLevel++;
-            code += this.indent() + `if (${guards.map((g) => this.generate(g, "value")).join(" && ")}) {
-`;
-            this.indentLevel++;
-            code += this.indent() + this.generate(expr, "statement") + `;
-`;
-            this.indentLevel--;
-            code += this.indent() + `}
-`;
-            this.indentLevel--;
-            code += this.indent() + "}";
-          } else {
-            if (!isRange)
-              code += this.indent();
-            code += `{
-`;
-            this.indentLevel++;
-            code += this.indent() + this.generate(expr, "statement") + `;
-`;
-            this.indentLevel--;
-            code += this.indent() + "}";
-          }
-          if (!isRange) {
-            this.indentLevel--;
-            code += `
-` + this.indent() + "}";
-          }
-          return code;
-        }
-        if (indexVar) {
-          let ic = this.generate(iterable, "value");
-          code += `for (let ${indexVar} = 0; ${indexVar} < ${ic}.length; ${indexVar}++) `;
-          code += `{
-`;
-          this.indentLevel++;
-          code += this.indent() + `const ${ivp} = ${ic}[${indexVar}];
-`;
-        } else {
-          code += `for (const ${ivp} of ${this.generate(iterable, "value")}) `;
-          if (guards?.length) {
-            code += `{
-`;
-            this.indentLevel++;
-            code += this.indent() + `if (${guards.map((g) => this.generate(g, "value")).join(" && ")}) {
+    let guardCond = guards?.length ? guards.map((g) => this.generate(g, "value")).join(" && ") : null;
+    let emitBody = () => {
+      if (guardCond) {
+        code += this.indent() + `if (${guardCond}) {
 `;
-            this.indentLevel++;
-            code += this.indent() + this.generate(expr, "statement") + `;
-`;
-            this.indentLevel--;
-            code += this.indent() + `}
-`;
-            this.indentLevel--;
-            code += this.indent() + "}";
-          } else {
-            code += `{
-`;
-            this.indentLevel++;
-            code += this.indent() + this.generate(expr, "statement") + `;
+        this.indentLevel++;
+        code += this.indent() + this.generate(expr, "statement") + `;
 `;
-            this.indentLevel--;
-            code += this.indent() + "}";
-          }
-          return code;
-        }
-        if (guards?.length) {
-          code += this.indent() + `if (${guards.map((g) => this.generate(g, "value")).join(" && ")}) {
+        this.indentLevel--;
+        code += this.indent() + `}
 `;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, "statement") + `;
+      } else {
+        code += this.indent() + this.generate(expr, "statement") + `;
 `;
-          this.indentLevel--;
-          code += this.indent() + `}
+      }
+    };
+    if (iterators.length === 1) {
+      let [iterType, vars, iterable, stepOrOwn] = iterators[0];
+      if (iterType === "for-in") {
+        let { header, setup } = this._forInHeader(vars, iterable, stepOrOwn);
+        code += header + ` {
 `;
-        } else {
-          code += this.indent() + this.generate(expr, "statement") + `;
+        this.indentLevel++;
+        if (setup)
+          code += this.indent() + setup + `
 `;
-        }
+        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 += `{
+        let { header } = this._forAsHeader(vars, iterable, stepOrOwn);
+        code += header + ` {
 `;
-          this.indentLevel++;
-          code += this.indent() + `if (${guards.map((g) => this.generate(g, "value")).join(" && ")}) {
-`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, "statement") + `;
-`;
-          this.indentLevel--;
-          code += this.indent() + `}
-`;
-          this.indentLevel--;
-          code += this.indent() + "}";
-        } else {
-          code += `{
-`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, "statement") + `;
-`;
-          this.indentLevel--;
-          code += this.indent() + "}";
-        }
+        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}) {
+        let { header, own, vv, oc, kvp } = this._forOfHeader(vars, iterable, stepOrOwn);
+        code += header + ` {
 `;
         this.indentLevel++;
-        if (own && !vv && !guards?.length) {
-          code += this.indent() + `if (!Object.hasOwn(${oc}, ${kv})) continue;
-`;
-          code += this.indent() + this.generate(expr, "statement") + `;
-`;
-        } else if (own && vv && guards?.length) {
-          code += this.indent() + `if (Object.hasOwn(${oc}, ${kv})) {
-`;
-          this.indentLevel++;
-          code += this.indent() + `const ${vv} = ${oc}[${kv}];
-`;
-          code += this.indent() + `if (${guards.map((g) => this.generate(g, "value")).join(" && ")}) {
-`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, "statement") + `;
-`;
-          this.indentLevel--;
-          code += this.indent() + `}
-`;
-          this.indentLevel--;
-          code += this.indent() + `}
-`;
-        } else if (own && vv) {
-          code += this.indent() + `if (Object.hasOwn(${oc}, ${kv})) {
-`;
-          this.indentLevel++;
-          code += this.indent() + `const ${vv} = ${oc}[${kv}];
-`;
-          code += this.indent() + this.generate(expr, "statement") + `;
-`;
-          this.indentLevel--;
-          code += this.indent() + `}
-`;
-        } else if (vv && guards?.length) {
-          code += this.indent() + `const ${vv} = ${oc}[${kv}];
-`;
-          code += this.indent() + `if (${guards.map((g) => this.generate(g, "value")).join(" && ")}) {
-`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, "statement") + `;
-`;
-          this.indentLevel--;
-          code += this.indent() + `}
-`;
-        } else if (vv) {
-          code += this.indent() + `const ${vv} = ${oc}[${kv}];
-`;
-          code += this.indent() + this.generate(expr, "statement") + `;
-`;
-        } else if (guards?.length) {
-          code += this.indent() + `if (${guards.map((g) => this.generate(g, "value")).join(" && ")}) {
-`;
-          this.indentLevel++;
-          code += this.indent() + this.generate(expr, "statement") + `;
-`;
-          this.indentLevel--;
-          code += this.indent() + `}
+        if (own)
+          code += this.indent() + `if (!Object.hasOwn(${oc}, ${kvp})) continue;
 `;
-        } else {
-          code += this.indent() + this.generate(expr, "statement") + `;
+        if (vv)
+          code += this.indent() + `const ${vv} = ${oc}[${kvp}];
 `;
-        }
+        emitBody();
         this.indentLevel--;
         code += this.indent() + "}";
         return code;
@@ -7205,7 +7036,7 @@ ${this.indent()}}`;
   generateIfElseWithEarlyReturns(ifStmt) {
     let [head, condition, thenBranch, ...elseBranches] = ifStmt;
     let code = "";
-    let condCode = head === "unless" ? `!${this.generate(condition, "value")}` : this.generate(condition, "value");
+    let condCode = this.generate(condition, "value");
     code += this.indent() + `if (${condCode}) {
 `;
     code += this.withIndent(() => this.generateBranchWithReturn(thenBranch));
@@ -7385,7 +7216,7 @@ ${this.indent()}}`;
     if (!generated.endsWith("}"))
       return true;
     let h = Array.isArray(stmt) ? stmt[0] : null;
-    return !["def", "class", "if", "unless", "for-in", "for-of", "for-as", "while", "until", "loop", "switch", "try"].includes(h);
+    return !["def", "class", "if", "for-in", "for-of", "for-as", "while", "loop", "switch", "try"].includes(h);
   }
   addSemicolon(stmt, generated) {
     return generated + (this.needsSemicolon(stmt, generated) ? ";" : "");
@@ -7415,7 +7246,7 @@ ${this.indent()}}`;
         return stmts.some((s) => Array.isArray(s) && ["return", "throw", "break", "continue"].includes(s[0]));
       });
     }
-    if (t === "if" || t === "unless") {
+    if (t === "if") {
       let [, , thenB, elseB] = body;
       return this.branchHasControlFlow(thenB) && elseB && this.branchHasControlFlow(elseB);
     }
@@ -7879,14 +7710,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();
     }
@@ -8074,8 +7910,8 @@ function getComponentRuntime() {
   return new CodeGenerator({}).getComponentRuntime();
 }
 // src/browser.js
-var VERSION = "3.7.4";
-var BUILD_DATE = "2026-02-11@13:07:41GMT";
+var VERSION = "3.8.9";
+var BUILD_DATE = "2026-02-16@20:02:36GMT";
 if (typeof globalThis !== "undefined" && !globalThis.__rip) {
   new Function(getReactiveRuntime())();
 }
@@ -8090,7 +7926,17 @@ 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);
@@ -8150,12 +7996,15 @@ if (typeof globalThis !== "undefined") {
   globalThis.rip = rip;
   globalThis.importRip = importRip;
   globalThis.compileToJS = compileToJS;
+  globalThis.__ripExports = { compile, compileToJS, formatSExpr, VERSION, BUILD_DATE, getReactiveRuntime, getComponentRuntime };
 }
 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();
   }
 }
 export {