rip-lang 3.13.25 → 3.13.27

package/README.md

@@ -9,7 +9,7 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.25-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.27-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%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>
@@ -354,7 +354,7 @@ The UI framework is built into rip-lang: file-based router, reactive stash, comp
 | **Self-hosting** | No | Yes |
 | **Lexer** | 3,558 LOC | 2,024 LOC |
 | **Compiler** | 10,346 LOC | 3,293 LOC |
-| **Total** | 17,760 LOC | ~11,300 LOC |
+| **Total** | 17,760 LOC | ~11,890 LOC |
 
 Smaller codebase, modern output, built-in reactivity.
 
@@ -389,25 +389,25 @@ await rip("res = fetch! 'https://api.example.com/todos/1'; res.json!")  // → {
 
 ```
 Source  ->  Lexer  ->  emitTypes  ->  Parser  ->  S-Expressions  ->  Codegen  ->  JavaScript
-           (1,761)    (types.js)     (359)       ["=", "x", 42]     (3,293)      + source map
+           (1,778)    (types.js)     (359)       ["=", "x", 42]     (3,334)      + source map
 ```
 
 Simple arrays (with `.loc`) instead of AST node classes. The compiler is self-hosting — `bun run parser` rebuilds from source.
 
 | Component | File | Lines |
 |-----------|------|-------|
-| Lexer + Rewriter | `src/lexer.js` | 1,761 |
-| Compiler + Codegen | `src/compiler.js` | 3,303 |
-| Type System | `src/types.js` | 1,099 |
-| Component System | `src/components.js` | 1,877 |
+| Lexer + Rewriter | `src/lexer.js` | 1,778 |
+| Compiler + Codegen | `src/compiler.js` | 3,334 |
+| Type System | `src/types.js` | 1,091 |
+| Component System | `src/components.js` | 2,026 |
 | Source Maps | `src/sourcemaps.js` | 189 |
-| Parser (generated) | `src/parser.js` | 357 |
-| Grammar | `src/grammar/grammar.rip` | 944 |
+| Type Checking | `src/typecheck.js` | 442 |
+| Parser (generated) | `src/parser.js` | 359 |
+| Grammar | `src/grammar/grammar.rip` | 948 |
 | Parser Generator | `src/grammar/solar.rip` | 929 |
-| REPL | `src/repl.js` | 601 |
-| Browser Entry | `src/browser.js` | 167 |
-| Tags | `src/tags.js` | 62 |
-| **Total** | | **~11,289** |
+| REPL | `src/repl.js` | 600 |
+| Browser Entry | `src/browser.js` | 194 |
+| **Total** | | **~11,890** |
 
 ---
 
@@ -417,7 +417,7 @@ Rip includes optional packages for full-stack development:
 
 | Package | Version | Purpose |
 |---------|---------|---------|
