rip-lang 3.7.3 → 3.8.8

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 });
@@ -2049,8 +2068,19 @@ class Lexer {
       tag = "REACT_ASSIGN";
     else if (val === "=!")
       tag = "READONLY_ASSIGN";
-    else if (val === "*" && (!prev || prev[0] === "TERMINATOR" || prev[0] === "INDENT" || prev[0] === "OUTDENT") && /^[a-zA-Z_$]/.test(this.chunk[1] || "")) {
+    else if (val === "*" && (!prev || prev[0] === "TERMINATOR" || prev[0] === "INDENT" || prev[0] === "OUTDENT") && (/^[a-zA-Z_$]/.test(this.chunk[1] || "") || this.chunk[1] === "@")) {
       let rest = this.chunk.slice(1);
+      let mAt = /^@(\s*)=(?!=)/.exec(rest);
+      if (mAt) {
+        let space = mAt[1];
+        this.emit("IDENTIFIER", "Object");
+        this.emit(".", ".");
+        let t = this.emit("PROPERTY", "assign");
+        t.spaced = true;
+        this.emit("@", "@");
+        this.emit(",", ",");
+        return 1 + 1 + space.length + 1;
+      }
       let m = /^((?:(?!\s)[$\w\x7f-\uffff])+(?:\.[a-zA-Z_$][\w]*)*)(\s*)=(?!=)/.exec(rest);
       if (m) {
         let target = m[1], space = m[2];
@@ -2253,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];
@@ -2262,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];
@@ -2328,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;
@@ -2366,7 +2396,7 @@ class Lexer {
         let prevToken = i > 0 ? tokens[i - 1] : null;
         let prevTag = prevToken ? prevToken[0] : null;
         let atLineStart = prevTag === "INDENT" || prevTag === "TERMINATOR";
-        let cxToken = gen("PROPERTY", "__cx__", token);
+        let cxToken = gen("PROPERTY", "__clsx", token);
         nextToken[0] = "CALL_START";
         let depth = 1;
         for (let j = i + 2;j < tokens.length && depth > 0; j++) {
@@ -2394,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;
@@ -2408,14 +2440,27 @@ 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")) {
+        tokens.splice(i + 1, 0, gen("CALL_START", "(", token), gen("CALL_END", ")", token));
+        return 3;
+      }
       return 1;
     });
   }
@@ -3420,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)
@@ -3571,14 +3617,20 @@ 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)) {
       if (typeof sexpr === "string" && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
         return [".", [".", "this", sexpr], "value"];
       }
+      if (typeof sexpr === "string" && this.componentMembers && this.componentMembers.has(sexpr)) {
+        return [".", "this", sexpr];
+      }
       return sexpr;
     }
     if (sexpr[0] === "." && sexpr[1] === "this" && typeof sexpr[2] === "string") {
@@ -3588,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))];
     }
