rip-lang 3.7.0 → 3.7.4

package/CHANGELOG.md

@@ -7,6 +7,31 @@ All notable changes to Rip will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.7.4] - 2026-02-11
+
+### Compiler — Nested Function Scope Chain
+
+- **Scope stack for variable hoisting** — Nested functions no longer re-declare variables from enclosing function scopes. Previously, the compiler only checked program-level variables; now it tracks a full scope chain. Fixes incorrect `let` shadowing in deeply nested function patterns (e.g., `mountRoute` inside `createRenderer` in `ui.rip`).
+
+### Rip UI — Demo App Working
+
+- **Router `navigating` getter/setter** — The `_navigating` signal is now accessible through `router.navigating` (read/write), fixing a cross-scope reference where `createRenderer` accessed a variable local to `createRouter`.
+- **Component props passthrough** — `__Component` base class now assigns all props to `this` via `Object.assign(this, props)` before `_init`, so components can access `@router`, `@app`, `@params` etc.
+
+### Language — `*@` Merge-This
+
+- **`*@ = props`** — New merge-assign variant for `this`. Compiles to `Object.assign(this, props)`. Natural extension of `*obj = expr` — no `??=` guard needed since `this` is never null.
+
+## [3.7.3] - 2026-02-11
+
+### Fixes & Polish
+
+- **Interface `::` fix** — `::` type annotations in interface bodies no longer produce double colons in `.d.ts` output.
+- **`.=` dot chain support** — `obj.name .= toUpperCase()` now works (walks back full property chain).
+- **`*` merge auto-init** — `*foo = {...}` auto-creates `foo` if undefined via `??= {}`.
+- **`loop n` uses `it`** — Loop counter is accessible as `it` inside the body.
+- **Syntax highlighting** — `|>` pipe operator added to VS Code, Vim, Playground, and rip-print.
+
 ## [3.7.0] - 2026-02-11
 
 ### Pipe Operator (`|>`)

package/README.md

@@ -9,9 +9,9 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.7.0-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.7.4-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-1219%2F1219-brightgreen.svg" alt="Tests"></a>
+  <a href="#"><img src="https://img.shields.io/badge/tests-1225%2F1225-brightgreen.svg" alt="Tests"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
 </p>
 
@@ -267,7 +267,7 @@ Counter = component
 
 Two keywords — `component` and `render` — are all the language adds. Everything else (`:=` state, `~=` computed, methods, lifecycle) is standard Rip.
 
-See [@rip-lang/ui](packages/ui/) for the full framework: file-based router, reactive stash, parts system, and component renderer.
+See [@rip-lang/ui](packages/ui/) for the full framework: file-based router, reactive stash, component store, and renderer.
 
 ---
 
@@ -344,7 +344,7 @@ Rip includes optional packages for full-stack development:
 
 | Package | Version | Purpose |
 |---------|---------|---------|
