rip-lang 3.13.23 → 3.13.25

package/README.md

@@ -9,9 +9,9 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.23-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.25-blue.svg" alt="Version"></a>
   <a href="#zero-dependencies"><img src="https://img.shields.io/badge/dependencies-ZERO-brightgreen.svg" alt="Dependencies"></a>
-  <a href="#"><img src="https://img.shields.io/badge/tests-1%2C265%2F1%2C265-brightgreen.svg" alt="Tests"></a>
+  <a href="#"><img src="https://img.shields.io/badge/tests-1%2C300%2F1%2C300-brightgreen.svg" alt="Tests"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
 </p>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.13.23",
+  "version": "3.13.25",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",

package/src/compiler.js

@@ -688,9 +688,9 @@ export class CodeGenerator {
 
     if (this.usesTemplates && !skip) {
       if (skipRT) {
-        code += 'var { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component } = globalThis.__ripComponent;\n';
+        code += 'var { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __Component } = globalThis.__ripComponent;\n';
       } else if (typeof globalThis !== 'undefined' && globalThis.__ripComponent) {
-        code += 'const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component } = globalThis.__ripComponent;\n';
+        code += 'const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __Component } = globalThis.__ripComponent;\n';
       } else {
         code += this.getComponentRuntime();
       }

package/src/components.js

@@ -106,23 +106,6 @@ function isPublicProp(target) {
   return Array.isArray(target) && target[0] === '.' && target[1] === 'this';
 }
 
-/**
- * Detect fragment root and collect direct child variables for proper removal.
- * After insertBefore, a DocumentFragment is empty — .remove() is a no-op.
- * Callers must remove each child element individually.
- */
-function getFragChildren(rootVar, createLines, localizeVar) {
-  const root = localizeVar(rootVar);
-  if (!/_frag\d+$/.test(root)) return null;
-  const children = [];
-  const re = new RegExp(`^${root.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\.appendChild\\(([^)]+)\\);`);
-  for (const line of createLines) {
-    const m = localizeVar(line).match(re);
-    if (m) children.push(m[1]);
-  }
-  return children.length > 0 ? children : null;
-}
-
 // ============================================================================
 // Prototype Installation
 // ============================================================================
@@ -398,16 +381,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       // Implicit nesting (inject -> before INDENT)
       // ─────────────────────────────────────────────────────────────────────
       if (nextToken && nextToken[0] === 'INDENT') {
-        // Skip fromThen INDENTs inside string interpolation (e.g. "#{if x then y else z}")
-        if (nextToken.fromThen) {
-          let depth = 0;
-          for (let j = i; j >= 0; j--) {
-            let jt = tokens[j][0];
-            if (jt === 'INTERPOLATION_END' || jt === 'STRING_END') depth++;
-            if (jt === 'INTERPOLATION_START' || jt === 'STRING_START') depth--;
-            if (depth < 0) { return 1; }
-          }
-        }
+        // fromThen INDENTs are inline conditional values (if x then y else z),
+        // never template nesting — normalizeLines only creates them for single-line then clauses
+        if (nextToken.fromThen) return 1;
         if (tag === '->' || tag === '=>' || tag === 'CALL_START' || tag === '(') {
           return 1;
         }
@@ -437,31 +413,17 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           isTemplateElement = true;
         } else if (tag === 'IDENTIFIER' && isTemplateTag(token[1]) && !isAfterControlFlow) {
           isTemplateElement = true;
-        } else if (tag === 'PROPERTY' || tag === 'STRING' || tag === 'STRING_END' || tag === 'IDENTIFIER' || tag === 'NUMBER' || tag === 'BOOL' || tag === 'CALL_END' || tag === ')') {
+        } else if (tag === 'IDENTIFIER' && !isAfterControlFlow) {
+          isTemplateElement = startsWithTag(tokens, i);
+        } else if (tag === 'PROPERTY' || tag === 'STRING' || tag === 'STRING_END' || tag === 'NUMBER' || tag === 'BOOL' || tag === 'CALL_END' || tag === ')') {
           isTemplateElement = startsWithTag(tokens, i);
-        }
-        else if (tag === 'IDENTIFIER' && i > 1 && tokens[i - 1][0] === '...') {
-          if (startsWithTag(tokens, i)) {
-            let commaToken = gen(',', ',', token);
-            let arrowToken = gen('->', '->', token);
-            arrowToken.newLine = true;
-            tokens.splice(i + 1, 0, commaToken, arrowToken);
-            return 3;
-          }
         }
 
         if (isTemplateElement) {
           let isClassOrIdTail = tag === 'PROPERTY' && i > 0 && (tokens[i - 1][0] === '.' || tokens[i - 1][0] === '#');
+          let isBareTag = isClsxCallEnd || (tag === 'IDENTIFIER' && isTemplateTag(token[1])) || isClassOrIdTail;
 
-          if (isClsxCallEnd) {
-            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 if ((tag === 'IDENTIFIER' && isTemplateTag(token[1])) || isClassOrIdTail) {
-            // Bare tag or tag.class/tag#id (no other args): inject CALL_START -> and manage CALL_END
+          if (isBareTag) {
             let callStartToken = gen('CALL_START', '(', token);
             let arrowToken = gen('->', '->', token);
             arrowToken.newLine = true;
@@ -469,7 +431,6 @@ export function installComponentSupport(CodeGenerator, Lexer) {
             pendingCallEnds.push(currentIndent + 1);
             return 3;
           } else {
-            // Tag with args: inject , -> (call wrapping handled by addImplicitBracesAndParens)
             let commaToken = gen(',', ',', token);
             let arrowToken = gen('->', '->', token);
             arrowToken.newLine = true;
@@ -503,16 +464,6 @@ export function installComponentSupport(CodeGenerator, Lexer) {
   // Utilities
   // ==========================================================================
 
-  /**
-   * Localize variable references for block factories.
-   * Converts this._elN to _elN and this.x to ctx.x.
-   */
-  proto.localizeVar = function(line) {
-    let result = line.replace(/this\.(_el\d+|_t\d+|_anchor\d+|_frag\d+|_slot\d+|_c\d+|_inst\d+|_empty\d+)/g, '$1');
-    result = result.replace(/\bthis\b/g, 'ctx');
-    return result;
-  };
-
   /**
    * Check if name is an HTML/SVG tag
    */
@@ -560,12 +511,13 @@ export function installComponentSupport(CodeGenerator, Lexer) {
    * For component context where state variables are signals.
    */
   proto.transformComponentMembers = function(sexpr) {
+    const self = this._self;
     if (!Array.isArray(sexpr)) {
       if (typeof sexpr === 'string' && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
-        return ['.', ['.', 'this', sexpr], 'value'];
+        return ['.', ['.', self, sexpr], 'value'];
       }
       if (typeof sexpr === 'string' && this.componentMembers && this.componentMembers.has(sexpr)) {
-        return ['.', 'this', sexpr];
+        return ['.', self, sexpr];
       }
       return sexpr;
     }
@@ -574,9 +526,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     if (sexpr[0] === '.' && sexpr[1] === 'this' && typeof sexpr[2] === 'string') {
       const memberName = sexpr[2];
       if (this.reactiveMembers && this.reactiveMembers.has(memberName)) {
-        return ['.', sexpr, 'value'];  // this.X → this.X.value
+        return ['.', ['.', self, memberName], 'value'];
       }
-      return sexpr;
+      return this._factoryMode ? ['.', self, sexpr[2]] : sexpr;
     }
 
     // Dot access: transform the object but not the property name
@@ -819,10 +771,10 @@ export function installComponentSupport(CodeGenerator, Lexer) {
    */
   proto.generateInComponent = function(sexpr, context) {
     if (typeof sexpr === 'string' && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
-      return `this.${sexpr}.value`;
+      return `${this._self}.${sexpr}.value`;
     }
     if (typeof sexpr === 'string' && this.componentMembers && this.componentMembers.has(sexpr)) {
-      return `this.${sexpr}`;
+      return `${this._self}.${sexpr}`;
     }
     if (Array.isArray(sexpr) && this.reactiveMembers) {
       const transformed = this.transformComponentMembers(sexpr);
@@ -854,6 +806,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     this._setupLines = [];
     this._blockFactories = [];
     this._loopVarStack = [];
+    this._factoryMode = false;
+    this._factoryVars = null;
+    this._fragChildren = new Map();
 
     const statements = this.is(body, 'block') ? body.slice(1) : [body];
 
@@ -865,10 +820,13 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     } else {
       rootVar = this.newElementVar('frag');
       this._createLines.push(`${rootVar} = document.createDocumentFragment();`);
+      const children = [];
       for (const stmt of statements) {
         const childVar = this.generateNode(stmt);
         this._createLines.push(`${rootVar}.appendChild(${childVar});`);
+        children.push(childVar);
       }
+      this._fragChildren.set(rootVar, children);
     }
 
     return {
@@ -886,12 +844,30 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
   /** Generate a unique element variable name */
   proto.newElementVar = function(hint = 'el') {
-    return `this._${hint}${this._elementCount++}`;
+    const name = `_${hint}${this._elementCount++}`;
+    if (this._factoryVars) this._factoryVars.add(name);
+    return this._factoryMode ? name : `this.${name}`;
   };
 
   /** Generate a unique text node variable name */
   proto.newTextVar = function() {
-    return `this._t${this._textCount++}`;
+    const name = `_t${this._textCount++}`;
+    if (this._factoryVars) this._factoryVars.add(name);
+    return this._factoryMode ? name : `this.${name}`;
+  };
+
+  /** Context reference — 'this' in component body, 'ctx' in block factories */
+  Object.defineProperty(proto, '_self', {
+    get() { return this._factoryMode ? 'ctx' : 'this'; }
+  });
+
+  /** Push an effect line, wrapping with disposer tracking in factory mode */
+  proto._pushEffect = function(body) {
+    if (this._factoryMode) {
+      this._setupLines.push(`disposers.push(__effect(() => { ${body} }));`);
+    } else {
+      this._setupLines.push(`__effect(() => { ${body} });`);
+    }
   };
 
   // --------------------------------------------------------------------------
@@ -911,7 +887,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       if (this.reactiveMembers && this.reactiveMembers.has(str)) {
         const textVar = this.newTextVar();
         this._createLines.push(`${textVar} = document.createTextNode('');`);
-        this._setupLines.push(`__effect(() => { ${textVar}.data = this.${str}.value; });`);
+        this._pushEffect(`${textVar}.data = ${this._self}.${str}.value;`);
         return textVar;
       }
       // Static tag without content (possibly with #id)
@@ -953,15 +929,15 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
       // Property access on this (e.g., @prop, @children)
       if (obj === 'this' && typeof prop === 'string') {
+        const s = this._self;
         if (this.reactiveMembers && this.reactiveMembers.has(prop)) {
           const textVar = this.newTextVar();
           this._createLines.push(`${textVar} = document.createTextNode('');`);
-          this._setupLines.push(`__effect(() => { ${textVar}.data = this.${prop}.value; });`);
+          this._pushEffect(`${textVar}.data = ${s}.${prop}.value;`);
           return textVar;
         }
-        // Slot/prop — handle DOM nodes (children) and plain values
         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(''));`);
+        this._createLines.push(`${slotVar} = ${s}.${prop} instanceof Node ? ${s}.${prop} : (${s}.${prop} != null ? document.createTextNode(String(${s}.${prop})) : document.createComment(''));`);
         return slotVar;
       }
 
@@ -1018,7 +994,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     const exprCode = this.generateInComponent(sexpr, 'value');
     if (this.hasReactiveDeps(sexpr)) {
       this._createLines.push(`${textVar} = document.createTextNode('');`);
-      this._setupLines.push(`__effect(() => { ${textVar}.data = ${exprCode}; });`);
+      this._pushEffect(`${textVar}.data = ${exprCode};`);
     } else {
       this._createLines.push(`${textVar} = document.createTextNode(String(${exprCode}));`);
     }
@@ -1057,9 +1033,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           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; });`);
+          this._pushEffect(`${textVar}.data = ${this._self}.${val}.value;`);
         } else if (this.componentMembers && this.componentMembers.has(val)) {
-          this._createLines.push(`${textVar} = document.createTextNode(String(this.${val}));`);
+          this._createLines.push(`${textVar} = document.createTextNode(String(${this._self}.${val}));`);
         } else {
           this._createLines.push(`${textVar} = document.createTextNode(${this.generateInComponent(arg, 'value')});`);
         }
@@ -1112,9 +1088,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       } else {
         const combined = this._pendingClassArgs.join(', ');
         if (isSvg) {
-          this._setupLines.push(`__effect(() => { ${elVar}.setAttribute('class', __clsx(${combined})); });`);
+          this._pushEffect(`${elVar}.setAttribute('class', __clsx(${combined}));`);
         } else {
-          this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${combined}); });`);
+          this._pushEffect(`${elVar}.className = __clsx(${combined});`);
         }
       }
       this._pendingClassArgs = prevClassArgs;
@@ -1151,9 +1127,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       const combined = this._pendingClassArgs.join(', ');
       const isSvg = SVG_TAGS.has(tag) || this._svgDepth > 0;
       if (isSvg) {
-        this._setupLines.push(`__effect(() => { ${elVar}.setAttribute('class', __clsx(${combined})); });`);
+        this._pushEffect(`${elVar}.setAttribute('class', __clsx(${combined}));`);
       } else {
-        this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${combined}); });`);
+        this._pushEffect(`${elVar}.className = __clsx(${combined});`);
       }
     }
     this._pendingClassArgs = prevClassArgs;
@@ -1175,9 +1151,8 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       // Event handler: @click or (. this eventName)
       if (this.is(key, '.') && key[1] === 'this') {
         const eventName = key[2];
-        // Bind method references to this
         if (typeof value === 'string' && this.componentMembers?.has(value)) {
-          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => __batch(() => this.${value}(e)));`);
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => __batch(() => ${this._self}.${value}(e)));`);
         } else {
           const handlerCode = this.generateInComponent(value, 'value');
           this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => __batch(() => (${handlerCode})(e)));`);
@@ -1199,9 +1174,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
             this._pendingClassArgs.push(valueCode);
           } else if (this.hasReactiveDeps(value)) {
             if (this._svgDepth > 0) {
-              this._setupLines.push(`__effect(() => { ${elVar}.setAttribute('class', __clsx(${valueCode})); });`);
+              this._pushEffect(`${elVar}.setAttribute('class', __clsx(${valueCode}));`);
             } else {
-              this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${valueCode}); });`);
+              this._pushEffect(`${elVar}.className = __clsx(${valueCode});`);
             }
           } else {
             if (this._svgDepth > 0) {
@@ -1216,7 +1191,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
         // Element ref: ref: "name" → this.name = element
         if (key === 'ref') {
           const refName = String(value).replace(/^["']|["']$/g, '');
-          this._createLines.push(`this.${refName} = ${elVar};`);
+          this._createLines.push(`${this._self}.${refName} = ${elVar};`);
           continue;
         }
 
@@ -1235,11 +1210,11 @@ export function installComponentSupport(CodeGenerator, Lexer) {
               ? 'e.target.valueAsNumber' : 'e.target.value';
           }
 
-          this._setupLines.push(`__effect(() => { ${elVar}.${prop} = ${valueCode}; });`);
+          this._pushEffect(`${elVar}.${prop} = ${valueCode};`);
           let assignCode = `${valueCode} = ${valueAccessor}`;
           const rootMember = !this.isSimpleAssignable(value) && this.findRootReactiveMember(value);
           if (rootMember) {
-            assignCode += `; this.${rootMember}.touch?.()`;
+            assignCode += `; ${this._self}.${rootMember}.touch?.()`;
           }
           this._createLines.push(`${elVar}.addEventListener('${event}', (e) => { ${assignCode}; });`);
           continue;
@@ -1249,9 +1224,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
         // Smart two-way binding for value/checked when bound to reactive state
         if ((key === 'value' || key === 'checked') && this.hasReactiveDeps(value)) {
-          this._setupLines.push(`__effect(() => { ${elVar}.${key} = ${valueCode}; });`);
-          // Generate reverse binding for simple assignable targets or nested
-          // reactive paths (with touch() for Svelte-style invalidation)
+          this._pushEffect(`${elVar}.${key} = ${valueCode};`);
           const rootMemberImplicit = !this.isSimpleAssignable(value) && this.findRootReactiveMember(value);
           if (this.isSimpleAssignable(value) || rootMemberImplicit) {
             const event = key === 'checked' ? 'change' : 'input';
@@ -1260,7 +1233,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
               : 'e.target.value';
             let assignCode = `${valueCode} = ${accessor}`;
             if (rootMemberImplicit) {
-              assignCode += `; this.${rootMemberImplicit}.touch?.()`;
+              assignCode += `; ${this._self}.${rootMemberImplicit}.touch?.()`;
             }
             this._createLines.push(`${elVar}.addEventListener('${event}', (e) => { ${assignCode}; });`);
           }
@@ -1269,18 +1242,18 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
         if (key === 'innerHTML' || key === 'textContent' || key === 'innerText') {
           if (this.hasReactiveDeps(value)) {
-            this._setupLines.push(`__effect(() => { ${elVar}.${key} = ${valueCode}; });`);
+            this._pushEffect(`${elVar}.${key} = ${valueCode};`);
           } else {
             this._createLines.push(`${elVar}.${key} = ${valueCode};`);
           }
         } else if (BOOLEAN_ATTRS.has(key)) {
           if (this.hasReactiveDeps(value)) {
-            this._setupLines.push(`__effect(() => { ${elVar}.toggleAttribute('${key}', !!${valueCode}); });`);
+            this._pushEffect(`${elVar}.toggleAttribute('${key}', !!${valueCode});`);
           } else {
             this._createLines.push(`if (${valueCode}) ${elVar}.setAttribute('${key}', '');`);
           }
         } else if (this.hasReactiveDeps(value)) {
-          this._setupLines.push(`__effect(() => { ${elVar}.setAttribute('${key}', ${valueCode}); });`);
+          this._pushEffect(`${elVar}.setAttribute('${key}', ${valueCode});`);
         } else {
           this._createLines.push(`${elVar}.setAttribute('${key}', ${valueCode});`);
         }
@@ -1309,10 +1282,13 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
     const fragVar = this.newElementVar('frag');
     this._createLines.push(`${fragVar} = document.createDocumentFragment();`);
+    const children = [];
     for (const stmt of statements) {
       const childVar = this.generateNode(stmt);
       this._createLines.push(`${fragVar}.appendChild(${childVar});`);
+      children.push(childVar);
     }
+    this._fragChildren.set(fragVar, children);
     return fragVar;
   };
 
@@ -1328,9 +1304,8 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
     const condCode = this.generateInComponent(condition, 'value');
 
-    // Collect loop variables from enclosing for-loops
-    const loopParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
-    const extraArgs = loopParams ? `, ${loopParams}` : '';
+    const outerParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
+    const outerExtra = outerParams ? `, ${outerParams}` : '';
 
     const thenBlockName = this.newBlockVar();
     this.generateConditionBranch(thenBlockName, thenBlock);
@@ -1347,7 +1322,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     setupLines.push(`  const anchor = ${anchorVar};`);
     setupLines.push(`  let currentBlock = null;`);
     setupLines.push(`  let showing = null;`);
-    setupLines.push(`  __effect(() => {`);
+    const effOpen = this._factoryMode ? 'disposers.push(__effect(() => {' : '__effect(() => {';
+    const effClose = this._factoryMode ? '}));' : '});';
+    setupLines.push(`  ${effOpen}`);
     setupLines.push(`    const show = !!(${condCode});`);
     setupLines.push(`    const want = show ? 'then' : ${elseBlock ? "'else'" : 'null'};`);
     setupLines.push(`    if (want === showing) return;`);
@@ -1359,20 +1336,20 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     setupLines.push(`    showing = want;`);
     setupLines.push(``);
     setupLines.push(`    if (want === 'then') {`);
-    setupLines.push(`      currentBlock = ${thenBlockName}(this${extraArgs});`);
+    setupLines.push(`      currentBlock = ${thenBlockName}(${this._self}${outerExtra});`);
     setupLines.push(`      currentBlock.c();`);
     setupLines.push(`      if (anchor.parentNode) currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
-    setupLines.push(`      currentBlock.p(this${extraArgs});`);
+    setupLines.push(`      currentBlock.p(${this._self}${outerExtra});`);
     setupLines.push(`    }`);
     if (elseBlock) {
       setupLines.push(`    if (want === 'else') {`);
-      setupLines.push(`      currentBlock = ${elseBlockName}(this${extraArgs});`);
+      setupLines.push(`      currentBlock = ${elseBlockName}(${this._self}${outerExtra});`);
       setupLines.push(`      currentBlock.c();`);
       setupLines.push(`      if (anchor.parentNode) currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
-      setupLines.push(`      currentBlock.p(this${extraArgs});`);
+      setupLines.push(`      currentBlock.p(${this._self}${outerExtra});`);
       setupLines.push(`    }`);
     }
-    setupLines.push(`  });`);
+    setupLines.push(`  ${effClose}`);
     setupLines.push(`}`);
 
     this._setupLines.push(setupLines.join('\n    '));
@@ -1385,36 +1362,36 @@ export function installComponentSupport(CodeGenerator, Lexer) {
   // --------------------------------------------------------------------------
 
   proto.generateConditionBranch = function(blockName, block) {
-    const savedCreateLines = this._createLines;
-    const savedSetupLines = this._setupLines;
+    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars];
 
     this._createLines = [];
     this._setupLines = [];
+    this._factoryMode = true;
+    this._factoryVars = new Set();
 
     const rootVar = this.generateTemplateBlock(block);
     const createLines = this._createLines;
     const setupLines = this._setupLines;
+    const factoryVars = this._factoryVars;
+
+    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars] = saved;
 
-    this._createLines = savedCreateLines;
-    this._setupLines = savedSetupLines;
+    const outerParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
+    const extraParams = outerParams ? `, ${outerParams}` : '';
 
-    const localizeVar = (line) => this.localizeVar(line);
+    this.emitBlockFactory(blockName, `ctx${extraParams}`, rootVar, createLines, setupLines, factoryVars);
+  };
 
-    // Include enclosing loop variables in the factory signature
-    const loopParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
-    const extraParams = loopParams ? `, ${loopParams}` : '';
+  // --------------------------------------------------------------------------
+  // emitBlockFactory — shared factory generation for conditionals and loops
+  // --------------------------------------------------------------------------
 
+  proto.emitBlockFactory = function(blockName, params, rootVar, createLines, setupLines, factoryVars, isStatic) {
     const factoryLines = [];
-    factoryLines.push(`function ${blockName}(ctx${extraParams}) {`);
+    factoryLines.push(`function ${blockName}(${params}) {`);
 
-    // Declare local variables
-    const localVars = new Set();
-    for (const line of createLines) {
-      const match = line.match(/^this\.(_(?:el|t|anchor|frag|slot|c|inst|empty)\d+)\s*=/);
-      if (match) localVars.add(match[1]);
-    }
-    if (localVars.size > 0) {
-      factoryLines.push(`  let ${[...localVars].join(', ')};`);
+    if (factoryVars.size > 0) {
+      factoryLines.push(`  let ${[...factoryVars].join(', ')};`);
     }
 
     const hasEffects = setupLines.length > 0;
@@ -1424,49 +1401,50 @@ export function installComponentSupport(CodeGenerator, Lexer) {
 
     factoryLines.push(`  return {`);
 
-    // c() - create
+    if (isStatic) {
+      factoryLines.push(`    _s: true,`);
+    }
+
+    const fragChildren = this._fragChildren.get(rootVar);
+    const firstNode = fragChildren ? fragChildren[0] : rootVar;
+
     factoryLines.push(`    c() {`);
     for (const line of createLines) {
-      factoryLines.push(`      ${localizeVar(line)}`);
+      factoryLines.push(`      ${line}`);
     }
+    factoryLines.push(`      this._first = ${firstNode};`);
     factoryLines.push(`    },`);
 
-    // m() - mount
     factoryLines.push(`    m(target, anchor) {`);
-    factoryLines.push(`      target.insertBefore(${localizeVar(rootVar)}, anchor);`);
+    if (fragChildren) {
+      for (const child of fragChildren) {
+        factoryLines.push(`      if (target) target.insertBefore(${child}, anchor);`);
+      }
+    } else {
+      factoryLines.push(`      if (target) target.insertBefore(${rootVar}, anchor);`);
+    }
     factoryLines.push(`    },`);
 
-    // p() - update/patch
-    factoryLines.push(`    p(ctx${extraParams}) {`);
+    factoryLines.push(`    p(${params}) {`);
     if (hasEffects) {
       factoryLines.push(`      disposers.forEach(d => d());`);
       factoryLines.push(`      disposers = [];`);
       for (const line of setupLines) {
-        const localizedLine = localizeVar(line);
-        const wrappedLine = localizedLine.replace(
-          /__effect\(\(\) => \{/g,
-          'disposers.push(__effect(() => {'
-        ).replace(
-          /\}\);$/gm,
-          '}));'
-        );
-        factoryLines.push(`      ${wrappedLine}`);
+        factoryLines.push(`      ${line}`);
       }
     }
     factoryLines.push(`    },`);
 
-    // d() - destroy
     factoryLines.push(`    d(detaching) {`);
     if (hasEffects) {
       factoryLines.push(`      disposers.forEach(d => d());`);
     }
-    const condFragChildren = getFragChildren(rootVar, createLines, localizeVar);
-    if (condFragChildren) {
-      for (const child of condFragChildren) {
+    if (fragChildren) {
+      for (const child of fragChildren) {
         factoryLines.push(`      if (detaching && ${child}) ${child}.remove();`);
       }
     } else {
-      factoryLines.push(`      if (detaching && ${localizeVar(rootVar)}) ${localizeVar(rootVar)}.remove();`);
+      factoryLines.push(`      if (detaching && ${rootVar}) ${rootVar}.remove();`);
     }
     factoryLines.push(`    }`);
 
@@ -1514,136 +1492,46 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       }
     }
 
-    // Save state and generate item template in isolation
-    const savedCreateLines = this._createLines;
-    const savedSetupLines = this._setupLines;
+    const saved = [this._createLines, this._setupLines, this._factoryMode, this._factoryVars];
 
     this._createLines = [];
     this._setupLines = [];
+    this._factoryMode = true;
+    this._factoryVars = new Set();
 
-    // Capture enclosing loop variables before pushing current loop
-    const outerLoopParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
-    const outerExtra = outerLoopParams ? `, ${outerLoopParams}` : '';
+    const outerParams = this._loopVarStack.map(v => `${v.itemVar}, ${v.indexVar}`).join(', ');
+    const outerExtra = outerParams ? `, ${outerParams}` : '';
 
     this._loopVarStack.push({ itemVar, indexVar });
     const itemNode = this.generateTemplateBlock(body);
     this._loopVarStack.pop();
     const itemCreateLines = this._createLines;
     const itemSetupLines = this._setupLines;
+    const itemFactoryVars = this._factoryVars;
 
-    this._createLines = savedCreateLines;
-    this._setupLines = savedSetupLines;
-
-    const localizeVar = (line) => this.localizeVar(line);
-
-    // Generate block factory
-    const factoryLines = [];
-    factoryLines.push(`function ${blockName}(ctx, ${itemVar}, ${indexVar}${outerExtra}) {`);
-
-    const localVars = new Set();
-    for (const line of itemCreateLines) {
-      const match = line.match(/^this\.(_(?:el|t|anchor|frag|slot|c|inst|empty)\d+)\s*=/);
-      if (match) localVars.add(match[1]);
-    }
-    if (localVars.size > 0) {
-      factoryLines.push(`  let ${[...localVars].join(', ')};`);
-    }
-
-    const hasEffects = itemSetupLines.length > 0;
-    if (hasEffects) {
-      factoryLines.push(`  let disposers = [];`);
-    }
+    [this._createLines, this._setupLines, this._factoryMode, this._factoryVars] = saved;
 
-    factoryLines.push(`  return {`);
+    const isStatic = itemSetupLines.length === 0;
+    const loopParams = `ctx, ${itemVar}, ${indexVar}${outerExtra}`;
+    this.emitBlockFactory(blockName, loopParams, itemNode, itemCreateLines, itemSetupLines, itemFactoryVars, isStatic);
 
-    // c() - create
-    factoryLines.push(`    c() {`);
-    for (const line of itemCreateLines) {
-      factoryLines.push(`      ${localizeVar(line)}`);
-    }
-    factoryLines.push(`    },`);
+    // Build key function argument (null = use item as key)
+    const hasCustomKey = keyExpr !== itemVar;
+    const keyFnCode = hasCustomKey ? `(${itemVar}, ${indexVar}) => ${keyExpr}` : 'null';
 
-    // m() - mount (also repositions already-mounted blocks)
-    const loopFragChildren = getFragChildren(itemNode, itemCreateLines, localizeVar);
-    factoryLines.push(`    m(target, anchor) {`);
-    if (loopFragChildren) {
-      for (const child of loopFragChildren) {
-        factoryLines.push(`      if (target) target.insertBefore(${child}, anchor);`);
-      }
-    } else {
-      factoryLines.push(`      if (target) target.insertBefore(${localizeVar(itemNode)}, anchor);`);
-    }
-    factoryLines.push(`    },`);
-
-    // p() - update
-    factoryLines.push(`    p(ctx, ${itemVar}, ${indexVar}${outerExtra}) {`);
-    if (hasEffects) {
-      factoryLines.push(`      disposers.forEach(d => d());`);
-      factoryLines.push(`      disposers = [];`);
-      for (const line of itemSetupLines) {
-        const localizedLine = localizeVar(line);
-        const wrappedLine = localizedLine.replace(
-          /__effect\(\(\) => \{/g,
-          'disposers.push(__effect(() => {'
-        ).replace(
-          /\}\);$/gm,
-          '}));'
-        );
-        factoryLines.push(`      ${wrappedLine}`);
-      }
-    }
-    factoryLines.push(`    },`);
-
-    // d() - destroy
-    factoryLines.push(`    d(detaching) {`);
-    if (hasEffects) {
-      factoryLines.push(`      disposers.forEach(d => d());`);
-    }
-    if (loopFragChildren) {
-      for (const child of loopFragChildren) {
-        factoryLines.push(`      if (detaching && ${child}) ${child}.remove();`);
-      }
-    } else {
-      factoryLines.push(`      if (detaching && ${localizeVar(itemNode)}) ${localizeVar(itemNode)}.remove();`);
-    }
-    factoryLines.push(`    }`);
-
-    factoryLines.push(`  };`);
-    factoryLines.push(`}`);
-
-    this._blockFactories.push(factoryLines.join('\n'));
+    // Build outer vars argument list for nested loops
+    const outerArgs = outerParams ? `, ${outerParams}` : '';
 
     // Generate reconciliation code in _setup()
     const setupLines = [];
     setupLines.push(`// Loop: ${blockName}`);
     setupLines.push(`{`);
-    setupLines.push(`  const __anchor = ${anchorVar};`);
-    setupLines.push(`  const __map = new Map();`);
-    setupLines.push(`  __effect(() => {`);
-    setupLines.push(`    const __items = ${collectionCode};`);
-    setupLines.push(`    const __parent = __anchor.parentNode;`);
-    setupLines.push(`    const __newMap = new Map();`);
-    setupLines.push(``);
-    setupLines.push(`    for (let ${indexVar} = 0; ${indexVar} < __items.length; ${indexVar}++) {`);
-    setupLines.push(`      const ${itemVar} = __items[${indexVar}];`);
-    setupLines.push(`      const __key = ${keyExpr};`);
-    setupLines.push(`      let __block = __map.get(__key);`);
-    setupLines.push(`      if (!__block) {`);
-    setupLines.push(`        __block = ${blockName}(this, ${itemVar}, ${indexVar}${outerExtra});`);
-    setupLines.push(`        __block.c();`);
-    setupLines.push(`      }`);
-    setupLines.push(`      __block.m(__parent, __anchor);`);
-    setupLines.push(`      __block.p(this, ${itemVar}, ${indexVar}${outerExtra});`);
-    setupLines.push(`      __newMap.set(__key, __block);`);
-    setupLines.push(`    }`);
-    setupLines.push(``);
-    setupLines.push(`    for (const [__k, __b] of __map) {`);
-    setupLines.push(`      if (!__newMap.has(__k)) __b.d(true);`);
-    setupLines.push(`    }`);
-    setupLines.push(``);
-    setupLines.push(`    __map.clear();`);
-    setupLines.push(`    for (const [__k, __v] of __newMap) __map.set(__k, __v);`);
-    setupLines.push(`  });`);
+    setupLines.push(`  const __s = { blocks: [], keys: [] };`);
+    const effOpen = this._factoryMode ? 'disposers.push(__effect(() => {' : '__effect(() => {';
+    const effClose = this._factoryMode ? '}));' : '});';
+    setupLines.push(`  ${effOpen}`);
+    setupLines.push(`    __reconcile(${anchorVar}, __s, ${collectionCode}, ${this._self}, ${blockName}, ${keyFnCode}${outerArgs});`);
+    setupLines.push(`  ${effClose}`);
     setupLines.push(`}`);
 
     this._setupLines.push(setupLines.join('\n    '));
@@ -1660,15 +1548,16 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     const elVar = this.newElementVar('el');
     const { propsCode, reactiveProps, childrenSetupLines } = this.buildComponentProps(args);
 
+    const s = this._self;
     this._createLines.push(`${instVar} = new ${componentName}(${propsCode});`);
     this._createLines.push(`${elVar} = ${instVar}._create();`);
-    this._createLines.push(`(this._children || (this._children = [])).push(${instVar});`);
+    this._createLines.push(`(${s}._children || (${s}._children = [])).push(${instVar});`);
 
     this._setupLines.push(`if (${instVar}._setup) ${instVar}._setup();`);
     this._setupLines.push(`if (${instVar}.mounted) ${instVar}.mounted();`);
 
     for (const { key, valueCode } of reactiveProps) {
-      this._setupLines.push(`__effect(() => { if (${instVar}.${key}) ${instVar}.${key}.value = ${valueCode}; });`);
+      this._pushEffect(`if (${instVar}.${key}) ${instVar}.${key}.value = ${valueCode};`);
     }
 
     for (const line of childrenSetupLines) {
@@ -1688,56 +1577,43 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     let childrenVar = null;
     const childrenSetupLines = [];
 
+    // Simple reactive values pass the signal directly for shared reactivity;
+    // complex expressions use normal .value unwrapping to compute the value.
+    const addProp = (key, value) => {
+      const isDirectSignal = this.reactiveMembers && (
+        (typeof value === 'string' && this.reactiveMembers.has(value)) ||
+        (Array.isArray(value) && value[0] === '.' && value[1] === 'this' && typeof value[2] === 'string' && this.reactiveMembers.has(value[2]))
+      );
+      if (isDirectSignal) {
+        const member = typeof value === 'string' ? value : value[2];
+        props.push(`${key}: ${this._self}.${member}`);
+      } else {
+        const valueCode = this.generateInComponent(value, 'value');
+        props.push(`${key}: ${valueCode}`);
+        if (this.hasReactiveDeps(value)) {
+          reactiveProps.push({ key, valueCode });
+        }
+      }
+    };
+
+    const addObjectProps = (objExpr) => {
+      for (let i = 1; i < objExpr.length; i++) {
+        const [key, value] = objExpr[i];
+        if (typeof key === 'string') addProp(key, value);
+      }
+    };
+
     for (const arg of args) {
       if (this.is(arg, 'object')) {
-        for (let i = 1; i < arg.length; i++) {
-          const [key, value] = arg[i];
-          if (typeof key === 'string') {
-            // Simple reactive identifier — pass signal directly for shared reactivity.
-            // Complex expressions — use normal .value unwrapping to compute the value.
-            const isSimpleReactive = this.reactiveMembers && (
-              (typeof value === 'string' && this.reactiveMembers.has(value)) ||
-              (Array.isArray(value) && value[0] === '.' && value[1] === 'this' && typeof value[2] === 'string' && this.reactiveMembers.has(value[2]))
-            );
-            if (isSimpleReactive) {
-              const member = typeof value === 'string' ? value : value[2];
-              props.push(`${key}: this.${member}`);
-            } else {
-              const valueCode = this.generateInComponent(value, 'value');
-              props.push(`${key}: ${valueCode}`);
-              if (this.hasReactiveDeps(value)) {
-                reactiveProps.push({ key, valueCode });
-              }
-            }
-          }
-        }
+        addObjectProps(arg);
       } else if (Array.isArray(arg) && (arg[0] === '->' || arg[0] === '=>')) {
         let block = arg[2];
         if (block) {
-          // Indented attributes: extract object nodes from block as props
           if (this.is(block, 'block')) {
             const domChildren = [];
             for (const child of block.slice(1)) {
               if (this.is(child, 'object')) {
-                for (let i = 1; i < child.length; i++) {
-                  const [key, value] = child[i];
-                  if (typeof key === 'string') {
-                    const isSimpleReactive = this.reactiveMembers && (
-                      (typeof value === 'string' && this.reactiveMembers.has(value)) ||
-                      (Array.isArray(value) && value[0] === '.' && value[1] === 'this' && typeof value[2] === 'string' && this.reactiveMembers.has(value[2]))
-                    );
-                    if (isSimpleReactive) {
-                      const member = typeof value === 'string' ? value : value[2];
-                      props.push(`${key}: this.${member}`);
-                    } else {
-                      const valueCode = this.generateInComponent(value, 'value');
-                      props.push(`${key}: ${valueCode}`);
-                      if (this.hasReactiveDeps(value)) {
-                        reactiveProps.push({ key, valueCode });
-                      }
-                    }
-                  }
-                }
+                addObjectProps(child);
               } else {
                 domChildren.push(child);
               }
@@ -1900,6 +1776,134 @@ function __clsx(...args) {
   return args.filter(Boolean).join(' ');
 }
 
+function __lis(arr) {
+  const n = arr.length;
+  if (n === 0) return [];
+  const tails = [], indices = [], prev = new Array(n).fill(-1);
+  for (let i = 0; i < n; i++) {
+    if (arr[i] === -1) continue;
+    let lo = 0, hi = tails.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (tails[mid] < arr[i]) lo = mid + 1; else hi = mid;
+    }
+    tails[lo] = arr[i];
+    indices[lo] = i;
+    if (lo > 0) prev[i] = indices[lo - 1];
+  }
+  const result = [];
+  let k = indices[tails.length - 1];
+  for (let i = tails.length - 1; i >= 0; i--) { result.push(k); k = prev[k]; }
+  result.reverse();
+  return result;
+}
+
+function __reconcile(anchor, state, items, ctx, factory, keyFn, ...outer) {
+  const parent = anchor.parentNode;
+  if (!parent) return;
+
+  const oldKeys = state.keys;
+  const oldBlocks = state.blocks;
+  const oldLen = oldKeys.length;
+  const newLen = items.length;
+  const newBlocks = new Array(newLen);
+  const hasKeyFn = keyFn != null;
+  const newKeys = hasKeyFn ? items.map((item, i) => keyFn(item, i)) : items;
+
+  // Phase 0: first render — batch create via DocumentFragment
+  if (oldLen === 0) {
+    if (newLen > 0) {
+      const frag = document.createDocumentFragment();
+      for (let i = 0; i < newLen; i++) {
+        const block = factory(ctx, items[i], i, ...outer);
+        block.c();
+        block.m(frag, null);
+        if (!block._s) block.p(ctx, items[i], i, ...outer);
+        newBlocks[i] = block;
+      }
+      parent.insertBefore(frag, anchor);
+    }
+    state.keys = hasKeyFn ? newKeys : items.slice();
+    state.blocks = newBlocks;
+    return;
+  }
+
+  // Phase 1: prefix scan — skip p() (item+index identical, effects already live)
+  let start = 0;
+  const minLen = oldLen < newLen ? oldLen : newLen;
+  while (start < minLen && oldKeys[start] === newKeys[start]) {
+    newBlocks[start] = oldBlocks[start];
+    start++;
+  }
+
+  // Phase 2: suffix scan — call p() (index may differ)
+  let oldEnd = oldLen - 1;
+  let newEnd = newLen - 1;
+  while (oldEnd >= start && newEnd >= start && oldKeys[oldEnd] === newKeys[newEnd]) {
+    const block = oldBlocks[oldEnd];
+    if (!block._s) block.p(ctx, items[newEnd], newEnd, ...outer);
+    newBlocks[newEnd] = block;
+    oldEnd--;
+    newEnd--;
+  }
+
+  // Remove old blocks in the middle that aren't in the new set
+  if (start > newEnd) {
+    for (let i = start; i <= oldEnd; i++) oldBlocks[i].d(true);
+  } else if (start > oldEnd) {
+    // Phase 3a: pure insertion — batch via DocumentFragment
+    const next = newEnd + 1 < newLen ? newBlocks[newEnd + 1]._first : anchor;
+    const frag = document.createDocumentFragment();
+    for (let i = start; i <= newEnd; i++) {
+      const block = factory(ctx, items[i], i, ...outer);
+      block.c();
+      block.m(frag, null);
+      if (!block._s) block.p(ctx, items[i], i, ...outer);
+      newBlocks[i] = block;
+    }
+    parent.insertBefore(frag, next);
+  } else {
+    // Phase 4: general case — temp Map + LIS
+    const oldKeyIdx = new Map();
+    for (let i = start; i <= oldEnd; i++) oldKeyIdx.set(oldKeys[i], i);
+
+    const seq = new Array(newEnd - start + 1);
+    for (let i = start; i <= newEnd; i++) {
+      const key = newKeys[i];
+      const oldIdx = oldKeyIdx.get(key);
+      if (oldIdx !== undefined) {
+        seq[i - start] = oldIdx - start;
+        const block = oldBlocks[oldIdx];
+        if (!block._s) block.p(ctx, items[i], i, ...outer);
+        newBlocks[i] = block;
+        oldKeyIdx.delete(key);
+      } else {
+        seq[i - start] = -1;
+        const block = factory(ctx, items[i], i, ...outer);
+        block.c();
+        if (!block._s) block.p(ctx, items[i], i, ...outer);
+        newBlocks[i] = block;
+      }
+    }
+
+    for (const idx of oldKeyIdx.values()) oldBlocks[idx].d(true);
+
+    const lis = __lis(seq);
+    const lisSet = new Set(lis);
+    let next = newEnd + 1 < newLen ? newBlocks[newEnd + 1]._first : anchor;
+    for (let i = newEnd; i >= start; i--) {
+      const block = newBlocks[i];
+      if (!lisSet.has(i - start)) {
+        block.m(parent, next);
+      }
+      next = block._first;
+    }
+  }
+
+  state.keys = hasKeyFn ? newKeys : items.slice();
+  state.blocks = newBlocks;
+}
+
 class __Component {
   constructor(props = {}) {
     Object.assign(this, props);
@@ -1935,7 +1939,7 @@ class __Component {
 
 // Register on globalThis for runtime deduplication
 if (typeof globalThis !== 'undefined') {
-  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component };
+  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __Component };
 }
 
 `;