@@ -3673,43 +3728,43 @@ function installComponentSupport(CodeGenerator) {
     this.reactiveMembers = reactiveMembers;
     const lines = [];
     let blockFactoriesCode = "";
-    lines.push("class {");
-    lines.push("  constructor(props = {}) {");
-    lines.push("    const __prevComponent = __pushComponent(this);");
-    lines.push("");
+    lines.push("class extends __Component {");
+    lines.push("  _init(props) {");
     for (const { name, value } of readonlyVars) {
       const val = this.generateInComponent(value, "value");
       lines.push(`    this.${name} = props.${name} ?? ${val};`);
     }
     for (const { name, value } of stateVars) {
       const val = this.generateInComponent(value, "value");
-      lines.push(`    this.${name} = isSignal(props.${name}) ? props.${name} : __state(props.${name} ?? ${val});`);
+      lines.push(`    this.${name} = __state(props.${name} ?? ${val});`);
     }
     for (const { name, expr } of derivedVars) {
       const val = this.generateInComponent(expr, "value");
       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("");
-    lines.push("    __popComponent(__prevComponent);");
     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) {
@@ -3736,21 +3791,6 @@ function installComponentSupport(CodeGenerator) {
         lines.push("  }");
       }
     }
-    lines.push("  mount(target) {");
-    lines.push('    if (typeof target === "string") target = document.querySelector(target);');
-    lines.push("    this._target = target;");
-    lines.push("    this._root = this._create();");
-    lines.push("    target.appendChild(this._root);");
-    lines.push("    if (this._setup) this._setup();");
-    lines.push("    if (this.mounted) this.mounted();");
-    lines.push("    return this;");
-    lines.push("  }");
-    lines.push("  unmount() {");
-    lines.push("    if (this.unmounted) this.unmounted();");
-    lines.push("    if (this._root && this._root.parentNode) {");
-    lines.push("      this._root.parentNode.removeChild(this._root);");
-    lines.push("    }");
-    lines.push("  }");
     lines.push("}");
     this.componentMembers = prevComponentMembers;
     this.reactiveMembers = prevReactiveMembers;
@@ -3767,6 +3807,9 @@ ${blockFactoriesCode}return ${lines.join(`
     if (typeof sexpr === "string" && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
       return `this.${sexpr}.value`;
     }
+    if (typeof sexpr === "string" && this.componentMembers && this.componentMembers.has(sexpr)) {
+      return `this.${sexpr}`;
+    }
     if (Array.isArray(sexpr) && this.reactiveMembers) {
       const transformed = this.transformComponentMembers(sexpr);
       return this.generate(transformed, context);
@@ -3827,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)) {
@@ -3842,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;
@@ -3853,15 +3900,13 @@ ${blockFactoriesCode}return ${lines.join(`
           this._setupLines.push(`__effect(() => { ${textVar3}.data = this.${prop}.value; });`);
           return textVar3;
         }
-        if (this.componentMembers && this.componentMembers.has(prop)) {
-          const slotVar = this.newElementVar("slot");
-          this._createLines.push(`${slotVar} = this.${prop} instanceof Node ? this.${prop} : (this.${prop} != null ? document.createTextNode(String(this.${prop})) : document.createComment(''));`);
-          return slotVar;
-        }
+        const slotVar = this.newElementVar("slot");
+        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");
@@ -3869,17 +3914,17 @@ ${blockFactoriesCode}return ${lines.join(`
       return textVar2;
     }
     if (Array.isArray(head)) {
-      if (Array.isArray(head[0]) && head[0][0] === "." && (head[0][2] === "__cx__" || head[0][2] instanceof String && head[0][2].valueOf() === "__cx__")) {
+      if (Array.isArray(head[0]) && head[0][0] === "." && (head[0][2] === "__clsx" || head[0][2] instanceof String && head[0][2].valueOf() === "__clsx")) {
         const tag2 = typeof head[0][1] === "string" ? head[0][1] : head[0][1].valueOf();
         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] === "__cx__") {
+        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 = __cx__(${classArgs}); });`);
-      } else {
-        this._createLines.push(`${elVar}.className = __cx__(${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) {
@@ -4006,14 +4009,23 @@ ${blockFactoriesCode}return ${lines.join(`
       let [key, value] = objExpr[i];
       if (this.is(key, ".") && key[1] === "this") {
         const eventName = key[2];
-        const handlerCode = this.generateInComponent(value, "value");
-        this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => (${handlerCode})(e));`);
+        if (typeof value === "string" && this.componentMembers?.has(value)) {
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => this.${value}(e));`);
+        } else {
+          const handlerCode = this.generateInComponent(value, "value");
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => (${handlerCode})(e));`);
+        }
         continue;
       }
       if (typeof key === "string") {
         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");
@@ -4298,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);
@@ -4313,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}`);
           }
         }
