rip-lang 3.0.2 → 3.1.1

package/src/grammar/grammar.rip

@@ -80,6 +80,8 @@ grammar =
     o 'For'
     o 'Switch'
     o 'Class'
+    o 'Component'
+    o 'Render'
     o 'Throw'
     o 'Yield'
     o 'Def'
@@ -706,6 +708,39 @@ grammar =
     o 'CLASS SimpleAssignable EXTENDS Expression Block', '["class", 2, 4, 5]'
   ]
 
+  # ============================================================================
+  # Components
+  # ============================================================================
+
+  # Component: expression-based anonymous class with render support.
+  # Usage: Counter = component
+  #          @count := 0
+  #          render
+  #            div "Count: {@count}"
+  Component: [
+    o 'COMPONENT INDENT ComponentBody OUTDENT', '["component", null, ["block", ...3]]'
+  ]
+
+  ComponentBody: [
+    o 'ComponentLine'                         , '[1]'
+    o 'ComponentBody TERMINATOR ComponentLine', '[...1, 3]'
+    o 'ComponentBody TERMINATOR'
+  ]
+
+  ComponentLine: [
+    o 'Expression'
+    o 'ExpressionLine'
+    o 'Statement'
+  ]
+
+  # Render block: template DSL for fine-grained reactive DOM.
+  # Usage: render
+  #          div.card
+  #            h1 "Hello"
+  Render: [
+    o 'RENDER Block', '["render", 2]'
+  ]
+
   # ============================================================================
   # Import / Export
   # ============================================================================
@@ -747,6 +782,7 @@ grammar =
     o 'EXPORT { }'                                         , '["export", "{}"]'
     o 'EXPORT { ExportSpecifierList OptComma }'            , '["export", 3]'
     o 'EXPORT Class'                                       , '["export", 2]'
+    o 'EXPORT Component'                                   , '["export", 2]'
     o 'EXPORT Def'                                         , '["export", 2]'
     o 'EXPORT Identifier = Expression'                     , '["export", ["=", 2, 4]]'
     o 'EXPORT Identifier = TERMINATOR Expression'          , '["export", ["=", 2, 5]]'
@@ -877,7 +913,7 @@ operators = """
   right       YIELD
   right       = : COMPOUND_ASSIGN RETURN THROW EXTENDS
   right       FORIN FOROF FORAS FORASAWAIT BY WHEN
-  right       IF ELSE FOR WHILE UNTIL LOOP SUPER CLASS IMPORT EXPORT DYNAMIC_IMPORT
+  right       IF ELSE FOR WHILE UNTIL LOOP SUPER CLASS COMPONENT RENDER IMPORT EXPORT DYNAMIC_IMPORT
   left        POST_IF
 """.trim().split('\n').reverse().map (line) -> line.trim().split /\s+/
 

package/src/grammar/solar.rip

@@ -335,7 +335,7 @@ class Generator
 
       # Single pass: group items by nextSymbol
       symbolItems = new Map
-      for item from itemSet.items when item.nextSymbol and item.nextSymbol isnt '$end'
+      for item as itemSet.items when item.nextSymbol and item.nextSymbol isnt '$end'
         items = symbolItems.get(item.nextSymbol)
         unless items
           items = []
@@ -343,7 +343,7 @@ class Generator
         items.push(item)
 
       # Process each symbol with its pre-collected items
-      for [symbol, items] from symbolItems
+      for [symbol, items] as symbolItems
         @_insertStateWithItems symbol, items, itemSet, states, stateMap
 
     @states = states
@@ -359,7 +359,7 @@ class Generator
       newItems = new Set
 
       # Only process item cores we haven't yet seen
-      for item from workingSet when !itemCores.has(item.id)
+      for item as workingSet when !itemCores.has(item.id)
 
         # Add item to closure
         closureSet.items.add(item)
@@ -392,7 +392,7 @@ class Generator
   _goto: (itemSet, symbol) ->
     gotoSet = new State
 
-    for item from itemSet.items when item.nextSymbol is symbol
+    for item as itemSet.items when item.nextSymbol is symbol
       # Create advanced item (lookaheads will be set from FOLLOW sets later)
       newItem = new Item item.rule, null, item.dot + 1
       gotoSet.items.add newItem
@@ -522,11 +522,11 @@ class Generator
   # Assign FOLLOW sets to reduction items
   _assignItemLookaheads!: ->
     for state in @states
-      for item from state.reductions
+      for item as state.reductions
         follows = @types[item.rule.type]?.follows
         if follows
           item.lookaheads.clear()
