rip-lang 3.8.9 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.8.9",
+  "version": "3.9.0",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",
@@ -67,7 +67,7 @@
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@rip-lang/api": "workspace:*",
-    "@rip-lang/ui": "workspace:*"
+    "@rip-lang/api": "1.1.5",
+    "@rip-lang/ui": "0.2.0"
   }
 }

package/src/compiler.js

@@ -822,7 +822,6 @@ export class CodeGenerator {
       let ctrlOp = str(rawCtrlOp);
       let isReturn = ctrlSexpr[0] === 'return';
       let targetCode = this.generate(target, 'value');
-      if (typeof target === 'string') this.programVars.add(target);
       let exprCode = this.generate(expr, 'value');
       let ctrlValue = ctrlSexpr.length > 1 ? ctrlSexpr[1] : null;
       let ctrlCode = isReturn
@@ -3254,7 +3253,7 @@ export class Compiler {
 // Component Support (prototype installation)
 // =============================================================================
 
-installComponentSupport(CodeGenerator);
+installComponentSupport(CodeGenerator, Lexer);
 
 // =============================================================================
 // Type Support (enum generator)

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).
 
@@ -54,7 +55,354 @@ function getMemberName(target) {
 // 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 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' || 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 === '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 +415,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;
   };
 
@@ -860,7 +1208,7 @@ export function installComponentSupport(CodeGenerator) {
           /__effect\(\(\) => \{/g,
           'disposers.push(__effect(() => {'
         ).replace(
-          /\}\);$/g,
+          /\}\);$/gm,
           '}));'
         );
         factoryLines.push(`      ${wrappedLine}`);
@@ -979,7 +1327,7 @@ export function installComponentSupport(CodeGenerator) {
           /__effect\(\(\) => \{/g,
           'disposers.push(__effect(() => {'
         ).replace(
-          /\}\);$/g,
+          /\}\);$/gm,
           '}));'
         );
         factoryLines.push(`      ${wrappedLine}`);