-| [rip-lang](https://www.npmjs.com/package/rip-lang) | 3.7.0 | Core language compiler |
+| [rip-lang](https://www.npmjs.com/package/rip-lang) | 3.7.4 | Core language compiler |
 | [@rip-lang/api](packages/api/) | 1.1.4 | HTTP framework (Sinatra-style routing, 37 validators) |
 | [@rip-lang/server](packages/server/) | 1.1.3 | Multi-worker app server (hot reload, HTTPS, mDNS) |
 | [@rip-lang/db](packages/db/) | 1.1.2 | DuckDB server with official UI (pure Bun FFI) |
@@ -390,7 +390,7 @@ rip file.rip           # Run
 rip -c file.rip        # Compile
 rip -t file.rip        # Tokens
 rip -s file.rip        # S-expressions
-bun run test           # 1219 tests
+bun run test           # 1225 tests
 bun run parser         # Rebuild parser
 bun run browser        # Build browser bundle
 ```

package/docs/RIP-LANG.md

@@ -412,7 +412,14 @@ users .= map -> it.name
 users .= sort()
 ```
 
-Works with any method — built-in or custom, with or without arguments.
+Works with any method — built-in or custom, with or without arguments. Spacing
+is flexible — all of these are equivalent:
+
+```coffee
+str .= trim()          # canonical (spaced)
+str.=trim()            # compact (no spaces)
+str .=trim()           # mixed
+```
 
 ## Merge Assignment (`*`)
 

package/docs/dist/rip.browser.js

@@ -439,7 +439,7 @@ function collectStructuralType(tokens, indentIdx) {
         optional = true;
         j++;
       }
-      if (tokens[j]?.[1] === ":")
+      if (tokens[j]?.[1] === ":" || tokens[j]?.[0] === "TYPE_ANNOTATION")
         j++;
       let propTypeTokens = [];
       let typeDepth = 0;
@@ -1993,13 +1993,18 @@ class Lexer {
     if (CODE_RE.test(val))
       this.tagParameters();
     if (val === "=" && prev && prev[1] === "." && !prev.spaced) {
-      let target = this.tokens[this.tokens.length - 2];
-      if (target && (target[0] === "IDENTIFIER" || target[0] === "PROPERTY" || target[0] === ")" || target[0] === "]")) {
+      let tokens = this.tokens;
+      let j = tokens.length - 2;
+      while (j >= 1 && tokens[j][0] === "PROPERTY" && tokens[j - 1]?.[1] === ".")
+        j -= 2;
+      if (j >= 0 && (tokens[j][0] === "IDENTIFIER" || tokens[j][0] === ")" || tokens[j][0] === "]")) {
+        let chainTokens = tokens.slice(j, tokens.length - 1);
         prev[0] = "=";
         prev[1] = "=";
-        let targetClone = tok(target[0], target[1], { pre: 0, row: target[2], col: target[3], len: target[4] });
-        let dot = tok(".", ".", { pre: 0, row: this.row, col: this.col, len: 1 });
-        this.tokens.push(targetClone, dot);
+        for (let t of chainTokens) {
+          this.tokens.push(tok(t[0], t[1], { pre: 0, row: t[2], col: t[3], len: t[4] }));
+        }
+        this.tokens.push(tok(".", ".", { pre: 0, row: this.row, col: this.col, len: 1 }));
         return val.length;
       }
     }
@@ -2044,21 +2049,40 @@ class Lexer {
       tag = "REACT_ASSIGN";
     else if (val === "=!")
       tag = "READONLY_ASSIGN";
-    else if (val === "*" && (!prev || prev[0] === "TERMINATOR" || prev[0] === "INDENT" || prev[0] === "OUTDENT") && /^[a-zA-Z_$]/.test(this.chunk[1] || "")) {
+    else if (val === "*" && (!prev || prev[0] === "TERMINATOR" || prev[0] === "INDENT" || prev[0] === "OUTDENT") && (/^[a-zA-Z_$]/.test(this.chunk[1] || "") || this.chunk[1] === "@")) {
       let rest = this.chunk.slice(1);
+      let mAt = /^@(\s*)=(?!=)/.exec(rest);
+      if (mAt) {
+        let space = mAt[1];
+        this.emit("IDENTIFIER", "Object");
+        this.emit(".", ".");
+        let t = this.emit("PROPERTY", "assign");
+        t.spaced = true;
+        this.emit("@", "@");
+        this.emit(",", ",");
+        return 1 + 1 + space.length + 1;
+      }
       let m = /^((?:(?!\s)[$\w\x7f-\uffff])+(?:\.[a-zA-Z_$][\w]*)*)(\s*)=(?!=)/.exec(rest);
       if (m) {
         let target = m[1], space = m[2];
+        let parts = target.split(".");
+        let emitTarget = () => {
+          this.emit("IDENTIFIER", parts[0]);
+          for (let i = 1;i < parts.length; i++) {
+            this.emit(".", ".");
+            this.emit("PROPERTY", parts[i]);
+          }
+        };
+        emitTarget();
+        this.emit("=", "=");
         this.emit("IDENTIFIER", "Object");
         this.emit(".", ".");
         this.emit("PROPERTY", "assign");
         this.emit("CALL_START", "(");
-        let parts = target.split(".");
-        this.emit("IDENTIFIER", parts[0]);
-        for (let i = 1;i < parts.length; i++) {
-          this.emit(".", ".");
-          this.emit("PROPERTY", parts[i]);
-        }
+        emitTarget();
+        this.emit("COMPOUND_ASSIGN", "??=");
+        this.emit("{", "{");
+        this.emit("}", "}");
         this.emit(",", ",");
         let comma = this.prev();
         comma.mergeClose = true;
@@ -2353,7 +2377,7 @@ class Lexer {
         let prevToken = i > 0 ? tokens[i - 1] : null;
         let prevTag = prevToken ? prevToken[0] : null;
         let atLineStart = prevTag === "INDENT" || prevTag === "TERMINATOR";
-        let cxToken = gen("PROPERTY", "__cx__", token);
+        let cxToken = gen("PROPERTY", "__clsx", token);
         nextToken[0] = "CALL_START";
         let depth = 1;
         for (let j = i + 2;j < tokens.length && depth > 0; j++) {
@@ -2403,6 +2427,10 @@ class Lexer {
           return 3;
         }
       }
+      if (tag === "IDENTIFIER" && isComponent(token[1]) && nextToken && (nextToken[0] === "OUTDENT" || nextToken[0] === "TERMINATOR")) {
+        tokens.splice(i + 1, 0, gen("CALL_START", "(", token), gen("CALL_END", ")", token));
+        return 3;
+      }
       return 1;
     });
   }
@@ -3566,6 +3594,9 @@ function installComponentSupport(CodeGenerator) {
       if (typeof sexpr === "string" && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
         return [".", [".", "this", sexpr], "value"];
       }
+      if (typeof sexpr === "string" && this.componentMembers && this.componentMembers.has(sexpr)) {
+        return [".", "this", sexpr];
+      }
       return sexpr;
     }
     if (sexpr[0] === "." && sexpr[1] === "this" && typeof sexpr[2] === "string") {
@@ -3660,17 +3691,15 @@ function installComponentSupport(CodeGenerator) {
     this.reactiveMembers = reactiveMembers;
     const lines = [];
     let blockFactoriesCode = "";
-    lines.push("class {");
-    lines.push("  constructor(props = {}) {");
-    lines.push("    const __prevComponent = __pushComponent(this);");
-    lines.push("");
+    lines.push("class extends __Component {");
+    lines.push("  _init(props) {");
     for (const { name, value } of readonlyVars) {
       const val = this.generateInComponent(value, "value");
       lines.push(`    this.${name} = props.${name} ?? ${val};`);
     }
     for (const { name, value } of stateVars) {
       const val = this.generateInComponent(value, "value");
-      lines.push(`    this.${name} = isSignal(props.${name}) ? props.${name} : __state(props.${name} ?? ${val});`);
+      lines.push(`    this.${name} = __state(props.${name} ?? ${val});`);
     }
     for (const { name, expr } of derivedVars) {
       const val = this.generateInComponent(expr, "value");
@@ -3681,8 +3710,6 @@ function installComponentSupport(CodeGenerator) {
       const effectCode = this.generateInComponent(effectBody, "value");
       lines.push(`    __effect(${effectCode});`);
     }
-    lines.push("");
-    lines.push("    __popComponent(__prevComponent);");
     lines.push("  }");
     for (const { name, func } of methods) {
       if (Array.isArray(func) && (func[0] === "->" || func[0] === "=>")) {
@@ -3723,21 +3750,6 @@ function installComponentSupport(CodeGenerator) {
         lines.push("  }");
       }
     }
-    lines.push("  mount(target) {");
-    lines.push('    if (typeof target === "string") target = document.querySelector(target);');
-    lines.push("    this._target = target;");
-    lines.push("    this._root = this._create();");
-    lines.push("    target.appendChild(this._root);");
-    lines.push("    if (this._setup) this._setup();");
-    lines.push("    if (this.mounted) this.mounted();");
-    lines.push("    return this;");
-    lines.push("  }");
-    lines.push("  unmount() {");
-    lines.push("    if (this.unmounted) this.unmounted();");
-    lines.push("    if (this._root && this._root.parentNode) {");
-    lines.push("      this._root.parentNode.removeChild(this._root);");
-    lines.push("    }");
-    lines.push("  }");
     lines.push("}");
     this.componentMembers = prevComponentMembers;
     this.reactiveMembers = prevReactiveMembers;
@@ -3754,6 +3766,9 @@ ${blockFactoriesCode}return ${lines.join(`
     if (typeof sexpr === "string" && this.reactiveMembers && this.reactiveMembers.has(sexpr)) {
       return `this.${sexpr}.value`;
     }
+    if (typeof sexpr === "string" && this.componentMembers && this.componentMembers.has(sexpr)) {
+      return `this.${sexpr}`;
+    }
     if (Array.isArray(sexpr) && this.reactiveMembers) {
       const transformed = this.transformComponentMembers(sexpr);
       return this.generate(transformed, context);
@@ -3840,11 +3855,9 @@ ${blockFactoriesCode}return ${lines.join(`
           this._setupLines.push(`__effect(() => { ${textVar3}.data = this.${prop}.value; });`);
           return textVar3;
         }
-        if (this.componentMembers && this.componentMembers.has(prop)) {
-          const slotVar = this.newElementVar("slot");
-          this._createLines.push(`${slotVar} = this.${prop} instanceof Node ? this.${prop} : (this.${prop} != null ? document.createTextNode(String(this.${prop})) : document.createComment(''));`);
-          return slotVar;
-        }
+        const slotVar = this.newElementVar("slot");
+        this._createLines.push(`${slotVar} = this.${prop} instanceof Node ? this.${prop} : (this.${prop} != null ? document.createTextNode(String(this.${prop})) : document.createComment(''));`);
+        return slotVar;
       }
       const { tag, classes } = this.collectTemplateClasses(sexpr);
       if (tag && this.isHtmlTag(tag)) {
@@ -3856,14 +3869,14 @@ ${blockFactoriesCode}return ${lines.join(`
       return textVar2;
     }
     if (Array.isArray(head)) {
-      if (Array.isArray(head[0]) && head[0][0] === "." && (head[0][2] === "__cx__" || head[0][2] instanceof String && head[0][2].valueOf() === "__cx__")) {
+      if (Array.isArray(head[0]) && head[0][0] === "." && (head[0][2] === "__clsx" || head[0][2] instanceof String && head[0][2].valueOf() === "__clsx")) {
         const tag2 = typeof head[0][1] === "string" ? head[0][1] : head[0][1].valueOf();
         const classExprs = head.slice(1);
         return this.generateDynamicTag(tag2, classExprs, rest);
       }
       const { tag, classes } = this.collectTemplateClasses(head);
       if (tag && this.isHtmlTag(tag)) {
-        if (classes.length === 1 && classes[0] === "__cx__") {
+        if (classes.length === 1 && classes[0] === "__clsx") {
           return this.generateDynamicTag(tag, rest, []);
         }
         return this.generateTag(tag, classes, rest);
@@ -3947,9 +3960,9 @@ ${blockFactoriesCode}return ${lines.join(`
       const classArgs = classExprs.map((e) => this.generateInComponent(e, "value")).join(", ");
       const hasReactive = classExprs.some((e) => this.hasReactiveDeps(e));
       if (hasReactive) {
-        this._setupLines.push(`__effect(() => { ${elVar}.className = __cx__(${classArgs}); });`);
+        this._setupLines.push(`__effect(() => { ${elVar}.className = __clsx(${classArgs}); });`);
       } else {
-        this._createLines.push(`${elVar}.className = __cx__(${classArgs});`);
+        this._createLines.push(`${elVar}.className = __clsx(${classArgs});`);
       }
     }
     for (const arg of children) {
@@ -3993,8 +4006,12 @@ ${blockFactoriesCode}return ${lines.join(`
       let [key, value] = objExpr[i];
       if (this.is(key, ".") && key[1] === "this") {
         const eventName = key[2];
-        const handlerCode = this.generateInComponent(value, "value");
-        this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => (${handlerCode})(e));`);
+        if (typeof value === "string" && this.componentMembers?.has(value)) {
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => this.${value}(e));`);
+        } else {
+          const handlerCode = this.generateInComponent(value, "value");
+          this._createLines.push(`${elVar}.addEventListener('${eventName}', (e) => (${handlerCode})(e));`);
+        }
         continue;
       }
       if (typeof key === "string") {
@@ -4350,10 +4367,6 @@ ${blockFactoriesCode}return ${lines.join(`
 // Rip Component Runtime
 // ============================================================================
 
-function isSignal(v) {
-  return v != null && typeof v === 'object' && typeof v.read === 'function';
-}
-
 let __currentComponent = null;
 
 function __pushComponent(component) {
@@ -4391,13 +4404,38 @@ function hasContext(key) {
   return false;
 }
 
-function __cx__(...args) {
+function __clsx(...args) {
   return args.filter(Boolean).join(' ');
 }
 
+class __Component {
+  constructor(props = {}) {
+    Object.assign(this, props);
+    const prev = __pushComponent(this);
+    this._init(props);
+    __popComponent(prev);
+  }
+  _init() {}
+  mount(target) {
+    if (typeof target === "string") target = document.querySelector(target);
+    this._target = target;
+    this._root = this._create();
+    target.appendChild(this._root);
+    if (this._setup) this._setup();
+    if (this.mounted) this.mounted();
+    return this;
+  }
+  unmount() {
+    if (this.unmounted) this.unmounted();
+    if (this._root && this._root.parentNode) {
+      this._root.parentNode.removeChild(this._root);
+    }
+  }
+}
+
 // Register on globalThis for runtime deduplication
 if (typeof globalThis !== 'undefined') {
-  globalThis.__ripComponent = { isSignal, __pushComponent, __popComponent, setContext, getContext, hasContext, __cx__ };
+  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component };
 }
 
 `;
@@ -4784,6 +4822,7 @@ class CodeGenerator {
     this.programVars = new Set;
     this.functionVars = new Map;
     this.helpers = new Set;
+    this.scopeStack = [];
     this.collectProgramVariables(sexpr);
     let code = this.generate(sexpr);
     if (this.sourceMap)
@@ -5213,7 +5252,7 @@ class CodeGenerator {
     }
     if (this.usesTemplates && !skip) {
       if (typeof globalThis !== "undefined" && globalThis.__ripComponent) {
-        code += `const { isSignal, __pushComponent, __popComponent, setContext, getContext, hasContext, __cx__ } = globalThis.__ripComponent;
+        code += `const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __Component } = globalThis.__ripComponent;
 `;
       } else {
         code += this.getComponentRuntime();
@@ -5638,7 +5677,7 @@ ${this.indent()}}`;
   generateLoopN(head, rest) {
     let [count, body] = rest;
     let n = this.generate(count, "value");
-    return `for (let _i = 0; _i < ${n}; _i++) ${this.generateLoopBody(body)}`;
+    return `for (let it = 0; it < ${n}; it++) ${this.generateLoopBody(body)}`;
   }
   generateAwait(head, rest) {
     return `await ${this.generate(rest[0], "value")}`;
@@ -6686,9 +6725,10 @@ export default ${expr[1]}`;
     if (Array.isArray(params))
       params.forEach(extractPN);
     let bodyVars = this.collectFunctionVariables(body);
-    let newVars = new Set([...bodyVars].filter((v) => !this.programVars.has(v) && !this.reactiveVars?.has(v) && !paramNames.has(v)));
+    let newVars = new Set([...bodyVars].filter((v) => !this.programVars.has(v) && !this.reactiveVars?.has(v) && !paramNames.has(v) && !this.scopeStack.some((s) => s.has(v))));
     let noRetStmts = ["return", "throw", "break", "continue"];
     let loopStmts = ["for-in", "for-of", "for-as", "while", "until", "loop"];
+    this.scopeStack.push(new Set([...newVars, ...paramNames]));
     if (this.is(body, "block")) {
       let statements = this.unwrapBlock(body);
       if (hasExpansionParams && this.expansionAfterParams?.length > 0) {
@@ -6788,17 +6828,22 @@ export default ${expr[1]}`;
       }
       this.indentLevel--;
       code += this.indent() + "}";
+      this.scopeStack.pop();
       this.sideEffectOnly = prevSEO;
       return code;
     }
     this.sideEffectOnly = prevSEO;
+    let result;
     if (isConstructor || this.hasExplicitControlFlow(body))
-      return `{ ${this.generate(body, "statement")}; }`;
-    if (Array.isArray(body) && (noRetStmts.includes(body[0]) || loopStmts.includes(body[0])))
-      return `{ ${this.generate(body, "statement")}; }`;
-    if (sideEffectOnly)
-      return `{ ${this.generate(body, "statement")}; return; }`;
-    return `{ return ${this.generate(body, "value")}; }`;
+      result = `{ ${this.generate(body, "statement")}; }`;
+    else if (Array.isArray(body) && (noRetStmts.includes(body[0]) || loopStmts.includes(body[0])))
+      result = `{ ${this.generate(body, "statement")}; }`;
+    else if (sideEffectOnly)
+      result = `{ ${this.generate(body, "statement")}; return; }`;
+    else
+      result = `{ return ${this.generate(body, "value")}; }`;
+    this.scopeStack.pop();
+    return result;
   }
   generateFunctionBody(body, params = [], sideEffectOnly = false) {
     return this.generateBodyWithReturns(body, params, { sideEffectOnly, hasExpansionParams: this.expansionAfterParams?.length > 0 });
@@ -7734,6 +7779,7 @@ const __primitiveCoercion = {
 };
 
 function __state(initialValue) {
+  if (initialValue != null && typeof initialValue === 'object' && typeof initialValue.read === 'function') return initialValue;
   let value = initialValue;
   const subscribers = new Set();
   let notifying = false;
@@ -8028,8 +8074,8 @@ function getComponentRuntime() {
   return new CodeGenerator({}).getComponentRuntime();
 }
 // src/browser.js
-var VERSION = "3.7.0";
-var BUILD_DATE = "2026-02-11@09:35:09GMT";
+var VERSION = "3.7.4";
+var BUILD_DATE = "2026-02-11@13:07:41GMT";
 if (typeof globalThis !== "undefined" && !globalThis.__rip) {
   new Function(getReactiveRuntime())();
 }
@@ -8045,24 +8091,23 @@ async function processRipScripts() {
       continue;
     try {
       const ripCode = dedent(script.textContent);
-      const jsCode = compileToJS(ripCode);
+      let jsCode;
+      try {
+        jsCode = compileToJS(ripCode);
+      } catch (compileError) {
+        console.error("Rip compile error:", compileError.message);
+        console.error("Source:", ripCode);
+        continue;
+      }
       await (0, eval)(`(async()=>{
 ${jsCode}
 })()`);
       script.setAttribute("data-rip-processed", "true");
     } catch (error) {
-      console.error("Error compiling Rip script:", error);
-      console.error("Script content:", script.textContent);
+      console.error("Rip runtime error:", error);
     }
   }
 }
-if (typeof document !== "undefined") {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", processRipScripts);
-  } else {
-    processRipScripts();
-  }
-}
 async function importRip(url) {
   const source = await fetch(url).then((r) => {
     if (!r.ok)
@@ -8106,6 +8151,13 @@ if (typeof globalThis !== "undefined") {
   globalThis.importRip = importRip;
   globalThis.compileToJS = compileToJS;
 }
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", processRipScripts);
+  } else {
+    processRipScripts();
+  }
+}
 export {
   rip,
   processRipScripts,