-          item.lookaheads.add token for token from follows
+          item.lookaheads.add token for token as follows
 
   # ============================================================================
   # Parse Table Generation
@@ -541,19 +541,19 @@ class Generator
       state = states[k] = {}
 
       # Shift and goto actions
-      for [stackSymbol, gotoState] from itemSet.transitions when @symbolIds[stackSymbol]?
+      for [stackSymbol, gotoState] as itemSet.transitions when @symbolIds[stackSymbol]?
         if types[stackSymbol]
           state[@symbolIds[stackSymbol]] = gotoState
         else
           state[@symbolIds[stackSymbol]] = [SHIFT, gotoState]
 
       # Accept action
-      for item from itemSet.items when item.nextSymbol is "$end" and @symbolIds["$end"]?
+      for item as itemSet.items when item.nextSymbol is "$end" and @symbolIds["$end"]?
         state[@symbolIds["$end"]] = [ACCEPT]
 
       # Reduce actions
-      for item from itemSet.reductions
-        for stackSymbol from item.lookaheads when @symbolIds[stackSymbol]?
+      for item as itemSet.reductions
+        for stackSymbol as item.lookaheads when @symbolIds[stackSymbol]?
           action = state[@symbolIds[stackSymbol]]
           op = operators[stackSymbol]
 
@@ -964,7 +964,7 @@ if isRunAsScript
 
         if grammar.grammar
           parts.push '  (rules'
-          for [name, productions] from Object.entries(grammar.grammar)
+          for [name, productions] as Object.entries(grammar.grammar)
             parts.push "    (#{name}"
             for production in productions
               [pattern, action, opts] = production

package/src/lexer.js

@@ -39,6 +39,8 @@
 //
 // ==========================================================================
 
+import { TEMPLATE_TAGS } from './tags.js';
+
 // ==========================================================================
 // Token Category Sets
 // ==========================================================================
