rip-lang 3.8.10 → 3.9.1

package/src/components.js

@@ -1,8 +1,9 @@
 // Component System — Fine-grained reactive components for Rip
 //
-// Architecture: installComponentSupport(CodeGenerator) adds methods to the
-// CodeGenerator prototype, enabling component compilation. A separate
-// getComponentRuntime() emits runtime helpers only when components are used.
+// Architecture: installComponentSupport(CodeGenerator, Lexer) adds methods to
+// both prototypes — render rewriting on the Lexer, component code generation
+// on the CodeGenerator. A separate getComponentRuntime() emits runtime helpers
+// only when components are used.
 //
 // Naming: All render-tree generators use generate* (consistent with compiler).
 
@@ -50,11 +51,381 @@ function getMemberName(target) {
   return null;
 }
 
+/**
+ * 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
 // ============================================================================
 
-export function installComponentSupport(CodeGenerator) {
+export function installComponentSupport(CodeGenerator, Lexer) {
+
+  // ==========================================================================
+  // Lexer: Render block rewriter
+  // ==========================================================================
+  // Transforms template syntax inside render blocks:
+  //   - Implicit div for class-only selectors: .card → div.card
+  //   - Combine #id selectors: div # main → div#main
+  //   - Two-way binding: value <=> username → __bind_value__: username
+  //   - Event modifiers: @click.prevent: → [@click.prevent]:
+  //   - Dynamic classes: div.('card', x && 'active') → div.__clsx(...)
+  //   - Implicit nesting: inject -> before INDENT for template elements
+  //   - Hyphenated attributes: data-foo: "x" → "data-foo": "x"
+  // ==========================================================================
+
+  Lexer.prototype.rewriteRender = function() {
+    let gen = (tag, val, origin) => {
+      let t = [tag, val];
+      t.pre = 0;
+      t.data = null;
+      t.loc = origin?.loc ?? {r: 0, c: 0, n: 0};
+      t.spaced = false;
+      t.newLine = false;
+      t.generated = true;
+      if (origin) t.origin = origin;
+      return t;
+    };
+
+    let inRender = false;
+    let renderIndentLevel = 0;
+    let currentIndent = 0;
+    let pendingCallEnds = [];
+
+    let isHtmlTag = (name) => {
+      let tagPart = name.split('#')[0];
+      return TEMPLATE_TAGS.has(tagPart);
+    };
+
+    let isComponent = (name) => {
+      if (!name || typeof name !== 'string') return false;
+      return /^[A-Z]/.test(name);
+    };
+
+    let isTemplateTag = (name) => {
+      return isHtmlTag(name) || isComponent(name);
+    };
+
+    let startsWithTag = (tokens, i) => {
+      let j = i;
+      while (j > 0) {
+        let pt = tokens[j - 1][0];
+        if (pt === 'TERMINATOR' || pt === 'RENDER') {
+          break;
+        }
+        if (pt === 'INDENT' || pt === 'OUTDENT') {
+          let jt = tokens[j][0];
+          if (jt === 'CALL_END' || jt === ')') {
+            let open = jt === 'CALL_END' ? 'CALL_START' : '(';
+            let depth = 1;
+            let k = j - 1;
+            while (k >= 0 && depth > 0) {
+              let kt = tokens[k][0];
+              if (kt === jt) depth++;
+              else if (kt === open) depth--;
+              if (depth > 0) k--;
+            }
+            j = k;
+            continue;
+          }
+          break;
+        }
+        if (pt === 'CALL_END' || pt === ')') {
+          let open = pt === 'CALL_END' ? 'CALL_START' : '(';
+          let depth = 1;
+          let k = j - 2;
+          while (k >= 0 && depth > 0) {
+            let kt = tokens[k][0];
+            if (kt === 'CALL_END' || kt === ')') depth++;
+            else if (kt === 'CALL_START' || kt === '(') depth--;
+            if (depth > 0) k--;
+          }
+          j = k;
+          continue;
+        }
+        j--;
+      }
+      return tokens[j] && tokens[j][0] === 'IDENTIFIER' && isTemplateTag(tokens[j][1]);
+    };
+
+    this.scanTokens(function(token, i, tokens) {
+      let tag = token[0];
+      let nextToken = i < tokens.length - 1 ? tokens[i + 1] : null;
+
+      // Track entering render blocks
+      if (tag === 'RENDER') {
+        inRender = true;
+        renderIndentLevel = currentIndent + 1;
+        return 1;
+      }
+
+      // Track indentation
+      if (tag === 'INDENT') {
+        currentIndent++;
+        return 1;
+      }
+
+      if (tag === 'OUTDENT') {
+        currentIndent--;
+
+        // Insert pending CALL_END(s) after this OUTDENT
+        let inserted = 0;
+        while (pendingCallEnds.length > 0 && pendingCallEnds[pendingCallEnds.length - 1] > currentIndent) {
+          let callEndToken = gen('CALL_END', ')', token);
+          tokens.splice(i + 1 + inserted, 0, callEndToken);
+          pendingCallEnds.pop();
+          inserted++;
+        }
+
+        // Exit render block when we outdent past where it started
+        if (inRender && currentIndent < renderIndentLevel) {
+          inRender = false;
+        }
+        return 1 + inserted;
+      }
+
+      // Only process if we're inside a render block
+      if (!inRender) return 1;
+
+      // ─────────────────────────────────────────────────────────────────────
+      // Hyphenated attributes
+      // data-lucide: "search" → "data-lucide": "search"
+      // ─────────────────────────────────────────────────────────────────────
+      if (tag === 'IDENTIFIER' && !token.spaced) {
+        let parts = [token[1]];
+        let j = i + 1;
+        while (j + 1 < tokens.length) {
+          let hyphen = tokens[j];
+          let nextPart = tokens[j + 1];
+          if (hyphen[0] === '-' && !hyphen.spaced &&
+              (nextPart[0] === 'IDENTIFIER' || nextPart[0] === 'PROPERTY')) {
+            parts.push(nextPart[1]);
+            j += 2;
+            if (nextPart[0] === 'PROPERTY') break;
+          } else {
+            break;
+          }
+        }
+        if (parts.length > 1 && j > i + 1 && tokens[j - 1][0] === 'PROPERTY') {
+          token[0] = 'STRING';
+          token[1] = `"${parts.join('-')}"`;
+          tokens.splice(i + 1, j - i - 1);
+          return 1;
+        }
+      }
+
+      // ─────────────────────────────────────────────────────────────────────
+      // Implicit div for class-only or bare dot selectors
+      // .card → div.card    |  . (with children) → div
+      // ─────────────────────────────────────────────────────────────────────
+      if (tag === '.') {
+        let prevToken = i > 0 ? tokens[i - 1] : null;
+        let prevTag = prevToken ? prevToken[0] : null;
+        if (prevTag === 'INDENT' || prevTag === 'TERMINATOR') {
+          if (nextToken && nextToken[0] === 'PROPERTY') {
+            let divToken = gen('IDENTIFIER', 'div', token);
+            tokens.splice(i, 0, divToken);
+            return 2;
+          }
+          // Skip .('classes') — handled by dynamic classes handler below
+          if (!nextToken || nextToken[0] !== '(') {
+            token[0] = 'IDENTIFIER';
+            token[1] = 'div';
+            return 0;
+          }
+        }
+      }
+
+      // ─────────────────────────────────────────────────────────────────────
+      // Combine #id selectors
+      // div # main → div#main
+      // ─────────────────────────────────────────────────────────────────────
+      if (tag === 'IDENTIFIER' || tag === 'PROPERTY') {
+        let next = tokens[i + 1];
+        let nextNext = tokens[i + 2];
+        if (next && next[0] === '#' && nextNext && (nextNext[0] === 'PROPERTY' || nextNext[0] === 'IDENTIFIER')) {
+          token[1] = token[1] + '#' + nextNext[1];
+          if (nextNext.spaced) token.spaced = true;
+          tokens.splice(i + 1, 2);
+          return 1;
+        }
+      }
+
+      // ─────────────────────────────────────────────────────────────────────
+      // Two-way binding
+      // value <=> username → __bind_value__: username
+      // ─────────────────────────────────────────────────────────────────────
+      if (tag === 'BIND') {
+        let prevToken = i > 0 ? tokens[i - 1] : null;
+        let nextBindToken = tokens[i + 1];
+        if (prevToken && (prevToken[0] === 'IDENTIFIER' || prevToken[0] === 'PROPERTY') &&
+            nextBindToken && nextBindToken[0] === 'IDENTIFIER') {
+          prevToken[1] = `__bind_${prevToken[1]}__`;
+          token[0] = ':';
+          token[1] = ':';
+          return 1;
+        }
+      }
+
+      // ─────────────────────────────────────────────────────────────────────
+      // Event modifiers
+      // @click.prevent: handler → [@click.prevent]: handler
+      // ─────────────────────────────────────────────────────────────────────
+      if (tag === '@') {
+        let j = i + 1;
+        if (j < tokens.length && tokens[j][0] === 'PROPERTY') {
+          j++;
+          while (j + 1 < tokens.length && tokens[j][0] === '.' && tokens[j + 1][0] === 'PROPERTY') {
+            j += 2;
+          }
+          if (j > i + 2 && j < tokens.length && tokens[j][0] === ':') {
+            let openBracket = gen('[', '[', token);
+            tokens.splice(i, 0, openBracket);
+            let closeBracket = gen(']', ']', tokens[j + 1]);
+            tokens.splice(j + 1, 0, closeBracket);
+            return 2;
+          }
+        }
+      }
+
+      // ─────────────────────────────────────────────────────────────────────
+      // Dynamic classes
+      // div.('card', x && 'active') → div.__clsx('card', x && 'active')
+      // .('card') → div.__clsx('card')
+      // ─────────────────────────────────────────────────────────────────────
+      if (tag === '.' && nextToken && nextToken[0] === '(') {
+        let prevToken = i > 0 ? tokens[i - 1] : null;
+        let prevTag = prevToken ? prevToken[0] : null;
+        let atLineStart = prevTag === 'INDENT' || prevTag === 'TERMINATOR';
+
+        let cxToken = gen('PROPERTY', '__clsx', token);
+        nextToken[0] = 'CALL_START';
+        let depth = 1;
+        for (let j = i + 2; j < tokens.length && depth > 0; j++) {
+          if (tokens[j][0] === '(' || tokens[j][0] === 'CALL_START') depth++;
+          else if (tokens[j][0] === ')') {
+            depth--;
+            if (depth === 0) tokens[j][0] = 'CALL_END';
+          } else if (tokens[j][0] === 'CALL_END') depth--;
+        }
+
+        if (atLineStart) {
+          let divToken = gen('IDENTIFIER', 'div', token);
+          tokens.splice(i, 0, divToken);
+          tokens.splice(i + 2, 0, cxToken);
+          return 3;
+        } else {
+          tokens.splice(i + 1, 0, cxToken);
+          return 2;
+        }
+      }
+
+      // ─────────────────────────────────────────────────────────────────────
+      // Implicit nesting (inject -> before INDENT)
+      // ─────────────────────────────────────────────────────────────────────
+      if (nextToken && nextToken[0] === 'INDENT') {
+        if (tag === '->' || tag === '=>' || tag === 'CALL_START' || tag === '(') {
+          return 1;
+        }
+
+        let isTemplateElement = false;
+        let prevTag = i > 0 ? tokens[i - 1][0] : null;
+        let isAfterControlFlow = prevTag === 'IF' || prevTag === 'UNLESS' || prevTag === 'WHILE' || prevTag === 'UNTIL' || prevTag === 'WHEN';
+
+        // Detect __clsx CALL_END early — OUTDENT tokens inside multi-line .()
+        // args prevent startsWithTag from seeing the template tag, so we check
+        // for __clsx ownership first by counting balanced CALL_START/CALL_END.
+        let isClsxCallEnd = false;
+        if (tag === 'CALL_END') {
+          let depth = 1;
+          for (let j = i - 1; j >= 0 && depth > 0; j--) {
+            if (tokens[j][0] === 'CALL_END') depth++;
+            else if (tokens[j][0] === 'CALL_START') {
+              depth--;
+              if (depth === 0 && j > 0 && tokens[j - 1][0] === 'PROPERTY' && tokens[j - 1][1] === '__clsx') {
+                isClsxCallEnd = true;
+              }
+            }
+          }
+        }
+
+        if (isClsxCallEnd) {
+          isTemplateElement = true;
+        } else if (tag === 'IDENTIFIER' && isTemplateTag(token[1]) && !isAfterControlFlow) {
+          isTemplateElement = true;
+        } else if (tag === 'PROPERTY' || tag === 'STRING' || tag === 'STRING_END' || 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] === '#');
+
+          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
+            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 {
+            // Tag with args: inject , -> (call wrapping handled by addImplicitBracesAndParens)
+            let commaToken = gen(',', ',', token);
+            let arrowToken = gen('->', '->', token);
+            arrowToken.newLine = true;
+            tokens.splice(i + 1, 0, commaToken, arrowToken);
+            return 3;
+          }
+        }
+      }
+
+      // ─────────────────────────────────────────────────────────────────────
+      // Bare component reference (PascalCase, no children, no args)
+      // Counter → Counter() so it gets treated as a component instantiation
+      // ─────────────────────────────────────────────────────────────────────
+      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;
+    });
+  };
+
+  // ==========================================================================
+  // CodeGenerator: Component compilation
+  // ==========================================================================
+
   const proto = CodeGenerator.prototype;
 
   // ==========================================================================
@@ -67,7 +438,7 @@ export function installComponentSupport(CodeGenerator) {
    */
   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\./g, 'ctx.');