@@ -4341,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))
@@ -4357,16 +4374,19 @@ ${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 `
 // ============================================================================
 // Rip Component Runtime
 // ============================================================================
 
-function isSignal(v) {
-  return v != null && typeof v === 'object' && typeof v.read === 'function';
-}
-
 let __currentComponent = null;
 
 function __pushComponent(component) {
@@ -4404,13 +4424,43 @@ function hasContext(key) {
   return false;
 }
 
-function __cx__(...args) {
+function __clsx(...args) {
   return args.filter(Boolean).join(' ');
 }
 
+class __Component {
+  constructor(props = {}) {
+    Object.assign(this, props);
+    const prev = __pushComponent(this);
+    this._init(props);
+    __popComponent(prev);
+  }
+  _init() {}
+  mount(target) {
+    if (typeof target === "string") target = document.querySelector(target);
+    this._target = target;
+    this._root = this._create();
+    target.appendChild(this._root);
+    if (this._setup) this._setup();
+    if (this.mounted) this.mounted();
+    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);
+    }
+  }
+}
+
 // Register on globalThis for runtime deduplication
 if (typeof globalThis !== 'undefined') {
-  globalThis.__ripComponent = { isSignal, __pushComponent, __popComponent, setContext, getContext, hasContext, __cx__ };
+  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component };
 }
 
 `;
@@ -4742,9 +4792,7 @@ class CodeGenerator {
     readonly: "generateReadonly",
     effect: "generateEffect",
     break: "generateBreak",
-    "break-if": "generateBreakIf",
     continue: "generateContinue",
-    "continue-if": "generateContinueIf",
     "?": "generateExistential",
     "?:": "generateTernary",
     "|>": "generatePipe",
@@ -4797,6 +4845,7 @@ class CodeGenerator {
     this.programVars = new Set;
     this.functionVars = new Map;
     this.helpers = new Set;
+    this.scopeStack = [];
     this.collectProgramVariables(sexpr);
     let code = this.generate(sexpr);
     if (this.sourceMap)
@@ -4870,6 +4919,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) {
@@ -5226,7 +5277,7 @@ class CodeGenerator {
     }
     if (this.usesTemplates && !skip) {
       if (typeof globalThis !== "undefined" && globalThis.__ripComponent) {
-        code += `const { isSignal, __pushComponent, __popComponent, setContext, getContext, hasContext, __cx__ } = globalThis.__ripComponent;
+        code += `const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component } = globalThis.__ripComponent;
 `;
       } else {
         code += this.getComponentRuntime();
@@ -5418,10 +5469,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)}()`;
@@ -5608,15 +5664,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)`;
   }
@@ -6027,8 +6077,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}`;
@@ -6180,6 +6233,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")
@@ -6196,53 +6295,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}) {
+        let { header, setup } = this._forInHeader(vars, iterable, stepOrOwn);
+        code += this.indent() + header + ` {
 `;
-            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}++) {
-`;
-          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)
@@ -6252,11 +6314,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++;
       }
@@ -6271,7 +6330,7 @@ ${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")
         return node.slice(1).some(hasCtrl);
@@ -6399,15 +6458,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 ? "*" : "");
@@ -6415,6 +6490,7 @@ ${this.indent()}}`;
               if (!isComputed)
                 this.currentMethodName = mName;
               code += this.generateMethodBody(body, autoAssign, mName === "constructor", cleanParams);
+              this._atParamMap = null;
               this.currentMethodName = null;
               code += `
 `;
@@ -6699,9 +6775,10 @@ export default ${expr[1]}`;
     if (Array.isArray(params))
       params.forEach(extractPN);
     let bodyVars = this.collectFunctionVariables(body);
-    let newVars = new Set([...bodyVars].filter((v) => !this.programVars.has(v) && !this.reactiveVars?.has(v) && !paramNames.has(v)));
+    let newVars = new Set([...bodyVars].filter((v) => !this.programVars.has(v) && !this.reactiveVars?.has(v) && !paramNames.has(v) && !this.scopeStack.some((s) => s.has(v))));
     let noRetStmts = ["return", "throw", "break", "continue"];
     let loopStmts = ["for-in", "for-of", "for-as", "while", "until", "loop"];
+    this.scopeStack.push(new Set([...newVars, ...paramNames]));
     if (this.is(body, "block")) {
       let statements = this.unwrapBlock(body);
       if (hasExpansionParams && this.expansionAfterParams?.length > 0) {
@@ -6801,17 +6878,27 @@ export default ${expr[1]}`;
       }
       this.indentLevel--;
       code += this.indent() + "}";
+      this.scopeStack.pop();
       this.sideEffectOnly = prevSEO;
       return code;
     }
     this.sideEffectOnly = prevSEO;