@@ -59,6 +61,7 @@ let JS_KEYWORDS = new Set([
 let RIP_KEYWORDS = new Set([
   'undefined', 'Infinity', 'NaN',
   'then', 'unless', 'until', 'loop', 'of', 'by', 'when', 'def',
+  'component', 'render',
 ]);
 
 // Rip aliases: word → operator/value
@@ -158,7 +161,7 @@ let IMPLICIT_FUNC = new Set([
 ]);
 
 // Control flow tokens that don't end implicit calls/objects
-let CONTROL_IN_IMPLICIT = new Set(['IF', 'TRY', 'FINALLY', 'CATCH', 'CLASS', 'SWITCH']);
+let CONTROL_IN_IMPLICIT = new Set(['IF', 'TRY', 'FINALLY', 'CATCH', 'CLASS', 'SWITCH', 'COMPONENT']);
 
 // Single-liner keywords that get implicit INDENT/OUTDENT
 let SINGLE_LINERS = new Set(['ELSE', '->', '=>', 'TRY', 'FINALLY', 'THEN']);
@@ -297,6 +300,8 @@ export class Lexer {
     this.seenExport = false;
     this.importSpecifierList = false;
     this.exportSpecifierList = false;
+    this.inRenderBlock = false;
+    this.renderIndent  = 0;
 
     // Clean source
     code = this.clean(code);
@@ -498,6 +503,18 @@ export class Lexer {
     // Property vs identifier
     if (colon || (prev && (prev[0] === '.' || prev[0] === '?.' || (!prev.spaced && prev[0] === '@')))) {
       tag = 'PROPERTY';
+
+      // In render blocks, consume hyphenated CSS class names: .counter-display → PROPERTY "counter-display"
+      if (this.inRenderBlock && prev && prev[0] === '.' && !colon) {
+        let rest = this.chunk.slice(idLen);
+        while (rest[0] === '-' && /^-[a-zA-Z]/.test(rest)) {
+          let m = /^-([a-zA-Z][\w]*)/.exec(rest);
+          if (!m) break;
+          id += '-' + m[1];
+          idLen += 1 + m[1].length;
+          rest = this.chunk.slice(idLen);
+        }
+      }
     } else {
       tag = 'IDENTIFIER';
     }
@@ -551,6 +568,12 @@ export class Lexer {
     // --- Emit ---
     let t = this.emit(tag, id, {len: idLen, data: Object.keys(data).length ? data : null});
 
+    // Track render block context for line continuation suppression
+    if (tag === 'RENDER') {
+      this.inRenderBlock = true;
+      this.renderIndent = this.indent;
+    }
+
     if (colon) {
       this.emit(':', ':', {len: 1});
       return idLen + colon.length;
@@ -687,6 +710,10 @@ export class Lexer {
 
   // Emit OUTDENT tokens to reach target indent level
   outdentTo(targetSize, outdentLength = 0) {
+    // Exit render block when outdenting past its level
+    if (this.inRenderBlock && targetSize <= this.renderIndent) {
+      this.inRenderBlock = false;
+    }
     let moveOut = this.indent - targetSize;
     while (moveOut > 0) {
       let lastIndent = this.indents[this.indents.length - 1];
@@ -717,6 +744,10 @@ export class Lexer {
 
   // Check if the current line is unfinished (continuation)
   isUnfinished() {
+    // Inside render blocks, a line starting with . is a new element, not method chaining
+    if (this.inRenderBlock && LINE_CONTINUER_RE.test(this.chunk) && /^\s*\./.test(this.chunk)) {
+      return false;
+    }
     return LINE_CONTINUER_RE.test(this.chunk) || UNFINISHED.has(this.prevTag());
   }
 
@@ -1064,6 +1095,7 @@ export class Lexer {
     // Reactive operators
     else if (val === '~=') tag = 'COMPUTED_ASSIGN';
     else if (val === ':=') tag = 'REACTIVE_ASSIGN';
+    else if (val === '<=>') tag = 'BIND';
     else if (val === '~>') tag = 'REACT_ASSIGN';
     else if (val === '=!') tag = 'READONLY_ASSIGN';
     // Export all
@@ -1134,7 +1166,7 @@ export class Lexer {
   }
 
   // ==========================================================================
-  // Rewriter — 7 passes
+  // Rewriter — 8 passes
   // ==========================================================================
 
   rewrite(tokens) {
@@ -1143,6 +1175,7 @@ export class Lexer {
     this.closeOpenCalls();
     this.closeOpenIndexes();
     this.normalizeLines();
+    this.rewriteRender();
     this.tagPostfixConditionals();
     this.addImplicitBracesAndParens();
     this.addImplicitCallCommas();
@@ -1196,6 +1229,7 @@ export class Lexer {
       return token[1] !== ';' && SINGLE_CLOSERS.has(token[0]) &&
         !(token[0] === 'TERMINATOR' && EXPRESSION_CLOSE.has(this.tokens[i + 1]?.[0])) &&
         !(token[0] === 'ELSE' && starter !== 'THEN') ||
+        token[0] === 'INDENT' && !token.generated && (starter === '->' || starter === '=>') ||
         token[0] === ',' && (starter === '->' || starter === '=>') && !this.commaInImplicitCall(i) ||
         CALL_CLOSERS.has(token[0]) && (this.tokens[i - 1]?.newLine || this.tokens[i - 1]?.[0] === 'OUTDENT');
     };
@@ -1250,6 +1284,256 @@ export class 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.__cx__(...)
+  //   - Implicit nesting: inject -> before INDENT for template elements
+  //   - Hyphenated attributes: data-foo: "x" → "data-foo": "x"
+  // =========================================================================
+  rewriteRender() {
+    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 startsWithHtmlTag = (tokens, i) => {
+      let j = i;
+      while (j > 0) {
+        let pt = tokens[j - 1][0];
+        if (pt === 'INDENT' || pt === 'OUTDENT' || pt === 'TERMINATOR' || pt === 'RENDER' || pt === 'CALL_END' || pt === ')') {
+          break;
+        }
+        j--;
+      }
+      return tokens[j] && tokens[j][0] === 'IDENTIFIER' && isHtmlTag(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 selectors
+      // .card → div.card
+      // ─────────────────────────────────────────────────────────────────────
+      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;
+          }
+        }
+      }
+
+      // ─────────────────────────────────────────────────────────────────────
+      // 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') {
+          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.__cx__('card', x && 'active')
+      // .('card') → div.__cx__('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', '__cx__', 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;
+
+        if (tag === 'IDENTIFIER' && isTemplateTag(token[1])) {
+          isTemplateElement = true;
+        } else if (tag === 'PROPERTY' || tag === 'STRING' || tag === 'CALL_END' || tag === ')') {
+          isTemplateElement = startsWithHtmlTag(tokens, i);
+        }
+        else if (tag === 'IDENTIFIER' && i > 1 && tokens[i - 1][0] === '...') {
+          if (startsWithHtmlTag(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 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;
+        }
+      }
+
+      return 1;
+    });
+  }
+
   tagPostfixConditionals() {
     let original = null;