+    result = result.replace(/\bthis\b/g, 'ctx');
     return result;
   };
 
@@ -266,8 +637,14 @@ export function installComponentSupport(CodeGenerator) {
 
     // Computed (derived)
     for (const { name, expr } of derivedVars) {
-      const val = this.generateInComponent(expr, 'value');
-      lines.push(`    this.${name} = __computed(() => ${val});`);
+      if (this.is(expr, 'block') && expr.length > 2) {
+        const transformed = this.transformComponentMembers(expr);
+        const body = this.generateFunctionBody(transformed);
+        lines.push(`    this.${name} = __computed(() => ${body});`);
+      } else {
+        const val = this.generateInComponent(expr, 'value');
+        lines.push(`    this.${name} = __computed(() => ${val});`);
+      }
     }
 
     // Effects
@@ -643,10 +1020,10 @@ export function installComponentSupport(CodeGenerator) {
         const eventName = key[2];
         // Bind method references to this
         if (typeof value === 'string' && this.componentMembers?.has(value)) {
-          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => this.${value}(e));`);
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => __batch(() => this.${value}(e)));`);
         } else {
           const handlerCode = this.generateInComponent(value, 'value');
-          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => (${handlerCode})(e));`);
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => __batch(() => (${handlerCode})(e)));`);
         }
         continue;
       }