-    if (isConstructor || this.hasExplicitControlFlow(body))
-      return `{ ${this.generate(body, "statement")}; }`;
-    if (Array.isArray(body) && (noRetStmts.includes(body[0]) || loopStmts.includes(body[0])))
-      return `{ ${this.generate(body, "statement")}; }`;
-    if (sideEffectOnly)
-      return `{ ${this.generate(body, "statement")}; return; }`;
-    return `{ return ${this.generate(body, "value")}; }`;
+    let result;
+    if (isConstructor && autoAssignments.length > 0) {
+      let isSuper = Array.isArray(body) && body[0] === "super";
+      let bodyCode = this.generate(body, "statement");
+      let assigns = autoAssignments.map((a) => `${a};`).join(" ");
+      result = isSuper ? `{ ${bodyCode}; ${assigns} }` : `{ ${assigns} ${bodyCode}; }`;
+    } else if (isConstructor || this.hasExplicitControlFlow(body))
+      result = `{ ${this.generate(body, "statement")}; }`;
+    else if (Array.isArray(body) && (noRetStmts.includes(body[0]) || loopStmts.includes(body[0])))
+      result = `{ ${this.generate(body, "statement")}; }`;
+    else if (sideEffectOnly)
+      result = `{ ${this.generate(body, "statement")}; return; }`;
+    else
+      result = `{ return ${this.generate(body, "value")}; }`;
+    this.scopeStack.pop();
+    return result;
   }
   generateFunctionBody(body, params = [], sideEffectOnly = false) {
     return this.generateBodyWithReturns(body, params, { sideEffectOnly, hasExpansionParams: this.expansionAfterParams?.length > 0 });
@@ -6886,37 +6973,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")}) {
-`;
-          } 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")}) {
+        let { header, setup } = this._forInHeader(vars, iterable, stepOrOwn);
+        code += this.indent() + header + ` {
 `;
-        }
         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(" && ")}) {
 `;
@@ -6940,229 +7003,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 += `{
+    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() + `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(" && ")}) {
-`;
-            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;
@@ -7747,6 +7640,7 @@ const __primitiveCoercion = {
 };
 
 function __state(initialValue) {
+  if (initialValue != null && typeof initialValue === 'object' && typeof initialValue.read === 'function') return initialValue;
   let value = initialValue;
   const subscribers = new Set();
   let notifying = false;
@@ -7846,14 +7740,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();
     }
@@ -8041,8 +7940,8 @@ function getComponentRuntime() {
   return new CodeGenerator({}).getComponentRuntime();
 }
 // src/browser.js
-var VERSION = "3.7.3";
-var BUILD_DATE = "2026-02-11@10:29:15GMT";
+var VERSION = "3.8.8";
+var BUILD_DATE = "2026-02-16@19:03:24GMT";
 if (typeof globalThis !== "undefined" && !globalThis.__rip) {
   new Function(getReactiveRuntime())();
 }
@@ -8057,25 +7956,34 @@ async function processRipScripts() {
     if (script.hasAttribute("data-rip-processed"))
       continue;
     try {
-      const ripCode = dedent(script.textContent);
-      const jsCode = compileToJS(ripCode);
+      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);
+      } catch (compileError) {
+        console.error("Rip compile error:", compileError.message);
+        console.error("Source:", ripCode);
+        continue;
+      }
       await (0, eval)(`(async()=>{
 ${jsCode}
 })()`);
       script.setAttribute("data-rip-processed", "true");
     } catch (error) {
-      console.error("Error compiling Rip script:", error);
-      console.error("Script content:", script.textContent);
+      console.error("Rip runtime error:", error);
     }
   }
 }
-if (typeof document !== "undefined") {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", processRipScripts);
-  } else {
-    processRipScripts();
-  }
-}
 async function importRip(url) {
   const source = await fetch(url).then((r) => {
     if (!r.ok)
@@ -8118,6 +8026,16 @@ 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") {
+    globalThis.__ripScriptsReady = new Promise((resolve) => {
+      document.addEventListener("DOMContentLoaded", () => processRipScripts().then(resolve));
+    });
+  } else {
+    globalThis.__ripScriptsReady = processRipScripts();
+  }
 }
 export {
   rip,