rip-lang 3.13.25 → 3.13.26

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.26-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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.13.25",
+  "version": "3.13.26",
   "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 };
 }
 
 `;