@@ -860,7 +1237,7 @@ export function installComponentSupport(CodeGenerator) {
           /__effect\(\(\) => \{/g,
           'disposers.push(__effect(() => {'
         ).replace(
-          /\}\);$/g,
+          /\}\);$/gm,
           '}));'
         );
         factoryLines.push(`      ${wrappedLine}`);
@@ -873,7 +1250,14 @@ export function installComponentSupport(CodeGenerator) {
     if (hasEffects) {
       factoryLines.push(`      disposers.forEach(d => d());`);
     }
-    factoryLines.push(`      if (detaching) ${localizeVar(rootVar)}.remove();`);
+    const condFragChildren = getFragChildren(rootVar, createLines, localizeVar);
+    if (condFragChildren) {
+      for (const child of condFragChildren) {
+        factoryLines.push(`      if (detaching) ${child}.remove();`);
+      }
+    } else {
+      factoryLines.push(`      if (detaching) ${localizeVar(rootVar)}.remove();`);
+    }
     factoryLines.push(`    }`);
 
     factoryLines.push(`  };`);
@@ -963,9 +1347,16 @@ export function installComponentSupport(CodeGenerator) {
     }
     factoryLines.push(`    },`);
 
-    // m() - mount
+    // m() - mount (also repositions already-mounted blocks)
+    const loopFragChildren = getFragChildren(itemNode, itemCreateLines, localizeVar);
     factoryLines.push(`    m(target, anchor) {`);
-    factoryLines.push(`      target.insertBefore(${localizeVar(itemNode)}, anchor);`);
+    if (loopFragChildren) {
+      for (const child of loopFragChildren) {
+        factoryLines.push(`      target.insertBefore(${child}, anchor);`);
+      }
+    } else {
+      factoryLines.push(`      target.insertBefore(${localizeVar(itemNode)}, anchor);`);
+    }
     factoryLines.push(`    },`);
 
     // p() - update
@@ -979,7 +1370,7 @@ export function installComponentSupport(CodeGenerator) {
           /__effect\(\(\) => \{/g,
           'disposers.push(__effect(() => {'
         ).replace(
-          /\}\);$/g,
+          /\}\);$/gm,
           '}));'
         );
         factoryLines.push(`      ${wrappedLine}`);