-| [rip-lang](https://www.npmjs.com/package/rip-lang) | 3.13.13 | Core language compiler |
+| [rip-lang](https://www.npmjs.com/package/rip-lang) | 3.13.26 | Core language compiler |
 | [@rip-lang/server](packages/server/) | 1.2.11 | Multi-worker app server (web framework, hot reload, HTTPS, mDNS) |
 | [@rip-lang/db](packages/db/) | 1.3.13 | DuckDB server with official UI + ActiveRecord-style client |
 | [@rip-lang/grid](packages/grid/) | 0.2.8 | Reactive data grid |
@@ -462,7 +462,7 @@ rip file.rip           # Run
 rip -c file.rip        # Compile
 rip -t file.rip        # Tokens
 rip -s file.rip        # S-expressions
-bun run test           # 1265 tests
+bun run test           # 1369 tests
 bun run parser         # Rebuild parser
 bun run build          # Build browser bundle
 ```

package/docs/RIP-INTERNALS.md

@@ -590,4 +590,4 @@ The browser REPL (`docs/index.html`) uses a hidden iframe as its sandbox. Code i
 
 ---
 
-*Rip 3.13 — 1,265 tests — Zero dependencies — Self-hosting — ~13,500 LOC*
+*Rip 3.13 — 1,369 tests — Zero dependencies — Self-hosting — ~11,890 LOC*

package/docs/RIP-LANG.md

@@ -2,7 +2,7 @@
 
 # Rip Language Reference
 
-Rip is a modern reactive language that compiles to ES2022 JavaScript. It combines CoffeeScript's elegant syntax with built-in reactivity primitives. Zero dependencies, self-hosting, ~13,500 LOC.
+Rip is a modern reactive language that compiles to ES2022 JavaScript. It combines CoffeeScript's elegant syntax with built-in reactivity primitives. Zero dependencies, self-hosting, ~11,890 LOC.
 
 ---
 
@@ -1829,4 +1829,4 @@ Each would need design discussion before building.
 
 ---
 
-*Rip 3.13 — 1,265 tests — Zero dependencies — Self-hosting — ~13,500 LOC*
+*Rip 3.13 — 1,369 tests — Zero dependencies — Self-hosting — ~11,890 LOC*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.13.25",
+  "version": "3.13.27",
   "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, __lis, __reconcile, __Component } = globalThis.__ripComponent;\n';
+        code += 'var { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __transition, __handleComponentError, __Component } = globalThis.__ripComponent;\n';
       } else if (typeof globalThis !== 'undefined' && globalThis.__ripComponent) {
-        code += 'const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __Component } = globalThis.__ripComponent;\n';
+        code += 'const { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __transition, __handleComponentError, __Component } = globalThis.__ripComponent;\n';
       } else {
         code += this.getComponentRuntime();
       }

package/src/components.js

@@ -55,7 +55,7 @@ const TEMPLATE_TAGS = new Set([...HTML_TAGS, ...SVG_TAGS]);
 const BIND_PREFIX = '__bind_';
 const BIND_SUFFIX = '__';
 
-const LIFECYCLE_HOOKS = new Set(['beforeMount', 'mounted', 'updated', 'beforeUnmount', 'unmounted']);
+const LIFECYCLE_HOOKS = new Set(['beforeMount', 'mounted', 'updated', 'beforeUnmount', 'unmounted', 'onError']);
 const BOOLEAN_ATTRS = new Set([
   'disabled', 'hidden', 'readonly', 'required', 'checked', 'selected',
   'autofocus', 'autoplay', 'controls', 'loop', 'muted', 'multiple',
@@ -240,6 +240,19 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       // Only process if we're inside a render block
       if (!inRender) return 1;
 
+      // ─────────────────────────────────────────────────────────────────────
+      // Transition modifier
+      // div ~fade → div __transition__: "fade"
+      // ─────────────────────────────────────────────────────────────────────
+      if (tag === 'UNARY_MATH' && token[1] === '~' && nextToken && nextToken[0] === 'IDENTIFIER') {
+        token[0] = 'PROPERTY';
+        token[1] = '__transition__';
+        let colonToken = gen(':', ':', token);
+        let valueToken = gen('STRING', `"${nextToken[1]}"`, nextToken);
+        tokens.splice(i + 1, 1, colonToken, valueToken);
+        return 1;
+      }
+
       // ─────────────────────────────────────────────────────────────────────
       // Hyphenated attributes
       // data-lucide: "search" → "data-lucide": "search"
@@ -719,11 +732,12 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     // --- Lifecycle hooks ---
     for (const { name, value } of lifecycleHooks) {
       if (Array.isArray(value) && (value[0] === '->' || value[0] === '=>')) {
-        const [, , hookBody] = value;
+        const [, params, hookBody] = value;
+        const paramStr = Array.isArray(params) ? params.map(p => this.formatParam(p)).join(', ') : '';
         const transformed = this.reactiveMembers ? this.transformComponentMembers(hookBody) : hookBody;
         const isAsync = this.containsAwait(hookBody);
-        const bodyCode = this.generateFunctionBody(transformed, []);
-        lines.push(`  ${isAsync ? 'async ' : ''}${name}() ${bodyCode}`);
+        const bodyCode = this.generateFunctionBody(transformed, params || []);
+        lines.push(`  ${isAsync ? 'async ' : ''}${name}(${paramStr}) ${bodyCode}`);
       }
     }
 
@@ -1188,6 +1202,13 @@ export function installComponentSupport(CodeGenerator, Lexer) {
           continue;
         }
 
+        // Transition: __transition__: "fade" → this._t = "fade" (on block, not DOM)
+        if (key === '__transition__') {
+          const transName = String(value).replace(/^["']|["']$/g, '');
+          this._createLines.push(`this._t = "${transName}";`);
+          continue;
+        }
+
         // Element ref: ref: "name" → this.name = element
         if (key === 'ref') {
           const refName = String(value).replace(/^["']|["']$/g, '');
@@ -1330,7 +1351,9 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     setupLines.push(`    if (want === showing) return;`);
     setupLines.push(``);
     setupLines.push(`    if (currentBlock) {`);
-    setupLines.push(`      currentBlock.d(true);`);
+    setupLines.push(`      const leaving = currentBlock;`);
+    setupLines.push(`      if (leaving._t) { __transition(leaving._first, leaving._t, 'leave', () => leaving.d(true)); }`);
+    setupLines.push(`      else { leaving.d(true); }`);
     setupLines.push(`      currentBlock = null;`);
     setupLines.push(`    }`);
     setupLines.push(`    showing = want;`);
@@ -1340,6 +1363,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     setupLines.push(`      currentBlock.c();`);
     setupLines.push(`      if (anchor.parentNode) currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
     setupLines.push(`      currentBlock.p(${this._self}${outerExtra});`);
+    setupLines.push(`      if (currentBlock._t) __transition(currentBlock._first, currentBlock._t, 'enter');`);
     setupLines.push(`    }`);
     if (elseBlock) {
       setupLines.push(`    if (want === 'else') {`);
@@ -1347,6 +1371,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
       setupLines.push(`      currentBlock.c();`);
       setupLines.push(`      if (anchor.parentNode) currentBlock.m(anchor.parentNode, anchor.nextSibling);`);
       setupLines.push(`      currentBlock.p(${this._self}${outerExtra});`);
+      setupLines.push(`      if (currentBlock._t) __transition(currentBlock._first, currentBlock._t, 'enter');`);
       setupLines.push(`    }`);
     }
     setupLines.push(`  ${effClose}`);
@@ -1553,8 +1578,7 @@ export function installComponentSupport(CodeGenerator, Lexer) {
     this._createLines.push(`${elVar} = ${instVar}._create();`);
     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();`);
+    this._setupLines.push(`try { if (${instVar}._setup) ${instVar}._setup(); if (${instVar}.mounted) ${instVar}.mounted(); } catch (__e) { __handleComponentError(__e, ${instVar}); }`);
 
     for (const { key, valueCode } of reactiveProps) {
       this._pushEffect(`if (${instVar}.${key}) ${instVar}.${key}.value = ${valueCode};`);
@@ -1904,21 +1928,75 @@ function __reconcile(anchor, state, items, ctx, factory, keyFn, ...outer) {
   state.blocks = newBlocks;
 }
 
+let __cssInjected = false;
+function __transitionCSS() {
+  if (__cssInjected) return;
+  __cssInjected = true;
+  const s = document.createElement('style');
+  s.textContent = [
+    '.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}',
+    '.fade-enter-from,.fade-leave-to{opacity:0}',
+    '.slide-enter-active,.slide-leave-active{transition:opacity .2s ease,transform .2s ease}',
+    '.slide-enter-from{opacity:0;transform:translateY(-8px)}',
+    '.slide-leave-to{opacity:0;transform:translateY(8px)}',
+    '.scale-enter-active,.scale-leave-active{transition:opacity .2s ease,transform .2s ease}',
+    '.scale-enter-from,.scale-leave-to{opacity:0;transform:scale(.95)}',
+    '.blur-enter-active,.blur-leave-active{transition:opacity .2s ease,filter .2s ease}',
+    '.blur-enter-from,.blur-leave-to{opacity:0;filter:blur(4px)}',
+    '.fly-enter-active,.fly-leave-active{transition:opacity .2s ease,transform .2s ease}',
+    '.fly-enter-from{opacity:0;transform:translateY(-20px)}',
+    '.fly-leave-to{opacity:0;transform:translateY(20px)}',
+  ].join('');
+  document.head.appendChild(s);
+}
+
+function __transition(el, name, dir, done) {
+  __transitionCSS();
+  const cl = el.classList;
+  const from = name + '-' + dir + '-from';
+  const active = name + '-' + dir + '-active';
+  const to = name + '-' + dir + '-to';
+  cl.add(from, active);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      cl.remove(from);
+      cl.add(to);
+      const end = () => { cl.remove(active, to); if (done) done(); };
+      el.addEventListener('transitionend', end, { once: true });
+    });
+  });
+}
+
+function __handleComponentError(error, component) {
+  let current = component;
+  while (current) {
+    if (current.onError) {
+      try { current.onError(error, component); return; } catch (_) {}
+    }
+    current = current._parent;
+  }
+  throw error;
+}
+
 class __Component {
   constructor(props = {}) {
     Object.assign(this, props);
     const prev = __pushComponent(this);
-    this._init(props);
+    try { this._init(props); } catch (e) { __popComponent(prev); __handleComponentError(e, this); return; }
     __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();
+    try {
+      this._root = this._create();
+      target.appendChild(this._root);
+      if (this._setup) this._setup();
+      if (this.mounted) this.mounted();
+    } catch (error) {
+      __handleComponentError(error, this);
+    }
     return this;
   }
   unmount() {
@@ -1939,7 +2017,7 @@ class __Component {
 
 // Register on globalThis for runtime deduplication
 if (typeof globalThis !== 'undefined') {
-  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __Component };
+  globalThis.__ripComponent = { __pushComponent, __popComponent, setContext, getContext, hasContext, __clsx, __lis, __reconcile, __transition, __handleComponentError, __Component };
 }
 
 `;