@@ -992,7 +1383,13 @@ export function installComponentSupport(CodeGenerator) {
     if (hasEffects) {
       factoryLines.push(`      disposers.forEach(d => d());`);
     }
-    factoryLines.push(`      if (detaching) ${localizeVar(itemNode)}.remove();`);
+    if (loopFragChildren) {
+      for (const child of loopFragChildren) {
+        factoryLines.push(`      if (detaching) ${child}.remove();`);
+      }
+    } else {
+      factoryLines.push(`      if (detaching) ${localizeVar(itemNode)}.remove();`);
+    }
     factoryLines.push(`    }`);
 
     factoryLines.push(`  };`);
@@ -1015,14 +1412,12 @@ export function installComponentSupport(CodeGenerator) {
     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.p(this, ${itemVar}, ${indexVar});`);
-    setupLines.push(`      } else {`);
+    setupLines.push(`      if (!block) {`);
     setupLines.push(`        block = ${blockName}(this, ${itemVar}, ${indexVar});`);
     setupLines.push(`        block.c();`);
-    setupLines.push(`        block.m(parent, anchor);`);
-    setupLines.push(`        block.p(this, ${itemVar}, ${indexVar});`);
     setupLines.push(`      }`);
+    setupLines.push(`      block.m(parent, anchor);`);
+    setupLines.push(`      block.p(this, ${itemVar}, ${indexVar});`);
     setupLines.push(`      newMap.set(key, block);`);
     setupLines.push(`    }`);
     setupLines.push(``);

package/src/grammar/grammar.rip

@@ -197,7 +197,7 @@ grammar =
   ComputedAssign: [
     o 'Assignable COMPUTED_ASSIGN Expression'               , '["computed", 1, 3]'
     o 'Assignable COMPUTED_ASSIGN TERMINATOR Expression'    , '["computed", 1, 4]'
-    o 'Assignable COMPUTED_ASSIGN INDENT Expression OUTDENT', '["computed", 1, 4]'
+    o 'Assignable COMPUTED_ASSIGN Block'                    , '["computed", 1, 3]'
   ]
 
   # Reactive readonly (=!) — constants that cannot be reassigned
@@ -443,7 +443,7 @@ grammar =
   Invocation: [
     o 'Value String'                       , '["tagged-template", 1, 2]'  # Tagged template
     o 'Value Arguments'                    , '[1, ...2]'                  # Regular call
-    o 'Value ES6_OPTIONAL_CALL Arguments'  , '["optcall", 1, ...3]'      # Optional call: x?.(args)
+    o 'Value ES6_OPTIONAL_CALL Arguments'  , '["optcall", 1, ...3]'       # Optional call: x?.(args)
     o 'SUPER Arguments'                    , '["super", ...2]'            # Super call
     o 'DYNAMIC_IMPORT Arguments'           , '[1, ...2]'                  # Dynamic import()
   ]